/* ============================================================
   LXUCAN — Design System
   DA dérivée de cofounder.co (tokens, boutons, gradients,
   espacements, typo) — sans la composante pixel-art.
   Polices : Inter (sans), IBM Plex Mono (mono),
   Instrument Serif (wordmark).
   ============================================================ */

/* ---------- Polices locales ---------- */
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-latin-400-600.woff2") format("woff2");
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "Instrument Serif";
    src: url("../fonts/instrument-serif-latin-400.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Instrument Serif";
    src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
    /* Surfaces */
    --color-surface: #f5f5f2;
    --color-surface-raised: #fbfbf8;
    --color-surface-darker: #e7e7e3;
    --color-white: #fff;

    /* Encre (échelle alpha sur #262323) */
    --color-ink-strongest: rgba(38, 35, 35, .9);
    --color-ink-strong: rgba(38, 35, 35, .85);
    --color-ink: rgba(38, 35, 35, .8);
    --color-ink-muted: rgba(38, 35, 35, .7);
    --color-ink-faint: rgba(38, 35, 35, .5);
    --color-ink-ui-solid: #202020;

    /* Bordures */
    --color-border-card: #dee2de;
    --color-border-pill: #e3e3e0;

    /* Accents */
    --color-accent-brown: #a76451;
    --color-feature-success: #34a853;
    --color-feature-neutral: #bfbfbf;
    --color-lime-200: #d8f999;
    --color-lime-300: #bbf451;

    /* Bleu hero (gradient, remplace l'illustration pixel) */
    --hero-blue-top: #7cc0fc;
    --hero-blue-mid: #3b96f5;
    --hero-blue-deep: #1c6fd9;

    /* Typo */
    --font-sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;
    --font-serif: "Instrument Serif", Georgia, serif;

    /* Rayons */
    --radius-md: .375rem;
    --radius-btn: 8px;
    --radius-lg: .75rem;
    --radius-card: 1rem;
    --radius-panel: 1.5rem;

    /* Espacements de section */
    --section-pad: clamp(4rem, 9vw, 7.5rem);
    --container: 1080px;
    --container-narrow: 720px;
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    padding: 0;
    width: 100%;
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 150%;
    letter-spacing: .15px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    overscroll-behavior-y: none;
}

img { -webkit-user-drag: none; user-select: none; }
picture > img { display: block; }
.about-figure picture { display: contents; }

a { color: inherit; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; }

/* ---------- Typographie ---------- */
.h-display {
    font-family: var(--font-sans);
    font-weight: 540;
    font-size: clamp(2.6rem, 6.4vw, 4.4rem);
    line-height: 106%;
    letter-spacing: -.02em;
    margin: 0;
}

.h-section {
    font-family: var(--font-sans);
    font-weight: 520;
    font-size: clamp(1.9rem, 3.6vw, 2.6rem);
    line-height: 115%;
    letter-spacing: -.015em;
    color: var(--color-ink-strongest);
    margin: 0;
}

.h-card {
    font-weight: 520;
    font-size: 1.15rem;
    line-height: 130%;
    letter-spacing: -.005em;
    color: var(--color-ink-strongest);
    margin: 0;
}

.lead {
    font-size: 1.0625rem;
    line-height: 160%;
    color: var(--color-ink-muted);
}

/* Étiquette mono uppercase (eyebrow) */
.eyebrow {
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-ink-faint);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* Puce numérotée (style "1 / 2" de cofounder) */
.step-chip {
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 500;
    color: var(--color-ink-muted);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-pill);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
    width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.wordmark {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: .01em;
    text-decoration: none;
}

/* ---------- Boutons (reprise exacte cofounder) ---------- */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 41px;
    padding: 0 14px;
    border-radius: var(--radius-btn);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .15px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: 0;
}

/* Bouton clair sur fond bleu (hero) */
.btn-light-surface {
    background: #f5f5f2;
    color: #1a1a1a;
    border: 1px solid rgba(32, 32, 32, .1);
    box-shadow: 0 2px 3px rgba(0,0,0,.06),
                inset 0 0 .357px 1.5px rgba(255,255,255,.35),
                inset 0 2px #fff;
    transition: background-color .14s ease-out, box-shadow .14s ease-out;
}
.btn-light-surface:hover { background: #ededea; }

/* Bouton sombre (CTA principal sur fond clair) */
.btn-dark {
    background: linear-gradient(rgba(32,32,32,.1) 0% 100%),
                linear-gradient(#4f4f4f 0%, rgba(32,32,32,.85) 100%);
    color: #fff;
    border: 1px solid #383838;
    box-shadow: 0 0 0 1px rgba(64,64,64,.12),
                inset 0 2px rgba(255,255,255,.24),
                inset 0 -.5px 2px rgba(0,0,0,.25),
                0 2px 8px rgba(0,0,0,.03),
                0 3px 4px rgba(0,0,0,.16);
    transition: filter .14s ease-out;
}
.btn-dark:hover { filter: brightness(1.12); }

/* Bouton clair sur fond clair (secondaire) */
.btn-surface {
    background: #f1f1ee;
    color: #1a1a1a;
    border: 1px solid rgba(32, 32, 32, .1);
    box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 0 0 1px rgba(255,255,255,.23);
    transition: background-color .14s ease-out;
}
.btn-surface:hover { background: #e7e7e1; }

/* Bouton verre (sur le hero bleu) */
.btn-glass {
    isolation: isolate;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
    background: linear-gradient(rgba(255,255,255,.16) 0%, rgba(255,255,255,.08) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    backdrop-filter: blur(16px) saturate(1.1);
    border: 1px solid transparent;
    box-shadow: inset 0 -1px rgba(0,0,0,.12),
                inset 0 -1px 2px rgba(0,0,0,.1),
                inset 0 1px 1px rgba(255,255,255,.24);
    transition: background .2s ease-out;
}
.btn-glass:hover {
    background: linear-gradient(rgba(255,255,255,.24) 0%, rgba(255,255,255,.16) 100%);
}

/* ---------- Navigation ---------- */
.site-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    /* padding bas étendu : zone de fondu du fond (le contenu reste en haut) ;
       padding haut : la bande s'étend sous la barre de statut iOS
       (viewport-fit=cover) pour coller au sommet de l'écran */
    padding: calc(14px + env(safe-area-inset-top, 0px)) 0 34px;
    /* le fond (et son blur) s'évanouit en bas au lieu de tracer une ligne ;
       les logos flottants (z-index 60) passent par-dessus sans être coupés */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent);
    /* la bande de fondu ne doit pas intercepter les clics du contenu dessous */
    pointer-events: none;
    transition: background-color .25s ease, box-shadow .25s ease;
}
.site-nav .nav-inner {
    pointer-events: auto;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.site-nav .nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Pilule de liens en verre (au-dessus du hero) */
.nav-pill {
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    border-radius: var(--radius-btn);
    background: linear-gradient(rgba(255,255,255,.16) 0%, rgba(255,255,255,.08) 100%);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: inset 0 -1px rgba(0,0,0,.12),
                inset 0 -1px 2px rgba(0,0,0,.1),
                inset 0 1px 1px rgba(255,255,255,.24);
    transition: background .25s ease, box-shadow .25s ease;
}

.nav-link {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 10px;
    font-size: 15px;
    line-height: 150%;
    letter-spacing: .15px;
    font-weight: 450;
    color: var(--color-surface-raised);
    text-decoration: none;
    white-space: nowrap;
    border-radius: 6px;
    transition: color .2s, background-color .2s;
    font-variant-numeric: lining-nums tabular-nums;
}
/* réserve la largeur du hover gras (technique data-text cofounder) */
.nav-link::after {
    content: attr(data-text);
    visibility: hidden;
    pointer-events: none;
    user-select: none;
    height: 0;
    font-weight: 500;
    overflow: hidden;
}
.nav-link:hover { font-weight: 500; }

.nav-brand {
    color: #fff;
    transition: color .25s ease;
}

/* État "scrollé" : la nav passe sur fond clair */
.site-nav.scrolled {
    background: rgba(245, 245, 242, .85);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
.site-nav.scrolled .nav-brand { color: var(--color-ink-strongest); }
.site-nav.scrolled .nav-pill {
    background: var(--color-surface-raised);
    box-shadow: inset 0 0 0 1px var(--color-border-pill), 0 1px 1px rgba(0,0,0,.04);
}
.site-nav.scrolled .nav-link { color: var(--color-ink-muted); }
.site-nav.scrolled .nav-link:hover { color: var(--color-ink-strongest); }

/* Variante : pages intérieures, nav claire dès le départ */
.site-nav.nav-light {
    background: rgba(245, 245, 242, .85);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
.site-nav.nav-light .nav-brand { color: var(--color-ink-strongest); }
.site-nav.nav-light .nav-pill {
    background: var(--color-surface-raised);
    box-shadow: inset 0 0 0 1px var(--color-border-pill), 0 1px 1px rgba(0,0,0,.04);
}
.site-nav.nav-light .nav-link { color: var(--color-ink-muted); }
.site-nav.nav-light .nav-link:hover { color: var(--color-ink-strongest); }

/* Accueil : texte sombre lisible mais sans bandeau (fond transparent).
   Les pilules conservent leur fond propre, donc la nav reste lisible. */
.site-nav.nav-hero {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    min-height: max(620px, 86dvh);
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 80% -10%, rgba(167, 100, 81, 0.08) 0%, rgba(167, 100, 81, 0) 60%),
        linear-gradient(180deg, var(--color-surface-raised) 0%, var(--color-surface) 100%);
    color: var(--color-ink-strongest);
}
/* fondu vers la surface crème en bas du hero */
.hero::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 120px;
    background: linear-gradient(to bottom, rgba(245,245,242,0) 0%, var(--color-surface) 100%);
    pointer-events: none;
}

.hero-inner {
    position: relative;
    z-index: 2;
    padding-top: 120px;
    padding-bottom: 140px;
    text-align: center;
}

.hero-title {
    color: var(--color-ink-strongest);
    /* taille/largeur calibrées pour tenir sur deux lignes */
    font-size: clamp(1.8rem, 4.6vw + .4rem, 3.55rem);
    max-width: 30ch;
    margin-inline: auto;
    text-wrap: balance;
}

.hero-sub {
    margin-top: 20px;
    font-size: 1.0625rem;
    line-height: 150%;
    letter-spacing: .15px;
    color: var(--color-ink-muted);
    max-width: 46ch;
    margin-inline: auto;
}

.hero-ctas {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.hero-ctas .btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
}

/* ---------- Hero : éléments graphiques (essai DA) ---------- */
/* Nappes lumineuses flottantes dans le bleu */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
    z-index: 0;
}
.hero-orb.o1 {
    width: 420px; height: 420px;
    right: -80px; top: -120px;
    background: radial-gradient(circle, rgba(167, 100, 81, 0.12) 0%, rgba(167, 100, 81, 0) 70%);
}
.hero-orb.o2 {
    width: 520px; height: 520px;
    left: -160px; bottom: -200px;
    background: radial-gradient(circle, rgba(167, 100, 81, 0.06) 0%, rgba(167, 100, 81, 0) 70%);
}

/* Logos de l'écosystème dispersés dans le hero. Chaque logo flotte
   doucement ; au scroll, JS les fait fuir vers le haut (flou de mouvement). */
.hero-float {
    position: absolute;
    inset: 0;
    /* devant le texte ET la nav (z 50) : les logos survolent la barre,
       au repos comme pendant l'envol au scroll */
    z-index: 60;
    pointer-events: none;
}
.float-logo {
    position: absolute;
    left: var(--fx);
    top: var(--fy);
    width: 60px; height: 60px;
    border-radius: 13px;
    background: #fff;
    object-fit: contain;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06),
                0 8px 20px -6px rgba(38, 35, 35, .18);
    opacity: 0;
    /* --fly-y / --fly-blur / --fly-fade pilotés par site.js au scroll.
       Le flottement anime `translate` (composité GPU), l'envol `transform` :
       les deux se combinent sans se piétiner ni déclencher de layout. */
    transform: translateY(var(--fly-y, 0px)) scaleY(var(--fly-stretch, 1)) rotate(var(--frot, 0deg));
    filter: blur(var(--fly-blur, 0px));
    will-change: transform, translate, filter, opacity;
    animation:
        logo-in .8s cubic-bezier(.23,1,.32,1) calc(.6s + var(--fdel, 0s)) forwards,
        logo-bob var(--fdur, 8s) ease-in-out calc(.6s + var(--fdel, 0s)) infinite;
    pointer-events: auto;
    cursor: pointer;
    text-decoration: none;
    transition: box-shadow .22s ease;
}
.float-logo > picture,
.float-logo > picture > img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}
.float-logo > picture > img {
    display: block;
    object-fit: contain;
}
.float-logo:hover {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08),
                0 12px 28px -5px rgba(38, 35, 35, .32);
}
.float-logo:focus-visible {
    outline: 3px solid var(--color-ink-strongest);
    outline-offset: 4px;
}
@keyframes logo-in {
    from { opacity: 0; }
    to   { opacity: var(--fly-fade, 1); }
}
@keyframes logo-bob {
    0%, 100% { translate: 0 0; }
    33%      { translate: 5px -9px; }
    66%      { translate: -6px 5px; }
}
@media (prefers-reduced-motion: reduce) {
    .float-logo { animation: logo-in .4s ease forwards; }
}
/* Mobile : on garde les logos flottants, nettement plus petits, et on les
   repositionne sur le pourtour du hero pour laisser le texte centré lisible.
   (left/top écrasent les --fx/--fy inline ; l'envol au scroll reste inchangé.) */
@media (max-width: 900px) {
    .float-logo { width: 32px; height: 32px; border-radius: 8px; }
    .float-logo::after {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: 14px;
    }
    /* Les logos gardent leurs positions inline (--fx/--fy) : même dispersion
       au-dessus du texte qu'en desktop, seule la taille change. */
}

/* Entrée en cascade (hero-stagger cofounder) */
.stagger {
    opacity: 0;
    transform: translateY(16px);
    animation: enter .6s cubic-bezier(.23, 1, .32, 1) forwards;
    animation-delay: calc(.1s + var(--stagger, 0) * .25s);
}
@keyframes enter {
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Sections ---------- */
.section { padding: var(--section-pad) 0; }
.section-darker { background: var(--color-surface-darker); }

.section-head { max-width: 560px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head .eyebrow { margin-bottom: 14px; }
.section-head .lead { margin-top: 14px; }

/* ---------- Cartes ---------- */
.card {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-card);
    padding: 28px;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

/* Carte projet */
.project-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-decoration: none;
    transition: border-color .2s ease-out, box-shadow .2s ease-out, transform .2s ease-out;
}
.project-card:hover {
    border-color: #c9cec9;
    box-shadow: 0 2px 3px rgba(0,0,0,.04), 0 12px 32px -12px rgba(38,35,35,.12);
    transform: translateY(-2px);
}

.project-card .card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.project-logo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--color-white);
    border: 1px solid var(--color-border-pill);
    display: block;
    overflow: hidden;
}
.project-logo > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.project-card p {
    margin: 0;
    flex-grow: 1;
    font-size: .9375rem;
    line-height: 155%;
    color: var(--color-ink-muted);
}

.card-link {
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-ink-faint);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .2s, gap .2s;
}
.project-card:hover .card-link { color: var(--color-ink-strong); gap: 10px; }

/* Badges de statut */
.badge {
    --status-rgb: 126, 119, 104;
    --status-ink: #675f50;
    --status-step-2: rgba(var(--status-rgb), .18);
    --status-step-3: rgba(var(--status-rgb), .18);
    width: 9.25rem;
    height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(var(--status-rgb), .24);
    border-radius: 6px;
    background:
        linear-gradient(90deg, rgba(var(--status-rgb), .1), rgba(var(--status-rgb), .025) 62%, transparent),
        var(--color-surface);
    box-shadow:
        inset 0 1px rgba(255, 255, 255, .72),
        0 1px 2px rgba(38, 35, 35, .035);
    color: var(--status-ink);
    font-family: var(--font-mono);
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .08em;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
    transition:
        color .2s ease-out,
        border-color .2s ease-out,
        background-color .2s ease-out,
        box-shadow .2s ease-out,
        transform .25s cubic-bezier(.23, 1, .32, 1);
}
.badge::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: rgb(var(--status-rgb));
    box-shadow: 0 0 0 3px rgba(var(--status-rgb), .11);
}
.badge::after {
    content: "";
    width: 17px;
    height: 3px;
    margin-left: auto;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        rgb(var(--status-rgb)) 0 4px,
        transparent 4px 6px,
        var(--status-step-2) 6px 11px,
        transparent 11px 13px,
        var(--status-step-3) 13px 17px
    );
}
.badge.live {
    --status-rgb: 36, 135, 91;
    --status-ink: #1f6949;
    --status-step-2: rgb(var(--status-rgb));
    --status-step-3: rgb(var(--status-rgb));
}
.badge.live::before {
    box-shadow:
        0 0 0 3px rgba(var(--status-rgb), .12),
        0 0 10px rgba(var(--status-rgb), .2);
    animation: status-live-blink 1s ease-in-out infinite;
}
.badge.dev {
    --status-rgb: 57, 105, 158;
    --status-ink: #315e8d;
    --status-step-2: rgb(var(--status-rgb));
}
.badge.dev::before {
    background: conic-gradient(rgb(var(--status-rgb)) 0 72%, rgba(var(--status-rgb), .16) 72% 100%);
    animation: status-dev-spin 1.8s linear infinite;
}
.badge.soon {
    --status-rgb: 143, 118, 75;
    --status-ink: #735f3d;
}
.badge.soon::before {
    background: transparent;
    border: 1.5px solid rgb(var(--status-rgb));
    box-shadow: 0 0 0 3px rgba(var(--status-rgb), .08);
    animation: status-soon-breathe 2.8s ease-in-out infinite;
}
.badge.soon::after {
    background:
        linear-gradient(
            90deg,
            rgba(var(--status-rgb), .16) 0 28%,
            rgb(var(--status-rgb)) 46% 54%,
            rgba(var(--status-rgb), .16) 72% 100%
        );
    background-size: 220% 100%;
    animation: status-soon-sweep 2.8s ease-in-out infinite;
}
.badge.review {
    --status-rgb: 124, 79, 179;
    --status-ink: #5e3f8f;
    --status-step-2: rgb(var(--status-rgb));
}
.badge.review::before {
    background: conic-gradient(rgb(var(--status-rgb)) 0 0%, rgba(var(--status-rgb), .16) 0% 100%);
    animation: status-review-scan 1.6s ease-in-out infinite;
}
@keyframes status-live-blink {
    0%, 42%, 58%, 72%, 100% {
        opacity: 1;
        box-shadow:
            0 0 0 3px rgba(var(--status-rgb), .12),
            0 0 10px rgba(var(--status-rgb), .2);
    }
    49%, 65% {
        opacity: .32;
        box-shadow:
            0 0 0 2px rgba(var(--status-rgb), .07),
            0 0 3px rgba(var(--status-rgb), .08);
    }
}
@keyframes status-dev-spin {
    to { transform: rotate(1turn); }
}
@keyframes status-soon-breathe {
    0%, 100% {
        transform: scale(.88);
        box-shadow: 0 0 0 2px rgba(var(--status-rgb), .06);
    }
    50% {
        transform: scale(1);
        box-shadow:
            0 0 0 4px rgba(var(--status-rgb), .1),
            0 0 9px rgba(var(--status-rgb), .12);
    }
}
@keyframes status-soon-sweep {
    0%, 18% { background-position: 110% 0; opacity: .5; }
    55% { opacity: 1; }
    82%, 100% { background-position: -110% 0; opacity: .5; }
}
@keyframes status-review-scan {
    0%, 100% { background: conic-gradient(rgb(var(--status-rgb)) 0 25%, rgba(var(--status-rgb), .16) 25% 100%); }
    50% { background: conic-gradient(rgb(var(--status-rgb)) 0 75%, rgba(var(--status-rgb), .16) 75% 100%); }
}
@media (prefers-reduced-motion: reduce) {
    .badge::before,
    .badge::after {
        animation: none;
    }
}
@media (hover: hover) {
    .index-row:hover .badge {
        transform: translateX(-3px);
        border-color: rgba(var(--status-rgb), .42);
        box-shadow:
            inset 0 1px rgba(255, 255, 255, .8),
            0 5px 16px -9px rgba(var(--status-rgb), .48);
    }
}

/* ---------- Index éditorial des projets ----------
   Grandes lignes typographiques (inspiration galerie-index) : le nom en
   serif géant porte la ligne, le survol révèle le reste. */
.project-index {
    border-top: 1px solid var(--color-border-card);
}
.index-row {
    position: relative;
    display: grid;
    grid-template-columns: 3.5rem 64px minmax(0, 1fr) auto 2rem;
    align-items: center;
    gap: clamp(16px, 3vw, 36px);
    padding: clamp(20px, 3vw, 30px) clamp(8px, 1.5vw, 20px);
    border-bottom: 1px solid var(--color-border-card);
    text-decoration: none;
    overflow: hidden;
    scroll-margin-top: 88px;
}
/* voile de survol qui monte du bas */
.index-row::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-surface-raised);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .35s cubic-bezier(.23, 1, .32, 1);
    z-index: 0;
}
.index-row:hover::before { transform: scaleY(1); }
.index-row > * { position: relative; z-index: 1; }

.index-num {
    font-family: var(--font-mono);
    font-size: .8125rem;
    color: var(--color-ink-faint);
    transition: color .25s;
}
.index-row:hover .index-num { color: var(--color-accent-brown); }

.index-logo {
    width: 64px; height: 64px;
    border-radius: 14px;
    background: var(--color-white);
    border: 1px solid var(--color-border-pill);
    display: block;
    overflow: hidden;
    transform: scale(.9);
    transition: transform .35s cubic-bezier(.23, 1, .32, 1), box-shadow .35s;
}
.index-logo > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.index-row:hover .index-logo {
    transform: scale(1.08) rotate(-3deg);
    box-shadow: 0 12px 28px -10px rgba(38, 35, 35, .25);
}

.index-main { min-width: 0; }
.index-name {
    display: block;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(1.75rem, 4vw, 3rem);
    line-height: 110%;
    color: var(--color-ink-strongest);
    transition: transform .35s cubic-bezier(.23, 1, .32, 1), font-style 0s;
}
.index-row:hover .index-name {
    font-style: italic;
    transform: translateX(8px);
}
.index-desc {
    display: block;
    margin-top: 6px;
    max-width: 52ch;
    font-size: .9375rem;
    line-height: 150%;
    color: var(--color-ink-faint);
    transition: color .25s, transform .35s cubic-bezier(.23, 1, .32, 1);
}
.index-row:hover .index-desc {
    color: var(--color-ink-muted);
    transform: translateX(8px);
}

.index-arrow {
    font-size: 1.25rem;
    color: var(--color-ink-faint);
    transform: translateX(-6px);
    opacity: 0;
    transition: transform .35s cubic-bezier(.23, 1, .32, 1), opacity .25s, color .25s;
}
.index-row:hover .index-arrow {
    transform: translateX(0);
    opacity: 1;
    color: var(--color-ink-strongest);
}

@media (max-width: 760px) {
    .index-row {
        grid-template-columns: 2.25rem 44px minmax(0, 1fr);
        grid-template-areas:
            "num logo main"
            "num logo badge";
        row-gap: 10px;
    }
    .index-num   { grid-area: num; align-self: start; margin-top: 6px; }
    .index-logo  { grid-area: logo; width: 44px; height: 44px; border-radius: 10px; align-self: start; }
    .index-main  { grid-area: main; }
    .index-row .badge { grid-area: badge; justify-self: start; height: 28px; }
    .index-arrow { display: none; }
    /* au tactile, pas de survol : tout est lisible d'emblée */
    .index-desc  { color: var(--color-ink-muted); }
}

/* ---------- Panneau "spec sheet" (style pricing cofounder) ---------- */
.spec-panel {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-panel);
    padding: clamp(24px, 4vw, 40px);
}

.spec-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    font-size: .9375rem;
}
.spec-row .spec-label { color: var(--color-ink-strong); }
.spec-row .spec-value {
    font-family: var(--font-mono);
    font-size: .875rem;
    color: var(--color-ink-faint);
    text-align: right;
    white-space: nowrap;
}
@media (max-width: 550px) {
    .spec-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 12px 0;
    }
    .spec-row .spec-value {
        text-align: left;
        white-space: normal;
        word-break: break-all;
    }
}

.spec-divider {
    border: 0;
    border-top: 1px solid var(--color-border-pill);
    margin: 14px 0;
}

.spec-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 8px;
}
.spec-total .spec-label { font-weight: 520; color: var(--color-ink-strongest); }
.spec-total .spec-label small {
    display: block;
    font-weight: 400;
    font-size: .8125rem;
    color: var(--color-ink-faint);
}
.spec-total .spec-big {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    letter-spacing: -.01em;
    color: var(--color-ink-strongest);
}

/* Sélecteur segmenté (plan toggle cofounder) */
.segmented {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--color-surface-darker);
    border: 1px solid var(--color-border-pill);
    border-radius: 10px;
}
.segmented .seg {
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 7px 14px;
    font-family: var(--font-sans);
    font-size: .875rem;
    font-weight: 450;
    color: var(--color-ink-muted);
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .15s ease-out;
}
.segmented .seg .seg-price {
    font-family: var(--font-mono);
    font-size: .8125rem;
    color: var(--color-ink-faint);
}
.segmented .seg.active {
    background: var(--color-surface-raised);
    border-color: var(--color-border-pill);
    color: var(--color-ink-strongest);
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

/* ---------- Charte (landing) ----------
   Manifeste éditorial : chaque principe est une déclaration centrée en
   serif, numérotée en chiffres romains, séparée par un filet court. */
.charter-list {
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.charter-item {
    display: block;
    text-align: center;
    padding: clamp(26px, 4vw, 40px) 12px;
}
.charter-item:not(:last-child)::after {
    content: "";
    display: block;
    width: 44px;
    height: 1px;
    margin: clamp(26px, 4vw, 40px) auto 0;
    background: var(--color-ink-faint);
    opacity: .35;
}
.charter-item .charter-num {
    display: block;
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .14em;
    color: var(--color-accent-brown);
    margin-bottom: 14px;
}
.charter-item .charter-text {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(1.45rem, 3.2vw, 2.1rem);
    line-height: 135%;
    letter-spacing: .002em;
    color: var(--color-ink-strongest);
    margin: 0;
    text-wrap: balance;
}

/* ---------- Bandeau "À propos" (teaser landing) ---------- */
.about-teaser {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    align-items: center;
    gap: 28px;
}
.about-teaser .about-photo {
    width: 96px; height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-border-card);
    box-shadow: 0 2px 3px rgba(0,0,0,.06), inset 0 0 0 3px var(--color-surface-raised);
}
.about-teaser p { margin: 6px 0 0; }
@media (max-width: 720px) {
    .about-teaser { grid-template-columns: 72px 1fr; }
    .about-teaser .about-photo { width: 72px; height: 72px; }
    .about-teaser .about-cta { grid-column: 1 / -1; }
}

/* ---------- Page À propos ---------- */
.about-hero-photo {
    width: clamp(140px, 18vw, 180px);
    height: clamp(140px, 18vw, 180px);
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-border-card);
    box-shadow: 0 12px 32px -12px rgba(38,35,35,.25), inset 0 0 0 4px var(--color-surface-raised);
}
.contact-list { display: flex; flex-direction: column; gap: 2px; }
.contact-list .spec-row { padding: 12px 0; }
.contact-list a { text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }

/* ---------- Liste de features (pages projet) ---------- */
.feature-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.feature-list .card { padding: 22px; }
.feature-list .h-card { margin-bottom: 8px; font-size: 1.02rem; }
.feature-list p { margin: 0; font-size: .9rem; line-height: 155%; color: var(--color-ink-muted); }

/* ---------- Bandeau hero des pages projet ----------
   Chaque page projet définit ses variables de thème :
   --p-accent (couleur du logo), --p-accent-deep (variante foncée),
   --p-glow (RGB pour les nappes translucides). Le logo lui-même est
   répété en filigrane géant : ses formes et couleurs irriguent la page. */
.project-hero {
    position: relative;
    overflow: hidden;
    padding-top: 150px;
    padding-bottom: clamp(3rem, 6vw, 5rem);
    border-bottom: 1px solid var(--color-border-pill);
    background:
        radial-gradient(90% 120% at 85% -20%, rgba(var(--p-glow, 38, 35, 35), .16) 0%, rgba(var(--p-glow, 38, 35, 35), 0) 60%),
        linear-gradient(180deg, var(--color-surface-raised) 0%, var(--color-surface) 100%);
}
.project-hero .project-logo { width: 64px; height: 64px; border-radius: 14px; }
.project-hero .hero-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 22px;
}
.project-hero .container { position: relative; z-index: 1; }

/* Filigrane : le logo en très grand, fondu dans le bandeau */
.hero-watermark {
    position: absolute;
    right: -60px;
    bottom: -22%;
    width: clamp(280px, 36vw, 460px);
    height: auto;
    opacity: .1;
    transform: rotate(-8deg);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.hero-watermark > img {
    width: 100%;
    height: auto;
}

/* Éléments teintés par le thème projet */
.project-page .eyebrow,
.project-page .card-link { color: var(--p-accent-deep, var(--color-ink-faint)); }
.project-page .step-chip { color: var(--p-accent-deep, var(--color-ink-muted)); }
.project-page .spec-big { color: var(--p-accent-deep, var(--color-ink-strongest)); }
.project-page .feature-list .card:hover,
.project-page .spec-panel:hover { border-color: rgba(var(--p-glow, 38, 35, 35), .4); }
.project-page .spec-panel { border-top: 3px solid var(--p-accent, var(--color-border-card)); }

/* CTA principal aux couleurs du projet (mêmes ombres que .btn-dark) */
.btn-accent {
    background: linear-gradient(rgba(32,32,32,.08) 0% 100%),
                linear-gradient(var(--p-accent, #4f4f4f) 0%, var(--p-accent-deep, rgba(32,32,32,.85)) 100%);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.15);
    border: 1px solid var(--p-accent-deep, #383838);
    box-shadow: 0 0 0 1px rgba(var(--p-glow, 64, 64, 64), .12),
                inset 0 2px rgba(255,255,255,.24),
                inset 0 -.5px 2px rgba(0,0,0,.25),
                0 2px 8px rgba(0,0,0,.03),
                0 3px 4px rgba(var(--p-glow, 0, 0, 0), .2);
    transition: filter .14s ease-out;
}
.btn-accent:hover { filter: brightness(1.1); }

/* ---------- Aperçu produit des pages générées ---------- */
.project-showcase {
    overflow: hidden;
    background:
        radial-gradient(70% 90% at 82% 12%, rgba(var(--p-glow, 38, 35, 35), .11), transparent 70%),
        var(--color-surface);
}
.showcase-layout {
    display: grid;
    grid-template-columns: minmax(220px, .72fr) minmax(0, 1.5fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;
}
.showcase-copy {
    align-self: start;
    padding-top: clamp(.5rem, 3vw, 2rem);
}
.showcase-copy .h-section { margin: 18px 0 16px; }
.showcase-copy .lead { margin: 0; max-width: 34ch; }
.product-media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2.4vw, 2rem);
    align-items: center;
    justify-items: center;
    min-width: 0;
}
.product-media-grid:has(.product-shot:only-child) {
    grid-template-columns: minmax(0, 1fr);
}
.product-shot {
    width: 100%;
    margin: 0;
    min-width: 0;
}
.product-shot img {
    display: block;
    max-width: 100%;
}
.product-shot.portrait {
    width: min(100%, 360px);
    padding: clamp(8px, 1.2vw, 14px);
    border-radius: 32px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 28px 70px -32px rgba(38,35,35,.42),
                inset 0 0 0 1px rgba(38,35,35,.08);
}
.product-shot.portrait:nth-child(2) { transform: translateY(42px); }
.product-shot.portrait img {
    width: 100%;
    border-radius: 24px;
}
.product-shot.placeholder img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 28px;
    box-shadow: 0 28px 70px -38px rgba(38,35,35,.32);
}
@media (max-width: 760px) {
    .showcase-layout { grid-template-columns: 1fr; gap: 2.2rem; }
    .showcase-copy { padding-top: 0; }
    .showcase-copy .lead { max-width: 42ch; }
    .product-media-grid { gap: 10px; }
    .product-shot.portrait { padding: 7px; border-radius: 22px; }
    .product-shot.portrait img { border-radius: 16px; }
    .product-shot.portrait:nth-child(2) { transform: translateY(22px); }
    .product-shot.placeholder img { border-radius: 18px; }
}

/* ---------- Révélation au scroll ---------- */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s cubic-bezier(.23,1,.32,1), transform .6s cubic-bezier(.23,1,.32,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---------- Footer ---------- */
.site-footer {
    border-top: 1px solid var(--color-border-pill);
    background: var(--color-surface);
    padding: 0;
}

/* Bande supérieure : wordmark + liens */
.footer-top {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 32px 48px;
    padding: 48px 0 36px;
    border-bottom: 1px solid var(--color-border-pill);
}

.footer-brand {}
.footer-brand .wordmark {
    font-size: 1.65rem;
    color: var(--color-ink-strongest);
    text-decoration: none;
}
.footer-brand p {
    margin: 8px 0 0;
    font-size: .875rem;
    line-height: 155%;
    color: var(--color-ink-faint);
    max-width: 38ch;
}

.footer-nav {
    display: flex;
    gap: 40px;
}
.footer-nav-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-nav-label {
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--color-ink-faint);
    margin-bottom: 4px;
}
.footer-link {
    position: relative;
    isolation: isolate;
    font-size: .9375rem;
    color: var(--color-ink-muted);
    text-decoration: none;
    transition: color .2s ease-out;
    width: fit-content;
}
.footer-link::before {
    content: "";
    position: absolute;
    inset: -2px -6px;
    z-index: -1;
    border-radius: 4px;
    background: rgba(231, 231, 227, .8);
    opacity: 0;
    transition: opacity .2s ease-out;
}
.footer-link:hover { color: var(--color-ink-strongest); }
.footer-link:hover::before { opacity: 1; }

/* Bande basse : copyright */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
}
.footer-meta {
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--color-ink-faint);
    margin: 0;
    letter-spacing: .03em;
}
.footer-social {
    display: flex;
    gap: 6px;
}
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border: 1px solid var(--color-border-pill);
    border-radius: var(--radius-md);
    color: var(--color-ink-faint);
    text-decoration: none;
    transition: color .18s ease-out, border-color .18s ease-out, background .18s ease-out;
}
.footer-social a:hover {
    color: var(--color-ink-strongest);
    border-color: var(--color-border-card);
    background: var(--color-surface-raised);
}
.footer-social svg { width: 14px; height: 14px; display: block; }

/* Responsive footer */
@media (max-width: 680px) {
    .footer-top {
        grid-template-columns: 1fr;
        padding-bottom: 28px;
    }
    .footer-nav { flex-wrap: wrap; gap: 28px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Ancienne classe laissée pour rétro-compat (pages projet) */
.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}
.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}

/* ---------- Modale Contact (partagée, injectée par site.js) ---------- */
.contact-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(38, 35, 35, .32);
    -webkit-backdrop-filter: blur(10px) saturate(1.05);
    backdrop-filter: blur(10px) saturate(1.05);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
}
.contact-overlay.open { opacity: 1; pointer-events: auto; }

.contact-modal {
    position: relative;
    width: min(400px, 100%);
    background:
        radial-gradient(120% 80% at 85% -10%, rgba(184, 38, 43, .06) 0%, rgba(184, 38, 43, 0) 55%),
        var(--color-surface-raised);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-panel);
    padding: 30px 26px 24px;
    box-shadow: 0 2px 3px rgba(0,0,0,.05),
                0 28px 70px -18px rgba(38, 35, 35, .4),
                inset 0 1px 0 rgba(255,255,255,.7);
    transform: translateY(14px) scale(.97);
    transition: transform .32s cubic-bezier(.23, 1, .32, 1);
}
.contact-overlay.open .contact-modal { transform: none; }

.contact-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 30px; height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-pill);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-ink-muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .14s ease-out, color .14s ease-out;
}
.contact-close:hover { background: var(--color-surface-darker); color: var(--color-ink-strongest); }

.contact-eyebrow {
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--color-ink-faint);
}
.contact-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 1.7rem;
    line-height: 115%;
    color: var(--color-ink-strongest);
    margin: 8px 0 4px;
}
.contact-title em { font-style: italic; color: #b8262b; }
.contact-sub {
    margin: 0 0 18px;
    font-size: .9rem;
    line-height: 150%;
    color: var(--color-ink-muted);
}

.contact-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.contact-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--color-border-pill);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    text-decoration: none;
    transition: border-color .18s ease-out, box-shadow .18s ease-out, transform .18s ease-out;
}
.contact-row:hover {
    border-color: #c9cec9;
    box-shadow: 0 8px 22px -10px rgba(38, 35, 35, .2);
    transform: translateY(-1px);
}
.contact-ico {
    flex: none;
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--color-white);
    border: 1px solid var(--color-border-pill);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    color: var(--c-row, var(--color-ink-muted));
}
.contact-ico svg { width: 16px; height: 16px; display: block; }
.contact-row .row-main { min-width: 0; }
.contact-row .row-label {
    display: block;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--color-ink-strongest);
    line-height: 130%;
}
.contact-row .row-value {
    display: block;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .03em;
    color: var(--color-ink-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.contact-row .row-arrow {
    margin-left: auto;
    color: var(--color-ink-faint);
    transition: transform .18s ease-out, color .18s ease-out;
}
.contact-row:hover .row-arrow { transform: translateX(3px); color: var(--c-row, var(--color-ink-strongest)); }
.contact-row.r-mail  { --c-row: #b8262b; }
.contact-row.r-x     { --c-row: #1a1a1a; }
.contact-row.r-site  { --c-row: #33567f; }

/* Libellé responsive du déclencheur (Me trouver ↔ Contact) */
.label-mobile { display: none; }
@media (max-width: 640px) {
    .label-desktop { display: none; }
    .label-mobile { display: inline; }
}

/* Mobile : même bloc centré, simplement ajusté aux petits écrans */
@media (max-width: 640px) {
    .contact-overlay { padding: 16px; }
    .contact-modal { padding: 26px 20px 20px; }
}

/* ============================================================
   THÈME « PEINTURE DITHÉRÉE » (accueil)
   DA dérivée de assets/img/hero-painting.svg : paysage pixel-art
   old-school (ciel #1e82b9, montagne rose, pins, lac, prairie).
   Scopé sur body.home-painted pour ne pas toucher les autres pages.
   ============================================================ */
.home-painted {
    /* Palette tirée des logos de l'écosystème (Ondeo, WiLive, Ascensionn,
       Nabuchodonosor, SplitCapture, TePe, Cloakyy…) */
    --px-sky: #4a7fb5;        /* bleu Ondeo */
    --px-sky-deep: #33567f;   /* bleu Statzz */
    --px-pine: #182820;       /* encre TePe */
    --px-olive: #294f36;      /* vert Ascensionn */
    --px-meadow: #45806c;     /* sarcelle WiLive */
    --px-sage: #bac8d2;
    --px-cream: #e4ded0;
    --px-cream-light: #f4f2eb;
    --px-ochre: #c9a86a;      /* ambre SplitCapture */
    --px-rose: #8d5e3a;       /* brun Nabuchodonosor */
    --px-berry: #1d4e4a;      /* sarcelle profonde : accent principal */
    --px-lake: #2d5f54;

    /* Le brun accent du site glisse vers le brun Nabuchodonosor */
    --color-accent-brown: var(--px-rose);
}
.home-painted ::selection { background: var(--px-sky); color: #fff; }

/* ---------- Fond : champ de pixels abstrait pleine page ----------
   Dessiné par site.js dans #px-field (fixed, derrière tout le contenu).
   Les sections posent un voile crème translucide par-dessus. */
#px-field {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100vw;
    height: 100vh;
    image-rendering: pixelated;
    pointer-events: none;
    /* tons plus doux, moins saturés */
    filter: saturate(.62) brightness(1.03);
    background: var(--px-sky); /* le temps du premier dessin */
}
.home-painted .site-nav { z-index: 50; }
.home-painted .hero { position: relative; z-index: 1; }

/* Le champ reste visible PARTOUT : les sections sont transparentes, seul
   le bloc de texte reçoit un panneau de lecture crème. Le champ de pixels
   se voit ainsi dans les marges, entre les sections et derrière les héros. */
.home-painted .section,
.home-painted .site-footer {
    position: relative;
    z-index: 1;
    background: transparent;
}
.home-painted .site-footer { border-top: 0; background: rgba(245, 245, 242, .9); }

/* Panneau de lecture réutilisable : crème translucide, coins arrondis.
   Assez opaque pour un texte net, posé sur le champ qui l'entoure. */
.px-panel,
.home-painted #projects .container,
.charter-page.home-painted .creed-item,
.charter-page.home-painted .charter-seal .container-narrow,
.about-page.home-painted .about-copy {
    position: relative;
    background: rgba(246, 246, 243, .9);
    border-radius: 22px;
    box-shadow: 0 24px 60px -34px rgba(24, 40, 28, .4),
                inset 0 0 0 1px rgba(24, 40, 28, .05);
}
.home-painted #projects .container {
    padding: clamp(26px, 4vw, 46px) clamp(20px, 3vw, 40px);
}
.about-page.home-painted .about-copy {
    padding: clamp(24px, 3.5vw, 40px);
    align-self: center;
}

/* ============================================================
   NAV UNIFIÉE — trois blocs, un même matériau
   Le wordmark, la pilule de liens et les actions partagent une
   géométrie et un fond identiques (chip). Seule la position diffère.
   Le matériau change selon l'état : verre clair (repos), encre
   translucide (sur le champ), surface pleine (scrollé / pages claires).
   ============================================================ */
.site-nav .nav-brand,
.site-nav .nav-pill,
.site-nav .nav-actions {
    height: 44px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-btn);
    transition: background .25s ease, box-shadow .25s ease, color .25s ease;
}
.site-nav .nav-pill,
.site-nav .nav-actions { padding: 0 5px; gap: 2px; }
.site-nav .nav-brand {
    padding: 0 16px;
    font-size: 1.22rem;
    line-height: 1;
}
/* Actions : les boutons deviennent des liens, comme la pilule centrale */
.site-nav .nav-actions .btn {
    height: 34px;
    padding: 0 12px;
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 6px;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 450;
    letter-spacing: .15px;
    color: inherit;
    transition: color .2s, background-color .2s, font-weight .2s;
}
.site-nav .nav-actions .btn:hover { font-weight: 500; }

/* — Matériau 1 : verre clair (repos, hero non peint) — */
.site-nav .nav-brand,
.site-nav .nav-pill,
.site-nav .nav-actions {
    background: linear-gradient(rgba(255,255,255,.16) 0%, rgba(255,255,255,.08) 100%);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: inset 0 -1px rgba(0,0,0,.12),
                inset 0 -1px 2px rgba(0,0,0,.1),
                inset 0 1px 1px rgba(255,255,255,.24);
}
.site-nav .nav-brand,
.site-nav .nav-actions,
.site-nav .nav-actions .btn { color: #fff; }

/* — Matériau 2 : surface pleine (scrollé + pages claires) — */
.site-nav.scrolled .nav-brand,
.site-nav.scrolled .nav-pill,
.site-nav.scrolled .nav-actions,
.site-nav.nav-light .nav-brand,
.site-nav.nav-light .nav-pill,
.site-nav.nav-light .nav-actions {
    background: var(--color-surface-raised);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: inset 0 0 0 1px var(--color-border-pill), 0 1px 1px rgba(0,0,0,.04);
}
.site-nav.scrolled .nav-brand,
.site-nav.nav-light .nav-brand { color: var(--color-ink-strongest); }
.site-nav.scrolled .nav-actions,
.site-nav.scrolled .nav-actions .btn,
.site-nav.nav-light .nav-actions,
.site-nav.nav-light .nav-actions .btn { color: var(--color-ink-muted); }
.site-nav.scrolled .nav-actions .btn:hover,
.site-nav.nav-light .nav-actions .btn:hover { color: var(--color-ink-strongest); }

/* — Matériau 3 : encre translucide sur le champ (accueil, non scrollé) — */
.home-painted .site-nav:not(.scrolled):not(.nav-light) .nav-brand,
.home-painted .site-nav:not(.scrolled):not(.nav-light) .nav-pill,
.home-painted .site-nav:not(.scrolled):not(.nav-light) .nav-actions {
    background: linear-gradient(rgba(24,40,28,.5), rgba(24,40,28,.34));
    -webkit-backdrop-filter: blur(14px) saturate(1.05);
    backdrop-filter: blur(14px) saturate(1.05);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16),
                inset 0 1px 1px rgba(255,255,255,.18),
                0 6px 18px -8px rgba(24,40,28,.5);
}
.home-painted .site-nav:not(.scrolled):not(.nav-light) .nav-link,
.home-painted .site-nav:not(.scrolled):not(.nav-light) .nav-brand,
.home-painted .site-nav:not(.scrolled):not(.nav-light) .nav-actions,
.home-painted .site-nav:not(.scrolled):not(.nav-light) .nav-actions .btn { color: #fff; }

/* ---------- Pages intérieures peintes (charte, à propos) ----------
   Même champ de pixels en fond ; leurs surfaces deviennent des voiles. */
.home-painted .charter-hero,
.home-painted .creed,
.home-painted .charter-seal,
.home-painted .about-stage {
    position: relative;
    z-index: 1;
}
/* Hero de la charte : titre posé sur le champ nu (comme l'accueil),
   halo crème diffus derrière le texte pour la lisibilité. */
.charter-page.home-painted .charter-hero { background: transparent; }
.charter-page.home-painted .charter-hero .container-narrow::before {
    content: "";
    position: absolute;
    inset: -22% -24%;
    z-index: -1;
    background: radial-gradient(72% 66% at 50% 48%, rgba(244, 242, 235, .96) 44%, rgba(244, 242, 235, 0) 82%);
    pointer-events: none;
}
/* cercles « respiration » recolorés à la sarcelle */
.charter-page.home-painted .breath { border-color: rgba(29, 78, 74, .18) !important; }
.charter-page.home-painted .breath.b2 { border-color: rgba(29, 78, 74, .12) !important; }
.charter-page.home-painted .breath.b3 { border-color: rgba(29, 78, 74, .08) !important; }

/* Corps du manifeste : transparent — le champ se voit entre les cartes.
   Chaque principe est une carte crème (panneau ci-dessus). */
.charter-page.home-painted .creed {
    background: transparent;
    padding: clamp(5rem, 10vw, 9rem) 24px clamp(4rem, 8vw, 7rem);
}
.charter-page.home-painted .creed-item {
    max-width: 640px;
    margin: 0 auto 26px;
    padding: clamp(2rem, 4vw, 3.2rem) clamp(1.6rem, 3.4vw, 2.8rem);
}
/* accents palette + em sarcelle */
.charter-page.home-painted .creed-num { color: var(--px-lake); }
.charter-page.home-painted .creed-num::before,
.charter-page.home-painted .creed-num::after { background: var(--px-lake); }
.charter-page.home-painted .creed-text em { color: var(--px-berry); }
/* dissolve dithéré coloré, flottant dans l'écart entre deux cartes */
.charter-page.home-painted .creed-item:not(:first-child)::before {
    position: absolute;
    left: 50%;
    top: -26px;
    transform: translateX(-50%);
    width: 170px;
    max-width: none;
    height: 26px;
    margin: 0;
    background:
        repeating-conic-gradient(var(--px-lake) 0 25%, transparent 0 50%) 0 0 / 5px 5px;
    -webkit-mask-image: radial-gradient(ellipse 60% 120% at 50% 50%, #000 8%, transparent 70%);
    mask-image: radial-gradient(ellipse 60% 120% at 50% 50%, #000 8%, transparent 70%);
    opacity: .6;
}

/* Sceau : la section est transparente, le contenu est une carte crème */
.charter-page.home-painted .charter-seal {
    background: transparent;
    border-top: 0;
}
.charter-page.home-painted .seal-mark { color: var(--px-berry); }
/* la carte du sceau : centrée, respirante */
.charter-page.home-painted .charter-seal .container-narrow {
    max-width: 620px;
    margin: 0 auto;
    padding: clamp(2.4rem, 5vw, 3.6rem) clamp(1.6rem, 4vw, 3rem);
}

/* Kicker « LA CHARTE » : glyphes dithérés bien détachés du texte */
.charter-page.home-painted .charter-kicker { gap: 16px; }
.charter-page.home-painted .charter-kicker::before,
.charter-page.home-painted .charter-kicker::after {
    height: auto;
    width: auto;
    background: none;
    opacity: .7;
    font-family: var(--font-mono);
    font-size: .9em;
    letter-spacing: .1em;
    color: var(--px-lake);
}
.charter-page.home-painted .charter-kicker::before { content: "▓▒░"; }
.charter-page.home-painted .charter-kicker::after  { content: "░▒▓"; }
body.about-page.home-painted { background: transparent; }
.about-page.home-painted .about-stage {
    background:
        radial-gradient(80% 90% at 88% 8%, rgba(184, 38, 43, .05) 0%, rgba(184, 38, 43, 0) 55%),
        radial-gradient(70% 80% at 8% 95%, rgba(51, 86, 127, .05) 0%, rgba(51, 86, 127, 0) 55%),
        rgba(250, 250, 248, .32);
}
/* Portrait : posé sur un cadre photo net (le champ passe derrière la page,
   pas derrière l'image) — plus de multiply mal fondu sur les pixels. */
.about-page.home-painted .about-figure {
    flex-direction: column;
    gap: 16px;
}
.about-page.home-painted .about-figure::before { display: none; }
.about-page.home-painted .about-figure img {
    mix-blend-mode: normal;
    -webkit-mask-image: none;
    mask-image: none;
    height: auto;
    max-width: min(100%, 520px);
    flex: none;
    border-radius: 22px;
    padding: clamp(14px, 2.4vw, 26px);
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(250, 250, 248, .94));
    box-shadow: 0 30px 64px -30px rgba(24, 40, 28, .38),
                inset 0 0 0 1px rgba(24, 40, 28, .06);
}
.about-page.home-painted .about-figure .figure-caption {
    position: static;
    transform: none;
    color: #4a5348;
    text-shadow:
        0 1px 0 rgba(244, 242, 235, .8),
        0 0 12px rgba(244, 242, 235, .9);
}

/* ---------- Hero : titre intégré au champ, plein écran ---------- */
.home-painted .hero {
    min-height: max(640px, 100dvh);
    background: transparent;
}
.home-painted .hero::after { display: none; }
.home-painted .hero-inner {
    padding-top: 140px;
    padding-bottom: 150px;
}
/* halo crème diffus derrière le bloc titre : de la lisibilité sans cadre */
.home-painted .hero-inner::before {
    content: "";
    position: absolute;
    inset: -30px 8%;
    z-index: -1;
    background: radial-gradient(58% 62% at 50% 46%, rgba(244, 242, 235, .55), rgba(244, 242, 235, 0) 72%);
    pointer-events: none;
}

.home-painted .hero-title {
    font-size: clamp(2.1rem, 4.8vw + .5rem, 4rem);
    max-width: 17ch;
    color: #182820;
    text-shadow:
        0 1px 0 rgba(244, 242, 235, .6),
        0 0 18px rgba(244, 242, 235, .5),
        0 0 44px rgba(244, 242, 235, .35);
    /* le titre respire avec le pointeur, à peine */
    translate: calc(var(--hmx, 0) * -4px) calc(var(--hmy, 0) * -3px);
}
.home-painted .hero-ctas { margin-top: 34px; }

/* ---------- Boutons dithérés ----------
   Surface texturée de fins pixels, et au survol un balayage de pixels
   (damier) qui traverse en diagonale : le geste « ascii coloré » du site. */
.btn-px {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    height: 46px;
    padding: 0 22px;
    border-radius: var(--radius-btn);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 520;
    letter-spacing: .2px;
    color: #1d2b13;
    border: 1.5px solid var(--px-pine);
    background-color: rgba(244, 242, 235, .82);
    background-image: radial-gradient(rgba(24, 40, 28, .07) 1px, transparent 1.6px);
    background-size: 6px 6px;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    box-shadow: 0 2px 0 rgba(3, 17, 1, .14), 0 12px 24px -16px rgba(3, 17, 1, .5);
    transition: transform .16s ease-out, box-shadow .16s ease-out,
                color .2s ease-out, border-color .2s ease-out;
}
/* balayage de pixels au survol */
.btn-px::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -1;
    color: var(--px-berry);
    background: repeating-conic-gradient(currentColor 0 25%, transparent 0 50%) 0 0 / 5px 5px;
    opacity: 0;
    transform: translateX(-104%) skewX(-10deg);
    transition: transform .42s cubic-bezier(.23, 1, .32, 1), opacity .3s ease-out;
}
.btn-px:hover {
    transform: translateY(-2px);
    border-color: var(--px-berry);
    box-shadow: 0 4px 0 rgba(3, 17, 1, .14), 0 18px 30px -16px rgba(3, 17, 1, .55);
}
.btn-px:hover::before { transform: translateX(0) skewX(-10deg); opacity: .16; }
.btn-px:active { transform: translateY(0); box-shadow: 0 1px 0 rgba(3, 17, 1, .16); }
.btn-px:focus-visible { outline: 3px solid var(--px-berry); outline-offset: 3px; }

/* Primaire : sarcelle profonde, pixels crème au survol */
.btn-px-primary {
    color: #fff;
    border-color: rgba(3, 17, 1, .45);
    background-color: var(--px-berry);
    background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.6px);
    text-shadow: 0 1px 0 rgba(3, 17, 1, .35);
}
.btn-px-primary::before { color: var(--px-ochre); }
.btn-px-primary:hover { border-color: var(--px-ochre); }
.btn-px-primary:hover::before { opacity: .28; }
@media (prefers-reduced-motion: reduce) {
    .btn-px::before { transition: opacity .2s ease-out; transform: none; }
    .btn-px:hover { transform: none; }
}

/* Logos flottants : premier plan absolu, parallaxe pointeur par logo
   (--fdrift sert de profondeur : plus il dérive, plus il réagit) */
/* Icônes iOS : coins arrondis + ombre douce déjà intégrés au PNG.
   Plus de plaque blanche ni de liseré — seulement une ombre portée
   (qui épouse le squircle grâce au border-radius). */
.home-painted .float-logo {
    transform: translate3d(calc(var(--hmx, 0) * var(--fdrift, 1) * -16px),
                           calc(var(--fly-y, 0px) + var(--hmy, 0) * var(--fdrift, 1) * -12px), 0)
               scaleY(var(--fly-stretch, 1))
               rotate(var(--frot, 0deg));
    background: transparent;
    border-radius: 22.37%;
    box-shadow: 0 10px 24px -9px rgba(3, 17, 1, .5);
    transition: box-shadow .22s ease, scale .28s cubic-bezier(.23, 1, .32, 1);
}
.home-painted .float-logo:hover {
    scale: 1.16;
    box-shadow: 0 16px 34px -10px rgba(3, 17, 1, .6);
}

/* Index projets : icônes iOS sans plaque ni bordure blanche */
.home-painted .index-logo {
    background: transparent;
    border: 0;
    border-radius: 22.37%;
    overflow: visible;
    box-shadow: 0 6px 16px -8px rgba(3, 17, 1, .4);
}
.home-painted .index-logo > img { border-radius: 22.37%; }
.home-painted .index-row:hover .index-logo {
    box-shadow: 0 12px 26px -10px rgba(3, 17, 1, .5);
}

/* ---------- Sections : accents tirés de la palette ---------- */
.home-painted .eyebrow { color: var(--px-olive); }

/* Index projets : numéros ciel, voile de survol pointillé + halo qui
   suit la souris (--spot-x/--spot-y posés par site.js) */
.home-painted .index-num { color: var(--px-sky-deep); opacity: .55; }
.home-painted .index-row:hover .index-num { color: var(--px-berry); opacity: 1; }
.home-painted .index-row::before {
    background:
        radial-gradient(260px circle at var(--spot-x, 50%) var(--spot-y, 50%),
                        rgba(30, 130, 185, .1), rgba(30, 130, 185, 0) 70%),
        radial-gradient(rgba(120, 97, 35, .06) 1px, transparent 1.5px) 0 0 / 7px 7px,
        var(--color-surface-raised);
}

/* Badges recolorés à la palette de la peinture */
.home-painted .badge.live   { --status-rgb: 45, 95, 84;   --status-ink: #24534a; }
.home-painted .badge.dev    { --status-rgb: 74, 127, 181; --status-ink: #33567f; }
.home-painted .badge.soon   { --status-rgb: 141, 94, 58;  --status-ink: #77502f; }
.home-painted .badge.review { --status-rgb: 108, 66, 158; --status-ink: #543a80; }

/* ---------- Footer : frise ASCII du paysage ---------- */
.footer-ascii {
    margin: 34px 0 0;
    padding: 0;
    overflow: hidden;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.25;
    letter-spacing: .04em;
    user-select: none;
    opacity: .8;
}
.footer-ascii .a-sky    { color: #8fb0cd; }
.footer-ascii .a-rose   { color: #b08a63; }
.footer-ascii .a-cream  { color: #cfc4a4; }
.footer-ascii .a-pine   { color: #3c5a48; }
.footer-ascii .a-meadow { color: #6d9484; }
.footer-ascii .a-lake   { color: #5f8f83; }
.footer-ascii .a-berry  { color: #a5764a; }
@media (max-width: 640px) { .footer-ascii { font-size: 8px; } }

/* ---------- Responsive plaque ---------- */
@media (max-width: 640px) {
    .home-painted .hero-inner { padding-top: 110px; padding-bottom: 150px; }
    .home-painted .hero-inner::before { inset: -20px 0; }
}

/* Mobile : dispersion « partout » (y compris sur le titre), mais la bande
   des boutons (~52–70 %) reste dégagée pour ne pas voler le tap des CTA. */
@media (max-width: 900px) {
    .home-painted .float-logo:nth-of-type(1)  { left: 7%;   top: 19%; }
    .home-painted .float-logo:nth-of-type(2)  { left: 31%;  top: 14%; }
    .home-painted .float-logo:nth-of-type(3)  { left: 56%;  top: 13%; }
    .home-painted .float-logo:nth-of-type(4)  { left: 79%;  top: 21%; }
    .home-painted .float-logo:nth-of-type(5)  { left: 90%;  top: 41%; }
    .home-painted .float-logo:nth-of-type(6)  { left: 11%;  top: 42%; }
    .home-painted .float-logo:nth-of-type(7)  { left: 67%;  top: 44%; }
    .home-painted .float-logo:nth-of-type(8)  { left: 6%;   top: 77%; }
    .home-painted .float-logo:nth-of-type(9)  { left: 25%;  top: 83%; }
    .home-painted .float-logo:nth-of-type(10) { left: 45%;  top: 78%; }
    .home-painted .float-logo:nth-of-type(11) { left: 63%;  top: 84%; }
    .home-painted .float-logo:nth-of-type(12) { left: 81%;  top: 77%; }
    .home-painted .float-logo:nth-of-type(13) { left: 90%;  top: 87%; }
    .home-painted .float-logo:nth-of-type(14) { left: 37%;  top: 92%; }
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .nav-pill { display: none; }
    .hero-inner {
        padding-top: 100px;
        padding-bottom: 110px;
        /* centrage strict du bloc d'ouverture sur l'axe X */
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .spec-total .spec-big { font-size: 1.5rem; }
}

/* ============================================================
   MOBILE — navigation, rythme vertical et confort tactile
   ============================================================ */
.nav-toggle,
.mobile-nav-menu { display: none; }

@media (max-width: 900px) {
    html { scroll-padding-top: 78px; }
    body { overflow-x: clip; }
    body.mobile-nav-open { overflow: hidden; }
    body.mobile-nav-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 49;
        background: rgba(24, 40, 28, .22);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    }

    .container,
    .container-narrow {
        padding-inline: 16px;
    }

    .section {
        padding-block: clamp(4rem, 16vw, 5.5rem);
    }

    .site-nav {
        padding: calc(10px + env(safe-area-inset-top, 0px)) 0 10px;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .site-nav .nav-inner {
        padding-inline: 16px;
        gap: 10px;
    }
    .site-nav .nav-brand {
        height: 44px;
        padding-inline: 15px;
    }
    .site-nav .nav-pill,
    .site-nav .nav-actions {
        display: none;
    }

    .nav-toggle {
        pointer-events: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-width: 86px;
        height: 44px;
        margin-left: auto;
        padding: 0 14px;
        border: 0;
        border-radius: var(--radius-btn);
        background: var(--color-surface-raised);
        box-shadow: inset 0 0 0 1px var(--color-border-pill), 0 1px 1px rgba(0,0,0,.05);
        color: var(--color-ink-strongest);
        font: 500 14px/1 var(--font-sans);
        cursor: pointer;
    }
    .home-painted .site-nav:not(.scrolled):not(.nav-light) .nav-toggle {
        color: #fff;
        background: linear-gradient(rgba(24,40,28,.55), rgba(24,40,28,.38));
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.18),
                    0 6px 18px -8px rgba(24,40,28,.5);
    }
    .nav-toggle-icon {
        position: relative;
        width: 16px;
        height: 12px;
    }
    .nav-toggle-icon i {
        position: absolute;
        left: 0;
        width: 16px;
        height: 1.5px;
        border-radius: 2px;
        background: currentColor;
        transition: transform .22s ease, top .22s ease;
    }
    .nav-toggle-icon i:first-child { top: 2px; }
    .nav-toggle-icon i:last-child { top: 9px; }
    .menu-open .nav-toggle-icon i:first-child { top: 5px; transform: rotate(45deg); }
    .menu-open .nav-toggle-icon i:last-child { top: 5px; transform: rotate(-45deg); }

    .mobile-nav-menu {
        pointer-events: auto;
        position: fixed;
        top: calc(68px + env(safe-area-inset-top, 0px));
        left: 16px;
        right: 16px;
        display: grid;
        padding: 8px;
        border: 1px solid rgba(38, 35, 35, .1);
        border-radius: 16px;
        background: rgba(249, 249, 246, .96);
        box-shadow: 0 26px 70px -24px rgba(24, 40, 28, .5);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px) scale(.985);
        transform-origin: top right;
        transition: opacity .2s ease, visibility .2s ease, transform .24s cubic-bezier(.23,1,.32,1);
    }
    .menu-open .mobile-nav-menu {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .mobile-nav-link {
        min-width: 0;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 0 14px;
        border: 0;
        border-bottom: 1px solid var(--color-border-pill);
        background: transparent;
        color: var(--color-ink-strongest);
        font: 500 1rem/1.25 var(--font-sans);
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }
    .mobile-nav-link:last-child { border-bottom: 0; }
    .mobile-nav-link::after {
        content: "↗";
        flex: none;
        color: var(--color-ink-faint);
        font-family: var(--font-mono);
        font-size: .8rem;
    }
    .mobile-nav-link[href^="#"]::after { content: "↓"; }
    .mobile-lang-switch::after { content: none; }
    .mobile-lang-label {
        color: var(--color-ink-faint);
        font-family: var(--font-mono);
        font-size: .75rem;
        letter-spacing: .08em;
    }

    .section-head {
        margin-bottom: 2.25rem;
    }
    .lead {
        font-size: 1rem;
        line-height: 1.58;
    }
    .card-grid,
    .feature-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .index-row {
        min-height: 116px;
        padding: 18px 4px;
        grid-template-columns: 28px 46px minmax(0, 1fr);
        column-gap: 12px;
    }
    .index-name {
        font-size: clamp(1.7rem, 9vw, 2.25rem);
        overflow-wrap: anywhere;
    }
    .index-desc {
        font-size: .875rem;
        line-height: 1.45;
    }
    .index-row .badge {
        width: auto;
        min-width: 7.5rem;
    }

    .footer-top { padding-top: 38px; }
    .footer-nav {
        width: 100%;
        justify-content: space-between;
    }
    .footer-link { min-height: 32px; display: inline-flex; align-items: center; }

    .contact-overlay {
        align-items: flex-end;
        padding: 10px;
        padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
    }
    .contact-modal {
        max-height: calc(100svh - 20px);
        overflow-y: auto;
        border-radius: 20px;
    }
    .contact-close {
        width: 44px;
        height: 44px;
        top: 8px;
        right: 8px;
    }
}

@media (max-width: 420px) {
    .home-painted .hero {
        min-height: 100svh;
    }
    .home-painted .hero-inner {
        padding: 104px 16px 88px;
    }
    .home-painted .hero-title {
        max-width: 15ch;
        font-size: clamp(2.05rem, 10.2vw, 2.65rem);
        line-height: 1.04;
    }
    .home-painted .hero-ctas {
        width: 100%;
        margin-top: 28px;
    }
    .home-painted .hero-ctas .btn {
        min-height: 48px;
        max-width: 260px;
    }
    .home-painted .float-logo { width: 30px; height: 30px; }

    .home-painted #projects .container {
        width: calc(100% - 20px);
        padding: 24px 14px;
        border-radius: 18px;
    }
    .charter-page.home-painted .creed {
        padding-inline: 10px;
    }
    .charter-page.home-painted .creed-item,
    .charter-page.home-painted .charter-seal .container-narrow,
    .about-page.home-painted .about-copy {
        border-radius: 18px;
    }
}

@media (max-width: 360px) {
    .index-row {
        grid-template-columns: 24px 42px minmax(0, 1fr);
        column-gap: 9px;
    }
    .index-logo {
        width: 42px;
        height: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-nav-menu,
    .nav-toggle-icon i { transition: none; }
}