/* SKA-032 — Habillage visuel "StreetShop Demo" (CSS uniquement, aucune logique). */

:root {
    --sv-green: #2E7D32;
    --sv-green-dark: #256628;
    --sv-green-light: #6FAF5F;
    --sv-beige: #F5F2E8;
    --sv-anthracite: #2F3437;
    --sv-white: #FFFFFF;
}

/* --- Header / logo --- */

.navbar-brand .sv-brand-icon {
    color: var(--sv-green);
    font-size: 1.3em;
    vertical-align: -0.1em;
    margin-right: 0.35rem;
}

/* --- Bandeau démo --- */

.sv-demo-banner {
    background-color: var(--sv-beige);
    border-bottom: 1px solid rgba(46, 125, 50, 0.15);
    color: var(--sv-anthracite);
    font-size: 0.85rem;
    padding: 0.35rem 1rem;
}

.sv-demo-banner .sv-demo-icon {
    color: var(--sv-green);
}

.sv-demo-banner .sv-demo-sep {
    color: rgba(47, 52, 55, 0.35);
    margin: 0 0.6rem;
}

/* --- Boutons principaux --- */

.btn-primary {
    background-color: var(--sv-green);
    border-color: var(--sv-green);
    border-radius: 0.5rem;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color: var(--sv-green-dark);
    border-color: var(--sv-green-dark);
}

.btn-outline-primary {
    color: var(--sv-green);
    border-color: var(--sv-green);
    border-radius: 0.5rem;
    transition: background-color 150ms ease, color 150ms ease;
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
    background-color: var(--sv-green);
    border-color: var(--sv-green);
    color: var(--sv-white);
}

.btn {
    border-radius: 0.5rem;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

/* --- Liens actifs / navigation --- */

.list-group-item-action.active,
.page-item.active .page-link,
.nav-link.active {
    background-color: var(--sv-green);
    border-color: var(--sv-green);
    color: var(--sv-white);
}

.page-link {
    color: var(--sv-green);
}

a {
    color: var(--sv-green);
}

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

/* --- Badges --- */

.badge.text-bg-primary {
    background-color: var(--sv-green) !important;
}

.sv-badge-demo {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background-color: var(--sv-beige);
    color: var(--sv-green-dark);
    border: 1px solid rgba(46, 125, 50, 0.25);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
}

/* --- Avatar (photo de profil) --- */

.sv-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
}

.sv-avatar-lg {
    width: 96px;
    height: 96px;
}

.sv-avatar-placeholder {
    font-size: 96px;
    color: var(--sv-green-light);
    line-height: 1;
}

.sv-badge-ai {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background-color: var(--sv-beige);
    color: var(--sv-anthracite);
    border: 1px solid rgba(46, 125, 50, 0.2);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    font-size: 0.8rem;
}

.sv-badge-ai .sv-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--sv-green);
    display: inline-block;
}

/* --- Focus --- */

.form-control:focus,
.form-select:focus,
.btn:focus-visible {
    border-color: var(--sv-green-light);
    box-shadow: 0 0 0 0.2rem rgba(111, 175, 95, 0.25);
}

/* --- Cartes produit : ombre + élévation au survol --- */

.card {
    transition: box-shadow 150ms ease, transform 150ms ease;
}

.card:hover {
    box-shadow: 0 0.5rem 1rem rgba(47, 52, 55, 0.12);
    transform: translateY(-2px);
}

/* --- En-têtes de section (catalogue, accueil) --- */

.sv-section-eyebrow {
    color: var(--sv-green);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.8rem;
}

/* --- Navigation catalogue par catégories (UX-004) --- */

.sv-category-tile {
    background-color: var(--sv-white);
    border: 1px solid rgba(47, 52, 55, 0.12);
    border-radius: 0.75rem;
    color: var(--sv-anthracite);
    text-decoration: none;
    transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.sv-category-tile:hover {
    border-color: var(--sv-green-light);
    background-color: var(--sv-beige);
    transform: translateY(-2px);
    color: var(--sv-anthracite);
}

.sv-category-tile.active {
    border-color: var(--sv-green);
    background-color: var(--sv-beige);
    box-shadow: inset 0 0 0 1px var(--sv-green);
}

.sv-category-tile i {
    color: var(--sv-green);
}

.sv-chevron {
    transition: transform 150ms ease;
}

.btn[aria-expanded="true"] .sv-chevron {
    transform: rotate(180deg);
}

/* --- UX-019 : harmonisation visuelle des écrans métier (Assistant / Argumentaire / Objections) --- */

.sv-page-header {
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(47, 52, 55, 0.1);
}

.sv-page-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.sv-page-title i {
    color: var(--sv-green);
    font-size: 0.9em;
}

.sv-page-lead {
    font-size: 0.92rem;
}

.sv-card-compact > .card-body {
    padding: 1rem 1.25rem;
}

.sv-card-compact .form-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--sv-anthracite);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.35rem;
}

.sv-selection-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.9rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(47, 52, 55, 0.15);
    font-size: 0.88rem;
}

.sv-selection-summary .sv-summary-item i {
    color: var(--sv-green);
    margin-right: 0.35rem;
    width: 1em;
}

/* État vide : aucun produit sélectionné (ou aucune donnée disponible) — évite
   les grands espaces blancs signalés lors des tests utilisateur (UX-019). */
.sv-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.75rem 1.5rem;
    color: rgba(47, 52, 55, 0.55);
    background-color: var(--sv-beige);
    border: 1px dashed rgba(46, 125, 50, 0.3);
    border-radius: 0.75rem;
}

.sv-empty-state i {
    font-size: 2rem;
    color: var(--sv-green-light);
    margin-bottom: 0.75rem;
}

.sv-empty-state p {
    margin: 0;
    max-width: 32rem;
}

/* Regroupement visuel par contexte (Argumentaire) */
.sv-context-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--sv-green-dark);
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 1.75rem 0 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid var(--sv-green-light);
}

.sv-context-heading:first-child {
    margin-top: 0;
}

.sv-context-heading .badge {
    background-color: var(--sv-green);
    font-weight: 600;
}

/* Cartes de résultat (arguments CAPIA, objections) — lecture rapide facilitée
   par des lettres-repères colorées plutôt qu'une simple liste de définitions. */
.sv-result-card {
    border-left: 3px solid var(--sv-green-light);
}

.sv-result-row {
    display: flex;
    gap: 0.85rem;
    padding: 0.55rem 0;
}

.sv-result-row + .sv-result-row {
    border-top: 1px solid rgba(47, 52, 55, 0.08);
}

.sv-result-letter {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background-color: var(--sv-beige);
    color: var(--sv-green-dark);
    font-weight: 700;
    font-size: 0.85rem;
}

.sv-result-body {
    flex: 1 1 auto;
    min-width: 0;
}

.sv-result-body .sv-result-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: rgba(47, 52, 55, 0.55);
    margin-bottom: 0.15rem;
}

/* Assistant : zone de conversation, densifiée */
.sv-chat-panel {
    min-height: 260px;
}

/* --- UX-024 : lisibilité de l'Assistant ---
   Objectif : une réponse lue en quelques secondes, à distance de travail normale,
   sur portable/tablette/Full HD. Deux leviers principaux : une largeur de lecture
   bornée en valeur absolue (jamais un pourcentage d'un conteneur qui peut dépasser
   1500px sur un grand écran) et un espacement vertical généreux entre les blocs de
   la réponse (paragraphes, listes) plutôt qu'un seul bloc de texte compact. */

.sv-bubble {
    /* min() plutôt qu'un pourcentage fixe : reste fluide sur mobile/tablette, mais
       ne dépasse jamais une mesure de lecture confortable (~42rem ≈ 65-70
       caractères par ligne) sur un écran large ou Full HD. */
    max-width: min(90%, 42rem);
}

.sv-bubble-question {
    max-width: min(85%, 34rem);
}

.sv-bubble-answer {
    font-size: 1.03rem;
    line-height: 1.65;
}

.sv-confidence-badge {
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
    letter-spacing: 0.01em;
}

/* Corps de réponse (App\Services\SimpleMarkdown) : paragraphes et listes espacés
   plutôt qu'un bloc unique, gras mis en couleur pour guider l'œil vers les
   éléments importants sans dépendre de la seule graisse de caractère. */
.sv-answer-body p {
    margin-bottom: 0.9rem;
}

.sv-answer-body p:last-child {
    margin-bottom: 0;
}

.sv-answer-body ul {
    padding-left: 1.35rem;
    margin-bottom: 0.9rem;
}

.sv-answer-body li {
    margin-bottom: 0.4rem;
    line-height: 1.6;
}

.sv-answer-body li:last-child {
    margin-bottom: 0;
}

.sv-answer-body strong {
    color: var(--sv-green-dark);
    font-weight: 700;
}

/* Repère de contexte (produit concerné) au-dessus de la conversation — même
   langage visuel que .sv-badge-ai/.sv-selection-summary déjà en place ailleurs. */
.sv-context-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    background-color: var(--sv-beige);
    border: 1px solid rgba(46, 125, 50, 0.2);
    border-radius: 0.6rem;
    padding: 0.55rem 0.9rem;
    font-size: 0.9rem;
    color: var(--sv-anthracite);
}

.sv-context-strip i {
    color: var(--sv-green);
}

.sv-context-strip-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    /* Opacité volontairement plus soutenue que .sv-result-label (0.55) : à cette
       taille (~12px), un texte plus clair ne tient pas le contraste AA (4.5:1)
       requis hors "grand texte" — UX-024 §6. */
    color: rgba(47, 52, 55, 0.8);
    margin-right: 0.15rem;
}

/* Bloc "Sources utilisées" : contraste renforcé par rapport au gris Bootstrap par
   défaut (text-secondary, ~4.6:1 sur blanc) pour rester confortable après
   plusieurs minutes de lecture. */
.sv-sources-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: rgba(47, 52, 55, 0.7);
}

.sv-sources-block .badge {
    font-size: 0.8rem;
    font-weight: 500;
}

@media (max-width: 767.98px) {
    .sv-page-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.6rem;
    }

    .sv-empty-state {
        padding: 2rem 1rem;
    }

    .sv-bubble {
        max-width: 94%;
    }

    .sv-bubble-answer {
        font-size: 1rem;
    }
}

/* Tablette (768-1024px, portrait comme paysage) : mesure de lecture un peu plus
   étroite que le plafond desktop pour éviter des lignes trop longues sur une
   largeur intermédiaire. */
@media (min-width: 768px) and (max-width: 1024px) {
    .sv-bubble {
        max-width: min(92%, 36rem);
    }
}

/* --- UX-005 : mise en valeur des visuels produits authentiques ---
   Aucune image n'est modifiée ; seule la présentation (disposition, cadrage,
   hiérarchie) change. Le badge "photo authentique" et le fond neutre autour
   du visuel sont purement décoratifs — ils ne recadrent ni ne retouchent le
   fichier importé, affiché tel quel via object-fit: contain. */

.sv-product-hero {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 2.25rem;
    align-items: start;
}

.sv-product-gallery {
    position: relative;
}

.sv-product-gallery-main {
    background: var(--sv-beige);
    border-radius: 1rem;
    padding: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
}

.sv-product-gallery-main img {
    max-width: 100%;
    max-height: 460px;
    object-fit: contain;
    filter: drop-shadow(0 18px 26px rgba(47, 52, 55, 0.14));
}

.sv-product-gallery-empty .sv-product-gallery-main {
    min-height: 260px;
}

.sv-product-gallery-placeholder {
    color: rgba(47, 52, 55, 0.22);
    font-size: 3rem;
}

.sv-authentic-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.94);
    color: var(--sv-green-dark);
    border: 1px solid rgba(46, 125, 50, 0.25);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(47, 52, 55, 0.1);
}

.sv-product-gallery-thumbs {
    display: flex;
    gap: 0.6rem;
    margin-top: 1rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
}

.sv-product-thumb {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    padding: 0.3rem;
    background: var(--sv-white);
    border: 2px solid rgba(47, 52, 55, 0.1);
    border-radius: 0.6rem;
    cursor: pointer;
    transition: border-color 150ms ease, transform 150ms ease;
}

.sv-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sv-product-thumb:hover {
    transform: translateY(-2px);
    border-color: rgba(46, 125, 50, 0.4);
}

.sv-product-thumb.active {
    border-color: var(--sv-green);
}

.sv-product-hero-info {
    padding-top: 0.25rem;
}

.sv-product-hero-category {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(47, 52, 55, 0.6);
    margin-bottom: 0.4rem;
}

.sv-product-hero-title {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--sv-anthracite);
    margin-bottom: 1rem;
}

.sv-product-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.2rem;
}

.sv-product-hero-desc {
    color: rgba(47, 52, 55, 0.85);
    line-height: 1.6;
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .sv-product-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .sv-product-gallery-main {
        min-height: 260px;
        padding: 1.5rem;
    }

    .sv-product-thumb {
        width: 64px;
        height: 64px;
    }

    .sv-product-hero-title {
        font-size: 1.5rem;
    }
}