/* =========================================================
   ALOO NETTOYAGE — FAQ PAGE FINAL
   ========================================================= */

.faq-page{
    padding:26px 0 64px;
    background:
        radial-gradient(circle at 5% 5%,rgba(32,164,238,.10),transparent 22%),
        linear-gradient(180deg,#f8fcff,#eef8ff);
}

.faq-page .container{
    width:min(1280px,calc(100% - 48px));
}

/* HERO */
.faq-page__hero{
    min-height:310px;
    display:grid;
    grid-template-columns:53% 47%;
    overflow:hidden;
    border:1px solid #d9ebf7;
    border-radius:23px;
    background:linear-gradient(120deg,#fbfdff,#eaf8ff);
    box-shadow:0 14px 38px rgba(14,74,121,.06);
}

.faq-page__hero-copy{
    padding:38px 34px 30px 43px;
}

.faq-page__breadcrumb{
    display:flex;
    gap:8px;
    align-items:center;
    margin-bottom:20px;
    color:#1784e5;
    font-size:10px;
    font-weight:800;
}

.faq-page__kicker{
    color:#1685e8;
    font-size:11px;
    font-weight:900;
    letter-spacing:.18em;
}

.faq-page__hero h1{
    margin:8px 0 0;
    color:#082f68;
    font-size:clamp(42px,4vw,60px);
    line-height:.98;
    letter-spacing:-.05em;
}

.faq-page__hero h1 span{
    display:block;
    color:#1688ed;
}

.faq-page__hero-copy>p{
    max-width:610px;
    margin:17px 0 0;
    color:#607792;
    font-size:14px;
    line-height:1.55;
}

.faq-page__hero-visual{
    position:relative;
    min-height:310px;
    overflow:hidden;
    background:#e4f6ff;
}

.faq-page__hero-visual::before{
    content:"";
    position:absolute;
    z-index:2;
    inset:0 auto 0 0;
    width:95px;
    background:linear-gradient(90deg,#edf9ff,rgba(237,249,255,0));
}

.faq-page__hero-visual img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 20%;
}

.faq-page__handwrite{
    position:absolute;
    z-index:3;
    left:20px;
    top:30px;
    color:#1685e7;
    font-family:"Segoe Print","Comic Sans MS",cursive;
    font-size:17px;
    line-height:1.25;
    transform:rotate(-5deg);
}

.faq-page__handwrite span{
    border-bottom:3px solid #1685e7;
    padding-bottom:4px;
}

.faq-page__hero-trust{
    position:absolute;
    z-index:4;
    right:14px;
    top:22px;
    display:grid;
    gap:10px;
}

.faq-page__hero-trust>div{
    min-width:160px;
    display:flex;
    align-items:center;
    gap:9px;
    color:#0c376e;
    font-size:10px;
    font-weight:900;
}

.faq-page__hero-trust i{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fff;
    color:#1688ed;
    box-shadow:0 7px 16px rgba(18,83,132,.09);
    font-style:normal;
}

.faq-page__green{
    color:#10a64a!important;
}

/* CATEGORIES */
.faq-page__categories{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
    margin-top:16px;
}

.faq-page__category{
    min-height:78px;
    padding:10px 14px;
    display:grid;
    grid-template-columns:46px 1fr;
    gap:10px;
    align-items:center;
    border:1px solid #d6e8f5;
    border-radius:14px;
    background:#fff;
    color:#0b356e;
    cursor:pointer;
    text-align:left;
    box-shadow:0 7px 18px rgba(17,75,121,.04);
    transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
}

.faq-page__category:hover{
    transform:translateY(-2px);
    border-color:#add6f2;
}

.faq-page__category i{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#e9f6ff;
    color:#1688ed;
    font-style:normal;
}

.faq-page__category svg{
    width:26px;
    height:26px;
}

.faq-page__category span{
    display:grid;
    gap:2px;
}

.faq-page__category strong{
    font-size:11px;
}

.faq-page__category small{
    color:#6f849a;
    font-size:8.5px;
}

.faq-page__category.is-active{
    border-color:transparent;
    background:linear-gradient(135deg,#0d78df,#11b0eb);
    color:#fff;
    box-shadow:0 12px 26px rgba(10,115,210,.18);
}

.faq-page__category.is-active i{
    background:rgba(255,255,255,.17);
    color:#fff;
}

.faq-page__category.is-active small{
    color:rgba(255,255,255,.87);
}

/* BODY */
.faq-page__body{
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(350px,.55fr);
    gap:18px;
    margin-top:18px;
}

.faq-page__questions,
.faq-page__side>div{
    border:1px solid #dcebf5;
    background:#fff;
    box-shadow:0 10px 27px rgba(16,74,121,.045);
}

.faq-page__questions{
    min-height:560px;
    padding:22px;
    border-radius:18px;
}

.faq-page__group[hidden]{
    display:none!important;
}

.faq-page__group-head h2{
    margin:0;
    color:#0a356e;
    font-size:22px;
    line-height:1.1;
    letter-spacing:-.025em;
}

.faq-page__group-head p{
    margin:6px 0 0;
    color:#6d8298;
    font-size:11px;
}

.faq-page__accordion{
    display:grid;
    gap:9px;
    margin-top:18px;
}

.faq-page__item{
    overflow:hidden;
    border:1px solid #d6e8f4;
    border-radius:12px;
    background:#fff;
}

.faq-page__item summary{
    min-height:55px;
    padding:0 14px 0 17px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    list-style:none;
    cursor:pointer;
    color:#0b356e;
    font-size:12px;
    font-weight:900;
}

.faq-page__item summary::-webkit-details-marker{
    display:none;
}

.faq-page__item summary i{
    width:27px;
    height:27px;
    flex:0 0 27px;
    display:grid;
    place-items:center;
    border:1px solid #9ed0f3;
    border-radius:50%;
    color:#1688ed;
    font-style:normal;
    font-size:17px;
    transition:transform .2s ease,background .2s ease,color .2s ease;
}

.faq-page__item[open]{
    background:linear-gradient(135deg,#f2f9ff,#fbfdff);
}

.faq-page__item[open] summary i{
    transform:rotate(45deg);
    background:#1688ed;
    color:#fff;
}

.faq-page__answer{
    padding:0 17px 15px;
}

.faq-page__answer p{
    margin:0;
    color:#607890;
    font-size:11px;
    line-height:1.6;
}

/* SIDE */
.faq-page__side{
    display:grid;
    gap:14px;
    align-content:start;
}

.faq-page__ask{
    position:relative;
    overflow:hidden;
    min-height:175px;
    padding:22px;
    display:grid;
    grid-template-columns:50px 1fr;
    gap:13px;
    border-radius:17px;
    background:linear-gradient(135deg,#0b76df,#12b0eb)!important;
    color:#fff;
}

.faq-page__ask-icon{
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.16);
    font-size:22px;
}

.faq-page__ask h2{
    margin:2px 0 0;
    color:#fff;
    font-size:19px;
    line-height:1.15;
}

.faq-page__ask p{
    margin:8px 0 0;
    color:rgba(255,255,255,.88);
    font-size:10.5px;
    line-height:1.45;
}

.faq-page__ask a{
    width:155px;
    min-height:42px;
    margin-top:15px;
    padding:0 15px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-radius:999px;
    background:#fff;
    color:#0c74d7;
    font-size:10px;
    font-weight:900;
}

.faq-page__headset{
    position:absolute;
    right:-6px;
    bottom:-25px;
    color:rgba(255,255,255,.16);
    font-size:105px;
    line-height:1;
}

.faq-page__quick{
    padding:18px;
    border-radius:17px;
}

.faq-page__quick h3{
    margin:0;
    color:#0a356e;
    font-size:19px;
}

.faq-page__quick>p{
    margin:4px 0 12px;
    color:#71869b;
    font-size:10px;
}

.faq-page__quick>a{
    min-height:58px;
    margin-top:8px;
    padding:8px 10px;
    display:grid;
    grid-template-columns:40px 1fr 30px;
    gap:10px;
    align-items:center;
    border:1px solid #dcebf5;
    border-radius:11px;
}

.faq-page__quick>a>i{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#e8f6ff;
    color:#1688ed;
    font-style:normal;
    font-size:17px;
}

.faq-page__quick span{
    display:grid;
    gap:2px;
}

.faq-page__quick strong{
    color:#0b356e;
    font-size:10.5px;
}

.faq-page__quick small{
    color:#6f8398;
    font-size:9px;
}

.faq-page__quick b{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border:1px solid #9dcef1;
    border-radius:50%;
    color:#1688ed;
}

.faq-page__wa{
    background:#e7fff0!important;
    color:#10af51!important;
}

.faq-page__tip{
    min-height:75px;
    padding:13px;
    display:grid;
    grid-template-columns:42px 1fr;
    gap:10px;
    align-items:center;
    border-radius:14px;
    background:linear-gradient(135deg,#edf8ff,#fff)!important;
}

.faq-page__tip>i{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#e7f5ff;
    font-style:normal;
}

.faq-page__tip span{
    display:grid;
    gap:3px;
}

.faq-page__tip strong{
    color:#1477d3;
    font-size:10.5px;
}

.faq-page__tip small{
    color:#6b8197;
    font-size:9px;
    line-height:1.4;
}

/* BOTTOM */
.faq-page__bottom{
    min-height:105px;
    margin-top:18px;
    padding:14px 18px;
    display:grid;
    grid-template-columns:1.2fr repeat(3,1fr) 1.35fr;
    gap:15px;
    align-items:center;
    border:1px solid #dcebf5;
    border-radius:17px;
    background:#fff;
    box-shadow:0 9px 24px rgba(16,74,121,.04);
}

.faq-page__bottom-note,
.faq-page__bottom-item{
    display:flex;
    align-items:center;
    gap:10px;
}

.faq-page__bottom-note i,
.faq-page__bottom-item i{
    width:44px;
    height:44px;
    flex:0 0 44px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#e8f6ff;
    color:#1688ed;
    font-style:normal;
}

.faq-page__bottom-note svg{
    width:26px;
    height:26px;
}

.faq-page__bottom-note span{
    color:#1685e7;
    font-family:"Segoe Print","Comic Sans MS",cursive;
    font-size:11px;
    line-height:1.3;
    transform:rotate(-4deg);
}

.faq-page__bottom-item span{
    display:grid;
    gap:2px;
}

.faq-page__bottom-item strong{
    color:#0b356e;
    font-size:9.5px;
}

.faq-page__bottom-item small{
    color:#70849a;
    font-size:8px;
}

.faq-page__devis{
    min-height:48px;
    padding:0 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    border-radius:999px;
    background:linear-gradient(90deg,#0d78e2,#13b0eb);
    color:#fff;
    font-size:11px;
    font-weight:900;
}

/* TABLET */
@media (min-width:768px) and (max-width:1100px){
    .faq-page .container{
        width:min(100% - 36px,1280px);
    }

    .faq-page__hero{
        grid-template-columns:1fr;
    }

    .faq-page__hero-visual{
        min-height:300px;
    }

    .faq-page__categories{
        grid-template-columns:repeat(3,1fr);
    }

    .faq-page__body{
        grid-template-columns:1fr;
    }

    .faq-page__side{
        grid-template-columns:1fr 1fr;
    }

    .faq-page__tip{
        grid-column:1/-1;
    }

    .faq-page__bottom{
        grid-template-columns:repeat(2,1fr);
    }

    .faq-page__devis{
        grid-column:1/-1;
    }
}

/* MOBILE */
@media (max-width:767px){
    .faq-page{
        padding:18px 0 46px;
    }

    .faq-page .container{
        width:min(100% - 24px,1280px);
    }

    .faq-page__hero{
        grid-template-columns:1fr;
        border-radius:17px;
    }

    .faq-page__hero-copy{
        padding:27px 19px 23px;
    }

    .faq-page__hero h1{
        font-size:38px;
    }

    .faq-page__hero-copy>p{
        font-size:12.5px;
    }

    .faq-page__hero-visual{
        min-height:260px;
    }

    .faq-page__hero-trust{
        display:none;
    }

    .faq-page__categories{
        display:flex;
        gap:9px;
        padding-bottom:7px;
        overflow-x:auto;
        scrollbar-width:none;
    }

    .faq-page__categories::-webkit-scrollbar{
        display:none;
    }

    .faq-page__category{
        min-width:190px;
    }

    .faq-page__body{
        grid-template-columns:1fr;
    }

    .faq-page__questions{
        min-height:0;
        padding:16px;
        border-radius:15px;
    }

    .faq-page__group-head h2{
        font-size:19px;
    }

    .faq-page__item summary{
        font-size:11px;
    }

    .faq-page__side{
        grid-template-columns:1fr;
    }

    .faq-page__bottom{
        grid-template-columns:1fr;
        padding:17px;
    }

    .faq-page__devis{
        min-height:50px;
    }
}

/* =========================================================
   FAQ — PROFESSIONAL SVG ICON SYSTEM
   ========================================================= */

/* Question CTA */
.faq-page__ask-icon{
    width:52px;
    height:52px;
    color:#fff;
    background:rgba(255,255,255,.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}

.faq-page__ask-icon svg{
    width:27px;
    height:27px;
}

.faq-page__ask a svg{
    width:17px;
    height:17px;
    flex:0 0 17px;
}

.faq-page__ask-ring{
    position:absolute;
    right:-14px;
    bottom:-34px;
    width:100px;
    height:100px;
    border:6px solid rgba(255,255,255,.13);
    border-radius:50%;
    pointer-events:none;
}

/* Quick contact */
.faq-page__quick>a{
    min-height:62px;
    transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}

.faq-page__quick>a:hover{
    transform:translateY(-1px);
    border-color:#b9dcf6;
    box-shadow:0 7px 18px rgba(13,91,160,.07);
}

.faq-page__quick>a>i.faq-page__quick-icon{
    width:42px;
    height:42px;
    background:linear-gradient(145deg,#eff9ff,#e1f3ff);
    color:#0d83e8;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
}

.faq-page__quick-icon svg{
    width:22px;
    height:22px;
    display:block;
}

.faq-page__quick>a>b{
    width:31px;
    height:31px;
    color:#0c84e8;
    background:#fff;
    border:1px solid #a9d5f5;
    box-shadow:0 4px 10px rgba(12,101,179,.06);
    transition:background .2s ease,color .2s ease,transform .2s ease;
}

.faq-page__quick>a>b svg{
    width:16px;
    height:16px;
    display:block;
}

.faq-page__quick>a:hover>b{
    transform:translateX(2px);
    color:#fff;
    background:#1089ec;
}

.faq-page__wa{
    color:#0eae51!important;
    background:linear-gradient(145deg,#effff4,#ddf9e8)!important;
}

/* Professional lightbulb */
.faq-page__tip>i{
    color:#f2a914;
    background:linear-gradient(145deg,#fffaf0,#fff2cf);
    box-shadow:inset 0 1px 0 #fff;
}

.faq-page__tip>i svg{
    width:22px;
    height:22px;
    display:block;
}

/* Desktop assurance strip */
.faq-page__bottom{
    min-height:106px;
    padding:15px 18px;
    gap:18px;
}

.faq-page__bottom-note i,
.faq-page__bottom-item i{
    width:48px;
    height:48px;
    flex:0 0 48px;
    border:1px solid rgba(22,136,237,.05);
    background:linear-gradient(145deg,#eff9ff,#e3f4ff);
    color:#0d85e9;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
}

.faq-page__bottom-note i svg{
    width:25px;
    height:25px;
}

.faq-page__bottom-item i svg{
    width:23px;
    height:23px;
    display:block;
}

.faq-page__bottom-item .faq-page__green,
.faq-page__green{
    color:#11a956!important;
    background:linear-gradient(145deg,#f0fff5,#e0f8e9)!important;
}

.faq-page__devis{
    min-height:52px;
    gap:18px;
    box-shadow:0 9px 20px rgba(8,116,215,.13);
    transition:transform .2s ease,box-shadow .2s ease;
}

.faq-page__devis svg{
    width:17px;
    height:17px;
}

.faq-page__devis:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 25px rgba(8,116,215,.20);
}

@media (max-width:767px){
    .faq-page__ask-icon{
        width:48px;
        height:48px;
    }

    .faq-page__quick>a{
        min-height:60px;
    }

    .faq-page__bottom-note i,
    .faq-page__bottom-item i{
        width:44px;
        height:44px;
        flex-basis:44px;
    }
}