/* Veille concurrentielle 10Strict — identité : noir, rouge #F2453D, Oswald + Poppins */
:root{
  --noir:#0C0C0D;
  --surf:#141415;
  --surf2:#1B1B1D;
  --rule:#2A2A2C;
  --rule2:#202023;
  --ink:#F2F0EC;
  --ink2:#A9A6A0;
  --ink3:#6E6B66;
  --rouge:#F2453D;
  --bleu:#4D96E8;
  --vert:#1F9E63;
  --shot:#FFFFFF;
  --disp:"Oswald","Helvetica Neue",Arial,sans-serif;
  --body:"Poppins","Helvetica Neue",Arial,sans-serif;
  --data:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --mes:70ch;
  --pad:clamp(1rem,4vw,2.6rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--noir);color:var(--ink);
  font-family:var(--body);font-size:16.5px;line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad) 6rem}

/* ---- barre de navigation ---- */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(12,12,13,.93);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.nav .in{max-width:1180px;margin:0 auto;padding:.7rem var(--pad);display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.nav .logo{display:flex;align-items:center;gap:.6rem;font-family:var(--disp);font-weight:700;font-style:italic;letter-spacing:-.02em;font-size:1.05rem;text-transform:uppercase}
.nav .logo span{color:var(--rouge)}
.nav a{color:var(--ink2);text-decoration:none;font-family:var(--disp);font-size:.82rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a[aria-current]{border-bottom:2px solid var(--rouge);padding-bottom:2px}
.nav .sp{flex:1}
.nav .date{font-family:var(--data);font-size:.7rem;color:var(--ink3)}

/* ---- en-tête ---- */
.hero{padding:3.6rem 0 1.2rem;border-bottom:3px solid var(--rouge);margin-bottom:2.8rem}
.kick{font-family:var(--disp);font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rouge);margin:0 0 1rem}
h1{
  font-family:var(--disp);font-weight:700;font-style:italic;
  font-size:clamp(2.4rem,7.2vw,5rem);line-height:.95;letter-spacing:-.025em;
  text-transform:uppercase;margin:0 0 1.1rem;text-wrap:balance;
}
.chapo{font-size:clamp(1rem,2vw,1.15rem);color:var(--ink2);max-width:62ch;margin:0 0 1.5rem}
.facts{display:flex;flex-wrap:wrap;gap:.45rem 1.5rem;font-family:var(--data);font-size:.73rem;color:var(--ink3)}
.facts b{color:var(--ink2);font-weight:600}

/* ---- sections ---- */
section{margin:0 0 4.4rem;scroll-margin-top:62px}
.eye{
  display:flex;align-items:baseline;gap:.9rem;font-family:var(--disp);
  font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink3);border-top:1px solid var(--rule);padding-top:.7rem;margin-bottom:1.1rem;
}
.eye span:first-child{color:var(--rouge)}
h2{font-family:var(--disp);font-weight:600;font-size:clamp(1.5rem,3.4vw,2.25rem);line-height:1.1;letter-spacing:-.01em;margin:0 0 1rem;text-wrap:balance}
h3{font-family:var(--disp);font-weight:500;font-size:1.08rem;letter-spacing:.01em;margin:2.2rem 0 .6rem}
p{margin:0 0 1.05rem;max-width:var(--mes)}
.lede{font-size:1.05rem;color:var(--ink2)}
strong{font-weight:600;color:var(--ink)}
code{font-family:var(--data);font-size:.86em;background:var(--rule2);padding:.08em .34em;border-radius:2px}
a{color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--rouge)}
a:focus-visible{outline:2px solid var(--rouge);outline-offset:3px}

/* ---- chiffres ---- */
.keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(166px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin:0 0 1.8rem}
.key{background:var(--surf);padding:1.1rem 1.05rem 1.15rem}
.key .n{font-family:var(--disp);font-weight:600;font-size:clamp(1.6rem,3.8vw,2.4rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:block;margin-bottom:.35rem}
.key .n.r{color:var(--rouge)}
.key .n.b{color:var(--bleu)}
.key .l{font-family:var(--disp);font-weight:300;font-size:.76rem;line-height:1.4;color:var(--ink2)}

/* ---- figures ---- */
figure.g{margin:1.5rem 0 1.8rem;background:var(--surf);border:1px solid var(--rule)}
figure.g svg{display:block;width:100%;height:auto}
figure.g figcaption{padding:.75rem 1rem .85rem;border-top:1px solid var(--rule2);font-family:var(--disp);font-size:.8rem;font-weight:300;color:var(--ink2)}
figure.g figcaption b{color:var(--ink);font-weight:500}

/* ---- tableaux ---- */
.scroll{overflow-x:auto;margin:1.3rem 0 .6rem;border:1px solid var(--rule);background:var(--surf)}
table{border-collapse:collapse;width:100%;font-family:var(--disp);font-weight:300;font-size:.84rem}
caption{text-align:left;font-family:var(--disp);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);padding:.85rem 1rem .6rem;border-bottom:1px solid var(--rule2)}
th,td{padding:.5rem .8rem;text-align:left;border-bottom:1px solid var(--rule2);white-space:nowrap}
thead th{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);border-bottom:1px solid var(--rule)}
tbody tr:last-child td{border-bottom:none}
td.num{font-family:var(--data);font-variant-numeric:tabular-nums;text-align:right}
td.name{font-weight:500;color:var(--ink)}
tr.mine td{background:rgba(242,69,61,.1)}
.pos{color:var(--vert);font-weight:600}
.neg{color:var(--rouge);font-weight:600}
.dim{color:var(--ink3)}

/* ---- captures d'annonces ---- */
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:1rem;margin:1.4rem 0}
.shot{background:var(--surf);border:1px solid var(--rule);display:flex;flex-direction:column;overflow:hidden}
.shot .im{background:var(--shot);padding:.5rem;display:flex;align-items:center;justify-content:center;min-height:92px}
.shot img{max-width:100%;height:auto;display:block}
.shot .cap{padding:.6rem .75rem .8rem;font-family:var(--disp);font-weight:300;font-size:.76rem;line-height:1.4;color:var(--ink2);border-top:1px solid var(--rule2);display:flex;flex-direction:column;gap:.18rem}
.shot .cap b{color:var(--ink);font-weight:500;font-size:.8rem}
.shot .cap .d{font-family:var(--data);font-size:.68rem;color:var(--rouge)}

/* ---- cartes de créa ---- */
.ads{display:grid;grid-template-columns:repeat(auto-fit,minmax(318px,1fr));gap:1.2rem;margin:1.5rem 0}
.ad{background:var(--surf);border:1px solid var(--rule);display:flex;flex-direction:column;overflow:hidden}
.ad.win{border-left:4px solid var(--vert)}
.ad.lose{border-left:4px solid var(--rouge)}
.ad.cli{border-left:4px solid var(--bleu)}
.ad .im{background:var(--shot);display:flex;align-items:center;justify-content:center;max-height:250px;overflow:hidden}
.ad .im img{width:100%;height:auto;display:block}
.ad .in{padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;flex:1}
.ad .tag{font-family:var(--data);font-size:.66rem;display:flex;justify-content:space-between;gap:.8rem;color:var(--ink3);margin-bottom:.6rem;flex-wrap:wrap}
.ad .tag .life{font-weight:700}
.ad.win .tag .life{color:var(--vert)}
.ad.lose .tag .life{color:var(--rouge)}
.ad.cli .tag .life{color:var(--bleu)}
.ad .who{font-family:var(--disp);font-weight:500;font-size:.95rem;margin:0 0 .55rem;line-height:1.3;color:var(--ink)}
.ad blockquote{margin:0 0 .8rem;padding:0 0 0 .8rem;border-left:2px solid var(--rule);font-size:.85rem;color:var(--ink2);line-height:1.55}
.ad .read{font-family:var(--disp);font-weight:300;font-size:.82rem;line-height:1.5;margin-top:auto;color:var(--ink2)}
.ad .read b{color:var(--rouge);font-weight:500}

/* ---- encadrés ---- */
.note{background:var(--surf);border:1px solid var(--rule);padding:1.1rem 1.2rem;margin:1.5rem 0;font-size:.93rem;color:var(--ink2)}
.note p{max-width:none;font-size:.93rem}
.note p:last-child{margin-bottom:0}
.note b{color:var(--ink);font-weight:600}
.note.flag{border-left:4px solid var(--rouge)}
.note.ok{border-left:4px solid var(--vert)}

ul.plain{max-width:var(--mes);margin:0 0 1.1rem;padding:0 0 0 1.1rem}
ul.plain li{margin-bottom:.45rem}
ol.steps{max-width:var(--mes);margin:0 0 1.1rem;padding:0 0 0 1.3rem}
ol.steps li{margin-bottom:.65rem}

/* ---- formule ---- */
.formule{border:1px solid var(--rule);background:var(--surf);margin:1.4rem 0}
.frow{display:grid;grid-template-columns:minmax(118px,168px) 1fr;border-bottom:1px solid var(--rule2)}
.frow:last-child{border-bottom:none}
.frow .lab{font-family:var(--disp);font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);padding:.85rem 1rem;background:var(--rule2)}
.frow .val{padding:.85rem 1rem}
.frow .val p{margin:0 0 .35rem;font-size:.9rem;max-width:none}
.frow .val p:last-child{margin-bottom:0}
.frow .val .pr{font-family:var(--data);font-size:.73rem;color:var(--ink3)}
.frow .val .cl{font-family:var(--disp);font-weight:300;font-size:.9rem;color:var(--ink);border-left:2px solid var(--rouge);padding-left:.7rem;margin-top:.45rem}
@media (max-width:620px){.frow{grid-template-columns:1fr}}

/* ---- banque de copy ---- */
.copy{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1rem;margin:1.3rem 0}
.cb{background:var(--surf);border:1px solid var(--rule);padding:.95rem 1.05rem 1.1rem}
.cb h4{font-family:var(--disp);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--rouge);margin:0 0 .6rem}
.cb ul{margin:0;padding:0 0 0 1rem;font-size:.86rem;color:var(--ink2)}
.cb li{margin-bottom:.4rem}

/* ---- cartes de lien ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem;margin:1.6rem 0}
.card{background:var(--surf);border:1px solid var(--rule);padding:1.2rem 1.25rem 1.3rem;text-decoration:none;display:flex;flex-direction:column;transition:border-color .18s ease,transform .18s ease}
.card:hover{border-color:var(--rouge);transform:translateY(-2px)}
.card .t{font-family:var(--disp);font-weight:600;font-size:1.08rem;color:var(--ink);margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.01em}
.card .d{font-size:.88rem;color:var(--ink2);margin-bottom:.7rem}
.card .go{font-family:var(--data);font-size:.72rem;color:var(--rouge);margin-top:auto}

/* ---- vidéo ---- */
.player{background:#000;border:1px solid var(--rule);margin:1.5rem 0}
.player video{display:block;width:100%;height:auto}

footer{border-top:1px solid var(--rule);padding-top:1.4rem;font-size:.85rem;color:var(--ink3)}
footer p{max-width:var(--mes);font-size:.85rem}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}