/*
 * Feuille de style de la page commerciale www.alardoise.fr, autonome et
 * volontairement hors de public/assets/site.css : ce site est statique,
 * servi par son propre vhost Caddy (voir Caddyfile), et ne partage ni le
 * moteur ni les gabarits des sites de restaurants. Palette et polices
 * viennent de la marque (brand/) et des .woff2 déjà subsettés de la flotte,
 * copiés ici : aucune requête tierce, comme partout ailleurs.
 */

@font-face {
    font-family: 'Bodoni Moda';
    src: url('/assets/bodoni-moda-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bodoni Moda';
    src: url('/assets/bodoni-moda-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('/assets/fira-sans-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('/assets/fira-sans-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --chalk: #F2EFE9;
    --slate: #2E3538;
    --ink: #2E3538;
    --ink-soft: #5A6467;
    --line: #D8D2C6;
    --font-heading: 'Bodoni Moda', 'Didot', 'Bodoni MT', serif;
    --font-body: 'Fira Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    background: var(--chalk);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
}

main {
    max-width: 42rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}

h1,
h2,
h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 0.75rem;
}

p {
    margin: 0 0 1rem;
}

a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* --- En-tête / accroche ------------------------------------------------- */

.hero {
    padding: 3.5rem 0 2.5rem;
    border-bottom: 1px solid var(--line);
}

.hero .wordmark {
    display: block;
    width: min(20rem, 70%);
    height: auto;
    margin-bottom: 2rem;
}

.hero h1 {
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    max-width: 32ch;
}

.hero .lead {
    font-size: 1.2rem;
    max-width: 46ch;
    color: var(--ink);
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.button {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    border: 2px solid var(--slate);
    border-radius: 4px;
    font-weight: 700;
    text-decoration: none;
}

.button-primary {
    background: var(--slate);
    color: var(--chalk);
}

.button-secondary {
    background: transparent;
    color: var(--slate);
}

/* --- Les trois arguments ------------------------------------------------ */

.arguments {
    padding: 2.5rem 0;
    display: grid;
    gap: 1.5rem;
    border-bottom: 1px solid var(--line);
}

@media (min-width: 44rem) {
    .arguments {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

.arguments h2 {
    font-size: 1.25rem;
}

.arguments p {
    color: var(--ink-soft);
    font-size: 0.97rem;
    margin: 0;
}

/* --- Les deux formules, sur l'ardoise ------------------------------------ */

.board-section {
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--line);
}

.board {
    background: var(--slate);
    color: var(--chalk);
    border-radius: 8px;
    padding: 2rem 1.75rem;
}

.board h2 {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}

.board > p {
    color: #C9C4B8;
    margin-bottom: 1.75rem;
}

.board a {
    color: var(--chalk);
}

.formulas {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 44rem) {
    .formulas {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

.formula {
    border-top: 1px solid rgba(242, 239, 233, 0.35);
    padding-top: 1rem;
}

.formula h3 {
    font-size: 1.2rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: var(--font-body);
    font-weight: 700;
}

.formula p {
    color: #C9C4B8;
    font-size: 0.97rem;
    margin: 0;
}

.board .included {
    margin: 1.75rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(242, 239, 233, 0.35);
    color: #C9C4B8;
    font-size: 0.92rem;
}

/* --- Qui je suis, contact ------------------------------------------------ */

.about,
.contact {
    padding: 2.5rem 0;
}

.about {
    border-bottom: 1px solid var(--line);
}

.about h2,
.contact h2 {
    font-size: 1.6rem;
}

.about p,
.contact p {
    max-width: 56ch;
}

.contact .email {
    font-size: 1.35rem;
    font-weight: 700;
    word-break: break-all;
}

/* --- Pied de page --------------------------------------------------------- */

footer {
    border-top: 1px solid var(--line);
    padding: 1.5rem 0 2.5rem;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

footer a {
    color: var(--ink-soft);
}

footer .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 0.5rem;
}

/* --- Pages légales --------------------------------------------------------- */

.legal-page {
    padding: 3rem 0 1rem;
}

.legal-page .wordmark-link {
    display: inline-block;
    margin-bottom: 2rem;
}

.legal-page .wordmark {
    width: 12rem;
    height: auto;
}

.legal-page h1 {
    font-size: 1.9rem;
}

.legal-page h2 {
    font-size: 1.25rem;
    margin-top: 2rem;
}

.legal-page .todo {
    background: #E7E1D2;
    padding: 0 0.3em;
    border-radius: 3px;
    font-style: italic;
}