/* =========================================================
   QualitaPro CMS - Fichier CSS genere depuis le BO
   Type : perso
   Genere le : 2026-06-08 16:16:50
   Ne pas modifier ce fichier a la main.
   ========================================================= */

/* =========================================================
   Variables CSS
   ========================================================= */

:root {

    /* Header */
    --header-padding-y: 18px;
    --header-padding-x: 24px;
    --header-site-name-size: 28px;
    --header-tagline-size: 16px;
    --header-contact-size: 15px;

    /* Content */
    --content-padding-x: 24px;
    --content-padding-y: 32px;
    --content-font-size: 16px;
    --content-line-height: 1.65;

    /* Titres */
    --h1-font-size: 34px;
    --h1-margin-bottom: 24px;
    --h2-font-size: 26px;
    --h2-margin-bottom: 18px;
    --h3-font-size: 21px;
    --h3-margin-top: 28px;
    --h3-margin-bottom: 12px;

    /* Paragraphes et listes */
    --paragraph-margin-bottom: 16px;
    --list-margin-bottom: 18px;
    --list-padding-left: 24px;

    /* Boxes */
    --box-margin-bottom: 32px;
    --box-image-margin-bottom: 20px;

    /* Menu */
    --menu-height: 48px;
    --menu-mobile-height: 48px;
    --menu-padding-x: 24px;
    --menu-item-gap: 22px;
    --menu-drawer-width: 280px;

    /* Footer */
    --footer-legal-padding-y: 18px;
    --footer-legal-padding-x: 24px;
}

/* =========================================================
   Blocs CSS personnalises
   ========================================================= */


/* ----- Menu ----- */

/* Bloc 10 - Variables charte */
/* ============================================================
   010 - MENU PUBLIC - Variables charte
   ============================================================ */

:root {
    --menu-color-a-bg: var(--color-menu-bg);
    --menu-color-a-text: var(--color-menu-text);

    --menu-color-b-bg: var(--color-menu-drawer-bg);
    --menu-color-b-text: var(--color-menu-text);

    --menu-color-c-bg: #ffffff;
    --menu-color-c-text: #2d6f3f;

    --menu-color-hover-bg: #f1ec72;
    --menu-color-hover-text: #2d4f1f;

    --menu-border-color-soft: rgba(255, 255, 255, 0.18);
    --menu-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

/* Bloc 20 - Base générale */
/* ============================================================
   020 - MENU PUBLIC - Base générale
   ============================================================ */

.site-menu {
    background: var(--menu-color-a-bg);
    color: var(--menu-color-a-text);
    min-height: 48px;
}

.site-menu__inner {
    max-width: var(--site-max-width);
    margin: 0 auto;
}

.site-menu__list {
    padding: 0 24px;
    gap: 22px;
    min-height: 48px;
}

.site-menu__item-row {
    min-height: 48px;
}

.site-menu__link,
.site-menu__label {
    color: inherit;
    padding: 0 4px;
    font-weight: 600;
    white-space: nowrap;
}

.site-menu__link:hover,
.site-menu__link:focus {
    color: inherit;
    text-decoration: underline;
}

.site-menu__branch-toggle {
    width: 28px;
    min-height: 28px;
    margin-left: 4px;
    border: 0;
    background: transparent;
    color: inherit;
    line-height: 1;
}

.site-menu__branch-toggle:hover,
.site-menu__branch-toggle:focus {
    background: var(--menu-color-hover-bg);
    color: var(--menu-color-hover-text);
}

/* Bloc 30 - CSS A niveau 0 */
/* ============================================================
   030 - MENU PUBLIC - CSS A niveau 0
   Titres principaux : Entretien des Jardins, Création Espaces Verts...
   ============================================================ */

.site-menu__item--level-0 > .site-menu__item-row {
    min-height: 48px;
    background: var(--menu-color-a-bg);
    color: var(--menu-color-a-text);
}

.site-menu__item--level-0 > .site-menu__item-row .site-menu__link,
.site-menu__item--level-0 > .site-menu__item-row .site-menu__label {
    color: var(--menu-color-a-text);
    font-size: 16px;
    font-weight: 700;
}

/* Desktop : niveau 0 ouvert au hover JS, bouton +/- inutile */
@media (min-width: 992px) {
    .site-menu__item--level-0 > .site-menu__item-row > .site-menu__branch-toggle {
        display: none;
    }
}

/* Bloc 40 - Desktop colonne sous-menu */
/* ============================================================
   040 - MENU PUBLIC - Desktop colonne sous-menu
   ============================================================ */

@media (min-width: 992px) {
    /* Colonne principale ouverte depuis un niveau 0 */
    .site-menu__item--level-0 > .site-menu__submenu {
        width: 270px;
        max-width: 270px;
        min-width: 270px;
        padding: 8px;
        box-sizing: border-box;
        background: var(--menu-color-b-bg);
        color: var(--menu-color-b-text);
        box-shadow: var(--menu-shadow);
    }

    /* Sous-listes internes niveau 2 : elles restent dans la colonne */
    .site-menu__item--level-1 > .site-menu__submenu {
        width: auto;
        max-width: none;
        min-width: 0;
        padding: 0;
        box-sizing: border-box;
        background: transparent;
        color: inherit;
        box-shadow: none;
    }
}

/* Bloc 50 - Desktop CSS B niveau 1 */
/* ============================================================
   050 - MENU PUBLIC - Desktop CSS B niveau 1
   Sous-blocs titres : Taille des Végétaux, Pelouses et Prairies...
   ============================================================ */

@media (min-width: 992px) {
    .site-menu__item--level-1 > .site-menu__item-row {
        width: 100%;
        min-height: 42px;
        background: var(--menu-color-b-bg);
        color: var(--menu-color-b-text);
        border-bottom: 1px solid var(--menu-border-color-soft);
    }

    .site-menu__item--level-1 > .site-menu__item-row .site-menu__link,
    .site-menu__item--level-1 > .site-menu__item-row .site-menu__label {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0 10px;
        color: var(--menu-color-b-text);
        font-size: 15px;
        font-weight: 700;
        white-space: normal;
        line-height: 1.25;
    }

    .site-menu__item--level-1 > .site-menu__item-row > .site-menu__branch-toggle {
        flex: 0 0 34px;
        width: 34px;
        min-width: 34px;
        min-height: 42px;
        margin-left: auto;
        border: 0;
        background: transparent;
        color: inherit;
    }

    .site-menu__item--level-1 > .site-menu__item-row > .site-menu__branch-toggle:hover,
    .site-menu__item--level-1 > .site-menu__item-row > .site-menu__branch-toggle:focus {
        background: transparent;
        color: inherit;
    }

    .site-menu__item--level-1 > .site-menu__item-row:hover {
        background: rgba(0, 0, 0, 0.12);
    }

    .site-menu__item--level-1.site-menu__item--has-children > .site-menu__item-row {
        cursor: pointer;
    }

}

/* Bloc 60 - Desktop CSS C niveau 2 */
/* ============================================================
   060 - MENU PUBLIC - Desktop CSS C niveau 2
   Entrées de pages avec ou sans lien : Taille des Haies, Fauchage...
   ============================================================ */

@media (min-width: 992px) {
    .site-menu__item--level-2 {
        width: 100%;
        box-sizing: border-box;
    }

    .site-menu__item--level-2 > .site-menu__item-row {
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        min-height: 34px;
        margin: 4px 12px;
        box-sizing: border-box;
        background: var(--menu-color-c-bg);
        color: var(--menu-color-c-text);
        border-radius: 7px;
        text-align: center;
    }

    .site-menu__item--level-2 > .site-menu__item-row .site-menu__link,
    .site-menu__item--level-2 > .site-menu__item-row .site-menu__label {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 34px;
        padding: 0 12px;
        box-sizing: border-box;
        color: var(--menu-color-c-text);
        font-size: 14px;
        font-weight: 700;
        white-space: normal;
        line-height: 1.25;
        text-align: center;
    }

    .site-menu__item--level-2 > .site-menu__item-row .site-menu__link:hover,
    .site-menu__item--level-2 > .site-menu__item-row .site-menu__link:focus {
        background: var(--menu-color-hover-bg);
        color: var(--menu-color-hover-text);
        border-radius: 7px;
        text-decoration: none;
    }

    .site-menu__item--level-2 > .site-menu__item-row .site-menu__label {
        opacity: 0.85;
    }
}

/* Bloc 70 - Mobile drawer */
/* ============================================================
   070 - MENU PUBLIC - Mobile drawer
   ============================================================ */

@media (max-width: 991px) {
    .site-menu {
        min-height: 48px;
    }

    .site-menu__inner {
        max-width: none;
    }

    .site-menu__toggle {
        min-height: 48px;
        padding: 0 16px;
        border: 0;
        background: transparent;
        color: inherit;
        gap: 8px;
    }

    .site-menu__overlay {
        background: rgba(0, 0, 0, 0.45);
    }

    .site-menu__panel {
        width: 280px;
        background: var(--menu-color-b-bg);
        color: var(--menu-color-b-text);
        transition: transform 0.25s ease;
    }

    .site-menu__mobile-header {
        min-height: 56px;
        padding: 0 16px;
        border-bottom: 1px solid var(--menu-border-color-soft);
    }

    .site-menu__mobile-title {
        font-weight: 700;
    }

    .site-menu__close {
        width: 40px;
        min-height: 40px;
        border: 0;
        background: transparent;
        color: inherit;
        font-size: 30px;
        line-height: 1;
    }

    .site-menu__list {
        padding: 12px 0;
        gap: 0;
        min-height: 0;
    }

    .site-menu__item-row {
        min-height: 44px;
    }

    .site-menu__link,
    .site-menu__label {
        padding: 0 16px;
        white-space: normal;
    }

    .site-menu__branch-toggle {
        width: 44px;
        min-height: 44px;
        margin-left: 0;
        border: 0;
        border-left: 1px solid var(--menu-border-color-soft);
    }

    .site-menu__submenu {
        padding-left: 14px;
        background: rgba(0, 0, 0, 0.08);
        box-shadow: none;
    }
}

/* Bloc 80 - Mobile niveaux A/B/C */
/* ============================================================
   080 - MENU PUBLIC - Mobile niveaux A/B/C
   ============================================================ */

@media (max-width: 991px) {
    /* CSS A mobile */
    .site-menu__item--level-0 > .site-menu__item-row {
        background: var(--menu-color-a-bg);
        color: var(--menu-color-a-text);
    }

    /* CSS B mobile */
    .site-menu__item--level-1 > .site-menu__item-row {
        background: var(--menu-color-b-bg);
        color: var(--menu-color-b-text);
        border-bottom: 1px solid var(--menu-border-color-soft);
    }

    /* CSS C mobile */
    .site-menu__item--level-2 > .site-menu__item-row {
        margin: 4px 12px;
        min-height: 38px;
        background: var(--menu-color-c-bg);
        color: var(--menu-color-c-text);
        border-radius: 7px;
    }

    .site-menu__item--level-2 > .site-menu__item-row .site-menu__link,
    .site-menu__item--level-2 > .site-menu__item-row .site-menu__label {
        min-height: 38px;
        padding: 0 12px;
        color: var(--menu-color-c-text);
        font-size: 14px;
        font-weight: 700;
    }
}


/* ----- Editorial ----- */

/* Bloc 100 - Images insérées depuis TinyMCE */
/* ============================================================
   Images éditoriales insérées depuis TinyMCE
   ============================================================ */

.cms-box-content img.cms-image {
    height: auto;
    border-radius: 10px;
    box-shadow: 0 3px 10px #7d7d7d;
}

.cms-box-content img.cms-image--left {
    float: left;
    max-width: 50%;
    margin: 2px 10px 10px 0;
}

.cms-box-content img.cms-image--right {
    float: right;
    max-width: 50%;
    margin: 2px 0 10px 10px;
}

.cms-box-content img.cms-image--center {
    display: block;
    max-width: 100%;
    margin: 16px auto;
}

.cms-box-content a.cms-image-lightbox {
    text-decoration: none;
}

.cms-box-content::after {
    content: "";
    display: block;
    clear: both;
}

@media (max-width: 768px) {
    .cms-box-content img.cms-image--left,
    .cms-box-content img.cms-image--right {
        float: none;
        display: block;
        max-width: 100%;
        margin: 16px auto;
    }
}


/* ----- Header ----- */

/* Bloc 120 - GAB01 - Header jardinier classique */
/* ============================================================
   GAB01 - Header jardinier classique
   Utilisé par le gabarit HTML gab01-header-jardinier
   ============================================================ */

.gab01-header {
    width: 100%;
    padding: 18px 24px;
    background: var(--color-header-bg, #f6f6f6);
    color: var(--color-header-text, #222);
}

.gab01-header__inner {
    max-width: var(--site-max-width, 1180px);
    margin: 0 auto;
}

.gab01-header__title {
    margin: 0;
    font-family: var(--font-heading, Arial, sans-serif);
    font-size: var(--header-site-name-size, 28px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--color-primary, #2f6b3f);
}

.gab01-header__line1,
.gab01-header__line2,
.gab01-header__line3 {
    margin: 6px 0 0;
    font-size: var(--header-tagline-size, 16px);
    line-height: 1.35;
}

.gab01-header__line1 {
    font-weight: 600;
}

.gab01-header__line2 {
    color: var(--color-text, #222);
}

.gab01-header__line3 {
    margin-top: 10px;
    font-weight: 700;
    color: var(--color-primary, #2f6b3f);
}

@media (max-width: 768px) {
    .gab01-header {
        padding: 14px 16px;
        text-align: center;
    }

    .gab01-header__title {
        font-size: 24px;
    }

    .gab01-header__line1,
    .gab01-header__line2,
    .gab01-header__line3 {
        font-size: 15px;
    }
}


/* ----- accordeon ----- */

/* Bloc 130 - Accordeon */
/* ============================================================
   ACCORDEON EDITORIAL - EditorialEntry / Bootstrap 5
   ============================================================ */

.cms-editorial-accordion {
    margin: 1.5rem 0;
}

.cms-editorial-accordion__item {
    border: 1px solid rgba(0, 0, 0, 0.12);
    margin-bottom: 0.45rem;
    border-radius: 0;
    overflow: hidden;
}

.cms-editorial-accordion__button {
    font-weight: 700;
    text-transform: uppercase;
    background: #f4efd8;
    color: #40551f;
    box-shadow: none;
}

.cms-editorial-accordion__button:not(.collapsed) {
    background: #e9e0bd;
    color: #334818;
    box-shadow: none;
}

.cms-editorial-accordion__button:focus {
    box-shadow: none;
    outline: 2px solid rgba(64, 85, 31, 0.35);
    outline-offset: -2px;
}

.cms-editorial-accordion__marker {
    margin-right: 0.55rem;
    color: #8b7b34;
    font-weight: 700;
}

.cms-editorial-accordion__body {
    background: #fff;
}

.cms-editorial-accordion__content {
    display: block;
}

.cms-editorial-accordion__text {
    min-width: 0;
}

.cms-editorial-accordion__image {
    width: 300px;
    max-width: 42%;
    margin-bottom: 0.75rem;
}

.cms-editorial-accordion__image--left {
    float: left;
    margin-right: 1.25rem;
}

.cms-editorial-accordion__image--right {
    float: right;
    margin-left: 1.25rem;
}

.cms-editorial-accordion__preview-img,
.cms-editorial-accordion__image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.35rem;
}

.cms-editorial-accordion__more-wrap {
    margin-top: 0.75rem;
}

.cms-editorial-accordion__more {
    font-weight: 700;
    color: #4f6f1d;
    text-decoration: none;
}

.cms-editorial-accordion__more:hover,
.cms-editorial-accordion__more:focus {
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    .cms-editorial-accordion__image,
    .cms-editorial-accordion__image--left,
    .cms-editorial-accordion__image--right {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 1rem 0;
    }
}


/* ----- Sémantique ----- */

/* Bloc 140 - Recherche-Mots */
/* ============================================================
   LIENS SEMANTIQUES EDITORIAUX
   ============================================================ */

.cms-entry-link {
    display: inline;
    padding: 0 0.18em;
    border-radius: 0.15rem;
    font-weight: 700;
    text-decoration: none;
}

.cms-entry-link:hover,
.cms-entry-link:focus {
    text-decoration: underline;
}

.cms-entry-link--words {
    background: #fff2b8;
    color: #245c1b;
}


/* ----- Formulaire ----- */

/* Bloc 150 - Formulaire devis */
/* =========================================================
   ContactForms publics — personnalisation QualitaPro
   ========================================================= */

.contact-form {
    max-width: 760px;
    margin: 0 auto;
    padding: 1.5rem;
    background: #ffffff;
}

.contact-form__title {
    margin-bottom: 0.75rem;
}

.contact-form__intro {
    margin-bottom: 1.25rem;
}

.contact-form__field {
    margin-bottom: 1rem;
}

/* Ligne label + astérisque + aide (?) */
.contact-form__label-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.35rem;
}

.contact-form__label {
    font-weight: 600;
    margin-bottom: 0;
}

.contact-form__required {
    color: #b00020;
    margin-left: 0.2rem;
    vertical-align: baseline;
}

/* Petit bouton d'aide à droite du label */
.contact-form__help-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    padding: 0;
    border: 1px solid #777777;
    border-radius: 50%;
    background: #ffffff;
    color: #555555;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0.8;
}

.contact-form__help-toggle:hover,
.contact-form__help-toggle:focus {
    opacity: 1;
    border-color: #005aa0;
    color: #005aa0;
    outline: none;
}

.contact-form__control {
    padding: 0.65rem 0.75rem;
    border: 1px solid #bbb;
    border-radius: 0.35rem;
    background: #ffffff;
    color: #222222;
}

.contact-form__control::placeholder {
    color: #777777;
    font-style: italic;
    opacity: 1;
}

.contact-form__control:focus {
    outline: 2px solid rgba(0, 90, 160, 0.25);
    border-color: #005aa0;
}

.contact-form__field--has-error .contact-form__control {
    border-color: #b00020;
}

.contact-form__help {
    margin: 0.25rem 0 0;
    padding: 0.45rem 0.6rem;
    border-left: 3px solid #005aa0;
    background: rgba(0, 90, 160, 0.06);
    color: #555555;
    font-size: 0.9rem;
}

.contact-form__error {
    margin: 0.3rem 0 0;
    color: #b00020;
    font-size: 0.92rem;
    font-weight: 600;
}

.contact-form__privacy-note {
    margin: 1rem 0;
    font-size: 0.92rem;
    color: #555555;
}

.contact-form__actions {
    margin-top: 1.25rem;
}

.contact-form__submit {
    cursor: pointer;
    padding: 0.7rem 1.4rem;
    border: 0;
    border-radius: 0.4rem;
    font-weight: 600;
    background: #005aa0;
    color: #ffffff;
}

.contact-form__submit:hover {
    background: #00457a;
}

.contact-form__result {
    margin-top: 0.85rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.35rem;
    font-weight: 600;
}

.contact-form__result--success {
    color: #0f5132;
    background: #d1e7dd;
    border: 1px solid #badbcc;
}

.contact-form__result--error {
    color: #842029;
    background: #f8d7da;
    border: 1px solid #f5c2c7;
}

/* =========================================================
   ContactForms publics — captcha maison Michel-made
   ========================================================= */

.contact-form__captcha {
    margin: 1.25rem 0;
}

.contact-form__captcha-inner {
    display: grid;
    grid-template-columns: 72px 1fr 72px;
    align-items: center;
    gap: 0.75rem;
    max-width: 430px;
    min-height: 92px;
    padding: 0.8rem 1rem;
    border: 1px solid #d0d0d0;
    border-radius: 0.9rem;
    background: #f7f7f7;
}

.contact-form__captcha-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-form__captcha-image img {
    display: block;
    width: 64px;
    max-width: 64px;
    height: auto;
}

.contact-form__captcha-text {
    font-size: 0.92rem;
    line-height: 1.35;
}

.contact-form__captcha-title {
    text-decoration: underline;
}

.contact-form__captcha-answer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

.contact-form__captcha-answer-label {
    font-size: 0.78rem;
    line-height: 1.15;
    text-align: center;
    color: #333333;
}

.contact-form__control--captcha {
    width: 46px;
    height: 40px;
    padding: 0.25rem;
    text-align: center;
    border-radius: 999px;
    font-weight: 700;
}


/* ----- Sitemap ----- */

/* Bloc 160 - Sitemap */
/* =========================================================
   Footer sitemap — habillage visuel
   ========================================================= */

.site-footer-sitemap {
    background: #f3f4f1;
    border-top: 1px solid #d8ddd3;
}

.site-footer-sitemap__group {
    padding-left: 14px;
    border-left: 5px solid #78a83b;
}

.site-footer-sitemap__title {
    color: #2f592f;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.site-footer-sitemap__link {
    color: #3f6836;
    line-height: 1.45;
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.site-footer-sitemap__link:hover,
.site-footer-sitemap__link:focus-visible {
    color: #1f3f20;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-footer-sitemap__link:focus-visible {
    outline: 2px solid #78a83b;
    outline-offset: 3px;
    border-radius: 2px;
}

.site-footer-sitemap__group {
    padding-top: 0.25rem;
    padding-bottom: 0.5rem;
}

@media (max-width: 600px) {
    .site-footer-sitemap__group {
        padding-bottom: 1.5rem;
        border-bottom: 1px solid #d8ddd3;
    }

    .site-footer-sitemap__group:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }
}


/* ----- Footer ----- */

/* Bloc 170 - Footer */
/* ============================================================
   GAB02 - Footer légal avec identité RCS Info
   Utilisé par le gabarit HTML gab02-footer-legal
   ============================================================ */

.gab02-footer-legal {
    width: 100%;
    padding: 14px 24px;
    background: var(--color-footer-legal-bg, #f4f4f4);
    color: var(--color-footer-legal-text, #222);
}

.gab02-footer-legal__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;

    max-width: var(--site-max-width, 1180px);
    margin: 0 auto;
}

.gab02-footer-legal__content {
    text-align: center;
}

.gab02-footer-legal__copyright,
.gab02-footer-legal__credit,
.gab02-footer-legal__links {
    margin: 0;
    line-height: 1.4;
}

.gab02-footer-legal__copyright {
    font-weight: 700;
}

.gab02-footer-legal__credit {
    margin-top: 2px;
}

.gab02-footer-legal__links {
    margin-top: 3px;
}

.gab02-footer-legal__links a {
    color: var(--color-primary, #2f6b3f);
    text-decoration: none;
}

.gab02-footer-legal__links a:hover,
.gab02-footer-legal__links a:focus-visible {
    text-decoration: underline;
}

.gab02-footer-legal__logo {
    display: block;
    width: 130px;
    max-width: 100%;
    height: auto;
}


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

@media (max-width: 600px) {
    .gab02-footer-legal {
        padding: 14px 16px;
    }

    .gab02-footer-legal__inner {
        flex-direction: column;
        gap: 10px;
    }

    .gab02-footer-legal__logo {
        width: 120px;
    }
}


/* ----- Documents Html ----- */

/* Bloc 180 - Accordeon Documents Html */
/* ============================================================
   Documents HTML - Accordéons juridiques et FAQ
   ============================================================ */

.html-document {
    width: 100%;
}

.html-document__group {
    margin-top: 2rem;
}

.html-document__group:first-child {
    margin-top: 0;
}

.html-document__group-title {
    display: flex;
    align-items: flex-start;
    margin: 0 0 1rem;
    font-size: 1.5rem;
    line-height: 1.25;
    color: var(--color-primary, #2f6b3f);
}

.html-document__accordion {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.html-document__section {
    scroll-margin-top: 1.5rem;
    border: 1px solid var(--color-border, #d7d7d7);
    background: var(--color-surface, #fff);
}

.html-document__section-title {
    margin: 0;
    font-size: 1rem;
}

.html-document__toggle {
    position: relative;
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding: 0.9rem 3rem 0.9rem 1rem;

    border: 0;
    background: var(--color-footer-legal-bg, #f4f4f4);
    color: var(--color-text, #222);

    font: inherit;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.html-document__toggle::after {
    content: "+";

    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);

    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
}

.html-document__toggle[aria-expanded="true"]::after {
    content: "−";
}

.html-document__toggle:hover {
    background: var(--color-surface-hover, #ececec);
}

.html-document__toggle:focus-visible {
    outline: 3px solid var(--color-primary, #2f6b3f);
    outline-offset: -3px;
}

.html-document__panel {
    border-top: 1px solid var(--color-border, #d7d7d7);
}

.html-document__content {
    padding: 1rem;
    line-height: 1.6;
}

.html-document__content > :first-child {
    margin-top: 0;
}

.html-document__content > :last-child {
    margin-bottom: 0;
}

.html-document__content ul,
.html-document__content ol {
    padding-left: 1.5rem;
}

.html-document__content a {
    color: var(--color-primary, #2f6b3f);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* ============================================================
   Documents HTML - Numérotation des groupes et sections
   ============================================================ */

.html-document__group-number,
.html-document__section-number {
    display: inline-block;
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.html-document__group-number {
    min-width: 2rem;
    margin-right: 0.35rem;
    font-weight: 700;
}

.html-document__section-number {
    min-width: 2.8rem;
    margin-right: 0.45rem;
    color: var(--color-primary, #2f6b3f);
    font-weight: 700;
}

.html-document__group-label,
.html-document__section-label {
    min-width: 0;
}

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

@media (max-width: 600px) {
    .html-document__group {
        margin-top: 1.5rem;
    }

    .html-document__group-title {
        font-size: 1.3rem;
    }

    .html-document__toggle {
        padding: 0.8rem 2.7rem 0.8rem 0.8rem;
    }

    .html-document__content {
        padding: 0.85rem;
    }

    .html-document__group-number {
        min-width: 1.7rem;
    }

    .html-document__section-number {
        min-width: 2.5rem;
        margin-right: 0.35rem;
    }

}


/* ----- RGPD ----- */

/* Bloc 190 - RGPD */
/* ============================================================
   Porte d’entrée juridique / panneau cookies techniques
   ============================================================ */

.site-privacy-gate {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15000;

    width: 100%;
    padding: 1rem 1.25rem;

    background: #fdfe04;
    color: #222;

    border-top: 2px solid rgba(0, 0, 0, 0.18);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.24);

    transform: translateY(110%);
    transition: transform 0.45s ease;
}

.site-privacy-gate--visible {
    transform: translateY(0);
}

.site-privacy-gate__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem;

    max-width: var(--site-max-width, 1180px);
    margin: 0 auto;
}

.site-privacy-gate__illustration {
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-privacy-gate__image {
    display: block;
    width: 80px;
    max-width: 100%;
    height: auto;
}

.site-privacy-gate__content {
    min-width: 0;
}

.site-privacy-gate__title {
    margin: 0 0 0.5rem;
    color: #222;
    font-size: 1.2rem;
    line-height: 1.25;
}

.site-privacy-gate__content p {
    margin: 0.35rem 0;
    line-height: 1.45;
}

.site-privacy-gate__content a {
    color: #7b1d0f;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.site-privacy-gate__actions {
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-privacy-gate__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 0.7rem 1.35rem;

    border: 0;
    border-radius: 999px;

    background: #fe6645;
    color: #fff;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.24);

    font: inherit;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.site-privacy-gate__button:hover {
    transform: translateY(-2px);
    filter: brightness(0.96);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

.site-privacy-gate__button:focus-visible {
    outline: 3px solid #222;
    outline-offset: 3px;
}


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

@media (max-width: 768px) {
    .site-privacy-gate {
        padding: 0.9rem;
    }

    .site-privacy-gate__inner {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        text-align: center;
    }

    .site-privacy-gate__image {
        width: 58px;
    }

    .site-privacy-gate__content p {
        margin: 0.3rem 0;
    }

    .site-privacy-gate__actions {
        justify-content: center;
    }
}


/* ----- Login Bar ----- */

/* Bloc 210 - Login Bar */
/* ============================================================
   SITE LOGIN BAR - CHARTE / AJUSTEMENTS CLIENT
   Généré depuis le BO dans css_generated/css_perso.css
   ============================================================ */

.site-login {
    display: block;
    background: var(--color-login-bg, #f4f4f4);
    border-bottom: 1px solid var(--color-login-border, #dddddd);
    font-size: 14px;
}

.site-login__inner {
    justify-content: flex-end;
    gap: 12px;
    padding: 6px 0;
}

.site-login__label {
    color: var(--color-login-label, #555555);
    font-weight: 600;
    white-space: nowrap;
}

.site-login__form {
    gap: 6px;
}

.site-login__input {
    width: 120px;
    padding: 4px 8px;
    border: 1px solid var(--color-login-input-border, #cccccc);
    border-radius: 4px;
    background: var(--color-login-input-bg, #ffffff);
    color: var(--color-login-input-text, #222222);
    font-size: 13px;
}

.site-login__button {
    padding: 4px 10px;
    border: 1px solid var(--color-login-button-border, #2f6b3f);
    border-radius: 4px;
    background: var(--color-login-button-bg, #2f6b3f);
    color: var(--color-login-button-text, #ffffff);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.site-login__button:hover {
    background: var(--color-login-button-bg-hover, #245432);
}

@media (max-width: 640px) {
    .site-login__inner {
        justify-content: center;
        flex-wrap: wrap;
    }

    .site-login__form {
        flex-wrap: wrap;
        justify-content: center;
    }

    .site-login__input {
        width: 130px;
    }
}


/* ----- CarouPub ----- */

/* Bloc 250 - CarouPub */
/* ============================================================
   PUB BAS / LOGO STRIP - Swiper
   Base simple responsive
   ============================================================ */

.site-pub-carousel {
    display: flex;
    justify-content: center;
}

.site-logo-strip {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    padding: 18px 24px;
    overflow: hidden;
}

.site-logo-strip__slide {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-logo-strip__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.site-logo-strip__image {
    max-width: 130px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Tablette / petit écran */
@media (max-width: 992px) {
    .site-logo-strip {
        padding: 16px 18px;
    }

    .site-logo-strip__image {
        max-width: 115px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .site-logo-strip {
        padding: 14px 12px;
    }

    .site-logo-strip__image {
        max-width: 95px;
    }
}

/* Très petit mobile */
@media (max-width: 480px) {
    .site-logo-strip {
        padding: 12px 8px;
    }

    .site-logo-strip__image {
        max-width: 80px;
    }
}