/* 
Theme Name: ARTCOM
Theme URI: https://artcombureautique.fr
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Art'Com Bureautique
Author: Art'Com Bureautique
Author URI: https://artcombureautique.fr
Template: hello-elementor
Version: 3.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
/* Textes */

:root {
    --ink: #20221e;
    --dark: #191b18;
    --cream: #f5f2e9;
    --gold: #dfc172;
    --olive: #424e2a;
    --rust: #9d482a;
    --muted: #68685d;
    --line: #dfdbcf;
}
@media screen and  (max-width : 1440px) {
    h1, h1 span { font-size: calc(24px + (42 - 24) * ((100vw - 320px) / (1440 - 320)))!important; line-height: calc(22px + (44 - 22) * ((100vw - 320px) / (1440 - 320)))!important;}
    h2, h2 span { font-size: calc(18px + (26 - 18) * ((100vw - 320px) / (1440 - 320)))!important; line-height: calc(20px + (28 - 20) * ((100vw - 320px) / (1440 - 320)))!important;}
    h3, h3 span { font-size: calc(15px + (24 - 15) * ((100vw - 320px) / (1440 - 320)))!important; line-height: calc(18px + (26 - 18) * ((100vw - 320px) / (1440 - 320)))!important;}
    }
.titre-gold span {color: #dfc172;;}
    
p { margin-block-end: 0; margin-block-start: 0; }

.elementor-element-bcf1fe5 .elementor-loop-container .elementor-7225 {padding: 15px;}
.w700 span {font-weight: 700;}

/* --------------------------------------------------------------------------
 * Titres dans les boucles de produits
 *
 * Le widget « Titre de l’article » porte la classe .elementor-page-title, et
 * Elementor l’affiche via display: var(--page-title-display). Une page dont le
 * réglage « Masquer le titre » est coché pose --page-title-display: none sur
 * :root : la variable descend dans toute la page et emporte avec elle les
 * titres des modèles de boucle, qui n’ont pourtant rien à voir avec le titre
 * de la page.
 *
 * On rétablit la variable dans les items de boucle uniquement — .e-loop-item
 * et .ue-grid-item pour Unlimited Elements, .swiper-slide pour le carrousel
 * d’Elementor. Le titre de la page, lui, reste bien masqué.
 * ----------------------------------------------------------------------- */

.e-loop-item .elementor-widget-theme-post-title,
.ue-grid-item .elementor-widget-theme-post-title,
.swiper-slide .elementor-widget-theme-post-title {
	--page-title-display: block;
}


/* --------------------------------------------------------------------------
 * Carte produit à visuel débordant (modèle de boucle « Boucle produit V2 »)
 *
 * Le visuel n’est pas recadré : il est simplement plus grand que la carte et
 * décalé vers la droite. C’est overflow:hidden posé sur la carte qui le coupe.
 * On peut donc garder les images telles quelles — ici des PNG carrés à fond
 * transparent — sans en refaire une seule.
 *
 * Trois réglages suffisent à doser l’effet :
 *   --pizz-visuel-largeur  la taille du visuel, en % de la carte
 *   --pizz-visuel-sortie   ce qui dépasse à droite, donc ce qui sera coupé
 *   --pizz-texte-largeur   la place laissée au texte
 * ----------------------------------------------------------------------- */

.pizz-carte {
	--pizz-visuel-largeur: 62%;
	--pizz-visuel-sortie: -14%;
	--pizz-texte-largeur: 58%;

	position: relative;
	overflow: hidden;
}

/* Le texte passe devant, et ne s’étale jamais sous le visuel. */
.pizz-carte .pizz-carte__texte {
	position: relative;
	z-index: 2;
	width: var( --pizz-texte-largeur );
}

/* Le visuel : sorti du flux, centré verticalement, débordant à droite. */
.pizz-carte .pizz-carte__visuel {
	position: absolute;
	z-index: 1;
	top: 50%;
	right: var( --pizz-visuel-sortie );
	left: auto;
	transform: translateY( -50% );
	width: var( --pizz-visuel-largeur );
	padding: 0;
	pointer-events: none; /* il ne doit pas voler le clic aux boutons */
}

.pizz-carte .pizz-carte__visuel img {
	display: block;
	width: 100%;
	height: auto;
}

/* Les boutons de commande restent en bas de la carte. */
.pizz-carte .pizz-carte__texte > .elementor-widget-shortcode {
	margin-top: auto;
}

/* Sur mobile la carte se met à l’endroit : le visuel repasse derrière, plus
   discret, et le texte prend toute la largeur. */
@media ( max-width: 767px ) {
	.pizz-carte {
		--pizz-visuel-largeur: 58%;
		--pizz-visuel-sortie: -18%;
		--pizz-texte-largeur: 100%;
	}

	.pizz-carte .pizz-carte__visuel {
		top: auto;
		bottom: -10%;
		transform: none;
		opacity: .5;
	}
}


/* --------------------------------------------------------------------------
 * Cartes de même hauteur
 *
 * La grille égalise déjà ses cellules — c’est une CSS grid, toutes les cellules
 * d’une rangée font la même hauteur. Mais la carte, elle, gardait sa hauteur
 * naturelle et flottait dans une cellule trop grande : d’où des bords bas
 * désaligned’une carte à l’autre.
 *
 * On fait donc descendre l’étirement jusqu’à elle : la cellule devient flex, le
 * wrapper de boucle qu’Elementor insère entre les deux s’étire, et la carte
 * remplit ce qui reste. Les boutons, déjà poussés par margin-top:auto, se
 * retrouvent alignés au même niveau quelle que soit la longueur de la
 * garniture.
 * ----------------------------------------------------------------------- */

.ue-grid-item,
.swiper-slide:has( .pizz-carte ) {
	display: flex;
	flex-direction: column;
}

/* Le wrapper que met Elementor autour de chaque item de boucle. */
.ue-grid-item > .elementor,
.swiper-slide > .elementor {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.ue-grid-item .pizz-carte,
.swiper-slide .pizz-carte {
	flex: 1 1 auto;
}

/* La colonne texte occupe toute la hauteur pour que les boutons tombent en
   bas. Surtout pas height:100% : la colonne serait alors bornée à la hauteur
   de la carte et son contenu déborderait — coupé net par l’overflow:hidden qui
   sert à rogner le visuel. En flex, l’étirement du parent suffit à lui donner
   toute la hauteur, tout en la laissant grandir si la garniture est longue. */
.pizz-carte .pizz-carte__texte {
	display: flex;
	flex-direction: column;
	align-self: stretch;
}

.pizz-carte .pizz-carte__texte > .elementor-widget-text-editor {
	margin-bottom: 14px;
}