/* ==========================================================================
   SYSTÈME DE CLASSES EMOJI - Thème Opquast
   Permet de choisir l'emoji approprié pour chaque titre H2 et lien sommaire
   ========================================================================== */

/* ==========================================================================
   STYLE DE BASE DU CERCLE - H2
   ========================================================================== */

/* H2 avec classe emoji - Style de base */
.s-cms h2[class*="c-emoji-"],
h2[class*="c-emoji-"] {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--opq-navy-light);
    line-height: 1.4;
    margin-top: 48px;
    margin-bottom: 16px;
}

.s-cms h2[class*="c-emoji-"]:first-child,
h2[class*="c-emoji-"]:first-child {
    margin-top: 0;
}

/* Cercle de base pour les H2 */
.s-cms h2[class*="c-emoji-"]::before,
h2[class*="c-emoji-"]::before {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--opq-turquoise-light);
    border-radius: 50%;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ==========================================================================
   STYLE DE BASE DU CERCLE - SOMMAIRE
   ========================================================================== */

/* Liens sommaire avec classe emoji */
.c-summary__link[class*="c-emoji-"] {
    display: block;
    padding: 16px 24px 16px 64px;
    position: relative;
}

/* Cercle de base pour les liens sommaire */
.c-summary__link[class*="c-emoji-"]::before {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: var(--opq-turquoise-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

/* ==========================================================================
   CLASSES EMOJI DISPONIBLES
   ========================================================================== */

/* Découvrir / Vue d'ensemble */
.c-emoji-discover::before { content: "🔍" !important; }

/* Public cible / Objectifs */
.c-emoji-target::before { content: "🎯" !important; }

/* Informations pratiques */
.c-emoji-info::before { content: "ℹ️" !important; }

/* Aller plus loin / Avancé */
.c-emoji-rocket::before { content: "🚀" !important; }

/* Témoignages / Avis */
.c-emoji-testimonial::before { content: "💬" !important; }

/* Inscription / Contact */
.c-emoji-register::before { content: "✏️" !important; }

/* Compétences / Validation */
.c-emoji-check::before { content: "✅" !important; }

/* Programme / Contenus / Livres */
.c-emoji-book::before { content: "📚" !important; }

/* Planning / Sessions / Calendrier */
.c-emoji-calendar::before { content: "🗓️" !important; }

/* Tarifs / Financement */
.c-emoji-euro::before { content: "💶" !important; }

/* Accessibilité */
.c-emoji-access::before { content: "♿" !important; }

/* Formateurs / Équipe */
.c-emoji-trainer::before { content: "👨‍🏫" !important; }

/* Diplôme / Certification */
.c-emoji-diploma::before { content: "🎓" !important; }

/* Outils / Méthodes */
.c-emoji-tools::before { content: "🛠️" !important; }

/* Étoile / Highlights */
.c-emoji-star::before { content: "⭐" !important; }

/* Ampoule / Idées */
.c-emoji-idea::before { content: "💡" !important; }

/* Utilisateurs / Personnes */
.c-emoji-users::before { content: "👥" !important; }

/* Document / Rapport */
.c-emoji-document::before { content: "📄" !important; }

/* Liste / Checklist */
.c-emoji-list::before { content: "📋" !important; }

/* Lien / Ressources */
.c-emoji-link::before { content: "🔗" !important; }

/* Question / FAQ */
.c-emoji-question::before { content: "❓" !important; }

/* Attention / Avertissement */
.c-emoji-warning::before { content: "⚠️" !important; }

/* Succès / Réussite */
.c-emoji-success::before { content: "🏆" !important; }

/* Arrivée / Fin */
.c-emoji-finish::before { content: "🏁" !important; }

/* Épingle / Point clé */
.c-emoji-pin::before { content: "📌" !important; }

/* Vidéo / Présentation */
.c-emoji-video::before { content: "🎬" !important; }

/* Cerveau / Mémorisation */
.c-emoji-brain::before { content: "🧠" !important; }

/* Graphique / Statistiques / Chiffres */
.c-emoji-chart::before { content: "📊" !important; }

/* Micro / Conférences */
.c-emoji-mic::before { content: "🎤" !important; }

/* Art / Design */
.c-emoji-art::before { content: "🎨" !important; }

/* Panier / Acheter */
.c-emoji-cart::before { content: "🛒" !important; }

/* Argent / Économie */
.c-emoji-money::before { content: "💰" !important; }

/* Globe / International */
.c-emoji-globe::before { content: "🌐" !important; }

/* Mégaphone / Annonce */
.c-emoji-megaphone::before { content: "📣" !important; }

/* Email / Newsletter */
.c-emoji-email::before { content: "📧" !important; }

/* Dossier / Archives */
.c-emoji-folder::before { content: "📁" !important; }

/* Historique / Temps */
.c-emoji-history::before { content: "📜" !important; }

/* Stylo / Écriture / Direction */
.c-emoji-pen::before { content: "✍️" !important; }

/* Travail / Emploi */
.c-emoji-briefcase::before { content: "💼" !important; }

/* Applaudissements / Crédits */
.c-emoji-clap::before { content: "👏" !important; }

/* Bâtiment / Administration / Service public */
.c-emoji-building::before { content: "🏛️" !important; }

/* Recherche / Loupe */
.c-emoji-search::before { content: "🔍" !important; }

/* Carte bancaire / Paiement */
.c-emoji-card::before { content: "💳" !important; }

/* Graduation / Étudiant */
.c-emoji-graduation::before { content: "🎓" !important; }

/* Poignée de main / Partenaires */
.c-emoji-handshake::before { content: "🤝" !important; }

/* Ordinateur / Agences web */
.c-emoji-computer::before { content: "💻" !important; }

/* Journal / Articles */
.c-emoji-news::before { content: "📰" !important; }

/* Entreprise / Annonceurs */
.c-emoji-office::before { content: "🏢" !important; }

/* Localisation / Adresse */
.c-emoji-location::before { content: "📍" !important; }

/* Aucun emoji (désactiver) */
.c-emoji-none::before {
    content: "" !important;
    display: none !important;
}

/* ==========================================================================
   ANIMAUX (équipe)
   ========================================================================== */

/* Lion / Direction */
.c-emoji-lion::before { content: "🦁" !important; }

/* Aigle / Vision */
.c-emoji-eagle::before { content: "🦅" !important; }

/* Abeille / Organisation */
.c-emoji-bee::before { content: "🐝" !important; }

/* Hibou / Sagesse */
.c-emoji-owl::before { content: "🦉" !important; }

/* Pieuvre / Technique */
.c-emoji-octopus::before { content: "🐙" !important; }

/* Dauphin / Communication */
.c-emoji-dolphin::before { content: "🐬" !important; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .s-cms h2[class*="c-emoji-"],
    h2[class*="c-emoji-"] {
        font-size: 1.25rem;
        margin-top: 32px;
    }

    .s-cms h2[class*="c-emoji-"]::before,
    h2[class*="c-emoji-"]::before {
        width: 30px;
        height: 30px;
        font-size: 0.95rem;
    }
}