:root{
  --navy:#0b1f3b;
  --blue:#1b4fd6;
  --red:#e63946;
  --text:#0e1726;
  --muted:#f4f6f9;
  --radius:18px;
  --max:1160px;
  --shadow:0 12px 30px rgba(0,0,0,.10);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial;
  color:var(--text);
  background:#fff;

  /* ✅ Ajout : espace pour la barre + le header en fixed */
  padding-top:78px; /* 6px stripe + ~72px header */
}

/* ================= HEADER FIXE + DRAPEAU ATTACHÉ ================= */
.header{
  position: fixed;
  top: 6px;            /* hauteur de .top-stripe */
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(11,31,59,.95);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

/* ✅ FIX : la barre tricolore est forcée tout en haut, indépendamment des pages */
.top-stripe{
  height:6px;
  background:linear-gradient(90deg,var(--blue) 0 33%,#fff 33% 66%,var(--red) 66% 100%);

  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:10000;

  /* ✅ FIX : éviter tout décalage "parasite" (marges/transform/line-height) */
  margin:0;
  padding:0;
  display:block;
}

.nav{
  max-width:var(--max);
  margin:auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{
  color:#fff;
  font-weight:900;
  text-decoration:none;
  font-size:18px;
  letter-spacing:.3px;
}

.nav-links{
  display:flex;
  gap:16px;
  align-items:center;
}

.nav-links a{
  color:#fff;
  text-decoration:none;
  font-weight:800;
  padding:8px 12px;
  border-radius:10px;
  opacity:.95;
}

.nav-links a:hover,
.nav-links a.active{
  background:rgba(255,255,255,.15);
}

.btn-primary{
  background:linear-gradient(135deg,var(--blue),var(--red));
  color:#fff;
  padding:10px 14px;
  border-radius:12px;
  text-decoration:none;
  font-weight:900;
  white-space:nowrap;
}

@media(max-width:900px){
  .nav-links{display:none}
}

/* ================= HERO + SLIDER ================= */
.hero{
  position:relative;
  min-height:72vh;
  color:#fff;
  display:flex;
  align-items:center;
  overflow:hidden;
}

.slider{
  position:absolute;
  inset:0;
  z-index:0;
}

.slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1.03);
  transition:opacity .8s ease, transform 1.2s ease;
}

.slide.active{
  opacity:1;
  transform:scale(1);
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.14), rgba(255,255,255,0) 55%),
    linear-gradient(90deg, rgba(11,31,59,.78), rgba(11,31,59,.35) 60%, rgba(11,31,59,.18));
}

.wrap{
  max-width:var(--max);
  margin:auto;
  padding:0 18px;
}

.hero-content{
  position:relative;
  z-index:2;
  padding:52px 0;
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  font-weight:900;
}

.dot{
  width:10px;height:10px;border-radius:99px;
  background:linear-gradient(135deg,var(--blue),var(--red));
}

.hero h1{
  font-size:clamp(34px,4.4vw,56px);
  line-height:1.06;
  margin:14px 0 12px;
}

.hero p{
  font-size:18px;
  line-height:1.65;
  max-width:780px;
  margin:0 0 18px;
  color:rgba(255,255,255,.92);
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}

.btn{
  background:rgba(255,255,255,.12);
  color:#fff;
  padding:10px 14px;
  border-radius:12px;
  text-decoration:none;
  font-weight:900;
  border:1px solid rgba(255,255,255,.18);
}
.btn:hover{background:rgba(255,255,255,.16)}

.badges{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}

.badge{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  padding:10px 12px;
  border-radius:14px;
  font-weight:900;
  color:rgba(255,255,255,.94);
}

/* ================= SECTIONS ================= */
.section{ padding:64px 0; }
.section.muted{ background:linear-gradient(180deg,var(--muted),#fff); }

.section h2{
  margin:0 0 10px;
  font-size:clamp(26px,2.6vw,36px);
}

.section .lead{
  margin:0 0 18px;
  color:#445268;
  line-height:1.65;
  max-width:820px;
}

/* ================= GRID / CARDS ================= */
.grid{ display:grid; gap:18px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media(max-width:900px){
  .grid-3,.grid-2{grid-template-columns:1fr}
}

.card{
  background:#fff;
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
  border:1px solid rgba(11,31,59,.06);
}

.card h3{ margin:0 0 10px; }
.card p{ margin:0; color:#445268; line-height:1.7; }

.small{
  font-size:13px;
  color:#5b6b84;
  line-height:1.6;
}

.pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  font-weight:900;
  background:rgba(11,31,59,.06);
  border:1px solid rgba(11,31,59,.10);
  margin:6px 8px 0 0;
}

/* Portfolio */
.portfolio-item{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(11,31,59,.10);
  box-shadow:var(--shadow);
  background:#fff;
}
.portfolio-thumb{
  height:180px;
  background-size:cover;
  background-position:center;
}
.portfolio-body{padding:16px}
.portfolio-body h3{margin:0 0 6px}
.portfolio-body p{margin:0; color:#445268; line-height:1.65}

/* FAQ */
.faq details{
  background:#fff;
  border-radius:14px;
  padding:14px 16px;
  border:1px solid rgba(11,31,59,.10);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}
.faq summary{ cursor:pointer; font-weight:900; }
.faq p{ margin:10px 0 0; color:#445268; line-height:1.7; }

/* Form */
input,textarea{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(12,24,40,.18);
  font-size:15px;
  outline:none;
}
input:focus,textarea:focus{
  border-color:rgba(27,79,214,.55);
  box-shadow:0 0 0 4px rgba(27,79,214,.14);
}
textarea{min-height:120px}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media(max-width:700px){ .form-row{grid-template-columns:1fr} }

button{
  background:var(--navy);
  color:#fff;
  border:none;
  padding:12px 14px;
  border-radius:12px;
  font-weight:900;
  cursor:pointer;
}
button:hover{filter:brightness(1.05)}

/* Map */
.map-wrap{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(11,31,59,.10);
  box-shadow:var(--shadow);
}
.map-wrap iframe{
  width:100%;
  height:380px;
  border:0;
  display:block;
}

/* Footer */
footer{
  background:var(--navy);
  color:#fff;
  padding:26px 0;
}
footer a{color:#fff; text-decoration:none; font-weight:800}
footer a:hover{text-decoration:underline}
.footer-line{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}

/* WhatsApp (milieu à droite) */
.whatsapp{
  position:fixed;
  top:50%;
  right:18px;
  transform:translateY(-50%);
  background:#25D366;
  color:#fff;
  padding:12px 16px;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
  z-index:60;
}

/* ✅ Animation rebond (logo/bouton WhatsApp non statique) */
@keyframes wBounce{
  0%, 100% { transform: translateY(-50%) scale(1); }
  50%      { transform: translateY(-53%) scale(1.03); }
}
.whatsapp{
  animation: wBounce 1.6s ease-in-out infinite;
}
.whatsapp:hover{
  animation-play-state: paused;
  filter: brightness(1.03);
}

/* ================= RGPD FORM ================= */
.rgpd-box{
  margin-top:12px;
  padding:12px 12px;
  border-radius:14px;
  background:rgba(11,31,59,.04);
  border:1px solid rgba(11,31,59,.10);
}

.rgpd-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.rgpd-row input[type="checkbox"]{
  width:18px;
  height:18px;
  margin-top:2px;
  accent-color: var(--blue);
}

.rgpd-text{
  font-size:13px;
  color:#445268;
  line-height:1.55;
}

.rgpd-text a{
  color:#0b1f3b;
  font-weight:900;
  text-decoration:underline;
}

/* ================= COOKIE BANNER ================= */
.cookie-banner{
  position:fixed;
  left:18px;
  right:18px;
  bottom:18px;
  z-index:999;
  background:#fff;
  border-radius:18px;
  border:1px solid rgba(11,31,59,.10);
  box-shadow:0 18px 50px rgba(0,0,0,.18);
  padding:14px 14px;
  display:none;
}

.cookie-inner{
  max-width:var(--max);
  margin:auto;
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.cookie-text{
  color:#2c3a52;
  font-size:14px;
  line-height:1.55;
  max-width:820px;
}

.cookie-text a{
  color:#0b1f3b;
  font-weight:900;
  text-decoration:underline;
}

.cookie-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.btn-cookie{
  border-radius:12px;
  padding:10px 12px;
  font-weight:900;
  border:1px solid rgba(11,31,59,.14);
  background:#fff;
  cursor:pointer;
}

.btn-cookie:hover{
  background:rgba(11,31,59,.05);
}

.btn-cookie-accept{
  border:0;
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--red));
}

.btn-cookie-accept:hover{filter:brightness(1.03)}

/* ================= WAOUH CYCLE PROCESS (SEO) ================= */
.cycle{
  margin-top:18px;
  border-radius:var(--radius);
  border:1px solid rgba(11,31,59,.10);
  box-shadow:var(--shadow);
  background:#fff;
  overflow:hidden;
}

.cycle-head{ padding:18px 18px 0; }

.cycle-wrap{
  padding:18px;
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:18px;
  align-items:stretch;
}

@media(max-width:980px){
  .cycle-wrap{ grid-template-columns:1fr; }
}

.cycle-stage{
  position:relative;
  border-radius:18px;
  border:1px solid rgba(11,31,59,.10);
  background:
    radial-gradient(circle at 30% 20%, rgba(27,79,214,.10), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 70% 75%, rgba(230,57,70,.10), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(11,31,59,.04), rgba(11,31,59,.02));
  min-height:420px;
  display:grid;
  place-items:center;
  overflow:hidden;
}

.cycle-ring{
  position:absolute;
  width:320px;
  height:320px;
  border-radius:999px;
  border:2px dashed rgba(11,31,59,.18);
  opacity:.85;
}

.cycle-ring::after{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:999px;
  border:1px solid rgba(11,31,59,.10);
  opacity:.7;
}

.cycle-glow{
  position:absolute;
  width:420px;
  height:420px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(27,79,214,.10), rgba(255,255,255,0) 60%);
  filter: blur(1px);
  animation: breathe 4.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes breathe{
  0%,100%{ transform:scale(1); opacity:.65 }
  50%{ transform:scale(1.04); opacity:1 }
}

.cycle-center{
  position:relative;
  width:min(560px, 92%);
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(11,31,59,.12);
  box-shadow:0 18px 50px rgba(0,0,0,.14);
  padding:18px;
  z-index:3;
}

.cycle-tag{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(11,31,59,.06);
  border:1px solid rgba(11,31,59,.10);
  font-weight:1000;
  font-size:12px;
  color:#0b1f3b;
}

.cycle-center h3{ margin:10px 0 8px; }
.cycle-center p{ margin:0; color:#445268; line-height:1.7; }

.cycle-controls{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin-top:14px;
}

.cycle-nav{ display:flex; gap:10px; }
.btn-icon{
  width:44px;height:44px;
  border-radius:14px;
  border:1px solid rgba(11,31,59,.14);
  background:#fff;
  cursor:pointer;
  font-weight:1000;
}
.btn-icon:hover{ background:rgba(11,31,59,.05); }

.cycle-count{
  font-weight:1000;
  color:#0b1f3b;
  font-size:13px;
}

.node{
  position:absolute;
  width:128px;
  padding:10px 10px;
  border-radius:16px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(11,31,59,.12);
  box-shadow:0 12px 30px rgba(0,0,0,.10);
  cursor:pointer;
  user-select:none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  z-index:4;
}

.node:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(0,0,0,.14);
}

.node .n{
  font-weight:1000;
  color:rgba(11,31,59,.70);
  font-size:12px;
}

.node .t{
  font-weight:1000;
  color:#0b1f3b;
  font-size:13px;
  margin-top:4px;
  line-height:1.2;
}

.node.active{
  border-color: rgba(27,79,214,.35);
  box-shadow:0 18px 50px rgba(0,0,0,.18);
}

.node.active::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:18px;
  background: linear-gradient(135deg, rgba(27,79,214,.18), rgba(230,57,70,.14));
  z-index:-1;
}

.node.p1{ top:18px; left:50%; transform:translateX(-50%); }
.node.p2{ top:92px; right:22px; }
.node.p3{ bottom:92px; right:22px; }
.node.p4{ bottom:18px; left:50%; transform:translateX(-50%); }
.node.p5{ bottom:92px; left:22px; }
.node.p6{ top:92px; left:22px; }

.cycle-side{
  border-radius:18px;
  border:1px solid rgba(11,31,59,.10);
  background:rgba(11,31,59,.03);
  padding:16px;
}

.cycle-side h4{ margin:0 0 10px; }
.cycle-side ul{
  margin:0;
  padding-left:18px;
  color:#445268;
  line-height:1.8;
}

.progress{
  margin-top:12px;
  height:10px;
  border-radius:999px;
  background:rgba(11,31,59,.08);
  overflow:hidden;
  border:1px solid rgba(11,31,59,.10);
}

.progress > div{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(135deg, var(--blue), var(--red));
  transition: width .35s ease;
}

/* ===== CYCLE PRO (SEO LOCAL) ===== */
.cycle-pro{
  display:grid;
  grid-template-columns: 1.35fr .95fr;
  gap:18px;
  align-items:stretch;
  margin-top:18px;
}

.cycle-left .cycle-ring{
  position:relative;
  border-radius: 22px;
  padding: 22px;
  background: radial-gradient(800px 420px at 30% 20%, rgba(27,79,214,.12), transparent 55%),
              radial-gradient(700px 400px at 80% 80%, rgba(230,57,70,.10), transparent 55%),
              linear-gradient(180deg, #fff, #fbfcff);
  border: 1px solid rgba(12,24,40,.08);
  box-shadow: 0 18px 60px rgba(12,24,40,.08);
  overflow:hidden;
  min-height: 420px;
}

.cycle-svg{
  position:absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .95;
  pointer-events:none;
}

.node{
  position:absolute;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(12,24,40,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 30px rgba(12,24,40,.10);
  font-weight: 900;
  color: #0e1726;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  white-space:nowrap;
}

.node span{
  width:34px;height:34px;
  border-radius: 12px;
  display:grid; place-items:center;
  font-weight:1000;
  background: rgba(11,31,59,.06);
  border: 1px solid rgba(11,31,59,.10);
}

.node:hover{ transform: translateY(-1px); box-shadow: 0 14px 40px rgba(12,24,40,.14); }
.node.active{
  border-color: rgba(27,79,214,.35);
  box-shadow: 0 18px 52px rgba(12,24,40,.16);
}
.node.active span{
  background: linear-gradient(135deg, rgba(27,79,214,.95), rgba(230,57,70,.92));
  color:#fff;
  border-color: transparent;
}

/* Positions fixes (anti “brouillon”) */
.node.n1{ top: 26px; left: 50%; transform: translateX(-50%); }
.node.n2{ top: 96px; right: 26px; }
.node.n3{ bottom: 96px; right: 26px; }
.node.n4{ bottom: 26px; left: 50%; transform: translateX(-50%); }
.node.n5{ bottom: 96px; left: 26px; }
.node.n6{ top: 96px; left: 26px; }

.cycle-center{
  position:absolute;
  inset: 88px 86px;
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(12,24,40,.08);
  box-shadow: 0 18px 60px rgba(12,24,40,.12);
  padding: 16px 16px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.cycle-tag{
  display:inline-flex;
  align-self:flex-start;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(11,31,59,.06);
  border: 1px solid rgba(11,31,59,.10);
  font-weight: 1000;
  font-size: 12px;
}

.cycle-title{ margin: 10px 0 8px; font-size: 18px; }
.cycle-desc{ margin: 0; color:#445268; line-height:1.65; }

.cycle-meta{
  margin-top: 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.cycle-count{ font-weight: 1000; color:#0e1726; opacity:.75; }
.cycle-nav{ display:flex; gap:10px; }

.cycle-btn{
  width:40px;height:40px;
  border-radius: 14px;
  border: 1px solid rgba(12,24,40,.12);
  background: rgba(255,255,255,.92);
  cursor:pointer;
  font-size: 16px;
  font-weight: 1000;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cycle-btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 30px rgba(12,24,40,.12); }

.cycle-bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(12,24,40,.08);
  overflow:hidden;
  margin-top: 12px;
}
.cycle-progress{
  height:100%;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(27,79,214,.95), rgba(230,57,70,.92));
  width: 16.6%;
  transition: width .35s ease;
}

.cycle-right .cycle-card{
  height:100%;
  border-radius: 22px;
  padding: 18px;
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  border: 1px solid rgba(12,24,40,.08);
  box-shadow: 0 18px 60px rgba(12,24,40,.08);
}

.cycle-right h3{ margin: 0 0 10px; }
.cycle-bullets{
  margin: 0;
  padding-left: 18px;
  color:#3c4b63;
  line-height: 1.75;
}
.cycle-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 14px;
}

@media (max-width: 980px){
  .cycle-pro{ grid-template-columns: 1fr; }
  .cycle-left .cycle-ring{ min-height: 460px; }
  .cycle-center{ inset: 98px 26px; }
  .node.n2, .node.n3{ right: 14px; }
  .node.n5, .node.n6{ left: 14px; }
}

/* ================= DRAPEAU ACCROCHÉ AU MENU (SUIT AU SCROLL) ================= */
.flag-fr{
  display:inline-flex !important;
  align-items:center;
  gap:6px;
  margin-left:12px;
  flex:0 0 auto;
}

@media (max-width:900px){
  .flag-fr{ margin-left:0; }
}
/* ================= FIX DRAPEAU (BARRE TRICOLORE) GLOBAL ================= */
/* 1) On neutralise l'ancien div (au cas où fixed est "cassé" par un parent transform) */
.top-stripe{
  display:none !important;
}

/* 2) On recrée la barre au niveau HTML : toujours au TOP du viewport */
html::before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:6px;
  z-index:10000;
  background:linear-gradient(90deg,var(--blue) 0 33%,#fff 33% 66%,var(--red) 66% 100%);
}

/* 3) Le header reste collé sous la barre */
.header{
  top:6px !important;
}

/* 4) On garantit l'espace pour barre + header (sur toutes les pages) */
body{
  padding-top:78px !important;
}