/* ============================================================
   DKCOUNTER LLC — feuille de style partagée (index + legal)
   UNE SEULE COULEUR À CHANGER : --accent
   ============================================================ */
:root{
  --accent:#2C6369;        /* teal du logo (valeur exacte du SVG) */
  --accent-dark:#20474C;   /* version sombre : dégradé hero + survol boutons */
  --accent-light:#6E989C;  /* teal clair du mot COUNTER */
  --accent-soft:#E8EFF0;   /* fond des panneaux */
  --ink:#111A1B;
  --muted:#5C666A;
  --bg:#FFFFFF;
  --alt:#F5F8F8;
  --line:#E0E6E7;
  --radius:10px;
  --maxw:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:var(--accent)}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:28px}
.narrow{max-width:760px}

/* ---------------- Header ---------------- */
header{
  position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line);
}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:15px}
.mark{
  font-weight:700;font-size:14px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
}
/* ---- Logo (SVG intégré directement dans le HTML) ----
   Hauteur du header : change la valeur ci-dessous, rien d'autre.
   Couleurs : .lg-dk = le bloc DK, .lg-ct = le mot COUNTER */
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo .lg{height:22px;width:auto;display:block}
@media(max-width:480px){.logo .lg{height:19px}}
.lg-dk{fill:var(--accent)}
.lg-ct{fill:var(--accent-light)}

/* Version footer, sur fond sombre */
.logo-white{display:inline-block;margin-bottom:14px}
.logo-white .lg{height:22px;width:auto;display:block}
.logo-white .lg-dk{fill:#FFFFFF}
.logo-white .lg-ct{fill:var(--accent-light)}
/* Pour un logo entièrement blanc dans le footer, décommente :
   .logo-white .lg-ct{fill:#FFFFFF} */
.nav-right{display:flex;align-items:center;gap:28px}
.nav-right a{font-size:14px;color:var(--muted);text-decoration:none;transition:color .18s}
.nav-right a:hover{color:var(--ink)}
@media(max-width:720px){.nav-right a:not(.btn){display:none}}

.btn{
  display:inline-block;background:var(--accent);color:#fff!important;
  padding:11px 20px;border-radius:7px;font-size:14px;font-weight:500;
  text-decoration:none;border:0;cursor:pointer;transition:background .18s;
  font-family:inherit;
}
.btn:hover{background:var(--accent-dark)}
.btn-ghost{
  background:transparent;color:var(--accent)!important;
  border:1px solid var(--line);
}
.btn-ghost:hover{background:var(--alt)}

/* ---------------- Typo ---------------- */
h1{font-size:clamp(32px,4.8vw,52px);line-height:1.1;letter-spacing:-.03em;font-weight:700;margin:0 0 20px}
h2{font-size:clamp(25px,3.2vw,36px);line-height:1.2;letter-spacing:-.025em;font-weight:700;margin:0 0 18px}
h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:0 0 9px}
p{margin:0 0 18px}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(17px,1.8vw,19px);line-height:1.55;color:var(--muted)}
.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);margin:0 0 16px;
}
section{padding-block:clamp(54px,7.5vw,92px)}
.alt{background:var(--alt)}

/* ---------------- Hero ---------------- */
.hero{
  background:linear-gradient(160deg,var(--accent) 0%,var(--accent-dark) 100%);
  color:#fff;padding-block:clamp(60px,8.5vw,104px);
}
.hero .eyebrow{color:#AFC6C9}
.hero h1{max-width:15ch}
.hero .lead{color:#CBDDDF;max-width:48ch}
.hero-grid{display:grid;gap:clamp(34px,5vw,56px);align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:1.05fr .95fr}}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero .btn-ghost{color:#fff!important;border-color:rgba(255,255,255,.34)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.1)}
.hero-media{
  aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(140deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  box-shadow:0 22px 50px -22px rgba(0,0,0,.5);
}
/* object-position recadre sur les cartons : l'image source a du vide à gauche */
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:88% 50%}

/* ---------------- Bande de faits ---------------- */
.facts{border-bottom:1px solid var(--line);background:var(--bg)}
.facts .wrap{
  display:grid;gap:26px;padding-block:30px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.fact strong{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.fact span{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}

/* ---------------- Cartes ---------------- */
.cards{display:grid;gap:26px;margin-top:42px}
@media(min-width:860px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .2s,transform .2s;
}
.card:hover{box-shadow:0 14px 34px -18px rgba(19,22,25,.28);transform:translateY(-2px)}
.card-media{aspect-ratio:4/3;background:linear-gradient(140deg,var(--accent-soft),#DCE4EF)}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-body{padding:22px 22px 26px}
.card-body p{font-size:14.5px;color:var(--muted);margin:0}
.card .tag{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.13em;
  color:var(--accent);margin-bottom:9px;
}

/* ---------------- Split texte/panneau ---------------- */
.split{display:grid;gap:clamp(32px,5vw,60px);align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}}
.panel{
  background:var(--accent-soft);border-radius:var(--radius);padding:clamp(26px,4vw,38px);
}
.panel ul{margin:0;padding-left:19px}
.panel li{margin-bottom:11px;font-size:15px;color:var(--ink)}
.panel li:last-child{margin-bottom:0}

/* ---------------- Formulaire ---------------- */
.form-grid{display:grid;gap:16px;margin-top:8px}
@media(min-width:680px){.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}}
label{display:block;font-size:13.5px;font-weight:500;margin-bottom:6px}
input[type=text],input[type=email],textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:7px;
  font-family:inherit;font-size:15px;color:var(--ink);background:var(--bg);
  transition:border-color .16s,box-shadow .16s;
}
input:focus,textarea:focus{
  outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
textarea{min-height:130px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:13px;color:var(--muted);margin-top:4px}

.flash{
  border-radius:8px;padding:13px 16px;font-size:14.5px;margin-bottom:24px;
  border:1px solid;
}
.flash-ok{background:#EDF7F0;border-color:#BFE0C9;color:#1D5B33}
.flash-err{background:#FCF0F0;border-color:#EBC5C5;color:#8A2B2B}

/* ---------------- Legal ---------------- */
.legal article{margin-bottom:38px}
.legal article:last-of-type{margin-bottom:0}
.legal p{font-size:14.5px;line-height:1.72;color:var(--muted)}
.legal .stamp{margin-top:38px;font-size:13px;color:var(--muted)}
.toc{
  display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 44px;padding:0;list-style:none;
}
.toc a{
  display:inline-block;font-size:13.5px;text-decoration:none;color:var(--accent);
  border:1px solid var(--line);border-radius:999px;padding:6px 14px;transition:background .16s;
}
.toc a:hover{background:var(--alt)}

/* ---------------- Footer ---------------- */
footer{background:var(--ink);color:#B9C0C8;padding-block:46px 30px;font-size:14px}
.foot-grid{display:grid;gap:30px}
@media(min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
footer .mark{color:#fff;display:inline-block;margin-bottom:14px}
footer address{font-style:normal;line-height:1.75}
footer a{color:#B9C0C8;text-decoration:none}
footer a:hover{color:#fff}
.foot-title{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#7D858E;margin:0 0 12px}
.foot-list{list-style:none;margin:0;padding:0}
.foot-list li{margin-bottom:8px}
.foot-bottom{
  border-top:1px solid #272B30;margin-top:36px;padding-top:20px;
  font-size:13px;color:#7D858E;
}