/* ══════════════════════════════════════════════════
   MiarTek — css/base.css
   Reset · Typographie · Utilitaires · Reveal
   ══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,300;1,400&family=Nunito:wght@300;400;600;700&display=swap');

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html  { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }
body  {
  font-family: var(--fb);
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a    { text-decoration:none; color:inherit; }
ul   { list-style:none; }
img  { max-width:100%; display:block; }
button { cursor:pointer; font-family:inherit; border:none; background:none; }
input, textarea, select { font-family:inherit; }

/* ── Titres SEO ── */
h1 { font-family:var(--fd); line-height:1.1; font-weight:900; color:var(--white); }
h2 { font-family:var(--fd); line-height:1.15; font-weight:800; color:var(--text); }
h3 { font-family:var(--fd); line-height:1.2; font-weight:700; color:var(--text); }
h4 { font-family:var(--fd); line-height:1.3; font-weight:700; color:var(--text); }
p  { line-height:1.75; color:var(--text-mid); }
strong { font-weight:700; color:inherit; }

/* ── Conteneur ── */
.container  { max-width:var(--max-w); margin:0 auto; padding:0 var(--px); }
.container--sm { max-width:780px; margin:0 auto; padding:0 var(--px); }

/* ── Sections ── */
.section     { padding:var(--sec-py) 0; }
.section--w  { background:var(--white); }
.section--g  { background:var(--gray-50); }
.section--d  {
  position:relative; overflow:hidden;
  background:var(--g-navy);
}
.section--d::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse 65% 55% at 72% 28%, rgba(58,176,58,.16) 0%, transparent 55%);
}

/* ── Section header ── */
.sh { text-align:center; margin-bottom:44px; }
.sh__tag {
  display:inline-block; padding:4px 14px; border-radius:var(--r-full);
  font-size:.72rem; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  margin-bottom:10px;
  background:rgba(26,53,200,.08); color:var(--blue);
}
.sh__tag--w  { background:rgba(122,236,122,.13); color:#7aec7a; }
.sh__tag--g  { background:rgba(58,176,58,.1); color:var(--green-mid); }
.sh__h2      { font-size:clamp(1.7rem,3vw,2.4rem); margin-bottom:10px; }
.sh__h2--w   { color:var(--white); }
.sh__p       { color:var(--text-muted); max-width:560px; margin:0 auto; font-size:.96rem; }
.sh__p--w    { color:rgba(255,255,255,.6); }
.sh__line    { width:60px; height:4px; border-radius:2px; margin:14px auto 0;
               background:linear-gradient(90deg,var(--green),var(--blue)); }
.sh__line--w { background:linear-gradient(90deg,#7aec7a,#8aafff); }

/* ── Check list ── */
.checklist { display:flex; flex-direction:column; gap:7px; }
.checklist li {
  display:flex; align-items:flex-start; gap:9px;
  font-size:.87rem; color:var(--text-mid); line-height:1.55;
}
.checklist li::before { content:'✓'; color:var(--green); font-weight:700; flex-shrink:0; margin-top:1px; }
.checklist--w li { color:rgba(255,255,255,.75); }
.checklist--w li::before { color:#7aec7a; }

/* ── Scroll Reveal ── */
.r { opacity:0; transform:translateY(26px); transition:opacity .62s ease,transform .62s ease; }
.r.v { opacity:1; transform:translateY(0); }
.d1{transition-delay:.08s} .d2{transition-delay:.16s}
.d3{transition-delay:.25s} .d4{transition-delay:.34s}

/* ── Utilitaires ── */
.text-center { text-align:center; }
.mt-4  { margin-top:var(--sp-4); }
.mt-6  { margin-top:var(--sp-6); }
.mt-8  { margin-top:var(--sp-8); }
.mb-6  { margin-bottom:var(--sp-6); }
.flex  { display:flex; }
.flex-center { display:flex; align-items:center; justify-content:center; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.gap-2 { gap:var(--sp-2); } .gap-4 { gap:var(--sp-4); } .gap-6 { gap:var(--sp-6); }