/* ==========================================================================
   lowcostgpu.com — feuille unique du site vitrine (thème LIGHT, ton corporate).
   Direction : conteneur large (1320), radius contenus, UN accent indigo
   profond, surfaces plates bordées, footer navy. Pas de pastilles pastel ni
   de dégradés décoratifs — le seul dégradé vit dans la pastille du logo.
   Conventions : BEM léger, tokens en :root, aucun style inline (CSP 'self').
   ========================================================================== */

/* --- Fontes locales (font-src 'self') ----------------------------------- */
@font-face {
  font-family: 'InterVar';
  src: url('/assets/fonts/inter-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JBMono';
  src: url('/assets/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
  font-weight: 400 500;   /* un seul fichier pour les deux graisses : −22 Ko sur chaque page */
  font-style: normal;
  font-display: swap;
}
/* Repli métrique d'Inter (évite le décalage de mise en page pendant le swap). */
@font-face {
  font-family: 'InterFallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* --- Tokens -------------------------------------------------------------- */
:root {
  --bg:         #ffffff;
  --bg-soft:    #f7f8fa;
  --bg-deep:    #eef0f4;
  --ink:        #101828;
  --ink-2:      #4a5568;
  --ink-3:      #667085;   /* 4.9:1 sur blanc, 4.6:1 sur --bg-soft (WCAG AA) */
  --line:       #e2e6ec;
  --line-2:     #cfd5e0;
  --brand:      #3538c4;
  --brand-deep: #2a2d9e;
  --brand-soft: #eff1fb;
  --brand-line: #c3c9ef;
  --navy:       #0c1631;
  --navy-2:     #13204a;
  --good:       #077552;
  --good-soft:  #e5f3ed;
  --amber:      #b45309;
  --dark:       #0f172a;
  --radius:     10px;
  --radius-sm:  7px;
  --shadow-sm:  0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md:  0 1px 3px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .07);
  --shadow-lg:  0 2px 6px rgba(16, 24, 40, .06), 0 20px 48px rgba(16, 24, 40, .12);
  --font:       'InterVar', 'InterFallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:       'JBMono', ui-monospace, 'Cascadia Code', Consolas, monospace;
  color-scheme: light;
}

/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* [!] clip, pas hidden : ne crée pas de conteneur de défilement (le header
   sticky survit) et neutralise la propagation de largeur des scrollers
   internes (tables) vers le document constatée sur Chrome mobile. */
html, body { overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: 'cv05', 'ss01';
}
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -.022em; margin: 0 0 .5rem; font-weight: 700; }
h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
h3 { font-size: 1.04rem; }
p { margin: 0 0 .9rem; }
a { color: var(--brand-deep); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { vertical-align: middle; max-width: 100%; }
table { border-collapse: collapse; width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.wrap { max-width: 1340px; margin-inline: auto; padding-inline: clamp(18px, 3.2vw, 32px); }
.mono { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.grad { color: var(--brand); }
.strike { text-decoration: line-through; color: var(--ink-3); text-decoration-thickness: 1.5px; }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip {
  position: fixed; top: -48px; left: 12px; z-index: 200;
  padding: .55rem .9rem; background: var(--navy); color: #fff;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm); transition: top .15s;
}
.skip:focus { top: 0; }

.ic { width: 20px; height: 20px; flex: none; }
.ic--sm { width: 15px; height: 15px; }
.ic--lg { width: 28px; height: 28px; }
.ic--good { color: var(--good); }
.ic--caret { transition: rotate .18s; }

/* --- Boutons, pastilles, points ------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .6rem 1.1rem; border-radius: var(--radius-sm);
  font-weight: 600; font-size: .92rem; line-height: 1.2;
  border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s;
  text-decoration: none !important;
}
.btn--primary { background: var(--brand); color: #fff; border-color: var(--brand-deep); }
.btn--primary:hover { background: var(--brand-deep); }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink-3); }
.btn--invert { background: #fff; color: var(--navy); border-color: #fff; }
.btn--invert:hover { background: #e8ecf8; }
.btn--glass { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.btn--glass:hover { background: rgba(255, 255, 255, .1); }
.btn--sm { padding: .48rem .9rem; font-size: .88rem; }
.btn--lg { padding: .74rem 1.35rem; font-size: .98rem; }
.btn--tiny {
  padding: .3rem .68rem; font-size: .8rem;
  background: #fff; color: var(--brand-deep); border-color: var(--line-2); font-weight: 600;
}
.btn--tiny:hover { border-color: var(--brand); background: var(--brand-soft); }

.pill {
  display: inline-flex; align-items: center;
  padding: .1rem .42rem; border-radius: 4px;
  font-size: .72rem; font-weight: 650; letter-spacing: .01em;
}
.pill--drop { background: var(--good-soft); color: var(--good); }
.pill--tier { background: var(--bg-deep); color: var(--ink-2); margin-left: .45rem; font-weight: 600; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot--ok { background: #16a34a; }

/* --- Bandeau annonce ------------------------------------------------------ */
.abar { background: var(--navy); color: #b6c1da; font-size: .82rem; border-bottom: 1px solid #1d2b52; }
.abar__in { display: flex; align-items: center; justify-content: center; gap: 1.1rem; min-height: 37px; padding-block: 5px; }
.abar__txt { margin: 0; display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.abar__txt strong { color: #fff; font-weight: 650; }
.abar__tag {
  display: inline-flex; align-items: center; gap: .3rem;
  border: 1px solid #2a3a68; color: #dbe3f5;
  padding: .08rem .5rem; border-radius: 4px; font-weight: 600; font-size: .73rem;
  text-transform: uppercase; letter-spacing: .05em;
}
.abar__link { color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }

/* --- Header --------------------------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s;
}
.hdr.is-scrolled { box-shadow: var(--shadow-md); }
body.drawer-open .hdr { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.hdr__in { display: flex; align-items: center; gap: 1.2rem; min-height: 64px; }

.logo { display: inline-flex; align-items: center; text-decoration: none !important; }
.logo img { display: block; height: 40px; width: auto; }
.ftr .logo img { height: 48px; }

.nav { flex: 1; }
.nav__list { display: flex; align-items: center; gap: .1rem; }
.nav__btn, .nav__link {
  display: inline-flex; align-items: center; gap: .28rem;
  padding: .46rem .7rem; border-radius: var(--radius-sm);
  font-size: .92rem; font-weight: 550; color: var(--ink-2);
  text-decoration: none !important; transition: background .15s, color .15s;
}
.nav__btn:hover, .nav__link:hover, .nav__btn[aria-expanded="true"] { background: var(--bg-deep); color: var(--ink); }
.nav__btn[aria-expanded="true"] .ic--caret { rotate: 180deg; }

.hdr__cta { display: flex; align-items: center; gap: .7rem; margin-left: auto; }
.hdr__link { font-size: .92rem; font-weight: 550; color: var(--ink-2); padding: .45rem .4rem; }
.hdr__link:hover { color: var(--ink); text-decoration: none; }
.hdr__burger { display: none; position: relative; width: 42px; height: 42px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); }
.hdr__burger .ic { position: absolute; inset: 0; margin: auto; transition: opacity .15s, scale .15s; }
.hdr__burger .ic:last-child { opacity: 0; scale: .7; }
.hdr__burger[aria-expanded="true"] .ic:first-child { opacity: 0; scale: .7; }
.hdr__burger[aria-expanded="true"] .ic:last-child { opacity: 1; scale: 1; }

/* --- Mega menus (v3 03/09/2026 : pleine largeur du conteneur) -------------- */
.hdr__in { position: relative; }
.nav__btn[aria-expanded="true"] { background: var(--bg-deep); color: var(--ink); }
.mega {
  position: absolute; top: calc(100% + 10px); left: clamp(18px, 3.2vw, 32px); right: clamp(18px, 3.2vw, 32px); z-index: 95;
  background: #fff; border: 1px solid var(--line-2);
  border-radius: 16px; box-shadow: 0 2px 6px rgba(16,24,40,.06), 0 28px 70px rgba(16,24,40,.18);
  opacity: 0; translate: 0 6px; visibility: hidden;
  transition: opacity .16s ease, translate .16s ease, visibility .16s;
}
.mega::before {
  content: ""; position: absolute; top: -8px; left: var(--caret-x, 60px); width: 14px; height: 14px; z-index: 1;
  translate: -50% 0; background: #fff; border-left: 1px solid var(--line-2); border-top: 1px solid var(--line-2);
  rotate: 45deg; border-radius: 2px 0 0 0;
}
/* Pont invisible bouton → panneau : traverser l'espace ne ferme pas le menu. */
.mega.is-open::after { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.mega.is-open { opacity: 1; translate: 0 0; visibility: visible; }

.mega__body { display: grid; gap: 2.2rem; padding: 1.6rem 2rem 1.4rem; }
.mega__body--gpus { grid-template-columns: minmax(380px, 1.7fr) minmax(250px, 1.05fr) minmax(228px, .95fr) minmax(215px, .9fr); gap: 1.8rem; }
.mega__body--gpus .mega__col--aside { padding-left: 1.5rem; }
.mega__body--gpus .mega__card-big small { display: block; margin-left: 0; margin-top: .1rem; }
.mega__body--gpus .mega__list .mega__d, .mega__body--gpus .mega__list .mega__t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega__body--gpus .mega__lnk span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega__body--4 { grid-template-columns: 1.05fr 1.05fr 1fr 1fr; }
.mega__col { min-width: 0; display: flex; flex-direction: column; }
.mega__col--aside { border-left: 1px solid var(--line); padding-left: 2rem; gap: 1rem; }
.mega__h {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-3); margin: 0 0 .7rem; padding: 0 .6rem; display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
}
.mega__hint { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: .74rem; }
.mega__list { display: flex; flex-direction: column; gap: .1rem; }

.mega__item, .mega__support {
  position: relative; display: flex; align-items: center; gap: .8rem;
  padding: .6rem .7rem; border-radius: 10px; text-decoration: none !important;
  transition: background .12s;
}
.mega__item:hover, .mega__support:hover, .mega__item:focus-visible { background: var(--bg-soft); outline: none; }
.mega__item:focus-visible { box-shadow: inset 0 0 0 2px var(--brand-line); }
.mega__ic {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-deep); border-radius: 9px;
  transition: background .12s, color .12s;
}
.mega__ic .ic { width: 18px; height: 18px; }
.mega__item:hover .mega__ic, .mega__support:hover .mega__ic { background: var(--brand); color: #fff; }
.mega__txt { display: grid; gap: .12rem; min-width: 0; }
.mega__t { font-size: .94rem; font-weight: 620; color: var(--ink); line-height: 1.25; }
.mega__d { font-size: .79rem; color: var(--ink-2); line-height: 1.4; }
.mega__go { margin-left: auto; color: var(--brand); opacity: 0; translate: -4px 0; transition: opacity .12s, translate .12s; flex: none; }
.mega__item:hover .mega__go, .mega__support:hover .mega__go, .mega__item:focus-visible .mega__go, .mega__lnk:hover .mega__go { opacity: 1; translate: 0 0; }
.mega__more { display: inline-flex; align-items: center; gap: .3rem; margin: .7rem 0 0 .7rem; font-size: .84rem; font-weight: 650; color: var(--brand-deep); text-decoration: none !important; }
.mega__more:hover { text-decoration: underline !important; }

.mega__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .05rem; }
.mega__lnk { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: 9px; font-size: .88rem; font-weight: 550; color: var(--ink); text-decoration: none !important; transition: background .12s; }
.mega__lnk > .ic:first-child { color: var(--brand); flex: none; }
.mega__lnk:hover { background: var(--bg-soft); color: var(--brand-deep); }

.mega__gpus { display: flex; flex-direction: column; gap: .1rem; }
.mega__gpuh, .mega__gpu { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto auto; align-items: center; gap: .6rem; padding: .34rem .6rem; }
.mega__gpuh { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding-bottom: .2rem; border-bottom: 1px solid var(--line); margin-bottom: .2rem; }
.mega__gpuh span:nth-child(n+3), .mega__m, .mega__ref, .mega__p { text-align: right; }
.mega__gpu { border-radius: 9px; text-decoration: none !important; transition: background .12s; }
.mega__gpu:hover, .mega__gpu:focus-visible { background: var(--bg-soft); outline: none; }
.mega__thumb { width: 38px; height: 27px; object-fit: cover; border-radius: 5px; border: 1px solid var(--line); background: var(--bg-soft); }
.mega__n { font-size: .9rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega__m { font-size: .76rem; color: var(--ink-3); white-space: nowrap; }
.mega__ref { font-size: .8rem; color: var(--ink-3); text-decoration: line-through; white-space: nowrap; }
.mega__p { font-size: .88rem; font-weight: 500; color: var(--brand-deep); white-space: nowrap; display: inline-flex; justify-content: flex-end; align-items: baseline; gap: .35rem; }
.mega__p em { font-style: normal; font-size: .66rem; font-weight: 700; color: var(--good); background: var(--good-soft); border-radius: 99px; padding: .05rem .4rem; }
.mega__gpu:hover .mega__n { color: var(--brand-deep); }

.mega__card, .mega__code {
  display: grid; gap: .5rem; padding: 1.05rem 1.1rem; border-radius: 12px; text-decoration: none !important;
  background: linear-gradient(180deg, var(--brand-soft), #fff); border: 1px solid var(--brand-line);
  transition: box-shadow .12s, border-color .12s;
}
.mega__card:hover, .mega__code:hover { box-shadow: var(--shadow-md); border-color: var(--brand); }
.mega__card-k { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-deep); }
.mega__card-big { font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1.1; }
.mega__card-big small { font-size: .76rem; font-weight: 500; color: var(--ink-3); margin-left: .35rem; font-family: var(--font); }
.mega__card-d, .mega__code-d { font-size: .8rem; color: var(--ink-2); line-height: 1.5; }
.mega__strike { text-decoration: line-through; color: var(--ink-3); }
.mega__card-a { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 650; color: var(--brand-deep); text-decoration: none !important; }
.mega__card:hover .mega__card-a, .mega__code:hover .mega__card-a, .mega__card-a:hover { text-decoration: underline !important; }
.mega__logos { display: flex; gap: .35rem; }
.mega__logos .tlogo { width: 28px; height: 28px; border-radius: 7px; box-shadow: 0 0 0 1px rgba(16,24,40,.08); background: #fff; }
.mega__code { background: var(--navy); border-color: var(--navy); color: #fff; }
.mega__code:hover { border-color: var(--brand); }
.mega__code-k { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #9aa8ff; }
.mega__code code { font-family: var(--mono); font-size: .8rem; color: #dbe2f7; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.mega__code-d { color: #b7c0dc; }
.mega__code .mega__card-a { color: #c7d0ff; }

.mega__facts { list-style: none; margin: 0; padding: 0 .3rem; display: grid; gap: .5rem; }
.mega__facts li { display: flex; align-items: flex-start; gap: .5rem; font-size: .8rem; color: var(--ink-2); line-height: 1.45; }
.mega__facts li > span { min-width: 0; }
.mega__facts li .ic { flex: none; color: var(--brand); margin-top: .15rem; }
.mega__facts b { font-weight: 600; color: var(--ink); }
.mega__facts--big { padding: 0 .6rem; gap: .8rem; }
.mega__facts--big li { font-size: .84rem; }
.mega__facts--big li .ic { color: var(--good); }
.mega__cta { margin-top: auto; justify-content: center; }
.mega__support { border: 1px solid var(--line); background: var(--bg-soft); }
.mega__support .mega__d { line-height: 1.45; }

.mega__modes { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.mega__modes a { display: grid; grid-template-columns: 1fr auto; gap: .1rem .8rem; align-items: center; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-decoration: none !important; transition: border-color .12s, background .12s; }
.mega__modes a:hover { border-color: var(--brand-line); background: var(--bg-soft); }
.mega__mode-k { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 620; color: var(--ink); }
.mega__mode-k .ic { color: var(--brand); }
.mega__mode-k em { font-style: normal; font-size: .66rem; font-weight: 700; color: var(--good); background: var(--good-soft); border-radius: 99px; padding: .05rem .4rem; }
.mega__mode-p { grid-column: 2; grid-row: 1 / span 2; font-size: 1.05rem; font-weight: 600; color: var(--brand-deep); }
.mega__mode-d { grid-column: 1; font-size: .76rem; color: var(--ink-2); }
.mega__note { margin: .6rem 0 0 .2rem; font-size: .74rem; color: var(--ink-3); }

.mega__kpis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.mega__kpis li { display: grid; gap: .1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); padding: .7rem .85rem; }
.mega__kpis b { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.mega__kpis span { font-size: .72rem; color: var(--ink-3); line-height: 1.3; }

.mega__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .75rem 2rem; border-top: 1px solid var(--line); background: var(--bg-soft);
  border-radius: 0 0 16px 16px;
}
.mega__status { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 600; color: var(--good); text-decoration: none !important; }
.mega__status--degraded, .mega__status--partial { color: var(--amber); }
.mega__status-n { font-weight: 500; color: var(--ink-3); }
.dot--warn { background: var(--amber); }
.mega__foot-links { display: flex; gap: 1.2rem; }
.mega__foot-links a { font-size: .8rem; font-weight: 600; color: var(--ink-2); text-decoration: none !important; }
.mega__foot-links a:hover { color: var(--brand-deep); }
@media (max-width: 1240px) {
  .mega__body { gap: 1.5rem; padding: 1.3rem 1.5rem 1.2rem; }
  .mega__body--gpus { grid-template-columns: 2fr 1fr 1fr; }
  .mega__body--gpus .mega__col--aside { display: none; }
  .mega__col--aside { padding-left: 1.5rem; }
}

/* --- Tiroir mobile --------------------------------------------------------- */
/* [!] Le tiroir passe AU-DESSUS du header (z 200) et porte sa propre barre
   logo + fermer : le header sticky + backdrop-filter ne peint pas de façon
   fiable par-dessus un fixed plein écran sur tous les moteurs. */
.drawer {
  position: fixed; inset: 0; top: 0; z-index: 200;
  background: var(--bg); overflow-y: auto; overscroll-behavior: contain;
  padding-bottom: 90px;
}
.drawer__bar {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 58px; border-bottom: 1px solid var(--line); margin-bottom: .8rem;
}
.drawer__close {
  width: 42px; height: 42px; border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--ink);
}
.drawer__in { display: flex; flex-direction: column; gap: .4rem; }
.drawer__cta { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .8rem; }
.drawer__h {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-3); margin: 1rem 0 .3rem;
}
.drawer__links li a {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .2rem; font-size: 1rem; font-weight: 550; color: var(--ink);
  border-bottom: 1px solid var(--line); text-decoration: none !important;
}
.drawer__links .ic--sm { color: var(--brand); }
.drawer__gpus li a {
  display: flex; justify-content: space-between; align-items: center;
  padding: .5rem .2rem; border-bottom: 1px solid var(--line);
  color: var(--ink); font-size: .95rem; text-decoration: none !important;
}
.drawer__gpus .mono { color: var(--brand-deep); font-size: .88rem; }
.drawer__all { font-weight: 650; color: var(--brand-deep) !important; }

/* --- Fil d'Ariane ---------------------------------------------------------- */
/* Fil d'Ariane v2 (03/09/2026) : maison + chevrons, pastilles au survol, dernier élément tronqué,
   une seule ligne qui défile sur mobile (barre de défilement masquée). */
.crumbs { padding: .9rem 0 0; font-size: .82rem; }
.crumbs__l { display: flex; align-items: center; gap: .1rem; margin: 0; padding: 0; list-style: none; white-space: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.crumbs__l::-webkit-scrollbar { display: none; }
.crumbs__i { display: inline-flex; align-items: center; gap: .1rem; min-width: 0; flex: 0 0 auto; }
.crumbs__i--cur { min-width: 0; flex: 0 1 auto; }
.crumbs__sep { color: var(--line-2); transform: rotate(-90deg); flex: 0 0 auto; }
.crumbs__a { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .55rem; border-radius: 999px; color: var(--ink-2); font-weight: 500; line-height: 1.2; transition: background .15s, color .15s; }
.crumbs__a:hover, .crumbs__a:focus-visible { background: var(--brand-soft); color: var(--brand); text-decoration: none; }
.crumbs__home .ic { color: var(--ink-3); }
.crumbs__home:hover .ic, .crumbs__home:focus-visible .ic { color: var(--brand); }
.crumbs__cur { display: inline-block; padding: .28rem .55rem; color: var(--ink); font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; max-width: min(60vw, 560px); }
@media (max-width: 720px) {
  .crumbs { padding-top: .65rem; font-size: .8rem; }
  .crumbs__home span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .crumbs__a { padding: .3rem .45rem; }
  .crumbs__cur { max-width: 58vw; }
}

/* --- Hero (compact, fond illustré) ----------------------------------------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, .93) 48%, rgba(255, 255, 255, .58) 100%),
    url('/assets/img/hero-bg.webp') right center / cover no-repeat,
    var(--bg-soft);
}
.hero__in {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr);
  gap: clamp(1.5rem, 4vw, 4.5rem); align-items: center;
  padding-block: clamp(2.4rem, 5vw, 3.8rem);
}
.hero__eyebrow {
  display: flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-deep); margin: 0 0 1rem;
}
.hero__eyebrow .ic--sm { color: var(--brand); }
.hero__sub { font-size: 1.07rem; color: var(--ink-2); max-width: 56ch; margin: .9rem 0 1.4rem; }
.hero__sub .mono { font-size: .98em; }
.hero__act { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.1rem; }
.hero__proof { display: flex; flex-wrap: wrap; gap: 1.1rem; font-size: .85rem; color: var(--ink-2); }
.hero__proof li { display: inline-flex; align-items: center; gap: .35rem; }
.hero__proof .ic--sm { color: var(--good); }

.hero__ticker {
  background: #fff;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 1rem 1.15rem;
}
.ticker__head {
  display: flex; align-items: center; gap: .5rem;
  font-size: .84rem; font-weight: 700; margin-bottom: .5rem;
}
.ticker__dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; }
.ticker__date { margin-left: auto; font-size: .72rem; font-weight: 500; color: var(--ink-3); }
.ticker__t th {
  text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); font-weight: 650; padding: .3rem .4rem; border-bottom: 1px solid var(--line-2);
}
.ticker__t td { padding: .5rem .4rem; border-bottom: 1px solid var(--line); font-size: .9rem; }
.ticker__t tr:last-child td { border-bottom: 0; }
.ticker__t td a { color: var(--ink); font-weight: 600; }
.ticker__ref { color: var(--ink-3); text-decoration: line-through; font-size: .84rem; }
.ticker__ours { color: var(--ink); white-space: nowrap; }
.ticker__ours .pill { margin-left: .4rem; }
.ticker__foot { margin: .6rem 0 0; font-size: .74rem; color: var(--ink-3); }

/* --- Bande de stats --------------------------------------------------------- */
.stats { background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.stats__in {
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding-block: 1.35rem; text-align: left; gap: 1.5rem;
}
.stat { border-left: 1px solid var(--line-2); padding-left: 1.2rem; }
.stat strong { display: block; font-size: 1.5rem; font-weight: 740; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat span { font-size: .8rem; color: var(--ink-2); }
.stat:nth-child(4) strong { color: var(--brand); }

/* --- Sections génériques ----------------------------------------------------- */
.sec { padding-block: clamp(3rem, 5.5vw, 4.5rem); background: var(--bg); }
.sec--alt { background: var(--bg-soft); border-block: 1px solid var(--line); }
.sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.7rem; }
.sec__head p { color: var(--ink-2); max-width: 64ch; margin: 0; }
.sec__head--center { flex-direction: column; align-items: center; text-align: center; }
.sec__foot { margin-top: 1rem; font-size: .85rem; color: var(--ink-2); }
.sec__foot a { font-weight: 600; }
.grid { display: grid; gap: 1rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
/* Les items de grille héritent min-width:auto → leur contenu peut déborder
   du viewport mobile ; on force la contraction. */
.grid > *, .how__grid > *, .faq__grid > *, .hero__in > * { min-width: 0; }

/* --- Sélecteur de mode + table GPU ------------------------------------------- */
.seg { display: inline-flex; background: var(--bg-deep); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 3px; }
.seg__btn {
  padding: .42rem .8rem; border-radius: 5px; font-size: .86rem; font-weight: 600;
  color: var(--ink-2); display: inline-flex; align-items: center; gap: .4rem; transition: all .15s;
  white-space: nowrap;   /* « On-demand », « On-Demand » : sinon coupé au trait d'union, sur deux lignes */
}
.seg__btn:hover { color: var(--ink); }
.seg__btn.is-on { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); border: 1px solid var(--line-2); padding-block: calc(.42rem - 1px); }
.seg__note { font-size: .7rem; font-weight: 700; color: var(--good); }

.tblwrap { overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; }
.gput { min-width: 900px; }
.gput th {
  text-align: left; font-size: .71rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-2); font-weight: 700; padding: .75rem 1rem;
  border-bottom: 1px solid var(--line-2); background: var(--bg-soft);
}
.gput th.gput__ours { color: var(--brand-deep); background: var(--brand-soft); }
.th__note { display: block; font-size: .67rem; font-weight: 500; text-transform: none; letter-spacing: 0; margin-top: .1rem; }
.gput td { padding: .68rem 1rem; border-bottom: 1px solid var(--line); font-size: .93rem; }
.gput tbody tr:last-child td { border-bottom: 0; }
.gput tbody tr { transition: background .12s; }
.gput tbody tr:hover { background: var(--bg-soft); }
.gput__name { font-weight: 650; color: var(--ink); }
.gput__name:hover { color: var(--brand-deep); }
.gput__ref { color: var(--ink-3); text-decoration: line-through; }
.gput td.gput__price { background: var(--brand-soft); border-inline: 1px solid var(--brand-line); white-space: nowrap; }
.gput__val { font-size: 1rem; color: var(--brand-deep); font-weight: 500; }
.gput__price .pill { margin-left: .5rem; }
.gput__mo { color: var(--ink-2); }
.avail { display: inline-flex; align-items: center; gap: .4rem; font-size: .86rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.avail--low .dot--ok { background: #d97706; }

/* --- Cartes « why » et produits ----------------------------------------------- */
/* Carré d'icône commun aux cartes : 32 px bordé, l'icône ne prend JAMAIS sa
   propre ligne — toujours inline avec le titre. */
.why__ic, .prod__ic, .work__ic {
  flex: none; display: inline-grid; place-items: center;
  width: 32px; height: 32px; border: 1px solid var(--line);
  background: var(--bg-soft); color: var(--brand); border-radius: var(--radius-sm);
}
.why__ic .ic, .prod__ic .ic, .work__ic .ic { width: 17px; height: 17px; }

.why__card {
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 1.2rem 1.25rem;
}
.why__card h3 { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; }
.why__card p { margin: 0; font-size: .9rem; color: var(--ink-2); }

.prod {
  display: flex; flex-direction: column; gap: .3rem; height: 100%;
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; text-decoration: none !important; transition: border-color .15s, box-shadow .15s;
}
.prod:hover { border-color: var(--brand); box-shadow: var(--shadow-md); }
.prod__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; }
.prod__n { font-weight: 680; color: var(--ink); font-size: 1.02rem; }
.prod__d { font-size: .84rem; color: var(--ink-2); flex: 1; }
.prod__go { font-size: .82rem; font-weight: 650; color: var(--brand-deep); display: inline-flex; align-items: center; gap: .3rem; margin-top: .45rem; }

/* --- How it works + terminal ---------------------------------------------------- */
.how__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(1.6rem, 4vw, 3.6rem); align-items: center; }
.how__steps { display: flex; flex-direction: column; gap: 1.15rem; margin: 1.4rem 0 1.6rem; }
.how__step { display: flex; gap: 1rem; }
.how__num {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--navy); color: #fff; font-weight: 650; font-size: .9rem;
  border-radius: var(--radius-sm);
}
.how__step h3 { display: flex; align-items: center; gap: .45rem; margin-bottom: .25rem; }
.how__step .ic--sm { color: var(--brand); }
.how__step p { margin: 0; font-size: .92rem; color: var(--ink-2); }
.how__act { display: flex; flex-wrap: wrap; gap: .7rem; }

.term {
  background: var(--dark); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-lg); border: 1px solid #1e293b;
}
.term__bar { display: flex; align-items: center; gap: .45rem; padding: .65rem .95rem; background: #16203a; }
.term__bar span { width: 10px; height: 10px; border-radius: 50%; background: #334155; }
.term__bar em { margin-left: .4rem; font-style: normal; font-size: .74rem; color: #64748b; }
.term__body {
  margin: 0; padding: 1.05rem 1.2rem; overflow-x: auto;
  font-family: var(--mono); font-size: .84rem; line-height: 1.75; color: #e2e8f0;
}
.t-p { color: #64748b; } .t-f { color: #93c5fd; } .t-ok { color: #34d399; }
.t-v { color: #fbbf24; } .t-c { color: #64748b; }

.how__templates {
  display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .9rem; margin-top: 1.05rem;
}
.how__templates li { display: flex; align-items: baseline; gap: .45rem; font-size: .84rem; color: var(--ink-2); }
.how__templates strong { color: var(--ink); font-weight: 640; }
.how__templates small { color: var(--ink-3); }
.how__tic { color: var(--brand); align-self: center; display: inline-flex; }

/* --- Workloads --------------------------------------------------------------- */
.work {
  display: flex; gap: .8rem; height: 100%;
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 1.1rem 1.15rem; text-decoration: none !important; transition: border-color .15s, box-shadow .15s;
}
.work:hover { border-color: var(--brand); box-shadow: var(--shadow-md); }
.work__body h3 { margin-bottom: .2rem; }
.work__body p { margin: 0 0 .45rem; font-size: .86rem; color: var(--ink-2); }
.work__pick { font-size: .84rem; color: var(--ink-2); }
.work__pick strong { color: var(--ink); }
.work__pick .mono { color: var(--brand-deep); margin-left: .25rem; }

/* --- Comparatif --------------------------------------------------------------- */
.cmp { min-width: 820px; }
.cmp th[scope="col"] {
  padding: .85rem 1rem; text-align: left; font-size: .9rem;
  border-bottom: 2px solid var(--line-2); background: var(--bg-soft);
}
.cmp th.cmp__us { background: var(--brand-soft); color: var(--brand-deep); border-bottom-color: var(--brand); }
.cmp th[scope="row"] { text-align: left; font-weight: 600; font-size: .88rem; color: var(--ink-2); padding: .68rem 1rem; border-bottom: 1px solid var(--line); }
.cmp td { padding: .68rem 1rem; font-size: .88rem; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.cmp td.cmp__us { background: var(--brand-soft); border-inline: 1px solid var(--brand-line); color: var(--ink); font-weight: 550; }
.cmp td.cmp__us .ic--sm { margin-right: .2rem; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }

/* --- Témoignages --------------------------------------------------------------- */
.quote {
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 1.3rem; display: flex; flex-direction: column; gap: .9rem;
}
.quote__q { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ink); }
.quote__a { margin: 0; font-size: .84rem; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: .8rem; }

/* --- FAQ ------------------------------------------------------------------------ */
.faq__grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(1.5rem, 4vw, 4.5rem); align-items: start; }
.faq__intro p { color: var(--ink-2); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0; font-weight: 640; cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--brand-deep); }
.faq__item[open] .ic--caret { rotate: 180deg; }
.faq__item .ic--caret { color: var(--ink-3); }
.faq__item p { margin: 0 0 1.05rem; font-size: .92rem; color: var(--ink-2); max-width: 70ch; }

/* --- CTA final ------------------------------------------------------------------- */
.cta { background: var(--navy); color: #fff; border-top: 1px solid #1d2b52; }
.cta__in {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding-block: clamp(2.4rem, 4.5vw, 3.4rem);
}
.cta__txt h2 { color: #fff; margin-bottom: .4rem; }
.cta__txt p { margin: 0; color: #aeb9d6; max-width: 58ch; }
.cta__act { display: flex; flex-wrap: wrap; gap: .7rem; }

/* --- Footer (navy corporate) ------------------------------------------------------ */
.ftr { background: var(--navy); color: #96a2c0; padding-block: 3rem 5.5rem; font-size: .88rem; }
.ftr a { color: #b9c3dc; }
.ftr a:hover { color: #fff; }
.ftr__top {
  display: grid; grid-template-columns: 1.35fr repeat(5, 1fr); gap: 1.6rem;
  padding-bottom: 2rem; border-bottom: 1px solid #1d2b52;
}
.ftr__tag { margin: .8rem 0 1rem; color: #aeb9d6; max-width: 30ch; }
.ftr__facts { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.1rem; }
.ftr__facts li { display: flex; align-items: center; gap: .5rem; font-size: .84rem; }
.ftr__facts .ic--sm { color: #7d8fd8; }
.ftr__status { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: #4ade80 !important; font-size: .84rem; }
.ftr__h { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #64749c; margin: 0 0 .7rem; }
.ftr__col ul { display: flex; flex-direction: column; gap: .45rem; }
.ftr__pay { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; padding-block: 1.2rem; border-bottom: 1px solid #1d2b52; }
.ftr__pay-h { margin: 0; font-weight: 700; font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: #64749c; }
.ftr__pay-list { display: flex; flex-wrap: wrap; gap: .9rem 1.1rem; }
.ftr__pay-list li { display: inline-flex; align-items: baseline; gap: .3rem; font-size: .84rem; }
.ftr__pay-list .ic--sm { color: #7d8fd8; align-self: center; }
.ftr__coin { color: #d3dbee; font-weight: 600; }
.ftr__pay-list small { color: #64749c; font-size: .72rem; }
.ftr__pay-note { color: #4ade80; font-weight: 600; }
.ftr__bottom { padding-top: 1.2rem; color: #64749c; font-size: .78rem; }
.ftr__bottom p { margin: 0 0 .5rem; max-width: 120ch; }
.ftr__tm { font-size: .72rem; }

/* --- Barre mobile basse ------------------------------------------------------------ */
.mnav {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 70;
  display: none; grid-template-columns: repeat(5, 1fr);
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-2);
  padding-bottom: env(safe-area-inset-bottom);
}
.mnav__i {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .5rem 0 .55rem; font-size: .64rem; font-weight: 600; color: var(--ink-2);
  text-decoration: none !important;
}
.mnav__i .ic { width: 21px; height: 21px; }
.mnav__i.is-on { color: var(--brand-deep); }
.mnav__i--go { color: var(--brand-deep); }
.mnav__go {
  display: grid; place-items: center; width: 40px; height: 40px; margin-top: -18px;
  background: var(--brand); color: #fff; border-radius: 50%;
  box-shadow: 0 4px 12px rgba(42, 45, 158, .4); border: 3px solid #fff;
}
.mnav__go .ic { width: 20px; height: 20px; }

/* --- Pages erreur / chantier --------------------------------------------------------- */
.err__in { max-width: 640px; text-align: center; padding-block: 2.5rem; }
.err__code { font-size: 4.2rem; font-weight: 500; color: var(--brand); margin: 0; }
.err__badge {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--brand-soft); color: var(--brand-deep); border: 1px solid var(--brand-line);
  font-size: .78rem; font-weight: 700; border-radius: 5px; padding: .3rem .8rem; margin-bottom: 1rem;
  text-transform: uppercase; letter-spacing: .05em;
}
.err__sub { color: var(--ink-2); margin-bottom: 1.4rem; }
.err__act { display: flex; justify-content: center; gap: .7rem; flex-wrap: wrap; }

/* --- Responsive ------------------------------------------------------------------------ */
@media (max-width: 1160px) {
  .nav { display: none; }
  .hdr__burger { display: inline-flex; align-items: center; justify-content: center; }
  .hdr__link { display: none; }
}
@media (min-width: 1161px) {
  .drawer { display: none !important; }
}
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: 1fr 1fr; }
  .stats__in { grid-template-columns: repeat(3, 1fr); row-gap: 1.2rem; }
  .how__grid { grid-template-columns: 1fr; }
  .faq__grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero__in { grid-template-columns: 1fr; }
  .hero__bg {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .9) 55%, rgba(255, 255, 255, .6) 100%),
      url('/assets/img/hero-bg.webp') 70% center / cover no-repeat, var(--bg-soft);
  }
  .grid--3 { grid-template-columns: 1fr; }
  .sec__head { flex-direction: column; align-items: flex-start; }
  .cta__in { flex-direction: column; align-items: flex-start; }
  .ftr__top { grid-template-columns: 1fr 1fr 1fr; }
  .ftr__brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .mnav { display: grid; }
  body { padding-bottom: 62px; }
  .abar__txt { display: none; }
  .abar__in::before { content: 'Every GPU ≥ 30% below the market median.'; font-weight: 600; font-size: .78rem; color: #fff; }
  .grid--4 { grid-template-columns: 1fr; }
  .stats__in { grid-template-columns: 1fr 1fr; }
  .stat:last-child { grid-column: 1 / -1; }
  .seg { align-self: stretch; }
  .seg__btn { flex: 1; justify-content: center; padding: .42rem .5rem; font-size: .8rem; white-space: nowrap; }
  .seg__note { display: none; }
  .how__templates { grid-template-columns: 1fr; }
  .ftr__top { grid-template-columns: 1fr 1fr; }
  .ftr { padding-bottom: 7rem; }
}
@media (max-width: 560px) {
  .hdr__cta .btn { display: none; }
  .hdr__in { min-height: 58px; }
}
@media (max-width: 460px) {
  .hero__act .btn { flex: 1; justify-content: center; }
  .drawer__cta { grid-template-columns: 1fr; }
}

/* --- Accessibilité ----------------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ==========================================================================
   Pages intérieures (chantier 03/09/2026) : phero, catalogue, fiches GPU,
   produits, use-cases, templates, docs, guides, status, legal.
   ========================================================================== */

/* --- Utilitaires ---------------------------------------------------------- */
.dim { color: var(--ink-3); }
.good { color: var(--good); }
.grid--2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.ic--flip { transform: scaleX(-1); }
.btn--block { display: flex; width: 100%; justify-content: center; }

/* --- Hero de page intérieure ------------------------------------------------ */
.phero { padding: 2.6rem 0 2.2rem; background: linear-gradient(180deg, var(--bg-soft), var(--bg)); border-bottom: 1px solid var(--line); }
.phero__in { display: flex; gap: 2.4rem; align-items: flex-start; justify-content: space-between; }
.phero__copy { max-width: 56rem; }
.phero__eyebrow { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--brand-deep); margin: 0 0 .8rem; }
.phero h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.13; letter-spacing: -.022em; margin: 0 0 .85rem; }
.phero__sub { font-size: 1.02rem; line-height: 1.65; color: var(--ink-2); max-width: 52rem; margin: 0 0 1.2rem; }
.phero__sub a { font-weight: 600; }
.phero__act { display: flex; gap: .7rem; flex-wrap: wrap; }
.phero__aside { flex: 0 0 auto; }

/* --- Chips de familles / catégories ---------------------------------------- */
.famchips { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.famchips__in { display: flex; gap: .5rem; overflow-x: auto; padding: .55rem 1.1rem; scrollbar-width: none; }
.famchips__in::-webkit-scrollbar { display: none; }
.famchip { display: inline-flex; align-items: center; gap: .45rem; padding: .34rem .8rem; border: 1px solid var(--line-2); border-radius: 99px; font-size: .82rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.famchip:hover { border-color: var(--brand); color: var(--brand-deep); text-decoration: none; }
.famchip span { font-size: .72rem; color: var(--ink-3); font-family: var(--mono); }

/* --- Catalogue /gpus --------------------------------------------------------- */
.sec--fam { scroll-margin-top: 3.4rem; }
.sec__count { font-size: .8rem; font-weight: 600; color: var(--ink-3); margin-left: .5rem; }
.fam__img { border-radius: var(--radius); border: 1px solid var(--line); object-fit: cover; background: var(--bg-soft); }
.gput--cat td, .gput--cat th { padding: .5rem .7rem; }

/* --- Tableau spec 2×2 --------------------------------------------------------- */
.sptab { width: 100%; border-collapse: collapse; font-size: .9rem; }
.sptab th, .sptab td { padding: .55rem .75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.sptab th { color: var(--ink-3); font-weight: 600; font-size: .8rem; width: 20%; }
.sptab tr:last-child th, .sptab tr:last-child td { border-bottom: 0; }

/* --- Fiche GPU (v2 03/09/2026) ------------------------------------------------ */
.gfiche { padding: 2.2rem 0 3rem; }
.gfiche__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2.6rem; align-items: start; }
.gfiche__main h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.24rem; letter-spacing: -.015em; margin: 2.3rem 0 .9rem; }
.ghero h1 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); letter-spacing: -.022em; line-height: 1.12; margin: 0 0 1.1rem; }
.gstats { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; padding: 0; margin: 0 0 1.1rem; }
.gstat { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-soft); padding: .6rem .75rem; display: grid; gap: .1rem; }
.gstat__k { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.gstat__v { font-size: 1.05rem; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: .35rem; }
.gstat small { font-size: .7rem; color: var(--ink-3); }
.gstat--live { border-color: #b5e3d0; background: var(--good-soft); }
.gmodes { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: .7rem; margin: 0 0 .8rem; }
.gmode { display: grid; gap: .3rem; align-content: start; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); padding: .95rem 1.05rem; transition: border-color .15s, box-shadow .15s, transform .15s; }
.gmode:hover { text-decoration: none; border-color: var(--brand-line); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.gmode--main { border-color: var(--brand-line); background: linear-gradient(180deg, #fff, var(--brand-soft)); }
.gmode__k { display: flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.gmode--main .gmode__k { color: var(--brand-deep); }
.gmode__p { font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.gmode__p small { font-size: .72rem; font-weight: 500; color: var(--ink-3); margin-left: .25rem; }
.gmode__m { font-size: .76rem; color: var(--ink-2); display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.ghero__note { font-size: .82rem; color: var(--ink-3); margin: 0 0 .4rem; }
.gmedia { display: flex; gap: 1.2rem; align-items: center; margin: 1.6rem 0 0; padding: 1.05rem 1.2rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); }
.gmedia img { border-radius: var(--radius-sm); flex: 0 0 auto; border: 1px solid var(--line); background: #fff; }
.gmedia__k { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-deep); margin: 0 0 .35rem; }
.gmedia p { margin: 0; font-size: .92rem; line-height: 1.62; color: var(--ink-2); }
.gfiche__fits { list-style: none; padding: 0; margin: .9rem 0 0; display: grid; gap: .45rem; }
.gfiche__fits li { display: flex; align-items: center; gap: .5rem; font-size: .92rem; }
.gregs { list-style: none; padding: 0; margin: .8rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.gregs__i { display: inline-flex; align-items: center; gap: .45rem; font-size: .84rem; font-weight: 550; color: var(--ink-2); border: 1px solid var(--line); border-radius: 99px; background: #fff; padding: .3rem .75rem; }
.gregs__i .flag { border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }
.gregs__i--more { color: var(--ink-3); background: var(--bg-soft); }
.gput__hl td { background: var(--brand-soft); }
.gfiche__side { position: sticky; top: 1rem; display: grid; gap: 1.1rem; }
.buybox { border: 1px solid var(--brand-line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-md); padding: 1.15rem 1.15rem 1rem; }
.buybox__hero { display: flex; gap: .8rem; align-items: center; margin-bottom: .8rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.buybox__hero img { border-radius: var(--radius-sm); border: 1px solid var(--line); }
.buybox__k { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 0; }
.buybox__name { font-size: .95rem; font-weight: 650; color: var(--ink); margin: .1rem 0 0; }
.buybox__price { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.buybox__price small { font-size: .8rem; font-weight: 500; color: var(--ink-3); margin-left: .3rem; }
.buybox__ref { font-size: .84rem; color: var(--ink-2); margin: .3rem 0 0; display: flex; align-items: center; gap: .5rem; }
.buybox__facts { list-style: none; padding: .9rem 0; margin: .9rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: .5rem; }
.buybox__facts li { display: flex; align-items: center; gap: .55rem; font-size: .86rem; color: var(--ink-2); }
.buybox .btn + .btn { margin-top: .55rem; }
.buybox__note { font-size: .78rem; color: var(--ink-3); text-align: center; margin: .7rem 0 0; }
.sidelinks { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft); padding: 1rem 1.1rem; }
.sidelinks__h { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 0 0 .6rem; }
.sidelinks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.sidelinks a { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .42rem .2rem; font-size: .88rem; font-weight: 600; color: var(--ink-2); border-radius: var(--radius-sm); }
.sidelinks a:hover { color: var(--brand-deep); text-decoration: none; }

/* --- /pricing : formule ---------------------------------------------------------- */
.formula { align-items: stretch; }
.formula__card { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); padding: 1.2rem 1.3rem; }
.formula__step { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--brand-deep); margin: 0 0 .5rem; }
.formula__big { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .5rem; }
.formula__card p:last-child { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--ink-2); }
.coinl { list-style: none; padding: 0; margin: 0; }
.coinl__i { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; padding: .65rem .9rem; font-size: .92rem; }

/* --- Pages produit ------------------------------------------------------------------ */
.prodsplit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem; align-items: start; }
.prodsplit h2 { font-size: 1.3rem; letter-spacing: -.015em; margin: 0 0 .8rem; }
.prodsplit__lead { color: var(--ink-2); line-height: 1.65; margin: 0 0 1rem; }
.ticklist { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .55rem; }
.ticklist li { display: flex; align-items: flex-start; gap: .55rem; font-size: .93rem; line-height: 1.55; color: var(--ink-2); }
.ticklist li .ic { flex: 0 0 auto; margin-top: .18rem; }
.ticklist strong { color: var(--ink); }
.pitch { border: 1px solid var(--brand-line); border-radius: var(--radius); background: var(--brand-soft); padding: 1.15rem 1.3rem; }
.pitch__k { display: flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-deep); margin: 0 0 .6rem; }
.pitch p { font-size: .93rem; line-height: 1.65; color: var(--ink-2); margin: 0 0 .6rem; }
.pitch p:last-child { margin-bottom: 0; }
.pitch__foot { font-size: .8rem; color: var(--ink-3); }
.pitch .mono { font-size: .88rem; }

/* --- Hub use-cases ------------------------------------------------------------------- */
.uch { list-style: none; padding: 0; margin: 0; }
.uch__card { display: flex; flex-direction: column; gap: .55rem; height: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); padding: 1.15rem 1.2rem; transition: box-shadow .15s, border-color .15s, transform .15s; }
.uch__card:hover { text-decoration: none; border-color: var(--brand-line); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.uch__head { display: flex; align-items: center; gap: .55rem; font-size: 1rem; color: var(--ink); }
.uch__ic { color: var(--brand); display: inline-flex; }
.uch__d { font-size: .87rem; line-height: 1.55; color: var(--ink-2); }
.uch__kpi { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: var(--good); }
.uch__pick { font-size: .8rem; color: var(--ink-3); }
.uch__pick strong { color: var(--ink-2); }
.uch .prod__go { margin-top: auto; }

/* --- Templates ------------------------------------------------------------------------ */
.tplc { list-style: none; padding: 0; margin: 0; }
.tplc__card { display: flex; flex-direction: column; gap: .55rem; height: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); padding: 1.1rem 1.2rem; }
.tplc__head { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: .98rem; }
.tplc__ic { color: var(--brand); display: inline-flex; }
.tplc__d { margin: 0; font-size: .87rem; line-height: 1.55; color: var(--ink-2); }
.tplc__img { margin: 0; font-size: .74rem; color: var(--ink-3); background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .3rem .55rem; overflow-x: auto; white-space: nowrap; }
.tplc__tags { margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.tplc__card .btn { align-self: flex-start; margin-top: auto; }

/* --- Hub docs -------------------------------------------------------------------------- */
.doch { list-style: none; padding: 0; margin: 0; }
.doch__card { display: flex; flex-direction: column; gap: .5rem; height: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); padding: 1.1rem 1.2rem; transition: border-color .15s, box-shadow .15s; }
.doch__card:hover { text-decoration: none; border-color: var(--brand-line); box-shadow: var(--shadow-md); }
.doch__head { display: flex; align-items: center; gap: .55rem; font-size: .98rem; color: var(--ink); }
.doch__ic { color: var(--brand); display: inline-flex; }
.doch__d { font-size: .87rem; line-height: 1.55; color: var(--ink-2); }
.doch .prod__go { margin-top: auto; }

/* --- Layout docs (sidebar + prose) ------------------------------------------------------ */
.dlay { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 2.6rem; padding: 2.2rem 1.1rem 3rem; align-items: start; }
.dlay--3 { grid-template-columns: 230px minmax(0, 1fr) 250px; gap: 2.4rem; }
.dlay__rail { position: sticky; top: 1rem; display: grid; gap: 1.1rem; min-width: 0; }
.dhead { margin: 0 0 1.4rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.dhead__eyebrow { display: inline-flex; align-items: center; gap: .45rem; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--brand-deep); margin: 0 0 .5rem; }
.dhead__eyebrow span { color: var(--ink-3); }
.dhead h1 { margin: 0 0 .6rem; }
.dhead .prose__lead { margin: 0; }
.codeb__bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; background: var(--navy-2); padding: .3rem .5rem .3rem .9rem; }
.codeb__copy { display: inline-flex; align-items: center; gap: .3rem; font: inherit; font-size: .72rem; font-weight: 600; color: #c7d0ea; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: .22rem .55rem; cursor: pointer; }
.codeb__copy:hover { background: rgba(255,255,255,.12); color: #fff; }
.codeb__copy.is-done { color: #7fe0b5; border-color: rgba(127,224,181,.5); }
.dlay--ref { grid-template-columns: minmax(0, 1fr); max-width: 62rem; }
.dlay__nav { position: sticky; top: 1rem; font-size: .88rem; }
.dlay__brand { display: flex; align-items: center; gap: .45rem; font-weight: 700; margin: 0 0 1rem; }
.dlay__brand a { color: var(--ink); }
.dlay__h { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin: 1rem 0 .35rem; }
.dlay__links { list-style: none; margin: 0; padding: 0; }
.dlay__links a { display: block; padding: .3rem .55rem; border-radius: var(--radius-sm); color: var(--ink-2); border-left: 2px solid transparent; }
.dlay__links a:hover { color: var(--brand-deep); text-decoration: none; background: var(--bg-soft); }
.dlay__links a.is-on { color: var(--brand-deep); font-weight: 600; background: var(--brand-soft); border-left-color: var(--brand); }
.dlay__body { max-width: none; min-width: 0; }
.dlay__body--wide { max-width: none; }
.dlay__pn { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.dlay__pn-a { display: inline-flex; align-items: center; gap: .6rem; font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.dlay__pn-a small { display: block; font-size: .72rem; font-weight: 500; color: var(--ink-3); }
.dlay__pn-a:hover { color: var(--brand-deep); text-decoration: none; }
.dlay__pn-a--next { text-align: right; }

/* --- Prose (docs, guides, legal) --------------------------------------------------------- */
.prose { font-size: .96rem; line-height: 1.7; color: var(--ink-2); }
.prose h1 { font-size: clamp(1.55rem, 3vw, 2.1rem); line-height: 1.15; letter-spacing: -.02em; color: var(--ink); margin: .2rem 0 .9rem; }
.prose h2 { font-size: 1.25rem; letter-spacing: -.015em; color: var(--ink); margin: 2.1rem 0 .7rem; scroll-margin-top: 4.5rem; }
.prose h3 { font-size: 1.02rem; color: var(--ink); margin: 1.5rem 0 .5rem; scroll-margin-top: 4.5rem; }
.prose p { margin: 0 0 .9rem; }
.prose__lead { font-size: 1.05rem; line-height: 1.65; color: var(--ink-2); }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.3rem; display: grid; gap: .45rem; }
.prose li { line-height: 1.6; }
.prose table { width: 100%; border-collapse: collapse; font-size: .88rem; margin: 0 0 1.1rem; }
.prose table th, .prose table td { padding: .5rem .65rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose table thead th { background: var(--bg-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.prose strong { color: var(--ink); }
.prose .mono, .prose code { font-family: var(--mono); font-size: .85em; }
.prose code { background: var(--bg-deep); border-radius: 4px; padding: .1em .35em; }
.prose pre code { background: none; padding: 0; }
.codeb { margin: 0 0 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--navy); }
.codeb__l { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #96a2c0; }
.codeb pre { margin: 0; padding: .9rem 1rem; overflow-x: auto; }
.codeb code { font-family: var(--mono); font-size: .8rem; line-height: 1.65; color: #dbe2f7; background: none; padding: 0; white-space: pre; }
.notice { display: flex; gap: .7rem; align-items: flex-start; border: 1px solid var(--brand-line); border-radius: var(--radius); background: var(--brand-soft); padding: .85rem 1rem; margin: 0 0 1.1rem; }
.notice .ic { color: var(--brand-deep); flex: 0 0 auto; margin-top: .15rem; }
.notice p { margin: 0; font-size: .9rem; }

/* --- Layout guides ------------------------------------------------------------------------ */
.glay { display: grid; grid-template-columns: 230px minmax(0, 1fr) 270px; gap: 2.4rem; padding: 2.2rem 1.1rem 3rem; align-items: start; }
.glay__rail { position: sticky; top: 1rem; display: grid; gap: 1.1rem; min-width: 0; }
.glay__side { position: sticky; top: 1rem; display: grid; gap: 1.1rem; }
.glay__body { max-width: none; min-width: 0; }
.toc { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft); padding: 1rem 1.1rem; font-size: .86rem; }
.toc__h { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 0 0 .5rem; }
.toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.toc a { display: block; padding: .25rem .1rem; color: var(--ink-2); }
.toc a:hover { color: var(--brand-deep); text-decoration: none; }
.gmeta { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; font-size: .8rem; color: var(--ink-3); margin: 0 0 .8rem; }
.gmeta .ic { color: var(--brand); }

/* --- Hub guides ---------------------------------------------------------------------------- */
.garts { list-style: none; padding: 0; margin: 0; }
.gart { display: flex; gap: .9rem; align-items: flex-start; height: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); padding: 1.15rem 1.2rem; transition: border-color .15s, box-shadow .15s; }
.gart:hover { text-decoration: none; border-color: var(--brand-line); box-shadow: var(--shadow-md); }
.gart__ic { color: var(--brand); display: inline-flex; margin-top: .15rem; }
.gart__body { display: grid; gap: .35rem; }
.gart__t { font-size: 1rem; letter-spacing: -.01em; color: var(--ink); line-height: 1.35; }
.gart__d { font-size: .86rem; line-height: 1.55; color: var(--ink-2); }
.gart__meta { font-size: .76rem; color: var(--ink-3); }
.gart > .ic { margin-left: auto; align-self: center; color: var(--ink-3); flex: 0 0 auto; }

/* --- Status --------------------------------------------------------------------------------- */
.stt { width: 100%; border-collapse: collapse; font-size: .9rem; }
.stt td { padding: .6rem .75rem; border-bottom: 1px solid var(--line); }
.stt tr:last-child td { border-bottom: 0; }
.stt td:first-child { display: flex; align-items: center; gap: .55rem; }
.stt .flag { border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }
.stt__st { white-space: nowrap; color: var(--good); font-weight: 600; font-size: .84rem; }
.stt__st .dot { margin-right: .35rem; }
.stt__up { text-align: right; color: var(--ink-2); }
.stt__h { font-size: .95rem; margin: 0 0 .6rem; }
.sttcols { align-items: start; }
@media (max-width: 1250px) { .sttcols { grid-template-columns: 1fr; } }
.stt__bigdot { display: inline-block; width: .8em; height: .8em; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 5px var(--good-soft); margin-right: .35rem; vertical-align: baseline; }
.inc { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 1rem 1.2rem; margin-bottom: .9rem; }
.inc__head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 .45rem; font-size: .95rem; }
.inc__head time { margin-left: auto; font-size: .8rem; }
.inc__body { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--ink-2); }

/* --- Legal ----------------------------------------------------------------------------------- */
.llay { padding: 2.2rem 1.1rem 3rem; display: flex; justify-content: center; }
.llay__body { max-width: 46rem; }

/* --- Responsive des pages intérieures ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .gfiche__grid { grid-template-columns: 1fr; }
  .gstats { grid-template-columns: repeat(3, 1fr); }
  .gmodes { grid-template-columns: 1fr; }
  .gfiche__side { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .dlay, .dlay--3 { grid-template-columns: 1fr; gap: 1.4rem; }
  .dlay__rail { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .dlay__nav { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft); padding: .9rem 1.1rem; }
  .dlay__brand { grid-column: 1 / -1; margin-bottom: .2rem; }
  .glay { grid-template-columns: 1fr; gap: 1.4rem; }
  .glay__side, .glay__rail { position: static; }
  .glay__rail { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .gcards--4 { grid-template-columns: repeat(2, 1fr); }
  .toc { display: none; }
  .prodsplit { grid-template-columns: 1fr; gap: 1.6rem; }
}
@media (max-width: 900px) {
  .phero__in { flex-direction: column; gap: 1.4rem; }
  .grid--2 { grid-template-columns: 1fr; }
  .formula { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .phero { padding: 1.8rem 0 1.6rem; }
  .gmedia { flex-direction: column; align-items: flex-start; }
  .gstats { grid-template-columns: repeat(2, 1fr); }
  .sptab th { width: auto; }
  .sptab tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); padding: .2rem 0; }
  .sptab th, .sptab td { border-bottom: 0; }
  .inc__head time { margin-left: 0; }
}

/* --- Icônes officielles des templates (03/09/2026) ------------------------- */
.tlogo { width: 26px; height: 26px; display: inline-block; flex: 0 0 auto; border-radius: 6px; }
.tlogo--sm { width: 18px; height: 18px; border-radius: 5px; }
.tplc__logo { display: inline-flex; flex: 0 0 auto; }
.tplc__logo .tlogo { width: 30px; height: 30px; border-radius: 7px; box-shadow: 0 0 0 1px rgba(16,24,40,.06); }
.tplc__head { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: .98rem; }
.tplc__d { margin: 0; font-size: .87rem; line-height: 1.55; color: var(--ink-2); }
.tplc__tags { margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.tplc__img { margin: 0; display: flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--ink-3);
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .32rem .55rem; overflow-x: auto; white-space: nowrap; }
.tplc__img .ic { flex: 0 0 auto; color: var(--ink-3); }
.tplc__card .btn { align-self: flex-start; margin-top: auto; }
.pill--cuda { background: #eaf5e0; color: #3d6b1e; border: 1px solid #cfe6bb; }
.pill--feat { background: var(--bg-deep); color: var(--ink-2); }
.how__templates .how__tic { display: inline-flex; }
.how__templates .how__tic .tlogo { width: 20px; height: 20px; }

/* --- Guides v2 : hub à couvertures, article à héros illustré (03/09/2026) --- */
.gprog { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--brand), #7a2fd0); z-index: 300; pointer-events: none; transition: width .08s linear; }
.gfeat { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2rem; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-md); overflow: hidden; color: inherit; transition: border-color .15s, box-shadow .15s; }
.gfeat:hover { text-decoration: none; border-color: var(--brand-line); box-shadow: var(--shadow-lg); }
.gfeat__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-soft); }
.gfeat__img img { width: 100%; height: 100%; object-fit: cover; object-position: left center; display: block; }
.gfeat__body { padding: 1.6rem 2rem 1.6rem 0; display: grid; gap: .7rem; justify-items: start; }
.gfeat__body h2 { font-size: 1.5rem; letter-spacing: -.02em; margin: 0; line-height: 1.2; color: var(--ink); }
.gfeat__body p { margin: 0; color: var(--ink-2); line-height: 1.6; }
.gfeat__go { margin-top: .3rem; }
.gcards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.gcards--4 { grid-template-columns: repeat(4, 1fr); }
.gchips { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.2rem; }
button.famchip { background: #fff; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 600; }
.famchip.is-on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-deep); }
.gcard[hidden] { display: none; }
.gcard { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); overflow: hidden; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
.gcard:hover { text-decoration: none; border-color: var(--brand-line); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.gcard__img { display: block; aspect-ratio: 16 / 9; background: var(--bg-soft); overflow: hidden; border-bottom: 1px solid var(--line); }
.gcard__img img { width: 100%; height: 100%; object-fit: cover; object-position: left center; display: block; transition: transform .3s; }
.gcard:hover .gcard__img img { transform: scale(1.03); }
.gcard__body { padding: 1rem 1.1rem 1.1rem; display: grid; gap: .45rem; flex: 1; align-content: start; }
.gcard__cat { display: inline-flex; align-items: center; gap: .35rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-deep); }
.gcard__t { font-size: 1.02rem; line-height: 1.3; color: var(--ink); letter-spacing: -.01em; }
.gcard__d { font-size: .86rem; color: var(--ink-2); line-height: 1.55; }
.gcard__meta { display: flex; gap: .4rem; align-items: center; font-size: .76rem; color: var(--ink-3); margin-top: auto; padding-top: .35rem; }
.gcard__meta .ic { color: var(--ink-3); }
.ghero2 { background: linear-gradient(180deg, var(--bg-soft), var(--bg)); border-bottom: 1px solid var(--line); padding: 2rem 0 2.3rem; }
.ghero2__in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.6rem; align-items: center; }
.ghero2 h1 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.15; letter-spacing: -.022em; margin: .4rem 0 .8rem; }
.ghero2__lead { font-size: 1.04rem; line-height: 1.65; color: var(--ink-2); margin: 0 0 1rem; max-width: 56ch; }
.ghero2__meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .8rem; color: var(--ink-3); align-items: center; margin: 0; }
.ghero2__meta span { display: inline-flex; align-items: center; gap: .3rem; }
.ghero2__img { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-md); aspect-ratio: 16 / 9; background: #fff; }
.ghero2__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.toc a { border-left: 2px solid transparent; padding-left: .55rem; margin-left: -.65rem; transition: color .12s, border-color .12s; }
.toc a.is-on { color: var(--brand-deep); font-weight: 600; border-left-color: var(--brand); }
.gnext .sec__head { align-items: center; }
.glay__side .pitch { padding: .9rem 1rem; }
.glay__side .pitch p { font-size: .86rem; }
@media (max-width: 1080px) {
  .gcards { grid-template-columns: repeat(2, 1fr); }
  .ghero2__in { grid-template-columns: 1fr; gap: 1.4rem; }
}
@media (max-width: 720px) {
  .gcards, .gcards--4 { grid-template-columns: 1fr; }
  .gfeat { grid-template-columns: 1fr; gap: 0; }
  .gfeat__body { padding: 1.2rem; }
  .ghero2 { padding: 1.4rem 0 1.6rem; }
}

/* --- Status v2 : page autonome (03/09/2026) ---------------------------------- */
.sthero { padding: 2.2rem 0 2rem; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--good-soft), var(--bg)); }
.sthero--degraded { background: linear-gradient(180deg, #fff6e6, var(--bg)); }
.sthero--partial { background: linear-gradient(180deg, #fdecec, var(--bg)); }
.sthero__in { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.sthero h1 { display: flex; align-items: center; gap: .6rem; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.02em; margin: 0 0 .6rem; }
.sthero__dot { width: .8em; height: .8em; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 6px rgba(7,117,82,.14); flex: 0 0 auto; animation: stpulse 2.4s ease-in-out infinite; }
.sthero--degraded .sthero__dot { background: var(--amber); box-shadow: 0 0 0 6px rgba(180,83,9,.14); }
.sthero--partial .sthero__dot { background: #c81e28; box-shadow: 0 0 0 6px rgba(200,30,40,.14); }
@keyframes stpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.sthero__sub { margin: 0; font-size: .9rem; color: var(--ink-2); }
.stkpi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, auto); gap: .7rem; }
.stkpi li { display: grid; gap: .1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; padding: .6rem .9rem; min-width: 128px; }
.stkpi strong { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.stkpi span { font-size: .72rem; color: var(--ink-3); }
.sec--tight { padding-top: 1.2rem; padding-bottom: 0; }
.stb { display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 600; white-space: nowrap; border-radius: 99px; padding: .22rem .6rem .22rem .5rem; border: 1px solid transparent; }
.stb__dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.stb--ok { color: var(--good); background: var(--good-soft); border-color: #b5e3d0; }
.stb--degraded { color: var(--amber); background: #fff6e6; border-color: #f5d9a8; }
.stb--partial { color: #a3151d; background: #fdecec; border-color: #f2b8bc; }
.stb--maint { color: var(--brand-deep); background: var(--brand-soft); border-color: var(--brand-line); }
.stlegend { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; color: var(--ink-3); margin: 0; }
.stlegend .ub { width: .7rem; height: .7rem; margin-left: .5rem; }
.ubar { display: grid; grid-template-columns: repeat(90, 1fr); gap: 2px; width: 100%; min-width: 0; }
.ubar--sm { grid-template-columns: repeat(30, 1fr); width: 84px; flex: 0 0 auto; gap: 1px; }
.ub { display: block; height: 1.15rem; border-radius: 2px; background: var(--good); opacity: .85; }
.ubar--sm .ub { height: .8rem; }
.ub--degraded { background: #e59a2c; }
.ub--partial { background: #d6353f; }
.ub:hover { opacity: 1; outline: 2px solid var(--ink); outline-offset: 1px; }
.stcomp { display: grid; gap: .55rem; }
.stcomp__row { display: grid; grid-template-columns: 240px minmax(0, 1fr) 90px 190px; gap: 1.2rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem 1rem; }
.stcomp__n { display: grid; gap: .1rem; }
.stcomp__n strong { font-size: .95rem; }
.stcomp__n small { font-size: .74rem; color: var(--ink-3); }
.stcomp__up { text-align: right; font-size: .9rem; color: var(--ink-2); }
.stmet__c { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem .8rem; box-shadow: var(--shadow-sm); }
.stmet__k { display: flex; align-items: center; gap: .4rem; margin: 0 0 .3rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.stmet__k small { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-3); }
.stmet__k .ic { color: var(--brand); }
.stmet__v { margin: 0 0 .4rem; font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; }
.stmet__v small { font-size: .78rem; font-weight: 500; color: var(--ink-3); margin-left: .3rem; font-family: var(--font); }
.spark { display: block; width: 100%; height: 72px; }
.spark__a { fill: var(--brand-soft); }
.spark__l { fill: none; stroke: var(--brand); stroke-width: 2; vector-effect: non-scaling-stroke; }
.stmet__f { margin: .4rem 0 0; font-size: .74rem; color: var(--ink-3); }
.stt--reg th { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); text-align: left; padding: .45rem .75rem; border-bottom: 1px solid var(--line); }
.stt--reg td { vertical-align: middle; }
.stt--reg td { padding: .45rem .5rem; }
.stt--reg td:first-child { display: flex; align-items: center; gap: .45rem; white-space: nowrap; }
.stt--reg td:first-child small { display: block; margin: 0; font-size: .68rem; }
.stt--reg .stt__city { display: grid; line-height: 1.2; }
.stt--reg .stt__up { white-space: nowrap; font-size: .74rem; }
.stt--reg .stb { font-size: .7rem; padding: .16rem .5rem .16rem .42rem; }
.stt--reg td:last-child { display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
.stt__r--degraded td { background: #fffbf3; }
.stt__r--partial td { background: #fff5f5; }
.stt__r--maint td { background: var(--brand-soft); }
.inc--live { border-left: 4px solid var(--amber); }
.inc--live.inc--partial { border-left-color: #c81e28; }
.inc--maint { border-left: 4px solid var(--brand); }
.inc--hist { padding: 0; margin-bottom: .6rem; }
.inc--hist > summary { list-style: none; cursor: pointer; padding: .8rem 1.2rem; }
.inc--hist > summary::-webkit-details-marker { display: none; }
.inc--hist .ic--caret { margin-left: auto; color: var(--ink-3); transition: transform .15s; }
.inc--hist[open] .ic--caret { transform: rotate(180deg); }
.inc__meta { font-size: .78rem; color: var(--ink-3); }
.inc__when { margin: .2rem 0 .5rem; font-size: .84rem; color: var(--ink-2); }
.inc__tl { list-style: none; margin: 0; padding: .2rem 1.2rem 1rem; display: grid; gap: .4rem; }
.inc--live .inc__tl { padding: .4rem 0 0; }
.inc__tl li { display: flex; gap: .7rem; align-items: baseline; font-size: .88rem; line-height: 1.5; color: var(--ink-2); }
.inc__t { flex: 0 0 auto; color: var(--ink-3); font-size: .78rem; min-width: 3rem; }
.stmonth { font-size: 1rem; margin: 1.4rem 0 .6rem; color: var(--ink); }
@media (max-width: 1080px) {
  .stcomp__row { grid-template-columns: 1fr; gap: .5rem; }
  .stcomp__up { text-align: left; }
  .stkpi { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  /* Régions en liste de cartes : zéro débordement sur mobile */
  .stt--reg thead { display: none; }
  .stt--reg, .stt--reg tbody { display: block; width: 100%; }
  .stt--reg tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: .15rem .7rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--line); }
  .stt--reg tr:last-child { border-bottom: 0; }
  .stt--reg td { display: block; padding: 0; border: 0; background: none !important; }
  .stt--reg td:first-child { grid-column: 1 / 4; grid-row: 1; }
  .stt--reg td:nth-child(2) { grid-column: 4; grid-row: 1 / span 2; justify-self: end; }
  .stt--reg td:nth-child(3), .stt--reg td:nth-child(4) { grid-row: 2; font-size: .78rem; color: var(--ink-2); white-space: nowrap; }
  .stt--reg td:nth-child(3) { grid-column: 1; }
  .stt--reg td:nth-child(4) { grid-column: 2; }
  .stt--reg td:nth-child(3)::before { content: "GPUs "; color: var(--ink-3); }
  .stt--reg td:nth-child(4)::before { content: "latency "; color: var(--ink-3); }
  /* [!] Hors anglais, l'étiquette vient de la cellule (`data-k`, pages/status.php) :
         un texte écrit dans `content:` resterait anglais dans toutes les langues. */
  .stt--reg td[data-k]:nth-child(3)::before, .stt--reg td[data-k]:nth-child(4)::before { content: attr(data-k) " "; }
  .stt--reg td:last-child { display: none; }
  .ubar--sm { display: none; }
  .sthero__in { flex-direction: column; align-items: stretch; }
}

/* --- Legal v2 : héros à métadonnées, encadré langage clair, impression -------- */
.lmeta { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; min-width: 220px; }
.lmeta li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; padding: .5rem .8rem; font-size: .82rem; color: var(--ink-3); }
.lmeta li strong { color: var(--ink); font-size: .88rem; }
.lmeta li:last-child { border: 0; padding: 0; background: none; }
.lmeta .btn { width: 100%; justify-content: center; }
.tldr { border: 1px solid var(--brand-line); border-radius: var(--radius); background: linear-gradient(180deg, var(--brand-soft), #fff); padding: 1.1rem 1.3rem 1rem; margin: 0 0 1.8rem; }
.tldr__k { display: flex; align-items: center; gap: .45rem; margin: 0 0 .7rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-deep); }
.tldr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.tldr li { display: flex; gap: .55rem; align-items: flex-start; font-size: .93rem; line-height: 1.55; color: var(--ink); }
.tldr li .ic { flex: 0 0 auto; margin-top: .2rem; }
.tldr__f { margin: .8rem 0 0; font-size: .76rem; color: var(--ink-3); }
.legal h2 { padding-top: .4rem; border-top: 1px solid var(--line); margin-top: 2.2rem; }
.legal h2:first-of-type { border-top: 0; }
.legal__foot { font-size: .8rem; color: var(--ink-3); margin: 2rem 0 0; }
.dlay__links--rich a { padding: .45rem .6rem; }
.dlay__links--rich small { display: block; font-size: .72rem; color: var(--ink-3); font-weight: 400; line-height: 1.35; margin-top: .1rem; }
.dlay__links--rich a.is-on small { color: var(--brand-deep); opacity: .8; }
.lfacts { display: grid; gap: .5rem; }
.lfacts li { display: flex; align-items: center; gap: .5rem; font-size: .84rem; color: var(--ink-2); }
.lfacts li .ic { color: var(--brand); flex: 0 0 auto; }
@media print {
  .abar, .hdr, .drawer, .mnav, .cta, .ftr, .dlay__nav, .dlay__rail, .gprog, .phero__act, .lmeta li:last-child, .dlay__pn { display: none !important; }
  .dlay--3 { display: block; padding: 0; }
  .phero { border: 0; background: none; padding: 0 0 1rem; }
  .prose { font-size: 11pt; color: #000; }
  .tldr { background: none; border: 1px solid #999; }
  a { color: #000; text-decoration: none; }
}

/* =========================================================================
   Template & compare pages — SEO layer 03/09/2026 (calculator v2 plus bas)
   ========================================================================= */
.p-template .phero__aside .mono{word-break:break-all}
.p-compare .prods .mega__thumb{margin-right:8px;vertical-align:middle}

/* =========================================================================
   Cost calculator v2 (/calculator) — 03/09/2026 soir
   Configurateur blanc bordé à gauche, récapitulatif navy collant à droite.
   ========================================================================= */
.cx { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(320px, 1fr); gap: 28px; align-items: start; scroll-margin-top: 92px; }
.cx > * { min-width: 0; }
.cx__mbar { display: none; }
.cx__cfg { background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.cx__blk { padding: 20px 22px; border-bottom: 1px solid var(--line); }
.cx__blk:last-of-type { border-bottom: 0; }
.cx__lab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 14px; margin: 0 0 12px; flex-wrap: wrap; }
.cx__l { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.cx__n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0; }
.cx__hint { font-size: 12.5px; color: var(--ink-3); }
.cx__hint b { color: var(--ink-2); font-weight: 500; }
.cx__in { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 10px 12px; min-height: 44px; }
.cx__in:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.cx.has-js .cx__select { display: none; }
.cx:not(.has-js) .gpk, .cx:not(.has-js) .cx__jsonly, .cx__noscript:empty { display: none !important; }
.cx__noscript { margin: 0; padding: 14px 22px; font-size: .88rem; color: var(--ink-2); background: var(--bg-soft); border-top: 1px solid var(--line); }

/* Sélecteur GPU : bouton + panneau (recherche, filtres, liste) */
.gpk { position: relative; }
.gpk__btn { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 8px 12px 8px 8px; min-height: 58px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-sm); transition: border-color .15s, box-shadow .15s; }
.gpk__btn:hover { border-color: var(--ink-3); }
.gpk__btn[aria-expanded="true"], .gpk__btn:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; }
.gpk__img { width: 52px; height: 37px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: var(--bg-soft); flex: none; }
.gpk__txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.gpk__txt strong { font-size: 1.02rem; font-weight: 680; letter-spacing: -.01em; }
.gpk__txt small { font-size: .8rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gpk__chev { color: var(--ink-3); transition: rotate .18s; flex: none; }
.gpk__btn[aria-expanded="true"] .gpk__chev { rotate: 180deg; }
.gpk__bd { display: none; }
.gpk__pop { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.gpk__top { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px; }
.gpk__q { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--bg-soft); min-height: 42px; color: var(--ink); }
.gpk__q:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brand-soft); }
.gpk__close { display: none; width: 42px; height: 42px; flex: none; border-radius: var(--radius-sm); color: var(--ink-2); place-items: center; border: 1px solid var(--line-2); }
.gpk__chips { display: flex; gap: 6px; padding: 0 10px 10px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.gpk__chips::-webkit-scrollbar { display: none; }
.gpk__chip { flex: none; padding: 5px 11px; border-radius: 99px; border: 1px solid var(--line-2); font-size: .8rem; font-weight: 600; color: var(--ink-2); background: #fff; transition: background .15s, color .15s, border-color .15s; }
.gpk__chip:hover { border-color: var(--ink-3); color: var(--ink); }
.gpk__chip.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.gpk__list { display: flex; flex-direction: column; max-height: 344px; overflow-y: auto; overscroll-behavior: contain; padding: 6px; margin: 0; }
.gpk__list li { flex: none; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 7px; cursor: pointer; }
.gpk__list li.is-active { background: var(--brand-soft); }
.gpk__list li[aria-selected="true"] { box-shadow: inset 0 0 0 1px var(--brand-line); }
.gpk__list li[aria-selected="true"] .gpk__name { color: var(--brand-deep); }
.gpk__thumb { width: 38px; height: 27px; object-fit: cover; border-radius: 5px; border: 1px solid var(--line); background: var(--bg-soft); }
.gpk__name { font-weight: 640; font-size: .93rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gpk__name small { font-weight: 500; color: var(--ink-3); font-size: .78rem; margin-left: 7px; }
.gpk__price { display: grid; text-align: right; line-height: 1.15; }
.gpk__price b { font-weight: 500; color: var(--ink); font-size: .95rem; }
.gpk__price s { font-size: .72rem; color: var(--ink-3); }
.gpk__empty { margin: 0; padding: 18px 14px; font-size: .9rem; color: var(--ink-2); text-align: center; }
.cx__quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.cx__quick > span { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-right: 4px; }
.cx__qk { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 99px; font-size: .82rem; font-weight: 600; color: var(--ink-2); background: #fff; transition: border-color .15s, color .15s, background .15s; white-space: nowrap; }
.cx__qk small { font-size: .74rem; color: var(--ink-3); font-weight: 500; }
.cx__qk:hover { border-color: var(--brand); color: var(--brand-deep); }
.cx__qk.is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-deep); }
.cx__qk.is-on small { color: var(--brand-deep); }

/* Segments (radios natifs) */
.cx-seg { display: inline-flex; background: var(--bg-deep); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 3px; }
.cx-seg__o { position: relative; }
.cx-seg__o input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font-size: 16px; }
.cx-seg__o span { display: inline-flex; align-items: center; justify-content: center; min-width: 58px; padding: 8px 14px; border-radius: 5px; font-family: var(--mono); font-size: .92rem; font-weight: 500; color: var(--ink-2); border: 1px solid transparent; transition: background .15s, color .15s, box-shadow .15s; }
.cx-seg__o input:checked + span { background: #fff; color: var(--ink); border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.cx-seg__o input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Presets de planning */
.cx__presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.cx__pre { display: grid; gap: 1px; text-align: left; padding: 9px 11px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: #fff; font-size: .86rem; font-weight: 640; color: var(--ink); transition: border-color .15s, background .15s; min-width: 0; }
.cx__pre small { font-size: .72rem; font-weight: 500; color: var(--ink-3); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx__pre:hover { border-color: var(--ink-3); }
.cx__pre.is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-deep); }
.cx__pre.is-on small { color: var(--brand-deep); opacity: .8; }

/* Champs numériques + curseurs */
.cx__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.cx__fld { min-width: 0; }
.cx__flab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; }
.cx__flab label { font-size: .9rem; font-weight: 640; color: var(--ink); }
.cx__flab label small { font-weight: 500; color: var(--ink-3); margin-left: 4px; }
.cx__num { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: #fff; overflow: hidden; flex: none; }
.cx__num input { width: 5.6ch; min-width: 0; font: inherit; font-family: var(--mono); font-size: 16px; font-weight: 500; text-align: right; padding: 7px 4px 7px 10px; border: 0; background: transparent; color: var(--ink); -moz-appearance: textfield; appearance: textfield; }
.cx__num input::-webkit-outer-spin-button, .cx__num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cx__num input:focus { outline: none; }
.cx__num:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.cx__num em { font-style: normal; font-size: .78rem; font-weight: 600; color: var(--ink-3); padding: 0 10px 0 4px; }
.cx__num--wide input { width: 8ch; }
.cx__ticks { display: flex; justify-content: space-between; font-size: .68rem; color: var(--ink-3); font-family: var(--mono); margin-top: 2px; padding: 0 3px; }
.cx__fhint { margin: 6px 0 0; font-size: .78rem; color: var(--ink-3); line-height: 1.45; }
.cx__fhint b { color: var(--ink-2); font-weight: 500; }
.cx-range { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; margin: 2px 0 0; background: transparent; cursor: pointer; font-size: 16px; }
.cx-range:focus { outline: none; }
.cx-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--brand) var(--p, 0%), var(--line-2) var(--p, 0%)); }
.cx-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); box-shadow: var(--shadow-sm); transition: box-shadow .15s; }
.cx-range:hover::-webkit-slider-thumb, .cx-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px var(--brand-soft); }
.cx-range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line-2); }
.cx-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--brand); }
.cx-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); box-shadow: var(--shadow-sm); }
.cx-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 5px var(--brand-soft); }

/* Cartes de mode (radios natifs) */
.cx__mgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cx__mode { position: relative; display: grid; gap: 6px; align-content: start; padding: 12px 12px; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; min-width: 0; }
.cx__mode input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; font-size: 16px; }
.cx__mode:hover { border-color: var(--ink-3); }
.cx__mode.is-on, .cx__mode:has(input:checked) { border-color: var(--brand); background: linear-gradient(180deg, #fff, var(--brand-soft)); box-shadow: 0 0 0 1px var(--brand); }
.cx__mode:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.cx__mhead { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.cx__mhead strong { font-size: .95rem; font-weight: 680; white-space: nowrap; }
.cx__mhead .pill { margin-left: auto; }
.cx__radio { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-2); background: #fff; display: grid; place-items: center; transition: border-color .15s, background .15s; }
.cx__radio::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: 0; }
.cx__mode.is-on .cx__radio, .cx__mode:has(input:checked) .cx__radio { border-color: var(--brand); background: var(--brand); }
.cx__mode.is-on .cx__radio::after, .cx__mode:has(input:checked) .cx__radio::after { opacity: 1; }
.cx__mprice { font-size: 1.15rem; color: var(--ink); }
.cx__mprice b { font-weight: 500; }
.cx__mprice small { font-size: .72rem; color: var(--ink-3); margin-left: 4px; font-weight: 500; }
.cx__mdesc { font-size: .8rem; line-height: 1.45; color: var(--ink-2); }

/* Récapitulatif navy */
.cx__sum { position: sticky; top: 84px; scroll-margin-top: 80px; background: var(--navy); color: #fff; border-radius: var(--radius); padding: 22px 22px 20px; box-shadow: var(--shadow-md); }
.cx__sum.is-flash { animation: cxflash .9s ease-out; }
@keyframes cxflash { 0% { box-shadow: 0 0 0 0 rgba(53, 56, 196, 0), var(--shadow-md); } 30% { box-shadow: 0 0 0 6px rgba(53, 56, 196, .45), var(--shadow-md); } 100% { box-shadow: 0 0 0 0 rgba(53, 56, 196, 0), var(--shadow-md); } }
.cx__stop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.cx__k { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #aab4d4; }
.cx__per { display: inline-flex; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 6px; padding: 2px; }
.cx__per button { padding: 4px 10px; border-radius: 4px; font-size: .76rem; font-weight: 600; color: #c5cde6; white-space: nowrap; }
.cx__per button.is-on { background: #fff; color: var(--navy); }
.cx__big { margin: 0 0 14px; font-size: 42px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cx__big small { font-size: 14px; font-weight: 500; color: #aab4d4; }
.cx__bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, .1); margin: 0 0 12px; }
.cx__bar i { display: block; height: 100%; width: 0; transition: width .3s ease; }
.cx__bar--g, .cx__dot--g { background: #8b93ff; }
.cx__bar--d, .cx__dot--d { background: #38c8b0; }
.cx__bar--b, .cx__dot--b { background: #f5b942; }
.cx__lines { list-style: none; margin: 0 0 14px; padding: 0; }
.cx__lines li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; }
.cx__lines li > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.cx__lines small { color: #8e99bd; font-size: 12px; font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx__lines b { font-weight: 500; white-space: nowrap; }
.cx__dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.cx__minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.cx__minis > div { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; padding: 8px 10px; display: grid; gap: 2px; min-width: 0; }
.cx__minis span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #aab4d4; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx__minis span small { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: .8; margin-left: 3px; }
.cx__minis b { font-size: 15px; font-weight: 500; }
.cx__mkt { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; padding: 12px 12px 10px; margin: 0 0 14px; }
.cx__mk { margin: 0 0 8px; font-size: 12.5px; color: #c5cde6; }
.cx__cb { display: grid; gap: 4px; margin-bottom: 8px; }
.cx__cb em { display: flex; justify-content: space-between; gap: 8px; font-style: normal; font-size: 12px; color: #aab4d4; }
.cx__cb em b { color: #fff; font-weight: 500; font-family: var(--mono); }
.cx__cb i { display: block; height: 7px; border-radius: 4px; transition: width .3s ease; width: 100%; }
.cx__cb--m i { background: #5a6890; }
.cx__cb--u i { background: #34d399; }
.cx__save { margin: 6px 0 0; font-size: 14px; color: #dfe4f5; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cx__save strong { color: #8ef0c3; font-weight: 500; font-size: 15px; }
.cx__cta { width: 100%; padding: .78rem 1rem; font-size: .98rem; }
.cx__acts { display: flex; gap: 8px; margin-top: 8px; }
.cx__acts .btn { flex: 1; min-width: 0; }
.cx__acts .is-done { border-color: #34d399; color: #8ef0c3; }
.cx__note { margin: 12px 0 0; font-size: 12px; color: #aab4d4; line-height: 1.5; }

/* Scénarios */
.scn { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.scn__card { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 18px 18px 16px; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; min-width: 0; }
.scn__card:hover { border-color: var(--brand-line); box-shadow: var(--shadow-md); }
.scn__ic { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-soft); color: var(--brand); }
.scn__card h3 { font-size: 1.02rem; margin: 0; line-height: 1.3; }
.scn__chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.scn__chips span { font-size: .74rem; font-weight: 600; color: var(--ink-2); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 5px; padding: 2px 7px; white-space: nowrap; }
.scn__chips .scn__mode { color: var(--brand-deep); background: var(--brand-soft); border-color: var(--brand-line); }
.scn__tot { margin: auto 0 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; padding-top: 6px; }
.scn__tot b { font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.scn__tot small { font-size: .8rem; color: var(--ink-3); }
.scn__mkt { margin: 0; font-size: .78rem; color: var(--ink-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.scn__mkt s { color: var(--ink-3); }
.scn__card .btn { justify-content: center; }

/* Formule vivante + règles */
.cxf { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.cxf__card { background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow-sm); }
.cxf__k { margin: 0 0 8px; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--brand-deep); }
.cxf__k span { color: var(--ink-2); text-transform: none; letter-spacing: 0; font-weight: 600; }
.cxf__rows { margin: 0; display: grid; }
.cxf__row { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.cxf__row dt { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 640; color: var(--ink); margin: 0; }
.cxf__row dt .ic { color: var(--brand); }
.cxf__row dd { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .88rem; color: var(--ink-2); min-width: 0; }
.cxf__row dd span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cxf__row dd b { font-weight: 500; color: var(--ink); font-size: 1rem; white-space: nowrap; }
.cxf__row--t { border-bottom: 0; padding-top: 14px; }
.cxf__row--t dt { font-size: 1rem; }
.cxf__row--t dd b { font-size: 1.35rem; color: var(--brand-deep); font-weight: 600; }
.cxf__rule { margin: 12px 0 0; padding: 10px 12px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .84rem; color: var(--ink-2); line-height: 1.55; }
.cxf__rule .mono { color: var(--ink); }
.cxr { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cxr__i { display: flex; gap: 12px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 14px 16px; }
.cxr__ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-soft); color: var(--brand); }
.cxr__i h3 { font-size: .98rem; margin: 0 0 3px; }
.cxr__i p { margin: 0; font-size: .88rem; color: var(--ink-2); line-height: 1.5; }

@media (max-width: 1080px) {
  .cx { grid-template-columns: minmax(0, 1fr); }
  .cx__sum { position: static; }
  .scn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cxf { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cx { gap: 16px; }
  .cx__blk { padding: 16px 14px; }
  .cx__presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx__pair { grid-template-columns: 1fr; }
  .cx__mgrid { grid-template-columns: 1fr; }
  .cx__mode { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head price" "desc price"; column-gap: 12px; }
  .cx__mhead { grid-area: head; }
  .cx__mprice { grid-area: price; align-self: center; text-align: right; display: grid; line-height: 1.15; }
  .cx__mprice small { margin: 0; }
  .cx__mdesc { grid-area: desc; }
  .cx-seg { display: flex; }
  .cx-seg__o { flex: 1; }
  .cx-seg__o span { width: 100%; min-width: 0; }
  .cx__quick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -14px; padding-inline: 14px; }
  .cx__quick::-webkit-scrollbar { display: none; }
  .cx__sum { padding: 18px 16px 16px; }
  .cx__big { font-size: 36px; }
  .cx__minis { gap: 6px; }
  .cx__minis > div { padding: 7px 8px; }
  .cx__minis span small { display: none; }
  .cx__minis b { font-size: 14px; }
  .cx__acts { flex-direction: column; }
  .scn { grid-template-columns: 1fr; }
  .cxf__row { grid-template-columns: 1fr; gap: 4px; }
  .gpk__pop { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 260; border-radius: 14px 14px 0 0; max-height: 84vh; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -12px 40px rgba(12, 22, 49, .25); }
  .gpk__pop[hidden] { display: none; }
  .gpk__top { padding: 12px 12px 8px; flex: none; }
  .gpk__chips { flex: none; }
  .gpk__list { max-height: none; flex: 1; min-height: 0; }
  .cx__mbar:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: fixed; left: 0; right: 0; bottom: calc(var(--mnav-h, 58px) + var(--sab, 0px)); z-index: 205; padding: 8px 14px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-top: 1px solid var(--line-2); box-shadow: 0 -6px 20px rgba(16, 24, 40, .08); }
  html.kb-open .cx__mbar { display: none !important; }
  .cx__mbar__t { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
  .cx__mbar__k { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
  .cx__mbar__t b { font-size: 1.15rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
  .cx__mbar__t small { font-size: .72rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cx__mbar .btn { flex: none; }
  .gpk__close { display: grid; }
  .gpk__bd:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 259; background: rgba(12, 22, 49, .45); }
}

/* =========================================================================
   Accueil — « How to rent a GPU in 30 seconds » v2 (03/09/2026 soir)
   Étapes-onglets à gauche, cadre « console » à droite, démo vivante.
   ========================================================================= */
.hw__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(1.4rem, 3.2vw, 2.8rem); align-items: stretch; }
.hw__grid > * { min-width: 0; }
.hw__steps { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hw__step { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; width: 100%; text-align: left; padding: 16px 18px 18px; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; cursor: pointer; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.hw__step:hover { border-color: var(--ink-3); }
.hw__step.is-on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow-md); }
.hw__step:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hw__num { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--bg-deep); color: var(--ink-2); font-weight: 700; font-size: .95rem; transition: background .15s, color .15s; }
.hw__step.is-on .hw__num { background: var(--navy); color: #fff; }
.hw__body { display: block; min-width: 0; }
.hw__t { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.hw__t .ic { color: var(--brand); }
.hw__d { display: block; margin-top: 4px; font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
.hw__prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
.hw__prog i { display: block; height: 100%; width: 0; background: var(--brand); }
.hw__prog i.is-run { animation: hwprog var(--hw-dur, 7s) linear forwards; }
.hw.is-paused .hw__prog i { animation-play-state: paused; }
@keyframes hwprog { from { width: 0; } to { width: 100%; } }
.hw__mdesc { display: none; }
.hw__frame { height: 100%; min-height: 450px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.hw__bar { display: flex; align-items: center; gap: 7px; padding: 9px 14px; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.hw__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); flex: none; }
.hw__url { margin-left: 8px; flex: 1; display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--ink-3); background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; font-family: var(--mono); min-width: 0; overflow: hidden; white-space: nowrap; }
.hw__url .ic { width: 12px; height: 12px; color: var(--good); }
.hw__panel { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.hw:not(.has-js) .hw__panel + .hw__panel { border-top: 1px solid var(--line); }
.hw__panel[hidden] { display: none; }
.hw__pt { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; font-size: .8rem; color: var(--ink-3); flex-wrap: wrap; }
.hw__pt strong { color: var(--ink); font-size: .92rem; }
.hw__cap { margin: auto 0 0; padding-top: 10px; font-size: .78rem; color: var(--ink-3); line-height: 1.5; }

/* Étape 1 : recherche GPU */
.hwf { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.hwf a { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 99px; font-size: .78rem; font-weight: 600; color: var(--ink-2); text-decoration: none !important; transition: border-color .15s, color .15s; }
.hwf a:hover { border-color: var(--brand); color: var(--brand-deep); }
.hwf a.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.hwg { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.hwg li { display: grid; grid-template-columns: 44px minmax(0, 1.4fr) minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: .88rem; }
.hwg li:last-child { border-bottom: 0; }
.hwg li.is-on { background: var(--brand-soft); }
.hwg img { width: 44px; height: 31px; object-fit: cover; border-radius: 5px; border: 1px solid var(--line); background: var(--bg-soft); }
.hwg__n { display: grid; min-width: 0; }
.hwg__n a { font-weight: 680; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hwg__n small { color: var(--ink-3); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hwg__p { display: grid; text-align: right; line-height: 1.15; }
.hwg__p s { color: var(--ink-3); font-size: .74rem; }
.hwg__p b { font-weight: 500; color: var(--brand-deep); font-size: .95rem; white-space: nowrap; }
.hwg__p b small { font-size: .7rem; color: var(--ink-3); font-family: var(--font); }
.hwg .avail { font-size: .78rem; white-space: nowrap; }
.hwg__go.btn--tiny { padding: .32rem .7rem; }
.hwg li.is-on .hwg__go { background: var(--brand); color: #fff; border-color: var(--brand-deep); }

/* Étape 2 : templates + terminal */
.hwt { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hwt a { position: relative; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); text-decoration: none !important; color: var(--ink); background: #fff; min-width: 0; transition: border-color .15s; }
.hwt a:hover { border-color: var(--brand); }
.hwt li.is-on a { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand); }
.hwt .tlogo { width: 24px; height: 24px; }
.hwt a > span { display: grid; min-width: 0; }
.hwt strong { font-size: .86rem; font-weight: 660; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hwt small { font-size: .7rem; color: var(--ink-3); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hwt__chk { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; }
.hwt__chk .ic { width: 11px; height: 11px; }
.hw__term .term__body { min-height: 122px; font-size: .8rem; padding: .85rem 1rem; }
.tl { display: block; white-space: pre; }
.tl__plain::after { content: ''; display: inline-block; width: 8px; height: 1em; margin-left: 1px; vertical-align: -2px; background: #cbd5e1; animation: tlblink 1s steps(1) infinite; }
@keyframes tlblink { 50% { opacity: 0; } }

/* Étape 3 : instance + compteur */
.hwi { border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; background: #fff; }
.hwi__head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--bg-soft); font-size: .86rem; flex-wrap: wrap; }
.hwi__st { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--good); }
.hwi__st .dot { width: 8px; height: 8px; animation: hwpulse 1.6s infinite; }
.hwi.is-off .hwi__st { color: var(--ink-3); }
.hwi.is-off .hwi__st .dot { background: var(--ink-3); animation: none; }
@keyframes hwpulse { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); } 70% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } }
.hwi__id { font-family: var(--mono); color: var(--ink-2); }
.hwi__reg { margin-left: auto; color: var(--ink-3); font-size: .8rem; display: inline-flex; align-items: center; gap: 4px; }
.hwi__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.hwi__grid > div { padding: 10px 14px; border-right: 1px solid var(--line); min-width: 0; }
.hwi__grid > div:last-child { border-right: 0; }
.hwi__grid span { display: block; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 2px; }
.hwi__grid b { font-size: .9rem; font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.hwi__meter { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; background: var(--navy); color: #fff; }
.hwi__meter span { display: block; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #aab4d4; margin-bottom: 3px; }
.hwi__meter b { font-family: var(--mono); font-weight: 500; font-size: 1.55rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.hwi__meter small { display: block; font-size: .72rem; color: #aab4d4; margin-top: 2px; }
.hwi.is-off .hwi__meter b { color: #c5cde6; }
.hwi__act { display: flex; gap: 8px; padding: 12px 14px; flex-wrap: wrap; align-items: center; }
.hwi__act .btn--sm { padding: .45rem .85rem; font-size: .84rem; }
.hwi__stop { background: #fff; color: #b42318; border-color: #f2c1bb; }
.hwi__stop:hover { background: #fef3f2; border-color: #b42318; }
.hwi.is-off .hwi__stop { color: var(--good); border-color: #b5e3d0; }
.hwi.is-off .hwi__stop:hover { background: var(--good-soft); border-color: var(--good); }
.hwi__msg { margin: 0; font-size: .8rem; color: var(--ink-2); flex-basis: 100%; line-height: 1.5; }
.hw__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.6rem; flex-wrap: wrap; }
.hw__trust { display: flex; gap: 1.1rem; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: .86rem; color: var(--ink-2); }
.hw__trust li { display: inline-flex; align-items: center; gap: .4rem; }
.hw__trust .ic { color: var(--good); }

@media (max-width: 1024px) {
  .hw__grid { grid-template-columns: 1fr; }
  .hw__frame { min-height: 0; }
}
@media (max-width: 720px) {
  .hw__steps { flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: -18px; padding-inline: 18px; scroll-snap-type: x proximity; }
  .hw__steps::-webkit-scrollbar { display: none; }
  .hw__steps li { flex: 0 0 auto; }
  .hw__step { grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 10px 12px 12px; scroll-snap-align: start; }
  .hw__num { width: 26px; height: 26px; font-size: .8rem; }
  .hw__t { font-size: .9rem; white-space: nowrap; }
  .hw__d { display: none; }
  .hw.has-js .hw__mdesc { display: block; margin: 10px 0 12px; font-size: .9rem; color: var(--ink-2); line-height: 1.5; }
  .hw__panel { padding: 12px; }
  .hwg li { grid-template-columns: 38px minmax(0, 1fr) auto auto; gap: 8px; padding: 8px 10px; }
  .hwg img { width: 38px; height: 27px; }
  .hwg .avail { display: none; }
  .hwt { grid-template-columns: 1fr 1fr; }
  .hwi__grid { grid-template-columns: 1fr; }
  .hwi__grid > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .hwi__grid > div:last-child { border-bottom: 0; }
  .hwi__grid span { margin: 0; }
  .hwi__grid b { white-space: normal; text-align: right; font-size: .86rem; }
  .hwi__meter b { font-size: 1.3rem; }
  .hwi__act .btn { flex: 1; justify-content: center; }
  .hw__foot { flex-direction: column; align-items: stretch; }
}

/* ---- Alternatives (/alternatives) — 03/09/2026 ---- */
.altvs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:center;margin:0 0 1.1rem}
.altvs__card{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:12px 14px;min-width:0}
.altvs__card p{margin:0}
.altvs__n{font-weight:700;color:var(--ink)}
.altvs__d{font-size:.82rem;color:var(--ink-3);line-height:1.35}
.altvs__vs{font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.altlogo{width:48px;height:48px;flex:0 0 auto;border-radius:11px;object-fit:contain;background:#fff;border:1px solid var(--line);padding:4px;box-sizing:border-box}
.altlogo--sm{width:40px;height:40px;border-radius:9px;margin-right:8px;vertical-align:middle}
.prod--alt .prod__head{align-items:center}
.alt__line{margin-top:.35rem}
.p-alt .prose table small.dim{display:block;font-size:.76rem;margin-top:2px}
@media (max-width:640px){.altvs{grid-template-columns:1fr}.altvs__vs{text-align:center}}

/* ---- Accessibilité (Lighthouse, 03/09/2026) : liens distinguables dans les blocs de texte ---- */
.faq__intro p a, .sec__foot a, .prose p a, .prose li a, .prodsplit__lead a, .phero__sub a, .ticklist a,
.gfiche__fits a, .pitch p a, .ghero__note a, .ghero2__lead a, .prodsplit p a, .glay__body p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, var(--brand) 55%, transparent); }
.faq__intro p a:hover, .sec__foot a:hover, .prose p a:hover, .prose li a:hover { text-decoration-color: var(--brand); }

/* ==== perf/a11y seo4 (03/09/2026) : contraste AA, liens dans le texte, rendu differe des sections sous la ligne de flottaison ==== */
:root { --ink-3: #5f6879; }
.ftr__h, .ftr__pay-h, .ftr__pay-list small, .ftr__bottom { color: #8a97b8; }
.sec__head p a, .prose td a, .gput td a, td.tb-title a, .tb-cards td a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: .14em; }
.sec__head p a:hover, .prose td a:hover, .gput td a:hover, td.tb-title a:hover { text-decoration-color: currentColor; }
/* Jamais sur un bloc qui contient un element position:fixed (calculateur : gpk__pop, cx__mbar). */
/* content-visibility:auto (essai seo4) RETIRE le 03/09/2026 : axe/Lighthouse calcule une geometrie
   fausse dans les sections sautees (cellules empilees sur le bouton Deploy, pied de page sur la barre
   basse) -> faux echecs de contraste en mobile ; le gain TBT venait des reflows forces, corriges dans
   site.js/app-mobile.js (requestAnimationFrame). Ne pas reintroduire sans re-verifier l'accessibilite. */
/* Cibles tactiles (Lighthouse target-size) : nom du GPU dans les cartes mobiles >= 24 px de haut. */
@media (max-width: 720px) { .tb-cards td.tb-title a { display: inline-block; padding-block: .22rem; } }

/* CLS mobile (03/09/2026 soir) : avant app-mobile.js, #gpu-table fait 900 px et le conteneur ne le
   clippait plus sous 720 px -> Chrome elargit le viewport de mise en page a 830 px, la barre .mnav
   (fixed, inset-inline:0) est posee sur 830 px puis reposee sur 412 px quand les cartes arrivent :
   decalage 0.117 mesure par Lighthouse (LayoutShift old/new rects). Tant que les cartes ne sont pas
   appliquees, le conteneur defile horizontalement ; en cartes, overflow libre pour les ombres. */
/* Bisection (probe-bisect.js) : ni overflow:hidden sur html/body ni sur le conteneur n'empeche
   l'elargissement ; contain:paint sur le conteneur (hors mode cartes) le stoppe : innerWidth 830 -> 412. */
@media (max-width: 720px) { .tblwrap:not(.is-cards) { overflow-x: auto; contain: paint; } }


/* --- Fil d'Ariane v3 (04/09/2026) : INTÉGRÉ AU BANDEAU DE TITRE ---------------
   [!] La v2 vivait dans une bande blanche entre le filet de l'en-tête et le
       dégradé du hero : une ligne flottante qui n'appartenait à rien (retour du
       propriétaire : « mal intégré dans les pages »). Le fil prend désormais le
       fond du hero (--bg-soft, point de départ de son dégradé) et le hero perd sa
       marge haute quand le fil le précède : le fil devient sa première ligne,
       alignée sur l'eyebrow. Les pastilles au survol disparaissent (elles
       lisaient comme des boutons) au profit d'un soulignement. Sur les pages
       sans bandeau (docs), la barre reste blanche avec un filet. */
.crumbsbar { background: var(--bg-soft); }
.crumbsbar .crumbs { padding: .8rem 0 0; font-size: .8rem; }
.crumbsbar .crumbs__l { gap: .15rem; }
.crumbsbar .crumbs__a { padding: .15rem .3rem; border-radius: 5px; color: var(--ink-3); font-weight: 500; }
.crumbsbar .crumbs__i:first-child .crumbs__a { margin-left: -.3rem; }
.crumbsbar .crumbs__a:hover, .crumbsbar .crumbs__a:focus-visible { background: transparent; color: var(--brand); text-decoration: underline; text-underline-offset: .18em; }
.crumbsbar .crumbs__home .ic { width: 14px; height: 14px; color: var(--ink-3); }
.crumbsbar .crumbs__a:hover .ic, .crumbsbar .crumbs__a:focus-visible .ic { color: var(--brand); }
.crumbsbar .crumbs__sep { color: var(--line-2); width: 12px; height: 12px; margin: 0 .1rem; }
.crumbsbar .crumbs__cur { padding: .15rem .3rem; color: var(--ink-2); font-weight: 600; }
/* Le bandeau qui suit commence juste sous le fil. */
.crumbsbar + .phero, .crumbsbar + .sthero, .crumbsbar + meta + .sthero { padding-top: 1.15rem; }
.crumbsbar + .gprog + .ghero2 { padding-top: 1rem; }
/* Pages sans bandeau (documentation) : une ligne blanche, un filet. */
.crumbsbar:has(+ .gprog + .dlay), .crumbsbar:has(+ .dlay), .crumbsbar:last-child { background: var(--bg); border-bottom: 1px solid var(--line); }
.crumbsbar:has(+ .gprog + .dlay) .crumbs, .crumbsbar:has(+ .dlay) .crumbs, .crumbsbar:last-child .crumbs { padding-bottom: .7rem; }
@media (max-width: 720px) {
  .crumbsbar .crumbs { padding-top: .6rem; font-size: .78rem; }
  .crumbsbar + .phero, .crumbsbar + .sthero, .crumbsbar + meta + .sthero { padding-top: .9rem; }
  .crumbsbar + .gprog + .ghero2 { padding-top: .8rem; }
}

/* ==========================================================================
   Couche « recommandation IA » (GEO) — 04/09/2026
   .tldr     TL;DR en tête des guides
   .gloss    glossaire (terme / définition)
   [!] Ajouté EN FIN de fichier : une autre session peut éditer le haut.
   ========================================================================== */

.tldr {
  margin: 0 0 1.6rem; padding: 1rem 1.2rem;
  border: 1px solid var(--brand-line); border-left: 4px solid var(--brand);
  border-radius: var(--radius); background: var(--brand-soft);
}
.tldr__k {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem;
  font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--brand-deep);
}
.prose .tldr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .42rem; }
.prose .tldr li {
  position: relative; margin: 0; padding-left: 1.05rem;
  font-size: .93rem; line-height: 1.6; color: var(--ink);
}
.prose .tldr li::before {
  content: ""; position: absolute; left: 0; top: .58em; width: 5px; height: 5px;
  border-radius: 50%; background: var(--brand);
}

/* --- Glossaire ----------------------------------------------------------- */
.gloss { margin: 0; display: grid; gap: 0; }
.gloss__i {
  display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: 1.4rem; padding: .95rem 0; border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--hdr-h, 64px) + 12px);
}
.gloss__i:first-child { border-top: 0; }
.gloss__i:target { background: var(--brand-soft); border-radius: var(--radius-sm); padding-inline: .8rem; }
.gloss__t { margin: 0; font-weight: 650; color: var(--ink); font-size: .97rem; }
.gloss__t dfn { font-style: normal; }
.gloss__d { margin: 0; font-size: .93rem; line-height: 1.65; color: var(--ink-2); }
.gloss__l {
  display: inline-flex; align-items: center; gap: .25rem; margin-left: .35rem;
  font-size: .85rem; font-weight: 600; white-space: nowrap;
}


@media (max-width: 720px) {
  .gloss__i { grid-template-columns: minmax(0, 1fr); gap: .3rem; padding: .85rem 0; }
  .gloss__i:target { padding-inline: .6rem; }
}
/* Cible tactile du lien « More » du glossaire : 22 px de haut sinon (audit 390 px). */
.gloss__l { min-height: 24px; padding-block: .12rem; }

/* ==========================================================================
   /methodology — UX v2 (04/09/2026). Prefixe .mth* : aucune collision avec
   console.css ni app-mobile.css (verifie). La regle de prix devient une
   machine qu'on actionne (.mthx), un pipeline (.mthflow) et une preuve
   calculee (.mthaudit).
   ========================================================================== */

/* --- La machine a prix (aside du bandeau) -------------------------------- */
.mthx {
  width: 372px; max-width: 100%; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md);
  overflow: hidden;
}
.mthx__bar {
  display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem;
  background: var(--bg-soft); border-bottom: 1px solid var(--line);
}
.mthx__tag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--brand-deep);
}
.mthx__snap { margin-left: auto; font-size: .72rem; color: var(--ink-3); }
.mthx__pick { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .8rem .9rem .7rem; }
.mthx__lbl {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); flex: 0 0 100%;
}
.mthx__sel {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: .92rem; color: var(--ink);
  padding: .5rem .6rem; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: #fff; min-height: 40px;
}
.mthx__sel:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.mthx__go { flex: 0 0 auto; }

.mthx__calc { list-style: none; margin: 0; padding: 0 .9rem; }
.mthx__row {
  display: flex; align-items: baseline; gap: .7rem; justify-content: space-between;
  padding: .5rem 0; border-top: 1px dashed var(--line);
}
.mthx__row:first-child { border-top: 0; }
.mthx__k { font-size: .86rem; color: var(--ink-2); }
.mthx__k strong { color: var(--ink); font-weight: 650; }
.mthx__op { display: inline-block; width: 1em; color: var(--brand); font-weight: 700; }
.mthx__v { font-size: .95rem; color: var(--ink); white-space: nowrap; }
.mthx__row--floor { border-top-style: solid; }
.mthx__row--floor .mthx__v { font-weight: 650; }

.mthx__out {
  display: flex; flex-direction: column; gap: .25rem;
  margin: .55rem .9rem 0; padding: .8rem .95rem; border-radius: var(--radius-sm); background: var(--navy);
}
.mthx__out-k {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #93a3c9;
}
.mthx__out-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.mthx__out-v { font-size: 1.6rem; line-height: 1.1; color: #fff; font-weight: 600; }
.mthx__out .pill--drop { background: rgba(255, 255, 255, .14); color: #7ee0b4; }

.mthx__modes { list-style: none; margin: .55rem 0 0; padding: 0 .9rem; }
.mthx__modes li {
  display: flex; align-items: baseline; justify-content: space-between; gap: .7rem;
  padding: .4rem 0; border-top: 1px solid var(--line); font-size: .86rem; color: var(--ink-2);
}
.mthx__modes em { font-style: normal; color: var(--ink-3); font-size: .8rem; }
.mthx__modes b { color: var(--ink); font-size: .9rem; }
.mthx__foot {
  margin: .6rem 0 0; padding: .7rem .9rem .85rem; border-top: 1px solid var(--line);
  background: var(--bg-soft); font-size: .78rem; line-height: 1.55; color: var(--ink-3);
}
.mthx__foot a { display: inline-flex; align-items: center; gap: .25rem; font-weight: 600; white-space: nowrap; }

/* Relecture du calcul quand on change de carte : les lignes se rallument. */
@keyframes mthRun { 0% { background: var(--brand-soft); } 100% { background: transparent; } }
.mthx.is-run .mthx__row { animation: mthRun .55s ease-out both; }
.mthx.is-run .mthx__row:nth-child(2) { animation-delay: .1s; }
.mthx.is-run .mthx__row:nth-child(3) { animation-delay: .2s; }
@media (prefers-reduced-motion: reduce) { .mthx.is-run .mthx__row { animation: none; } }

/* --- Le pipeline en quatre etapes ---------------------------------------- */
.mthflow { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mthflow__step {
  position: relative; display: flex; flex-direction: column; gap: .4rem;
  padding: 1.05rem 1.1rem; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.mthflow__n {
  position: absolute; top: -11px; left: 1.1rem;
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--brand); color: #fff; font-size: .74rem; font-weight: 700;
}
.mthflow__k {
  display: flex; align-items: center; gap: .4rem; margin-top: .35rem;
  font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2);
}
.mthflow__k em { font-style: normal; color: var(--brand-deep); }
.mthflow__k .ic { color: var(--brand); }
.mthflow__v { font-size: 1.32rem; line-height: 1.15; color: var(--ink); font-weight: 600; }
.mthflow__d { font-size: .85rem; line-height: 1.55; color: var(--ink-2); }
.mthflow__d b { color: var(--ink); }
.mthflow__step--out { border-color: var(--brand-line); background: var(--brand-soft); }
.mthflow__step--out .mthflow__v { color: var(--brand-deep); }
@media (min-width: 901px) {
  .mthflow__step::after {
    content: ""; position: absolute; top: 50%; right: -.72rem; width: 9px; height: 9px;
    border-top: 2px solid var(--line-2); border-right: 2px solid var(--line-2);
    transform: translateY(-50%) rotate(45deg);
  }
  .mthflow__step:last-child::after { content: none; }
}
@media (max-width: 900px) { .mthflow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- L'audit calcule ------------------------------------------------------ */
.mthaudit {
  display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 1.2rem;
  align-items: stretch; margin: 0 0 1.4rem;
}
.mthaudit__verdict {
  display: flex; flex-direction: column; justify-content: center; gap: .15rem;
  padding: 1.2rem 1.3rem; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--bg-soft);
}
.mthaudit__verdict.is-ok { border-color: #b6e0cd; background: var(--good-soft); }
.mthaudit__verdict.is-bad { border-color: #e6c39a; background: #fdf3e6; }
.mthaudit__big { font-size: 3rem; line-height: 1; font-weight: 600; color: var(--ink); }
.mthaudit__verdict.is-ok .mthaudit__big { color: var(--good); }
.mthaudit__verdict.is-bad .mthaudit__big { color: var(--amber); }
.mthaudit__lbl {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2);
}
.mthaudit__d { margin-top: .45rem; font-size: .86rem; line-height: 1.55; color: var(--ink-2); }
.mthaudit__kpis {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
.mthaudit__kpis li {
  display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.15rem;
  border-left: 1px solid var(--line);
}
.mthaudit__kpis li:first-child { border-left: 0; }
.mthaudit__kpis b { font-size: 1.5rem; line-height: 1.1; color: var(--ink); font-weight: 600; }
.mthaudit__kpis span { font-size: .84rem; line-height: 1.5; color: var(--ink-2); }
.mthaudit__kpis small { font-size: .76rem; }
.mthok { display: inline-flex; align-items: center; gap: .3rem; font-size: .84rem; font-weight: 600; color: var(--good); white-space: nowrap; }
@media (max-width: 900px) {
  .mthaudit { grid-template-columns: minmax(0, 1fr); }
  .mthaudit__kpis { grid-template-columns: minmax(0, 1fr); }
  .mthaudit__kpis li { border-left: 0; border-top: 1px solid var(--line); }
  .mthaudit__kpis li:first-child { border-top: 0; }
}

/* --- Deux panneaux qui se font face -------------------------------------- */
.mthpair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; align-items: start; }
.mthpair__card {
  padding: 1.15rem 1.3rem; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.mthpair__h {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem;
  font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2);
}
.mthpair__h .ic { color: var(--ink-3); }
.mthpair__card .ticklist { margin-bottom: 0; }
.mthpair__card--fixed, .mthpair__card--yes { border-color: var(--brand-line); background: var(--brand-soft); }
.mthpair__card--fixed .mthpair__h, .mthpair__card--yes .mthpair__h { color: var(--brand-deep); }
.mthpair__card--fixed .mthpair__h .ic, .mthpair__card--yes .mthpair__h .ic { color: var(--brand); }
.mthpair__card--no .mthpair__h { color: var(--ink-2); }
@media (max-width: 900px) { .mthpair { grid-template-columns: minmax(0, 1fr); } }

/* --- Les trois verifications --------------------------------------------- */
.mthsteps { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mthstep {
  display: flex; gap: .85rem; padding: 1.15rem 1.2rem; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.mthstep__n {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft);
  border: 1px solid var(--brand-line); color: var(--brand-deep); font-weight: 700; font-size: .84rem;
}
.mthstep__b { min-width: 0; }
.mthstep__b h3 { margin: .1rem 0 .45rem; font-size: 1rem; }
.mthstep__b p { margin: 0 0 .6rem; font-size: .88rem; line-height: 1.6; color: var(--ink-2); }
.mthstep__cmd {
  margin: 0; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-soft); font-size: .78rem; color: var(--ink-2); overflow-x: auto; white-space: nowrap;
}
@media (max-width: 900px) { .mthsteps { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 720px) {
  .mthx { width: 100%; }
  .mthx__out-v { font-size: 1.45rem; }
  .mthflow { grid-template-columns: minmax(0, 1fr); gap: .85rem; }
  .mthflow__v { font-size: 1.2rem; }
  .mthaudit__big { font-size: 2.5rem; }
  .p-method .famchips { top: var(--hdr-h, 56px); }
}
/* Etape 3 du pipeline : la fraction jetee par l'arrondi, barree. */
.mthflow__cut { color: var(--ink-3); font-size: .72em; text-decoration: line-through; margin-right: .3rem; }
/* Bandeau /methodology : la preuve d'audit, dans la colonne de gauche. */
.mthproof {
  display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
  margin: 1.15rem 0 0; padding: .7rem .95rem; border: 1px solid #b6e0cd;
  border-radius: var(--radius); background: var(--good-soft);
  font-size: .88rem; line-height: 1.55; color: var(--ink-2); max-width: 44rem;
}
.mthproof > .ic { flex: 0 0 auto; color: var(--good); }
.mthproof b { color: var(--good); font-weight: 700; }
.mthproof .mono { color: var(--ink); font-size: .95em; }
.mthproof a { display: inline-flex; align-items: center; gap: .25rem; margin-left: auto; font-weight: 600; white-space: nowrap; }
@media (max-width: 720px) { .mthproof a { margin-left: 0; } }

/* ═══════════════════════════════════════════════════════════════════════════
   SÉLECTEUR DE LANGUE (couche multilingue, 04/09/2026 — intégré le 19/09/2026)
   ═══════════════════════════════════════════════════════════════════════════
   Deux formes, rendues par `loc_switcher()` (inc/i18n.php) :
     .lsw  un bouton globe + un panneau — en-tête (--head), pied navy (--foot),
           barre haute et pied de la console (--chead, --console : console.css) ;
     .lsi  une liste à plat — tiroir mobile (--drawer), menu mobile de la
           console (--snav : console.css).
   [!] `loc_switcher()` REND UNE CHAÎNE VIDE TANT QU'UNE SEULE LOCALE VIT : rien
       de ceci ne s'applique alors, et l'anglais ne porte pas un octet de plus.
   [!] LE PANNEAU DU PIED S'OUVRE VERS LE HAUT. Un menu qui descend sortirait du
       document et déclencherait un défilement vertical de la page au clic.
       Celui de l'en-tête descend, aligné à DROITE du bouton : le bouton vit au
       bord droit, un panneau aligné à gauche sortirait de l'écran.
   ═══════════════════════════════════════════════════════════════════════════ */
.lsw { position: relative; display: inline-flex; align-items: center; gap: .5rem; }

/* Le bouton parle la langue des boutons de navigation : pas de bordure, un
   fond au survol. Même hauteur que `.btn--sm`, son voisin dans l'en-tête. */
.lsw__btn {
  position: relative; display: inline-flex; align-items: center; gap: .36rem;
  padding: .48rem .55rem; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: none; color: var(--ink-2); font: inherit; font-size: .88rem; font-weight: 600;
  line-height: 1.2; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.lsw__btn:hover, .lsw.is-open .lsw__btn { background: var(--bg-deep); color: var(--ink); }
.lsw__globe { width: 17px; height: 17px; }
.lsw__cur { letter-spacing: .03em; }
.lsw__caret { width: 13px; height: 13px; margin-left: -.08rem; color: var(--ink-3); }
.lsw.is-open .lsw__caret { rotate: 180deg; }
/* La pastille de suggestion : sur le globe, comme une notification. Elle
   signale sans pousser le contenu. */
.lsw__dot {
  position: absolute; top: .36rem; left: 1.36rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 0 2px var(--bg);
}
.lsw__dot[hidden], .lsw__hint[hidden] { display: none; }

.lsw__panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 96;
  min-width: 14rem; padding: .5rem; border: 1px solid var(--line-2); border-radius: 12px;
  background: #fff; box-shadow: 0 2px 6px rgba(16, 24, 40, .06), 0 18px 44px rgba(16, 24, 40, .16);
  opacity: 0; visibility: hidden; translate: 0 6px;
  /* [!] `visibility` NE S'ANIME PAS À L'OUVERTURE. Animée, elle vaut encore
         `hidden` à l'instant où lang.js porte le focus dans le panneau : le
         focus est refusé sans un mot, et le clavier reste sur le bouton. Elle
         bascule donc tout de suite à l'ouverture, et après le fondu au retour. */
  transition: opacity .15s ease, translate .15s ease, visibility 0s linear .15s;
}
.lsw.is-open .lsw__panel { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
/* [!] SANS JAVASCRIPT, LE BOUTON N'OUVRIRAIT RIEN. Tant que lang.js n'a pas posé
       `lsw-js` sur <html>, le panneau suit le focus : les liens restent
       atteignables au clavier et au clic. Ensuite le script décide seul —
       sinon Échap ne fermerait rien tant que le bouton garde le focus. */
html:not(.lsw-js) .lsw:focus-within .lsw__panel { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.lsw__h {
  margin: .15rem 0 .3rem; padding: 0 .55rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
}
.lsw__list, .lsi__list { list-style: none; margin: 0; padding: 0; }
/* Onze langues un jour : c'est la LISTE qui défile, pas le panneau — un panneau
   qui défile rognerait sa propre flèche. */
.lsw__list { max-height: min(62vh, 26rem); overflow-y: auto; overscroll-behavior: contain; }
/* [!] `.lsw .lsw__opt`, DEUX CLASSES : dans le pied navy, `.ftr a` (une classe +
       un élément) l'emportait sur `.lsw__opt` seul et peignait les langues en
       bleu pâle sur le panneau BLANC — illisibles, sauf la langue courante. */
.lsw .lsw__opt {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .55rem; border-radius: var(--radius-sm);
  color: var(--ink-2); font-size: .92rem; font-weight: 550; line-height: 1.25;
  text-decoration: none !important; transition: background .12s, color .12s;
}
.lsw .lsw__opt:hover, .lsw .lsw__opt:focus-visible { background: var(--bg-soft); color: var(--ink); }
/* [!] L'ANNEAU DE FOCUS SE DESSINE À L'INTÉRIEUR DE LA CELLULE. Dessiné dehors
       (le défaut du site, `outline-offset: 2px`), la liste défilante le rogne
       — `overflow-y: auto` découpe au ras de la boîte, et le repère du clavier
       disparaissait purement et simplement. */
.lsw .lsw__opt:focus-visible, .lsi__opt:focus-visible { outline-offset: -2px; }
.lsw__native { flex: 1 1 auto; white-space: nowrap; }   /* le point de suggestion ne passe pas à la ligne */
.lsw__iso { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); }
.lsw__tick { flex: 0 0 auto; opacity: 0; color: var(--brand); }
.lsw .lsw__opt.is-on { background: var(--brand-soft); color: var(--brand-deep); font-weight: 650; }
.lsw .lsw__opt.is-on .lsw__iso { color: var(--brand); }
.lsw__opt.is-on .lsw__tick, .lsi__opt.is-on .lsw__tick { opacity: 1; }
/* La langue du navigateur, quand ce n'est pas celle de la page : un point,
   pas un mot — aucun texte à traduire, aucune place prise. */
.lsw__opt.is-hint .lsw__native::after, .lsi__opt.is-hint .lsw__native::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-left: .45rem;
  border-radius: 50%; background: var(--brand); vertical-align: .08em;
}

/* La suggestion, À CÔTÉ du bouton — jamais un bandeau en haut de page : un
   bandeau pousse le contenu vers le bas après coup, le lecteur perd sa ligne,
   et la mesure de décalage cumulé (CLS) s'en ressent sur toutes les pages.
   Elle s'insère À GAUCHE du bouton, dans le vide entre la navigation et les
   actions : rien ne bouge quand elle apparaît. */
.lsw__hint {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: .2rem .25rem .2rem .65rem; border: 1px solid var(--brand-line);
  border-radius: 99px; background: var(--brand-soft); font-size: .82rem; line-height: 1.2;
  white-space: nowrap;
}
.lsw__hint-go { color: var(--brand-deep); font-weight: 650; text-decoration: none !important; }
.lsw__hint-go:hover { text-decoration: underline !important; }
/* [!] 26 px, PAS 22 : sous 24 px, la cible tombe sous le minimum exigé
       (WCAG 2.2 AA, critère 2.5.8) — et se rate au doigt comme à la souris. */
.lsw__hint-x {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: none; color: var(--ink-3); cursor: pointer;
}
.lsw__hint-x .ic--sm { width: 12px; height: 12px; }
.lsw__hint-x:hover { background: rgba(16, 24, 40, .08); color: var(--ink); }

/* --- en-tête ---------------------------------------------------------------- */
/* La petite flèche du panneau, comme celle des mega-menus. */
.lsw--head .lsw__panel::before, .lsw--chead .lsw__panel::before {
  content: ""; position: absolute; top: -7px; right: 1.55rem; width: 12px; height: 12px;
  background: #fff; border-left: 1px solid var(--line-2); border-top: 1px solid var(--line-2);
  rotate: 45deg; border-radius: 2px 0 0 0;
}
/* Pont invisible bouton → panneau : traverser l'espace ne perd pas le survol. */
.lsw--head.is-open .lsw__panel::after { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
/* [!] PAS DE PUCE TANT QUE LE MENU EST REPLIÉ DANS LE BURGER (≤ 1160 px) : le
       bandeau, le logo et deux boutons tiennent déjà toute la ligne. Au-dessus,
       ce n'est PAS un seuil de largeur qui décide mais une MESURE (lang.js) :
       la place dépend de la langue, et un seuil juste en français est faux en
       russe. La pastille du globe, elle, reste à toutes les largeurs. */
@media (max-width: 1160px) { .lsw--head .lsw__hint { display: none; } }
/* [!] ENTRE 1161 ET 1279 PX, L'EN-TÊTE EST DÉJÀ PLEIN EN RUSSE : sept entrées de
       menu, le logo, le bouton d'action — il restait 11 px, et le globe en
       demande 90. On reprend la place là où elle ne se voit pas : l'air entre
       les entrées, le chevron du sélecteur.
   [!] SUR LES PAGES TRADUITES SEULEMENT (`html:not([lang="en"])`) : l'anglais
       tient large à ces largeurs, et son rendu ne doit pas changer d'un pixel. */
/* Jusqu'à 1339 px, et pas 1279 : c'est là que `.wrap` atteint son plafond de
   1340 px. Arrêtée à 1279, la compression laissait le russe sans place pour la
   puce entre 1280 et 1339 px — elle ne s'y affichait jamais. */
@media (min-width: 1161px) and (max-width: 1339px) {
  html:not([lang="en"]) .hdr__in { gap: .7rem; }
  html:not([lang="en"]) .nav__btn, html:not([lang="en"]) .nav__link { padding-inline: .5rem; }
  html:not([lang="en"]) .hdr__cta { gap: .45rem; }
  html:not([lang="en"]) .lsw--head .lsw__caret { display: none; }
  html:not([lang="en"]) .lsw--head .lsw__btn { padding-inline: .42rem; }
}
@media (max-width: 560px) {
  .lsw--head .lsw__caret { display: none; }
  .lsw--head .lsw__btn { padding-inline: .5rem; }
  .lsw--head .lsw__panel { min-width: min(15rem, calc(100vw - 2rem)); }
}
/* Écrans tactiles : une cible de 44 px, comme le burger voisin. */
@media (hover: none) and (pointer: coarse) {
  .lsw__btn { min-height: 42px; }
  .lsw .lsw__opt { padding-block: .68rem; }
}

/* --- pied navy de la vitrine : le bouton s'inverse, le panneau monte --------- */
.lsw--foot { margin-top: 1.1rem; }
.lsw--foot .lsw__panel { top: auto; bottom: calc(100% + .55rem); right: auto; left: 0; translate: 0 -6px; }
.lsw--foot.is-open .lsw__panel, html:not(.lsw-js) .lsw--foot:focus-within .lsw__panel { translate: 0 0; }
.ftr .lsw__btn { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); color: #cbd5e8; }
.ftr .lsw__btn:hover, .ftr .lsw.is-open .lsw__btn { border-color: rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .09); color: #fff; }
.ftr .lsw__caret { color: #8b99bd; }
.ftr .lsw__dot { box-shadow: 0 0 0 2px var(--navy); background: #8b9cff; }
.ftr .lsw.is-open .lsw__caret { rotate: 0deg; }
.ftr .lsw__caret { rotate: 180deg; }          /* le panneau monte : le chevron aussi */
/* [!] LE MOUVEMENT RÉDUIT N'ANNULE QUE LES DURÉES, PAS LES DÉLAIS. La remise à
       plat globale (`*{transition-duration:.01ms}`) laisse intact le `.15s` de
       `visibility 0s linear .15s` : à la fermeture, le panneau tombait à
       l'opacité 0 en 0,01 ms mais restait `visible` 150 ms de plus — invisible
       et pourtant cliquable. À l'ouverture elle fait l'inverse : elle DONNE une
       durée à `visibility`, qui valait donc encore `hidden` à l'instant où
       lang.js porte le focus dans le panneau. Les descendants aussi : sans
       `transition` déclarée, ils héritent de `all`. */
@media (prefers-reduced-motion: reduce) {
  .lsw__panel, .lsw__panel * { transition: none; }
}

/* --- tiroir mobile : la liste à plat ---------------------------------------- */
.lsi__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.2rem, 1fr)); gap: .5rem; }
.lsi__opt {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  min-height: 46px; padding: .55rem .8rem; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--bg-soft); color: var(--ink); font-size: .95rem; font-weight: 600;
  text-decoration: none !important;
}
.lsi__opt:hover { border-color: var(--brand-line); }
.lsi__opt.is-on { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-deep); }
.lsi--drawer { margin-top: .4rem; }
.lsi--drawer .lsi__h { margin-bottom: .55rem; }