/* Styles CSS partagés et thèmes d'énigmes pour la Suite Outils MFC */

@font-face {
    font-family: 'Templier Bastax';
    src: url('https://mysterefeuilleciseaux.com/wp-content/uploads/police_templier/TemplierBastax-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ==========================================================================
   OPTIMISATION CLS (Cumulative Layout Shift) & RÉSERVATION D'ESPACE
   ========================================================================== */
.mfc-app-root {
    box-sizing: border-box;
    isolation: isolate;
    width: 100%;
    margin-bottom: 2rem;
}

#mfc-chasse-au-tresor-root {
    min-height: 640px;
    contain-intrinsic-size: 100% 640px;
}

#mfc-message-secret-root {
    min-height: 740px;
    contain-intrinsic-size: 100% 740px;
}

#mfc-chromatique-root {
    min-height: 620px;
    contain-intrinsic-size: 100% 620px;
}

@media (max-width: 768px) {
    #mfc-chasse-au-tresor-root {
        min-height: 700px;
        contain-intrinsic-size: 100% 700px;
    }
    #mfc-message-secret-root {
        min-height: 860px;
        contain-intrinsic-size: 100% 860px;
    }
    #mfc-chromatique-root {
        min-height: 720px;
        contain-intrinsic-size: 100% 720px;
    }
}

/* Squelette de chargement initial anti-CLS */
.mfc-skeleton-container {
    width: 100%;
    background: #ffffff;
    border-radius: 2rem;
    border: 1px solid #f1f5f9;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    box-sizing: border-box;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
}

.mfc-skeleton-spinner {
    width: 44px;
    height: 44px;
    border: 3.5px solid #ffedd5;
    border-top-color: #ea580c;
    border-radius: 50%;
    animation: mfc-spin 0.9s cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite;
    margin-bottom: 1.25rem;
}

@keyframes mfc-spin {
    to { transform: rotate(360deg); }
}

.mfc-skeleton-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #003A6D;
    margin: 0 0 0.5rem;
}

.mfc-skeleton-desc {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
    max-width: 420px;
    line-height: 1.5;
}

/* Stabilisation des images produits WooCommerce pour éviter tout CLS */
.wc-block-grid__product-image,
.wc-block-components-product-image,
li.wp-block-post .wc-block-components-product-image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f8fafc;
}

.wc-block-grid__product-image img,
.wc-block-components-product-image img,
li.wp-block-post .wc-block-components-product-image img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mfc-app-root *,
.mfc-app-root *::before,
.mfc-app-root *::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e2e8f0;
}

.mfc-app-root button {
    cursor: pointer;
    background-color: transparent;
    background-image: none;
    border-style: solid;
}

.mfc-app-root input,
.mfc-app-root textarea,
.mfc-app-root select {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Reset canvas pour éviter toute déformation par le thème WordPress (Blocksy) */
.mfc-app-root canvas {
    display: block !important;
    max-width: none !important;
}

#mc-print-area {
    background-color: #ffffff !important;
    isolation: isolate;
}

#mc-print-area canvas {
    display: block !important;
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
}

.mfc-app-root button,
.mfc-app-root input,
.mfc-app-root select,
.mfc-app-root textarea,
.mfc-app-root label {
    font-family: inherit;
}

/* Protection contre les surcharges de marges des titres WordPress (Blocksy) */
.mfc-app-root h1,
.mfc-app-root h2,
.mfc-app-root h3,
.mfc-app-root h4 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.mfc-app-root .mfc-header-title {
    margin: 0 !important;
    margin-bottom: 0.2rem !important;
    line-height: 1.1 !important;
}

.mfc-app-root .mfc-header-bar {
    margin-top: 0.35rem !important;
    margin-bottom: 0.35rem !important;
}

.mfc-app-root .mfc-header-subtitle {
    margin: 0 !important;
    margin-top: 0.25rem !important;
    line-height: 1.3 !important;
}

/* Protection contre les surcharges de thèmes WordPress (Blocksy, etc.) */
.mfc-app-root .text-white {
    color: #ffffff !important;
}

.mfc-app-root .text-indigo-600 {
    color: #4f46e5 !important;
}

.mfc-app-root .text-red-600 {
    color: #dc2626 !important;
}

.mfc-app-root .bg-indigo-600 {
    background-color: #4f46e5 !important;
}

/* Polices personnalisées pour les thèmes d'énigmes */
.font-handwritten { font-family: 'Solitreo', cursive !important; }
.font-pixel,
.mfc-app-root .font-pixel { 
    font-family: 'VT323', monospace !important; 
    font-weight: 400 !important;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
}
.font-title { font-family: 'Fredoka', sans-serif !important; }

/* Dynamic Theme Parchment / Paper Styles */
.theme-pirate {
    color: #4b3621;
    font-family: 'Eagle Lake', serif !important;
}

.theme-spy { 
    background-color: #0a0a0a; 
    border: 4px solid #0f0; 
    color: #0f0; 
    font-family: 'Black Ops One', cursive !important; 
    background-image: linear-gradient(rgba(0, 255, 0, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 0, 0.05) 1px, transparent 1px); 
    background-size: 30px 30px; 
}

.theme-wizard { 
    background-color: #2e1a47; 
    color: #ffd700; 
    border: 8px double #ffd700; 
    font-family: 'Cinzel Decorative', cursive !important; 
}

.theme-hero { 
    background-color: #fff200; 
    background-image: radial-gradient(#ff0000 20%, transparent 21%); 
    background-size: 20px 20px; 
    background-position: 0 0; 
    color: #000; 
    border: 8px solid #000; 
    font-family: 'Bangers', cursive !important; 
}

.theme-royal { 
    background-color: #fff0f5; 
    border: 8px solid #ffb6c1; 
    outline: 2px dashed #c71585; 
    outline-offset: -15px; 
    color: #c71585; 
    font-family: 'Courgette', cursive !important; 
}

.theme-galaxy { 
    background-color: #0b0c2a; 
    color: #00d2ff; 
    font-family: 'Orbitron', sans-serif !important; 
    border: 4px solid #00d2ff; 
    background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 3px), radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 2px); 
    background-size: 550px 550px, 350px 350px; 
    background-position: 0 0, 40px 60px; 
}

.theme-dino { 
    background-color: #556b2f; 
    color: #f5f5dc; 
    font-family: 'Luckiest Guy', cursive !important; 
    border: 8px dashed #2e3b1f; 
    background-image: radial-gradient(circle at 10% 20%, rgba(0,0,0,0.05) 20px, transparent 21px); 
}

.theme-western { 
    background-color: #e6ccb2; 
    color: #3e2723; 
    font-family: 'Rye', serif !important; 
    border: 10px solid #5d4037; 
    outline: 2px dashed #3e2723; 
    outline-offset: -20px; 
    background-image: linear-gradient(90deg, rgba(93,64,55,0.05) 1px, transparent 1px); 
    background-size: 25px 100%; 
}

.comic-box {
    background-color: white;
    border: 4px solid black;
    padding: 20px;
    box-shadow: 12px 12px 0px black;
    position: relative;
    z-index: 10;
}

.theme-dino h2 {
    font-size: 2.2rem !important;
    letter-spacing: 0.02em;
}

/* Print Specific Styles - Complete Site Isolation for Printable Kits */
@media print {
    /* 1. Masquer tous les éléments d'interface WordPress, navigation, header, footer et blocs d'article */
    header, footer, nav, aside,
    #header, #footer, .ct-header, .ct-footer,
    .site-header, .site-footer,
    .entry-header, .ct-breadcrumbs,
    .comments-area, .sidebar, #comments,
    .wp-block-post-title,
    .mfc-callout, [class*="mfc-callout"],
    .mfc-lead-capture, [class*="lead-capture"],
    .wp-block-greenshift-blocks-container:not(:has(.mfc-app-root)),
    .wp-block-greenshift-blocks-image,
    .entry-content > *:not(.mfc-app-root):not(:has(.mfc-app-root)),
    .no-print, [class*="no-print"], .mfc-no-print {
        display: none !important;
    }

    /* 2. Isolation totale quand mfc-printing-kit est actif */
    body.mfc-printing-kit > *:not(#main-container):not(#main):not(.site-main):not(main) {
        display: none !important;
    }
    body.mfc-printing-kit #main-container > *:not(#main):not(.site-main):not(main) {
        display: none !important;
    }
    body.mfc-printing-kit .site-main > *:not(.ct-container-full):not(article):not(#post-33892):not(#post-44255):not(#post-44971) {
        display: none !important;
    }

    /* 3. Réinitialisation complète du corps et de la page */
    html, body {
        background: #ffffff !important;
        background-color: #ffffff !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        font-size: 11pt !important;
        color: #000000 !important;
    }

    .site-main, main, article, .entry-content, .ct-container, .ct-container-full,
    .mfc-iframe-wrapper, [class*="gspb_container"] {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    /* 4. Conteneur simulateur propre */
    #mfc-chasse-au-tresor-root, #mfc-ecriture-prenom-root, #mfc-message-secret-root, #mfc-chromatique-root, .mfc-app-root {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
    }

    /* 5. Gestion des sauts de page pour les énigmes découpables */
    .print-break {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        margin-bottom: 20px !important;
        display: block !important;
    }

    @page {
        size: A4 portrait;
        margin: 10mm;
    }

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ==========================================================================
   CONTENEUR ÉDITORIAL & CENTRAGE SOUS LES SIMULATEURS
   ========================================================================== */
.page-id-44971 .entry-content > *:not(#mfc-ecriture-prenom-root):not(.mfc-app-root):not(#gspb_container-id-gsbp-44971-app):not(:has(#mfc-ecriture-prenom-root)),
.entry-content:has(#mfc-ecriture-prenom-root) > *:not(#mfc-ecriture-prenom-root):not(.mfc-app-root):not(#gspb_container-id-gsbp-44971-app):not(:has(#mfc-ecriture-prenom-root)) {
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

@media (max-width: 900px) {
    .page-id-44971 .entry-content > p,
    .page-id-44971 .entry-content > h2,
    .page-id-44971 .entry-content > h3,
    .page-id-44971 .entry-content > ul,
    .page-id-44971 .entry-content > ol {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .page-id-44971 .entry-content > .mfc-lead-capture-container,
    .page-id-44971 .entry-content > .wp-block-woocommerce-single-product,
    .page-id-44971 .entry-content > blockquote.wp-block-quote {
        margin-left: 16px !important;
        margin-right: 16px !important;
        width: auto !important;
    }
}