/* =============================================
   Step Flow Widget — CSS v4
   ============================================= */

.sf-step-flow * { box-sizing: border-box; }
.sf-step-flow   { width: 100%; }

/* ─────────────────────────────────────────────
   CERCLE — partagé
───────────────────────────────────────────── */
.sf-icon-circle {
    width: 60px; height: 60px;
    min-width: 60px; min-height: 60px;
    background-color: #1e4d3b;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700;
    flex-shrink: 0;
    position: relative; z-index: 2;
    transition: transform 0.25s;
}
.sf-icon-circle:hover { transform: scale(1.06); }
.sf-icon-circle i, .sf-icon-circle svg { color: inherit; fill: currentColor; }
.sf-num { font-weight: 700; line-height: 1; }

.sf-shape-circle  .sf-icon-circle { border-radius: 50%; }
.sf-shape-square  .sf-icon-circle { border-radius: 4px; }
.sf-shape-rounded .sf-icon-circle { border-radius: 16px; }

/* Cercle avec image */
.sf-icon-circle.sf-has-image {
    background-color: transparent !important;
    padding: 0; overflow: hidden;
}
.sf-icon-circle.sf-has-image img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    border-radius: inherit;
}

/* ─────────────────────────────────────────────
   TEXTE — partagé
───────────────────────────────────────────── */
.sf-step-text { text-align: center; }
.sf-step-title { font-size: 1.05rem; font-weight: 700; color: #7b3f28; margin: 0 0 6px; line-height: 1.3; }
.sf-step-desc  { font-size: 0.875rem; color: #555566; margin: 0; line-height: 1.6; }

/* ─────────────────────────────────────────────
   CONNECTEUR vertical — partagé
───────────────────────────────────────────── */
.sf-connector-wrap {
    display: flex; align-items: center; flex: 1;
}
.sf-connector-line {
    flex: 1; border-color: #5b8fc9; border-style: solid;
}
.sf-con-dashed .sf-connector-line { border-style: dashed; }
.sf-con-dotted .sf-connector-line { border-style: dotted; }
.sf-connector-arrow { color: #5b8fc9; font-size: 11px; line-height: 1; flex-shrink: 0; }

/* ══════════════════════════════════════════════
   LAYOUT : HORIZONTAL
   ─────────────────────────────────────────────
   3 rangées (grid identique N colonnes) :
     .sf-row-top     → zone haute (optionnelle)
     .sf-row-circles → ligne absolue + cercles
     .sf-row-texts   → textes
══════════════════════════════════════════════ */
.sf-layout-horizontal {
    display: flex;
    flex-direction: column;
}

/* Les 3 rangées partagent le même grid, défini via data-cols par JS */
.sf-layout-horizontal .sf-row-top,
.sf-layout-horizontal .sf-row-circles,
.sf-layout-horizontal .sf-row-texts {
    display: grid;
    /* Fallback 4 cols, JS remplace via style inline */
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
}

/* ── Zone haute ── */
.sf-layout-horizontal .sf-row-top {
    margin-bottom: 12px;
}
.sf-layout-horizontal .sf-cell-top-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.sf-cell-top {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80px;
}
.sf-top-empty { /* zone vide, garde l'espace */ }

.sf-top-img {
    max-height: 60px;
    max-width: 100%;
    width: auto; height: auto;
    object-fit: contain;
    display: block;
}
.sf-top-icon {
    display: flex; align-items: center; justify-content: center;
}
.sf-top-icon i, .sf-top-icon svg { color: #1e4d3b; }
.sf-top-text { font-size: 0.9rem; font-weight: 600; color: #333; }

/* ── Rangée cercles + ligne ── */
.sf-layout-horizontal .sf-row-circles {
    position: relative;
    align-items: center;
}

/* Ligne unique en position absolue, de centre à centre */
.sf-h-line {
    position: absolute;
    top: 50%;
    /* left/right calculés par JS */
    left: 0; right: 0;
    height: 0;
    border-top: 2px solid #5b8fc9;
    z-index: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
}
.sf-con-dashed .sf-h-line { border-top-style: dashed; }
.sf-con-dotted .sf-h-line { border-top-style: dotted; }

.sf-h-line .sf-connector-arrow {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
}

.sf-cell-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
    padding: 10px 0;
}

/* ── Rangée textes ── */
.sf-layout-horizontal .sf-row-texts {
    margin-top: 14px;
}
.sf-cell-text {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0 6px;
}
.sf-cell-text .sf-step-text {
    width: 100%;
    text-align: center;
}

/* ══════════════════════════════════════════════
   LAYOUT : VERTICAL
══════════════════════════════════════════════ */
.sf-layout-vertical { display: flex; flex-direction: column; }
.sf-layout-vertical .sf-step-item {
    display: flex; flex-direction: row;
    align-items: flex-start; column-gap: 16px;
}
.sf-layout-vertical .sf-col-icon {
    display: flex; flex-direction: column;
    align-items: center; flex-shrink: 0;
}
.sf-layout-vertical .sf-connector-wrap {
    flex-direction: column; align-items: center;
    width: 100%; flex: 1;
}
.sf-layout-vertical .sf-connector-line {
    border-left-width: 2px;
    border-top: none; border-right: none; border-bottom: none;
    width: 0; min-height: 40px; flex: 1;
}
.sf-layout-vertical .sf-connector-arrow { transform: rotate(90deg); margin-top: -4px; }
.sf-layout-vertical .sf-col-text { padding-top: 10px; flex: 1; }
.sf-layout-vertical .sf-step-text { text-align: left; }

/* ══════════════════════════════════════════════
   LAYOUT : ZIGZAG
══════════════════════════════════════════════ */
.sf-layout-zigzag { display: flex; flex-direction: column; }
.sf-layout-zigzag .sf-step-item {
    display: flex; flex-direction: row;
    align-items: flex-start; column-gap: 24px;
}
.sf-layout-zigzag .sf-zz-normal { flex-direction: row; }
.sf-layout-zigzag .sf-zz-normal .sf-step-text { text-align: left; }
.sf-layout-zigzag .sf-zz-reverse { flex-direction: row-reverse; }
.sf-layout-zigzag .sf-zz-reverse .sf-step-text { text-align: right; }

.sf-layout-zigzag .sf-col-icon {
    display: flex; flex-direction: column;
    align-items: center; flex-shrink: 0;
}
.sf-layout-zigzag .sf-connector-wrap { flex-direction: column; align-items: center; flex: 1; }
.sf-layout-zigzag .sf-connector-line {
    border-left-width: 2px;
    border-top: none; border-right: none; border-bottom: none;
    width: 0; min-height: 40px; flex: 1;
}
.sf-layout-zigzag .sf-connector-arrow { transform: rotate(90deg); margin-top: -4px; }
.sf-layout-zigzag .sf-col-text { flex: 1; padding-top: 10px; min-width: 0; }

/* ══════════════════════════════════════════════
   LAYOUT : TIMELINE
══════════════════════════════════════════════ */
.sf-layout-timeline { display: flex; flex-direction: column; position: relative; }
.sf-has-connector.sf-layout-timeline::before {
    content: '';
    position: absolute;
    left: 50%; top: 0; bottom: 0;
    width: 2px;
    background-color: #5b8fc9;
    transform: translateX(-50%);
    z-index: 0;
}
.sf-con-dashed.sf-layout-timeline::before {
    background: repeating-linear-gradient(to bottom, #5b8fc9 0, #5b8fc9 8px, transparent 8px, transparent 16px);
}
.sf-con-dotted.sf-layout-timeline::before {
    background: repeating-linear-gradient(to bottom, #5b8fc9 0, #5b8fc9 3px, transparent 3px, transparent 9px);
}
.sf-layout-timeline .sf-step-item {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "left icon right";
    align-items: center;
    column-gap: 24px;
    position: relative; z-index: 1;
    padding: 20px 0;
}
.sf-layout-timeline .sf-col-icon {
    grid-area: icon;
    display: flex; align-items: center; justify-content: center;
}
.sf-layout-timeline .sf-connector-wrap { display: none; }
.sf-layout-timeline .sf-tl-left .sf-col-text  { grid-area: left; text-align: right; }
.sf-layout-timeline .sf-tl-left .sf-step-text { text-align: right; }
.sf-layout-timeline .sf-tl-left::after  { content: ''; grid-area: right; }
.sf-layout-timeline .sf-tl-right .sf-col-text  { grid-area: right; text-align: left; }
.sf-layout-timeline .sf-tl-right .sf-step-text { text-align: left; }
.sf-layout-timeline .sf-tl-right::before { content: ''; grid-area: left; }

/* ══════════════════════════════════════════════
   DESKTOP / MOBILE SWITCH — Horizontal
   .sf-desktop-only → visible desktop, caché mobile
   .sf-mobile-only  → caché desktop, visible mobile
══════════════════════════════════════════════ */
.sf-layout-horizontal .sf-mobile-only  { display: none !important; }
.sf-layout-horizontal .sf-mobile-wrap  { display: none !important; }

/* ══════════════════════════════════════════════
   RESPONSIVE MOBILE (max 767px)
══════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── Switch Horizontal : cacher desktop, montrer mobile ── */
    .sf-layout-horizontal .sf-desktop-only { display: none !important; }
    .sf-layout-horizontal .sf-mobile-wrap  { display: flex !important; flex-direction: column; width: 100%; }

    /* Chaque étape = ligne flex (cercle gauche + texte droite) */
    .sf-layout-horizontal .sf-mobile-step {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        column-gap: 16px;
        width: 100%;
    }

    /* Col icône : cercle + connecteur empilés verticalement */
    .sf-layout-horizontal .sf-mob-col-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
    }

    /* Zone haute au-dessus du cercle */
    .sf-layout-horizontal .sf-mob-top {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 6px;
    }
    .sf-layout-horizontal .sf-mob-top .sf-cell-top {
        display: flex; align-items: center; justify-content: center; height: auto;
    }
    .sf-layout-horizontal .sf-mob-top img { max-height: 48px; max-width: 60px; object-fit: contain; }
    .sf-layout-horizontal .sf-mob-top i,
    .sf-layout-horizontal .sf-mob-top svg { font-size: 28px; }

    /* Cercle */
    .sf-layout-horizontal .sf-mob-circle {
        display: flex; align-items: center; justify-content: center;
    }

    /* Connecteur vertical */
    .sf-layout-horizontal .sf-mob-connector {
        width: 2px; flex: 1; min-height: 36px;
        background-color: #5b8fc9;
    }
    .sf-layout-horizontal .sf-mob-connector.sf-mob-con-dashed {
        background: repeating-linear-gradient(to bottom, #5b8fc9 0, #5b8fc9 6px, transparent 6px, transparent 12px);
    }
    .sf-layout-horizontal .sf-mob-connector.sf-mob-con-dotted {
        background: repeating-linear-gradient(to bottom, #5b8fc9 0, #5b8fc9 3px, transparent 3px, transparent 8px);
    }

    /* Flèche vers le bas */
    .sf-layout-horizontal .sf-mob-arrow {
        color: #5b8fc9; font-size: 11px; line-height: 1;
        margin-top: -4px; transform: rotate(90deg); display: block;
    }

    /* Col texte */
    .sf-layout-horizontal .sf-mob-col-text {
        flex: 1; padding-top: 10px; min-width: 0;
    }
    .sf-layout-horizontal .sf-mob-col-text .sf-step-text { text-align: left; }

    /* ── Vertical : déjà correct ── */
    .sf-layout-vertical .sf-step-item { column-gap: 12px; }
    .sf-layout-vertical .sf-col-text  { padding-top: 6px; }

    /* ── Zigzag → tout à gauche ── */
    .sf-layout-zigzag .sf-zz-reverse  { flex-direction: row; }
    .sf-layout-zigzag .sf-zz-reverse .sf-step-text { text-align: left; }
    .sf-layout-zigzag .sf-step-item   { column-gap: 12px; }

    /* ── Timeline → colonne unique à gauche ── */
    .sf-has-connector.sf-layout-timeline::before { left: 30px; transform: none; }
    .sf-layout-timeline .sf-step-item {
        grid-template-columns: auto 1fr;
        grid-template-areas: "icon text";
        column-gap: 16px; padding: 12px 0;
    }
    .sf-layout-timeline .sf-col-icon { grid-area: icon; }
    .sf-layout-timeline .sf-tl-left .sf-col-text,
    .sf-layout-timeline .sf-tl-right .sf-col-text { grid-area: text; text-align: left; }
    .sf-layout-timeline .sf-tl-left .sf-step-text,
    .sf-layout-timeline .sf-tl-right .sf-step-text { text-align: left; }
    .sf-layout-timeline .sf-tl-left::after,
    .sf-layout-timeline .sf-tl-right::before { display: none; }
}