/* ============================================================
   layout.css — couche de structure (chargée en dernier)
   Rythme des espaces, grilles, carrousel d'actualités,
   composants qui n'avaient pas de style (cadre juridique,
   gouvernance, frise, bénéfices, pages légales…).
   Ne modifie aucune couleur : uniquement les variables existantes.
   ============================================================ */


/* ── 1. Rythme vertical commun à toutes les pages ───────────── */

:root {
    --space-section: clamp(2.25rem, 3.4vw, 3rem);
    --space-section-lg: clamp(3rem, 4.5vw, 4rem);
    --space-content-gap: clamp(1.25rem, 2vw, 1.75rem);
    --head-gap: clamp(1.5rem, 2.5vw, 2.25rem);
    --measure: 68ch;
    /* Variables utilisées par d'anciennes règles mais jamais déclarées */
    --sp-5: 1.25rem;
    --r-xs: 2px;
    --radius-sm: var(--r-sm);
    --transition-rapide: .2s ease;
    --or-chaud: #B8912F;
}

@media (max-width: 768px) {
    :root {
        --space-section: clamp(2rem, 6vw, 2.5rem);
        --space-section-lg: clamp(2.5rem, 7vw, 3rem);
    }
}

.section-padding,
.institution-section,
.chambres-page-section {
    padding-block: var(--space-section);
}

/* Les sections « bandeau » gardent leur propre rythme, sans doubler l'espace entre deux sections claires */
.section-header,
.institution-section .section-header,
.chambres-page-section .section-header {
    margin-bottom: var(--head-gap);
}

.section-header h2 {
    margin-bottom: 0;
}

.section-header .section-label {
    margin-bottom: var(--sp-2);
}

.section-header .gold-rule {
    margin-block: var(--sp-3);
}

/* Texte d'introduction : mesure confortable (jamais une colonne étroite à moitié vide) */
.section-intro,
.section-header > p,
.page-hero p,
.institution-hero-intro {
    max-width: var(--measure);
}

.section-intro,
.section-header > p {
    margin-top: var(--sp-3);
    margin-bottom: 0;
}

/* Pages internes : en-têtes de section alignés à gauche (seule la FAQ reste centrée) */
.institution-section:not(.institution-faq) .section-header.text-center,
.chambres-page-section .section-header.text-center {
    text-align: left;
}

.institution-section:not(.institution-faq) .section-header.text-center .gold-rule {
    margin-inline: 0;
}

/* Alternance de fond : séparation nette entre deux sections */
.bg-subtle {
    border-block: 1px solid var(--gris-clair);
}


/* Titre suivi d'un paragraphe dans une grille deux colonnes : respiration régulière */
.two-col-layout h2 {
    margin-bottom: var(--sp-4);
}

/* Le mot MIDAO mis en valeur reste lisible sur fond sombre */
.org-chart-node .midao-emphasis,
.page-cta-section.is-dark .midao-emphasis {
    color: inherit;
}

/* ── 2. Pied de page : adresses et e-mail jamais coupés ─────── */

.footer-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.6fr);
    gap: var(--sp-8) var(--sp-12);
}

.footer-contact-list a,
.footer-contact-list span,
.footer-contact-list strong {
    overflow-wrap: break-word;
    word-break: normal;
}

.footer-contact-list li {
    line-height: 1.5;
}

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}


/* ── 3. Accueil ─────────────────────────────────────────────── */

/* Qui sommes-nous : l'image remplit sa colonne, le texte garde une bonne mesure */
.qs-inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.qs-visual {
    max-width: none;
}

.qs-content {
    padding-right: 0;
    max-width: 62ch;
}

/* Bandeau des six domaines : texte lisible, réparti sur toute la largeur */
.valeur-item {
    font-size: clamp(.72rem, .85vw, .82rem);
}

.valeurs-bandeau {
    padding-block: 18px;
}

/* Colonne d'actualités du hero : plus large, textes lisibles, sans répéter le titre */
.hero-sidebar {
    width: 280px;
}

.hero-sidebar-tagline {
    display: none;
}

.sidebar-actu-label {
    font-size: .85rem;
}

.sidebar-actu-title {
    font-size: .82rem;
    line-height: 1.35;
}

.sidebar-actu-cat,
.sidebar-actu-tag,
.sidebar-actu-date {
    font-size: .68rem;
}

.sidebar-actu-source {
    font-size: .7rem;
}

@media (max-width: 1100px) {
    .hero-sidebar {
        width: 240px;
    }
}

/* En-têtes des sections de l'accueil */
.priorites .section-header,
.priorites .section-header p {
    margin-inline: auto;
}


/* ── 4. Carrousel d'actualités (accueil) ────────────────────── */

.actu-header {
    margin-bottom: var(--head-gap);
}

.actu-header-actions {
    gap: var(--sp-4);
}

.actu-nav-controls {
    display: inline-flex !important;
}

.actu-home-viewport {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 2px 18px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    mask-image: none;
    -webkit-mask-image: none;
}

.actu-home-viewport::-webkit-scrollbar {
    display: none;
}

.actu-grid.actualites-dynamic {
    display: flex;
    gap: var(--sp-6);
    width: max-content;
    animation: none !important;
    transform: none !important;
}

.actu-grid.actualites-dynamic .actu-card {
    flex: 0 0 clamp(280px, 29vw, 380px);
    width: clamp(280px, 29vw, 380px);
    scroll-snap-align: start;
}

.actu-grid.actualites-dynamic .actu-img {
    height: auto;
    aspect-ratio: 3 / 2;
}

.actu-grid.actualites-dynamic .actu-img picture {
    display: block;
    width: 100%;
    height: 100%;
}

.actu-grid.actualites-dynamic .actu-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.actu-grid.actualites-dynamic .actu-extrait {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.actu-dots-container {
    display: flex !important;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

.actu-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(43, 46, 51, .22);
    cursor: pointer;
    transition: background var(--tr), transform var(--tr), width var(--tr);
}

.actu-dot:hover {
    background: rgba(43, 46, 51, .45);
}

.actu-dot.is-active {
    width: 26px;
    border-radius: 6px;
    background: var(--or-diplomatique);
}

@media (max-width: 640px) {
    .actu-grid.actualites-dynamic .actu-card {
        flex-basis: 82vw;
        width: 82vw;
    }
}


/* ── 5. Institution ─────────────────────────────────────────── */

/* Mission / Vision : deux blocs de même poids */
.mvv-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6) clamp(2rem, 5vw, 4rem);
    margin-bottom: var(--head-gap);
}

.mvv-block {
    padding-left: var(--sp-6);
    border-left: 3px solid var(--or-diplomatique);
}

.mvv-block h3 {
    font-size: var(--fs-xl);
    margin-bottom: var(--sp-3);
}

.mvv-block p {
    margin: 0;
    font-size: var(--fs-lg);
    line-height: 1.65;
    max-width: 52ch;
}

.institution-mvv .valeurs-cards {
    margin-top: 0;
}

/* Cartes de valeurs : même hauteur, texte lisible */
.valeurs-cards {
    gap: var(--sp-4);
}

.valeur-card p {
    font-size: var(--fs-sm);
    line-height: 1.65;
}

/* Cadre juridique : trois cartes de même hauteur, boutons alignés en bas */
.legal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
    align-items: stretch;
}

.legal-card {
    display: flex;
    flex-direction: column;
    background: var(--blanc-pur);
    border: 1px solid var(--gris-clair);
    border-top: 3px solid var(--or-diplomatique);
    border-radius: var(--r-lg);
    padding: var(--sp-8);
    box-shadow: var(--shadow-sm);
}

.legal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--sp-4);
    border-radius: var(--r-md);
    background: rgba(201, 162, 75, .14);
    color: var(--or-diplomatique);
    font-family: var(--font-titre);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.legal-card h4 {
    font-size: var(--fs-lg);
    margin-bottom: var(--sp-3);
}

.legal-card p {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--gris-moyen);
}

.legal-card .btn {
    align-self: flex-start;
    margin-top: auto !important;
}

.legal-card p + .btn {
    margin-top: var(--sp-6) !important;
}

/* Gouvernance : grille 3 × 2 au lieu d'une pile de bandeaux vides */
.gouv-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
    align-items: stretch;
}

.gouv-item {
    display: flex;
    flex-direction: column;
    padding: var(--sp-6) var(--sp-8) var(--sp-8);
    border: 1px solid var(--gris-clair);
    border-top: 3px solid var(--bleu-diplomatique);
    box-shadow: var(--shadow-sm);
}

.gouv-num {
    font-size: var(--fs-2xl);
    margin-bottom: var(--sp-3);
    color: var(--or-diplomatique);
    opacity: 1;
}

.gouv-item h3 {
    font-size: var(--fs-lg);
}

.gouv-item p {
    font-size: var(--fs-sm);
    line-height: 1.7;
}

/* Frise : quatre jalons sur une seule ligne, lisible d'un coup d'œil */
.timeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-6);
    padding: var(--sp-8) 0 0;
    margin: 0;
}

.timeline::before {
    left: 0;
    right: 0;
    top: 7px;
    bottom: auto;
    width: auto;
    height: 2px;
}

.timeline-item {
    padding: 0;
    padding-top: var(--sp-4);
}

.timeline-item::before {
    left: 0;
    top: -2.1rem;
}

.timeline-content h4 {
    font-size: var(--fs-base);
}

.timeline-content p {
    line-height: 1.7;
}

/* Indicateurs */
.indicators-grid {
    gap: var(--sp-6);
}

.indicator-item {
    min-height: 0;
    padding: var(--sp-6);
}


/* ── 6. Programmes ──────────────────────────────────────────── */

.programmes-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
    align-items: stretch;
}

.programme-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.programme-card > p {
    flex: 0 0 auto;
}

.programme-card .programme-actions {
    margin-top: auto;
}


/* ── 7. Adhésion : liste des bénéfices ──────────────────────── */

.benefice-items {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5, 1.25rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.benefice-items li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
}

.benefice-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    background: rgba(201, 162, 75, .14);
    color: var(--or-diplomatique);
    font-weight: 700;
    line-height: 1;
}

.benefice-items strong {
    display: block;
    margin-bottom: var(--sp-1);
}

.benefice-items p {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.65;
    color: var(--gris-moyen);
}


/* ── 8. Pages légales ───────────────────────────────────────── */

.legal-page-content {
    max-width: 78ch;
}

.legal-page-content h3 {
    margin-top: var(--sp-8);
    margin-bottom: var(--sp-3);
}

.legal-page-content h3:first-of-type {
    margin-top: var(--sp-6);
}


/* ── 9. Article, publications, don ──────────────────────────── */

.article-detail-section {
    padding-block: var(--space-section);
}

.article-loading-state {
    color: var(--gris-moyen);
}

.related-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-6);
}

.news-article-related {
    margin-top: var(--space-section);
}

.pub-col-main {
    min-width: 0;
}

.don-submit-block {
    display: flex;
    justify-content: center;
    margin-top: var(--sp-8);
}


/* ── 10. Grilles : repli propre sur tablette et mobile ──────── */

@media (max-width: 1024px) {
    .programmes-grid,
    .gouv-grid,
    .legal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: var(--sp-10);
    }
    .qs-inner {
        grid-template-columns: 1fr;
    }
    .qs-visual {
        max-width: 480px;
    }
}

@media (max-width: 720px) {
    .programmes-grid,
    .gouv-grid,
    .legal-grid,
    .mvv-grid,
    .timeline {
        grid-template-columns: 1fr;
    }
    .mvv-block p {
        font-size: var(--fs-base);
    }
    .timeline {
        padding-left: var(--sp-6);
        row-gap: var(--sp-6);
    }
    .timeline::before {
        left: 6px;
        right: auto;
        top: 8px;
        bottom: 8px;
        width: 2px;
        height: auto;
    }
    .timeline-item::before {
        left: calc(-1 * var(--sp-6));
        top: 6px;
    }
    .timeline-item {
        padding-top: 0;
    }
}


/* ── 11. Accessibilité ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ── 12. Partenaires : deux cartes alignées ─────────────────── */

.partner-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6);
    align-items: stretch;
}

.partner-card {
    display: flex;
    flex-direction: column;
    padding: var(--sp-8);
    background: var(--blanc-pur);
    border: 1px solid var(--gris-clair);
    border-top: 3px solid var(--or-diplomatique);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

.partner-card h2 {
    font-size: var(--fs-2xl);
    margin-bottom: var(--sp-4);
}

.partner-card p {
    color: var(--gris-moyen);
    line-height: 1.7;
}

.partner-card .btn {
    align-self: flex-start;
    margin-top: auto;
}

.partner-contact {
    border-top: 1px solid var(--gris-clair);
}

@media (max-width: 800px) {
    .partner-grid {
        grid-template-columns: 1fr;
    }
}


/* ── 13. Actualités et publications : listes sur toute la largeur ── */

.actualites-feed-list {
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
}

.actualites-feed-list .actualite-feed-item {
    grid-template-columns: minmax(0, 1fr);
    border-left: 1px solid var(--gris-clair);
    border-top: 3px solid var(--or-diplomatique);
    overflow: hidden;
}

.actualites-feed-list .actualite-feed-item .actu-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
}

.actualites-feed-list .actualite-feed-item .actu-img picture {
    display: block;
    width: 100%;
    height: 100%;
}

.actualites-feed-list .actualite-feed-item .actu-body {
    padding: var(--sp-6);
}

.actualites-feed-list .actualite-feed-item .actu-title {
    font-size: var(--fs-lg);
    line-height: 1.4;
}

.actualites-page-content > .container > h2 {
    margin-bottom: var(--head-gap);
}

.publication-list {
    max-width: none;
    margin-inline: 0;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
}

.publication-list .publication-home-body {
    padding: var(--sp-6);
}

.publication-list .publication-home-body h3 {
    font-size: var(--fs-lg);
}

@media (max-width: 1024px) {
    .actualites-feed-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .actualites-feed-list {
        grid-template-columns: 1fr;
    }
}


/* ── 14. Formulaires : consentement et alignements ──────────── */

.form-wrapper label > span {
    min-width: 0;
}

/* Processus de candidature : aligné sur la grille du reste de la page */
#process-titre {
    margin-bottom: 0;
}

section[aria-labelledby="process-titre"] .container--sm {
    max-width: var(--max-w);
}

section[aria-labelledby="process-titre"] .process-steps,
section[aria-labelledby="process-titre"] ol {
    max-width: 78ch;
}


/* ── 15. Menu mobile : barres du bouton visibles sur le bandeau ── */

.site-header .nav-toggle span {
    background: #FFFFFF;
}


/* ── 16. Texte plus dense (graisse « medium », sans passer au gras) ── */

body {
    font-weight: 500;
}

p,
li,
dd,
td,
label,
input,
textarea,
select,
figcaption,
blockquote {
    font-weight: 500;
}

/* Le nom MIDAO est toujours en gras, partout (y compris en-tête, pied de page, boutons) */
.midao-emphasis,
.site-header .midao-emphasis,
.site-footer .midao-emphasis {
    font-weight: 700 !important;
}

.midao-text-block {
    display: block;
}