/*
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.126
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 DE STRUCTURE
 =========================================================*/

/* La palette et les rôles de couleur sont définis dans
 * /assets/css/twal-variables.css. Les noms obsolètes sont isolés dans
 * /assets/css/twal-colors-legacy.css jusqu'à la version 1.0.9.0. */

:root {
    --tw-button_padding-y: .8rem;
    --tw-button_padding-right: 1.15rem;
    --tw-button_padding-left: 1.35rem;
    --tw-button_font-size: 16px;
    --tw-button_font-weight: 700;
    --tw-button_text-transform: none;
    --tw-button_icon-size: 1.55rem;

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

    --tw-font_body: 'TWAL Manrope', system-ui, sans-serif;
    --tw-font_title: 'TWAL 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.10 — Font-size
     ---------------------------------------------------------*/
	--tw-font_xs : 12px;
	--tw-font_sm: 14px;
    --tw-font_md: 16px;
    --tw-font_lg: 18px;
    --tw-font_xl: 20px;
    --tw-font_2xl: 24px;
    /*---------------------------------------------------------
     B.11 — Cartes : dimensions typographiques
     ---------------------------------------------------------*/

    --tw-card_title-font-size: 1.35rem;

    /*---------------------------------------------------------
     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;
    --tw-section_width-narrow: 1180px;
    --tw-section_width-normal: 1560px;
    --tw-section_width-wide: 2500px;
    --tw-section_width: var(--tw-section_width-normal);
    --tw-section_outer-gap: 2.5rem;
}

/*---------------------------------------------------------
 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-type-size-h3, 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-media_radius: 1.35rem;
    --tw-gallery_radius: .85rem;
    --tw-section_gap: clamp(2rem, 4vw, 4rem);

    /* B.16.1 — Rôle éditorial : surtitre. */
    --tw-surtitre_margin: 1em 0;
    --tw-surtitre_color: var(
        --tw-editorial_surtitre-color,
        var(--tw-section_overline-color, var(--tw-color_accent-on-light))
    );

    /* B.16.2 — 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));
    --tw-title_margin: 0 0 .75rem;
    --tw-title_color: var(--tw-editorial_title-color, var(--tw-section_title-color));
    --tw-title_size: var(--tw-section_title-font-size);
    --tw-title_weight: var(--tw-section_title-font-weight);
    --tw-title_line-height: var(--tw-font-title_line-height, 1.05);
    --tw-title_letter-spacing: var(--tw-font-title_letter-spacing, normal);

    /* B.16.3 — Accroche. */
    --tw-section_accroche-font-weight: 600;
    --tw-section_accroche-max-width: 65ch;
    --tw-accroche_color: var(--tw-editorial_accroche-color, var(--tw-section_lead-color));
    --tw-text_color: var(--tw-editorial_text-color, var(--tw-section_text-color));
}

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

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

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

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

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--tw-focus_width) solid var(--tw-color_focus);
    outline-offset: var(--tw-focus_offset);
}

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);
}

/* Le niveau HTML choisit la taille centrale lorsqu'elle est activée.
 * Les composants conservent leur taille contextuelle en l'absence de réglage. */
h1 {
    --tw-title_role-size: var(--tw-type-size-h1, var(--tw-title_size, revert));
    --tw-title_role-weight: var(--tw-type-weight-h1, var(--tw-title_weight, var(--tw-font-title_weight, revert)));
    --tw-title_role-line-height: var(--tw-type-line-height-h1, var(--tw-title_line-height, var(--tw-font-title_line-height, normal)));
    font-size: var(--tw-type-size-h1, revert);
    font-weight: var(--tw-type-weight-h1, var(--tw-font-title_weight, revert));
    line-height: var(--tw-type-line-height-h1, var(--tw-font-title_line-height, normal));
}

h2 {
    --tw-title_role-size: var(--tw-type-size-h2, var(--tw-title_size, revert));
    --tw-title_role-weight: var(--tw-type-weight-h2, var(--tw-title_weight, var(--tw-font-title_weight, revert)));
    --tw-title_role-line-height: var(--tw-type-line-height-h2, var(--tw-title_line-height, var(--tw-font-title_line-height, normal)));
    font-size: var(--tw-type-size-h2, revert);
    font-weight: var(--tw-type-weight-h2, var(--tw-font-title_weight, revert));
    line-height: var(--tw-type-line-height-h2, var(--tw-font-title_line-height, normal));
}

h3 {
    --tw-title_role-size: var(--tw-type-size-h3, var(--tw-title_size, revert));
    --tw-title_role-weight: var(--tw-type-weight-h3, var(--tw-title_weight, var(--tw-font-title_weight, revert)));
    --tw-title_role-line-height: var(--tw-type-line-height-h3, var(--tw-title_line-height, var(--tw-font-title_line-height, normal)));
    font-size: var(--tw-type-size-h3, revert);
    font-weight: var(--tw-type-weight-h3, var(--tw-font-title_weight, revert));
    line-height: var(--tw-type-line-height-h3, var(--tw-font-title_line-height, normal));
}

h4 {
    --tw-title_role-size: var(--tw-type-size-h4, var(--tw-title_size, revert));
    --tw-title_role-weight: var(--tw-type-weight-h4, var(--tw-title_weight, var(--tw-font-title_weight, revert)));
    --tw-title_role-line-height: var(--tw-type-line-height-h4, var(--tw-title_line-height, var(--tw-font-title_line-height, normal)));
    font-size: var(--tw-type-size-h4, revert);
    font-weight: var(--tw-type-weight-h4, var(--tw-font-title_weight, revert));
    line-height: var(--tw-type-line-height-h4, var(--tw-font-title_line-height, normal));
}

strong {
	font-weight: 600;
}

/*---------------------------------------------------------
 C.1.1 — Rôle éditorial générique : surtitre

 Les anciennes classes restent des alias de compatibilité. Chaque composant
 fournit uniquement les variables correspondant à son contexte. Les propriétés
 non redéfinies conservent leur valeur naturellement héritée ou initiale.
 ---------------------------------------------------------*/

.tw-surtitre,
.tw-hero_surtitre,
.tw-section_surtitre,
.tw-card_surtitre,
.tw-product_surtitre,
.tw-global-cta_surtitre {
    margin: var(--tw-surtitre_margin);
    color: var(--tw-surtitre_color, var(--tw-editorial_surtitre-color, inherit));
    font-family: var(--tw-surtitre_font-family);
    font-size: var(--tw-type-size-surtitre, var(--tw-surtitre_size));
    font-weight: var(--tw-type-weight-surtitre, var(--tw-surtitre_weight));
    line-height: var(--tw-type-line-height-surtitre, var(--tw-surtitre_line-height));
    letter-spacing: var(--tw-surtitre_letter-spacing);
    text-transform: var(--tw-surtitre_transform);
}

/*---------------------------------------------------------
 C.1.2 — Rôle éditorial générique : titre

 Le niveau sémantique reste porté par la balise HTML. Les anciennes classes
 restent des alias de compatibilité et les différences visuelles sont fournies
 par les variables du composant parent.
 ---------------------------------------------------------*/

.tw-title,
.tw-hero_title,
.tw-section_title,
.tw-card_title,
.tw-product_title,
.tw-global-cta_title,
.tw-content_title {
    margin: var(--tw-title_margin, revert);
    color: var(--tw-title_color, var(--tw-editorial_title-color, inherit));
    font-family: var(--tw-title_font-family, var(--tw-font_title));
    font-size: var(--tw-title_role-size, var(--tw-title_size, revert));
    font-weight: var(--tw-title_role-weight, var(--tw-title_weight, var(--tw-font-title_weight, revert)));
    line-height: var(--tw-title_role-line-height, var(--tw-title_line-height, var(--tw-font-title_line-height, normal)));
    letter-spacing: var(--tw-title_letter-spacing, var(--tw-font-title_letter-spacing, normal));
}

/*---------------------------------------------------------
 C.1.3 — Rôles éditoriaux : accroche, texte et liens
 ---------------------------------------------------------*/

.tw-accroche,
.tw-hero_accroche,
.tw-section_accroche,
.tw-card_accroche,
.tw-product_accroche,
.tw-global-cta_accroche {
    color: var(--tw-accroche_color, var(--tw-editorial_accroche-color, inherit));
    font-size: var(--tw-type-size-accroche, inherit);
    font-weight: var(--tw-type-weight-accroche, inherit);
    line-height: var(--tw-type-line-height-accroche, inherit);
}

.tw-text {
    color: var(--tw-text_color, var(--tw-editorial_text-color, inherit));
    font-size: var(--tw-type-size-text, inherit);
    font-weight: var(--tw-type-weight-text, inherit);
    line-height: var(--tw-type-line-height-text, inherit);
}

/*---------------------------------------------------------
 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-editorial_text-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
 ---------------------------------------------------------*/

/* Les sections portent une parité explicite : impaires 1, 3, 5… ;
 * paires 2, 4, 6… . */
.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-fond-interieur-section-paire);
    --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-fond-section-impaire);

    background: var(--tw-fond-section-paire);
}

.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-fond-interieur-section-impaire);
    --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-fond-section-paire);

    background: var(--tw-fond-section-impaire);
}

/*---------------------------------------------------------
 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: calc(100% - var(--tw-section_outer-gap));
    max-width: var(--tw-section_width);
    margin-inline: auto;
    padding-block: clamp(1rem, 1vw, 1rem);
    padding-inline: 1.25rem;
    border: 1px solid var(--tw-bordure-discrete);
    border-radius: 20px;
    background: var(--tw-section_inner-bg);
}

/* Une surface dédiée aux sections de cartes reste une variable héritée :
 * une valeur posée directement sur .tw-section_inner par une page garde
 * ainsi la priorité. */
.tw-surface-cards-inner_custom .tw-section_has-cards {
    --tw-section_inner-bg: var(--tw-fond-bloc-presentation);
}

.tw-surface-cards-inner-frame_show .tw-section_has-cards > .tw-section_inner {
    border-color: var(--tw-bordure-discrete);
}

.tw-surface-cards-inner-frame_hide .tw-section_has-cards > .tw-section_inner {
    border-color: transparent;
}

/* Une grille laisse apparaître le fond de sa section. Les blocs blancs
 * forment les seuls cartouches visibles par défaut. */
.tw-section_standard.tw-section_cards-grid > .tw-section_inner {
    background: var(--tw-fond-bloc-presentation);
    border-color: transparent;
}

/* Ces deux règles doivent suivre la valeur neutre de la grille afin que le
 * réglage local « bordure du bloc de présentation » puisse bien l'écraser. */
.tw-surface-cards-inner-frame_show .tw-section_standard.tw-section_cards-grid > .tw-section_inner {
    border-color: var(--tw-bordure-discrete);
}

.tw-surface-cards-inner-frame_hide .tw-section_standard.tw-section_cards-grid > .tw-section_inner {
    border-color: transparent;
}

.tw-section_width-narrow {
    --tw-section_width: var(--tw-section_width-narrow);
}

.tw-section_width-normal {
    --tw-section_width: var(--tw-section_width-normal);
}

.tw-section_width-wide {
    --tw-section_width: var(--tw-section_width-wide);
}

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

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

.tw-section_accroche {
    max-width: var(--tw-section_accroche-max-width);
    color: var(--tw-editorial_accroche-color, var(--tw-section_lead-color));
    font-size: var(--tw-type-size-accroche, 1rem);
    font-weight: var(--tw-type-weight-accroche, var(--tw-section_accroche-font-weight));
    line-height: var(--tw-type-line-height-accroche, 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 de contenu
 ---------------------------------------------------------*/

.tw-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    padding:
        var(--tw-button_padding-y)
        var(--tw-button_padding-right)
        var(--tw-button_padding-y)
        var(--tw-button_padding-left);
    border: 0 solid transparent;
    border-radius: var(--tw-button_radius);
    background: var(--tw-button_bg);
    color: var(--tw-button_color);
    box-shadow: var(--tw-button_shadow);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--tw-button_font-size);
    font-weight: var(--tw-button_font-weight);
    line-height: 1;
    text-transform: var(--tw-button_text-transform);
    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: var(--tw-button_icon-size);
    height: var(--tw-button_icon-size);
    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-button_color-hover);
}

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

/*---------------------------------------------------------
 E.7.1 — Réglages des boutons de contenu
 ---------------------------------------------------------*/

.tw-button-size_compact {
    --tw-button_padding-y: .6rem;
    --tw-button_padding-right: .9rem;
    --tw-button_padding-left: 1.05rem;
    --tw-button_font-size: .875rem;
    --tw-button_icon-size: 1.35rem;
}

.tw-button-size_normal {
    --tw-button_padding-y: .8rem;
    --tw-button_padding-right: 1.15rem;
    --tw-button_padding-left: 1.35rem;
    --tw-button_font-size: 16px;
    --tw-button_icon-size: 1.55rem;
}

.tw-button-size_large {
    --tw-button_padding-y: .95rem;
    --tw-button_padding-right: 1.35rem;
    --tw-button_padding-left: 1.55rem;
    --tw-button_font-size: 1.0625rem;
    --tw-button_icon-size: 1.75rem;
}

.tw-button-radius_square {
    --tw-button_radius: 0;
}

.tw-button-radius_slight {
    --tw-button_radius: 4px;
}

.tw-button-radius_rounded {
    --tw-button_radius: 10px;
}

.tw-button-weight_400 {
    --tw-button_font-weight: 400;
}

.tw-button-weight_500 {
    --tw-button_font-weight: 500;
}

.tw-button-weight_600 {
    --tw-button_font-weight: 600;
}

.tw-button-weight_700 {
    --tw-button_font-weight: 700;
}

.tw-button-case_lower {
    --tw-button_text-transform: lowercase;
}

.tw-button-case_upper {
    --tw-button_text-transform: uppercase;
}

.tw-button-shadow_none {
    --tw-button_shadow: none;
    --tw-button_shadow-hover: none;
}

.tw-button-style_contour .tw-button {
    border-width: 1px;
    border-color: var(--tw-button_color);
    background: transparent;
}

.tw-button-style_contour .tw-button:hover,
.tw-button-style_contour .tw-button:focus-visible {
    border-color: var(--tw-button_color-hover);
    background: transparent;
}

.tw-button-style_discret .tw-button {
    border-width: 0 0 1px;
    border-color: var(--tw-button_color);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.tw-button-style_discret .tw-button:hover,
.tw-button-style_discret .tw-button:focus-visible {
    border-color: var(--tw-button_color-hover);
    background: transparent;
    box-shadow: none;
}

.tw-button-arrow_hide .tw-button::after {
    display: none;
}

/*---------------------------------------------------------
 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-editorial_text-color, var(--tw-section_text-color));
    font-weight: var(--tw-type-weight-text, inherit);
    line-height: var(--tw-type-line-height-text, 1.75);
}

.tw-content-shortcode {
    min-width: 0;
    max-width: 100%;
}

.tw-content-shortcode_before-text {
    margin-bottom: 1.25rem;
}

.tw-content-shortcode_after-text {
    margin-top: 1.25rem;
}

.tw-content-shortcode > :first-child {
    margin-top: 0;
}

.tw-content-shortcode > :last-child {
    margin-bottom: 0;
}

.tw-content-shortcode iframe,
.tw-content-shortcode embed,
.tw-content-shortcode object {
    display: block;
    max-width: 100%;
}

.tw-layout_shortcode .tw-content-shortcode_media,
.tw-layout_shortcode .tw-content-shortcode_media > * {
    width: 100%;
}

.tw-section_text-only .tw-layout_content {
    max-width: 75ch;
}

.tw-section_header-content .tw-layout_content > .tw-section_header {
    margin-top: 0;
    margin-bottom: 1.25rem;
}

.tw-layout_content h3,
.tw-layout_content h2,
.tw-section_inner h3,
.tw-section_inner h2 {
    margin: 0 0 .65rem;
    color: var(--tw-editorial_title-color, var(--tw-section_title-color));
}

.tw-layout_content h2,
.tw-section_inner h2 {
    font-size: var(--tw-type-size-h2, clamp(1.2rem, 1.6vw, 1.2rem));
    font-weight: var(--tw-type-weight-h2, 400);
    line-height: var(--tw-type-line-height-h2, 1.15);
}

.tw-layout_content h3,
.tw-section_inner h3 {
    font-size: var(--tw-type-size-h3, clamp(1.2rem, 1.6vw, 1.2rem));
    font-weight: var(--tw-type-weight-h3, 400);
    line-height: var(--tw-type-line-height-h3, 1.15);
}

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

.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: var(--tw-type-size-h2, clamp(1.05rem, 1.25vw, 1.2rem));
    font-weight: var(--tw-type-weight-h2, 500);
    line-height: var(--tw-type-line-height-h2, 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) {

    :root {
        --tw-section_outer-gap: 1.5rem;
    }

    .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 {
        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 {
    --tw-gallery_image-ratio: 4 / 3;

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

/* Mode respectant les proportions réelles des photographies. */
.tw-gallery_ratio-original {
    display: flex;
    flex-direction: column;
}

.tw-gallery_ratio-original .tw-gallery_row {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
}

.tw-gallery_ratio-original .tw-gallery_item {
    flex: var(--tw-gallery_item-ratio, 1) 1 0;
    min-width: 0;
}

/*---------------------------------------------------------
 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 et formats
 ---------------------------------------------------------*/

.tw-gallery_ratio-1-1 {
    --tw-gallery_image-ratio: 1 / 1;
}

.tw-gallery_ratio-3-2 {
    --tw-gallery_image-ratio: 3 / 2;
}

.tw-gallery_ratio-4-3 {
    --tw-gallery_image-ratio: 4 / 3;
}

.tw-gallery_ratio-16-9 {
    --tw-gallery_image-ratio: 16 / 9;
}

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

.tw-gallery_link {
    position: relative;
    display: block;
    overflow: hidden;
}

/*
 * Un ratio imposé appartient au cadre, pas à l'image elle-même.
 * L'image remplit ensuite ce cadre avec object-fit afin de ne jamais être étirée.
 */
.tw-gallery:not(.tw-gallery_ratio-original) .tw-gallery_link {
    aspect-ratio: var(--tw-gallery_image-ratio, 4 / 3);
}

.tw-gallery_item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.tw-gallery_ratio-original .tw-gallery_link {
    overflow: visible;
}

.tw-gallery_ratio-original .tw-gallery_item img {
    height: auto;
    object-fit: initial;
}

.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 — Galerie WordPress [gallery]
 ---------------------------------------------------------*/

.tw-gallery-wp {
    --tw-gallery-wp_image-ratio: 4 / 3;

    display: flex;
    flex-direction: column;
    gap: .85rem;
}

/*
 * En format d'origine, le nombre d'images par ligne est piloté par une
 * variable CSS lue par le script TWAL. L'attribut natif columns="..."
 * reste présent dans le shortcode WordPress mais ne pilote plus le rendu
 * responsive du thème.
 */
.tw-gallery-wp_ratio-original {
    --tw-gallery-wp_columns: 2;
}

@media (min-width: 1600px) {
    .tw-gallery-wp_ratio-original {
        --tw-gallery-wp_columns: 3;
    }
}

@media (max-width: 699px) {
    .tw-gallery-wp_ratio-original {
        --tw-gallery-wp_columns: 1;
    }

    /*
     * En affichage mobile, chaque image en format d’origine occupe
     * réellement toute la largeur disponible, quel que soit son ratio.
     * La hauteur reste naturelle : aucun recadrage des portraits.
     */
    .tw-gallery-wp_ratio-original .tw-gallery-wp_row,
    .tw-gallery-wp_ratio-original .tw-gallery-wp_item,
    .tw-gallery-wp_ratio-original .tw-gallery-wp_media,
    .tw-gallery-wp_ratio-original .tw-gallery-wp_link,
    .tw-gallery-wp_ratio-original .tw-gallery-wp_image {
        width: 100%;
    }

    .tw-gallery-wp_ratio-original .tw-gallery-wp_item,
    .tw-gallery-wp_ratio-original .tw-gallery-wp_row-last-single .tw-gallery-wp_item {
        flex: 0 0 100%;
        flex-grow: 1;
        max-width: 100%;
    }
}

.tw-gallery-wp_row {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
}

.tw-gallery-wp_item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}

/*
 * En format d'origine, la largeur de chaque item est proportionnelle
 * au ratio réel de son image. Les images d'une même ligne ont ainsi
 * une hauteur visuelle commune sans Masonry ni recadrage.
 */
.tw-gallery-wp_ratio-original .tw-gallery-wp_item {
    flex-grow: var(--tw-gallery-wp-item-ratio, 1);
}

.tw-gallery-wp_row-last-single .tw-gallery-wp_item {
    flex: 0 1 var(--tw-gallery-wp-last-width, 100%);
}

.tw-gallery-wp_ratio-1-1 {
    --tw-gallery-wp_image-ratio: 1 / 1;
}

.tw-gallery-wp_ratio-3-2 {
    --tw-gallery-wp_image-ratio: 3 / 2;
}

.tw-gallery-wp_ratio-4-3 {
    --tw-gallery-wp_image-ratio: 4 / 3;
}

.tw-gallery-wp_ratio-16-9 {
    --tw-gallery-wp_image-ratio: 16 / 9;
}

.tw-gallery-wp_media {
    overflow: hidden;
    border-radius: var(--tw-gallery_radius, 1rem);
    background: #f3f3f3;
}

/* Le ratio est imposé au cadre uniquement dans les modes recadrés. */
.tw-gallery-wp:not(.tw-gallery-wp_ratio-original) .tw-gallery-wp_media {
    aspect-ratio: var(--tw-gallery-wp_image-ratio, 4 / 3);
}

.tw-gallery-wp_link {
    display: block;
    width: 100%;
    height: 100%;
}

.tw-gallery-wp_image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

/* Le format d'origine ne force aucune hauteur : le ratio natif est conservé. */
.tw-gallery-wp_ratio-original .tw-gallery-wp_link {
    height: auto;
}

.tw-gallery-wp_ratio-original .tw-gallery-wp_image {
    height: auto;
    object-fit: initial;
}

.tw-gallery-wp_item:hover .tw-gallery-wp_image {
    transform: scale(1.035);
}

.tw-gallery-wp_caption {
    padding: .5rem .65rem;
    font-size: .9em;
    line-height: 1.4;
}

/*---------------------------------------------------------
 F.7 — Responsive
 ---------------------------------------------------------*/

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

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

    /* En format original, on garde deux colonnes lisibles sans Masonry. */
    .tw-gallery_ratio-original.tw-gallery_cols-3,
    .tw-gallery_ratio-original.tw-gallery_cols-4,
    .tw-gallery_ratio-original.tw-gallery_cols-5,
    .tw-gallery_ratio-original.tw-gallery_cols-6,
    .tw-gallery-wp:not(.tw-gallery-wp_ratio-original).tw-gallery-wp_cols-3,
    .tw-gallery-wp:not(.tw-gallery-wp_ratio-original).tw-gallery-wp_cols-4,
    .tw-gallery-wp:not(.tw-gallery-wp_ratio-original).tw-gallery-wp_cols-5,
    .tw-gallery-wp:not(.tw-gallery-wp_ratio-original).tw-gallery-wp_cols-6 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .85rem;
    }

    .tw-gallery_ratio-original.tw-gallery_cols-3 .tw-gallery_row,
    .tw-gallery_ratio-original.tw-gallery_cols-4 .tw-gallery_row,
    .tw-gallery_ratio-original.tw-gallery_cols-5 .tw-gallery_row,
    .tw-gallery_ratio-original.tw-gallery_cols-6 .tw-gallery_row,
    .tw-gallery-wp:not(.tw-gallery-wp_ratio-original).tw-gallery-wp_cols-3 .tw-gallery-wp_row,
    .tw-gallery-wp:not(.tw-gallery-wp_ratio-original).tw-gallery-wp_cols-4 .tw-gallery-wp_row,
    .tw-gallery-wp:not(.tw-gallery-wp_ratio-original).tw-gallery-wp_cols-5 .tw-gallery-wp_row,
    .tw-gallery-wp:not(.tw-gallery-wp_ratio-original).tw-gallery-wp_cols-6 .tw-gallery-wp_row {
        display: contents;
    }

    .tw-gallery_ratio-original .tw-gallery_item,
    .tw-gallery-wp:not(.tw-gallery-wp_ratio-original) .tw-gallery-wp_item {
        min-width: 0;
    }

    .tw-gallery-wp:not(.tw-gallery-wp_ratio-original) .tw-gallery-wp_row-last-single .tw-gallery-wp_item {
        grid-column: 1 / -1;
        width: min(100%, var(--tw-gallery-wp-last-width, 100%));
        justify-self: start;
    }
}

/*=========================================================
 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: calc(100% - var(--tw-section_outer-gap));
    max-width: var(--tw-section_width);
    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 {
    --tw-surtitre_margin: 0 0 .5rem;
    --tw-surtitre_color: var(
        --tw-editorial_surtitre-color,
        var(--tw-color_accent-on-light)
    );
    --tw-surtitre_size: .78rem;
    --tw-surtitre_weight: 700;
    --tw-surtitre_letter-spacing: .08em;
    --tw-surtitre_transform: uppercase;

    --tw-title_margin: 0 0 .75rem;
    --tw-title_color: var(--tw-editorial_title-color, var(--tw-card_title-color));
    --tw-title_size: var(--tw-card_title-font-size);
    --tw-title_line-height: var(--tw-font-title_line-height, 1.25);
    --tw-title_letter-spacing: var(--tw-font-title_letter-spacing, normal);

    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--tw-fond-bloc) !important;
    border: 1px solid var(--tw-bordure-bloc) !important;
    border-radius: var(--tw-image_radius);
}

/* Lorsqu'un fond est choisi explicitement dans TWAL, il prime sur les
 * anciennes règles de variante qui rendent parfois les cartes transparentes. */
body.tw-surface-card-background_custom .tw-card {
    background: var(--tw-fond-bloc) !important;
}

.tw-surface-card-frame_hide .tw-card {
    border-color: transparent !important;
}

/* 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 .tw-title a,
.tw-card_title a {
    color: inherit;
    text-decoration: none;
}

.tw-card_accroche {
    margin: 0 0 .75rem;
    color: var(--tw-editorial_accroche-color, inherit);
    font-weight: var(--tw-type-weight-accroche, 600);
    line-height: var(--tw-type-line-height-accroche, inherit);
}

.tw-card_text {
    color: var(--tw-editorial_text-color, var(--tw-card_color));
    font-weight: var(--tw-type-weight-text, inherit);
    line-height: var(--tw-type-line-height-text, inherit);
}

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

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

/* Q.5 — Sous-pages proposées après le contenu court. */
.tw-child-list {
    --tw-child-list_color: var(--tw-link_color, currentColor);
    --tw-child-list_marker-size: .35rem;
    --tw-child-list_marker-offset: .75em;
    margin-top: 1rem;
}

.tw-child-list_items {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tw-child-list_item {
    position: relative;
    margin: 0;
    padding-left: 1rem;
    color: var(--tw-child-list_color);
}

.tw-child-list_item + .tw-child-list_item {
    margin-top: .45rem;
}

.tw-child-list_item::before {
    content: '';
    position: absolute;
    top: var(--tw-child-list_marker-offset);
    left: 0;
    width: var(--tw-child-list_marker-size);
    height: var(--tw-child-list_marker-size);
    border-radius: 50%;
    background: currentColor;
    transform: translateY(-50%);
}

.tw-child-list_label {
    color: inherit;
    border-bottom: 1px solid transparent;
    text-decoration: none;
    transition: border-color .18s ease;
}

.tw-child-list_item a.tw-child-list_label:hover,
.tw-child-list_item a.tw-child-list_label:focus-visible {
    border-bottom-color: currentColor;
    text-decoration: none;
}

.tw-child-list_item-static {
    cursor: default;
}

.tw-section_child[id],
.tw-card_child-page[id] {
    scroll-margin-top: calc(var(--tw-navbar_height, 76px) + 1rem);
}

.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-content_collection {
    width: 100%;
}

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

.tw-home-section_actions {
    margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
}