/* ==========================================================================
   Chronologie « Notre parcours » — page À propos
   CSS repris à l'identique du modèle (projet norv : .timeline-norv, .jalon-*,
   .titre-surtitre, .titre-section, .section-feature-alt, .photo-reelle).

   Toutes les valeurs sont identiques au modèle. Seules les COULEURS ont été
   transposées à la charte de ce site (NOIR + ROUGE ; le modèle est bleu #1a3c8f) :
       --primaire        : #000000   (au lieu de #1a3c8f)
       --primaire-fonce  : #000000   (au lieu de #122a63)
       --dore            : #EB292C   (= --couleur-boutons de style.css ; l'or
                                      #ffb800 du modèle est remplacé par le ROUGE)
       --bordure         : #e6e6e6   (gris neutre, au lieu de #e9edf3 bleuté)
       --texte-muet      : #6d6d6d   (gris neutre, au lieu de #6b7280 bleuté)
       ombres teintées   : noir au lieu de bleu marine
       section-feature-alt : dégradé de gris neutres au lieu de vert pâle
   ⚠️ Les NOMS « --dore » / « .dore » sont conservés pour ne pas toucher au HTML
   (`class="jalon-annee dore"`) : ils désignent désormais les jalons ROUGES.
   ========================================================================== */

/* Variables reprises du :root du modèle, limitées à cette section
   pour ne pas polluer le reste du site. */
.section-feature-alt {
    --primaire: #000000;
    --primaire-fonce: #000000;
    /* Accent de la frise : ROUGE de la charte (= boutons), à la place de l'or. */
    --dore: var(--couleur-boutons, #EB292C);
    --bordure: #e6e6e6;
    --texte-muet: #6d6d6d;

    background: linear-gradient(180deg, #f6f6f6 0%, #f2f2f2 100%);
}

/* ============================================================
   Titres de section
   Les règles .titre-surtitre / .titre-section sont dans css/style.css
   (elles servent aussi à la page d'accueil).
   ============================================================ */

/* ============================================================
   Chronologie (Notre parcours)
   ============================================================ */
.timeline-norv {
    position: relative;
}

.timeline-norv::before {
    content: '';
    position: absolute;
    left: 27px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: linear-gradient(180deg, var(--dore), var(--primaire));
}

.jalon-timeline {
    position: relative;
    display: flex;
    gap: 1.2rem;
    padding-bottom: 1.8rem;
}

.jalon-timeline:last-child {
    padding-bottom: 0;
}

.jalon-annee {
    flex-shrink: 0;
    width: 56px;
    height: 40px;
    border-radius: 12px;
    background: #ffffff;
    color: var(--primaire);
    border: 1px solid var(--bordure);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.92rem;
    z-index: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Jalons mis en avant (2010 = création, 2030 = objectif) : fond ROUGE de la
   charte, texte noir. Contraste #000000 sur #EB292C = 4,89:1 (conforme AA).
   ⚠️ Ne pas passer le texte en blanc : il tomberait à 4,30:1, sous le seuil. */
.jalon-annee.dore {
    background: var(--dore);
    color: var(--primaire-fonce);
    border-color: var(--dore);
}

.jalon-contenu {
    padding-top: 0.2rem;
}

.jalon-contenu h6 {
    color: var(--primaire-fonce);
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.jalon-contenu p {
    color: var(--texte-muet);
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* ============================================================
   Visuel
   ============================================================ */
.feature-visuel {
    position: relative;
}

/* Photo réelle : cadre arrondi, pas d'animation de flottement
   (cf. commentaire du modèle : .feature-image est réservé aux SVG) */
.photo-reelle {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 24px;
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.28);
    object-fit: cover;
    border: 6px solid #ffffff;
}

/* ============================================================
   Responsive — repris du modèle
   ============================================================ */
@media (max-width: 991.98px) {

    .section-feature-alt {
        overflow-x: hidden;
    }
}