/*
 Theme Name: Hello Elementor Child
 Theme URI: https://visioweb.ca
 Description: Child theme for Hello Elementor
 Author: Visioweb
 Template: hello-elementor
 Version: 1.0.0
*/

/* ============================================== */
/* ====== CODE BY XAVIER HAREL (VISIOWEB) ====== */
/* ========== Custom classes prefix: vw ========= */
/* ============================================== */

/* ======================================= */
/* ============ CSS VARIABLES ============ */
/* ======================================= */

:root {
	--vw-color-1: #DC5E01;
	--vw-color-2: #1A3873;
	--vw-quote-background: #f9f9f9;
	--vw-quote-shadow-color: rgba(0,0,0,0.1);
	--vw-heading-border-color: #cccccc;
	--vw-calendly-bg: #467FF7;
	--vw-calendly-text: #F3F5F8;
	--vw-calendly-border: #3b78f7;
	--vw-selection-bg: #f49857;
	--vw-selection-text: #FFFFFF;
	--vw-white: #ffffff;
	--desktop-header-height: 60px;
	--tablet-header-height: 60px;
	--phone-header-height: 60px;
}

/* ======================== */
/* ========= BASE ========= */
/* ======================== */

/* Ajuster le scrolling des ancres avec sticky header */
html {
	scroll-padding-top: var(--desktop-header-height) !important;
}

/* Largeur minimale du site */
body {
	min-width: 320px;
}

/* Ovverride du style d'Elementor pour les coins des images */
body.elementor-kit-7 img {
	border-radius:0px;
}

/* iframe pour Youtube */
body .elementor iframe[src*="youtube.com"] {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
  height: auto;
  display:block;
  margin:0 auto;
}

/* Section container qui fait toute la largeur de l'écran */
.e-con.vw-section-container {
	--padding-top: 60px;
	--padding-bottom: 60px;
	--padding-left: 60px;
	--padding-right: 60px;
	--row-gap: 60px;
	--column-gap: 60px;
}

/* Hero section */
.e-con.vw-hero-section {
	min-height:400px;
	--padding-top:60px;
	--padding-bottom:60px;
	--padding-left:60px;
	--padding-right:60px;
}

/* ==========================================
   ======== GUTENBERG BLOG FORMATING ========
   =========== Titles and quotes ============ */

/* Bloc de citation */
blockquote {
	font-family:serif;
	font-size: 20px;
	line-height: 1.5em;
	color: var(--vw-color-2);
	border-left: 4px solid var(--vw-color-1);
	padding: 1em 1em;
	margin: 1.5em 0;
	background: var(--vw-quote-background);
	border-radius: 4px;
	box-shadow: 1px 1px 0px var(--vw-quote-shadow-color);
}
/* Marge p de bloc de citation */
.elementor-widget-theme-post-content blockquote p {
	margin: 0;
}
/* h2 dans les articles */
.type-post .elementor-widget-theme-post-content h2 {
	border-bottom: 1px solid var(--vw-heading-border-color);
	padding-bottom: 0.3em;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}
/* h3 dans les articles */
.type-post .elementor-widget-theme-post-content h3 {
	margin-top: 1.2em;
	margin-bottom: 0.4em;
}
/* Tous les h3 */
.elementor-widget-theme-post-content h3 {
	/*padding-left: 0.4em;*/
	/*border-left: 3px solid var(--vw-color-1);*/
}
/* h3 sans border */
.elementor-widget-theme-post-content .h3-no-border h3 {
	border-left: none;
	padding-left: 0;
}

/* h2 dans la politique de confidentialité */
.elementor-element.container-politique h2 {
	color: var(--vw-color-2);
}

/* Liens dans la politique de confidentialité */
.elementor-element.container-politique #cmplz-document a {
	text-decoration: none;
}
.elementor-element.container-politique #cmplz-document a:hover {
	text-decoration: underline;
}

.wrapper-pensee-du-jour {
}

.container-pensee-du-jour {
	margin: 0 auto;
	max-width: 800px;
}

.container-pensee-du-jour iframe body {
	margin:0;
}

/* ========= CALENDLY ========= */
/* Bouton */
.vw-calendly-button {
	font-size: 20px;
	padding: 15px 40px;
	border-radius: 10px;
	background-color: var(--vw-calendly-bg);
	color: var(--vw-calendly-text) !important;
	border: 2px solid var(--vw-calendly-border);
	transition: all 0.2s ease-in-out;
}
/* Bouton hover */
.vw-calendly-button:hover {
	background-color: rgba(0,0,0,0);
	border-color: var(--vw-calendly-text);
}
/* Bouton hover bleu */
.vw-calendly-button.hover-blue:hover {
	color: var(--vw-calendly-bg) !important;
}
/* Bouton hover blanc */
.vw-calendly-button.hover-white:hover {
	color: var(--vw-white) !important;
}

/* ======== LEGAL DOCUMENTS ========= */
/* Titres h2 politique de confidentialité */
.vw-politique-confidentialite h2 {
	padding-top: 20px;
}
/* Politique de cookies auto-générée */
.cmplz-document-ca p {
	font-size: 18px !important;
}
/* Politique de cookies h2 */
.cmplz-document-ca h2 {
	font-size: 32px !important;
	padding-top: 20px;
}

/* ======================================= */
/* ============= TYPOGRAPHY ============== */
/* ======================================= */

/* Modifier le soulignement */
u {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
/* Couleur de la sélection de texte */
::selection {
	background-color: var(--vw-selection-bg);
	color: var(--vw-selection-text);
}

/* ---------------------------------------- */
/* ----- Bottom margin for paragraphs ----- */
/* ---------- 0 - 0.3em - 0.5em ----------- */
/* ---------------------------------------- */
.vw-p-mb-0 p {
	margin-bottom: 0px!important;
}
.vw-p-mb-03em p {
	margin-bottom: 0.3em!important;
}
.vw-p-mb-05em p {
	margin-bottom: 0.5em!important;
}

/* Marge après ul identique à p */
.elementor-widget-text-editor ul {
	margin-bottom: 18px;
}
/* Gras moins intense pour les polices fines */
.vw-bold-400 b, .vw-bold-400 strong {
	font-weight: 400;
}
/* Gestion du gras */
b, strong {
	font-weight: 600;
}

/* ----------------------------------- */
/* -------- Left border width -------- */
/* -------- 3px - 4px - 5px ---------- */
/* ----------------------------------- */
.vw-border-left-3 {
	padding-left: 0.4em;
	border-left: 3px solid var(--vw-color-1);
}
.vw-border-left-4 {
	padding-left: 0.4em;
	border-left: 4px solid var(--vw-color-1);
}
.vw-border-left-5 {
	padding-left: 0.4em;
	border-left: 5px solid var(--vw-color-1);
}

/* ============================= */
/* ========== LINKS ============ */
/* ============================= */

/* Souligner les liens sur hover dans les zones de texte principales */
.elementor-widget-text-editor a:hover:not(.elementor-button), .elementor-widget-icon-list a:hover:not(.elementor-button), .elementor-widget-theme-post-content a:hover:not(.elementor-button) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}
/* Épaissir la barre de soulignement pour liens gras */
.elementor-widget-text-editor strong a:hover, .elementor-widget-icon-list strong a:hover, .elementor-widget-theme-post-content strong a:hover {
	text-decoration-thickness: 2px;
}

/* Ne pas souligner certains liens sur hover */
.elementor-widget-theme-post-content .elementor-element.vw-link-hover-no-underline a:hover {
	text-decoration: none;
}

/* Forcer le style de lien avec une classe custom */
.vw-links a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.vw-links a:hover {
	text-decoration-thickness: 2px;
}

/* Forcer le style de lien hover sur un titre avec une classe custom */
.vw-underline-link-hover .elementor-heading-title a:hover, .vw-underline-link-hover.elementor-widget-button.elementor-widget a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

/* ================================= */
/* =========== BUTTONS ============= */
/* ================================= */
.vw-button-icon-width-sm .elementor-button-icon svg {
	width: 10px;
}


/* Boutons: Appliquer le changement de couleur de l'icône sur hover */
.elementor-kit-7 .vw-btn-hover-icon-color-1 .elementor-button:hover {
	fill: var(--vw-color-1);
}
/* Same: mais pour color 2 */
.elementor-kit-7 .vw-btn-hover-icon-color-2 .elementor-button:hover {
	fill: var(--vw-color-2);
}
/* Same: mais pour blanc */
.elementor-kit-7 .vw-btn-hover-icon-white .elementor-button:hover {
	fill: #fff;
}

/* ========================== */
/* ========= IMAGES ========= */
/* ========================== */

/* Conteneur */
.vw-img-ratio {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: inherit;
}

/* Image */
.elementor .elementor-widget-container .elementor-element .vw-img-ratio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ratios */
.vw-img-1-1 { aspect-ratio: 1 / 1; }      /* Carré */
.vw-img-4-3 { aspect-ratio: 4 / 3; }
.vw-img-3-2 { aspect-ratio: 3 / 2; }
.vw-img-16-9 { aspect-ratio: 16 / 9; }
.vw-img-2-3 { aspect-ratio: 2 / 3; }      /* Portrait */
.vw-img-3-4 { aspect-ratio: 3 / 4; }
.vw-img-9-16 { aspect-ratio: 9 / 16; }
.vw-img-auto { aspect-ratio: auto; }      /* Reset */


/* =================================== */
/* ========== FORM FIELDS ============ */
/* =================================== */

/* Style de base */
.elementor-form .elementor-field-group input[type=text], 
.elementor-form .elementor-field-group input[type=date], 
.elementor-form .elementor-field-group input[type=email], 
.elementor-form .elementor-field-group input[type=number], 
.elementor-form .elementor-field-group input[type=password], 
.elementor-form .elementor-field-group input[type=search], 
.elementor-form .elementor-field-group input[type=tel], 
.elementor-form .elementor-field-group input[type=url],
.elementor-form .elementor-field-group textarea {
  border: 1px solid #d4d4d4;
  border-radius: 6px;
  padding: 12px 14px;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

/* Le wrapper doit être relatif pour positionner le halo */
.elementor-form .elementor-field-group {
  position: relative;
}

/* Focus "normal" sur l'input */
.elementor-form .elementor-field-group input[type=text]:focus, 
.elementor-form .elementor-field-group input[type=date]:focus, 
.elementor-form .elementor-field-group input[type=email]:focus, 
.elementor-form .elementor-field-group input[type=number]:focus, 
.elementor-form .elementor-field-group input[type=password]:focus, 
.elementor-form .elementor-field-group input[type=search]:focus, 
.elementor-form .elementor-field-group input[type=tel]:focus, 
.elementor-form .elementor-field-group input[type=url]:focus,
.elementor-form .elementor-field-group textarea:focus {
  outline: 0;
  border-width: 1px;
  border-color: var(--vw-color-1);
  background-color: #ffffff;
  box-shadow:
    inset 0 0 0 1px var(--vw-color-1); /* ajoute 1px interne -> total 2px */
}

/* Quand un input/textarea à l'intérieur est focus, on affiche le halo */
.elementor-form .elementor-field-group:focus-within::after {
  opacity: 1;
}

/* Hover subtil */
.elementor-form .elementor-field-group input[type=text]:hover, 
.elementor-form .elementor-field-group input[type=date]:hover, 
.elementor-form .elementor-field-group input[type=email]:hover, 
.elementor-form .elementor-field-group input[type=number]:hover, 
.elementor-form .elementor-field-group input[type=password]:hover, 
.elementor-form .elementor-field-group input[type=search]:hover, 
.elementor-form .elementor-field-group input[type=tel]:hover, 
.elementor-form .elementor-field-group input[type=url]:hover,
.elementor-form .elementor-field-group textarea:hover {
  border-color: var(--vw-color-1);
}

/* ==================================================== */
/* ========= TWEAKS WORPDRESS CLASSIC EDITOR ========== */
/* ==================================================== */

/* ==================================================== */
/* =============== LECTEUR AUDIO (mejs) =============== */
/* ==================================================== */

/* Base pill */
.mejs-container.mejs-audio {
    background: #f1f3f4;
    border-radius: 999px;
    padding: 6px 12px;
    box-shadow: none;
    max-width: 300px;
	margin:20px 0;
}

.mejs-container.mejs-audio button {
	border-radius:0px;
}

/* Supprimer fond noir interne */
.mejs-container.mejs-audio .mejs-controls {
    background: transparent;
}

/* Play / Pause */
.mejs-container.mejs-audio .mejs-playpause-button button {
    filter: brightness(0%);
}

/* Volume / Mute */
.mejs-container.mejs-audio .mejs-volume-button button {
    filter: brightness(0%);
}

.mejs-container.mejs-audio .mejs-horizontal-volume-total {
	filter:brightness(80%);
	top:17px;
}

/* Texte temps (00:35 / 02:05) */
.mejs-container.mejs-audio .mejs-time {
    color: #5f6368;
}

/* Barre totale */
.mejs-container.mejs-audio .mejs-time-rail .mejs-time-total {
    background: #bbb;
}

.mejs-container.mejs-audio .mejs-controls .mejs-time-rail .mejs-time-loaded {
	background: #ccc;
}

/* Progression */
.mejs-container.mejs-audio .mejs-time-rail .mejs-time-current {
    background: #999;
}

/* Hover sur la barre de progression */
.mejs-container.mejs-audio .mejs-time-hovered {
	background: #777;	
}

/* Curseur rond */
.mejs-container.mejs-audio .mejs-time-handle-content {
	width: 13px;
    height: 13px;
    border: 2px solid #333;
    border-radius: 50%;
    background: #333; /* ou transparent si tu préfères */
    box-sizing: border-box;
}

/* Volume rail */
.mejs-container.mejs-audio .mejs-horizontal-volume-total {
    background: #dfe1e5;
}

/* Volume current */
.mejs-container.mejs-audio .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    background: #ddd;
}

/* Nettoyage */
.mejs-container.mejs-audio,
.mejs-container.mejs-audio .mejs-controls,
.mejs-container.mejs-audio .mejs-time-rail {
    border: none;
}

/* Time rail plus fine */
.mejs-container.mejs-audio .mejs-time-rail .mejs-time-total,
.mejs-container.mejs-audio .mejs-time-rail .mejs-time-current,
.mejs-container.mejs-audio .mejs-time-rail .mejs-time-loaded,
.mejs-container.mejs-audio .mejs-time-hovered {
    height: 6px;
    border-radius: 999px;
}

/* Recentrer le handle parce que la barre est plus fine */
.mejs-container.mejs-audio .mejs-time-handle {
    top: -4px; /* ajuste si nécessaire */
}

/* Volume rail plus fine */
.mejs-container.mejs-audio .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mejs-container.mejs-audio .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    height: 6px;
    border-radius: 999px;
}

/* Descendre légèrement la barre de progression */
.mejs-container.mejs-audio .mejs-time-rail {
    top: 7px;
    position: relative;
}

/* Si encore un poil trop haut ou bas, ajuste ici */
.mejs-container.mejs-audio .mejs-time-rail .mejs-time-total {
    margin-top: 1px;
}


/* ============================================ */
/* ========= TWEAKS WIDGET ELEMENTOR ========== */
/* ============================================ */

/* Enlever la bordure supérieure du meta des cartes du widget Posts */
.elementor-posts .elementor-post .elementor-post__card .elementor-post__meta-data {
	border-top:0px;
}

/* Correction du bug du widget va-et-vient */
.elementor-toggle h3.elementor-tab-title {
	font-weight: 400;
	font-size: 22px;
}
/* Centrer les éléments verticalement du widget icon box pour mobile aussi */
.align-items-center .elementor-icon-box-wrapper {
	align-items: center;
}
/* Correction des liens qui sautent une ligne dans les listes d'icônes */
.elementor-widget .elementor-icon-list-item .elementor-icon-list-text a {
	display: inline !important;
}
/* Garder les icônes sur la même ligne dans les listes d'icônes */
.elementor-widget .elementor-icon-list-item a .elementor-icon-list-icon {
	display: inline-block;
}
/* Rendre l'animation du menu mobile plus rapide */
header .elementor-element.elementor-widget.elementor-widget-off-canvas {
	--e-off-canvas-animation-duration: 600ms;
}

/* =================================== */
/* ========== RESPONSIVE ============= */
/* =================================== */

/* Tablets */
@media (max-width: 1024px) {
	/* Sticky header tablet override for scrolling to anchors */
	html {
		scroll-padding-top: var(--tablet-header-height) !important;
	}
	
	/* Section container qui fait toute la largeur de l'écran */
	.e-con.vw-section-container {
		--padding-top: 60px;
		--padding-bottom: 60px;
		--padding-left: 30px;
		--padding-right: 30px;
		--row-gap: 30px;
		--column-gap: 30px;
	}
	
	/* h2, h3, h4 dans les articles de blog */
	.elementor-widget-theme-post-content h2 {
		font-size:28px;
	}
	.elementor-widget-theme-post-content h3 {
		font-size: 24px;
		font-weight: 600;
	}
	.elementor-widget-theme-post-content h4 {
		font-size: 20px;
		font-weight: 600;
	}
}
	
/* Phones */
@media (max-width: 767px) {
	/* Sticky header phone override for scrolling to anchors */
	html {
		scroll-padding-top: var(--phone-header-height) !important;
	}
	
	/* Section container */
	.e-con.vw-section-container {
		--padding-top: 40px;
		--padding-bottom: 40px;
		--padding-left: 15px;
		--padding-right: 15px;
		--row-gap: 15px;
		--column-gap: 15px;
	}
	/* Hero section */
	.e-con.vw-hero-section {
		min-height:250px;
		--padding-top: 40px;
		--padding-bottom: 40px;
		--padding-left: 40px;
		--padding-right: 40px;
	}
	
	/* h2, h3, h4 dans les articles de blog */
	.elementor-widget-theme-post-content h2 {
		font-size:36px;
		font-weight: 400;
	}
	.elementor-widget-theme-post-content h3 {
		font-size: 24px;
		font-weight: 600;
	}
	.elementor-widget-theme-post-content h4 {
		font-size: 20px;
		font-weight: 600;
	}
	
	/* Désactiver align right pour image sur mobile (layout post card) */
	.elementor-widget-theme-post-content img.alignright {
		float: none;
		display: block;
		margin: 20px 0;
	}
}