/* ============================================================
   AUBERGE DE L'UNION — Feuille de style
   Direction A — Éditorial chaleureux modernisé
   Hybride : numérotation 01/02 et tabular nums sur sections structurées
   ============================================================ */

:root {
    /* Couleurs — palette terracotta chaleureuse */
    --paper:        #FBF7ED;
    --paper-warm:   #F4EEE3;
    --paper-deep:   #EBE0CB;
    --paper-tint:   rgba(244, 238, 227, 0.5);

    --ink:          #2A1F15;
    --ink-soft:     #5C4A38;
    --ink-muted:    #8B7456;

    --accent:       #C2531C;
    --accent-deep:  #8E3A12;
    --accent-soft:  rgba(194, 83, 28, 0.12);
    --accent-line:  rgba(194, 83, 28, 0.3);

    --rule:         rgba(42, 31, 21, 0.1);
    --rule-strong:  rgba(42, 31, 21, 0.25);

    --shadow-soft:  0 1px 2px rgba(42, 31, 21, 0.04);
    --shadow-deep:  0 4px 32px rgba(42, 31, 21, 0.08);

    /* Sémantique — pour SWOT et autres badges */
    --pos:          #4A6B3E;
    --warn:         #B8843A;
    --neg:          #8B3A2E;

    /* Typographie */
    --font-display: 'Cormorant Garamond', 'Hoefler Text', 'Cambria', 'Georgia', serif;
    --font-body:    -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', 'Segoe UI', Roboto, system-ui, sans-serif;

    /* Layout */
    --max-width:    1180px;
    --gap-xs:       0.5rem;
    --gap-sm:       1rem;
    --gap-md:       2rem;
    --gap-lg:       4rem;
    --gap-xl:       6rem;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--accent-deep); }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--accent); color: var(--paper); }

/* Tabular nums partout où des chiffres comptent */
.tnum,
.fin-table,
.menu-item-price,
.scenario-bignum,
.pricing-value,
[data-num] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ============================================================
   ORNEMENTS
   ============================================================ */
.ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: var(--gap-md) auto;
    color: var(--accent);
}

.ornament .dot { width: 4px; height: 4px; background: var(--accent); border-radius: 50%; }
.ornament .rule { width: 48px; height: 1px; background: var(--accent); opacity: 0.5; }
.ornament .star { font-size: 0.85rem; color: var(--accent); }

/* ============================================================
   PAGE LOGIN — refonte sobre éditoriale
   ============================================================ */
.page-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--gap-md);
    background: var(--paper);
}

.login-shell { width: 100%; max-width: 440px; }

.login-card {
    background: var(--paper-warm);
    border: 1px solid var(--rule);
    padding: 3.5rem 3rem;
    text-align: center;
    box-shadow: var(--shadow-deep);
    animation: fadeUp 0.7s ease-out both;
}

.login-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 0 auto 1.5rem;
}
.login-ornament:last-of-type { margin: 1.5rem auto 1.25rem; }
.login-ornament .dot { width: 4px; height: 4px; background: var(--accent); border-radius: 50%; }
.login-ornament .rule { width: 50px; height: 1px; background: var(--accent); opacity: 0.5; }

.login-eyebrow {
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--accent);
    margin: 0 0 1.5rem;
    font-weight: 500;
}

.login-title {
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 1;
    font-weight: 400;
    color: var(--ink);
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
}
.login-title em { font-weight: 500; }

.login-meta {
    font-family: var(--font-body);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--ink-muted);
    margin: 0 0 2.25rem;
    font-weight: 400;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    text-align: left;
}

.field { display: flex; flex-direction: column; gap: 0.4rem; }

.field-label {
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--ink-soft);
    font-weight: 500;
}

.field input {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--ink);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rule-strong);
    padding: 0.55rem 0.2rem;
    transition: border-color 0.2s ease;
    width: 100%;
}
.field input:focus { outline: none; border-bottom-color: var(--accent); }

.login-error {
    font-size: 14px;
    color: var(--neg);
    text-align: center;
    margin: 0;
}

.btn-primary {
    font-family: var(--font-body);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-weight: 500;
    color: var(--paper);
    background: var(--ink);
    border: none;
    padding: 1rem 2rem;
    cursor: pointer;
    transition: background 0.25s ease;
    margin-top: 0.5rem;
}
.btn-primary:hover { background: var(--accent); }

.login-foot {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--ink-muted);
    margin: 0;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   HEADER GLOBAL
   ============================================================ */
.site-header {
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(8px);
    background-color: rgba(251, 247, 237, 0.94);
}

.header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1.4rem var(--gap-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-md);
    flex-wrap: wrap;
}

.brand {
    display: flex;
    flex-direction: column;
    color: var(--ink);
    line-height: 1.1;
    text-decoration: none;
}

.brand-eyebrow {
    font-family: var(--font-body);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--accent);
    margin-bottom: 0.3rem;
    font-weight: 500;
}

.brand-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 500;
    letter-spacing: -0.005em;
}
.brand-title em { font-weight: 500; }

.brand-meta {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--ink-muted);
    margin-top: 0.2rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.site-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 1.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.site-nav a {
    font-family: var(--font-body);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-soft);
    padding: 0.5rem 0;
    position: relative;
    transition: color 0.2s ease;
    font-weight: 500;
}

.site-nav a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width 0.3s ease, left 0.3s ease;
}

.site-nav a:hover { color: var(--ink); }
.site-nav a.is-active { color: var(--accent); }
.site-nav a:hover::after,
.site-nav a.is-active::after {
    width: 100%;
    left: 0;
}

.site-nav .nav-logout a {
    color: var(--ink-muted);
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0.04em;
    font-style: italic;
}
.site-nav .nav-logout a::before {
    content: '·';
    margin-right: 1rem;
    color: var(--rule-strong);
    font-style: normal;
}

/* ============================================================
   MAIN
   ============================================================ */
.site-main {
    min-height: 60vh;
    padding: var(--gap-xl) 0 var(--gap-lg);
    animation: fadeIn 0.5s ease-out both;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gap-md);
}

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

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================================
   TYPOGRAPHIE — page titles, sections
   ============================================================ */
.page-eyebrow {
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--accent);
    margin: 0 0 1.25rem;
    font-weight: 500;
}

.page-title {
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 6vw, 4.75rem);
    font-weight: 400;
    line-height: 0.96;
    color: var(--ink);
    margin: 0 0 1.25rem;
    letter-spacing: -0.015em;
}
.page-title em { font-weight: 500; }

.page-subtitle {
    font-size: 1.05rem;
    color: var(--ink-soft);
    margin: 0 0 var(--gap-lg);
    max-width: 60ch;
    line-height: 1.6;
}

h2.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 3vw, 2.4rem);
    font-weight: 500;
    color: var(--ink);
    margin: var(--gap-lg) 0 var(--gap-md);
    line-height: 1.05;
    letter-spacing: -0.005em;
}
h2.section-title em { font-weight: 500; }

h3.subsection-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--accent);
    margin: var(--gap-md) 0 var(--gap-sm);
    font-weight: 500;
}

p { margin: 0 0 1rem; }

.lede {
    font-size: 1.2rem;
    line-height: 1.55;
    color: var(--ink);
    max-width: 56ch;
    margin: 0 0 var(--gap-lg);
    font-weight: 400;
}

/* ============================================================
   HERO ASYMÉTRIQUE
   ============================================================ */
.hero {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--gap-lg);
    align-items: center;
    margin: 0 0 var(--gap-xl);
}

.hero-text { padding-right: 1rem; }
.hero-text .lede { margin-bottom: 0; }

.hero-visual {
    background: var(--paper-warm);
    aspect-ratio: 4/5;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.5rem 2rem;
    color: var(--ink);
    overflow: hidden;
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--rule-strong);
}

.hero-visual::before {
    content: '';
    position: absolute;
    left: 2rem;
    right: 2rem;
    top: 50%;
    height: 1px;
    background: var(--accent);
    opacity: 0.5;
    transform: translateY(-50%);
    pointer-events: none;
}

.hero-visual-top,
.hero-visual-bot {
    position: relative;
    z-index: 1;
    font-family: var(--font-body);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-weight: 500;
    color: var(--ink-muted);
}

.hero-visual-top span,
.hero-visual-bot span { color: var(--accent); }

.hero-visual-center {
    position: relative;
    z-index: 1;
    text-align: center;
    margin: auto 0;
    background: var(--paper-warm);
    padding: 1.25rem 0;
}

.hero-visual-mark {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4.5vw, 3.5rem);
    font-weight: 400;
    line-height: 1;
    margin: 0;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.hero-visual-mark em { font-weight: 500; font-style: italic; color: var(--accent); }

.hero-visual-star {
    font-size: 0.9rem;
    margin: 0.85rem 0 0.65rem;
    color: var(--accent);
    opacity: 0.6;
}

.hero-visual-tagline {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--ink-soft);
    margin: 0;
    line-height: 1.4;
}

/* Variante : photo intégrée dans le hero */
.hero-photo {
    width: 100%;
    aspect-ratio: 761 / 1041;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 2px;
}

@media (max-width: 880px) {
    .hero {
        grid-template-columns: 1fr;
        gap: var(--gap-md);
    }
    .hero-visual { aspect-ratio: 16/10; }
    .hero-photo { aspect-ratio: 4/5; max-width: 480px; margin: 0 auto; }
    .hero-text { padding-right: 0; }
}

/* ============================================================
   PROSE
   ============================================================ */
.prose {
    max-width: 64ch;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--ink);
}

/* Dans la carte, on prend toute la largeur de la colonne contenu */
.carte-content .prose { max-width: none; }

.prose p { margin: 0 0 1.25rem; }

.prose ul {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.prose ul li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.85rem;
    line-height: 1.6;
}

.prose ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 8px;
    height: 1px;
    background: var(--accent);
}

.prose strong {
    color: var(--ink);
    font-weight: 500;
}

.prose em { color: var(--accent-deep); font-style: italic; }

/* ============================================================
   PLACEHOLDER (sections en attente)
   ============================================================ */
.placeholder-card {
    background: var(--paper-warm);
    border: 1px dashed var(--accent-line);
    padding: 2rem 2.25rem;
    margin: var(--gap-md) 0;
    max-width: 760px;
}

.placeholder-card .placeholder-title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--ink);
    margin: 0 0 0.5rem;
    font-weight: 500;
}

.placeholder-card .placeholder-meta {
    color: var(--ink-soft);
    font-size: 0.95rem;
    margin: 0;
}

/* ============================================================
   MARQUEUR "À COMPLÉTER"
   ============================================================ */
.todo {
    display: inline-block;
    font-style: italic;
    font-size: 0.95em;
    color: var(--ink-muted);
    padding: 0.05em 0.45em;
    background: var(--accent-soft);
    border-bottom: 1px dotted var(--accent);
}
.todo::before {
    content: '✎ ';
    color: var(--accent);
    font-style: normal;
    margin-right: 0.15em;
    font-size: 0.9em;
}

/* ============================================================
   CARTES — TEAM GRID & CARTES NUMÉROTÉES
   ============================================================ */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--gap-md);
    margin: var(--gap-md) 0;
}

.team-card {
    background: transparent;
    padding: 1.5rem 1.5rem 1.25rem;
    position: relative;
    transition: background 0.25s ease;
    border: 1px solid var(--rule);
    border-top: 2px solid var(--ink-muted);
}

.team-card:hover {
    background: var(--paper-warm);
    border-top-color: var(--accent);
}

.team-card:hover .team-role { color: var(--accent); }

.team-role {
    font-family: var(--font-body);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--ink-muted);
    margin: 0 0 0.75rem;
    font-weight: 500;
    transition: color 0.25s ease;
}

.team-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin: 0 0 0.7rem;
    color: var(--ink);
    font-weight: 400;
    line-height: 1.15;
}
.team-name em { font-weight: 500; font-style: italic; color: var(--accent); }

.team-bio {
    font-size: 0.94rem;
    color: var(--ink-soft);
    line-height: 1.55;
    margin: 0;
}

/* ============================================================
   CARTE — HERO PANORAMIQUE
   Image pleine largeur ratio 21:9, voile dégradé bas-gauche pour
   garantir la lisibilité du texte superposé. Fallback : fond ink
   uniforme si l'image n'est pas encore disponible.
   ============================================================ */
.carte-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    background-color: var(--ink);
    background-image: url('assets/img/carte-hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 0 var(--gap-lg);
    overflow: hidden;
}

.carte-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 35%,
        rgba(0,0,0,0.4) 70%,
        rgba(0,0,0,0.72) 100%);
    pointer-events: none;
}

.carte-hero-text {
    position: absolute;
    bottom: 2rem;
    left: 2.25rem;
    right: 2rem;
    z-index: 1;
    color: var(--paper);
}

.carte-hero-eyebrow {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #F0997B;
    margin: 0 0 0.5rem;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.carte-hero-title {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 4vw, 2.5rem);
    font-weight: 400;
    margin: 0;
    color: var(--paper);
    line-height: 1.05;
    letter-spacing: -0.005em;
    text-shadow: 0 2px 6px rgba(0,0,0,0.45);
}
.carte-hero-title em {
    font-weight: 500;
    font-style: italic;
}

.carte-hero-dateline {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.05rem;
    color: rgba(251, 247, 237, 0.9);
    margin: 0.75rem 0 0;
    line-height: 1.5;
    max-width: 60ch;
    text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}

@media (max-width: 720px) {
    .carte-hero { aspect-ratio: 16 / 9; }
    .carte-hero-title { font-size: 1.5rem; }
    .carte-hero-dateline { font-size: 0.95rem; }
    .carte-hero-text { bottom: 1.25rem; left: 1.25rem; right: 1.25rem; }
}

/* ============================================================
   CARTE — LAYOUT SOMMAIRE VERTICAL
   Sidebar à gauche (sticky desktop), contenu à droite.
   Sur mobile : sommaire devient une nav horizontale scrollable.
   ============================================================ */
.carte-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 3.5rem;
    margin: var(--gap-md) 0 var(--gap-lg);
}

.season-tabs {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 1.25rem 1rem;
    margin: 0;
    background: var(--paper-warm);
    border: none;
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
    position: sticky;
    top: 6rem;
    align-self: start;
}

.season-tab {
    padding: 0.65rem 0;
    border: none;
    border-bottom: 1px solid rgba(42, 31, 21, 0.06);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    text-align: left;
    font-family: inherit;
    color: var(--ink-soft);
    transition: color 0.18s ease, padding-left 0.18s ease;
    width: 100%;
}

.season-tab:last-child { border-bottom: none; }

.season-tab:hover {
    color: var(--ink);
    padding-left: 4px;
}

.season-tab::before {
    content: attr(data-index);
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    min-width: 18px;
    line-height: 1.5;
}

.season-tab .t-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.season-tab .t-name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: inherit;
}

.season-tab .t-meta {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--ink-muted);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Plus de couleurs pastel — toutes les saisons partagent le même traitement.
   La spécificité s'exprime par le nom et par la position éditoriale. */
.season-tab.t-printemps,
.season-tab.t-ete,
.season-tab.t-automne,
.season-tab.t-hiver,
.season-tab.t-brasserie,
.season-tab.t-specialites,
.season-tab.t-menujour,
.season-tab.t-soir,
.season-tab.t-boissons,
.season-tab.t-vins {
    background: transparent;
    color: var(--ink-soft);
}

/* État actif — barre verticale terracotta + fond papier-deep, déborde gauche et droite */
.season-tab.is-active {
    color: var(--accent);
    background: var(--paper-deep);
    border-left: 3px solid var(--accent);
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
}
.season-tab.is-active::before {
    color: var(--accent);
    font-weight: 500;
}
.season-tab.is-active .t-name {
    font-style: italic;
    font-weight: 500;
    color: var(--accent);
    font-size: 1.1rem;
}

.season-panel { display: none; animation: fadeIn 0.3s ease-out both; }
.season-panel.is-active { display: block; }

/* Layout responsive — sur tablet et mobile, sommaire en nav horizontale */
@media (max-width: 860px) {
    .carte-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .season-tabs {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0;
        position: static;
        border-top: 1px solid var(--rule);
        padding: 0.5rem 0;
    }
    .season-tab {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 140px;
        border-bottom: 1px solid rgba(42, 31, 21, 0.06);
        padding: 0.55rem 0.5rem;
    }
    .season-tab .t-meta { display: none; }
}

/* ============================================================
   CARTE — EN-TÊTE DE CHAPITRE (page de saison)
   Affiché en tête de chaque .season-panel pour matérialiser
   l'arrivée sur un chapitre.
   ============================================================ */
.chapter-head {
    border-top: 2px solid var(--ink);
    padding-top: 0.7rem;
    margin-bottom: 2.5rem;
}

.chapter-eyebrow {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 0.4rem;
    font-weight: 500;
}

.chapter-title {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 3.5vw, 2.4rem);
    font-weight: 400;
    margin: 0;
    color: var(--ink);
    line-height: 1.05;
    letter-spacing: -0.005em;
}
.chapter-title em {
    font-weight: 500;
    font-style: italic;
    color: var(--accent);
}

.chapter-dateline {
    font-family: var(--font-display);
    font-size: 1rem;
    font-style: italic;
    color: var(--ink-soft);
    margin: 0.7rem 0 0;
    line-height: 1.55;
    max-width: 64ch;
}

/* ============================================================
   CARTE — GRILLE 2 COLONNES DES SOUS-SECTIONS
   La structure HTML existante (.menu-section > .menu-section-head + .menu-list)
   passe en grille 200px + reste, sans modification du HTML.
   ============================================================ */
.menu-section {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.75rem;
    margin: 0;
    padding: 1.5rem 0 1.25rem;
    border-bottom: 1px solid var(--rule);
    align-items: start;
}
.menu-section:last-child { border-bottom: none; }

.menu-section-head {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    border-bottom: none;
    flex-wrap: nowrap;
}

.menu-category {
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--ink);
    margin: 0 0 0.25rem;
    font-weight: 400;
    font-style: italic;
    letter-spacing: -0.005em;
    line-height: 1.2;
}

.menu-category-meta {
    font-family: var(--font-body);
    color: var(--ink-muted);
    font-size: 11px;
    letter-spacing: 0.05em;
    margin: 0;
    line-height: 1.5;
    max-width: 100%;
}

/* Sur mobile : grille en empilement vertical */
@media (max-width: 720px) {
    .menu-section {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

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

.menu-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    align-items: baseline;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--rule);
}

.menu-item:last-child { border-bottom: none; }

.menu-item-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--ink);
    line-height: 1.2;
    font-weight: 500;
}

.menu-item-desc {
    display: block;
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--ink-soft);
    margin-top: 0.35rem;
    line-height: 1.5;
    font-weight: 400;
    font-style: normal;
}

.menu-item-price {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--accent);
    white-space: nowrap;
    font-weight: 500;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.menu-item-price .alt-price {
    color: var(--ink-muted);
    font-size: 0.9rem;
    font-weight: 400;
    margin-left: 0.5rem;
}

.menu-note {
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--ink-muted);
    margin: var(--gap-sm) 0;
    line-height: 1.55;
    max-width: 64ch;
}

/* ============================================================
   PRÉVISIONS — SCÉNARIOS
   ============================================================ */
.scenarios-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin: var(--gap-lg) 0;
}

.scenario-card {
    background: transparent;
    border: none;
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--rule);
    padding: 1.5rem 0 1.25rem;
    position: relative;
    transition: none;
    display: flex;
    flex-direction: column;
}

.scenario-card::before {
    display: none;
}

.scenario-card.critique .scenario-tag  { color: var(--ink-muted); }
.scenario-card.realiste .scenario-tag  { color: var(--ink-muted); }

.scenario-card:hover {
    transform: none;
    box-shadow: none;
}

.scenario-tag {
    font-family: var(--font-body);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    margin: 0 0 0.3rem;
    font-weight: 500;
    color: var(--ink-muted);
}

.scenario-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin: 0 0 1.5rem;
    color: var(--ink);
    font-weight: 400;
    font-style: italic;
    line-height: 1.1;
}

.scenario-bignum {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 500;
    color: var(--accent);
    margin: 0.25rem 0 0.5rem;
    line-height: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.scenario-bignum .currency {
    font-size: 0.45em;
    color: var(--ink-muted);
    margin-right: 0.3em;
    vertical-align: 0.25em;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.scenario-label {
    font-family: var(--font-body);
    color: var(--ink-soft);
    font-size: 0.9rem;
    margin: 0 0 1.5rem;
}

.scenario-detail {
    list-style: none;
    margin: auto 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--rule);
    font-size: 0.92rem;
}

.scenario-detail li {
    padding: 0.45rem 0;
    color: var(--ink-soft);
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.scenario-detail strong {
    color: var(--ink);
    font-weight: 500;
}

/* ============================================================
   PRÉVISIONS — TABLEAUX FINANCIERS
   ============================================================ */
.fin-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--gap-md) 0;
    font-size: 0.92rem;
    background: transparent;
    border: none;
    border-top: 1px solid var(--rule-strong);
    border-bottom: 1px solid var(--rule-strong);
}

.fin-table th, .fin-table td {
    padding: 0.7rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid rgba(42, 31, 21, 0.06);
}
.fin-table th:first-child, .fin-table td:first-child { padding-left: 0; }
.fin-table th:last-child, .fin-table td:last-child { padding-right: 0; }

.fin-table thead th {
    font-family: var(--font-body);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-muted);
    background: transparent;
    font-weight: 500;
    text-align: right;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--rule);
}
.fin-table thead th:first-child { text-align: left; }

.fin-table tbody td:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

.fin-table .row-section {
    background: transparent;
}

.fin-table .row-section td {
    font-family: var(--font-body);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--accent);
    font-weight: 500;
    padding-top: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--rule);
}

.fin-table .row-total td {
    font-weight: 500;
    background: transparent;
    color: var(--ink);
    border-top: 1px solid var(--rule-strong);
    border-bottom: 1px solid var(--rule);
    font-style: italic;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.fin-table .row-final td {
    background: transparent;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 500;
    border-top: 1px solid var(--ink);
    border-bottom: 3px double var(--ink);
    padding-top: 0.95rem;
    padding-bottom: 0.95rem;
}
.fin-table .row-final td:first-child { font-style: italic; }
.fin-table .row-final td:not(:first-child) {
    color: var(--accent);
    font-size: 1.3rem;
    line-height: 1;
}

.fin-table .neg { color: var(--neg); }
.fin-table .pos { color: var(--pos); }

/* ============================================================
   FICHE PROFIL — composition éditoriale
   ============================================================ */
.profile-card {
    background: var(--paper-warm);
    border: none;
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--rule);
    padding: 2rem 2.25rem 1.75rem;
    margin: 0 0 var(--gap-md);
    max-width: 920px;
}

.profile-head {
    display: block;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 1.25rem;
}

.profile-role {
    font-family: var(--font-body);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--accent);
    font-weight: 500;
    text-align: left;
    margin: 0 0 0.35rem;
    display: block;
}

.profile-name {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--ink);
    margin: 0;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.005em;
}
.profile-name em { font-weight: 500; font-style: italic; }

.profile-row {
    display: block;
    padding: 0;
    border-bottom: none;
    margin: 0 0 0.9rem;
}
.profile-row:last-child { margin-bottom: 0; }

.profile-label {
    display: none;
}

.profile-val {
    display: block;
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--ink);
    line-height: 1.55;
    margin: 0;
}
.profile-val em {
    font-style: italic;
    color: var(--ink);
}

/* Variante : citation mise en exergue (à utiliser sur la philosophie) */
.profile-row.is-quote .profile-val {
    background: transparent;
    border-left: 2px solid var(--accent);
    padding: 0.4rem 0 0.4rem 1.25rem;
    margin: 0.5rem 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--ink);
    line-height: 1.4;
}

/* Variante : grille de métadonnées en bas de fiche */
.profile-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem 1.5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
    font-family: var(--font-body);
}

.profile-meta-grid > div { display: block; }

.profile-meta-grid .meta-label {
    font-family: var(--font-body);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-muted);
    margin: 0 0 0.2rem;
    font-weight: 500;
}

.profile-meta-grid .meta-value {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    margin: 0;
    line-height: 1.4;
}

@media (max-width: 640px) {
    .profile-card { padding: 1.5rem 1.25rem; }
    .profile-name { font-size: 1.65rem; }
    .profile-meta-grid { grid-template-columns: 1fr; gap: 0.75rem; }
}

/* ============================================================
   SWOT
   ============================================================ */
.swot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: var(--gap-md) 0 var(--gap-lg);
}

.swot-card {
    background: var(--paper-warm);
    border: 1px solid var(--rule);
    border-top: 2px solid var(--ink);
    padding: 1.5rem 1.65rem 1.65rem;
    position: relative;
}
.swot-card.s { border-top-color: var(--pos); }
.swot-card.w { border-top-color: var(--warn); }
.swot-card.o { border-top-color: var(--accent); }
.swot-card.t { border-top-color: var(--neg); }

.swot-card::before {
    display: none;
}

/* Pastille catégorielle : un seul point coloré, pas un bandeau entier */
.swot-card .swot-title::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 0.6rem;
    vertical-align: 0.15em;
}
.swot-card.s .swot-title::before { background: var(--pos); }
.swot-card.w .swot-title::before { background: var(--warn); }
.swot-card.o .swot-title::before { background: var(--accent); }
.swot-card.t .swot-title::before { background: var(--neg); }

.swot-title {
    font-family: var(--font-body);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    margin: 0 0 0.3rem;
    font-weight: 500;
    color: var(--ink-muted);
}

.swot-card.s .swot-title,
.swot-card.w .swot-title,
.swot-card.o .swot-title,
.swot-card.t .swot-title { color: var(--ink-muted); }

.swot-name {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.45rem;
    color: var(--ink);
    margin: 0 0 1rem;
    font-weight: 500;
    line-height: 1.2;
}

.swot-card ul { list-style: none; margin: 0; padding: 0; }

.swot-card li {
    padding: 0.45rem 0;
    padding-left: 1.25rem;
    position: relative;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ink);
}

.swot-card li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.85em;
    width: 7px;
    height: 1px;
    background: var(--accent);
}

.swot-card li em {
    color: var(--ink-muted);
    font-style: italic;
    display: block;
    margin-top: 0.2rem;
    font-size: 0.95em;
}

/* ============================================================
   PRICING (Marketing)
   ============================================================ */
.pricing-list {
    background: transparent;
    border: none;
    border-top: 1px solid var(--rule-strong);
    border-bottom: 1px solid var(--rule-strong);
    padding: 0;
    margin: var(--gap-md) 0;
    max-width: 760px;
}

.pricing-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    align-items: baseline;
    padding: 0.95rem 0;
    border-bottom: 1px solid rgba(42, 31, 21, 0.06);
}
.pricing-row:last-child { border-bottom: none; }

.pricing-label {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.2;
}

.pricing-label small {
    display: block;
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--ink-soft);
    margin-top: 0.2rem;
    line-height: 1.45;
    font-weight: 400;
    font-style: normal;
}

.pricing-value {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--accent);
    white-space: nowrap;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   ÉVÉNEMENTS (Marketing)
   ============================================================ */
.event-list {
    margin: var(--gap-md) 0;
    list-style: none;
    padding: 0;
    border-top: 1px solid var(--rule-strong);
    border-bottom: 1px solid var(--rule-strong);
}

.event-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.5rem;
    padding: 1.15rem 0;
    border-bottom: 1px solid rgba(42, 31, 21, 0.06);
    align-items: baseline;
}
.event-row:last-child { border-bottom: none; }

.event-name {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--ink);
    font-weight: 400;
    font-style: italic;
    line-height: 1.2;
}

.event-meta {
    color: var(--ink-soft);
    font-size: 0.94rem;
    line-height: 1.55;
}

/* ============================================================
   TABLEAU INFO (admin / partenaires)
   ============================================================ */
.info-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--gap-md) 0;
    max-width: 920px;
    background: transparent;
    border: none;
    border-top: 1px solid var(--rule-strong);
    border-bottom: 1px solid var(--rule-strong);
}

.info-table td {
    padding: 0.85rem 0.5rem;
    border-bottom: 1px solid rgba(42, 31, 21, 0.06);
    vertical-align: top;
}
.info-table td:first-child { padding-left: 0; }
.info-table td:last-child { padding-right: 0; }
.info-table tr:last-child td { border-bottom: none; }

.info-table td:first-child {
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-muted);
    font-weight: 500;
    width: 220px;
    background: transparent;
}

.info-table td:last-child {
    font-size: 0.96rem;
    color: var(--ink);
    line-height: 1.6;
}

.info-table td strong {
    color: var(--ink);
    font-weight: 500;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    margin-top: var(--gap-xl);
    background: var(--paper-warm);
    border-top: 1px solid var(--rule);
    padding: var(--gap-lg) var(--gap-md);
    text-align: center;
    color: var(--ink-soft);
}

.footer-inner { max-width: var(--max-width); margin: 0 auto; }

.footer-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 0 auto 1.25rem;
}
.footer-ornament .dot { width: 4px; height: 4px; background: var(--accent); border-radius: 50%; }
.footer-ornament .rule { width: 50px; height: 1px; background: var(--accent); opacity: 0.5; }
.footer-ornament .star { color: var(--accent); }

.footer-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--ink);
    margin: 0;
    font-weight: 500;
}
.footer-title em { font-weight: 500; }

.footer-meta {
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-muted);
    margin: 0.5rem 0 0.75rem;
}

.footer-fine {
    font-size: 0.78rem;
    color: var(--ink-muted);
    margin: 1rem 0 0;
    letter-spacing: 0.04em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 920px) {
    .scenarios-grid { grid-template-columns: 1fr; }
    .header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .site-nav ul { gap: 1rem; }
    .fin-table { font-size: 0.82rem; }
    .fin-table th, .fin-table td { padding: 0.6rem 0.5rem; }
    .swot-grid { grid-template-columns: 1fr; }
    .profile-row, .event-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    .info-table td:first-child { width: auto; }
    .menu-section-head { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    h2.section-title { flex-wrap: wrap; }
    .season-tabs { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
    body { font-size: 15px; }
    .login-card { padding: 2.5rem 1.75rem; }
    .login-title { font-size: 2.4rem; }
    .menu-item {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }
    .menu-item-price {
        grid-column: 1;
    }
    .site-main { padding: var(--gap-lg) 0 var(--gap-md); }
    .profile-card { padding: 1.75rem 1.5rem; }
    .swot-card { padding: 1.5rem 1.5rem; }
    .season-tabs { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .season-tab {
        min-height: 78px;
        padding: 12px 14px;
    }
    .season-tab .t-name { font-size: 0.98rem; }
}

/* ============================================================
   TOC — TABLE DES MATIÈRES (vignettes pastel par page)
   Mêmes principes visuels que .season-tabs, mais variantes de
   couleur pour différencier chaque page.
   ============================================================ */
.page-toc {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0;
    margin: var(--gap-md) 0 var(--gap-lg);
    border-top: 1px solid var(--rule-strong);
    border-bottom: 1px solid var(--rule-strong);
    padding: 0;
}

.toc-tile {
    padding: 1.1rem 1.25rem 1.1rem 1rem;
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--rule);
    cursor: pointer;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    transition: background 0.2s ease;
    text-decoration: none;
    color: var(--ink-soft);
    background: transparent;
    position: relative;
}
.toc-tile:last-child { border-right: none; }

.toc-tile:hover {
    background: var(--paper-warm);
    color: var(--ink);
}
.toc-tile:hover .toc-num { color: var(--accent); }
.toc-tile:hover .toc-name { color: var(--accent); font-style: italic; }

.toc-tile .toc-num {
    font-family: var(--font-body);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-muted);
    margin-bottom: 0.35rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.toc-tile .toc-name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--ink);
    transition: color 0.2s ease, font-style 0.2s ease;
}

/* Toutes les variantes couleur passent au même rendu sobre */
.toc-tile.c-projet,
.toc-tile.c-equipe,
.toc-tile.c-marche,
.toc-tile.c-marketing,
.toc-tile.c-previsions {
    background: transparent;
    color: var(--ink-soft);
}

@media (max-width: 700px) {
    .page-toc { grid-template-columns: 1fr 1fr; }
    .toc-tile { border-bottom: 1px solid var(--rule); }
    .toc-tile:nth-child(even) { border-right: none; }
}

/* ============================================================
   TUILE DE TÉLÉCHARGEMENT (variante chaleureuse)
   ============================================================ */
.download-tile {
    background: var(--ink);
    color: var(--paper);
    padding: 1.75rem 1.85rem;
    border: none;
    border-top: 2px solid var(--accent);
    transition: background 0.25s ease;
    display: block;
    text-decoration: none;
}

.download-tile:hover {
    background: var(--ink-soft);
    color: var(--paper);
}
.download-tile:hover .dl-title { color: var(--paper); }
.download-tile:hover .dl-eyebrow,
.download-tile:hover .dl-icon { color: var(--accent); }

.download-tile .dl-eyebrow {
    font-family: var(--font-body);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--accent);
    margin: 0 0 0.85rem;
    font-weight: 500;
}

.download-tile .dl-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin: 0 0 0.55rem;
    color: var(--paper);
    font-weight: 400;
    line-height: 1.2;
    font-style: italic;
}

.download-tile .dl-meta {
    font-size: 0.92rem;
    color: rgba(251, 247, 237, 0.7);
    margin: 0 0 1rem;
}

.download-tile .dl-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    font-weight: 500;
}

/* ============================================================
   CONTACT — bloc coordonnées (footer + accueil)
   ============================================================ */
.contact-card {
    background: var(--paper-warm);
    border: none;
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--rule);
    padding: 2rem 2.25rem;
    margin: var(--gap-md) 0;
    text-align: center;
}

.contact-card .contact-eyebrow {
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--accent);
    margin: 0 0 0.85rem;
    font-weight: 500;
}

.contact-card .contact-title {
    font-family: var(--font-display);
    font-size: 1.45rem;
    margin: 0 0 0.85rem;
    color: var(--ink);
    font-weight: 500;
}

.contact-card .contact-name {
    font-size: 1rem;
    color: var(--ink);
    margin: 0 0 0.5rem;
    font-weight: 500;
}

.contact-card .contact-lines {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    font-size: 0.95rem;
    color: var(--ink-soft);
    margin: 0;
}

.contact-card .contact-lines a {
    color: var(--accent);
    font-weight: 500;
}

.contact-card .contact-lines a:hover {
    color: var(--accent-deep);
}

/* Footer contact — version compacte */
.footer-contact {
    margin: 0 auto 1rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--rule);
    max-width: 520px;
    text-align: center;
}

.footer-contact .fc-eyebrow {
    font-family: var(--font-body);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--accent);
    margin: 0 0 0.4rem;
    font-weight: 500;
}

.footer-contact .fc-line {
    font-size: 0.92rem;
    color: var(--ink-soft);
    margin: 0.15rem 0;
}

.footer-contact a {
    color: var(--accent);
}

@media (max-width: 640px) {
    .page-toc { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .toc-tile { min-height: 72px; padding: 12px 14px; }
    .toc-tile .toc-name { font-size: 0.98rem; }
    .contact-card { padding: 1.5rem 1.5rem; }
    .download-tile { padding: 1.5rem 1.5rem; }
}

/* ============================================================
   ANNEXES — composants additionnels
   (data-table, callout-quote, callout-note, choice-list, mini-toc)
   ============================================================ */

/* Tableau de données multi-colonnes (analyses, simulations) */
.data-table {
    width: 100%;
    max-width: 920px;
    border-collapse: collapse;
    margin: var(--gap-md) 0;
    background: var(--paper-warm);
    border: 1px solid var(--rule);
    font-size: 0.95rem;
}

.data-table th {
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 500;
    padding: 0.85rem 1rem;
    text-align: left;
    vertical-align: top;
    line-height: 1.35;
}

.data-table td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
    color: var(--ink);
    line-height: 1.5;
}

.data-table tr:last-child td {
    border-bottom: none;
}

.data-table tr:nth-child(even) td {
    background: var(--paper-deep);
}

.data-table tr.row-total td {
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.02rem;
}

.data-table tr.row-total td:first-child {
    font-style: italic;
}

.data-table .num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    white-space: nowrap;
}

.data-table .accent {
    color: var(--accent);
    font-weight: 500;
}

.data-table tr.row-total .accent {
    color: var(--paper);
}

/* Callout quote — citation forte / position assumée */
.callout-quote {
    background: transparent;
    border: none;
    border-left: 2px solid var(--accent);
    padding: 0.5rem 0 0.5rem 1.5rem;
    margin: var(--gap-md) 0;
    max-width: 760px;
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.5;
    font-weight: 400;
    color: var(--ink);
    font-style: italic;
}

/* Callout note — note explicative secondaire */
.callout-note {
    background: var(--paper-warm);
    border: none;
    border-left: 2px solid var(--accent);
    padding: 1rem 1.25rem;
    margin: var(--gap-md) 0;
    max-width: 760px;
    color: var(--ink);
    font-style: normal;
    line-height: 1.65;
    font-size: 0.95rem;
}

.callout-note p { margin: 0.4rem 0; }
.callout-note p:first-child { margin-top: 0; }
.callout-note p:last-child { margin-bottom: 0; }
.callout-note strong { color: var(--ink); font-weight: 500; }

/* Choice list — ordre numéroté avec emphase éditoriale */
.choice-list {
    counter-reset: choice;
    list-style: none;
    padding: 0;
    margin: var(--gap-md) 0;
    max-width: 820px;
}

.choice-list li {
    counter-increment: choice;
    position: relative;
    padding: 1.1rem 0 1.1rem 3.2rem;
    border-bottom: 1px solid var(--rule);
    line-height: 1.6;
}

.choice-list li:last-child {
    border-bottom: none;
}

.choice-list li::before {
    content: counter(choice, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 1.15rem;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--accent);
    font-weight: 500;
    width: 2.5rem;
    font-variant-numeric: tabular-nums;
}

.choice-list li strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--ink);
    font-weight: 500;
    margin-bottom: 0.2rem;
}

/* Mini-TOC interne — pour grandes sections d'annexe */
.mini-toc {
    background: var(--paper-warm);
    border: 1px solid var(--rule);
    padding: 1.2rem 1.85rem;
    margin: var(--gap-md) 0 var(--gap-lg);
    max-width: 760px;
}

.mini-toc-title {
    font-family: var(--font-body);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--accent);
    margin: 0 0 0.85rem;
    font-weight: 500;
}

.mini-toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: minitoc;
    column-count: 2;
    column-gap: 2rem;
}

.mini-toc ol li {
    counter-increment: minitoc;
    padding: 0.25rem 0;
    line-height: 1.5;
    break-inside: avoid;
}

.mini-toc ol li::before {
    content: counter(minitoc, decimal-leading-zero) " · ";
    color: var(--ink-muted);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.mini-toc ol li a {
    color: var(--ink);
    text-decoration: none;
    font-size: 0.95rem;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.mini-toc ol li a:hover {
    border-bottom-color: var(--accent);
    color: var(--accent);
}

@media (max-width: 640px) {
    .mini-toc ol { column-count: 1; }
    .data-table { font-size: 0.88rem; }
    .data-table th, .data-table td { padding: 0.6rem 0.7rem; }
    .choice-list li { padding-left: 2.6rem; }
}

/* Bloc dialogue — cas concrets en service */
.case-block {
    background: var(--paper-warm);
    border: 1px solid var(--rule);
    padding: 1.5rem 1.85rem;
    margin: var(--gap-md) 0;
    max-width: 820px;
}

.case-block .case-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--ink);
    font-weight: 500;
    margin: 0 0 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--rule);
}

.case-block .case-row {
    margin: 0.7rem 0;
    line-height: 1.55;
    font-size: 0.97rem;
    color: var(--ink);
}

.case-block .case-row .case-label {
    font-family: var(--font-body);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--accent);
    font-weight: 500;
    display: block;
    margin-bottom: 0.15rem;
}

.case-block .case-row.case-quote {
    font-style: italic;
    color: var(--ink);
    padding: 0.4rem 0.8rem;
    border-left: 3px solid var(--accent-line);
    margin-left: 0.2rem;
}

.case-block .case-row.case-why {
    font-size: 0.9rem;
    color: var(--ink-soft);
    font-style: italic;
}


/* ============================================================
   BOUTON FLOTTANT — Retour en haut de page
   ============================================================ */
.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--paper);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-deep);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
    z-index: 100;
    padding: 0;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--accent-deep);
    transform: translateY(-2px);
}

.back-to-top:active {
    transform: translateY(0);
}

.back-to-top:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

.back-to-top svg {
    display: block;
}

@media (max-width: 640px) {
    .back-to-top {
        right: 16px;
        bottom: 16px;
        width: 40px;
        height: 40px;
    }
}

@media print {
    .back-to-top { display: none; }
}

/* ============================================================
   CARTE — MENU DU JOUR (grille 2 colonnes type livre)
   12 menus listés en deux colonnes verticales.
   Chaque item : numéro discret + 3 lignes éditoriales.
   ============================================================ */
.daily-menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2.5rem;
    margin-top: 2rem;
}

.daily-menu-item {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 1rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--rule);
    align-items: start;
}
.daily-menu-item:last-child { border-bottom: none; }

.daily-menu-num {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--accent);
    font-weight: 500;
    padding-top: 0.25rem;
}

.daily-menu-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.daily-menu-line {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--ink);
    margin: 0;
    line-height: 1.4;
}

.daily-menu-line:nth-child(2) {
    color: var(--accent);
    font-style: italic;
    font-weight: 500;
}

@media (max-width: 720px) {
    .daily-menu-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ============================================================
   CARTE — PETIT-DEJEUNER (deux formules sobres)
   Mise en parallèle de la formule sucrée et complète,
   sans bignum agressif.
   ============================================================ */
.breakfast-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 1.5rem 0 0;
}

.breakfast-item {
    border-top: 2px solid var(--ink);
    padding-top: 0.85rem;
}

.breakfast-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.35rem;
}

.breakfast-tag {
    font-family: var(--font-body);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--accent);
    margin: 0;
    font-weight: 500;
}

.breakfast-price {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--ink);
    margin: 0;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.breakfast-meta {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--ink);
    margin: 0 0 1rem;
    line-height: 1.3;
}

.breakfast-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule);
}

.breakfast-list li {
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(42, 31, 21, 0.06);
    font-size: 0.92rem;
    color: var(--ink);
    line-height: 1.5;
}
.breakfast-list li:last-child { border-bottom: none; }

@media (max-width: 720px) {
    .breakfast-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ============================================================
   CARTE — SPÉCIALITÉ DE SAISON (cadre éditorial centré)
   Affichée en bas de saison concernée — Fondue de l'Union pour
   Printemps & Été, Soupe de l'Union pour Automne & Hiver.
   ============================================================ */
.specialty-block {
    border-top: 2px solid var(--accent);
    border-bottom: 1px solid var(--rule-strong);
    background: var(--paper-warm);
    padding: 1.5rem 1.5rem 1.25rem;
    margin: 2.5rem 0 0;
    text-align: center;
}

.specialty-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 400;
    font-style: italic;
    margin: 0 0 0.35rem;
    color: var(--accent);
    line-height: 1.1;
}

.specialty-subtitle {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--ink-soft);
    margin: 0 0 0.75rem;
    line-height: 1.4;
}

.specialty-meta {
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--ink);
    line-height: 1.55;
    margin: 0 0 1rem;
    max-width: 62ch;
    margin-left: auto;
    margin-right: auto;
}

.specialty-options {
    border-top: 1px solid var(--rule);
    padding-top: 0.75rem;
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--ink);
    line-height: 1.7;
}

.specialty-options p { margin: 0.25rem 0; }
.specialty-options strong { color: var(--accent); font-weight: 500; font-variant-numeric: tabular-nums; }

.specialty-note {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.88rem;
    color: var(--ink-muted);
    margin: 0.85rem 0 0;
    line-height: 1.5;
}

/* ============================================================
   CARTE — MENU DU JOUR (vignettes encadrées papier-warm)
   12 cartes éditoriales en 4 colonnes × 3 rangées, pleine largeur
   de la colonne contenu (sortie de .menu-section pour libérer
   l'espace consommé par le head 200px).
   ============================================================ */
.daily-menu-intro {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1rem;
    color: var(--ink-soft);
    text-align: center;
    line-height: 1.55;
    max-width: 64ch;
    margin: 1.5rem auto 0;
    padding: 0 1rem;
}

.daily-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.7rem;
    margin: 1.5rem 0 0;
}

.daily-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.1rem 0.6rem 1.25rem;
    background: var(--paper-warm);
    border: 1px solid var(--rule);
}

.daily-menu-num {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 500;
    position: relative;
    margin-bottom: 0.95rem;
    padding-bottom: 0.5rem;
}
.daily-menu-num::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 1px;
    background: rgba(42, 31, 21, 0.18);
}

.daily-menu-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.daily-menu-line {
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--ink);
    margin: 0;
    line-height: 1.3;
}

.daily-menu-line:nth-child(2) {
    color: var(--accent);
    font-style: italic;
    font-weight: 500;
}

@media (max-width: 960px) {
    .daily-menu-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
    .daily-menu-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .daily-menu-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CARTE — SECTION SERVICE (Le soir + Petit-déjeuner)
   Bandeau noir ink contrastant (titre + sous-titre fusionnés)
   suivi d'un cadre papier-warm 2 colonnes séparées par un filet.
   ============================================================ */
.service-banner {
    background: var(--ink);
    color: var(--paper);
    text-align: center;
    padding: 1.35rem 1.5rem 1.15rem;
    margin: 3.5rem 0 0;
}

.service-section-title {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #F0997B;
    font-weight: 500;
    text-align: center;
    margin: 0 0 0.35rem;
    padding: 0;
    border: none;
}

.service-section-meta {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1rem;
    color: rgba(251, 247, 237, 0.85);
    text-align: center;
    margin: 0;
    line-height: 1.4;
}

.service-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 0;
    background: var(--paper-warm);
    border: 1px solid var(--rule);
    border-top: none;
    padding: 1.75rem 1rem;
}

.service-item {
    text-align: center;
    padding: 0 1.25rem;
}

.service-item + .service-item {
    border-left: 1px solid var(--rule);
}

.service-item-tag {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 500;
    margin: 0 0 0.5rem;
}

.service-item-meta {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.92rem;
    color: var(--ink-soft);
    margin: 0 0 0.7rem;
    line-height: 1.4;
}

.service-item-price {
    font-family: var(--font-display);
    font-size: 1.65rem;
    color: var(--ink);
    margin: 0 0 0.9rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.service-item-list {
    list-style: none;
    margin: 0;
    padding: 0.75rem 0 0;
    border-top: 1px solid rgba(42, 31, 21, 0.15);
}

.service-item-list li {
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(42, 31, 21, 0.06);
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--ink);
    line-height: 1.5;
}
.service-item-list li:last-child { border-bottom: none; }

.service-item-desc {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--ink);
    line-height: 1.6;
    margin: 0;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(42, 31, 21, 0.15);
}

@media (max-width: 720px) {
    .service-grid { grid-template-columns: 1fr; padding: 1.25rem 0.5rem; }
    .service-item + .service-item { border-left: none; border-top: 1px solid var(--rule); padding-top: 1.5rem; margin-top: 1.5rem; }
}

/* ============================================================
   CARTE — ART DU FROMAGE (encart éditorial Brasserie & Fromages)
   ============================================================ */
.cheese-art {
    background: var(--paper-warm);
    border-left: 2px solid var(--accent);
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0 0;
}

.cheese-art-eyebrow {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 500;
    margin: 0 0 0.5rem;
}

.cheese-art-text {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1rem;
    color: var(--ink);
    margin: 0;
    line-height: 1.55;
}

/* ============================================================
   CARTE — Note alignée sur la colonne contenu (sous les plats)
   ex: liste d'ingrédients Fol'Fondue, après les 4 plats fromage
   ============================================================ */
.menu-section .menu-note.is-fullwidth {
    grid-column: 2;
    margin: 0.85rem 0 0;
    padding: 0.85rem 0 0;
    border-top: 1px solid var(--rule);
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--ink);
    line-height: 1.6;
    text-align: left;
}

.menu-section .menu-note.is-fullwidth em {
    color: var(--accent);
    font-style: italic;
    font-weight: 500;
}

/* ============================================================
   HERO PANORAMIQUE GÉNÉRIQUE (pages projet, équipe, marché…)
   Identique à .carte-hero mais avec image passée en variable CSS
   pour permettre une image différente par page.
   ============================================================ */
.page-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    background-color: var(--ink);
    background-image: var(--hero-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 0 var(--gap-lg);
    overflow: hidden;
}
.page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 35%,
        rgba(0,0,0,0.4) 70%,
        rgba(0,0,0,0.72) 100%);
    pointer-events: none;
}
.page-hero-text {
    position: absolute;
    bottom: 2rem;
    left: 2.25rem;
    right: 2rem;
    z-index: 1;
    color: var(--paper);
}
.page-hero-eyebrow {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #F0997B;
    margin: 0 0 0.5rem;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.page-hero-title {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 4vw, 2.5rem);
    font-weight: 400;
    margin: 0;
    color: var(--paper);
    line-height: 1.05;
    letter-spacing: -0.005em;
    text-shadow: 0 2px 6px rgba(0,0,0,0.45);
}
.page-hero-title em {
    font-weight: 500;
    font-style: italic;
}
.page-hero-dateline {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.05rem;
    color: rgba(251, 247, 237, 0.9);
    margin: 0.75rem 0 0;
    line-height: 1.5;
    max-width: 60ch;
    text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
@media (max-width: 720px) {
    .page-hero { aspect-ratio: 16 / 9; }
    .page-hero-title { font-size: 1.5rem; }
    .page-hero-dateline { font-size: 0.95rem; }
    .page-hero-text { bottom: 1.25rem; left: 1.25rem; right: 1.25rem; }
}

/* ============================================================
   VIGNETTES PILIERS / CARTES NARRATIVES
   Cohérence avec les vignettes du menu du jour mais adaptées
   pour textes plus longs (titre haut, description ci-dessous,
   alignement texte à gauche).
   ============================================================ */
.pillar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
    margin: 1.5rem 0 0;
}

.pillar-card {
    background: var(--paper-warm);
    border: 1px solid var(--rule);
    padding: 1.5rem 1.5rem 1.65rem;
    display: flex;
    flex-direction: column;
}

.pillar-card-tag {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 500;
    margin: 0 0 0.5rem;
    position: relative;
    padding-bottom: 0.55rem;
}
.pillar-card-tag::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 28px;
    height: 1px;
    background: rgba(42, 31, 21, 0.18);
}

.pillar-card-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-style: italic;
    color: var(--ink);
    margin: 0 0 0.7rem;
    line-height: 1.2;
    font-weight: 500;
}

.pillar-card-desc {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--ink);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 960px) {
    .pillar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .pillar-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   TABLEAU D'INFORMATIONS (forme juridique, tarifs chambres, etc.)
   Cadre éditorial avec filet terracotta en haut + ligne par ligne.
   ============================================================ */
.info-table {
    background: var(--paper-warm);
    border-top: 2px solid var(--accent);
    border-bottom: 1px solid var(--rule-strong);
    margin: 1.5rem 0;
}

.info-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0;
    border-bottom: 1px solid var(--rule);
}
.info-row:last-child { border-bottom: none; }

.info-label {
    padding: 0.95rem 1.25rem;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 500;
    background: rgba(42, 31, 21, 0.03);
    border-right: 1px solid var(--rule);
}

.info-value {
    padding: 0.95rem 1.25rem;
    font-family: var(--font-display);
    font-size: 1.02rem;
    color: var(--ink);
    line-height: 1.5;
}
.info-value em {
    font-style: italic;
    color: var(--ink-soft);
}

.info-row.is-highlight .info-value {
    color: var(--accent);
    font-weight: 500;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
    .info-row { grid-template-columns: 1fr; }
    .info-label { border-right: none; border-bottom: 1px solid var(--rule); }
}

/* ============================================================
   BLOC CITATION (Vanessa : "Un Président ou un passant…")
   Cadre éditorial avec guillemets terracotta + auteur en eyebrow.
   ============================================================ */
.quote-block {
    background: var(--paper-warm);
    border-top: 2px solid var(--accent);
    border-bottom: 1px solid var(--rule-strong);
    padding: 1.85rem 2.25rem 1.5rem;
    margin: 1.5rem 0;
    text-align: center;
}

.quote-block-text {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.4rem;
    color: var(--ink);
    line-height: 1.4;
    margin: 0;
    quotes: "« " " »";
}
.quote-block-text::before {
    content: open-quote;
    color: var(--accent);
    font-weight: 500;
}
.quote-block-text::after {
    content: close-quote;
    color: var(--accent);
    font-weight: 500;
}

.quote-block-author {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0.95rem 0 0;
    font-weight: 500;
    position: relative;
    padding-top: 0.65rem;
}
.quote-block-author::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 1px;
    background: rgba(42, 31, 21, 0.2);
}

/* ============================================================
   TABLEAUX FINANCIERS (Prévisions)
   Tableau structuré avec entête, sous-totaux et total.
   Variantes 2 / 3 / 4 colonnes via classes is-Ncol.
   ============================================================ */
.fin-table {
    width: 100%;
    background: var(--paper-warm);
    border-top: 2px solid var(--accent);
    border-bottom: 1px solid var(--rule-strong);
    margin: 1.5rem 0;
    border-collapse: collapse;
    font-family: var(--font-display);
}

.fin-table thead th {
    padding: 0.85rem 1.25rem;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 500;
    background: rgba(42, 31, 21, 0.05);
    text-align: left;
    border-bottom: 1px solid var(--rule);
    vertical-align: bottom;
    line-height: 1.3;
}
.fin-table thead th.is-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.fin-table tbody td {
    padding: 0.85rem 1.25rem;
    font-size: 1rem;
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
    line-height: 1.45;
    vertical-align: top;
}

.fin-table tbody td.fin-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    font-weight: 500;
    white-space: nowrap;
}

.fin-table tbody td .fin-sub {
    display: block;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--ink-muted);
    margin-top: 2px;
    font-weight: 400;
}

.fin-table tbody tr.is-section td {
    background: rgba(42, 31, 21, 0.04);
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 500;
    padding: 0.7rem 1.25rem;
    border-bottom: 1px solid var(--rule-strong);
}

.fin-table tbody tr.is-subtotal td {
    background: rgba(42, 31, 21, 0.045);
    font-weight: 500;
    border-top: 1px solid var(--rule-strong);
    font-style: italic;
}
.fin-table tbody tr.is-subtotal td.fin-num {
    color: var(--ink);
    font-weight: 600;
}

.fin-table tbody tr.is-total td {
    background: rgba(194, 83, 28, 0.07);
    font-weight: 600;
    border-top: 2px solid var(--ink);
    color: var(--ink);
    font-size: 1.08rem;
    padding: 1rem 1.25rem;
}
.fin-table tbody tr.is-total td.fin-num {
    color: var(--accent);
    font-weight: 700;
    font-size: 1.15rem;
}

.fin-table tbody tr.is-result td {
    background: var(--paper-deep);
    font-weight: 600;
    border-top: 2px solid var(--accent);
    color: var(--ink);
    font-size: 1.1rem;
    padding: 1rem 1.25rem;
}
.fin-table tbody tr.is-result td.fin-num {
    color: var(--accent);
    font-weight: 700;
    font-size: 1.18rem;
}
.fin-table tbody tr.is-result.is-positive td.fin-num { color: var(--pos); }
.fin-table tbody tr.is-result.is-negative td.fin-num { color: var(--neg); }

.fin-table tbody tr:last-child td { border-bottom: none; }

/* Cellule libellé : largeur de base proportionnelle */
.fin-table.is-2col td:first-child { width: auto; }
.fin-table.is-3col td:first-child { width: 50%; }
.fin-table.is-4col td:first-child { width: 40%; }

.fin-table caption {
    caption-side: top;
    text-align: left;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 0.5rem;
    font-weight: 500;
}

@media (max-width: 720px) {
    .fin-table { font-size: 0.92rem; }
    .fin-table thead th,
    .fin-table tbody td { padding: 0.7rem 0.85rem; }
}

/* ============================================================
   LETTRE D'INTENTION (accueil)
   Cadre éditorial fort façon lettre administrative formelle :
   entête lieu/date, adressage, objet, corps de lettre, signatures.
   ============================================================ */
.letter-block {
    background: var(--paper-warm);
    border-top: 2px solid var(--accent);
    border-bottom: 1px solid var(--rule-strong);
    padding: 2.75rem 3rem 2.25rem;
    margin: var(--gap-md) 0 var(--gap-lg);
}

.letter-block-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ink);
}

.letter-block-sender {
    text-align: left;
}
.letter-block-sender strong {
    font-weight: 600;
    color: var(--ink);
}
.letter-block-sender em {
    color: var(--ink-muted);
    font-style: italic;
}

.letter-block-addressee {
    text-align: right;
}
.letter-block-addressee em {
    color: var(--ink-muted);
    font-style: italic;
}

.letter-block-date {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--ink-muted);
    margin: 1.5rem 0 1.75rem;
    text-align: right;
    font-size: 0.92rem;
}

.letter-block-object {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 1.5rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--rule);
    font-weight: 600;
}

.letter-block-body {
    font-family: var(--font-body);
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--ink);
}
.letter-block-body p {
    margin: 0 0 1.1rem;
}
.letter-block-body p.is-salutation {
    margin-bottom: 1.5rem;
    color: var(--ink);
}
.letter-block-body strong {
    font-weight: 600;
    color: var(--ink);
}
.letter-block-body em {
    font-style: italic;
    color: var(--ink-soft);
}

.letter-block-signatures {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
}
.letter-signature {
    text-align: center;
}
.letter-signature-name {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.35rem;
    color: var(--ink);
    margin: 0 0 0.4rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.letter-signature-role {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0;
    font-weight: 500;
}

@media (max-width: 720px) {
    .letter-block { padding: 1.75rem 1.5rem; }
    .letter-block-header { grid-template-columns: 1fr; gap: 1.25rem; }
    .letter-block-addressee { text-align: left; }
    .letter-block-date { text-align: left; }
    .letter-block-signatures { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ============================================================
   LISTE DES ENGAGEMENTS (accueil)
   Liste verticale éditoriale avec gros chiffres terracotta.
   ============================================================ */
.engagement-list {
    list-style: none;
    padding: 0;
    margin: var(--gap-md) 0 var(--gap-lg);
    counter-reset: engagement;
    background: var(--paper-warm);
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--rule-strong);
}

.engagement-item {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 1.75rem;
    padding: 1.85rem 2rem;
    border-bottom: 1px solid var(--rule);
    counter-increment: engagement;
    align-items: center;
}
.engagement-item:last-child { border-bottom: none; }

.engagement-num {
    font-family: var(--font-display);
    font-size: 3.5rem;
    line-height: 1;
    color: var(--accent);
    font-weight: 400;
    text-align: center;
    position: relative;
}
.engagement-num::before {
    content: counter(engagement, decimal-leading-zero);
    font-style: italic;
}
.engagement-num::after {
    content: '';
    position: absolute;
    bottom: -0.65rem;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 1px;
    background: rgba(194, 83, 28, 0.4);
}

.engagement-content {}

.engagement-title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--ink);
    margin: 0 0 0.6rem;
    font-weight: 500;
    line-height: 1.25;
}

.engagement-desc {
    font-family: var(--font-body);
    font-size: 0.97rem;
    color: var(--ink);
    line-height: 1.6;
    margin: 0;
}
.engagement-desc strong {
    font-weight: 500;
}

@media (max-width: 720px) {
    .engagement-item {
        grid-template-columns: 1fr;
        gap: 0.85rem;
        padding: 1.5rem 1.25rem;
    }
    .engagement-num { text-align: left; font-size: 2.5rem; }
    .engagement-num::after { left: 0; transform: none; }
}

/* ============================================================
   SOMMAIRE DU DOSSIER (accueil)
   Cards-liens vers les autres pages. Réutilise le style
   .pillar-card mais en lien cliquable avec hover et indicateur.
   ============================================================ */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
    margin: var(--gap-md) 0 0;
}

.summary-card {
    background: var(--paper-warm);
    border: 1px solid var(--rule);
    padding: 1.5rem 1.5rem 1.65rem;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    position: relative;
}
.summary-card:hover {
    background: var(--paper-deep);
    border-color: var(--accent);
    transform: translateY(-2px);
}
.summary-card:hover .summary-card-arrow {
    color: var(--accent);
    transform: translateX(3px);
}

.summary-card-tag {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 500;
    margin: 0 0 0.5rem;
    position: relative;
    padding-bottom: 0.55rem;
}
.summary-card-tag::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 28px;
    height: 1px;
    background: rgba(42, 31, 21, 0.18);
}

.summary-card-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-style: italic;
    color: var(--ink);
    margin: 0 0 0.7rem;
    line-height: 1.2;
    font-weight: 500;
}

.summary-card-desc {
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--ink);
    line-height: 1.55;
    margin: 0 0 1rem;
    flex: 1;
}

.summary-card-arrow {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: 500;
    margin-top: auto;
    transition: color 0.18s ease, transform 0.18s ease;
    display: inline-block;
}

@media (max-width: 960px) {
    .summary-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .summary-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CARTE CONTACT (accueil)
   Cadre éditorial pour les coordonnées du référent dossier.
   ============================================================ */
.contact-card-v2 {
    background: var(--paper-warm);
    border-top: 2px solid var(--accent);
    border-bottom: 1px solid var(--rule-strong);
    padding: 2rem 2.5rem 2.25rem;
    margin: var(--gap-md) 0;
    text-align: center;
}
.contact-card-v2 .contact-eyebrow-v2 {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 0.85rem;
    font-weight: 500;
    position: relative;
    padding-bottom: 0.65rem;
}
.contact-card-v2 .contact-eyebrow-v2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 1px;
    background: rgba(194, 83, 28, 0.4);
}
.contact-card-v2 .contact-entity {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--ink);
    margin: 0 0 0.4rem;
    font-weight: 500;
}
.contact-card-v2 .contact-entity em {
    font-style: italic;
    color: var(--ink-muted);
    font-size: 0.95rem;
}
.contact-card-v2 .contact-person {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--ink);
    margin: 0.5rem 0 1.25rem;
    font-weight: 500;
}
.contact-card-v2 .contact-lines-v2 {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 2rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    margin: 0;
}
.contact-card-v2 .contact-lines-v2 a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(194, 83, 28, 0.3);
    padding-bottom: 1px;
    transition: border-color 0.18s ease;
}
.contact-card-v2 .contact-lines-v2 a:hover {
    border-bottom-color: var(--accent);
}

/* ============================================================
   PENDING-BLOCK — rubriques à compléter selon l'appel d'offre
   Bandeau d'avertissement / placeholder, sobre, accent terracotta
   ============================================================ */
.pending-block {
    border-left: 3px solid var(--accent);
    background: var(--paper-warm);
    padding: 1.5rem 1.75rem 1.5rem 1.5rem;
    margin: 2rem 0;
    border-radius: 0 4px 4px 0;
    position: relative;
}

.pending-block-eyebrow {
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pending-block-eyebrow::before {
    content: "◐";
    font-size: 0.95rem;
    color: var(--accent);
}

.pending-block-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 0.5rem;
    line-height: 1.25;
}

.pending-block-title em {
    font-style: italic;
    color: var(--accent);
    font-weight: 400;
}

.pending-block-text {
    font-family: var(--font-body);
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0;
}

.pending-block-text + .pending-block-text {
    margin-top: 0.5rem;
}

.pending-block strong {
    color: var(--ink);
    font-weight: 600;
}

/* Variante compacte pour signaler un point précis dans une section */
.pending-inline {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 0.2rem 0.6rem;
    border-radius: 3px;
    font-weight: 600;
    vertical-align: middle;
    margin-left: 0.5rem;
}

.pending-inline::before {
    content: "◐ ";
}