/* ================================================================
   ADCOM Timeline – Parcours Patient  v1.4.0
   Grille 3 colonnes (comme v1.2) + image flottante à l'extérieur
   ================================================================ */

.adct-timeline {
    --adct-primary:       #1d6fa4;
    --adct-num-color:     #ffffff;
    --adct-line-w:        2px;
    --adct-circle-size:   52px;
    --adct-card-bg:       #f8fafc;
    --adct-card-border:   #e2e8f0;
    --adct-card-radius:   14px;
    --adct-title-color:   #1a2e44;
    --adct-desc-color:    #4a5568;
    --adct-gap:           2.2rem;
}

/* ---------------------------------------------------------------- Wrapper */
.adct-timeline {
    position: relative;
    padding: 3rem 0;
    max-width: 960px;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: inherit;
}

/* ---------------------------------------------------------------- Ligne + progress */
.adct-line {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: var(--adct-line-w);
    transform: translateX(-50%);
    z-index: 0;
    background: #dde6ef;
    overflow: hidden;
}
.adct-line-fill {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 0%;
    background: var(--adct-primary);
    transition: height .1s linear;
}

/* ================================================================
   LAYOUT ALTERNATE – grille 3 colonnes (même qu'avant)
   [1fr] [cercle] [1fr]
   ================================================================ */
.adct-layout-alternate .adct-step {
    display: grid;
    grid-template-columns: 1fr var(--adct-circle-size) 1fr;
    column-gap: 1.5rem;
    align-items: start;
    margin-bottom: var(--adct-gap);
    position: relative;
    z-index: 1;
}

/* Cercle : col 2 */
.adct-layout-alternate .adct-connector {
    grid-column: 2; grid-row: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative; z-index: 3;
}

/* Côté gauche : carte col 1, spacer col 3 */
.adct-layout-alternate .adct-side-left  .adct-card   { grid-column: 1; grid-row: 1; }
.adct-layout-alternate .adct-side-left  .adct-spacer { grid-column: 3; grid-row: 1; }

/* Côté droit : spacer col 1, carte col 3 */
.adct-layout-alternate .adct-side-right .adct-card   { grid-column: 3; grid-row: 1; }
.adct-layout-alternate .adct-side-right .adct-spacer { grid-column: 1; grid-row: 1; }

/* ================================================================
   LAYOUT LEFT / RIGHT
   ================================================================ */
.adct-layout-left  .adct-line { left: calc(var(--adct-circle-size) / 2); right: auto; }
.adct-layout-right .adct-line { left: auto; right: calc(var(--adct-circle-size) / 2); }

.adct-layout-left  .adct-step,
.adct-layout-right .adct-step {
    display: flex; align-items: flex-start;
    gap: 1.5rem; margin-bottom: var(--adct-gap);
    position: relative; z-index: 1;
}
.adct-layout-right .adct-step { flex-direction: row-reverse; }
.adct-layout-left  .adct-connector,
.adct-layout-right .adct-connector { flex-shrink: 0; position: relative; z-index: 3; }
.adct-layout-left  .adct-spacer,
.adct-layout-right .adct-spacer { display: none; }

/* ================================================================
   CARD-WRAP + IMAGE
   card-wrap occupe la même colonne de grille que la carte seule.
   L'image est positionnée en absolu à l'extérieur du rectangle,
   côté bord (gauche pour side-left, droite pour side-right).
   La carte elle-même garde 100% de la colonne.
   ================================================================ */

/* card-wrap : même colonnes que la carte avant */
.adct-layout-alternate .adct-side-left  .adct-card-wrap { grid-column: 1; grid-row: 1; }
.adct-layout-alternate .adct-side-right .adct-card-wrap { grid-column: 3; grid-row: 1; }
.adct-layout-alternate .adct-side-left  .adct-spacer    { grid-column: 3; grid-row: 1; }
.adct-layout-alternate .adct-side-right .adct-spacer    { grid-column: 1; grid-row: 1; }

/* card-wrap : position relative pour ancrer l'image en absolu */
.adct-card-wrap {
    position: relative;
    min-width: 0;
}

/* La carte prend toute la largeur du wrap, comme avant */
.adct-card-wrap .adct-card {
    width: 100%;
    box-sizing: border-box;
}

/* ---- Image positionnée en absolu hors du rectangle ---- */
.adct-step-img {
    --adct-img-size: 35%;
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--adct-img-size);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* z-index négatif pour rester derrière si chevauchement */
}

/* Côté gauche : image sort vers la gauche */
.adct-side-left .adct-step-img {
    right: calc(100% + .9rem);
    left: auto;
}

/* Côté droit : image sort vers la droite */
.adct-side-right .adct-step-img {
    left: calc(100% + .9rem);
    right: auto;
}

/* Layout left : image à gauche du wrap */
.adct-layout-left .adct-step-img {
    right: calc(100% + .9rem);
    left: auto;
}

.adct-step-img img {
    width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    transition: opacity .4s ease, filter .4s ease;
}
/* Pas d'image : disparaît */
.adct-step-img--empty { display: none !important; }

/* ---------------------------------------------------------------- Cercle */
.adct-circle {
    width: var(--adct-circle-size);
    height: var(--adct-circle-size);
    border-radius: 50%;
    background: var(--adct-primary);
    color: var(--adct-num-color);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; font-weight: 700; line-height: 1;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--adct-primary);
    position: relative; z-index: 3;
    will-change: transform;
    transition: box-shadow .3s ease;
}
.adct-step.adct-future .adct-circle {
    background: #b0bec5 !important;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px #b0bec5 !important;
}

/* ---------------------------------------------------------------- Carte */
.adct-card {
    flex: 1; min-width: 0;
    background: var(--adct-card-bg);
    border: 1px solid var(--adct-card-border);
    border-radius: var(--adct-card-radius);
    padding: 1.1rem 1.4rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    position: relative;
    transition: opacity .4s ease, filter .4s ease, box-shadow .3s ease;
}
.adct-step.adct-future .adct-card,
.adct-step.adct-future .adct-step-img img {
    opacity: .36;
    filter: grayscale(55%);
}
.adct-step:not(.adct-future):hover .adct-card {
    box-shadow: 0 6px 22px rgba(0,0,0,.12);
}

/* Flèches – carte à droite de la ligne (adct-side-right) */
.adct-layout-alternate .adct-side-right .adct-card::before {
    content: '';
    position: absolute;
    top: calc(var(--adct-circle-size) / 2 - 8px);
    left: -9px;
    border: 8px solid transparent;
    border-right-color: var(--adct-card-border);
    pointer-events: none;
}
.adct-layout-alternate .adct-side-right .adct-card::after {
    content: '';
    position: absolute;
    top: calc(var(--adct-circle-size) / 2 - 7px);
    left: -7px;
    border: 7px solid transparent;
    border-right-color: var(--adct-card-bg);
    pointer-events: none;
}
/* Flèches – carte à gauche de la ligne (adct-side-left) */
.adct-layout-alternate .adct-side-left .adct-card::before {
    content: '';
    position: absolute;
    top: calc(var(--adct-circle-size) / 2 - 8px);
    right: -9px;
    border: 8px solid transparent;
    border-left-color: var(--adct-card-border);
    pointer-events: none;
}
.adct-layout-alternate .adct-side-left .adct-card::after {
    content: '';
    position: absolute;
    top: calc(var(--adct-circle-size) / 2 - 7px);
    right: -7px;
    border: 7px solid transparent;
    border-left-color: var(--adct-card-bg);
    pointer-events: none;
}
/* Flèches layout left */
.adct-layout-left .adct-card::before {
    content: '';
    position: absolute;
    top: calc(var(--adct-circle-size) / 2 - 8px);
    left: -9px;
    border: 8px solid transparent;
    border-right-color: var(--adct-card-border);
    pointer-events: none;
}
.adct-layout-left .adct-card::after {
    content: '';
    position: absolute;
    top: calc(var(--adct-circle-size) / 2 - 7px);
    left: -7px;
    border: 7px solid transparent;
    border-right-color: var(--adct-card-bg);
    pointer-events: none;
}

/* ---------------------------------------------------------------- Contenu carte */
.adct-card-header {
    display: flex; align-items: center;
    gap: .6rem; margin-bottom: .45rem;
}
.adct-icon { font-size: 1.35rem; line-height: 1; flex-shrink: 0; }
.adct-step-title {
    margin: 0 !important; font-size: 1.02rem !important;
    font-weight: 700 !important; color: var(--adct-title-color) !important;
    line-height: 1.35 !important;
}
.adct-step-desc {
    margin: 0 !important; font-size: .91rem !important;
    color: var(--adct-desc-color) !important; line-height: 1.65 !important;
}

/* ---------------------------------------------------------------- États scroll */
.adct-step {
    opacity: 1; transform: translateY(0);
    transition: opacity .5s ease, transform .5s ease;
}
.adct-step.adct-visible { opacity: 1; transform: translateY(0); }

/* ================================================================
   RESPONSIVE MOBILE ≤ 640px
   Toutes les étapes : ligne à gauche, cercle à gauche, carte à droite
   ================================================================ */
@media (max-width: 640px) {

    /* Ligne toujours à gauche, alignée sur le cercle */
    .adct-timeline .adct-line {
        left: calc(var(--adct-circle-size) / 2) !important;
        right: auto !important;
    }

    /* Toutes les étapes alternate → flex row, cercle TOUJOURS en premier */
    .adct-layout-alternate .adct-step {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start;
        gap: .75rem;
    }

    /* Forcer l'ordre : cercle avant la carte, quelle que soit la side */
    .adct-layout-alternate .adct-connector { order: 1 !important; flex-shrink: 0; }
    .adct-layout-alternate .adct-card-wrap { order: 2 !important; flex: 1; min-width: 0; }
    .adct-layout-alternate .adct-spacer    { display: none !important; }

    /* Flèche toujours à gauche de la carte sur mobile */
    .adct-layout-alternate .adct-card::before {
        content: '' !important;
        position: absolute !important;
        top: calc(var(--adct-circle-size) / 2 - 8px) !important;
        left: -9px !important; right: auto !important;
        border: 8px solid transparent !important;
        border-right-color: var(--adct-card-border) !important;
        border-left-color: transparent !important;
    }
    .adct-layout-alternate .adct-card::after {
        content: '' !important;
        position: absolute !important;
        top: calc(var(--adct-circle-size) / 2 - 7px) !important;
        left: -7px !important; right: auto !important;
        border: 7px solid transparent !important;
        border-right-color: var(--adct-card-bg) !important;
        border-left-color: transparent !important;
    }

    /* Image masquée sur mobile (position absolute déborderait) */
    .adct-step-img { display: none !important; }

    .adct-step-title { font-size: .97rem !important; }
}