/* =========================================================================
   Coteaux — Accessibilité
   Deux shortcodes : [coteaux_accessibility_pc] et [coteaux_accessibility_mobile]
   peuvent cohabiter sur la même page (headers PC / mobile distincts).
   ========================================================================= */

.coteaux-a11y,
.coteaux-a11y * {
    box-sizing: border-box;
}

.coteaux-a11y {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* ------------------------------------------------------------------ Trigger */

.coteaux-a11y__trigger {
    background: transparent !important;
    border: 0 !important;
    padding: 4px !important;
    margin: 0 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    color: inherit !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.coteaux-a11y__trigger:focus-visible {
    outline: 2px solid #244921 !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}

.coteaux-a11y__icon {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    transition: opacity .2s ease !important;
}

.coteaux-a11y__close-text {
    display: none !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: #244921 !important;
}

/* Variante mobile : "Fermer" en doré pour matcher le menu nav. */
.coteaux-a11y__close-text--mobile {
    color: #D5A137 !important;
    font-size: 20px !important;
}

@media (min-width: 768px) {
    .coteaux-a11y__icon { width: 26px !important; height: 26px !important; }
    .coteaux-a11y__close-text { font-size: 18px !important; }
}

@media (min-width: 1024px) {
    .coteaux-a11y__icon { width: 28px !important; height: 28px !important; }
    .coteaux-a11y__close-text { font-size: 20px !important; }
}

/* État ouvert : icône → "Fermer" (PC + mobile, comme le menu nav). */
.coteaux-a11y.is-open .coteaux-a11y__icon {
    display: none !important;
}

.coteaux-a11y.is-open .coteaux-a11y__close-text {
    display: inline-block !important;
}

/* ------------------------------------------------------------------ Panel PC */

.coteaux-a11y__panel--pc {
    position: absolute !important;
    top: calc(100% + 14px) !important;
    right: 0 !important;
    min-width: 320px !important;
    max-width: 360px !important;
    background: #f7eddb !important;
    border-radius: 12px !important;
    padding: 22px 24px !important;
    box-shadow: 0 12px 30px rgba(36, 73, 33, .15) !important;
    z-index: 999 !important;
    opacity: 0 !important;
    transform: translateY(-6px) !important;
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.coteaux-a11y__panel--pc.is-open {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear 0s !important;
}

/* -------------------------------------------------------------- Panel mobile */

.coteaux-a11y__panel--mobile {
    position: fixed !important;
    top: var(--coteaux-a11y-top, 0) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100vw !important;
    max-height: 100vh !important;
    background: #f7eddb !important;
    z-index: 999 !important;
    overflow-y: auto !important;
    transform: translateY(-100%) !important;
    transition: transform .35s ease, visibility 0s linear .35s !important;
    visibility: hidden !important;
    pointer-events: none !important;
    padding: 0 !important;
}

.coteaux-a11y__panel--mobile.is-open {
    transform: translateY(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: transform .35s ease, visibility 0s linear 0s !important;
}

.coteaux-a11y__panel-inner {
    padding: 110px 28px 40px !important;
}

@media (min-width: 768px) {
    .coteaux-a11y__panel-inner { padding: 50px 36px 48px !important; }
}

@media (min-width: 1024px) {
    .coteaux-a11y__panel-inner { padding: 48px 40px 52px !important; }
}

.coteaux-a11y__close:focus-visible {
    outline: 2px solid #D5A137 !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}

/* ----------------------------------------------------------------- Switches */

.coteaux-a11y__panel-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.coteaux-a11y__option {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

@media (min-width: 768px) {
    .coteaux-a11y__panel-body { gap: 14px !important; }
    .coteaux-a11y__option { gap: 12px !important; }
}

@media (min-width: 1024px) {
    .coteaux-a11y__panel-body { gap: 18px !important; }
    .coteaux-a11y__option { gap: 14px !important; }
}

/* PC : libellé à gauche, switch à droite (alignés sur la droite). */
.coteaux-a11y__option--pc {
    justify-content: flex-end !important;
    text-align: right !important;
}

.coteaux-a11y__option--pc .coteaux-a11y__label {
    flex: 1 !important;
}

/* Mobile : switch à gauche, libellé à droite. */
.coteaux-a11y__option--mobile {
    justify-content: flex-start !important;
    text-align: left !important;
}

.coteaux-a11y__label {
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    color: #244921 !important;
}

@media (min-width: 768px) {
    .coteaux-a11y__label { font-size: 15px !important; }
}

@media (min-width: 1024px) {
    .coteaux-a11y__label { font-size: 16px !important; }
}

.coteaux-a11y__switch {
    position: relative !important;
    display: inline-block !important;
    width: 42px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

@media (min-width: 768px) {
    .coteaux-a11y__switch { width: 46px !important; height: 24px !important; }
}

@media (min-width: 1024px) {
    .coteaux-a11y__switch { width: 50px !important; height: 26px !important; }
}

.coteaux-a11y__switch input {
    position: absolute !important;
    opacity: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    cursor: pointer !important;
    z-index: 2 !important;
}

.coteaux-a11y__slider {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 26px !important;
    background: #244921 !important;
    transition: background .25s ease !important;
    cursor: pointer !important;
}

.coteaux-a11y__slider::before {
    content: "" !important;
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #f7eddb !important;
    transition: transform .25s ease, background .25s ease !important;
}

.coteaux-a11y__switch input:checked + .coteaux-a11y__slider::before {
    transform: translateX(20px) !important;
}

@media (min-width: 768px) {
    .coteaux-a11y__slider::before { width: 18px !important; height: 18px !important; }
    .coteaux-a11y__switch input:checked + .coteaux-a11y__slider::before {
        transform: translateX(22px) !important;
    }
}

@media (min-width: 1024px) {
    .coteaux-a11y__slider::before { width: 20px !important; height: 20px !important; }
    .coteaux-a11y__switch input:checked + .coteaux-a11y__slider::before {
        transform: translateX(24px) !important;
    }
}

/* PC + mobile : fond jaune quand le switch est activé pour marquer l'état. */
.coteaux-a11y__switch input:checked + .coteaux-a11y__slider {
    background: #D5A137 !important;
}

.coteaux-a11y__switch input:checked + .coteaux-a11y__slider::before {
    background: #f7eddb !important;
}

.coteaux-a11y__switch input:focus-visible + .coteaux-a11y__slider {
    box-shadow: 0 0 0 2px #D5A137 !important;
}

/* ----------------------------------------------- Body lock (mobile ouvert) */

body.coteaux-a11y-locked {
    overflow: hidden !important;
}

/* =========================================================================
   Effets d'accessibilité (appliqués via classes sur <body>)
   ========================================================================= */

/* =========================================================================
   Texte agrandi (larger-text)
   - Toute calligraphie Ephesis bascule en Syne (sans-serif) pour la lisibilité.
   - Les sélecteurs sont chaînés (.classe.classe) ou préfixés `html body` pour
     monter en spécificité au-delà des règles Elementor page-spécifiques type
     `.elementor-37 .elementor-element.elementor-element-XYZ`.
   ========================================================================= */

/* Corps de texte (paragraphes, listings, descriptions). */
html body.larger-text p,
html body.larger-text .elementor-widget-text-editor p,
html body.larger-text .jet-listing-dynamic-field__content,
html body.larger-text .elementor-widget-container span:not(.coteaux-a11y__label):not(.coteaux-a11y__close-text):not(.title-h1):not(.title-h2):not(.title-h2-white):not(.subtitle-domaine):not(.elementor-counter-number):not(.elementor-icon-list-text):not(.elementor-button-text) {
    font-size: 20px !important;
    line-height: 28px !important;
}

/* Titres Elementor.
   - h1 : non touché en desktop, ramené à 35px en mobile (base mobile ~32px).
   - h2 : 30px en desktop, 25px en mobile.
   - h3 : 28/24px. */
html body.larger-text h2.elementor-heading-title {
    font-size: 45px !important;
    line-height: 52px !important;
}
html body.larger-text h3.elementor-heading-title {
    font-size: 28px !important;
    line-height: 36px !important;
}

@media (max-width: 1023px) {
    html body.larger-text h1.elementor-heading-title {
        font-size: 35px !important;
        line-height: 42px !important;
    }
    html body.larger-text h2.elementor-heading-title {
        font-size: 25px !important;
        line-height: 32px !important;
    }
    html body.larger-text h3.elementor-heading-title {
        font-size: 24px !important;
        line-height: 30px !important;
    }
}

/* Spans calligraphiques dans les titres → Syne sans-serif, gros et lisible. */
html body.larger-text span.title-h1,
html body.larger-text span.title-h2,
html body.larger-text span.title-h2-white,
html body.larger-text .subtitle-domaine,
html body.larger-text .ue_title,
html body.larger-text .ue_title .subtitle-domaine {
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    font-style: normal !important;
}

@media (min-width: 1024px) {
    html body.larger-text span.title-h1 {
        font-size: 90px !important;
        line-height: 92px !important;
        top: 0 !important;
    }
    html body.larger-text span.title-h2,
    html body.larger-text span.title-h2-white,
    html body.larger-text .subtitle-domaine {
        font-size: 45px !important;
        line-height: 50px !important;
        top: 0 !important;
    }
}

@media (max-width: 1023px) {
    html body.larger-text span.title-h1 {
        font-size: 35px !important;
        line-height: 54px !important;
    }
    html body.larger-text span.title-h2,
    html body.larger-text span.title-h2-white,
    html body.larger-text .subtitle-domaine {
        font-size: 26px !important;
        line-height: 32px !important;
    }
}

/* Text-editor générique : Ephesis → Syne, 20px pour rester cohérent avec le corps de texte.
   On chaîne `.elementor-widget-text-editor.elementor-widget-text-editor` pour battre les
   règles ID de page (ex: `.elementor-14 .elementor-element-XXXX`). */
html body.larger-text .elementor-widget-text-editor.elementor-widget-text-editor p,
html body.larger-text .elementor-widget-text-editor.elementor-widget-text-editor strong,
html body.larger-text .elementor-widget-text-editor.elementor-widget-text-editor span {
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    font-style: normal !important;
    font-size: 20px !important;
    line-height: 28px !important;
}

/* Icon accordion (UltimateAddons) — titre `.ue_title` : 30px → 35px.
   On chaîne `.elementor-element .ue_title` pour battre la règle ID de page
   `.elementor-37 .elementor-element.elementor-element-XXX .ue_title`. */
html body.larger-text .elementor-element .ue_title,
html body.larger-text .elementor-widget .ue_title {
    font-size: 35px !important;
    line-height: 42px !important;
}

/* Cas spécifique f3b5fcd (text-editor calligraphique 53px → Syne 30px). */
html body.larger-text .elementor-element.elementor-element-f3b5fcd p,
html body.larger-text .elementor-element.elementor-element-f3b5fcd strong,
html body.larger-text .elementor-element.elementor-element-f3b5fcd span {
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    font-style: normal !important;
    font-size: 30px !important;
    line-height: 38px !important;
}

/* Heading widget avec Ephesis (cas type .elementor-element-0bb4ac8). */
html body.larger-text .elementor-widget-heading.elementor-widget-heading .elementor-heading-title {
    font-family: 'Syne', sans-serif !important;
    font-style: normal !important;
}

/* Boutons : 30px en desktop uniquement (mobile inchangé pour ne pas casser le layout). */
@media (min-width: 1024px) {
    html body.larger-text .elementor-button .elementor-button-text,
    html body.larger-text a.elementor-button .elementor-button-text,
    html body.larger-text button.elementor-button .elementor-button-text {
        font-size: 30px !important;
        line-height: 1.25 !important;
    }
}

/* Listes / liens / icon list. */
html body.larger-text .elementor-widget-container li a {
    font-size: 24px !important;
    line-height: 34px !important;
}
html body.larger-text span.elementor-icon-list-text {
    font-size: 22px !important;
    line-height: 32px !important;
}
html body.larger-text span.elementor-counter-number {
    font-size: 80px !important;
    line-height: 85px !important;
}

/* Module Coteaux Tabs : le sous-titre est en Ephesis (variable CSS) →
   on force Syne et on agrandit. Idem pour le titre. */
html body.larger-text .coteaux-tabs__title {
    font-family: 'Syne', sans-serif !important;
    font-size: 44px !important;
    line-height: 1.1 !important;
}
html body.larger-text .coteaux-tabs__subtitle {
    font-family: 'Syne', sans-serif !important;
    font-weight: 600 !important;
    font-size: 38px !important;
    line-height: 44px !important;
    margin-top: 0 !important;
}
@media (max-width: 768px) {
    html body.larger-text .coteaux-tabs__title {
        font-size: 38px !important;
    }
    html body.larger-text .coteaux-tabs__subtitle {
        font-size: 30px !important;
        line-height: 36px !important;
    }
}

/* Menu mobile Coteaux : si on l'agrandit, garder la lisibilité. */
html body.larger-text .coteaux-mm__title {
    font-size: 30px !important;
    line-height: 1.15 !important;
}
html body.larger-text .coteaux-mm__subtitle {
    font-family: 'Syne', sans-serif !important;
    font-weight: 600 !important;
    font-size: 30px !important;
    line-height: 1.1 !important;
}

/* Liens soulignés.
   Préfixé `html body` et on couvre les patterns Elementor (boutons, icon-list,
   text-editor) + le widget Coteaux Tabs (titres/sous-titres des onglets cliquables)
   pour battre les règles `.elementor-element-XXX a { text-decoration: none }`. */
html body.underline-links a,
html body.underline-links a:link,
html body.underline-links a:visited,
html body.underline-links a:hover,
html body.underline-links a:focus,
html body.underline-links a.elementor-button,
html body.underline-links a.elementor-button .elementor-button-text,
html body.underline-links .elementor-button-link,
html body.underline-links .elementor-widget-button a,
html body.underline-links .elementor-widget-text-editor a,
html body.underline-links .elementor-icon-list-item a,
html body.underline-links .elementor-icon-list-item a .elementor-icon-list-text,
html body.underline-links .elementor-widget-container a,
html body.underline-links .jet-listing-dynamic-link__link {
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
}

/* Widget Coteaux Contact-Side (téléphone / adresse / email) :
   chaque item est un <a> qui contient un <div><div><p><span>texte</span></p></div></div>.
   Comme l'<a> contient des descendants block-level, text-decoration ne traverse pas
   les boîtes block — il faut donc cibler directement les <p>/<span> qui portent le texte. */
html body.underline-links a.coteaux-contact-side__item .coteaux-contact-side__value,
html body.underline-links a.coteaux-contact-side__item .coteaux-contact-side__value p,
html body.underline-links a.coteaux-contact-side__item .coteaux-contact-side__value span {
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
}

/* Widget Coteaux Tabs : les onglets sont des <button>, donc la règle générique
   sur `a` ne les attrape pas. On souligne le titre et le sous-titre des 3 items
   pour signaler qu'ils sont cliquables. Spécificité haute via la chaîne complète
   `html body.underline-links .coteaux-tabs .coteaux-tabs__tab .coteaux-tabs__title`. */
html body.underline-links .coteaux-tabs .coteaux-tabs__tab .coteaux-tabs__title,
html body.underline-links .coteaux-tabs .coteaux-tabs__tab .coteaux-tabs__subtitle,
html body.underline-links .coteaux-tabs .coteaux-tabs__tab .coteaux-tabs__label,
html body.underline-links button.coteaux-tabs__tab .coteaux-tabs__title,
html body.underline-links button.coteaux-tabs__tab .coteaux-tabs__subtitle {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 4px !important;
    text-decoration-color: currentColor !important;
}

/* Les filtres CSS (inverted-contrast / enhanced-contrast) sont injectés
   dynamiquement par le JS pour pouvoir composer plusieurs filtres sur <html>. */