/* ============================================================
   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;
}
.float-logo > img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: contain;
}
@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; }
    /* Vraie dispersion (à la desktop), pas un anneau : on occupe aussi l'axe
       central via les poches SANS texte. Repères du hero (≈698px) : nav ~10%,
       titre ~24–40%, sous-titre ~40–55%, CTA ~61–74% (boutons centrés, ~26–74%
       de large). Les zones libres pour viser le centre : au-dessus du titre,
       la fine bande sous-titre→CTA (~55–60%), les flancs des boutons, et la
       grande zone vide sous les CTA. Le texte large (titre+sous-titre) n'est
       longé qu'aux bords extrêmes. */
    /* Équilibre horizontal : chaque logo a son miroir (left' = 91.5% − left,
       les 8.5% compensant la largeur du logo, 32px/375px) ; seuls les `top`
       varient pour casser la régularité. Les deux « centre » sont à 46%
       (centre optique : 46% + 4.25% = 50%). */
    .float-logo:nth-of-type(1)  { left: 11%;   top: 16%; } /* haut gauche */
    .float-logo:nth-of-type(2)  { left: 46%;   top: 11%; } /* haut CENTRE */
    .float-logo:nth-of-type(3)  { left: 80.5%; top: 18%; } /* haut droite (miroir de 1) */
    .float-logo:nth-of-type(4)  { left: 63.5%; top: 52%; } /* à droite de « privée. » (miroir de 5) */
    .float-logo:nth-of-type(5)  { left: 28%;   top: 53%; } /* à gauche de « privée. » */
    .float-logo:nth-of-type(6)  { left: 66.5%; top: 84%; } /* sous les CTA, droite (miroir de 7) */
    .float-logo:nth-of-type(7)  { left: 25%;   top: 88%; } /* sous les CTA, gauche */
    .float-logo:nth-of-type(8)  { left: 46%;   top: 79%; } /* sous les CTA, CENTRE */
    .float-logo:nth-of-type(9)  { left: 84.5%; top: 67%; } /* flanc droit des boutons (miroir de 10) */
    .float-logo:nth-of-type(10) { left: 7%;    top: 64%; } /* flanc gauche des boutons */
}

/* 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 {
    font-family: var(--font-mono);
    font-size: .6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-border-pill);
    background: var(--color-surface);
    color: var(--color-ink-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.badge::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-feature-neutral);
}
.badge.live::before { background: var(--color-feature-success); }
.badge.dev::before { background: var(--hero-blue-mid); }
.badge.soon::before { background: var(--color-feature-neutral); }

/* ---------- 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;
}
/* 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);
}

.warn-tip {
    display: inline-flex;
    align-items: center;
    position: relative;
    margin-left: 6px;
    vertical-align: middle;
    cursor: pointer;
    color: var(--color-ink-faint);
    transition: color .2s;
}
.warn-tip:hover,
.warn-tip.is-open { color: #c97a1a; }
.warn-tip svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.tip-bubble {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 22ch;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--color-ink-strongest);
    color: var(--color-surface);
    font-size: .8125rem;
    line-height: 1.45;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s;
    white-space: normal;
    z-index: 10;
}
.tip-bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--color-ink-strongest);
}
@media (hover: hover) {
    .warn-tip:hover .tip-bubble { opacity: 1; }
}
.warn-tip.is-open .tip-bubble { opacity: 1; }
.index-row:has(.warn-tip.is-open) { overflow: visible; }

.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; }
    .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 .badge::before { background: var(--p-accent, var(--color-feature-neutral)); }
.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); }

/* ---------- 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; }
}

/* ---------- 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; }
}