/*
Theme Name: Twal Mutualpharm
Template: twal
Version: 1.0.7
*/

/*=========================================================
 A — SURCHARGE DE LA VARIANTE TWAL
 =========================================================*/

:root {

    /* Marque */
    --tw-brand-blue: #263F67;
    --tw-brand-ochre: #D5A52E;
    --tw-brand-red: #B63A32;
    --tw-brand-ink: #171717;
    --tw-brand-paper: #F3F0E8;

    /* Variante crème */
    --tw-variante_couleur: #DFD9C7;
    --tw-variante_couleur-rgb: 223, 217, 199;

    /* Texte */
    --tw-text-color: #30312F;
    --tw-text-muted: #62635F;
    --tw-title-color: var(--tw-brand-blue);

    /* Surfaces */
    --tw-page-bg: #FFFFFF;
    --tw-surface-paper: var(--tw-brand-paper);
    --tw-surface-soft:
        rgba(var(--tw-variante_couleur-rgb), .28);

    /* Bordures */
    --tw-border-color: #DDD7CA;

    /* Hero */
    --tw-hero_bg: var(--tw-brand-paper);
    --tw-hero-secondaire_bg: var(--tw-brand-paper);
    --tw-hero_overline-color: var(--tw-brand-red);
    --tw-hero_title-color: var(--tw-brand-blue);
    --tw-hero_text-color: var(--tw-text-color);

    /* Sections */
    --tw-section-even_bg: #FFFFFF;
    --tw-section-even_inner-bg: transparent;

    --tw-section-odd_bg:
        rgba(var(--tw-variante_couleur-rgb), .28);
    --tw-section-odd_inner-bg: transparent;

    --tw-section-even_title-color: var(--tw-brand-blue);
    --tw-section-odd_title-color: var(--tw-brand-blue);

    --tw-section-even_text-color: var(--tw-text-color);
    --tw-section-odd_text-color: var(--tw-text-color);

    /* CTA */
    --tw-cta_accent: var(--tw-brand-blue);
    --tw-cta_accent-rgb: 38, 63, 103;
    --tw-cta_contrast: #FFFFFF;

    /* Footer */
    --tw-footer_bg: var(--tw-brand-blue);
    --tw-footer_color: var(--tw-brand-paper);
    --tw-footer_link-color: #FFFFFF;
}
strong {
	font-weight: 400;
}
/*=========================================================
 B — VARIABLES SPÉCIFIQUES AU THÈME ENFANT
 =========================================================*/

:root {

/*---------------------------------------------------------
 B.1 — Typographie et dimensions
 ---------------------------------------------------------*/

 /*   --tw-font_body: 'Nunito Sans', system-ui, sans-serif;
    --tw-font_title: 'Roboto', Georgia, serif; */
    --tw-color_accent: #ffffff;
    --tw-letter-spacing_p: 0.025em;
    --tw-container_gutter: 15px;


/*---------------------------------------------------------
 B.2 — Menu
 ---------------------------------------------------------*/

    --ch-menu-separator: " ✶ ";
    /*--ch-menu-bg: #fbf7ef;*/
	--ch-menu-bg: transparent;
	
    --ch-menu-text: #1f1f1f;
	
	--tw-menu-item-hover_color: #fbf7ef;
    --tw-menu-item-hover_bg: transparent;
	
    --ch-menu-muted: #555555;
    --ch-menu-border: rgba(0, 0, 0, 0.12);


/*---------------------------------------------------------
 B.3 — Titres spécifiques
 ---------------------------------------------------------*/

    --chp-tw-title_color: var(--tw-variante_couleur);
    --chp-titre-color: var(--tw-variante_couleur);


/*---------------------------------------------------------
 B.4 — CTA et mises en avant
 ---------------------------------------------------------*/
/*
    --tw-cta_gap: .4rem;
    --tw-cta_min-width: 150px;
    --tw-cta_padding-y: 1rem;
    --tw-cta_padding-x: 1.2rem;
    --tw-cta_radius: var(--tw-button_radius, .5rem);
    --tw-cta_font-size: inherit;
    --tw-cta_font-weight: var(--tw-weight_x-strong, 700);
    --tw-cta_icon-size: 20px;
    --tw-cta_mobile-font-size: .75rem;
    --tw-cta_mobile-icon-size: 1.6rem;

    --tw-cta_bg: #ffffff;
    --tw-cta_color: #6b2f00;
    --tw-cta_border-color: rgba(207, 161, 58, 0.35);
    --tw-cta_icon-color: var(--tw-cta_color);

    --tw-cta_bg-hover: #cfa13a;
    --tw-cta_color-hover: #ffffff;
    --tw-cta_icon-color-hover: var(--tw-cta_color-hover);

    --chp-badge-bg: rgba(207, 161, 58, 0.16);
    --chp-badge-color: #6b2f00;
    --chp-badge-border: rgba(207, 161, 58, 0.35);

    --chp-highlight_bg: rgba(207, 161, 58, 1);
    --chp-highlight_bg_light: rgba(207, 161, 58, 0.2);
    --chp-highlight_color: #ffffff;
	*/
}
.tw-site-header {
    --tw-navbar_bg: #fffaf2;
    --tw-navbar_border-color: rgba(80, 55, 35, .12);
    --tw-navbar_height: 76px;
    --tw-navbar_logo-height: 58px;
    --tw-navbar_gap: 42px;
    --tw-mega-menu_columns: 3;

    --tw-menu-item_color: #2f5167;
    --tw-menu-item-hover_color: #d7a22f;
    --tw-menu-item-hover_bg: transparent;

    --tw-submenu_bg: #fffaf2;
    --tw-submenu_border-color: var(--tw-color_primary, #4f6f52);
    --tw-submenu_link-color: var(--tw-color_text, #4b3424);
    --tw-submenu_hover-bg: rgba(79, 111, 82, .08);
		--tw-submenu_font-weight: 400;
	--tw-submenu_font-size : 14px
	
}
.tw-cta-group_list {
	margin-top : 20px;
}


/*=========================================================
 C — SECTIONS SPÉCIFIQUES AU THÈME ENFANT
 =========================================================*/

.tw-layout_content h2, .tw-section_inner h2 {
	font-size: clamp(1.4rem, 2vw, 2.2rem);
	font-weight: 400!important;
}
h2.tw-card_title {
	font-size: clamp(1.2rem, 1.4vw, 1.4rem);
}
.tw-card_accroche {
	font-weight: 400;
}
/* h2 tiret en dessous du h2 */

.tw-editorial-content h2:after {
    content: '';
    display: block;
    width: min(500px, 100%);
    height: 1px;
    margin-top: 20px;
	margin-bottom : 25px;
    background: linear-gradient(
		90deg,
		var(--tw-section_title-color) 0%,
		rgba(200, 155, 60, 0) 100%
	);
}
/* à déplacer dans twal : la règle des marges */
.tw-layout_content h3, .tw-layout_content h2, .tw-section_inner h3, .tw-section_inner h2

 {
     margin: 0 0 .9em 0; */
    color: var(--tw-section_title-color);
    font-size: clamp(1.2rem, 1.6vw, 1.2rem);
    font-weight: 400;
    line-height: 1.15;
}
.tw-layout_content h2 {
	font-size: 140%;
	/* color: #cbaa27; */
}
.tw-layout_content h3 {
    font-weight: 400!important;
}

.tw-horaire_compact > .tw-horaire_status

{
	font-size: medium;
}
/* fin déplacement */
/*=========================================================
 D — HERO : RÉGLAGES STRUCTURELS DU THÈME ENFANT
 =========================================================*/

/*================================================
 * HOME strech : grid colonne card bloc
 * ==============================================*/

.tw-grid_stretch .tw-card_surtitre, /* surtitre */
.tw-grid_stretch .tw-href-label
{
	display : none;
}
.tw-grid_stretch .tw-href-label
{
	font-weight: 400;
	display : block;
}


.tw-grid_stretch a.tw-card_media,
.tw-grid_stretch .tw-card_title a{
	border-bottom: none;
}
	.tw-grid_stretch .tw-card_text  /* texte */
	{
		display : none;
	}
@media (min-width: 800px) {
	.tw-grid_stretch .tw-card_text  /* texte */
	{
		display : none;
	}
}
/* bouton découvrir : annuler les styles */
.tw-grid_stretch .tw-card_actions {
    margin-top: auto;
    padding-top: 10px;
    text-align: right;
    border-top: solid 1px var(--tw-card_border-color);
}
.tw-grid_stretch .tw-button {
	padding: 0px;
	background : transparent;
	box-shadow: none;
}
.tw-grid_stretch .tw-button::after
 {
	 background: transparent;
	 color : #000;
}
.main-container .tw-grid_stretch a {
	border-bottom : solid 0px;
}
/*=======================================================
 * MEDIA
 * =====================================================*/
.tw-grid_stretch a.tw-card_media {
	border-bottom: solid 1px    rgba(223, 217, 199, 0.2);
	background : rgba(223, 217, 199, 0.2);
}
.tw-grid_stretch .tw-card_media
 {


 	aspect-ratio: 1 / 1;
	aspect-ratio: 3 / 4;
	aspect-ratio: 4 / 3;
	aspect-ratio: 3 / 2;
	aspect-ratio: 16 / 9;
}



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

/*-- Section éditoriale : masquer les bordures -- */

.tw-section_editorial .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: 0px solid var(--tw-color_border);
	border-left: 1px solid var(--tw-color_border);
    border-radius: 20px;
    background: var(--tw-section_inner-bg);
}


h2.tw-section_title {
	font-weight: 500;
	font-size: clamp(2.4rem, 3vw, 3.0rem);
}


h1,
h2,
h3,
.tw-section_title {
    font-family: var(--tw-font_title);
    font-weight: 400;
    letter-spacing: 0;
	font-optical-sizing: auto;
    font-synthesis: none;
}
/* les titre dans une section texte */
.tw-layout_content h3, .tw-layout_content h2 {
	font-weight: 600;
}

h2.tw-section_title, .main-container.tarifs h2 {
    font-size: clamp(1.45rem, 1.5vw, 1.9rem);
    line-height: 1.18;
    font-weight: 500;
    color: var(--tw-section_title);
    margin-bottom: 12px;
    padding-bottom: 14px;

}
h2.tw-section_title::after,
.twcol-horaires h3.twcol-section_title:after,
.main-container.tarifs h2:after
{
	content: '';
	display: block;
	width: min(500px, 100%);
	height: 1px;
	margin-top: 12px;

	background: linear-gradient(
		90deg,
		var(--chp-tw-title_color) 0%,
		rgba(200, 155, 60, 0) 100%
	);
}

/*=======================================
 * HERO
 * ======================================*/
/*=======================================
 *
 * HERO : LISTE D'ACCROCHE
 *
 * ======================================*/

.tw-hero_text ul, ul.mtp-services-list {
    margin: 1.1rem 0 1rem 0;
    padding: 0;
    list-style: none;
}

.tw-hero_text li, ul.mtp-services-list li {
    position: relative;
    padding-left: 1.45rem;
    line-height: 1.45;
}

.tw-hero_text li + li, ul.mtp-services-list li + li {
    margin-top: .25rem;
}

.tw-hero_text li::before, ul.mtp-services-list li::before {
    content: '';
    position: absolute;
    left: 10px;
    top: .72em;
    width: .20rem;
    height: .20rem;
    border-radius: 999px;
    background: #000000; /*var(--tw-color_accent, #000000); */
    tmp_box-shadow: 0 0 0 .22rem rgba(207, 161, 58, .18);
    transform: translateY(-50%);
}
/* Styles apply ONLY to viewports 768px wide or larger */
@media (min-width: 1024px) {
  	.tw-hero.tw-hero_secondaire {
		background: transparent;
		background-color: var(--tw-hero-secondaire_bg);

		background-position: right center;
  background-repeat: no-repeat;

	}
}

.tw-layout ul {
    margin: 1.2rem 0;
    padding: 0;
    list-style: none;
}

.tw-layout li {
    position: relative;
    padding-left: 1.2rem;
    margin-bottom: .15rem;
    line-height: 1.7;
}

.tw-layout li::before {
    content: "";

    position: absolute;
    left: 0;
    top: .92em;

    width: 3px;
    height: 3px;

    border-radius: 50%;
    background: var(--tw-variante_couleur);

    transform: translateY(-50%);
}

/*---------------------------------------------------------
 D.8 — Responsive Hero
 ---------------------------------------------------------*/
/*-- dégradé sur image --*/

@media (max-width: 900px) {

	/* masquer le dégradé */
	.tw-hero_visual::before {
		display: none;
	}
	.tw-hero_visual img {
		opacity : 1;
		border-radius : 10px;
	}
}

/*==========================================
 * 
 * SIDEBAR
 * 
 * =========================================*/
.tw-sidebar-editoriale {
	min-width: 350px;
    background-color: var(--tw-hero-secondaire_bg);
	padding: 10px 20px;
	padding-bottom: 20px;
	border-radius: var(--tw-space_lg);

}
ul.tw-sidebar-editoriale_links li {
	border: solid 1px #c6c6c6;
	border-radius : 10px;
	padding: 5px  5px;
	font-size: 85%;
	text-align: center;
}
ul.tw-sidebar-editoriale_links li a {
	text-decoration: none;
}
/*===============================================
 * EVENEMENT STAGES
 * =============================================*/
.twchp-home-dated-list__item {
	margin : 10px auto;
}
/*===============================================
  TARIFS — STRUCTURE DES LISTES
===============================================*/

.twchp-tarifs_liste, ul.twchp-home-dated-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.twchp-tarifs_grille {
    display: grid;
    align-items: start;
    gap: 1rem;
    padding: .75rem 1rem;
}

/* Cartes horaires */
.twchp-tarifs_grille--3 {
    grid-template-columns: minmax(0, 1fr) 8rem 10rem;
}

/* Tarifs des stages */
.twchp-tarifs_grille--4 {
    grid-template-columns: minmax(0, 1fr) repeat(3, 8rem);
}

.twchp-tarifs_entete,
.twchp-tarifs_ligne {
    border-bottom: 1px solid;
}

.twchp-tarifs_mobile-label {
    display: none;
}

.twchp-tarifs_libelle p {
    margin: .25rem 0 0;
}


/*======================================
 *
 * CTA BOUTON
 *
 * ===================================*/

/*--------------------------------------------------------
 * CTA principaux - alignement sans icône desktop
 *---------------------------------------------------------*/

@media (min-width: 768px) {

    .tw-cta-button_sans-icone::before {
        content: "";
        width: var(--tw-cta_icon-size);
        height: var(--tw-cta_icon-size);
        flex: 0 0 auto;
    }
}

@media (max-width: 767px) {

    /*--------------------------------------------------------
     * Groupe CTA hero fixé en bas mobile
     *---------------------------------------------------------*/

.tw-cta-group_hero.tw-cta-group_fixed {
        position: fixed;
        left: .0rem;
        right: .0rem;
        bottom: .15rem;
        z-index: 999;
        width: auto;
        max-width: none;
        box-sizing: border-box;
        padding: .5rem;
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(10px);
        border-radius: 0rem;
        box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
        overflow: hidden;
    }
	.tw-cta-group_hero.tw-cta-group_fixed .tw-cta-button {
        flex: 1 1 0;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        padding: .45rem .15rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .05rem;
        text-align: center;
    }
	.tw-cta-group_hero.tw-cta-group_fixed .tw-cta-button_icon {
		display: none;
	}

}

/*=======================================
 *
 * TARIFS
 *
 * ======================================*/
.twcol-abonnements {
	padding: 20px;
	background : var(--tw-section-bg-1);
}

/*---------------------------------------------
 * ABONNEMENTS : 3 par ligne
 *---------------------------------------------*/

.twcol-abonnements__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 1rem;
}

.twcol-abonnements__items > .twcol-item {
    box-sizing: border-box;
    flex: 0 0 calc((100% - 2rem) / 3);
}

/*---------------------------------------------
 * Smartphone : 1 abonnement par ligne
 *---------------------------------------------*/

@media (max-width: 767px) {

    .twcol-abonnements__items > .twcol-item {
        flex-basis: 100%;
    }

}
/*----------------------------------------------
  CARTES HORAIRES
------------------------------------------------*/

.twcol-carte .twcol-collection__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    padding: 0;
    list-style: none;
}

.twcol-carte__item {
    flex: 0 1 calc((100% - 2rem) / 3);
    padding: 1rem;
    border: 1px solid rgba(107, 47, 0, 0.18);
    border-radius: 6px;
}

.twcol-carte__item .twcol__label,
.twcol-carte__item .twcol-item__price {
    font-weight: 700;
}


/*----------------------------------------------
  ADHÉSION
----------------------------------------------*/

.twcol-adhesion__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    padding: 0;
    list-style: none;
}

.twcol-adhesion__item {
    padding: 1rem;
    border: 1px solid rgba(107, 47, 0, .18);
    border-radius: 6px;
}

.twcol-adhesion__main {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.twcol-adhesion__item:last-child {
    grid-column: 1 / -1;
}

.twcol-adhesion .twcol-item__price {
    flex-shrink: 0;
    font-weight: 700;
}

.twcol-adhesion .twcol-item__description {
    margin-top: .5rem;
}
/*=======================================
 * horaires
 * ======================================*/
.tw-hero_text .tw-horaire {
	margin-bottom: 20px;
}
.tw-horaire_note.tw-horaire_note-general {
	font-weight: 600;
}

/* liste des jours */

.tw-horaire_list {
	background : #fff;
	padding: 10px;
}
.tw-horaire_row.tw-horaire_row-closed {
	display: none;
}

/*==================================================
 * affichage DATES
 * ================================================*/
.twcol-item_title span.twcol-date-status {
	display: block;
	font-size: 80%;
}

	/*====================================================
	 *
	 * 07.a bouton et autres
	 *
	 * ===================================================*/
h2, h3, h4 {
	color: var(--chp-tw-title_color);
}


h3.tw-item_title
{
    margin: 0 0 .75rem;
    color: var(--chp-titre-color);
    font-size: clamp(1.45rem, 1.4vw, 1.6rem);
    line-height: 1.15;
    font-weight: 500;
}
.chp-titre
 {
    margin: 0 0 .75rem;
    color: var(--chp-titre-color);
    font-size: clamp(1.45rem, 1.4vw, 1.6rem);
    line-height: 1.15;
    font-weight: 700;
}
.tw-item_accroche {
	min-height: 40px;
}
/* mise en avant */

.tw-highlight {
	margin: 1rem 0;
    padding: 1rem;
    border-radius: var(--tw-space_sm);
    background: var(--chp-highlight_bg )!important;
    color: var(--chp-highlight_color);
    text-align: center;

    line-height: 1;
    font-weight: 800;
}
.tw-highlight.tw-highlight_price {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 400;
}
/* PROPRIETAIRE */

.tw-highlight.tw-highlight_price.tarif-proprietaire {
	font-size: clamp(1.2rem, 2vw, 1.5rem);
	color: var(--chp-highlight_bg);
	background: var(--chp-highlight_bg_light )!important;
}
.tw-highlight.tw-highlight_price.tarif-proprietaire::before {
	content : 'propriétaire';
	display: block;
	font-size: 70%;
	margin-bottom : 10px;
}
.twcol-item span.tw-align-right {
	    display: inline-block;
	float: right;
}