/**
 * Styles communs pour tous les shortcodes d'Étapes de Fabrication
 *
 * Ce fichier contient tous les styles pour l'ensemble des étapes du site.
 * Chaque section est commentée pour faciliter la maintenance.
 */

/* ========================================
   VARIABLES
   ======================================== */

:root {
    --etape-transition: all 0.3s ease;
}

/* ========================================
   CLASSES COMMUNES
   ======================================== */

/* Wrapper de base pour toutes les étapes */
.etapes-wrapper {
    position: relative;
    width: 100%;
}

.etapes-wrapper-svg {
    position: absolute;
}

/* Conteneur d'étapes */
.etapes-container {
    /* Styles du conteneur - à personnaliser */
}

/* Animation apparition en cascade */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Étape individuelle */
.etape-item {
    display: flex;
    gap: 60px;
    position: absolute;
    max-width: 700px;
    opacity: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Délais progressifs pour chaque étape */
.etape-item:nth-child(1) { animation-delay: 0.5s; }
.etape-item:nth-child(2) { animation-delay: 1s; }
.etape-item:nth-child(3) { animation-delay: 1.5s; }
.etape-item:nth-child(4) { animation-delay: 2s; }
.etape-item:nth-child(5) { animation-delay: 2.5s; }
.etape-item:nth-child(6) { animation-delay: 3s; }
.etape-item:nth-child(7) { animation-delay: 3.5s; }

/* Numéro d'étape */
.etape-number {
    min-width: 70px;
}

/* Titre d'étape */
.etape-title {
    font-family: 'Source Sans 3',Helvetica,Arial,Lucida,sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    color: #92B9C7;
    font-size: 2.4em;
    line-height: 1em;
    margin-bottom: 10px;
}

/* Description d'étape */
.etape-description {
    font-family: 'Source Sans 3',Helvetica,Arial,Lucida,sans-serif;
    font-size: 1.2em;
    line-height: 1.5em;
    font-weight: 700;
    color: #53534D;
}

/* Image d'étape */
.etape-image {
    /* Styles de l'image - à personnaliser */
}

div.etapes-content-svg-container,
div.etapes-content-logo-container {
    position: absolute;
}

div.etape-content-title-flex {
    display: flex;
    align-items: center;
    gap: 30px;
}

.margin-minus-etapes-cols {
    margin-bottom: -200px;
}
/* ========================================
   ÉTAPES SPÉCIFIQUES
   ======================================== */

/* ÉTAPES BOULANGERIE */
#etapes-boulangerie {
    /* Styles spécifiques pour les étapes de boulangerie */
}

/* ÉTAPES PÂTISSERIE */
#etapes-patisserie {
    /* Styles spécifiques pour les étapes de pâtisserie */
}

/* ÉTAPES VIENNOISERIE */
#etapes-viennoiserie {
    /* Styles spécifiques pour les étapes de viennoiserie */
}

/* ========================================
   BOULANGERIE && VIENNOISERIE
   ======================================== */

div#boulangerie {
    position: relative;
    background: url("/wp-content/uploads/2025/12/etapes_boulangerie.png") no-repeat left center;
    background-size: contain;
    min-height: 1800px;
}

.etape-title.etape-title--boulangerie {
    color: #FEC44F;
}

div.etape-item#boulangerie-etapes-1,
div.etape-item#viennoiserie-etapes-1 {
    top: 270px;
    left: 550px;
}

div.etapes-title-icon-container#boulangerie-picto-1,
div.etapes-title-icon-container#viennoiserie-picto-1 {
    width: 60px;
    top: 0px;
    right: 40px;
}

div.etapes-title-icon-container#boulangerie-logo-1 {
    width: 60px;
}

div.etape-item#boulangerie-etapes-2,
div.etape-item#viennoiserie-etapes-2 {
    top: 550px;
    left: 690px;
}

div.etapes-title-icon-container#boulangerie-picto-2,
div.etapes-title-icon-container#viennoiserie-picto-2 {
    width: 70px;
}

div.etape-item#boulangerie-etapes-3,
div.etape-item#viennoiserie-etapes-3 {
    top: 820px;
    left: 740px;
}

div.etapes-title-icon-container#boulangerie-picto-3,
div.etapes-title-icon-container#viennoiserie-picto-3 {
    width: 70px;
}

div.etape-item#boulangerie-etapes-4,
div.etape-item#viennoiserie-etapes-4 {
    top: 1110px;
    left: 710px;
}

div.etapes-title-icon-container#boulangerie-picto-4 {
    width: 50px;
}

div.etape-item#boulangerie-etapes-5,
div.etape-item#viennoiserie-etapes-5 {
    bottom: 250px;
    left: 580px;
}

div.etapes-title-icon-container#boulangerie-picto-5,
div.etapes-title-icon-container#viennoiserie-picto-5 {
    width: 50px;
}

/* ========================================
   VIENNOISERIE
   ======================================== */

div#viennoiserie {
    position: relative;
    background: url("/wp-content/uploads/2025/12/etapes_viennoiserie.png") no-repeat left center;
    background-size: contain;
    min-height: 1800px;
}

.etape-title.etape-title--viennoiserie {
    color: #F79446;
}

div.etapes-title-icon-container#viennoiserie-picto-4 {
    width: 80px;
}

div.etape-item#viennoiserie-etapes-6 {
    bottom: -30px;
    left: 300px;
}

div.etapes-title-icon-container#viennoiserie-picto-6 {
    width: 50px;
    top: 0;
    right: 50px;
}


/* ========================================
   BRIOCHE
   ======================================== */

div#brioche {
    position: relative;
    background: url("/wp-content/uploads/2025/12/etapes_brioche.png") no-repeat left center;
    background-size: contain;
    min-height: 1800px;
}

div.etapes-title-icon-container#brioche-picto-3 {
    width: 60px;
}

div.etapes-title-icon-container#brioche-picto-4 {
    width: 40px;
}


/* ========================================
   BEIGNET
   ======================================== */

div#beignet {
    position: relative;
    background: url("/wp-content/uploads/2025/12/etapes_beignet.png") no-repeat left center;
    background-size: contain;
    min-height: 1600px;
}

div.etape-item#beignet-etapes-1 {
    top: 270px;
    left: 490px;
}

div.etape-item#beignet-etapes-2 {
    top: 530px;
    left: 610px;
}

div.etape-item#beignet-etapes-3 {
    top: 760px;
    left: 640px;
}

div.etapes-title-icon-container#beignet-picto-3 {
    width: 50px;
}

div.etape-item#beignet-etapes-4 {
    bottom: 400px;
    left: 590px;
}

div.etapes-title-icon-container#beignet-picto-4 {
    width: 70px;
}

div.etape-item#beignet-etapes-5 {
    bottom: 170px;
    left: 450px;
}


/* ========================================
   PATISSERIE
   ======================================== */
div.etapes_patisserie_section {
    display: none;
}

div.etapes_patisserie_section.active {
    display: block;
}

/* ========================================
   PASTEIS DE NATA
   ======================================== */

div#pasteis_de_nata {
    position: relative;
    background: url("/wp-content/uploads/2025/12/etapes_pasteis_de_nata.png") no-repeat left center;
    background-size: contain;
    min-height: 1600px;
}

.etape-title.etape-title--patisserie {
    color: #F15B73;
}

div.etape-item#pasteis-etapes-1,
div.etape-item#galettes-etapes-1 {
    top: 270px;
    left: 490px;
}

div.etape-item#pasteis-etapes-2,
div.etape-item#galettes-etapes-2 {
    top: 510px;
    left: 610px;
}

div.etape-item#pasteis-etapes-3 {
    top: 760px;
    left: 650px;
}

div.etape-item#pasteis-etapes-4 {
    bottom: 390px;
    left: 610px;
}

div.etape-item#pasteis-etapes-5,
div.etape-item#galettes-etapes-5 {
    bottom: 150px;
    left: 480px;
}

/* ========================================
   PLAQUES FEUILLETÉES
   ======================================== */

div#plaques_feuilletees {
    position: relative;
    background: url("/wp-content/uploads/2025/12/etapes_plaques_feuilletees.png") no-repeat left center;
    background-size: contain;
    min-height: 1500px;
}

div.etape-item#plaques-etapes-1 {
    top: 270px;
    left: 550px;
}

div.etape-item#plaques-etapes-2 {
    top: 520px;
    left: 660px;
}

div.etape-item#plaques-etapes-3 {
    top: 770px;
    left: 690px;
}

div.etape-item#plaques-etapes-4 {
    bottom: 300px;
    left: 610px;
}

div.etapes-title-icon-container#plaques-picto-3 {
    width: 100px;
}

/* ========================================
   GALETTES DES ROIS
   ======================================== */

div#galettes {
    position: relative;
    background: url("/wp-content/uploads/2025/12/etapes_galettes.png") no-repeat left center;
    background-size: contain;
    min-height: 1600px;
}

div.etape-item#galettes-etapes-3 {
    top: 790px;
    left: 650px;
}

div.etape-item#galettes-etapes-4 {
    bottom: 420px;
    left: 610px;
}


/* ========================================
   SNACKING
   ======================================== */

div#snacking {
    position: relative;
    background: url("/wp-content/uploads/2025/12/etapes_snaking.png") no-repeat left center;
    background-size: contain;
    min-height: 1600px;
}

.etape-title.etape-title--snacking {
    color: #FF7C69;
}

div.etape-item#snacking-etapes-1 {
    top: 270px;
    left: 510px;
}

div.etape-item#snacking-etapes-2 {
    top: 560px;
    left: 640px;
}

div.etape-item#snacking-etapes-3 {
    bottom: 590px;
    left: 650px;
}

div.etape-item#snacking-etapes-4 {
    bottom: 340px;
    left: 580px;
}

/* ========================================
   EXPERTISE AU SERVICE DU BON
   ======================================== */

div#expertise {
    position: relative;
    background: url("/wp-content/uploads/2025/12/expertise_au_service_du_bon.png") no-repeat left center;
    background-size: contain;
    min-height: 1600px;
}

.etapes-wrapper-svg#expertise-svg {
    bottom: -100px;
    left: 70px;
    width: 200px;
}

div.etape-item#expertise-ecouter-etapes {
    top: 100px;
    left: 460px;
}

div.etape-item#expertise-cultiver-etapes {
    top: 360px;
    left: 660px;
}

div.etape-item#expertise-cultiver-etapes .etape-content > div {
    display: flex;
    gap: 40px;
}

div.picto-etape-container img{
    width: 60px;
}

div.etape-item#expertise-produire-etapes {
    top: 620px;
    left: 750px;
}

div.etape-item#expertise-maitriser-etapes {
    top: 910px;
    left: 730px;
}

div.etape-item#expertise-creer-etapes {
    bottom: 230px;
    left: 650px;
}

div.etape-item#expertise-etonner-etapes {
    bottom: -30px;
    left: 380px;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media all and (min-width: 1024px) and (max-width: 1299px) {

    .etape-title {
        font-size: 2em;
    }

    .etape-description {
        font-size: 1.1em;
    }
}

@media (max-width: 1023px) {
    /* Styles tablettes */
    .etapes-container {
        width: 90%;
        margin: 0 auto;
    }

    .etapes-wrapper {
        min-height: unset !important;
    }

    .etape-content {
        width: 100%;
    }

    .etape-item {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        position: relative;
        max-width: unset;
        gap: 20px;
        top: unset !important;
        left: unset !important;
        bottom: unset !important;
        margin-bottom: 3em;
    }

    .etape-number {
        min-width: 50px;
    }

    .etape-title {
        font-size: 1.6em;
    }

    .etape-description {
        font-size: 1em;
    }

    .etapes-wrapper-svg#expertise-svg {
        position: relative;
        bottom: unset;
        top: unset;
        left: unset;
        right: unset;
        margin: 0 auto;
        width: 150px;
    }

    /*************************************/
    /************ ETAPES ****************/
    /*************************************/

    div.etapes-title-icon-container#boulangerie-picto-2, div.etapes-title-icon-container#viennoiserie-picto-2 {
        width: 60px !important;
    }

    div.etapes-title-icon-container#boulangerie-picto-4 {
        width: 40px !important;
        bottom: 10px;
        position: relative;
    }

    div.etapes-title-icon-container#boulangerie-picto-5, div.etapes-title-icon-container#viennoiserie-picto-5 {
        width: 50px !important;
        position: relative;
        bottom: 10px;
    }

    div.etapes-title-icon-container#boulangerie-picto-5, div.etapes-title-icon-container#viennoiserie-picto-5 {
        width: 40px !important;
        position: relative;
        bottom: 10px;
    }

    div.etapes-title-icon-container#boulangerie-picto-2, div.etapes-title-icon-container#viennoiserie-picto-2 {
        width: 60px !important;
    }

    div.etapes-title-icon-container#beignet-picto-3 {
        width: 40px !important;
        position: relative;
        bottom: 10px;
    }

    div.etapes-title-icon-container#beignet-picto-4 {
        width: 55px !important;
        position: relative;
        bottom: 10px;
    }

    div.etapes-title-icon-container#boulangerie-picto-5, div.etapes-title-icon-container#viennoiserie-picto-5 {
        width: 45px !important;
        position: relative;
        bottom: 10px;
    }

    div.etapes-title-icon-container#boulangerie-picto-2, div.etapes-title-icon-container#viennoiserie-picto-2 {
        width: 55px !important;
    }

    div.etapes-title-icon-container#brioche-picto-3 {
        width: 45px !important;
        position: relative;
        bottom: 10px;
    }

    div.etapes-title-icon-container#brioche-picto-4 {
        width: 35px !important;
        position: relative;
        bottom: 10px;
    }

    div.etapes-title-icon-container#viennoiserie-picto-1 {
        width: 90px !important;
    }

    div.etapes-title-icon-container#plaques-picto-3 {
        width: 70px !important;
    }

    div.etapes-title-icon-container#plaques-picto-3 {
        width: 60px !important;
        position: relative;
        bottom: 10px;
    }

    div.etapes-title-icon-container#boulangerie-logo-1 {
        width: 80px !important;
    }

    div.etapes-title-icon-container#viennoiserie-picto-1 {
        width: 80px !important;
    }
}

@media (max-width: 768px) {
    .title-wrapper::before,
    .title-wrapper::after {
        /*display: none;*/
    }

    .etapes-wrapper {
        background: unset !important;
    }
    /* Styles mobiles */
}

@media (max-width: 480px) {
    /* Styles petits mobiles */
}