/*
 * Site identity 2026 (Features:NewLanding): a clear, modern tool. Loaded after site.css, it only redefines the
 * shared variables and the header. Gold, burgundy and calligraphy stay inside the invitation previews.
 * Palette and typography are À VALIDER by the product owner (landing page brief, §2).
 */

/* Readex Pro (OFL), self-hosted variable font: one family for Arabic and Latin, weights 300 to 700. */
@font-face {
    font-family: "Readex Pro";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("/fonts/readex-pro-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: "Readex Pro";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("/fonts/readex-pro-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Readex Pro";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("/fonts/readex-pro-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    accent-color: #1f5b45;
    --color-bg: #f6f7f3;            /* Blanc jasmin */
    --color-surface: #ffffff;
    --color-text: #14231c;          /* Encre */
    --color-text-muted: #56655d;    /* Gris feuille */
    --color-border: #dce3de;        /* Ligne */
    --color-accent: #1f5b45;        /* Vert jasmin (signature) */
    --color-accent-hover: #174734;
    --color-accent-contrast: #ffffff;
    --color-accent-soft: #e3eee7;   /* Vert pâle */
    --color-highlight: #ee8a4c;     /* Fleur d'oranger: badges and small details only */
    --color-focus: #1f5b45;
    /* Solid colours where the champagne identity used gold gradients (buttons, active chips, phone frames). */
    --color-gold: linear-gradient(#1f5b45, #1f5b45);
    --gold-rim: linear-gradient(#cfd9d3, #cfd9d3);
    --font-latin: "Readex Pro", system-ui, sans-serif;
    --font-arabic: "Readex Pro", "Segoe UI", Tahoma, sans-serif;
    --radius: 14px;
    --shadow-soft: 0 1px 2px rgb(20 35 28 / 6%), 0 8px 24px rgb(20 35 28 / 8%);
}

body {
    font-weight: 300;
}

h1, h2, h3, b, strong, th, .button, .chip-link, label, summary {
    font-weight: 600;
}

h1, h2 {
    font-weight: 700;
    letter-spacing: -0.01em;
}

:lang(ar) h1, :lang(ar) h2 {
    letter-spacing: 0;
}

.button,
.button:hover {
    box-shadow: none;
    filter: none;
}

.button:hover {
    background: var(--color-accent-hover);
}

.badge--new {
    background: var(--color-highlight);
    color: #2a1406;
}

/* Phone frames: neutral device, the invitation inside carries the colours. */
.phone,
.device {
    box-shadow: var(--shadow-soft);
}

/* ---------- LAND-01: header ---------- */
/* The header stays on screen: whatever the browser scrolls to (anchor, restored position, focus) stops below it. */
html {
    scroll-padding-block-start: 5rem;
}

.site-header--v2 {
    position: sticky;
    inset-block-start: 0;
    z-index: 30;
    background: rgb(246 247 243 / 86%);
    backdrop-filter: saturate(1.4) blur(10px);
    border-block-end: 1px solid var(--color-border);
}

.site-header--v2 .site-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-block-size: 4rem;
}

.site-header--v2 .logotype {
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
}

.site-header--v2 .logotype__sep {
    color: var(--color-border);
}

.site-header__cta {
    margin-inline-start: auto;
}

.site-menu {
    position: static;
}

.site-menu > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    cursor: pointer;
    list-style: none;
}

.site-menu > summary::-webkit-details-marker {
    display: none;
}

.site-menu > summary svg {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.site-menu__panel {
    position: absolute;
    inset-inline: var(--space-3);
    inset-block-start: calc(100% + 0.25rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.site-menu__panel a,
.site-menu__panel .link-button {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: 10px;
    color: var(--color-text);
    text-decoration: none;
    text-align: start;
}

.site-menu__panel a:hover,
.site-menu__panel .link-button:hover {
    background: var(--color-accent-soft);
}

.site-menu__panel a[aria-current="page"] {
    color: var(--color-accent);
    font-weight: 600;
}

.site-menu__panel hr {
    inline-size: 100%;
    border: 0;
    border-block-start: 1px solid var(--color-border);
    margin: var(--space-1) 0;
}

/* Wide screens: the links sit in the bar; small screens: they open from the menu button. */
.site-nav--v2 {
    display: none;
    align-items: center;
    gap: var(--space-1);
    margin-inline-start: auto;
}

.site-nav--v2 a,
.site-nav--v2 .link-button {
    padding: var(--space-2);
    color: var(--color-text);
    text-decoration: none;
}

.site-nav--v2 a[aria-current="page"] {
    color: var(--color-accent);
    font-weight: 600;
}

/* "My account" menu in the bar (DES-02): my invitations, back-office for administrators, settings, sign out. */
.account-menu__button {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: var(--space-2);
    border: 0;
    background: none;
    color: var(--color-text);
    font: inherit;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.account-menu__button:hover {
    color: var(--color-accent);
}

.account-menu__button svg {
    inline-size: 1rem;
    block-size: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.15s ease;
}

.account-menu__button[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.account-menu .menu__list form {
    display: block;
}

/* The bar never grows past 72 px (DES-02). */
.site-header--v2 .site-header__inner {
    max-block-size: 4.5rem;
}

@media (min-width: 60rem) {
    .site-nav--v2 {
        display: flex;
    }

    .site-menu {
        display: none;
    }

    .site-header__cta {
        margin-inline-start: var(--space-2);
    }
}

@media (max-width: 59.99rem) {
    /* Icon-only menu button: logo, call to action and menu fit on one line from 320 px. */
    .site-menu > summary span {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .site-menu > summary {
        padding: var(--space-2);
    }

    .site-header--v2 .site-header__inner {
        gap: var(--space-2);
    }

    .site-header__cta {
        padding-inline: var(--space-3);
        font-size: 0.9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header--v2 {
        backdrop-filter: none;
        background: var(--color-bg);
    }
}

/* Compact call to action on the narrowest phones; the full label stays for screen readers. */
.site-header__cta .cta-short {
    display: none;
}

@media (max-width: 26rem) {
    .site-header__cta .cta-short {
        display: inline;
    }

    .site-header__cta .cta-long {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* One line from 320 px: the bar never wraps; the logo gets smaller on the narrowest phones. */
.site-header--v2 .site-header__inner {
    flex-wrap: nowrap;
}

.site-header--v2 .logotype {
    min-inline-size: 0;
}

@media (max-width: 26rem) {
    .site-header--v2 .logotype {
        font-size: 1rem;
    }

    .site-header--v2 .site-header__inner {
        gap: var(--space-1);
    }
}

/* Secondary buttons: outlined in the signature green (the gradient background of the previous identity is gone). */
.button--secondary {
    border: 1.5px solid var(--color-accent);
    background: var(--color-surface);
    color: var(--color-accent);
}

.button--secondary:hover {
    background: var(--color-accent-soft);
    color: var(--color-accent-hover);
}

.site-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    margin: 0;
}

.site-footer__social a {
    color: var(--color-text);
}