/* Message box pour feedback formulaire */
.msg-box {
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 2rem auto 1.5rem auto;
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  text-align: center;
  border: 2px solid transparent;
}
.msg-box.success {
  background: #e6fff3;
  color: #0a7d3b;
  border-color: #0a7d3b;
}
.msg-box.error {
  background: #ffeaea;
  color: #c80000;
  border-color: #c80000;
}


:root{
  --body-bg:#0B1535;
  --body-fg:#ffffff;
  --container-bg:#0B1535;
  --brand-900:#0B1535;
  --brand-400:#00fff2;
  --card-bg:#ffffff;
  --card-fg:#0A122B;
  --muted-1:#00fff2;
  --muted-2:#0B1535;
  --muted-3:#ffffff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background-color:var(--body-bg);color:var(--body-fg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,'Noto Sans','Apple Color Emoji','Segoe UI Emoji';
  background-image:url('bg-tech.svg');background-size:cover;background-attachment:fixed;background-position:center;background-repeat:no-repeat;
}
a{color:var(--body-fg);text-decoration:none}
.header-dark{background:rgba(11,21,53,.85);border-bottom:1px solid rgba(255,255,255,.08)}
.fg-brand{color:var(--body-fg)}
.link-nav{color:var(--body-fg)}
.link-nav.active{
  background: #0B1535;
  border-radius:.75rem;
  padding-inline:.5rem;
  border:2px solid #00fff2; /* Existing border */
}

.link-nav:hover {
  border:2px solid #00fff2; /* Hover effect */
}
.container-box{background:var(--container-bg);border-radius:1.25rem;padding:2rem}
.section-navy{background:var(--brand-900);color:var(--body-fg);border-radius:1rem;--heading-color:var(--body-fg)}
.btn-primary{background:var(--body-fg);color:var(--body-bg);padding:.5rem 1rem;border-radius:1rem;font-weight:600;display:inline-flex;align-items:center;border:2px solid transparent;transition:border-color 0.2s;}
.btn-primary:hover {
  border:2px solid #00fff2;
}
.btn-secondary{background:var(--brand-900);color:var(--muted-3);padding:.5rem 1rem;border-radius:1rem;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.title-2{font-size:clamp(1.875rem,1rem + 2vw,2.25rem);font-weight:800;color:var(--heading-color,var(--card-fg))}
.card{border-radius:1rem;border:1px solid #e2e8f0;background:var(--card-bg);box-shadow:0 6px 20px rgba(0,0,0,.04)}
.tile-title{font-weight:700;color:var(--card-fg)}
.tile-desc{color:#334155}
.icon-wrap{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--brand-900),var(--brand-400));display:grid;place-items:center;box-shadow:0 10px 18px #00fff2}
.footer-dim{color:#00fff2}
.text-brand-85{color:#00fff2}
.text-brand-70{color:#111111}
.text-muted-1{color:var(--muted-1)} 
.text-muted-2{color:var(--muted-2)} 
.text-muted-3{color:var(--muted-3)}
.badge{background:linear-gradient(90deg,var(--brand-900),var(--brand-400));color:#fff;border-radius:9999px;padding:.25rem .5rem;font-size:.75rem}
.grid-2{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:768px){.grid-2{grid-template-columns:1fr 1fr}}

/* --- Pricing feature list & checkmark styles --- */
.feature-list{list-style:none;margin:0;padding:0}
.feature-item{display:flex;gap:.5em;align-items:flex-start;color:var(--card-fg)}
.check-bubble{display:inline-flex;width:1.4em;height:1.4em;border-radius:999px;align-items:center;justify-content:center;background:#d1fae5;flex:0 0 auto}
.check-bubble svg{width:1em;height:1em;fill:#16a34a;display:block} /* green check */
/* Subcard blocks inside pricing cards */
.subcard{border:1px solid #e2e8f0;border-radius:.75rem;padding:1rem;background:#fff}
/* Ensure links remain visible on white cards (avoid white-on-white) */
.card a{color:var(--card-fg)}

/* Bouton LinkedIn spécifique */
.btn-linkedin {
  background: #0077b5 !important;
  color: #fff !important;
  border-radius: 1rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  padding: .5rem 1rem;
  transition: background 0.2s;
}
.btn-linkedin svg {
  fill: #fff !important;
  margin-right: 0.5em;
}
.btn-linkedin:hover {
  background: #005983 !important;
}

.btn-brand {
  background: var(--brand-900) !important;
  color: #fff !important;
  border-radius: 1rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  padding: .5rem 1rem;
  transition: background 0.2s;
}
.btn-brand svg {
  fill: var(--brand-400) !important;
  margin-right: 0.5em;
}
.btn-brand:hover {
  background: #0A122B !important; /* Variante plus foncée de --brand-900 */
  border:2px solid #00fff2; /* Hover effect */
}

/* ---- Helpers -like containers (non-intrusive) ---- */
.feature-section{padding:4rem 0;border-top:1px solid var(--border-muted,rgba(0,0,0,.06));}
.feature-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;}
@media (min-width: 900px){.feature-grid{grid-template-columns:1.1fr 0.9fr;}}
.feature-text h2{margin:0 0 .75rem 0;line-height:1.2;}
.feature-text p{margin:0 0 1rem 0;opacity:.9;}
.feature-text .feature-list{list-style:none;margin:0;padding:0;}
.feature-text .feature-list li{display:flex;gap:.75rem;align-items:flex-start;margin:.5rem 0;}
.check-bullet{width:1.25rem;height:1.25rem;min-width:1.25rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;background:var(--accent, #16a34a);color:#fff;line-height:1;}
/* Image block */
.feature-media{display:block;max-width:700px;margin:0 auto;text-align:center;}
.feature-media img{width:100%;height:auto;border-radius:1rem;box-shadow:0 6px 30px rgba(0,0,0,.08);}
/* Alternating layout */
@media (min-width:900px){.feature-section.alt .feature-grid{grid-template-columns:0.9fr 1.1fr;}}
/* Container/title fallbacks (safe) */
.container, .container-box, .wrapper {max-width:1100px;margin:0 auto;padding:0 1.25rem;}
.title-2, .feature-title{font-size:clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);font-weight:800;}
.small-kpi{display:inline-flex;gap:.35rem;align-items:baseline;background:rgba(0,0,0,.04);border-radius:.75rem;padding:.25rem .5rem;margin-right:.5rem;}

.kpi-reduction {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0,255,242,0.08);
  border-radius: 1rem;
  padding: .5rem 1.25rem;
  margin-left: auto;
  min-width: 110px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.kpi-reduction .kpi-value {
  font-size: 1.7rem;
  font-weight: 800;
  color: #00fff2;
  line-height: 1;
  text-align: center;
}
.kpi-reduction .kpi-label {
  font-size: 1rem;
  color: #00fff2;
  line-height: 1.2;
  text-align: center;
}

/* Tooltip pour les KPI */
.kpi-label {
  position: relative;
  cursor: pointer;
}
.kpi-label:hover::after {
  content: "ⓘ Les gains de temps présentés sont calculés en comparant les durées moyennes de traitement manuel (benchmarks APQC, IOFM, Ardent Partners, Deloitte) aux durées résiduelles constatées avec un traitement automatisé par IA.\A Ces valeurs correspondent aux plages médianes observées dans les études internationales sur l’automatisation du cycle Procure-to-Pay et de la clôture comptable.";
  white-space: pre-line;
  position: absolute;
  right: 0;
  top: 200%;
  transform: translateY(8px);
  transform: translateX(300px);
  background: #fff;
  color: #111111;
  border: 1px solid #00fff2;
  border-radius: .75rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  padding: .75rem 1rem;
  font-size: .95rem;
  z-index: 10;
  min-width: 350px;
  max-width: none;
  width: 75%;
  text-align: left;
  font-weight: normal;
}
input, textarea, select {
  color: #111111 !important; /* Toujours noir, même hors focus */
  background: #fff;
}

input:focus, textarea:focus, select:focus {
  color: #0B1535; /* Texte en focus, contraste fort */
}

input::placeholder, textarea::placeholder, select::placeholder {
  color: #2e8f0f; /* Placeholder, couleur secondaire */
  opacity: 1;
}
/* Message box pour feedback formulaire */
.msg-box {
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 2rem auto 1.5rem auto;
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  text-align: center;
  border: 2px solid transparent;
}
.msg-box.success {
  background: #e6fff3;
  color: #0a7d3b;
  border-color: #0a7d3b;
}
.msg-box.error {
  background: #ffeaea;
  color: #c80000;
  border-color: #c80000;
}