/* =========================
   Neomya – Clean CSS v1 (CLEANED + FIXED)
========================= */

/* ---- 1) Design tokens ---- */
:root{
  --navy:#0B1B3A;
  --text:#24324B;
  --muted:#6B7A90;
  --line:#E8EEF6;

  --mint:#20E3B2;
  --violet:#4E63FF;

  --bg:#ffffff;
  --bg-soft:#F7FAFF;

  --radius:18px;
  --shadow: 0 14px 40px rgba(11,27,58,0.10);

  --space-1:8px;
  --space-2:12px;
  --space-3:18px;
  --space-4:26px;
  --space-5:36px;
  --space-6:54px;

  --container:1120px;

  /* ✅ OFFSET ANCRES (header sticky) */
  --header-offset: 180px;
}

/* ---- 2) Reset / base ---- */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-padding-top: var(--header-offset); }
body{
  font-family: "Quicksand", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* ✅ FIX ANCRES – marche sur sections + éléments avec id */
section[id],
[id]{
  scroll-margin-top: var(--header-offset);
}

/* ---- 3) Layout ---- */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}
.section{ padding: var(--space-6) 0; }
.section-soft{ background: var(--bg-soft); }
.center{ text-align:center; }

@media (max-width: 640px){
  .container{ padding:0 18px; }
  .section{ padding: 42px 0; }
}

/* ---- 4) Typography ---- */
h1,h2,h3{
  margin:0;
  color:var(--navy);
  letter-spacing:-0.02em;
}
.hero-title{
  font-size: clamp(32px, 3.2vw, 50px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}
.section-title{
  font-size: clamp(28px, 3vw, 42px);
  line-height:1.12;
}
.section-subtitle{
  margin: var(--space-3) auto 0;
  max-width: 860px;
  color: var(--muted);
  font-size: 18px;
  line-height:1.65;
}
.accent{ color: var(--mint); }
.accent-inline{ color: var(--mint); font-weight: 800; }

/* ---- 5) Header ---- */
.header{
  position: sticky;
  top:0;
  z-index:10;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(232,238,246,0.6);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding: 14px 0;
}
.logo{ height: 26px; width:auto; }
.nav{
  display:flex;
  gap: 22px;
  align-items:center;
}
.nav a{
  text-decoration:none;
  color: var(--muted);
  font-weight: 700;
}
.nav a:hover{ color: var(--navy); }

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

/* ---- 6) Buttons ---- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  text-decoration:none;
  font-weight: 800;
  white-space:nowrap;
}
.btn-small{ padding: 10px 16px; }
.btn-full{ width:100%; }
.btn-primary{
  background: var(--mint);
  border-color: transparent;
  color: #062A21;
}
.btn-secondary{
  background:#fff;
  color: var(--navy);
}
.arrow{ font-weight: 900; }

/* ---- 7) Hero ---- */
.hero{ padding: 42px 0 36px; }

.hero-grid{
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 56px;
  align-items: center;
}
.hero-right .chat-card{
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}
.hero-left{ max-width: 720px; }

.hero-subtitle{
  font-size: 16px;
  line-height: 1.75;
  max-width: 640px;
  margin-top: 12px;
  color: #5F6F86;
}
.hero-cta{ margin-top: 18px; }
.hero-note{
  font-weight: 400;        /* non gras */
  font-size: 14px;         /* plus fin */
  color: #6B7A90;          /* gris doux */
  letter-spacing: 0.01em;  /* plus aérien */
  margin-top: 14px; /* au lieu de 18 si tu veux plus compact, sinon laisse */
}
.hero-linkline{
  margin-top: 28px;
  padding: 18px 22px;

  max-width: 640px;          /* ⬅️ élargit la box (2 lignes au lieu de 3) */

  border-radius: 18px;
  background: #F2F5FF;
  border: 1px solid #E3E9FF;

  color: #3F56FF;
  font-size: 17px;           /* légèrement plus fin visuellement */
  line-height: 1.45;
  font-weight: 600;          /* ⬅️ TEXTE PLUS FIN (avant: 700/800) */
}

.hero-linkline .arrow-link{
  color: #3F56FF;
}
.arrow-link{ font-weight: 900; }

/* HERO – espacement entre les paragraphes */
.hero-left .hero-subtitle{
  margin-top: 14px;   /* au lieu de 12 */
  margin-bottom: 0;
}

@media (max-width: 980px){
  .hero-grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hero-right .chat-card{
    max-width: 100%;
    margin-left: 0;
  }
}

/* ---- 8) Cards / grids ---- */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.card p{
  margin: 12px 0 0;
  color: var(--muted);
  line-height:1.65;
  text-align:left;
}
.card-soft{ background:#F7FAFF; }
.card-soft.mint{ background:#EFFFF9; border-color:#DDF8F0; }
.card-soft.violet{ background:#EEF0FF; border-color:#E2E5FF; }
.card-soft.gray{ background:#F3F5F8; border-color:#E9EEF5; }

.cards-3{
  margin-top: var(--space-4);
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.cards-2x2{
  margin-top: var(--space-4);
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (max-width: 960px){
  .cards-3{ grid-template-columns: 1fr; }
  .cards-2x2{ grid-template-columns: 1fr; }
}

/* ---- 9) Chat mock ---- */
.chat-card{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow:hidden;
  background:#fff;
  box-shadow: var(--shadow);
  padding: 18px;
  padding-bottom: 22px;
}
.chat-top{
  padding: 14px 16px;
  background: linear-gradient(90deg, var(--mint), var(--violet));
  color:#fff;
  display:flex;
  gap:12px;
  align-items:center;
  border-radius: 14px;
}
.chat-logo{
  width:28px;
  height:28px;
  background:#fff;
  border-radius:10px;
  padding:6px;
}
.chat-title{ font-weight: 800; font-size: 16px; }
.chat-subtitle{ font-size: 12px; opacity: .9; }

.chat-bubble{
  margin: 14px 16px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #EEF3FA;
  background:#fff;
  color: var(--navy);
  text-align:left;
}
.chat-user{ background: #F6F8FC; }
.chat-bot-title{ font-weight: 900; margin-bottom: 10px; }

.chat-list{
  list-style: none;
  padding-left: 0;
  margin: 10px 0 0;
}
.chat-list li{
  display: grid;
  grid-template-columns: 12px 1fr;
  column-gap: 12px;
  align-items: start;
  margin: 10px 0;
  color: var(--text);
}
.chat-list .dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #43D7A7;
  margin-top: 9px;
}

#mock_confirm{
  background: #ffffff;
  border: 1px solid #E6ECF5;
  border-radius: 16px;
  padding: 16px 18px;
  font-weight: 500;
}

.chat-input{ display:none !important; }

.chat-inputbar{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}
.chat-field{
  flex: 1;
  background: #ffffff;
  border: 1px solid #E6ECF5;
  border-radius: 999px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 8px 22px rgba(16,24,40,0.08);
}
.chat-placeholder{
  font-weight: 400 !important;
  color: #8A95A8;
  font-size: 15px;
}
.chat-send{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
}
.chat-send img{
  width: 18px;
  height: 18px;
  opacity: .55;
}
.chat-mic{
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #EEF0FF;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 22px rgba(16,24,40,0.08);
}
.chat-mic img{
  width: 18px;
  height: 18px;
  opacity: .9;
}

/* ---- 10) Assistant cards (Solution) ---- */
.assistant-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 48px;
}

.assistant-cards .card{
  text-align: left;
  padding: 36px 32px;
  border-radius: 28px;
}

/* top : numéro + icône */
.assistant-cards .card-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

/* icône */
.assistant-cards .assistant-icon{
  width: 42px;
  height: 42px;
  opacity: 0.9;
}

/* force icônes en noir */
.assistant-cards img.assistant-icon{
  filter: brightness(0) saturate(100%);
}

/* numéro (Base44 style) */
.assistant-cards .num{
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  opacity: 1; /* ⬅ plus de gris délavé */
}

/* couleurs par carte */
.assistant-cards .card.mint .num{
  color: var(--mint);
}
.assistant-cards .card.violet .num{
  color: var(--violet);
}
.assistant-cards .card.gray .num{
  color: #94A3B8;
}

/* titres – plus petits et plus élégants */
.assistant-cards h3{
  margin: 0 0 12px;
  font-size: 20px;        /* ⬅ réduit */
  line-height: 1.35;
  font-weight: 700;       /* ⬅ moins lourd */
  letter-spacing: -0.01em;
  color: var(--navy);
}

/* texte */
.assistant-cards p{
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #5F6F86;
}

/* responsive */
@media (max-width: 980px){
  .assistant-cards{
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .assistant-cards .card{
    padding: 28px 24px;
  }

  .assistant-cards .num{
    font-size: 40px;
  }
}

/* ---- 11) Ecosystem ---- */
#ecosysteme .eco-visual{
  position: relative;
  height: 220px;
  margin: 34px auto 34px;
  max-width: 760px;
}
#ecosysteme .eco-visual::before,
#ecosysteme .eco-visual::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  background: rgba(32, 227, 178, 0.45);
  border-radius: 999px;
  z-index: 0;
}
#ecosysteme .eco-visual::before{ width: 500px; height: 2px; }
#ecosysteme .eco-visual::after{ width: 2px; height: 200px; }

#ecosysteme .eco-hub{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width: 150px;
  height: 150px;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--mint), var(--violet));
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 18px 46px rgba(78, 99, 255, 0.18);
  z-index: 1;
}
#ecosysteme .eco-hub-logo{
  width: 96px;
  height: auto;
  display:block;
  filter: drop-shadow(0 10px 18px rgba(11,27,58,0.18));
}

.eco-cards-grid{
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  align-items: stretch;
}
.eco-card{
  background: #fff;
  border: 1px solid #e9eef7;
  border-radius: 24px;
  padding: 28px 28px 30px;
  text-align: left;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.06);
}
.eco-icon{
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(88, 224, 179, 0.18);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.eco-icon img{
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
}
#ecosysteme .eco-card h3{
  font-size: 18px !important;
  line-height: 1.25 !important;
  margin: 0 0 10px !important;
  font-weight: 700;
}
#ecosysteme .eco-card p{
  font-size: 15px !important;
  line-height: 1.65 !important;
  margin: 0;
  color: #667085;
}
@media (max-width: 1100px){
  .eco-cards-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .eco-cards-grid{ grid-template-columns: 1fr; }
  #ecosysteme .eco-visual{ height: 180px; max-width: 520px; }
  #ecosysteme .eco-visual::before{ width: 420px; }
  #ecosysteme .eco-visual::after{ height: 170px; }
  #ecosysteme .eco-hub{ width: 124px; height: 124px; border-radius: 24px; }
  #ecosysteme .eco-hub-logo{ width: 82px; }
}

/* ---- 12) Dashboard image ---- */
.dash-figure{ margin: var(--space-4) 0 0; }
.dash-img{
  width:100%;
  border-radius: var(--radius);
  border:1px solid var(--line);
  box-shadow: var(--shadow);
}

#dashboard .dashboard-head,
#dashboard .dash-figure{
  max-width: 1120px;
  margin-left: 0;
  margin-right: auto;
}
#dashboard .section-title.with-icon{
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}
#dashboard .title-icon{
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background-color: rgba(32, 227, 178, 0.14);
  display: inline-block;
  flex: 0 0 54px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 26px;
  margin-left: -6px;
}
#dashboard .title-icon-graphique{
  background-image: url("/assets/icons/graphique.png");
}
#dashboard .section-subtitle{
  max-width: 1000px;
  margin: 0;
  padding-left: 0;
  text-align: left;
  font-size: 18px;
  line-height: 1.75;
  color: #6B7A90;
}

/* ---- 13) Benefits (Bénéfices) ---- */
#benefices{
  background: #F7F9FC;
  padding: 90px 0;
}

/* ✅ Plus d'espace entre le titre de section et les cards */
#benefices .section-title{
  margin-bottom: 0; /* on évite les cumuls bizarres */
}
#benefices .cards-2x2{
  margin-top: 64px; /* 🔑 augmente l’espace titre → cards */
}

/* Ligne icône + tag */
#benefices .benefit-top{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}

/* Pastille icône */
#benefices .benefit-ico{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-block;
  flex: 0 0 44px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
}

/* Fonds pastilles */
#benefices .benefit-ico-mint{ background-color: rgba(32, 227, 178, 0.18); }
#benefices .benefit-ico-violet{ background-color: rgba(78, 99, 255, 0.16); }
#benefices .benefit-ico-gray{ background-color: rgba(148, 163, 184, 0.22); }

/* Tag aligné à la même hauteur que l’icône */
#benefices .tag{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 44px;
  line-height: 1;
  padding: 0 18px;

  font-size: 13px;
  font-weight: 800;
  border-radius: 999px;
  margin: 0;

  color: #0B1B3A;
  background: rgba(32, 227, 178, 0.22);
  border: 1px solid rgba(32, 227, 178, 0.35);
}

/* Variantes tag */
#benefices .tag.violet{
  background: rgba(78, 99, 255, 0.18);
  border-color: rgba(78, 99, 255, 0.32);
}
#benefices .tag.gray{
  background: rgba(148, 163, 184, 0.24);
  border-color: rgba(148, 163, 184, 0.36);
}
#benefices .tag.mint{
  background: rgba(32, 227, 178, 0.22);
  border-color: rgba(32, 227, 178, 0.35);
}

/* Mapping icônes (ordre = tes 4 cards) */
#benefices .benefit-card:nth-child(1) .benefit-ico{ background-image: url("/assets/icons/eco-familles.png"); }
#benefices .benefit-card:nth-child(2) .benefit-ico{ background-image: url("/assets/icons/database.svg"); }
#benefices .benefit-card:nth-child(3) .benefit-ico{ background-image: url("/assets/icons/cadeau.png"); }
#benefices .benefit-card:nth-child(4) .benefit-ico{ background-image: url("/assets/icons/groupe.png"); }

/* Titres + textes dans les cards */
#benefices .benefit-card h3{
  text-align: left;
  margin-top: 14px;
  margin-bottom: 10px;
}
#benefices .benefit-card p{
  text-align: left;
}

/* Phrase finale */
#benefices .benefits-footer{
  margin-top: 40px;
  font-size: 20px;
  font-weight: 800;
  text-align: center;
  color: #0B1B3A;
}

/* ---- 14) Mise en oeuvre (Fonctionnement) ---- */
#fonctionnement{
  background: #fff;
}

/* ===== GRILLE ===== */
.implementation-grid{
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 960px){
  .implementation-grid{
    grid-template-columns: 1fr;
  }
}

/* ===== CARTES ===== */
.impl-card{
  border-radius: 26px;
  padding: 26px 28px; /* 🔑 moins haut */
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.05);
}

/* Pré-requis */
.impl-card-prereq{
  background: #F7F9FC;
  border: 1px solid #EEF2F7;
}

/* Étapes */
.impl-card-steps{
  background: #F3FBF8;
  border: 1px solid #DDF3EC;
}

/* ===== TITRES (PLUS PETITS) ===== */
.impl-title{
  margin: 0 0 14px;
  font-size: 18px;      /* 🔑 réduit */
  font-weight: 700;
  color: #0B1B3A;
}

/* =========================
   PRÉ-REQUIS – TICKS (check.png)
   ========================= */

#fonctionnement .impl-checklist{
  list-style: none;
  margin: 0;
  padding: 0;
}

#fonctionnement .impl-checklist li{
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #E8EEF6;
  align-items: start;
}

#fonctionnement .impl-checklist li:last-child{
  border-bottom: none;
}

/* Pastille */
#fonctionnement .impl-check{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(32,227,178,0.18);
  border: 1px solid rgba(32,227,178,0.28);
  position: relative;
  flex-shrink: 0;
}

/* Icône check.png au centre */
#fonctionnement .impl-check::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  background: url("../assets/icons/check.png") center / contain no-repeat;
}

#fonctionnement .impl-checklist span{
  color: #3A4A64;
  font-weight: 600;
  line-height: 1.6;
}


/* ===== ÉTAPES ===== */
.impl-steps{
  display: grid;
}

/* Ligne step */
.impl-step{
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  padding: 14px 0;      /* 🔑 moins d’air */
  border-bottom: 1px solid #E4EFEA;
}
.impl-step:last-child{
  border-bottom: none;
}

/* Icône */
.impl-step-ico{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #EEF2F6;
  border: 1px solid #E2E8F0;
  display: grid;
  place-items: center;
}
.impl-step-ico img{
  width: 16px;
  height: 16px;
  opacity: 0.85;
}

/* Texte */
.impl-step-name{
  font-size: 15px;
  font-weight: 700;
  color: #0B1B3A;
  line-height: 1.25;
}
.impl-step-desc{
  margin-top: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #667085;
  line-height: 1.55;
}

/* ---- 15) Form ---- */
.demo-form{ margin-top: var(--space-4); text-align:left; }

.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-grid .full{ grid-column: 1 / -1; }

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

label{ font-weight: 900; color: var(--navy); display:block; margin-bottom: 6px; }

input, select{
  width:100%;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  font-family: inherit;
  font-size: 16px;
}

.checkbox-row{
  display:flex;
  gap: 10px;
  align-items:center;
}
.checkbox-row input{ width:auto; }

.form-badges{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background:#fff;
  color: var(--muted);
  font-weight: 800;
}
.badge img{ width:16px; height:16px; }

/* ✅ Netlify honeypot caché */
.demo-form .hidden{ display:none !important; }
.demo-form input[name="bot-field"]{
  display:none !important;
  position:absolute !important;
  left:-9999px !important;
  width:0 !important;
  height:0 !important;
  opacity:0 !important;
}

/* ✅ DEMO – Form délimité */
#demo .demo-form{
  max-width: 920px;
  margin: 36px auto 0;
  padding: 34px 34px 26px;

  background: #ffffff;
  border: 1px solid #E8EEF6;
  border-radius: 26px;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.06);
}
#demo .form-grid{ gap: 18px; }

#demo input,
#demo select{
  background: #fff;
  border: 1px solid #E8EEF6;
  box-shadow: 0 1px 0 rgba(16,24,40,0.02);
}
#demo input:focus,
#demo select:focus{
  outline: none;
  border-color: rgba(32,227,178,0.55);
  box-shadow: 0 0 0 4px rgba(32,227,178,0.14);
}
#demo .checkbox-row{ margin-top: 6px; }
#demo .btn-full{ margin-top: 18px; }

#demo .form-badges{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #EEF3FA;
  justify-content: center;
}

@media (max-width: 720px){
  #demo .demo-form{
    padding: 24px 18px 18px;
    border-radius: 22px;
  }
}
/* =========================
   DEMO – AJUSTEMENTS FINALS
========================= */

/* Bouton principal moins large et centré */
#demo .btn-full{
  display: flex;              /* pour que margin auto fonctionne partout */
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  width: auto;                /* ❌ plus full width */
  min-width: 320px;           /* largeur confortable */
  padding-left: 36px;
  padding-right: 36px;
  margin: 24px auto 0;        /* centre le bouton */
  font-weight: 700;           /* un peu moins gras */
}

/* Badges sous le bouton */
#demo .form-badges{
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid #EEF3FA;
  justify-content: center;
}

/* Texte des badges plus fin */
#demo .badge{
  font-weight: 600;           /* ⬅️ plus fin */
  color: #6B7A90;             /* gris doux */
  background: #ffffff;
}

/* Icônes badges plus discrètes */
#demo .badge img{
  opacity: 0.7;
}

/* Mobile : bouton reprend toute la largeur */
@media (max-width: 720px){
  #demo .btn-full{
    width: 100%;
    min-width: unset;
  }
}

/* =========================
   FIX ANCRE #demo (100% fiable)
   compense le header sticky
========================= */

:root{
  --anchor-offset: 180px; /* ajuste ici (120–180) */
}

#demo{
  position: relative;
}

/* crée une "zone tampon" invisible au-dessus de la section */
#demo::before{
  content: "";
  display: block;
  height: var(--anchor-offset);
  margin-top: calc(var(--anchor-offset) * -1);
}
/* =========================
   MOBILE SAFE (à coller tout en bas)
========================= */

@media (max-width: 900px){
  /* Header plus compact */
  .header-inner{
    padding: 10px 0;
  }
  .logo{ height: 24px; }

  /* Hero : 1 colonne + espaces propres */
  .hero{ padding: 26px 0 26px; }
  .hero-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .hero-left{ max-width: 100%; }
  .hero-title{ font-size: 34px; line-height: 1.05; }
  .hero-subtitle{ font-size: 15px; line-height: 1.7; }

  /* Bandeau bleu du hero */
  .hero-linkline{
    max-width: 100%;
    font-size: 16px;
    padding: 12px 14px;
  }
}

@media (max-width: 960px){
  /* Sections : padding plus léger */
  .section{ padding: 42px 0; }

  /* Grids → 1 colonne */
  .cards-3{ grid-template-columns: 1fr; }
  .cards-2x2{ grid-template-columns: 1fr; }
  .implementation-grid{ grid-template-columns: 1fr; }

  /* Cards : padding réduit */
  .card{ padding: 20px; }
  .assistant-cards .card{ padding: 24px 20px; }
  .impl-card{ padding: 22px; border-radius: 22px; }
}

@media (max-width: 720px){
  /* Form : 1 colonne */
  .form-grid{ grid-template-columns: 1fr; }
  #demo .demo-form{
    padding: 22px 16px 18px;
    border-radius: 22px;
  }

  /* Boutons : pas trop larges */
  #demo .btn.btn-primary{
    width: auto;
    display: inline-flex;
  }

  /* Badges : wrap propre */
  #demo .form-badges{
    justify-content: center;
    gap: 10px;
  }
}

/* Ancres + header sticky (mobile un peu plus grand si besoin) */
@media (max-width: 900px){
  :root{
    --anchor-offset: 200px; /* un peu + grand sur mobile */
  }
}

/* ---- 16) Footer ---- */
.footer{
  padding: 26px 0;
  border-top: 1px solid var(--line);
  background:#fff;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.footer-mark{ width:28px; height:28px; }
.footer-text{ color: var(--muted); font-weight: 800; }