/* ===================================================================
   BLOC CONTENU - THÈME MAYAGE
   Fichier : /assets/css/blocks/contenu.css
   =================================================================== */

/* ===================================================================
   VARIABLES ET BASE
   =================================================================== */

   .bloc-contenu {
    position: relative;
    overflow: hidden;
}

/* Espacements verticaux */
.bloc-contenu--espacement-reduit {
    padding: 2rem 0;
}

.bloc-contenu--espacement-normal {
    padding: 4rem 0;
}

.bloc-contenu--espacement-large {
    padding: 6rem 0;
}

.bloc-contenu--espacement-tres-large {
    padding: 8rem 0;
}

/* Styles de fond */
/* Styles de fond */
.bloc-contenu--fond-blanc {
    background: var(--mayage-white);
    color: var(--mayage-gray);
}

.bloc-contenu--fond-gris-clair {
    background: var(--mayage-light-gray);
    color: var(--mayage-gray);
}

.bloc-contenu--fond-gris-fonce {
    background: #2c3e50;
    color: #ffffff;
}

.bloc-contenu--fond-gris-fonce .bloc-contenu__titre {
    color: #ffffff;
}

.bloc-contenu--fond-gris-fonce .bloc-contenu__sous-titre {
    color: rgba(255, 255, 255, 0.9);
}

.bloc-contenu--fond-bleu-clair {
    background: linear-gradient(135deg, rgba(42, 184, 203, 0.1) 0%, rgba(0, 94, 153, 0.1) 100%);
    color: var(--mayage-gray);
}

.bloc-contenu--fond-bleu-fonce {
    background: linear-gradient(135deg, var(--mayage-blue-dark) 0%, var(--mayage-blue-light) 100%);
    color: #ffffff;
}

.bloc-contenu--fond-bleu-fonce .bloc-contenu__titre {
    color: #ffffff;
}

.bloc-contenu--fond-bleu-fonce .bloc-contenu__sous-titre {
    color: rgba(255, 255, 255, 0.9);
}

.bloc-contenu--fond-vert-clair {
    background: linear-gradient(135deg, rgba(222, 220, 0, 0.15) 0%, rgba(149, 193, 31, 0.15) 100%);
    color: var(--mayage-gray);
}

.bloc-contenu--fond-vert-fonce {
    background: linear-gradient(135deg, var(--mayage-green-dark) 0%, var(--mayage-green-light) 100%);
    color: var(--mayage-gray);
}

.bloc-contenu--fond-vert-fonce .bloc-contenu__titre {
    color: var(--mayage-blue-dark);
}

.bloc-contenu--fond-rouge-clair {
    background: linear-gradient(135deg, rgba(233, 74, 66, 0.1) 0%, rgba(233, 74, 66, 0.05) 100%);
    color: var(--mayage-gray);
}

.bloc-contenu--fond-gradient-bleu {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 50%, #90caf9 100%);
    color: var(--mayage-gray);
}

.bloc-contenu--fond-gradient-vert {
    background: linear-gradient(135deg, #f1f8e9 0%, #dcedc8 50%, #c5e1a5 100%);
    color: var(--mayage-gray);
}

.bloc-contenu--fond-sans-fond {
    background: transparent;
    color: var(--mayage-gray);
}

/* Adaptation des liens sur fonds foncés */
.bloc-contenu--fond-gris-fonce a,
.bloc-contenu--fond-bleu-fonce a {
    color: var(--mayage-green-light);
}

.bloc-contenu--fond-gris-fonce a:hover,
.bloc-contenu--fond-bleu-fonce a:hover {
    color: #ffffff;
}

/* ===================================================================
   EN-TÊTE DE SECTION
   =================================================================== */

.bloc-contenu__header {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.bloc-contenu__titre {
    font-family: var(--font-logo);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 600;
    color: var(--mayage-blue-dark);
    margin: 0 0 1rem 0;
    line-height: 1.2;
}

.bloc-contenu__sous-titre {
    font-size: 1.2rem;
    color: var(--mayage-gray);
    line-height: 1.6;
    margin: 0;
    opacity: 0.9;
}

/* ===================================================================
   CONTENU PRINCIPAL
   =================================================================== */

.bloc-contenu__content {
    max-width: 1200px;
    margin: 0 auto;
}

/* ===================================================================
   DISPOSITION : TEXTE CENTRÉ
   =================================================================== */

.bloc-contenu__texte-centre {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--mayage-gray);
}

.bloc-contenu__texte-centre h1,
.bloc-contenu__texte-centre h2,
.bloc-contenu__texte-centre h3,
.bloc-contenu__texte-centre h4,
.bloc-contenu__texte-centre h5,
.bloc-contenu__texte-centre h6 {
    color: var(--mayage-blue-dark);
    margin: 2rem 0 1rem 0;
    font-family: var(--font-logo);
}

.bloc-contenu__texte-centre h2 {
    font-size: 1.8rem;
    font-weight: 600;
}

.bloc-contenu__texte-centre h3 {
    font-size: 1.5rem;
    font-weight: 600;
}

.bloc-contenu__texte-centre h4 {
    font-size: 1.3rem;
    font-weight: 600;
}

.bloc-contenu__texte-centre p {
    margin-bottom: 1.5rem;
}

.bloc-contenu__texte-centre ul,
.bloc-contenu__texte-centre ol {
    margin: 1.5rem 0;
    padding-left: 2rem;
}

.bloc-contenu__texte-centre li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.bloc-contenu__texte-centre a {
    color: var(--mayage-blue-dark);
    text-decoration: underline;
    transition: var(--transition-normal);
}

.bloc-contenu__texte-centre a:hover {
    color: var(--mayage-blue-light);
}

.bloc-contenu__texte-centre blockquote {
    background: var(--mayage-light-gray);
    border-left: 4px solid var(--mayage-blue-light);
    margin: 2rem 0;
    padding: 1.5rem 2rem;
    font-style: italic;
    font-size: 1.1rem;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

/* ===================================================================
   DISPOSITION : DEUX COLONNES
   =================================================================== */

.bloc-contenu__deux-colonnes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.bloc-contenu__colonne {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--mayage-gray);
}

.bloc-contenu__colonne h1,
.bloc-contenu__colonne h2,
.bloc-contenu__colonne h3,
.bloc-contenu__colonne h4,
.bloc-contenu__colonne h5,
.bloc-contenu__colonne h6 {
    color: var(--mayage-blue-dark);
    margin: 1.5rem 0 1rem 0;
    font-family: var(--font-logo);
}

.bloc-contenu__colonne h3 {
    font-size: 1.4rem;
    font-weight: 600;
}

.bloc-contenu__colonne p {
    margin-bottom: 1.5rem;
}

.bloc-contenu__colonne ul,
.bloc-contenu__colonne ol {
    margin: 1.5rem 0;
    padding-left: 1.5rem;
}

.bloc-contenu__colonne li {
    margin-bottom: 0.5rem;
}

.bloc-contenu__colonne a {
    color: var(--mayage-blue-dark);
    text-decoration: underline;
    transition: var(--transition-normal);
}

.bloc-contenu__colonne a:hover {
    color: var(--mayage-blue-light);
}

/* ===================================================================
   DISPOSITION : TEXTE + IMAGE
   =================================================================== */

.bloc-contenu__texte-image,
.bloc-contenu__image-texte {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.bloc-contenu__texte {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--mayage-gray);
}

.bloc-contenu__texte h1,
.bloc-contenu__texte h2,
.bloc-contenu__texte h3,
.bloc-contenu__texte h4,
.bloc-contenu__texte h5,
.bloc-contenu__texte h6 {
    color: var(--mayage-blue-dark);
    margin: 1.5rem 0 1rem 0;
    font-family: var(--font-logo);
}

.bloc-contenu__texte h3 {
    font-size: 1.4rem;
    font-weight: 600;
}

.bloc-contenu__texte p {
    margin-bottom: 1.5rem;
}

.bloc-contenu__texte ul,
.bloc-contenu__texte ol {
    margin: 1.5rem 0;
    padding-left: 1.5rem;
}

.bloc-contenu__texte li {
    margin-bottom: 0.5rem;
}

.bloc-contenu__texte a {
    color: var(--mayage-blue-dark);
    text-decoration: underline;
    transition: var(--transition-normal);
}

.bloc-contenu__texte a:hover {
    color: var(--mayage-blue-light);
}

.bloc-contenu__image {
    position: relative;
}

.bloc-contenu__image img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-card);
    transition: var(--transition-normal);
}

.bloc-contenu__image img:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.bloc-contenu__image-legende {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--mayage-gray);
    text-align: center;
    font-style: italic;
    opacity: 0.8;
}

/* ===================================================================
   DISPOSITION : VIDÉO
   =================================================================== */

.bloc-contenu__video {
    max-width: 900px;
    margin: 0 auto;
}

.bloc-contenu__video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* Ratio 16:9 */
    border-radius: var(--border-radius-large);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    background: var(--mayage-gray);
}

.bloc-contenu__video-iframe,
.bloc-contenu__video-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--border-radius-large);
}

.bloc-contenu__video-custom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bloc-contenu__video-custom iframe,
.bloc-contenu__video-custom video {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--border-radius-large);
}

/* ===================================================================
   DISPOSITION : IMAGE SEULE
   =================================================================== */

.bloc-contenu__image-seule {
    text-align: center;
}

.bloc-contenu__image-seule--pleine-largeur {
    max-width: 100%;
}

.bloc-contenu__image-seule--moyenne {
    max-width: 600px;
    margin: 0 auto;
}

.bloc-contenu__image-seule--petite {
    max-width: 400px;
    margin: 0 auto;
}

.bloc-contenu__figure {
    margin: 0;
    display: inline-block;
    position: relative;
}

.bloc-contenu__image-seule img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-card);
    transition: var(--transition-normal);
}

.bloc-contenu__image-seule img:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.bloc-contenu__image-seule .bloc-contenu__image-legende {
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: var(--mayage-gray);
    font-style: italic;
    opacity: 0.8;
}

/* ===================================================================
   RESPONSIVE DESIGN
   =================================================================== */

/* Tablettes */
@media (max-width: 1024px) {
    .bloc-contenu--espacement-normal {
        padding: 3rem 0;
    }
    
    .bloc-contenu--espacement-large {
        padding: 4rem 0;
    }
    
    .bloc-contenu--espacement-tres-large {
        padding: 5rem 0;
    }
    
    .bloc-contenu__deux-colonnes,
    .bloc-contenu__texte-image,
    .bloc-contenu__image-texte {
        gap: 3rem;
    }
}

@media (max-width: 768px) {
    .bloc-contenu--espacement-reduit {
        padding: 1.5rem 0;
    }
    
    .bloc-contenu--espacement-normal {
        padding: 2.5rem 0;
    }
    
    .bloc-contenu--espacement-large {
        padding: 3rem 0;
    }
    
    .bloc-contenu--espacement-tres-large {
        padding: 4rem 0;
    }
    
    .bloc-contenu__header {
        margin-bottom: 2rem;
    }
    
    .bloc-contenu__deux-colonnes,
    .bloc-contenu__texte-image,
    .bloc-contenu__image-texte {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .bloc-contenu__texte-centre {
        font-size: 1rem;
    }
    
    .bloc-contenu__colonne,
    .bloc-contenu__texte {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .bloc-contenu--espacement-reduit {
        padding: 1rem 0;
    }
    
    .bloc-contenu--espacement-normal {
        padding: 2rem 0;
    }
    
    .bloc-contenu--espacement-large {
        padding: 2.5rem 0;
    }
    
    .bloc-contenu--espacement-tres-large {
        padding: 3rem 0;
    }
    
    .bloc-contenu__header {
        margin-bottom: 1.5rem;
    }
    
    .bloc-contenu__deux-colonnes,
    .bloc-contenu__texte-image,
    .bloc-contenu__image-texte {
        gap: 1.5rem;
    }
    
    .bloc-contenu__titre {
        font-size: 1.5rem;
    }
    
    .bloc-contenu__sous-titre {
        font-size: 1rem;
    }
    
    .bloc-contenu__texte-centre ul,
    .bloc-contenu__texte-centre ol,
    .bloc-contenu__colonne ul,
    .bloc-contenu__colonne ol,
    .bloc-contenu__texte ul,
    .bloc-contenu__texte ol {
        padding-left: 1rem;
    }
    
    .bloc-contenu__texte-centre blockquote {
        padding: 1rem 1.5rem;
        margin: 1.5rem 0;
    }
}

/* ===================================================================
   ANIMATIONS D'APPARITION
   =================================================================== */

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

.bloc-contenu {
    animation: fadeInUp 0.8s ease-out;
}

.bloc-contenu__image img {
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.bloc-contenu__video-container {
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

/* ===================================================================
   ACCESSIBILITÉ
   =================================================================== */

.bloc-contenu__video-iframe:focus,
.bloc-contenu__video-player:focus {
    outline: 3px solid var(--mayage-blue-light);
    outline-offset: 2px;
}

.bloc-contenu__image img:focus {
    outline: 3px solid var(--mayage-blue-light);
    outline-offset: 2px;
}

/* Réduction des animations si demandée */
@media (prefers-reduced-motion: reduce) {
    .bloc-contenu,
    .bloc-contenu__image img,
    .bloc-contenu__video-container {
        animation: none !important;
    }
    
    .bloc-contenu__image img:hover {
        transform: none !important;
    }
}

/* ===================================================================
   STYLES POUR L'IMPRESSION
   =================================================================== */

@media print {
    .bloc-contenu {
        break-inside: avoid;
        box-shadow: none !important;
        background: white !important;
        padding: 1rem 0 !important;
    }
    
    .bloc-contenu__video {
        display: none !important;
    }
    
    .bloc-contenu__image img {
        box-shadow: none !important;
        transform: none !important;
    }
    
    .bloc-contenu__deux-colonnes,
    .bloc-contenu__texte-image,
    .bloc-contenu__image-texte {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}