/* =========================================================
   Carrébox – style.css (Assistance + site)
   Couleurs :
   - Vert foncé : #0A2617
   - Vert clair : #61DEA1
   - Beige : #FCF7ED
   ========================================================= */

/* ---------- Variables Carrébox ---------- */
:root{
    --cb-green-dark:#0A2617;
    --cb-green-light:#61DEA1;
    --cb-beige:#FCF7ED;

    --cb-beige-soft:#fffaf2;
    --cb-border:rgba(10,38,23,.15);
    --cb-border-strong:rgba(10,38,23,.25);
    --cb-shadow:0 6px 18px rgba(10,38,23,.08);
    --cb-shadow-hover:0 10px 24px rgba(10,38,23,.14);
}

/* ---------- Base ---------- */
html, body{
    height:100%;
}

body{
    background:white;
    color:var(--cb-green-dark);
}

/* Typo un peu plus “premium” */
h1,h2,h3,h4,h5,h6{
    color:var(--cb-green-dark);
}

a{
    color:var(--cb-green-dark);
}

a:hover{
    color:var(--cb-green-dark);
}

/* ---------- Bootstrap overrides ---------- */

/* bg-light => beige */
.bg-light{
    background-color:var(--cb-beige) !important;
}

/* primary => vert foncé */
.bg-primary{
    background-color:var(--cb-green-dark) !important;
}

.text-primary{
    color:var(--cb-green-dark) !important;
}

/* Cards */
.card{
    border-radius:14px;
    border:1px solid var(--cb-border);
    box-shadow:var(--cb-shadow);
    background:var(--cb-beige);
}

.card-header{
    background:rgba(97,222,161,.15);
    border-bottom:1px solid var(--cb-border);
    color:var(--cb-green-dark);
}

.card-title{
    color:var(--cb-green-dark);
}
.card-body{
    background-color: white;
}

.card-body-bg-beige{
    background-color:var(--cb-beige);
}
/* Alerts */
.alert{
    border-radius:14px;
    border:1px solid var(--cb-border);
}

/* Inputs (si tu en ajoutes ensuite) */
.form-control, .form-select{
    border-radius:12px;
    border:1px solid var(--cb-border-strong);
}

.form-control:focus, .form-select:focus{
    border-color:var(--cb-green-light);
    box-shadow:0 0 0 .2rem rgba(97,222,161,.25);
}

/* ---------- Buttons (Carrébox: vert clair + texte vert foncé) ---------- */

/* Style commun à TOUS les boutons Bootstrap */
.btn,
.btn-primary,
.btn-outline-primary{
    background-color:var(--cb-green-light) !important;
    color:var(--cb-green-dark) !important;
    border:none !important;
    font-weight:700;
    border-radius:999px;
    padding:.5rem 1.05rem;
    transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, opacity .18s ease;
}

/* Hover / focus */
.btn:hover,
.btn:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus{
    background-color:#53c993 !important;
    color:var(--cb-green-dark) !important;
    transform:translateY(-1px);
    box-shadow:var(--cb-shadow-hover);
}

/* Boutons secondaires “navigation” (ex: changer de centre) */
.btn-outline-secondary{
    background:transparent !important;
    color:var(--cb-green-dark) !important;
    border:1px solid var(--cb-green-dark) !important;
    font-weight:700;
    border-radius:999px;
    padding:.45rem .95rem;
    transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, opacity .18s ease;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus{
    background-color:rgba(97,222,161,.35) !important;
    transform:translateY(-1px);
    box-shadow:var(--cb-shadow);
}

/* Petits boutons */
.btn-sm{
    padding:.35rem .85rem;
    font-weight:700;
}

/* Disabled */
.btn.disabled,
.btn:disabled{
    opacity:.55 !important;
    cursor:not-allowed !important;
    transform:none !important;
    box-shadow:none !important;
}

/* ---------- Assistance / Chatbot ---------- */

/* Le wrapper complet ne doit JAMAIS scroller (tu peux garder ton calc sur la page si tu préfères) */
#assistChatWrapper{
    overflow:hidden; /* empêche tout scroll du wrapper */
}

/* Zone scrollable unique */
#assistChat{
    overflow-y:auto;
    overflow-x:hidden;
    padding-bottom:16px;
    scrollbar-width:thin;
    scrollbar-color:var(--cb-green-light) transparent;
}

/* Scrollbar WebKit */
#assistChat::-webkit-scrollbar{
    width:10px;
}
#assistChat::-webkit-scrollbar-track{
    background:transparent;
}
#assistChat::-webkit-scrollbar-thumb{
    background:rgba(97,222,161,.65);
    border-radius:999px;
    border:2px solid transparent;
    background-clip:padding-box;
}

/* Placeholder */
#assistPlaceholder{
    opacity:.75;
}

/* Bulles BOT */
.assist-bot-text{
    line-height:1.55;
}

.assist-chat-body .bg-light{
    background-color:var(--cb-beige-soft) !important;
}

/* Le “border” bootstrap dans le bot */
.assist-chat-body .border{
    border:1px solid var(--cb-border) !important;
}

/* Bulles USER */
.assist-chat-body .bg-primary{
    background-color:var(--cb-green-dark) !important;
    color:var(--cb-beige) !important;
}

/* Spacing des zones de boutons (choix + actions) */
.assist-choices-wrapper,
.assist-actions-wrapper{
    margin-top:12px;
}

/* Evite les boutons trop collés sur mobile */
.assist-actions-wrapper .btn,
.assist-choices-wrapper .btn{
    white-space:normal;
}

/* Liens tel: (inline dans le texte) */
a[href^="tel:"]{
    color:var(--cb-green-dark);
    font-weight:800;
    text-decoration:none;
}
a[href^="tel:"]:hover{
    text-decoration:underline;
}

/* Liens classiques dans les messages bot (ex: vidéo) */
.assist-bot-text a{
    color:var(--cb-green-dark);
    font-weight:800;
    text-decoration:underline;
}
.assist-bot-text a:hover{
    text-decoration:none;
}

/* ---------- Petits raffinements UI ---------- */

/* Ombrage doux sur boutons de carte */
.card .btn{
    box-shadow:0 4px 10px rgba(10,38,23,.08);
}
.card .btn:hover{
    box-shadow:0 10px 24px rgba(10,38,23,.14);
}

/* Textes “muted” plus cohérents avec la charte */
.text-muted{
    color:rgba(10,38,23,.65) !important;
}

/* Séparateurs / hr si tu en utilises */
hr{
    border-color:var(--cb-border);
}

/* ---------- Responsive ---------- */
@media (max-width: 576px){
    .container{
        padding-left:14px;
        padding-right:14px;
    }

    .card{
        border-radius:16px;
    }

    .btn{
        padding:.55rem 1rem;
    }

    #assistChat{
        padding-bottom:12px;
    }
}