/*
 * Variables CSS principales
 * Ces variables définissent le schéma de couleurs pour les modes clair et sombre
 * L'utilisation de variables CSS permet de changer facilement de thème sans redéfinir tous les styles
 */
:root {
    --bg-color: #f9f9f9; /* Couleur de fond claire */
    --text-color: #333; /* Texte foncé pour une meilleure lisibilité sur fond clair */
    --accent-color: #0a48ad; /* Couleur d'accent bleue style Google */
    --search-bg: #fff; /* Fond blanc pour la boîte de recherche */
    --search-border: #dfe1e5; /* Couleur de bordure subtile pour les éléments de recherche */
    --button-hover: #f2f2f2; /* Gris clair pour les états de survol */
}

/*
 * Variables de couleur du mode sombre
 * Appliquées lorsque la classe .dark-mode est ajoutée au body
 * Fournit un thème sombre confortable avec un contraste approprié
 */
.dark-mode {
    --bg-color: #202124; /* Fond gris foncé (inspiré du thème sombre de Google) */
    --text-color: #e8eaed; /* Texte clair pour une meilleure lisibilité sur fond sombre */
    --accent-color: #8ab4f8; /* Accent bleu plus clair pour une meilleure visibilité en mode sombre */
    --search-bg: #303134; /* Fond de boîte de recherche sombre */
    --search-border: #5f6368; /* Bordure plus foncée pour les éléments de recherche */
    --button-hover: #3c4043; /* État de survol plus foncé pour les boutons */
}

/*
 * Réinitialisation globale et styles de base
 * Assure un rendu cohérent sur tous les navigateurs
 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/*
 * Styles du corps
 * Définit les couleurs principales de fond et de texte en utilisant des variables CSS
 * Inclut une transition fluide pour les changements de thème
 */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition:
        background-color 0.3s,
        color 0.3s;
}

/*
 * Disposition du conteneur principal
 * Crée un conteneur flex de pleine hauteur pour le contenu de la page
 */
.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 1.25rem;
}

.container-info {
    width: 50%;
    margin: 0 auto;
}
/*
 * Conteneur du bouton de bascule de thème
 * Positionne le bouton de bascule de thème en haut à droite de la page
 */
.theme-toggle {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.25rem;
}

/*
 * Styles du bouton de bascule de thème
 * Un bouton propre et minimaliste qui change entre les modes clair/sombre
 * Design avec icône uniquement et taille augmentée pour une meilleure visibilité
 */
#theme-toggle-btn {
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem;
    border-radius: 50%;
    transition: background-color 0.2s;
    width: 2.75rem;
    height: 2.75rem;
}

/* Effet de survol pour le bouton de bascule de thème */
#theme-toggle-btn:hover {
    background-color: var(--button-hover);
}

/*
 * Taille d'icône augmentée pour une meilleure visibilité
 */
#theme-toggle-btn i {
    font-size: 1.375rem; /* Taille d'icône plus grande */
}

/*
 * Disposition du conteneur de recherche
 * Centre la boîte de recherche et les éléments associés verticalement et horizontalement
 */
.search-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 6.25rem;
}

/*
 * Styles du titre principal
 * Titre grand et proéminent avec poids de police normal
 */
h1 {
    font-size: 3rem;
    margin-bottom: 1.875rem;
    font-weight: normal;
}

/*
 * Couleur d'accent pour une partie du titre
 * Crée un intérêt visuel et une identité de marque
 */
h1 span {
    color: var(--accent-color);
}

/*
 * Conteneur de la boîte de recherche
 * Conteneur arrondi avec bordure subtile et effets de transition
 */
.search-box {
    display: flex;
    width: 100%;
    max-width: 36.5rem;
    margin-bottom: 1.25rem;
    border-radius: 1.5rem;
    border: 1px solid var(--search-border);
    background-color: var(--search-bg);
    padding: 0.5rem 1rem;
    transition: box-shadow 0.2s;
}

/*
 * États de survol et de focus de la boîte de recherche
 * Ajoute une ombre subtile et supprime la bordure pour un effet flottant
 */
.search-box:hover,
.search-box:focus-within {
    box-shadow: 0 0.0625rem 0.375rem rgba(32, 33, 36, 0.28);
    border-color: transparent;
}

/*
 * Champ de saisie de recherche
 * Entrée propre sans bordure qui s'adapte aux couleurs du thème
 */
#search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    background-color: transparent;
    color: var(--text-color);

    width: 50vw; /* 50% of the viewport width */
    max-width: 600px;
    height: 5vh; /* 5% of the viewport height */
    max-height: 33px;
}

/*
 * Styles du bouton de recherche
 * Bouton minimaliste avec couleur d'accent pour l'icône de recherche
 */
#search-btn {
    background: none;
    border: none;
    color: var(--accent-color);
    cursor: pointer;
    font-size: 1.5rem;
}

/*
 * Disposition des options de recherche
 * Disposition horizontale pour les boutons d'options de recherche supplémentaires
 */
.search-options {
    display: flex;
    gap: 0.625rem;
    margin-top: 1.25rem;
}

/*
 * Styles des boutons d'option
 * Boutons propres et minimalistes pour les options de recherche
 */
.option-btn {
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s;
}

/* Effet de survol pour les boutons d'option */
.option-btn:hover {
    background-color: var(--button-hover);
}

/*
 * Styles du pied de page
 * Pied de page simple centré avec opacité réduite
 */
footer {
    text-align: center;
    padding: 1.25rem 0;
    color: var(--text-color);
    opacity: 1;
    font-size: 0.9rem;
}

footer a {
    color: var(--accent-color);
    text-decoration: none;
    transition: opacity 0.2s;
}

footer a:hover {
    opacity: 0.8;
}

/* Modal styles */
.modal {
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: var(--search-bg);
    padding: 1.5rem;
    border-radius: 0.5rem;
    max-width: 36.5rem;
    width: 90%;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
    position: relative;
}

.close {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    color: var(--text-color);
}

.close:hover {
    color: var(--accent-color);
}

/*
 * Styles du conteneur de suggestions
 * Conteneur déroulant pour les suggestions de recherche
 * Caché par défaut, affiché lorsque des suggestions sont disponibles
 */
.suggestions-container {
    width: 90%;
    max-width: 34rem;
    background-color: var(--search-bg);
    border-radius: 0 0 1.5rem 1.5rem;
    box-shadow: 0 0.25rem 0.375rem rgba(32, 33, 36, 0.28);
    margin-top: -1.25rem;
    overflow: hidden;
    display: none;
    z-index: 10;
    position: relative;
}

/*
 * Élément de suggestion individuel
 * Styles pour chaque suggestion dans le menu déroulant
 */
.suggestion-item {
    padding: 0.625rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
    color: var(--text-color);
}

/* Effet de survol pour les éléments de suggestion */
.suggestion-item:hover {
    background-color: var(--button-hover);
}

/*
 * Styles du conteneur de résultats
 * Conteneur pour les résultats de recherche
 * Plus large que la boîte de recherche pour un meilleur affichage du contenu
 */
.results-container {
    width: 100%;
    max-width: 36.5rem; /* Match the search-box max-width */
    margin-top: 1.25rem;
}

/*
 * Styles d'en-tête de résultat
 * Titre pour la section des résultats
 */
.result-header {
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
    color: var(--accent-color);
    font-weight: normal;
}

/*
 * Élément de résultat individuel
 * Conteneur de type carte pour chaque résultat de recherche
 */
.result-item {
    background-color: var(--search-bg);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 0.0625rem 0.1875rem rgba(32, 33, 36, 0.1);
    transition: box-shadow 0.2s;
}

/* Effet de survol pour les éléments de résultat */
.result-item:hover {
    box-shadow: 0 0.0625rem 0.375rem rgba(32, 33, 36, 0.28);
}

/*
 * En-tête d'élément de résultat
 * Titre pour chaque résultat avec couleur d'accent
 */
.result-item h3 {
    margin-bottom: 0.625rem;
    color: var(--accent-color);
}

/*
 * Paragraphe d'élément de résultat
 * Contenu textuel dans les éléments de résultat
 */
.result-item p {
    margin-bottom: 0.5rem;
}

/*
 * Styles de code de coupon
 * Affichage mis en évidence pour les codes de coupon
 */
.coupon-code {
    font-weight: bold;
    background-color: rgba(66, 133, 244, 0.1);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
}

/*
 * Styles du bouton de copie
 * Bouton pour copier les codes de coupon avec icône
 */
.copy-btn {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    cursor: pointer;
    margin-top: 0.625rem;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Effet de survol pour le bouton de copie */
.copy-btn:hover {
    background-color: #3367d6;
}

/*
 * Styles du bouton de retour
 * Bouton pour revenir à la recherche depuis la page de résultats
 */
.back-btn {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    cursor: pointer;
    margin-bottom: 1.25rem;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Effet de survol pour le bouton de retour */
.back-btn:hover {
    background-color: #3367d6;
}

/*
 * Message d'absence de résultats
 * Affiché lorsque la recherche ne renvoie aucun résultat
 */
.no-results {
    text-align: center;
    padding: 1.25rem;
    color: var(--text-color);
    opacity: 0.7;
}

/*
 * Styles responsifs
 * Ajustements pour les écrans plus petits
 */
/*
 * Styles responsifs
 * Ajustements pour différentes tailles d'écran
 */
@media (max-width: 75rem) {
    /* 1200px */
    .search-container {
        margin-bottom: 5rem;
    }
}

@media (max-width: 62rem) {
    /* 992px */
    h1 {
        font-size: 2.5rem;
    }

    .search-box {
        max-width: 80%;
    }
}

@media (max-width: 48rem) {
    /* 768px */
    .search-container {
        margin-bottom: 4rem;
    }

    h1 {
        font-size: 2.25rem;
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 37.5rem) {
    /* 600px */
    /* Boîte de recherche plus large sur mobile */
    .search-box {
        max-width: 90%;
    }

    /* Titre plus petit sur mobile */
    h1 {
        font-size: 2rem;
        margin-bottom: 1.25rem;
    }

    /* Envelopper les options de recherche sur mobile */
    .search-options {
        flex-wrap: wrap;
        justify-content: center;
    }

    .container {
        padding: 1rem;
    }

    /* Smaller placeholder text on mobile */
    #search-input::placeholder {
        font-size: 0.5rem;
    }
}

@media (max-width: 30rem) {
    /* 480px */
    h1 {
        font-size: 1.75rem;
    }

    .search-container {
        margin-bottom: 3rem;
    }

    .results-container {
        max-width: 90%;
    }
}
.site-title-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 1.5rem;
    width: 100%;
}

.site-title-container h2 {
    margin: 0;
    flex: 0 0 auto;
}

.site-link {
    margin-left: 1rem;
    white-space: nowrap;
    color: var(--text-color);
}

p.site-description {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-color);
    opacity: 0.8;
}

/*
 * Styles du lien de titre de site
 * Supprime le style de lien par défaut pour qu'il ressemble au texte normal
 */
.site-title-link,
.site-title-link:visited,
.site-title-link:hover,
.site-title-link:active {
    text-decoration: none;
    color: var(--text-color);
}

/*
 * Styles for external link icon
 * Consistent styling for the external link icon in site titles
 */
.site-title-link .fa-external-link-alt {
    margin-left: 1rem;
    font-size: 0.8em;
    color: var(--accent-color);
}

.subtitle {
    color: var(--text-color);
    opacity: 0.8;
    font-size: 1.1rem;
    margin: 0 0 2.5rem 0;
    text-align: center;
}

.ad-container {
    width: 100%;
    max-width: 34rem;
    margin: 1rem auto;
    padding: 0.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.ad-text {
    color: var(--accent-color);
    font-size: 0.9rem;
    text-align: center;
    padding: 0.5rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.ad-text.visible {
    opacity: 1;
    transform: translateY(0);
}

.ad-link {
    color: var(--accent-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.2s;
}

.ad-link:hover {
    opacity: 0.8;
}

.ad-label {
    font-size: 0.75rem;
    background-color: var(--accent-color);
    color: white;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-weight: 500;
}

.ad-dots {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.ad-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--accent-color);
    opacity: 0.3;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}

.ad-dot:hover {
    opacity: 0.5;
    transform: scale(1.2);
}

.ad-dot.active {
    opacity: 1;
    transform: scale(1.2);
}

/* 
 * Styles for SEO content section
 * This section is initially hidden but can be toggled by users
 */
.seo-content {
    max-width: 36.5rem;
    margin: 0 auto 2rem;
    padding: 1.5rem;
    color: var(--text-color);
    background-color: var(--search-bg);
    border-radius: 0.5rem;
    border: 1px solid var(--search-border);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: none; /* Initially hidden, toggled with JavaScript */
    position: relative;
}

/* Info toggle container */
.info-toggle-container {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
    width: 100%;
}

/* Info toggle button */
#info-toggle-btn {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 1.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.2s;
}

#info-toggle-btn:hover {
    background-color: #0d5bd7;
}

/* Close button for info section */
.close-info-btn {
    background-color: var(--button-hover);
    color: var(--text-color);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem auto 0;
    transition: background-color 0.2s;
}

.close-info-btn:hover {
    background-color: #ddd;
}

.dark-mode .close-info-btn:hover {
    background-color: #4c4c4c;
}

.seo-content h2 {
    font-size: 1.5rem;
    margin: 1.5rem 0 1rem;
    color: var(--accent-color);
}

.seo-content h3 {
    font-size: 1.2rem;
    margin: 1.2rem 0 0.8rem;
    color: var(--text-color);
}

.seo-content p {
    margin-bottom: 1rem;
    line-height: 1.5;
}

.seo-content ul {
    margin: 0.8rem 0 1rem 1.5rem;
}

.seo-content li {
    margin-bottom: 0.5rem;
    line-height: 1.4;
}