@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap");

/* ── VARIABLES ── */
:root {
    --bg: #f7f4ef;
    --ink: #1a1714;
    --muted: #7a7368;
    --accent: #c85a2a;
    --accent-strong: #e0692f;
    --accent-soft: #f0a080;
    --accent-light: #f0e8e0;
    --border: #ddd8d0;
    --white: #fefcfa;
    --ink-rgb: 26, 23, 20;
    --muted-rgb: 122, 115, 104;
    --white-rgb: 251, 248, 243;
    --container-narrow: 760px;
    --serif: "DM Serif Display", Georgia, serif;
    --sans: "DM Sans", sans-serif;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --selection-bg: #e8c8bb;
    --selection-ink: #1a1714;
}

body.dark {
    --bg: #16130f;
    --ink: #f0ece6;
    --muted: #9a9088;
    --accent: #e06830;
    --accent-strong: #f07840;
    --accent-soft: #a04820;
    --accent-light: #2a1f18;
    --border: #2e2820;
    --white: #1e1a16;
    --ink-rgb: 240, 236, 230;
    --muted-rgb: 154, 144, 136;
    --white-rgb: 30, 26, 22;
    --container-narrow: 760px;
    --serif: "DM Serif Display", Georgia, serif;
    --sans: "DM Sans", sans-serif;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --selection-bg: #6a3724;
    --selection-ink: #f0ece6;
}

/* ── RESET ── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

html {
    scroll-behavior: smooth;
}

::selection {
    background: var(--selection-bg);
    color: var(--selection-ink);
}

::-moz-selection {
    background: var(--selection-bg);
    color: var(--selection-ink);
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 300;
    line-height: 1.6;
    font-size: 16px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main#content {
    flex: 1;
}

a {
    color: var(--accent);
    text-decoration: underline;
}

/* ── NAV ── */
nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    background: var(--bg);
    border-bottom: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    padding: 0 1.5rem;
}

.nav-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
}

.nav-logo {
    font-family: var(--serif);
    font-size: 1.2rem;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: center;
}

.nav-logo span {
    color: var(--accent);
}

.nav-logo img {
    margin-right: 8px;
    height: 1.5em;
}

/* Ensure footer logo matches header logo sizing so visuals remain identical
   when moving inline styles into CSS.
   NOTE: About-page specific selectors (about-story, side-card, values, etc.)
   have been moved to /css/pages/a-propos.css. Home-only components were moved to
   /css/pages/home.css. Form-specific rules were moved to /css/pages/contact.css.
   Global CSS now focuses on shared variables, header/footer, utilities and
   components used on 2+ pages to keep the file smaller and more maintainable.
*/
.footer-logo img {
    height: 1.5em;
}

/* Utility class for small, muted inline text moved from page markup.
   Use `.text-small-muted` on elements that previously used:
     style="font-size: 0.75rem; color: var(--muted); margin-top: 1.5rem"
   This centralises the style without changing visuals.
*/
.text-small-muted {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 1.5rem;
}

/* Utility for in-content accent links.
   Use `.link-accent` where an inline link previously used `style="color: var(--accent)"`
   to keep markup clean and visuals identical.
*/
.link-accent {
    color: var(--accent);
    text-decoration: none;
}

/* Button utilities shared across pages:
   - .btn-full: reusable full-width button helper (replaces inline width rules)
   - .btn-accent: accent-colored button variant used on pricing and other CTA buttons
   Moving these here reduces duplication and keeps consistent appearance across pages.
*/
.btn-full {
    width: 100%;
    text-align: center;
    display: block;
}

.btn-accent {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--ink);
    cursor: pointer;
}

.nav-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.nav-toggle-lines,
.nav-toggle-lines::before,
.nav-toggle-lines::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease,
        background-color 0.2s ease;
    content: "";
}

.nav-toggle-lines {
    position: relative;
}

.nav-toggle-lines::before {
    position: absolute;
    top: -6px;
    left: 0;
}

.nav-toggle-lines::after {
    position: absolute;
    top: 6px;
    left: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-lines {
    background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-lines::before {
    transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-lines::after {
    transform: translateY(-6px) rotate(-45deg);
}

.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    padding: 0.25rem 0;
    transition:
        border-color 0.4s ease,
        background-color 0.4s ease;
}

.nav-links a:not(.nav-cta) {
    border-bottom: 2px solid transparent;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--ink);
}

.nav-links a[aria-current="page"],
.nav-links a.active {
    color: var(--accent);
    border-color: var(--accent);
}

.nav-cta {
    background: var(--ink);
    color: var(--white) !important;
    padding: 0.55rem 1.2rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
}

.nav-links a.nav-cta {
    padding: 0.55rem 1.2rem;
}

.nav-cta:hover {
    background: var(--accent) !important;
}

/* ── LAYOUT ── */
main {
    padding-top: 64px;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2.5rem;
}

.container--narrow {
    max-width: var(--container-narrow);
    margin-left: auto;
    margin-right: auto;
}

.container--center {
    text-align: center;
}

section {
    padding: 5rem 0;
}

/* Top-level sections inside the main content alternate background colors
   and receive a bottom border except for the last section. This provides
   a consistent rhythm between sections and centralises the rule so pages
   don't need to duplicate these styles.

   Implementation notes:
   - We target top-level children of `main#content` to avoid affecting nested sections.
   - Alternation uses :nth-of-type so sections visually alternate between a white
     surface and the site background color.
   - Pages can override the section surface by setting `--section-bg` or by using
     the helper class `.section-surface` (useful for explicit per-section control).
*/

/* Helper class: let pages opt a section into a specific surface value.
   Example:
     <section class="section-surface" style="--section-surface: var(--white)">...</section>
   This sets the internal token used by the global section rules so pages can
   declaratively select their surface without duplicating background logic.
*/
.section-surface {
    /* pages can set --section-surface inline or via page CSS; default to white */
    --section-surface: var(--white);
}

/* Convenience helpers for common, explicit section semantics:
   - .section--surface-white: explicitly force a white surface for this section
   - .section--surface-bg: explicitly force the site background for this section
   - .section--separated: opt a section into having the standard separator (bottom border)
   These reduce repetition in page CSS and make it easy to mark a section's surface
   or separator behavior in HTML/fragment markup.
*/
.section--surface-white {
    --section-surface: var(--white);
}

.section--surface-bg {
    --section-surface: var(--bg);
}

/* Opt-in helper to explicitly add the separator on a section.
   Useful when a page wants a separator but global stacking rules might remove it. */
.section--separated {
    border-bottom: 2px solid var(--border);
}

/* Keep a gentle separator for top-level sections. Pages may opt-out with
   `border-bottom: none` on a specific section if needed. */
main#content > section {
    /* spacing remains controlled by `section { padding: ... }` above */
    border-bottom: 2px solid var(--border);
}

/* Remove bottom border on the last top-level section so there's no double border
   before the footer (or end of content). */
main#content section:last-of-type {
    border-bottom: none;
}

/* Edge-case overrides and preservation rules:
   - Some page styles (per-page CSS) may still add a border-top to particular
     sections (e.g. `.how`). To avoid interfering with the global alternation
     and separators, explicitly neutralise the .how section's top border here.
     We use !important to ensure this global intent wins even if a fragment
     stylesheet adds a border later (fragments load after global.css).
   - Ensure the `.values` block keeps its intended vertical padding even if
     page DOM changes affected specificity.
*/
main#content > section.how,
main#content section.how,
.how {
    border-top: none !important;
}

/* Force-preserve values padding (page expects this spacing). If a page wants
   different spacing it can still override this in its page CSS. */
main#content .values,
.values {
    padding: 3.5rem 0 !important;
}

/* ── GLOBAL SECTION STYLING ──
   Apply consistent separators and alternating backgrounds between sections
   inside the main content area. These defaults are conservative and easy to
   override from a page-specific stylesheet by setting the custom property
   `--section-bg` or by applying `.section-surface` together with `--section-surface`.
*/
main#content section {
    /* default token for section surface (pages can override) */
    --section-bg: transparent;
    /* If a section uses .section-surface, the page can set --section-surface
       and we use that as the visual surface. Fallback to --section-bg if not set. */
    background: var(--section-surface, var(--section-bg));
}

/* Alternate backgrounds between top-level sections so they visually alternate
   between the site background and a white surface. Pages may override either
   `--section-bg` or `--section-surface` as needed. */
/* Inverted alternation: the very first (top) section uses the site background
   and the next section uses the surface (soft white). This makes the page top
   visually rest on the page background and alternates from there. */
main#content section:nth-of-type(odd) {
    --section-bg: var(--bg);
}

main#content section:nth-of-type(even) {
    --section-bg: var(--white);
}

/* Add a thin separator under every section except the last one.
   Page-specific CSS can opt-out with `border-bottom: none` or override
   `border-bottom` directly. */
main#content section:not(:last-of-type) {
    border-bottom: 2px solid var(--border);
}

h3 {
    font-family: var(--serif);
    font-size: 1.3rem;
    margin: 0.6rem 0;
    letter-spacing: -0.01em;
}

/* ── TYPOGRAPHY HELPERS ── */
.section-tag {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.8rem;
}

.section-title {
    font-family: var(--serif);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.section-sub {
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 3rem;
}

/* ── BUTTONS ── */
.btn {
    display: inline-block;
    text-decoration: none;
    font-family: var(--sans);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.8rem 1.8rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 2px solid transparent;
}

.btn-primary {
    background: var(--ink);
    color: var(--white);
    border-color: var(--ink);
}

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

/* ── HERO ── */
.hero {
    padding: 7rem 0 5rem;
}

.hero-inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero h1 {
    font-family: var(--serif);
    /* Normalized h1 size across pages: use the smaller clamp so all pages
       (home, tarifs, contact, a-propos) share the same headline scale by default. */
    font-size: clamp(1.8rem, 4.5vw, 2.8rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}

.hero h1 em {
    font-style: italic;
    color: var(--accent);
}

/* Optional modifier: large hero variant (not applied by default).
   Use this when a page needs a distinctly larger hero, for example:
     <section class="hero hero--large">...</section>
*/
.hero--large {
    /* larger top padding for visual emphasis */
    padding-top: 8.5rem;
}
.hero--large h1 {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
}

.hero p {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

.hero-visual {
    display: flex;
    justify-content: center;
}

/* Home-only components have been moved to css/pages/home.css
   (proof, cards, hero-card stats, mini-bar, pills, how/steps, etc.)
   Keeping global.css focused on shared, cross-page styles and variables.
*/

/* ── FORM ELEMENTS (moved to css/pages/contact.css) ──
   The form-related rules previously present here were relocated to
   `css/pages/contact.css` to keep global.css focused on shared, cross-page styles.
   They include .form-group, .form-row, .form-submit, .form-note, placeholder and focus rules,
   and the inline character counter styles.
*/

/* ── FOOTER ── */
footer {
    border-top: 2px solid var(--border);
    padding: 1.5rem 0;
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.footer-logo {
    font-family: var(--serif);
    font-size: 1rem;
    color: var(--ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.footer-logo span {
    color: var(--accent);
}

.footer-logo img {
    margin-right: 0.5rem;
}

.footer-copy {
    font-size: 0.78rem;
    color: var(--muted);
}

.footer-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3rem;
    flex-wrap: wrap;
}

.footer-legal-links {
    display: flex;
    gap: 2rem;
    flex-wrap: nowrap;
    margin-bottom: 0;
}

.footer-legal-link {
    display: inline-block;
    text-decoration: none;
    color: var(--ink);
    font-size: 0.875rem;
    border-bottom: 2px solid transparent;
}

.footer-legal-link:hover,
.footer-legal-link.active {
    color: var(--accent);
    border-color: var(--accent);
}

/* ── FADE IN ── */
.fade-in {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .hero-visual {
        display: none;
    }

    .cards-grid {
        grid-template-columns: 1fr;
    }

    .steps {
        grid-template-columns: 1fr 1fr;
    }

    nav {
        padding: 0 1.5rem;
    }

    .nav-links {
        gap: 1rem;
    }

    .container {
        padding: 0 1.5rem;
    }

    .footer-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-meta {
        width: 100%;
        justify-content: space-between;
        gap: 1rem 2rem;
    }

    .footer-legal-links {
        gap: 1rem 1.5rem;
        flex-wrap: wrap;
    }
}

@media (max-width: 580px) {
    nav {
        height: auto;
        min-height: 64px;
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }

    .nav-inner {
        flex-wrap: wrap;
        align-items: center;
        row-gap: 0;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .nav-links {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        border-top: 2px solid transparent;
        margin-top: 0;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transform: none;
        transition: none;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links a {
        display: block;
        width: 100%;
        padding: 0.9rem 0.2rem;
    }

    .nav-links a:not(.nav-cta) {
        border-bottom: none;
    }

    .nav-links a[aria-current="page"],
    .nav-links a.active {
        border-color: transparent;
    }

    .nav-links a.nav-cta {
        margin-top: 0.25rem;
        text-align: center;
    }

    .nav-links.is-open {
        gap: 0.35rem;
        padding: 1rem 0 0.35rem;
        border-top-color: var(--border);
        margin-top: 0.75rem;
        max-height: 320px;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .steps {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    footer {
        padding: 1.75rem 0 2rem;
    }

    .footer-inner {
        gap: 1.25rem;
    }

    .footer-logo {
        font-size: 1.05rem;
    }

    .footer-meta {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0.85rem;
    }

    .footer-legal-links {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.75rem 1rem;
    }

    .footer-legal-link {
        font-size: 0.82rem;
    }

    .footer-copy {
        font-size: 0.75rem;
        line-height: 1.5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fade-in {
        transition: none;
        opacity: 1;
        transform: none;
    }

    .nav-links {
        transition: none;
        transform: none;
    }

    .mini-bar-fill {
        animation: none;
        width: 78%;
    }
}

@keyframes pageOut {
    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

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

#content.page-exit {
    animation: pageOut 0.18s ease forwards;
}

#content.page-enter {
    animation: pageIn 0.25s ease forwards;
}