.ck-editor__editable {
    height: 600px!important;
}

.ck-content h1, .ck-content h2, .ck-content h3 {
    font-weight: bold!important;
    margin-bottom: 1rem!important;
}

.ck-content h1 {
    font-size: 2.5rem!important;
}

.ck-content h2 {
    font-size: 2rem!important;
}

.ck-content h3 {
    font-size: 1.5rem!important;
}

.ck-content p {
    font-family: 'Poppins', sans-serif!important;
    font-size: 1.2rem!important;
}

/* Styles des boutons */
.ck-content a.btn-primary {
    display: inline-flex;
    align-items: center;
    background-color: #fcd34d;
    color: #1f2937;
    font-weight: bold;
    padding: 0.75rem 2rem;
    border-radius: 0.375rem;
    text-decoration: none;
    margin: 0.5rem 0.1rem;
    transition: all 0.3s;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.ck-content a.btn-primary:hover {
    background-color: #f59e0b;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.ck-content a.btn-secondary {
    display: inline-flex;
    align-items: center;
    background-color: #111827;
    color: #ffffff;
    font-weight: bold;
    padding: 0.75rem 2rem;
    border-radius: 0.375rem;
    text-decoration: none;
    margin: 0.5rem 0;
    transition: all 0.3s;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.ck-content a.btn-secondary:hover {
    background-color: #374151;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* 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;
}