/* ============================================================
   SCARLET WOLF — design system v2 « Tech souveraine »
   Typo : Unbounded (display) · Geologica (texte) · JetBrains Mono (data)
   Anthracite chaud · Ocre dominant · Rouge en touche rare
   Motif signature : coin coupé (notch)
   Polices auto-hébergées (fonts.css) : aucune requête tierce.
   ============================================================ */
@import url('fonts.css');

:root{
  --ink:#0e0c0a; --ink-2:#151210; --ink-3:#1c1814;
  --ocre:#c98a3a; --ocre-bright:#e8ad55; --ocre-deep:#9d6a2a;
  --ocre-wash:rgba(201,138,58,.07); --rouge:#c43a2b;
  --text:#f2ede5; --text-2:#b9ae9f; --text-3:#7e7468;
  --line:#352e27; --hair:rgba(201,138,58,.18);
  --display:'Unbounded',sans-serif; --body:'Geologica',sans-serif; --mono:'JetBrains Mono',monospace;
  --notch:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--text);font-family:var(--body);font-weight:300;line-height:1.7}
img{max-width:100%}
.wrap{max-width:1220px;margin:0 auto;padding:0 32px}
::selection{background:var(--ocre);color:var(--ink)}
.mono{font-family:var(--mono)}
.red{color:var(--rouge)}
.wolf-tint{filter:invert(64%) sepia(48%) saturate(420%) hue-rotate(353deg)}

.notch{clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%)}

.rev{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.rev.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}}

/* ── NAV ──────────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto;z-index:40;border-bottom:1px solid transparent;transition:.3s}
.nav.scrolled,.nav.solid{background:rgba(14,12,10,.88);backdrop-filter:blur(10px);border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
.brand img{width:34px}
.brand span{font-family:var(--display);font-weight:500;font-size:14px;letter-spacing:.14em}
.nav ul{display:flex;gap:34px;list-style:none;font-family:var(--mono);font-size:11px;letter-spacing:.18em;align-items:center}
.nav ul a{color:var(--text-2);text-decoration:none;transition:color .2s}
.nav ul a:hover,.nav ul a.active{color:var(--ocre)}
.nav .c{border:1px solid var(--line);padding:11px 22px;color:var(--text);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.nav .c:hover{border-color:var(--ocre);color:var(--ocre)}
.nav .burger{display:none;background:none;border:1px solid var(--line);color:var(--text);font-family:var(--mono);font-size:10px;letter-spacing:.2em;padding:10px 14px;cursor:pointer}

/* ── boutons ──────────────────────────────────────────────── */
.btn{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  padding:17px 30px;color:var(--ink);background:var(--ocre);transition:background .2s;border:0;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
.btn:hover{background:var(--ocre-bright)}
.btn.ghost{background:rgba(14,12,10,.5);color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{color:var(--text);box-shadow:inset 0 0 0 1px var(--text-3)}
.cta{display:flex;gap:16px;flex-wrap:wrap}

/* ── hero home (canvas) ───────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%}
.hero .veil{position:absolute;inset:0;background:radial-gradient(ellipse 95% 75% at 32% 45%,transparent 62%,var(--ink) 100%)}
.hero .wolfbg{position:absolute;right:-4%;bottom:-6%;width:min(46vw,560px);opacity:.07;pointer-events:none}
.hero .wrap{position:relative;padding-top:120px;padding-bottom:90px}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.32em;color:var(--ocre);text-transform:uppercase;display:flex;align-items:center;gap:16px}
.kicker::before{content:"";width:46px;height:1px;background:var(--ocre-deep)}
h1{font-family:var(--display);font-weight:700;font-size:clamp(40px,6.6vw,92px);line-height:1.04;letter-spacing:-.01em;margin:30px 0 28px;max-width:14ch}
h1 em{font-style:normal;color:var(--ocre)}
h1 .dot{color:var(--rouge)}
.lead{font-size:18px;font-weight:300;color:var(--text-2);max-width:50ch}
.lead b{color:var(--text);font-weight:500}
.hero .cta{margin-top:42px}
.readout{position:absolute;left:0;right:0;bottom:0;border-top:1px solid var(--line);background:rgba(14,12,10,.6);backdrop-filter:blur(6px)}
.readout .wrap{display:grid;grid-template-columns:repeat(4,1fr);font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;padding-top:0;padding-bottom:0}
.readout .r{padding:17px 0 17px 18px;color:var(--text-3);display:flex;gap:10px;align-items:baseline;border-right:1px solid var(--line)}
.readout .r:first-child{border-left:1px solid var(--line)}
.readout .r b{color:var(--ocre);font-weight:500}
.readout .r b.no{color:var(--rouge)}

/* ── hero pages intérieures ───────────────────────────────── */
.phero{position:relative;padding:170px 0 70px;border-bottom:1px solid var(--line);overflow:hidden;
  background:linear-gradient(180deg,var(--ink-2),var(--ink))}
.phero .crumb{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--text-3);margin-bottom:26px}
.phero .crumb a{color:var(--text-3);text-decoration:none}
.phero .crumb a:hover{color:var(--ocre)}
.phero h1{font-size:clamp(34px,5vw,68px)}
.phero .lead{margin-top:4px}
.phero .wolfside{position:absolute;right:-3%;bottom:-18%;width:min(34vw,380px);opacity:.06;pointer-events:none}
.phero .meta{display:flex;gap:34px;margin-top:34px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--text-3);flex-wrap:wrap}
.phero .meta b{color:var(--ocre);font-weight:500}

/* ── sections ─────────────────────────────────────────────── */
section{padding:100px 0}
section.tight{padding:70px 0}
section.alt{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.shead{display:flex;align-items:baseline;gap:22px;margin-bottom:16px}
.shead .n{font-family:var(--mono);font-size:12px;color:var(--ocre);letter-spacing:.2em}
.shead h2{font-family:var(--display);font-weight:500;font-size:clamp(26px,3.2vw,40px);letter-spacing:.01em}
.shead .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.ssub{color:var(--text-2);max-width:60ch;margin-bottom:56px;font-size:16.5px}

/* ── cards génériques (facts / features) ──────────────────── */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cards2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.card{position:relative;background:linear-gradient(160deg,var(--ink-3),var(--ink-2) 55%);padding:38px 32px 42px;
  box-shadow:inset 0 0 0 1px var(--line);transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--ocre-deep)}
.card::before{content:"";position:absolute;top:0;left:0;width:46px;height:2px;background:var(--ocre)}
.card .gnum{position:absolute;top:18px;right:22px;font-family:var(--display);font-weight:700;font-size:64px;line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--hair);pointer-events:none}
.card .k{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--ocre);display:block;margin-bottom:22px}
.card h3{font-family:var(--display);font-weight:500;font-size:19px;line-height:1.4;margin-bottom:14px}
.card p{font-size:14.5px;color:var(--text-2)}
.card p b{color:var(--text);font-weight:500}

/* encart verdict / citation d'appel */
.verdict{margin-top:26px;padding:26px 32px;display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;
  background:var(--ocre-wash);box-shadow:inset 0 0 0 1px var(--hair)}
.verdict .q{font-family:var(--display);font-weight:300;font-size:19px;color:var(--text)}
.verdict .a{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--ocre);margin-left:auto;white-space:nowrap}

/* ── plates écosystème (le loup au survol) ────────────────── */
.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.plates-list{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.plate{position:relative;background:var(--ink);padding:34px 30px 38px;text-decoration:none;color:inherit;display:block;
  overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);transition:transform .25s,box-shadow .25s}
.plate:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--ocre-deep)}
.plate .wm{position:absolute;right:-38px;bottom:-34px;width:170px;opacity:.06;transition:opacity .3s,transform .3s}
.plate:hover .wm{opacity:.22;transform:scale(1.04)}
.plate .head{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--text-3);margin-bottom:34px}
.plate .head .st{color:var(--ocre)}
.plate h3{font-family:var(--display);font-weight:500;font-size:26px;letter-spacing:.02em;margin-bottom:6px}
.plate .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--ocre);display:block;margin-bottom:14px}
.plate p{font-size:14.5px;color:var(--text-2);position:relative;min-height:4.4em}
.plate .go{margin-top:22px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--text-3);transition:color .2s}
.plate:hover .go{color:var(--ocre)}

/* ── tenets / listes numérotées ───────────────────────────── */
.tenets{display:grid;gap:14px}
.tenet{display:flex;gap:22px;align-items:baseline;padding:22px 26px;background:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s}
.tenet:hover{box-shadow:inset 0 0 0 1px var(--ocre-deep)}
.tenet .n{font-family:var(--mono);font-size:10.5px;color:var(--ocre);letter-spacing:.2em;white-space:nowrap}
.tenet p{font-size:15px;color:var(--text-2)}
.tenet p b{color:var(--text);font-weight:500}

/* ── prose (pages éditoriales, légal, articles) ───────────── */
.prose{max-width:760px}
.prose h2{font-family:var(--display);font-weight:500;font-size:24px;margin:54px 0 18px}
.prose h3{font-family:var(--display);font-weight:500;font-size:17px;margin:34px 0 12px;color:var(--ocre)}
.prose p{color:var(--text-2);margin-bottom:16px}
.prose p b,.prose li b{color:var(--text);font-weight:500}
.prose ul,.prose ol{color:var(--text-2);margin:0 0 16px 22px}
.prose li{margin-bottom:8px}
.prose a{color:var(--ocre);text-decoration:none;border-bottom:1px solid var(--ocre-deep)}
.prose a:hover{color:var(--ocre-bright)}
.prose .note{padding:20px 24px;background:var(--ocre-wash);box-shadow:inset 0 0 0 1px var(--hair);font-size:14.5px;color:var(--text-2);margin:24px 0}

/* ── FAQ ──────────────────────────────────────────────────── */
.faq{display:grid;gap:12px;max-width:860px}
.faq details{background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.faq details[open]{box-shadow:inset 0 0 0 1px var(--ocre-deep)}
.faq summary{cursor:pointer;list-style:none;padding:20px 26px;font-family:var(--display);font-weight:500;font-size:15px;
  display:flex;justify-content:space-between;gap:18px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--ocre);flex:none}
.faq details[open] summary::after{content:"–"}
.faq .body{padding:0 26px 22px;color:var(--text-2);font-size:14.5px}

/* ── formulaire contact ───────────────────────────────────── */
.form{display:grid;gap:16px;max-width:560px}
.form label{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--text-3);display:grid;gap:8px}
.form input,.form textarea{background:var(--ink-2);border:1px solid var(--line);color:var(--text);
  font-family:var(--body);font-size:15px;padding:14px 16px;outline:none;transition:border-color .2s}
.form input:focus,.form textarea:focus{border-color:var(--ocre)}
.form textarea{min-height:140px;resize:vertical}

/* ── CTA final ────────────────────────────────────────────── */
.final{text-align:center;border-top:1px solid var(--line)}
.final .l{font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:var(--text-3);text-transform:uppercase}
.final h2{font-family:var(--display);font-weight:500;font-size:clamp(28px,4vw,52px);margin:20px auto 16px;max-width:20ch;line-height:1.18}
.final h2 em{font-style:normal;color:var(--ocre)}
.final p{color:var(--text-2);max-width:52ch;margin:0 auto}
.final .cta{justify-content:center;margin-top:36px}

/* ── footer ───────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);background:var(--ink-2)}
footer a{color:var(--text-3);text-decoration:none}
footer a:hover{color:var(--ocre)}
.foot-main{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding:46px 0 40px}
.foot-main .sig{display:flex;flex-direction:column;gap:14px}
.foot-main .sig .b{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.14em;color:var(--text)}
.foot-main .sig .b img{width:28px}
.foot-main .sig p{font-size:13.5px;color:var(--text-3);max-width:34ch}
.foot-main h4{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--text-3);margin-bottom:16px;font-weight:500}
.foot-main ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:13.5px}
.foot-main ul a{color:var(--text-2)}
.foot-legal{border-top:1px solid var(--line)}
.foot-legal .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:18px;padding-bottom:18px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--text-3);flex-wrap:wrap;gap:12px}
.foot-legal .links{display:flex;gap:22px;flex-wrap:wrap}

/* ── responsive ───────────────────────────────────────────── */
@media(max-width:980px){
  .cards3,.cards2,.plates,.readout .wrap{grid-template-columns:1fr}
  .foot-main{grid-template-columns:1fr;gap:32px}
  .nav ul{display:none}
  .nav.open ul{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--ink-2);border-bottom:1px solid var(--line)}
  .nav.open ul li{border-top:1px solid var(--line)}
  .nav.open ul a{display:block;padding:16px 32px}
  .nav .burger{display:block}
  .hero .wolfbg{width:70vw;opacity:.05}
  .phero{padding-top:130px}
}