/* Cobelay — Socle PHP : styles structurels des composants du socle.
 * Consomme exclusivement les variables du thème (theme.css, compilé depuis
 * les tokens DTCG) avec des fallbacks sobres. Dans un vrai projet, le design
 * pack remplace/complète cette feuille — les classes .cbl-* sont le contrat. */

/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    font-family: var(--typography-body-font-family, system-ui, sans-serif);
    font-size: var(--typography-body-font-size, 1rem);
    line-height: var(--typography-body-line-height, 1.6);
    color: var(--color-text, #1c232b);
    background: var(--color-neutral-0, #fff);
}
h1, h2, h3, h4 {
    font-family: var(--typography-heading-font-family, inherit);
    font-weight: var(--typography-heading-font-weight, 700);
    line-height: var(--typography-heading-line-height, 1.2);
}
img { max-width: 100%; height: auto; }
a { color: var(--color-primary, #2f6b46); }

.cbl-main { min-height: 60vh; }

/* ---- Header / navigation ------------------------------------------------- */
.cbl-header { border-bottom: 1px solid var(--color-neutral-100, #f1f4f0); }
.cbl-header__inner {
    max-width: 1080px; margin: 0 auto;
    padding: var(--spacing-sm, 1rem);
    display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm, 1rem);
    flex-wrap: wrap;
}
.cbl-header__brand {
    font-weight: var(--typography-heading-font-weight, 700);
    font-size: 1.25rem; text-decoration: none;
    color: var(--color-primary, #2f6b46);
}
.cbl-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--spacing-sm, 1rem); flex-wrap: wrap; }
.cbl-nav a { text-decoration: none; color: var(--color-text, #1c232b); }
.cbl-nav a:hover { color: var(--color-primary, #2f6b46); text-decoration: underline; }

/* ---- Flashs --------------------------------------------------------------- */
.cbl-flashes { max-width: 1080px; margin: var(--spacing-sm, 1rem) auto 0; padding: 0 var(--spacing-sm, 1rem); }
.cbl-flash { padding: .75rem 1rem; border-radius: var(--radius-sm, 6px); margin: 0 0 .5rem; }
.cbl-flash--success { background: #e5f3e9; color: #1d5a30; border: 1px solid #bfe3ca; }
.cbl-flash--error   { background: #fdeceb; color: #8a1f17; border: 1px solid #f6c9c5; }
.cbl-flash--info    { background: var(--color-neutral-100, #f1f4f0); color: var(--color-neutral-700, #3e4c59); }

/* ---- Bloc hero ------------------------------------------------------------ */
.cbl-hero { padding: var(--spacing-lg, 4rem) var(--spacing-sm, 1rem); background: var(--color-surface, #f1f4f0); }
.cbl-hero--compact { padding: var(--spacing-md, 2rem) var(--spacing-sm, 1rem); }
.cbl-hero__inner {
    max-width: 1080px; margin: 0 auto;
    display: flex; align-items: center; gap: var(--spacing-md, 2rem); flex-wrap: wrap;
}
.cbl-hero__text { flex: 1 1 380px; }
.cbl-hero__title { margin: 0 0 var(--spacing-xs, .5rem); font-size: clamp(1.75rem, 4vw, 2.75rem); }
.cbl-hero__subtitle { margin: 0; font-size: 1.125rem; color: var(--color-neutral-700, #3e4c59); }
.cbl-hero__image { flex: 0 1 320px; border-radius: var(--radius-md, 12px); }

/* ---- Bloc rich_text ------------------------------------------------------- */
.cbl-richtext { max-width: 720px; margin: 0 auto; padding: var(--spacing-md, 2rem) var(--spacing-sm, 1rem); }
.cbl-richtext--narrow { max-width: 560px; }
.cbl-richtext h2 { margin-top: 0; }

/* ---- Bloc image ----------------------------------------------------------- */
.cbl-image { max-width: 1080px; margin: 0 auto; padding: 0 var(--spacing-sm, 1rem) var(--spacing-md, 2rem); }
.cbl-image--full { max-width: none; padding: 0; }
.cbl-image img { display: block; width: 100%; border-radius: var(--radius-md, 12px); }
.cbl-image--full img { border-radius: 0; }
.cbl-image figcaption { margin-top: var(--spacing-xs, .5rem); font-size: .875rem; color: var(--color-neutral-700, #3e4c59); }

/* ---- Bloc form_embed / formulaires ---------------------------------------- */
.cbl-form { max-width: 720px; margin: 0 auto; padding: var(--spacing-md, 2rem) var(--spacing-sm, 1rem); }
.cbl-form--narrow { max-width: 560px; }
.cbl-form__intro { color: var(--color-neutral-700, #3e4c59); }
.cbl-form__field { margin-bottom: var(--spacing-sm, 1rem); }
.cbl-form__field label { display: block; font-weight: 600; margin-bottom: .25rem; }
.cbl-form__field input[type="text"],
.cbl-form__field input[type="email"],
.cbl-form__field select,
.cbl-form__field textarea {
    width: 100%; padding: .625rem .75rem;
    border: 1px solid var(--color-neutral-700, #3e4c59); border-radius: var(--radius-sm, 6px);
    font: inherit; background: var(--color-neutral-0, #fff); color: inherit;
}
.cbl-form__field input:focus-visible,
.cbl-form__field select:focus-visible,
.cbl-form__field textarea:focus-visible {
    outline: 2px solid var(--color-primary, #2f6b46); outline-offset: 1px;
}
.cbl-form__check { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400 !important; }
.cbl-form__check input { margin-top: .3rem; }
.cbl-form__req { color: #8a1f17; }
.cbl-form__field--error input,
.cbl-form__field--error select,
.cbl-form__field--error textarea { border-color: #8a1f17; }
.cbl-form__error { margin: .25rem 0 0; font-size: .875rem; color: #8a1f17; }

.cbl-btn {
    display: inline-block; padding: .7rem 1.5rem; border: 0; cursor: pointer;
    border-radius: var(--radius-sm, 6px); font: inherit; font-weight: 600;
}
.cbl-btn--primary { background: var(--color-primary, #2f6b46); color: var(--color-neutral-0, #fff); }
.cbl-btn--primary:hover { background: var(--color-primary-deep, #245236); }

/* Honeypot : hors écran pour les humains, présent pour les bots. */
.cbl-hp { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; }

/* ---- Footer ---------------------------------------------------------------- */
.cbl-footer { border-top: 1px solid var(--color-neutral-100, #f1f4f0); margin-top: var(--spacing-lg, 4rem); }
.cbl-footer__inner {
    max-width: 1080px; margin: 0 auto; padding: var(--spacing-md, 2rem) var(--spacing-sm, 1rem);
    display: flex; justify-content: space-between; gap: var(--spacing-sm, 1rem); flex-wrap: wrap;
    color: var(--color-neutral-700, #3e4c59); font-size: .9rem;
}
.cbl-footer__copy { margin: 0; }