/* ===========================================================================
   BASE — tokens + éléments
   Tokens sur :root (préfixés, sans collision avec l'admin) : grid.css, dé-scopé,
   en a besoin hors du wrapper. Les styles d'éléments sont scopés sous
   .canopee-theme pour ne jamais toucher l'interface de Concrete.
   =========================================================================== */

:root {
    /* Couleurs */
    --c-forest: #00502F;
    --c-forest-dark: #003D24;
    --c-cream: #F3F1EA;
    --c-sage: #9DCAB2;
    --c-sage-100: #DCEBE2;
    --c-sage-50: #E4EEE6;
    --c-sage-ink: #0E3B26;
    --c-foliage-bg: #DDE9E0;
    --c-foliage-1: #BCD8C7;
    --c-foliage-2: #C9E0D2;
    --c-ink: #2B2A26;
    --c-ink-soft: #4A4842;
    --c-label: #2F4A3A;
    --c-rule: #D6D1C2;
    --c-sun: #F6791E;
    --c-sun-dark: #B04E0A;

    /* Rôles */
    --bg: var(--c-cream);
    --ink: var(--c-ink);
    --muted: var(--c-ink-soft);
    --accent: var(--c-forest);
    --on-accent: var(--c-cream);
    --surface: var(--c-cream);
    --surface-2: var(--c-sage-50);
    --green: var(--c-forest);
    --focus: var(--c-sun-dark);

    /* Typographie */
    --ff-display: 'Newsreader', Georgia, 'Times New Roman', serif;
    --ff-text: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;

    --fs-label: 0.8125rem;   /* 13 */
    --fs-small: 0.875rem;    /* 14 */
    --fs-ui: 1rem;           /* 16 */
    --fs-nav: 1.0625rem;     /* 17 */
    --fs-body: 1.125rem;     /* 18 */
    --fs-lead: 1.3125rem;    /* 21 */
    --fs-h3: 1.4375rem;      /* 23 */
    --fs-card-name: 1.5625rem; /* 25 */
    --fs-quote: 1.625rem;    /* 26 */
    --fs-h2: clamp(1.625rem, 1.3rem + 1vw, 2rem);            /* 26 → 32 */
    --fs-h1: clamp(2.75rem, 1.6rem + 4.2vw, 4.5rem);         /* 44 → 72 */
    --fs-h1-hero: clamp(3rem, 1.4rem + 5.6vw, 5.5rem);       /* 48 → 88 */

    --lh-tight: 1.02;
    --lh-heading: 1.2;
    --lh-body: 1.65;

    --measure: 66ch;

    /* Espacements */
    --space-3xs: 0.25rem;  /* 4 */
    --space-2xs: 0.5rem;   /* 8 */
    --space-xs: 0.75rem;   /* 12 */
    --space-s: 1rem;       /* 16 */
    --space-m: 1.5rem;     /* 24 */
    --space-l: 2rem;       /* 32 */
    --space-xl: 3rem;      /* 48 */
    --space-2xl: clamp(3.5rem, 2.5rem + 3vw, 6rem);    /* → 96 */
    --space-3xl: clamp(4rem, 2.5rem + 4.5vw, 7.5rem);  /* → 120 */

    --site-outer-margin: clamp(1.25rem, 0.5rem + 3vw, 2.5rem); /* 20 → 40 */
    --content-max: 70rem;                                       /* 1120 + marges = 1200 */
    --section-py: var(--space-2xl);
    --section-px: var(--site-outer-margin);
    --grid-gutter: var(--space-l);

    /* Formes */
    --radius-pill: 999px;
    --radius-card: 28px;

    /* Mouvement */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-reveal: 500ms;

    /* Échelle de z-index */
    --z-base: 1;
    --z-sticky: 100;
    --z-dropdown: 200;
    --z-backdrop: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-tooltip: 600;
}

body { margin: 0; }

.canopee-theme {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--ff-text);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.canopee-theme *,
.canopee-theme *::before,
.canopee-theme *::after { box-sizing: border-box; }

.canopee-theme :where(h1, h2, h3, h4) {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 400;
    line-height: var(--lh-heading);
    color: var(--accent);
    text-wrap: balance;
}

.canopee-theme :where(p, ul, ol, blockquote, figure) { margin: 0; }
.canopee-theme :where(p) { text-wrap: pretty; }

.canopee-theme :where(img, svg, video) { display: block; max-width: 100%; height: auto; }

.canopee-theme :where(a) {
    color: var(--accent);
    text-underline-offset: 3px;
}
.canopee-theme :where(a:hover) { color: var(--c-forest-dark); }

.canopee-theme :where(a, button, [tabindex]):focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

.canopee-theme :where(strong, b) { font-weight: 600; }

.canopee-theme ::selection { background: var(--c-sage-100); color: var(--c-ink); }

/* ---------------------------------------------------------------------------
   TEXTE ÉDITORIAL — uniquement les balises proposées par l'éditeur (CKEditor) :
   h1–h4, p, listes, citation, liens, gras / italique, filet, tableau, image.
   S'applique au block Contenu du core comme aux champs de texte riche des
   blocks maison (.bilingual__body, .rich-text__body). Les composants qui ont
   leurs propres classes l'emportent (sélecteurs :where, spécificité minimale).
--------------------------------------------------------------------------- */
.canopee-theme :where(#main) :where(h1) {
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
}
.canopee-theme :where(#main) :where(h2) {
    font-size: var(--fs-h2);
    font-weight: 500;
    line-height: 1.2;
}
.canopee-theme :where(#main) :where(h3) {
    font-size: var(--fs-h3);
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
}
.canopee-theme :where(#main) :where(h4) {
    font-family: var(--ff-text);
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
}

/* Rythme vertical entre les éléments d'un texte */
.canopee-theme :where(.prose, .rich-text__body, .bilingual__body, #main > .layout-container, .grid__col, .section-block__inner) > :where(p, ul, ol, blockquote, table, hr, figure, img, h1, h2, h3, h4) + :where(p, ul, ol, blockquote, table, hr, figure, img) {
    margin-top: 1em;
}
.canopee-theme :where(.prose, .rich-text__body, .bilingual__body, #main > .layout-container, .grid__col, .section-block__inner) > :where(p, ul, ol, blockquote, table, figure, img) + :where(h1, h2, h3, h4) {
    margin-top: 1.6em;
}
.canopee-theme :where(.prose, .rich-text__body, .bilingual__body, #main > .layout-container, .grid__col, .section-block__inner) > :where(h1, h2, h3, h4) + :where(h1, h2, h3, h4) {
    margin-top: 0.5em;
}
.canopee-theme :where(.prose, .rich-text__body, .bilingual__body, #main > .layout-container, .grid__col, .section-block__inner) > :where(h1, h2, h3, h4) + :where(p, ul, ol, blockquote, table, figure) {
    margin-top: 0.6em;
}

.canopee-theme :where(#main) :where(p, li) { max-width: var(--measure); }
.canopee-theme :where(#main) :where(ul, ol) {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding-left: 1.2em;
}
.canopee-theme :where(#main) :where(li)::marker { color: var(--accent); }
.canopee-theme :where(#main) :where(p, li) :where(a) {
    color: var(--accent);
    text-decoration-color: var(--c-sun);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.canopee-theme :where(#main) :where(blockquote) {
    margin: 1.5em 0;
    padding-left: var(--space-l);
    border-left: 2px solid var(--c-sage);
    font-family: var(--ff-display);
    font-size: var(--fs-quote);
    font-style: italic;
    line-height: 1.4;
    color: var(--accent);
    text-wrap: balance;
}
.canopee-theme :where(#main) :where(blockquote) :where(p) { font-size: inherit; line-height: inherit; }
.canopee-theme :where(#main) :where(hr) {
    margin: 2em 0;
    border: 0;
    border-top: 1px solid var(--c-rule);
}
.canopee-theme :where(#main) :where(table) {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-ui);
}
.canopee-theme :where(#main) :where(th, td) {
    padding: 10px 12px;
    border-bottom: 1px solid var(--c-rule);
    text-align: left;
    vertical-align: top;
}
.canopee-theme :where(#main) :where(th) { font-weight: 600; color: var(--c-label); }
.canopee-theme :where(#main) :where(p, li, figure) :where(img) { border-radius: 12px; }

/* Style « Chapô » du menu Styles de l'éditeur */
.canopee-theme .lead {
    font-size: var(--fs-lead);
    line-height: 1.55;
}

/* Conteneur de mise en page (aussi émis par la grille Concrete) */
.canopee-theme .layout-container {
    width: min(100% - 2 * var(--site-outer-margin), var(--content-max));
    margin-inline: auto;
}
.canopee-theme .layout-container--flush { width: 100%; }
.canopee-theme .layout-container--narrow { max-width: calc(var(--measure) + 4rem); }

/* Accessibilité */
.canopee-theme .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.canopee-theme .skip-link {
    position: absolute;
    left: var(--space-s);
    top: -100px;
    z-index: var(--z-tooltip);
    padding: var(--space-2xs) var(--space-s);
    border-radius: var(--radius-pill);
    background: var(--c-cream);
    color: var(--c-forest);
    font-weight: 600;
}
.canopee-theme .skip-link:focus { top: var(--space-s); }

@media (prefers-reduced-motion: reduce) {
    .canopee-theme *,
    .canopee-theme *::before,
    .canopee-theme *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}