/* =========================================================
   Charles Cuisine — Homepage
   "Le carnet-menu" — bistrot menu sur carnet personnel
   Dépend de paper.css pour tokens / reset / nav / footer.
   ========================================================= */

/* ---------- Masthead ---------- */
.masthead {
    max-width: var(--w-page);
    margin: 0 auto;
    padding: clamp(var(--s-xl), 8vw, var(--s-3xl)) var(--s-md) var(--s-xl);
    text-align: center;
    position: relative;
}

.rubric {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-sm);
    flex-wrap: wrap;
    font-family: var(--ff-sans);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: clamp(var(--s-lg), 5vw, var(--s-xl));
}

.rubric-sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ink-faint);
}

.rubric-stamp {
    display: inline-flex;
    align-items: center;
    gap: 0.15em;
    color: var(--rouge);
    font-weight: 700;
    font-family: var(--ff-sans);
    padding: 0.25em 0.55em;
    border: 1.5px solid currentColor;
    border-radius: 1px;
    transform: rotate(-2deg);
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
}

.wordmark {
    font-family: var(--ff-serif);
    font-weight: 600;
    font-size: clamp(4rem, 17vw, 11rem);
    line-height: 0.88;
    letter-spacing: -0.035em;
    color: var(--ink);
}

.wordmark em {
    display: block;
    font-weight: 500;
    color: var(--ink);
    font-style: italic;
}

/* Variante : wordmark en logo image (brush + grotesque) */
.wordmark-logo {
    margin: 0 auto;
    color: var(--rouge);
}

.wordmark-logo img {
    display: block;
    margin: 0 auto;
    width: clamp(280px, 55vw, 600px);
    height: auto;
}

.tagline {
    margin-top: var(--s-lg);
    font-family: var(--ff-serif);
    font-size: clamp(1.0625rem, 2vw, 1.25rem);
    color: var(--ink-soft);
    letter-spacing: 0.01em;
}

.tagline em { font-style: italic; color: var(--ink); }

.masthead-rule {
    margin: clamp(var(--s-xl), 6vw, var(--s-2xl)) auto 0;
    max-width: 120px;
    height: 1px;
    background: var(--ink);
    opacity: 0.25;
}

/* Mobile : resserre le masthead, empile la rubric pour éviter le bullet orphelin */
@media (max-width: 640px) {
    .masthead {
        padding: var(--s-lg) var(--s-md) var(--s-md);
    }
    .rubric {
        flex-direction: column;
        gap: var(--s-2xs);
        margin-bottom: var(--s-lg);
    }
    .rubric-sep { display: none; }
    .tagline { margin-top: var(--s-md); }
    .masthead-rule { margin-top: var(--s-md); }
}

/* ---------- Éditorial ---------- */
.edito {
    max-width: var(--w-narrow);
    margin: 0 auto;
    padding: var(--s-2xl) var(--s-md) var(--s-xl);
    text-align: center;
}

.edito p {
    font-family: var(--ff-serif);
    font-style: italic;
    font-size: clamp(1.25rem, 2.2vw, 1.625rem);
    line-height: 1.45;
    color: var(--ink);
    text-wrap: balance;
}

.edito-sign {
    margin-top: var(--s-md);
    font-family: var(--ff-hand);
    font-size: 1.625rem;
    font-style: normal;
    color: var(--rouge);
    transform: rotate(-3deg);
    display: inline-block;
}

/* ---------- Suggestion du moment (wrapper ; card stylée via components.css) ---------- */
.suggestion {
    max-width: var(--w-page);
    margin: 0 auto;
    padding: var(--s-xl) var(--s-md) var(--s-2xl);
}

/* ---------- Le menu (de saison) ---------- */
.menu {
    background: var(--paper-warm);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: clamp(var(--s-2xl), 8vw, var(--s-3xl)) 0;
}

.menu-inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--s-md);
}

.menu-head {
    text-align: center;
    margin-bottom: clamp(var(--s-2xl), 6vw, var(--s-3xl));
}

.menu-head h2,
.cl-head h2 {
    font-family: var(--ff-serif);
    font-size: clamp(2.75rem, 8vw, 5rem);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.025em;
    font-style: italic;
}

.menu-head .sub,
.cl-head .sub {
    margin-top: var(--s-md);
    font-family: var(--ff-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.menu-head .sub-rule,
.cl-head .sub-rule {
    display: inline-block;
    width: 32px;
    height: 1px;
    background: var(--ink-faint);
    vertical-align: middle;
    margin: 0 var(--s-sm);
}

.menu-empty {
    text-align: center;
    font-family: var(--ff-serif);
    font-style: italic;
    font-size: 1.125rem;
    color: var(--ink-soft);
    padding: var(--s-2xl) 0;
}

/* ---------- Les classiques ---------- */
.classiques {
    padding: clamp(var(--s-2xl), 8vw, var(--s-3xl)) 0;
}

.classiques[hidden] { display: none; }

.cl-inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--s-md);
}

.cl-head {
    text-align: center;
    margin-bottom: clamp(var(--s-xl), 5vw, var(--s-2xl));
}

.cl-list {
    display: flex;
    flex-direction: column;
    border-top: 1.5px solid var(--ink);
    border-bottom: 1.5px solid var(--ink);
}

.cl-item {
    border-bottom: 1px dashed color-mix(in srgb, var(--ink) 15%, transparent);
    transition: background 0.3s var(--ease-out);
}

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

.cl-item:hover {
    background: color-mix(in srgb, var(--rouge) 5%, transparent);
}

.cl-item a {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: baseline;
    gap: 0 var(--s-sm);
    padding: var(--s-sm) var(--s-xs);
}

.cl-dish {
    font-family: var(--ff-serif);
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1.2;
    color: var(--ink);
    transition: color 0.3s var(--ease-out);
}

.cl-item:hover .cl-dish { color: var(--rouge); }

.cl-leader {
    align-self: baseline;
    height: 0.6em;
    border-bottom: 2px dotted var(--ink-faint);
    min-width: var(--s-xs);
    transform: translateY(-0.22em);
    opacity: 0.7;
    transition: border-color 0.3s var(--ease-out);
}

.cl-item:hover .cl-leader { border-bottom-color: var(--rouge); }

.cl-time {
    font-family: var(--ff-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.cl-cat {
    font-family: var(--ff-sans);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
    padding-left: var(--s-sm);
}

@media (max-width: 560px) {
    .cl-item a { grid-template-columns: 1fr auto; gap: 2px var(--s-sm); }
    .cl-dish { grid-column: 1 / -1; }
    .cl-leader { display: none; }
    .cl-time { grid-column: 1; justify-self: start; font-size: 0.75rem; }
    .cl-cat { grid-column: 2; justify-self: end; padding-left: 0; }
}

/* ---------- À propos ---------- */
.about {
    max-width: var(--w-narrow);
    margin: 0 auto;
    padding: clamp(var(--s-2xl), 8vw, var(--s-3xl)) var(--s-md);
    position: relative;
}

.about-label {
    font-family: var(--ff-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: var(--s-md);
    display: inline-flex;
    align-items: center;
    gap: var(--s-sm);
}

.about-label::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--rouge);
}

.about h2 {
    font-family: var(--ff-serif);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: var(--s-lg);
    font-style: italic;
    text-wrap: balance;
}

.about-body {
    font-family: var(--ff-serif);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ink);
    max-width: 62ch;
}

.about-body p + p { margin-top: var(--s-md); }

.margin-note {
    font-family: var(--ff-hand);
    font-size: 1.5rem;
    color: var(--rouge);
    line-height: 1.15;
    transform: rotate(-3deg);
    display: inline-block;
    margin-top: var(--s-lg);
}

.margin-note::before { content: '↳ '; opacity: 0.7; }