/* FOMEV — composants web (nomenclature Client-First)
   Chargé après tokens.css : toutes les valeurs passent par les variables des tokens.
   Les tailles fluides (clamp) interpolent entre les valeurs mobile et desktop des tokens, de 360 à 1280 px. */

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header--height-sticky) + 8px); }
body { margin: 0; background: var(--background-color--page); color: var(--text-color--primary); font-family: var(--font-sans); font-size: clamp(1.0625rem, 1.038rem + 0.109vw, 1.125rem); line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
p { max-width: var(--measure--max); }
:focus { outline: none; }
:focus-visible { outline: var(--border-width--focus) solid var(--focus--ring); outline-offset: 2px; }
.is-inverse :focus-visible, .is-inverse:focus-visible { outline-color: var(--focus--ring-inverse); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--spacing--small); top: -100px; z-index: var(--z--skip-link); background: var(--action--primary); color: var(--action--on-primary); padding: var(--spacing--xsmall-plus) var(--spacing--small-plus); border-radius: var(--radius--medium); font-weight: 600; text-decoration: none; }
.skip-link:focus-visible { top: var(--spacing--small); outline-color: var(--focus--ring-inverse); }

/* Sections inverses : on remappe les tokens sémantiques, les composants suivent */
.is-inverse {
  background: var(--background-color--inverse); color: var(--text-color--inverse);
  --text-color--primary: var(--text-color--inverse);
  --text-color--secondary: var(--text-color--inverse-muted);
  --text-color--heading: var(--text-color--inverse);
  --text-color--link: var(--text-color--link-inverse);
  --text-color--link-hover: var(--brand--ocre-lumiere);
  --border-color--subtle: var(--border-color--inverse);
  --border-color--default: var(--brand--ciel-aube);
  --focus--ring: var(--focus--ring-inverse);
}
.is-inverse.is-alt { background: var(--background-color--inverse-alt); }
.background-color-alternate { background: var(--background-color--alternate); --text-color--secondary: var(--text-color--secondary-on-tint); --text-color--link: var(--text-color--link-hover); }
.background-color-tint { background: var(--background-color--tint); --text-color--secondary: var(--text-color--secondary-on-tint); --text-color--link: var(--text-color--link-hover); }
.background-color-surface { background: var(--background-color--surface); }

/* ============ Structure Client-First ============ */
.padding-global { padding-left: var(--padding-global--mobile); padding-right: var(--padding-global--mobile); }
@media (min-width: 768px) { .padding-global { padding-left: var(--padding-global--tablet); padding-right: var(--padding-global--tablet); } }
@media (min-width: 992px) { .padding-global { padding-left: var(--padding-global--desktop); padding-right: var(--padding-global--desktop); } }
@media (min-width: 1440px) { .padding-global { padding-left: var(--spacing--huge); padding-right: var(--spacing--huge); } }
.container-large { max-width: var(--container--large); margin: 0 auto; }
.container-medium { max-width: var(--container--medium); margin: 0 auto; }
.container-small { max-width: var(--container--small); margin: 0 auto; }
.padding-section-small { padding-top: var(--spacing--medium); padding-bottom: var(--spacing--medium); }
.padding-section-medium { padding-top: var(--spacing--large); padding-bottom: var(--spacing--large); }
.padding-section-large { padding-top: var(--spacing--xlarge); padding-bottom: var(--spacing--xlarge); }
@media (min-width: 992px) {
  .padding-section-small { padding-top: var(--spacing--large); padding-bottom: var(--spacing--large); }
  .padding-section-medium { padding-top: var(--spacing--xxlarge); padding-bottom: var(--spacing--xxlarge); }
  .padding-section-large { padding-top: var(--spacing--xhuge); padding-bottom: var(--spacing--xhuge); }
}
.grid-12 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter--mobile); }
@media (min-width: 768px) { .grid-12 { grid-template-columns: repeat(8, 1fr); gap: var(--gutter--tablet); } }
@media (min-width: 992px) { .grid-12 { grid-template-columns: repeat(12, 1fr); gap: var(--gutter--desktop); } }

/* ============ Typographie fluide ============ */
.display { font-family: var(--font-serif); font-weight: 600; font-size: clamp(2.5rem, 1.913rem + 2.609vw, 4rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--text-color--heading); text-wrap: balance; }
.heading-style-h1, h1 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(2.25rem, 1.761rem + 2.174vw, 3.5rem); line-height: 1.15; color: var(--text-color--heading); text-wrap: balance; }
.heading-style-h2, h2 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.75rem, 1.457rem + 1.304vw, 2.5rem); line-height: 1.2; color: var(--text-color--heading); text-wrap: balance; }
.heading-style-h3, h3 { font-family: var(--font-sans); font-weight: 600; font-size: clamp(1.25rem, 1.152rem + 0.435vw, 1.5rem); line-height: 1.35; color: var(--text-color--primary); }
.heading-style-h4, h4 { font-family: var(--font-sans); font-weight: 600; font-size: clamp(1.125rem, 1.076rem + 0.217vw, 1.25rem); line-height: 1.4; color: var(--text-color--primary); }
.heading-style-h5, h5 { font-family: var(--font-sans); font-weight: 600; font-size: 1.125rem; line-height: 1.45; }
.heading-style-h6, h6 { font-family: var(--font-sans); font-weight: 700; font-size: 1rem; line-height: 1.5; }
.text-size-lead { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.1875rem, 1.114rem + 0.326vw, 1.375rem); line-height: 1.45; }
.text-size-large { font-size: clamp(1.0625rem, 1.038rem + 0.109vw, 1.125rem); line-height: 1.55; }
.text-size-regular { font-size: 1rem; line-height: 1.5; }
.text-size-small { font-size: 0.875rem; line-height: 1.43; }
.text-style-label { font-family: var(--font-sans); font-size: 0.875rem; line-height: 1.43; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.text-style-caption { font-size: 0.875rem; line-height: 1.43; font-style: italic; color: var(--text-color--secondary); }
.text-color-secondary { color: var(--text-color--secondary); }
.text-link, .text-rich-text a { color: var(--text-color--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color var(--duration--fast) var(--ease--out); }
.text-link:hover, .text-rich-text a:hover { color: var(--text-color--link-hover); text-decoration-thickness: 2px; }
.text-link.is-standalone { display: inline-flex; align-items: center; gap: var(--spacing--xxsmall); font-weight: 600; min-height: var(--target--min); }
.text-link .icon { width: var(--icon--small); height: var(--icon--small); }
.icon { width: var(--icon--medium); height: var(--icon--medium); flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ============ Boutons ============ */
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing--xsmall); min-height: var(--target--min); padding: var(--spacing--xsmall-plus) var(--spacing--small-plus); border: var(--border-width--strong) solid var(--action--primary); border-radius: var(--radius--medium); background: var(--action--primary); color: var(--action--on-primary); font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.4; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color var(--duration--fast) var(--ease--out), border-color var(--duration--fast) var(--ease--out), color var(--duration--fast) var(--ease--out); }
.button:hover { background: var(--action--primary-hover); border-color: var(--action--primary-hover); }
.button:active { background: var(--action--primary-active); border-color: var(--action--primary-active); }
.button.is-accent { background: var(--action--accent); border-color: var(--action--accent); color: var(--action--on-accent); }
.button.is-accent:hover { background: var(--action--accent-hover); border-color: var(--action--accent-hover); }
.button.is-accent:active { background: var(--action--accent-active); border-color: var(--action--accent-active); }
.button.is-secondary { background: transparent; border-color: var(--action--secondary-border); color: var(--action--secondary-border); }
.button.is-secondary:hover { background: var(--action--secondary-hover); }
.is-inverse .button:not(.is-accent):not(.is-secondary) { background: var(--brand--blanc); border-color: var(--brand--blanc); color: var(--brand--bleu-fleuve); }
.is-inverse .button:not(.is-accent):not(.is-secondary):hover { background: var(--brand--ciel-aube); border-color: var(--brand--ciel-aube); }
.is-inverse .button.is-secondary { border-color: var(--brand--blanc); color: var(--brand--blanc); }
.is-inverse .button.is-secondary:hover { background: rgba(255, 255, 255, 0.12); }
.button.is-text { background: transparent; border-color: transparent; color: var(--text-color--link); padding-left: var(--spacing--xsmall); padding-right: var(--spacing--xsmall); text-decoration: underline; text-underline-offset: 0.18em; }
.button.is-text:hover { color: var(--text-color--link-hover); background: transparent; }
.button.is-small { min-height: var(--target--min); padding: var(--spacing--xsmall) var(--spacing--small); font-size: 1rem; }
.button.is-icon { padding: 0; width: var(--target--min); }
.button .icon { width: 20px; height: 20px; }
.button:disabled, .button[aria-disabled="true"] { background: var(--action--disabled); border-color: var(--action--disabled); color: var(--text-color--disabled); cursor: not-allowed; }
.button[aria-busy="true"] { cursor: progress; }
.button[aria-busy="true"] .spinner { display: inline-block; }
.spinner { display: none; width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--radius--round); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.button-group { display: flex; flex-wrap: wrap; gap: var(--spacing--small); align-items: center; }

/* ============ Étiquettes de mission, badges ============ */
.mission-tag { display: inline-flex; align-items: center; gap: var(--spacing--xsmall); font-family: var(--font-sans); font-size: 0.875rem; line-height: 1; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-color--primary); }
.mission-tag::before { content: ""; width: 4px; height: 1.1em; background: var(--mission-color, var(--mission--soutenir)); }
.mission-tag.is-soutenir { --mission-color: var(--mission--soutenir); }
.mission-tag.is-faire-connaitre { --mission-color: var(--mission--faire-connaitre); }
.mission-tag.is-mobiliser { --mission-color: var(--mission--mobiliser); }
.is-inverse .mission-tag.is-mobiliser::before { background: var(--swatch--laterite-300); }
.badge { display: inline-flex; align-items: center; gap: var(--spacing--xxsmall); padding: var(--spacing--xxsmall) var(--spacing--xsmall); border: var(--border-width--hairline) solid var(--border-color--default); border-radius: var(--radius--small); font-size: 0.875rem; line-height: 1.3; font-weight: 600; color: var(--text-color--primary); background: var(--background-color--surface); }
.badge.is-validation { background: var(--feedback--warning-surface); border-color: var(--feedback--warning-text); color: var(--feedback--warning-text); }
.badge.is-info { background: var(--feedback--info-surface); border-color: var(--feedback--info-text); color: var(--feedback--info-text); }
.badge.is-neutral { background: var(--background-color--alternate); border-color: transparent; }

/* ============ Formulaires ============ */
.form_field { display: grid; gap: var(--spacing--xxsmall); max-width: 32rem; }
.form_label { font-size: 1rem; line-height: 1.5; font-weight: 600; color: var(--text-color--primary); }
.form_label .is-required { color: var(--feedback--error-text); margin-left: 2px; }
.form_help { font-size: 0.875rem; line-height: 1.43; color: var(--text-color--secondary); }
.form_input, .form_select, .form_textarea { width: 100%; min-height: var(--target--min); padding: var(--spacing--xsmall-plus) var(--spacing--small); font: inherit; font-size: 1rem; line-height: 1.5; color: var(--text-color--primary); background: var(--background-color--surface); border: var(--border-width--control) solid var(--border-color--default); border-radius: var(--radius--medium); transition: border-color var(--duration--fast) var(--ease--out); }
.form_textarea { min-height: 8rem; resize: vertical; }
.form_select { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231e1f1d' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.form_input:hover, .form_select:hover, .form_textarea:hover { border-color: var(--border-color--strong); }
.form_input::placeholder, .form_textarea::placeholder { color: var(--text-color--secondary); }
.form_input:disabled, .form_select:disabled, .form_textarea:disabled { background: var(--background-color--disabled); color: var(--text-color--disabled); cursor: not-allowed; }
.form_field.is-error .form_input, .form_field.is-error .form_select, .form_field.is-error .form_textarea { border-color: var(--feedback--error-text); border-width: var(--border-width--strong); }
.form_message { display: flex; gap: var(--spacing--xxsmall); align-items: flex-start; font-size: 0.875rem; line-height: 1.43; font-weight: 600; }
.form_message .icon { width: 18px; height: 18px; margin-top: 1px; }
.form_message.is-error { color: var(--feedback--error-text); }
.form_message.is-success { color: var(--feedback--success-text); }
.form_choice { display: flex; gap: var(--spacing--xsmall-plus); align-items: flex-start; min-height: var(--target--min); padding: var(--spacing--xsmall) 0; cursor: pointer; font-size: 1rem; line-height: 1.5; }
.form_choice input { appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border: var(--border-width--control) solid var(--border-color--default); background: var(--background-color--surface); border-radius: var(--radius--small); display: grid; place-content: center; cursor: pointer; }
.form_choice input[type="radio"] { border-radius: var(--radius--round); }
.form_choice input:checked { background: var(--action--primary); border-color: var(--action--primary); }
.form_choice input[type="checkbox"]:checked::after { content: ""; width: 12px; height: 7px; border-left: 2px solid var(--action--on-primary); border-bottom: 2px solid var(--action--on-primary); transform: translateY(-2px) rotate(-45deg); }
.form_choice input[type="radio"]:checked { background: var(--background-color--surface); }
.form_choice input[type="radio"]:checked::after { content: ""; width: 12px; height: 12px; border-radius: var(--radius--round); background: var(--action--primary); }
.form_choice input:disabled { background: var(--background-color--disabled); cursor: not-allowed; }
.form_choice input:checked:disabled { background: var(--swatch--neutral-500); border-color: var(--swatch--neutral-500); }
fieldset.form_fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--spacing--xxsmall); }
fieldset.form_fieldset legend { padding: 0; margin-bottom: var(--spacing--xxsmall); font-weight: 600; }

/* Recherche */
.search_component { display: flex; max-width: 40rem; }
.search_input { flex: 1; min-height: 52px; padding: var(--spacing--xsmall-plus) var(--spacing--small) var(--spacing--xsmall-plus) 48px; font: inherit; font-size: 1.0625rem; color: var(--text-color--primary); border: var(--border-width--control) solid var(--border-color--default); border-right: 0; border-radius: var(--radius--medium) 0 0 var(--radius--medium); background: var(--background-color--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%236b675f' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 14px center; }
.search_input::placeholder { color: var(--text-color--secondary); }
.search_component .button { border-radius: 0 var(--radius--medium) var(--radius--medium) 0; min-height: 52px; }

/* ============ Navigation secondaire ============ */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing--xxsmall); list-style: none; margin: 0; padding: 0; font-size: 0.875rem; line-height: 1.43; color: var(--text-color--secondary); }
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--spacing--xxsmall); }
.breadcrumb li + li::before { content: "/"; color: var(--text-color--secondary); }
.breadcrumb a { color: var(--text-color--link); text-underline-offset: 0.18em; display: inline-flex; min-height: 24px; align-items: center; }
.breadcrumb [aria-current="page"] { color: var(--text-color--primary); font-weight: 600; }
.pagination { display: flex; flex-wrap: wrap; gap: var(--spacing--xxsmall); list-style: none; margin: 0; padding: 0; align-items: center; }
.pagination a, .pagination span { display: inline-grid; place-items: center; min-width: var(--target--min); min-height: var(--target--min); padding: 0 var(--spacing--xsmall-plus); border: var(--border-width--hairline) solid var(--border-color--subtle); border-radius: var(--radius--medium); color: var(--text-color--primary); text-decoration: none; font-weight: 600; background: var(--background-color--surface); }
.pagination a:hover { border-color: var(--border-color--strong); }
.pagination [aria-current="page"] { background: var(--action--primary); color: var(--action--on-primary); border-color: var(--action--primary); }
.pagination .is-disabled { color: var(--text-color--disabled); background: var(--background-color--disabled); }
.tabs_list { display: flex; gap: var(--spacing--medium); border-bottom: var(--border-width--hairline) solid var(--border-color--strong); overflow-x: auto; }
.tabs_tab { appearance: none; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; padding: var(--spacing--xsmall-plus) 0; min-height: var(--target--min); font: inherit; font-weight: 600; color: var(--text-color--secondary); cursor: pointer; white-space: nowrap; }
.tabs_tab:hover { color: var(--text-color--primary); }
.tabs_tab[aria-selected="true"] { color: var(--text-color--heading); border-bottom-color: var(--brand--bleu-fleuve); }
.tabs_panel { padding-top: var(--spacing--small-plus); }
.accordion_item { border-bottom: var(--border-width--hairline) solid var(--border-color--strong); }
.accordion_item:first-child { border-top: var(--border-width--hairline) solid var(--border-color--strong); }
.accordion_trigger { appearance: none; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--spacing--small); padding: var(--spacing--small) 0; min-height: var(--target--min); background: none; border: 0; font: inherit; font-weight: 600; font-size: 1.0625rem; text-align: left; color: var(--text-color--primary); cursor: pointer; }
.accordion_trigger .icon { transition: transform var(--duration--base) var(--ease--out); }
.accordion_trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }
.accordion_panel { padding: 0 0 var(--spacing--small-plus); color: var(--text-color--primary); }
.accordion_panel[hidden] { display: none; }

/* ============ Feedback ============ */
.alert { display: grid; grid-template-columns: auto 1fr; gap: var(--spacing--xsmall-plus); padding: var(--spacing--small) var(--spacing--small-plus); border: var(--border-width--hairline) solid currentColor; border-radius: var(--radius--medium); font-size: 1rem; line-height: 1.5; }
.alert strong { display: block; }
.alert p { color: var(--text-color--primary); }
.alert.is-info { background: var(--feedback--info-surface); color: var(--feedback--info-text); }
.alert.is-success { background: var(--feedback--success-surface); color: var(--feedback--success-text); }
.alert.is-warning { background: var(--feedback--warning-surface); color: var(--feedback--warning-text); }
.alert.is-error { background: var(--feedback--error-surface); color: var(--feedback--error-text); }
.empty-state { display: grid; gap: var(--spacing--small); justify-items: start; padding: var(--spacing--large) var(--spacing--medium); border: var(--border-width--hairline) dashed var(--border-color--default); border-radius: var(--radius--medium); background: var(--background-color--surface); }
/* Pas de dégradé (charte) : pulsation d’opacité */
.skeleton { background: var(--swatch--neutral-200); border-radius: var(--radius--small); animation: pulse 1.6s var(--ease--in-out) infinite; }
@keyframes pulse { 50% { opacity: 0.5; } }

/* ============ Cartes ============ */
.card { display: flex; flex-direction: column; background: var(--background-color--surface); border: var(--border-width--hairline) solid var(--border-color--subtle); border-radius: var(--radius--none); color: var(--text-color--primary); position: relative; }
.card.is-mission-bar { border-top: var(--border-width--mission-bar) solid var(--mission-color, var(--brand--bleu-fleuve)); }
.card.is-soutenir { --mission-color: var(--mission--soutenir); }
.card.is-faire-connaitre { --mission-color: var(--mission--faire-connaitre); }
.card.is-mobiliser { --mission-color: var(--mission--mobiliser); }
.card_image { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; background: var(--background-color--alternate); }
.card_image.is-4x5 { aspect-ratio: 4 / 5; }
.card_image.is-16x9 { aspect-ratio: 16 / 9; }
.card_body { display: grid; gap: var(--spacing--xsmall-plus); padding: var(--spacing--small-plus); flex: 1; align-content: start; }
.card_meta { display: flex; flex-wrap: wrap; gap: var(--spacing--xsmall) var(--spacing--small); font-size: 0.875rem; line-height: 1.43; color: var(--text-color--secondary); }
.card_meta span { display: inline-flex; align-items: center; gap: var(--spacing--xxsmall); }
.card_meta .icon { width: var(--icon--small); height: var(--icon--small); }
.card_title { font-family: var(--font-sans); font-weight: 600; font-size: 1.25rem; line-height: 1.4; }
.card_title a { color: inherit; text-decoration: none; }
.card_title a::after { content: ""; position: absolute; inset: 0; }
.card:has(.card_title a:hover) { border-color: var(--border-color--default); }
.card:has(.card_title a:hover) .card_title { text-decoration: underline; text-underline-offset: 0.18em; }
.card:has(a:focus-visible) { outline: var(--border-width--focus) solid var(--focus--ring); outline-offset: 2px; }
.card a:focus-visible { outline: none; }
.card_footer { padding: 0 var(--spacing--small-plus) var(--spacing--small-plus); }
.card-mission { padding: var(--spacing--medium); display: grid; gap: var(--spacing--small); align-content: start; min-height: 100%; border: 0; }
.card-mission.is-soutenir { background: var(--mission--soutenir); color: var(--action--on-accent); }
.card-mission.is-faire-connaitre { background: var(--mission--faire-connaitre); color: var(--text-color--inverse); }
.card-mission.is-mobiliser { background: var(--mission--mobiliser); color: var(--text-color--inverse); }
.card-mission_number { font-family: var(--font-serif); font-weight: 600; font-size: 3rem; line-height: 1; }
.card-mission_title { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.75rem, 1.457rem + 1.304vw, 2.25rem); line-height: 1.15; color: inherit; }
.card-mission_date { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-top: auto; }
.card-mission a { color: inherit; font-weight: 600; text-underline-offset: 0.18em; display: inline-flex; align-items: center; gap: var(--spacing--xxsmall); min-height: var(--target--min); }
.card-mission a:focus-visible { outline-color: var(--brand--encre); }
.card-mission.is-faire-connaitre a:focus-visible, .card-mission.is-mobiliser a:focus-visible { outline-color: var(--brand--blanc); }
.card-event_date { display: grid; place-items: center; align-content: center; width: 72px; min-height: 72px; background: var(--brand--bleu-fleuve); color: var(--brand--blanc); text-align: center; flex: none; }
.card-event_day { font-family: var(--font-serif); font-weight: 600; font-size: 1.75rem; line-height: 1; }
.card-event_month { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.card-team_portrait { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; background: var(--background-color--alternate); display: grid; place-items: center; color: var(--text-color--secondary); font-size: 0.875rem; text-align: center; padding: var(--spacing--small); }
.card-resource_format { display: inline-flex; align-items: center; gap: var(--spacing--xxsmall); font-size: 0.875rem; font-weight: 600; color: var(--text-color--heading); }
.placeholder-media { display: grid; place-items: center; text-align: center; padding: var(--spacing--small); background: var(--background-color--alternate); color: var(--text-color--secondary-on-tint); font-size: 0.875rem; line-height: 1.43; }

/* ============ Blocs éditoriaux ============ */
.stat { display: grid; gap: var(--spacing--xxsmall); padding-top: var(--spacing--small); border-top: var(--border-width--hairline) solid var(--border-color--strong); }
.stat_value { font-family: var(--font-serif); font-weight: 600; font-size: clamp(2.25rem, 1.957rem + 1.304vw, 3rem); line-height: 1.05; color: var(--text-color--heading); font-variant-numeric: tabular-nums; }
.stat_label { font-size: 1rem; line-height: 1.5; color: var(--text-color--primary); }
.stat_source { font-size: 0.875rem; color: var(--text-color--secondary); }
.is-inverse .stat_value { color: var(--text-color--accent-inverse); }
.quote { display: grid; gap: var(--spacing--small); margin: 0; padding: var(--spacing--medium); }
.quote_mark { font-family: var(--font-serif); font-weight: 600; font-size: 4rem; line-height: 0.6; color: var(--brand--laterite); }
.is-inverse .quote_mark { color: var(--brand--ocre-lumiere); }
.quote_text { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.375rem, 1.228rem + 0.652vw, 1.75rem); line-height: 1.38; max-width: 36ch; }
.quote_author { font-size: 0.875rem; line-height: 1.43; color: var(--text-color--secondary); font-style: normal; }
.quote_author strong { color: var(--text-color--primary); display: block; font-size: 1rem; }
.cta-band { position: relative; overflow: hidden; }
.cta-band_content { position: relative; z-index: 1; display: grid; gap: var(--spacing--small-plus); max-width: 44rem; }
.cta-band { padding-bottom: 152px; }
@media (min-width: 992px) { .cta-band { padding-bottom: var(--spacing--xxlarge); } .cta-band_content { max-width: min(44rem, 58%); } }
.eyebrow { font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand--fleuve-moyen); }
.background-color-alternate .eyebrow, .background-color-tint .eyebrow { color: var(--brand--bleu-fleuve); }
.is-inverse .eyebrow { color: var(--text-color--accent-inverse); }
.hero { position: relative; overflow: hidden; }
.hero_content { position: relative; z-index: 1; display: grid; gap: var(--spacing--small-plus); max-width: 46rem; }
.hero { padding-bottom: 172px; }
@media (min-width: 992px) { .hero { padding-bottom: var(--spacing--xhuge); } .hero_content { max-width: min(46rem, 58%); } }
.hero.is-inverse .display { color: var(--text-color--inverse); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing--small-plus); position: relative; }
.timeline_item { display: grid; grid-template-columns: 24px 1fr; gap: var(--spacing--small); position: relative; }
.timeline_item::before { content: ""; position: absolute; left: 11px; top: 20px; bottom: calc(-1 * var(--spacing--small-plus)); width: 2px; background: var(--brand--bleu-fleuve); }
.timeline_item:last-child::before { display: none; }
.timeline_dot { width: 12px; height: 12px; margin: 6px; border-radius: var(--radius--round); background: var(--brand--bleu-fleuve); }
.timeline_item.is-impulse .timeline_dot { width: 20px; height: 20px; margin: 2px; background: var(--brand--laterite); }
.timeline_date { font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem; line-height: 1.3; color: var(--text-color--heading); }
.timeline_item.is-impulse .timeline_date { color: var(--brand--laterite); }
@media (min-width: 992px) {
  .timeline.is-horizontal { grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--spacing--small); padding-top: 28px; }
  .timeline.is-horizontal::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--brand--bleu-fleuve); }
  .timeline.is-horizontal .timeline_item { grid-template-columns: 1fr; }
  .timeline.is-horizontal .timeline_item::before { display: none; }
  .timeline.is-horizontal .timeline_dot { position: absolute; top: -28px; left: 0; margin: 6px 0; }
  .timeline.is-horizontal .timeline_item.is-impulse .timeline_dot { top: -32px; margin: 2px 0; }
}
.table_wrapper { overflow-x: auto; border: var(--border-width--hairline) solid var(--border-color--subtle); background: var(--background-color--surface); }
.table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.5; }
.table caption { text-align: left; padding: var(--spacing--small); font-weight: 600; }
.table th { text-align: left; font-weight: 700; color: var(--text-color--heading); border-bottom: var(--border-width--strong) solid var(--brand--bleu-fleuve); padding: var(--spacing--xsmall-plus) var(--spacing--small); white-space: nowrap; }
.table td { border-bottom: var(--border-width--hairline) solid var(--border-color--subtle); padding: var(--spacing--xsmall-plus) var(--spacing--small); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table .is-numeric { text-align: right; font-variant-numeric: tabular-nums; }

/* ============ Logo ============ */
.logo_link { display: inline-block; line-height: 0; padding: var(--logo--clearspace); margin: calc(-1 * var(--logo--clearspace)); }
.logo_image { width: var(--logo--width-header); height: auto; }

/* ============ En-tête ============ */
.header_component { background: var(--nav--background); border-bottom: var(--border-width--hairline) solid var(--border-color--strong); }
.header_topbar { background: var(--nav--topbar); border-bottom: var(--border-width--hairline) solid var(--border-color--subtle); font-size: 0.875rem; }
.header_topbar-inner { display: flex; justify-content: flex-end; align-items: center; gap: var(--spacing--small-plus); min-height: var(--header--height-topbar); }
.header_topbar a { color: var(--text-color--primary); text-decoration: none; display: inline-flex; align-items: center; gap: var(--spacing--xxsmall); min-height: var(--header--height-topbar); }
.header_topbar a:hover { text-decoration: underline; }
.header_topbar .icon { width: var(--icon--small); height: var(--icon--small); }
.header_main { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing--medium); padding: var(--spacing--small) 0; }
.header_actions { display: flex; align-items: center; gap: var(--spacing--xsmall-plus); }
.header_nav { border-top: var(--border-width--hairline) solid var(--border-color--subtle); }
.nav_list { display: flex; gap: var(--spacing--medium); list-style: none; margin: 0; padding: 0; }
.nav_item { position: relative; }
.nav_link { display: inline-flex; align-items: center; gap: var(--spacing--xxsmall); min-height: 56px; padding: 0; background: none; border: 0; border-bottom: 3px solid transparent; font: inherit; font-size: 1.0625rem; font-weight: 600; color: var(--nav--link); text-decoration: none; cursor: pointer; }
.nav_link:hover { color: var(--nav--link-current); border-bottom-color: var(--border-color--subtle); }
.nav_link[aria-current="page"], .nav_link.is-current { color: var(--nav--link-current); border-bottom-color: var(--nav--link-current); }
.nav_link .icon { width: 18px; height: 18px; transition: transform var(--duration--base) var(--ease--out); }
.nav_link[aria-expanded="true"] .icon { transform: rotate(180deg); }
.nav_dropdown { position: absolute; top: 100%; left: calc(-1 * var(--spacing--small)); min-width: 300px; z-index: var(--z--dropdown); background: var(--background-color--surface); border: var(--border-width--hairline) solid var(--border-color--strong); border-radius: 0 0 var(--radius--medium) var(--radius--medium); box-shadow: var(--shadow--overlay); padding: var(--spacing--xsmall) 0; list-style: none; margin: 0; }
.nav_dropdown[hidden] { display: none; }
.nav_dropdown a { display: flex; align-items: center; min-height: var(--target--min); padding: var(--spacing--xsmall) var(--spacing--small); color: var(--text-color--primary); text-decoration: none; }
.nav_dropdown a:hover { background: var(--background-color--page); color: var(--text-color--heading); text-decoration: underline; }
.lang-switch { display: inline-flex; border: var(--border-width--hairline) solid var(--border-color--default); border-radius: var(--radius--medium); overflow: hidden; }
.lang-switch a { display: inline-grid; place-items: center; min-width: var(--target--min); min-height: 32px; font-weight: 600; font-size: 0.875rem; color: var(--text-color--primary); text-decoration: none; }
.lang-switch a[aria-current="true"] { background: var(--action--primary); color: var(--action--on-primary); }
.lang-switch a:not([aria-current="true"]):hover { background: var(--action--secondary-hover); }
.is-inverse .lang-switch a[aria-current="true"] { background: var(--brand--blanc); color: var(--brand--bleu-fleuve); }
.header_sticky { position: sticky; top: 0; z-index: var(--z--sticky); background: var(--nav--background); border-bottom: var(--border-width--hairline) solid var(--border-color--strong); }
.header_sticky-inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--header--height-sticky); gap: var(--spacing--medium); }

/* Tiroir mobile */
.drawer_scrim { position: absolute; inset: 0; background: var(--overlay--scrim); z-index: var(--z--drawer); }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 360px); z-index: calc(var(--z--drawer) + 1); background: var(--background-color--surface); display: flex; flex-direction: column; overflow-y: auto; }
.drawer_head { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing--xsmall) var(--spacing--small); border-bottom: var(--border-width--hairline) solid var(--border-color--strong); min-height: 64px; }
.drawer_list { list-style: none; margin: 0; padding: var(--spacing--xsmall) 0; }
.drawer_list a, .drawer_list button { display: flex; width: 100%; justify-content: space-between; align-items: center; min-height: 52px; padding: var(--spacing--xsmall) var(--spacing--small); font: inherit; font-weight: 600; font-size: 1.0625rem; color: var(--text-color--primary); background: none; border: 0; border-bottom: var(--border-width--hairline) solid var(--border-color--subtle); text-decoration: none; text-align: left; cursor: pointer; }
.drawer_foot { margin-top: auto; padding: var(--spacing--small); display: grid; gap: var(--spacing--xsmall-plus); border-top: var(--border-width--hairline) solid var(--border-color--strong); background: var(--background-color--page); }
.drawer_foot .button { width: 100%; }

/* ============ Pied de page ============ */
.footer_component { background: var(--background-color--inverse); color: var(--text-color--inverse); }
.footer_grid { display: grid; gap: var(--spacing--large); grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer_grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .footer_grid { grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--spacing--medium); } }
.footer_title { font-family: var(--font-sans); font-weight: 700; font-size: 1rem; line-height: 1.5; color: var(--text-color--inverse); margin-bottom: var(--spacing--xsmall); }
.footer_list { list-style: none; margin: 0; padding: 0; display: grid; }
.footer_list a { color: var(--text-color--inverse); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--target--min); }
.footer_list a:hover { text-decoration: underline; text-underline-offset: 0.18em; color: var(--brand--ocre-lumiere); }
.footer_text { color: var(--text-color--inverse-muted); font-size: 1rem; line-height: 1.5; }
.footer_legal { background: var(--background-color--inverse-alt); color: var(--text-color--inverse-muted); font-size: 0.875rem; }
.footer_legal-inner { display: flex; flex-wrap: wrap; gap: var(--spacing--xsmall) var(--spacing--small-plus); align-items: center; justify-content: space-between; padding: var(--spacing--small) 0; }
.footer_legal a { color: var(--text-color--inverse); text-underline-offset: 0.18em; display: inline-flex; align-items: center; min-height: var(--target--min); }

/* ============ Consentement ============ */
.consent_banner { background: var(--background-color--surface); border-top: var(--border-width--strong) solid var(--brand--bleu-fleuve); box-shadow: var(--shadow--overlay); padding: var(--spacing--small-plus); display: grid; gap: var(--spacing--small); z-index: var(--z--consent); }
@media (min-width: 992px) { .consent_banner { grid-template-columns: 1fr auto; align-items: center; } }
.consent_actions { display: flex; flex-wrap: wrap; gap: var(--spacing--xsmall-plus); }
.modal_scrim { position: absolute; inset: 0; background: var(--overlay--scrim); display: grid; place-items: center; padding: var(--spacing--small); z-index: var(--z--modal); }
.modal { width: min(100%, 560px); max-height: 100%; overflow-y: auto; background: var(--background-color--surface); border-radius: var(--radius--medium); box-shadow: var(--shadow--overlay); }
.modal_head { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing--small); padding: var(--spacing--small) var(--spacing--small-plus); border-bottom: var(--border-width--hairline) solid var(--border-color--strong); }
.modal_body { padding: var(--spacing--small-plus); display: grid; gap: var(--spacing--small); }
.modal_foot { padding: var(--spacing--small) var(--spacing--small-plus); border-top: var(--border-width--hairline) solid var(--border-color--subtle); display: flex; flex-wrap: wrap; gap: var(--spacing--xsmall-plus); justify-content: flex-end; }
.consent_row { display: grid; grid-template-columns: 1fr auto; gap: var(--spacing--xsmall) var(--spacing--small); padding: var(--spacing--small) 0; border-bottom: var(--border-width--hairline) solid var(--border-color--subtle); align-items: start; }

/* Vidéo externe avant consentement */
.video-consent { position: relative; aspect-ratio: 16 / 9; background: var(--background-color--inverse); color: var(--text-color--inverse); display: grid; place-items: center; text-align: center; padding: var(--spacing--small-plus); }
.video-consent_content { display: grid; gap: var(--spacing--small); justify-items: center; max-width: 30rem; }

/* ============ Don (à valider) ============ */
.amount_group { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing--xsmall); }
@media (min-width: 480px) { .amount_group { grid-template-columns: repeat(4, 1fr); } }
.amount_option { position: relative; }
.amount_option input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.amount_option span { display: grid; place-items: center; min-height: 52px; border: var(--border-width--control) solid var(--border-color--default); border-radius: var(--radius--medium); font-weight: 600; font-size: 1.125rem; background: var(--background-color--surface); font-variant-numeric: tabular-nums; }
.amount_option input:checked + span { background: var(--action--primary); border-color: var(--action--primary); color: var(--action--on-primary); }
.amount_option input:focus-visible + span { outline: var(--border-width--focus) solid var(--focus--ring); outline-offset: 2px; }
.segmented { justify-self: start; display: inline-flex; border: var(--border-width--control) solid var(--border-color--default); border-radius: var(--radius--medium); overflow: hidden; }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmented span { display: grid; place-items: center; min-height: var(--target--min); padding: 0 var(--spacing--small); font-weight: 600; }
.segmented input:checked + span { background: var(--action--primary); color: var(--action--on-primary); }
.segmented input:focus-visible + span { outline: var(--border-width--focus) solid var(--focus--ring); outline-offset: -5px; }

/* ============ Motif « point d’impulsion » ============ */
/* SVG à l’échelle 1:1 (e = 4 px, point Ø 16 px) ; les lignes sortent du cadre, coupées par le overflow du parent.
   Mobile : point en bas à gauche, ligne la plus verticale masquée pour ne jamais croiser le texte. */
.impulse { position: absolute; left: var(--spacing--small); bottom: -8px; width: 600px; height: 400px; overflow: visible; pointer-events: none; z-index: 0; }
.impulse .impulse_line:first-of-type { display: none; }
@media (min-width: 992px) { .hero .impulse, .cta-band .impulse { left: 62%; bottom: 0; } .impulse .impulse_line:first-of-type { display: inline; } }
.impulse_line { fill: none; stroke: var(--brand--ocre-lumiere); stroke-width: 4; stroke-linecap: round; }
.impulse_point { fill: var(--brand--ocre-lumiere); }
.impulse.is-on-light .impulse_line { stroke: var(--brand--bleu-fleuve); }
.impulse.is-on-light .impulse_point { fill: var(--brand--laterite); }
.impulse.is-animated .impulse_point { transform-box: fill-box; transform-origin: center; animation: impulse-point var(--duration--base) var(--ease--out) both; }
.impulse.is-animated .impulse_line { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: impulse-line var(--duration--trajectory) var(--ease--in-out) var(--duration--base) forwards; }
@keyframes impulse-point { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes impulse-line { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .impulse.is-animated .impulse_line { stroke-dashoffset: 0; }
  .skeleton { animation: none; }
}
@media (forced-colors: active) {
  .button, .badge, .form_input, .form_select, .form_textarea, .card { border-color: CanvasText; }
  .mission-tag::before { background: CanvasText; }
}

/* ============ Don par virement ============ */
.transfer_list { margin: 0; display: grid; border-top: var(--border-width--hairline) solid var(--border-color--strong); }
.transfer_row { display: grid; gap: var(--spacing--xxsmall); padding: var(--spacing--xsmall-plus) 0; border-bottom: var(--border-width--hairline) solid var(--border-color--subtle); }
@media (min-width: 768px) { .transfer_row { grid-template-columns: 14rem 1fr; align-items: center; } }
.transfer_row dt { font-weight: 600; color: var(--text-color--primary); }
.transfer_row dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing--xsmall); }
.transfer_row .is-numeric { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.transfer_grid { display: grid; gap: var(--spacing--small); }
@media (min-width: 768px) { .transfer_grid { grid-template-columns: 1fr 1fr; } }