/**
 * Styles pour le template single-metier.php
 *
 * @package Evofia
 * @since 1.0.0
 */

/* ==========================================================================
   Bannière métier
   ========================================================================== */

.metier-banniere {
    overflow: hidden;
    height: 550px;
    object-fit: cover;
}
/*
.metier-banniere img {
    transition: transform 0.3s ease;
}

.metier-banniere:hover img {
    transform: scale(1.05);
}
*/
/* ==========================================================================
   Présentation du métier
   ========================================================================== */

.metier-presentation .descriptif-content {
    /*font-size: 1.0625rem;
    line-height: 1.8;*/
    color: #333;
}

.metier-presentation .descriptif-content p:first-child {
    /*font-size: 1.125rem;*/
    font-weight: 500;
}

.metier-video {
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Sections avec cartes
   ========================================================================== */

.metier-missions .card,
.metier-qualites .card,
.metier-evolutions .card {
    transition: all 0.3s ease;
}

.metier-missions .card:hover,
.metier-qualites .card:hover,
.metier-evolutions .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Missions - Fond bleu foncé */
.metier-missions .missions-content ul {
    list-style: none;
    padding-left: 0;
}

.metier-missions .missions-content ul li {
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 0.75rem;
}

.metier-missions .missions-content ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #ffffff;
    font-weight: bold;
    font-size: 1.5rem;
    line-height: 1;
}

/* Qualités */

.metier-qualites .qualites-content ul {
    /*list-style: none;
    padding-left: 0;*/
    columns: 2;
    column-gap: 2rem;
}
/*
.metier-qualites .qualites-content ul li {
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 0.75rem;
    break-inside: avoid;
}

.metier-qualites .qualites-content ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #ffffff;
    font-weight: bold;
    font-size: 1.25rem;
}
    */

/* Évolutions - Fond orange */
.metier-evolutions .evolutions-content ul {
    /*list-style: none;
    padding-left: 0;*/
}

.metier-evolutions .evolutions-content ul li {
    /*padding-left: 1.5rem;
    position: relative;
    margin-bottom: 0.75rem;*/
}

.metier-evolutions .evolutions-content ul li::before {
    /*content: "→";
    position: absolute;
    left: 0;
    font-weight: bold;
    font-size: 1.25rem;*/
}

/* ==========================================================================
   Liste des formations
   ========================================================================== */

 .formation-item {
    animation: slideInUp 0.5s ease-out;
    animation-fill-mode: both;
}

 .formation-item:nth-child(1) { animation-delay: 0.1s; }
 .formation-item:nth-child(2) { animation-delay: 0.2s; }
 .formation-item:nth-child(3) { animation-delay: 0.3s; }
 .formation-item:nth-child(4) { animation-delay: 0.4s; }
 .formation-item:nth-child(5) { animation-delay: 0.5s; }
 .formation-item:nth-child(6) { animation-delay: 0.6s; }

 .formation-item .card {
    transition: all 0.3s ease;
    background: #004B52CC;

}

 .formation-item .card:hover {
    transform: translateX(10px);
    box-shadow: 0 8px 20px rgba(0, 64, 82, 0.3) !important;
    background: #004B52;
}

 .formation-item .btn {
    transition: all 0.3s ease;
}

 .formation-item .card:hover .btn {
    background-color: #D98622;
    color: #fff;
    border:1px solid #D98622;
    /*transform: scale(1.05);*/
}

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

/* ==========================================================================
   Témoignage
   ========================================================================== */

.metier-temoignage .card {
    position: relative;
}

.metier-temoignage .temoignage-content {
    /*font-size: 1.0625rem;
    line-height: 1.8;
    font-style: italic;*/
}

.metier-temoignage .temoignage-content p:first-child {
    margin-top: 0;
}

.metier-temoignage .temoignage-content p:last-child {
    margin-bottom: 0;
}

/* Style pour les questions en gras */
.metier-temoignage .temoignage-content strong {
    display: block;
    font-style: normal;
    font-weight: 700;
    color: #004052;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.metier-temoignage .temoignage-content strong:first-child {
    margin-top: 0;
}

.temoignage-content .fs-16 { 
    font-size:16px !important;
    color:#004052 !important;
    
    h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { 
        font-size: 16px !important; 
        font-style:italic !important; 
        font-weight:600 !important; 
        margin-bottom : 0 !important;
        margin-top : 1rem !important;
        font-family: 'Barlow',  sans-serif !important;
        }
        p {
            color:#004052 !important;
        }
}

/* ==========================================================================
   Sidebar - Informations pratiques
   ========================================================================== */

.info-item {
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 64, 82, 0.1);
}

.info-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.info-item .badge {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    font-weight: 600;
}

.employeurs-content ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.employeurs-content ul li {
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 0.5rem;
}

.employeurs-content ul li::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: #004052;
    font-weight: bold;
}

/* ==========================================================================
   Navigation métiers
   ========================================================================== */

.metier-navigation .btn {
    transition: all 0.3s ease;
}

.metier-navigation .btn:hover {
    transform: translateX(-5px);
}

.metier-navigation .btn:hover i {
    transform: translateX(-3px);
}

.metier-navigation .btn-outline-primary:nth-child(2):hover {
    transform: translateX(5px);
}

.metier-navigation .btn-outline-primary:nth-child(2):hover i {
    transform: translateX(3px);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991px) {
    .metier-banniere img {
        height: 300px !important;
    }
    
    .sticky-top {
        position: relative !important;
        top: 0 !important;
    }
    
    .metier-qualites .qualites-content ul {
        columns: 1;
    }
}

@media (max-width: 767px) {
    .metier-banniere img {
        height: 250px !important;
    }
    
    .metier-banniere h1 {
        font-size: 2rem !important;
    }
    
    .formation-item .card-body {
        flex-direction: column !important;
        gap: 1rem;
        text-align: center;
    }
    
    .formation-item .btn {
        width: 100%;
    }
    
    .info-item .badge {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }
}

@media (max-width: 575px) {
    .metier-presentation .descriptif-content {
        font-size: 1rem;
    }
    
    .metier-temoignage .temoignage-content {
        font-size: 1rem;
    }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
    .metier-navigation,
    .sticky-top {
        display: none !important;
    }
    
    .metier-banniere img {
        height: auto !important;
        max-height: 300px;
    }
    
    .card {
        border: 1px solid #dee2e6 !important;
        box-shadow: none !important;
        page-break-inside: avoid;
    }
}

/* ==========================================================================
   Accessibilité
   ========================================================================== */

.metier-video iframe:focus {
    outline: 3px solid #46B370;
    outline-offset: 4px;
}

.formation-item .btn:focus,
.metier-navigation .btn:focus {
    outline: 3px solid #46B370;
    outline-offset: 2px;
}

/* ==========================================================================
   Animations supplémentaires
   ========================================================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.metier-presentation,
.metier-missions,
.metier-qualites,
.metier-evolutions,
.metier-temoignage {
    animation: fadeIn 0.6s ease-out;
}
.metier-temoignage {
    background:url('../img/Machine 1.png') no-repeat left bottom;
    background-size: 20%;
    padding-bottom: 100px;
}
.metier-qualites-section {
    background:url('../img/Machine 4.png') no-repeat right 10% bottom;
    background-size: 20%;
}
.infos-pratiques {
position:relative;
}
.infos-pratiques::after {
    display:block;
    content:"";
    position:absolute;
    width:250px;
    height:250px;
    right:50px;
    bottom:-50px;
    background:url('../img/Forme 9.png') no-repeat right bottom;
    background-size: contain;
}
/* Badge styles améliorés */
.badge {
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.badge:hover {
    transform: scale(1.05);
}