/* ==========================================================================
   CHARTE GRAPHIQUE - STYLE GOOGLE SEARCH ULTRA-SOMBRE (DARK MODE)
   ========================================================================== */
:root {
    --bg-google: #202124;         /* Le fond sombre officiel de Google */
    --search-bar-bg: #303134;     /* Fond de la barre de recherche */
    --search-border: #5f6368;     /* Bordures Google Sombre */
    
    --brand-red: #8a0e17;         /* Votre rouge bordeaux officiel */
    --banana-yellow: #f5c518;     /* Jaune banane tendance */
    
    --text-main: #e8eaed;         /* Blanc Google haute visibilité */
    --text-muted: #9aa0a6;        /* Gris Google secondaire */
    
    --radius-google: 24px;
    --transition: all 0.2s ease;
}

/* ==========================================================================
   RESET & MISE EN PAGE CENTRÉE
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Roboto, arial, sans-serif;
    background-color: var(--bg-google);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Conteneur principal qui force le centrage vertical parfait comme Google */
.search-main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    margin-top: -60px; /* Décale légèrement vers le haut pour l'équilibre visuel */
    width: 100%;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   MINI BANNIÈRE DE MARQUE (EN HAUT)
   ========================================================================== */
.top-mini-banner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    background-color: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mini-banner-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mini-logo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.mini-brand-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.3px;
}

.mini-badge {
    font-size: 11px;
    background: rgba(245, 197, 24, 0.1);
    color: var(--banana-yellow);
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
}

/* ==========================================================================
   ZONE BRANDING CENTRAL (STYLE DOODLE)
   ========================================================================== */
.central-doodle-area {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    position: relative;
}

.main-search-logo {
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -1.5px;
    color: var(--text-main);
}

.highlight-banana {
    color: var(--banana-yellow);
    position: relative;
}

.doodle-emoji {
    font-size: 32px;
    user-select: none;
}
.banana-emoji {
    animation: swing 3s ease-in-out infinite;
}

.search-tagline {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 28px;
    font-style: italic;
    text-align: center;
}

/* ==========================================================================
   LA BARRE DE RECHERCHE COMPACTE GOOGLE
   ========================================================================== */
.search-box-wrapper {
    width: 100%;
    height: 46px;
    background-color: var(--search-bar-bg);
    border: 1px solid transparent;
    border-radius: var(--radius-google);
    display: flex;
    align-items: center;
    padding: 0 14px;
    transition: var(--transition);
}

.search-box-wrapper:hover, .search-box-wrapper:focus-within {
    background-color: var(--search-bar-bg);
    box-shadow: 0 1px 6px Esquisse rgba(0,0,0,0.4);
    border-color: #5f6368;
}

.search-icon-inside {
    color: var(--text-muted);
    font-size: 16px;
    margin-right: 12px;
}

.search-box-wrapper input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-main);
    font-size: 16px;
}

.ai-mode-btn {
    background-color: rgba(255, 255, 255, 0.07);
    color: var(--text-main);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.ai-mode-btn:hover {
    background-color: var(--brand-red);
    color: #ffffff;
    border-color: var(--brand-red);
}

/* ==========================================================================
   BOUTONS DE RECHERCHE GOOGLE STYLE
   ========================================================================== */
.search-action-buttons {
    display: flex;
    gap: 12px;
    margin-top: 26px;
}

.google-style-btn {
    background-color: #303134;
    border: 1px solid transparent;
    color: #e8eaed;
    font-size: 14px;
    padding: 10px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition);
}

.google-style-btn:hover {
    border-color: #5f6368;
    color: #ffffff;
}

.google-style-btn.secondary:hover {
    border-color: var(--banana-yellow);
}

/* ==========================================================================
   ZONE DE RÉSULTATS ET COMPOSANTS DYNAMIQUES
   ========================================================================== */
.dynamic-result-card {
    width: 100%;
    margin-top: 24px;
    background-color: #303134;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid var(--search-border);
    animation: slideUp 0.2s ease-out;
}

.hidden { display: none !important; }

/* ==========================================================================
   FOOTER STRUCTUREL (Style Bas de page Google)
   ========================================================================== */
.google-style-footer {
    background-color: #171717;
    width: 100%;
    font-size: 14px;
    color: var(--text-muted);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-row {
    padding: 14px 24px;
    display: flex;
    align-items: center;
}

.location-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 15px;
}

.links-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-left-links, .footer-right-links {
    display: flex;
    gap: 24px;
}

.google-style-footer a {
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
}

.google-style-footer a:hover {
    text-decoration: underline;
    color: var(--text-main);
}
/* ==========================================================================
   STYLES COMPLÉMENTAIRES POUR LES RÉSULTATS DYNAMIQUES DU JS
   ========================================================================== */
.search-loading-state { display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: 14px; padding: 8px 0; }
.loading-spinner { animation: rotate 1s linear infinite; font-size: 18px; }

/* Cadre résultat Factcheck */
.factcheck-card-result { padding: 4px 0; }
.result-badge-header { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; margin-bottom: 10px; }
.factcheck-card-result.fake .result-badge-header { color: #f4212e; }
.factcheck-card-result.true .result-badge-header { color: #00ba7c; }

.status-indicator-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.fake .status-indicator-dot { background-color: #f4212e; box-shadow: 0 0 8px #f4212e; }
.true .status-indicator-dot { background-color: #00ba7c; box-shadow: 0 0 8px #00ba7c; }

.confidence-score { margin-left: auto; background: rgba(255,255,255,0.05); padding: 2px 8px; border-radius: 4px; color: var(--text-muted); }
.result-title { font-size: 18px; font-weight: 750; margin-bottom: 8px; color: var(--text-main); }
.result-explanation { font-size: 14px; color: #e7e9ea; line-height: 1.5; margin-bottom: 14px; }
.result-footer-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-muted); border-top: 1px solid rgba(255,255,255,0.05); padding-top: 12px; }

/* Formulaires et Boutons en ligne */
.unknown-query-box h4 { font-size: 15px; font-weight: 700; color: var(--banana-yellow); margin-bottom: 6px; }
.unknown-query-box p { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }
.inline-submit-form { background: rgba(0,0,0,0.15); padding: 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.03); }
.form-prompt-text { font-size: 12.5px !important; color: var(--text-main) !important; margin-bottom: 8px !important; font-weight: 600; }
.form-inputs-inline { display: flex; gap: 8px; }
.form-inputs-inline select { background: var(--bg-google); border: 1px solid var(--search-border); color: var(--text-main); padding: 6px 12px; border-radius: 4px; font-size: 13px; outline: none; }
.btn-inline-submit { background: var(--brand-red); color: white; border: none; padding: 6px 14px; border-radius: 4px; font-size: 13px; font-weight: 700; cursor: pointer; }
.btn-inline-submit:hover { background: #a4111c; }

/* Blocs éducatifs */
.educational-hub-snippet h4 { font-size: 16px; font-weight: 750; color: var(--text-main); margin-bottom: 12px; }
.edu-list { list-style-type: none; }
.edu-list li { font-size: 13.5px; color: #e7e9ea; margin-bottom: 10px; line-height: 1.45; }
.close-snippet-btn { background: transparent; border: 1px solid var(--search-border); color: var(--text-muted); padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; margin-top: 8px; }
.close-snippet-btn:hover { color: white; border-color: white; }

.success-submission-alert { display: flex; gap: 12px; align-items: flex-start; }
.success-submission-alert h5 { font-size: 14px; font-weight: 700; color: #00ba7c; }
.success-submission-alert p { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ==========================================================================
   ANIMATIONS & RESPONSIVE
   ========================================================================== */
@keyframes swing {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 540px) {
    .main-search-logo { font-size: 36px; }
    .doodle-emoji { font-size: 24px; }
    .footer-row { justify-content: center; text-align: center; }
    .links-row { flex-direction: column; align-items: center; gap: 12px; }
    .footer-left-links { flex-direction: column; align-items: center; gap: 10px; }
}