/* ============================================================
   COUCHE DE FINITION « APPLE » — ajoutée PAR-DESSUS styles.css
   N'enlève rien : surcouche de typographie, de neutres et de
   finition. Le rouge de marque Obdurare est conservé tel quel.
   ============================================================ */

:root{
  /* Neutres façon Apple : gris plus froids et plus nets.
     Le rouge de marque n'est PAS modifié. */
  --ink:#1d1d1f;
  --muted:#6e6e73;
  --hint:#86868b;
  --bg:#ffffff;
  --bg2:#f5f5f7;
  --line:rgba(0,0,0,.09);
  /* Police système d'Apple (SF Pro) — rendu identique à un vrai site Apple */
  --sf:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- TYPOGRAPHIE : la vraie police d'Apple ---------- */
body{
  font-family:var(--sf);
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,.logo,.eyebrow,.q p,.mc .val,.st b,.plan .pr,.cv-ctr b,
.dash .tile b,.legal h2,.pintro h1{
  font-family:var(--sf) !important;
}
h1{ letter-spacing:-.038em; font-weight:700; }
h2{ letter-spacing:-.028em; font-weight:640; }
h1,h2{ text-wrap:balance; }
h3{ letter-spacing:-.02em; font-weight:600; }
.lead{ letter-spacing:-.011em; font-weight:400; }
.eyebrow{ font-weight:600; letter-spacing:.05em; font-size:12.5px; }

/* ---------- BOUTONS : pilule douce façon Apple ---------- */
.btn{
  font-weight:590; letter-spacing:-.01em; border-radius:980px;
  padding:12px 24px;
  transition:transform .18s var(--ease), background .25s, box-shadow .25s, color .25s;
}
.btn-lg{ padding:15px 30px; font-size:15.5px; }
.btn-red{ box-shadow:0 6px 20px -9px rgba(108,79,240,.55); }
.btn-red:hover{ transform:translateY(-1px); box-shadow:0 10px 26px -9px rgba(108,79,240,.5); }
.btn-w{ box-shadow:0 6px 22px -11px rgba(0,0,0,.4); }
.btn-w:hover{ transform:translateY(-1px); }
.btn-ol{ border-color:rgba(255,255,255,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }

/* ---------- NAV : barre translucide façon Apple ---------- */
.nav-in{ height:56px; }
header.nav.solid{
  background:rgba(251,251,253,.82);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.07);
}
.nav-links{ gap:34px; }
.nav-links a:not(.btn){ font-size:13.5px; font-weight:450; letter-spacing:-.01em; }
.logo{ letter-spacing:-.02em; }

/* ---------- HERO : texte plus net, dégradé plus doux ---------- */
.hero .in{ text-shadow:0 2px 40px rgba(0,0,0,.32); }
.hero h1{ letter-spacing:-.042em; }
.hero .lead{ color:rgba(255,255,255,.9); }
.hero .ov{ background:linear-gradient(90deg,rgba(6,8,12,.6) 0%,rgba(6,8,12,.24) 52%,rgba(6,8,12,0) 100%); }

/* ---------- CARTES / TEASERS / PANNEAUX : grands rayons, ombres douces ---------- */
.card,.teaser,.mc,.panel,.plan,.trust .ti,.contact-card,.bigcard{ border-radius:22px; }
.card,.teaser,.plan{
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 12px 30px -22px rgba(0,0,0,.22);
}
.card:hover,.teaser:hover,.plan:hover{
  transform:translateY(-4px);
  box-shadow:0 2px 6px rgba(0,0,0,.05), 0 26px 52px -28px rgba(0,0,0,.28);
}
.teaser{ padding:34px; }
.teaser h3{ letter-spacing:-.02em; }
.mc{ border-radius:20px; }

/* ---------- STATS : chiffres nets, alignés ---------- */
.stats{ border-radius:22px; }
.st{ padding:38px 18px; }
.st b{ letter-spacing:-.03em; font-variant-numeric:tabular-nums; }

/* ---------- PUCES (section photo) ---------- */
.chip{ background:rgba(255,255,255,.12); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }

/* ---------- CHAMPS DE FORMULAIRE : arrondis Apple + focus rouge ---------- */
.news input,.cform input,.cform select,.cform textarea{ border-radius:14px; }
.news input:focus,.cform input:focus,.cform select:focus,.cform textarea:focus{
  border-color:var(--red); box-shadow:0 0 0 4px var(--red-soft);
}

/* ---------- DÉTAILS ---------- */
::selection{ background:var(--red-soft); color:var(--red-d); }
a:focus-visible,.btn:focus-visible,input:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; }
}