/*
Theme Name: Twal Builder
Theme URI: https://www.twalmedia.com/
Author: TwalMedia
Author URI: https://www.twalmedia.com/
Description: Thème constructeur WordPress léger basé sur des sections modulaires, conçu pour des sites simples à administrer, maintenables et réutilisables.
Version: 1.0.8.14
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
Text Domain: twal
*/

/* Convention TWAL :
 * .tw-composant | .tw-composant_element | .tw-composant_variante
 * --tw-composant_propriete
 * Tiret = nom composé ; underscore = élément, variante ou propriété.
 * Pas de __ ni de -- dans les classes TWAL.
 * Exceptions : états .is-* et classes fournies par des bibliothèques / plugins externes.
 */

/*=========================================================
 A — BARRE D’ADMINISTRATION WORDPRESS
 =========================================================*/
#wp-admin-bar-wpseo-menu,li#wp-admin-bar-duplicate-post,
#wp-admin-bar-comments,
#wp-admin-bar-updates,
#wp-admin-bar-customize,
#wp-admin-bar-edit{
	display: none!important;
}

/*=========================================================
 B — SOCLE GLOBAL ET VARIABLES
 =========================================================*/

:root {

    /*---------------------------------------------------------
     B.1 — Couleurs globales
     ---------------------------------------------------------*/

    --tw-color_primary: #455538;
    --tw-color_primary-light: #6B7A5F;
    --tw-color_primary-dark: #2F3B27;

    --tw-color_accent: #B98552;
    --tw-color_accent-dark: #8F623D;

    --tw-color_text: #2F302A;
    --tw-color_muted: rgba(47, 48, 42, .72);
    --tw-color_heading: #25251F;
    --tw-color_border: rgba(69, 85, 56, .12);

    /*---------------------------------------------------------
     B.2 — Hero
     ---------------------------------------------------------*/

    --tw-hero_bg: #455538;
    --tw-hero-secondaire_bg: #D9BC82;
    --tw-hero_overline-color: #ffffff;
    --tw-hero_title-color: #ffffff;
    --tw-hero_text-color: #ffffff;

    /*---------------------------------------------------------
     B.3 — Sections paires
     ---------------------------------------------------------*/

    --tw-section-even_bg: #FCF8F1;
    --tw-section-even_inner-bg: #FFFAF2;
    --tw-section-even_overline-color: var(--tw-color_primary);
    --tw-section-even_title-color: var(--tw-color_heading);
    --tw-section-even_lead-color: var(--tw-color_text);
    --tw-section-even_text-color: var(--tw-color_text);

    /*---------------------------------------------------------
     B.4 — Sections impaires
     ---------------------------------------------------------*/

    --tw-section-odd_bg: #F5F1EA;
    --tw-section-odd_inner-bg: #FFFAF2;
    --tw-section-odd_overline-color: var(--tw-color_primary);
    --tw-section-odd_title-color: var(--tw-color_heading);
    --tw-section-odd_lead-color: var(--tw-color_text);
    --tw-section-odd_text-color: var(--tw-color_text);

    /*---------------------------------------------------------
     B.5 — Valeurs génériques des sections
     ---------------------------------------------------------*/

    --tw-section_inner-bg: #FFFAF2;
    --tw-section_overline-color: var(--tw-color_primary);
    --tw-section_title-color: var(--tw-color_heading);
    --tw-section_lead-color: var(--tw-color_text);
    --tw-section_text-color: var(--tw-color_text);

    /*---------------------------------------------------------
     B.6 — Pied de page
     ---------------------------------------------------------*/

    --tw-footer_bg: var(--tw-hero_bg);
    --tw-footer_color: var(--tw-hero_text-color);
    --tw-footer_link-color: var(--tw-hero_text-color);

    /*---------------------------------------------------------
     B.7 — Boutons génériques
     ---------------------------------------------------------*/

    --tw-button_bg: rgba(255, 255, 255, 1);
    --tw-button_bg-hover: #ffffff;
    --tw-button_color: var(--tw-color_primary);
    --tw-button_icon-bg: var(--tw-color_primary);
    --tw-button_icon-color: #ffffff;
    --tw-button_shadow: 0 10px 24px rgba(0, 0, 0, .06);
    --tw-button_shadow-hover: 0 14px 30px rgba(0, 0, 0, .10);

    /*---------------------------------------------------------
     B.8 — Typographie
     ---------------------------------------------------------*/

    --tw-font_body: 'Inter', system-ui, sans-serif;
    --tw-font_title: 'Lora', Georgia, serif;

    /* Les réglages avancés sont injectés par TWAL après enregistrement. */

    /* B.8.1 — Graisses. */
    --tw-weight_x-light: 300;
    --tw-weight_light: 400;
    --tw-weight_strong: 500;
    --tw-weight_x-strong: 600;
    --tw-weight_xx-strong: 700;

    /*---------------------------------------------------------
     B.9 — Bordures et rayons
     ---------------------------------------------------------*/

    --tw-button_radius: 10px;
    --tw-image_radius: 10px;
    --tw-action_radius: 10px;

    /*---------------------------------------------------------
     B.10 — Espacements
     ---------------------------------------------------------*/

    --tw-space_xs: 4px;
    --tw-space_sm: 8px;
    --tw-space_md: 12px;
    --tw-space_lg: 16px;
    --tw-space_xl: 20px;
    --tw-space_2xl: 24px;

    /*---------------------------------------------------------
     B.11 — Cartes
     ---------------------------------------------------------*/

    --tw-card_bg: #FCF8F1;
    --tw-card_border-color: #EADFCE;
    --tw-card_title-color: #7A4B25;
    --tw-card_title-font-size: 1.35rem;
    --tw-card_color: #333333;

    /*---------------------------------------------------------
     B.12 — Gaps
     ---------------------------------------------------------*/

    --tw-gap_xs: 6px;
    --tw-gap_s: 8px;
    --tw-gap_m: 10px;
    --tw-gap_l: 12px;
    --tw-gap_xl: 2em;

    /*---------------------------------------------------------
     B.13 — Dimensions globales
     ---------------------------------------------------------*/

    --tw-container_width: 1180px;
    --tw-container_max: 1200px;
}

/*---------------------------------------------------------
 B.14 — Compatibilité provisoire TWAL Collections
 ---------------------------------------------------------*/

/* Ces classes sont réellement produites par le moteur TWCOL.
 * Elles restent actives tant que le plugin ne fournit pas son CSS front. */

h3.twcol-item_title {
    padding: 10px 0 10px 10px;
    border-bottom: 1px solid var(--tw-card_title-color) !important;
    color: var(--tw-card_title-color) !important;
    font-size: var(--tw-card_title-font-size) !important;
}

.twcol-item {
    padding: var(--tw-space_md);
    border: 1px solid var(--tw-card_border-color);
    border-radius: var(--tw-space_sm);
    background: var(--tw-card_bg);
}

.tw-item_subtitle {
    font-size: clamp(1.4rem, 2vw, 2rem) !important;
}

/*---------------------------------------------------------
 B.15 — Hero
 Le composant Hero et ses variables sont désormais documentés et chargés
 depuis /modules/hero/assets/hero.css.
 ---------------------------------------------------------*/

/*---------------------------------------------------------
 B.16 — Dimensions et typographie des sections
 ---------------------------------------------------------*/

.tw-section {
    --tw-section_container: 1180px;
    --tw-media_radius: 1.35rem;
    --tw-gallery_radius: .85rem;
    --tw-section_gap: clamp(2rem, 4vw, 4rem);

    /* B.16.1 — Titre. */
    --tw-section_title-font-size: clamp(2rem, 2.6vw, 2.9rem);
    --tw-section_title-font-weight: var(--tw-font-title_weight, var(--tw-weight_strong));

    /* B.16.2 — Accroche. */
    --tw-section_accroche-font-weight: 600;
    --tw-section_accroche-max-width: 65ch;
}

/*=========================================================
 C — BASE ET STYLES GLOBAUX
 =========================================================*/

/*---------------------------------------------------------
 C.1 — Typographie et normalisation
 ---------------------------------------------------------*/

body {
    font-family: var(--tw-font_body);
    font-size: var(--tw-font-body_size, 1rem);
    font-weight: var(--tw-font-body_weight, 400);
    line-height: var(--tw-font-body_line-height, normal);
    letter-spacing: var(--tw-font-body_letter-spacing, normal);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
video,
iframe {
    max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--tw-font_title);
    font-weight: var(--tw-font-title_weight, revert);
    line-height: var(--tw-font-title_line-height, normal);
    letter-spacing: var(--tw-font-title_letter-spacing, normal);
}

strong {
	font-weight: 600;
}
/*---------------------------------------------------------
 C.2 — Médias de base
 ---------------------------------------------------------*/

.tw-media img,
.tw-gallery img {
    display: block;
    width: 100%;
    height: auto;
}

/*=========================================================
 D — HERO
 Le CSS du Hero est chargé depuis /modules/hero/assets/hero.css.
 =========================================================*/

/*=========================================================
 E — SECTIONS
 =========================================================*/

/*---------------------------------------------------------
 E.1 — Structure générale
 ---------------------------------------------------------*/

.tw-section {
    --tw-section_padding-y: 3rem;
    --tw-section_separator-gap: 0rem;
    --tw-section_separator-reserve: 0rem;
    --tw-section_separator-space-top: 0rem;
    --tw-section_separator-space-bottom: 0rem;
    --tw-section_separator-min-padding: .75rem;
    --tw-section_separator-color: transparent;
    --tw-section_separator-line-color: var(--tw-color_border);

    position: relative;
    width: 100%;
    padding-top: calc(var(--tw-section_padding-y) + var(--tw-section_separator-space-top));
    padding-bottom: calc(var(--tw-section_padding-y) + var(--tw-section_separator-space-bottom));
    color: var(--tw-section_text-color);
}

.tw-section_spacing-compact {
    --tw-section_padding-y: 2rem;
}

.tw-section_spacing-normal {
    --tw-section_padding-y: 3rem;
}

.tw-section_spacing-large {
    --tw-section_padding-y: clamp(4.5rem, 6vw, 6rem);
}

/*---------------------------------------------------------
 E.2 — Alternance explicite des couleurs
 ---------------------------------------------------------*/

/* La première section éditoriale située sous le Hero est paire. */
.tw-section_standard.tw-section_even,
.tw-section_standard:not(.tw-section_even):not(.tw-section_odd):nth-of-type(even) {
    --tw-section_inner-bg: var(--tw-section-even_inner-bg);
    --tw-section_overline-color: var(--tw-section-even_overline-color);
    --tw-section_title-color: var(--tw-section-even_title-color);
    --tw-section_lead-color: var(--tw-section-even_lead-color);
    --tw-section_text-color: var(--tw-section-even_text-color);
    --tw-section_separator-color: var(--tw-section-odd_bg);

    background: var(--tw-section-even_bg);
}

.tw-section_standard.tw-section_odd,
.tw-section_standard:not(.tw-section_even):not(.tw-section_odd):nth-of-type(odd) {
    --tw-section_inner-bg: var(--tw-section-odd_inner-bg);
    --tw-section_overline-color: var(--tw-section-odd_overline-color);
    --tw-section_title-color: var(--tw-section-odd_title-color);
    --tw-section_lead-color: var(--tw-section-odd_lead-color);
    --tw-section_text-color: var(--tw-section-odd_text-color);
    --tw-section_separator-color: var(--tw-section-even_bg);

    background: var(--tw-section-odd_bg);
}

/*---------------------------------------------------------
 E.3 — Séparateurs de sections
 ---------------------------------------------------------*/

.tw-section_separator-curve {
    isolation: isolate;
    overflow: hidden;
    overflow: clip;
}

.tw-section_separator-depth-light {
    --tw-section_separator-height: clamp(5rem, 7vw, 8rem);
    --tw-section_separator-width: 110%;
    --tw-section_separator-top-offset: -70%;
    --tw-section_separator-bottom-offset: 70%;
    --tw-section_separator-reserve: clamp(1.5rem, 2.1vw, 2.4rem);
}

.tw-section_separator-depth-normal {
    --tw-section_separator-height: clamp(7rem, 10vw, 12rem);
    --tw-section_separator-width: 110%;
    --tw-section_separator-top-offset: -67%;
    --tw-section_separator-bottom-offset: 67%;
    --tw-section_separator-reserve: clamp(2.3rem, 3.3vw, 4rem);
}

.tw-section_separator-depth-pronounced {
    --tw-section_separator-height: clamp(10rem, 14vw, 16rem);
    --tw-section_separator-width: 115%;
    --tw-section_separator-top-offset: -64%;
    --tw-section_separator-bottom-offset: 64%;
    --tw-section_separator-reserve: clamp(3.6rem, 5vw, 5.8rem);
}

/* Dégagement visuel indépendant de la profondeur de la courbe. */
.tw-section_separator-gap-tight {
    --tw-section_separator-gap: .5rem;
}

.tw-section_separator-gap-normal {
    --tw-section_separator-gap: 1.25rem;
}

.tw-section_separator-gap-large {
    --tw-section_separator-gap: 2rem;
}

/*
 * La section qui porte la courbe réserve la partie visible de l’ellipse
 * + le dégagement. La section voisine compense cette réserve afin que
 * la distance visuelle entre le contenu et le sommet de la courbe soit
 * identique de part et d’autre de la jonction.
 *
 * Le max() garantit qu’une courbe très profonde ne puisse jamais réduire
 * le padding réel de la section voisine sous la valeur de sécurité.
 */
.tw-section_separator-own-top {
    --tw-section_separator-space-top: calc(
        var(--tw-section_separator-reserve) + var(--tw-section_separator-gap)
    );
}

.tw-section_separator-own-bottom {
    --tw-section_separator-space-bottom: calc(
        var(--tw-section_separator-reserve) + var(--tw-section_separator-gap)
    );
}

.tw-section_separator-neighbor-top {
    --tw-section_separator-space-top: max(
        calc(var(--tw-section_separator-gap) - var(--tw-section_separator-reserve)),
        calc(var(--tw-section_separator-min-padding) - var(--tw-section_padding-y))
    );
}

.tw-section_separator-neighbor-bottom {
    --tw-section_separator-space-bottom: max(
        calc(var(--tw-section_separator-gap) - var(--tw-section_separator-reserve)),
        calc(var(--tw-section_separator-min-padding) - var(--tw-section_padding-y))
    );
}

.tw-section_separator {
    position: absolute;
    z-index: 0;
    left: 50%;
    display: block;
    width: 100%;
    pointer-events: none;
}

.tw-section_separator-line > .tw-section_separator {
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--tw-section_separator-line-color);
}

.tw-section_separator-curve > .tw-section_separator {
    width: var(--tw-section_separator-width, 110%);
    height: var(--tw-section_separator-height, 10rem);
    border-radius: 50%;
    background: var(--tw-section_separator-color);
}

.tw-section_separator-top {
    top: 0;
}

.tw-section_separator-bottom {
    bottom: 0;
}

.tw-section_separator-curve > .tw-section_separator-top {
    transform: translate(-50%, var(--tw-section_separator-top-offset, -67%));
}

.tw-section_separator-curve > .tw-section_separator-bottom {
    transform: translate(-50%, var(--tw-section_separator-bottom-offset, 67%));
}

/* Le premier séparateur sous le Hero reprend la couleur du Hero. */
.tw-hero + .tw-section_even.tw-section_separator-curve > .tw-section_separator-top {
    background: var(--tw-hero_bg);
}

.tw-section_separator-shadow > .tw-section_separator-top {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .10);
}

.tw-section_separator-shadow > .tw-section_separator-bottom {
    box-shadow: 0 -8px 20px rgba(0, 0, 0, .10);
}

/*---------------------------------------------------------
 E.4 — Conteneur intérieur
 ---------------------------------------------------------*/

.tw-section_inner {
    position: relative;
    z-index: 1;
    width: min(var(--tw-section_container), calc(100% - 2.5rem));
    max-width: var(--tw-container_width);
    margin-inline: auto;
    padding-block: clamp(1rem, 1vw, 1rem);
    padding-inline: 1.25rem;
    border: 1px solid var(--tw-color_border);
    border-radius: 20px;
    background: var(--tw-section_inner-bg);
}

/*---------------------------------------------------------
 E.5 — En-tête éditorial
 ---------------------------------------------------------*/

.tw-section_header {
    position: relative;
    margin: 10px 0;
    padding-bottom: 10px;
}

.tw-section_surtitre {
    color: var(--tw-section_overline-color, var(--tw-color_primary));
}

.tw-section_title {
    margin: 0 0 .75rem;
    color: var(--tw-section_title-color);
    font-size: var(--tw-section_title-font-size);
    font-weight: var(--tw-section_title-font-weight);
    line-height: var(--tw-font-title_line-height, 1.05);
    letter-spacing: var(--tw-font-title_letter-spacing, normal);
}

.tw-section_accroche {
    max-width: var(--tw-section_accroche-max-width);
    color: var(--tw-section_lead-color);
    font-size: 1rem;
    font-weight: var(--tw-section_accroche-font-weight);
    line-height: 1.65;
}

/*---------------------------------------------------------
 E.6 — Lien d'édition
 ---------------------------------------------------------*/

.tw-section-edit-link {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid #c6c6c6;
    border-radius: 999px;
    background: rgba(255, 255, 255, .85);
    color: #2f3f2b;
    font-size: .95rem;
    text-decoration: none;
    transform: translateY(-4px);
    transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

.tw-section:hover .tw-section-edit-link {
    opacity: 1;
    transform: translateY(0);
}

.tw-section-edit-link:hover {
    background: #fff;
}

/*---------------------------------------------------------
 E.7 — Bouton générique « Découvrir »
 ---------------------------------------------------------*/

.tw-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    padding: .8rem 1.15rem .8rem 1.35rem;
    border: none;
    border-radius: var(--tw-action_radius);
    background: var(--tw-button_bg);
    color: var(--tw-button_color);
    box-shadow: var(--tw-button_shadow);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}


.tw-button::after {
    content: "→";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    background: var(--tw-button_icon-bg);
    color: var(--tw-button_icon-color);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1;
    transform: translateX(0);
    transition: transform .2s ease;
}

.tw-button:hover,
.tw-button:focus-visible {
    transform: translateY(-2px);
    background: var(--tw-button_bg-hover);
    box-shadow: var(--tw-button_shadow-hover);
    color: var(--tw-color_primary-dark);
}

.tw-button:hover::after,
.tw-button:focus-visible::after {
    transform: translateX(.18rem);
}

button.tw-button {
    background-color: var(--tw-color_primary);
    color: white;
    cursor: pointer;
    transition: background-color .3s ease;
}

/*---------------------------------------------------------
 E.8 — Disposition média / texte
 ---------------------------------------------------------*/

.tw-layout {
    display: grid;
    gap: var(--tw-section_gap);
    align-items: start;
}

.tw-layout_50-50 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Le média occupe 48 % et le texte 52 % pour préserver la lisibilité. */
.tw-layout_45-55 {
    --tw-layout_col-1: 48fr;
    --tw-layout_col-2: 52fr;
    grid-template-columns:
        minmax(0, var(--tw-layout_col-1))
        minmax(0, var(--tw-layout_col-2));
}

/* Lorsque le texte est à gauche, les proportions sont inversées. */
.tw-layout_text-media.tw-layout_45-55 {
    --tw-layout_col-1: 52fr;
    --tw-layout_col-2: 48fr;
}

.tw-layout_55-45 {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
}

.tw-layout_media-text .tw-layout_media {
    order: 1;
}

.tw-layout_media-text .tw-layout_content {
    order: 2;
}

.tw-layout_text-media .tw-layout_content {
    order: 1;
}

.tw-layout_text-media .tw-layout_media {
    order: 2;
}

.tw-layout_media,
.tw-layout_content {
    min-width: 0;
}

.tw-layout_content {
    color: var(--tw-section_text-color);
    font-size: clamp(1rem, 1.15vw, 1.12rem);
    line-height: 1.75;
}

.tw-layout_content h3,
.tw-layout_content h2,
.tw-section_inner h3,
.tw-section_inner h2 {
    margin: 0 0 .65rem;
    color: var(--tw-section_title-color);
    font-size: clamp(1.2rem, 1.6vw, 1.2rem);
    font-weight: 400;
    line-height: 1.15;
}

.tw-section_inner h2.tw-section_title {
    font-size: clamp(1.4em, 1.8vw, 1.6em);
    font-weight: 500;
}

.tw-layout_content h3:not(:first-child) {
    margin-top: 1.6rem;
}

.tw-layout_content > h2 {
    margin-top: 0;
    padding-top: 0;
}

.tw-layout_content p {
    margin: 0 0 1.2rem;
}

.tw-layout_content > *:last-child {
    margin-bottom: 0;
}

/*---------------------------------------------------------
 E.9 — Présentation éditoriale : contenu + sidebar
 ---------------------------------------------------------*/

.tw-editorial-layout {
    display: grid;
    gap: var(--tw-section_gap);
    align-items: start;
}

/* Le contenu occupe environ deux tiers de la largeur utile. */
.tw-editorial-layout_2-1 {
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
}

/* Le contenu est plus prédominant, la sidebar reste volontairement étroite. */
.tw-editorial-layout_3-1 {
    grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr);
}

/* Une sidebar vide ne doit pas réserver une colonne inutile. */
.tw-editorial-layout_no-sidebar {
    grid-template-columns: minmax(0, 1fr);
}

.tw-editorial-content,
.tw-editorial-gallery,
.tw-sidebar-editoriale {
    min-width: 0;
}

/* Sur desktop, contenu et sidebar partagent la première ligne. */
.tw-editorial-content {
    grid-column: 1;
    grid-row: 1;
}

.tw-sidebar-editoriale {
    grid-column: 2;
    grid-row: 1;
}

/* La galerie reste pleine largeur sous les deux colonnes sur desktop. */
.tw-editorial-gallery {
    grid-column: 1 / -1;
    grid-row: 2;
}

/* Lorsque la Sidebar possède sa propre image, l'image à la une ouvre le contenu éditorial. */
.tw-editorial-featured-image {
    width: 100%;
    margin: 0 0 clamp(1.5rem, 2.5vw, 2.5rem);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--tw-section_border-radius, 0);
}

.tw-editorial-featured-image_img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Le média éditorial conserve le cadre 16/9 sur écran large. */
.tw-editorial-featured-media .tw-editorial-featured-media_cover {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.tw-editorial-featured-media .tw-cover-image-static,
.tw-editorial-featured-media .tw-cover-image-link,
.tw-editorial-featured-media .tw-cover-image-static img,
.tw-editorial-featured-media .tw-cover-image-link img {
    width: 100%;
    height: 100%;
}

.tw-editorial-featured-media .tw-cover-image-static img,
.tw-editorial-featured-media .tw-cover-image-link img {
    object-fit: cover;
}

/* Une vidéo portrait reste contenue dans le poster 16/9 sur desktop. */
.tw-editorial-featured-media_video .tw-video_local video {
    background: transparent;
    object-fit: contain;
}

.tw-sidebar-editoriale {
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 2vw, 2rem);
}

.tw-sidebar-editoriale_block {
    min-width: 0;
}

.tw-sidebar-editoriale_block + .tw-sidebar-editoriale_block {
    padding-top: clamp(1rem, 1.6vw, 1.5rem);
    border-top: 1px solid var(--tw-section_border-color, rgba(0, 0, 0, .12));
}

.tw-sidebar-editoriale_title {
    margin: 0 0 .75rem;
    font-size: clamp(1.05rem, 1.25vw, 1.2rem);
    font-weight: 500;
    line-height: 1.2;
}

.tw-sidebar-editoriale_image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--tw-media_radius, 1.4rem);
}

.tw-sidebar-editoriale_links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tw-sidebar-editoriale_links li + li {
    margin-top: .65rem;
}

.tw-sidebar-editoriale_links a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}

/*---------------------------------------------------------
 E.10 — Média principal
 ---------------------------------------------------------*/

.tw-media {
    width: 100%;
}

.tw-media > img,
.tw-media_image,
.tw-layout_media > img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--tw-media_radius, 1.4rem);
    object-fit: cover;
}

/*---------------------------------------------------------
 E.11 — Responsive Sections
 ---------------------------------------------------------*/

@media (max-width: 900px) {

    .tw-section {
        --tw-section_padding-y: clamp(2.5rem, 8vw, 4rem);
    }

    .tw-section_spacing-compact {
        --tw-section_padding-y: clamp(2rem, 6vw, 3rem);
    }

    .tw-section_spacing-normal {
        --tw-section_padding-y: clamp(2.5rem, 8vw, 4rem);
    }

    .tw-section_spacing-large {
        --tw-section_padding-y: clamp(3.5rem, 10vw, 5.5rem);
    }

    .tw-section_inner {
        width: min(100% - 1.5rem, var(--tw-section_container, 1180px));
        max-width: 100%;
        box-sizing: border-box;
    }

    .tw-section-edit-link {
        top: .5rem;
        left: .5rem;
        width: 1.75rem;
        height: 1.75rem;
        box-sizing: border-box;
    }

    .tw-layout,
    .tw-layout_50-50,
    .tw-layout_45-55,
    .tw-layout_55-45 {
        display: flex;
        flex-direction: column;
        gap: 1.75rem;
    }

    .tw-layout {
        align-items: stretch;
    }

    .tw-layout_media {
        order: 1 !important;
    }

    .tw-layout_content {
        order: 2 !important;
    }

    /* Le mode éditorial passe en une seule colonne sur tablette / mobile. */
    .tw-editorial-layout,
    .tw-editorial-layout_2-1,
    .tw-editorial-layout_3-1 {
        display: flex;
        flex-direction: column;
        gap: 1.75rem;
    }

    .tw-editorial-content {
        order: 1 !important;
    }

    .tw-editorial-gallery {
        order: 2 !important;
        width: 100%;
    }

    .tw-sidebar-editoriale {
        order: 3 !important;
        width: 100%;
    }
}

/*=========================================================
 F — GALERIE
 =========================================================*/

/*---------------------------------------------------------
 F.1 — Structure
 ---------------------------------------------------------*/

.tw-gallery {
    display: grid;
    grid-template-columns: repeat(var(--tw-gallery_cols, 4), minmax(0, 1fr));
    gap: .85rem;
}

/*---------------------------------------------------------
 F.2 — Position de la galerie
 ---------------------------------------------------------*/

.tw-gallery_under-image {
    margin-top: 1rem;
}

.tw-gallery_under-section {
    margin-top: clamp(2rem, 4vw, 3rem);
}

/*---------------------------------------------------------
 F.3 — Images
 ---------------------------------------------------------*/

.tw-gallery_item {
    position: relative;
    overflow: hidden;
    margin: 0;
    border-radius: var(--tw-gallery_radius, 1rem);
    background: #f3f3f3;
}

.tw-gallery_item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .25s ease;
}

.tw-gallery_item:hover img {
    transform: scale(1.035);
}

/*---------------------------------------------------------
 F.4 — Compteur d'images supplémentaires
 ---------------------------------------------------------*/

.tw-gallery_more {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .42);
    color: #fff;
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
}

/*---------------------------------------------------------
 F.5 — Images masquées accessibles à la lightbox
 ---------------------------------------------------------*/

.tw-gallery_hidden {
    display: none;
}

/*---------------------------------------------------------
 F.6 — Responsive
 ---------------------------------------------------------*/

@media (max-width: 900px) {
    .tw-gallery_limit-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .tw-gallery_cols-3,
    .tw-gallery_cols-4,
    .tw-gallery_cols-5,
    .tw-gallery_cols-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*=========================================================
 G — TRANSITIONS D’APPARITION
 =========================================================*/

:root {
    --tw-reveal_duration: 500ms;
    --tw-reveal_distance: 12px;
}

/*---------------------------------------------------------
 G.1 — État sûr par défaut
 ---------------------------------------------------------*/

/* Le contenu est visible par défaut : sans JavaScript, rien n'est masqué. */
.tw-reveal {
    opacity: 1;
    transform: none;
    transition:
        opacity var(--tw-reveal_duration) ease,
        transform var(--tw-reveal_duration) ease;
}

/*---------------------------------------------------------
 G.2 — Éléments situés sous la fenêtre
 ---------------------------------------------------------*/

.tw-reveal.is-reveal-pending {
    opacity: 0;
}

.tw-reveal_move-up.is-reveal-pending {
    transform: translateY(var(--tw-reveal_distance));
}

/*---------------------------------------------------------
 G.3 — Élément devenu visible
 ---------------------------------------------------------*/

.tw-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/*---------------------------------------------------------
 G.4 — Réduction des animations demandée par le système
 ---------------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {

    .tw-reveal,
    .tw-reveal.is-reveal-pending,
    .tw-reveal.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/*=========================================================
 H — VIDÉO
 Le CSS du lecteur vidéo est chargé depuis /assets/css/twal-video.css.
 =========================================================*/

/*=========================================================
 I — COMPATIBILITÉ TWAL COLLECTIONS — CONSERVÉE PROVISOIREMENT
 =========================================================*/

/* Liste des tarifs d’adhésion */
ul.twcol-adhesion__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Une ligne de tarif */
.twcol-adhesion__item {
    padding: 12px 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* Ligne principale : label à gauche, prix à droite */
.twcol-adhesion__main {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: baseline;

}

/* Nom du tarif */
.twcol-item__label {
    font-weight: 600;
}

/* Prix */
.twcol-item__price {
    font-weight: 800;
    white-space: nowrap;
}

/* Description sous le tarif */
.twcol-item__description {
    margin-top: 4px;
    font-size: 95%;
    color: var(--tw-color_muted);
}

/* Évite une marge parasite si la description contient un <p> */
.twcol-item__description p {
    margin: 0;
}

/*=========================================================
 J — UTILITAIRES GRID ET FLEX
 =========================================================*/

/*---------------------------------------------------------
 J.1 — Grille de base
 ---------------------------------------------------------*/
.tw-grid {
    display: grid;
    gap: var(--tw-space_lg); 	/* ajoute un espace régulier entre les éléments de la grille */
    align-items: start;			/* aligne les éléments en haut de leur cellule */
}

/*---------------------------------------------------------
 J.2 — Grille automatique responsive
 ---------------------------------------------------------*/
.tw-grid_auto {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

/*---------------------------------------------------------
 J.3 — Cartes de même hauteur
 ---------------------------------------------------------*/
.tw-grid_stretch {
    align-items: stretch;
}

.tw-grid_stretch > * {
    height: 100%;
}

/*---------------------------------------------------------
 J.4 — Grilles à colonnes fixes
 ---------------------------------------------------------*/
.tw-grid_1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.tw-grid_2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tw-grid_3, .gallery-columns-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tw-grid_4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tw-grid_5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tw-grid_6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/*---------------------------------------------------------
 J.5 — Utilitaires Flex
 ---------------------------------------------------------*/
/* À utiliser pour aligner des éléments sur une ligne ou en colonne : icône + texte, boutons, barre d’actions, etc. */
.tw-flex {
    display: flex;
    gap: var(--tw-space_md); /* ajoute un espace régulier entre les éléments flex */
}

.tw-flex_row { flex-direction: row; } 			/* Place les éléments horizontalement les uns à côté des autres  comportement par défaut mais la classe permet d'être explicite. */
.tw-flex_column { flex-direction: column; }	/* Place les éléments les uns sous les autres, verticalement.  */
.tw-flex_wrap { flex-wrap: wrap; }				/* Autorise les éléments à passer à la ligne. Très utile pour une liste de boutons ou de tags.*/
.tw-flex_nowrap { flex-wrap: nowrap; }			/* Empêche les éléments de passer à la ligne. Les éléments restent sur une seule ligne, même si l'espace est réduit.*/
.tw-flex_align-start { align-items: flex-start; }	/* Aligne les éléments en haut du conteneur. Utile lorsque les éléments n'ont pas la même hauteur. */
.tw-flex_align-center { align-items: center; }		 /* Centre les éléments verticalement dans la ligne. Utile pour aligner une icône avec un texte. */
.tw-flex_align-end { align-items: flex-end; }		/*  Aligne les éléments à droite. */
.tw-flex_justify-between { justify-content: space-between; } /* Répartit les éléments aux deux extrémités. */
.tw-flex_justify-center { justify-content: center; }
.tw-flex_justify-end { justify-content: flex-end; }

/*---------------------------------------------------------
 J.6 — Responsive des utilitaires
 ---------------------------------------------------------*/
@media (max-width: 768px) {
    .tw-grid_2,
    .tw-grid_3,
    .tw-grid_4,
    .tw-grid_5,
    .tw-grid_6 {
        grid-template-columns: 1fr;
    }
    .tw-flex_mobile-column {
        flex-direction: column;
        align-items: stretch;
    }
}

/*---------------------------------------------------------
 J.7 — Espacements des grilles
 ---------------------------------------------------------*/
.tw-gap_xs { gap: var(--tw-gap_xs); }
.tw-gap_s { gap: var(--tw-gap_s); }
.tw-gap_m { gap: var(--tw-gap_m); }
.tw-gap_l { gap: var(--tw-gap_l); }
.tw-gap_xl { gap: var(--tw-gap_xl); }

/*=========================================================
 K — PIED DE PAGE
 =========================================================*/

.tw-footer {
    padding: 2rem 1rem;
    border-top: 1px solid rgba(0,0,0,.08);
    font-size: .95rem;
	background: var(--tw-footer_bg);
}

.tw-footer_inner {
    max-width: var(--tw-container_max);
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    gap: .75rem;

	color: var(--tw-footer_color);
    text-align: center;
}

.tw-footer_copyright {
    margin: 0;
}
.tw-footer_copyright a {
	color: var(--tw-footer_link-color);
}
.tw-footer_legal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.25rem;
}

.tw-footer_legal-links a,
.tw-footer_backtop a {
	color: var(--tw-footer_link-color);
    text-decoration: none;
}

.tw-footer_legal-links a:hover,
.tw-footer_backtop a:hover {
    text-decoration: underline;
}

.tw-footer_backtop {
    margin: 0;
}
.tw-footer .material-symbols-outlined {
	font-size: 15px;
}

@media (min-width: 768px) {

    .tw-footer_inner {
        display: grid;
        grid-template-columns: 1fr auto auto;
        align-items: center;
        gap: 1rem;

        text-align: left;
    }

    .tw-footer_legal-links {
        justify-content: center;
    }

    .tw-footer_backtop {
        text-align: right;
    }

}

/*=========================================================
 L — RESPONSIVE COMPLÉMENTAIRE
 =========================================================*/

/*---------------------------------------------------------
 L.1 — Contenu complémentaire masqué sur mobile
 ---------------------------------------------------------*/

@media (max-width: 767px) {
    .tw-mobile-more_extended {
        display: none;
    }
}

/*=========================================================
 M — LISTES GÉNÉRIQUES ET COMPATIBILITÉ TWAL COLLECTIONS
 =========================================================*/
ul.liste-alignee {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.liste-alignee li {
    display: inline;
}

ul.liste-alignee li:not(:last-child)::after {
    content: ", ";
}

.twcol-listes-alignees {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: .35rem;
    align-items: baseline;
}

.twcol-field {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    flex-wrap: wrap;
}

.twcol-field__label {
    font-weight: 600;
}

.twcol-field__label::after {
    content: " :";
}

.twcol-field__value {
    display: inline;
}

/*=========================================================
 N — INTÉGRATION PHOTOSWIPE
 =========================================================*/

.pswp__counter {
	background-color : #fff;
	color: #000;
	padding: 3px;
	border-radius: 3px;
	opacity: 1;
	height: 35px;
}

/*=========================================================
 O — COORDONNÉES
 =========================================================*/

.tw-info {
    display: grid;
    gap: .5rem;
}

.tw-info_item {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
}
.tw-info_item-nom-site .tw-info_valeur {
	font-weight: 700;
}
.tw-info_item a {
	text-decoration: none;
}
.tw-info_prefixe {
    font-weight: 600;
}

.tw-info_icone {
    display: inline-flex;
    flex: 0 0 auto;
}

.tw-info_icone .material-symbols-outlined {
    font-size: 1.25em;
}

/*=========================================================
 P — NAVIGATION ENTRE PAGES
 =========================================================*/

.tw-page-nav_section {
    width: 100%;
    padding-block: 1rem 1.5rem;
}

.tw-page-nav {
    width: min(
        var(--tw-section_container, 1200px),
        calc(100% - 2.5rem)
    );
    margin-inline: auto;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    align-items: center;
    gap: 1rem;
}

/*---------------------------------------------------------
 P.1 — Liens précédent / suivant
 ---------------------------------------------------------*/

.tw-page-nav_link {
    display: inline-flex;
    align-items: center;
    gap: .65rem;

    max-width: min(100%, 32rem);
    padding: .7rem 1rem;

    border: 1px solid currentColor;
    border-radius: var(--tw-action_radius, .5rem);

    color: inherit;
    line-height: 1.25;
    text-decoration: none;
}

.tw-page-nav_link-previous {
    justify-self: start;
}

.tw-page-nav_link-next {
    grid-column: 2;
    justify-self: end;
    text-align: right;
}

.tw-page-nav_title {
    min-width: 0;
    overflow-wrap: anywhere;
}

.tw-page-nav_arrow {
    flex: 0 0 auto;
    font-size: 1.4em;
    line-height: 1;
}

/*---------------------------------------------------------
 P.2 — Responsive mobile
 ---------------------------------------------------------*/

@media (max-width: 640px) {

    .tw-page-nav {
        grid-template-columns: minmax(0, 1fr);
    }

    .tw-page-nav_link {
        width: 100%;
        max-width: none;
    }

    .tw-page-nav_link-next {
        grid-column: 1;
        justify-self: stretch;
        justify-content: flex-end;
    }
}

/*=========================================================
 Q — CARTES
 =========================================================*/

/* Q.1 — Conteneur général d’une carte. */
.tw-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--tw-card_bg);
    border: 1px solid var(--tw-card_border-color);
    border-radius: var(--tw-image_radius);
}

/* Q.2 — Média de la carte. */
.tw-card_media {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

/* Q.3 — L’image remplit le cadre sans être déformée. */
.tw-card_image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Q.4 — Contenu de la carte. */
.tw-card_content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: clamp(1rem, 2vw, 1.5rem);
}

.tw-card_surtitre {
    margin: 0 0 .5rem;
    color: var(--tw-color_accent-dark);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tw-card_title {
    margin: 0 0 .75rem;
    color: var(--tw-card_title-color);
    font-size: var(--tw-card_title-font-size);
    line-height: var(--tw-font-title_line-height, 1.25);
    letter-spacing: var(--tw-font-title_letter-spacing, normal);
}

.tw-card_title a {
    color: inherit;
    text-decoration: none;
}

.tw-card_accroche {
    margin: 0 0 .75rem;
    font-weight: 600;
}

.tw-card_text {
    color: var(--tw-card_color);
}

.tw-card_text > *:first-child {
    margin-top: 0;
}

.tw-card_text > *:last-child {
    margin-bottom: 0;
}

.tw-card_actions {
    margin-top: auto;
    padding-top: 1rem;
}

/* Tablette : les cartes passent toujours sur deux colonnes. */
@media (min-width: 769px) and (max-width: 1024px) {
    .tw-grid.tw-grid_responsive-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile : les cartes s'affichent sur une seule colonne. */
@media (max-width: 768px) {
    .tw-grid.tw-grid_responsive-cards {
        grid-template-columns: 1fr;
    }
}

/*=========================================================
 R — ARCHIVES DE CATÉGORIES
 =========================================================*/

/*---------------------------------------------------------
 R.1 — Liste des articles
 ---------------------------------------------------------*/
.tw-category_articles {
    width: 100%;
}

.tw-category_articles-line {
    display: grid;
    gap: var(--tw-space_lg);
}

/* Le mode En ligne conserve le même composant de carte, présenté horizontalement. */
.tw-card_inline {
    display: grid;
    grid-template-columns: minmax(220px, 34%) minmax(0, 1fr);
    align-items: stretch;
}

.tw-card_inline .tw-card_media {
    width: 100%;
    height: 100%;
    min-height: 220px;
    aspect-ratio: auto;
}

.tw-card_inline .tw-card_media img,
.tw-card_inline .tw-card_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*---------------------------------------------------------
 R.2 — Pagination
 ---------------------------------------------------------*/
.tw-category_pagination {
    margin-top: clamp(2rem, 4vw, 3.5rem);
}

.tw-category_pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: center;
}

.tw-category_pagination .page-numbers {
    display: inline-flex;
    min-width: 2.25rem;
    min-height: 2.25rem;
    align-items: center;
    justify-content: center;
    padding: .35rem .65rem;
    border: 1px solid var(--tw-card_border-color);
    border-radius: var(--tw-action_radius, .5rem);
    color: inherit;
    text-decoration: none;
}

.tw-category_pagination .page-numbers.current {
    font-weight: 700;
}

/*---------------------------------------------------------
 R.3 — Responsive
 ---------------------------------------------------------*/
@media (max-width: 768px) {
    .tw-card_inline {
        grid-template-columns: 1fr;
    }

    .tw-card_inline .tw-card_media {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }
}

.tw-card_inline.tw-card_no-media {
    grid-template-columns: 1fr;
}

/*---------------------------------------------------------
 S — CONSTRUCTEUR D’ACCUEIL
 ---------------------------------------------------------*/
.tw-home-section_actions {
    margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
}