/* systeme.css : le design system de deslus.com, sans les mises en page du site deslus (version 8.1, 11/10/2026).
   Louis : « garder le design system, pas le design du site internet, qui est vraiment fait pour des logiciels ».
   Ce fichier ne porte que le système : jetons, police, éléments de base, en-tête et pied de page, boutons, pastilles,
   tuiles, étiquettes, encadrés, étapes numérotées, questions, fil d'Ariane, champ de recherche, trame et halo.
   Valeurs relevées dans le design system de deslus (https://claude.ai/artifact/1C8XpndeVfV8poCoiHYQzm) et dans
   ~/deslus-com/src/styles/global.css (main@ee94148). Les mises en page du groupe sont dans valora.css. */

@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- jetons */
:root{
  --ink:#0D0D0C;--ink-2:#55554F;--ink-3:#6E6E68;
  --paper:#FFFFFF;--paper-2:#FBFBF9;--panel:#F4F4F1;--panel-2:#EDEDE9;
  --rule:#E6E6E0;--rule-2:#F0F0EB;--rule-strong:#CCCCC4;
  --accent:#FF3B00;--accent-text:#C42C00;--accent-ink:#0D0D0C;
  --r-s:9px;--r-m:13px;--r-l:20px;--maxw:1220px;
  --ease:cubic-bezier(.16,1,.3,1);--ease-2:cubic-bezier(.4,0,.2,1);
}

/* ---------- base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:5px}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{max-width:100%}
h1,h2,h3{margin:0;color:var(--ink)}
p{margin:0}
.num{font-variant-numeric:tabular-nums lining-nums}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:28px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--rule-strong);border:3px solid var(--paper);border-radius:99px}

/* ---------- styles de texte du système */
.t-display{font-size:clamp(34px,4.6vw,62px);line-height:1;font-weight:800;letter-spacing:-.045em}
.t-titre{font-size:clamp(23px,2.9vw,37px);line-height:1.05;font-weight:700;letter-spacing:-.036em}
.t-display em,.t-titre em{font-style:normal;color:var(--ink-3)}
.t-chapo{font-size:17.5px;line-height:1.5;color:var(--ink-2)}
.t-label{font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.t-label.acc{color:var(--accent-text)}

/* ---------- en-tête : la barre qui se compacte au défilement (translations seules) */
.hd{position:sticky;top:0;z-index:60}
.hd .mark{font-weight:800;letter-spacing:-.02em;font-size:20px}
.hd .mark i,.mark i{font-style:normal;color:var(--accent-text)}
.hd .nav{display:flex;gap:24px;font-size:14px;font-weight:500;color:var(--ink-2)}
.hd .nav > a{position:relative;padding:8px 0;transition:color .2s var(--ease)}
.hd .nav > a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.hd .nav > a:hover{color:var(--ink)}
.hd .nav > a:hover::after{transform:scaleX(1)}
.hd .nav > a[aria-current]{color:var(--ink)}
.hd .nav > a[aria-current]::after{background:var(--accent);transform:scaleX(1)}
.hd-a{background:transparent;transition:background .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.hd-a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule);opacity:0;transition:opacity .3s var(--ease)}
.hd-a .wrap{display:flex;align-items:center;gap:30px;height:86px;transition:transform .3s var(--ease)}
.hd-a .right{margin-left:auto;display:flex;align-items:center;gap:16px}
.hd-a .hd-count{font-size:12.5px;color:var(--ink-3);white-space:nowrap;transition:opacity .25s var(--ease)}
.hd-a .mark{display:inline-block;transform-origin:left center;transition:transform .3s var(--ease)}
html[data-scrolled] .hd-a{transform:translateY(-30px);background:color-mix(in srgb,var(--paper) 84%,transparent);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 18px -12px rgba(13,13,12,.5)}
html[data-scrolled] .hd-a::after{opacity:1}
html[data-scrolled] .hd-a .wrap{transform:translateY(15px)}
html[data-scrolled] .hd-a .mark{transform:scale(.86)}
html[data-scrolled] .hd-a .hd-count{opacity:0;pointer-events:none}
@media (max-width:860px){
  .hd-a .hd-count,.hd-a .nav{display:none}
  .hd-a .wrap{gap:12px;height:64px}
  .hd-a .btn-accent{padding:0 11px;font-size:12.5px}
  html[data-scrolled] .hd-a,html[data-scrolled] .hd-a .wrap{transform:none}
  html[data-scrolled] .hd-a{background:color-mix(in srgb,var(--paper) 90%,transparent)}
}

/* ---------- boutons */
.btn{display:inline-flex;align-items:center;gap:8px;height:35px;padding:0 15px;border-radius:var(--r-s);border:1px solid var(--rule-strong);background:var(--paper);font-size:13.5px;font-weight:600;letter-spacing:-.01em;cursor:pointer;white-space:nowrap;transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
.btn:hover{border-color:var(--ink);background:var(--panel)}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-solid:hover{background:#2c2c28;border-color:#2c2c28}
.btn-accent{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn-accent:hover{background:#FF5522;border-color:#FF5522}
.btn-l{height:44px;padding:0 18px;font-size:14.5px}
.btn svg{width:14px;height:14px;flex:none}

/* ---------- pastilles, étiquettes, statut */
.chip{display:inline-flex;align-items:center;height:33px;padding:0 14px;border-radius:99px;border:1px solid var(--rule);background:var(--paper);font-size:13px;font-weight:500;color:var(--ink-2);cursor:pointer;transition:all .2s var(--ease)}
.chip:hover{border-color:var(--rule-strong);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.tag{display:inline-block;border:1px solid var(--rule);border-radius:6px;padding:2px 7px;font-size:12px;font-weight:500;color:var(--ink-2)}
.live{display:inline-flex;align-items:center;gap:5px;color:var(--accent-text);font-weight:600}
.dash{color:var(--ink-3)}
.live svg{width:13px;height:13px;flex:none}

/* ---------- tuiles (logos dans leur tuile, rapport rayon/côté 0,29) */
.tile{--brand:#8A8A82;position:relative;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0)),color-mix(in srgb,var(--brand) 13%,#fff);
  border:1px solid color-mix(in srgb,var(--brand) 20%,var(--rule));font-weight:700;font-size:15px;letter-spacing:-.04em;color:var(--ink)}
.tile.has-logo{overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--brand) 7%,#fff))}
.has-logo .fallback{position:absolute;inset:0;display:none;place-items:center;font-weight:700;letter-spacing:-.04em;color:var(--ink);font-size:calc(var(--tsz,46px) * .3)}
.has-logo:not(:has(img)) .fallback{display:grid}
.has-logo img{position:relative;z-index:1;display:block;margin:auto;object-fit:contain;width:62%;height:62%}
.has-logo.fit-plein img{width:100%;height:100%;border-radius:inherit}
.has-logo.fit-bleed img{width:78%;height:78%;border-radius:22%}

/* ---------- encadrés, étapes numérotées, questions, fil d'Ariane */
.box{border:1px solid var(--rule);border-radius:var(--r-m);padding:21px;background:var(--paper)}
.box h2,.box h3{margin:0 0 13px;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.box ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.box li{font-size:14px;display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.box li span{flex:1;min-width:0}
.box li b{font-weight:700}
.box li svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--ink-3)}
.box.limits{background:var(--panel);border-color:var(--rule-strong)}
.box.limits h2,.box.limits h3{color:var(--accent-text)}
.uses{display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:u}
.uses li{position:relative;border:1px solid var(--rule);border-radius:var(--r-m);padding:16px 18px 16px 52px;background:var(--paper)}
.uses li::before{counter-increment:u;content:counter(u);position:absolute;left:17px;top:15px;width:22px;height:22px;border-radius:7px;background:var(--panel-2);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.uses b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.018em}
.uses span{display:block;margin-top:4px;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.crumbs{display:flex;gap:7px;align-items:center;font-size:12.5px;color:var(--ink-3)}
.crumbs a:hover{color:var(--ink)}
.crumbs svg{width:11px;height:11px}
.lien{font-size:13.5px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--rule-strong);transition:border-color .2s var(--ease)}
.lien:hover{border-bottom-color:var(--ink)}

/* ---------- le champ de recherche et sa réponse */
.hero-search{position:relative;display:flex;align-items:center;gap:10px;height:48px;padding:0 8px 0 16px;border:1px solid var(--rule-strong);border-radius:12px;background:var(--paper);transition:border-color .2s var(--ease)}
.hero-search:focus-within{border-color:var(--ink)}
.hero-search > svg{width:17px;height:17px;color:var(--ink-3);flex:none}
.hero-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:15px}
.hero-search input::placeholder{color:var(--ink-3)}
.hero-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.ask{margin-top:10px;border:1px solid var(--rule);border-radius:14px;background:var(--paper);overflow:hidden;text-align:left}
.ask[hidden]{display:none}
.ask-head{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--rule);background:var(--paper-2);font-size:12px;color:var(--ink-3)}
.ask-head svg{width:13px;height:13px}
.ask-body{display:flex;gap:13px;align-items:flex-start;padding:15px}
.ask-body .tile{width:42px;height:42px;border-radius:12px;font-size:14px;flex:none}
.ask-t{flex:1;min-width:0}
.ask-t strong{display:block;font-size:16px;letter-spacing:-.022em}
.ask-t span{display:block;margin-top:3px;font-size:13.5px;color:var(--ink-2);line-height:1.45}
.ask-body .btn{flex:none;height:32px;font-size:12.5px}
.ask-ex{display:flex;gap:6px;flex-wrap:wrap}
.ask-ex button{border:1px solid var(--rule);background:var(--paper);border-radius:99px;height:29px;padding:0 12px;font-size:12.5px;color:var(--ink-2);cursor:pointer;transition:all .2s var(--ease)}
.ask-ex button:hover{border-color:var(--rule-strong);color:var(--ink)}

/* ---------- le décor des hauts de page : la trame de 56 px et le halo (jamais ailleurs qu'en haut de page) */
.hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cells{position:absolute;inset:-1px 0 0;background-image:linear-gradient(to right,var(--rule-2) 1px,transparent 1px),linear-gradient(to bottom,var(--rule-2) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 86% 92% at 50% 26%,#000 30%,transparent 82%);mask-image:radial-gradient(ellipse 86% 92% at 50% 26%,#000 30%,transparent 82%)}
.bloom{position:absolute;left:50%;top:-140px;width:min(1180px,118%);height:700px;transform:translateX(-50%);
  background:radial-gradient(42% 52% at 38% 44%,rgba(255,59,0,.26),transparent 70%),radial-gradient(38% 48% at 64% 34%,rgba(255,150,0,.22),transparent 72%),radial-gradient(34% 44% at 52% 70%,rgba(255,90,40,.14),transparent 72%);
  filter:blur(64px);opacity:0;animation:bloomIn 1.5s var(--ease) .1s forwards}
@keyframes bloomIn{to{opacity:1}}

/* ---------- pied de page */
footer{border-top:1px solid var(--rule);padding:34px 0 64px;font-size:13px;color:var(--ink-3)}
footer .wrap{display:flex;gap:26px;flex-wrap:wrap;align-items:center}
footer a:hover{color:var(--ink)}
footer .mark{font-weight:800;letter-spacing:-.02em;color:var(--ink);font-size:15px}

/* ---------- apparition à l'arrivée */
[data-rise]{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-rise].in{opacity:1;transform:none}
html:not([data-rise-on]) [data-rise]{opacity:1;transform:none}

@media (max-width:600px){.wrap{padding-inline:22px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .bloom{opacity:1!important}
  [data-rise]{opacity:1!important;transform:none!important}
}