/* === Template Metier/Ville Bold — Design tokens & components === */
:root {
    --color-primary:   #FF5722;
    --color-secondary: #1B1B3A;
    --color-text:      #0F0F12;
    --color-bg:        #FFF8F2;
    --font-heading: 'Space Grotesk', system-ui, sans-serif;
    --font-body: 'Inter Tight', system-ui, sans-serif;
    --line: rgba(15, 15, 18, 0.08);
    --muted: rgba(15, 15, 18, 0.55);
}

/* Base */
body { font-family: var(--font-body); color: var(--color-text); }
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    letter-spacing: -0.025em;
    line-height: 0.95;
}
h3, h4 { line-height: 1.05; }

/* Buttons */
.btn-primary {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--color-primary); color: #fff;
    font-family: var(--font-heading); font-weight: 700;
    border-radius: 999px;
    transition: transform 200ms ease, box-shadow 200ms ease;
    box-shadow: 0 12px 32px -8px color-mix(in oklab, var(--color-primary) 70%, black);
    text-decoration: none;
}
.btn-primary:hover { transform: translateY(-2px); }

.btn-secondary {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--color-secondary); color: #fff;
    font-family: var(--font-heading); font-weight: 700;
    border-radius: 999px;
    transition: transform 200ms ease;
    text-decoration: none;
}
.btn-secondary:hover { transform: translateY(-2px); }

.btn-ghost {
    display: inline-flex; align-items: center; gap: 0.5rem;
    border: 2px solid currentColor; border-radius: 999px;
    font-family: var(--font-heading); font-weight: 700;
    transition: background 200ms ease, color 200ms ease;
    text-decoration: none;
}

/* Marquee */
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.marquee-track {
    display: flex; gap: 3rem; white-space: nowrap;
    animation: marquee 40s linear infinite;
    width: max-content;
}

/* Bold card hover */
.bold-card {
    transition: transform 280ms cubic-bezier(.2,.7,.2,1), box-shadow 280ms ease;
}
.bold-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.25);
}

/* Outline display text */
.outline-display {
    -webkit-text-stroke: 2px currentColor;
    color: transparent;
    font-family: var(--font-heading);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 0.85;
}

/* Hero gradient overlay */
.hero-overlay {
    background: linear-gradient(
        135deg,
        color-mix(in oklab, var(--color-primary) 88%, black) 0%,
        color-mix(in oklab, var(--color-secondary) 92%, black) 100%
    );
}

/* Sticker / badge */
.sticker {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-heading); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    border-radius: 999px;
    transform: rotate(-6deg);
}

/* Number badge */
.num-badge {
    font-family: var(--font-heading); font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem; letter-spacing: 0.1em;
}

/* Section label */
.section-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-heading); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.14em;
    font-size: 12px;
}
.section-label::before {
    content: ""; width: 28px; height: 2px; background: currentColor;
}

/* Contenu pages */
.page-content { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.85; color: var(--color-text); }
.page-content h2 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--color-primary); margin: 2rem 0 1rem; letter-spacing: -0.025em; }
.page-content h3 { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600; color: var(--color-secondary); margin: 1.5rem 0 .75rem; letter-spacing: -0.025em; }
.page-content p { margin-bottom: 1.2rem; }
.page-content ul, .page-content ol { padding-left: 1.5rem; margin-bottom: 1.2rem; }
.page-content li { margin-bottom: .4rem; }
.page-content a { color: var(--color-primary); }
.page-content img { border-radius: 16px; margin: 1.5rem 0; }
.page-content blockquote { border-left: 4px solid var(--color-primary); padding: 1rem 1.5rem; margin: 2rem 0; font-style: italic; color: var(--muted); }

/* Images injectees sous les H2 */
.article-image-h2 { width: 100%; max-height: 360px; object-fit: cover; border-radius: 16px; margin: 1rem 0 1.5rem; }

/* Zones de contenu accueil */
.zone-content { font-family: var(--font-body); font-size: 1rem; line-height: 1.8; color: var(--color-text); }
.zone-content h2 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--color-primary); margin: 2rem 0 1rem; letter-spacing: -0.025em; }
.zone-content h3 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; margin: 1.5rem 0 .5rem; letter-spacing: -0.025em; }
.zone-content p { margin-bottom: 1rem; }
.zone-content ul, .zone-content ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.zone-content li { margin-bottom: .4rem; }
.zone-content a { color: var(--color-primary); }
.zone-content img { border-radius: 16px; margin: 1.5rem 0; }
.zone-content blockquote { border-left: 4px solid var(--color-primary); padding: 1rem 1.5rem; margin: 2rem 0; font-style: italic; color: var(--muted); }

/* Contenu articles de blog */
.article-content { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.85; color: var(--color-text); }
.article-content h2 { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 700; color: var(--color-primary); margin: 2rem 0 1rem; letter-spacing: -0.025em; }
.article-content h3 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; color: var(--color-secondary); margin: 1.5rem 0 .5rem; letter-spacing: -0.025em; }
.article-content p { margin-bottom: 1.2rem; }
.article-content ul { padding-left: 1.5rem; margin-bottom: 1.2rem; }
.article-content img { border-radius: 16px; margin: 1rem 0; }
.article-content blockquote { border-left: 4px solid var(--color-primary); padding: 1rem 1.5rem; margin: 2rem 0; font-style: italic; color: var(--muted); }

/* FAQ accordion */
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }
details[open] .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform 200ms ease; }

:root {
    --color-primary:   #000000;
    --color-secondary: #c69d59;
    --color-text:      #212529;
    --color-bg:        #ffffff;
    --color-muted:     #f7f8fa;
    --color-border:    #ebedf1;
    --color-premium:   #b8860b;
    --radius: 0;
    --card-shadow: none;
    --card-border: 1px solid var(--color-border);
    --card-bg: var(--color-bg);
    --btn-radius: 3px;
    --img-radius: 0;
}

/* ── Base responsive (généré automatiquement) ── */
*, *::before, *::after { box-sizing: border-box; }

/* Empêche le défilement horizontal */
html, body { overflow-x: hidden; max-width: 100%; }

/* Images et vidéos toujours dans leur conteneur */
img, video { max-width: 100%; height: auto; }
/* iframe : largeur 100% mais hauteur respectée (ex. Google Maps) */
iframe, embed, object { max-width: 100%; }

/* Tableaux : scroll horizontal si besoin, jamais de débordement */
table { max-width: 100%; }
.zone-content table,
.page-content table,
.article-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Texte long (URL, code) : retour à la ligne forcé */
.zone-content,
.page-content,
.article-content {
    overflow-wrap: break-word;
    word-break: break-word;
}