/* ===================================================
   CORRECTIFS UI/UX - BUGS FIXES 2025
   =================================================== */
/*
   Corrections appliquées:
   1. Bouton "Retour vers le haut" (top-left, après scroll > 300px)
   2. Theme toggle sans fond (transparent, hover subtil)
   Date: 2025-12-17
*/

/* ========================================
   BOUTON RETOUR VERS LE HAUT
   ======================================== */
/* Bouton flottant en haut à gauche pour remonter rapidement en haut de page.
   Visible uniquement après scroll > 300px, ne gêne pas header/chatbot. */
.scroll-to-top {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
    background: var(--gradient-primary); /* Gradient bleu iA */
    color: var(--white);
    border: none;
    border-radius: 50%; /* Cercle parfait */
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    z-index: 9998; /* Entre navbar (99999) et chatbot (999) */

    /* Caché par défaut (opacity 0, visibility hidden) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;

    /* Ombre pour profondeur */
    box-shadow: var(--shadow-md);

    /* Accessibilité */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Visible après scroll > 300px (classe ajoutée par JS) */
.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Effet hover */
.scroll-to-top:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--shadow-lg);
}

/* Effet active (clic) */
.scroll-to-top:active {
    transform: scale(0.95);
}

/* Focus visible pour accessibilité */
.scroll-to-top:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 4px;
}

/* Mode sombre */
body.dark-mode .scroll-to-top {
    background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 100%);
}

/* Responsive mobile */
@media (max-width: 768px) {
    .scroll-to-top {
        width: 45px;
        height: 45px;
        font-size: 20px;
        top: 80px; /* Sous le header mobile pour éviter collision avec menu burger */
        left: 15px;
    }
}

/* ========================================
   THEME TOGGLE - RETRAIT FOND
   ======================================== */
/* Correctif: retirer le fond gradient bleu et box-shadow.
   Garder seulement icônes SVG avec hover subtil. */

/* Override styles.css ligne 503-516 */
.theme-toggle {
    background: transparent !important; /* Retire gradient bleu */
    box-shadow: none !important; /* Retire ombre */

    /* Outline accessible au focus */
    outline: 2px solid transparent;
    outline-offset: 4px;
}

/* Focus visible pour accessibilité clavier */
.theme-toggle:focus-visible {
    outline: 2px solid var(--primary-blue);
}

/* Hover subtil : fond semi-transparent */
.theme-toggle:hover {
    background: rgba(6, 77, 217, 0.1) !important; /* Fond bleu très léger */
    transform: scale(1.1); /* Zoom 10% seulement (pas de rotation excessive) */
    box-shadow: none !important; /* Pas d'ombre */
}

/* Icônes SVG : couleur adapte au thème */
.theme-toggle svg {
    color: var(--text-primary); /* Couleur texte principale (noir/blanc selon thème) */
}

/* Mode sombre : hover fond blanc léger */
body.dark-mode .theme-toggle {
    background: transparent !important;
}

body.dark-mode .theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1) !important; /* Fond blanc très léger */
}

/* ========================================
   BRAND IMAGE - HEADER IMAGE
   ======================================== */
/* Image iA bâtiment dans le header (remplace texte "Patry / Conseiller") */
.brand-image {
    height: 50px;                       /* Hauteur légèrement plus grande que logo (40px) */
    width: auto;                        /* Largeur automatique pour respecter ratio */
    object-fit: contain;                /* Contient l'image sans déformation */
    transition: var(--transition-base); /* Animation smooth au hover */
}

.brand-image:hover {
    transform: scale(1.05);             /* Léger zoom au survol */
}

/* Responsive mobile */
@media (max-width: 768px) {
    .brand-image {
        height: 35px;                   /* Réduit sur mobile pour gagner de l'espace */
    }
}

@media (max-width: 480px) {
    .brand-image {
        height: 30px;                   /* Encore plus petit sur très petits écrans */
    }
}

/* ========================================
   NAV MENU - ALIGNEMENT FIXES
   ======================================== */
/* Correctifs pour alignement des items "Pourquoi Nicolas" et "Pour qui" */

/* Empêcher cassure des liens de navigation */
.nav-link {
    white-space: nowrap;                /* Empêche le texte de se casser sur plusieurs lignes */
}

/* Augmenter légèrement l'espacement entre les liens pour éviter collisions */
.nav-menu {
    gap: 16px !important;               /* Augmente de 14px à 16px pour plus d'espace */
    flex-wrap: nowrap;                  /* Empêche le wrapping du menu (reste horizontal) */
}

/* Responsive: Sur petits écrans desktop (< 1200px), réduire légèrement la taille de police */
@media (max-width: 1200px) and (min-width: 769px) {
    .nav-link {
        font-size: 0.9rem;              /* Réduit de 0.95rem à 0.9rem pour gagner de l'espace */
    }
}

/* Responsive: Sur tablette (< 1024px), réduire gap */
@media (max-width: 1024px) and (min-width: 769px) {
    .nav-menu {
        gap: 12px !important;           /* Réduit gap à 12px sur tablette */
    }
}

/* ========================================
   CHATBOT - AVATAR IMAGE
   ======================================== */
/* Avatar photo Nick (remplace emoji 🤖) */
.chat-message img.message-avatar {
    width: 40px !important;             /* Taille fixe 40px */
    height: 40px !important;
    border-radius: 50% !important;      /* Cercle parfait */
    object-fit: cover !important;       /* Recadre l'image pour remplir le cercle */
    flex-shrink: 0;                     /* Empêche compression dans flexbox */
}

/* Responsive mobile: avatar plus petit */
@media (max-width: 480px) {
    .chat-message img.message-avatar {
        width: 32px !important;
        height: 32px !important;
    }
}

/* ========================================
   CHATBOT - EXAMPLE CHIPS (Boutons cliquables)
   ======================================== */
/* Conteneur des chips avec wrapping */
.example-chips {
    display: flex;
    flex-wrap: wrap;                    /* Les chips s'enroulent sur plusieurs lignes */
    gap: 8px;                           /* Espacement entre les chips */
    margin-top: 10px;
}

/* Style de chaque chip (bouton exemple) */
.chip-example {
    background: var(--primary-blue);    /* Fond bleu iA */
    color: white;
    border: none;
    border-radius: 20px;                /* Arrondi prononcé pour effet "chip" */
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    line-height: 1.4;
    white-space: normal;                /* Permet le wrapping du texte dans le chip */
    max-width: 100%;                    /* S'adapte à la largeur du conteneur */
}

/* Hover effect */
.chip-example:hover {
    background: #0541b8;                /* Bleu plus foncé au hover */
    transform: translateY(-2px);        /* Léger lift au hover */
    box-shadow: 0 4px 8px rgba(6, 77, 217, 0.3);
}

/* Active (clic) */
.chip-example:active {
    transform: translateY(0);           /* Revient à la position normale */
    box-shadow: 0 2px 4px rgba(6, 77, 217, 0.2);
}

/* Mode dark */
body.dark-mode .chip-example {
    background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 100%);
}

body.dark-mode .chip-example:hover {
    background: linear-gradient(135deg, #1e40af 0%, #8b5cf6 100%);
}

/* Responsive mobile: chips plus petits */
@media (max-width: 480px) {
    .chip-example {
        font-size: 12px;
        padding: 6px 12px;
    }
}