/*
=========================================================
KELTOUM ACCESS
Premium UI
=========================================================
*/

:root{

    --k-gold:#B68C52;
    --k-gold-dark:#946D3E;

    --k-dark:#171717;
    --k-text:#696969;

    --k-bg:#F5F2EC;
    --k-white:#FFFFFF;

    --k-border:rgba(20,20,20,.10);

}

/*==================================================
PAGE
==================================================*/

body.page-keltoum{

    background:var(--k-bg);

}

.page-content{

    padding:0 !important;

}

.page-content > article > .container{

    width:100%;
    max-width:none;
    padding:0;

}


/*==================================================
PORTAIL
==================================================*/

.keltoum-app{

    min-height:100vh;

    display:grid;

    grid-template-columns:minmax(0,1.12fr) minmax(460px,.88fr);

    background:var(--k-bg);

}


/*==================================================
PHOTO
==================================================*/

.keltoum-cover{

    position:relative;

    min-height:100vh;

    overflow:hidden;

}

.keltoum-cover img{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

}

.keltoum-cover-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.08) 15%,
            rgba(0,0,0,.58) 100%
        );

}

.keltoum-cover-content{

    position:absolute;

    z-index:2;

    left:8%;
    right:8%;
    bottom:8%;

    color:#fff;

    max-width:650px;

}

.keltoum-cover-label{

    display:block;

    margin-bottom:20px;

    font-size:12px;

    letter-spacing:4px;

    font-weight:600;

}

.keltoum-cover-content h2{

    color:#fff;

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(50px,5vw,84px);

    line-height:.95;

    margin:0 0 25px;

}

.keltoum-cover-content p{

    color:rgba(255,255,255,.88);

    font-size:17px;

    max-width:550px;

    line-height:1.8;

}


/*==================================================
PANNEAU
==================================================*/

.keltoum-panel{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:70px 8%;

}

.keltoum-panel-inner{

    width:100%;

    max-width:580px;

}


/*==================================================
BRAND
==================================================*/

.keltoum-brand{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:35px;

}

.keltoum-brand-mark{

    width:58px;
    height:58px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:var(--k-dark);

    color:#fff;

    font-family:"Cormorant Garamond",serif;

    font-size:32px;

}

.keltoum-eyebrow{

    display:block;

    color:var(--k-gold);

    font-size:11px;

    letter-spacing:3px;

    font-weight:700;

    margin-bottom:5px;

}

.keltoum-brand h1{

    margin:0;

    font-size:48px;

    color:var(--k-dark);

}

.keltoum-intro{

    font-family:"Cormorant Garamond",serif;

    font-size:31px;

    color:var(--k-dark);

    margin-bottom:35px;

    line-height:1.2;

}


/*==================================================
SERVICES
==================================================*/

.keltoum-services{

    display:grid;

    gap:12px;

    margin-bottom:28px;

}

.keltoum-service{

    display:flex;

    align-items:center;

    gap:16px;

    padding:16px 18px;

    border:1px solid var(--k-border);

    border-radius:16px;

    background:rgba(255,255,255,.55);

    transition:.3s ease;

}

.keltoum-service:hover{

    transform:translateX(5px);

    border-color:rgba(182,140,82,.5);

    background:#fff;

}

.keltoum-service-icon{

    width:42px;
    height:42px;

    display:flex;

    align-items:center;
    justify-content:center;

    flex:0 0 42px;

    border-radius:50%;

    background:#EEE8DE;

    color:var(--k-gold);

}

.keltoum-service strong{

    display:block;

    color:var(--k-dark);

    font-size:15px;

}

.keltoum-service small{

    display:block;

    color:var(--k-text);

    margin-top:2px;

}


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

.keltoum-client-button{

    width:100%;

    min-height:58px;

    padding:0 24px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border-radius:100px;

    background:var(--k-gold);

    color:#fff;

    font-weight:600;

    transition:.3s ease;

}

.keltoum-client-button:hover{

    background:var(--k-gold-dark);

    transform:translateY(-2px);

}


/*==================================================
PROFESSIONAL
==================================================*/

.keltoum-professional{

    margin-top:42px;

}

.keltoum-divider{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:18px;

    color:#999;

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:2px;

}

.keltoum-divider::before,
.keltoum-divider::after{

    content:"";

    height:1px;

    background:var(--k-border);

    flex:1;

}

.keltoum-professional > p{

    text-align:center;

    font-size:14px;

    margin-bottom:22px;

}


/*==================================================
FORM
==================================================*/

.keltoum-login-form{

    display:grid;

    gap:16px;

}

.keltoum-field label{

    display:block;

    color:var(--k-dark);

    font-size:13px;

    font-weight:600;

    margin-bottom:7px;

}

.keltoum-field input{

    width:100%;

    height:56px;

    padding:0 18px;

    border-radius:14px;

    border:1px solid var(--k-border);

    background:#fff;

    color:var(--k-dark);

    font-size:15px;

    outline:none;

}

.keltoum-field input:focus{

    border-color:var(--k-gold);

    box-shadow:0 0 0 4px rgba(182,140,82,.10);

}

.keltoum-login-button{

    height:58px;

    padding:0 22px;

    border:0;

    border-radius:14px;

    background:var(--k-dark);

    color:#fff;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:space-between;

    font-weight:600;

}

.keltoum-error{

    padding:12px 15px;

    margin-bottom:15px;

    border-radius:12px;

    background:#FFF0F0;

    color:#A52B2B;

    font-size:14px;

}


/*==================================================
DASHBOARD
==================================================*/

.keltoum-dashboard{

    min-height:100vh;

    display:grid;

    grid-template-columns:260px 1fr;

    background:#F5F5F2;

}

.keltoum-sidebar{

    padding:32px 22px;

    background:#181818;

    color:#fff;

    display:flex;

    flex-direction:column;

}

.keltoum-sidebar-brand{

    display:flex;

    align-items:center;

    gap:12px;

    font-family:"Cormorant Garamond",serif;

    font-size:27px;

    margin-bottom:45px;

}

.keltoum-sidebar-brand span{

    width:39px;
    height:39px;

    display:flex;

    align-items:center;
    justify-content:center;

    background:var(--k-gold);

    border-radius:50%;

}

.keltoum-sidebar nav{

    display:grid;

    gap:5px;

}

.keltoum-sidebar nav a{

    color:#AAA;

    padding:12px 14px;

    border-radius:10px;

    font-size:14px;

}

.keltoum-sidebar nav a:hover,
.keltoum-sidebar nav a.active{

    color:#fff;

    background:rgba(255,255,255,.08);

}

.keltoum-logout{

    margin-top:auto;

    color:#AAA;

    padding:12px;

}

.keltoum-dashboard-main{

    padding:55px;

}

.keltoum-dashboard-header{

    margin-bottom:45px;

}

.keltoum-dashboard-header h1{

    margin:5px 0 0;

    font-size:48px;

}

.keltoum-dashboard-grid{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:20px;

}

.keltoum-dashboard-card{

    min-height:150px;

    padding:24px;

    background:#fff;

    border-radius:18px;

    border:1px solid rgba(0,0,0,.06);

    display:flex;

    flex-direction:column;

    justify-content:space-between;

}

.keltoum-dashboard-card span{

    color:#777;

    font-size:14px;

}

.keltoum-dashboard-card strong{

    color:#222;

    font-size:34px;

}

.keltoum-ai-box{

    margin-top:30px;

    padding:40px;

    border-radius:22px;

    background:#fff;

}

.keltoum-ai-box h2{

    font-size:36px;

    margin:5px 0 25px;

}

.keltoum-ai-input{

    display:flex;

    gap:10px;

}

.keltoum-ai-input input{

    flex:1;

    height:58px;

    border:1px solid #ddd;

    border-radius:14px;

    padding:0 18px;

}

.keltoum-ai-input button{

    width:58px;

    border:0;

    border-radius:14px;

    background:var(--k-gold);

    color:#fff;

}


/*==================================================
TABLET
==================================================*/

@media(max-width:1000px){

    .keltoum-app{

        grid-template-columns:1fr;

    }

    .keltoum-cover{

        min-height:65vh;

    }

    .keltoum-panel{

        padding:70px 7%;

    }

    .keltoum-dashboard{

        grid-template-columns:200px 1fr;

    }

    .keltoum-dashboard-main{

        padding:35px;

    }

    .keltoum-dashboard-grid{

        grid-template-columns:repeat(2,1fr);

    }

}


/*==================================================
MOBILE
==================================================*/

@media(max-width:700px){

    .keltoum-app{

        display:block;

    }

    .keltoum-cover{

        min-height:56vh;

    }

    .keltoum-cover-content{

        left:24px;
        right:24px;
        bottom:28px;

    }

    .keltoum-cover-content h2{

        font-size:48px;

    }

    .keltoum-cover-content p{

        font-size:15px;

    }

    .keltoum-panel{

        padding:50px 20px 70px;

    }

    .keltoum-brand{

        margin-bottom:28px;

    }

    .keltoum-brand h1{

        font-size:40px;

    }

    .keltoum-intro{

        font-size:27px;

    }

    .keltoum-service{

        padding:14px;

    }

    .keltoum-service small{

        font-size:12px;

        line-height:1.5;

    }

    .keltoum-dashboard{

        display:block;

    }

    .keltoum-sidebar{

        min-height:auto;

        padding:18px 20px;

    }

    .keltoum-sidebar-brand{

        margin-bottom:0;

    }

    .keltoum-sidebar nav{

        display:none;

    }

    .keltoum-logout{

        position:absolute;

        right:18px;
        top:26px;

    }

    .keltoum-dashboard-main{

        padding:30px 18px;

    }

    .keltoum-dashboard-header h1{

        font-size:38px;

    }

    .keltoum-dashboard-grid{

        grid-template-columns:1fr;

    }

    .keltoum-ai-box{

        padding:25px 20px;

    }

}
/*==================================================
KELTOUM CLIENT CHAT
==================================================*/

.keltoum-client-zone{

    margin-top:28px;

}

.keltoum-client-button{

    border:0;
    cursor:pointer;

}

.keltoum-chat-wrapper{

    margin-top:28px;

    background:#fff;

    border-radius:24px;

    border:1px solid rgba(0,0,0,.08);

    box-shadow:0 25px 70px rgba(0,0,0,.10);

    overflow:hidden;

}

.keltoum-chat-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:22px 24px;

    border-bottom:1px solid rgba(0,0,0,.08);

}

.keltoum-chat-header h3{

    margin:0;

    font-size:28px;

    color:#171717;

}

.keltoum-chat-close{

    width:42px;

    height:42px;

    border:0;

    border-radius:50%;

    background:#F3EEE6;

    color:#171717;

    font-size:26px;

    cursor:pointer;

}

.keltoum-chat-content{

    padding:20px;

}


/* AI ENGINE DANS KELTOUM */

.keltoum-chat-content .mwai-chat{

    max-width:100% !important;

    margin:0 !important;

}


/* MOBILE */

@media(max-width:700px){

    .keltoum-chat-wrapper{

        margin-top:22px;

        border-radius:18px;

    }

    .keltoum-chat-header{

        padding:18px;

    }

    .keltoum-chat-header h3{

        font-size:24px;

    }

    .keltoum-chat-content{

        padding:12px;

    }

}