/* Site officiel StillDeep. Couleurs et polices : tokens --sd-* de StillDeep.Server.Branding (stilldeep.css), jamais un code
   de couleur ici. Theme du systeme par defaut, data-theme sur <html> le fixe. Mouvement en CSS seulement, coupe quand le
   systeme le demande ; le contenu reste visible sans animation (robots, navigateurs anciens). */

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

:root {
    --site-width: 72rem;
    --site-wide: 76rem;
    --site-prose: 46rem;
    --site-gutter: clamp(1rem, 4vw, 2rem);
    --site-gap: clamp(1rem, 2.5vw, 1.5rem);
    --site-header-height: 4.25rem;
    --site-radius: 16px;
    --site-radius-xl: 22px;
    --site-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
    --site-line: color-mix(in srgb, var(--sd-border) 75%, transparent);
    --site-glow: 0 18px 40px -22px color-mix(in srgb, var(--sd-accent) 70%, transparent);
    --site-lift: 0 24px 48px -28px color-mix(in srgb, var(--sd-shadow-ink) 45%, transparent);
    /* Ondes du logo, de la surface vers le fond : les teintes de la charte, plus profonde = plus foncee. */
    --site-wave-1: light-dark(color-mix(in oklab, var(--sd-text-muted) 60%, var(--sd-border)), color-mix(in oklab, var(--sd-text-muted) 50%, var(--sd-text)));
    --site-wave-2: var(--sd-text-muted);
    --site-wave-3: color-mix(in oklab, var(--sd-text-muted) 50%, var(--sd-logo-deep));
    --site-wave-4: var(--sd-logo-deep);
    scroll-padding-top: calc(var(--site-header-height) + 1rem);
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Navigation d'une page a l'autre en fondu, sans script, sauf si le systeme demande moins de mouvement. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--sd-bg);
    color: var(--sd-text);
    font-family: var(--sd-font-sans);
    font-size: 1.0625rem;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img,
svg { max-width: 100%; }

h1,
h2,
h3 { text-wrap: balance; }
p,
li { text-wrap: pretty; }

a {
    color: var(--sd-accent);
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
    outline: 2px solid var(--sd-accent);
    outline-offset: 2px;
    border-radius: var(--sd-radius-sm);
}

::selection { background: var(--sd-accent-soft); color: var(--sd-text); }

code,
pre,
kbd,
.mono { font-family: var(--sd-font-mono); }

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

.skip-link {
    position: absolute;
    left: var(--site-gutter);
    top: -4rem;
    z-index: 100;
    padding: 0.6rem 1rem;
    background: var(--sd-accent);
    color: var(--sd-on-accent);
    border-radius: var(--sd-radius-md);
    font-weight: 700;
}
.skip-link:focus { top: 0.75rem; }

/* Mouvements. Ce qui boucle n'anime que translate, scale ou l'opacite d'un element HTML (compositeur, aucune peinture). */
@keyframes sd-rise {
    from { opacity: 0; translate: 0 14px; }
    to { opacity: 1; translate: 0 0; }
}
/* transform et non translate : sd-rise, deja pose sur ces elements, tient translate ; deux animations sur la meme
   propriete sortent l'element du compositeur (un recalcul de style par image). */
@keyframes sd-float {
    from { transform: translateY(0); }
    to { transform: translateY(-8px); }
}
@keyframes sd-fade { from { opacity: 0; } }
@keyframes sd-draw { to { stroke-dashoffset: 0; } }
@keyframes sd-pulse {
    from { opacity: 0.55; scale: 1; }
    70%, to { opacity: 0; scale: 2.8; }
}
@keyframes sd-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
@keyframes sd-line {
    from { opacity: 0; translate: -10px 0; }
    to { opacity: 1; translate: 0 0; }
}
@keyframes sd-press {
    0%, 86%, 100% { scale: 1; }
    90% { scale: 0.96; }
    94% { scale: 1.02; }
}
@keyframes sd-swap-first {
    0%, 44% { opacity: 1; }
    50%, 94% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes sd-swap-second {
    0%, 44% { opacity: 0; }
    50%, 94% { opacity: 1; }
    100% { opacity: 0; }
}
/* Jamais d'opacite nulle : un robot qui rend la page par capture voit tout le contenu, sans defiler. */
@keyframes sd-reveal {
    from { translate: 0 14px; scale: 0.985; }
    to { translate: 0 0; scale: 1; }
}

/* Icones : un trait SVG du dossier icons/, colore par la couleur du texte (masque). */
.icon {
    display: inline-block;
    flex: none;
    width: 1.15em;
    height: 1.15em;
    background: currentColor;
    mask: var(--icon) center / contain no-repeat;
}
.icon--chevron { --icon: url(icons/chevron.svg); width: 0.95em; height: 0.95em; }
.icon--globe { --icon: url(icons/globe.svg); }
.icon--bag { --icon: url(icons/bag.svg); width: 1.3em; height: 1.3em; }
.icon--menu { --icon: url(icons/menu.svg); width: 1.4em; height: 1.4em; }

[data-icon="offline"] { --icon: url(icons/offline.svg); }
[data-icon="screens"] { --icon: url(icons/screens.svg); }
[data-icon="server"],
[data-icon="module-server"] { --icon: url(icons/server.svg); }
[data-icon="trades"] { --icon: url(icons/trades.svg); }
[data-icon="ticket"],
[data-icon="module-ticketing"] { --icon: url(icons/ticket.svg); }
[data-icon="barcode"] { --icon: url(icons/barcode.svg); }
[data-icon="key"] { --icon: url(icons/key.svg); }
[data-icon="calendar"],
[data-icon="module-service"] { --icon: url(icons/calendar.svg); }
[data-icon="bookmark"] { --icon: url(icons/bookmark.svg); }
[data-icon="card"],
[data-icon="module-fidelity-card"] { --icon: url(icons/card.svg); }
[data-icon="store"],
[data-icon="module-boutique"] { --icon: url(icons/store.svg); }
[data-icon="module-bar-resto"] { --icon: url(icons/utensils.svg); }
[data-icon="pin"],
[data-icon="module-locations"] { --icon: url(icons/pin.svg); }
[data-icon="module-fees"] { --icon: url(icons/percent.svg); }
[data-icon="register"],
[data-icon="module-pos"],
[data-icon="ai-register"] { --icon: url(icons/register.svg); }
[data-icon="leisure"] { --icon: url(icons/leisure.svg); }
[data-icon="scissors"] { --icon: url(icons/scissors.svg); }
[data-icon="code"] { --icon: url(icons/code.svg); }
[data-icon="network"] { --icon: url(icons/network.svg); }
[data-icon="chart"] { --icon: url(icons/chart.svg); }
[data-icon="plug"] { --icon: url(icons/plug.svg); }
[data-icon="book"] { --icon: url(icons/book.svg); }
[data-icon="layout"] { --icon: url(icons/layout.svg); }
[data-icon="extension"] { --icon: url(icons/extension.svg); }
[data-icon="shield"] { --icon: url(icons/shield.svg); }
[data-icon="ai-sparkles"] { --icon: url(icons/sparkles.svg); }
[data-icon="ai-wand"] { --icon: url(icons/wand.svg); }
[data-icon="ai-message"] { --icon: url(icons/message.svg); }
[data-icon="ai-photo"] { --icon: url(icons/photo.svg); }

.icon-badge {
    --badge: var(--sd-accent);
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--badge) 12%, var(--sd-surface));
    border: 1px solid color-mix(in srgb, var(--badge) 22%, transparent);
    color: var(--badge);
}
.icon-badge::before {
    content: "";
    width: 1.35rem;
    height: 1.35rem;
    background: currentColor;
    mask: var(--icon) center / contain no-repeat;
}
.icon-badge[data-icon^="ai-"] { --badge: var(--sd-ai-strong); }

/* En-tete : une rangee sur grand ecran, menu en panneau (popover) en dessous. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--sd-bg) 80%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--site-line);
}
.site-header__inner {
    max-width: var(--site-wide);
    min-height: var(--site-header-height);
    margin: 0 auto;
    padding: 0.5rem var(--site-gutter);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-right: auto;
    color: var(--sd-text);
    text-decoration: none;
    font-size: 1.25rem;
}
.brand__logo { width: 28px; height: 28px; }

.site-header__link,
.site-header__lang {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    padding: 0.35rem 0.6rem;
    border-radius: 10px;
    color: var(--sd-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    transition: background-color 160ms ease, color 160ms ease;
}
.site-header__link:hover,
.site-header__lang:hover { background: var(--sd-surface-2); color: var(--sd-text); }
.site-header__lang-code { display: none; }
.site-header__count {
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--sd-accent);
    color: var(--sd-on-accent);
    font-size: 0.78rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.site-header__menu {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--sd-border);
    border-radius: 12px;
    background: var(--sd-surface);
    color: var(--sd-text);
    cursor: pointer;
}
.site-header__menu:hover { border-color: color-mix(in srgb, var(--sd-accent) 45%, var(--sd-border)); }

.site-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.site-nav__list a,
.site-nav__trigger {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0.7rem 0.8rem;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--sd-text);
    font: inherit;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
}
.site-nav__list a:hover,
.site-nav__trigger:hover { background: var(--sd-surface-2); }
.site-nav__list a[aria-current="page"],
.site-nav__trigger[aria-current] { color: var(--sd-accent-strong); }
.site-nav__trigger .icon { transition: rotate 200ms var(--site-ease); }
.site-nav__group:has(.mega:popover-open) .site-nav__trigger .icon { rotate: 180deg; }

.mega__title {
    margin: 0 0 0.35rem;
    padding: 0 0.8rem;
    color: var(--sd-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.mega__link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 0.8rem;
    border-radius: 12px;
    color: var(--sd-text);
    text-decoration: none;
    transition: background-color 160ms ease;
}
.mega__link:hover { background: var(--sd-surface-2); }
.mega__link[aria-current="page"] .mega__name { color: var(--sd-accent-strong); }
.mega__text { display: grid; gap: 0.1rem; min-width: 0; }
.mega__name { font-weight: 700; }
.mega__hint { color: var(--sd-text-muted); font-size: 0.88rem; line-height: 1.4; white-space: normal; }

.site-header__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* Telephone et tablette : panneau du menu, le groupe Produit deplie dedans. */
@media (max-width: 79.99rem) {
    .site-header__cta { padding-inline: 0.85rem; }
    .site-menu:popover-open {
        position: fixed;
        inset: calc(var(--site-header-height) + 0.5rem) 0.75rem auto;
        width: auto;
        max-width: 34rem;
        max-height: calc(100dvh - var(--site-header-height) - 1.25rem);
        margin: 0 0 0 auto;
        padding: 0.75rem;
        overflow: auto;
        display: grid;
        gap: 0.75rem;
        border: 1px solid var(--sd-border);
        border-radius: var(--site-radius-xl);
        background: var(--sd-surface);
        color: var(--sd-text);
        box-shadow: var(--site-lift), var(--sd-shadow-3);
        opacity: 1;
        translate: 0 0;
        transition: opacity 180ms ease, translate 220ms var(--site-ease), display 220ms allow-discrete, overlay 220ms allow-discrete;
    }
    @starting-style {
        .site-menu:popover-open { opacity: 0; translate: 0 -8px; }
    }
    .site-menu::backdrop { background: color-mix(in srgb, var(--sd-shadow-ink) 18%, transparent); }
    .site-nav__trigger { display: none; }
    .mega {
        display: block;
        position: static;
        inset: auto;
        width: auto;
        height: auto;
        margin: 0 0 0.35rem;
        padding: 0.5rem 0 0.6rem;
        overflow: visible;
        border: 0;
        border-bottom: 1px solid var(--sd-border);
        background: none;
        color: inherit;
    }
    .site-header__tools {
        justify-content: space-between;
        padding: 0.75rem 0.35rem 0.25rem;
        border-top: 1px solid var(--sd-border);
    }
}
@media (max-width: 39.99rem) {
    .site-header__cart-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (max-width: 23.49rem) {
    .site-header__cta { display: none; }
}

/* Grand ecran : tout sur une rangee, le groupe Produit en menu deroulant sous l'en-tete. */
@media (min-width: 80rem) {
    .site-header__inner { gap: 0.35rem; }
    .brand { margin-right: 1rem; }
    .site-header__menu { display: none; }
    .site-menu,
    .site-menu:popover-open { display: contents; }
    .site-nav { order: 1; flex: 1; display: flex; justify-content: center; }
    .site-nav__list { flex-direction: row; align-items: center; gap: 0.1rem; }
    .site-nav__list a,
    .site-nav__trigger { width: auto; padding: 0.45rem 0.75rem; font-size: 0.95rem; color: var(--sd-text-muted); }
    .site-nav__list a:hover,
    .site-nav__trigger:hover { color: var(--sd-text); }
    .site-nav__list a[aria-current="page"],
    .site-nav__trigger[aria-current] { color: var(--sd-text); background: var(--sd-surface-2); }
    .site-header__tools { order: 2; flex-wrap: nowrap; gap: 0.25rem; }
    .site-header__lang-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .site-header__lang-code { display: inline; }
    .site-header__cart { order: 3; }
    .site-header__account,
    .site-header__cta { order: 4; margin-left: 0.25rem; }

    .mega:popover-open {
        position: fixed;
        inset: calc(var(--site-header-height) + 0.4rem) auto auto 50%;
        translate: -50% 0;
        width: min(42rem, calc(100vw - 2rem));
        margin: 0;
        padding: 0.85rem;
        border: 1px solid var(--sd-border);
        border-radius: var(--site-radius-xl);
        background: var(--sd-surface);
        color: var(--sd-text);
        box-shadow: var(--site-lift), var(--sd-shadow-3);
        opacity: 1;
        transition: opacity 160ms ease, translate 200ms var(--site-ease), display 200ms allow-discrete, overlay 200ms allow-discrete;
    }
    @starting-style {
        .mega:popover-open { opacity: 0; translate: -50% -6px; }
    }
    .mega__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Sous son bouton, aligne sur son bord gauche ; sinon centre sous l'en-tete. */
    @supports (anchor-name: --product) {
        .site-nav__trigger { anchor-name: --product; }
        .mega:popover-open {
            position-anchor: --product;
            inset: calc(anchor(bottom) + 0.6rem) auto auto calc(anchor(left) - 0.85rem);
            translate: 0 0;
            position-try-fallbacks: flip-inline;
        }
        @starting-style {
            .mega:popover-open { translate: 0 -6px; }
        }
    }
}

/* Boutons */
.button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.6rem 1.15rem;
    border: 1px solid transparent;
    border-radius: 12px;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 220ms ease, transform 220ms var(--site-ease), filter 180ms ease;
}
.button:hover { text-decoration: none; transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button--primary { background: var(--sd-accent); color: var(--sd-on-accent); box-shadow: var(--sd-shadow-1); }
.button--primary:hover { box-shadow: var(--site-glow); filter: saturate(1.1) brightness(1.04); }
.button--ghost { background: var(--sd-surface); color: var(--sd-text); border-color: var(--sd-border); }
.button--ghost:hover { border-color: color-mix(in srgb, var(--sd-accent) 55%, var(--sd-border)); color: var(--sd-text); box-shadow: var(--sd-shadow-2); }
.button--ai { background: var(--sd-ai); color: var(--sd-on-ai); }
.button--small { min-height: 2.35rem; padding: 0.4rem 0.9rem; font-size: 0.95rem; border-radius: 10px; }
.button:disabled,
.button:disabled:hover {
    background: var(--sd-surface-2);
    color: var(--sd-text-muted);
    border-color: var(--sd-border);
    box-shadow: none;
    filter: none;
    transform: none;
    cursor: not-allowed;
}
.button--large { min-height: 3.2rem; padding: 0.8rem 1.45rem; font-size: 1.05rem; }
.button--arrow::after {
    content: "";
    width: 1.05em;
    height: 1.05em;
    background: currentColor;
    mask: url(icons/arrow.svg) center / contain no-repeat;
    transition: translate 220ms var(--site-ease);
}
.button--arrow:hover::after { translate: 3px 0; }

/* Pages */
.site-main { flex: 1; outline: none; }
.page {
    max-width: var(--site-width);
    margin: 0 auto;
    padding: clamp(2rem, 6vw, 4rem) var(--site-gutter) 5rem;
}
.page--narrow { max-width: 40rem; }
.page-head { max-width: var(--site-prose); margin-bottom: 2rem; }
.page-head--center { margin-inline: auto; text-align: center; }
.page-head h1 {
    margin: 0 0 0.6rem;
    font-size: clamp(2.1rem, 5vw, 3.1rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
    font-weight: 800;
}
.page-head__lead { margin: 0; font-size: 1.15rem; color: var(--sd-text-muted); }
.page-head__code { margin: 0; color: var(--sd-text-muted); font-size: 1.1rem; }

.page-meta {
    margin-top: 3.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--sd-border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    font-size: 0.9rem;
    color: var(--sd-text-muted);
}

/* Pages du client (panier, paiement, compte) : le meme halo que les formulaires */
.site-main:has(> .page > .page-head) {
    background:
        radial-gradient(44rem 20rem at 20% -6rem, color-mix(in srgb, var(--sd-accent) 10%, transparent), transparent 72%),
        var(--sd-bg);
}

/* Formulaires de compte : une carte posee au centre */
.site-main:has(> .page--form) {
    background:
        radial-gradient(40rem 22rem at 50% -6rem, color-mix(in srgb, var(--sd-accent) 13%, transparent), transparent 72%),
        var(--sd-bg);
}
.page--form {
    max-width: 38rem;
    margin: clamp(1.5rem, 6vw, 4rem) auto 4rem;
    padding: clamp(1.5rem, 5vw, 2.75rem);
    border: 1px solid var(--sd-border);
    border-radius: var(--site-radius-xl);
    background: var(--sd-surface);
    box-shadow: var(--site-lift);
    animation: sd-rise 500ms var(--site-ease) both;
}
.page--form.page--narrow { max-width: 30rem; }
@media (max-width: 34.99rem) {
    .page--form { margin-inline: 0.75rem; }
}
.page--form .page-head { margin-bottom: 1.5rem; }
.page--form .page-head h1 { font-size: clamp(1.8rem, 6vw, 2.3rem); }
.page--form .page-head__lead { font-size: 1.02rem; }

/* Accueil : heros en deux colonnes, la vitrine a droite */
.hero {
    position: relative;
    overflow: clip;
    isolation: isolate;
    border-bottom: 1px solid var(--site-line);
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(to right, var(--site-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--site-line) 1px, transparent 1px);
    background-size: 56px 56px;
    mask: radial-gradient(ellipse 75% 70% at 60% 30%, var(--sd-text), transparent 72%);
    opacity: 0.55;
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(42rem 28rem at 78% 18%, color-mix(in srgb, var(--sd-accent) 20%, transparent), transparent 70%),
        radial-gradient(30rem 22rem at 8% 0%, color-mix(in srgb, var(--sd-accent) 9%, transparent), transparent 70%);
}
.hero__inner {
    max-width: var(--site-wide);
    margin: 0 auto;
    padding: clamp(2.5rem, 7vw, 5.5rem) var(--site-gutter) clamp(3rem, 7vw, 5.5rem);
    display: grid;
    gap: clamp(2.5rem, 5vw, 3.5rem);
    align-items: center;
}
@media (min-width: 64rem) {
    .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
}
.hero__copy > * { animation: sd-rise 700ms var(--site-ease) both; }
.hero__copy > :nth-child(2) { animation-delay: 70ms; }
.hero__copy > :nth-child(3) { animation-delay: 140ms; }
.hero__copy > :nth-child(4) { animation-delay: 210ms; }
.hero__copy > :nth-child(5) { animation-delay: 280ms; }
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0.35rem 0.85rem 0.35rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--sd-accent) 30%, var(--sd-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--sd-surface) 75%, transparent);
    color: var(--sd-accent-strong);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.hero__pulse {
    position: relative;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--sd-accent);
}
.hero__pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    animation: sd-pulse 2.6s ease-out infinite;
}
.hero__title {
    margin: 1.1rem 0 0;
    font-size: clamp(2.4rem, 4.6vw, 3.75rem);
    line-height: 1.04;
    letter-spacing: -0.045em;
    font-weight: 800;
}
.hero__accent {
    display: block;
    padding-bottom: 0.06em;
    background: linear-gradient(105deg, var(--sd-accent) 15%, color-mix(in oklab, var(--sd-accent) 45%, var(--sd-logo-deep)) 95%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
.hero__lead {
    max-width: 36rem;
    margin: 1.4rem 0 0;
    color: var(--sd-text-muted);
    font-size: clamp(1.05rem, 1.7vw, 1.22rem);
}
.hero__actions {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
@media (max-width: 34.99rem) {
    .hero__actions .button { flex: 1 1 100%; }
}
.hero__proof {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.4rem;
    color: var(--sd-text-muted);
    font-size: 0.92rem;
    font-weight: 600;
}
.hero__proof li { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero__proof li::before {
    content: "";
    width: 1.05rem;
    height: 1.05rem;
    background: var(--sd-success);
    mask: url(icons/done.svg) center / contain no-repeat;
}

/* Vitrine : la caisse tient la place du signe <$> du logo, au-dessus de sa vague et de ses ondes */
.showcase {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2rem;
}
.showcase__stage {
    position: relative;
    z-index: 1;
    width: min(100%, 31rem);
}
/* Coordonnees et traits du logo (grille de 160) : vague de 5, ondes de 6 au pas de 14. Chaque nom est ecrit dans son
   trait, dans l'encre qui s'y lit : celle du fond sur les ondes 2 et 3, inversee selon le theme sur les ondes 1 et 4. */
.showcase__depth {
    width: min(100%, 36rem);
    margin-top: 0.75rem;
    overflow: visible;
}
.showcase__surface {
    fill: none;
    stroke: var(--sd-accent);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 140;
    stroke-dashoffset: 140;
    animation: sd-draw 1400ms 200ms var(--site-ease) forwards;
}
.showcase__ring {
    fill: none;
    stroke: var(--wave);
    stroke-width: 6;
    stroke-linecap: round;
}
.showcase__layer { animation: sd-fade 700ms var(--enter-delay) var(--site-ease) both; }
.showcase__layer--1 { --wave: var(--site-wave-1); --ink: light-dark(var(--sd-text), var(--sd-bg)); --enter-delay: 700ms; }
.showcase__layer--2 { --wave: var(--site-wave-2); --ink: var(--sd-bg); --enter-delay: 850ms; }
.showcase__layer--3 { --wave: var(--site-wave-3); --ink: var(--sd-bg); --enter-delay: 1000ms; }
.showcase__layer--4 { --wave: var(--site-wave-4); --ink: light-dark(var(--sd-bg), var(--sd-text)); --enter-delay: 1150ms; }
.showcase__label {
    fill: var(--ink);
    font-family: var(--sd-font-sans);
    font-size: 2.6px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-anchor: middle;
    text-transform: uppercase;
}
/* Sur le textPath aussi : propriete non heritee en SVG 1.1, le nom se poserait sur le trace au lieu du milieu du trait. */
.showcase__label,
.showcase__label textPath { dominant-baseline: central; }
.showcase__label--surface {
    fill: var(--sd-on-accent);
    font-size: 2.4px;
    animation: sd-fade 600ms 1200ms var(--site-ease) both;
}

.mock {
    position: relative;
    z-index: 1;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--sd-border);
    border-radius: 18px;
    background: var(--sd-surface);
    box-shadow:
        0 40px 70px -40px color-mix(in srgb, var(--sd-shadow-ink) 55%, transparent),
        0 0 0 6px color-mix(in srgb, var(--sd-surface) 50%, transparent);
    animation: sd-rise 800ms 150ms var(--site-ease) both, sd-float 9s 1.2s ease-in-out infinite alternate;
}
.mock__bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--sd-border);
    background: var(--sd-surface-2);
    font-size: 0.78rem;
}
.mock__dots { display: inline-flex; gap: 0.3rem; }
.mock__dots i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--sd-border); }
.mock__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.mock__online { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--sd-success); font-weight: 700; }
.mock__online i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--sd-success); animation: sd-blink 2.4s ease-in-out infinite; }
.mock__body {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.85rem;
}
.mock__tiles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    align-content: start;
}
.mock__tile {
    --tile: var(--sd-accent);
    display: grid;
    align-content: space-between;
    gap: 0.4rem;
    min-height: 4.25rem;
    padding: 0.6rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--tile) 32%, transparent);
    border-radius: 11px;
    background: color-mix(in srgb, var(--tile) 13%, var(--sd-surface));
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.25;
}
.mock__tile b { color: var(--sd-text-muted); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mock__tile--1 { --tile: var(--sd-series-1); }
.mock__tile--2 { --tile: var(--sd-series-3); }
.mock__tile--3 { --tile: var(--sd-series-4); }
.mock__tile--4 { --tile: var(--sd-series-2); }
.mock__tile--5 { --tile: var(--sd-series-5); }
.mock__tile--6 { --tile: var(--sd-text-muted); }
.mock__cart {
    display: grid;
    align-content: start;
    gap: 0.55rem;
    padding: 0.75rem;
    border: 1px solid var(--sd-border);
    border-radius: 12px;
    background: var(--sd-bg);
    font-size: 0.78rem;
}
.mock__heading { margin: 0; font-size: 0.8rem; font-weight: 800; }
.mock__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.mock__line { display: flex; justify-content: space-between; gap: 0.5rem; animation: sd-line 500ms var(--site-ease) both; }
.mock__line:nth-child(1) { animation-delay: 700ms; }
.mock__line:nth-child(2) { animation-delay: 950ms; }
.mock__line:nth-child(3) { animation-delay: 1200ms; }
.mock__line em { color: var(--sd-text-muted); font-style: normal; }
.mock__line b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mock__totals { margin: 0; padding-top: 0.5rem; border-top: 1px dashed var(--sd-border); display: grid; gap: 0.2rem; }
.mock__totals div { display: flex; justify-content: space-between; gap: 0.5rem; }
.mock__totals dt { color: var(--sd-text-muted); }
.mock__totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.mock__total { margin-top: 0.2rem; font-size: 0.92rem; font-weight: 800; }
.mock__total dt { color: var(--sd-text); }
.mock__pay {
    display: block;
    padding: 0.6rem;
    border-radius: 10px;
    background: var(--sd-accent);
    color: var(--sd-on-accent);
    text-align: center;
    font-weight: 800;
    font-size: 0.82rem;
    box-shadow: var(--site-glow);
    animation: sd-press 7s 2.4s ease-in-out infinite;
}

.float-card {
    position: absolute;
    z-index: 2;
    border: 1px solid var(--sd-border);
    border-radius: 14px;
    background: var(--sd-surface);
    box-shadow: var(--site-lift), var(--sd-shadow-2);
    font-size: 0.74rem;
    line-height: 1.35;
}
/* Sort sous la caisse, a droite, sans couvrir le bouton Payer : en haut, elle se lisait comme un sous-menu de l'en-tete. */
.float-card--receipt {
    top: calc(100% - 0.75rem);
    right: -2.75rem;
    width: 9.25rem;
    padding: 0.75rem;
    display: grid;
    justify-items: center;
    gap: 0.45rem;
    text-align: center;
    animation: sd-rise 700ms 550ms var(--site-ease) both, sd-float 8s 1.6s ease-in-out infinite alternate-reverse;
}
.float-card__label { color: var(--sd-text-muted); font-weight: 600; }
.float-card__label b { display: block; color: var(--sd-text); font-size: 0.8rem; }
/* Toujours encre noire sur papier blanc (sd-paper), zone de silence comprise : un QR inverse se lit mal au telephone. */
.float-card__qr { width: 5.5rem; height: 5.5rem; fill: var(--sd-text); shape-rendering: crispEdges; border-radius: 6px; }
.float-card__qr-paper { fill: var(--sd-surface); }
.float-card__hint { color: var(--sd-success); font-weight: 700; }
.float-card--sync {
    bottom: -1.1rem;
    left: -2.5rem;
    display: grid;
    padding: 0.6rem 0.85rem;
    animation: sd-rise 700ms 800ms var(--site-ease) both;
}
.sync {
    grid-area: 1 / 1;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
    white-space: nowrap;
}
.sync i { width: 0.55rem; height: 0.55rem; border-radius: 50%; }
.sync--offline i { background: var(--sd-warning); }
.sync--online i { background: var(--sd-success); }
.sync--offline { animation: sd-swap-first 10s 2s ease-in-out infinite; }
.sync--online { opacity: 0; animation: sd-swap-second 10s 2s ease-in-out infinite; }

@media (max-width: 63.99rem) {
    .showcase { width: 100%; max-width: 36rem; margin: 0 auto; }
}
@media (max-width: 47.99rem) {
    .showcase { padding-top: 7.75rem; }
    .float-card--receipt { right: -0.5rem; top: -7rem; }
    .float-card--sync { left: -0.5rem; }
    .showcase__depth { margin-top: 1.75rem; }
}
@media (max-width: 34.99rem) {
    .mock__body { grid-template-columns: minmax(0, 1fr); }
    .mock__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mock__tile:nth-child(n + 4) { display: none; }
    .mock__tile { min-height: 3.6rem; }
    .float-card--receipt { width: 7.25rem; padding: 0.55rem; }
    .float-card__qr { width: 4.5rem; height: 4.5rem; }
    .showcase__depth { width: calc(100% + 2 * var(--site-gutter)); max-width: none; }
    .showcase__label { font-size: 3.3px; letter-spacing: 0.04em; }
    .showcase__label--surface { font-size: 3px; }
}

/* Accueil : ce qu'on donne a l'agent de code (invite, serveur MCP) */
.handoff {
    border-bottom: 1px solid var(--site-line);
    background: linear-gradient(180deg, var(--sd-surface), var(--sd-bg));
}
.handoff__inner {
    max-width: var(--site-wide);
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 5rem) var(--site-gutter);
    display: grid;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
}
/* Telephone : texte, invite, puis commandes ; grand ecran : l'invite a droite des deux. */
@media (min-width: 64rem) {
    .handoff__inner {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        grid-template-areas: "copy card" "tools card";
        row-gap: 0;
    }
    .handoff__copy { grid-area: copy; align-self: end; }
    .handoff__card { grid-area: card; }
    .handoff__tools { grid-area: tools; align-self: start; }
}
.handoff__eyebrow {
    margin: 0;
    color: var(--sd-accent);
    font-family: var(--sd-font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.handoff__title {
    margin: 0.6rem 0 0;
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
}
.handoff__lead { max-width: 34rem; margin: 1rem 0 0; color: var(--sd-text-muted); font-size: 1.08rem; }
.handoff__tools { margin: 0; display: grid; gap: 0.85rem; }
@media (min-width: 64rem) {
    .handoff__tools { margin-top: 1.75rem; }
}
.handoff__tools div { display: grid; gap: 0.35rem; min-width: 0; }
.handoff__tools dt { font-size: 0.9rem; font-weight: 700; }
.handoff__tools dt span { margin-left: 0.4rem; color: var(--sd-text-muted); font-family: var(--sd-font-mono); font-size: 0.8rem; font-weight: 500; }
.handoff__tools dd { margin: 0; min-width: 0; }
.handoff__tools code {
    display: block;
    overflow-x: auto;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius-md);
    background: var(--sd-surface-2);
    font-size: 0.82rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.handoff__card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--sd-border);
    border-radius: var(--site-radius-xl);
    background: var(--sd-surface);
    box-shadow: var(--site-lift), var(--sd-shadow-2);
}
.handoff__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.25rem;
    padding: 0.5rem 0.75rem 0.5rem 1.1rem;
    border-bottom: 1px solid var(--sd-border);
    background: var(--sd-surface-2);
}
.handoff__label { color: var(--sd-text-muted); font-family: var(--sd-font-mono); font-size: 0.8rem; font-weight: 600; }
.handoff__copy-button {
    min-height: 2.25rem;
    padding: 0 0.9rem;
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius-md);
    background: var(--sd-surface);
    color: var(--sd-text);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}
.handoff__copy-button:hover { border-color: var(--sd-accent); color: var(--sd-accent); }
.handoff__prompt {
    margin: 0;
    padding: 1.1rem 1.25rem;
    font-size: 0.86rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.handoff__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0 1.25rem 1.25rem; }
@media (max-width: 34.99rem) {
    .handoff__actions .button { flex: 1 1 auto; }
}

/* Accueil : un moteur, tous les ecrans */
@keyframes sd-flow { to { stroke-dashoffset: -96; } }
.screens {
    position: relative;
    overflow: clip;
    border-bottom: 1px solid var(--site-line);
    background:
        radial-gradient(50rem 24rem at 50% 100%, color-mix(in srgb, var(--sd-accent) 12%, transparent), transparent 70%),
        var(--sd-surface);
}
.screens__inner {
    max-width: var(--site-wide);
    margin: 0 auto;
    padding: clamp(3.5rem, 8vw, 6rem) var(--site-gutter) clamp(3rem, 7vw, 5rem);
    text-align: center;
}
.screens__eyebrow {
    display: inline-block;
    margin: 0 0 1rem;
    padding: 0.25rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--sd-accent) 30%, var(--sd-border));
    border-radius: 999px;
    color: var(--sd-accent-strong);
    font-family: var(--sd-font-mono);
    font-size: 0.8rem;
    font-weight: 500;
}
.screens__title {
    max-width: 40rem;
    margin: 0 auto;
    font-size: clamp(1.9rem, 4.4vw, 2.8rem);
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-weight: 800;
}
.screens__lead { max-width: 40rem; margin: 1rem auto 0; color: var(--sd-text-muted); font-size: clamp(1.02rem, 1.6vw, 1.15rem); }

.devices {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    grid-template-areas: "kiosk tablet phone" "links links links" "engine engine engine";
    align-items: end;
    column-gap: clamp(1rem, 3vw, 2.5rem);
    max-width: 62rem;
    margin: clamp(2.5rem, 6vw, 3.75rem) auto 0;
    text-align: left;
}
.device {
    justify-self: center;
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--sd-border);
    border-radius: 22px;
    background: var(--sd-surface-2);
    box-shadow: var(--site-lift), var(--sd-shadow-2);
    transition: transform 320ms var(--site-ease);
}
.device:hover { transform: translateY(-4px); }
.device--kiosk { grid-area: kiosk; max-width: 13rem; }
.device--tablet { grid-area: tablet; max-width: 24rem; border-radius: 18px; }
.device--phone { grid-area: phone; max-width: 10.5rem; border-radius: 26px; }
.device__screen {
    display: grid;
    align-content: start;
    gap: 0.6rem;
    min-height: 100%;
    padding: 0.85rem;
    border: 1px solid var(--sd-border);
    border-radius: 15px;
    background: var(--sd-surface);
    font-size: 0.76rem;
    line-height: 1.3;
}
.device--kiosk .device__screen { min-height: 18rem; }
.device--tablet .device__screen { min-height: 13rem; border-radius: 12px; }
.device--phone .device__screen { min-height: 16.5rem; border-radius: 20px; }
.device__heading { margin: 0; font-weight: 800; font-size: 0.8rem; }
.device__tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.device__tiles li {
    display: grid;
    gap: 0.35rem;
    min-height: 4rem;
    padding: 0.5rem;
    border: 1px solid color-mix(in srgb, var(--tile, var(--sd-accent)) 30%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--tile, var(--sd-accent)) 12%, var(--sd-surface));
    font-weight: 700;
    align-content: space-between;
}
.device__tiles li:nth-child(2) { --tile: var(--sd-series-3); }
.device__tiles li:nth-child(3) { --tile: var(--sd-series-5); }
.device__tiles li:nth-child(4) { --tile: var(--sd-series-4); }
.device__tiles b { color: var(--sd-text-muted); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.device__agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.device__agenda li {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--sd-border);
    border-radius: 10px;
    background: var(--sd-bg);
}
.device__agenda time { color: var(--sd-text-muted); font-family: var(--sd-font-mono); font-size: 0.72rem; }
.device__agenda span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.device__chip {
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--sd-warning-soft);
    color: var(--sd-text);
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 700;
}
.device__chip--done { background: var(--sd-success-soft); }
.device__chip--next { background: var(--sd-accent-soft); color: var(--sd-accent-strong); }
.device__product {
    display: block;
    height: 5.5rem;
    border-radius: 12px;
    background:
        radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--sd-series-4) 45%, transparent), transparent 60%),
        color-mix(in srgb, var(--sd-series-4) 14%, var(--sd-surface));
}
.device__name { margin: 0; font-weight: 700; }
.device__price { margin: -0.3rem 0 0; color: var(--sd-text-muted); font-variant-numeric: tabular-nums; }
.device__action {
    display: block;
    margin-top: auto;
    padding: 0.5rem;
    border-radius: 9px;
    background: var(--sd-accent);
    color: var(--sd-on-accent);
    text-align: center;
    font-weight: 800;
}
.devices__links {
    grid-area: links;
    width: 100%;
    height: 4.5rem;
    overflow: visible;
}
.devices__link--narrow { display: none; }
.devices__links path {
    fill: none;
    stroke: color-mix(in srgb, var(--sd-accent) 55%, var(--sd-border));
    stroke-width: 2;
    stroke-dasharray: 6 6;
    vector-effect: non-scaling-stroke;
}
/* Le contrat circule au rythme du defilement : rien ne repeint quand la page est immobile. */
@supports (animation-timeline: view()) {
    .devices__links path {
        animation: sd-flow linear both;
        animation-timeline: view();
    }
}
.devices__engine {
    grid-area: engine;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    border: 1px solid color-mix(in srgb, var(--sd-accent) 40%, var(--sd-border));
    border-radius: 999px;
    background: var(--sd-bg);
    box-shadow: var(--site-glow);
    font-size: 1.05rem;
}
.devices__logo { width: 22px; height: 22px; }
.devices__contract {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--sd-accent-soft);
    color: var(--sd-accent-strong);
    font-size: 0.78rem;
}
/* Telephone : la borne et la boutique web, deux ecrans en portrait. */
@media (max-width: 47.99rem) {
    .devices { grid-template-columns: 1fr 1fr; grid-template-areas: "kiosk phone" "links links" "engine engine"; }
    .device--tablet,
    .devices__link--wide { display: none; }
    .devices__link--narrow { display: inline; }
    .device--kiosk .device__screen,
    .device--phone .device__screen { min-height: 16rem; }
    .device__screen { padding: 0.65rem; font-size: 0.7rem; }
    .device__tiles { gap: 0.3rem; }
    .device__tiles li { min-height: 3.6rem; padding: 0.4rem; }
}

/* Filigrane des bandeaux : les quatre ondes du logo, pendues sous le haut de l'element, trait des 3/7 du pas comme
   dans le logo (6 sur 14). */
.page-hero::after,
.prose .cta::before {
    --step: 4.5rem;
    --half: calc(var(--step) * 3 / 14);
    content: "";
    position: absolute;
    z-index: -1;
    width: calc(8 * var(--step) + 2 * var(--half));
    height: calc(4 * var(--step) + var(--half));
    background: radial-gradient(circle at 50% 0,
        transparent calc(var(--step) - var(--half)),
        var(--site-wave-1) 0 calc(var(--step) + var(--half)),
        transparent 0 calc(2 * var(--step) - var(--half)),
        var(--site-wave-2) 0 calc(2 * var(--step) + var(--half)),
        transparent 0 calc(3 * var(--step) - var(--half)),
        var(--site-wave-3) 0 calc(3 * var(--step) + var(--half)),
        transparent 0 calc(4 * var(--step) - var(--half)),
        var(--site-wave-4) 0 calc(4 * var(--step) + var(--half)),
        transparent 0);
    opacity: 0.1;
    pointer-events: none;
}

/* En-tete des pages de contenu : un bandeau, les ondes en filigrane */
.page-hero {
    position: relative;
    overflow: clip;
    isolation: isolate;
    border-bottom: 1px solid var(--site-line);
    background: radial-gradient(48rem 22rem at 85% -6rem, color-mix(in srgb, var(--sd-accent) 15%, transparent), transparent 70%), var(--sd-bg);
}
.page-hero::after {
    top: 2.5rem;
    right: -10rem;
}
@media (max-width: 47.99rem) {
    .page-hero::after { --step: 3.5rem; right: -15rem; opacity: 0.07; }
}
.page-hero__inner {
    max-width: calc(var(--site-prose) + 2 * var(--site-gutter));
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 4.5rem) var(--site-gutter) clamp(2.25rem, 5vw, 3.5rem);
}
.page-hero__inner > * { animation: sd-rise 600ms var(--site-ease) both; }
.page-hero__inner > :nth-child(2) { animation-delay: 60ms; }
.page-hero__inner > :nth-child(3) { animation-delay: 120ms; }
.page-hero__eyebrow {
    display: inline-block;
    margin: 0 0 0.85rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--sd-accent) 30%, var(--sd-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--sd-surface) 70%, transparent);
    color: var(--sd-accent-strong);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.page-hero h1 {
    max-width: 52rem;
    margin: 0;
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
    font-weight: 800;
}
.page-hero__lead { max-width: 44rem; margin: 1rem 0 0; color: var(--sd-text-muted); font-size: clamp(1.05rem, 1.8vw, 1.22rem); }
.page-hero--center .page-hero__inner { max-width: var(--site-width); text-align: center; }
.page-hero--center h1,
.page-hero--center .page-hero__lead { margin-inline: auto; }
.page-hero--center::after { right: auto; left: 50%; translate: -50% 0; }

/* Texte des pages (Markdown) */
.prose { max-width: var(--site-prose); overflow-wrap: break-word; }
.prose--wide { max-width: none; }
.prose > :first-child { margin-top: 0; }
.prose h2 {
    margin: 3rem 0 0.85rem;
    font-size: clamp(1.55rem, 3.4vw, 2.1rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
    font-weight: 800;
}
.page--content .prose h2::before {
    content: "";
    display: block;
    width: 2.25rem;
    height: 3px;
    margin-bottom: 0.9rem;
    border-radius: 3px;
    background: var(--sd-accent);
}
.prose h3 { margin: 2rem 0 0.5rem; font-size: 1.2rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.prose h4 { margin: 1.5rem 0 0.5rem; font-size: 1.05rem; }
.prose p,
.prose ul,
.prose ol { margin: 0 0 1.1rem; }
.prose li + li { margin-top: 0.4rem; }
.prose ul { padding-left: 0; list-style: none; }
.prose ul > li { position: relative; padding-left: 1.55rem; }
.prose ul > li::before {
    content: "";
    position: absolute;
    left: 0.2rem;
    top: 0.62em;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--sd-accent) 18%, transparent);
    box-shadow: inset 0 0 0 2px var(--sd-accent);
}
.prose ul > li.task-list-item { padding-left: 0.2rem; }
.prose ul > li.task-list-item::before { content: none; }
.prose code {
    overflow-wrap: anywhere;
    padding: 0.12em 0.4em;
    border-radius: 6px;
    background: var(--sd-surface-2);
    border: 1px solid var(--site-line);
    font-size: 0.88em;
}
.prose pre {
    margin: 0 0 1.4rem;
    padding: 1.1rem 1.2rem;
    overflow-x: auto;
    border: 1px solid var(--sd-border);
    border-radius: 14px;
    background: var(--sd-surface-2);
    font-size: 0.88rem;
    line-height: 1.6;
}
.prose pre code { padding: 0; border: 0; background: none; font-size: inherit; overflow-wrap: normal; }
.prose blockquote {
    margin: 0 0 1.25rem;
    padding: 0.25rem 1rem;
    border-left: 3px solid var(--sd-accent);
    color: var(--sd-text-muted);
}
.prose hr { border: 0; border-top: 1px solid var(--sd-border); margin: 2.5rem 0; }
.prose table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    margin: 0 0 1.5rem;
    border: 1px solid var(--sd-border);
    border-radius: 14px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.95rem;
}
.prose th,
.prose td { padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--sd-border); text-align: left; vertical-align: top; }
.prose tr:last-child td { border-bottom: 0; }
.prose thead th { background: var(--sd-surface-2); font-weight: 700; }

/* Blocs de mise en page des pages (::: nom) */
.prose .lead {
    max-width: var(--site-prose);
    color: var(--sd-text-muted);
    font-size: clamp(1.15rem, 2vw, 1.3rem);
}
.prose .lead p { margin-bottom: 0.75rem; }

.prose .cards,
.prose .tiles,
.prose .roadmap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--site-gap);
    margin: 1.75rem 0 2.75rem;
}
@media (min-width: 48rem) {
    .prose .cards:has(> :nth-child(2):last-child),
    .prose .cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.prose .card,
.prose .tile,
.prose .roadmap > div {
    --card-pad: clamp(1.25rem, 2.5vw, 1.6rem);
    --badge: var(--sd-accent);
    position: relative;
    margin: 0;
    padding: var(--card-pad);
    border: 1px solid var(--sd-border);
    border-radius: var(--site-radius);
    background: var(--sd-surface);
    box-shadow: var(--sd-shadow-1);
    transition: transform 260ms var(--site-ease), box-shadow 260ms ease, border-color 260ms ease;
}
.prose .card:hover,
.prose .tile:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--badge) 40%, var(--sd-border));
    box-shadow: var(--site-lift);
}
.prose .card > :first-child,
.prose .tile > :first-child,
.prose .roadmap > div > :first-child { margin-top: 0; }
.prose .card > :last-child,
.prose .tile > :last-child,
.prose .roadmap > div > :last-child { margin-bottom: 0; }
.prose .card h3,
.prose .tile h3,
.prose .roadmap h3 { margin: 0 0 0.45rem; font-size: 1.15rem; }
.prose .card p,
.prose .tile p,
.prose .roadmap p { color: var(--sd-text-muted); }
.prose .card[data-icon^="ai-"] { --badge: var(--sd-ai-strong); }

/* Icone d'un bloc : la pastille (::before) et le trait (::after) */
.prose .card[data-icon]::before,
.prose .tile[data-icon]::before,
.prose .roadmap > div::before {
    content: "";
    display: block;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1rem;
    border: 1px solid color-mix(in srgb, var(--badge) 22%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--badge) 12%, var(--sd-surface));
}
.prose .card[data-icon]::after,
.prose .tile[data-icon]::after,
.prose .roadmap > div::after {
    content: "";
    position: absolute;
    top: calc(var(--card-pad) + 0.7rem);
    left: calc(var(--card-pad) + 0.7rem);
    width: 1.35rem;
    height: 1.35rem;
    background: var(--badge);
    mask: var(--icon) center / contain no-repeat;
    transition: scale 260ms var(--site-ease);
}
.prose .card:hover::after,
.prose .tile:hover::after { scale: 1.12; }
/* Carte dont le titre est un lien : toute la carte se clique. */
.prose .card:has(h3 a) h3 a { color: var(--sd-text); text-decoration: none; }
.prose .card:has(h3 a) h3 a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.prose .card:has(h3 a):hover h3 a { color: var(--sd-accent-strong); }

/* Tuiles : l'icone a gauche */
@media (min-width: 40rem) {
    .prose .tile[data-icon] {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 1rem;
        align-content: start;
    }
    .prose .tile[data-icon]::before { grid-row: span 2; margin-bottom: 0; }
    .prose .tile[data-icon] > * { grid-column: 2; }
}

/* Etat du projet : livre, en cours, prevu */
.prose .roadmap .done { --badge: var(--sd-success); --icon: url(icons/done.svg); }
.prose .roadmap .progress { --badge: var(--sd-accent); --icon: url(icons/progress.svg); }
.prose .roadmap .planned { --badge: var(--sd-text-muted); --icon: url(icons/planned.svg); }
.prose .roadmap > div { border-top: 3px solid var(--badge); }

/* Etapes : une ligne qui les relie */
.prose .steps {
    position: relative;
    counter-reset: step;
    display: grid;
    gap: 0.5rem 2rem;
    margin: 2rem 0 3rem;
}
.prose .steps h3 {
    counter-increment: step;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 1.25rem 0 0;
}
.prose .steps h3::before {
    content: counter(step);
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid color-mix(in srgb, var(--sd-accent) 35%, var(--sd-border));
    border-radius: 50%;
    background: var(--sd-surface);
    color: var(--sd-accent-strong);
    box-shadow: 0 0 0 6px var(--sd-bg);
    font-size: 1rem;
    font-weight: 800;
}
.prose .steps p { margin: 0.35rem 0 0; color: var(--sd-text-muted); }
@media (min-width: 52rem) {
    .prose .steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: auto auto;
        grid-auto-flow: column;
    }
    .prose .steps::before {
        content: "";
        position: absolute;
        top: 1.375rem;
        left: 1.4rem;
        right: 12%;
        z-index: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--sd-accent), color-mix(in srgb, var(--sd-accent) 15%, transparent));
    }
    .prose .steps h3 { position: relative; z-index: 1; flex-direction: column; align-items: flex-start; gap: 1rem; margin: 0; }
}

.prose .note {
    margin: 2rem 0;
    padding: 1.15rem 1.35rem;
    border: 1px solid var(--sd-border);
    border-left: 4px solid var(--sd-accent);
    border-radius: 12px;
    background: var(--sd-surface);
}
.prose .note > :last-child { margin-bottom: 0; }

/* Appel a l'action : un bandeau, les ondes du logo en filigrane */
.prose .cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    margin: 3.5rem 0 1rem;
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3rem);
    border: 1px solid color-mix(in srgb, var(--sd-accent) 28%, var(--sd-border));
    border-radius: var(--site-radius-xl);
    background: radial-gradient(120% 130% at 50% 0%, color-mix(in srgb, var(--sd-accent) 16%, var(--sd-surface)), var(--sd-surface) 62%);
    text-align: center;
}
.prose .cta::before {
    top: 0;
    left: 50%;
    translate: -50% 0;
}
.prose .cta h2 { margin: 0 auto 0.75rem; max-width: 36rem; font-size: clamp(1.7rem, 4vw, 2.4rem); }
.prose .cta h2::before { content: none; }
.prose .cta p { max-width: 38rem; margin: 0 auto; color: var(--sd-text-muted); }
.prose .cta p a:first-of-type {
    display: flex;
    width: fit-content;
    margin: 1.5rem auto 0.75rem;
    align-items: center;
    gap: 0.5rem;
    min-height: 3.1rem;
    padding: 0.75rem 1.4rem;
    border-radius: 12px;
    background: var(--sd-accent);
    color: var(--sd-on-accent);
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--site-glow);
    transition: transform 220ms var(--site-ease), filter 180ms ease;
}
.prose .cta p a:first-of-type::after {
    content: "";
    width: 1.05em;
    height: 1.05em;
    background: currentColor;
    mask: url(icons/arrow.svg) center / contain no-repeat;
}
.prose .cta p a:first-of-type:hover { transform: translateY(-1px); filter: brightness(1.05); }

.prose .faq h3 { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--sd-border); }
.prose .faq h3:first-of-type { border-top: 0; padding-top: 0; }

.prose .ai {
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    border-radius: var(--site-radius);
    background: var(--sd-ai-soft);
}
.prose .ai h2,
.prose .ai h3 { color: var(--sd-ai-strong); margin-top: 0; }

/* Pages de contenu : une colonne de lecture centree, les grilles de cartes sur toute la largeur. */
.page--content .prose { max-width: none; }
.page--content .prose > *,
.page--content > .logo-figure { max-width: var(--site-prose); margin-inline: auto; }
.page--content .prose > :is(.cards, .tiles, .roadmap) { max-width: none; }

/* Accueil : sections centrees */
.page--home { max-width: var(--site-wide); padding-top: clamp(3rem, 7vw, 5rem); }
.page--home .prose > .lead {
    max-width: 50rem;
    margin: 0 auto clamp(3rem, 7vw, 5rem);
    text-align: center;
    color: var(--sd-text);
    font-size: clamp(1.3rem, 2.8vw, 1.75rem);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.015em;
}
.page--home .prose > h2 {
    max-width: 44rem;
    margin: clamp(3.5rem, 8vw, 6rem) auto 1rem;
    text-align: center;
    font-size: clamp(1.8rem, 4.2vw, 2.7rem);
    letter-spacing: -0.035em;
}
.page--home .prose > h2 + p { max-width: 40rem; margin-inline: auto; text-align: center; color: var(--sd-text-muted); }
.page--home .prose > h2 ~ p:last-of-type { text-align: center; }
.page--home .prose .tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }

/* Figure du logo (page du logo) */
.logo-figure {
    margin: 0 0 2.5rem;
    padding: clamp(1.25rem, 4vw, 2rem);
    max-width: var(--site-prose);
    border: 1px solid var(--sd-border);
    border-radius: var(--site-radius);
    background: var(--sd-surface);
    box-shadow: var(--sd-shadow-1);
}
.logo-figure__items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1.5rem;
    align-items: end;
}
.logo-figure__item { display: grid; justify-items: center; gap: 0.75rem; text-align: center; font-weight: 600; }
.logo-figure__item img { width: min(160px, 100%); height: auto; }
.logo-figure__item--small img { width: 32px; }
.logo-figure figcaption { margin-top: 1.25rem; text-align: center; color: var(--sd-text-muted); font-size: 0.92rem; }

/* Tarifs : une carte par module, la duree se choisit sans script (boutons radio, :has). */
.page--pricing { max-width: var(--site-wide); }
.plan__unavailable { margin: auto 0 0; color: var(--sd-text-muted); }
.offers {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: var(--site-gap);
}
.offer {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border: 1px solid var(--sd-border);
    border-radius: var(--site-radius-xl);
    background: var(--sd-surface);
    box-shadow: var(--sd-shadow-1);
    scroll-margin-top: calc(var(--site-header-height) + 1rem);
    transition: transform 260ms var(--site-ease), box-shadow 260ms ease, border-color 260ms ease;
}
.offer:hover { transform: translateY(-3px); box-shadow: var(--site-lift); border-color: color-mix(in srgb, var(--sd-accent) 35%, var(--sd-border)); }
.offer:target { border-color: var(--sd-accent); box-shadow: var(--site-glow); }
.offer--base {
    border-color: color-mix(in srgb, var(--sd-accent) 45%, var(--sd-border));
    background: linear-gradient(180deg, color-mix(in srgb, var(--sd-accent) 8%, var(--sd-surface)), var(--sd-surface) 45%);
    box-shadow: var(--site-glow);
}
.offer__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.35rem 0.85rem; margin-bottom: 1rem; }
.offer__name { margin: 0; font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.01em; }
.offer__badge {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 0.4rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: var(--sd-accent);
    color: var(--sd-on-accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.offer__features { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.45rem; color: var(--sd-text-muted); font-size: 0.97rem; }
.offer__features li { position: relative; padding-left: 1.6rem; }
.offer__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.18em;
    width: 1.1rem;
    height: 1.1rem;
    background: var(--sd-accent);
    mask: url(icons/done.svg) center / contain no-repeat;
}
.offer__form { margin-top: auto; display: grid; gap: 1rem; }
.offer__action { width: 100%; }
.offers__note { margin: 0.5rem 0 1.5rem; color: var(--sd-text-muted); text-align: center; }
.page--pricing .notice--test { max-width: var(--site-prose); margin-inline: auto; }
.page--pricing > .prose { margin: 3rem auto 0; }

.terms { margin: 0; padding: 0; border: 0; display: grid; gap: 0.5rem; }
.terms__legend { margin-bottom: 0.5rem; padding: 0; font-weight: 700; font-size: 0.92rem; }
.term {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "radio years price" "radio per per";
    align-items: center;
    gap: 0 0.65rem;
    min-height: 3rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--sd-border);
    border-radius: 12px;
    background: var(--sd-bg);
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.term:hover { border-color: color-mix(in srgb, var(--sd-accent) 55%, var(--sd-border)); }
.term:has(.term__input:checked) {
    border-color: var(--sd-accent);
    background: var(--sd-accent-soft);
    box-shadow: inset 0 0 0 1px var(--sd-accent);
}
.term:has(.term__input:focus-visible) { box-shadow: var(--sd-focus-ring); }
.term__input { grid-area: radio; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--sd-accent); }
.term__years { grid-area: years; font-weight: 700; }
.term__price { grid-area: price; font-weight: 800; font-variant-numeric: tabular-nums; }
.term__per-year { grid-area: per; color: var(--sd-text-muted); font-size: 0.88rem; }

/* Panier */
.cart { display: grid; gap: var(--site-gap); }
@media (min-width: 56rem) {
    .cart { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
    .cart__summary { position: sticky; top: calc(var(--site-header-height) + 1rem); }
}
.cart__lines { padding: 0.5rem 1.5rem; }
.cart-lines { list-style: none; margin: 0; padding: 0; }
.cart-line {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "info total" "form form";
    gap: 0.75rem 1rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--sd-border);
}
.cart-line:last-child { border-bottom: 0; }
.cart-line__info { grid-area: info; min-width: 0; }
.cart-line__name { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.cart-line__unit { margin: 0.15rem 0 0; color: var(--sd-text-muted); font-size: 0.95rem; }
.cart-line__total { grid-area: total; margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.cart-line__form { grid-area: form; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.cart-line__label { font-weight: 600; color: var(--sd-text-muted); }
.field__input.cart-line__qty { width: 6rem; flex: 0 0 6rem; }
.cart__checkout { width: 100%; margin-top: 1.25rem; }
.cart__hint { margin: 0.75rem 0 0; color: var(--sd-text-muted); font-size: 0.92rem; text-align: center; }
.cart-empty { text-align: center; }

.button--link {
    min-height: 2.25rem;
    padding: 0.4rem 0.5rem;
    border: 0;
    background: none;
    color: var(--sd-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    box-shadow: none;
}
.button--link:hover { transform: none; color: var(--sd-accent-strong); }

/* Commande */
.order-lines { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.order-line { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; }
.order-line__name { min-width: 0; overflow-wrap: anywhere; }
.order-line__qty { color: var(--sd-text-muted); white-space: nowrap; }
.order-line__total { font-variant-numeric: tabular-nums; white-space: nowrap; }
.checkout__edit { margin: 1rem 0 0; }

/* Compte : licences et postes */
.account__subtitle { margin: 1.5rem 0 0.4rem; font-size: 1.05rem; }
.account__subtitle:first-of-type { margin-top: 0.5rem; }
.account__hint { margin: 0 0 1rem; color: var(--sd-text-muted); }
.licenses,
.registers { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.75rem; }
.license {
    padding: 1rem 1.1rem;
    border: 1px solid var(--sd-border);
    border-radius: 14px;
    background: var(--sd-bg);
}
.license--free { border-left: 4px solid var(--sd-accent); }
.license__form { display: grid; gap: 0.75rem; }
@media (min-width: 48rem) {
    .license__form { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: end; }
    .license__title { grid-column: 1 / -1; }
    .license__confirm { grid-column: 1 / 3; }
}
.license__title { margin: 0; font-weight: 700; }
.license__invoice { margin-left: 0.5rem; color: var(--sd-text-muted); font-weight: 500; font-size: 0.9rem; }
.license__pick { display: grid; gap: 0.35rem; }
.register__form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.register__form .field__input { flex: 1 1 14rem; min-width: 0; }
.register__form--new { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--sd-border); }
.register__form--new .field__label { flex-basis: 100%; }
.register__licenses,
.register__closed { margin: 0.35rem 0 0; color: var(--sd-text-muted); font-size: 0.92rem; }

.status { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.84rem; font-weight: 700; white-space: nowrap; }
.status--active { background: var(--sd-success-soft); color: var(--sd-text); }
.status--upcoming { background: var(--sd-accent-soft); color: var(--sd-accent-strong); }
.status--expired,
.status--withdrawn { background: var(--sd-surface-2); color: var(--sd-text-muted); }

/* Avis */
.notice {
    margin: 0 0 2rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--sd-border);
    border-radius: 14px;
    background: var(--sd-surface);
}
.notice > :last-child { margin-bottom: 0; }
.notice--test { border-color: color-mix(in srgb, var(--sd-warning) 55%, var(--sd-border)); background: var(--sd-warning-soft); color: var(--sd-text); }

.alert {
    margin: 0 0 1.5rem;
    padding: 0.85rem 1.1rem;
    border-radius: 12px;
    border: 1px solid transparent;
    font-weight: 600;
    animation: sd-rise 400ms var(--site-ease) both;
}
.alert--error { background: var(--sd-danger-soft); border-color: var(--sd-danger); }
.alert--success { background: var(--sd-success-soft); border-color: var(--sd-success); }
.alert--warning { background: var(--sd-warning-soft); border-color: var(--sd-warning); }

/* Formulaires */
.form { display: grid; gap: 1.1rem; }
.form--inline { display: block; margin-top: 2rem; }
.form__row { display: grid; gap: 1.1rem; }
@media (min-width: 36rem) {
    .form__row { grid-template-columns: 1fr 1fr; }
}
.form__aside { margin: 0; color: var(--sd-text-muted); }

.field { display: grid; gap: 0.35rem; }
.field__label { font-weight: 700; font-size: 0.95rem; }
.field__optional { margin-left: 0.35em; font-weight: 500; color: var(--sd-text-muted); }
.field__hint { margin: 0; font-size: 0.9rem; color: var(--sd-text-muted); }
.field__input,
.assistant textarea {
    width: 100%;
    min-height: 2.9rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--sd-border);
    border-radius: 12px;
    background: var(--sd-bg);
    color: var(--sd-text);
    font: inherit;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.field__input:hover,
.assistant textarea:hover { border-color: color-mix(in srgb, var(--sd-accent) 35%, var(--sd-border)); }
.field__input:focus,
.assistant textarea:focus { outline: none; border-color: var(--sd-accent); box-shadow: var(--sd-focus-ring); background: var(--sd-surface); }
.field--invalid .field__input { border-color: var(--sd-danger); }
.field__input:disabled,
.field__input:disabled:hover { background: var(--sd-surface-2); color: var(--sd-text-muted); border-color: var(--sd-border); cursor: not-allowed; }
/* Champs regroupes pour etre desactives ensemble (paiement ferme) : la grille du formulaire reste celle de .form. */
.form__fields { display: contents; }
.field__error { margin: 0; color: var(--sd-danger); font-weight: 600; font-size: 0.95rem; }

.check { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0.25rem 0.65rem; }
.check__input { width: 1.25rem; height: 1.25rem; margin: 0.2rem 0 0; accent-color: var(--sd-accent); }
.check__label { line-height: 1.5; }
.check .field__error { grid-column: 2; }
.check--invalid .check__input { outline: 2px solid var(--sd-danger); outline-offset: 1px; }

/* Cartes, details, tableaux */
.card {
    margin: 0 0 1.5rem;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--sd-border);
    border-radius: var(--site-radius-xl);
    background: var(--sd-surface);
    box-shadow: var(--sd-shadow-1);
}
.card h2 { margin: 0 0 1rem; font-size: 1.25rem; letter-spacing: -0.01em; }

.details { display: grid; gap: 0.6rem; margin: 0; }
.details div { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: 1rem; }
.details dt { color: var(--sd-text-muted); font-weight: 600; }
.details dd { margin: 0; overflow-wrap: anywhere; }

.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.97rem; }
.table th,
.table td { padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--sd-border); text-align: left; vertical-align: top; }
.table thead th { color: var(--sd-text-muted); font-weight: 700; font-size: 0.88rem; background: var(--sd-surface-2); }
.table thead th:first-child { border-top-left-radius: 10px; }
.table thead th:last-child { border-top-right-radius: 10px; }
.table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Telephone : chaque rangee devient une carte, chaque cellule porte son en-tete (data-label). */
@media (max-width: 35.99rem) {
    .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .table--stack,
    .table--stack tbody,
    .table--stack tr,
    .table--stack td { display: block; width: 100%; }
    .table--stack tr { padding: 0.65rem 0; border-bottom: 1px solid var(--sd-border); }
    .table--stack td {
        display: grid;
        grid-template-columns: minmax(6.5rem, 38%) 1fr;
        gap: 0.75rem;
        padding: 0.2rem 0;
        border: 0;
        text-align: left;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .table--stack td::before { content: attr(data-label); color: var(--sd-text-muted); font-weight: 600; }
    .table--stack .num { text-align: left; }
    .details div { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* Paiement */
.checkout { display: grid; gap: var(--site-gap); }
@media (min-width: 56rem) {
    .checkout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
}
.totals { margin: 1rem 0 0; display: grid; gap: 0.4rem; }
.totals div { display: flex; justify-content: space-between; gap: 1rem; }
.totals dt { color: var(--sd-text-muted); }
.totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.totals__total { margin-top: 0.4rem; padding-top: 0.6rem; border-top: 1px solid var(--sd-border); font-weight: 800; font-size: 1.2rem; }
.totals__total dt { color: var(--sd-text); }

/* Documentation */
.page--docs {
    display: grid;
    gap: 1.5rem 3rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "crumbs" "article" "nav";
}
.page--docs .breadcrumbs { grid-area: crumbs; }
.page--docs .docs-article { grid-area: article; min-width: 0; }
.page--docs .docs-nav { grid-area: nav; }
@media (min-width: 64rem) {
    .page--docs {
        grid-template-columns: 15rem minmax(0, 1fr);
        grid-template-areas: "crumbs crumbs" "nav article";
    }
    .page--docs .docs-nav { position: sticky; top: calc(var(--site-header-height) + 1.5rem); align-self: start; }
}
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: 0.9rem; color: var(--sd-text-muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.35rem; color: var(--sd-border); }
.breadcrumbs a { color: var(--sd-text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--sd-accent); }

.docs-nav { font-size: 0.95rem; }
.docs-nav ul { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.15rem; }
.docs-nav a { display: block; padding: 0.4rem 0.7rem; border-radius: 10px; color: var(--sd-text-muted); text-decoration: none; transition: background-color 160ms ease, color 160ms ease; }
.docs-nav a:hover { color: var(--sd-text); background: var(--sd-surface-2); }
.docs-nav a[aria-current="page"] { color: var(--sd-accent-strong); background: var(--sd-accent-soft); font-weight: 700; }
.docs-nav__title { margin: 0 0 0.4rem; padding: 0 0.7rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sd-text-muted); }
.docs-article .page-head h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); }

.toc {
    margin: 0 0 2rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--sd-border);
    border-radius: 14px;
    background: var(--sd-surface);
}
.toc__title { margin: 0 0 0.5rem !important; font-size: 0.95rem !important; }
.toc__title::before { content: none !important; }
.toc ol { margin: 0; padding-left: 1.2rem; columns: 2 14rem; }

/* Pied de page */
.site-footer {
    position: relative;
    margin-top: auto;
    border-top: 1px solid var(--sd-border);
    background: var(--sd-surface);
    font-size: 0.95rem;
}
.site-footer::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sd-accent) 60%, transparent), transparent);
}
.site-footer__inner {
    max-width: var(--site-wide);
    margin: 0 auto;
    padding: 3.5rem var(--site-gutter) 2rem;
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.site-footer h2 { margin: 0 0 0.85rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sd-text-muted); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.site-footer a { color: var(--sd-text); text-decoration: none; }
.site-footer a:hover { color: var(--sd-accent); }
.site-footer__brand p { margin: 0.75rem 0 0; color: var(--sd-text-muted); max-width: 18rem; }
.site-footer__status { font-size: 0.88rem; }
.site-footer__legal {
    max-width: var(--site-wide);
    margin: 0 auto;
    padding: 1.25rem var(--site-gutter) 2rem;
    border-top: 1px solid var(--site-line);
    color: var(--sd-text-muted);
    font-size: 0.88rem;
}
body[data-assistant="on"] .site-footer__legal { padding-bottom: 5.5rem; }

/* Assistant IA (monte par site.js tant qu'une IA repond) */
.assistant__open {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 3rem;
    padding: 0.55rem 1.1rem 0.55rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--sd-ai) 35%, var(--sd-border));
    border-radius: 999px;
    background: var(--sd-surface);
    color: var(--sd-ai-strong);
    font: inherit;
    font-weight: 700;
    box-shadow: var(--site-lift), var(--sd-shadow-2);
    cursor: pointer;
    animation: sd-rise 500ms var(--site-ease) both;
    transition: background-color 180ms ease, transform 220ms var(--site-ease), box-shadow 220ms ease;
}
.assistant__open:hover { background: var(--sd-ai-soft); transform: translateY(-2px); }
.assistant__logo { width: 24px; height: 24px; }
/* Telephone : une pastille ronde, le libelle reste pour les lecteurs d'ecran. */
@media (max-width: 39.99rem) {
    .assistant__open { width: 3.25rem; height: 3.25rem; padding: 0; justify-content: center; }
    .assistant__open > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .assistant__logo { width: 28px; height: 28px; }
}
.assistant__dialog {
    width: min(var(--assistant-width, 26rem), calc(100vw - 2rem));
    max-height: min(40rem, calc(100vh - 2rem));
    margin: auto 1rem 1rem auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--sd-border);
    border-radius: var(--site-radius-xl);
    background: var(--sd-surface);
    color: var(--sd-text);
    box-shadow: var(--site-lift), var(--sd-shadow-3);
}
.assistant__dialog[open] {
    display: flex;
    flex-direction: column;
    opacity: 1;
    translate: 0 0;
    transition: opacity 180ms ease, translate 220ms var(--site-ease), display 220ms allow-discrete, overlay 220ms allow-discrete;
}
@starting-style {
    .assistant__dialog[open] { opacity: 0; translate: 0 10px; }
}
.assistant__dialog[data-sized] {
    height: min(var(--assistant-height), calc(100vh - 2rem));
    max-height: calc(100vh - 2rem);
}
.assistant__dialog::backdrop { background: color-mix(in srgb, var(--sd-shadow-ink) 25%, transparent); }
/* Poignee au coin haut gauche : la fenetre est ancree en bas a droite, elle grandit vers le haut et la gauche. */
.assistant__grip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 1.5rem;
    height: 1.5rem;
    cursor: nwse-resize;
    touch-action: none;
    color: var(--sd-text-muted);
}
.assistant__grip::before {
    content: "";
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    width: 0.6rem;
    height: 0.6rem;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    border-top-left-radius: 4px;
}
.assistant__grip:hover { color: var(--sd-ai-strong); }
/* Telephone : plein ecran, sans poignee. */
@media (max-width: 39.99rem) {
    .assistant__dialog,
    .assistant__dialog[data-sized] {
        width: 100%;
        max-width: none;
        height: 100dvh;
        max-height: none;
        margin: 0;
        border: 0;
        border-radius: 0;
    }
    .assistant__head { padding-top: max(0.85rem, env(safe-area-inset-top)); }
    .assistant__form { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
    .assistant__grip { display: none; }
}
.assistant__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--sd-border);
    background: var(--sd-ai-soft);
}
.assistant__head h2 { margin: 0; font-size: 1.15rem; }
.assistant__close {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--sd-text);
    cursor: pointer;
}
.assistant__close:hover { background: var(--sd-surface); }
.assistant__notice { margin: 0; padding: 0.6rem 1rem; font-size: 0.85rem; color: var(--sd-text-muted); border-bottom: 1px solid var(--sd-border); }
.assistant__log { flex: 1; min-height: 8rem; overflow-y: auto; padding: 1rem; display: grid; align-content: start; gap: 0.75rem; }
.assistant__message {
    max-width: 90%;
    padding: 0.6rem 0.85rem;
    border-radius: 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    animation: sd-rise 300ms var(--site-ease) both;
}
.assistant__message--user { justify-self: end; background: var(--sd-accent-soft); border-bottom-right-radius: 4px; }
.assistant__message--assistant { justify-self: start; background: var(--sd-surface-2); border-bottom-left-radius: 4px; }
.assistant__message--status { justify-self: center; background: none; color: var(--sd-text-muted); font-size: 0.92rem; }
.assistant__form { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; padding: 0.75rem 1rem 1rem; border-top: 1px solid var(--sd-border); }
.assistant textarea { min-height: 2.9rem; resize: vertical; }

/* Mise en place au defilement des cartes seulement (titres et texte ne bougent pas) : un glissement leger dans
   l'espace de la grille, le contenu reste entier et visible ; navigateurs qui suivent le defilement en CSS. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .prose .cards > *,
        .prose .tiles > *,
        .prose .roadmap > *,
        .offers > li {
            animation: sd-reveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
    .button:hover,
    .prose .card:hover,
    .prose .tile:hover,
    .offer:hover { transform: none; }
    .showcase__surface { stroke-dashoffset: 0; }
    .sync--offline { opacity: 0; }
    .sync--online { opacity: 1; }
}

@media print {
    .site-header,
    .site-footer,
    .assistant__open,
    .showcase,
    .skip-link { display: none !important; }
    body { background: none; }
}