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

/* ========================================
   VARIABLES & FONT
   ======================================== */

:root {
    --title-font-family: "Garden Grown", cursive;
    --title-transition: all 0.3s ease;
}

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

/* Wrapper de base pour tous les titles */
.title-wrapper {
    position: relative;
    width: max-content;
    margin: 0 auto;
}

/* Font par défaut pour tous les titles */
.title {
    font-family: var(--title-font-family);
    line-height: .9;
    margin: 0;
    position: relative;
}

H2.title, h3.title, h4.title, h5.title, h6.title {
    margin: 0;
    padding: 0;
}

/* Tailles de titles */
.title--3xl {
    font-size: 6rem;
}

.title--2xl {
    font-size: 5rem;
}

.title--xl {
    font-size: 4rem;
}

.title--large {
    font-size: 3rem;
}

.title--medium {
    font-size: 2.5rem;
}

.title--small {
    font-size: 2rem;
}

.title--xs {
    font-size: 1.5rem;
}

/* Couleurs de titles réutilisables */
.title--primary {
    color: #FEC44F;
}

.title--secondary {
    color: #F79446;
}

.title--tertiary {
    color: #F15B73;
}

.title--accent {
    color: #FF7C69;
}

.title--white {
    color: #ffffff;
}

.title--dark {
    color: #333333;
}

.title--grey {
    color: #53534D;
}

/* Lignes bleues décoratives */
.title--blue-line-left::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 236 25.2"><path d="M234,21.9s-40.6,7.3-117.9-13.3S2,21.9,2,21.9" fill="none" stroke="%2397bcc8" stroke-linecap="round" stroke-width="4"/></svg>');
    display: block;
    width: 236px;
    height: auto;
    position: absolute;
    /*top: 40px;*/
    /*left: -260px;*/
}

.title--blue-line-right::after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 235.7 36.6"><path d="M2,34.3s40.8,4.4,117.3-21.8c76.5-26.2,114.4,5,114.4,5" fill="none" stroke="%2397bcc8" stroke-linecap="round" stroke-width="4"/></svg>');
    display: block;
    width: 236px;
    height: auto;
    position: absolute;
    /*top: 30px;*/
    /*left: 220px;*/
}

/* Lignes vertes décoratives */
.title--green-line-left::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 236 25.2"><path d="M234,21.9s-40.6,7.3-117.9-13.3S2,21.9,2,21.9" fill="none" stroke="%235c9f38" stroke-linecap="round" stroke-width="4"/></svg>');
    display: block;
    width: 236px;
    height: auto;
    position: absolute;
    /*top: 40px;*/
    /*left: -260px;*/
}

.title--green-line-right::after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 235.7 36.6"><path d="M2,34.3s40.8,4.4,117.3-21.8c76.5-26.2,114.4,5,114.4,5" fill="none" stroke="%235c9f38" stroke-linecap="round" stroke-width="4"/></svg>');
    display: block;
    width: 236px;
    height: auto;
    position: absolute;
    /*top: 30px;*/
    /*left: 220px;*/
}

/* Lignes orange décoratives */
.title--orange-line-left::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 236 25.2"><path d="M234,21.9s-40.6,7.3-117.9-13.3S2,21.9,2,21.9" fill="none" stroke="%23f79446" stroke-linecap="round" stroke-width="4"/></svg>');
    display: block;
    width: 236px;
    height: auto;
    position: absolute;
    top: 40px;
    left: -260px;
}

.title--orange-line-right::after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 235.7 36.6"><path d="M2,34.3s40.8,4.4,117.3-21.8c76.5-26.2,114.4,5,114.4,5" fill="none" stroke="%23f79446" stroke-linecap="round" stroke-width="4"/></svg>');
    display: block;
    width: 236px;
    height: auto;
    position: absolute;
    top: 30px;
    left: 220px;
}

/* Lignes patisserie (rose) décoratives */
.title--pink-line-left::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 236 25.2"><path d="M234,21.9s-40.6,7.3-117.9-13.3S2,21.9,2,21.9" fill="none" stroke="%23f15b73" stroke-linecap="round" stroke-width="4"/></svg>');
    display: block;
    width: 236px;
    height: auto;
    position: absolute;
    top: 40px;
    left: -260px;
}

.title--pink-line-right::after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 235.7 36.6"><path d="M2,34.3s40.8,4.4,117.3-21.8c76.5-26.2,114.4,5,114.4,5" fill="none" stroke="%23f15b73" stroke-linecap="round" stroke-width="4"/></svg>');
    display: block;
    width: 236px;
    height: auto;
    position: absolute;
    top: 30px;
    left: 220px;
}

/* Lignes snacking (rouge) décoratives */
.title--snacking-line-left::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 236 25.2"><path d="M234,21.9s-40.6,7.3-117.9-13.3S2,21.9,2,21.9" fill="none" stroke="%23ff7c69" stroke-linecap="round" stroke-width="4"/></svg>');
    display: block;
    width: 236px;
    height: auto;
    position: absolute;
    /*top: 40px;*/
    /*left: -260px;*/
}

.title--snacking-line-right::after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 235.7 36.6"><path d="M2,34.3s40.8,4.4,117.3-21.8c76.5-26.2,114.4,5,114.4,5" fill="none" stroke="%23ff7c69" stroke-linecap="round" stroke-width="4"/></svg>');
    display: block;
    width: 236px;
    height: auto;
    position: absolute;
    /*top: 30px;*/
    /*left: 220px;*/
}

/* Lignes jaunes décoratives */
.title--yellow-line-left::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 236 25.2"><path d="M234,21.9s-40.6,7.3-117.9-13.3S2,21.9,2,21.9" fill="none" stroke="%23fec44f" stroke-linecap="round" stroke-width="4"/></svg>');
    display: block;
    width: 236px;
    height: auto;
    position: absolute;
}

.title--yellow-line-right::after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 235.7 36.6"><path d="M2,34.3s40.8,4.4,117.3-21.8c76.5-26.2,114.4,5,114.4,5" fill="none" stroke="%23fec44f" stroke-linecap="round" stroke-width="4"/></svg>');
    display: block;
    width: 236px;
    height: auto;
    position: absolute;
}

/* Alignements */
.title--center {
    text-align: center;
}

.title--left {
    text-align: left;
}

.title--right {
    text-align: right;
}

.svg-title-container {
    width: 40px;
    position: absolute;
}

.title--icon--svg--container {
    width: 50px;
    margin: 0 auto;
}

.title--with-svg {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* ========================================
   TITLE: NOS GAMMES
   ======================================== */

#title-nos-gammes {
    /* Styles spécifiques pour "Nos Gammes" */
}

#title-nos-gammes .title {
    /*display: flex;*/
    /*gap: 20px;*/
    /*left: 60px;*/
}

.title--blue-line-left#title-nos-gammes::before {
    top: 40px;
    left: -260px;
}

.title--blue-line-left#title-nos-gammes::after {
    top: 30px;
    left: 220px;
}

.svg-title-container.svg-blue-croissant {
    top: -30px;
    left: 130px;
}

/* ========================================
   TITLE: NOS ENGAGEMENTS DURABLES
   ======================================== */

#title-nos-engagements-durables {
    /* Styles spécifiques pour "Nos Engagements Durables" */
}

#title-nos-engagements-durables .title {
    /* Styles du titre */
}

H3#title-nos-engagements {
    display: flex;
    gap: 20px;
    left: 60px;
}

H3#title-nos-engagements span,
H3#title-autres-marques span {
    position: relative;
    width: 50px;
}

.title#wording-durable {
    left: 30px;
}

.title--green-line-left#title-nos-engagements-durables::before {
    top: 110px;
    left: -190px;
}

.title--green-line-right#title-nos-engagements-durables::after {
    top: 100px;
    left: 290px;
}

/* ========================================
   TITLE: LES AUTRES MARQUES GOURMANDES
   ======================================== */

H3#title-autres-marques {
    display: flex;
    gap: 20px;
    left: 60px;
}

div.title--blue-line-left#title-autres_marques::before {
    top: 100px;
    left: -200px;
}

div.title--blue-line-right#title-autres_marques::after {
    top: 90px;
    left: 320px;
}

h2#wording-gourmandes {
    left: 50px;
    margin-top: 10px;
    display: flex;
    gap: 20px;
}

H2#wording-gourmandes span {
    position: relative;
    width: 50px;
}


/* ========================================
   TITLE: PARTENAIRE A VOS COTES
   ======================================== */
div.toque_title_icon_svg_container {
    width: 50px;
    margin: 0 auto;
}

div.title--blue-line-left#title-partenaire-a-vos-cotes::before {
    top: 110px;
    left: -160px;
}

div.title--blue-line-right#title-partenaire-a-vos-cotes::after {
    top: 95px;
    left: 230px;
}

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

div.title--blue-line-left#title-expertise-au-service-du-bon::before {
    top: 110px;
    left: -100px;
}

div.title--blue-line-right#title-expertise-au-service-du-bon::after {
    top: 100px;
    left: 290px;
}

/* ========================================
   TITLE: FILIERES DURABLES
   ======================================== */

H2#title-filieres-durables span svg{
    position: relative;
    width: 50px;
    top: -10px;
}

div.title--green-line-left#title-filieres-durables::before {
    top: 40px;
    left: -160px;
}

div.title--green-line-left#title-filieres-durables::after {
    top: 30px;
    left: 220px;
}

/* ========================================
   TITLE: ENGAGEMENTS INGREDIENTS
   ======================================== */

H2#title-engagements-ingredients span svg{
    position: relative;
    width: 50px;
    top: -10px;
}

div.title--blue-line-left#title-engagements-ingredients::before {
    top: 46px;
    left: -160px;
}

div.title--blue-line-left#title-engagements-ingredients::after {
    top: 36px;
    left: 360px;
}


/* ========================================
   TITLE: LES ETAPES DE FABRICATION
   ======================================== */
.svg-title-container.svg-etapes-fabrication {
    width: 80px;
    position: absolute;
    top: -50px;
    right: -30px;
}

.title-etapes-fabrication.title--yellow-line-left::before,
.title-etapes-fabrication.title--orange-line-left::before,
.title-etapes-fabrication.title--pink-line-left::before,
.title-etapes-fabrication.title--snacking-line-left::before {
    top: 40px;
    left: -190px;
}

.title-etapes-fabrication.title--yellow-line-left::after,
.title-etapes-fabrication.title--orange-line-left::after,
.title-etapes-fabrication.title--pink-line-left::after,
.title-etapes-fabrication.title--snacking-line-left::after{
    top: 30px;
    left: 280px;
}

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

@media (max-width: 1024px) {
    .title--xl {
        font-size: 3rem;
    }

    .title--large {
        font-size: 2.5rem;
    }

    .title--medium {
        font-size: 2rem;
    }

    div#viennoiserie {
        min-height: unset !important;
    }
}

@media (max-width: 768px) {
    .title--xl {
        font-size: 2.5rem;
    }

    .title--large {
        font-size: 2rem;
    }

    .title--medium {
        font-size: 1.75rem;
    }

    .title--small {
        font-size: 1.5rem;
    }

    /* ========================================
   TITLE: NOS ENGAGEMENTS DURABLES
   ======================================== */

    .title--green-line-left#title-nos-engagements-durables::before {
        top: 90px;
        left: -40px;
        width: 80px;
    }

    .title--green-line-right#title-nos-engagements-durables::after {
        top: 85px;
        left: 200px;
        width: 80px;
    }


    /* ========================================
   TITLE: LES AUTRES MARQUES GOURMANDES
   ======================================== */

    H3.title--xl#title-autres-marques {
        font-size: 2.5rem;
    }

    H3#title-autres-marques + H2{
        font-size: 3rem;
    }

    H2#wording-gourmandes {
        font-size: 3rem;
    }

    div.title--blue-line-right#title-autres_marques::before {
        display: none;
    }

    div.title--blue-line-right#title-autres_marques::after {
        display: none;
    }


    /* ========================================
   TITLE: NOS FILIERES DURABLES
   ======================================== */

    div.title--green-line-left#title-filieres-durables::before {
        top: 30px;
        left: -40px;
        width: 100px;
    }

    div.title--green-line-left#title-filieres-durables::after {
        top: 30px;
        left: 165px;
        width: 100px;
    }


    /* ========================================
    TITLE: PARTENAIRE A VOS COTES
    ======================================== */

    div.title--blue-line-left#title-partenaire-a-vos-cotes::before {
        top: 100px;
        left: -60px;
        width: 100px;
    }

    div.title--blue-line-right#title-partenaire-a-vos-cotes::after {
        top: 95px;
        left: 150px;
        width: 100px;
    }


    /* ========================================
    TITLE: PARTENAIRE A VOS COTES
    ======================================== */

    div.title--blue-line-right#title-expertise-au-service-du-bon::after {
        top: 95px;
        left: 190px;
        width: 100px;
    }

    div.title--blue-line-left#title-expertise-au-service-du-bon::before {
        top: 100px;
        left: -30px;
        width: 100px;
    }


    /* ========================================
    TITLE: NOS ENGAGEMENTS INGREDIENTS
    ======================================== */

    H2#title-engagements-ingredients span svg {
        position: relative;
        width: 40px;
        top: -30px;
        right: 10px;
    }

    div.title--blue-line-left#title-engagements-ingredients::before {
        top: 38px;
        left: -20px;
        width: 100px;
    }

    div.title--blue-line-left#title-engagements-ingredients::after {
        top: 40px;
        left: 220px;
        width: 100px;
    }


    /* ========================================
   TITLE: NOS GAMMES
   ======================================== */

    .svg-title-container.svg-blue-croissant {
        top: -30px;
        left: 90px;
    }

    .title--blue-line-left#title-nos-gammes::before {
        top: 0px;
        left: -70px;
        width: 100px;
    }

    .title--blue-line-left#title-nos-gammes::after {
        top: 10px;
        width: 100px;
        left: 120px;
    }


    /* ========================================
        TITLE: GAMMES ETAPES DE FABRICATION
    ======================================== */

    .svg-title-container.svg-etapes-fabrication {
        width: 70px;
    }

    .title-etapes-fabrication.title--yellow-line-left::before,
    .title-etapes-fabrication.title--orange-line-left::before,
    .title-etapes-fabrication.title--pink-line-left::before,
    .title-etapes-fabrication.title--snacking-line-left::before {
        top: 27px;
        left: -50px;
        width: 100px;
    }

    .title-etapes-fabrication.title--yellow-line-left::after,
    .title-etapes-fabrication.title--orange-line-left::after,
    .title-etapes-fabrication.title--pink-line-left::after,
    .title-etapes-fabrication.title--snacking-line-left::after {
        top: 35px;
        left: 175px;
        width: 100px;
    }
}

@media (max-width: 480px) {
    .title--2xl {
        font-size: 3.5rem;
    }

    .title--xl {
        font-size: 2rem;
    }

    .title--large {
        font-size: 1.75rem;
    }

    .title--medium {
        font-size: 1.5rem;
    }

    .title--small {
        font-size: 1.25rem;
    }

    .title--xs {
        font-size: 1rem;
    }
}