/**
 * CSS pour le bloc Contenu Levrard
 * Fichier : assets/css/blocks/contenu.css
 */

/* Variables couleurs */
:root {
    --levrard-red: #E73331;
    --levrard-dark-red: #E73331;
    --levrard-white: #ffffff;
    --levrard-gray: #f5f5f5;
    --levrard-light-gray: #f8f8f8;
    --levrard-dark-gray: #333333;
    --levrard-text: #363636;
    --levrard-border: #e0e0e0;
    --overlay-opacity: 0;
}

/**
 * Structure principale
 */
.levrard-contenu-section {
    position: relative;
    border-radius: 50px;
    z-index: 1;
    margin-top: -40px;
    background-image:none !important;
}
.levrard-banniere-autre-section + .levrard-contenu-section {
    margin-top: 0;
}
.levrard-video-section + .levrard-contenu-section {
    margin-top: 0;
    background: transparent;
}

/* Background overlay */
.levrard-contenu-section.has-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 1;
}

.contenu-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, var(--overlay-opacity));
    z-index: 1;
}

/* Container principal */
.contenu-container {
    position: relative;
    z-index: 2;
    max-width: 1600px;
    margin: 0 auto;
}
/* ---------------------------- */
@media (max-width:110em){
    .contenu-container{width:calc(100% - 100px);max-width:100%;margin:0 50px;}
}
@media (max-width:90em){
    .contenu-container{width:calc(100% - 80px);margin:0 40px;}
}
@media (max-width:60em){
    .contenu-container{width:calc(100% - 60px);margin:0 30px;}
}
@media (max-width:50em){
    .contenu-container{width:96%;margin:0 2%;}
}
/* ---------------------------- */

/**
 * Espacements
 */
.levrard-contenu-section.padding-top-none { padding-top: 0; }
.levrard-contenu-section.padding-top-small { padding-top: 40px; }
.levrard-contenu-section.padding-top-medium { padding-top: 120px; }
.levrard-contenu-section.padding-top-large { padding-top: 80px; }
.levrard-contenu-section.padding-top-xl { padding-top: 100px; }

.levrard-contenu-section.padding-bottom-none { padding-bottom: 0; }
.levrard-contenu-section.padding-bottom-small { padding-bottom: 40px; }
.levrard-contenu-section.padding-bottom-medium { padding-bottom: 100px; }
.levrard-contenu-section.padding-bottom-large { padding-bottom: 80px; }
.levrard-contenu-section.padding-bottom-xl { padding-bottom: 100px; }


/**
 * Styles communs
 */
.contenu-main-title {
    font-weight: 400;
    color: var(--levrard-dark-gray);
    margin-bottom: 100px;
    line-height: 1.2;
}
.contenu-main-title strong{
    color: var(--levrard-dark-red);
    font-weight: 700;
}
/* ---------------------------- */
@media (max-width:135em){
    .contenu-main-title{margin-bottom:80px}
}
@media (max-width:120em){
    .contenu-main-title{margin-bottom:60px}
}
@media (max-width:90em){
    .contenu-main-title{margin-bottom:40px}
}
/* ---------------------------- */

.contenu-wysiwyg {
    font-size: 21px;
    line-height: 1.7;
    color: var(--levrard-text);
}
.contenu-wysiwyg p a {
    color: var(--levrard-dark-red);
    font-weight: bold;
}
/* ---------------------------- */
@media (max-width:135em){.contenu-wysiwyg{font-size:20px}}
@media (max-width:120em){.contenu-wysiwyg{font-size:19px}}
@media (max-width:90em){.contenu-wysiwyg{font-size:18px}}
@media (max-width:60em){.contenu-wysiwyg{font-size:16px}}

.contenu-wysiwyg h1,
.contenu-wysiwyg h2,
.contenu-wysiwyg h3,
.contenu-wysiwyg h4 {
    color: var(--levrard-dark-gray);
    margin-bottom: 15px;
}

.contenu-wysiwyg p {
    margin-bottom: 15px;
}

.contenu-wysiwyg ul,
.contenu-wysiwyg ol {
    margin-bottom: 20px;
    padding-left: 25px;
}

.contenu-wysiwyg li {
    margin-bottom: 8px;
}

.contenu-wysiwyg strong {
    color: var(--levrard-dark-gray);
    font-weight: 600;
}

/**
 * LAYOUT 1 - Image + Contenu
 */
.contenu-layout-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

.contenu-layout-1.left {
    grid-template-columns: 1fr 1fr;
}

.contenu-layout-1.left .contenu-image-area {
    order: 1;
}

.contenu-layout-1.left .contenu-text-area {
    order: 2;
}

.contenu-layout-1.right .contenu-text-area {
    order: 1;
}

.contenu-layout-1.right .contenu-image-area {
    order: 2;
}

.contenu-layout-1 .contenu-image-area img {
    width: 100%;
    height: auto;
    border-radius: 45px;
}

/**
 * LAYOUT 2 - Titre + 2 Colonnes
 */
.contenu-layout-2 .contenu-title-area {
    margin-bottom: 50px;
}

.contenu-layout-2 .contenu-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: flex-start;
}

.contenu-layout-2 .contenu-column.bordered {
    border: 2px solid var(--levrard-border);
    padding: 30px;
    border-radius: 15px;
}

.contenu-layout-2 .contenu-column.highlighted {
    background: linear-gradient(90deg, rgba(233, 57, 52, 0.05) 0%, transparent 100%);
    padding: 30px;
    border-radius: 15px;
    border-left: 4px solid var(--levrard-red);
}

/**
 * LAYOUT 3 - Image gauche + Contenu structuré
 */
.contenu-layout-3 .contenu-title-area {
    margin-bottom: 40px;
}

.contenu-layout-3 .contenu-main-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: flex-start;
}

.contenu-layout-3 .contenu-image-area img {
    width: 100%;
    height: auto;
    border-radius: 45px;
    transform: rotate(-2.5deg);
}

.contenu-layout-3 .contenu-text-area {
    display: flex;
    flex-direction: column;
}

/**
 * LAYOUT 4 - Version inversée du Layout 3
 */
.contenu-layout-4 .contenu-title-area {
    margin-bottom: 40px;
}

.contenu-layout-4 .contenu-main-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: flex-start;
}

.contenu-layout-4 .contenu-main-area.reversed {
    direction: ltr;
}

.contenu-layout-4 .contenu-image-area img {
    width: 100%;
    height: auto;
    border-radius: 45px;
    transform: rotate(2.5deg);
}

.contenu-layout-4 .contenu-text-area {
    display: flex;
    flex-direction: column;
}

/* -- gaps -- */

.contenu-layout-1,
.contenu-layout-2 .contenu-columns,
.contenu-layout-3 .contenu-main-area,
.contenu-layout-4 .contenu-main-area {
    gap: 120px;
}

.contenu-layout-3 .contenu-text-area,
.contenu-layout-4 .contenu-text-area{
    gap:30px;
}

.contenu-layout-2 .contenu-column.boxed,
.contenu-layout-3 .contenu-boxed-content,
.contenu-layout-4 .contenu-boxed-content{
    border-radius:35px;
    padding: 25px;
    border: solid 2px #fbdddd;
    background-color: #faeded;
}

/* ---------------------------- */
@media (max-width:120em){
    .contenu-layout-1,
    .contenu-layout-2 .contenu-columns,
    .contenu-layout-3 .contenu-main-area,
    .contenu-layout-4 .contenu-main-area {
        gap: 100px;
    }
}
@media (max-width:90em){
    .contenu-layout-1,
    .contenu-layout-2 .contenu-columns,
    .contenu-layout-3 .contenu-main-area,
    .contenu-layout-4 .contenu-main-area {
        gap: 70px;
    }
    .contenu-layout-1 .contenu-image-area img,
    .contenu-layout-3 .contenu-image-area img,
    .contenu-layout-4 .contenu-image-area img{
        border-radius:30px
    }
    .contenu-layout-2 .contenu-column.boxed,
    .contenu-layout-3 .contenu-boxed-content,
    .contenu-layout-4 .contenu-boxed-content{
        border-radius:25px;
    }
}
@media (max-width:60em){
    .contenu-layout-1,
    .contenu-layout-2 .contenu-columns,
    .contenu-layout-3 .contenu-main-area,
    .contenu-layout-4 .contenu-main-area {
        gap: 50px;
    }

    .contenu-layout-1 .contenu-image-area img,
    .contenu-layout-3 .contenu-image-area img,
    .contenu-layout-4 .contenu-image-area img{
        border-radius:20px
    }

    .contenu-layout-2 .contenu-column.boxed,
    .contenu-layout-3 .contenu-boxed-content,
    .contenu-layout-4 .contenu-boxed-content{
        border-radius:20px;
    }
}
@media (max-width:50em){
    .contenu-layout-1,
    .contenu-layout-2 .contenu-columns,
    .contenu-layout-3 .contenu-main-area,
    .contenu-layout-4 .contenu-main-area {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}
@media (max-width:40em){
    .contenu-layout-1,
    .contenu-layout-2 .contenu-columns,
    .contenu-layout-3 .contenu-main-area,
    .contenu-layout-4 .contenu-main-area {
        gap: 30px;
    }
}
/* ---------------------------- */

/**
 * Preview dans l'éditeur
 */
.levrard-contenu-preview {
    background: linear-gradient(135deg, var(--levrard-red), var(--levrard-dark-red));
    border: 2px dashed #ddd;
    padding: 40px;
    text-align: center;
    border-radius: 10px;
    color: white;
}

.levrard-contenu-preview h3 {
    margin-bottom: 15px;
    color: white;
}

.levrard-contenu-preview p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
}

.contenu-preview-layouts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.layout-demo {
    background: rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
}

/**
 * Responsive Design
 */
@media screen and (max-width: 1200px) {
    .contenu-container {
        padding: 0 30px;
    }
}

@media screen and (max-width: 768px) {
    .contenu-container {
        padding: 0 20px;
    }

    .levrard-contenu-section.padding-top-small { padding-top: 30px; }
    .levrard-contenu-section.padding-top-medium { padding-top: 40px; }
    .levrard-contenu-section.padding-top-large { padding-top: 50px; }
    .levrard-contenu-section.padding-top-xl { padding-top: 60px; }

    .levrard-contenu-section.padding-bottom-small { padding-bottom: 30px; }
    .levrard-contenu-section.padding-bottom-medium { padding-bottom: 40px; }
    .levrard-contenu-section.padding-bottom-large { padding-bottom: 50px; }
    .levrard-contenu-section.padding-bottom-xl { padding-bottom: 60px; }
}

@media screen and (max-width: 576px) {
    .contenu-container {
        padding: 0 15px;
    }

    .contenu-main-title {
        margin-bottom: 20px;
    }

    .contenu-wysiwyg {
        font-size: 15px;
    }

    .contenu-preview-layouts {
        grid-template-columns: 1fr;
    }
}

/**
 * STYLES SPÉCIFIQUES À L'ÉDITEUR GUTENBERG
 */
.block-editor-block-list__block .levrard-contenu-section {
    border: 2px dashed rgba(233, 57, 52, 0.3);
    border-radius: 8px;
    position: relative;
    z-index: 1;
}

.block-editor-block-list__block .contenu-main-title {
    font-weight: 600 !important;
    color: var(--levrard-red) !important;
}

/* Améliorer la visibilité dans l'éditeur */
.block-editor-block-list__block .levrard-contenu-section .contenu-background-overlay {
    opacity: 0.5;
}

/**
 * Animations (optionnelles)
 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.contenu-wysiwyg {
    animation: fadeInUp 0.6s ease-out;
}

/**
 * Mode d'impression
 */
@media print {
    .levrard-contenu-section {
        background: none !important;
        padding: 20px 0 !important;
    }

    .contenu-background-overlay {
        display: none;
    }

    .contenu-main-title {
        color: #000 !important;
    }
}