/***************************************************
 * 
 *  PRINT
 * 
 * TWCOL TWAL COLONNES
 * ***********************************************/

/* ============== PRINT P R I N T ===========================================
 * 
 * 
   PRINT — ACTIVITÉS / STAGES CLUB HIPPIQUE DE POLLIONNAY
   Imprime uniquement :
   - le H1 du hero
   - la liste .twcol-collection_items


   ========================================================= */

@media print {

    /* =====================================================
       01. PARAMÈTRES FACILEMENT MODIFIABLES
       ===================================================== */

    :root {
        /* Format page */
        --print-page-width: 210mm;
        --print-page-height: 297mm;

        /* Image de fond */
        --print-bg-image: url("https://www.clubhippiquedepollionnay.com/v2/wp-content/uploads/2026/06/bg-affiche-balade.jpg");
		--print-bg-image: url("https://www.clubhippiquedepollionnay.com/v2/wp-content/uploads/2026/07/bg-pollionnay-stage-ete-2026-04.jpg");
		--print-bg-image: url("https://www.clubhippiquedepollionnay.com/v2/wp-content/uploads/2026/07/bg-pollionnay-stage-ete-2026-05.jpg");
        --print-bg-opacity: .82;

        /* Zone HERO : logo + titre */
        --print-hero-top: 14mm;
        --print-hero-left: 18mm;
        --print-hero-right: 18mm;
        --print-hero-height: 18mm;

        /* Logo */
        --print-logo-width: 22mm;
        --print-logo-height: 22mm;
        --print-logo-gap: 7mm;

        /* Titre */
        --print-title-font-size: 22pt;

        /* Espacement entre le hero et la liste */
        --print-gap-after-hero: 8mm;
		
		/* CARTOUCHE */
		--print-cartouche-radius : 10px;
		--print-cartouche-bg : rgba(255,255,255,0.4);
		--print-cartouche-color : #cfb79b;
		
        /* Zone LISTE */
        --tmp_print-items-top: calc(
            var(--print-hero-top) +
            var(--print-hero-height) +
            var(--print-gap-after-hero) +
			15mm
        );
		--print-items-top: 12mm;
        --print-items-left: 18mm;
        --print-items-right: 18mm;
        --print-items-bottom: 15mm;

        --print-items-height: calc(
            var(--print-page-height) -
            var(--print-items-top) -
            var(--print-items-bottom)
        );

        /* Largeur des pastilles */
        --print-item-width: 145mm;

        /* Style des pastilles */
        --print-item-bg: transparent; /*rgba(255,255,255,0.2);*/ /*#FFFAF2; */
        --print-item-radius: 3px; /* 999px; */
        --print-item-padding-y: 3mm;
        --print-item-padding-x: 8mm;
        --print-item-gap: 3.5mm;
		--print-item-border-color : #cfb79b;

        /* Texte des items */
        --print-date-font-size: 9.5pt;
        --print-title-item-font-size: 13pt;
		
		/* grilles info  */
		--tw-card_bg : #faf7f2;
		--tw-card_border-color : #eadfce;
		--tw-card_title-color : #7a4b25;
		--tw-card_title-font-size : 1.35rem;
    }


    /* =====================================================
       02. PAGE ET FOND
       ===================================================== */

    @page {
        size: A4 portrait;
        margin: 0;
    }

    html,
    body {
        width: var(--print-page-width) !important;
        height: var(--print-page-height) !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        color: #000 !important;

        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    body::before {
        content: "";
        visibility: visible !important;

        position: fixed;
        inset: 0;
        z-index: 0;

        tmp_background-image:
            linear-gradient(
                rgba(255, 255, 255, var(--print-bg-opacity)),
                rgba(255, 255, 255, var(--print-bg-opacity))
            ),
            var(--print-bg-image);
		 background-image: var(--print-bg-image);

        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;

        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }


    /* =====================================================
       03. MASQUAGE GLOBAL
       ===================================================== */

    body * {
        visibility: hidden !important;
    }

    .tw-page {
        position: static !important;
        width: var(--print-page-width) !important;
        min-height: var(--print-page-height) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: transparent !important;
    }


    /* =====================================================
       04. HERO IMPRIMÉ : LOGO + H1 UNIQUEMENT
       ===================================================== */

    .tw-hero {
        visibility: visible !important;

        position: absolute !important;
        top: var(--print-hero-top) !important;
        left: var(--print-hero-left) !important;

        width: calc(
            var(--print-page-width) -
            var(--print-hero-left) -
            var(--print-hero-right)
        ) !important;

        height: var(--print-hero-height) !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        background-image: none !important;

        overflow: visible !important;
        z-index: 2 !important;
        box-sizing: border-box !important;
		
    }

    .tw-hero::before {
        content: "";
        visibility: visible !important;

        position: absolute !important;
        top: 50% !important;
        left: 0 !important;

        width: var(--print-logo-width) !important;
        height: var(--print-logo-height) !important;

        transform: translateY(-50%) !important;

        background-image: url("https://www.clubhippiquedepollionnay.com/v2/wp-content/uploads/2026/06/logo-pollionnay-vers-droite-150.jpg");
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
    }

    .tw-hero_inner,
    .tw-hero_content {
        visibility: visible !important;

        position: static !important;
        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        box-shadow: none !important;
		
		
    }

    .tw-hero_title {
        visibility: visible !important;

        position: absolute !important;
        top: 50% !important;
        left: calc(
            var(--print-logo-width) +
            var(--print-logo-gap)
        ) !important;

        transform: translateY(-50%) !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #784015 !important;
        font-size: var(--print-title-font-size) !important;
        line-height: 1.1 !important;
        font-weight: 600 !important;

        background: transparent !important;
    }
	
	.tw-hero_title::after {
		margin-top: 5px;
		margin-bottom : 10px;
		content: "Club Hippique de Pollionnay";
		 visibility: visible !important;
		display: block;
		font-weight: 400 !important;
		font-size: 60%;
	}
	
	

    /* =====================================================
       05. LISTE DES ITEMS UNIQUEMENT
       ===================================================== */

	.twcol-collection__items {
		display: block;
		position: fixed !important;
		top: var(--print-items-top) !important;
		left: var(--print-items-left) !important;

		width: calc(
			var(--print-page-width) -
			var(--print-items-left) -
			var(--print-items-right)
		) !important;

		max-height: var(--print-items-height) !important;

		margin: 0 !important;
		padding: 0 !important;

		/*background: transparent !important;*/
		background: rgba(255,255,255,0.8) !important;

		overflow: visible !important;

		z-index: 2 !important;
		box-sizing: border-box !important;
		visibility: visible !important;

	}

    .twcol-collection__items * {
        visibility: visible !important;
    }

	/*=============================================
	    CARTOUCHE
	==========================================*/
	.twcol-collection__items {
		padding: 10mm!important;
		background : var(--print-cartouche-bg) !important;
		border : solid 1px var(---print-cartouche-color) !important;
		 border-radius: var(--print-cartouche-radius) !important;
	}
	.twcol-collection__items::after {
		content:"<a href=# class='bt-cta'>toto</a>";
			padding: 10mm!important;
	}
    /* =====================================================
       06. NETTOYAGE DES ÉLÉMENTS INTERNES NON SOUHAITÉS
       ===================================================== */

    .twcol-item_content,
    .twcol-item_description,
    .twcol-item_meta,
    .twcol-field,
    .twcol-actions,
    .twcol-button,
    .twcol-card-toggle,
    .twcol-admin-link,
    .twcol-debug,
    .tw-section-edit-link {
        display: none !important;
    }


    /* =====================================================
       07. STYLE DES ITEMS
       ===================================================== */

    .twcol-item {
        display: block !important;

        width: var(--print-item-width) !important;
        max-width: 100% !important;

        margin: 0 auto var(--print-item-gap) auto !important;
        padding: 0 !important;

        break-inside: avoid !important;
        page-break-inside: avoid !important;

        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
		
    }

    .twcol-item .tw-layout {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .twcol-item  {
        display: block !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: var(--print-item-padding-y) var(--print-item-padding-x) !important;

        box-sizing: border-box !important;

        text-align: center !important;

        background: var(--print-item-bg) !important;

        border-radius: var(--print-item-radius) !important;
        box-shadow: none !important;
        border: none !important;
		border-bottom : solid 1px var(--print-item-border-color) !important;
		
    }

    h3.twcol-item_title,
    h3.tw-item_title {
        display: block !important;

        margin: 0 0 1mm 0 !important;
        padding: 15px 0 !important;

        color: #000 !important;
        font-size: var(--print-date-font-size) !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        text-align: center !important;
		 border: none !important;
		
    }

    .twcol-item_subtitle,
    .tw-item_subtitle {
        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #000 !important;
        font-size: var(--print-title-item-font-size) !important;
        line-height: 1.2 !important;
        font-weight: 500 !important;
        text-align: center !important;
    }



    /* =====================================================
       08. SÉCURITÉS GÉNÉRALES
       ===================================================== */

    a {
        color: #000 !important;
        text-decoration: none !important;
    }

    img {
        max-width: 100% !important;
        height: auto !important;
    }
}
/*---------  FIN PRINT ----------*/
 

/*===============================================
 * TEMPLATES
 * Horaires
 * =============================================*/


/* La colonne image reste dans la grille et devient sticky. */
.main-container.horaires .tw-layout_media-text > .tw-layout_media {
    position: sticky;
    top: 80px;
    align-self: start;
    z-index: 2;
}

/* Image fluide dans sa colonne. */
.main-container.horaires .tw-layout_media img {
    display: block;
    width: 100%;
    height: auto;
}

/* Mobile : retour à un comportement normal. */
@media (max-width: 980px) {
    .main-container.horaires .tw-layout_media-text > .tw-layout_media {
        position: static;
    }
}


/*===============================================
 * Items horaires
 * =============================================*/

article.twcol-horaire {
    margin-top: 5px;
    margin-bottom: 5px;
}
.twcol-item.twcol-horaire {
    background: transparent;
    border: solid 0px var(--tw-card_border-color);
    padding: 0 /* var(--tw-space_sm); */
    border-radius: var(--tw-space_sm);
	padding: 5px;

}
.twcol-horaires h3.twcol-section_title {
	margin : 10px 0;
	padding : 10px 0;
}
.twcol-horaires__items > .twcol-item:nth-child(odd) {
    background-color: #f5f1e8;

}

.tmp_twcol-horaires__items > .twcol-item:nth-child(even) {
    background-color: #ffffff;
}
article.twcol-horaire span {
    tmp_display: inline-block;

}

.twcol-horaire__heure {
    width: 100px;
}

.twcol-horaire__titre {
    width: 300px;
	font-weight: 400;
	
}
.twcol-horaire__titre::before {
	content : ' - ';
}
.twcol-horaire__moniteur {
    float: right;
    font-size: 90%;
    color: var(--tw-color_muted);
}


/***************************************
 * FORMULAIRE
 * *************************************/

/*===============================================
* Jours possibles
*===============================================*/

.tw-form-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.25rem;
}

.tw-form-checkboxes label {
    display: inline-flex !important;
    align-items: center;
    gap: .45rem;
    width: auto;
    margin: 0;
    color: inherit;
    cursor: pointer;
    opacity: 1;
    visibility: visible;
}

.tw-form-checkboxes input[type="checkbox"] {
    appearance: auto;
    -webkit-appearance: checkbox;
    position: static;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin: 0;
    padding: 0;
    opacity: 1;
    visibility: visible;
    flex: 0 0 auto;
}

/************************************************
 * 
 * CALL TO ACTION GLOBAL
 * 
 * **********************************************/

/*================================
* CTA GLOBAL AVANT LE FOOTER
*=================================*/

.twchp-global-cta {
    padding-block: clamp(48px, 6vw, 80px);
    background: #E4D1AB;
}


/*-----------------------------------------------
* Cartouche intérieur
*----------------------------------------------*/

.twchp-global-cta .tw-section_inner {
    padding: clamp(20px, 3vw, 38px);
    background: #FBF7EF;
    border: 1px solid rgba(107, 47, 0, 0.16);
    border-radius: 24px;
}


/*-----------------------------------------------
* Contenu éditorial
*----------------------------------------------*/

.twchp-global-cta__content {
    align-self: center;
}

.twchp-global-cta__titre {
    color: #6B2F00;
}

.twchp-global-cta__accroche,
.twchp-global-cta__texte {
    color: #493629;
}


/*-----------------------------------------------
* Image
*----------------------------------------------*/

.twchp-global-cta__media img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 380px;
    object-fit: cover;
    border-radius: 18px;
}
.twchp-global-cta {
     background: #D9BC82!important;
}

.twchp-global-cta .tw-section_inner {
   background: #FFF9EF;
	
}

.twchp-global-cta__content::before {
    content: "♞";
    display: block;
    width: fit-content;
    font-size: 1.8rem;
    line-height: 1;
    color: rgb(200, 155, 60);
    transform: scaleX(-1);
    margin-bottom: 12px;
}

/*================================
* BOUTON DU CTA GLOBAL
*=================================*/

.twchp-global-cta .tw-btn_primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 13px 18px;

    color: #fffaf2;
    background: #6b2f00;
    border: 1px solid #6b2f00;
    border-radius: 10px;

    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.twchp-global-cta .tw-btn_primary::after {
    content: "→";

    display: grid;
    place-items: center;

    width: 26px;
    height: 26px;

    color: #6b2f00;
    background: #f4d991;
    border-radius: 50%;

    font-size: 16px;
    line-height: 1;
}

.twchp-global-cta .tw-btn_primary:hover,
.twchp-global-cta .tw-btn_primary:focus-visible {
    color: #fffaf2;
    background: #512300;
    border-color: #512300;
    transform: translateY(-2px);
}

.twchp-global-cta .tw-btn_primary:visited {
    color: #fffaf2;
}

/*=======================================
 *
 * STAGES / ÉVÈNEMENTS : LIENS DISCRETS
 *
 * ======================================*/

.twchp-dated-list {
    margin: .65rem 0 0;
    padding: 0;
    list-style: none;
}

.twchp-dated-list__item {
    border-bottom: 1px solid rgba(69, 85, 56, .16);
}

.twchp-dated-list__link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: .75rem;
	margin-left: 0.55rem;
    padding: .55rem 0;
    color: var(--tw-color_primary-dark, #2F3B27);
    text-decoration: none;
}

.twchp-dated-list__label {
    font-weight: 400;
}

.twchp-dated-list__date {
    color: var(--tw-color_muted, rgba(47, 48, 42, .72));
    font-size: .95em;
    white-space: nowrap;
}

.twchp-dated-list__link::after {
    content: '→';
    color: var(--tw-color_accent, #B98552);
    font-weight: 700;
    transition: transform .18s ease;
}

.twchp-dated-list__link:hover,
.twchp-dated-list__link:focus-visible {
    color: var(--tw-color_primary, #455538);
}

.twchp-dated-list__link:hover::after,
.twchp-dated-list__link:focus-visible::after {
    transform: translateX(.2rem);
}
/*-----------------------------------------
 *
 * STAGES / ÉVÈNEMENTS : MOBILE
 *
 * -----------------------------------------*/

@media (max-width: 767px) {

    .twchp-dated-list__link {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: .15rem .75rem;
        padding: .7rem 0;
    }

    .twchp-dated-list__label {
        grid-column: 1;
        grid-row: 1;
    }

    .twchp-dated-list__date {
        grid-column: 1;
        grid-row: 2;
        white-space: normal;
    }

    .twchp-dated-list__link::after {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }
}