/*==============================================================
  PAGE PRÉSENTATION — USE
  Sections : Hero | Présentation | Historique | Vie associative
==============================================================*/

/* ── SECTIONS GÉNÉRALES ───────────────────────────────────── */
.pres-section { padding: 40px 0; }

.pres-label {
    display: inline-block;
    color: var(--accent-color);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.pres-h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 16px;
}

.pres-sub-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--heading-color);
    border-left: 4px solid var(--accent-color);
    padding-left: 12px;
    margin-bottom: 20px;
}

.pres-img {
    width: 100%;
    max-height: 380px;
    object-fit: cover;
}

/* ── MISSION / VISION / DEVISE ────────────────────────────── */
.mvd-card {
    background: #fff;
    border-radius: 14px;
    padding: 15px;
    height: 100%;
    box-shadow: 0 6px 25px rgba(0,0,0,0.08);
    border-top: 5px solid transparent;
    transition: transform 0.3s;
}

.mvd-card:hover {
    transform: translateY(-5px);
}

.mvd-mission { border-top-color: #0592d8; }
.mvd-vision  { border-top-color: #13874e; }
.mvd-devise  { border-top-color: var(--accent-color); }

.mvd-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 20px;
}

.mvd-mission .mvd-icon { background: rgba(5,146,216,0.1); color: #0592d8; }
.mvd-vision  .mvd-icon { background: rgba(19,135,78,0.1);  color: #13874e; }
.mvd-devise  .mvd-icon { background: color-mix(in srgb, var(--accent-color), transparent 88%); color: var(--accent-color); }

.mvd-card h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.mvd-card p {
    font-size: 14px;
    line-height: 1.7;
    color: #555;
    margin: 0;
}

.devise-text {
    font-size: 1.4rem;
    color: var(--accent-color);
}

/*!* ── AXES STRATÉGIQUES ────────────────────────────────────── *!*/
/*.axe-card {*/
/*    border-radius: 10px;*/
/*    padding: 20px;*/
/*    !*color: #fff;*!*/
/*    height: 100%;*/
/*    border: 2px solid transparent;*/
/*    box-shadow: 0 3px 12px rgba(0,0,0,0.07);*/
/*    transition: 0.3s;*/
/*}*/

/*.axe-card:hover {*/
/*    transform: translateX(4px);*/
/*    box-shadow: 0 5px 20px rgba(0,0,0,0.1);*/
/*}*/

/*.axe-card span {*/
/*    font-size: 11px;*/
/*    font-weight: 700;*/
/*    letter-spacing: 2px;*/
/*    opacity: 0.8;*/
/*    display: block;*/
/*    margin-bottom: 6px;*/
/*}*/

/*.axe-card h5 {*/
/*    !*color: #fff;*!*/
/*    font-size: 15px;*/
/*    font-weight: 700;*/
/*    margin: 0;*/
/*}*/

/*--------------------------------------------------------------
# Axes Stratégiques
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Axes Stratégiques
--------------------------------------------------------------*/

.axe-card {
    border-radius: 14px;
    padding: 18px 14px;
    height: 100%;
    cursor: default;
    overflow: hidden;
    transition: all 0.35s ease;
    position: relative;
}

/* ── Couleurs par axe ── */
.axe-1 {
    background: #fff;
    border: 2px solid #ca6739;
}

.axe-2 {
    background: #fff;
    border: 2px solid #2e7d5e;
}

.axe-3 {
    background: #fff;
    border: 2px solid #2c5f8a;
}

/* ── Numéro axe ── */
.axe-1 .axe-numero { background: color-mix(in srgb, #ca6739, transparent 88%); color: #ca6739; }
.axe-2 .axe-numero { background: color-mix(in srgb, #2e7d5e, transparent 88%); color: #2e7d5e; }
.axe-3 .axe-numero { background: color-mix(in srgb, #2c5f8a, transparent 88%); color: #2c5f8a; }

/* ── Titres et textes ── */
.axe-front h5 { color: var(--heading-color); }
.axe-details li { color: var(--default-color); border-bottom-color: #f0f0f0; }
.axe-1 .axe-details li i { color: #ca6739; }
.axe-2 .axe-details li i { color: #2e7d5e; }
.axe-3 .axe-details li i { color: #2c5f8a; }

/* ── Séparateur front/details ── */
.axe-front { border-bottom-color: #2e1919; }

/* ── Partie visible (toujours affichée) ── */
.axe-front {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.axe-numero {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 14px;
    border-radius: 20px;
    width: fit-content;
}

.axe-front h5 {
    font-size: 15px;
    font-weight: 700;
    /*color: #fff;*/
    margin: 0;
    line-height: 1.4;
}

.axe-hint {
    font-size: 13px;
    opacity: 0.5;
    transition: transform 0.3s ease, opacity 0.3s ease;
    margin-top: 4px;
}

/* ── Détails (cachés, révélés au hover) ── */
.axe-details {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.35s ease, margin-top 0.3s ease;
}

.axe-details li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    /*color: rgba(255, 255, 255, 0.92);*/
    line-height: 1.5;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.axe-details li:last-child {
    border-bottom: none;
}

.axe-details li i {
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.8);
}

/* ── Détails toujours visibles ── */
.axe-details {
    max-height: 300px;
    opacity: 1;
    margin-top: 18px;
}

.axe-hint {
    display: none;
}

.axe-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .axe-card {
        padding: 22px 18px;
    }
}

/* ── ZONES D'INTERVENTION ─────────────────────────────────── */
.zone-card {
    background: #fff;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.07);
    transition: 0.3s;
}

.zone-card:hover {
    transform: translateX(4px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.zone-card > i {
    font-size: 1.6rem;
    color: var(--accent-color);
    flex-shrink: 0;
}

.zone-card strong {
    display: block;
    font-size: 14px;
    color: var(--heading-color);
}

.zone-card p {
    margin: 0;
    font-size: 12px;
    color: #777;
}

/*==============================================================
  HISTORIQUE — TIMELINE
==============================================================*/
.timeline {
    position: relative;
    padding: 0 0 20px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #0592d8, #13874e, var(--accent-color));
    transform: translateX(-50%);
}

.timeline-item {
    display: flex;
    justify-content: flex-end;
    padding-right: calc(50% + 40px);
    margin-bottom: 20px;          /* réduit car collapse */
    position: relative;
}

.timeline-item.timeline-right {
    justify-content: flex-start;
    padding-right: 0;
    padding-left: calc(50% + 40px);
}

.timeline-marker {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 12px;
    background: var(--accent-color);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    white-space: nowrap;
    z-index: 2;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

/* ── Card contenu ─────────────────────────────────────────── */
.timeline-content {
    background: #fff;
    border-radius: 14px;
    padding: 18px 22px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    max-width: 480px;
    width: 100%;
    transition: box-shadow 0.3s;
}

.timeline-content:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.13);
}

/* ── Titre cliquable ──────────────────────────────────────── */
.timeline-content h4 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--heading-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    user-select: none;
    transition: color 0.2s;
}

.timeline-content h4:hover {
    color: var(--accent-color);
}

/* Chevron via pseudo-élément */
.timeline-content h4::after {
    content: '\F282';              /* bi-chevron-down */
    font-family: "Bootstrap-Icons";
    font-size: 15px;
    color: var(--accent-color);
    transition: transform 0.3s;
    flex-shrink: 0;
}

.timeline-item.active .timeline-content h4::after {
    transform: rotate(180deg);
}

.timeline-item.active .timeline-content h4 {
    color: var(--accent-color);
    margin-bottom: 14px;
}

/* ── Corps collapsible ────────────────────────────────────── */
.timeline-content .tla-body {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
    padding-top: 0;
    overflow: hidden;
}

.timeline-content .tla-body > * {
    overflow: hidden;
}

.timeline-item.active .timeline-content .tla-body {
    grid-template-rows: 1fr;
    opacity: 1;
    padding-top: 14px;
    border-top: 2px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}

/* ── Image dans timeline ──────────────────────────────────── */
.timeline-img {
    max-height: 150px;
    object-fit: cover;
    width: 100%;
}

/* ── Chiffre highlight ────────────────────────────────────── */
.chiffre-highlight {
    background: linear-gradient(135deg, #0592d8, #0369a1);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    color: #fff;
}

.ch-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
}

.ch-label {
    font-size: 13px;
    opacity: 0.85;
}

/* ── Responsive mobile ────────────────────────────────────── */
@media (max-width: 768px) {
    .timeline::before {
        left: 20px;
    }

    .timeline-item,
    .timeline-item.timeline-right {
        justify-content: flex-start;
        padding-left: 60px;
        padding-right: 0;
    }

    .timeline-marker {
        left: 20px;
        transform: none;
        font-size: 11px;
        padding: 4px 10px;
    }

    .timeline-content {
        max-width: 100%;
    }
}

/*==============================================================
  VIE ASSOCIATIVE
==============================================================*/

/* ── Gouvernance liste ────────────────────────────────────── */
.gov-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gov-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    border-bottom: 1px dashed #eee;
}

.gov-list li:last-child { border-bottom: none; }

.gov-list li i {
    color: var(--accent-color);
    margin-top: 2px;
    flex-shrink: 0;
}

/* ── ORGANIGRAMME ─────────────────────────────────────────── */
.organigramme-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 20px 10px;
    background: #f8f9fa;
    border-radius: 14px;
}

.org-node {
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.org-node:hover { transform: scale(1.03); }

.org-node i { font-size: 16px; }
.org-node small { display: block; font-weight: 400; font-size: 11px; opacity: 0.8; }

.org-top    { background: #0592d8; color: #fff; min-width: 220px; }
.org-level1 { background: #0369a1; color: #fff; min-width: 200px; }
.org-level2 { background: #fff; color: #333; border: 2px solid #0592d8; min-width: 160px; }
.org-level3 { background: #fff; color: #333; border: 2px solid #13874e; min-width: 110px; font-size: 12px; padding: 8px 12px; }
.org-level4 { background: #fff; color: #333; border: 2px solid var(--accent-color); min-width: 150px; }

.org-arrow {
    color: #aaa;
    font-size: 16px;
    line-height: 1;
}

.org-row {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.org-row-3 { gap: 10px; }

.org-v-line {
    width: 2px;
    height: 30px;
    background: #ddd;
}

/* ── PHOTOS VIE ASSOCIATIVE ───────────────────────────────── */

/* ── VALEURS ──────────────────────────────────────────────── */
.valeur-card {
    background: #fff;
    border-radius: 14px;
    padding: 15px;
    height: 100%;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
    border-top: 4px solid var(--v-color, var(--accent-color));
    transition: transform 0.3s;
}

.valeur-card:hover { transform: translateY(-4px); }

.valeur-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--v-color, var(--accent-color)), transparent 88%);
    color: var(--v-color, var(--accent-color));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 14px;
}

.valeur-card h5 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
}

.valeur-card p {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* ── PARTENAIRES ──────────────────────────────────────────── */
.partenaires-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.partenaire-tag {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #0369a1;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
}

/* ── DOCUMENTS ────────────────────────────────────────────── */
.doc-card {
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    display: flex;
    gap: 16px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s;
    height: 100%;
    align-items: flex-start;
}

.doc-card:hover { transform: translateY(-4px); }

.doc-icon {
    width: 56px;
    height: 56px;
    background: rgba(220,38,38,0.08);
    color: #dc2626;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}

.doc-info h5 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
}

.doc-info p {
    font-size: 13px;
    color: #777;
    margin-bottom: 14px;
    line-height: 1.5;
}

.doc-btn {
    background: var(--accent-color);
    color: #fff;
    font-size: 13px;
    padding: 6px 16px;
    border-radius: 8px;
    border: none;
    transition: 0.3s;
}

.doc-btn:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 20%);
    color: #fff;
}