/* vulpra.xyz : feuille partagée (accueil FR/EN, réalisations) */
:root{
  /* graphite et orange roux (vulpes, le renard) */
  --paper:#f6f6f4;
  --paper-2:#ebebe7;
  --white:#fcfcfb;
  --rule:#d3d3cd;
  --rule-soft:#e3e3de;
  --ink:#22262b;
  --ink-2:#4d5157;
  --ink-3:#767a80;
  --ink-soft:#b8471a;
  --accent:#e2692c;
  --accent-ink:#b8471a;
  --accent-soft:rgba(226,105,44,.1);
  --accent-light:#ffa66e;
  --on-accent:#22262b;
  --ok:#2d6a4f;
  --err:#b3261e;
  --night-2:#b3b6ba;
  --night-rule:#3a3f45;
  --font-d:'Newsreader',Georgia,serif;
  --font-b:'Public Sans',-apple-system,'Segoe UI',sans-serif;
  --font-m:'Spline Sans Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
section[id],[id].case{scroll-margin-top:84px}
body{background:var(--paper);color:var(--ink);font-family:var(--font-b);font-size:16.5px;line-height:1.68;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
img{max-width:100%}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:2px}
.wrap{max-width:1000px;margin:0 auto;padding:0 24px}
@media(max-width:560px){.wrap{padding:0 18px}}
h1{font-family:var(--font-d);font-weight:500;font-size:clamp(2.4rem,6vw,4.3rem);line-height:1.05;letter-spacing:-.015em}
h1 em,h2 em{font-style:normal;color:var(--ink-soft)}
h2{font-family:var(--font-d);font-weight:500;font-size:clamp(1.6rem,3.3vw,2.3rem);line-height:1.14;letter-spacing:-.01em}
h3{font-family:var(--font-d);font-weight:500;font-size:1.3rem;line-height:1.25}
.mono{font-family:var(--font-m);font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.mono b{color:var(--accent-ink);font-weight:600}
p.lede{color:var(--ink-2);font-size:clamp(1.03rem,1.9vw,1.17rem);max-width:650px}
.alink{color:var(--accent-ink);font-weight:600;border-bottom:1px solid var(--accent-soft);transition:border-color .2s}
.alink:hover{border-color:var(--accent-ink)}

/* ===== Header ===== */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.nav{display:flex;align-items:center;gap:22px;height:64px}
.logo{font-family:var(--font-d);font-size:22px;font-weight:500;letter-spacing:.01em;margin-right:auto}
.logo b{color:var(--accent)}
.nav-links{display:flex;gap:22px}
.nav-links a{font-family:var(--font-m);font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding:4px 0;border-bottom:1px solid transparent;transition:.2s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink);border-color:var(--accent)}
.lang{font-family:var(--font-m);font-size:12.5px;font-weight:600;letter-spacing:.08em;border:1px solid var(--rule);padding:6px 11px;transition:.2s;color:var(--ink-2)}
.lang:hover{border-color:var(--ink);color:var(--ink)}
.nav-cta{font-family:var(--font-m);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--accent);color:var(--on-accent);padding:9px 15px;transition:.2s}
.nav-cta:hover{background:var(--ink);color:var(--paper)}
@media(max-width:820px){.nav-links .opt{display:none}}
@media(max-width:560px){.nav{gap:12px}.nav-links{gap:12px}.lang{padding:6px 8px}.nav-cta{padding:9px 11px}}
@media(max-width:420px){.nav .lang{display:none}}

/* ===== Buttons ===== */
.btn{display:inline-block;font-family:var(--font-m);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:14px 22px;border:none;cursor:pointer;transition:.2s;text-align:center}
.btn-red{background:var(--accent);color:var(--on-accent)}
.btn-red:hover{background:var(--ink);color:var(--paper)}
.btn-line{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
@media(max-width:480px){.actions .btn{flex:1 1 100%}}

/* ===== Hero ===== */
.hero{padding:84px 0 70px;border-bottom:1px solid var(--rule)}
.hero .mono{display:block;margin-bottom:22px}
.hero h1{max-width:860px}
.hero p.lede{margin-top:26px}
@media(max-width:720px){.hero{padding:52px 0 46px}}

/* Signature : relevé à points de conduite */
.statement{margin-top:54px;border-top:2px solid var(--ink)}
.statement .caption{display:block;padding:14px 0 6px}
.srow{display:flex;align-items:baseline;gap:14px;padding:17px 2px;border-bottom:1px solid var(--rule);transition:background .2s var(--ease)}
a.srow:hover,a.srow:focus-visible{background:var(--paper-2)}
a.srow:hover .note{color:var(--accent-ink)}
.srow .item{font-family:var(--font-d);font-size:clamp(1.15rem,2.6vw,1.5rem);font-weight:500;white-space:nowrap}
.srow .desc{color:var(--ink-3);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44%}
.srow .leader{flex:1;min-width:30px;border-bottom:2px dotted var(--rule);transform:translateY(-5px)}
.srow .note{font-family:var(--font-m);font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--ink-2);white-space:nowrap;transition:color .2s}
.srow.total{border-bottom:3px double var(--ink)}
.srow.total .note{color:var(--accent-ink)}
@media(max-width:640px){.srow .desc{display:none}.srow.total .item{white-space:normal}}

/* ===== Sections ===== */
section{padding:76px 0}
@media(max-width:720px){section{padding:54px 0}}
section.tight{padding-top:0}
.note-head{display:flex;align-items:baseline;gap:16px;margin-bottom:32px}
.note-head .mono{white-space:nowrap}
.note-head .nrule{flex:1;border-bottom:1px solid var(--rule)}
@media(max-width:720px){.note-head .mono{white-space:normal}}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:start}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:28px}}
.split p{color:var(--ink-2);margin-top:16px}
.split p b{color:var(--ink)}
.detail{border-top:2px solid var(--ink)}
.detail li{display:flex;align-items:baseline;gap:12px;padding:12px 2px;border-bottom:1px solid var(--rule);font-size:15px;color:var(--ink-2)}
.detail li .leader{flex:1;min-width:20px;border-bottom:2px dotted var(--rule);transform:translateY(-4px)}
.detail li .tick{font-family:var(--font-m);font-size:12px;color:var(--ok);white-space:nowrap}
.detail li .yr{font-family:var(--font-m);font-size:12px;color:var(--ink-3);white-space:nowrap}
.detail li b{color:var(--ink);font-weight:600}
.sidenote{margin-top:22px;padding:14px 16px;border-left:3px solid var(--accent-ink);background:var(--accent-soft);font-size:14.5px;color:var(--ink-2)}
.sidenote b{color:var(--ink)}

/* Domaines : ce que le dirigeant vit, puis ce qui est mis en place */
.practice + .practice{margin-top:64px}
.symptoms{margin-top:22px;display:grid;gap:9px}
.symptoms li{font-family:var(--font-d);font-size:1.14rem;line-height:1.4;color:var(--ink);padding-left:22px;position:relative}
.symptoms li::before{content:"«";position:absolute;left:0;top:0;color:var(--accent-ink)}
.detail-cap{display:block;margin-bottom:10px}
.detail-cap.second{margin-top:30px}
.practice .more{margin-top:20px;font-size:14.5px}

/* Témoignage */
.testimony{background:var(--ink);color:var(--paper);padding:84px 0}
@media(max-width:720px){.testimony{padding:58px 0}}
.testimony .mono{color:var(--night-2)}
.testimony .mono b{color:var(--accent-light)}
.testimony .note-head .nrule{border-color:var(--night-rule)}
.testimony blockquote{max-width:820px}
.testimony blockquote p{font-family:var(--font-d);font-size:clamp(1.25rem,2.6vw,1.72rem);line-height:1.42;font-weight:400}
.testimony blockquote p + p{margin-top:16px}
.testimony blockquote p.lead-q{font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.15;margin-bottom:26px}
.testimony blockquote p.lead-q::before{content:"« ";color:var(--accent-light)}
.testimony blockquote p.lead-q::after{content:" »";color:var(--accent-light)}
.testimony footer{all:unset;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin-top:30px;padding-top:18px;border-top:1px solid var(--night-rule);font-family:var(--font-m);font-size:13px;letter-spacing:.05em;color:var(--night-2)}
.testimony footer b{color:var(--paper);font-weight:600}
.testimony footer a{color:var(--paper);border-bottom:1px solid var(--accent-light)}

/* Aperçu des réalisations */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:860px){.cases{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cases{grid-template-columns:1fr}}
.ccard{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--rule);transition:border-color .2s,transform .3s var(--ease)}
.ccard:hover{border-color:var(--ink);transform:translateY(-2px)}
.ccard .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--ink);border-bottom:1px solid var(--rule)}
.ccard .thumb img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.ccard .thumb.ledger{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:18px 20px;background:var(--paper-2);font-family:var(--font-m);font-size:12px;color:var(--ink-2)}
.ledger .lh{display:flex;justify-content:space-between;font-weight:600;color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:6px;letter-spacing:.06em}
.ledger .lr{display:flex;justify-content:space-between;border-bottom:1px solid var(--rule);padding:3px 0}
.ledger .up{color:var(--ok)}
.ccard .cbody{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.ccard h3{font-size:1.22rem}
.ccard p{font-size:14.5px;color:var(--ink-2)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-family:var(--font-m);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--rule);padding:2px 7px;background:var(--paper)}
.tag.k{color:var(--accent-ink);border-color:rgba(181,39,29,.35)}
.ccard .go{margin-top:auto;padding-top:8px;font-family:var(--font-m);font-size:12.5px;font-weight:600;letter-spacing:.06em;color:var(--accent-ink)}
.cases-foot{margin-top:28px}

/* Méthode : une vraie séquence */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink);counter-reset:s}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{padding:24px 20px 28px;border-bottom:1px solid var(--rule)}
.step + .step{border-left:1px solid var(--rule)}
@media(max-width:860px){.step:nth-child(3){border-left:none}}
@media(max-width:520px){.step + .step{border-left:none}}
.step .mono{display:block;margin-bottom:12px}
.step h3{margin-bottom:8px;font-size:1.2rem}
.step p{font-size:14.5px;color:var(--ink-2)}

/* À propos */
.about .detail{margin-top:4px}
.portrait-note{font-size:14px;color:var(--ink-3);margin-top:14px}

/* ===== Contact ===== */
.contact{border-top:2px solid var(--ink);background:var(--paper-2)}
.contact .split{grid-template-columns:.9fr 1.1fr}
@media(max-width:820px){.contact .split{grid-template-columns:1fr}}
.contact-links{display:grid;gap:10px;margin-top:26px;justify-items:start}
.contact-links a{font-family:var(--font-m);font-size:14.5px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--rule);padding-bottom:2px;transition:.2s}
.contact-links a:hover{color:var(--accent-ink);border-color:var(--accent-ink)}
.contact-note{margin-top:24px;font-size:13.5px;color:var(--ink-3)}
form{display:grid;gap:14px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.frow{grid-template-columns:1fr}}
label{font-family:var(--font-m);font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);display:grid;gap:7px;align-content:start}
label .lbl{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
label .lbl i{font-style:normal;font-weight:400;color:var(--ink-3);text-transform:none;letter-spacing:0}
input,textarea,select{width:100%;background:var(--paper);border:1px solid var(--rule);border-bottom:2px solid var(--ink-2);padding:0 14px;height:50px;color:var(--ink);font-family:var(--font-b);font-size:16px;transition:.2s;border-radius:0;appearance:none;-webkit-appearance:none}
textarea{height:auto;padding:12px 14px;resize:vertical;min-height:130px}
input:focus,textarea:focus,select:focus{outline:none;border-bottom-color:var(--accent);background:#fff}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2348526a' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
form .btn{margin-top:4px;justify-self:start}
.form-status{font-size:14px;display:none;padding:12px 16px}
.form-status.ok{display:block;background:rgba(29,107,67,.09);color:var(--ok);border-left:3px solid var(--ok)}
.form-status.err{display:block;background:rgba(179,38,30,.07);color:var(--err);border-left:3px solid var(--err)}

/* ===== Footer ===== */
.site-foot{padding:30px 0 40px;border-top:1px solid var(--rule)}
.site-foot .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:var(--font-m);font-size:12.5px;letter-spacing:.04em;color:var(--ink-3)}
.site-foot a{color:var(--ink-2);transition:.2s}
.site-foot a:hover{color:var(--accent-ink)}
.site-foot .sep{margin:0 8px;opacity:.5}

/* ===== Réalisations : onglets par domaine ===== */
.page-hero{padding:70px 0 34px}
.page-hero .mono{display:block;margin-bottom:18px}
.page-hero p.lede{margin-top:20px}
@media(max-width:720px){.page-hero{padding:46px 0 24px}}
.tabs-bar{position:sticky;top:64px;z-index:40;background:var(--paper);border-bottom:1px solid var(--rule)}
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;appearance:none;background:none;border:none;cursor:pointer;font-family:var(--font-m);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:16px 14px 14px;border-bottom:3px solid transparent;transition:color .2s,border-color .2s}
.tab:first-child{padding-left:0}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.tab .n{color:var(--ink-3);font-weight:400;margin-left:4px}
.case-list{padding:8px 0 80px}
.case{padding:48px 0;border-bottom:1px solid var(--rule)}
.case[hidden]{display:none}
.case-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}
@media(max-width:820px){.case-grid{grid-template-columns:1fr;gap:26px}.case{padding:36px 0}}
.case-visual{margin:0;border:1px solid var(--ink);background:var(--ink)}
.case-visual .pic{aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.case-visual .pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.shot-bar{display:flex;align-items:center;gap:9px;padding:8px 12px;font-family:var(--font-m);font-size:12px;letter-spacing:.04em;color:var(--paper)}
.shot-bar .url{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot-bar .state{margin-left:auto;display:flex;align-items:center;gap:7px;white-space:nowrap;color:#9fe3bd}
.shot-bar .dot{width:8px;height:8px;border-radius:50%;background:#4fd08a}
.case-visual .ledger{height:100%;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:8% 9%;font-family:var(--font-m);font-size:13px;color:var(--ink-2)}
.case-visual .ledger .lr{padding:8px 0}
.case-visual .ledger .lr span:last-child{color:var(--ink);font-weight:600}
.case-kind{display:block;font-family:var(--font-m);font-size:12px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.case-text h2{margin-top:8px;font-size:clamp(1.6rem,3vw,2.1rem)}
.case-sub{color:var(--ink-2);margin-top:2px}
.case-text .tags{margin-top:12px}
.case-text > p.what{margin-top:16px;color:var(--ink-2)}
.case-text .detail{margin-top:18px}
.case-text .btn{margin-top:22px}
/* ===== Reveal ===== */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}