/* ============================================
   TIMELINE CPN v2 - Avec couleurs personnalisables
   CH Ravenel (Vert) / CPN (Bleu)
   ============================================ */

/* Container principal */
.cpn-timeline {
    position: relative;
    padding: 60px 0;
    max-width: 1200px;
    margin: 0 auto;
}

/* ============================================
   LIGNE VERTICALE POINTILLÉE
   ============================================ */
.cpn-timeline-line-container {
    position: absolute;
    left: 455px;
    top: 0;
    bottom: 0;
    width: 2px;
    z-index: 0;
}

.cpn-timeline-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

.cpn-timeline-progress {
    position: absolute;
    top: 0;
    left: 0 !important;
    width: 2px;
    height: 0%;
    transition: height 0.3s ease;
}

/* ============================================
   ITEM DE TIMELINE
   ============================================ */
.cpn-timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 100px;
    gap: 30px;
}

.cpn-timeline-item:last-child {
    margin-bottom: 0;
}

/* ============================================
   TITRE À GAUCHE avec animation
   ============================================ */
.cpn-timeline-title-left {
    flex: 0 0 400px;
    text-align: right;
    padding-right: 30px;
}

.cpn-timeline .cpn-timeline-item .cpn-timeline-title-left h3 {
    color: var(--secondary-color, #5B5937) !important;
    font-size: var(--e-global-typography-2bcda34-font-size, 26px) !important;
    font-family: var(--e-global-typography-2bcda34-font-family, 'Inter'), sans-serif;
    font-weight: var(--e-global-typography-2bcda34-font-weight, 700) !important;
    line-height: var(--e-global-typography-2bcda34-line-height, 1.2em);
    margin: 0;
    transition: all 0.4s ease;
    opacity: 0.58;
}

/* Titre ACTIF (scrollé) */
.cpn-timeline .cpn-timeline-item.is-active .cpn-timeline-title-left h3 {
    color: var(--primary-color, #747C2B) !important;
    font-size: var(--e-global-typography-dc95404-font-size, 32px) !important;
    font-family: var(--e-global-typography-dc95404-font-family, 'Inter'), sans-serif;
    font-weight: var(--e-global-typography-dc95404-font-weight, 700) !important;
    line-height: normal;
    opacity: 1;
}

/* ============================================
   MARKER (CERCLE + ICÔNE + HALO)
   ============================================ */
.cpn-timeline-marker {
    flex: 0 0 50px;
    z-index: 2;
    position: relative;
    min-height: 50px;
}

/* Halo derrière l'icône active */
.cpn-timeline-item.is-active .cpn-timeline-marker::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75px;
    height: 75px;
    background: var(--halo-color, #747C2B66);
    border-radius: 50%;
    z-index: -1;
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.cpn-timeline-icon {
    position: relative;
    width: 50px;
    height: 50px;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    flex-shrink: 0;
}

.cpn-timeline-icon img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    transition: all 0.4s ease;
}

/* Si l'image a un fond, on le rend transparent */
.cpn-timeline-icon img[src*=".svg"] {
    filter: none;
}

/* Si l'image est en PNG/JPG, elle s'affiche normalement */
.cpn-timeline-icon img[src*=".png"],
.cpn-timeline-icon img[src*=".jpg"] {
    filter: none;
}

/* ============================================
   CONTENU À DROITE
   ============================================ */
.cpn-timeline-content {
    flex: 1;
    max-width: 600px;
}

.cpn-timeline-content > div,
.cpn-timeline-content p {
    color: var(--secondary-color, #5B5937);
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 20px;
}

.cpn-timeline-content strong {
    font-weight: 600;
}

/* ============================================
   BOUTON PRINCIPAL
   ============================================ */
.cpn-timeline-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 25px;
    background: var(--primary-color, #747C2B) !important;
    color: white !important;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: 30px;
    margin-top: 20px;
    margin-bottom: 30px;
    transition: all 0.3s ease;
    border: 2px solid var(--primary-color, #747C2B) !important;
    opacity: 1 !important;
    border-bottom: 2px solid var(--primary-color, #747C2B) !important;
}

/* Surcharger les styles du thème CPN */
body.page-cpn-custom .cpn-timeline-button,
body.page-cpn-custom .timeline-item__card-desc .cpn-timeline-button,
.timeline-item__card-desc .cpn-timeline-button,
.cpn-timeline-content .cpn-timeline-button {
    color: white !important;
    border-bottom-color: var(--primary-color, #747C2B) !important;
}

.cpn-timeline-button:hover {
    background: transparent !important;
    color: var(--primary-color, #747C2B) !important;
    opacity: 1 !important;
    border: 2px solid var(--primary-color, #747C2B) !important;
    border-bottom: 2px solid var(--primary-color, #747C2B) !important;
}

/* Surcharger hover du thème CPN */
body.page-cpn-custom .cpn-timeline-button:hover,
body.page-cpn-custom .timeline-item__card-desc .cpn-timeline-button:hover,
.timeline-item__card-desc .cpn-timeline-button:hover,
.cpn-timeline-content .cpn-timeline-button:hover {
    color: var(--primary-color, #747C2B) !important;
    border-bottom-color: var(--primary-color, #747C2B) !important;
}

.cpn-timeline-button svg {
    flex-shrink: 0;
}

.cpn-timeline-button:hover svg path {
    stroke: var(--primary-color, #747C2B);
}

.cpn-timeline-button svg path {
    stroke: white;
}

/* ============================================
   LIENS CONNEXES
   ============================================ */
.cpn-timeline-related {
    margin-top: 30px;
}

.cpn-timeline-related h4 {
    color: var(--secondary-color, #5B5937);
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    margin: 0 0 15px 0;
}

.cpn-timeline-related ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cpn-timeline-related li {
    margin: 0;
}

.cpn-timeline-related a {
    color: var(--link-color, #747C2B);
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.3s;
    position: relative;
}

.cpn-timeline-related a:hover {
    opacity: 0.8;
}

.cpn-timeline-related a svg {
    flex-shrink: 0;
}

/* Désactiver l'icône automatique après les liens */
.cpn-timeline-related a::after {
    content: none !important;
    display: none !important;
}

/* ============================================
   FICHIER PDF TÉLÉCHARGEABLE
   ============================================ */
.cpn-timeline-file {
    margin-top: 30px;
}

/* DÉSACTIVER les icônes automatiques après TOUS les liens de la timeline */
.cpn-timeline a::after,
.cpn-timeline-content a::after,
.cpn-timeline-related a::after {
    content: none !important;
    display: none !important;
    background: none !important;
    mask-image: none !important;
}

.cpn-timeline-download {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: #FFF;
    box-shadow: 0 4px 35.1px 0 rgba(191, 191, 191, 0.25);
    border-radius: 26px;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    max-width: 400px;
    border: 1px solid var(--download-border-color, rgba(116, 124, 43, 0.12)) !important;
    border-bottom: 1px solid var(--download-border-color, rgba(116, 124, 43, 0.12)) !important;
}

.cpn-timeline a.cpn-timeline-download,
.cpn-timeline-content a.cpn-timeline-download,
.cpn-timeline-file a.cpn-timeline-download,
body.page-cpn-custom .cpn-timeline-download,
body.page-cpn-custom .cpn-timeline a.cpn-timeline-download,
body.page-cpn-custom .cpn-timeline-content a.cpn-timeline-download,
body.page-cpn-custom .cpn-timeline-file a.cpn-timeline-download,
body.page-cpn-custom .timeline-item__card-desc a.cpn-timeline-download {
    border: 1px solid var(--download-border-color, rgba(116, 124, 43, 0.12)) !important;
    border-bottom: 1px solid var(--download-border-color, rgba(116, 124, 43, 0.12)) !important;
    border-bottom-color: var(--download-border-color, rgba(116, 124, 43, 0.12)) !important;
}

.cpn-timeline-download:hover {
    transform: translateY(-2px);
    box-shadow: 0px 6px 20px rgba(190, 190, 190, 0.35);
    border: 1px solid var(--download-border-color, rgba(116, 124, 43, 0.12)) !important;
    border-bottom: 1px solid var(--download-border-color, rgba(116, 124, 43, 0.12)) !important;
}

.cpn-timeline a.cpn-timeline-download:hover,
.cpn-timeline-content a.cpn-timeline-download:hover,
.cpn-timeline-file a.cpn-timeline-download:hover,
body.page-cpn-custom .cpn-timeline-download:hover,
body.page-cpn-custom .cpn-timeline a.cpn-timeline-download:hover,
body.page-cpn-custom .cpn-timeline-content a.cpn-timeline-download:hover,
body.page-cpn-custom .cpn-timeline-file a.cpn-timeline-download:hover,
body.page-cpn-custom .timeline-item__card-desc a.cpn-timeline-download:hover {
    border: 1px solid var(--download-border-color, rgba(116, 124, 43, 0.12)) !important;
    border-bottom: 1px solid var(--download-border-color, rgba(116, 124, 43, 0.12)) !important;
    border-bottom-color: var(--download-border-color, rgba(116, 124, 43, 0.12)) !important;
}

.cpn-timeline-download-icon {
    flex: 0 0 27px;
}

/* Forcer la nouvelle icône PDF */
.cpn-timeline-download-icon svg {
    display: none !important;
}

.cpn-timeline-download-icon::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background-color: var(--primary-color, #747C2B);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.1,5.39l-3.49-3.49c-1.23-1.23-2.86-1.9-4.6-1.9H6.5C4.02,0,2,2.02,2,4.5v15c0,2.48,2.02,4.5,4.5,4.5h11c2.48,0,4.5-2.02,4.5-4.5V9.99c0-1.74-.68-3.37-1.9-4.6Zm-.71,.71c.55,.55,.97,1.2,1.24,1.9h-5.13c-.83,0-1.5-.67-1.5-1.5V1.37c.71,.27,1.35,.69,1.9,1.24l3.49,3.49Zm1.61,13.4c0,1.93-1.57,3.5-3.5,3.5H6.5c-1.93,0-3.5-1.57-3.5-3.5V4.5c0-1.93,1.57-3.5,3.5-3.5h5.51c.33,0,.66,.03,.99,.09V6.5c0,1.38,1.12,2.5,2.5,2.5h5.41c.06,.32,.09,.65,.09,.99v9.51ZM6.97,13h-.97c-.55,0-1,.45-1,1v4.5c0,.28,.22,.5,.5,.5s.5-.22,.5-.5v-1.5h.97c1.11,0,2.01-.92,2.01-2.02s-.9-1.98-2.01-1.98Zm0,3h-.97v-2h.97c.56,0,1.01,.44,1.01,.98s-.46,1.02-1.01,1.02Zm5.03-3h0s-.51,0-1,0c-.55,0-1,.45-1,1v4c0,.55,.45,1,1,1,.48,0,.97,0,1,0h0c1.11,0,2-.89,2-1.98v-2.03c0-1.09-.89-1.98-2-1.98Zm1,4.02c0,.53-.43,.96-.96,.98h-1.04v-4h1.04c.53,.02,.96,.46,.96,.98v2.03Zm6-3.52c0,.28-.22,.5-.5,.5h-2.5v2s1.5,0,1.5,0c.28,0,.5,.22,.5,.5s-.22,.5-.5,.5h-1.5v1.5c0,.28-.22,.5-.5,.5s-.5-.22-.5-.5v-4.5c0-.55,.45-1,1-1h2.5c.28,0,.5,.22,.5,.5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.1,5.39l-3.49-3.49c-1.23-1.23-2.86-1.9-4.6-1.9H6.5C4.02,0,2,2.02,2,4.5v15c0,2.48,2.02,4.5,4.5,4.5h11c2.48,0,4.5-2.02,4.5-4.5V9.99c0-1.74-.68-3.37-1.9-4.6Zm-.71,.71c.55,.55,.97,1.2,1.24,1.9h-5.13c-.83,0-1.5-.67-1.5-1.5V1.37c.71,.27,1.35,.69,1.9,1.24l3.49,3.49Zm1.61,13.4c0,1.93-1.57,3.5-3.5,3.5H6.5c-1.93,0-3.5-1.57-3.5-3.5V4.5c0-1.93,1.57-3.5,3.5-3.5h5.51c.33,0,.66,.03,.99,.09V6.5c0,1.38,1.12,2.5,2.5,2.5h5.41c.06,.32,.09,.65,.09,.99v9.51ZM6.97,13h-.97c-.55,0-1,.45-1,1v4.5c0,.28,.22,.5,.5,.5s.5-.22,.5-.5v-1.5h.97c1.11,0,2.01-.92,2.01-2.02s-.9-1.98-2.01-1.98Zm0,3h-.97v-2h.97c.56,0,1.01,.44,1.01,.98s-.46,1.02-1.01,1.02Zm5.03-3h0s-.51,0-1,0c-.55,0-1,.45-1,1v4c0,.55,.45,1,1,1,.48,0,.97,0,1,0h0c1.11,0,2-.89,2-1.98v-2.03c0-1.09-.89-1.98-2-1.98Zm1,4.02c0,.53-.43,.96-.96,.98h-1.04v-4h1.04c.53,.02,.96,.46,.96,.98v2.03Zm6-3.52c0,.28-.22,.5-.5,.5h-2.5v2s1.5,0,1.5,0c.28,0,.5,.22,.5,.5s-.22,.5-.5,.5h-1.5v1.5c0,.28-.22,.5-.5,.5s-.5-.22-.5-.5v-4.5c0-.55,.45-1,1-1h2.5c.28,0,.5,.22,.5,.5Z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.cpn-timeline-download-divider {
    width: 1px;
    height: 60px;
    background: var(--primary-color, #747C2B);
    opacity: 0.12;
}

.cpn-timeline-download-info {
    flex: 1;
}

.cpn-timeline-download-title {
    color: var(--primary-color, #747C2B);
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    margin-bottom: 8px;
}

.cpn-timeline-download-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cpn-timeline-download-text {
    color: var(--secondary-color, #5B5937);
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    opacity: 0.7;
}

.cpn-timeline-download-size {
    color: var(--secondary-color, #5B5937);
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    opacity: 0.45;
}

/* ============================================
   RESPONSIVE - ÉCRANS < 1515px
   ============================================ */
@media (max-width: 1515px) {
    .cpn-timeline-line-container {
        position: absolute;
        left: 447px;
    }
}

/* ============================================
   RESPONSIVE - ÉCRANS < 1500px
   ============================================ */
@media (max-width: 1500px) {
    .cpn-timeline-marker {
        flex: 0 0 36px;
        min-height: 36px;
    }
    
    .cpn-timeline-icon {
        width: 30px;
        height: 30px;
    }
    
    .cpn-timeline-icon img {
        width: 30px;
        height: 30px;
    }
    
    .cpn-timeline-item.is-active .cpn-timeline-icon {
        width: 36px;
        height: 36px;
    }
    
    .cpn-timeline-item.is-active .cpn-timeline-icon img {
        width: 36px;
        height: 36px;
    }
    
    /* Halo ajusté */
    .cpn-timeline-item.is-active .cpn-timeline-marker::before {
        width: 54px;
        height: 54px;
    }
}

/* ============================================
   RESPONSIVE - TABLETTES (< 1024px)
   ============================================ */
@media (max-width: 1024px) {
    .cpn-timeline {
        padding: 40px 20px;
    }
    
    .cpn-timeline-line-container {
        left: 320px;
    }
    
    .cpn-timeline-title-left {
        flex: 0 0 280px;
        padding-right: 20px;
    }
    
    .cpn-timeline .cpn-timeline-item .cpn-timeline-title-left h3 {
        font-size: 26px !important;
    }
    
    .cpn-timeline .cpn-timeline-item.is-active .cpn-timeline-title-left h3 {
        font-size: 34px !important;
    }
    
    .cpn-timeline-content {
        max-width: 450px;
    }
}

/* ============================================
   RESPONSIVE - MOBILE (< 768px)
   ============================================ */
@media (max-width: 768px) {
    .cpn-timeline {
        padding: 30px 15px;
    }
    
    .cpn-timeline-line-container {
        left: 35px;
    }
    
    .cpn-timeline-item {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 80px;
        padding-left: 70px;
    }
    
    .cpn-timeline-title-left {
        flex: none;
        text-align: left;
        padding-right: 0;
    }
    
    .cpn-timeline .cpn-timeline-item .cpn-timeline-title-left h3 {
        font-size: 24px !important;
    }
    
    .cpn-timeline .cpn-timeline-item.is-active .cpn-timeline-title-left h3 {
        font-size: 30px !important;
    }
    
    .cpn-timeline-marker {
        position: absolute;
        left: 0;
        top: 0;
        flex: 0 0 40px;
        min-height: 40px;
    }
    
    .cpn-timeline-icon {
        width: 40px;
        height: 40px;
    }
    
    .cpn-timeline-icon img {
        width: 40px;
        height: 40px;
    }
    
    /* Halo réduit de 20% aussi (75px → 60px) */
    .cpn-timeline-item.is-active .cpn-timeline-marker::before {
        width: 60px;
        height: 60px;
    }
    
    .cpn-timeline-content {
        max-width: 100%;
    }
    
    .cpn-timeline-download {
        max-width: 100%;
    }
}

/* ============================================
   RESPONSIVE - PETITS MOBILES (< 480px)
   ============================================ */
@media (max-width: 480px) {
    .cpn-timeline .cpn-timeline-item .cpn-timeline-title-left h3 {
        font-size: 20px !important;
    }
    
    .cpn-timeline .cpn-timeline-item.is-active .cpn-timeline-title-left h3 {
        font-size: 26px !important;
    }
    
    .cpn-timeline-content > div,
    .cpn-timeline-content p {
        font-size: 14px;
    }
    
    .cpn-timeline-button {
        font-size: 14px;
        padding: 12px 20px;
        width: 100%;
        justify-content: center;
    }
    
    .cpn-timeline-related h4,
    .cpn-timeline-related a {
        font-size: 14px;
    }
    
    .cpn-timeline-download {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 15px;
    }
    
    .cpn-timeline-download-divider {
        display: none;
    }
}