/* ========== CKEDITOR LUDOFUITES CUSTOM STYLES ========== */

/* Masquer les éléments CKEditor indésirables */
#id_content_script-word-count {
    display: none !important;
}

.ck-powered-by {
    display: none !important;
}

/* ========== TYPOGRAPHIE LUDOFUITES ========== */

/* Police principale : Poppins (cohérent avec le site) */
.ck-content {
    font-family: 'Poppins', sans-serif !important;
    color: #374151 !important; /* gray-700 */
    line-height: 1.7 !important;
}

.ck-content p {
    display: block !important;
    font-size: 1.125rem !important; /* text-lg */
    line-height: 1.75 !important;
    margin-bottom: 1.25rem !important;
    color: #374151 !important; /* gray-700 */
}

/* ========== TITRES LUDOFUITES ========== */

.ck-content h2, .ck-content h3, .ck-content h4 {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important; /* font-bold */
    color: #1a1b4c !important; /* deep-sapphire-950 */
    margin-bottom: 1rem !important;
    line-height: 1.3 !important;
}

.ck-content h2 {
    font-size: 2.25rem !important; /* text-4xl */
    font-weight: 900 !important; /* font-black */
    margin-top: 2.5rem !important;
    color: #1a1b4c !important; /* deep-sapphire-950 */
    background: linear-gradient(135deg, #1a1b4c 0%, #0b85af 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.ck-content h3 {
    font-size: 1.875rem !important; /* text-3xl */
    font-weight: 800 !important; /* font-extrabold */
    margin-top: 2rem !important;
    color: #24276b !important; /* deep-sapphire-900 */
}

.ck-content h4 {
    font-size: 1.5rem !important; /* text-2xl */
    font-weight: 700 !important; /* font-bold */
    margin-top: 1.5rem !important;
    color: #0b85af !important; /* scooter-600 */
}

.ck-content h2:first-child,
.ck-content h3:first-child,
.ck-content h4:first-child {
    margin-top: 0 !important;
}

/* ========== LISTES LUDOFUITES ========== */

.ck-content ul, .ck-content ol {
    font-size: 1.125rem !important; /* text-lg */
    line-height: 1.75 !important;
    margin: 1.5rem 0 !important;
    padding-left: 2rem !important;
    color: #374151 !important; /* gray-700 */
}

.ck-content ul {
    list-style-type: disc !important;
}

.ck-content ol {
    list-style-type: decimal !important;
}

.ck-content li {
    margin-bottom: 0.75rem !important;
    color: #374151 !important; /* gray-700 */
}

.ck-content ul ul, .ck-content ol ol, .ck-content ul ol, .ck-content ol ul {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

/* ========== CITATIONS LUDOFUITES ========== */

.ck-content blockquote {
    border-left: 4px solid #0b85af !important; /* scooter-600 */
    background: linear-gradient(135deg, #ecfdff 0%, #eef3ff 100%) !important; /* scooter-50 to deep-sapphire-50 */
    border-radius: 12px !important;
    padding: 1.5rem 2rem !important;
    margin: 2rem 0 !important;
    font-style: italic !important;
    color: #1a1b4c !important; /* deep-sapphire-950 */
    font-size: 1.125rem !important; /* text-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
}

.ck-content blockquote::before {
    content: '"' !important;
    font-size: 4rem !important;
    color: #0b85af !important; /* scooter-600 */
    position: absolute !important;
    top: -0.5rem !important;
    left: 1rem !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 900 !important;
    opacity: 0.3 !important;
}

/* ========== LIENS LUDOFUITES ========== */

.ck-content a {
    color: #0b85af !important; /* scooter-600 */
    text-decoration: underline !important;
    text-decoration-color: #69def7 !important; /* scooter-300 */
    text-underline-offset: 3px !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important; /* font-semibold */
}

.ck-content a:hover {
    color: #1a1b4c !important; /* deep-sapphire-950 */
    text-decoration-color: #1a1b4c !important;
    background-color: #ecfdff !important; /* scooter-50 */
    padding: 2px 4px !important;
    border-radius: 4px !important;
}

/* ========== EMPHASE ET GRAS LUDOFUITES ========== */

.ck-content strong, .ck-content b {
    font-weight: 700 !important; /* font-bold */
    color: #1a1b4c !important; /* deep-sapphire-950 */
}

.ck-content em, .ck-content i {
    font-style: italic !important;
    color: #24276b !important; /* deep-sapphire-900 */
}

/* ========== SURLIGNEURS LUDOFUITES ========== */

.ck-content mark {
    padding: 3px 6px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
}

/* Stabilo adapté aux couleurs LudoFuites */
mark.marker-pink {
    background-color: #fce7f3 !important; /* pink-100 */
    color: #be185d !important; /* pink-700 */
    border: 1px solid #f9a8d4 !important; /* pink-300 */
}

mark.marker-yellow {
    background-color: #fef3c7 !important; /* yellow-100 */
    color: #d97706 !important; /* yellow-600 */
    border: 1px solid #fcd34d !important; /* yellow-300 */
}

mark.marker-green {
    background-color: #dcfce7 !important; /* green-100 */
    color: #15803d !important; /* green-700 */
    border: 1px solid #86efac !important; /* green-300 */
}

mark.marker-blue {
    background-color: #ecfdff !important; /* scooter-50 */
    color: #0b85af !important; /* scooter-600 */
    border: 1px solid #69def7 !important; /* scooter-300 */
}

mark.marker-red {
    background-color: #fee2e2 !important; /* red-100 */
    color: #dc2626 !important; /* red-600 */
    border: 1px solid #fca5a5 !important; /* red-300 */
}

/* ========== CODE LUDOFUITES ========== */

.ck-content code {
    background: linear-gradient(135deg, #eef3ff 0%, #ecfdff 100%) !important; /* deep-sapphire-50 to scooter-50 */
    color: #1a1b4c !important; /* deep-sapphire-950 */
    padding: 4px 8px !important;
    border-radius: 6px !important;
    font-family: 'Monaco', 'Consolas', monospace !important;
    font-size: 0.95em !important;
    border: 1px solid #a3bafe !important; /* deep-sapphire-300 */
    font-weight: 600 !important;
}

.ck-content pre {
    background: linear-gradient(135deg, #eef3ff 0%, #ecfdff 100%) !important;
    color: #1a1b4c !important; /* deep-sapphire-950 */
    padding: 1.5rem !important;
    border-radius: 12px !important;
    margin: 2rem 0 !important;
    border: 1px solid #a3bafe !important; /* deep-sapphire-300 */
    overflow-x: auto !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

/* ========== SÉPARATEURS LUDOFUITES ========== */

.ck-content hr {
    border: none !important;
    height: 3px !important;
    background: linear-gradient(90deg, #0b85af 0%, #69def7 50%, #0b85af 100%) !important; /* scooter gradient */
    margin: 3rem 0 !important;
    border-radius: 2px !important;
    opacity: 0.8 !important;
}

/* ========== TABLEAUX LUDOFUITES ========== */

.ck-content table {
    max-width: 100% !important;
    border-collapse: collapse !important;
    margin: 2rem 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.ck-content th {
    background: linear-gradient(135deg, #1a1b4c 0%, #24276b 100%) !important; /* deep-sapphire gradient */
    color: white !important;
    font-weight: 700 !important; /* font-bold */
    padding: 1rem !important;
    text-align: left !important;
    font-family: 'Poppins', sans-serif !important;
    border: none !important;
}

.ck-content td {
    background-color: white !important;
    color: #374151 !important; /* gray-700 */
    padding: 1rem !important;
    text-align: left !important;
    border-bottom: 1px solid #e5e7eb !important; /* gray-200 */
    border-right: 1px solid #f3f4f6 !important; /* gray-100 */
}

.ck-content tr:nth-child(even) td {
    background-color: #f9fafb !important; /* gray-50 */
}

.ck-content tr:hover td {
    background-color: #ecfdff !important; /* scooter-50 */
}

/* ========== IMAGES LUDOFUITES ========== */

.ck-content img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 2rem auto !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.3s ease !important;
}

.ck-content img:hover {
    transform: scale(1.02) !important;
}

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

@media (max-width: 640px) {
    .ck-content h2 {
        font-size: 1.875rem !important; /* text-3xl */
        margin-top: 2rem !important;
    }
    
    .ck-content h3 {
        font-size: 1.5rem !important; /* text-2xl */
        margin-top: 1.5rem !important;
    }
    
    .ck-content h4 {
        font-size: 1.25rem !important; /* text-xl */
        margin-top: 1rem !important;
    }

    .ck-content p {
        font-size: 1rem !important; /* text-base */
        line-height: 1.6 !important;
    }
    
    .ck-content ul, .ck-content ol {
        font-size: 1rem !important;
        padding-left: 1.5rem !important;
    }
    
    .ck-content blockquote {
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important;
    }
    
    .ck-content table {
        font-size: 0.875rem !important; /* text-sm */
    }
    
    .ck-content th, .ck-content td {
        padding: 0.75rem !important;
    }
}

/* ========== STYLES AVANCÉS LUDOFUITES ========== */

/* Mise en forme des listes avec icônes personnalisées */
.ck-content ul li::marker {
    color: #0b85af !important; /* scooter-600 */
}

.ck-content ol li::marker {
    color: #1a1b4c !important; /* deep-sapphire-950 */
    font-weight: 700 !important;
}

/* Style pour les éléments en gras dans les listes */
.ck-content li strong {
    color: #1a1b4c !important; /* deep-sapphire-950 */
}

/* Style pour les liens dans les listes */
.ck-content li a {
    color: #0b85af !important; /* scooter-600 */
    font-weight: 600 !important;
}

/* ========== MÉDIAS INTÉGRÉS LUDOFUITES ========== */

.ck-content figure.media,
.ck-content figure.media.ck-widget {
    margin: 2rem 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    display: block !important;
    min-height: 270px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

.ck-content .ck-media__wrapper {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.ck-content .ck-media__wrapper > div {
    position: relative !important;
    height: 0 !important;
    padding-bottom: 56.25% !important; /* Ratio 16:9 */
}

.ck-content .ck-media__wrapper iframe {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
}

/* Cacher les éléments CKEditor dans la vue finale */
.ck-content .ck-reset_all,
.ck-content .ck-widget__type-around {
    display: none !important;
}

/* ========== STYLES SPÉCIAUX LUDOFUITES ========== */

/* Encadrés d'information */
.ck-content .info-box {
    background: linear-gradient(135deg, #eef3ff 0%, #ecfdff 100%) !important;
    border-left: 4px solid #0b85af !important; /* scooter-600 */
    padding: 1.5rem !important;
    margin: 2rem 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

/* Encadrés d'alerte */
.ck-content .alert-box {
    background: linear-gradient(135deg, #fef3c7 0%, #fee2e2 100%) !important;
    border-left: 4px solid #f59e0b !important; /* yellow-500 */
    padding: 1.5rem !important;
    margin: 2rem 0 !important;
    border-radius: 8px !important;
    color: #92400e !important; /* yellow-800 */
}

/* Encadrés de succès */
.ck-content .success-box {
    background: linear-gradient(135deg, #dcfce7 0%, #ecfdff 100%) !important;
    border-left: 4px solid #10b981 !important; /* green-500 */
    padding: 1.5rem !important;
    margin: 2rem 0 !important;
    border-radius: 8px !important;
    color: #065f46 !important; /* green-800 */
}

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

.ck-content {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

.ck-content iframe {
    max-width: 100% !important;
    border-radius: 12px !important;
}

/* ========== STYLES OEMBED LUDOFUITES ========== */

.ck-content figure.media oembed,
.ck-content figure.media div[data-oembed-url] {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    padding-bottom: 56.25% !important; /* Ratio 16:9 */
    height: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
}

/* Styles pour tous les fournisseurs de vidéos */
.ck-content figure.media [data-oembed-url],
.ck-content figure.media [data-oembed-url*="dai.ly"],
.ck-content figure.media [data-oembed-url*="dailymotion.com"],
.ck-content figure.media [data-oembed-url*="youtube.com"],
.ck-content figure.media [data-oembed-url*="youtu.be"],
.ck-content figure.media [data-oembed-url*="vimeo.com"] {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 270px !important;
    border-radius: 12px !important;
}

/* Style pour la vue détaillée (hors éditeur) */
body:not(.ck-editor) .media {
    display: block !important;
    clear: both !important;
    margin: 2rem 0 !important;
    min-height: 270px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

/* ========== STYLES POUR DAILYMOTION ========== */

.ck-content figure.media oembed[url*="dai.ly"],
.ck-content figure.media oembed[url*="dailymotion.com"],
figure.media oembed[url*="dai.ly"],
figure.media oembed[url*="dailymotion.com"] {
    position: relative !important;
    padding-bottom: 56.25% !important;
    height: 0 !important;
    overflow: hidden !important;
    max-width: 100% !important;
    border-radius: 12px !important;
}

.ck-content figure.media oembed[url*="dai.ly"]::before,
.ck-content figure.media oembed[url*="dailymotion.com"]::before,
figure.media oembed[url*="dai.ly"]::before,
figure.media oembed[url*="dailymotion.com"]::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(26, 27, 76, 0.1) !important; /* deep-sapphire-950 with opacity */
    z-index: 1 !important;
    border-radius: 12px !important;
}

.ck-content figure.media oembed[url*="dai.ly"]::after,
.ck-content figure.media oembed[url*="dailymotion.com"]::after,
figure.media oembed[url*="dai.ly"]::after,
figure.media oembed[url*="dailymotion.com"]::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230b85af'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 64px !important;
    background-color: #ecfdff !important; /* scooter-50 */
    cursor: pointer !important;
    z-index: 2 !important;
    border-radius: 12px !important;
}

.ck-content figure.media:has(oembed[url*="dai.ly"]),
.ck-content figure.media:has(oembed[url*="dailymotion.com"]),
figure.media:has(oembed[url*="dai.ly"]),
figure.media:has(oembed[url*="dailymotion.com"]) {
    position: relative !important;
    width: 100% !important;
    min-height: 300px !important;
    display: block !important;
    margin: 2rem 0 !important;
    cursor: pointer !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* ========== PROSE LUDOFUITES (pour affichage final) ========== */

/* Styles pour la classe prose utilisée dans les templates */
.prose .ck-content,
.prose-lg .ck-content {
    max-width: none !important;
}

.prose h2, .prose-lg h2 {
    color: #1a1b4c !important; /* deep-sapphire-950 */
    font-family: 'Poppins', sans-serif !important;
    font-weight: 900 !important;
}

.prose h3, .prose-lg h3 {
    color: #24276b !important; /* deep-sapphire-900 */
    font-family: 'Poppins', sans-serif !important;
    font-weight: 800 !important;
}

.prose h4, .prose-lg h4 {
    color: #0b85af !important; /* scooter-600 */
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
}

.prose p, .prose-lg p {
    color: #374151 !important; /* gray-700 */
    font-family: 'Poppins', sans-serif !important;
}

.prose a, .prose-lg a {
    color: #0b85af !important; /* scooter-600 */
    font-weight: 600 !important;
}

.prose a:hover, .prose-lg a:hover {
    color: #1a1b4c !important; /* deep-sapphire-950 */
}

.prose strong, .prose-lg strong {
    color: #1a1b4c !important; /* deep-sapphire-950 */
    font-weight: 700 !important;
}