/* Polices auto-hébergées (aucune requête vers Google) */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/fonts/archivo-latin-ext-standard-normal.woff2) format('woff2-variations');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/fonts/archivo-latin-standard-normal.woff2) format('woff2-variations');
  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;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/geist-latin-ext-wght-normal.woff2) format('woff2-variations');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/geist-latin-wght-normal.woff2) format('woff2-variations');
  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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format('woff2'), url(/fonts/ibm-plex-mono-latin-ext-400-normal.woff) format('woff');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'), url(/fonts/ibm-plex-mono-latin-400-normal.woff) format('woff');
  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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2'), url(/fonts/ibm-plex-mono-latin-ext-500-normal.woff) format('woff');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'), url(/fonts/ibm-plex-mono-latin-500-normal.woff) format('woff');
  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;
}

/* Sombre et sobre. Le héros porte une démo produit qui tourne en boucle : chaque produit fait son travail à l'écran. */
:root {
  --bg: #0B0D10; --bg2: #101318; --panel: #14181E;
  --line: rgba(230, 235, 245, .09); --line2: rgba(230, 235, 245, .2);
  --tx: #F1F3F6; --mu: #8D939E; --sig: #F0565B;
  /* Couleurs produits provisoires */
  --adj: #1C9A70; --sme: #4069EE; --ova: #F2A33A;
  /* La teinte des questionnaires de securite, choisie par Gael. Elle sert aux deux
     endroits qui les montrent : la pastille de la demonstration et la barre du
     calculateur. Les appels d offres gardent le vert d Adjurio. */
  --qst: #9B72F2;
  --ui-bg: #0F141C; --ui-bar: #131925; --ui-surface: #18202D; --ui-tx: #E6EAF1; --ui-mu: #8790A2; --ui-line: rgba(230, 235, 245, .08); --ui-line2: rgba(230, 235, 245, .16);
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui: "Geist", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(64px + env(safe-area-inset-top, 0px) + 24px); }
body { margin: 0; background: var(--bg); color: var(--tx); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--tx); outline-offset: 3px; }
.wrap { --pad: clamp(20px, 5vw, 48px); width: 100%; max-width: 1240px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* ---------- Navigation ---------- */
.o-nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: rgba(11, 13, 16, .78); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); }
.o-nav .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
/* Le monogramme marche avec le nom, pas a sa place : aligne sur la ligne de base
   optique, et legerement remonte parce que le dessin a sa pointe en haut. */
.o-logo { display: inline-flex; align-items: center; gap: 9px; }
.o-logo img { flex: none; width: 26px; height: 26px; }
.o-logo { font-size: 1.1rem; font-weight: 700; font-stretch: 112%; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.o-logo span { font-weight: 400; }
.o-links { display: flex; gap: 26px; margin-left: auto; font-size: .9rem; }
.o-links a { white-space: nowrap; }
.o-links a { color: var(--mu); text-decoration: none; }
.o-links a:hover { color: var(--tx); }
.o-actions { display: flex; gap: 8px; }
.o-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border: 1px solid transparent; border-radius: 6px; font: 600 .95rem/1 var(--sans); text-decoration: none; cursor: pointer; transition: background-color .2s, border-color .2s; }
.o-btn.solid { background: var(--tx); color: var(--bg); }
.o-btn.solid:hover { background: #FFFFFF; }
.o-btn.line { border-color: var(--line2); background: transparent; color: var(--tx); }
.o-btn.line:hover { border-color: rgba(230, 235, 245, .42); }
.o-nav .o-btn { min-height: 38px; padding: 0 14px; font-size: .875rem; }
.o-lang { position: relative; }
.o-lang summary { padding: 9px 10px; border-radius: 6px; color: var(--mu); font: 500 .82rem/1 var(--mono); list-style: none; cursor: pointer; }
.o-lang summary::-webkit-details-marker { display: none; }
.o-lang summary:hover, .o-lang[open] summary { color: var(--tx); }
.o-lang ul { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 170px; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--line2); border-radius: 8px; background: var(--panel); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .7); }
.o-lang a { display: block; padding: 8px 10px; border-radius: 5px; color: var(--mu); font-size: .9rem; text-decoration: none; }
.o-lang a:hover, .o-lang a[aria-current] { background: rgba(255, 255, 255, .05); color: var(--tx); }
/* Un lien de plus dans la barre — « IA » — et l allemand ou le polonais debordaient
   entre 860 et 1040 px : « Ihre Zeit » passait a la ligne. Avant de cacher les liens,
   on cache le bouton « Voir les produits », qui ne fait que repeter le premier d entre
   eux. */
@media (max-width: 1040px) { .o-nav .wrap { gap: 20px; } .o-links { gap: 18px; } .o-actions .o-btn.line { display: none; } }
@media (max-width: 860px) { .o-links { display: none; } .o-lang { margin-left: auto; } }
/* Sur un ecran de 320 px, « Schreiben Sie uns » et « Escribanos » ne tenaient plus a
   cote du logo : l en-tete depassait, et comme il est colle en haut c est la page
   entiere qui partait en defilement horizontal, dans ces deux langues seulement. On
   resserre l ecart et le bouton plutot que de couper un mot. */
/* Sous 360 px, l en-tete n a plus de marge : le monogramme, le nom, le selecteur de
   langue et le bouton doivent tenir dans 280 px, et « Schreiben Sie uns » fait deja
   trois mots. On resserre tout d un cran — y compris le monogramme, qui descend a
   20 px — plutot que de cacher une piece. Chaque valeur ici a ete prise au plus juste :
   l allemand, qui est le pire cas, finit a 1 px du bord. */
@media (max-width: 360px) {
  .o-nav .wrap { gap: 10px; }
  .o-nav .o-btn { padding: 0 10px; font-size: .78rem; }
  .o-nav .o-logo { gap: 7px; font-size: 1rem; }
  .o-nav .o-logo img { width: 20px; height: 20px; }
}

/* ---------- Héros ---------- */
.o-hero { overflow-x: clip; padding-top: clamp(64px, 10vw, 128px); padding-bottom: clamp(72px, 10vw, 128px); }
/* La pastille « IA » et sa ligne, au-dessus du titre : ce que fait le produit se lit
   avant le nom de la societe, et le mot qui decide d un budget est le premier vu. */
.o-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 clamp(18px, 2.4vw, 28px); font: 400 .82rem/1.5 var(--mono); color: var(--mu); }
.o-eyebrow b { padding: 5px 11px; border: 1px solid var(--line2); border-radius: 999px; color: var(--tx); font-weight: 500; letter-spacing: .08em; }
.o-hero h1 { margin: 0; max-width: 16ch; font-size: clamp(2.4rem, 6.2vw, 5.8rem); font-weight: 600; font-stretch: 110%; line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.o-hero-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; margin-top: clamp(28px, 4vw, 44px); }
.o-hero-row p { margin: 0; max-width: 54ch; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.6; color: var(--mu); }
.o-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 820px) { .o-hero-row { grid-template-columns: 1fr; } }

/* ---------- Démo ---------- */
.demo { position: relative; isolation: isolate; margin-top: clamp(56px, 8vw, 96px); }
.demo-glow { position: absolute; inset: -14% -8% -24%; z-index: -1; pointer-events: none; }
.demo-glow i { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; background: radial-gradient(42% 52% at 50% 58%, color-mix(in srgb, var(--c) 34%, transparent), transparent 72%); }
.demo[data-scene="adj"] .g-adj, .demo[data-scene="sme"] .g-sme, .demo[data-scene="ova"] .g-ova { opacity: .85; }

.d-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 0 24px; margin-bottom: 18px; }
.d-tab { position: relative; padding: 0 0 14px; border: 0; background: none; color: var(--mu); font: inherit; text-align: left; cursor: pointer; transition: color .2s; }
.d-tab:hover, .d-tab[aria-selected="true"] { color: var(--tx); }
.d-tab .k { display: block; margin-bottom: 6px; font: 400 .78rem/1.3 var(--mono); }
.d-tab .n { display: block; font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 600; font-stretch: 108%; letter-spacing: -0.015em; }
.d-tab .pg { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line2); overflow: hidden; }
.d-tab .pg i { display: block; height: 100%; background: var(--c); transform: scaleX(0); transform-origin: left; }
.d-tab.run .pg i { animation: fillbar var(--dur, 9s) linear forwards; }
.d-tab.full .pg i { transform: scaleX(1); }
@keyframes fillbar { to { transform: scaleX(1); } }
.d-pause { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 8px; border: 1px solid var(--line2); border-radius: 50%; background: transparent; color: var(--tx); cursor: pointer; }
.d-pause:hover { border-color: rgba(230, 235, 245, .42); }
.d-pause svg { width: 14px; height: 14px; }
.d-pause .i-play { display: none; }
.demo.paused .d-pause .i-play { display: block; }
.demo.paused .d-pause .i-pause { display: none; }
@media (max-width: 640px) { .d-tabs { gap: 0 12px; } .d-tab .k { display: none; } .d-tab .n { font-size: .92rem; } }
@media (max-width: 480px) { .d-meta { display: none; } }

.d-win { overflow: hidden; border: 1px solid var(--ui-line2); border-radius: 14px; background: var(--ui-bg); color: var(--ui-tx); font-family: var(--ui); font-size: 13.5px; line-height: 1.4; box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .9); }
.d-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--ui-bar); border-bottom: 1px solid var(--ui-line); }
.dots { display: flex; flex: none; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(230, 235, 245, .16); }
.d-app { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; font-size: 13px; white-space: nowrap; }
.d-app i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.d-meta { margin-left: auto; overflow: hidden; color: var(--ui-mu); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
/* Les quatre vues de la demonstration sont toutes dans la page ; le script deplace
   la classe « on » au lieu de reecrire le texte. Un lecteur sans JavaScript, lui,
   recoit les quatre legendes d un coup (voir le <noscript> du <head>). */
.d-meta > span, .d-cap > span { display: none; }
.d-meta > span.on { display: inline; }
.d-cap > span { margin: 0 0 .7em; }
.d-cap > span.on { display: block; margin: 0; }
.stage { position: relative; height: 452px; }
.scene { position: absolute; inset: 0; display: none; padding: 20px; }
.scene.on { display: block; }
.d-cap { min-height: 3.2em; margin: 18px 0 0; max-width: 70ch; color: var(--mu); line-height: 1.6; }
@media (max-width: 760px) { .stage { height: 640px; } .scene { padding: 14px; } .d-bar { padding: 11px 14px; } }

/* Éléments communs aux scènes */
.bar { height: 6px; border-radius: 99px; background: var(--ui-surface); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--adj); transition: width .12s linear; }
.tag { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.tag.ok { background: color-mix(in srgb, var(--adj) 20%, transparent); color: color-mix(in srgb, var(--adj) 58%, var(--ui-tx)); }
.tag.draft { background: color-mix(in srgb, #6E7BF2 20%, transparent); color: color-mix(in srgb, #6E7BF2 55%, var(--ui-tx)); }
.tag.todo { background: color-mix(in srgb, #E8962E 22%, transparent); color: color-mix(in srgb, #E8962E 55%, var(--ui-tx)); }
.caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px; vertical-align: -0.16em; background: var(--ui-tx); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.dots3 { display: inline-flex; gap: 3px; }
.dots3 i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: blink 1s infinite; }
.dots3 i:nth-child(2) { animation-delay: .15s; }
.dots3 i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: scale(.88); } }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }

/* Scène Adjurio */
.a-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 18px; padding-bottom: 16px; border-bottom: 1px solid var(--ui-line); }
.a-file { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--ui-line2); border-radius: 8px; font-size: 12.5px; white-space: nowrap; }
.a-file svg { width: 14px; height: 14px; color: var(--adj); }
.a-sum { margin: 0; color: color-mix(in srgb, var(--adj) 60%, var(--ui-tx)); font-size: 12.5px; opacity: 0; transition: opacity .4s; }
.a-sum.in { opacity: 1; }
.a-count { margin: 0; color: var(--ui-mu); font-size: 12.5px; white-space: nowrap; }
.a-count b { color: var(--ui-tx); font-weight: 600; font-variant-numeric: tabular-nums; }
.a-head .bar { grid-column: 1 / -1; }
.a-body { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 16px; padding-top: 16px; }
.a-list { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 6px; }
.a-list li { display: grid; grid-template-columns: 3.7rem minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 42px; padding: 10px 12px; border-radius: 9px; background: var(--ui-surface); transition: background-color .25s, box-shadow .25s; }
.a-list li.cur { background: var(--ui-bg); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--adj) 75%, transparent); }
.a-list .id { color: var(--ui-mu); font: 400 12px/1 var(--mono); }
.a-list .q { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.a-list .st > span { display: none; }
.a-list li[data-state="idle"] .s-idle, .a-list li[data-state="work"] .s-work, .a-list li[data-state="done"] .s-done { display: inline-flex; }
.s-idle { color: var(--ui-mu); font-size: 12px; }
.s-work { align-items: center; gap: 6px; color: var(--ui-mu); font-size: 12px; }
.a-list li[data-state="done"] .s-done { animation: pop .3s ease-out; }
.a-ans { display: flex; flex-direction: column; min-width: 0; padding: 16px; border: 1px solid var(--ui-line); border-radius: 10px; background: color-mix(in srgb, var(--adj) 5%, var(--ui-bg)); }
.a-ans .h { margin: 0 0 4px; color: var(--ui-mu); font-size: 12px; }
.a-ans .qq { margin: 0 0 12px; font-weight: 500; }
.a-ans .t { margin: 0; min-height: 4.65em; line-height: 1.55; }
.a-ans:not(.typing) .caret { display: none; }
.srcs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; }
.srcs.in { opacity: 1; transform: none; }
.src { padding: 3px 8px; border: 1px solid var(--ui-line2); border-radius: 6px; color: var(--ui-mu); font-size: 11.5px; }
.a-act { display: flex; gap: 8px; margin-top: auto; padding-top: 14px; opacity: 0; transition: opacity .35s; }
.a-act.in { opacity: 1; }
.mini { padding: 6px 12px; border: 1px solid var(--ui-line2); border-radius: 6px; font-size: 12px; font-weight: 500; }
.mini.solid { border-color: var(--adj); background: var(--adj); color: #FFFFFF; }
@media (max-width: 760px) {
  .a-head { grid-template-columns: minmax(0, 1fr) auto; }
  .a-sum { display: none; }
  .a-file { overflow: hidden; text-overflow: ellipsis; }
  .a-body { grid-template-columns: 1fr; gap: 12px; padding-top: 12px; }
  .a-list li { align-items: start; }
  .a-list .q { white-space: normal; }
  .a-list li:nth-child(n+4) { display: none; }
  .a-ans { padding: 13px; }
  .a-ans .t { min-height: 6.2em; }
}

/* Scène SmartEmails */
.sc-sme.on { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 16px; }
.s-side { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 2px; }
.s-side li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; transition: background-color .3s; }
.s-side li.hit { background: var(--ui-surface); }
.s-side .cd, .ctag i { flex: none; width: 8px; height: 8px; border-radius: 3px; background: var(--k); }
.s-side .n { margin-left: auto; color: var(--ui-mu); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.s-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.s-list { display: grid; gap: 6px; }
.mail { display: grid; grid-template-columns: 10rem minmax(0, 1fr) auto 2.8rem; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 9px; background: var(--ui-surface); opacity: 0; transform: translateY(-6px); transition: opacity .35s, transform .35s; }
.mail.in { opacity: 1; transform: none; }
.mail .from { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.mail .subj { overflow: hidden; color: var(--ui-mu); white-space: nowrap; text-overflow: ellipsis; }
.mail .tg { display: flex; justify-content: flex-end; gap: 6px; }
.mail .time { color: var(--ui-mu); font: 400 12px/1 var(--mono); text-align: right; }
.ctag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 99px; background: color-mix(in srgb, var(--k) 20%, transparent); color: color-mix(in srgb, var(--k) 55%, var(--ui-tx)); font-size: 11.5px; font-weight: 500; white-space: nowrap; opacity: 0; transform: scale(.9); transition: opacity .3s, transform .3s; }
.ctag.slot { background: transparent; box-shadow: inset 0 0 0 1px var(--ui-line2); color: var(--ui-tx); }
.mail.tagged .ctag { opacity: 1; transform: none; }
.s-brief { margin-top: auto; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--sme) 32%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--sme) 12%, var(--ui-bg)); opacity: 0; transition: opacity .4s; }
.s-brief.in { opacity: 1; }
.s-brief b { display: block; margin-bottom: 4px; font-size: 12.5px; }
.s-brief p { min-height: 3em; margin: 0; line-height: 1.5; }
.s-brief:not(.typing) .caret { display: none; }
@media (max-width: 760px) {
  .sc-sme.on { grid-template-columns: 1fr; gap: 12px; }
  .s-side { display: flex; flex-wrap: wrap; gap: 6px; }
  .s-side li { gap: 7px; padding: 5px 9px; background: var(--ui-surface); font-size: 12px; }
  .s-side .n { margin-left: 2px; }
  .mail { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .mail .subj { grid-column: 1 / -1; grid-row: 2; }
  .mail .time, .ctag.slot { display: none; }
  .mail:nth-child(n+6) { display: none; }
}

/* Scène The Over Achiever */
.sc-ova.on { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; gap: 16px; }
.v-col { display: flex; flex-direction: column; min-width: 0; padding: 16px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-bg); }
.v-h { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 12px; font-size: 13px; font-weight: 600; }
.v-h span { color: var(--ui-mu); font: 400 12px/1.4 var(--mono); }
.v-input { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--ui-line2); border-radius: 8px; }
.v-input .ph { color: var(--ui-mu); }
.v-input.has .ph { display: none; }
.v-input:not(.typing) .caret { display: none; }
.v-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.v-list li { padding: 9px 11px; border-radius: 8px; background: var(--ui-surface); transition: opacity .3s, transform .3s, box-shadow .25s; animation: drop .3s ease-out; }
.v-list li.sel { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ova) 80%, transparent); }
.v-list li.out { opacity: 0; transform: translateX(16px); }
.v-empty { display: none; margin: 14px 0 0; color: var(--ui-mu); font-size: 12.5px; }
.v-empty.in { display: block; animation: drop .3s ease-out; }
.v-grp + .v-grp { margin-top: 14px; }
.v-ctx { margin: 0 0 6px; color: var(--ui-mu); font: 500 11.5px/1 var(--mono); }
.v-acts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.v-acts li { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; background: var(--ui-surface); transition: color .3s; }
.v-acts li::before { content: ""; flex: none; width: 14px; height: 14px; border: 1.5px solid #5E6778; border-radius: 50%; transition: background-color .3s, border-color .3s; }
.v-acts li.new { animation: drop .3s ease-out, flash 1.4s ease-out; }
@keyframes flash { from { box-shadow: inset 0 0 0 1.5px var(--ova); } to { box-shadow: inset 0 0 0 1.5px transparent; } }
.v-acts li.done { color: var(--ui-mu); text-decoration: line-through; }
.v-acts li.done::before { border-color: var(--ova); background: var(--ova) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
@media (max-width: 760px) { .sc-ova.on { grid-template-columns: 1fr; gap: 12px; } .v-col { padding: 13px; } .v-grp + .v-grp { margin-top: 10px; } }

/* ---------- Sections ---------- */
.o-sec { padding-top: clamp(80px, 11vw, 140px); padding-bottom: clamp(80px, 11vw, 140px); }
.o-sec.flush { padding-top: 0; }
.o-h2 { margin: 0; max-width: 20ch; overflow-wrap: break-word; font-size: clamp(1.9rem, 4vw, 3.2rem); font-weight: 600; font-stretch: 108%; line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
.o-lead { margin: 18px 0 0; max-width: 58ch; font-size: 1.075rem; line-height: 1.6; color: var(--mu); }

/* ---------- Produits ---------- */
.p3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 52px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pc { position: relative; display: flex; flex-direction: column; padding: 32px 28px 34px; border-left: 1px solid var(--line); }
.pc:first-child { padding-left: 0; border-left: 0; }
.pc:last-child { padding-right: 0; }
.pc::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.6, 0, .2, 1); }
.pc:hover::before, .pc:focus-within::before { transform: scaleX(1); }
.pc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; margin: 0 0 26px; }
.glyph { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 7px; background: var(--c); color: #FFFFFF; font: 700 15px/1 var(--ui); }
.glyph svg { width: 15px; height: 15px; }
.o-chip { padding: 4px 9px; border: 1px solid var(--line2); border-radius: 4px; color: var(--tx); font: 400 .75rem/1.2 var(--mono); white-space: nowrap; }
.pc-n { margin: 0; font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 600; font-stretch: 108%; letter-spacing: -0.025em; }
.pc-k { margin: 8px 0 0; color: var(--mu); font: 400 .8rem/1.4 var(--mono); }
.pc-t { margin: 22px 0 0; font-size: 1.15rem; font-weight: 500; line-height: 1.35; }
.pc-d { margin: 12px 0 0; color: var(--mu); line-height: 1.6; }
.o-feats { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--line); }
.o-feats li { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.o-feats li::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--c); transform: translateY(-2px); }
.pc .o-btn { align-self: flex-start; margin-top: auto; }
.pc .o-feats { margin-bottom: 28px; }
@media (max-width: 900px) {
  .p3 { grid-template-columns: 1fr; border-bottom: 0; }
  .pc, .pc:first-child, .pc:last-child { padding: 30px 0 34px; border-left: 0; border-bottom: 1px solid var(--line); }
}

/* ---------- Calcul ---------- */
.o-calc { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.o-calc-in { padding: clamp(24px, 4vw, 52px); }
.o-calc-out { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: clamp(24px, 4vw, 52px); border-left: 1px solid var(--line); background: var(--panel); }
/* Le curseur natif ne fait que 16 px de haut. A la souris on vise, au doigt on rate :
   les recommandations d accessibilite demandent 44 px. On etire donc la zone sensible a
   44 px sans toucher au trait, que le navigateur garde centre, et on reprend d autant
   l espacement des champs pour que le rythme ne bouge pas. */
.o-calc .o-field { margin-top: 16px; }
.o-field { margin-top: 30px; }
.o-fl { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.o-fl label { font-weight: 500; }
.o-fl output { flex: none; font: 500 1rem/1 var(--mono); font-variant-numeric: tabular-nums; }
.o-calc input[type="range"] { width: 100%; height: 44px; margin: 0; accent-color: var(--tx); }
.o-out-l { margin: 0; font: 400 .8rem/1.3 var(--mono); color: var(--mu); }
.o-big { margin: 10px 0 0; font-size: clamp(3.6rem, 9vw, 7rem); font-weight: 700; font-stretch: 112%; line-height: .92; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.o-big small { margin-left: .12em; font-size: .34em; font-weight: 500; letter-spacing: 0; color: var(--mu); }
.o-days { margin: 14px 0 0; color: var(--mu); }
.o-days b { color: var(--tx); font-weight: 600; }
.o-bars { display: grid; gap: 16px; }
.o-bar-l { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; font-size: .925rem; }
.o-bar-l span:last-child { flex: none; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.o-bar { height: 8px; border-radius: 2px; background: rgba(230, 235, 245, .07); overflow: hidden; }
.o-bar i { display: block; height: 100%; width: 0; background: var(--c); transition: width .3s ease-out; }
.o-note { margin: 0; font: 400 .75rem/1.55 var(--mono); color: var(--mu); }
/* Le sigle de la source mene a l article : souligne comme le lien du consentement,
   assez pour qu on le voie, assez discret pour ne pas tirer l oeil hors du chiffre. */
.o-note a { color: var(--mu); text-decoration: underline; text-underline-offset: 3px; }
.o-note a:hover { color: var(--tx); }
/* « 1fr » a pour minimum « auto », c est-a-dire le mot le plus long du contenu : a
   320 px, « questionnaires » dans le titre poussait la colonne 4 px plus loin que le
   cadre, que overflow: hidden rognait ensuite. Il faut « minmax(0, 1fr) », comme les
   deux colonnes du bureau juste au-dessus, pour que la piste ne depasse jamais. Et
   comme le cadre devient alors la limite, on rend au titre les quelques pixels qu il
   lui manque en resserrant la marge interieure sur les tres petits ecrans. */
@media (max-width: 860px) { .o-calc { grid-template-columns: minmax(0, 1fr); } .o-calc-out { border-left: 0; border-top: 1px solid var(--line); } }
@media (max-width: 400px) { .o-calc-in, .o-calc-out { padding-left: 18px; padding-right: 18px; } }
/* Sous 360 px, et seulement la, un mot de titre ne tient plus sur une ligne :
   « Ausschreibungen », « questionnaires », « kwestionariusze », et surtout
   « Oprogramowanie », qui depassait de 41 px en polonais et qu overflow-x: clip
   coupait net — personne ne voyait qu il manquait quelque chose. On descend d un cran
   et on laisse le navigateur cesurer selon la langue de la page, plutot que de couper
   ou le mot tombe : « Oprogramowa-nie », pas « Oprogramowani-e ». Un iPhone de 375 px
   n est pas concerne : rien n y debordait. */
@media (max-width: 360px) {
  .o-h2 { font-size: 1.7rem; hyphens: auto; }
  .o-hero h1 { font-size: 2.1rem; hyphens: auto; }
  /* « Nutzungsbedingungen », « gebruiksvoorwaarden », « Datenschutzerklarung » : le
     titre des pages juridiques est un seul mot dans les langues germaniques, et il
     sortait de l ecran. Il descend donc lui aussi, et se cesure. */
  .lg-h1 { font-size: 1.85rem; hyphens: auto; }
}

/* ---------- Engagements, approche ---------- */
.o-spec { list-style: none; margin: 48px 0 0; padding: 0; border-top: 1px solid var(--line); }
.o-spec li { display: grid; grid-template-columns: 7rem minmax(0, 5fr) minmax(0, 6fr); align-items: baseline; gap: 8px 32px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.o-spec .no { font: 500 .8rem/1 var(--mono); color: var(--sig); }
.o-spec h3 { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.7rem); font-weight: 600; font-stretch: 106%; letter-spacing: -0.02em; }
.o-spec p { margin: 0; max-width: 52ch; line-height: 1.6; color: var(--mu); }
@media (max-width: 760px) { .o-spec li { grid-template-columns: 1fr; } }
.o-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); margin-top: 48px; }
.o-cols > div { padding-top: 20px; border-top: 1px solid var(--line2); }
.o-cols h3 { margin: 0 0 10px; font-size: 1.2rem; font-weight: 600; font-stretch: 106%; }
.o-cols p { margin: 0; line-height: 1.6; color: var(--mu); }
@media (max-width: 820px) { .o-cols { grid-template-columns: 1fr; } }

/* ---------- Contact ---------- */
.o-contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.o-mail { display: inline-block; font: 500 clamp(1rem, 1.8vw, 1.25rem)/1.3 var(--mono); color: var(--tx); user-select: all; overflow-wrap: anywhere; }
.o-form { padding: clamp(20px, 2.6vw, 30px); border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); }
.o-form fieldset { margin: 0; padding: 0; border: 0; }
.o-form legend, .o-form .lab { display: block; margin-bottom: 5px; font: 400 .8rem/1.3 var(--mono); color: var(--mu); }
.o-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.o-chip-r { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 13px; border: 1px solid var(--line2); border-radius: 6px; cursor: pointer; font-size: .9rem; transition: background-color .2s, color .2s; }
.o-chip-r input { position: absolute; opacity: 0; pointer-events: none; }
.o-chip-r:has(input:checked) { background: var(--tx); color: var(--bg); border-color: var(--tx); }
.o-chip-r:has(input:focus-visible) { outline: 2px solid var(--tx); outline-offset: 2px; }
.o-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.o-in { display: block; margin-top: 20px; }
.o-row .o-in { margin-top: 0; }
.o-in input, .o-in textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line2); border-radius: 6px; background: transparent; color: var(--tx); font: 400 1rem/1.4 var(--sans); }
.o-in textarea { min-height: 120px; resize: vertical; }
.o-in input:focus, .o-in textarea:focus { outline: none; border-color: var(--tx); }
/* Rythme vertical du formulaire, en un seul endroit. Deux pieges evites ici : la classe
   .o-field sert aussi au calculateur, qui garde son propre espacement ; et le fieldset
   des pastilles y echappait, parce que « .o-form fieldset { margin: 0 } » le remettait
   a zero — « Ce qui vous interesse » collait au champ precedent. */
.o-form .o-field, .o-form .o-duo { margin-top: 22px; margin-bottom: 0; }
.o-form .o-duo .o-field { margin-top: 0; }
/* L etoile des champs obligatoires, et sa legende en tete de formulaire. */
.o-req { margin-left: 2px; color: var(--sig); }
.o-req-note { margin: 0; font: 400 .78rem/1.3 var(--mono); color: var(--mu); }
/* Prenom et nom vont ensemble : ce sont deux moities d une meme information. */
.o-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 520px) {
  .o-duo { grid-template-columns: 1fr; }
  .o-form .o-duo .o-field + .o-field { margin-top: 22px; }
}
/* Le consentement : jamais coche d avance, c est ce qu exige le RGPD. */
.o-agree { display: grid; grid-template-columns: auto 1fr; gap: 0 11px; align-items: start; margin-top: 18px; cursor: pointer; font-size: .9rem; line-height: 1.5; }
.o-agree input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--tx); cursor: pointer; }
.o-agree input[aria-invalid="true"] { outline: 2px solid var(--sig); outline-offset: 2px; }
.o-opt { opacity: .7; }
.o-form input[type="text"], .o-form input[type="email"], .o-form input[type="tel"], .o-form textarea {
  width: 100%; padding: 10px 13px; border: 1px solid var(--line2); border-radius: 6px;
  background: var(--bg); color: var(--tx); font: inherit; font-size: .95rem;
  transition: border-color .2s;
}
.o-form textarea { min-height: 92px; resize: vertical; line-height: 1.55; }
.o-form input[type="text"]:focus-visible, .o-form input[type="email"]:focus-visible, .o-form input[type="tel"]:focus-visible, .o-form textarea:focus-visible { outline: none; border-color: var(--tx); }
.o-form input::placeholder, .o-form textarea::placeholder { color: var(--mu); opacity: .75; }
/* Un champ signale ne doit pas l etre par la seule couleur : le libelle le dit aussi. */
.o-form [aria-invalid="true"] { border-color: var(--sig); }
/* Le piege a robots : hors de l ecran, hors du parcours au clavier, jamais rempli
   par un humain. display:none ne conviendrait pas, certains robots l ignorent. */
.o-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.o-consent { margin: 14px 0 0; color: var(--mu); font-size: .85rem; line-height: 1.55; }
.o-consent a { color: var(--mu); text-decoration: underline; text-underline-offset: 3px; }
.o-consent a:hover { color: var(--tx); }
.o-mail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.o-mail-actions .o-btn { flex: 1 1 200px; }
.o-status { min-height: 1.4em; margin: 14px 0 0; font-size: .9rem; color: var(--mu); }
.o-status.ok { color: var(--adj); }
.o-status.ko { color: var(--sig); }
.o-form.sending { opacity: .6; pointer-events: none; }
/* Tant que le consentement n est pas donne, le bouton se voit inactif. */
.o-form .o-btn:disabled { opacity: .4; cursor: not-allowed; }
.o-prefer { margin: 32px 0 6px; color: var(--mu); font-size: .9rem; }
.o-copy { margin-left: 10px; padding: 0; border: 0; background: none; color: var(--mu); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.o-copy:hover { color: var(--tx); }
/* Sur un ecran etroit l adresse prend toute la ligne : le bouton passe dessous, aligne
   a gauche, au lieu de retomber avec sa marge et de paraitre en retrait. Cette regle
   doit suivre la precedente : a specificite egale, c est l ordre qui tranche. */
@media (max-width: 520px) { .o-copy { display: block; margin: 7px 0 0; } }
@media (max-width: 860px) { .o-contact { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .o-row { grid-template-columns: 1fr; } }

/* ---------- Pied de page ---------- */
.o-foot { border-top: 1px solid var(--line); padding-top: 56px; padding-bottom: 40px; color: var(--mu); font-size: .9rem; }
.o-foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.o-foot-grid p { margin: 14px 0 0; max-width: 36ch; line-height: 1.6; }
.o-foot h4 { margin: 0 0 14px; font: 400 .8rem/1.3 var(--mono); color: var(--tx); }
.o-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.o-foot a { text-decoration: none; }
.o-foot ul a:hover { color: var(--tx); }
.o-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font: 400 .75rem/1.5 var(--mono); }
.o-legal p { margin: 0; }
@media (max-width: 760px) { .o-foot-grid { grid-template-columns: 1fr 1fr; } .o-foot-grid > :first-child { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Lien d'évitement ---------- */
.o-skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 18px; background: var(--tx); color: var(--bg); font: 500 .9rem/1 var(--ui); border-radius: 0 0 6px 0; }
.o-skip:focus { left: 0; }

/* ---------- Pages juridiques ---------- */
.lg { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(72px, 10vw, 120px); }
.lg-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px; color: var(--mu); font: 400 .85rem/1 var(--mono); text-decoration: none; }
.lg-back::before { content: "←"; }
.lg-back:hover { color: var(--tx); }
.lg-h1 { margin: 0; max-width: 18ch; overflow-wrap: break-word; font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 600; font-stretch: 108%; line-height: 1.03; letter-spacing: -0.03em; }
.lg-date { margin: 16px 0 0; color: var(--mu); font: 400 .8rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.lg-body { max-width: 72ch; margin-top: clamp(40px, 6vw, 64px); }
.lg-intro { margin: 0 0 28px; font-size: 1.075rem; line-height: 1.7; color: var(--tx); }
.lg-sec { padding-top: 34px; margin-top: 34px; border-top: 1px solid var(--line); }
.lg-sec:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.lg-sec h2 { margin: 0 0 16px; font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 600; font-stretch: 105%; line-height: 1.2; letter-spacing: -0.02em; }
.lg-sec p { margin: 0 0 14px; font-size: 1rem; line-height: 1.75; color: var(--mu); }
.lg-sec p:last-child { margin-bottom: 0; }
.lg-list { margin: 4px 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; }
.lg-list li { position: relative; padding-left: 22px; font-size: 1rem; line-height: 1.7; color: var(--mu); }
.lg-list li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--line2); }
.lg-link { color: var(--tx); text-decoration: none; border-bottom: 1px solid var(--line2); padding-bottom: 2px; }
.lg-link:hover { border-color: var(--tx); }
.lg-table { margin: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.lg-row { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 14px 18px; background: var(--bg2); }
.lg-row dt { margin: 0; color: var(--mu); font: 400 .8rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.lg-row dd { margin: 0; font-size: 1rem; line-height: 1.55; }
.lg-row dd em { color: var(--sig); font-style: normal; font-size: .95rem; }
.lg-row dd a { color: inherit; }
@media (max-width: 620px) { .lg-row { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- Sous-onglets du cas Adjurio ---------- */
/* L'onglet Adjurio couvre deux usages — appel d'offres et questionnaire de sécurité.
   Sans ces boutons, le second n'apparaissait qu'au bout d'un cycle complet, soit
   27 secondes : personne ne le voyait. Ils ne s'affichent que sur cette scène. */
.d-cases { display: none; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
.demo[data-scene="adj"] .d-cases { display: flex; }
.d-case {
  appearance: none; cursor: pointer; font: 500 12.5px/1 var(--ui);
  color: var(--mu); background: transparent;
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px;
  transition: color .2s, border-color .2s, background .2s;
}
.d-case:hover { color: var(--tx); border-color: var(--line2); }
/* Chaque cas porte sa teinte, posee par le gabarit : le questionnaire et l appel
   d offres gardent la meme couleur ici et dans les barres du calculateur. */
.d-case.on { color: var(--c, var(--adj)); border-color: color-mix(in srgb, var(--c, var(--adj)) 45%, transparent); background: color-mix(in srgb, var(--c, var(--adj)) 10%, transparent); }
.d-case:focus-visible { outline: 2px solid var(--c, var(--adj)); outline-offset: 2px; }
@media (max-width: 480px) { .d-case { padding: 7px 11px; font-size: 12px; } }