/* Suppression des limitations de largeur sur .section pour permettre 
   aux backgrounds d'images de prendre toute la largeur */
@media (min-width: 1280px) and (max-width: 1535px) {
    .section-content {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1536px) {
    .section-content {
        max-width: 1480px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
:root {
    --primary: #7C3AED;
    --primary-dark: #6D28D9;
    --secondary: #EC4899;
    --accent: #8B5CF6;
    --background: #0F172A;
    --text: #F8FAFC;
    --text-secondary: #CBD5E1;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --gradient-1: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
    --gradient-2: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: var(--text);
    background: var(--background);
    overflow-x: hidden; /* Empêche le scroll horizontal */
}

/* Règles pour éviter les débordements horizontaux */
html {
    overflow-x: hidden;
}

/* S'assurer que les sections prennent toute la largeur */
.section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Container pour le contenu avec les bonnes marges */
.section-content {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .section-content {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .section-content {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}


/* Effet 3D pour les cartes services - Utilisé dans index.html */
.hero-3d-container {
    transition: transform 0.2s ease-out;
    transform-style: preserve-3d;
}

/* CKEditor */
.ck-sticky-panel {
    background-color: rgb(255, 255, 255)!important;
}

.ck-editor__top {
    background-color: rgb(255, 255, 255)!important;
}

.ck-toolbar {
    background-color: rgb(255, 255, 255)!important;
}

.ck-content {
    background-color: var(--background)!important;
    color: var(--text)!important;
}

.ck.ck-editor__main>.ck-editor__editable {
    background: var(--background)!important;
}
.editor__editable {
    background: var(--background)!important;
}

/* Titres */
.ck-content h1 {
    font-weight: 900!important;
    font-size: 3rem!important;
    background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%)!important;
    -webkit-background-clip: text!important;
    -webkit-text-fill-color: transparent!important;
    background-clip: text!important;
    color: transparent!important;
    display: inline-block!important;
    margin-bottom: 1rem!important;
}

.ck-content h2 {
    font-weight: 900!important;
    font-size: 2rem!important;
    margin-bottom: 1rem!important;
    color: var(--primary)!important;
}

.ck-content h3 {
    font-weight: 900!important;
    font-size: 1.5rem!important;
    margin-bottom: 1rem!important;
    color: var(--primary)!important;
}

/* Paragraphes */
.ck-content p {
    margin-bottom: 1rem!important;
    line-height: 1.6!important;
    color: var(--text)!important;
}

/* Liens */
.ck-content a {
    color: var(--primary)!important;
    text-decoration: underline!important;
    transition: color 0.3s ease!important;
}

.ck-content a:hover {
    color: var(--secondary)!important;
}

/* Texte en gras */
.ck-content strong,
.ck-content b {
    font-weight: 700!important;
    color: var(--text)!important;
}

/* Texte en italique */
.ck-content em,
.ck-content i {
    font-style: italic!important;
    color: var(--text-secondary)!important;
}

/* Texte souligné */
.ck-content u {
    text-decoration: underline!important;
    color: var(--text)!important;
}

/* Texte barré */
.ck-content s,
.ck-content strike {
    text-decoration: line-through!important;
    color: var(--text-secondary)!important;
}

/* Code inline */
.ck-content code {
    background-color: var(--glass-bg)!important;
    color: var(--accent)!important;
    padding: 0.2rem 0.4rem!important;
    border-radius: 4px!important;
    font-family: 'Courier New', monospace!important;
    font-size: 0.9em!important;
}

/* Bloc de code */
.ck-content pre {
    background-color: var(--glass-bg)!important;
    color: var(--text)!important;
    padding: 1rem!important;
    border-radius: 8px!important;
    border: 1px solid var(--glass-border)!important;
    overflow-x: auto!important;
    margin-bottom: 1rem!important;
}

.ck-content pre code {
    background: none!important;
    padding: 0!important;
    color: var(--text)!important;
}

/* Exposant et indice */
.ck-content sup {
    vertical-align: super!important;
    font-size: 0.8em!important;
    color: var(--text)!important;
}

.ck-content sub {
    vertical-align: sub!important;
    font-size: 0.8em!important;
    color: var(--text)!important;
}

/* Texte surligné */
.ck-content mark {
    background-color: var(--accent)!important;
    color: var(--background)!important;
    padding: 0.1rem 0.2rem!important;
    border-radius: 2px!important;
}

/* Listes à puces */
.ck-content ul {
    margin-bottom: 1rem!important;
    padding-left: 2rem!important;
}

.ck-content ul li {
    list-style-type: disc!important;
    margin-bottom: 0.5rem!important;
    color: var(--text)!important;
    line-height: 1.6!important;
}

.ck-content ul li::marker {
    color: var(--primary)!important;
}

/* Listes numérotées */
.ck-content ol {
    margin-bottom: 1rem!important;
    padding-left: 2rem!important;
}

.ck-content ol li {
    list-style-type: decimal!important;
    margin-bottom: 0.5rem!important;
    color: var(--text)!important;
    line-height: 1.6!important;
}

.ck-content ol li::marker {
    color: var(--primary)!important;
    font-weight: 600!important;
}

/* Todo list */
.ck-content .todo-list {
    list-style: none!important;
    padding-left: 0!important;
}

.ck-content .todo-list li {
    position: relative!important;
    padding-left: 2rem!important;
    margin-bottom: 0.5rem!important;
}

.ck-content .todo-list li input[type="checkbox"] {
    position: absolute!important;
    left: 0!important;
    top: 0.2rem!important;
    accent-color: var(--primary)!important;
}

/* Citations */
.ck-content blockquote {
    border-left: 4px solid var(--primary)!important;
    padding-left: 1rem!important;
    margin: 1rem 0!important;
    font-style: italic!important;
    color: var(--text-secondary)!important;
    background-color: var(--glass-bg)!important;
    padding: 1rem!important;
    border-radius: 0 8px 8px 0!important;
}

/* Images */
.ck-content img {
    max-width: 100%!important;
    height: auto!important;
    border-radius: 8px!important;
    margin: 1rem 0!important;
}

.ck-content figure {
    margin: 1rem 0!important;
    text-align: center!important;
}

.ck-content figure img {
    margin: 0!important;
}

.ck-content figcaption {
    color: var(--text-secondary)!important;
    font-size: 0.9em!important;
    margin-top: 0.5rem!important;
    font-style: italic!important;
}

/* Tableaux */
.ck-content table {
    width: 100%!important;
    border-collapse: collapse!important;
    margin: 1rem 0!important;
    background-color: var(--glass-bg)!important;
    border-radius: 8px!important;
    overflow: hidden!important;
}

.ck-content table th {
    background-color: var(--primary)!important;
    color: white!important;
    padding: 0.75rem!important;
    text-align: left!important;
    font-weight: 600!important;
}

.ck-content table td {
    padding: 0.75rem!important;
    border-bottom: 1px solid var(--glass-border)!important;
    color: var(--text)!important;
}

.ck-content table tr:hover {
    background-color: rgba(124, 58, 237, 0.1)!important;
}

/* Media embed */
.ck-content .media {
    margin: 1rem 0!important;
    text-align: center!important;
}

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

/* Responsive CKEditor - Mobile */
@media (max-width: 768px) {
    .ck-content h1 {
        font-size: 2rem!important;
        margin-bottom: 0.8rem!important;
    }

    .ck-content h2 {
        font-size: 1.5rem!important;
        margin-bottom: 0.8rem!important;
    }

    .ck-content h3 {
        font-size: 1.2rem!important;
        margin-bottom: 0.8rem!important;
    }

    .ck-content table {
        font-size: 0.9rem!important;
    }

    .ck-content table th,
    .ck-content table td {
        padding: 0.5rem!important;
    }
}

/* Responsive CKEditor - Très petit mobile */
@media (max-width: 480px) {
    .ck-content h1 {
        font-size: 1.8rem!important;
        margin-bottom: 0.6rem!important;
    }

    .ck-content h2 {
        font-size: 1.3rem!important;
        margin-bottom: 0.6rem!important;
    }

    .ck-content h3 {
        font-size: 1.1rem!important;
        margin-bottom: 0.6rem!important;
    }

    .ck-content table {
        font-size: 0.8rem!important;
    }

    .ck-content table th,
    .ck-content table td {
        padding: 0.4rem!important;
    }
}