@charset "UTF-8";

:root {
    --color-primary: #181148;
    --color-accent: #ffb004;
    --color-accent-pressed: #d49600;
    --color-bg: #19132e;
    --color-bg-elevated: #221a3b;
    --color-gradient-light: #ffffff;
    --color-gradient-mid: #72ad21;
    --color-rg-banner: #dc2626;
    --color-text: #ffffff;
    --color-text-muted: #c0c0c0;
    --color-line: rgba(255, 255, 255, 0.12);

    --font-display: 'Rubik', 'Helvetica', 'Arial', sans-serif;
    --font-body: 'Inter', 'Helvetica', 'Arial', sans-serif;

    --fs-h1: 60px;
    --fs-h2: 34px;
    --fs-h3: 24px;
    --fs-h4: 20px;
    --fs-h5: 17px;
    --fs-body: 16px;
    --fs-small: 14px;
    --fs-micro: 11px;

    --lh-tight: 1.1;
    --lh-normal: 1.5;
    --lh-loose: 1.65;

    --ls-tight: -0.02em;
    --ls-wide: 0.06em;
    --ls-xwide: 0.16em;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 800;

    --space-2xs: 5px;
    --space-xs: 10px;
    --space-sm: 15px;
    --space-md: 25px;
    --space-lg: 40px;
    --space-xl: 60px;
    --space-2xl: 90px;
    --space-3xl: 140px;

    --container-site: 1200px;
    --container-padding-desktop: 64px;

    --radius-xs: 4px;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 28px;
    --radius-pill: 9999px;

    --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.18);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.36);

    --dur-fast: 150ms;
    --dur-base: 200ms;
    --dur-slow: 300ms;
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

    --header-h: 96px;
}

@media (max-width: 940px) {
    :root {
        --fs-h1: 36px;
        --fs-h2: 26px;
        --fs-h3: 21px;
        --fs-h4: 18px;
        --fs-h5: 16px;
        --fs-body: 15px;
        --container-padding-desktop: 32px;
    }
}

@media (max-width: 620px) {
    :root {
        --container-padding-desktop: 20px;
        --header-h: 80px;
    }
}

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

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

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
    min-height: 100vh;
}

body.cookie-visible { padding-bottom: 132px; }

@media (max-width: 620px) {
    body.cookie-visible { padding-bottom: 200px; }
}

img, svg { display: block; max-width: 100%; height: auto; }

figure { margin: 0; }

a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--dur-fast) var(--ease-out);
}

a:hover { color: var(--color-accent-pressed); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    margin: 0;
}

h1 { font-size: var(--fs-h1); letter-spacing: var(--ls-tight); text-transform: uppercase; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); text-transform: uppercase; letter-spacing: var(--ls-wide); }
h6 { font-size: var(--fs-body); text-transform: uppercase; letter-spacing: var(--ls-wide); }

p { margin: 0 0 var(--space-md); }

strong { font-weight: var(--fw-bold); }

.skip-link {
    background: var(--color-accent);
    color: var(--color-bg);
    font-weight: var(--fw-bold);
    left: -9999px;
    padding: var(--space-xs) var(--space-md);
    position: fixed;
    top: 0;
    z-index: 9999;
}
.skip-link:focus { left: var(--space-md); top: var(--space-md); }

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

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
}

.fenetre-body { display: block; }
.etabli-col { display: block; }
.etabli-col--nav { display: block; }
.etabli-col--legal { display: block; }
.belvedere-band { display: contents; }

/* ============== AILE — author card (AUTH-07) ============== */

.aile { padding-block: var(--space-lg); }

.aile-inner {
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding-inline: var(--container-padding-desktop);
}

.aile-card {
    background: var(--color-bg-elevated);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-xl);
}

.aile-layout {
    align-items: start;
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: 140px 1fr;
}

.aile-portrait {
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    height: 140px;
    object-fit: cover;
    object-position: center top;
    width: 140px;
}

.aile-body { position: relative; }

.aile-quote-mark {
    color: var(--color-accent);
    display: block;
    font-family: var(--font-display);
    font-size: 72px;
    line-height: 1;
    margin-bottom: var(--space-xs);
}

.aile-bio {
    font-size: var(--fs-h5);
    font-style: italic;
    line-height: var(--lh-normal);
}

.aile-meta { font-size: var(--fs-small); color: var(--color-text-muted); }

.aile-meta strong { color: var(--color-text); }

.aile-expertise {
    list-style: none;
    margin: var(--space-md) 0 0;
    padding: 0;
}

.aile-expertise li {
    color: var(--color-text-muted);
    font-size: var(--fs-small);
    padding-left: 22px;
    position: relative;
}

.aile-expertise li::before {
    color: var(--color-accent);
    content: "\25B9";
    left: 0;
    position: absolute;
}

@media (max-width: 620px) {
    .aile-layout { grid-template-columns: 1fr; }
    .aile-portrait { height: 110px; width: 110px; }
}

/* ============== ALCOVE — 404 (ERR-03) ============== */

.alcove {
    align-items: center;
    display: flex;
    min-height: 60vh;
    padding-block: var(--space-2xl);
}

.alcove-inner {
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding-inline: var(--container-padding-desktop);
    text-align: center;
}

.alcove-content {
    margin: 0 auto;
    max-width: 600px;
}

.alcove-code {
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: 96px;
    font-weight: var(--fw-bold);
    line-height: 1;
    margin-bottom: var(--space-md);
}

.alcove-title { font-size: var(--fs-h2); margin-bottom: var(--space-md); }

.alcove-text { color: var(--color-text-muted); margin-bottom: var(--space-lg); }

.alcove-button {
    background: var(--color-accent);
    border-radius: var(--radius-md);
    color: var(--color-bg);
    display: inline-block;
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    padding: 14px 28px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

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

/* ============== BELVEDERE — inline CTA (INLINE-CTA-01) ============== */

.belvedere {
    background: var(--color-accent);
    color: #19132e;
    padding-block: var(--space-md);
}

.belvedere-inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: space-between;
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding-inline: var(--container-padding-desktop);
}

.belvedere-text {
    color: #19132e;
    font-family: var(--font-display);
    font-size: var(--fs-h5);
    font-weight: var(--fw-bold);
    margin: 0;
}

.belvedere-btn {
    background: var(--color-bg);
    border-radius: var(--radius-md);
    color: var(--color-accent);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    padding: 12px 24px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    white-space: nowrap;
}

.belvedere-btn:hover {
    background: var(--color-primary);
    color: var(--color-accent);
}

@media (max-width: 620px) {
    .belvedere-inner { flex-direction: column; align-items: stretch; text-align: center; }
    .belvedere-btn { display: block; }
}

/* ============== BUFFET — CTA-block (CTA-01) ============== */

.buffet {
    background: var(--color-accent);
    padding-block: var(--space-lg);
}

.buffet-inner {
    align-items: center;
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: 1fr auto;
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding-inline: var(--container-padding-desktop);
}

.buffet-title {
    color: var(--color-bg);
    font-size: var(--fs-h2);
    letter-spacing: var(--ls-tight);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
}

.buffet-text { color: var(--color-bg); margin: 0; max-width: 580px; }

.buffet-button {
    background: var(--color-bg);
    border-radius: var(--radius-md);
    color: var(--color-accent);
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--fs-h5);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    padding: 18px 36px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.buffet-button:hover {
    background: var(--color-primary);
    color: var(--color-accent);
    transform: translateY(-2px);
}

@media (max-width: 940px) {
    .buffet-inner { grid-template-columns: 1fr; text-align: center; }
    .buffet-button { display: block; }
}

/* ============== ETABLI — footer (FOOT-05) ============== */

.etabli {
    background: var(--color-primary);
    color: var(--color-text);
    margin-top: var(--space-3xl);
    padding-block: var(--space-2xl) var(--space-lg);
}

.etabli-inner {
    display: grid;
    gap: var(--space-xl);
    grid-template-columns: 1.5fr 1fr 1fr;
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding-inline: var(--container-padding-desktop);
}

.etabli-col-heading {
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-xwide);
    margin-bottom: var(--space-md);
    text-transform: uppercase;
}

.etabli-logo { display: block; margin-bottom: var(--space-md); }

.etabli-logo img { height: 90px; max-width: none; width: auto; }

.etabli-tagline { color: var(--color-text-muted); font-size: var(--fs-small); max-width: 360px; }

.etabli-list { list-style: none; margin: 0; padding: 0; }

.etabli-list li + li { margin-top: var(--space-xs); }

.etabli-list a {
    color: var(--color-text);
    font-size: var(--fs-small);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}

.etabli-list a:hover { color: var(--color-accent); }

.etabli-bottom {
    align-items: center;
    border-top: 1px solid var(--color-line);
    display: flex;
    gap: var(--space-md);
    justify-content: space-between;
    margin: var(--space-2xl) auto 0;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding: var(--space-md) var(--container-padding-desktop) 0;
}

.etabli-copy { color: var(--color-text-muted); font-size: var(--fs-micro); margin: 0; }

.etabli-license { color: var(--color-text-muted); font-size: var(--fs-micro); margin: 0; }

.etabli-rg {
    background: var(--color-rg-banner);
    border-radius: var(--radius-xs);
    color: #ffffff;
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    padding: 4px 10px;
}

@media (max-width: 940px) {
    .etabli-inner { grid-template-columns: 1fr 1fr; }
    .etabli-col--brand { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
    .etabli-inner { grid-template-columns: 1fr; gap: var(--space-lg); }
    .etabli-col--brand { grid-column: auto; }
    .etabli-bottom { flex-direction: column; align-items: flex-start; }
}

/* ============== FENETRE — page-header (PHEAD-07) ============== */

.fenetre { padding-block: var(--space-xl) var(--space-md); }

.fenetre-inner {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: 140px 1fr;
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding-inline: var(--container-padding-desktop);
}

.fenetre-num {
    align-self: start;
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: 84px;
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    line-height: 0.9;
}

.fenetre-title { font-size: var(--fs-h1); letter-spacing: var(--ls-tight); margin-bottom: var(--space-md); text-transform: uppercase; }

.fenetre-desc { color: var(--color-text-muted); font-size: var(--fs-h5); margin: 0; }

@media (max-width: 620px) {
    .fenetre-inner { grid-template-columns: 1fr; gap: var(--space-sm); }
    .fenetre-num { font-size: 52px; }
}

/* ============== FICHE — items grid (GRID-05 wide-featured) ============== */

.fiche { padding-block: var(--space-lg); }

.fiche-inner {
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding-inline: var(--container-padding-desktop);
}

.fiche-heading {
    font-size: var(--fs-h2);
    margin-bottom: var(--space-lg);
}

.fiche-featured {
    background: var(--color-primary);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    margin-bottom: var(--space-xl);
    padding: var(--space-2xl);
}

.fiche-featured-title {
    color: var(--color-accent);
    font-size: var(--fs-h2);
    margin-bottom: var(--space-md);
}

.fiche-featured-text { font-size: var(--fs-h5); margin: 0; max-width: 720px; }

.fiche-grid {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(2, 1fr);
}

.fiche-card {
    border-top: 2px solid var(--color-accent);
    padding-top: var(--space-md);
}

.fiche-card-title {
    font-size: var(--fs-h4);
    margin-bottom: var(--space-sm);
}

.fiche-card-text { color: var(--color-text-muted); font-size: var(--fs-small); margin: 0; }

@media (max-width: 620px) {
    .fiche-grid { grid-template-columns: 1fr; }
    .fiche-featured { padding: var(--space-lg); }
}

/* ============== FRESQUE — reviews (REV-03 carousel) ============== */

.fresque { padding-block: var(--space-lg); }

.fresque-inner {
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding-inline: var(--container-padding-desktop);
}

.fresque-heading { font-size: var(--fs-h2); margin-bottom: var(--space-lg); }

.fresque-rail {
    display: flex;
    gap: var(--space-md);
    overflow-x: auto;
    padding-bottom: var(--space-sm);
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.fresque-rail::-webkit-scrollbar { height: 6px; }
.fresque-rail::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: var(--radius-pill); }

.fresque-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    flex: 0 0 360px;
    padding: var(--space-lg);
    scroll-snap-align: start;
}

.fresque-card-head {
    align-items: baseline;
    display: flex;
    gap: var(--space-sm);
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.fresque-author { font-family: var(--font-display); font-weight: var(--fw-bold); }

.fresque-rating {
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-pill);
    color: var(--color-accent);
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    padding: 2px 10px;
}

.fresque-rating-bar {
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-pill);
    height: 4px;
    margin-bottom: var(--space-md);
    overflow: hidden;
    width: 60%;
}

.fresque-rating-fill { background: var(--color-accent); height: 100%; }

.fresque-text { color: var(--color-text-muted); font-size: var(--fs-small); margin: 0; }

@media (max-width: 620px) {
    .fresque-card { flex: 0 0 86%; }
}

/* ============== GRILLE — contact form ============== */

.grille { padding-block: var(--space-lg); }

.grille-inner {
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding-inline: var(--container-padding-desktop);
}

.grille-card {
    background: var(--color-bg-elevated);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
}

.grille-intro { color: var(--color-text-muted); margin-bottom: var(--space-lg); }

.grille-form { display: grid; gap: var(--space-md); }

.grille-field { display: grid; gap: var(--space-2xs); }

.grille-label {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}

.grille-input,
.grille-textarea {
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    padding: 12px 16px;
    transition: border-color var(--dur-fast) var(--ease-out);
    width: 100%;
}

.grille-input:focus,
.grille-textarea:focus { border-color: var(--color-accent); outline: none; }

.grille-textarea { min-height: 140px; resize: vertical; }

.grille-submit {
    background: var(--color-accent);
    border: 0;
    border-radius: var(--radius-md);
    color: var(--color-bg);
    cursor: pointer;
    font-family: var(--font-display);
    font-size: var(--fs-h5);
    font-weight: var(--fw-bold);
    justify-self: start;
    letter-spacing: var(--ls-wide);
    padding: 14px 32px;
    text-transform: uppercase;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.grille-submit:hover { background: var(--color-accent-pressed); color: var(--color-bg); }

.grille-success {
    background: rgba(114, 173, 33, 0.1);
    border: 1px solid var(--color-gradient-mid);
    border-radius: var(--radius-md);
    color: var(--color-text);
    margin-top: var(--space-md);
    padding: var(--space-md);
}

.grille-success[hidden] { display: none; }

/* ============== MARQUE — data table (TABLE-02 borderless editorial) ============== */

.marque { padding-block: var(--space-lg); }

.marque-inner {
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding-inline: var(--container-padding-desktop);
}

.marque-heading { font-size: var(--fs-h3); margin-bottom: var(--space-md); }

.marque-table {
    border-collapse: collapse;
    width: 100%;
}

.marque-table th {
    border-bottom: 2px solid var(--color-accent);
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    padding: var(--space-md) var(--space-sm);
    text-align: left;
    text-transform: uppercase;
}

.marque-table td {
    border-bottom: 1px solid var(--color-line);
    color: var(--color-text-muted);
    padding: var(--space-md) var(--space-sm);
}

.marque-table tr:last-child td { border-bottom: 0; }

.marque-table td:first-child { color: var(--color-text); font-weight: var(--fw-bold); }

@media (max-width: 620px) {
    .marque-table th { font-size: var(--fs-micro); padding: var(--space-sm) var(--space-xs); }
    .marque-table td { font-size: var(--fs-small); padding: var(--space-sm) var(--space-xs); }
}

/* ============== NEF — cookie banner (COOK-02 bottom strip) ============== */

.nef {
    background: var(--color-primary);
    border-top: 1px solid var(--color-accent);
    bottom: 0;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.32);
    display: none;
    left: 0;
    position: fixed;
    right: 0;
    z-index: 90;
}

.nef.is-visible { display: block; }

.nef-inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: space-between;
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding: var(--space-md) var(--container-padding-desktop);
}

.nef-message { color: var(--color-text); flex: 1 1 320px; font-size: var(--fs-small); margin: 0; }

.nef-actions { display: flex; gap: var(--space-sm); }

.nef-button {
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font-display);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    padding: 10px 20px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.nef-button--accept {
    background: var(--color-accent);
    border: 0;
    color: var(--color-bg);
}
.nef-button--accept:hover { background: var(--color-accent-pressed); color: var(--color-bg); }

.nef-button--decline {
    background: transparent;
    border: 1px solid var(--color-text-muted);
    color: var(--color-text);
}
.nef-button--decline:hover { background: var(--color-text); color: var(--color-bg); }

@media (max-width: 620px) {
    .nef-inner { padding-block: var(--space-sm); }
    .nef-actions { width: 100%; }
    .nef-button { flex: 1; text-align: center; }
}

/* ============== PIEDESTAL — hero (HERO-05 bordered plate) ============== */

.piedestal { padding-block: var(--space-xl) var(--space-lg); }

.piedestal-inner {
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding-inline: var(--container-padding-desktop);
}

.piedestal-frame {
    border: 1px solid var(--color-text);
    box-shadow: 0 0 0 1px var(--color-bg), 0 0 0 4px var(--color-accent);
    padding: var(--space-2xl) var(--space-xl);
    position: relative;
    text-align: center;
}

.piedestal-eyebrow {
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: var(--fs-small);
    font-style: italic;
    letter-spacing: var(--ls-xwide);
    margin: 0 0 var(--space-md);
    text-transform: uppercase;
}

.piedestal-title {
    font-size: var(--fs-h1);
    letter-spacing: var(--ls-tight);
    margin: 0 0 var(--space-md);
    text-transform: uppercase;
}

.piedestal-divider {
    background: var(--color-accent);
    border: 0;
    height: 2px;
    margin: var(--space-md) auto var(--space-md);
    width: 80px;
}

.piedestal-subtitle {
    color: var(--color-text-muted);
    font-size: var(--fs-h5);
    margin: 0 auto var(--space-lg);
    max-width: 720px;
}

.piedestal-cta {
    background: var(--color-accent);
    border-radius: var(--radius-md);
    color: var(--color-bg);
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--fs-h5);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    padding: 18px 40px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.piedestal-cta:hover {
    background: var(--color-primary);
    color: var(--color-accent);
    transform: translateY(-2px);
}

.piedestal-media {
    margin: var(--space-xl) auto 0;
    max-width: 900px;
}

.piedestal-media img {
    border-radius: var(--radius-md);
    width: 100%;
}

@media (max-width: 620px) {
    .piedestal-frame { padding: var(--space-xl) var(--space-md); }
}

/* ============== SALON — author byline (BYLINE-05 horizontal bar) ============== */

.salon {
    background: var(--color-primary);
    margin-top: var(--space-2xl);
    padding-block: var(--space-lg);
}

.salon-inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: space-between;
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding-inline: var(--container-padding-desktop);
}

.salon-author { align-items: center; display: flex; gap: var(--space-md); }

.salon-portrait {
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--color-accent);
    height: 56px;
    object-fit: cover;
    object-position: center top;
    width: 56px;
}

.salon-text { display: flex; flex-direction: column; gap: 2px; }

.salon-label {
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-xwide);
    text-transform: uppercase;
}

.salon-name { font-family: var(--font-display); font-weight: var(--fw-bold); }

.salon-name a { color: var(--color-text); text-decoration: none; }
.salon-name a:hover { color: var(--color-accent); }

.salon-role { color: var(--color-text-muted); font-size: var(--fs-small); }

.salon-cta {
    background: transparent;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-pill);
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    padding: 10px 22px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    white-space: nowrap;
}

.salon-cta:hover { background: var(--color-accent); color: var(--color-bg); }

@media (max-width: 620px) {
    .salon-inner { flex-direction: column; align-items: flex-start; }
    .salon-cta { align-self: stretch; text-align: center; }
}

/* ============== SEUIL — legal numbered (LEGAL-02) ============== */

.seuil {
    counter-reset: section;
    padding-block: var(--space-xl);
}

.seuil-inner {
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding-inline: var(--container-padding-desktop);
}

.seuil-intro {
    color: var(--color-text-muted);
    font-size: var(--fs-h5);
    margin-bottom: var(--space-xl);
}

.seuil-section { margin-bottom: var(--space-xl); }

.seuil-section-heading {
    counter-increment: section;
    font-size: var(--fs-h3);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    position: relative;
}

.seuil-section-heading::before {
    color: var(--color-accent);
    content: counter(section, decimal-leading-zero) ". ";
    font-family: var(--font-display);
    margin-right: var(--space-xs);
}

.seuil-section p { color: var(--color-text-muted); }

.seuil-disclaimer {
    background: var(--color-bg-elevated);
    border-left: 4px solid var(--color-rg-banner);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    margin-top: var(--space-xl);
    padding: var(--space-lg);
}

.seuil-contacts {
    background: var(--color-bg-elevated);
    border-radius: var(--radius-md);
    list-style: none;
    margin: var(--space-lg) 0;
    padding: var(--space-lg);
}

.seuil-contacts li {
    color: var(--color-text-muted);
    font-size: var(--fs-small);
    padding-left: 22px;
    position: relative;
}

.seuil-contacts li + li { margin-top: var(--space-sm); }

.seuil-contacts li::before {
    color: var(--color-accent);
    content: "\2726";
    left: 0;
    position: absolute;
}

/* ============== TERRASSE — header (HEAD-06 magazine) ============== */

.terrasse {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-line);
    left: 0;
    position: sticky;
    right: 0;
    top: 0;
    transition: padding-block var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
    z-index: 100;
}

.terrasse.is-shrunk { box-shadow: var(--shadow-md); }

.terrasse.is-shrunk .terrasse-logo img { height: 64px; }

.terrasse-inner {
    align-items: center;
    display: grid;
    gap: var(--space-sm);
    grid-template-columns: auto 1fr auto;
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    min-height: var(--header-h);
    padding-block: var(--space-sm);
    padding-inline: var(--container-padding-desktop);
}

.terrasse-logo { display: inline-flex; }

.terrasse-logo img {
    display: block;
    height: 80px;
    max-width: none;
    transition: height var(--dur-base) var(--ease-out);
    width: auto;
}

.terrasse-nav { justify-self: center; }

.terrasse-list {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.terrasse-link {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    font-weight: var(--fw-bold);
    letter-spacing: 0;
    padding: var(--space-xs) var(--space-xs);
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    transition: color var(--dur-fast) var(--ease-out);
    white-space: nowrap;
}

.terrasse-link:hover { color: var(--color-accent); }

.terrasse-link[aria-current="page"] { color: var(--color-accent); }

.terrasse-link[aria-current="page"]::after {
    background: var(--color-accent);
    bottom: -4px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
}

.terrasse-actions { align-items: center; display: flex; gap: var(--space-sm); }

.terrasse-auth {
    background: var(--color-accent);
    border-radius: var(--radius-md);
    color: var(--color-bg);
    font-family: var(--font-display);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    padding: 10px 22px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    white-space: nowrap;
}

.terrasse-auth:hover { background: var(--color-accent-pressed); color: var(--color-bg); }

.terrasse-toggle {
    background: transparent;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: none;
    height: 44px;
    padding: 0;
    width: 44px;
}

.terrasse-toggle-bar {
    background: var(--color-text);
    display: block;
    height: 2px;
    margin: 5px auto;
    width: 22px;
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}

.terrasse-toggle[aria-expanded="true"] .terrasse-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.terrasse-toggle[aria-expanded="true"] .terrasse-toggle-bar:nth-child(2) { opacity: 0; }
.terrasse-toggle[aria-expanded="true"] .terrasse-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.terrasse-mobile {
    background: var(--color-bg);
    border-top: 1px solid var(--color-line);
    display: none;
    height: calc(100dvh - var(--header-h));
    left: 0;
    overflow-y: auto;
    padding: var(--space-md) var(--container-padding-desktop) var(--space-xl);
    position: fixed;
    top: var(--header-h);
    width: 100vw;
    z-index: 99;
}

.terrasse-mobile.is-open { display: block; }

.terrasse-mobile-list { list-style: none; margin: 0; padding: 0; }

.terrasse-mobile-link {
    border-bottom: 1px solid var(--color-line);
    color: var(--color-text);
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-h5);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    padding: var(--space-md) 0;
    text-decoration: none;
    text-transform: uppercase;
}

.terrasse-mobile-link[aria-current="page"] { color: var(--color-accent); }

.terrasse-mobile-auth {
    background: var(--color-accent);
    border-radius: var(--radius-md);
    color: var(--color-bg);
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--fs-h5);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    margin-top: var(--space-lg);
    padding: 14px 28px;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    width: auto;
}

.terrasse-mobile-auth:hover { background: var(--color-accent-pressed); color: var(--color-bg); }

@media (max-width: 1099px) {
    .terrasse-nav { display: none; }
    .terrasse-auth { display: none; }
    .terrasse-toggle { display: block; }
}

@media (max-width: 620px) {
    .terrasse-logo img { height: 64px; }
}

/* ============== VESTIBULE — prose (PROSE-01) ============== */

.vestibule { padding-block: var(--space-lg); }

.vestibule-inner {
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding-inline: var(--container-padding-desktop);
}

.vestibule h2 {
    font-size: var(--fs-h2);
    margin: var(--space-lg) 0 var(--space-md);
}

.vestibule h2:first-child { margin-block-start: 0; }

.vestibule h3 {
    font-size: var(--fs-h3);
    margin: var(--space-lg) 0 var(--space-sm);
}

.vestibule p { color: var(--color-text); line-height: var(--lh-loose); margin: 0 0 var(--space-md); }

.vestibule strong { color: var(--color-text); }

.vestibule a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.vestibule a:hover { color: var(--color-accent-pressed); }

.vestibule ul,
.vestibule ol { color: var(--color-text); line-height: var(--lh-loose); padding-left: var(--space-lg); }

.vestibule li { margin-bottom: var(--space-xs); }

.vestibule ul li::marker { color: var(--color-accent); }
.vestibule ol li::marker { color: var(--color-accent); font-family: var(--font-display); font-weight: var(--fw-bold); }

/* ============== VITRINE — FAQ (FAQ-08 bordered box) ============== */

.vitrine { padding-block: var(--space-lg); }

.vitrine-inner {
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding-inline: var(--container-padding-desktop);
}

.vitrine-heading { font-size: var(--fs-h2); margin-bottom: var(--space-lg); }

.vitrine-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-xl);
}

.vitrine-item {
    border-bottom: 1px solid var(--color-line);
    padding-left: var(--space-md);
    position: relative;
}

.vitrine-item::before {
    background: var(--color-accent);
    bottom: var(--space-md);
    content: "";
    left: 0;
    position: absolute;
    top: var(--space-md);
    width: 3px;
}

.vitrine-item:last-child { border-bottom: 0; }

.vitrine-question {
    background: transparent;
    border: 0;
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    font-family: var(--font-display);
    font-size: var(--fs-h5);
    font-weight: var(--fw-bold);
    justify-content: space-between;
    padding: var(--space-md) 0;
    text-align: left;
    width: 100%;
}

.vitrine-icon {
    color: var(--color-accent);
    flex-shrink: 0;
    font-size: 24px;
    line-height: 1;
    margin-left: var(--space-md);
    transition: transform var(--dur-base) var(--ease-out);
}

.vitrine-question[aria-expanded="true"] .vitrine-icon { transform: rotate(45deg); }

.vitrine-answer {
    color: var(--color-text-muted);
    padding: 0 0 var(--space-md);
}

.vitrine-answer[hidden] { display: none; }

@media (max-width: 620px) {
    .vitrine-box { padding: var(--space-sm) var(--space-md); }
}

/* mobile-fix: prevent logo+burger from clustering in center when nav is hidden */
@media (max-width: 1099px) {
  .terrasse-inner { grid-template-columns: 1fr auto !important; }
}