/* ╔═══════════════════════════════════════════════════════════╗
   ║ LTC PROCESS STEPS — 6 layouts modernes                    ║
   ║ Layouts : cards / timeline / numbered / minimal / gradient / split ║
   ╚═══════════════════════════════════════════════════════════╝ */

.ltc-ps{
    --ltc-primary:#1679BE;
    --ltc-secondary:#000000;
    --ltc-dark:#0f0f10;
    --ltc-light:#fafafa;
    --ltc-text-soft:#5a5a60;
    --ltc-line-color:rgba(22,121,190,0.18);
    --ltc-marker-size:96px;
    --ltc-card-bg:#ffffff;
    --ltc-card-border:rgba(15,15,16,0.08);
    max-width:1280px;
    margin:0 auto;
    padding:24px;
}

/* ──────────────── EN-TÊTE ──────────────── */
.ltc-ps__header{
    margin-bottom:64px;
    text-align:center;
}
.ltc-ps--align-left .ltc-ps__header{text-align:left;}
.ltc-ps--align-right .ltc-ps__header{text-align:right;}

.ltc-ps__eyebrow{
    display:inline-block;
    font-size:12px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--ltc-primary);
    margin-bottom:14px;
    padding:6px 14px;
    border:1px solid currentColor;
    border-radius:999px;
    background:rgba(22,121,190,0.04);
}

.ltc-ps__heading{
    font-size:clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight:700;
    color:var(--ltc-dark);
    margin:0 0 16px;
    letter-spacing:-0.02em;
    line-height:1.2;
}

.ltc-ps__sub{
    font-size:16px;
    color:var(--ltc-text-soft);
    max-width:600px;
    margin:0 auto;
    line-height:1.7;
}
.ltc-ps--align-left .ltc-ps__sub{margin:0;}
.ltc-ps--align-right .ltc-ps__sub{margin:0 0 0 auto;}

/* ──────────────── GRILLE COMMUNE ──────────────── */
.ltc-ps__grid{
    display:grid;
    gap:32px;
    position:relative;
}

/* ──────────────── ÉTAPE COMMUNE ──────────────── */
.ltc-ps__step{
    position:relative;
    transition:transform .55s cubic-bezier(.25,.8,.25,1);
}

/* Animation à l'apparition */
.ltc-ps--animate .ltc-ps__step{
    opacity:0;
    transform:translateY(28px);
    animation:ltcPsFadeUp .8s cubic-bezier(.25,.8,.25,1) forwards;
    animation-delay:var(--ltc-d, 0ms);
}
@keyframes ltcPsFadeUp{
    to{opacity:1; transform:translateY(0);}
}

/* ──────────────── MARQUEUR (cercle/forme avec icône+numéro) ──────────────── */
.ltc-ps__marker{
    width:var(--ltc-marker-size);
    height:var(--ltc-marker-size);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 28px;
    position:relative;
    transition:all .55s cubic-bezier(.25,.8,.25,1);
    flex-shrink:0;
}

/* Formes du marqueur */
.ltc-ps--marker-circle .ltc-ps__marker{border-radius:50%;}
.ltc-ps--marker-square .ltc-ps__marker{border-radius:18px;}
.ltc-ps--marker-pill   .ltc-ps__marker{border-radius:999px; width:calc(var(--ltc-marker-size) * 1.4);}
.ltc-ps--marker-hexagon .ltc-ps__marker{
    clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.ltc-ps--marker-diamond .ltc-ps__marker{
    transform:rotate(45deg);
    border-radius:14px;
}
.ltc-ps--marker-diamond .ltc-ps__icon,
.ltc-ps--marker-diamond .ltc-ps__num{transform:rotate(-45deg);}

/* Remplissages du marqueur */
.ltc-ps--fill-gradient .ltc-ps__marker{
    background:linear-gradient(135deg, var(--ltc-primary) 0%, var(--ltc-secondary) 100%);
    background-size:200% 200%;
    animation:ltcPsGradientShift 6s ease infinite;
    box-shadow:0 12px 32px rgba(22,121,190,0.25), 0 4px 12px rgba(0,0,0,0.06);
}
@keyframes ltcPsGradientShift{
    0%,100%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
}
.ltc-ps--fill-solid .ltc-ps__marker{
    background:var(--ltc-primary);
    box-shadow:0 12px 32px rgba(22,121,190,0.30);
}
.ltc-ps--fill-dark .ltc-ps__marker{
    background:var(--ltc-dark);
    box-shadow:0 12px 32px rgba(0,0,0,0.18);
}
.ltc-ps--fill-light .ltc-ps__marker{
    background:#fff;
    border:2px solid var(--ltc-primary);
    box-shadow:0 8px 20px rgba(22,121,190,0.10);
}
.ltc-ps--fill-light .ltc-ps__icon{color:var(--ltc-primary) !important;}

.ltc-ps--fill-outline .ltc-ps__marker{
    background:transparent;
    border:2px dashed var(--ltc-primary);
}
.ltc-ps--fill-outline .ltc-ps__icon{color:var(--ltc-primary) !important;}

/* Icône & numéro dans le marqueur */
.ltc-ps__icon{
    color:#fff;
    z-index:1;
    transition:transform .55s cubic-bezier(.25,.8,.25,1);
}

.ltc-ps__num{
    position:absolute;
    top:-8px;right:-8px;
    min-width:32px;
    height:32px;
    padding:0 9px;
    background:#fff;
    color:var(--ltc-primary);
    font-weight:700;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    box-shadow:0 4px 14px rgba(22,121,190,0.32), 0 0 0 4px #fff;
    z-index:2;
    transition:transform .55s cubic-bezier(.25,.8,.25,1);
    line-height:1;
}

/* Si pas d'icône affichée, le numéro prend le centre du marqueur */
.ltc-ps__marker:not(:has(.ltc-ps__icon)) .ltc-ps__num{
    position:static;
    background:transparent;
    color:#fff;
    box-shadow:none;
    font-size:calc(var(--ltc-marker-size) * 0.32);
    min-width:auto;
    height:auto;
    padding:0;
}

.ltc-ps--no-nums .ltc-ps__num{display:none;}

/* ──────────────── EFFETS HOVER MARQUEUR ──────────────── */
.ltc-ps--hover-rotate .ltc-ps__step:hover .ltc-ps__marker{transform:rotate(-6deg) scale(1.05);}
.ltc-ps--hover-rotate.ltc-ps--marker-diamond .ltc-ps__step:hover .ltc-ps__marker{transform:rotate(50deg) scale(1.05);}

.ltc-ps--hover-scale .ltc-ps__step:hover .ltc-ps__marker{transform:scale(1.12);}
.ltc-ps--hover-scale.ltc-ps--marker-diamond .ltc-ps__step:hover .ltc-ps__marker{transform:rotate(45deg) scale(1.12);}

.ltc-ps--hover-pulse .ltc-ps__step:hover .ltc-ps__marker{
    animation:ltcPsPulse 1s ease-in-out infinite;
}
@keyframes ltcPsPulse{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.08);}
}

.ltc-ps--hover-glow .ltc-ps__step:hover .ltc-ps__marker{
    box-shadow:0 0 0 8px rgba(22,121,190,0.10), 0 0 40px rgba(22,121,190,0.50), 0 12px 32px rgba(22,121,190,0.40);
}

.ltc-ps--hover-flip .ltc-ps__step:hover .ltc-ps__marker{
    transform:rotateY(180deg);
}
.ltc-ps--hover-flip .ltc-ps__marker{transform-style:preserve-3d;}

/* ──────────────── CONTENU TEXTE ──────────────── */
.ltc-ps__content{position:relative;}

.ltc-ps__title{
    font-size:18px;
    font-weight:700;
    color:var(--ltc-dark);
    margin:0 0 12px;
    letter-spacing:-0.01em;
    line-height:1.3;
    transition:color .35s;
}
.ltc-ps__step:hover .ltc-ps__title{color:var(--ltc-primary);}

.ltc-ps__desc{
    font-size:14.5px;
    color:var(--ltc-text-soft);
    line-height:1.7;
    margin:0;
    font-weight:400;
}

/* ──────────────── LIGNE CONNECTRICE COMMUNE ──────────────── */
.ltc-ps__line{
    position:absolute;
    background:linear-gradient(90deg, transparent 0%, var(--ltc-line-color) 30%, var(--ltc-line-color) 70%, transparent 100%);
    z-index:0;
}

.ltc-ps--no-line .ltc-ps__line{display:none;}

/* ──────────────── FLÈCHES ENTRE ÉTAPES ──────────────── */
.ltc-ps__arrow-between{
    position:absolute;
    top:calc(var(--ltc-marker-size) / 2 - 12px);
    right:-30px;
    width:24px;
    height:24px;
    color:var(--ltc-primary);
    z-index:5;
    pointer-events:none;
    opacity:0.7;
}
.ltc-ps__arrow-between svg{width:100%;height:100%;}

@media(max-width:768px){
    .ltc-ps__arrow-between{display:none;}
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ LAYOUT 1 — CARDS (cartes modernes avec accent latéral)   ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltc-ps--cards .ltc-ps__grid{gap:28px;}
.ltc-ps--cards .ltc-ps__step{
    background:var(--ltc-card-bg);
    border:1px solid var(--ltc-card-border);
    border-radius:16px;
    padding:32px;
    text-align:center;
    box-shadow:0 1px 3px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.04);
    overflow:hidden;
}

/* Trait d'accent gauche (signature moderne) */
.ltc-ps--cards .ltc-ps__step::before{
    content:'';
    position:absolute;
    top:24px; bottom:24px; left:0;
    width:3px;
    background:linear-gradient(180deg, var(--ltc-primary), var(--ltc-secondary));
    border-radius:0 3px 3px 0;
    opacity:0;
    transform:scaleY(0.6);
    transition:all .55s cubic-bezier(.25,.8,.25,1);
}

.ltc-ps--cards .ltc-ps__step:hover{
    transform:translateY(-6px);
    border-color:rgba(22,121,190,0.10);
    box-shadow:0 12px 32px rgba(0,0,0,0.06), 0 24px 56px rgba(22,121,190,0.10);
}
.ltc-ps--cards .ltc-ps__step:hover::before{
    opacity:1;
    transform:scaleY(1);
}

/* Pas de ligne entre les cards */
.ltc-ps--cards .ltc-ps__line{display:none;}

.ltc-ps--cards .ltc-ps__step--highlight{
    background:linear-gradient(135deg, var(--ltc-dark) 0%, #2a2a2e 100%);
    border-color:transparent;
    box-shadow:0 12px 32px rgba(0,0,0,0.16), 0 24px 56px rgba(22,121,190,0.20);
}
.ltc-ps--cards .ltc-ps__step--highlight::before{opacity:1; transform:scaleY(1); width:4px;}
.ltc-ps--cards .ltc-ps__step--highlight .ltc-ps__title{color:#fff;}
.ltc-ps--cards .ltc-ps__step--highlight .ltc-ps__desc{color:rgba(255,255,255,0.78);}


/* ╔══════════════════════════════════════════════════════════╗
   ║ LAYOUT 2 — TIMELINE (chronologique vertical)             ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltc-ps--timeline .ltc-ps__grid{
    grid-template-columns:1fr;
    gap:0;
    position:relative;
    max-width:780px;
    margin:0 auto;
}

/* Ligne verticale au centre */
.ltc-ps--timeline .ltc-ps__grid::before{
    content:'';
    position:absolute;
    left:calc(var(--ltc-marker-size) / 2);
    top:0; bottom:0;
    width:2px;
    background:linear-gradient(180deg, transparent 0%, var(--ltc-line-color) 8%, var(--ltc-line-color) 92%, transparent 100%);
}

.ltc-ps--timeline .ltc-ps__step{
    display:grid;
    grid-template-columns:var(--ltc-marker-size) 1fr;
    gap:32px;
    align-items:flex-start;
    padding:0 0 56px;
    text-align:left;
}
.ltc-ps--timeline .ltc-ps__step:last-child{padding-bottom:0;}

.ltc-ps--timeline .ltc-ps__marker{margin:0;}

.ltc-ps--timeline .ltc-ps__content{padding-top:8px;}

/* Pas de lignes inter-étapes (la ligne verticale est globale) */
.ltc-ps--timeline .ltc-ps__line{display:none;}


/* ╔══════════════════════════════════════════════════════════╗
   ║ LAYOUT 3 — NUMBERED (gros numéros typographiques)        ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltc-ps--numbered .ltc-ps__step{
    text-align:left;
    padding-top:20px;
}

.ltc-ps--numbered .ltc-ps__marker{
    width:auto;
    height:auto;
    background:none !important;
    box-shadow:none !important;
    border:none !important;
    margin:0 0 16px;
    justify-content:flex-start;
    overflow:visible;
}

.ltc-ps--numbered .ltc-ps__icon{display:none;}

.ltc-ps--numbered .ltc-ps__num{
    position:static;
    background:none;
    box-shadow:none;
    color:transparent;
    -webkit-text-stroke:2px var(--ltc-primary);
    font-size:90px;
    font-weight:900;
    letter-spacing:-0.04em;
    line-height:0.9;
    padding:0;
    height:auto;
    min-width:auto;
}
.ltc-ps--numbered .ltc-ps__step:hover .ltc-ps__num{
    color:var(--ltc-primary);
    -webkit-text-stroke:0;
    transition:color .4s;
}

.ltc-ps--numbered .ltc-ps__step::before{
    content:'';
    position:absolute;
    top:60px; left:0;
    width:48px; height:3px;
    background:linear-gradient(90deg, var(--ltc-primary), var(--ltc-secondary));
    border-radius:3px;
    margin-bottom:18px;
    transform-origin:left;
    transform:scaleX(0.4);
    transition:transform .55s cubic-bezier(.25,.8,.25,1);
}
.ltc-ps--numbered .ltc-ps__step:hover::before{transform:scaleX(1);}

.ltc-ps--numbered .ltc-ps__line{display:none;}


/* ╔══════════════════════════════════════════════════════════╗
   ║ LAYOUT 4 — MINIMAL (épuré, ligne et points)              ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltc-ps--minimal .ltc-ps__step{
    text-align:center;
    position:relative;
}

.ltc-ps--minimal .ltc-ps__marker{
    --ltc-marker-size:24px;
    background:var(--ltc-primary) !important;
    box-shadow:0 0 0 6px #fff, 0 0 0 8px rgba(22,121,190,0.30) !important;
    border:none !important;
}

.ltc-ps--minimal .ltc-ps__icon{display:none;}

.ltc-ps--minimal .ltc-ps__num{
    position:absolute;
    top:34px;
    left:50%;
    transform:translateX(-50%);
    background:none;
    box-shadow:none;
    color:var(--ltc-primary);
    font-weight:700;
    font-size:13px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    padding:0;
    height:auto;
    min-width:auto;
}
.ltc-ps--minimal .ltc-ps__num::before{content:'ÉTAPE ';}

.ltc-ps--minimal .ltc-ps__content{padding-top:32px;}

/* Ligne horizontale traversant les marqueurs */
.ltc-ps--minimal .ltc-ps__line{
    top:11px;
    height:2px;
    left:calc(50% + 16px);
    right:calc(-50% + 16px);
    background:linear-gradient(90deg, var(--ltc-line-color) 0%, var(--ltc-line-color) 100%);
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ LAYOUT 5 — GRADIENT (blocs colorés pleins)               ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltc-ps--gradient .ltc-ps__step{
    background:linear-gradient(135deg, var(--ltc-primary) 0%, var(--ltc-secondary) 100%);
    background-size:200% 200%;
    border-radius:18px;
    padding:36px 28px;
    text-align:center;
    color:#fff;
    overflow:hidden;
    position:relative;
    box-shadow:0 10px 28px rgba(22,121,190,0.22);
    animation:ltcPsGradientShift 8s ease infinite;
}

/* Variation pour plus de dynamisme entre cartes (offsets) */
.ltc-ps--gradient .ltc-ps__step:nth-child(2n){animation-delay:-2s;}
.ltc-ps--gradient .ltc-ps__step:nth-child(3n){animation-delay:-4s;}

.ltc-ps--gradient .ltc-ps__step::before{
    content:'';
    position:absolute;
    top:-60px; right:-60px;
    width:160px; height:160px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%);
    pointer-events:none;
}

.ltc-ps--gradient .ltc-ps__marker{
    background:rgba(255,255,255,0.18) !important;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.30);
    box-shadow:none !important;
}
.ltc-ps--gradient .ltc-ps__icon{color:#fff;}

.ltc-ps--gradient .ltc-ps__num{
    background:#fff;
    color:var(--ltc-primary);
}

.ltc-ps--gradient .ltc-ps__title,
.ltc-ps--gradient .ltc-ps__step:hover .ltc-ps__title{color:#fff !important;}
.ltc-ps--gradient .ltc-ps__desc{color:rgba(255,255,255,0.88);}

.ltc-ps--gradient .ltc-ps__step:hover{
    transform:translateY(-6px);
    box-shadow:0 16px 40px rgba(22,121,190,0.32);
}

.ltc-ps--gradient .ltc-ps__line{display:none;}


/* ╔══════════════════════════════════════════════════════════╗
   ║ LAYOUT 6 — SPLIT (numéro à gauche, texte à droite)       ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltc-ps--split .ltc-ps__grid{
    grid-template-columns:1fr;
    gap:24px;
    max-width:880px;
    margin:0 auto;
}

.ltc-ps--split .ltc-ps__step{
    display:grid;
    grid-template-columns:var(--ltc-marker-size) 1fr;
    gap:32px;
    align-items:center;
    padding:24px 28px;
    background:var(--ltc-card-bg);
    border:1px solid var(--ltc-card-border);
    border-radius:14px;
    text-align:left;
    box-shadow:0 1px 3px rgba(0,0,0,0.03);
    transition:all .55s cubic-bezier(.25,.8,.25,1);
}

.ltc-ps--split .ltc-ps__step:hover{
    transform:translateX(6px);
    border-color:rgba(22,121,190,0.20);
    box-shadow:0 8px 24px rgba(0,0,0,0.06), 0 16px 40px rgba(22,121,190,0.10);
}

.ltc-ps--split .ltc-ps__marker{margin:0;}
.ltc-ps--split .ltc-ps__line{display:none;}


/* ╔══════════════════════════════════════════════════════════╗
   ║ LIGNE CONNECTRICE — POSITIONNEMENTS PAR LAYOUT           ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Ligne horizontale par défaut (cards / minimal en mode horizontal) */
.ltc-ps:not(.ltc-ps--timeline):not(.ltc-ps--split) .ltc-ps__line{
    top:calc(var(--ltc-marker-size) / 2 - 1px);
    height:2px;
    left:calc(50% + (var(--ltc-marker-size) / 2));
    right:calc(-50% + (var(--ltc-marker-size) / 2));
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ RESPONSIVE                                                ║
   ╚══════════════════════════════════════════════════════════╝ */
@media(max-width:1024px){
    .ltc-ps:not(.ltc-ps--timeline):not(.ltc-ps--split) .ltc-ps__grid{
        grid-template-columns:repeat(2,1fr) !important;
    }
    .ltc-ps:not(.ltc-ps--timeline):not(.ltc-ps--split) .ltc-ps__line{display:none;}
    .ltc-ps__arrow-between{display:none;}
}

@media(max-width:640px){
    .ltc-ps{padding:16px;}
    .ltc-ps__header{margin-bottom:40px;}
    .ltc-ps:not(.ltc-ps--timeline):not(.ltc-ps--split) .ltc-ps__grid{
        grid-template-columns:1fr !important;
    }

    /* Layout split : on garde la grille à 2 colonnes mais plus petite */
    .ltc-ps--split .ltc-ps__step{
        gap:18px;
        padding:18px 20px;
    }

    /* Layout numbered : numéros plus petits */
    .ltc-ps--numbered .ltc-ps__num{font-size:64px;}
    .ltc-ps--numbered .ltc-ps__step::before{top:50px;}

    .ltc-ps--cards .ltc-ps__step,
    .ltc-ps--gradient .ltc-ps__step{padding:24px 20px;}

    .ltc-ps__title{font-size:17px;}
}