/*
 * DigitalSky — thème du one-page.
 *
 * Un ciel de nuit (fond, grille fine, halos) et le bleu ciel de la charte d'origine,
 * les codes du portail PageTree (pilules, lumière qui suit le pointeur, illustrations
 * inclinées en 3D) et ceux de Laravel (Instrument Sans, étiquettes en monospace,
 * bordures nettes, une touche de rouge #FF2D20).
 *
 *  1. Polices et tokens (contrastes WCAG AA vérifiés sur --bg et --surface)
 *  2. Base
 *  3. Logo
 *  4. En-tête et menu
 *  5. Éléments communs (titres, boutons, cartes)
 *  6. Blocs DigitalSky (ds-*)
 *  7. Illustrations (bannière, arbre PageTree)
 *  8. Blocs PageTree intégrés (ptb-*)
 *  9. Pied de page, pages annexes
 * 10. Mouvement réduit
 */

/* 1. Polices et tokens ---------------------------------------------------- */

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-latin-wght.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Instrument Sans";
    src: url("../fonts/instrument-sans-latin-wght.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/jetbrains-mono-latin-wght.woff2") format("woff2");
    font-weight: 100 800;
    font-display: swap;
}

:root {
    color-scheme: dark;

    --bg: #060d18;
    --bg-soft: #0a1424;
    --surface: #0d1a2c;
    --surface-2: #12233a;
    --border: #1c2f48;
    --border-strong: #2c4766;
    --text: #e8f1fa;            /* 17:1 sur --bg */
    --text-soft: #c4d4e4;       /* 12:1 */
    --muted: #93a8bf;           /* 7,9:1 sur --bg, 6,9:1 sur --surface */
    --accent: #38b6f0;          /* bleu ciel, 8,5:1 */
    --accent-strong: #6fd0ff;
    --accent-ink: #04121f;      /* texte sur --accent, 8,5:1 */
    --laravel: #ff2d20;         /* décor uniquement */
    --laravel-soft: #ff6b5e;    /* texte, 7:1 */
    --violet: #a78bfa;
    --sky-text: linear-gradient(100deg, #6fd0ff 0%, #38b6f0 45%, #d9f3ff 100%);

    --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-title: "Instrument Sans", "Inter", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --step--2: .78rem;
    --step--1: clamp(.875rem, .85rem + .1vw, .9375rem);
    --step-0: clamp(1rem, .97rem + .15vw, 1.0625rem);
    --step-1: clamp(1.15rem, 1.08rem + .35vw, 1.35rem);
    --step-2: clamp(1.4rem, 1.25rem + .7vw, 1.8rem);
    --step-3: clamp(2rem, 1.6rem + 1.9vw, 3.1rem);
    --step-4: clamp(2.6rem, 1.8rem + 3.8vw, 4.6rem);

    --container: 1180px;
    --gutter: 16px;
    --section: clamp(4rem, 2.5rem + 6vw, 8rem);
    --radius-s: 10px;
    --radius: 16px;
    --radius-l: 24px;
    --header-h: 72px;
    --ease: cubic-bezier(.2, .8, .2, 1);

    /* Blocs PageTree intégrés */
    --ptb-primary: var(--accent);
    --ptb-primary-contrast: var(--accent-ink);
    --ptb-secondary: var(--surface-2);
    --ptb-secondary-contrast: var(--text);
    --ptb-light: var(--surface);
    --ptb-light-contrast: var(--text);
    --ptb-dark: var(--bg-soft);
    --ptb-dark-contrast: var(--text);
    --ptb-border: var(--border);
    --ptb-muted: var(--muted);
    --ptb-radius: var(--radius);
    --ptb-gap: 1.5rem;
    --ptb-space-s: 1rem;
    --ptb-space-m: 2rem;
    --ptb-space-l: var(--section);
    --ptb-space-xl: calc(var(--section) * 1.3);
    --ptb-container: var(--container);
}

@media (min-width: 768px) {
    :root { --gutter: 28px; }
}

/* 2. Base ----------------------------------------------------------------- */

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

html {
    background: var(--bg);
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
    position: relative;
    margin: 0;
    min-height: 100vh;
    overflow-x: clip;
    background:
        radial-gradient(ellipse 70% 45% at 78% 6%, rgb(56 182 240 / .16), transparent 70%),
        radial-gradient(ellipse 50% 35% at 8% 40%, rgb(167 139 250 / .07), transparent 70%),
        linear-gradient(rgb(255 255 255 / .028) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, rgb(255 255 255 / .028) 1px, transparent 1px) 0 0 / 40px 40px,
        var(--bg);
    color: var(--text);
    font: 400 var(--step-0)/1.65 var(--font-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.sky-glow {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(90px);
}

.sky-glow--a { top: -220px; right: -180px; width: 620px; height: 360px; background: #1b6fa8; opacity: .45; }
.sky-glow--b { top: 1700px; left: -260px; width: 640px; height: 380px; background: #1b5f8f; opacity: .3; }

.site-header, .site-main, .site-footer { position: relative; z-index: 1; }
.site-header { z-index: 50; }

h1, h2, h3, h4 {
    margin: 0 0 .5em;
    font-family: var(--font-title);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
    text-wrap: balance;
}

h1 { font-size: var(--step-4); line-height: 1.04; letter-spacing: -.025em; }
h2 { font-size: var(--step-3); letter-spacing: -.02em; }
h3 { font-size: var(--step-1); letter-spacing: -.01em; }

h1 em, h2 em {
    font-style: normal;
    background: var(--sky-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; display: block; }

a {
    color: var(--accent-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover { color: var(--text); }

::selection { background: rgb(56 182 240 / .35); color: #fff; }

:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 3px;
    border-radius: 6px;
}

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

.skip-link {
    position: absolute;
    left: 16px; top: -100px;
    z-index: 100;
    padding: .6rem 1rem;
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: var(--radius-s);
    font-weight: 600;
}

.skip-link:focus { top: 12px; color: var(--accent-ink); }

/* 3. Logo ----------------------------------------------------------------- */

/* « Digital » fin, « Sky » gras, le nuage au trait part du « S » (charte d'origine) */
.logo {
    display: inline-flex;
    flex-direction: column;
    gap: .2rem;
    color: var(--text);
    line-height: 1;
}

.logo__word {
    display: inline-flex;
    align-items: baseline;
    padding-top: .7em;
    font-family: var(--font-text);
    font-size: 1.6rem;
    letter-spacing: -.03em;
    white-space: nowrap;
}

.logo__digital { font-weight: 350; }

.logo__sky {
    position: relative;
    margin-left: .04em;
    font-weight: 800;
    letter-spacing: -.04em;
}

/* Le nuage au trait, posé sur « Sky » */
.logo__cloud {
    position: absolute;
    left: -.02em;
    bottom: .64em;
    width: 1.72em;
    height: 1.03em;
    overflow: visible;
}

.logo__cloud path {
    fill: none;
    stroke: currentColor;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .2s var(--ease);
}

.logo__tagline {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

/* 4. En-tête et menu ------------------------------------------------------ */

.site-header {
    position: sticky;
    top: 0;
    border-bottom: 1px solid transparent;
    transition: background-color .3s var(--ease), border-color .3s var(--ease);
}

.site-header.is-scrolled {
    background: rgb(6 13 24 / .78);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom-color: var(--border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: var(--container);
    height: var(--header-h);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.brand {
    margin-right: auto;
    color: var(--text);
    text-decoration: none;
}

.brand:hover { color: var(--text); }
.brand:hover .logo__cloud path { stroke: var(--accent); }

.site-nav__list {
    display: flex;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__list a {
    display: block;
    padding: .45rem .9rem;
    border-radius: 999px;
    color: var(--muted);
    font-size: var(--step--1);
    font-weight: 500;
    text-decoration: none;
    transition: color .2s var(--ease), background-color .2s var(--ease);
}

.site-nav__list a:hover,
.site-nav__list a.is-current {
    color: var(--text);
    background: var(--surface-2);
}

.pill-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1.05rem;
    border-radius: 999px;
    color: var(--accent-strong);
    font-size: var(--step--1);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1.5px rgb(56 182 240 / .55);
    transition: color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}

.pill-cta span { transition: transform .2s var(--ease); }

.pill-cta:hover {
    color: var(--accent-ink);
    background: var(--accent);
    box-shadow: 0 6px 22px rgb(56 182 240 / .35);
}

.pill-cta:hover span { transform: translateX(3px); }

.nav-toggle {
    display: none;
    width: 44px; height: 44px;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    cursor: pointer;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
    display: block;
    width: 16px; height: 2px;
    margin: 0 auto;
    background: currentColor;
    border-radius: 2px;
    transition: transform .2s var(--ease), background-color .2s;
}

.nav-toggle__bar { position: relative; }
.nav-toggle__bar::before, .nav-toggle__bar::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bar::before { top: -5px; }
.nav-toggle__bar::after { top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 899px) {
    .nav-toggle { display: block; }
    .logo__word { font-size: 1.4rem; }

    .site-nav {
        position: fixed;
        inset: var(--header-h) 0 auto 0;
        display: none;
        padding: .75rem var(--gutter) 1.5rem;
        background: rgb(6 13 24 / .97);
        border-bottom: 1px solid var(--border);
    }

    .site-nav.is-open { display: block; }
    .site-header:has(.site-nav.is-open) { background: rgb(6 13 24 / .97); border-bottom-color: var(--border); }
    .site-nav__list { flex-direction: column; gap: .25rem; }
    .site-nav__list a { padding: .85rem 1rem; font-size: var(--step-0); border-radius: var(--radius-s); }
}

@media (max-width: 359px) {
    .site-header__cta { display: none; }
}

/* 5. Éléments communs ----------------------------------------------------- */

.ds-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.ds-section { position: relative; padding-block: var(--section); }

/* Filet de section avec un repère à gauche, à la manière de Laravel */
.ds-section:not(.ds-hero):not(.page-message) > .ds-container::before {
    content: "";
    display: block;
    height: 1px;
    margin: calc(-1 * clamp(2.5rem, 2rem + 2vw, 4rem)) 0 clamp(2.5rem, 2rem + 2vw, 4rem);
    background:
        linear-gradient(var(--accent), var(--accent)) left center / 24px 1px no-repeat,
        linear-gradient(90deg, var(--border-strong), var(--border) 30%, transparent);
}

.ds-head { max-width: 50rem; margin-bottom: clamp(2.25rem, 1.75rem + 2vw, 3.5rem); }

.ds-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 1.1rem;
    color: var(--accent-strong);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ds-eyebrow__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--laravel);
    box-shadow: 0 0 0 4px rgb(255 45 32 / .18);
}

.ds-title { font-size: var(--step-3); }

.ds-lead {
    max-width: 62ch;
    color: var(--muted);
    font-size: var(--step-1);
    line-height: 1.55;
}

.ds-head .ds-lead:last-child { margin-bottom: 0; }

.ds-note {
    margin: 1.1rem 0 0;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .02em;
}

/* Boutons */
.ds-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 2.25rem 0 0;
}

.ds-actions--center { justify-content: center; }

.ds-btn,
.ptb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 50px;
    padding: .8rem 1.6rem;
    border: 0;
    border-radius: var(--radius-s);
    font: 650 var(--step-0)/1.2 var(--font-text);
    text-decoration: none;
    transition: background-color .15s var(--ease), color .15s var(--ease), box-shadow .2s var(--ease), transform .15s var(--ease);
}

.ds-btn--primary,
.ptb-btn--primary {
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: 0 8px 26px rgb(56 182 240 / .28), inset 0 1px 0 rgb(255 255 255 / .25);
}

.ds-btn--primary:hover,
.ptb-btn--primary:hover {
    background: var(--accent-strong);
    color: var(--accent-ink);
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgb(56 182 240 / .38), inset 0 1px 0 rgb(255 255 255 / .3);
}

.ds-btn--ghost,
.ptb-btn--outline,
.ptb-btn--secondary {
    background: rgb(13 26 44 / .6);
    color: var(--text);
    box-shadow: inset 0 0 0 1.5px var(--border-strong);
}

.ds-btn--ghost:hover,
.ptb-btn--outline:hover,
.ptb-btn--secondary:hover {
    color: var(--text);
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1.5px var(--accent);
}

@media (max-width: 479px) {
    .ds-hero .ds-btn, .ds-contact .ds-btn { width: 100%; }
}

/* Cartes, avec la lumière qui suit le pointeur (--mx / --my, theme.js) */
.ds-grid {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 720px) {
    .ds-grid--2, .ds-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
    .ds-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ds-card {
    position: relative;
    overflow: hidden;
    padding: clamp(1.4rem, 1.1rem + 1vw, 2.1rem);
    background: rgb(13 26 44 / .82);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}

.ds-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), rgb(56 182 240 / .13), transparent 70%);
    opacity: 0;
    transition: opacity .3s var(--ease);
    pointer-events: none;
}

.ds-card > * { position: relative; }

.ds-card:hover {
    transform: translateY(-4px);
    border-color: rgb(56 182 240 / .5);
    background: rgb(18 35 58 / .92);
    box-shadow: 0 16px 38px rgb(0 0 0 / .38), 0 0 0 1px rgb(56 182 240 / .12);
}

.ds-card:hover::before { opacity: 1; }

.ds-card__icon {
    width: 28px; height: 28px;
    margin-bottom: 1.1rem;
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .3s var(--ease), filter .3s var(--ease);
}

.ds-card:hover .ds-card__icon { transform: scale(1.12) rotate(-4deg); filter: drop-shadow(0 0 6px rgb(111 208 255 / .6)); }

.ds-card__title { font-size: var(--step-1); }
.ds-card p { color: var(--muted); }
.ds-card p:last-child { margin-bottom: 0; }

.ds-checks {
    display: grid;
    gap: .45rem;
    margin: 1.25rem 0 0;
    padding: 1.1rem 0 0;
    border-top: 1px dashed var(--border);
    list-style: none;
    font-size: var(--step--1);
    color: var(--text-soft);
}

.ds-checks li { position: relative; padding-left: 1.5rem; }

.ds-checks li::before {
    content: "";
    position: absolute;
    left: 0; top: .42em;
    width: .8rem; height: .45rem;
    border-left: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(-45deg);
}

/* 6. Blocs DigitalSky ----------------------------------------------------- */

/* Bannière */
.ds-hero { padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem) clamp(3rem, 2rem + 4vw, 5rem); }

.ds-hero__grid {
    display: grid;
    gap: clamp(2.5rem, 2rem + 3vw, 4rem);
    align-items: center;
}

@media (min-width: 960px) {
    .ds-hero__grid { grid-template-columns: 1.05fr 1fr; }
}

.ds-hero__title { max-width: 14ch; margin-bottom: 1.5rem; }

.ds-hero__lead {
    max-width: 56ch;
    color: var(--text-soft);
    font-size: var(--step-1);
    line-height: 1.55;
}

.ds-hero__note::before { content: "✓  "; color: var(--accent); }

.ds-hero__image { border-radius: var(--radius-l); }

.ds-hero__visual { min-width: 0; perspective: 1400px; }

.ds-stack {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: clamp(3rem, 2rem + 3vw, 4.5rem) 0 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--border);
    list-style: none;
}

.ds-stack li {
    padding: .35rem .85rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgb(13 26 44 / .6);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--step--2);
}

/* Réalisations */
.ds-case { display: flex; flex-direction: column; }

.ds-case::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--sky-text);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--ease);
}

.ds-case:hover::after { transform: scaleX(1); }

.ds-case__image {
    margin: calc(-1 * clamp(1.4rem, 1.1rem + 1vw, 2.1rem)) calc(-1 * clamp(1.4rem, 1.1rem + 1vw, 2.1rem)) 1.4rem;
    max-width: none;
    width: calc(100% + 2 * clamp(1.4rem, 1.1rem + 1vw, 2.1rem));
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.ds-case__client {
    margin: 0 0 .5rem;
    color: var(--laravel-soft);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ds-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.ds-tags li {
    padding: .2rem .6rem;
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text-soft);
    font-family: var(--font-mono);
    font-size: var(--step--2);
}

.ds-case__link { margin: auto 0 0; padding-top: 1.25rem; font-weight: 600; font-size: var(--step--1); }
.ds-case__link a { text-decoration: none; }
.ds-case__link a::after { content: " ↗"; display: inline-block; transition: transform .2s var(--ease); }
.ds-case__link a:hover::after { transform: translate(2px, -2px); }

.ds-cases__more { margin: 2rem 0 0; color: var(--muted); font-size: var(--step--1); }

/* Produit édité */
.ds-product__panel {
    position: relative;
    display: grid;
    gap: 2.5rem;
    align-items: center;
    padding: clamp(1.5rem, 1rem + 3.5vw, 4rem);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    background:
        radial-gradient(ellipse 60% 70% at 85% 30%, rgb(56 182 240 / .16), transparent 70%),
        linear-gradient(rgb(255 255 255 / .03) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(90deg, rgb(255 255 255 / .03) 1px, transparent 1px) 0 0 / 28px 28px,
        var(--bg-soft);
}

.ds-product__panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

@media (min-width: 960px) {
    .ds-product__panel { grid-template-columns: 1fr 1.1fr; }
}

.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1.25rem;
    padding: .35rem .85rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    color: var(--text-soft);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ds-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }

.ds-product__features {
    display: grid;
    gap: .9rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}

.ds-product__features li {
    display: grid;
    gap: .1rem;
    padding-left: 1rem;
    border-left: 2px solid var(--border-strong);
    transition: border-color .2s var(--ease);
}

.ds-product__features li:hover { border-left-color: var(--accent); }
.ds-product__features strong { font-weight: 600; }
.ds-product__features span { color: var(--muted); font-size: var(--step--1); }

.ds-product__visual { min-width: 0; perspective: 1400px; }

/* Autres plugins, sous le produit : volontairement plus discrets que lui */
.ds-others {
    margin-top: 1.75rem;
    padding: 0 clamp(.25rem, 1.5vw, 1rem);
}

.ds-others__title {
    margin: 0 0 .9rem;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ds-others__list {
    display: grid;
    gap: .9rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 720px) {
    .ds-others__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ds-others__list li { display: grid; gap: .15rem; }

.ds-others__name {
    color: var(--text-soft);
    font-size: var(--step--1);
    font-weight: 600;
    text-decoration: none;
}

a.ds-others__name::after { content: " ↗"; color: var(--muted); font-weight: 400; }
a.ds-others__name:hover, a.ds-others__name:focus-visible { color: var(--accent-strong); }
.ds-others__text { color: var(--muted); font-size: var(--step--2); line-height: 1.5; }
.ds-product__image { border-radius: var(--radius); }

/* Étapes */
.ds-steps__list {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 720px) {
    .ds-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
    .ds-steps__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
    .ds-steps__item { border-radius: 0 !important; }
    .ds-steps__item + .ds-steps__item { border-left: 0; }
    .ds-steps__item:first-child { border-radius: var(--radius) 0 0 var(--radius)!important; }
    .ds-steps__item:last-child { border-radius: 0 var(--radius) var(--radius) 0 !important; }
}

.ds-steps__item {
    position: relative;
    padding: 1.6rem 1.5rem 1.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgb(13 26 44 / .6);
    transition: background-color .25s var(--ease);
}

.ds-steps__item:hover { background: rgb(18 35 58 / .9); }

.ds-steps__item p { margin: 0; color: var(--muted); font-size: var(--step--1); }

.ds-steps__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.6rem;
    height: 2.6rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    color: var(--accent-strong);
    font: 500 var(--step--1)/1 var(--font-mono);
    transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}

.ds-steps__item:hover .ds-steps__number { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* Contact */
.ds-contact__panel {
    position: relative;
    /* max-width: 54rem; */
    margin: 0 auto;
    padding: clamp(2.5rem, 2rem + 4vw, 5rem) clamp(1.25rem, 1rem + 4vw, 5rem);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    background:
        radial-gradient(ellipse 80% 90% at 50% 120%, rgb(56 182 240 / .32), transparent 70%),
        var(--bg-soft);
    text-align: center;
}

.ds-contact__panel > :not(svg) { position: relative; }
.ds-contact__panel .ds-lead { margin-inline: auto; color: var(--text-soft); }

.ds-contact__cloud {
    position: absolute;
    right: -30px; top: -20px;
    width: 260px;
    opacity: .5;
    overflow: visible;
}

.ds-contact__cloud path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}

.js-motion .ds-contact__cloud path { stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease) .2s; }
.js-motion .ds-contact .is-visible .ds-contact__cloud path { stroke-dashoffset: 0; }

.ds-contact__email { margin: 1.5rem 0 0; font-family: var(--font-mono); font-size: var(--step--1); }
.ds-contact__note { margin: .5rem 0 0; color: var(--muted); font-size: var(--step--1); }

/* Avis PageTree (composant feedbackForm, page /pagetree/feedback) */
.ds-feedback__panel { max-width: 46rem; margin: 0 auto; }
.ds-feedback .ds-title { font-size: var(--step-3); }

.ds-form {
    display: grid;
    gap: 1.5rem;
    margin-top: 2.25rem;
    padding: clamp(1.4rem, 1.1rem + 1.5vw, 2.5rem);
    background: rgb(13 26 44 / .82);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
}

.ds-form__field { display: grid; gap: .5rem; min-width: 0; margin: 0; padding: 0; border: 0; }
legend.ds-form__label { margin-bottom: .6rem; }

.ds-form__label {
    padding: 0;
    color: var(--text);
    font-weight: 600;
    line-height: 1.35;
}

.ds-form__input {
    width: 100%;
    padding: .8rem 1rem;
    background: var(--bg-soft);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-s);
    color: var(--text);
    font: inherit;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}

textarea.ds-form__input { min-height: 8rem; resize: vertical; }
.ds-form__input:hover { border-color: var(--muted); }

.ds-form__input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgb(56 182 240 / .3);
}

/* Réponses en pilules, comme le menu */
.ds-form__choices { display: flex; flex-wrap: wrap; gap: .5rem; }

.ds-form__choice { position: relative; cursor: pointer; }

.ds-form__choice input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.ds-form__choice span {
    display: inline-block;
    min-width: 6.5rem;
    padding: .65rem 1.2rem;
    border-radius: 999px;
    background: var(--bg-soft);
    box-shadow: inset 0 0 0 1.5px var(--border-strong);
    color: var(--text-soft);
    font-weight: 500;
    text-align: center;
    transition: color .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease);
}

.ds-form__choice:hover span { color: var(--text); box-shadow: inset 0 0 0 1.5px var(--accent); }
.ds-form__choice input:checked + span { background: var(--accent); color: var(--accent-ink); box-shadow: none; font-weight: 650; }
.ds-form__choice input:focus-visible + span { outline: 2px solid var(--accent-strong); outline-offset: 3px; }

.ds-form__hint { margin: 0; color: var(--muted); font-size: var(--step--1); }

.ds-form__error {
    margin: 0;
    color: var(--laravel-soft);
    font-size: var(--step--1);
    font-weight: 500;
}

.ds-form__error:empty { display: none; }

.ds-form__alert {
    padding: .85rem 1rem;
    border: 1px solid rgb(255 107 94 / .5);
    border-radius: var(--radius-s);
    background: rgb(255 45 32 / .08);
    color: var(--laravel-soft);
    font-size: var(--step--1);
}

.ds-form__alert:empty { display: none; }
.ds-form .ds-actions { margin: 0; }

/* Champ piège pour les robots, hors de l'écran */
.ds-form__trap {
    position: absolute !important;
    left: -10000px;
    width: 1px; height: 1px;
    overflow: hidden;
}

.ds-form__thanks {
    margin-top: 2.25rem;
    padding: clamp(2rem, 1.5rem + 3vw, 3.5rem) clamp(1.4rem, 1.1rem + 1.5vw, 2.5rem);
    border: 1px solid rgb(56 182 240 / .5);
    border-radius: var(--radius-l);
    background:
        radial-gradient(ellipse 80% 90% at 50% 120%, rgb(56 182 240 / .25), transparent 70%),
        var(--bg-soft);
    text-align: center;
}

.ds-form__thanks-icon {
    width: 44px; height: 44px;
    margin: 0 auto 1rem;
    padding: 9px;
    border-radius: 50%;
    background: var(--accent);
    fill: none;
    stroke: var(--accent-ink);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ds-form__thanks-title { font-size: var(--step-2); }
.ds-form__thanks p { margin: 0; color: var(--text-soft); }

@media (max-width: 479px) {
    .ds-form .ds-btn { width: 100%; }
    .ds-form__choice { flex: 1 1 0; }
    .ds-form__choice span { min-width: 0; width: 100%; }
}

/* 7. Illustrations -------------------------------------------------------- */

.tilt { transform-style: preserve-3d; }

/* Bannière : fenêtre de code, site dans un navigateur, nuage du logo */
.sky-art {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    transform: rotateX(calc(8deg + var(--ty, 0deg))) rotateY(calc(-10deg + var(--tx, 0deg)));
    transform-origin: 50% 50%;
    transition: transform .6s var(--ease);
    filter: drop-shadow(0 30px 50px rgb(0 0 0 / .45));
}

.sa-halo { fill: var(--accent); opacity: .07; filter: blur(40px); }
.sa-window { fill: #0b1729; stroke: var(--border-strong); stroke-width: 1; }
.sa-window--front { fill: #0f1d31; stroke: #36587c; }
.sa-rule { fill: var(--border-strong); }
.sa-file { fill: var(--muted); font: 500 11px var(--font-mono); }
.sa-code { fill: var(--text-soft); font: 400 12.5px var(--font-mono); white-space: pre; }
.sa-code .k { fill: var(--laravel-soft); }
.sa-code .c { fill: var(--accent-strong); }
.sa-code .v { fill: #c4b5fd; }
.sa-code .s { fill: #fcd34d; }
.sa-code .f { fill: #86efac; }
.sa-code .m { fill: #5e7690; font-style: italic; }
.sa-caret { fill: var(--accent); }
.sa-bar { fill: #13243c; }
.sa-url { fill: #0a1626; }
.sa-url-text { fill: var(--muted); font: 500 9.5px var(--font-mono); }
.sa-block { fill: #14263f; stroke: #24405f; }
.sa-block--active { stroke: var(--accent); stroke-dasharray: 5 4; }
.sa-line { fill: #2c4766; }
.sa-chip { fill: rgb(13 26 44 / .92); stroke: var(--border-strong); }
.sa-chip__text { fill: var(--text-soft); font: 500 12px var(--font-mono); }

.sa-cloud path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sa-cloud__line { stroke: url(#sa-cloud); stroke-width: 4; stroke-dasharray: 1; }
.sa-cloud__glow { stroke: var(--accent); stroke-width: 10; opacity: .25; filter: url(#sa-blur); }

/* Arbre PageTree (repris du portail, aux couleurs du ciel) */
.tree {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    transform: rotateX(calc(30deg + var(--ty, 0deg))) rotateY(var(--tx, 0deg)) rotateZ(-3deg);
    transform-origin: 50% 60%;
    transition: transform .6s var(--ease);
    filter: drop-shadow(0 20px 40px rgb(0 0 0 / .4));
}

.t-cursor { fill: #fff; stroke: var(--bg); stroke-width: 1.2; stroke-linejoin: round; opacity: 0; }
.t-card { fill: var(--surface-2); stroke: #2a4566; stroke-width: 1; }
.t-line { fill: #36547a; }
.t-line--dim { fill: #273f5c; }
.t-badge { fill: var(--accent); }
.t-link path { fill: none; stroke: #2a6a96; stroke-width: 2; stroke-dasharray: 1; }
.t-flow path { fill: none; stroke: var(--accent-strong); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 10 420; opacity: .9; }
.t-glyph { fill: #fff; font: 700 15px var(--font-text); }
.t-dot { fill: #36547a; }
.t-media { fill: #1e4a6e; }
.t-mountain { fill: #5c9cc4; }
.t-sun { fill: #fcd34d; }
.t-shine { fill: url(#t-shine-gradient); transform-box: fill-box; transform: translateX(-110%); }
.t-halo { fill: var(--accent); opacity: .05; filter: blur(30px); transform-box: fill-box; transform-origin: center; }

@media (max-width: 959px) {
    .tree { transform: rotateX(22deg) rotateZ(-2deg); }
    .sky-art { transform: rotateX(6deg) rotateY(-6deg); }
}

@keyframes ds-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ds-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ds-blink { 50% { opacity: 0; } }
@keyframes ds-glow { 0%, 100% { opacity: .18; } 50% { opacity: .38; } }
@keyframes ds-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@keyframes t-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes t-glow { 0%, 70%, 100% { stroke: #2a4566; } 80% { stroke: var(--accent); } }
@keyframes t-sweep { 0% { transform: translateX(-110%); } 30%, 100% { transform: translateX(110%); } }
@keyframes t-flow { from { stroke-dashoffset: 430; } to { stroke-dashoffset: 0; } }
@keyframes t-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes t-halo { 0%, 100% { opacity: .04; transform: scale(1); } 50% { opacity: .09; transform: scale(1.06); } }
@keyframes t-swap-a-lift {
    0%, 14% { transform: translate(0, 0) scale(1); filter: none; }
    20% { transform: translate(0, -14px) scale(1.1); filter: drop-shadow(0 14px 12px rgba(0,0,0,.55)); }
    38% { transform: translate(-140px, -14px) scale(1.1); filter: drop-shadow(0 14px 12px rgba(0,0,0,.55)); }
    44%, 64% { transform: translate(-140px, 0) scale(1); filter: none; }
    70% { transform: translate(-140px, -14px) scale(1.1); filter: drop-shadow(0 14px 12px rgba(0,0,0,.55)); }
    88% { transform: translate(0, -14px) scale(1.1); filter: drop-shadow(0 14px 12px rgba(0,0,0,.55)); }
    94%, 100% { transform: translate(0, 0) scale(1); filter: none; }
}
@keyframes t-swap-a { 0%, 24% { transform: translate(0, 0); } 38%, 74% { transform: translate(140px, 0); } 88%, 100% { transform: translate(0, 0); } }
@keyframes t-swap-b-lift {
    0%, 14% { transform: translate(0, 0) scale(1); filter: none; }
    20% { transform: translate(0, -14px) scale(1.1); filter: drop-shadow(0 14px 12px rgba(0,0,0,.55)); }
    36% { transform: translate(-80px, -14px) scale(1.1); filter: drop-shadow(0 14px 12px rgba(0,0,0,.55)); }
    42%, 64% { transform: translate(-80px, 0) scale(1); filter: none; }
    70% { transform: translate(-80px, -14px) scale(1.1); filter: drop-shadow(0 14px 12px rgba(0,0,0,.55)); }
    86% { transform: translate(0, -14px) scale(1.1); filter: drop-shadow(0 14px 12px rgba(0,0,0,.55)); }
    92%, 100% { transform: translate(0, 0) scale(1); filter: none; }
}
@keyframes t-swap-b { 0%, 22% { transform: translate(0, 0); } 36%, 74% { transform: translate(80px, 0); } 86%, 100% { transform: translate(0, 0); } }
@keyframes t-cursor {
    0%, 12% { opacity: 0; transform: translate(10px, 10px); }
    18%, 40% { opacity: 1; transform: translate(0, 0); }
    46%, 66% { opacity: 0; transform: translate(0, 0); }
    70%, 90% { opacity: 1; transform: translate(0, 0); }
    96%, 100% { opacity: 0; transform: translate(10px, 10px); }
}
@keyframes t-tilt { 0%, 100% { transform: rotateX(0deg); } 50% { transform: rotateX(3deg); } }

@media (prefers-reduced-motion: no-preference) {
    .ds-hero__body > * { animation: ds-enter .7s var(--ease) both; }
    .ds-hero__body > :nth-child(2) { animation-delay: .08s; }
    .ds-hero__body > :nth-child(3) { animation-delay: .16s; }
    .ds-hero__body > :nth-child(n+4) { animation-delay: .24s; }

    .sa-float { animation: ds-float 7s ease-in-out var(--d, 0s) infinite; }
    .sa-cloud__line { animation: ds-draw 2.2s var(--ease) .3s both; }
    .sa-cloud__glow { animation: ds-glow 5s ease-in-out 2.5s infinite; }
    .sa-caret { animation: ds-blink 1.1s steps(1) infinite; }

    .t-node { transform-box: fill-box; transform-origin: center; animation: t-float 6s ease-in-out calc(var(--i) * .35s) infinite; }
    .t-node .t-card { animation: t-glow 7s ease-in-out calc(1s + var(--i) * .55s) infinite; }
    .t-node .t-shine { animation: t-sweep 7s ease-in-out calc(1s + var(--i) * .55s) infinite; }
    .t-flow path { animation: t-flow 3.2s linear calc(var(--i) * -.8s) infinite; }
    .t-badge { animation: t-pulse 2.4s ease-in-out calc(var(--i) * .3s) infinite; }
    .t-halo { animation: t-halo 9s ease-in-out infinite; }
    .t-move { transform-box: fill-box; transform-origin: center; }
    .t-swap-a-lift { animation: t-swap-a-lift 12s cubic-bezier(.45, 0, .25, 1) 2s infinite; }
    .t-swap-a { animation: t-swap-a 12s cubic-bezier(.45, 0, .25, 1) 2s infinite; }
    .t-swap-b-lift { animation: t-swap-b-lift 12s cubic-bezier(.45, 0, .25, 1) 8s infinite; }
    .t-swap-b { animation: t-swap-b 12s cubic-bezier(.45, 0, .25, 1) 8s infinite; }
    .t-swap-a-lift .t-cursor { animation: t-cursor 12s ease-in-out 2s infinite; }
    .t-swap-b-lift .t-cursor { animation: t-cursor 12s ease-in-out 8s infinite; }
    .ds-product .tilt { animation: t-tilt 14s ease-in-out infinite; }
}

/* 8. Blocs PageTree intégrés ---------------------------------------------- */

.ptb-section__inner { padding-inline: var(--gutter); }

.ptb-accordion { max-width: 52rem; margin-inline: auto; }

.ptb-accordion__title { font-size: var(--step-3); margin-bottom: 2rem; text-align: center; }

.ptb-accordion__item {
    margin-bottom: .6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    background: rgb(13 26 44 / .7);
    transition: border-color .2s var(--ease), background-color .2s var(--ease);
}

.ptb-accordion__item:hover,
.ptb-accordion__item[open] { border-color: var(--border-strong); background: var(--surface); }

.ptb-accordion__question {
    padding: 1.1rem 3rem 1.1rem 1.25rem;
    font-family: var(--font-title);
    font-size: var(--step-1);
    font-weight: 600;
    letter-spacing: -.01em;
    cursor: pointer;
}

.ptb-accordion__answer { padding: 0 1.25rem 1.25rem; color: var(--muted); }
.ptb-accordion__answer p:last-child { margin-bottom: 0; }

.ptb-title { color: var(--text); }
.pagetree-text { max-width: 72ch; color: var(--text-soft); }
.pagetree-text h2 { font-size: var(--step-2); margin: 2.5rem 0 .75rem; }
.pagetree-text h3 { font-size: var(--step-1); margin: 2rem 0 .5rem; }
.layout-default .ptb-title { margin-bottom: 1.5rem; }

/* 9. Pied de page, pages annexes ------------------------------------------ */

.site-footer {
    margin-top: var(--section);
    border-top: 1px solid var(--border);
    background: linear-gradient(rgb(10 20 36 / 0), var(--bg-soft));
    color: var(--muted);
    font-size: var(--step--1);
}

.layout-onepage .site-footer { margin-top: 0; }

.site-footer__inner {
    display: grid;
    gap: 2.5rem;
    max-width: var(--container);
    margin: 0 auto;
    padding: 4rem var(--gutter) 2.5rem;
}

@media (min-width: 768px) {
    .site-footer__inner { grid-template-columns: 2fr 1fr 1fr; }
}

.site-footer__brand .logo { margin-bottom: 1.25rem; }
.site-footer__brand p { max-width: 44ch; }

.site-footer__title {
    margin: 0 0 1rem;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.site-footer__list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.site-footer__list a, .site-footer__bottom a { color: var(--muted); text-decoration: none; }
.site-footer__list a:hover, .site-footer__bottom a:hover { color: var(--accent-strong); }

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    max-width: var(--container);
    margin: 0 auto;
    padding: 1.25rem var(--gutter) 2rem;
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: var(--step--2);
}

.site-footer__bottom p { margin: 0; }

.page-message { text-align: center; }
.page-message .ds-lead { margin-inline: auto; }

.page-message__code {
    margin: 0;
    font: 600 clamp(5rem, 3rem + 8vw, 9rem)/1 var(--font-title);
    letter-spacing: -.05em;
    background: var(--sky-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Apparition au défilement (classe posée par theme.js) */
.js-motion .ds-section:not(.ds-hero) .ds-container {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.js-motion .ds-section:not(.ds-hero) .ds-container.is-visible { opacity: 1; transform: none; }

/* 10. Mouvement réduit ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .t-flow { display: none; }
}