/* ========== Montserrat (auto-hébergé – aucune connexion vers Google) ========== */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ========== Base ========== */
:root{
  --bg: #ffffff;
  --bg-muted:#f6f6f6;
  --text:#111111;
  --muted:#5f6368;
  --border:#e6e6e6;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius: 16px;
  --container: 1100px;
  --accent:#111111;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  width:min(var(--container), calc(100% - 2rem));
  margin-inline:auto;
}

/* Accessibilité */
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:1rem; top:1rem;
  width:auto; height:auto;
  padding:.6rem .8rem;
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:var(--shadow);
  z-index:9999;
}

/* ========== Header ========== */
.site-header{
  position:sticky;
  top:0;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--border);
  z-index:50;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.9rem 0;
  gap:1rem;
}
.brand{
  font-weight:700;
  letter-spacing:.3px;
}
.nav{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  font-weight:600;
  color:var(--muted);
}
/* ========== Sections ========== */
.section{
  padding:3.5rem 0;
}
.section-muted{
  background:var(--bg-muted);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

h1,h2,h3,h4,h6{
  margin:0 0 .6rem 0;
  line-height:1.15;
}
h1{ font-size:clamp(2rem, 3.2vw, 2.6rem); }
h2{ font-size:clamp(1.6rem, 2.6vw, 2.1rem); }
h3{ font-size:1.35rem; }
h4{ font-size:1.1rem; }
h6{ font-size:.9rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
/* Classes utilitaires pour préserver le style visuel quand le niveau sémantique diffère */
.feature-heading{ font-size:1.1rem; }
.contact-label{ font-size:.9rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }

p{ margin:.35rem 0 1rem; }

/* Buttons */
.btn{
  display:inline-block;
  margin-top:1rem;
  padding:.7rem 1.4rem;
  background:#fff;
  color:#111;
  text-decoration:none;
  font-weight:600;
  border:1px solid var(--border);
  border-radius:var(--radius);
  cursor:pointer;
}
.btn-primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

/* ========== Hero ========== */
.hero{
  position:relative;
  height:90vh;
  background:url('./img/utilisation-de-scbo-location.webp') center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.4);
}

.hero-content{
  position:relative;
  max-width:700px;
  color:#fff;
  padding:1rem;
}
.hero-geo{
  font-size:.85rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.8;
  margin-top:.4rem;
  margin-bottom:.2rem;
}

/* ========== Features ========== */
.feature-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:1.1rem;
  margin-top:1.2rem;
}
.feature{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.2rem 1.1rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.feature-icon{
  width:44px; height:44px;
  border-radius:14px;
  display:grid; place-items:center;
  border:1px solid var(--border);
  margin-bottom:.8rem;
}
.feature-icon img{ width:1.2rem; height:1.2rem; }

.h2-spaced{ margin-top:2.2rem; }

/* Advantages */
.advantages{
  margin:1rem 0 0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:.55rem .9rem;
}
.advantages li{
  padding:.55rem .65rem;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  color:var(--text);
}

/* Inline image */
.inline-photo{
  margin:2rem 0 0;
}
.inline-photo img{
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

/* FAQ */
.faq{
  margin-top:1.8rem;
  display:grid;
  gap:.7rem;
}
details{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:.9rem 1rem;
}
summary{
  cursor:pointer;
  font-weight:700;
}
summary::-webkit-details-marker{ display:none; }

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  align-items:start;
}

.split img{
  width:100%;
}

/* ========== Pricing ========== */
.pricing{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1.1rem;
  margin-top:1.2rem;
}
.plan{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.3rem 1.2rem;
  background:#fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  position:relative;
}
.plan-featured{
  border-color:#111;
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}
.badge{
  position:absolute;
  top:1rem;
  right:1rem;
  font-size:.75rem;
  font-weight:800;
  border:1px solid var(--border);
  border-radius:999px;
  padding:.35rem .6rem;
  background:#fff;
}
.plan-kpi{
  font-weight:700;
  color:var(--muted);
}
.price{
  font-size:1.7rem;
  font-weight:800;
  margin-top:1rem;
}

/* ========== Form ========== */
.contact{
  display:grid;
  grid-template-columns:3fr 2fr;
  gap:2rem;
}

.form{
  margin-top:1.2rem;
  display:grid;
  gap:1rem;
  max-width:720px;
}
.field label{
  display:block;
  font-weight:700;
  margin-bottom:.4rem;
}
input, textarea, select{
  width:100%;
  padding:.85rem .9rem;
  border-radius:14px;
  border:1px solid var(--border);
  font:inherit;
  background:#fff;
}
input:focus, textarea:focus, select:focus{
  outline:2px solid rgba(17,17,17,.18);
  outline-offset:2px;
}

/* ========== Footer ========== */
.site-footer{
  padding:1.6rem 0;
  border-top:1px solid var(--border);
  color:var(--muted);
}

/* ========== Feedback formulaire ========== */
.form-feedback{
  padding:.75rem 1rem;
  border-radius:12px;
  font-weight:600;
  font-size:.95rem;
}
.form-feedback--ok{
  background:#d4edda;
  color:#155724;
  border:1px solid #c3e6cb;
}
.form-feedback--error{
  background:#f8d7da;
  color:#721c24;
  border:1px solid #f5c6cb;
}

@media (max-width: 900px){
  .feature-grid{ grid-template-columns: repeat(2, 1fr); }
  .pricing{ grid-template-columns:1fr; }
  .advantages{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .split{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; }
}

@media (max-width: 520px){
  .feature-grid{ grid-template-columns:1fr; }
  .advantages{ grid-template-columns: 1fr; }
  .header-inner{ padding:.75rem 0; }
}