/* Feuille partagee — extraite de 2 pages le 2026-07-25.
   Modifier ICI, plus dans chaque page. */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            /* Charte v2 : encre unique, or antique + champagne */
            --navy: #0a1628; --navy-light: #0f1e34; --navy-card: #152040; --navy-hover: #1a2850;
            --gold: #c69749; --gold-light: #d8bd83;
            --white: #f2f0ea; --white-dim: #b0b3c0; --white-muted: #848899;
            --border: rgba(198, 151, 73, 0.18);
            --grad-gold: linear-gradient(135deg, #c69749 0%, #d8bd83 50%, #c69749 100%);
            --serif: 'Fraunces', 'Bitstream Charter', Georgia, serif;
            --tr: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background:
              radial-gradient(720px 480px at 78% -8%, rgba(198,151,73,0.10), transparent 60%),
              radial-gradient(680px 520px at 10% 108%, rgba(198,151,73,0.06), transparent 55%),
              var(--navy);
            color: var(--white); line-height: 1.5; min-height: 100vh;
            display: flex; align-items: flex-start; justify-content: center;
            padding: 56px 20px 40px;
        }
        .wrap { width: 100%; max-width: 520px; }

        /* Language switch */
        .lang-switch { display: flex; justify-content: flex-end; gap: 4px; margin-bottom: 14px;
            font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; }
        .lang-switch a, .lang-switch .lang-current { padding: 5px 11px; border-radius: 999px; text-decoration: none; }
        .lang-switch .lang-current { color: var(--navy); background: var(--grad-gold); }
        .lang-switch a { color: var(--white-dim); border: 1px solid var(--border);
            transition: color var(--tr), border-color var(--tr); }
        .lang-switch a:hover { color: var(--gold); border-color: var(--gold); }

        /* Header — monogramme « L » (trajectoire) + identité créateur */
        .head { text-align: center; margin-bottom: 30px; }
        .monogram {
            width: 92px; height: 92px; margin: 0 auto 18px; border-radius: 26px; position: relative;
            background: linear-gradient(150deg, #0e1e34, #0a1628);
            border: 1px solid var(--border);
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 12px 36px rgba(0,0,0,0.4);
        }
        .monogram::after { content: ""; position: absolute; inset: 7px; border-radius: 19px;
            border: 1.5px solid var(--gold); opacity: 0.5; }
        .monogram svg { width: 54px; height: 54px; }
        .brand { font-family: var(--serif); font-size: 2.15rem; font-weight: 700; letter-spacing: -0.5px; }
        .brand span { color: var(--gold); }
        .tagline { font-family: var(--serif); color: var(--gold-light); font-size: 1.06rem; margin-top: 8px; }
        .tagsub { color: var(--white-dim); font-size: 0.92rem; margin-top: 6px; max-width: 44ch; margin-inline: auto; }

        /* Pillar sections */
        .pillar { display: flex; align-items: center; gap: 12px; margin: 26px 0 12px;
            color: var(--gold); font-size: 0.74rem; font-weight: 700;
            letter-spacing: 0.22em; text-transform: uppercase; }
        .pillar::before, .pillar::after { content: ""; height: 1px; flex: 1;
            background: linear-gradient(90deg, transparent, rgba(198,151,73,0.4)); }
        .pillar::after { background: linear-gradient(90deg, rgba(198,151,73,0.4), transparent); }

        /* Link cards */
        .links { display: flex; flex-direction: column; gap: 12px; }
        .card {
            display: flex; align-items: center; gap: 16px;
            background: var(--navy-card); border: 1px solid var(--border);
            border-radius: 18px; padding: 15px 18px; text-decoration: none; color: var(--white);
            transition: transform var(--tr), border-color var(--tr), background var(--tr), box-shadow var(--tr);
        }
        .card:hover {
            transform: translateY(-3px); background: var(--navy-hover);
            border-color: var(--gold); box-shadow: 0 14px 32px rgba(0,0,0,0.36);
        }
        .card .ico {
            flex: 0 0 52px; width: 52px; height: 52px; border-radius: 14px;
            background: linear-gradient(160deg, #16264a, #0f1c38);
            border: 1px solid var(--border); color: var(--gold);
            display: flex; align-items: center; justify-content: center;
        }
        .card .ico svg {
            width: 26px; height: 26px; fill: none; stroke: currentColor;
            stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
        }
        .card .txt { flex: 1; min-width: 0; }
        .card .t { display: block; font-family: var(--serif); font-weight: 700; font-size: 1.12rem; }
        .card .s { display: block; color: var(--white-dim); font-size: 0.86rem; margin-top: 2px; }
        .card .arrow { color: var(--gold); flex: 0 0 auto; transition: transform var(--tr); }
        .card:hover .arrow { transform: translateX(4px); }

        /* Carte CTA appel découverte — mise en avant */
        .card.cta { background: linear-gradient(150deg, rgba(198,151,73,0.14), rgba(21,32,64,0.9));
            border-color: rgba(198,151,73,0.55); }
        .card.cta .ico { background: var(--grad-gold); color: var(--navy); border-color: transparent; }
        .card.cta .t { color: var(--gold-light); }

        .sep { text-align: center; color: var(--white-muted); font-size: 0.72rem;
            letter-spacing: 0.18em; text-transform: uppercase; margin: 30px 0 16px; }

        /* Socials */
        .socials { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
        .socials a {
            width: 48px; height: 48px; border-radius: 50%;
            background: var(--navy-card); border: 1px solid var(--border); color: var(--white-dim);
            display: flex; align-items: center; justify-content: center;
            transition: transform var(--tr), color var(--tr), border-color var(--tr);
        }
        .socials a:hover { transform: translateY(-3px); color: var(--gold); border-color: var(--gold); }
        .socials svg { width: 21px; height: 21px; fill: currentColor; }

        footer { text-align: center; margin-top: 34px; color: var(--white-muted); font-size: 0.8rem; }
        footer a { color: var(--gold); text-decoration: none; }
        footer a:hover { text-decoration: underline; }

        @media (max-width: 420px) {
            body { padding-top: 40px; }
            .brand { font-size: 1.8rem; }
            .card .s { font-size: 0.82rem; }
        }