/* =========================================================
   BIBLIOPROF — COMMENT ÇA MARCHE ?
   ========================================================= */

.bp-how {
    --navy:#10243b;
    --navy2:#17334f;
    --teal:#249ba3;
    --teal-dark:#1c858c;
    --teal-light:#6ccbd0;
    --soft:#f5fafb;
    --soft2:#eaf7f8;
    --text:#687985;
    --muted:#8b999f;
    --border:rgba(16,36,59,.09);
    --white:#fff;
    --shadow:0 22px 65px rgba(16,36,59,.07);

    color:var(--text);
    font-family:inherit;
    overflow:hidden;
}

.bp-how *,
.bp-how *::before,
.bp-how *::after {
    box-sizing:border-box;
}

.bp-how h1,
.bp-how h2,
.bp-how h3,
.bp-how p {
    padding:0;
}

.bp-how-container {
    width:92%;
    max-width:1440px;
    margin:0 auto;
}


/* =========================================================
   HERO
   ========================================================= */

.bp-how-hero {
    position:relative;
    padding:105px 0 90px;
    background:
        radial-gradient(circle at 12% 20%,rgba(36,155,163,.075),transparent 23%),
        radial-gradient(circle at 88% 40%,rgba(36,155,163,.075),transparent 25%),
        #fff;
}

.bp-how-hero::after {
    content:"";
    position:absolute;
    left:50%;
    bottom:-120px;
    width:750px;
    height:230px;
    transform:translateX(-50%);
    border-radius:50%;
    background:rgba(36,155,163,.035);
    pointer-events:none;
}

.bp-how-hero-inner {
    position:relative;
    z-index:2;
    max-width:920px;
    margin:auto;
    text-align:center;
}

.bp-how-eyebrow {
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-bottom:18px;
    color:var(--teal);
    font-size:12px;
    font-weight:700;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.bp-how-eyebrow::before,
.bp-how-eyebrow::after {
    content:"";
    width:22px;
    height:1.5px;
    background:var(--teal);
}

.bp-how-hero h1 {
    margin:0 0 21px !important;
    color:var(--navy);
    font-size:clamp(43px,5vw,70px);
    font-weight:700;
    line-height:1.05;
    letter-spacing:-.04em;
}

.bp-how-hero h1 span {
    color:var(--teal);
}

.bp-how-lead {
    max-width:700px;
    margin:0 auto !important;
    color:var(--text);
    font-size:17px;
    line-height:1.75;
}


/* =========================================================
   SÉLECTEUR
   ========================================================= */

.bp-how-journey-switch-wrap {
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-bottom:55px;
    text-align:center;
}

.bp-how-journey-switch-wrap .bp-how-section-label {
    margin-bottom:16px;
}

.bp-how-switch {
    display:inline-flex;
    position:relative;
    padding:6px;
    border:1px solid var(--border);
    border-radius:999px;
    background:#fff;
    box-shadow:0 15px 45px rgba(16,36,59,.07);
}

.bp-how-switch button {
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:9px;
    min-width:170px;
    min-height:48px;
    justify-content:center;
    padding:0 23px;
    border:0;
    border-radius:999px;
    background:transparent;
    color:var(--text);
    font-family:inherit;
    font-size:13px;
    font-weight:650;
    cursor:pointer;
    transition:color .25s ease,background .25s ease,transform .2s ease;
}

.bp-how-switch button:hover {
    color:var(--navy);
}

.bp-how-switch button.is-active {
    background:var(--navy);
    color:#fff;
    box-shadow:0 8px 20px rgba(16,36,59,.15);
}

.bp-how-switch-icon {
    font-size:17px;
}


/* =========================================================
   LABELS
   ========================================================= */

.bp-how-section-label {
    display:block;
    margin-bottom:12px;
    color:var(--teal);
    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}


/* =========================================================
   PARCOURS
   ========================================================= */

.bp-how-journey {
    padding:95px 0 115px;
    background:var(--soft);
}

.bp-how-journey-head {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:50px;
    margin-bottom:65px;
}

.bp-how-journey-title {
    max-width:690px;
}

.bp-how-journey-title h2 {
    margin:0 0 14px !important;
    color:var(--navy);
    font-size:clamp(34px,3.5vw,49px);
    font-weight:700;
    line-height:1.1;
    letter-spacing:-.03em;
}

.bp-how-journey-title p {
    max-width:600px;
    margin:0 !important;
    color:var(--text);
    font-size:15px;
    line-height:1.75;
}

.bp-how-mode-badge {
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 14px;
    border-radius:999px;
    background:var(--soft2);
    color:var(--teal);
    font-size:11px;
    font-weight:700;
}


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

.bp-how-timeline {
    position:relative;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
}

.bp-how-timeline::before {
    content:"";
    position:absolute;
    top:37px;
    left:9%;
    right:9%;
    height:2px;
    background:linear-gradient(
        90deg,
        rgba(36,155,163,.18),
        rgba(36,155,163,.65),
        rgba(36,155,163,.18)
    );
}

.bp-how-step {
    position:relative;
    z-index:2;
}

.bp-how-step-top {
    display:flex;
    align-items:center;
    justify-content:center;
    width:74px;
    height:74px;
    margin:0 auto 23px;
    border:7px solid var(--soft);
    border-radius:50%;
    background:#fff;
    color:var(--teal);
    font-size:12px;
    font-weight:750;
    box-shadow:
        0 0 0 1px rgba(36,155,163,.16),
        0 10px 25px rgba(16,36,59,.07);
}

.bp-how-step-card {
    position:relative;
    min-height:245px;
    padding:27px 23px 25px;
    border:1px solid var(--border);
    border-radius:18px;
    background:#fff;
    transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}

.bp-how-step-card:hover {
    transform:translateY(-5px);
    border-color:rgba(36,155,163,.23);
    box-shadow:var(--shadow);
}

.bp-how-step-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    margin-bottom:18px;
    border-radius:12px;
    background:var(--soft2);
}

.bp-how-step-icon svg {
    width:20px;
    height:20px;
    fill:none;
    stroke:var(--teal);
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.bp-how-step-card h3 {
    margin:0 0 9px !important;
    color:var(--navy);
    font-size:17px;
    font-weight:700;
    line-height:1.3;
}

.bp-how-step-card p {
    margin:0 !important;
    color:var(--text);
    font-size:12.5px;
    line-height:1.68;
}

.bp-how-panel {
    display:none;
    animation:bpHowAppear .42s ease both;
}

.bp-how-panel.is-active {
    display:block;
}

@keyframes bpHowAppear {
    from {
        opacity:0;
        transform:translateY(8px);
    }
    to {
        opacity:1;
        transform:translateY(0);
    }
}


/* =========================================================
   BIBLIOPROF EN DEUX MOTS
   ========================================================= */

.bp-how-intro {
    padding:105px 0;
    background:#fff;
}

.bp-how-intro-grid {
    display:grid;
    grid-template-columns:.75fr 1.25fr;
    gap:100px;
    align-items:center;
}

.bp-how-intro-copy h2 {
    margin:0 0 18px !important;
    color:var(--navy);
    font-size:clamp(33px,3.4vw,48px);
    font-weight:700;
    line-height:1.12;
    letter-spacing:-.028em;
}

.bp-how-intro-copy p {
    max-width:530px;
    margin:0 !important;
    color:var(--text);
    font-size:15px;
    line-height:1.8;
}

.bp-how-community {
    position:relative;
    display:grid;
    grid-template-columns:1fr 130px 1fr;
    align-items:center;
    gap:20px;
}

.bp-how-person {
    padding:29px 24px;
    border:1px solid var(--border);
    border-radius:20px;
    background:#fff;
    text-align:center;
    box-shadow:0 16px 45px rgba(16,36,59,.045);
}

.bp-how-person-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:51px;
    height:51px;
    margin:0 auto 15px;
    border-radius:15px;
    background:var(--soft2);
}

.bp-how-person-icon svg {
    width:25px;
    height:25px;
    fill:none;
    stroke:var(--teal);
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.bp-how-person h3 {
    margin:0 0 7px !important;
    color:var(--navy);
    font-size:16px;
    font-weight:700;
}

.bp-how-person p {
    margin:0 !important;
    color:var(--muted);
    font-size:12px;
    line-height:1.55;
}

.bp-how-center {
    position:relative;
    text-align:center;
}

.bp-how-center::before,
.bp-how-center::after {
    content:"";
    position:absolute;
    top:50%;
    width:34px;
    height:1px;
    background:rgba(36,155,163,.35);
}

.bp-how-center::before { left:-20px; }
.bp-how-center::after { right:-20px; }

.bp-how-center-mark {
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    width:92px;
    height:92px;
    margin:auto;
    border-radius:50%;
    background:var(--navy);
    color:#fff;
    box-shadow:0 18px 40px rgba(16,36,59,.15);
}

.bp-how-center-mark svg {
    width:36px;
    height:36px;
    fill:none;
    stroke:var(--teal-light);
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.bp-how-center small {
    display:block;
    margin-top:11px;
    color:var(--teal);
    font-size:9px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}


/* =========================================================
   PRINCIPE
   ========================================================= */

.bp-how-principle {
    padding:105px 0;
    background:#fff;
}

.bp-how-principle-box {
    position:relative;
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:80px;
    align-items:center;
    overflow:hidden;
    padding:70px 7%;
    border-radius:29px;
    background:var(--navy);
}

.bp-how-principle-box::after {
    content:"";
    position:absolute;
    right:-120px;
    top:-170px;
    width:400px;
    height:400px;
    border:1px solid rgba(255,255,255,.055);
    border-radius:50%;
}

.bp-how-principle-copy {
    position:relative;
    z-index:2;
}

.bp-how-principle-copy span {
    display:block;
    margin-bottom:12px;
    color:var(--teal-light);
    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.bp-how-principle-copy h2 {
    margin:0 0 18px !important;
    color:#fff;
    font-size:clamp(32px,3.5vw,48px);
    font-weight:700;
    line-height:1.1;
    letter-spacing:-.03em;
}

.bp-how-principle-copy p {
    max-width:500px;
    margin:0 !important;
    color:rgba(255,255,255,.62);
    font-size:14px;
    line-height:1.8;
}

.bp-how-flow {
    position:relative;
    z-index:2;
}

.bp-how-flow-line {
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:13px;
}

.bp-how-flow-line:last-child {
    margin-bottom:0;
}

.bp-how-flow-word {
    display:inline-flex;
    align-items:center;
    min-height:42px;
    padding:0 15px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:999px;
    background:rgba(255,255,255,.055);
    color:#fff;
    font-size:11px;
    font-weight:650;
}

.bp-how-flow-word.is-key {
    border-color:rgba(108,203,208,.28);
    background:rgba(36,155,163,.14);
    color:#8bdddf;
}

.bp-how-flow-arrow {
    color:var(--teal-light);
    font-size:17px;
}

.bp-how-flow-note {
    margin-top:21px !important;
    color:rgba(255,255,255,.4) !important;
    font-size:11px !important;
    line-height:1.65 !important;
}


/* =========================================================
   VALEURS
   ========================================================= */

.bp-how-values {
    padding:0 0 110px;
    background:#fff;
}

.bp-how-values-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:19px;
}

.bp-how-value {
    padding:30px;
    border:1px solid var(--border);
    border-radius:19px;
    background:#fff;
}

.bp-how-value-number {
    display:block;
    margin-bottom:23px;
    color:rgba(36,155,163,.35);
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
}

.bp-how-value h3 {
    margin:0 0 9px !important;
    color:var(--navy);
    font-size:17px;
    font-weight:700;
}

.bp-how-value p {
    margin:0 !important;
    color:var(--text);
    font-size:13px;
    line-height:1.7;
}


/* =========================================================
   CTA
   ========================================================= */

.bp-how-cta {
    padding:0 0 110px;
    background:#fff;
}

.bp-how-cta-box {
    position:relative;
    overflow:hidden;
    padding:75px 8%;
    border-radius:29px;
    background:
        radial-gradient(circle at 88% 25%,rgba(36,155,163,.13),transparent 24%),
        linear-gradient(135deg,#eaf8f9,#f8fcfc);
    text-align:center;
}

.bp-how-cta-box::before {
    content:"";
    position:absolute;
    left:-80px;
    bottom:-110px;
    width:260px;
    height:260px;
    border:1px solid rgba(36,155,163,.09);
    border-radius:50%;
}

.bp-how-cta-content {
    display:none;
    position:relative;
    z-index:2;
    animation:bpHowAppear .4s ease both;
}

.bp-how-cta-content.is-active {
    display:block;
}

.bp-how-cta-content > span {
    display:block;
    margin-bottom:12px;
    color:var(--teal);
    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.bp-how-cta-content h2 {
    margin:0 0 14px !important;
    color:var(--navy);
    font-size:clamp(32px,3.7vw,50px);
    font-weight:700;
    line-height:1.1;
    letter-spacing:-.03em;
}

.bp-how-cta-content p {
    max-width:610px;
    margin:0 auto 28px !important;
    color:var(--text);
    font-size:15px;
    line-height:1.75;
}

.bp-how-button {
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:49px;
    padding:0 25px;
    border-radius:999px;
    background:var(--teal);
    color:#fff !important;
    font-size:13px;
    font-weight:650;
    text-decoration:none !important;
    transition:background .2s ease,transform .2s ease;
}

.bp-how-button:hover {
    background:var(--teal-dark);
    transform:translateY(-2px);
}

.bp-how-button-arrow {
    font-size:17px;
    transition:transform .2s ease;
}

.bp-how-button:hover .bp-how-button-arrow {
    transform:translateX(4px);
}


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

@media(max-width:1100px) {

    .bp-how-intro-grid { gap:55px; }

    .bp-how-timeline {
        grid-template-columns:repeat(3,1fr);
        row-gap:35px;
    }

    .bp-how-timeline::before { display:none; }

    .bp-how-step-top { margin-bottom:15px; }

    .bp-how-step-card { min-height:220px; }
}

@media(max-width:850px) {

    .bp-how-hero { padding:80px 0 70px; }

    .bp-how-intro,
    .bp-how-journey,
    .bp-how-principle {
        padding-top:80px;
        padding-bottom:80px;
    }

    .bp-how-intro-grid,
    .bp-how-principle-box {
        grid-template-columns:1fr;
    }

    .bp-how-community { max-width:650px; }

    .bp-how-journey-head { display:block; }

    .bp-how-mode-badge { margin-top:20px; }

    .bp-how-principle-box { gap:45px; }
}

@media(max-width:650px) {

    .bp-how-container { width:88%; }

    .bp-how-hero { padding:62px 0 58px; }

    .bp-how-hero h1 { font-size:40px; }

    .bp-how-lead { font-size:15px; }

    .bp-how-switch {
        display:flex;
        width:100%;
    }

    .bp-how-switch button {
        flex:1;
        min-width:0;
        padding:0 12px;
    }

    .bp-how-community { grid-template-columns:1fr; }

    .bp-how-center::before,
    .bp-how-center::after {
        display:none;
    }

    .bp-how-center-mark {
        width:70px;
        height:70px;
    }

    .bp-how-timeline {
        grid-template-columns:1fr;
        gap:18px;
    }

    .bp-how-step {
        display:grid;
        grid-template-columns:55px 1fr;
        gap:14px;
        align-items:start;
    }

    .bp-how-step-top {
        width:50px;
        height:50px;
        margin:8px 0 0;
        border-width:5px;
    }

    .bp-how-step-card { min-height:0; }

    .bp-how-principle-box {
        padding:48px 27px;
        border-radius:21px;
    }

    .bp-how-flow-line { flex-wrap:wrap; }

    .bp-how-values-grid { grid-template-columns:1fr; }

    .bp-how-values { padding-bottom:75px; }

    .bp-how-cta { padding-bottom:75px; }

    .bp-how-cta-box {
        padding:55px 25px;
        border-radius:21px;
    }
}

/* Progressive enhancement: both journeys remain available without JavaScript. */
.bp-how .bp-how-panel,.bp-how .bp-how-cta-content{display:block}.bp-how .bp-how-switch{display:none}.bp-how.bp-how-interactive .bp-how-switch{display:inline-flex}.bp-how.bp-how-interactive .bp-how-panel:not(.is-active),.bp-how.bp-how-interactive .bp-how-cta-content:not(.is-active){display:none}.bp-how a:focus-visible,.bp-how button:focus-visible{outline:3px solid #10243b;outline-offset:4px}.bp-how .bp-how-home{text-align:center;padding:24px}.bp-how{overflow-wrap:anywhere}@media(prefers-reduced-motion:reduce){.bp-how *{animation:none!important;transition:none!important}}