/**
 * CSS pour le bloc Vidéo Levrard
 */

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

/**
 * Structure principale
 */
.levrard-video-section {
    padding: 80px 0 0 0;
    background-color: var(--levrard-white);
    position: relative;
    margin-top: -40px;
    z-index: 1;
    border-radius: 50px;
}
}

.levrard-video-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}
/* ---------------------------- */
@media (max-width:110em){
    .levrard-video-container{width:calc(100% - 100px);max-width:100%;margin:0 50px;}
}
@media (max-width:90em){
    .levrard-video-container{width:calc(100% - 80px);margin:0 40px;}
}
@media (max-width:60em){
    .levrard-video-container{width:calc(100% - 60px);margin:0 30px;}
}
@media (max-width:50em){
    .levrard-video-container{width:96%;margin:0 2%;}
}
/* ---------------------------- */

/**
 * Texte d'introduction
 */
.levrard-video-intro {
    margin-bottom: 40px;
}

.levrard-video-intro-text {
    line-height: 1.6;
    color: var(--levrard-text);
    width:60%;
    max-width: 1100px;
    margin: 0 auto;
    text-align:center;
}

.levrard-video-intro-text strong {
    color: var(--levrard-dark-gray);
    font-weight: 700;
}
.levrard-video-intro-text span {
    color: var(--levrard-red);
    font-weight: 700; font-style:italic; font-family:var(--font-alternate);
}

/**
 * Conteneur vidéo
 */
.levrard-video-container {
    border-radius: 45px;
    background-color: #faeded;
    margin: 0 auto;
    border: solid 2px #fbdddd;
    padding:50px;
}
/* ---------------------------- */
@media (max-width:120em) {
    .levrard-video-container {border-radius: 35px}
}
@media (max-width:90em){
    .levrard-video-container {border-radius: 25px;}
}
@media (max-width:60em){
    .levrard-video-container {border-radius: 20px; padding:30px}
    .levrard-video-intro-text {width:90%}
}
/* ---------------------------- */

.intro_main_inbloc{color:var(--levrard-current);text-align:center;}
.levrard-video-intro-maintitle strong{color:var(--levrard-red);font-weight:700;font-style:italic;font-family:var(--font-alternate)}
.levrard-video-intro-maindesc{margin:0 auto 40px}

/* Tailles de vidéo */
.levrard-video-container.size-small{max-width:800px;padding:35px}
.levrard-video-container.size-medium{max-width:1200px;}
.levrard-video-container.size-large{max-width:1400px;}
.levrard-video-container.size-full{max-width:1600px;}
/* ---------------------------- */
@media (max-width:110em){
  .levrard-video-container.size-full{width:96%;margin:0 2%;}
}
@media (max-width:90em){
  .levrard-video-container.size-large{width:96%;margin:0 2%;}
}
@media (max-width:80em){
  .levrard-video-container.size-medium{width:96%;margin:0 2%;}
}
@media (max-width:50em){
  .levrard-video-container.size-small{width:96%;margin:0 2%;}
}
/* ---------------------------- */

/**
 * Aspect ratio responsive (16:9)
 */
.levrard-video-aspect-ratio {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    background-color: var(--levrard-dark-gray);
    max-width:1200px;margin:auto;
}

/**
 * Vidéo YouTube (iframe)
 */
.levrard-video-youtube {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/**
 * Vidéo HTML5
 */
.levrard-video-html5 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/**
 * Bouton de lecture personnalisé
 */
.levrard-video-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: rgba(233, 57, 52, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    border: 3px solid var(--levrard-white);
}

.levrard-video-play-button:hover {
    background-color: var(--levrard-red);
    transform: translate(-50%, -50%) scale(1.1);
}

.levrard-video-play-button i {
    color: var(--levrard-white);
    font-size: 28px;
    margin-left: 4px; /* Centrage visuel du triangle */
}

/**
 * Image poster/couverture
 */
.levrard-video-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: var(--levrard-dark-gray);
}

/**
 * Overlay pour l'image poster
 */
.levrard-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(233, 57, 52, 0.1) 100%);
    transition: all 0.3s ease;
}

.levrard-video-wrapper:hover .levrard-video-overlay {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.2) 0%, rgba(233, 57, 52, 0.05) 100%);
}

/**
 * Chargement
 */
.levrard-video-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--levrard-white);
    font-size: 16px;
}

/**
 * Preview dans l'éditeur
 */
.levrard-video-preview {
    background: #f5f5f5;
    border: 2px dashed #ddd;
    padding: 40px;
    text-align: center;
    border-radius: 10px;
}

.levrard-video-preview h3 {
    margin-bottom: 10px;
    color: var(--levrard-text);
}

.levrard-video-preview p {
    color: #666;
    margin: 0;
}

/**
 * États de la vidéo
 */
.levrard-video-wrapper.is-playing .levrard-video-play-button,
.levrard-video-wrapper.is-playing .levrard-video-poster,
.levrard-video-wrapper.is-playing .levrard-video-overlay {
    opacity: 0;
    pointer-events: none;
}

/**
 * Responsive Design
 */
@media screen and (max-width: 768px) {
    .levrard-video-container {
        padding: 15px;
    }
    .levrard-video-wrapper {
        border-radius: 10px;
    }

    .levrard-video-play-button {
        width: 60px;
        height: 60px;
    }

    .levrard-video-play-button i {
        font-size: 20px;
    }

    /* Ajustement des tailles sur mobile */
    .levrard-video-wrapper.size-small,
    .levrard-video-wrapper.size-medium,
    .levrard-video-wrapper.size-large {
        max-width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .levrard-video-intro {
        margin-bottom: 30px;
    }

    .levrard-video-play-button {
        width: 50px;
        height: 50px;
    }

    .levrard-video-play-button i {
        font-size: 16px;
        margin-left: 2px;
    }
}

/**
 * STYLES SPÉCIFIQUES À L'ÉDITEUR GUTENBERG
 */

/* Améliorer la sélectabilité dans l'éditeur */
.block-editor-block-list__block .levrard-video-section {
    position: relative;
    z-index: 1;
}

.block-editor-block-list__block .levrard-video-section * {
    position: relative;
}

/* Bordure pour identifier le bloc dans l'éditeur */
.block-editor-block-list__block .levrard-video-section {
    border: 2px dashed rgba(233, 57, 52, 0.3);
    margin: 10px 0;
}

/* Désactiver les interactions vidéo dans l'éditeur */
.block-editor-block-list__block .levrard-video-youtube,
.block-editor-block-list__block .levrard-video-html5 {
    pointer-events: none;
}