/* Accueil — page styles */

/* ---- Hero ---- */
.hero--accueil{
    position:relative;
    min-height:690px;
    background:linear-gradient(180deg, #def1ff 0%, #e2f6f4 100%);
    overflow:hidden;
}
.hero-pattern{
    position:absolute; inset:0;
    background:url("../assets/img/pattern-pool.png") center/cover no-repeat;
    opacity:.4;
    mix-blend-mode:plus-lighter;
    pointer-events:none;
}
/* fondu blanc en bas du hero */
.hero--accueil::after{
    content:""; position:absolute; left:0; right:0; bottom:0;
    height:240px;
    background:linear-gradient(180deg, transparent 0%, var(--c-white) 100%);
    pointer-events:none; z-index:1;
}
.hero--accueil .hero-content{
    position:relative; z-index:2;
    max-width:1100px; margin:0 auto;
    padding:230px 20px 120px;
    text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:32px;
}
.hero--accueil .hero-title{
    font-family:var(--f-display); font-weight:700;
    font-size:60px; letter-spacing:-1.2px; line-height:1.1;
    color:var(--c-blue); margin:0;
    max-width:1080px; width:100%; white-space:normal;
}
.hero--accueil .hero-title br{ display:inline; content:" "; }
.hero--accueil .hero-lead{
    font-size:16px; line-height:1.5;
    color:var(--c-blue-2); max-width:736px; margin:0;
}

/* ---- Cards section (slider auto) ---- */
.section--cards{
    padding:100px 0 50px;
    display:flex; flex-direction:column; align-items:center; gap:50px;
}
.cards-viewport{
    width:100%;
    overflow-x:clip; /* clip = pas de scrollbar mais permet overflow vertical */
    overflow-y:visible;
    padding:50px 0;
    margin:-50px 0;
}
.cards-track{
    display:flex; gap:30px;
    transition:transform .8s cubic-bezier(.22,.65,.3,1);
    will-change:transform;
    padding-left:50%;
    margin-left:-180px; /* moitié largeur card pour centrer la 1ère */
    padding-top:0; padding-bottom:0;
}
.card{
    flex:0 0 360px;
    border-radius:var(--r-md);
    padding:30px;
    display:flex; flex-direction:column; gap:36px;
    transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-soft); }
.card--blue{ background:var(--c-blue-pale); }
.card--yellow{ background:var(--c-yellow-pale); }
.card--cyan{ background:var(--c-blue-light); }
.card--mint{ background:var(--c-mint); }

.card__head{ display:flex; align-items:center; justify-content:space-between; }
.card__arrow{
    width:32px; height:32px; border-radius:50%;
    background:var(--c-white);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:16px; color:var(--c-blue);
    transition:transform .2s, background .2s;
}
.card__arrow:hover{ background:var(--c-red); color:var(--c-white); transform:rotate(45deg); }
.card__title{
    font-family:var(--f-display); font-weight:700; font-size:25px; line-height:1.2;
    color:var(--c-blue); margin:4px 0 0;
}
.card__lead{ font-size:16px; line-height:1.5; color:var(--c-blue); }
.card__media{
    display:block; height:200px;
    border-radius:var(--r-md); overflow:hidden;
    background:var(--c-white);
}
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.card__media:hover img{ transform:scale(1.04); }

/* ---- Quote section (scroll-progress mot par mot) ---- */
.section--quote{
    padding:100px 20px; min-height:80vh;
    display:flex; align-items:center; justify-content:center;
}
.quote{
    max-width:850px; margin:0 auto;
    font-family:var(--f-display); font-weight:600; font-size:25px; line-height:1.53;
    text-align:center;
}
.quote__w{
    color:rgba(43,45,117,.2);
    transition:color .35s ease;
    display:inline;
}
.quote__w.is-on{ color:var(--c-blue); }

/* ---- Territoire ---- */
.section--territoire{ padding:100px 20px; }
.territoire{
    max-width:1110px; margin:0 auto;
    display:grid; grid-template-columns:500px 1fr; gap:106px;
    align-items:center;
}
.territoire__visual{
    background:var(--c-yellow);
    border-radius:var(--r-md);
    height:450px;
    display:flex; align-items:center; justify-content:center;
    padding:50px;
}
.territoire__visual img{ max-width:188px; }
.territoire__txt{ display:flex; flex-direction:column; gap:32px; align-items:flex-start; }
.territoire__title{
    font-family:var(--f-ui); font-weight:700; font-size:50px; line-height:1; color:var(--c-blue);
}
.territoire__txt p{ font-size:16px; line-height:1.5; color:var(--c-blue-2); max-width:440px; }

/* ---- Stats ---- */
.section--stats{ padding:100px 0; overflow:hidden; }
.stats-head{ display:flex; flex-direction:column; align-items:center; gap:32px; margin-bottom:100px; }
.stats-title{
    font-family:var(--f-ui); font-weight:700; font-size:50px;
    color:var(--c-blue); letter-spacing:-1px; text-align:center;
}
.stats-tabs{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.stats-tab{
    border:1px solid var(--c-blue);
    border-radius:50px;
    padding:8px 16px;
    font-family:var(--f-display); font-weight:400; font-size:14px;
    color:var(--c-blue);
    transition:background .2s, color .2s;
}
.stats-tab:hover{ background:var(--c-blue-pale); }
.stats-tab.is-active{
    background:var(--c-violet); color:var(--c-white);
    border-color:var(--c-violet); font-weight:600;
}

/* arc de cercle: 4 cartes, extrêmes plus bas (--y) */
.stats-arc{
    display:flex; gap:30px; justify-content:center; align-items:flex-start;
    flex-wrap:nowrap;
    margin:0 -200px;
    padding:80px 60px 220px;
    overflow:hidden;
}
.stats-card{
    flex:0 0 386px;
    padding:38px 40px;
    border-radius:15px;
    display:flex; flex-direction:column; align-items:center; gap:16px;
    transform:translateY(var(--y, 0)) rotate(var(--rot, 0deg));
    transition:transform .3s ease;
    box-shadow:0 12px 40px rgba(0,0,0,.05);
}
.stats-card:hover{ transform:translateY(calc(var(--y, 0) - 6px)) rotate(0); }
.stats-card--violet{ background:var(--c-blue-pale); }
.stats-card--cyan{ background:var(--c-blue-light); }
.stats-card--mint{ background:var(--c-mint); }
.stats-icon{
    width:66px; height:66px; border:1px solid var(--c-blue); border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    background:transparent;
    --stroke-0: #2b2d75;
}
.stats-icon img{ width:28px; height:28px; display:block; }
.stats-num{
    font-family:var(--f-ui); font-weight:700; font-size:46px; line-height:1.2;
    color:var(--c-blue);
}
.stats-label{
    font-family:var(--f-display); font-weight:600; font-size:15px; line-height:1.2;
    color:var(--c-blue); text-align:center; max-width:245px;
}

/* vague séparatrice */
.wave-sep{
    width:100%;
    line-height:0;
}
.wave-sep img{ width:100%; height:auto; display:block; }

/* ---- CTA Island ---- */
.cta-island{
    max-width:1110px; margin:0 auto;
    background:var(--c-blue-pale);
    border-radius:var(--r-xl);
    padding:60px 40px;
    text-align:center;
    overflow:hidden;
    position:relative;
}
.cta-island::before{
    content:""; position:absolute; inset:0;
    background:url("../assets/img/pattern-pool.png") center/cover;
    opacity:.4; mix-blend-mode:plus-lighter; pointer-events:none;
}
.cta-island__inner{
    position:relative; z-index:1;
    display:flex; flex-direction:column; align-items:center; gap:20px;
    max-width:686px; margin:0 auto;
}
.cta-island h2{
    font-family:var(--f-ui); font-weight:700; font-size:60px; line-height:1;
    color:var(--c-blue);
}
.cta-island p{
    color:var(--c-blue-2); font-size:16px; line-height:1.5; max-width:680px;
    margin-top:20px;
}

/* ---- Responsive ---- */
@media (max-width: 980px){
    .hero--accueil .hero-title{ font-size:36px; letter-spacing:-.6px; }
    .cards-track{ grid-template-columns:1fr; }
    .quote{ font-size:18px; }
    .territoire{ grid-template-columns:1fr; gap:32px; }
    .territoire__title{ font-size:34px; }
    .stats-cards{ overflow-x:auto; padding:0 20px; }
    .stats-card{ flex:0 0 280px; }
    .cta-island h2{ font-size:36px; }
}