/*
Theme Name:   Elementor Child
Theme URI:    https://atelierduport.ch/
Description:  Thème enfant pour Divi
Author:       Café Moka
Author URI:   https://cafemoka.online
Template:     hello-elementor
Version:      1.0.0
Text Domain:  divi-child
*/

/* Inverser colonnes sur mobile et tablette */
@media (max-width: 980px) {
    .reverse-mobile {
        display: flex !important;
        flex-direction: column-reverse !important;
    }
    
    .reverse-mobile .et_pb_column {
        width: 100% !important;
        margin-bottom: 30px !important;
    }
    
    .reverse-mobile .et_pb_column:last-child {
        margin-bottom: 0 !important;
    }
}

/* ── Titre article : style choisi dans l'éditeur ── */

.ap-title-hero-section h1.elementor-heading-title {
	font-family: var(--e-global-typography-primary-font-family), Sans-serif !important;
	font-size: var(--e-global-typography-primary-font-size) !important;
	font-weight: var(--e-global-typography-primary-font-weight) !important;
	line-height: var(--e-global-typography-primary-line-height) !important;
}

.ap-title-en-tete-section h1.elementor-heading-title {
	font-family: var(--e-global-typography-secondary-font-family), Sans-serif !important;
	font-size: var(--e-global-typography-secondary-font-size) !important;
	font-weight: var(--e-global-typography-secondary-font-weight) !important;
	line-height: var(--e-global-typography-secondary-line-height) !important;
}

/* ── Contenu article : H2 et H3 → global "titre h3" + bleu logo ── */

.elementor-widget-theme-post-content h2,
.elementor-widget-theme-post-content h3 {
	font-family: var(--e-global-typography-201adcf-font-family), Sans-serif;
	font-size: var(--e-global-typography-201adcf-font-size);
	font-weight: var(--e-global-typography-201adcf-font-weight);
	line-height: var(--e-global-typography-201adcf-line-height);
	color: var(--e-global-color-primary);
}

/* ── Bouton Elementor : chevron hover style Atelier du Port ── */

/* Supprimer le ::after de Divi sur les boutons Elementor */
.elementor-widget-button::after,
.elementor-widget-button .elementor-button::after {
	display: none !important;
	content: none !important;
}

/* Border-radius arrondi + transition smooth */
.elementor-widget-button .elementor-button {
	border-radius: 30px !important;
	transition: all 300ms ease 0ms;
}

/* Espace pour le chevron au hover */
.elementor-widget-button .elementor-button:hover {
	padding-right: 2em !important;
	padding-left: .7em !important;
}

/* Conteneur texte : alignement chevron */
.elementor-widget-button .elementor-button-content-wrapper {
	display: inline-flex !important;
	align-items: center !important;
}

/* Chevron après le texte (SVG mask — ETmodules non disponible hors Divi) */
.elementor-widget-button .elementor-button-text::after {
	content: "" !important;
	display: inline-block;
	vertical-align: middle;
	width: 0;
	height: .6em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	overflow: hidden;
	opacity: 0;
	transition: all 300ms ease 0ms;
}

.elementor-widget-button .elementor-button:hover .elementor-button-text::after {
	width: .45em;
	opacity: 1;
	margin-left: .55em;
}

/* ── Section "Lire aussi" — Posts Cards ── */

/* Carte entière cliquable */
.elementor-posts--skin-cards .elementor-post__card {
	position: relative;
}

.elementor-posts--skin-cards .elementor-post__title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* Thumbnail link et read-more restent cliquables par-dessus l'overlay */
.elementor-posts--skin-cards .elementor-post__thumbnail__link,
.elementor-posts--skin-cards .elementor-post__read-more {
	position: relative;
	z-index: 1;
}

/* Badge au-dessus du thumbnail */
.elementor-posts--skin-cards .elementor-post__badge {
	z-index: 2;
}

/* Zoom-in et assombrissement au hover de toute la carte */
/* Transition activée uniquement après chargement pour éviter l'animation initiale */
.transitions-ready .elementor-posts--skin-cards .elementor-post__thumbnail img {
	will-change: transform;
	transition: filter .3s, transform .4s;
}

.elementor-posts--skin-cards .elementor-post__card:hover .elementor-post__thumbnail img {
	transform: scale(1.04) translate(-50%, -50%);
	filter: brightness(.93);
}

/* Hover titre et "Lire l'article" */
.elementor-posts--skin-cards .elementor-post__title a,
.elementor-posts--skin-cards .elementor-post__read-more {
	transition: text-decoration-color 300ms ease;
	text-decoration: underline;
	text-decoration-color: transparent;
}

.elementor-posts--skin-cards .elementor-post__card:hover .elementor-post__title a,
.elementor-posts--skin-cards .elementor-post__card:hover .elementor-post__read-more {
	text-decoration-color: currentColor;
}

/* ── Header Elementor : sticky behaviour ── */

/* Transition box-shadow sur l'outer container */
.elementor-element-428a15d {
	transition: box-shadow 400ms cubic-bezier(.25,.46,.45,.94);
}

/* Transition padding sur l'inner container (là où Elementor applique le padding via var()) */
.elementor-element-428a15d > .e-con-inner {
	transition:
		padding-block-start 400ms cubic-bezier(.25,.46,.45,.94),
		padding-block-end   400ms cubic-bezier(.25,.46,.45,.94);
}

/* Ombre au scroll */
.elementor-element-428a15d.elementor-sticky--effects {
	box-shadow: 0px 4px 18px -12px rgba(28,28,28,0.3) !important;
}

/* Collapse padding au scroll */
.elementor-element-428a15d.elementor-sticky--effects > .e-con-inner {
	padding-block-start: 10px !important;
	padding-block-end:   10px !important;
}

/* Transition logo */
.elementor-element-27f713f img {
	transition: width 400ms cubic-bezier(.25,.46,.45,.94) !important;
}

/* Logo réduit au scroll */
.elementor-element-428a15d.elementor-sticky--effects .elementor-element-27f713f img {
	width: 154px !important;
}

/* Chevron après "Lire l'article" */
.elementor-posts--skin-cards .elementor-post__read-more::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	margin-left: .4em;
	width: .5em;
	height: .8em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

p:last-child {
    margin-block-end: 0;
}


/* ── Image Hotspot Elementor : reset styles cassés sans Divi ── */
.e-hotspot__button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	-webkit-appearance: none;
	appearance: none;
	background: none !important;
	border: none;
	padding: 0;
	margin: 0;
	font-family: inherit;
	line-height: 1;
}

	/* Par défaut : pour les grands écrans (ordinateurs) */
	html {
	    scroll-padding-top: 85px; /* Ajuste selon la hauteur de ton header */
	}
	
	/* Tablettes (largeur max de 1024px) */
	@media (max-width: 1024px) {
	    html {
	        scroll-padding-top: 60px; /* Ajuste selon la hauteur du header sur tablette */
	    }
	}
	
	/* Mobiles (largeur max de 768px) */
	@media (max-width: 768px) {
	    html {
	        scroll-padding-top: 60px; /* Ajuste selon la hauteur du header sur téléphone */
	    }
	}