#id_content_script-word-count {
    display: none !important;
}

.ck-content h1, .ck-content h2, .ck-content h3 {
    font-weight: bold !important;
    color: #0055c4 !important;
}

.ck-content h1 {
    font-size: 2.5rem !important;
    margin-top: 25px;
}

.ck-content h2 {
    font-size: 2rem !important;
    margin-top: 18px;
}

.ck-content h3 {
    font-size: 1.5rem !important;
    margin-top: 15px;
}

.ck-content p {
    font-size: 1.2rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1rem !important;
}

/* Listes */
.ck-content ul, .ck-content ol {
    font-size: 1.2rem !important;
    line-height: 1.8 !important;
    margin: 1rem 0 !important;
    padding-left: 2rem !important;
}

.ck-content li {
    margin-bottom: 0.5rem !important;
}

.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 */
.ck-content blockquote {
    border-left: 4px solid #0055c4 !important;
    padding-left: 1.5rem !important;
    margin: 1.5rem 0 !important;
    font-style: italic !important;
    color: #555 !important;
    font-size: 1.1rem !important;
}

/* Liens */
.ck-content a {
    color: #0055c4 !important;
    text-decoration: underline !important;
    transition: color 0.3s ease !important;
}

.ck-content a:hover {
    color: #003a87 !important;
}

/* Emphase et gras */
.ck-content strong, .ck-content b {
    font-weight: bold !important;
}

.ck-content em, .ck-content i {
    font-style: italic !important;
}

/* Code */
.ck-content code {
    background-color: #f5f5f5 !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    font-family: 'Consolas', 'Monaco', monospace !important;
    font-size: 0.9em !important;
}

/* Séparateurs */
.ck-content hr {
    border: none !important;
    border-top: 2px solid #e0e0e0 !important;
    margin: 2rem 0 !important;
}

/* Tableaux améliorés */
.ck-content table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
    border-collapse: collapse !important;
    margin: 1.5rem 0 !important;
}

.ck-content th, .ck-content td {
    border: 1px solid #ddd !important;
    padding: 0.75rem !important;
    text-align: left !important;
}

.ck-content th {
    background-color: #f8f9fa !important;
    font-weight: bold !important;
}

/* Styles pour éviter le débordement sur mobile */
.ck-content {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.ck-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1rem auto;
}

.ck-content pre {
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    background-color: #f5f5f5 !important;
    padding: 1rem !important;
    border-radius: 5px !important;
    margin: 1rem 0 !important;
}

.ck-content iframe {
    max-width: 100%;
}

/* Styles pour les médias intégrés - mise à jour pour cibler les classes spécifiques CKEditor */
.ck-content figure.media,
.ck-content figure.media.ck-widget {
    margin: 1.5rem 0;
    width: 100%;
    max-width: 100%;
    position: relative;
    display: block !important;
    min-height: 270px;
}

/* Style spécifique pour le wrapper utilisé par CKEditor */
.ck-content .ck-media__wrapper {
    position: relative;
    width: 100%;
    margin: 0;
}

/* S'assurer que le div interne avec le style inline est correctement affiché */
.ck-content .ck-media__wrapper > div {
    position: relative !important;
    height: 0 !important;
    padding-bottom: 56.25% !important; /* Remplacer le 100% par 56.25% pour ratio 16:9 */
}

/* S'assurer que l'iframe est correctement affiché */
.ck-content .ck-media__wrapper iframe {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    border: 0 !important;
}

/* Cacher les boutons d'insertion autour du widget dans la vue finale */
.ck-content .ck-reset_all,
.ck-content .ck-widget__type-around {
    display: none !important;
}

/* Styles pour oembed - Garder pour compatibilité */
.ck-content figure.media oembed,
.ck-content figure.media div[data-oembed-url] {
    display: block;
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Ratio 16:9 pour les vidéos */
    height: 0;
    overflow: hidden;
}

/* S'assurer que les vidéos de tous fournisseurs s'affichent correctement */
.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;
    display: block;
    width: 100%;
    min-height: 270px;
}

/* Forcer l'affichage du conteneur - version pour la vue détaillée */
body:not(.ck-editor) .media {
    display: block !important;
    clear: both;
    margin: 1em 0;
    min-height: 270px;
}

/* Style spécifique pour le cas simple dans la vue détaillée */
.ck-content figure.media oembed[url],
figure.media oembed[url] {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* Ratio 16:9 */
    overflow: hidden;
}

/* Génération automatique d'un iframe pour oembed avec attribut url */
.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: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    z-index: 1;
}

/* Ajout d'une règle CSS pour transformer oembed en iframe 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;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.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: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF0000'%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");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 64px;
    background-color: #f5f5f5;
    cursor: pointer;
    z-index: 2;
}

/* Ajout d'un script pour remplacer oembed par iframe */
.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;
    width: 100%;
    min-height: 300px;
    display: block;
    margin: 1em 0;
    cursor: pointer;
}

/* Responsive font sizes */
@media (max-width: 640px) {
    .ck-content h1 {
        font-size: 1.875rem !important;
        margin-top: 15px !important;
    }
    
    .ck-content h2 {
        font-size: 1.5rem !important;
        margin-top: 12px !important;
    }
    
    .ck-content h3 {
        font-size: 1.25rem !important;
        margin-top: 10px !important;
    }

    .ck-content p {
        font-size: 1rem !important;
    }
    
    .ck-content ul, .ck-content ol {
        font-size: 1rem !important;
        padding-left: 1.5rem !important;
    }
    
    .ck-content blockquote {
        padding-left: 1rem !important;
        font-size: 1rem !important;
    }
}