/*
Theme Name: Twal Abrazo
Template: twal
Version: 1.0.0
*/


:root {
	--tmp_tw-font-body_size : 10px;
/*---------------------------------------------------------
A.1 — Couleur principale
---------------------------------------------------------*/

    --tw-variante_couleur: #592a38;
    --tw-variante_couleur-rgb: 89, 42, 56;
	--tw-couleur_cta : #5A3032; /* brun */

/*---------------------------------------------------------
A.2 — Hero
---------------------------------------------------------*/

    --tw-hero_bg: #fff4e2;
    --tw-hero-secondaire_bg: var(--tw-variante_couleur);
    --tw-hero_overline-color: #ffffff;
    --tw-hero_title-color: #ffffff;
    --tw-hero_text-color: #ffffff;
	--tw-hero_title-font-size : clamp(35px, 4vw, 54px);

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

    --tw-section-even_bg: #ffffff;
    --tw-section-even_inner-bg: rgba(var(--tw-variante_couleur-rgb), 0.01);
    --tw-section-even_overline-color: #592a38;
    --tw-section-even_title-color: #592a38;
    --tw-section-even_lead-color: #592a38;
    --tw-section-even_text-color: #592a38;


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

    --tw-section-odd_bg: #FFF4E2;
    --tw-section-odd_inner-bg:  #FFF4E2;
    --tw-section-odd_overline-color: #592a38;
    --tw-section-odd_title-color: #592a38;
    --tw-section-odd_lead-color: #592a38;
    --tw-section-odd_text-color: #592a38;


/*---------------------------------------------------------
A.5 — Pied de page
---------------------------------------------------------*/

    --tw-footer_bg: var(--tw-variante_couleur);
    --tw-footer_color: #ffffff;
    --tw-footer_link-color: #ffffff;


/*---------------------------------------------------------
A.6 — Boutons d'action
---------------------------------------------------------*/

    --tw-cta_accent: #f3b4bd;
    --tw-cta_accent-rgb: 243, 180, 189;
    --tw-cta_contrast: #592a38;
/*---------------------------------------------------------
     B.7 — Boutons génériques
     ---------------------------------------------------------*/

    --tw-button_bg: rgba(255, 255, 255, 1);
    --tw-button_bg-hover: #ffffff;
    --tw-button_color: var(--tw-couleur_cta);
    --tw-button_icon-bg: transparent;
    --tw-button_icon-color: var(--tw-couleur_cta);
    --tw-button_shadow: 0 10px 24px rgba(0, 0, 0, .06);
    --tw-button_shadow-hover: 0 14px 30px rgba(0, 0, 0, .10);
/*---------------------------------------------------------
A.5 — Pied de page
---------------------------------------------------------*/

    --tw-footer_bg: var(--tw-variante_couleur);
    --tw-footer_color: #ffffff;
    --tw-footer_link-color: #ffffff;


/*---------------------------------------------------------
A.6 — Boutons d'action
---------------------------------------------------------*/

    --tw-cta_accent: #f3b4bd;
    --tw-cta_accent-rgb: 243, 180, 189;
    --tw-cta_contrast: #592a38;


/*---------------------------------------------------------
A.5 — Pied de page
---------------------------------------------------------*/

    --tw-footer_bg: var(--tw-variante_couleur);
    --tw-footer_color: #ffffff;
    --tw-footer_link-color: #ffffff;


/*---------------------------------------------------------
A.6 — Boutons d'action
---------------------------------------------------------*/

    --tw-cta_accent: #f3b4bd;
    --tw-cta_accent-rgb: 243, 180, 189;
    --tw-cta_contrast: #592a38;



}
/*==============================================
 * MENU
 * ============================================*/
@media (min-width: 992px) {
    .tw-navbar_menu > .menu-item > a {
        display: inline-flex;
        align-items: center;
        min-height: var(--tw-navbar_height);
        margin: 10px auto;
        padding: 0 10px;
        color: var(--tw-menu-item_color, #000000);
        background: transparent;
        font-family: var(--tw-font_body);
        font-size: 14px;
        font-weight: 500;
        letter-spacing: .045em;
        text-transform: none;
        text-decoration: none;
        transition: color .2s ease, background-color .2s ease;
    }
}
/*--------------------------------------------------------
 * PRODUITS
 * -------------------------------------------------------*/
/*---------------------------------------------------------
 A — Page Produit : variables
 ---------------------------------------------------------*/

.tw-product {
    --tw-product-container: var(--tw-section_container, 1180px);
    --tw-product-media-width: 50%;
    --tw-product-content-bg: #ffffff;
    --tw-product-section-bg: var(--tw-section-even_bg, transparent);
    --tw-product-content-padding: clamp(2rem, 4vw, 4rem);
    --tw-product-image-position: center center;
    --tw-product-mobile-image-ratio: 4 / 3;
    --tw-product-section-padding-y: clamp(0rem, 0vw, 0rem);

    /* Réutilisation des styles typographiques du Hero hors du composant Hero. */
    --tw-hero-context-overline: var(
        --tw-section-even_overline-color,
        var(--tw-color_primary, currentColor)
    );
    --tw-hero-context-title: var(
        --tw-section-even_title-color,
        var(--tw-color_heading, currentColor)
    );
    --tw-hero-context-text: var(
        --tw-section-even_text-color,
        var(--tw-color_text, currentColor)
    );

    width: 100%;
    padding-block: var(--tw-product-section-padding-y);
    background: var(--tw-product-section-bg);
}

.tw-product_title.tw-hero_title {
	    font-size: clamp(35px, 4vw, 54px);
}
section.tw-product {
	background: var(--tw-hero_bg);
}

.tw-page_type-produit,  .tw-page_type-produit .tw-section_standard.tw-section_even {
	background: var(--tw-hero_bg)!important;
}
.tw-page_type-produit .tw-section_inner {
	background: #fff;
}

.tw-section_inner {
	border: solid 0px;
}
.home h2.tw-section_title {
	color : #5A3032; /* brun cta */ /* #1d3859;  bleu navy */
	    font-size: 42px;
	
}

/*========================================
 * HERO
 * ======================================*/

/*---- image en haut de l'écran ----*/
@media (max-width: 900px) {
    .tw-hero_side .tw-hero_inner {
        order: 2;
        width: 100%;
    }
	
	/* surrpimer le dégradé sur l'image */
	.tw-hero.tw-hero_side.tw-hero_overlay-mobile-gradient .tw-hero_media::before, .tw-hero.tw-hero_side.tw-hero_overlay-mobile-auto .tw-hero_media::before {
        display: block;
        opacity: 1;
        background: transparent;
    }
	
	/*--- ratio de l'image */
	    .tw-hero_side .tw-hero_media, .tw-hero_side.tw-hero_image-left .tw-hero_media, .tw-hero_side.tw-hero_image-right .tw-hero_media
 {

        aspect-ratio: 1 / 1;
    }
}


/*=============================================
 * produit
 * ============================================*/
/*==============================================
 * CTA
 * ============================================*/
.tw-cta-button {
	background: var(--tw-couleur_cta)!important; /* brun */
	color : #FFF4E2!important;
}

/*------------------------------------------
 * <blockquote>
 * --------------------------------------*/
blockquote {
	border-left: solid 2px var(--tw-couleur_cta);
}
blockquote {
  background: #FFFAF2;
  border-left: 5px solid var(--tw-couleur_cta);
  margin: 5px 5px 10px 5px;
  padding: 5px 5px 10px 10px;
  font-style: italic;
}
blockquote p {
	display: inline;
}
/*=================================================
 * LISTE A PUCES NUMEROTEES
 * ===============================================*/
ol.liste-arguments {
  counter-reset: arguments;
  list-style: none;
  margin: 0;
  padding: 0;
  color: #5a3032;
	padding-bottom : 10px;
	margin-bottom: 10px;
}

ol.liste-arguments li {
  counter-increment: arguments;
  position: relative;
  padding: 22px 0 22px 70px;
  border-bottom: 1px solid rgba(90, 48, 50, 0.18);
  color: #735b57;
  font-size: 14px;
  line-height: 1.6;
}

ol.liste-arguments li:first-child {
  padding-top: 0;
}

ol.liste-arguments li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

ol.liste-arguments li::before {
	tmp_display: none;
  content: counter(arguments, decimal-leading-zero);
  position: absolute;
  top: 22px;
  left: 0;
  color: var(--tw-couleur_cta);
  font-size: 22px;
  tmp_font-style: italic;
  line-height: 1.2;
}

ol.liste-arguments li:first-child::before {
  top: 0;
}

.liste-arguments strong {
  display: block;
  margin-bottom: 4px;
  color: #5a3032;
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
}

.liste-arguments br {
  display: none;
}

@media (max-width: 600px) {
  .liste-arguments li {
    padding-left: 50px;
    font-size: 13px;
  }

  .liste-arguments li::before {
    font-size: 19px;
  }

  .liste-arguments strong {
    font-size: 16px;
  }
}

/*===================================================
 * LISTE CARTES
 * ==================================================*/

.liste-cartes {
	list-style: none;
	margin: 0;
	padding: 0;
}
.liste-cartes br {
  display: none;
}
.liste-cartes > li {
	min-height: 142px;
	padding: 28px 24px;
	box-sizing: border-box;



	text-align: center;
}

.liste-cartes strong {
	display: block;
	margin-bottom: 8px;

	color: #5a3032;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.25;
}

.liste-cartes span {
	display: block;

	color: #5a3032;
	font-size: 14px;
	line-height: 1.35;
}

/* bloc-cartes */
.liste-cartes > li, .bloc-cartes {
	border: 1px solid #ead9ca;
	background-color: #fffaf3;
}
/*====================================================
 * HOME 
 * =================================================*/
.home .tw-section.tw-section_text-only, .home .tw-section.tw-section_text-only .tw-section_accroche {
	text-align : center!important;

}
.home .tw-section.tw-section_text-only .tw-section_accroche {
	margin : auto;
}
.home .tw-layout_content {

    font-size: clamp(1rem, 1vw, 1rem);
    line-height: 1.75;
}
/*---------------------------------------------------------
 Responsive
 ---------------------------------------------------------*/

@media (max-width: 800px) {
	.liste-cartes.tw-grid_3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.liste-cartes.tw-grid_3 {
		grid-template-columns: 1fr;
	}
}
/*================================================
 * CONTENU
 * ==============================================*/


.tw-layout_content.tw-editorial-content h2, .tw-layout_content h2, .tw-section_inner h2 {
	color: var(--tw-section_title-color);
	font-size: clamp(2.2rem, 2.3vw, 2.2rem);
    font-weight: 500;
	
	    line-height: 1.15;
    margin: 0px 0px 0.65rem;
}
.tw-layout_content.tw-editorial-content h2::after {
    content: "";
    display: block;
    width: 50%;
    height: 1px;
    margin-top: 0.5em;
	margin-bottom : 0.8em;
    background: linear-gradient(
        90deg,
        var(--tw-section_title-color),
        transparent
    );
}
.tw-layout_content h3, .tw-section_inner h3,.tw-layout_content.tw-editorial-content h3  {
    color: var(--tw-section_title-color);
    font-size: clamp(1.9rem, 2vw, 1.9rem);
    font-weight: 400;
    line-height: 1.15;
    margin: 0px 0px 0.65rem;
}
/*=====================================
 * AVIS
 * ===================================*/
/*---------------------------------------------------------
 Grille des avis
 ---------------------------------------------------------*/

.tw-avis-grid {
    --tw-grid-min: 320px;
	 
}
.tw-avis >li {
	text-align: left;
}
.abz-engagement > li {
	text-align: center;
}
/*---------------------------------------------------------
 Cartes des avis
 ---------------------------------------------------------*/

.tw-avis-card {
    display: flex;
    height: 100%;
	padding: 10px 10px;
	max-width: 400px;
}

.tw-avis-card__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.tw-avis header {
		padding-bottom : 5px;
	margin-bottom : 5px;
}
p.tw-avis-card__title {
    margin: 0;
	font-size: 14px!important;
	font-weight: 600;

}

.tw-avis-card__date {
    white-space: nowrap;
    font-size: 11px;
    color: #8A6D60;
    letter-spacing: 0.04em;
    flex-shrink: 0;

}

.tw-avis .description {
	margin-top: 5px;
	padding-top: 5px;
    flex: 1;
font-style: italic;
    font-weight: 400;
    font-size: 14px!important;
    line-height: 1.45;
    color: #5A3032;
    margin: 0;
    letter-spacing: 0.005em;
}

.tw-avis .signature {
    margin-top: auto;
	font-size: var(--tw-font_xs);
	text-align: right;
	white-space: pre-line;
}
/* engagement */
.abz-engagement .tw-layout_media {
	max-width: 120px;
	max-height: 120px;
	margin: auto;
	margin-bottom : 20px;

}
.abz-engagement .tw-layout_media img {
		border-radius: 50%;
	border: solid 0px;
}
/*===============================================
 * BOUTON D'ACTION
 * *******************************************/

/*==================================================
 * 
 * SECTION CTA
 * 
 * =================================================*/
#cadeau-pour-mere {
	--cta-local_bg : #5a3032;
	--cta-local_color : #FFF4E2;
	--cta-local_color-surtitre : #B8956A;
	background : var(--cta-local_bg);
}
#cadeau-pour-mere .tw-section_inner {
	background : transparent;
}
#cadeau-pour-mere .tw-section_inner .tw-section_header {
	color: #fff;
}
#cadeau-pour-mere .tw-section_inner .tw-section_header .tw-section_surtitre {
	color: var(--cta-local_color-surtitre);
}
#cadeau-pour-mere .tw-section_inner .tw-section_header .tw-section_title {
	color: var(--cta-local_color);
}
#cadeau-pour-mere .tw-section_inner .tw-section_header .tw-section_accroche{
	color: var(--cta-local_color);
}

#cadeau-pour-mere .tw-section_inner .tw-layout_content {
	color: var(--cta-local_color);
}
#cadeau-pour-mere .tw-section_inner .tw-layout_content h3 {
	color: var(--cta-local_color-surtitre);
	    font-size: clamp(20px, 1.6vw, 30px);

}