/* --------------------------------------- */
/* ---------- MOBILE XS - 300px ---------- */
@media (min-width:1px) {
    main {
        background: #ffffff;
        overflow-x: hidden;
        max-width: 2400px;
        margin: 0 auto;
    }

    /* -- section hero banner -- */ @media screen, print {

        /* Conteneur section hero banner */
        #Section_annonceur_hero {
            position: relative;
            background-color: var(--noir-clair);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            padding: 0 30px 85px 30px;
            display: flex;
            align-items: end;
            justify-content: center;
            width: 100%;
            min-height: 400px;
            height: calc(100vh - var(--navbar-height) - 3vh);
            overflow: visible;
        }

        /* Conteneur des images du carrousel */
        #Carrousel_hero_annonceur {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        /* Règles génériques image carrousel */
        .sah--carrousel-img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }

        .no-transition-onload {
            transition: none;
        }

        /* Afficher image carrousel */
        .sah--carrousel-img.show {
            opacity: 1;
        }

        /* Première image du carrousel */
        #Hero_car_1 {
            background-image: url(../img/hero-banner-annonceur-commerce.jpg);
        }

        /* Deuxième image du carrousel */
        #Hero_car_2 {
            background-image: url(../img/hero-banner-annonceur-alimentaire.jpg);
        }

        /* Troisième image du carrousel */
        #Hero_car_3 {
            background-image: url(../img/hero-banner-annonceur-sport.jpg);
        }

        /* Quatrième image du carrousel */
        #Hero_car_4 {
            background-image: url(../img/hero-banner-annonceur-artisan.jpg);
        }

        /* Conteneur intermédiaire pour le titre */
        .sah--content-wrapper {
            display: flex;
            flex-direction: column;
            gap: 5px;
            z-index: 1;
        }

        /* Titre de la page/section */
        .sah--sec-ttr {
            font-family: 'Teko', sans-serif;
            font-size: 48px;
            font-weight: 600;
            text-align: center;
            color: #ffffff;
            text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25);
            margin: 0;
            line-height: 1;
        }

        /* Sous-titre */
        .sah--sec-sub-ttr {
            font-family: 'Cabin', sans-serif;
            font-size: 20px;
            font-weight: 600;
            text-align: center;
            color: #ffffff;
            margin: 0;
            text-shadow: 0px 1px 5px rgb(0 0 0 / 25%);
        }

        /* Conteneurs de bulles décoratives */
        .sah--bulles {
            position: absolute;
            z-index: 0;
            height: auto;
        }

        /* Groupe de bulle décorative n°1 */
        #Hero_bulles_01 {
            bottom: -10px;
            left: -15px;
            width: 35%;
            max-width: 180px;
            max-height: 30%;
        }

        /* Groupe de bulle décorative n°2 */
        #Hero_bulles_02 {
            top: -10px;
            right: -5px;
            width: 25%;
            max-width: 150px;
            max-height: 32%;
        }

    } /* -- FIN section hero banner -- */

    /* -- section arguments visibilité business -- */ @media screen, print {

        /* Conteneur section */
        #Section_visibilite_business {
            background-color: var(--gris-contraste);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 30px;
            padding: 70px 30px 100px 30px;
        }

        /* Conteneur intermédiaire du titre/texte qui l'accompagne */
        .svb--ttr-grp {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        /* Titre de la section */
        .svb--sec-ttr {
            font-family: 'Teko', sans-serif;
            font-size: 34px;
            font-weight: 500;
            text-align: center;
            color: var(--primary);
            margin: 0;
            line-height: 1;
        }

        /* Sous-titre de la section */
        .svb--sec-subttr {
            font-family: 'Cabin', sans-serif;
            font-size: 15px;
            font-weight: 500;
            text-align: center;
            color: var(--noir-texte);
            margin: 0;
        }

        /* Conteneur intermédiaire des blocs d'arguments */
        .svb--arg-grp {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* Bloc argument */
        .svb--arg-bloc {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #ffffff;
            border-radius: 10px;
            padding: 18px 20px 22px 20px;
            box-shadow: 0px 2px 15px 1px rgba(0, 0, 0, 0.08);
            flex-grow: 1;
            max-width: 350px;
        }

        /* Visuel du bloc argument */
        .svb--arg-ico {
            width: 60px;
            height: auto;
            margin: 0 auto 5px auto;
        }

        /* Titre du bloc argument */
        .svb--arg-ttr {
            font-family: 'Cabin', sans-serif;
            font-size: 16px;
            font-weight: 600;
            text-align: center;
            color: var(--primary-grad2);
            margin: 0 0 3px 0;
        }

        /* Phrases du bloc argument */
        .svb--arg-txt {
            font-family: 'Cabin', sans-serif;
            font-size: 14px;
            font-weight: 400;
            text-align: center;
            color: var(--noir-texte);
            margin: 0;
        }




    } /* -- FIN section arguments visibilité business -- */

    /* -- section showcase compte annonceur -- */ @media screen, print {

        /* Conteneur section */
        #Section_showcase_compte {
            background-color: var(--noir-clair);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 30px;
            padding: 70px 30px 100px 30px;
        }

        /* Titre section */
        .ssc--ttr {
            font-family: 'Teko', sans-serif;
            font-size: 34px;
            font-weight: 500;
            text-align: center;
            color: #ffffff;
            margin: 0;
            line-height: 1;
        }

        /* Conteneur intermédiaire des blocs showcase */
        .ssc--wrapper {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: start;
            gap: 50px;
        }

        /* Bloc argument showcase compte */
        .ssc--arg-grp {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            flex-basis: 50%;
            max-width: 500px;
        }

        /* Visuel bloc showcase */
        .ssc--arg-img {
            width: 100%;
            height: auto;
            border-radius: 10px;
            margin-bottom: 20px;
        }

        /* Titre bloc showcase */
        .ssc--arg-ttr {
            font-family: 'Teko', sans-serif;
            font-size: 32px;
            font-weight: 500;
            color: #ffffff;
            margin: 0 0 5px 0;
            line-height: 1;
        }

    } /* -- FIN section showcase compte annonceur -- */

    /* -- section info catégories d'annonces (annonceur) -- */ @media screen, print {

        #Section_info_cat_annonceur {
            background: var(--primary);
            padding: 50px 30px 60px 30px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Conteneur intermédiaire */
        .sica--wrapper {
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 25px;
        }

        /* Bloc du texte desktop de la section */
        .sica--txt-grp {
            max-width: 600px;
        }

        /* Conteneur des textes de chaque catégorie sur desktop */
        .sica--paragraph-bloc {
            display: none;
            flex-direction: column;
        }

        /* Bloc de texte de base */
        #Base_txt_bloc_sica {
            display: flex;
        }

        /* Liste à puce */
        .sica--liste-puce {
            margin-top: 8px;
            padding-inline-start: 20px;
        }

        /* Textes de la liste à puce */
        .sica--liste-puce .section-base-txt {
            font-size: 15px;
        }

        /* Éléments importants en gras */
        .b-txt {
            font-weight: 600;
        }

        /* Conteneur accordéon */
        #Info_cat_accord {
            display: flex;
            flex-direction: column;
            border-color: var(--gris);
            --bs-accordion-border-color: var(--gris);
            font-family: 'Cabin', sans-serif;
            font-size: 17px;
            font-weight: 500;
            color: var(--noir-texte);
            width: 100%;
            max-width: 600px;
        }

        #Info_cat_accord .accordion-button {
            padding: 15px 45px 15px 20px;
            transition: none!important;
        }

        /* Masquer l'icone par défaut des boutons d'accordéon */
        #Info_cat_accord .accordion-button::after {
            display: none;
        }

        /* Effet survol volet accordéon */
        #Info_cat_accord .accordion-button:hover {
            background: var(--gris-contraste);
        }

        /* Effet de focus volet accordéon */
        #Info_cat_accord .accordion-button:focus {
            border-color: #ffffff00;
            box-shadow: none;
            background: var(--gris-contraste);
        }

        /* Icone désignant la catégorie */
        #Info_cat_accord .accordion-button .icon-accord {
            --size:22px;
            width: var(--size);
            height: var(--size);
            background-color: var(--noir-texte);
            margin-right: 7px;
        }

        /* Icone fermée volet accordéon */
        #Info_cat_accord .accord-toggle-ico {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            --size:14px;
            width: var(--size);
            height: var(--size);
            -webkit-mask-image: url(../svg/ico-plus.svg);
            mask-image: url(../svg/ico-plus.svg);
            background-color: var(--primary-grad2);
            transition: transform 0.3s ease-in-out;
        }

        /* Icone quand le volet est ouvert */
        #Info_cat_accord .accordion-button.active .accord-toggle-ico {
            background-color: #ffffff;
            transform: translateY(-50%) rotate(-45deg);
        }

        /*  */
        #Info_cat_accord .accordion-body {
            color: #ffffff;
            font-family: 'Cabin', sans-serif;
            font-size: 16px;
            font-weight: 500;
            background-color: var(--noir-clair);
        }

        /* Arrondi spécifique sur le dernier volet de l'accordéon */
        #Info_cat_accord .accordion-item:last-of-type .accordion-body {
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 5px;
        }

        /* Règles générales bouton actif */
        #Info_cat_accord .accordion-button.active {
            color: #ffffff;
        }

        #Info_cat_accord .accordion-button.active .icon-accord {
            background-color: #ffffff;
        }

        /* --- Règles spécifiques volet "emploi" --- */

        /* Bouton volet */
        #Info_cat_accord .accordion-button[switch-tag="emploi"].active {
            background-color: var(--cat-emploi-dark);
        }

        #Info_cat_accord .accordion-button[switch-tag="emploi"] .icon-accord {
            -webkit-mask-image: url(../svg/ico-emploi.svg);
            mask-image: url(../svg/ico-emploi.svg);
        }

        #Info_cat_accord .accordion-collapse[switch-tag="emploi"] .accordion-body {
            background-color: var(--cat-emploi);
        }

        #Info_cat_accord:has(.accordion-button[switch-tag="emploi"].active) {
            --bs-accordion-border-color: var(--cat-emploi);
        }

        /* --- Règles spécifiques volet "bon plan" --- */

        /* Bouton volet */
        #Info_cat_accord .accordion-button[switch-tag="bonplan"].active {
            background-color: var(--cat-affaire-dark);
        }

        #Info_cat_accord .accordion-button[switch-tag="bonplan"] .icon-accord {
            -webkit-mask-image: url(../svg/ico-affaire.svg);
            mask-image: url(../svg/ico-affaire.svg);
        }

        #Info_cat_accord .accordion-collapse[switch-tag="bonplan"] .accordion-body {
            background-color: var(--cat-affaire);
        }

        #Info_cat_accord:has(.accordion-button[switch-tag="bonplan"].active) {
            --bs-accordion-border-color: var(--cat-affaire);
        }

        /* --- Règles spécifiques volet "sortie" --- */

        /* Bouton volet */
        #Info_cat_accord .accordion-button[switch-tag="sortie"].active {
            background-color: var(--cat-event-dark);
        }

        #Info_cat_accord .accordion-button[switch-tag="sortie"] .icon-accord {
            -webkit-mask-image: url(../svg/ico-event.svg);
            mask-image: url(../svg/ico-event.svg);
        }

        #Info_cat_accord .accordion-collapse[switch-tag="sortie"] .accordion-body {
            background-color: var(--cat-event);
        }

        #Info_cat_accord:has(.accordion-button[switch-tag="sortie"].active) {
            --bs-accordion-border-color: var(--cat-event);
        }

        /*  */
        #Info_cat_accord .accordion:last-child {
            border-radius: 0 0 5px 5px;
        }

        /* -- Conteneur zone boutons switch catégorie desktop -- */
        .sica--desk-btn-grp {
            display: none;
            flex-direction: column;
            gap: 20px;
            flex-grow: 1;
            max-width: 550px;
        }

        /* Phrase qui accompagne les boutons switch desktop */
        .btn-switch-instruction {
            font-family: 'Cabin', sans-serif;
            font-size: 16px;
            font-weight: 600;
            color: #ffffff;
            text-align: center;
            margin: 0;
        }

        /* Conteneur des boutons desktop */
        .btn-switch-container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            gap: 20px;
        }

        /* Bouton switch catégorie */
        .btn-switch-element {
            padding: 12px 10px;
            background: #ffffff;
            box-shadow: 0px 1px 10px rgba(0, 0, 0, .1);
            width: 110px;
            min-height: 85px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            border-radius: 6px;
            gap: 3px;
        }

        /* Texte du bouton switch */
        .btn-switch-element p {
            text-align: center;
            font-family: 'Cabin', sans-serif;
            font-size: 14px;
            color: var(--noir-texte);
            margin: 0 auto;
            font-weight: 500;
            line-height: 1.2;
            width: 100%;
        }

        /* Icones des boutons switch */
        .btn-switch-element .mask-ico {
            --size:28px;
            width: var(--size);
            height: var(--size);
            background-color: var(--noir-texte);
            display: block;
            background-repeat: no-repeat;
            background-position: center;
        }

        /* Règles spécifiques au bouton "emploi" */
        #ico-switch-emploi {
            -webkit-mask-image: url(../svg/ico-emploi.svg);
            mask-image: url(../svg/ico-emploi.svg);
        }

        #btn-switch-emploi:hover p, #btn-switch-emploi.active p {
            color: var(--cat-emploi);
        }

        #btn-switch-emploi:hover #ico-switch-emploi, #btn-switch-emploi.active #ico-switch-emploi {
            background-color: var(--cat-emploi);
        }

        /* Règles spécifiques au bouton "bon plan" */
        #ico-switch-affaire {
            -webkit-mask-image: url(../svg/ico-affaire.svg);
            mask-image: url(../svg/ico-affaire.svg);
        }

        #btn-switch-affaire:hover p, #btn-switch-affaire.active p {
            color: var(--cat-affaire);
        }

        #btn-switch-affaire:hover #ico-switch-affaire, #btn-switch-affaire.active #ico-switch-affaire {
            background-color: var(--cat-affaire);
        }

        /* Règles spécifiques au bouton "sortie" */
        #ico-switch-event {
            -webkit-mask-image: url(../svg/ico-event.svg);
            mask-image: url(../svg/ico-event.svg);
        }

        #btn-switch-event:hover p, #btn-switch-event.active p {
            color: var(--cat-event);
        }

        #btn-switch-event:hover #ico-switch-event, #btn-switch-event.active #ico-switch-event {
            background-color: var(--cat-event);
        }

    } /* -- FIN section info catégories d'annonces (annonceur) -- */

    /* -- section FAQ -- */ @media screen, print {

        /* Conteneur section */
        #Section_faq_annonceur {
            background-color: var(--primary-darker);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 25px;
            padding: 70px 30px 100px 30px;
        }

        /* Titre section */
        .sfa--sec-ttr {
            font-family: 'Teko', sans-serif;
            font-size: 34px;
            font-weight: 500;
            text-align: center;
            color: #ffffff;
            margin: 0;
            line-height: 1;
        }

        /* Conteneur accordéon FAQ */
        #Faq_accordion {
            width: 100%;
            max-width: 750px;
        }

        /* Bouton de volet */
        #Faq_accordion .accordion-button {
            /* Typo */
            font-family: 'Cabin', sans-serif;
            font-size: 15px;
            font-weight: 400;
            color: var(--noir-texte);

            /* Layout & apparence */
            padding: 12px 18px;
            background-color: var(--gris-contraste);
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            
        }

        /* Bouton de volet survol */
        #Faq_accordion .accordion-button:hover,
        #Faq_accordion .accordion-button:focus {
            background-color: var(--gris-bleu);
            box-shadow: none;
        }

        /* Bouton de volet ouvert */
        #Faq_accordion .accordion-button:not(.collapsed) {
            color: #ffffff;
            background-color: var(--primary-grad2);
        }

        /* Masquer l'icone fleche par défaut */
        #Faq_accordion .accordion-button::after {
            display: none;
        }

        /* Icone bouton volet */
        #Faq_accordion .accordion-button .mask-ico {
            --size: 15px;
            width: var(--size);
            height: var(--size);
            background-color: var(--gris);
            display: block;
            background-repeat: no-repeat;
            background-position: center;
            -webkit-mask-image: url(../svg/ico-fleche-deplier.svg);
            mask-image: url(../svg/ico-fleche-deplier.svg); 
            transition: transform 0.3s ease-in-out;
        }

        /* Icone bouton volet ouvert */
        #Faq_accordion .accordion-button:not(.collapsed) .mask-ico {
            background-color: #ffffff;
            transform: rotate(-180deg);
        }

        /* Conteneur texte dépliable */
        #Faq_accordion .accordion-body {
            background-color: #ffffff;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        /* Paragraphes de texte dans les volets dépliables */
        #Faq_accordion .accord-txt {
            font-family: 'Cabin', sans-serif;
            font-size: 14px;
            font-weight: 400;
            color: var(--noir-texte);
            margin: 0;
        }

        /* lien vers page création de compte */
        #Faq_accordion .accord-txt a {
            color: var(--primary);
        }

        /* effet de survol */
        #Faq_accordion .accord-txt a:hover {
            color: var(--primary-dark);
        }

    } /* -- FIN section FAQ -- */

    /* -- section call to action annonceur -- */ @media screen, print {

        /* Conteneur de la section */
        #Section_cta_annonceur {
            padding: 70px 30px 100px 30px;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: url(../svg/annonceur-cta-ico-background.svg), url(../svg/dashgrid05.svg), var(--noir-texte);
            background-size: 1500px, 700px, 100%;
            background-position: center;
            background-repeat: repeat;
        }

        /* Bloc qui contient les éléments du CTA */
        .sca--cta-bloc {
            display: flex;
            flex-direction: column;
            background: #ffffff;
            padding: 25px 20px;
            margin: auto;
            border-radius: 6px;
            flex-grow: 1;
            max-width: 450px;
            z-index: 1;
            align-items: center;
        }

        /* Titre du bloc cta */
        .sca--cta-ttr {
            font-family: 'Teko', sans-serif;
            font-size: 27px;
            font-weight: 500;
            color: var(--primary);
            margin: 0;
            line-height: 1;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        /* Icone du titre du bloc cta */
        .sca--cta-ttr .mask-ico {
            --size: 22px;
            width: var(--size);
            height: var(--size);
            background-color: var(--primary);
            display: block;
            background-repeat: no-repeat;
            background-position: center;
            -webkit-mask-image: url(../svg/ico-bonhomme.svg);
            mask-image: url(../svg/ico-bonhomme.svg);
            margin-bottom: 3px;
        }

        /* Texte du bloc cta */
        .sca--cta-txt {
            font-family: 'Cabin', sans-serif;
            font-size: 16px;
            font-weight: 500;
            color: var(--noir-texte);
            margin: 5px 0 18px 0;
            text-align: center;
        }

        /* Bouton du bloc cta */
        .sca--cta-bloc a {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            gap: 6px;
        }

        /* Icone du bouton du bloc cta */
        .sca--cta-bloc a .mask-ico {
            --size: 14px;
            width: var(--size);
            height: var(--size);
            background-color: #ffffff;
            display: block;
            background-repeat: no-repeat;
            background-position: center;
            -webkit-mask-image: url(../svg/ico-plus.svg);
            mask-image: url(../svg/ico-plus.svg);
            margin-bottom: 2px;
        }

        /* Règles génériques des icones */
        .sca--parallax-ico {
            position: absolute;
            --size: 50px;
            width: var(--size);
            height: var(--size);
            background-color: var(--gris);
            display: block;
            background-repeat: no-repeat;
            background-position: center;
        }

    } /* -- FIN section call to action annonceur -- */
}




/* ----------------------------------------- */
/* ---------- TABLETTE MD - 768px ---------- */
@media (min-width:768px) {

    /* -- section arguments visibilité business -- */ @media screen, print {

        

        /* Titre de la section */
        .svb--sec-ttr {
            font-size: 42px;
        }

        /* Sous-titre de la section */
        .svb--sec-subttr {
            font-size: 16px;
        }

        /* Conteneur intermédiaire des blocs d'arguments */
        .svb--arg-grp {
            flex-direction: row;
            gap: 30px;
        }

    } /* -- FIN section arguments visibilité business -- */

    /* -- section FAQ -- */ @media screen, print {

        /* Titre section */
        .sfa--sec-ttr {
            font-size: 42px;
        }

        /* Bouton de volet */
        #Faq_accordion .accordion-button {
            font-size: 16px;
        }

        /* Paragraphes de texte dans les volets dépliables */
        #Faq_accordion .accord-txt {
            font-size: 15px;
        }

    } /* -- FIN section FAQ -- */

}



/* -------------------------------------- */
/* ---------- ECRAN LG - 992px ---------- */
@media (min-width:992px) {

    /* -- section hero banner -- */ @media screen, print {

        /* Conteneur section hero banner */
        #Section_annonceur_hero {
            padding: 0 30px 0px 30px;
            align-items: center;
            height: calc(100vh - var(--navbar-height));
        }

        /* Titre de la page/section */
        .sah--sec-ttr {
            font-size: 82px;
        }

        /* Sous-titre */
        .sah--sec-sub-ttr {
            font-size: 25px;
        }

        /* Conteneurs de bulles décoratives */
        .sah--bulles {
            /* max-width: 250px; */
        }

        /* Groupe de bulle décorative n°1 */
        #Hero_bulles_01 {
            bottom: 30px;
            left: 70px;
            max-width: 250px;
            max-height: 35%;
        }

        /* Groupe de bulle décorative n°2 */
        #Hero_bulles_02 {
            top: 25px;
            right: 55px;
            width: 18%;
            max-width: 200px;
            max-height: 38%;
        }

    } /* -- FIN section hero banner -- */

    /* -- section arguments visibilité business -- */ @media screen, print {

        /* Conteneur section */
        #Section_visibilite_business {
            padding: 90px 30px 150px 30px;
            gap: 50px;
        }

        /* Titre de la section */
        .svb--sec-ttr {
            font-size: 48px;
        }

        /* Titre de la section */
        .svb--sec-subttr {
            font-size: 18px;
        }

        /* Conteneur intermédiaire des blocs d'arguments */
        .svb--arg-grp {
            gap: 50px;
        }

        /* Bloc argument */
        .svb--arg-bloc {
            padding: 22px 30px 26px 30px;
        }

        /* Visuel du bloc argument */
        .svb--arg-ico {
            width: 80px;
        }

        /* Titre du bloc argument */
        .svb--arg-ttr {
            font-size: 17px;
        }

        /* Phrases du bloc argument */
        .svb--arg-txt {
            font-size: 15px;
        }

    } /* -- FIN section arguments visibilité business -- */

    /* -- section showcase compte annonceur -- */ @media screen, print {

        /* Titre section */
        .ssc--ttr {
            font-size: 42px;
        }

        /* Conteneur intermédiaire des blocs showcase */
        .ssc--wrapper {
            flex-direction: row;
        }

        /* Titre bloc showcase */
        .ssc--arg-ttr {
            font-size: 36px;
        }

    } /* -- FIN section showcase compte annonceur -- */

    /* -- section info catégories d'annonces (annonceur) -- */ @media screen, print {

        #Section_info_cat_annonceur {
            padding: 140px 30px 160px 30px;
            transition: background 0.8s ease-out;
        }

        /* Changer la couleur de fond de la section en fonction de la catégorie active */
        #Section_info_cat_annonceur[switch-tag="base"] {
            background-color: var(--primary);
        }

        #Section_info_cat_annonceur[switch-tag="emploi"] {
            background-color: var(--cat-emploi);
        }

        #Section_info_cat_annonceur[switch-tag="bonplan"] {
            background-color: var(--cat-affaire);
        }

        #Section_info_cat_annonceur[switch-tag="sortie"] {
            background-color: var(--cat-event);
        }

        .sica--wrapper {
            flex-direction: row;
            gap: 50px;
        }

        /* Conteneur des textes de chaque catégorie sur desktop */
        .sica--paragraph-bloc {
            display: flex;
        }
    
        /* Masquer le texte non actif */
        .sica--paragraph-bloc.hide {
            display: none!important;
        }

        /* Textes de la liste à puce */
        .sica--liste-puce .section-base-txt {
            font-size: 16px;
        }
    
        /* Conteneur accordéon */
        #Info_cat_accord {
            display: none;
        }

        .sica--desk-btn-grp {
            display: flex;
        }

    } /* -- FIN section info catégories d'annonces (annonceur) -- */

    /* -- section FAQ -- */ @media screen, print {

        /* Conteneur section */
        #Section_faq_annonceur {
            padding: 80px 30px 130px 30px;
        }

        /* Titre section */
        .sfa--sec-ttr {
            font-size: 46px;
        }

    } /* -- FIN section FAQ -- */

    /* -- section call to action annonceur -- */ @media screen, print {

        /* Conteneur de la section */
        #Section_cta_annonceur {
            padding: 100px 30px 140px 30px;
            background-size: 1650px, 900px, 100%;
        }

        /* Texte du bloc cta */
        .sca--cta-txt {
            font-size: 17px;
        }

    } /* -- FIN section call to action annonceur -- */ 

    

}



/* --------------------------------------------- */
/* ---------- ECRAN MOYEN XL - 1200px ---------- */
@media (min-width:1200px) {

    /* -- section showcase compte annonceur -- */ @media screen, print {

        /* Titre section */
        .ssc--ttr {
            font-size: 48px;
        }

        /* Conteneur intermédiaire des blocs showcase */
        .ssc--wrapper {
            gap: 100px;
        }

    } /* -- FIN section showcase compte annonceur -- */

    /* -- section info catégories d'annonces (annonceur) -- */ @media screen, print {

        #Section_info_cat_annonceur {
            padding: 150px 30px 170px 30px;
        }

        /* Phrase qui accompagne les boutons switch desktop */
        .btn-switch-instruction {
            font-size: 17px;
        }

        /* Conteneur des boutons desktop */
        .btn-switch-container {
            gap: 30px;
        }

        /* Bouton switch catégorie */
        .btn-switch-element {
            width: 125px;
            min-height: 105px;
        }

        /* Texte du bouton switch */
        .btn-switch-element p {
            font-size: 15px;
        }

        .btn-switch-element .mask-ico {
            --size: 38px;
        }

    } /* -- FIN section info catégories d'annonces (annonceur) -- */


}



/* ---------------------------------------------- */
/* ---------- ECRAN LARGE XXL - 1400px ---------- */
@media (min-width:1400px) {
    
    /* -- section hero banner -- */ @media screen, print {

        /* Titre de la page/section */
        .sah--sec-ttr {
            font-size: 112px;
        }

        /* Sous-titre */
        .sah--sec-sub-ttr {
            font-size: 28px;
        }

        /* Conteneurs de bulles décoratives */
        .sah--bulles {
            max-width: 250px;
        }

    } /* -- FIN section hero banner -- */

    /* -- section showcase compte annonceur -- */ @media screen, print {



    } /* -- FIN section showcase compte annonceur -- */

    /* -- section info catégories d'annonces (annonceur) -- */ @media screen, print {

        .sica--wrapper {
            gap: 125px;
        }

    } /* -- FIN section info catégories d'annonces (annonceur) -- */


    
}

/* ---------------------------------------------- */
/* ---------- EXCEPTION XXXL - 1700px ---------- */
@media (min-width:1700px) {


    
}

/* ---------------------------------------------- */
/* ---------- EXCEPTION - 2400px ---------- */
@media (min-width:2400px) {

    
}