/* =================================================
   TIMELINE WIDGET CONTAINER
   Conteneur principal du widget timeline
   - centre le widget
   - crée l'espace à gauche pour la ligne et les images
================================================= */

/* Box externe : flex pour aligner le widget à gauche / centre / droite */
.eic-timeline-widget-box {
    display: flex;
    width: 100%;
}

.eic-timeline-widget-box:has(.eic-timeline-widget--left) {
    justify-content: flex-start;
}

.eic-timeline-widget-box:has(.eic-timeline-widget--center) {
    justify-content: center;
}

.eic-timeline-widget-box:has(.eic-timeline-widget--right) {
    justify-content: flex-end;
}

/* Widget interne : largeur max + marge verticale, l'horizontale est gérée par flex */
.eic-timeline-widget {
    position: relative;
    width: auto;         /* largeur pilotée par le contenu */
    max-width: 900px;    /* largeur max du widget */
    margin: 25px 0;      /* seulement marge verticale */
    padding-left: 120px; /* espace pour la timeline et les images */
}

/* =================================================
   TIMELINE IMAGE STYLE
   Image ronde affichée sur la timeline
================================================= */

.eic-timeline-image img {
    width: 110px !important;
    height: 110px !important;

    border-radius: 50%;          /* rend l'image ronde */
    object-fit: cover;           /* recadre sans déformer */
    aspect-ratio: 1 / 1;         /* garantit un vrai cercle */

    border: 4px solid white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1; 
}

 .eic-timeline-content {
        width: 100%;
        /* Décalage pour aligner le centre du titre avec le centre du rond (80px → 40px) */
        margin-top: 20px;
    }

.eic-timeline-circle {
    position: relative;
    z-index: 2;
}

/* Segment de ligne : du centre du rond courant au centre du rond suivant*/
.eic-timeline-item::before {
    content: "";
    position: absolute;
    left: -67px;   /* distance par rapport au contenu */
    top: 55px;    /* centre vertical du rond (110px / 2) */
    bottom: -115px; /* jusqu'au centre du rond suivant (60px marge + 55px) */
    width: 3px;
    background-color: var(--eic-timeline-line-color, #424242);
    z-index: 1;
}

/* Dernier item : pas de segment sous le dernier rond */
.eic-timeline-item:last-child::before {
    display: none;
}

/* =================================================
   TIMELINE ITEM
   Chaque bloc de contenu dans la timeline
================================================= */

.eic-timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px; /* espace entre les sections */
}

/* =================================================
   TIMELINE IMAGE CONTAINER
   Position de l'image ronde sur la ligne
================================================= */

.eic-timeline-image {
    position: absolute !important;
    left: -120px; /* position horizontale par rapport au contenu */
    z-index: 2; /* au-dessus de la ligne pour la masquer sous le rond */
}



/* =================================================
   TITLE STYLE
================================================= */

.eic-timeline-content h3 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #222;
    margin-left: -60px !important;
    margin-top: -20px;
}


/* =================================================
   BULLET LIST
   Liste contenant les bullet points
================================================= */

.eic-timeline-list {
    list-style: none; 
}


/* =================================================
   BULLET ITEM
   Style de chaque point de la liste
================================================= */

.eic-timeline-list li {
    position: relative;
    padding-left: 15px;
    margin-left: -70px !important;
    font-size: 13px;
    list-style-position: outside;
    line-height: 1.7; /* espacement entre les bullet points*/
}


/* =================================================
   CUSTOM BULLET
   Création d'une puce personnalisée
================================================= */

.eic-timeline-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--eic-bullet-color, #ffffff); 
    font-size: 14px;
}

/* Quand une icône de puce est choisie dans le design,
   on utilise la variante avec icône et on masque le point "•" par défaut */
.eic-timeline-list--icon li::before {
    display: none;
}

.eic-timeline-list--icon li {
    padding-left: 26px; 
}

.eic-bullet-icon {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}

.eic-bullet-icon i {
    font-size: 16px;
}


/* =================================================
   VERSION MOBILE
   - ronds réduits à 90px
   - ligne verticale complètement cachée
================================================= */

@media (max-width: 767px) {

    /* Version téléphone : widget aligné à gauche */
    .eic-timeline-widget {
        padding-left: 20px;
    }

    /* On centre les items sur mobile et on réduit l'espace à gauche pour les ronds et la ligne */
    .eic-timeline-item {
        left: 10px; /* moins d'espace entre les sections sur mobile */
    }

    /* On cache totalement la ligne verticale sur mobile */
    .eic-timeline-line {
        display: none;
    }

    /* Pas de segment de ligne sur mobile */
    .eic-timeline-item::before {
        display: none;
    }

    .eic-timeline-content {
        width: 100%;
        /* Décalage pour aligner le centre du titre avec le centre du rond (80px → 40px) */
        margin-top: 5px;
    }

    .eic-timeline-content h3 {
    font-size: 80%;
    margin-left: -45px !important;
    margin-bottom: -15px !important;
    margin-top: -10px;
}

    /* On garde le rond à gauche du contenu, rapproché du texte (80px rond + 6px d’espace) */
    .eic-timeline-item {
        position: relative;
        display: flex;}

    /* Ronds à 80px sur mobile */
    .eic-timeline-image img {
        width: 60px !important;
        height: 60px !important;
        left: 7px; /* position horizontale par rapport au contenu */
        border: 2px; /* bordure plus fine sur mobile */
    }

    /* Bulletpoints centrés et plus espacés */
    .eic-timeline-list {
        margin-left: 0px !important;
 }

    .eic-timeline-image {
        position: relative;
        left: -70px; /* rapproche la photo du texte (rond 80px + 6px d’espace) */
        }

    .eic-timeline-list li {
    font-size: 50% !important; /* taille en fonction de la police du thème, 50% est une estimation pour que les bullet points soient plus petits que le texte sur mobile */
    margin-left: -70px !important; /* espace entre les bullet points et le texte sur mobile */
    padding-left: 9px; /* espacement entre les bullet points et le texte sur mobile */ 
    list-style-position: outside;
    line-height: 1.5; /* espacement entre les bullet points sur mobile */
}

.eic-timeline-list li::before {
    font-size: 90% !important; /* taille en fonction de la police du thème, 80% est une estimation pour que les puces soient plus petites que le texte sur mobile */
}
}