/* Satyvo — « rapport d'inspection » · polices système uniquement, aucune ressource tierce */
:root{
  --paper:#f6f3ec;--paper-2:#efeae0;--card:#fffdf8;
  --ink:#14211c;--muted:#5a665f;--line:#d8d1c2;
  --fir:#1d4a3a;--fir-2:#2c6b54;--moss:#dfe8df;
  --signal:#c9821b;--signal-soft:#f6e6c8;--bad:#a8432f;--ok:#2c6b54;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Charter,"Bitstream Charter",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,"Liberation Mono",monospace;
  --max:70rem;--r:6px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 var(--sans)}
a{color:var(--fir-2);text-underline-offset:.18em}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem;z-index:9}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;line-height:1.15}
.kicker{font:600 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--signal);margin:0 0 .9rem}

/* En-tête */
header.site{background:var(--fir);color:#fff}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.2rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;font:700 1.1rem/1 var(--sans);letter-spacing:.16em}
.brand svg{width:2rem;height:2rem;flex:none}
.brand span{font:400 .72rem/1 var(--mono);letter-spacing:.12em;color:#b9d1c4;border-left:1px solid #4f7d6a;padding-left:.6rem}
nav.main{display:flex;gap:1.3rem;flex-wrap:wrap}
nav.main a{color:#e7efe9;text-decoration:none;font-size:.93rem}
nav.main a:hover{color:#fff;text-decoration:underline}

/* Héros */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400'%3E%3Cg fill='none' stroke='%231d4a3a' stroke-opacity='.07' stroke-width='1.2'%3E%3Cpath d='M-20 300C80 250 140 320 240 280S420 180 620 230'/%3E%3Cpath d='M-20 330C90 285 150 350 250 312S430 215 620 262'/%3E%3Cpath d='M-20 360C100 320 160 380 260 344S440 250 620 294'/%3E%3Cpath d='M-20 120C60 90 130 150 230 110S400 40 620 80'/%3E%3Cpath d='M-20 150C70 125 140 182 240 142S410 75 620 112'/%3E%3Cpath d='M-20 180C80 160 150 214 250 174S420 110 620 144'/%3E%3C/g%3E%3C/svg%3E") center/600px auto,
   linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center;padding-top:4rem;padding-bottom:4rem}
.hero h1{font-size:clamp(2rem,4.4vw,3.1rem);margin:0 0 1.1rem;max-width:40rem}
.hero h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--signal-soft) 62%)}
.hero p.lead{font-size:1.14rem;color:var(--muted);max-width:38rem;margin:0 0 1.8rem}
.actions{display:flex;gap:.7rem;flex-wrap:wrap}
.btn{display:inline-block;background:var(--fir);color:#fff;padding:.85rem 1.3rem;border-radius:var(--r);text-decoration:none;font-weight:600;border:1px solid var(--fir);transition:background .15s,transform .15s}
.btn:hover{background:var(--fir-2);transform:translateY(-1px)}
.btn.alt{background:transparent;color:var(--fir)}
.btn.alt:hover{background:var(--moss)}

/* Extrait de constat (illustratif) */
.report{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 1px 0 #fff inset,0 18px 40px -22px rgba(20,33,28,.35);font-size:.9rem;transform:rotate(.6deg)}
.report header{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.9rem 1.1rem;border-bottom:1px dashed var(--line);font:500 .76rem/1.3 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.report header b{color:var(--ink);font-weight:700}
.report ul{list-style:none;margin:0;padding:.4rem 1.1rem 1rem}
.report li{display:grid;grid-template-columns:1.6rem 1fr;gap:.5rem;padding:.55rem 0;border-bottom:1px solid var(--paper-2);align-items:start}
.report li:last-child{border-bottom:0}
.report .m{font:700 .85rem/1.5 var(--mono);text-align:center;border-radius:4px}
.report .x{color:var(--bad);background:#f5e0da}.report .v{color:var(--ok);background:var(--moss)}
.report small{display:block;color:var(--muted);font-size:.8rem}
.report footer{padding:.7rem 1.1rem;background:var(--paper-2);font:500 .72rem/1.4 var(--mono);color:var(--muted);border-radius:0 0 var(--r) var(--r)}
.stamp{display:inline-block;margin-left:.4rem;padding:.1rem .45rem;border:1.5px solid var(--signal);color:var(--signal);border-radius:3px;font:700 .68rem/1.4 var(--mono);letter-spacing:.1em;transform:rotate(-3deg)}

/* Sections */
section{padding:4rem 0;border-bottom:1px solid var(--line)}
section h2{font-size:clamp(1.6rem,3vw,2.1rem);margin:0 0 1rem;max-width:36rem}
section > .wrap > p{max-width:44rem}

/* Chiffres */
.facts{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin:2rem 0 1.5rem}
.fact{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--signal);border-radius:var(--r);padding:1.2rem 1.2rem 1.3rem}
.fact .n{font:700 2.6rem/1 var(--mono);color:var(--ink);letter-spacing:-.03em}
.fact .bar{height:6px;background:var(--paper-2);border-radius:3px;margin:.8rem 0 .7rem;overflow:hidden}
.fact .bar i{display:block;height:100%;background:var(--signal)}
.fact p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.5}
.note{background:var(--moss);border-left:4px solid var(--fir-2);padding:1rem 1.2rem;border-radius:0 var(--r) var(--r) 0;max-width:48rem}
.note.warn{background:var(--signal-soft);border-left-color:var(--signal)}
.note p{margin:0}

/* Offres */
.grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));margin-top:1.8rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;position:relative}
.card h3{margin:0 0 .5rem;font-size:1.3rem}
.card .code{position:absolute;top:1.1rem;right:1.2rem;font:600 .7rem/1 var(--mono);color:var(--muted);letter-spacing:.1em}
.card.feature{border:2px solid var(--fir);box-shadow:0 14px 30px -20px rgba(29,74,58,.6)}
.price{font:700 1.7rem/1.1 var(--mono);margin:.2rem 0 .8rem;color:var(--fir);letter-spacing:-.02em}
.price small{display:block;font:400 .82rem/1.4 var(--sans);color:var(--muted);letter-spacing:0;margin-top:.3rem}
.card ul{padding-left:0;list-style:none;margin:.4rem 0}
.card ul li{padding-left:1.3rem;position:relative;margin:.3rem 0}
.card ul li::before{content:"";position:absolute;left:0;top:.62em;width:.6rem;height:2px;background:var(--signal)}
.fine{margin-top:1.2rem;color:var(--muted);font-size:.93rem}

/* Méthode */
ol.steps{list-style:none;counter-reset:s;padding:0;margin:2rem 0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
ol.steps li{counter-increment:s;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.2rem 1.3rem}
ol.steps li::before{content:"0" counter(s);display:block;font:700 1.9rem/1 var(--mono);color:var(--signal);margin-bottom:.6rem}
ol.steps strong{display:block;font-family:var(--serif);font-size:1.15rem;margin-bottom:.2rem}

/* Qui / contact */
.split{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
.contact-card{background:var(--fir);color:#e7efe9;border-radius:var(--r);padding:1.6rem 1.7rem}
.contact-card h2{color:#fff}
.contact-card a{color:#fff}
.contact-card dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.2rem;margin:1.2rem 0 0}
.contact-card dt{font:600 .72rem/1.9 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#9fc0b0}
.contact-card dd{margin:0}
.contact-card .btn{background:var(--signal);border-color:var(--signal);color:#1b1306;margin-top:1.4rem}
.contact-card .btn:hover{background:#dc9431}

/* Pages légales */
.legal{padding:3rem 1.25rem 4rem;max-width:46rem}
.legal h1{font-size:2.2rem}
.legal h2{font-size:1.3rem;margin-top:2.2rem}

/* Pied de page */
footer.site{background:#10291f;color:#a9c2b6;padding:2rem 0;font-size:.88rem}
footer.site a{color:#d5e4dc}
footer.site .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
footer.site .mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em}

@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;gap:2.2rem;padding-top:2.6rem;padding-bottom:3rem}
  .report{transform:none}
  .split{grid-template-columns:1fr}
}
@media (max-width:600px){
  nav.main{gap:.9rem}
  section{padding:3rem 0}
  .fact .n{font-size:2.2rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}
.crumb{font:500 .78rem/1.4 var(--mono);color:var(--muted);letter-spacing:.04em;margin:0 0 1rem}
.crumb a{color:var(--muted)}
.brand .bce{font-weight:400}
@media (max-width:600px){.brand .bce{display:none}}

/* ── Motion « inspection » · CSS seul, aucun script ─────────────────────── */
@media (prefers-reduced-motion:no-preference){
  /* 1. Le constat se « scanne » au chargement */
  .report{position:relative;overflow:hidden;animation:rp-in .7s cubic-bezier(.2,.7,.2,1) both}
  .report::after{content:"";position:absolute;left:0;right:0;top:0;height:3.2rem;pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(201,130,27,.16) 70%,rgba(201,130,27,.55) 100%);
    border-bottom:2px solid var(--signal);transform:translateY(-110%);
    animation:rp-scan 1.9s cubic-bezier(.45,0,.25,1) .45s 1 forwards}
  .report li{opacity:0;animation:rp-row .45s ease-out forwards}
  .report li:nth-child(1){animation-delay:.75s}
  .report li:nth-child(2){animation-delay:1.1s}
  .report li:nth-child(3){animation-delay:1.45s}
  .report li:nth-child(4){animation-delay:1.8s}
  .report .m{animation:rp-mark .35s cubic-bezier(.3,1.6,.5,1) both;animation-delay:inherit}
  .report li:nth-child(1) .m{animation-delay:.85s}
  .report li:nth-child(2) .m{animation-delay:1.2s}
  .report li:nth-child(3) .m{animation-delay:1.55s}
  .report li:nth-child(4) .m{animation-delay:1.9s}
  .report footer{opacity:0;animation:rp-row .5s ease-out 2.25s forwards}
  .stamp{animation:rp-stamp .45s cubic-bezier(.3,1.7,.5,1) 2.45s both}

  /* 5. Le bouton principal respire une fois le scan terminé */
  .hero .btn:not(.alt){animation:rp-cta 1.4s ease-out 2.8s 1 both}

  @keyframes rp-in{from{opacity:0;transform:translateY(14px) rotate(.6deg)}to{opacity:1;transform:rotate(.6deg)}}
  @keyframes rp-scan{0%{transform:translateY(-110%)}85%{opacity:1}100%{transform:translateY(calc(100% + 22rem));opacity:0}}
  @keyframes rp-row{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
  @keyframes rp-mark{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
  @keyframes rp-stamp{from{transform:rotate(-3deg) scale(2.2);opacity:0}to{transform:rotate(-3deg) scale(1);opacity:1}}
  @keyframes rp-cta{0%{box-shadow:0 0 0 0 rgba(201,130,27,.55)}100%{box-shadow:0 0 0 14px rgba(201,130,27,0)}}
}

/* 2 et 3. Révélation au défilement (navigateurs compatibles ; sinon tout reste visible) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .fact .bar i{transform-origin:left;animation:bar-fill linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
    .fact .n{animation:fact-n linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
    ol.steps li{animation:step-in linear both;animation-timeline:view();animation-range:entry 5% cover 30%}
    ol.steps li::before{animation:step-num linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
    @keyframes bar-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    @keyframes fact-n{from{opacity:.15;transform:translateY(8px)}to{opacity:1;transform:none}}
    @keyframes step-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
    @keyframes step-num{from{color:var(--line)}to{color:var(--signal)}}
  }
}

/* 4. Micro-interaction des cartes et boutons */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .card,ol.steps li,.fact{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
  .card:hover,.fact:hover{transform:translateY(-3px);box-shadow:0 14px 28px -20px rgba(20,33,28,.45)}
  .card:hover{border-color:var(--fir-2)}
  .btn:not(.alt)::after{content:" →";display:inline-block;transition:transform .2s ease}
  .btn:not(.alt):hover::after{transform:translateX(3px)}
}
@media (max-width:860px) and (prefers-reduced-motion:no-preference){
  .report{animation-name:rp-in-flat}
  @keyframes rp-in-flat{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}