/* ==========================================================================
   Gandhi International — Main Stylesheet
   Style guide: docs/guide-de-style.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
    /* Color palette */
    --color-nav-bg: #2C2C2C;
    --color-accent: #E8A317;
    --color-accent-hover: #D4940F;
    --color-content-bg: #FFFFFF;
    --color-text: #222222;
    --color-text-on-dark: #E8E8E6;
    --color-border: #E2E2DE;
    --color-page-bg: #F5F5F5;

    /* Error / feedback states */
    --color-error-bg: #FEF2F2;
    --color-error-border: #DC2626;
    --color-error-text: #991B1B;
    --color-warning-bg: #FFFBEB;
    --color-warning-border: #D97706;
    --color-warning-text: #92400E;

    /* Typography */
    --font-base: Helvetica, Arial, sans-serif;
    --font-size-nav: 13px;
    --font-size-body: 15px;
    --font-size-card-title: 14px;
    --font-size-section-title: 16px;

    /* Spacing */
    --container-max: 1200px;
    --container-padding: 24px;
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-base);
    font-size: var(--font-size-body);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-page-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

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

a:hover,
a:focus {
    color: var(--color-accent-hover);
}

/* --------------------------------------------------------------------------
   3. Navigation (main-nav)
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

.main-nav {
    background: var(--color-nav-bg);
    padding: 0;
    position: relative;
}

.main-nav__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 14px var(--container-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main-nav__brand {
    color: var(--color-text-on-dark);
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
}

.main-nav__brand:hover,
.main-nav__brand:focus {
    color: var(--color-accent);
}

/* Mobile menu toggle */
.main-nav__toggle {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.main-nav__toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text-on-dark);
    border-radius: 1px;
    transition: transform 0.2s, opacity 0.2s;
}

.main-nav__toggle[aria-expanded="true"] .main-nav__toggle-bar:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
}

.main-nav__toggle[aria-expanded="true"] .main-nav__toggle-bar:nth-child(2) {
    opacity: 0;
}

.main-nav__toggle[aria-expanded="true"] .main-nav__toggle-bar:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
}

/* Nav list — mobile-first (hidden, shown via JS toggle) */
.main-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-nav-bg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    max-height: 80vh;
    overflow-y: auto;
}

.main-nav__list[aria-hidden="false"],
.main-nav__toggle[aria-expanded="true"] ~ .main-nav__list {
    display: flex;
}

/* NavRenderer generates bare <ul><li><a> — style them generically */
.main-nav__list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav__list li {
    position: relative;
}

.main-nav__list > ul > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.main-nav__list a,
.main-nav__list > ul > li > span {
    display: block;
    padding: 12px var(--container-padding);
    color: var(--color-text-on-dark);
    text-decoration: none;
    font-size: var(--font-size-nav);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    transition: color 0.2s, background-color 0.2s;
    cursor: default;
}

.main-nav__list a {
    cursor: pointer;
}

.main-nav__list a:hover,
.main-nav__list a:focus {
    color: var(--color-accent);
}

.main-nav__list li.active > a,
.main-nav__list a[aria-current="page"] {
    color: var(--color-accent);
    font-weight: bold;
}

/* Mobile: nested sub-menus indented */
.main-nav__list ul ul {
    padding-left: 16px;
}

.main-nav__list ul ul a {
    font-size: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.main-nav__list ul ul ul a {
    font-size: 11px;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Legacy BEM classes kept for backward compatibility */
.main-nav__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.main-nav__link {
    display: block;
    padding: 12px var(--container-padding);
    color: var(--color-text-on-dark);
    text-decoration: none;
    font-size: var(--font-size-nav);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    transition: color 0.2s, background-color 0.2s;
}

.main-nav__link:hover,
.main-nav__link:focus {
    color: var(--color-accent);
}

.main-nav__link--active {
    color: var(--color-accent);
    font-weight: bold;
}

/* Search field — item of the nav, collapsed by default */
.main-nav__search {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.main-nav__search-input {
    width: 0;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 1px solid transparent;
    background: var(--color-nav-bg);
    color: var(--color-text-on-dark);
    font-size: var(--font-size-body);
    font-family: var(--font-base);
    opacity: 0;
    overflow: hidden;
    transition: width 0.2s ease, opacity 0.2s ease, padding 0.2s ease;
}

.main-nav__search-input::placeholder {
    color: rgba(232, 232, 230, 0.6);
}

.main-nav__search-input:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.main-nav__search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    background: var(--color-accent);
    color: var(--color-nav-bg);
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.main-nav__search-toggle:hover,
.main-nav__search-toggle:focus-visible {
    background: var(--color-accent-hover);
}

.main-nav__search-toggle[aria-expanded="true"] {
    background: var(--color-accent-hover);
}

.main-nav__search-toggle .icon-close {
    display: none;
}

.main-nav__search-toggle[aria-expanded="true"] .icon-search {
    display: none;
}

.main-nav__search-toggle[aria-expanded="true"] .icon-close {
    display: block;
}

/* Expanded state: the search field takes up the available space in the nav */
.main-nav__container.main-nav--search-active .main-nav__search {
    flex: 1;
}

.main-nav__container.main-nav--search-active .main-nav__search-input {
    width: auto;
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 0 12px;
    opacity: 1;
    border-color: var(--color-accent);
}

/* Hide the brand, hamburger, and menu during expansion —
   a single rule, identical at every viewport (no media query) */
.main-nav__container.main-nav--search-active .main-nav__brand,
.main-nav__container.main-nav--search-active .main-nav__toggle,
.main-nav__container.main-nav--search-active .main-nav__list {
    display: none;
}

/* Progressive degradation: without JS, the field is visible by default,
   the button (inoperative without JS) is hidden */
.no-js .main-nav__search-toggle {
    display: none;
}

.no-js .main-nav__search-input {
    width: auto;
    flex: 1;
    min-width: 120px;
    height: 36px;
    padding: 0 12px;
    opacity: 1;
    border-color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   4. Footer (site-footer)
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--color-nav-bg);
    border-top: 3px solid var(--color-accent);
    margin-top: auto;
    padding: 32px 0;
}

.site-footer__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.site-footer__name {
    color: var(--color-text-on-dark);
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.site-footer__social {
    display: flex;
    gap: 12px;
}

.site-footer__link {
    color: var(--color-text-on-dark);
    text-decoration: none;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

.site-footer__link:hover,
.site-footer__link:focus {
    color: var(--color-accent);
}

.site-footer__icon {
    width: 20px;
    height: 20px;
}

.site-footer__copyright {
    color: var(--color-text-on-dark);
    font-size: 12px;
    opacity: 0.7;
}

.site-footer__copyright p {
    margin: 0;
}

/* --------------------------------------------------------------------------
   4b. Breadcrumb
   -------------------------------------------------------------------------- */
.page-detail > nav[aria-label],
.page-container > nav[aria-label],
.article-detail > nav[aria-label] {
    font-size: 13px;
    margin-bottom: 16px;
    color: #666;
}

.page-detail > nav[aria-label] ol,
.page-container > nav[aria-label] ol,
.article-detail > nav[aria-label] ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.page-detail > nav[aria-label] li,
.page-container > nav[aria-label] li,
.article-detail > nav[aria-label] li {
    display: flex;
    align-items: center;
}

.page-detail > nav[aria-label] li + li::before,
.page-container > nav[aria-label] li + li::before,
.article-detail > nav[aria-label] li + li::before {
    content: "›";
    margin: 0 6px;
    color: #999;
}

.page-detail > nav[aria-label] a,
.page-container > nav[aria-label] a,
.article-detail > nav[aria-label] a {
    color: var(--color-accent);
    text-decoration: none;
}

.page-detail > nav[aria-label] a:hover,
.page-container > nav[aria-label] a:hover,
.article-detail > nav[aria-label] a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   5. Section Headers
   -------------------------------------------------------------------------- */
.section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}

.section-header__bullet {
    width: 10px;
    height: 10px;
    background: var(--color-accent);
    display: inline-block;
    flex-shrink: 0;
}

.section-header__title {
    font-size: var(--font-size-section-title);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.section-header__rule {
    flex: 1;
    border: none;
    border-bottom: 1px dotted var(--color-border);
    margin: 0;
}

/* --------------------------------------------------------------------------
   6. Card Component (Article Listing)
   -------------------------------------------------------------------------- */
.article-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 0;
    list-style: none;
    margin: 0;
}

.card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-content-bg);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
    transition: box-shadow 0.2s;
}

.card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.card__image-link {
    display: block;
    text-decoration: none;
}

.card__image {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top;
    display: block;
}

.card__image--placeholder {
    width: 100%;
    height: 180px;
    background: #D4D4D4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card__image--placeholder::after {
    content: "";
    display: block;
    width: 48px;
    height: 48px;
    background: #BDBDBD;
    border-radius: 4px;
}

/* Unified band: title + subtitle + optional attribution */
.card__band {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 4px;
    background: var(--color-accent);
    color: var(--color-nav-bg);
    padding: 10px 12px 18px;
    text-decoration: none;
    position: relative;
    /* Folded corner effect */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 20px) 100%, 0 100%);
}

.card__band:hover,
.card__band:focus {
    color: var(--color-nav-bg);
    text-decoration: none;
}

.card__title {
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    font-size: var(--font-size-card-title);
    line-height: 1.3;
}

.card__subtitle {
    display: block;
    font-weight: normal;
    font-size: 0.85em;
    line-height: 1.4;
}

.card__attribution {
    display: block;
    font-style: italic;
    font-size: 0.8em;
    margin-top: 2px;
}

/* --------------------------------------------------------------------------
   7. Pagination
   -------------------------------------------------------------------------- */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 40px;
    padding: 0;
    list-style: none;
}

.pagination__link,
.pagination__current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 14px;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.pagination__link {
    color: var(--color-text);
    border: 1px solid var(--color-border);
    background: var(--color-content-bg);
}

.pagination__link:hover,
.pagination__link:focus {
    background: var(--color-accent);
    color: var(--color-nav-bg);
    border-color: var(--color-accent);
}

.pagination__current {
    background: var(--color-accent);
    color: var(--color-nav-bg);
    font-weight: bold;
    border: 1px solid var(--color-accent);
}

.pagination__ellipsis {
    padding: 4px 8px;
    color: var(--color-text);
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   8. Article Detail Page
   -------------------------------------------------------------------------- */
.article-detail {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px var(--container-padding);
    background: var(--color-content-bg);
}

/* Two-column layout: content left, cover right */
.article-detail__layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (min-width: 1024px) {
    .article-detail__layout {
        flex-direction: row;
        align-items: flex-start;
    }

    .article-detail__content {
        flex: 1 1 60%;
        min-width: 0;
    }

    .article-detail__aside {
        flex: 0 0 38%;
    }
}

.article-detail__cover {
    width: 100%;
    height: auto;
    display: block;
}

.article-detail__cover-bar {
    height: 8px;
    background: var(--color-accent);
}

.article-detail__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    font-size: 13px;
    color: #666;
}

.article-detail__date {
    font-style: italic;
}

.article-detail__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.article-detail__category {
    background: var(--color-page-bg);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: 2px 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--color-text);
}

.article-detail__title {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.3;
    margin: 0 0 24px;
    color: var(--color-text);
}

/* Article body typography */
.article-detail__body {
    font-size: var(--font-size-body);
    line-height: 1.6;
    color: var(--color-text);
}

.article-detail__body h2 {
    font-size: 22px;
    margin: 40px 0 14px;
    font-weight: bold;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
}

.article-detail__body h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.article-detail__body h3 {
    font-size: 18px;
    margin: 32px 0 10px;
    font-weight: bold;
}

.article-detail__body h4 {
    font-size: 16px;
    margin: 20px 0 8px;
    font-weight: bold;
}

.article-detail__body p {
    margin: 0 0 4px;
}

.article-detail__body ul,
.article-detail__body ol {
    margin: 0 0 16px;
    padding-left: 24px;
}

.article-detail__body li {
    margin-bottom: 6px;
}

.article-detail__body blockquote {
    margin: 20px 0;
    padding: 16px 20px;
    border-left: 3px solid var(--color-accent);
    background: var(--color-page-bg);
    font-style: italic;
}

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

.article-detail__body img {
    max-width: 30%;
    height: auto;
    border-radius: 4px;
    margin: 20px auto;
    display: block;
}

/* Article detail footer — back-to-category links */
.article-detail__footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px dotted var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.article-detail__back {
    display: inline-block;
    font-size: 14px;
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 500;
}

.article-detail__back:hover,
.article-detail__back:focus {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   9. Error Pages
   -------------------------------------------------------------------------- */
.error-page {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px var(--container-padding);
}

.error-page__container {
    text-align: center;
    max-width: 480px;
}

.error-page__code {
    font-size: 72px;
    font-weight: bold;
    color: var(--color-accent);
    margin: 0 0 8px;
    line-height: 1;
}

.error-page__message {
    font-size: 22px;
    font-weight: bold;
    margin: 0 0 12px;
    color: var(--color-text);
}

.error-page__description {
    font-size: 15px;
    color: #666;
    margin: 0 0 24px;
    line-height: 1.5;
}

.error-page__link {
    display: inline-block;
    padding: 10px 20px;
    background: var(--color-accent);
    color: var(--color-nav-bg);
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
    transition: background-color 0.2s;
}

.error-page__link:hover,
.error-page__link:focus {
    background: var(--color-accent-hover);
    color: var(--color-nav-bg);
}

.error-page__retry {
    font-size: 14px;
    color: var(--color-warning-text);
    font-style: italic;
}

/* --------------------------------------------------------------------------
   10. Public Page Layout
   -------------------------------------------------------------------------- */
.page-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 32px var(--container-padding);
    flex: 1;
}

.page-title {
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 24px;
    color: var(--color-text);
}

/* --------------------------------------------------------------------------
   11. Admin Forms (functional, minimal styling)
   -------------------------------------------------------------------------- */
.admin-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.admin-nav {
    background: var(--color-nav-bg);
    padding: 16px var(--container-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-nav__brand {
    color: var(--color-text-on-dark);
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
}

.admin-nav__brand:hover,
.admin-nav__brand:focus {
    color: var(--color-accent);
}

.admin-nav__links {
    display: flex;
    gap: 16px;
    align-items: center;
}

.admin-nav__link {
    color: var(--color-text-on-dark);
    text-decoration: none;
    font-size: var(--font-size-nav);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-nav__link:hover,
.admin-nav__link:focus {
    color: var(--color-accent);
}

/* Admin main content area */
.main-content {
    flex: 1;
    padding: 32px var(--container-padding);
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

/* Form groups */
.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--color-text);
}

.form-group .required-mark {
    color: var(--color-error-text);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="datetime-local"],
.form-group input[type="file"],
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: var(--font-size-body);
    font-family: var(--font-base);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-content-bg);
    color: var(--color-text);
    transition: border-color 0.2s;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="datetime-local"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(232, 163, 23, 0.2);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-group textarea.content-editor {
    min-height: 300px;
    font-size: 14px;
    line-height: 1.6;
}

.form-group input[type="file"] {
    padding: 8px;
    font-size: 14px;
}

/* Error state */
.form-group--error input,
.form-group--error textarea {
    border-color: var(--color-error-border);
}

.form-group--error input:focus,
.form-group--error textarea:focus {
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
}

.field-error {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--color-error-text);
}

.help-text {
    font-size: 13px;
    color: #666;
    margin-top: 4px;
}

/* Fieldset groups (categories) */
.fieldset-group {
    margin-bottom: 24px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 16px;
}

.fieldset-group legend {
    font-size: 14px;
    font-weight: 600;
    padding: 0 8px;
    color: var(--color-text);
}

.checkbox-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.checkbox-list li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.checkbox-list input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
}

.checkbox-list label {
    font-size: 14px;
    font-weight: normal;
    cursor: pointer;
}

/* Homepage checkbox */
.homepage-group {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.homepage-group input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
}

.homepage-group label {
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* Cover image preview */
.cover-preview {
    margin-bottom: 12px;
}

.cover-preview img {
    max-width: 200px;
    max-height: 150px;
    border-radius: 4px;
    border: 1px solid var(--color-border);
}

.cover-preview__label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-top: 4px;
}

/* Buttons */
.btn-submit {
    display: inline-block;
    padding: 12px 24px;
    font-size: var(--font-size-body);
    font-weight: bold;
    font-family: var(--font-base);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--color-accent);
    color: var(--color-nav-bg);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

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

.btn-submit:focus {
    outline: 2px solid var(--color-nav-bg);
    outline-offset: 2px;
}

.btn-secondary {
    display: inline-block;
    padding: 12px 24px;
    font-size: 14px;
    font-family: var(--font-base);
    text-decoration: none;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    margin-left: 12px;
    transition: border-color 0.2s;
}

.btn-secondary:hover,
.btn-secondary:focus {
    border-color: var(--color-accent);
    color: var(--color-nav-bg);
}

.form-actions {
    margin-top: 32px;
    display: flex;
    align-items: center;
}

/* Alert messages */
.alert {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 14px;
    border: 1px solid;
}

.alert--error {
    background: var(--color-error-bg);
    border-color: var(--color-error-border);
    color: var(--color-error-text);
}

.alert--warning {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
    color: var(--color-warning-text);
}

/* Login page */
.login-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-card {
    background: var(--color-content-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 32px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.login-card__title {
    margin: 0 0 24px;
    font-size: 20px;
    font-weight: bold;
    color: var(--color-text);
    text-align: center;
}

/* Logout button in nav */
.logout-form {
    display: inline;
}

.logout-btn {
    background: none;
    border: none;
    color: var(--color-text-on-dark);
    font-size: var(--font-size-nav);
    font-family: var(--font-base);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    padding: 0;
}

.logout-btn:hover,
.logout-btn:focus {
    color: var(--color-accent);
}

/* Dashboard */
.dashboard-actions {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dashboard-actions li {
    margin-bottom: 12px;
}

.dashboard-actions a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    background: var(--color-content-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    text-decoration: none;
    color: var(--color-text);
    font-size: var(--font-size-body);
    font-weight: 600;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.dashboard-actions a:hover,
.dashboard-actions a:focus {
    border-color: var(--color-accent);
    box-shadow: 0 2px 8px rgba(232, 163, 23, 0.15);
}

.dashboard-actions a::before {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--color-accent);
    color: var(--color-nav-bg);
    border-radius: 50%;
    font-size: 16px;
    font-weight: bold;
}

/* --------------------------------------------------------------------------
   12. Responsive Breakpoints
   -------------------------------------------------------------------------- */

/* Tablet: ≥640px — grid and footer only, nav stays in mobile mode */
@media (min-width: 640px) {
    .article-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .site-footer__container {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }

    .article-detail__title {
        font-size: 32px;
    }
}

/* Desktop: ≥1024px — nav switches to horizontal bar with dropdowns */
@media (min-width: 1024px) {
    .article-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .article-detail {
        padding: 48px var(--container-padding);
    }

    .article-detail__title {
        font-size: 36px;
    }

    .main-nav__container {
        position: relative;
    }

    .main-nav__toggle {
        display: none;
    }

    .main-nav__list {
        display: flex;
        flex-direction: row;
        position: static;
        background: transparent;
        border: none;
        gap: 0;
        max-height: none;
        overflow: visible;
    }

    /* Top-level <ul> is a horizontal row */
    .main-nav__list > ul {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0;
    }

    .main-nav__list > ul > li {
        border-bottom: none;
        position: relative;
    }

    .main-nav__list > ul > li > a,
    .main-nav__list > ul > li > span {
        padding: 8px 12px;
        white-space: nowrap;
        font-size: 12px;
    }

    /* Sub-menus (level 2): dropdown hidden by default with transition */
    .main-nav__list ul ul {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 240px;
        background: rgba(44, 44, 44, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0 0 4px 4px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        padding: 4px 0;
        z-index: 200;
        /* Transition: fade + slide */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
        pointer-events: none;
    }

    /* Right-aligned dropdown for items near viewport edge */
    .main-nav__list ul ul.nav-dropdown--right {
        left: auto;
        right: 0;
        border-radius: 0 0 4px 4px;
    }

    .main-nav__list ul ul a {
        padding: 10px 16px;
        font-size: var(--font-size-nav);
    }

    /* Sub-sub-menus (level 3): appear to the right */
    .main-nav__list ul ul ul {
        top: 0;
        left: 100%;
        border-radius: 0 4px 4px 0;
        transform: translateX(-4px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
    }

    /* Sub-sub-menu flipped to the left when near edge */
    .main-nav__list ul ul ul.nav-dropdown--right {
        left: auto;
        right: 100%;
        border-radius: 4px 0 0 4px;
        transform: translateX(4px);
    }

    .main-nav__list ul ul ul a {
        font-size: 12px;
    }

    /* Show dropdowns on hover/focus — JS adds .nav-open class for delay management */
    .main-nav__list li:focus-within > ul,
    .main-nav__list li.nav-open > ul {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
        pointer-events: auto;
    }

    .main-nav__list ul ul li:focus-within > ul,
    .main-nav__list ul ul li.nav-open > ul {
        transform: translateX(0);
    }

    /* Indicate parent items with children (progressive enhancement) */
    @supports selector(:has(> ul)) {
        .main-nav__list li:has(> ul) > a::after {
            content: " ▾";
            font-size: 10px;
            opacity: 0.7;
        }

        .main-nav__list ul ul li:has(> ul) > a::after {
            content: " ›";
            font-size: 12px;
            position: absolute;
            right: 12px;
        }
    }

    .main-nav__item {
        border-bottom: none;
    }

    .main-nav__link {
        padding: 8px 14px;
    }
}

/* --------------------------------------------------------------------------
   12b. Newsletter Grid
   -------------------------------------------------------------------------- */
.newsletter-year {
    margin-bottom: 32px;
}

.newsletter-year .section-header--sub {
    margin-bottom: 16px;
}

.newsletter-year .section-header--sub .section-header__title {
    font-size: 20px;
}

.newsletter-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@supports (display: grid-lanes) {
    .newsletter-grid {
        display: grid-lanes;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
    }

    .newsletter-card__image {
        aspect-ratio: auto;
        object-fit: unset;
        background: none;
    }
}

@media (min-width: 640px) {
    .newsletter-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .newsletter-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.newsletter-card {
    display: block;
    text-decoration: none;
    color: var(--color-text);
    transition: box-shadow 0.2s, transform 0.2s;
    border-radius: 4px;
    overflow: hidden;
    background: var(--color-content-bg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.newsletter-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.newsletter-card__image {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    object-position: center;
    display: block;
    background: #f5f5f5;
}

.newsletter-card__placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    background: #e8e8e8;
}

.newsletter-card__title {
    display: block;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
}

/* --------------------------------------------------------------------------
   12c. Document Library
   -------------------------------------------------------------------------- */
.doc-filter {
    margin-bottom: 24px;
}

.doc-filter__input {
    width: 100%;
    max-width: 400px;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: var(--font-size-body);
    font-family: var(--font-base);
    transition: border-color 0.2s;
}

.doc-filter__input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(232, 163, 23, 0.15);
}

.doc-group {
    margin-bottom: 28px;
}

.doc-group__title {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px dotted var(--color-border);
    color: var(--color-text);
}

.doc-group__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.doc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    text-decoration: none;
    color: var(--color-text);
    border-radius: 4px;
    transition: background-color 0.15s;
}

.doc-row:hover,
.doc-row:focus {
    background: rgba(232, 163, 23, 0.08);
}

.doc-row__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.doc-row__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.doc-row__title {
    font-size: var(--font-size-body);
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-row__author {
    font-size: 13px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-row__size {
    flex-shrink: 0;
    font-size: 12px;
    color: #999;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   13. Contact Form
   -------------------------------------------------------------------------- */
.contact-page {
    width: 100%;
    max-width: var(--container-max);
    margin: 32px auto;
    padding: 48px var(--container-padding);
    background: var(--color-content-bg);
}

.contact-form-container {
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
}

.contact-form {
    width: 100%;
}

.contact-form__field {
    margin-bottom: 20px;
    width: 100%;
}

.contact-form__success {
    background: #F0FDF4;
    border: 1px solid #16A34A;
    color: #166534;
    padding: 16px 20px;
    border-radius: 4px;
    margin-bottom: 24px;
}

.contact-form__success p {
    margin: 0;
}

.contact-form__errors {
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    color: var(--color-error-text);
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 24px;
}

.contact-form__errors ul {
    margin: 0;
    padding-left: 20px;
}

.contact-form__errors li {
    margin-bottom: 4px;
}

.contact-form__label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--color-text);
}

.contact-form__input,
.contact-form__textarea {
    display: block;
    width: 100%;
    padding: 10px 12px;
    font-size: var(--font-size-body);
    font-family: var(--font-base);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-content-bg);
    color: var(--color-text);
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.contact-form__input:focus,
.contact-form__textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(232, 163, 23, 0.2);
}

.contact-form__textarea {
    resize: vertical;
    min-height: 160px;
}

.contact-form__actions {
    margin-top: 24px;
    text-align: right;
}

.contact-form__submit {
    display: inline-block;
    padding: 12px 28px;
    font-size: var(--font-size-body);
    font-weight: bold;
    font-family: var(--font-base);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--color-accent);
    color: var(--color-nav-bg);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.contact-form__submit:hover {
    background: var(--color-accent-hover);
}

.contact-form__submit:focus {
    outline: 2px solid var(--color-nav-bg);
    outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   14. Hero Carousel
   -------------------------------------------------------------------------- */
.hero-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
}

.hero-carousel__track {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    min-height: 250px;
    max-height: 480px;
}

.hero-carousel__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.hero-carousel__slide--active {
    opacity: 1;
    pointer-events: auto;
}

.hero-carousel__link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.hero-carousel__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ancrage du cadrage vers le haut : avec object-fit: cover et une hauteur
       de bandeau variable (max-height sur .hero-carousel__track), les écrans
       larges et peu hauts (ex. MacBook Pro 16") rognent fortement l'image en
       haut et en bas. Un cadrage centré (défaut 50% 50%) coupe alors le haut du
       sujet — sur le portrait actuel, les lunettes/le visage. On ancre à 25% du
       haut pour garder le sujet visible. Valeur unique appliquée à toutes les
       diapositives (le carrousel peut en contenir plusieurs). */
    object-position: center 25%;
    display: block;
}

.hero-carousel__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 24px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

/* Arrow buttons */
.hero-carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
    z-index: 10;
}

.hero-carousel__btn:hover,
.hero-carousel__btn:focus {
    background: rgba(0, 0, 0, 0.7);
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.hero-carousel__btn--prev {
    left: 12px;
}

.hero-carousel__btn--next {
    right: 12px;
}

/* Dot indicators */
.hero-carousel__dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.hero-carousel__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s;
}

.hero-carousel__dot:hover,
.hero-carousel__dot:focus {
    background: rgba(255, 255, 255, 0.5);
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.hero-carousel__dot--active {
    background: #fff;
}

/* --------------------------------------------------------------------------
   15. Homepage Layout
   -------------------------------------------------------------------------- */
.homepage {
    width: 100%;
}

.homepage__articles {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 40px var(--container-padding);
}

.homepage__articles-more {
    text-align: center;
    margin-top: 32px;
}

.homepage__articles-link {
    display: inline-block;
    padding: 10px 24px;
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

.homepage__articles-link:hover,
.homepage__articles-link:focus {
    background: var(--color-accent);
    color: var(--color-nav-bg);
}

/* Teaser cards */
.homepage__teasers {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding) 48px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.teaser-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
    transition: box-shadow 0.2s, transform 0.2s;
}

.teaser-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}

.teaser-card__band {
    background: var(--color-accent);
    padding: 12px 16px;
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 88% 100%, 0 100%);
}

.teaser-card__title {
    display: block;
    margin: 0;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--color-nav-bg);
}

.teaser-card__body {
    flex: 1;
    background: var(--color-nav-bg);
    padding: 16px;
    color: var(--color-text-on-dark);
}

.teaser-card__text {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-on-dark);
}

.teaser-card__link {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
}

@media (min-width: 640px) {
    .homepage__teasers {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .hero-carousel__track {
        aspect-ratio: 16 / 6;
        min-height: 350px;
    }
}

/* --------------------------------------------------------------------------
   16. Page Detail (Static Pages)
   -------------------------------------------------------------------------- */
.page-detail {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px var(--container-padding) 32px;
    background: var(--color-content-bg);
}

/* Two-column layout: content left ~60%, image right ~40% */
.page-detail__layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (min-width: 1024px) {
    .page-detail__layout {
        flex-direction: row;
        align-items: flex-start;
    }

    .page-detail__content {
        flex: 1 1 60%;
        min-width: 0;
    }

    .page-detail__aside {
        flex: 0 0 38%;
    }
}

.page-detail__image {
    width: 100%;
    height: auto;
    display: block;
}

.page-detail__image-bar {
    height: 8px;
    background: var(--color-accent);
}

/* Section header within page detail */
.page-detail .section-header {
    margin-bottom: 24px;
}

.page-detail__title {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.3;
    margin: 0 0 24px;
    color: var(--color-text);
}

/* Body typography — mirrors article-detail__body */
.page-detail__body {
    font-size: var(--font-size-body);
    line-height: 1.6;
    color: var(--color-text);
}

.page-detail__body h2 {
    font-size: 22px;
    margin: 40px 0 14px;
    font-weight: bold;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
}

.page-detail__body h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.page-detail__body h3 {
    font-size: 18px;
    margin: 32px 0 10px;
    font-weight: bold;
}

.page-detail__body h4 {
    font-size: 16px;
    margin: 20px 0 8px;
    font-weight: bold;
}

.page-detail__body p {
    margin: 0 0 4px;
}

.page-detail__body ul,
.page-detail__body ol {
    margin: 0 0 16px;
    padding-left: 24px;
}

.page-detail__body li {
    margin-bottom: 6px;
}

.page-detail__body blockquote {
    margin: 20px 0;
    padding: 16px 20px;
    border-left: 3px solid var(--color-accent);
    background: var(--color-page-bg);
    font-style: italic;
}

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

.page-detail__body a:hover,
.page-detail__body a:focus {
    color: var(--color-accent-hover);
}

/* Collapsible long lists (<details>/<summary>) */
.collapsible-list {
    margin: 16px 0;
    border: 1px solid var(--color-border);
    border-radius: 4px;
}

.collapsible-list summary {
    padding: 12px 16px;
    cursor: pointer;
    font-weight: 500;
    color: var(--color-accent);
    background: rgba(232, 163, 23, 0.05);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.collapsible-list summary::before {
    content: "▸";
    transition: transform 0.2s;
}

.collapsible-list[open] summary::before {
    transform: rotate(90deg);
}

.collapsible-list summary::-webkit-details-marker {
    display: none;
}

.collapsible-list > ul,
.collapsible-list > ol {
    margin: 0;
    padding: 12px 16px 12px 40px;
    border-top: 1px solid var(--color-border);
}

.page-detail__body img {
    max-width: 30%;
    height: auto;
    border-radius: 4px;
    margin: 20px auto;
    display: block;
}

/* Correspondants (page "Qui sommes-nous") */
.page-detail__body .correspondants-section {
    margin: 32px 0;
}

.page-detail__body .correspondants-section__list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    margin-top: 16px;
}

.page-detail__body .correspondant {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 140px;
    text-align: center;
}

.page-detail__body .correspondant img {
    width: 100px;
    height: 100px;
    max-width: none;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 0 8px;
}

.page-detail__body .correspondant p {
    margin: 0 0 2px;
    font-size: 14px;
}

.page-detail__body .correspondant__role {
    color: var(--color-text-muted, #666);
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   Page Missions — Numbered badges (cercles jaunes)
   -------------------------------------------------------------------------- */
.page-missions .page-detail__body ol {
    list-style: none;
    padding-left: 0;
    counter-reset: mission-counter;
}

.page-missions .page-detail__body ol > li {
    counter-increment: mission-counter;
    position: relative;
    padding-left: 72px;
    margin-bottom: 28px;
    min-height: 56px;
}

.page-missions .page-detail__body ol > li::before {
    content: counter(mission-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-nav-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 300;
}

.page-detail__body figure {
    margin: 24px 0;
    padding: 0;
}

.page-detail__body figure img {
    margin: 0;
}

.page-detail__body figcaption {
    font-size: 13px;
    color: #666;
    margin-top: 8px;
    font-style: italic;
}

/* Responsive */
@media (min-width: 640px) {
    .page-detail__title {
        font-size: 32px;
    }
}

@media (min-width: 1024px) {
    .page-detail {
        padding: 48px var(--container-padding);
    }

    .page-detail__title {
        font-size: 36px;
    }

    .page-detail__cover {
        max-height: 480px;
    }
}

/* --------------------------------------------------------------------------
   17. Search Empty State (templates/public/search.php)
   -------------------------------------------------------------------------- */
.search-empty {
    margin-top: 8px;
}

.search-message {
    margin: 0 0 8px;
}

.search-empty__hint {
    margin: 0 0 20px;
    font-size: 14px;
    color: #666;
}

.search-empty__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.search-empty__link {
    display: inline-block;
    padding: 10px 24px;
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

.search-empty__link:hover,
.search-empty__link:focus {
    background: var(--color-accent);
    color: var(--color-nav-bg);
}
/* --------------------------------------------------------------------------
   18. Content figures — size & alignment (ADR-010)
   --------------------------------------------------------------------------
   Additive rules for content <figure> elements carrying a size/alignment
   class. Scoped to .article-detail__body, .page-detail__body AND .ql-editor
   (editor) so the WYSIWYG preview matches the public rendering.

   STRICTLY ADDITIVE: the legacy default selectors (.article-detail__body img,
   .page-detail__body img, .page-detail__body figure, .page-detail__body
   figure img, .page-detail__body figcaption) are NOT modified. These rules
   only apply when a figure carries a `figure-*` class. A figure without a
   class keeps the legacy rendering (~30% wide, centered).

   Class matrix (see ADR-010, révisée par ADR-020) :
     figure-small  → 25%  | figure-medium → 50% | figure-large → 75% | figure-full → 100%
     figure-left   → bloc calé à gauche | figure-center → bloc centré | figure-right → bloc calé à droite
   Alignement = position horizontale du bloc image, SANS float : le texte se
   place toujours EN DESSOUS de l'image, jamais à côté (plus d'habillage —
   décision B2, ADR-020). Mobile (< 640px) : toute image devient pleine largeur.
   -------------------------------------------------------------------------- */

/* Block formatting context on the content body. Historiquement pour contenir
   les floats (ADR-010) ; conservé après le passage en blocs sans float
   (ADR-020) car flow-root reste inoffensif et garde la marge du dernier enfant
   contenue. Les layouts colonnes (.article-detail__layout /
   .page-detail__layout) en flexbox ne sont pas affectés. */
.article-detail__body,
.page-detail__body,
.ql-editor {
    display: flow-root;
}

/* Every content figure is bounded to the container width (responsive-safe,
   Req 1.3): no figure can overflow horizontally, including large/full. */
.article-detail__body figure[class*="figure-"],
.page-detail__body figure[class*="figure-"],
.ql-editor figure[class*="figure-"] {
    max-width: 100%;
}

/* The image fills its figure's width and preserves ratio — applied ONLY when
   the figure carries a size/alignment class, so the legacy `max-width: 30%`
   on unclassed images is left untouched (Req 8.3). */
.article-detail__body figure[class*="figure-"] img,
.page-detail__body figure[class*="figure-"] img,
.ql-editor figure[class*="figure-"] img {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
}

/* --- Sizes & alignment (desktop, >= 640px) --- */
@media (min-width: 640px) {
    /* Sizes — prefixed by context (specificity 0,0,2,1) to win over the
       context default `figure` rule (0,0,1,1) without editing it. */
    .article-detail__body figure.figure-small,
    .page-detail__body figure.figure-small,
    .ql-editor figure.figure-small {
        width: 25%;
    }

    .article-detail__body figure.figure-medium,
    .page-detail__body figure.figure-medium,
    .ql-editor figure.figure-medium {
        width: 50%;
    }

    .article-detail__body figure.figure-large,
    .page-detail__body figure.figure-large,
    .ql-editor figure.figure-large {
        width: 75%;
    }

    .article-detail__body figure.figure-full,
    .page-detail__body figure.figure-full,
    .ql-editor figure.figure-full {
        width: 100%;
    }

    /* Alignments — position the image block HORIZONTALLY (left / centered /
       right) WITHOUT float, so text never wraps beside it and always flows
       BELOW (cf. ADR-020, décision B2). Each figure is a block whose auto
       margins push it to the chosen side. This replaces the previous float
       model (habillage) that caused successive figures to interleave; the
       former `clear`/`figure-full.figure-left|right` float-neutralizers are no
       longer needed since nothing floats. */
    .article-detail__body figure.figure-left,
    .page-detail__body figure.figure-left,
    .ql-editor figure.figure-left {
        float: none;
        margin: 24px auto 16px 0;
    }

    .article-detail__body figure.figure-right,
    .page-detail__body figure.figure-right,
    .ql-editor figure.figure-right {
        float: none;
        margin: 24px 0 16px auto;
    }

    .article-detail__body figure.figure-center,
    .page-detail__body figure.figure-center,
    .ql-editor figure.figure-center {
        float: none;
        margin: 24px auto 16px;
    }
}

/* --- Mobile (< 640px): every sized/aligned figure is full-width, no float
   (Req 1.4, 2.5). Bounded at 639.98px to avoid a 1px overlap with the
   min-width: 640px desktop rules. --- */
@media (max-width: 639.98px) {
    .article-detail__body figure[class*="figure-"],
    .page-detail__body figure[class*="figure-"],
    .ql-editor figure[class*="figure-"] {
        float: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* --------------------------------------------------------------------------
   Content spacer (primitive de mise en page whitelistée)
   --------------------------------------------------------------------------
   Additive rules for the content spacer: an <hr class="spacer spacer-*"
   aria-hidden="true"> inserted from the editor whose sole role is to add an
   explicit vertical gap between blocks. The <hr>'s default horizontal rule is
   neutralised (border/margin/padding/background reset) so only the vertical
   space is visible.

   Scoped to .article-detail__body, .page-detail__body AND .ql-editor (editor)
   with the SAME tri-selector as the figure-* rules above, so the WYSIWYG
   preview matches the public rendering (editor/front parity, Req 5.1).

   STRICTLY ADDITIVE: no existing rule (paragraphs, images, figure-*) is
   modified. There is no pre-existing `hr` style in this file, so these rules
   only ever apply to spacer <hr> elements carrying a `spacer-*` class.

   Closed amplitude set (see ADR-021), coherent with the paragraph rhythm
   (margin: 0 0 4px, MR 32→36) :
     spacer-small → 12px | spacer-medium (défaut) → 24px | spacer-large → 48px
   -------------------------------------------------------------------------- */
.article-detail__body hr.spacer,
.page-detail__body hr.spacer,
.ql-editor hr.spacer {
    border: 0;
    margin: 0;
    padding: 0;
    background: none;
}

.article-detail__body hr.spacer-small,
.page-detail__body hr.spacer-small,
.ql-editor hr.spacer-small {
    height: 12px;
}

.article-detail__body hr.spacer-medium,
.page-detail__body hr.spacer-medium,
.ql-editor hr.spacer-medium {
    height: 24px;
}

.article-detail__body hr.spacer-large,
.page-detail__body hr.spacer-large,
.ql-editor hr.spacer-large {
    height: 48px;
}

/* --------------------------------------------------------------------------
   Spacer toolbar picker labels (Quill Snow theme)
   --------------------------------------------------------------------------
   The custom `spacer` picker is added to the Quill toolbar via
   TOOLBAR_OPTIONS ([{ spacer: ['small', 'medium', 'large'] }]). The Snow theme
   only ships ::before labels for the pickers it knows (ql-header, ql-font,
   ql-size); our custom ql-spacer picker has none, so it renders as an empty
   ~28px button and its dropdown items show no text — the author cannot choose
   an amplitude.

   These rules replicate the exact mechanism the Snow theme uses for
   .ql-picker.ql-header (see quill.snow.css): widen the picker to fit a text
   label and expose the label + item labels via ::before { content: ... }.
   The picker-label carries no data-value (it is an action trigger, not a
   selected state), so we target .ql-picker-label::before directly.

   STRICTLY ADDITIVE: no existing rule and no vendor file is modified. These
   selectors only ever match the custom .ql-spacer picker. Sober, French
   labels, consistent with the minimalist editor.
   -------------------------------------------------------------------------- */
.ql-snow .ql-picker.ql-spacer {
    width: auto;
}

.ql-snow .ql-picker.ql-spacer .ql-picker-label {
    padding-left: 8px;
    padding-right: 18px;
}

.ql-snow .ql-picker.ql-spacer .ql-picker-label::before {
    content: 'Espace';
}

.ql-snow .ql-picker.ql-spacer .ql-picker-item[data-value="small"]::before {
    content: 'Petit';
}

.ql-snow .ql-picker.ql-spacer .ql-picker-item[data-value="medium"]::before {
    content: 'Moyen';
}

.ql-snow .ql-picker.ql-spacer .ql-picker-item[data-value="large"]::before {
    content: 'Grand';
}

/* --------------------------------------------------------------------------
   Editor / front paragraph parity (WYSIWYG)
   --------------------------------------------------------------------------
   Align the Quill editor's paragraph rhythm with the public rendering so the
   author sees the same spacing they will get on the site. Without this, the
   editor uses Quill's default (line-height 1.42, no paragraph margin) while
   the front uses line-height 1.6 + margin-bottom 16px, making every Enter feel
   like it adds "too much space" at render time. Mirrors the figure parity
   rules above (see ADR-010) and the front body rules
   (.article-detail__body / .page-detail__body).
   -------------------------------------------------------------------------- */
.ql-editor {
    line-height: 1.6;
}

.ql-editor p {
    margin: 0 0 4px;
}

/* --------------------------------------------------------------------------
   Figure toolbar (back-office only)
   --------------------------------------------------------------------------
   Floating contextual toolbar shown above a selected <figure> embed in the
   Quill editor. Provides size (S/M/L/Full) and alignment (left/center/right)
   toggle groups. Positioned by quill-init.js relative to the editor
   container; only its appearance is styled here.
   -------------------------------------------------------------------------- */
.figure-toolbar {
    z-index: 10;
    display: flex;
    gap: 8px;
    padding: 4px 6px;
    background: #ffffff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    font-size: 13px;
    line-height: 1;
}

.figure-toolbar__group {
    display: flex;
    gap: 2px;
}

.figure-toolbar__group + .figure-toolbar__group {
    padding-left: 8px;
    border-left: 1px solid #e0e0e0;
}

.figure-toolbar__btn {
    min-width: 28px;
    padding: 4px 6px;
    background: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #333;
    cursor: pointer;
}

.figure-toolbar__btn:hover {
    background: #e8e8e8;
}

.figure-toolbar__btn[aria-pressed="true"] {
    background: #1d6fb8;
    border-color: #1d6fb8;
    color: #ffffff;
}
/* --------------------------------------------------------------------------
   PDF joints aux articles ("Documents joints")
   --------------------------------------------------------------------------
   Zone rendue en fin d'article lorsqu'un ou plusieurs PDF sont attachés
   (Req 5, 8.1). Chaque PDF est un <details class="collapsible-list"> : il
   hérite donc du cadre, du fond de summary et du marqueur "▸" rotatif de
   .collapsible-list (voir plus haut). Les règles ci-dessous ne font que
   COMPLÉTER ce socle : mise en page du summary (titre + actions), lien de
   téléchargement toujours visible, et cadre d'aperçu <iframe>. On réutilise
   les mêmes variables et l'esthétique de .doc-row / .collapsible-list.
   -------------------------------------------------------------------------- */
.article-pdfs {
    margin: 32px 0;
}

.article-pdfs__title {
    font-size: var(--font-size-section-title);
    font-weight: bold;
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px dotted var(--color-border);
    color: var(--color-text);
}

/* Un item par PDF. .collapsible-list fournit déjà bordure + radius ;
   on resserre juste l'espacement vertical entre items. */
.article-pdfs__item {
    margin: 0 0 8px;
}

/* Le <summary> hérite du fond/hover de .collapsible-list summary ;
   on l'organise en flex pour poser titre à gauche, actions à droite. */
.article-pdfs__summary {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.article-pdfs__name {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-body);
    font-weight: 500;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.article-pdfs__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.article-pdfs__toggle-label {
    font-size: 13px;
    color: #666;
}

/* Lien de téléchargement : action mise en avant, toujours visible et
   cliquable, hors de la zone dépliable (Req 5.2, 5.4). */
.article-pdfs__download {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-accent);
    text-decoration: underline;
    white-space: nowrap;
}

.article-pdfs__download:hover,
.article-pdfs__download:focus {
    color: var(--color-accent-hover);
}

.article-pdfs__preview {
    padding: 12px 16px;
    border-top: 1px solid var(--color-border);
}

/* Aperçu PDF via lecteur natif du navigateur : pleine largeur, hauteur
   plafonnée pour rester dans le viewport sur grand écran (Req 5.3, 5.5). */
.article-pdfs__frame {
    display: block;
    width: 100%;
    height: min(80vh, 800px);
    border: 0;
}

/* --- Mobile (< 640px) : on privilégie le lien de téléchargement.
   L'aperçu <iframe> PDF est peu fiable sur mobile (Safari iOS n'affiche
   souvent rien) ; on réduit fortement sa hauteur pour ne pas monopoliser
   l'écran, et on empile titre / actions pour garder le lien de
   téléchargement bien visible et facile à toucher (Req 5.4, 8.1).
   Borne à 639.98px, cohérente avec les autres media queries du fichier. --- */
@media (max-width: 639.98px) {
    .article-pdfs__summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .article-pdfs__actions {
        width: 100%;
        justify-content: space-between;
    }

    .article-pdfs__frame {
        height: 50vh;
    }
}