/* ============================================================================
   CELLTIS — site.css · site public
   ----------------------------------------------------------------------------
   Direction artistique « Fiche technique ».
   Le site parle comme une documentation d'ingénieur : papier froid, encre
   graphite, filets fins, données en chasse fixe, et une seule couleur
   d'accent, le vermillon « signal », réservé à ce qui doit attirer l'œil.
   Les visuels sont des planches techniques des vrais composants
   (tpl/components/planche-*.htm), jamais des photos d'illustration. Fonds :
   papier millimétré sous les héros, papier pointé pour les bandes teintées,
   salle machine sombre, et un aplat vermillon pour le dernier appel.

   Typographies : Archivo (axe de largeur 87,5–125, en écho aux capitales
   larges du logo) et IBM Plex Mono pour les mesures.
   Angles : vifs partout (rayon 0). Aucune ombre portée : des filets.
   Thème : clair par défaut, sombre selon le système ou le bouton du pied de
   page (data-theme sur <html>).

   Ce fichier ne sert QUE le gabarit tpl/site.htm. L'espace client garde
   style.css et composants.css : les deux ne sont jamais chargés ensemble.
   ========================================================================== */

/* -------------------------------------------------------------- Jetons */

:root {
    --bg:        #eff0ec;
    --bg-2:      #e5e7e1;
    --surface:   #f7f8f5;
    --ink:       #121416;
    --ink-2:     #33383d;
    --muted:     #5c636a;
    --line:      rgba(18, 20, 22, .13);
    --line-2:    rgba(18, 20, 22, .30);
    --signal:    #e3461b;
    --signal-ink:#b4340d;
    --ok:        #2f7d52;
    --bad:       #b3261e;
    --fill-soft: rgba(18, 20, 22, .045);

    /* Fonds : papier millimétré (héros), papier pointé (bandes teintées),
       et les trois tons des faces pleines des planches en perspective. */
    --grid-1:    rgba(18, 20, 22, .04);
    --grid-2:    rgba(18, 20, 22, .085);
    --dot:       rgba(18, 20, 22, .16);
    --glow:      rgba(227, 70, 27, .13);
    --plate-t:   #f8f9f6;
    --plate-l:   #e2e4de;
    --plate-r:   #d3d6cf;

    --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    --gutter: clamp(16px, 4.2vw, 56px);
    --maxw: 1360px;
    --sec: clamp(4rem, 2.2rem + 5vw, 7.5rem);
    --hd: 68px;

    --ease: cubic-bezier(.2, .7, .1, 1);
    --ease-io: cubic-bezier(.65, 0, .35, 1);

    --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h12M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
    --plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
    --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");
    --cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:        #0e1012;
        --bg-2:      #15181b;
        --surface:   #1a1d21;
        --ink:       #eceeea;
        --ink-2:     #c4c8c8;
        --muted:     #959ba1;
        --line:      rgba(236, 238, 234, .12);
        --line-2:    rgba(236, 238, 234, .28);
        --signal:    #ff6a3d;
        --signal-ink:#ff8c66;
        --ok:        #5cc58a;
        --bad:       #ff7a70;
        --fill-soft: rgba(236, 238, 234, .05);
        --grid-1:    rgba(236, 238, 234, .03);
        --grid-2:    rgba(236, 238, 234, .065);
        --dot:       rgba(236, 238, 234, .14);
        --glow:      rgba(255, 106, 61, .16);
        --plate-t:   #1e2226;
        --plate-l:   #16191c;
        --plate-r:   #101215;
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --bg:        #0e1012;
    --bg-2:      #15181b;
    --surface:   #1a1d21;
    --ink:       #eceeea;
    --ink-2:     #c4c8c8;
    --muted:     #959ba1;
    --line:      rgba(236, 238, 234, .12);
    --line-2:    rgba(236, 238, 234, .28);
    --signal:    #ff6a3d;
    --signal-ink:#ff8c66;
    --ok:        #5cc58a;
    --bad:       #ff7a70;
    --fill-soft: rgba(236, 238, 234, .05);
    --grid-1:    rgba(236, 238, 234, .03);
    --grid-2:    rgba(236, 238, 234, .065);
    --dot:       rgba(236, 238, 234, .14);
    --glow:      rgba(255, 106, 61, .16);
    --plate-t:   #1e2226;
    --plate-l:   #16191c;
    --plate-r:   #101215;
    color-scheme: dark;
}

/* Bande « salle machine » : l'inversion volontaire de la page. Plus profonde
   que le thème sombre, pour rester une bande distincte quand tout est sombre. */
.band-dark {
    --bg:        #08090b;
    --bg-2:      #121417;
    --surface:   #16191c;
    --ink:       #eceeea;
    --ink-2:     #c4c8c8;
    --muted:     #979da3;
    --line:      rgba(236, 238, 234, .12);
    --line-2:    rgba(236, 238, 234, .28);
    --signal:    #ff6a3d;
    --signal-ink:#ff8c66;
    --fill-soft: rgba(236, 238, 234, .05);
    --grid-1:    rgba(236, 238, 234, .028);
    --grid-2:    rgba(236, 238, 234, .06);
    --glow:      rgba(255, 106, 61, .14);
    --plate-t:   #1b1f23;
    --plate-l:   #131619;
    --plate-r:   #0d0f11;
    background: var(--bg);
    color: var(--ink);
    color-scheme: dark;
}

/* -------------------------------------------------------------- Base */

*, *::before, *::after { box-sizing: border-box; }

/* L'attribut hidden l'emporte toujours sur un display posé par une classe (.field, .reco…). */
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--hd) + 24px);
    background: var(--bg);
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.6;
    font-variation-settings: "wdth" 100;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern", "liga";
}

/* Grain très léger : donne une matière au papier sans peser sur le défilement
   (couche fixe, jamais repeinte pendant le scroll). */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main { flex: 1 0 auto; outline: none; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 500; text-wrap: balance; }
p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }
strong, b { font-weight: 600; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

::selection { background: var(--signal); color: #111315; }

:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
}

.skip {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 100;
    padding: 10px 16px;
    background: var(--ink);
    color: var(--bg);
    font-weight: 500;
}
.skip:focus { top: 12px; }

.sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* -------------------------------------------------------------- Mise en page */

.wrap {
    width: 100%;
    max-width: calc(var(--maxw) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.sec { padding-block: var(--sec); }
.sec-tight { padding-block: calc(var(--sec) * .55); }
.sec + .sec.rule { border-top: 1px solid var(--line); }
.rule-top { border-top: 1px solid var(--line); }

.g12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(16px, 2.4vw, 40px);
}

/* -------------------------------------------------------------- Typographie */

.d1, .d2, .d3, .d4 {
    font-family: var(--sans);
    font-weight: 500;
    color: var(--ink);
}

.d1 {
    font-size: clamp(2.5rem, 1.3rem + 4.6vw, 5.6rem);
    line-height: .98;
    letter-spacing: -.028em;
    font-variation-settings: "wdth" 112;
}

.d2 {
    font-size: clamp(2rem, 1.25rem + 2.7vw, 3.75rem);
    line-height: 1.02;
    letter-spacing: -.022em;
    font-variation-settings: "wdth" 110;
}

.d3 {
    font-size: clamp(1.35rem, 1.08rem + .9vw, 1.9rem);
    line-height: 1.12;
    letter-spacing: -.012em;
    font-variation-settings: "wdth" 106;
}

.d4 {
    font-size: 1.1875rem;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -.004em;
    font-variation-settings: "wdth" 104;
}

.d1 em, .d2 em, .d3 em {
    font-style: normal;
    color: var(--muted);
}

.lead {
    font-size: clamp(1.125rem, 1.02rem + .35vw, 1.3125rem);
    line-height: 1.5;
    color: var(--ink-2);
    max-width: 38em;
}

.prose { max-width: 40em; color: var(--ink-2); }
.prose p + p { margin-top: 1em; }
.prose strong { color: var(--ink); }
.prose a { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .2em; }
.prose a:hover { text-decoration-color: var(--signal); }

.small { font-size: .9375rem; }
.muted { color: var(--muted); }

/* Étiquette en chasse fixe : sert aux mesures et, avec parcimonie, à situer une section. */
.label {
    font-family: var(--mono);
    font-size: .75rem;
    line-height: 1.3;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.mono {
    font-family: var(--mono);
    font-size: .875em;
    letter-spacing: .01em;
}

.num {
    font-family: var(--sans);
    font-variation-settings: "wdth" 118;
    font-weight: 400;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.signal { color: var(--signal-ink); }

/* -------------------------------------------------------------- Boutons et liens */

.btn {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    --btn-bd: var(--ink);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .75em;
    min-height: 48px;
    padding: .8em 1.3em;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-bd);
    border-radius: 0;
    font-family: var(--sans);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .005em;
    font-variation-settings: "wdth" 108;
    white-space: nowrap;
    transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .15s var(--ease);
}

.btn::after {
    content: "";
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: var(--arrow) center / contain no-repeat;
    mask: var(--arrow) center / contain no-repeat;
    transition: transform .3s var(--ease);
}

.btn.no-arrow::after { display: none; }
.btn:hover::after { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

.btn-ink { --btn-bg: var(--ink); --btn-fg: var(--bg); --btn-bd: var(--ink); }
.btn-ink:hover { --btn-bg: var(--signal); --btn-fg: #111315; --btn-bd: var(--signal); }

.btn-line:hover { --btn-bg: var(--ink); --btn-fg: var(--bg); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

.btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 14px;
    align-items: center;
}

.lnk {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    font-weight: 500;
    color: var(--ink);
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 2px;
    transition: background-size .35s var(--ease), color .2s;
}

.lnk::after {
    content: "";
    flex: none;
    width: 13px;
    height: 13px;
    background: var(--signal);
    -webkit-mask: var(--arrow) center / contain no-repeat;
    mask: var(--arrow) center / contain no-repeat;
    transition: transform .3s var(--ease);
}

.lnk:hover { background-size: 100% 1px; }
.lnk:hover::after { transform: translateX(3px); }

/* -------------------------------------------------------------- En-tête */

.hd {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--hd);
    background: var(--bg);
    border-bottom: 1px solid transparent;
    transition: border-color .3s var(--ease), background-color .3s var(--ease);
}

.hd[data-scrolled] {
    border-bottom-color: var(--line);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
}

.hd-in {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 28px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex: none;
    color: var(--ink);
}

.brand-mark {
    width: 34px;
    aspect-ratio: 958 / 570;
    background: currentColor;
    -webkit-mask: url("/assets/logos/celltislogo_blanc.png") center / contain no-repeat;
    mask: url("/assets/logos/celltislogo_blanc.png") center / contain no-repeat;
}

.brand-word {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-variation-settings: "wdth" 125;
}

.nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-width: 0;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 12px;
}

.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: var(--hd);
    padding: 0 12px;
    background: none;
    border: 0;
    font-size: .9375rem;
    font-weight: 450;
    color: var(--ink-2);
    font-variation-settings: "wdth" 104;
    transition: color .2s;
}

.nav-link::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 18px;
    height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--ease);
}

.nav-link:hover, .nav-link[aria-current], .nav-link[aria-expanded="true"] { color: var(--ink); }
.nav-link:hover::before, .nav-link[aria-current]::before { transform: scaleX(1); }
.nav-link[aria-current]::before { background: var(--signal); }

.nav-toggle::after {
    content: "";
    width: 9px;
    height: 9px;
    background: currentColor;
    -webkit-mask: var(--plus) center / contain no-repeat;
    mask: var(--plus) center / contain no-repeat;
    transition: transform .3s var(--ease);
}
.nav-toggle[aria-expanded="true"]::after { transform: rotate(45deg); }

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

.nav-actions .btn { min-height: 42px; padding: .7em 1.1em; font-size: .875rem; }
.nav-account { color: var(--ink-2); }

/* Panneau « Offres » */
.nav-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .25s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
}

.has-panel[data-open] .nav-panel {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .25s var(--ease), transform .3s var(--ease), visibility 0s;
}

.panel-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 48px;
    padding-block: 28px 32px;
}

.panel-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-left: 1px solid var(--line);
}

.panel-link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: 6px 20px 10px;
    border-right: 1px solid var(--line);
    transition: background-color .2s;
}

.panel-link:hover { background: var(--fill-soft); }
.panel-name { font-weight: 600; font-variation-settings: "wdth" 108; color: var(--ink); }
.panel-desc { font-size: .875rem; line-height: 1.4; color: var(--ink-2); }
.panel-meta { margin-top: auto; padding-top: 12px; font-family: var(--mono); font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

.panel-aside { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.panel-aside p { font-size: .9375rem; color: var(--ink-2); }

.menu-btn {
    display: none;
    margin-left: auto;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 4px 0 12px;
    background: none;
    border: 0;
    font-size: .9375rem;
    font-weight: 500;
}

.menu-lines {
    position: relative;
    width: 20px;
    height: 10px;
}
.menu-lines::before, .menu-lines::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1.5px;
    background: currentColor;
    transition: transform .3s var(--ease), top .3s var(--ease);
}
.menu-lines::before { top: 0; }
.menu-lines::after { top: 8.5px; }
.hd[data-open] .menu-lines::before { top: 4.25px; transform: rotate(45deg); }
.hd[data-open] .menu-lines::after { top: 4.25px; transform: rotate(-45deg); }

/* Barre de progression pendant une navigation interne */
.hd-progress {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 100%;
    background: var(--signal);
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
}
html[data-loading] .hd-progress {
    opacity: 1;
    transform: scaleX(.85);
    transition: transform 6s cubic-bezier(.1, .7, .2, 1), opacity .2s;
}

@media (max-width: 1100px) {
    .nav-list { margin-left: 0; }
    .nav-link { padding: 0 9px; }
    .nav-link::before { left: 9px; right: 9px; }
    .panel-list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
}

@media (max-width: 1023px) {
    :root { --hd: 60px; }
    .menu-btn { display: inline-flex; }

    .nav {
        position: fixed;
        inset: var(--hd) 0 0 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: 8px var(--gutter) calc(32px + env(safe-area-inset-bottom));
        background: var(--bg);
        border-top: 1px solid var(--line);
        overflow-y: auto;
        overscroll-behavior: contain;
        visibility: hidden;
        opacity: 0;
        transition: opacity .25s var(--ease), visibility 0s linear .25s;
    }

    .hd[data-open] .nav { visibility: visible; opacity: 1; transition: opacity .25s var(--ease), visibility 0s; }
    .hd[data-open] { background: var(--bg); border-bottom-color: var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }

    .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav-item { border-bottom: 1px solid var(--line); }
    .nav-link {
        width: 100%;
        height: auto;
        justify-content: space-between;
        padding: 18px 0;
        font-size: 1.375rem;
        font-variation-settings: "wdth" 110;
        color: var(--ink);
    }
    .nav-link::before { display: none; }
    .nav-link[aria-current] { color: var(--signal-ink); }

    .nav-panel {
        position: static;
        border: 0;
        background: none;
        visibility: visible;
        opacity: 1;
        transform: none;
        display: none;
    }
    .has-panel[data-open] .nav-panel { display: block; }
    .panel-in { display: block; padding: 0 0 16px; }
    .panel-list { display: block; border: 0; }
    .panel-link { padding: 12px 0; border: 0; }
    .panel-link:hover { background: none; }
    .panel-meta { padding-top: 2px; }
    .panel-aside { display: none; }

    .nav-actions { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 24px; }
    .nav-actions .btn { min-height: 52px; font-size: 1rem; }
    .nav-account { padding: 12px 0; font-size: 1.0625rem; }
}

html[data-menu-open] { overflow: hidden; }

/* -------------------------------------------------------------- Pied de page */

.ft {
    margin-top: auto;
    padding-block: clamp(3.5rem, 2rem + 4vw, 6rem) 28px;
    border-top: 1px solid var(--line);
    font-size: .9375rem;
}

.ft-top {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 48px;
}

.ft-logo {
    display: block;
    width: 150px;
    aspect-ratio: 1077 / 674;
    background: var(--ink);
    -webkit-mask: url("/assets/logos/celltis_blanc.png") left center / contain no-repeat;
    mask: url("/assets/logos/celltis_blanc.png") left center / contain no-repeat;
}

.ft-brand p { margin-top: 24px; max-width: 30em; color: var(--ink-2); }

.ft-cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
}

.ft-cols h2 {
    margin-bottom: 14px;
    font-family: var(--mono);
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.ft-cols li + li { margin-top: 8px; }
.ft-cols a { color: var(--ink-2); transition: color .2s; }
.ft-cols a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }

.ft-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 36px;
    margin-top: 56px;
    padding-block: 22px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.ft-contact a { font-weight: 500; }
.ft-contact a:hover { color: var(--signal-ink); }
.ft-contact span { color: var(--muted); }

.ft-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
    padding-top: 22px;
    font-size: .8125rem;
    color: var(--muted);
}
.ft-bottom ul { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.ft-bottom a:hover { color: var(--ink); }

.theme-btn {
    margin-left: auto;
    padding: 6px 0;
    background: none;
    border: 0;
    font-size: .8125rem;
    color: var(--muted);
}
.theme-btn span { color: var(--ink); text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--line-2); }

@media (max-width: 900px) {
    .ft-top { grid-template-columns: 1fr; }
    .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------- Fil d'Ariane */

.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
    font-family: var(--mono);
    font-size: .75rem;
    letter-spacing: .03em;
    color: var(--muted);
}
.crumbs li + li::before { content: "/"; margin: 0 .7em; opacity: .5; }
.crumbs a:hover { color: var(--ink); }

/* -------------------------------------------------------------- Héros */

.hero { padding-block: clamp(2.5rem, 1.5rem + 3vw, 5rem) clamp(3rem, 2rem + 4vw, 6rem); }

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: center;
}

.hero-copy .crumbs { margin-bottom: 28px; }
.hero-copy .lead { margin-top: 28px; }
.hero-copy .btns { margin-top: 36px; }

.hero-art { position: relative; }

/* Héros d'accueil : titre très large sur la photo, serveur en perspective en
   regard, sur la maille. Il remplit l'écran d'arrivée avec le bandeau de faits. */
.hero-home {
    display: grid;
    align-items: center;
    min-height: min(calc(100svh - var(--hd) - 120px), 860px);
}
.hero-home .d1 { font-size: clamp(2.7rem, 1.2rem + 4.4vw, 5.8rem); }
.hero-home .lead { max-width: 30rem; }
.hero-home .hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.hero-home .hero-art { margin-right: calc(var(--gutter) * -.6); }

/* Le texte reste clair sur la photo, quel que soit le thème de la page. */
.hero-home .hero-copy {
    --bg: #08090b;
    --ink: #f4f5f1;
    --ink-2: #dfe2e0;
    --muted: #b3b8bc;
    --line-2: rgba(244, 245, 241, .55);
    --signal: #ff6a3d;
    --signal-ink: #ff8c66;
    color: var(--ink);
}

/* La photo : un voile sombre porte le texte, le masque la fond dans la maille
   et le halo. Le fond plein garde le texte lisible tant qu'elle se charge.
   Les paliers partent du centre, comme les colonnes : le texte, centré avec
   la page, reste sur la partie pleine quelle que soit la largeur de l'écran. */
.hero-photo {
    --fade: linear-gradient(90deg, #000 calc(50% - 60px), rgba(0, 0, 0, .86) 50%, rgba(0, 0, 0, .6) calc(50% + 60px), rgba(0, 0, 0, .34) calc(50% + 120px), rgba(0, 0, 0, .14) calc(50% + 180px), rgba(0, 0, 0, .04) calc(50% + 230px), transparent calc(50% + 280px));
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
    background: #0b0f13;
    -webkit-mask-image: var(--fade);
    mask-image: var(--fade);
}
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform: scale(1.18); transform-origin: 40% 85%; }
.hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(8, 11, 14, .68), rgba(8, 11, 14, .6) calc(50% - 120px), rgba(8, 11, 14, .36) calc(50% + 60px), rgba(8, 11, 14, 0) calc(50% + 240px));
}

/* Le serveur et sa légende restent du côté clair du fondu. */
.hero-home .planche figcaption { justify-content: flex-end; text-align: right; }

/* Écran moyen : le serveur se rapproche du centre, le fondu se resserre. */
@media (max-width: 1200px) {
    .hero-photo { --fade: linear-gradient(90deg, #000 calc(50% - 60px), rgba(0, 0, 0, .72) calc(50% - 10px), rgba(0, 0, 0, .42) calc(50% + 40px), rgba(0, 0, 0, .18) calc(50% + 90px), rgba(0, 0, 0, .05) calc(50% + 140px), transparent calc(50% + 190px)); }
}

@media (max-width: 900px) {
    .hero-grid, .hero-home .hero-grid { grid-template-columns: 1fr; }
    .hero-art { max-width: 520px; }
    .hero-home { display: block; min-height: 0; }
    .hero-home .hero-grid { row-gap: 96px; }
    .hero-home .hero-art { max-width: 640px; margin-right: 0; grid-area: 2 / 1; }
    .hero-home .hero-copy { grid-area: 1 / 1; position: relative; }

    /* Sur une colonne, la photo suit la hauteur du texte et se fond juste
       sous les boutons, au-dessus du serveur. Le halo se pose sur ce fondu. */
    .hero-photo {
        position: relative;
        inset: auto;
        grid-area: 1 / 1;
        align-self: stretch;
        margin: calc(clamp(2.5rem, 1.5rem + 3vw, 5rem) * -1) calc(var(--gutter) * -1) -112px;
        --fade: linear-gradient(to bottom, #000 calc(100% - 112px), rgba(0, 0, 0, .7) calc(100% - 84px), rgba(0, 0, 0, .34) calc(100% - 56px), rgba(0, 0, 0, .1) calc(100% - 28px), transparent);
    }
    .hero-photo::after { background: rgba(8, 11, 14, .66); }
    .hero-home .planche figcaption { justify-content: flex-start; text-align: left; }
    .hero-home .hero-copy::after {
        content: "";
        position: absolute;
        z-index: -1;
        top: 100%;
        left: calc(var(--gutter) * -1);
        right: calc(var(--gutter) * -1);
        height: 180px;
        margin-top: -36px;
        pointer-events: none;
        background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(227, 70, 27, .3), transparent 72%);
    }
}
@media (max-width: 600px) {
    .planche-iso text { font-size: 17px; }
}

/* -------------------------------------------------------------- Fonds */

/* Papier millimétré : maille de 16 px, trait renforcé tous les 96 px. Sous
   chaque héros (il s'efface vers le bas), dans la salle machine et sous le
   dernier appel. Couche décorative, en CSS : rien à charger. */
.hero, .band-dark, .sec-tint, .paper-grid { position: relative; isolation: isolate; }

.hero::before,
.paper-grid::before,
.band-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(var(--grid-2) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-2) 1px, transparent 1px),
        linear-gradient(var(--grid-1) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-1) 1px, transparent 1px);
    background-size: 96px 96px, 96px 96px, 16px 16px, 16px 16px;
    background-position: 50% 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent);
    mask-image: linear-gradient(to bottom, #000 35%, transparent);
}

/* Accueil : la maille se concentre autour du serveur, avec un halo signal.
   Un second halo réchauffe la zone où la photo s'efface. */
.hero-home::before {
    -webkit-mask-image: radial-gradient(ellipse 70% 100% at 72% 42%, #000 25%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 100% at 72% 42%, #000 25%, transparent 75%);
}
.hero-home::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 74% 44%, var(--glow), transparent 34%),
        radial-gradient(ellipse 300px 90% at calc(50% + 110px) 50%, rgba(227, 70, 27, .36), transparent 72%);
}
@media (max-width: 900px) {
    .hero-home::before {
        -webkit-mask-image: linear-gradient(to bottom, transparent 30%, #000 60%);
        mask-image: linear-gradient(to bottom, transparent 30%, #000 60%);
    }
    .hero-home::after {
        background: radial-gradient(ellipse 90% 26% at 50% 62%, var(--glow), transparent 75%);
    }
}

.band-dark {
    background-image: radial-gradient(ellipse 55% 45% at 88% 0%, var(--glow), transparent 70%);
}
.band-dark::before {
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 75%);
    mask-image: linear-gradient(to bottom, #000, transparent 75%);
}

/* Papier pointé : bande teintée qui rythme les longues pages. */
.sec-tint {
    background-color: var(--bg-2);
    background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.5px);
    background-size: 24px 24px;
    background-position: 50% 12px;
}
.sec-tint + .rule-top, .rule-top.sec-tint { border-top: 0; }

/* Bandeau de faits sous le héros */
.facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.facts > div {
    padding: 22px 24px 24px 0;
}
.facts > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.facts dt { font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin-top: 8px; font-size: .9875rem; line-height: 1.4; font-weight: 500; color: var(--ink); }

@media (max-width: 900px) {
    .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
    .facts > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* -------------------------------------------------------------- Planches techniques */

.planche {
    position: relative;
    color: var(--ink);
}
.planche svg { width: 100%; height: auto; overflow: visible; }
.planche .ln  { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.planche .ln-f { stroke-width: 1; stroke-opacity: .5; }
.planche .ln-h { stroke-width: 2; }
.planche .dim { fill: none; stroke: var(--muted); stroke-width: 1; }
.planche .acc { fill: none; stroke: var(--signal); stroke-width: 1.6; }
.planche .acc-f { fill: var(--signal); stroke: none; }
.planche .soft { fill: var(--fill-soft); stroke: none; }
.planche .solid { fill: currentColor; stroke: none; opacity: .9; }
.planche .gold { fill: none; stroke: currentColor; stroke-width: 1; stroke-opacity: .65; }
/* Faces pleines des planches en perspective : trois tons, du dessus (clair)
   au flanc droit (sombre). Pleines, elles masquent les traits cachés. */
.planche .fc { stroke: currentColor; stroke-width: 1.1; stroke-linejoin: round; }
.planche .fc-t { fill: var(--plate-t); }
.planche .fc-l { fill: var(--plate-l); }
.planche .fc-r { fill: var(--plate-r); }
.planche .fc-acc { stroke: var(--signal); stroke-width: 1.4; }
.planche text {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: .04em;
    fill: var(--muted);
}
.planche .t-ink { fill: var(--ink); }
.planche .t-sig { fill: var(--signal-ink); }

.planche figcaption {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    font-family: var(--mono);
    font-size: .75rem;
    letter-spacing: .03em;
    color: var(--muted);
}
.planche figcaption strong { font-weight: 500; color: var(--ink); }

/* Tracé progressif : chaque trait porte pathLength="1". Désactivé si l'utilisateur
   réduit les animations, et invisible sans JavaScript (le dessin est alors complet). */
@media (prefers-reduced-motion: no-preference) {
    .js .planche[data-draw] .ln,
    .js .planche[data-draw] .acc,
    .js .planche[data-draw] .dim {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
    }
    .js .planche[data-draw] text,
    .js .planche[data-draw] .soft,
    .js .planche[data-draw] .solid,
    .js .planche[data-draw] .acc-f { opacity: 0; }

    .js .planche.is-drawn .ln,
    .js .planche.is-drawn .dim,
    .js .planche.is-drawn .acc {
        stroke-dashoffset: 0;
        transition: stroke-dashoffset 1.8s var(--ease-io);
        transition-delay: calc(var(--i, 0) * 90ms);
    }
    .js .planche.is-drawn .acc { transition-delay: calc(900ms + var(--i, 0) * 90ms); }
    .js .planche.is-drawn text,
    .js .planche.is-drawn .soft,
    .js .planche.is-drawn .solid,
    .js .planche.is-drawn .acc-f {
        opacity: 1;
        transition: opacity .8s var(--ease) 1.1s;
    }
    .js .planche.is-drawn .solid { opacity: .9; }

    /* Perspective : les arêtes se tracent d'abord en transparence, puis les
       faces se remplissent couche après couche, de l'arrière vers l'avant. */
    .js .planche[data-draw] .fc { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; }
    .js .planche.is-drawn .fc {
        stroke-dashoffset: 0;
        fill-opacity: 1;
        transition:
            stroke-dashoffset 1.4s var(--ease-io) calc(var(--i, 0) * 110ms),
            fill-opacity .9s var(--ease) calc(700ms + var(--i, 0) * 120ms);
    }
}

/* -------------------------------------------------------------- Apparitions */

@media (prefers-reduced-motion: no-preference) {
    .js [data-reveal] {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity .9s var(--ease), transform 1s var(--ease);
        transition-delay: calc(var(--d, 0) * 80ms);
    }
    .js [data-reveal].is-in { opacity: 1; transform: none; }

    /* Le héros n'attend pas le script : son entrée est jouée en CSS dès la première
       peinture, et le titre reste mesurable tout de suite (LCP). */
    .js .hero [data-reveal],
    .js .hero [data-reveal].is-in {
        opacity: 1;
        transform: none;
        transition: none;
        animation: hero-in .9s var(--ease) both;
        animation-delay: calc(var(--d, 0) * 90ms);
    }
    @keyframes hero-in { from { opacity: .01; transform: translateY(14px); } to { opacity: 1; transform: none; } }

    main { animation: page-in .45s var(--ease) both; }
    @keyframes page-in { from { opacity: .01; } to { opacity: 1; } }
}

/* -------------------------------------------------------------- Section : en-tête */

.sh { max-width: 52rem; }
.sh .label { display: block; margin-bottom: 22px; }
.sh .lead { margin-top: 22px; }

/* -------------------------------------------------------------- Manifeste (accueil) */

/* Mêmes colonnes que le héros : le texte reprend l'axe central du serveur. */
.manifest {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: start;
}

.manifest-title {
    font-size: clamp(2.3rem, 1.2rem + 3.4vw, 4.4rem);
    line-height: 1.04;
    letter-spacing: -.024em;
    font-weight: 400;
    font-variation-settings: "wdth" 114;
    color: var(--ink);
}

.manifest-body { max-width: 40rem; color: var(--ink-2); }
.manifest-body > p { font-size: 1.25rem; color: var(--ink); line-height: 1.5; font-variation-settings: "wdth" 104; }
.manifest-body > div { margin-top: 24px; }
.manifest-body > div p + p { margin-top: 1em; }

@media (max-width: 900px) {
    .manifest { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------- Index des gammes */

.ranges { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line-2); }

.range {
    display: grid;
    grid-template-columns: minmax(0, 4.2fr) minmax(0, 4fr) minmax(0, 2.4fr) minmax(0, 1.4fr);
    gap: 24px;
    align-items: baseline;
    padding: 30px 0 32px;
    border-bottom: 1px solid var(--line);
    position: relative;
}

.range::before {
    content: "";
    position: absolute;
    left: 0;
    top: -1px;
    height: 1px;
    width: 100%;
    background: var(--signal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease);
}

.range:hover::before { transform: scaleX(1); }

.range-name { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); line-height: 1.05; letter-spacing: -.018em; font-weight: 500; font-variation-settings: "wdth" 112; }
.range-for { color: var(--ink-2); line-height: 1.45; }
.range-cpu { font-family: var(--mono); font-size: .8125rem; color: var(--muted); }
.range-price { justify-self: end; text-align: right; white-space: nowrap; }
.range-price strong { display: block; font-weight: 500; font-size: 1.125rem; font-variation-settings: "wdth" 110; }
.range-price span { font-family: var(--mono); font-size: .6875rem; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.range a::after { content: ""; position: absolute; inset: 0; }

@media (max-width: 900px) {
    .range { grid-template-columns: 1fr auto; gap: 8px 16px; }
    .range-name { grid-column: 1; }
    .range-price { grid-column: 2; grid-row: 1; align-self: center; }
    .range-for, .range-cpu { grid-column: 1 / -1; }
}

/* -------------------------------------------------------------- Orientation */

.orient {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(28px, 4vw, 72px);
    margin-top: clamp(36px, 4vw, 56px);
    align-items: start;
}

.orient fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.orient legend { padding: 0; margin-bottom: 14px; }

.choice {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid var(--line);
    cursor: pointer;
    transition: color .2s;
}
.choice:last-child { border-bottom: 1px solid var(--line); }

.choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-key {
    flex: none;
    width: 20px;
    height: 20px;
    border: 1px solid var(--line-2);
    transform: translateY(3px);
    display: grid;
    place-items: center;
    transition: border-color .2s, background-color .2s;
}
.choice-key::after {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--bg);
    transform: scale(0);
    transition: transform .25s var(--ease);
}

.choice-text { font-size: 1.1875rem; line-height: 1.35; font-variation-settings: "wdth" 106; color: var(--ink-2); }
.choice:hover .choice-text { color: var(--ink); }
.choice input:checked ~ .choice-key { background: var(--ink); border-color: var(--ink); }
.choice input:checked ~ .choice-key::after { transform: scale(1); }
.choice input:checked ~ .choice-text { color: var(--ink); font-weight: 500; }
.choice input:focus-visible ~ .choice-key { outline: 2px solid var(--signal); outline-offset: 3px; }

.orient-out { position: relative; min-height: 100%; }

.reco {
    padding: clamp(24px, 3vw, 40px);
    background: var(--surface);
    border: 1px solid var(--line);
}
.js .reco[hidden] { display: none; }
.reco + .reco { margin-top: 16px; }
.js .reco + .reco { margin-top: 0; }
.reco .label { display: block; }
.reco h3 { margin-top: 14px; }
.reco p { margin-top: 14px; color: var(--ink-2); max-width: 36em; }
.reco dl { margin-top: 22px; display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; font-size: .9375rem; }
.reco dt { font-family: var(--mono); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.reco dd { color: var(--ink); }
.reco .btns { margin-top: 28px; }

@media (prefers-reduced-motion: no-preference) {
    .js .reco:not([hidden]) { animation: reco-in .5s var(--ease) both; }
    @keyframes reco-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 900px) { .orient { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- Salle machine */

.machine-intro {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 40px;
    align-items: end;
}

/* Un composant par rangée, chacun avec sa planche ; les processeurs alternent
   de côté pour que chaque dessin reste collé à son texte. */
.specimens { margin-top: clamp(48px, 6vw, 88px); }

.specimen {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(24px, 5vw, 80px);
    align-items: center;
}
.specimen-cpu { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.specimen-cpu .planche { width: 100%; max-width: 30rem; justify-self: center; }
.specimen-flip > .planche { order: 2; }
.specimen + .specimen { margin-top: clamp(48px, 7vw, 104px); padding-top: clamp(48px, 7vw, 104px); border-top: 1px solid var(--line); }
.specimen .label { display: block; margin-bottom: 16px; }
.specimen p { margin-top: 12px; color: var(--ink-2); max-width: 34em; }

.spec-figures {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px 36px;
}
.spec-figures div { display: flex; flex-direction: column; }
.spec-figures strong { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); line-height: 1; font-weight: 400; font-variation-settings: "wdth" 118; letter-spacing: -.02em; }
.spec-figures span { margin-top: 8px; font-family: var(--mono); font-size: .6875rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }

.machine-foot {
    margin-top: clamp(48px, 6vw, 80px);
    padding-top: 28px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.machine-foot p { color: var(--ink-2); max-width: 44em; }
.band-dark .btn-line { --btn-bd: var(--ink); }

@media (max-width: 900px) {
    .machine-intro, .specimen, .specimen-cpu { grid-template-columns: 1fr; }
    .specimen-flip > .planche { order: 0; }
    .specimen-cpu .planche { max-width: 22rem; justify-self: start; }
}

/* -------------------------------------------------------------- Règle graduée (déroulé) */

.ruler {
    --ruler-gap: clamp(16px, 2.4vw, 36px);
    margin-top: clamp(40px, 5vw, 72px);
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
    gap: 0 var(--ruler-gap);
    padding-top: 46px;
}

/* Un pas vaut une colonne et sa gouttière : les grands repères tombent
   exactement au début de chaque étape, quel que soit le nombre d'étapes. */
.ruler::before {
    --pas: calc((100% + var(--ruler-gap)) / var(--n, 4));
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 18px;
    background:
        linear-gradient(var(--ink), var(--ink)) 0 0 / 100% 1px no-repeat,
        linear-gradient(var(--ink), var(--ink)) 100% 0 / 1px 14px no-repeat,
        repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px var(--pas)) 0 0 / 100% 14px no-repeat,
        repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px calc(var(--pas) / 5)) 0 0 / 100% 7px no-repeat;
}

/* Le point est posé sur la ligne, centré sur son repère. L'étape apparaît en
   fondu, sans monter : le point ne quitte jamais la ligne. */
.step { position: relative; }
.step::before {
    content: "";
    position: absolute;
    left: 0;
    top: -50px;
    width: 9px;
    height: 9px;
    background: var(--signal);
    transform: translateX(-4px) rotate(45deg);
}
@media (prefers-reduced-motion: no-preference) {
    .js .ruler .step[data-reveal] { transform: none; }
}
.step .label { display: block; }
.step h3 { margin-top: 10px; }
.step p { margin-top: 10px; color: var(--ink-2); font-size: .9875rem; }
.step ul { margin-top: 14px; font-size: .9375rem; color: var(--ink-2); }
.step li { padding: 7px 0; border-top: 1px solid var(--line); }

@media (max-width: 900px) {
    .ruler { grid-template-columns: 1fr; padding-top: 0; padding-left: 32px; gap: 36px; }
    .ruler::before {
        top: 0; bottom: 0; left: 0; right: auto; width: 1px; height: auto;
        background: var(--ink);
    }
    .step::before { left: -32px; top: 6px; transform: translateX(-4px) rotate(45deg); }
}

/* -------------------------------------------------------------- Inclus / non inclus */

/* Accueil : un bordereau, comme on en sort d'une imprimante. Ce que comprend le
   prix, puis, sous le pointillé, ce qu'il ne comprend pas, à la même taille et
   sur le même papier. Il s'imprime de haut en bas à son apparition. */
.bill-wrap {
    display: grid;
    grid-template-columns: minmax(0, 5.5fr) minmax(0, 6.5fr);
    gap: clamp(32px, 5vw, 88px);
    align-items: start;
}
.bill-wrap .sh { position: sticky; top: calc(var(--hd) + 32px); }
.bill-wrap .d2 { font-size: clamp(2rem, 1.1rem + 2.3vw, 3.25rem); }

.bill {
    --bill-pad: clamp(20px, 3vw, 40px);
    position: relative;
    margin-bottom: 8px;
    padding: 0 var(--bill-pad) 28px;
    background: var(--surface);
    border-top: 3px solid var(--ink);
}
/* Bord déchiré : des dents de 8 px, en angles vifs comme le reste du site. */
.bill::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 8px;
    background: conic-gradient(from -45deg at 50% 100%, var(--surface) 90deg, transparent 0) 0 0 / 16px 8px repeat-x;
}

.bill-top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}
.bill-head { margin-top: 24px; }

.bill-rows { margin-top: 10px; }
.bill-rows > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    padding: 7px 0;
}
/* Points de conduite entre l'intitulé et sa valeur. */
.bill-rows > div::after {
    content: "";
    order: 1;
    flex: 1 1 16px;
    border-bottom: 1px dotted var(--line-2);
}
.bill-rows dt { font-weight: 500; color: var(--ink); }
.bill-rows dd { order: 2; font-family: var(--mono); font-size: .8125rem; color: var(--ink-2); text-align: right; }
.bill-out dd { color: var(--signal-ink); }
.bill-out .bill-note {
    order: 3;
    flex: 0 0 100%;
    margin-top: 2px;
    font-family: var(--sans);
    font-size: .9375rem;
    color: var(--muted);
    text-align: left;
}

/* Le pointillé de découpe, avec une encoche en losange de chaque côté. */
.bill-cut {
    position: relative;
    margin: 24px calc(var(--bill-pad) * -1) 0;
    border-top: 1px dashed var(--line-2);
}
.bill-cut::before,
.bill-cut::after {
    content: "";
    position: absolute;
    top: -8px;
    width: 14px;
    height: 14px;
    background: var(--bg-2);
    transform: rotate(45deg);
}
.bill-cut::before { left: -7px; }
.bill-cut::after { right: -7px; }

/* Le découpage porte sur le bordereau, pas sur l'élément observé par le script :
   un élément entièrement découpé ne déclencherait jamais son apparition. */
@media (prefers-reduced-motion: no-preference) {
    .js .bill-print[data-reveal] { opacity: 1; transform: none; }
    .js .bill-print[data-reveal] .bill {
        clip-path: inset(0 -12px 100% -12px);
        transition: clip-path 1.3s var(--ease-io);
    }
    .js .bill-print[data-reveal].is-in .bill { clip-path: inset(0 -12px -12px -12px); }
}

@media (max-width: 900px) {
    .bill-wrap { grid-template-columns: 1fr; }
    .bill-wrap .sh { position: static; }
}
@media (max-width: 480px) {
    .bill-rows > div { display: block; }
    .bill-rows > div::after { content: none; }
    .bill-rows dd { margin-top: 1px; text-align: left; }
}

.terms {
    margin-top: clamp(36px, 4vw, 56px);
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(24px, 4vw, 64px);
}

.terms h3 { padding-bottom: 16px; border-bottom: 1px solid var(--line-2); }

.ticks li {
    position: relative;
    padding: 14px 0 14px 32px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-2);
}
.ticks li strong { color: var(--ink); }
.ticks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 19px;
    width: 15px;
    height: 15px;
    background: var(--ok);
    -webkit-mask: var(--check) center / contain no-repeat;
    mask: var(--check) center / contain no-repeat;
}
.ticks.no li::before { background: var(--muted); -webkit-mask-image: var(--cross); mask-image: var(--cross); }

.ticks-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }

@media (max-width: 900px) {
    .terms { grid-template-columns: 1fr; }
    .ticks-cols { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------- Bandeau d'appel */

.call {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: 32px;
    align-items: end;
    padding-block: clamp(3rem, 2rem + 4vw, 6rem);
    border-top: 1px solid var(--line-2);
}
.call .lead { margin-top: 18px; }
.call .btns { justify-content: flex-end; }

@media (max-width: 900px) {
    .call { grid-template-columns: 1fr; }
    .call .btns { justify-content: flex-start; }
}

/* Dernier appel de l'accueil : la maille et le halo du héros, sans aplat. */
.call-band { border-top: 1px solid var(--line); }
.call-band .call { border-top: 0; }
.call-band::before {
    -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 85%);
    mask-image: linear-gradient(100deg, transparent 30%, #000 85%);
}
.call-band::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 42% 120% at 100% 100%, var(--glow), transparent 72%);
}

/* Essai : cadre fin, texte à gauche, conditions en colonne */
.trial {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: clamp(24px, 4vw, 64px);
    padding: clamp(28px, 4vw, 56px);
    border: 1px solid var(--line-2);
    background: var(--surface);
}
.trial .btns { margin-top: 28px; }
.trial ol { counter-reset: t; }
.trial ol li { counter-increment: t; display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink-2); font-size: .9875rem; }
.trial ol li::before { content: counter(t, decimal-leading-zero); font-family: var(--mono); font-size: .75rem; color: var(--signal-ink); padding-top: 3px; }

@media (max-width: 900px) { .trial { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- FAQ */

.faq-wrap {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(24px, 4vw, 72px);
    align-items: start;
}
.faq-wrap .sh { position: sticky; top: calc(var(--hd) + 32px); }

.faq details,
faq details {
    border-bottom: 1px solid var(--line);
}
.faq details:first-of-type,
faq details:first-of-type { border-top: 1px solid var(--line-2); }

.faq summary,
faq summary {
    position: relative;
    display: block;
    padding: 22px 48px 22px 0;
    list-style: none;
    cursor: pointer;
    font-size: 1.125rem;
    line-height: 1.4;
    font-weight: 500;
    font-variation-settings: "wdth" 104;
    transition: color .2s;
}
.faq summary::-webkit-details-marker,
faq summary::-webkit-details-marker { display: none; }
.faq summary::after,
faq summary::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 27px;
    width: 14px;
    height: 14px;
    background: var(--ink);
    -webkit-mask: var(--plus) center / contain no-repeat;
    mask: var(--plus) center / contain no-repeat;
    transition: transform .35s var(--ease), background-color .2s;
}
.faq details[open] summary::after,
faq details[open] summary::after { transform: rotate(45deg); background: var(--signal); }
.faq summary:hover,
faq summary:hover { color: var(--signal-ink); }
.faq details p,
faq details p { padding: 0 48px 24px 0; color: var(--ink-2); max-width: 46em; }

faq { display: block; }
faq h2 {
    margin-bottom: 28px;
    font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.5rem);
    line-height: 1.06;
    letter-spacing: -.02em;
    font-weight: 500;
    font-variation-settings: "wdth" 110;
}

@media (prefers-reduced-motion: no-preference) {
    .faq details[open] p,
    faq details[open] p { animation: faq-in .35s var(--ease) both; }
    @keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 900px) {
    .faq-wrap { grid-template-columns: 1fr; }
    .faq-wrap .sh { position: static; }
}

/* Les icônes historiques (police de symboles) n'appartiennent pas à cette
   direction : celles que les modules génèrent encore sont masquées. */
glyph { display: none !important; }

/* -------------------------------------------------------------- Fiche technique (dl) */

.sheet {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--line-2);
}
.sheet > div {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 16px;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
}
.sheet > div:nth-child(odd) { padding-right: 28px; }
.sheet > div:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--line); }
.sheet dt { font-family: var(--mono); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.sheet dd { font-weight: 500; color: var(--ink); line-height: 1.45; }
.sheet dd small { display: block; font-weight: 400; color: var(--muted); font-size: .8125rem; margin-top: 2px; }

.sheet.one { grid-template-columns: 1fr; }
.sheet.one > div { padding-left: 0 !important; padding-right: 0 !important; border-left: 0 !important; }

/* Nombre impair de lignes : la dernière occupe toute la largeur, valeur alignée sur la colonne de gauche. */
@media (min-width: 761px) {
    .sheet:not(.one) > div:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        grid-template-columns: calc((50% - 44px) * .4) minmax(0, 1fr);
        padding-right: 0;
    }
}

@media (max-width: 760px) {
    .sheet { grid-template-columns: 1fr; }
    .sheet > div { padding-left: 0 !important; padding-right: 0 !important; border-left: 0 !important; }
}

/* -------------------------------------------------------------- Offres (tableau) */

.plans-head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 16px 32px;
}

.plans {
    width: 100%;
    margin-top: 36px;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.plans thead th {
    padding: 0 16px 14px 0;
    text-align: left;
    font-family: var(--mono);
    font-size: .6875rem;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--line-2);
    white-space: nowrap;
}

.plans tbody tr {
    border-bottom: 1px solid var(--line);
    transition: background-color .2s;
}
.plans tbody tr:hover { background: var(--fill-soft); }

.plans td, .plans tbody th {
    padding: 22px 16px 22px 0;
    text-align: left;
    vertical-align: middle;
    font-weight: 400;
}

.plans tbody th { padding-left: 12px; }
.plan-name { display: block; font-size: 1.1875rem; font-weight: 600; font-variation-settings: "wdth" 110; letter-spacing: .01em; }
.plan-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag {
    display: inline-block;
    padding: 3px 7px 2px;
    border: 1px solid var(--line-2);
    font-family: var(--mono);
    font-size: .625rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-2);
    white-space: nowrap;
}
.tag-sig { border-color: var(--signal); color: var(--signal-ink); }

.plan-val { font-size: 1.0625rem; font-weight: 500; }
.plan-val small { font-weight: 400; color: var(--muted); font-size: .8125rem; margin-left: 2px; }
.plan-eng { font-size: .875rem; color: var(--ink-2); }

.plan-price { white-space: nowrap; }
.plan-price strong { display: block; font-size: 1.375rem; font-weight: 500; font-variation-settings: "wdth" 112; letter-spacing: -.01em; }
.plan-price span { display: block; margin-top: 3px; font-size: .8125rem; color: var(--muted); }
.plan-price s { color: var(--muted); font-size: .875rem; margin-right: 6px; }

.plans td.plan-go { padding-right: 12px; text-align: right; width: 1%; }
.plan-go .btn { min-height: 44px; font-size: .875rem; }
.plan-out { font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.plans tr.is-out { color: var(--muted); }
.plans tr.is-out .plan-val, .plans tr.is-out .plan-name { color: var(--muted); }

.plans-note {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    font-size: .875rem;
    color: var(--muted);
}

.plans-empty { padding: 32px 0; color: var(--ink-2); border-bottom: 1px solid var(--line); }

@media (max-width: 860px) {
    .plans thead { display: none; }
    .plans, .plans tbody, .plans tr, .plans td, .plans tbody th { display: block; width: 100%; }
    .plans tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 16px;
        padding: 22px 0;
        border-bottom: 1px solid var(--line);
    }
    .plans tbody tr:hover { background: none; }
    .plans tbody th { grid-column: 1 / -1; padding: 0 0 14px; }
    .plans td { padding: 10px 0; border-top: 1px solid var(--line); }
    .plans td::before {
        content: attr(data-l);
        display: block;
        margin-bottom: 2px;
        font-family: var(--mono);
        font-size: .625rem;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--muted);
    }
    .plans td.plan-price, .plans td.plan-go { grid-column: 1 / -1; }
    .plans td.plan-go { text-align: left; width: 100%; border-top: 0; padding-top: 6px; }
    .plans td.plan-go::before { display: none; }
    .plan-go .btn { width: 100%; }
}

/* Encart « démonstration » généré par backend/demo.js */
demoask { display: block; margin-top: 28px; }
demoopen {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: .8em 1.2em;
    border: 1px dashed var(--line-2);
    cursor: pointer;
    font-weight: 500;
    font-size: .9375rem;
    transition: border-color .2s, color .2s;
}
demoopen::before { content: "72 h"; font-family: var(--mono); font-size: .75rem; color: var(--signal-ink); }
demoopen:hover { border-color: var(--signal); }

demoovl {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(10, 12, 14, .55);
}
demoovl.show { display: flex; }
demopanel {
    display: flex;
    flex-direction: column;
    width: min(640px, 100%);
    max-height: calc(100dvh - 40px);
    overflow: auto;
    background: var(--bg);
    border: 1px solid var(--line-2);
}
demohead { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--line); font-weight: 600; font-variation-settings: "wdth" 108; }
democlose { font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 4px 8px; color: var(--muted); }
democlose:hover { color: var(--ink); }
demobody { display: block; padding: 24px; }
demorules { display: block; margin: 0 0 20px; padding: 0; font-size: .9375rem; color: var(--ink-2); }
demorules li { padding: 8px 0 8px 18px; border-bottom: 1px solid var(--line); position: relative; list-style: none; }
demorules li::before { content: ""; position: absolute; left: 0; top: 17px; width: 6px; height: 1px; background: var(--signal); }
demoblock, demodone { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
demoblock p, demodone p { flex-basis: 100%; color: var(--ink-2); }
demoblock a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--ink); font-weight: 500; }
demoblock a:first-of-type { background: var(--ink); color: var(--bg); }
demonotif { display: block; margin-bottom: 14px; padding: 12px 14px; border-left: 2px solid var(--signal); background: var(--surface); font-size: .9375rem; }
demohint { display: block; margin-top: 6px; font-size: .8125rem; color: var(--muted); }
demobody form label { display: block; margin: 16px 0 6px; font-weight: 500; font-size: .9375rem; }
demobody form select, demobody form textarea { width: 100%; }
demobody form button { margin-top: 18px; }

/* -------------------------------------------------------------- Arguments (liste numérotée par la spécification) */

.args { margin-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--line-2); }
.arg {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr);
    gap: 16px clamp(20px, 3vw, 48px);
    padding: 30px 0;
    border-bottom: 1px solid var(--line);
}
.arg-spec { font-family: var(--mono); font-size: .8125rem; color: var(--signal-ink); letter-spacing: .02em; padding-top: 6px; }
.arg p { color: var(--ink-2); }

@media (max-width: 900px) { .arg { grid-template-columns: 1fr; gap: 10px; } }

/* -------------------------------------------------------------- Usages */

.uses { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.uses li { padding: 10px 16px; border: 1px solid var(--line-2); font-size: .9375rem; }

/* -------------------------------------------------------------- Autres gammes */

.siblings { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
.sibling { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 26px 28px 30px 0; border-bottom: 1px solid var(--line); transition: background-color .25s; }
.sibling + .sibling { padding-left: 28px; border-left: 1px solid var(--line); }
.sibling:hover { background: var(--fill-soft); }
.sibling p { color: var(--ink-2); }
.sibling .lnk { margin-top: 10px; align-self: flex-start; }
.sibling .lnk::before { content: ""; position: absolute; inset: 0; }

@media (max-width: 760px) {
    .siblings { grid-template-columns: 1fr; }
    .sibling + .sibling { padding-left: 0; border-left: 0; }
}

/* -------------------------------------------------------------- Pages de contenu : index local */

.toc {
    position: sticky;
    top: calc(var(--hd) + 28px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: .9375rem;
}
.toc a { padding: 6px 0 6px 14px; border-left: 1px solid var(--line); color: var(--muted); transition: color .2s, border-color .2s; }
.toc a:hover { color: var(--ink); }
.toc a[aria-current] { color: var(--ink); border-left-color: var(--signal); }

.doc {
    display: grid;
    grid-template-columns: minmax(0, 2.6fr) minmax(0, 9.4fr);
    gap: clamp(24px, 4vw, 72px);
    align-items: start;
}

.chapter { padding-bottom: clamp(56px, 6vw, 104px); }
.chapter + .chapter { padding-top: clamp(56px, 6vw, 104px); border-top: 1px solid var(--line); }
.chapter-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(20px, 3vw, 48px); align-items: end; }
.chapter .prose { margin-top: 28px; }
.chapter .planche { margin-top: 40px; max-width: 640px; }
.chapter .sheet { margin-top: 36px; }

.why {
    margin-top: 36px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px clamp(20px, 3vw, 48px);
}
.why > div { padding-top: 18px; border-top: 1px solid var(--line-2); }
.why h3, .why h4 { font-size: 1.0625rem; font-weight: 600; font-variation-settings: "wdth" 104; }
.why p { margin-top: 8px; color: var(--ink-2); font-size: .9875rem; }

.source { margin-top: 18px; font-family: var(--mono); font-size: .6875rem; letter-spacing: .02em; color: var(--muted); }
.source a { text-decoration: underline; text-underline-offset: .2em; }
.source a:hover { color: var(--ink); }

.note {
    margin-top: 28px;
    padding: 16px 20px;
    border-left: 2px solid var(--signal);
    background: var(--surface);
    color: var(--ink-2);
    font-size: .9375rem;
    max-width: 46em;
}

@media (max-width: 1023px) {
    .doc { grid-template-columns: 1fr; }
    .toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .toc a { border: 1px solid var(--line); padding: 6px 12px; }
    .toc a[aria-current] { border-color: var(--signal); }
    .chapter-head { grid-template-columns: 1fr; }
}
@media (max-width: 760px) { .why { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- Formulaires */

.form { display: grid; gap: 22px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field > label, .field > .flabel { font-weight: 500; font-size: .9375rem; }
.field .opt { font-weight: 400; color: var(--muted); }
.hint { font-size: .8125rem; color: var(--muted); }
.err { font-size: .8125rem; color: var(--bad); font-weight: 500; }
.err:empty { display: none; }

.input, .form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="password"],
.form select, .form textarea, demobody select, demobody textarea, gameorder input:not([type="range"]):not([type="checkbox"]), gameorder select {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: 0;
    color: var(--ink);
    font-size: 1rem;
    transition: border-color .2s, box-shadow .2s;
    -webkit-appearance: none;
    appearance: none;
}

.form select, demobody select, gameorder select {
    padding-right: 40px;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.form textarea, demobody textarea { min-height: 160px; resize: vertical; line-height: 1.5; }

.form input::placeholder, .form textarea::placeholder, demobody textarea::placeholder, gameorder input::placeholder { color: var(--muted); opacity: 1; }

.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--ink-2); }
.form input:focus, .form select:focus, .form textarea:focus,
demobody select:focus, demobody textarea:focus, gameorder input:focus, gameorder select:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 1px var(--ink), 0 0 0 4px color-mix(in srgb, var(--signal) 28%, transparent);
}

.field[data-invalid] input, .field[data-invalid] textarea, .field[data-invalid] select { border-color: var(--bad); }

.seg { display: flex; flex-wrap: wrap; border: 1px solid var(--line-2); width: fit-content; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 12px 20px; font-size: .9375rem; font-weight: 500; color: var(--ink-2); transition: background-color .2s, color .2s; }
.seg label + label span { border-left: 1px solid var(--line-2); }
.seg input:checked + span { background: var(--ink); color: var(--bg); }
.seg input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: -4px; }

.check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: .9375rem; color: var(--ink-2); cursor: pointer; }
.check input {
    width: 20px; height: 20px; margin: 2px 0 0;
    border: 1px solid var(--line-2);
    background: var(--surface);
    -webkit-appearance: none; appearance: none;
    display: grid; place-items: center;
    cursor: pointer;
}
.check input::after { content: ""; width: 12px; height: 12px; background: var(--bg); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; transform: scale(0); transition: transform .2s var(--ease); }
.check input:checked { background: var(--ink); border-color: var(--ink); }
.check input:checked::after { transform: scale(1); }
.check a { text-decoration: underline; text-underline-offset: .2em; }

.pass { position: relative; }
.pass input { padding-right: 96px; }
.pass button {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    padding: 8px 10px; background: none; border: 0;
    font-family: var(--mono); font-size: .6875rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.pass button:hover { color: var(--ink); }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.counter { font-family: var(--mono); font-size: .6875rem; color: var(--muted); align-self: flex-end; }
.counter[data-low] { color: var(--signal-ink); }

.alert {
    padding: 16px 18px;
    border-left: 2px solid var(--bad);
    background: var(--surface);
    font-size: .9375rem;
    color: var(--ink);
}
.alert:empty { display: none; }
.alert.ok { border-left-color: var(--ok); }

.form .btn[type="submit"] { justify-self: start; min-width: 220px; }
.form .btn[data-busy] { pointer-events: none; }
.form .btn[data-busy]::after { -webkit-mask: none; mask: none; width: 14px; height: 14px; border: 1.5px solid currentColor; border-right-color: transparent; background: none; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } .form .btn[type="submit"] { width: 100%; } }

/* Formulaires courts : connexion, inscription, commande */
.auth {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(32px, 6vw, 112px);
    padding-block: clamp(3rem, 2rem + 4vw, 6rem);
    align-items: start;
}
.auth-side .lead { margin-top: 20px; }
.auth-side ul { margin-top: 32px; border-top: 1px solid var(--line); }
.auth-side li { padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: .9375rem; }
.auth-box { padding: clamp(24px, 3.5vw, 48px); background: var(--surface); border: 1px solid var(--line); }
.auth-box .form { margin-top: 26px; }
.auth-alt { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .9375rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 8px 24px; }
.auth-alt a { font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--line-2); }
.auth-alt a:hover { text-decoration-color: var(--signal); }

@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } }

/* Bloc « points d'affiliation » de la commande (généré par le routeur) */
affpay { display: block; padding: 16px 18px; border: 1px solid var(--line-2); font-size: .9375rem; }
affpay label { display: flex; gap: 10px; align-items: center; font-weight: 500; }
affpay em { display: block; margin-top: 8px; font-style: normal; color: var(--ink-2); }
affpay[covered] { border-color: var(--ok); }

/* -------------------------------------------------------------- Contact */

.contact {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(32px, 5vw, 96px);
    align-items: start;
}
.channels { border-top: 1px solid var(--line-2); }
.channel { padding: 20px 0; border-bottom: 1px solid var(--line); }
.channel .label { display: block; }
.channel a, .channel strong { display: inline-block; margin-top: 6px; font-size: 1.125rem; font-weight: 500; font-variation-settings: "wdth" 106; }
.channel a:hover { color: var(--signal-ink); }
.channel p { margin-top: 4px; font-size: .9375rem; color: var(--ink-2); }

.sent { padding: clamp(28px, 4vw, 56px); border: 1px solid var(--line-2); background: var(--surface); }
.sent .d3 { margin-top: 16px; }
.sent p { margin-top: 14px; color: var(--ink-2); max-width: 36em; }
.sent .btns { margin-top: 28px; }

@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- Équipe */

.team {
    margin-top: clamp(36px, 4vw, 56px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px clamp(16px, 2vw, 28px);
}
.member { position: relative; display: flex; flex-direction: column; }
.member-photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-2); }
.member-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .6s var(--ease), transform .8s var(--ease); }
.member:hover .member-photo img { filter: grayscale(0); transform: scale(1.025); }
.member h3 { margin-top: 16px; font-size: 1.125rem; font-weight: 600; font-variation-settings: "wdth" 108; }
.member p { margin-top: 2px; font-size: .9375rem; color: var(--muted); }
.member a::after { content: ""; position: absolute; inset: 0; }
.team-partners { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1000px) { .team, .team-partners { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .team, .team-partners { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.timeline { margin-top: 36px; border-top: 1px solid var(--line-2); }
.timeline > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.timeline dt { font-family: var(--mono); font-size: .8125rem; color: var(--signal-ink); padding-top: 3px; }
.timeline dd { color: var(--ink-2); }
.timeline dd strong { color: var(--ink); display: block; font-size: 1.0625rem; margin-bottom: 4px; }
@media (max-width: 640px) { .timeline > div { grid-template-columns: 1fr; gap: 6px; } }

.partners { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
.partner { padding: 24px 28px 28px 0; border-bottom: 1px solid var(--line); }
.partner + .partner { padding-left: 28px; border-left: 1px solid var(--line); }
.partner .label { display: block; }
.partner h3 { margin-top: 10px; }
.partner p { margin-top: 10px; font-size: .9375rem; color: var(--ink-2); }
@media (max-width: 860px) { .partners { grid-template-columns: 1fr; } .partner + .partner { padding-left: 0; border-left: 0; } }

/* Fiche personne */
.person { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.person-photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-2); }
.person-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.85) contrast(1.04); }
.person .prose { margin-top: 28px; }
.person .sheet { margin-top: 36px; }
@media (max-width: 860px) { .person { grid-template-columns: 1fr; } .person-photo { max-width: 360px; } }

/* -------------------------------------------------------------- Mentions et conditions */

.legal-doc { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 9.4fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
@media (max-width: 1023px) { .legal-doc { grid-template-columns: 1fr; } }

legal { display: block; max-width: 48rem; color: var(--ink-2); font-size: 1rem; }
legal h1 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); line-height: 1.04; letter-spacing: -.02em; font-weight: 500; font-variation-settings: "wdth" 110; color: var(--ink); margin-bottom: 18px; }
legal > div { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
legal h2 { font-size: 1.375rem; line-height: 1.2; font-weight: 600; font-variation-settings: "wdth" 106; color: var(--ink); margin-bottom: 14px; }
legal h3 { font-size: 1.0625rem; font-weight: 600; color: var(--ink); margin: 22px 0 8px; }
legal p, legal ul { margin-top: 10px; }
legal ul { padding-left: 1.2em; list-style: square; }
legal li + li { margin-top: 4px; }
legal strong { color: var(--ink); }
legal a { text-decoration: underline; text-underline-offset: .2em; }

/* -------------------------------------------------------------- Page simple / 404 */

.solo { padding-block: clamp(4rem, 3rem + 6vw, 9rem); }
.solo .lead { margin-top: 24px; }
.solo .btns { margin-top: 36px; }
.solo-code { font-family: var(--mono); font-size: .8125rem; color: var(--signal-ink); letter-spacing: .06em; }

prspstop { display: block; max-width: 40rem; }
prspstop h1 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); line-height: 1.04; letter-spacing: -.02em; font-weight: 500; font-variation-settings: "wdth" 110; }
prspstop p { margin-top: 20px; color: var(--ink-2); font-size: 1.125rem; }
prspstop a { text-decoration: underline; }
prspstop form { margin-top: 28px; }
prspstop button { min-height: 48px; padding: 0 20px; background: var(--ink); color: var(--bg); border: 0; font-weight: 500; }

/* -------------------------------------------------------------- Serveurs de jeux : catalogue */

gamesearch { display: grid; gap: 20px; }
searchbox { display: block; position: relative; max-width: 560px; }
searchbox input {
    width: 100%;
    min-height: 56px;
    padding: 14px 16px 14px 46px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: 0;
    font-size: 1.0625rem;
    -webkit-appearance: none;
    appearance: none;
}
searchbox::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 1.5px solid var(--muted);
    border-radius: 50%;
    pointer-events: none;
}
searchbox::after { content: ""; position: absolute; left: 29px; top: 50%; margin-top: 5px; width: 6px; height: 1.5px; background: var(--muted); transform: rotate(45deg); pointer-events: none; }
searchbox input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 0 0 4px color-mix(in srgb, var(--signal) 28%, transparent); }

familynav { display: flex; flex-wrap: wrap; gap: 8px; }
familynav a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line-2); font-size: .9375rem; transition: background-color .2s, color .2s, border-color .2s; }
familynav a:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
familynav em { font-style: normal; font-family: var(--mono); font-size: .6875rem; color: var(--muted); }
familynav a:hover em { color: inherit; }
searchcount { display: block; font-family: var(--mono); font-size: .75rem; color: var(--muted); min-height: 1em; }

gamefamily { display: block; padding-top: clamp(40px, 5vw, 72px); }
gamefamily:first-of-type { padding-top: 0; }
familyhead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line-2); }
familyhead h2 { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem); line-height: 1.05; letter-spacing: -.015em; font-weight: 500; font-variation-settings: "wdth" 110; }
familyhead span { font-family: var(--mono); font-size: .75rem; color: var(--muted); }

gamegrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 32px clamp(16px, 2vw, 28px);
    margin-top: 28px;
}

gamecard { display: block; }
gamecard a { display: flex; flex-direction: column; height: 100%; }
gamevisual { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-2); }
gamevisual img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .5s; filter: saturate(.9); }
gamecard a:hover gamevisual img { transform: scale(1.04); filter: saturate(1.05); }
gametag { position: absolute; left: 10px; top: 10px; padding: 3px 7px; background: var(--bg); font-family: var(--mono); font-size: .625rem; letter-spacing: .05em; text-transform: uppercase; }
gamemeta { display: block; padding-top: 14px; }
gamemeta h3 { font-size: 1.125rem; font-weight: 600; font-variation-settings: "wdth" 106; line-height: 1.25; }
gamegenre { display: block; margin-top: 2px; font-size: .875rem; color: var(--muted); }
gamespec { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; font-family: var(--mono); font-size: .6875rem; letter-spacing: .03em; color: var(--ink-2); }
gamego { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; font-size: .875rem; font-weight: 500; }
gamego::after { content: ""; width: 12px; height: 12px; background: var(--signal); -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: transform .3s var(--ease); }
gamecard a:hover gamego::after { transform: translateX(4px); }

searchempty { display: none; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 32px; padding: 32px; border: 1px dashed var(--line-2); }
searchempty h3 { font-size: 1.375rem; font-weight: 500; font-variation-settings: "wdth" 108; }
searchempty p { color: var(--ink-2); max-width: 40em; }
searchempty links { display: flex; flex-wrap: wrap; gap: 16px; }
searchempty links a { font-weight: 500; text-decoration: underline; text-underline-offset: .2em; }

/* -------------------------------------------------------------- Guides : fiche de jeu */

.game-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.game-hero-img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-2); }
.game-hero-img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .game-hero { grid-template-columns: 1fr; } }

.game-layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.game-side { position: sticky; top: calc(var(--hd) + 24px); display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 1023px) { .game-layout { grid-template-columns: 1fr; } .game-side { position: static; } }

blockhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line-2); }
blockhead h2 { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem); line-height: 1.05; letter-spacing: -.015em; font-weight: 500; font-variation-settings: "wdth" 110; }
blockhead span { font-family: var(--mono); font-size: .75rem; color: var(--muted); }

gamesteps { display: block; counter-reset: none; }
gamestep { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; padding: 30px 0; border-bottom: 1px solid var(--line); }
stepnum { display: block; font-family: var(--mono); font-size: .8125rem; color: var(--signal-ink); padding-top: 6px; }
stepnum::before { content: "Étape "; }
stepbody { display: block; min-width: 0; }
stepbody h3 { font-size: 1.3125rem; line-height: 1.25; font-weight: 600; font-variation-settings: "wdth" 106; }
stepbody > p { margin-top: 10px; color: var(--ink-2); }
stepnotes { display: block; margin-top: 16px; }
stepnotes li { position: relative; padding: 8px 0 8px 20px; color: var(--ink-2); font-size: .9875rem; border-top: 1px solid var(--line); }
stepnotes li::before { content: ""; position: absolute; left: 0; top: 19px; width: 8px; height: 1px; background: var(--signal); }
stepnotes b { color: var(--ink); }
stepcmds { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
cmd {
    position: relative;
    display: block;
    padding: 14px 92px 14px 16px;
    background: #121416;
    color: #e8eae6;
    font-family: var(--mono);
    font-size: .875rem;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre;
    cursor: copy;
}
cmd::after {
    content: "Copier";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .625rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9aa0a6;
}
cmd[data-copied]::after { content: "Copié"; color: #ff8c66; }
@media (max-width: 640px) { gamestep { grid-template-columns: 1fr; gap: 6px; } }

gamenotes { display: block; margin-top: 36px; padding: 24px 26px; background: var(--surface); border: 1px solid var(--line); }
gamenotes h3 { font-size: 1.125rem; font-weight: 600; font-variation-settings: "wdth" 106; }
gamenotes ul { margin-top: 10px; }
gamenotes li { position: relative; padding: 8px 0 8px 20px; color: var(--ink-2); font-size: .9875rem; }
gamenotes li::before { content: ""; position: absolute; left: 0; top: 19px; width: 8px; height: 1px; background: var(--signal); }

.side-card { padding: 22px 24px 24px; border: 1px solid var(--line-2); background: var(--surface); }
.side-card h2 { font-family: var(--mono); font-size: .75rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.side-card dl { margin-top: 14px; }
.side-card dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); font-size: .9375rem; }
.side-card dt { color: var(--ink-2); }
.side-card dd { font-weight: 600; text-align: right; }
.side-card p { margin-top: 14px; font-size: .875rem; color: var(--muted); }
.side-card .btn { margin-top: 18px; width: 100%; }
.side-card.ink { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.side-card.ink h2, .side-card.ink p { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.side-card.ink .btn { --btn-bg: var(--bg); --btn-fg: var(--ink); --btn-bd: var(--bg); }
.side-card.ink .btn:hover { --btn-bg: var(--signal); --btn-fg: #111315; --btn-bd: var(--signal); }

sideports { display: block; margin-top: 14px; }
portrow { display: grid; grid-template-columns: auto auto 1fr; gap: 4px 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); }
portrow span { font-family: var(--mono); font-weight: 500; font-size: .9375rem; }
portrow em { font-style: normal; font-family: var(--mono); font-size: .6875rem; color: var(--signal-ink); }
portrow small { grid-column: 1 / -1; font-size: .8125rem; color: var(--muted); }

gamesetup, gamewarn { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 28px; align-items: center; padding: 22px 24px; border: 1px solid var(--line-2); }
gamewarn { grid-template-columns: 1fr; border-color: var(--signal); }
gamesetup div, gamewarn div { display: flex; flex-direction: column; gap: 6px; }
gamesetup span, gamewarn span { color: var(--ink-2); font-size: .9375rem; }
gamesetup a { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px; border: 1px solid var(--ink); font-weight: 500; white-space: nowrap; }
gamesetup a:hover { background: var(--ink); color: var(--bg); }
@media (max-width: 760px) { gamesetup { grid-template-columns: 1fr; } }

guidegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin-top: 8px; }
guidecard a { display: block; padding: 22px 0; border-bottom: 1px solid var(--line); }
guidebody { display: block; }
guidebody h3 { font-size: 1.125rem; font-weight: 600; font-variation-settings: "wdth" 106; transition: color .2s; }
guidebody p { margin-top: 6px; color: var(--ink-2); font-size: .9375rem; }
guidecard a:hover h3 { color: var(--signal-ink); }
@media (max-width: 760px) { guidegrid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- Configurateur de serveur de jeu (gamehosting.js) */

gameorder { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(28px, 4vw, 72px); align-items: start; }
gameorderhead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 3vw, 48px); align-items: end; padding-bottom: 32px; border-bottom: 1px solid var(--line-2); }
gameorderhead img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
gameorderhead div { display: flex; flex-direction: column; gap: 10px; }
gameorderhead hero-eyebrow { font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
gameorderhead h1 { font-size: clamp(2.2rem, 1.3rem + 3vw, 4.2rem); line-height: 1; letter-spacing: -.024em; font-weight: 500; font-variation-settings: "wdth" 112; }
gameorderhead span { color: var(--muted); }
gameorder form { display: flex; flex-direction: column; gap: 10px; }
gameorder form > label { margin-top: 10px; font-weight: 500; font-size: .9375rem; }
gamegroup { display: block; margin-top: 26px; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
gamerange { display: block; padding: 16px 0 12px; border-bottom: 1px solid var(--line); }
gamerange label { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-weight: 500; }
gamerange label span { display: flex; flex-direction: column; gap: 2px; }
gamerange em { font-style: normal; font-weight: 400; font-size: .8125rem; color: var(--muted); }
gamerange output { font-family: var(--mono); font-size: 1rem; font-weight: 500; white-space: nowrap; }
gamerange input[type="range"] {
    --fill: 0%;
    width: 100%;
    height: 28px;
    margin: 10px 0 2px;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
gamerange input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(var(--ink), var(--ink)) 0 0 / var(--fill) 100% no-repeat, var(--line-2); }
gamerange input[type="range"]::-moz-range-track { height: 2px; background: var(--line-2); }
gamerange input[type="range"]::-moz-range-progress { height: 2px; background: var(--ink); }
gamerange input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -8px; background: var(--bg); border: 2px solid var(--ink); transform: rotate(45deg); transition: background-color .2s; }
gamerange input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; background: var(--bg); border: 2px solid var(--ink); border-radius: 0; transform: rotate(45deg); }
gamerange input[type="range"]:focus-visible { outline: none; }
gamerange input[type="range"]:focus-visible::-webkit-slider-thumb { background: var(--signal); border-color: var(--signal); }
gamerange input[type="range"]:active::-webkit-slider-thumb { background: var(--signal); border-color: var(--signal); }
rangelimits { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .6875rem; color: var(--muted); }
gameprice { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 16px; margin-top: 24px; padding: 22px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
gameprice span { font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
gameprice strong { font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem); line-height: 1; font-weight: 500; font-variation-settings: "wdth" 116; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
gameprice em { grid-column: 1 / -1; font-style: normal; font-size: .875rem; color: var(--muted); text-align: right; }
gameorder label[gamecgv] { display: grid; grid-template-columns: 22px 1fr; gap: 12px; margin-top: 14px; font-weight: 400; font-size: .9375rem; color: var(--ink-2); }
gameorder label[gamecgv] input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); }
gameorder label[gamecgv] a { text-decoration: underline; }
gameorder button[type="submit"]:not(.btn) { margin-top: 18px; min-height: 54px; background: var(--ink); color: var(--bg); border: 1px solid var(--ink); font-weight: 500; font-size: 1rem; font-variation-settings: "wdth" 108; transition: background-color .25s, color .25s, border-color .25s; }
gameorder button[type="submit"]:not(.btn):hover { background: var(--signal); border-color: var(--signal); color: #111315; }
gamelogin, gameclosed { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
gamelogin a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border: 1px solid var(--ink); font-weight: 500; }
gamelogin a:first-child { background: var(--ink); color: var(--bg); }
gameclosed { padding: 14px 16px; border-left: 2px solid var(--signal); background: var(--surface); }
gameorderinfo { position: sticky; top: calc(var(--hd) + 24px); display: flex; flex-direction: column; border-top: 1px solid var(--line-2); }
gameorderinfo div { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; color: var(--ink-2); }
gameorderinfo b { color: var(--ink); }
@media (max-width: 900px) { gameorder, gameorderhead { grid-template-columns: 1fr; } gameorderinfo { position: static; } }

/* -------------------------------------------------------------- Compléments */

/* Mosaïque de jaquettes (location de serveurs de jeux) */
.covers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.covers img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: saturate(.85); }
.covers img:nth-child(2) { transform: translateY(28px); }
.covers img:nth-child(4) { transform: translateY(28px); }

/* Prix d'appel en ligne (« dès 5,25 € par mois ») */
.inline-price > * { display: inline; }
.inline-price > * + * { margin-left: .3em; }
.inline-price span { font-weight: 400; color: var(--muted); }

/* Liste de liens simple */
.linklist { border-top: 1px solid var(--line-2); }
.linklist li { padding: 14px 0; border-bottom: 1px solid var(--line); }

/* Attente de la redirection vers Stripe */
.paybar { position: relative; max-width: 480px; height: 2px; margin-top: 44px; overflow: hidden; background: var(--line); }
.paybar::after { content: ""; position: absolute; inset: 0; width: 30%; background: var(--signal); animation: pay 1.4s var(--ease-io) infinite; }
@keyframes pay { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

/* Message d'erreur de chargement émis par core.js (RequestLoading) */
reqloading { display: none; }
reqloading.show.error {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 80;
    display: block;
    transform: translateX(-50%);
    padding: 14px 18px;
    background: var(--ink);
    color: var(--bg);
    font-size: .9375rem;
}
reqspinner { display: none; }

/* -------------------------------------------------------------- Page « Direction artistique » */

/* La charte rendue avec les composants réels : seuls les échantillons, les
   spécimens et les grilles de démonstration sont propres à cette page. */
.da code { font-family: var(--mono); font-size: .85em; color: var(--ink); background: var(--fill-soft); padding: .05em .35em; }
.da .chapter-head + .ticks { margin-top: 36px; }

.da-motto { margin-top: 44px; padding: 36px 0 28px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); }
.da-motto-line { font-size: clamp(2.2rem, 1.2rem + 4vw, 4.6rem); line-height: 1; letter-spacing: -.028em; font-weight: 500; font-variation-settings: "wdth" 118; color: var(--ink); }
.da-motto .label { display: block; margin-top: 18px; }

.da-rules { margin-top: 40px; border-top: 1px solid var(--line-2); }
.da-rules li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 20px; padding: 22px 0 24px; border-bottom: 1px solid var(--line); }
.da-num { padding-top: 3px; font-family: var(--mono); font-size: .8125rem; color: var(--signal-ink); }
.da-rules p { margin-top: 6px; max-width: 44em; color: var(--ink-2); }

.da-h3 { margin-top: 44px; font-family: var(--mono); font-size: .75rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* Nuanciers et planches de démonstration : cases à filets, comme les fiches. */
.da-swatches, .da-board { display: grid; border-top: 1px solid var(--line-2); border-left: 1px solid var(--line); }
.da-swatches { margin-top: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.da-board { margin-top: 40px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.da-swatch, .da-cell { min-width: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.da-swatch { padding: 14px 14px 18px; }
.da-chip { display: block; height: 72px; background: var(--sw); outline: 1px solid var(--line); outline-offset: -1px; }
.da-name { margin-top: 12px; font-weight: 600; font-variation-settings: "wdth" 104; color: var(--ink); }
.da-meta { margin-top: 2px; font-family: var(--mono); font-size: .75rem; color: var(--muted); }
.da-meta code, .da-tag code { padding: 0; background: none; color: var(--ink-2); }
.da-use { margin-top: 6px; font-size: .875rem; line-height: 1.45; color: var(--ink-2); }

.da-faces { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
.da-face { padding: 24px 24px 28px 0; }
.da-face + .da-face { padding-left: 24px; border-left: 1px solid var(--line); }
.da-aa { font-size: clamp(4.5rem, 3rem + 5vw, 8rem); line-height: 1; font-weight: 500; letter-spacing: -.03em; font-variation-settings: "wdth" 112; color: var(--ink); }
.da-aa-mono { font-family: var(--mono); font-weight: 400; letter-spacing: -.02em; font-variation-settings: normal; }
.da-face .d4 { margin-top: 18px; }

.da-widths { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 8px 36px; align-items: baseline; font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); font-weight: 500; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); }

.da-scale, .da-voice { margin-top: 40px; border-top: 1px solid var(--line-2); }
.da-step { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); }
.da-tag { font-family: var(--mono); font-size: .75rem; letter-spacing: .02em; color: var(--muted); }

.da-cell { padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.da-cell .da-use { margin-top: auto; }
.da-cell .ticks li { padding-block: 6px; border: 0; }
.da-lines { display: grid; gap: 16px; padding: 10px 0; }
.da-lines span { display: block; border-top: 1px solid; }
.da-focus { display: inline-block; padding: 8px 12px; outline: 2px solid var(--signal); outline-offset: 3px; font-weight: 500; }

.da-bgs { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.da-tile { min-height: 210px; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--line); overflow: hidden; }
.da-tile.paper-grid { background: var(--bg); }
.da-tile .da-use { max-width: 26em; }

.da-voice-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.da-voice-head { padding-block: 12px; }
.da-yes, .da-no { position: relative; padding-left: 28px; }
.da-yes { font-weight: 500; color: var(--ink); }
.da-no { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-2); }
.da-yes::before, .da-no::before {
    content: "";
    position: absolute;
    left: 0;
    top: .3em;
    width: 15px;
    height: 15px;
    background: var(--ok);
    -webkit-mask: var(--check) center / contain no-repeat;
    mask: var(--check) center / contain no-repeat;
}
.da-no::before { background: var(--muted); -webkit-mask-image: var(--cross); mask-image: var(--cross); }
.da-typo { margin-top: 32px; }

.da-logos { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.da-logo { min-height: 220px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); }
.da-logo.band-dark { border-color: transparent; }
.da-logo .ft-logo { width: 190px; }

@media (max-width: 1100px) {
    .da-swatches, .da-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .da-faces, .da-bgs, .da-logos, .da-voice-row, .da-board { grid-template-columns: 1fr; }
    .da-face + .da-face { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
    .da-step { grid-template-columns: 1fr; gap: 8px; }
    .da-rules li { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 12px; }
    .da-voice-head { display: none; }
}

/* -------------------------------------------------------------- Impression */

@media print {
    .hd, .ft, .skip, demoask, .btns { display: none !important; }
    body::after { display: none; }
    body { background: #fff; color: #000; }
}

/* -------------------------------------------------------------- Avantages : code promo, carte cadeau, lot

   Bloc des bons de commande (VPS, serveurs de jeux), rendu par PromoManager.renderOrderBlock.
   « Appliquer » recalcule le devis côté serveur ; le récapitulatif reprend ses lignes. */

.sr[data-default] { min-height: 0 !important; margin: -1px !important; }
.perks { display: grid; gap: 12px; min-width: 0; margin: 6px 0 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--line); }
.perks legend { float: left; width: 100%; padding: 0; margin-bottom: 2px; font-weight: 500; font-size: .9375rem; }
.perks legend + * { clear: both; }
.perks-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.perks-row input { font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.perks-row input::placeholder { font-family: var(--sans); letter-spacing: 0; text-transform: none; }
.perks-row .btn { min-height: 50px; }
.perks-row .btn::after { display: none; }
.perks .field > label { font-size: .875rem; }
.perks-msg { padding: 10px 14px; border-left: 2px solid var(--ok); background: var(--surface); font-size: .875rem; color: var(--ink-2); }
.perks-msg.is-err { border-left-color: var(--bad); color: var(--ink); }
.perks-sum { border-top: 1px solid var(--ink); }
.perks-sum > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.perks-sum dt { min-width: 0; color: var(--ink-2); }
.perks-sum dd { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.perks-sum .perks-total dt { font-weight: 600; color: var(--ink); }
.perks-sum .perks-total dd { font-weight: 600; font-size: 1.0625rem; }
/* Sous le total du configurateur, déjà souligné : pas de second filet. */
gameorder .perks { margin-top: 18px; padding-top: 0; border-top: 0; }
gameorder .perks .check { margin-top: 0; font-weight: 400; }
@media (max-width: 420px) { .perks-row { grid-template-columns: 1fr; } .perks-row .btn { width: 100%; } }

/* -------------------------------------------------------------- Carte cadeau (/carte-cadeau/) */

.gc-page { padding-block: 0; }
.gc-visual {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    gap: 10px 16px;
    max-width: 420px;
    aspect-ratio: 1.586;
    padding: clamp(18px, 2.4vw, 26px);
    background-color: #121416;
    background-image:
        radial-gradient(120% 90% at 100% 0%, rgba(255, 106, 61, .28), transparent 60%),
        linear-gradient(rgba(236, 238, 234, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(236, 238, 234, .045) 1px, transparent 1px);
    background-size: auto, 22px 22px, 22px 22px;
    border: 1px solid rgba(236, 238, 234, .16);
    color: #eceeea;
}
.gc-visual-brand { font-weight: 600; font-size: 1.0625rem; letter-spacing: .16em; text-transform: uppercase; font-variation-settings: "wdth" 125; }
.gc-visual-kind { justify-self: end; font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: #ff8c66; }
.gc-visual-amount { grid-column: 1 / -1; grid-row: 2; align-self: end; font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem); line-height: 1; font-weight: 500; letter-spacing: -.02em; font-variation-settings: "wdth" 116; font-variant-numeric: tabular-nums; }
.gc-visual-code { grid-column: 1 / -1; grid-row: 3; font-family: var(--mono); font-size: clamp(.8125rem, .7rem + .5vw, 1rem); letter-spacing: .14em; color: rgba(236, 238, 234, .72); }
.gc-field { margin: 0; padding: 0; border: 0; }
.gc-legend { float: left; width: 100%; padding: 0; margin-bottom: 10px; font-weight: 500; font-size: .9375rem; }
.gc-amounts { clear: both; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.gc-amount { position: relative; }
.gc-amount input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.gc-amount span { display: inline-flex; align-items: center; justify-content: center; min-width: 78px; min-height: 48px; padding: 0 16px; border: 1px solid var(--line-2); font-family: var(--mono); font-size: .9375rem; font-variant-numeric: tabular-nums; transition: background-color .2s, color .2s, border-color .2s; }
.gc-amount:hover span { border-color: var(--ink); }
.gc-amount input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.gc-amount input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 2px; }
.gc-gate { margin-top: 22px; color: var(--ink-2); }
.gc-gate .btns { margin-top: 20px; }
.gc-terms { margin-top: 28px; }

/* -------------------------------------------------------------- Calendrier de l'Avent (/calendrier-avent/) */

.adv-status { display: grid; gap: 14px; max-width: 46rem; margin-top: 36px; }
.adv-state { padding: 16px 18px; border-left: 2px solid var(--line-2); background: var(--surface); color: var(--ink-2); }
.adv-state.is-ok { border-left-color: var(--ok); }
.adv-state strong { color: var(--ink); }
.alert.is-ok { border-left-color: var(--ok); }
.alert .lnk { margin-left: 6px; }

.doors { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line-2); border-left: 1px solid var(--line); }
.door { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 228px; padding: 16px 18px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.door-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; }
.door-n { font-size: clamp(2rem, 1.4rem + 1.6vw, 2.9rem); line-height: 1; font-weight: 500; letter-spacing: -.02em; font-variation-settings: "wdth" 120; font-variant-numeric: tabular-nums; }
.door-day { font-family: var(--mono); font-size: .6875rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.door-body { display: grid; gap: 6px; margin-top: auto; padding-top: 20px; }
.door-prize { font-weight: 600; line-height: 1.25; font-variation-settings: "wdth" 104; color: var(--ink); }
.door-scope, .door-when { font-size: .8125rem; color: var(--muted); }
.door-hidden { font-family: var(--mono); font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.door-when span { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.door form { margin-top: 6px; }
.door .btn { width: 100%; min-width: 0; min-height: 44px; padding-inline: .7em; white-space: normal; text-align: center; }
.door .btn::after { display: none; }
.door .lnk { font-size: .875rem; }
.door.is-locked .door-n, .door.is-missed .door-n, .door.is-won .door-n { color: var(--muted); }
.door.is-missed { background-image: repeating-linear-gradient(135deg, transparent 0 9px, var(--fill-soft) 9px 10px); }
.door.is-won::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--line-2); }
.door.is-open, .door.is-soon { background: var(--surface); box-shadow: inset 0 0 0 2px var(--signal); }
.door.is-open .door-n, .door.is-soon .door-n { color: var(--signal-ink); }
.door.is-mine { background: var(--surface); box-shadow: inset 0 0 0 2px var(--ok); }
.door.is-mine .door-n { color: var(--ok); }
@media (max-width: 1100px) { .doors { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
    .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .door { min-height: 190px; padding: 14px 14px 16px; }
}

/* -------------------------------------------------------------- Mouvement réduit */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}