/* ==================================================
   HOME — HISTOIRE LAVERIEXPERT
   VERSION PROPRE / PREMIUM / RESPONSIVE
================================================== */

.home-story{
    position:relative;
    min-height:800px;
    padding:130px 0 40px;
    overflow:visible;
    background:
        radial-gradient(circle at 7% 10%, rgba(37,99,235,.055), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
}

.home-story,
.home-story *,
.home-story *::before,
.home-story *::after{
    box-sizing:border-box;
}

.home-story .le-container{
    width:min(1640px,94%);
    margin:0 auto;
}

/* ==================================================
   LAYOUT
================================================== */

.home-story-layout{
    position:sticky;
    top:112px;
    min-height:700px;
    display:grid;
    grid-template-columns:360px minmax(0,1fr);
    gap:60px;
    align-items:stretch;
}

/* ==================================================
   COLONNE GAUCHE
================================================== */

.home-story-intro{
    position:relative;
    min-width:0;
    min-height:700px;
    padding:20px 0 12px;
    display:flex;
    flex-direction:column;
}

.home-story-label{
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:24px;
    color:#0757f9;
}

.home-story-label span{
    width:38px;
    height:2px;
    flex:0 0 38px;
    border-radius:999px;
    background:#0757f9;
    box-shadow:0 0 13px rgba(7,87,249,.25);
}

.home-story-label strong{
    color:#0757f9;
    font-size:12px;
    font-weight:900;
    line-height:1.2;
    letter-spacing:3px;
    text-transform:uppercase;
    white-space:nowrap;
}

.home-story-intro h2{
    position:relative;
    z-index:3;
    margin:0;
    color:#000d20;
    font-size:52px;
    font-weight:900;
    line-height:1.06;
    letter-spacing:-1.5px;
}

.home-story-intro h2 span{
    color:#1172ff;
}

/* ==================================================
   WATERMARK
================================================== */

.home-story-watermark{
    position:absolute;
    top:190px;
    left:-25px;
    z-index:1;
    width:330px;
    opacity:.045;
    user-select:none;
    pointer-events:none;
}

.home-story-watermark img{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
}

/* ==================================================
   CITATION
================================================== */

.home-story-quote{
    position:relative;
    z-index:3;
    width:100%;
    max-width:330px;
    margin:auto 0 45px 44px;
    padding:0 0 0 24px;
    border:0;
    border-left:4px solid #0757f9;
}

.home-story-quote p{
    margin:0;
    padding-bottom:0 !important;
    color:#000d20;
    font-size:24px;
    font-weight:900;
    line-height:1.32;
    letter-spacing:-.4px;
    text-wrap:balance;
}

.home-story-quote-mark{
    position:absolute;
    color:#0757f9;
    font-family:Georgia,serif;
    font-size:66px;
    font-weight:900;
    line-height:1;
    pointer-events:none;
}

.home-story-quote-open{
    top:-34px;
    left:-54px;
}

.home-story-quote-close{
    right:-40px;
    bottom:-40px;
}

/* ==================================================
   TIMELINE
================================================== */

.home-story-timeline{
    position:relative;
    min-width:0;
    min-height:700px;
}

/* ==================================================
   SVG
================================================== */

.home-story-path-svg{
    position:absolute;
    inset:0;
    z-index:1;
    width:100%;
    height:100%;
    overflow:visible;
    pointer-events:none;
}

.home-story-motion-path{
    fill:none;
    stroke:none;
}

.home-story-path-shadow,
.home-story-path-line{
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.home-story-path-shadow{
    stroke:rgba(37,99,235,.08);
    stroke-width:8;
}

.home-story-path-line{
    stroke:url("#homeStoryPathGradient");
    stroke-width:2.8;
    filter:drop-shadow(0 0 5px rgba(7,87,249,.18));
}

#homeStoryRevealPath{
    fill:none;
    stroke:#ffffff;
    stroke-width:18;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.home-story-moving-arrow{
    opacity:0;
    transition:opacity .22s ease;
}

.home-story.is-running .home-story-moving-arrow,
.home-story.is-finished .home-story-moving-arrow{
    opacity:1;
}

.home-story-arrow-circle{
    fill:#0757f9;
    opacity:.18;
}

.home-story-arrow-shape{
    fill:#0757f9;
}

/* ==================================================
   CARTES
================================================== */

.home-story-card{
    position:absolute;
    z-index:4;
    width:min(360px,36%);
    min-height:226px;
    padding:27px 25px 25px 78px;
    border:1px solid rgba(7,87,249,.08);
    border-radius:20px;
    background:
        radial-gradient(circle at 100% 0, rgba(37,99,235,.06), transparent 34%),
        rgba(255,255,255,.97);
    box-shadow:
        0 18px 44px rgba(0,13,32,.065),
        0 35px 78px rgba(0,13,32,.04),
        inset 0 1px 0 rgba(255,255,255,.95);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
transition:
    opacity .9s ease,
    visibility .9s ease,
    transform 1s cubic-bezier(.22,.61,.36,1),
    border-color .4s ease,
    box-shadow .4s ease;
}

.home-story-card-1,
.home-story-card-3{
    transform:translateX(-30px) translateY(18px) scale(.97);
}

.home-story-card-2,
.home-story-card-4{
    transform:translateX(30px) translateY(18px) scale(.97);
}

.home-story-card.is-revealed{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(0) translateY(0) scale(1);
}

.home-story-card.is-current{
    border-color:rgba(7,87,249,.24);
    box-shadow:
        0 25px 55px rgba(0,13,32,.09),
        0 42px 90px rgba(7,87,249,.10),
        0 0 0 1px rgba(7,87,249,.05),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.home-story-card.is-current .home-story-card-icon{
    transform:translateY(-4px) scale(1.04);
    box-shadow:
        0 23px 46px rgba(37,99,235,.32),
        0 0 0 10px rgba(37,99,235,.065);
}

.home-story-card.is-revealed:hover{
    z-index:6;
    transform:translateY(-7px) scale(1.01);
    border-color:rgba(7,87,249,.20);
    box-shadow:
        0 25px 55px rgba(0,13,32,.09),
        0 42px 90px rgba(7,87,249,.075),
        inset 0 1px 0 rgba(255,255,255,.95);
}

/* Positions */

.home-story-card-1{
    top:18px;
    left:7%;
}

.home-story-card-2{
    top:150px;
    right:1%;
}

.home-story-card-3{
    top:380px;
    left:5%;
}

.home-story-card-4{
    right:6%;
    bottom:0;
}

/* ==================================================
   ICÔNES
================================================== */

.home-story-card-icon{
    position:absolute;
    top:27px;
    left:-39px;
    width:74px;
    height:74px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 36%),
        linear-gradient(145deg, #0b63ff, #001b52);
    box-shadow:
        0 17px 36px rgba(0,35,110,.24),
        0 0 0 8px rgba(37,99,235,.05);
    line-height:0;
    transition:transform .35s ease, box-shadow .35s ease;
}

.home-story-card-2 .home-story-card-icon,
.home-story-card-4 .home-story-card-icon{
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 36%),
        linear-gradient(145deg, #2879ff, #0044c7);
}

.home-story-card.is-revealed:hover .home-story-card-icon{
    transform:translateY(-4px) rotate(-3deg);
    box-shadow:
        0 22px 44px rgba(37,99,235,.30),
        0 0 0 10px rgba(37,99,235,.06);
}

.home-story-card-icon img{
    display:block;

    width:36px;
    height:36px;

    object-fit:contain;

    filter:brightness(0) invert(1);

    pointer-events:none;
}

/* ==================================================
   CONTENU CARTES
================================================== */

.home-story-card-content{
    position:relative;
    z-index:2;
    min-width:0;
    display:grid;
    grid-template-rows:22px 54px minmax(106px,1fr);
    align-content:start;
}

.home-story-card-eyebrow{
    display:flex;
    align-items:flex-start;
    min-height:22px;
    margin:0;
    color:#2563eb;
    font-size:13px;
    font-weight:900;
    line-height:1.3;
}

.home-story-card h3{
    min-height:54px;
    margin:0;
    display:flex;
    align-items:center;
    color:#000d20;
    font-size:20px;
    font-weight:900;
    line-height:1.25;
    letter-spacing:-.25px;
}

.home-story-card p{
    min-height:106px;
    margin:0;
    padding-bottom:0 !important;
    color:#55657d;
    font-size:13.5px;
    font-weight:500;
    line-height:1.62;
}

/* ==================================================
   RESPONSIVE
================================================== */

@media(max-width:1450px){
    .home-story-layout{
        grid-template-columns:330px minmax(0,1fr);
        gap:46px;
    }

    .home-story-intro h2{
        font-size:47px;
    }

    .home-story-card{
        width:min(325px,38%);
        padding-left:72px;
    }

    .home-story-card-1{ left:6%; }
    .home-story-card-2{ right:0; }
    .home-story-card-3{ left:4%; }
    .home-story-card-4{ right:3%; }
}

@media(max-width:1180px){
    .home-story{
        min-height:auto;
        padding:75px 0 90px;
        overflow:hidden;
    }

    .home-story-layout{
        position:relative;
        top:auto;
        min-height:auto;
        grid-template-columns:1fr;
        gap:32px;
    }

    .home-story-intro{
        min-height:auto;
        padding-bottom:25px;
    }

    .home-story-watermark{
        top:70px;
        right:20px;
        left:auto;
        width:230px;
    }

    .home-story-quote{
        margin:58px 0 25px 50px;
    }

    .home-story-timeline{
        min-height:auto;
        padding-left:56px;
        display:flex;
        flex-direction:column;
        gap:24px;
    }

    .home-story-path-svg{
        display:none;
    }

    .home-story-timeline::before{
        content:"";
        position:absolute;
        top:36px;
        bottom:36px;
        left:20px;
        width:2px;
        border-radius:999px;
        background:linear-gradient(180deg, #0757f9, rgba(37,99,235,.12));
    }

    .home-story-card{
        position:relative;
        top:auto;
        right:auto;
        bottom:auto;
        left:auto;
        width:100%;
        min-height:0;
        padding:27px 24px 25px 72px;
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:none !important;
    }

    .home-story-card:hover{
        transform:none !important;
    }

    .home-story-card-icon{
        top:23px;
        left:-64px;
        width:62px;
        height:62px;
    }

    .home-story-card-icon img{
        width:30px;
        height:30px;
    }

    .home-story-card-content{
        grid-template-rows:auto auto auto;
        row-gap:5px;
    }

    .home-story-card-eyebrow,
    .home-story-card h3,
    .home-story-card p{
        min-height:auto;
    }
}

@media(max-width:600px){
    .home-story{
        padding:65px 0 80px;
    }

    .home-story .le-container{
        width:calc(100% - 28px);
    }

    .home-story-layout{
        gap:24px;
    }

    .home-story-label{
        gap:8px;
    }

    .home-story-label span{
        width:23px;
        flex-basis:23px;
    }

    .home-story-label strong{
        font-size:10px;
        letter-spacing:2px;
    }

    .home-story-intro h2{
        font-size:38px;
    }

    .home-story-watermark{
        top:135px;
        right:-25px;
        width:175px;
        opacity:.04;
    }

    .home-story-quote{
        width:auto;
        max-width:290px;
        margin:70px 22px 28px 28px;
        padding-left:20px;
    }

    .home-story-quote p{
        font-size:20px;
        line-height:1.38;
    }

    .home-story-quote-mark{
        font-size:56px;
    }

    .home-story-quote-open{
        left:-38px;
    }

    .home-story-timeline{
        padding-left:40px;
    }

    .home-story-timeline::before{
        left:10px;
    }

    .home-story-card{
        padding:82px 21px 24px;
    }

    .home-story-card-icon{
        top:20px;
        left:20px;
        width:52px;
        height:52px;
    }

    .home-story-card-icon img{
        width:26px;
        height:26px;
    }
}

@media(max-width:420px){
    .home-story .le-container{
        width:calc(100% - 20px);
    }

    .home-story-intro h2{
        font-size:33px;
    }

    .home-story-watermark{
        width:150px;
    }

    .home-story-quote{
        margin-right:8px;
        margin-left:24px;
    }

    .home-story-quote p{
        font-size:18px;
    }

    .home-story-card{
        padding:78px 17px 22px;
        border-radius:17px;
    }

    .home-story-card h3{
        font-size:18px;
    }

    .home-story-card p{
        font-size:13px;
    }
}

@media(hover:none){
    .home-story-card.is-revealed:hover{
        transform:none;
        border-color:rgba(7,87,249,.08);
        box-shadow:
            0 18px 44px rgba(0,13,32,.065),
            0 35px 78px rgba(0,13,32,.04),
            inset 0 1px 0 rgba(255,255,255,.95);
    }

    .home-story-card.is-revealed:hover .home-story-card-icon{
        transform:none;
    }
}

@media(prefers-reduced-motion:reduce){
    .home-story{
        min-height:auto;
    }

    .home-story-layout{
        position:relative;
        top:auto;
    }

    .home-story-path-svg{
        display:none;
    }

    .home-story-card{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:none;
        transition:none;
    }
}