/**
* Theme Name: Simply Comm'
* Description: Thème du site de Simply Comm', agence de communication à Genève (simplycomm.ch). Thème enfant d'Axtra : correctifs responsive, slider d'accueil, logos clients, mise à jour 2026.
* Author: Jeremy Moncho
* Template: axtra
* Version: 2026.11
*/

/* =====================================================================
   Simply Comm' — correctifs 2026 (responsive, Elementor 4, Animation Addons)
   ===================================================================== */

/* --- 1. Slider plein écran de l'accueil : puces de pagination à gauche,
       centrées verticalement (le nouveau plugin les place sous le slider) --- */
.elementor-widget-wcf--content-slider .ts-pagination {
	position: static;
}
.elementor-widget-wcf--content-slider.wcf--slider-pagination-left .swiper-pagination {
	position: absolute;
	top: 50%;
	left: 15px;
	bottom: auto;
	width: auto !important;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column !important;
	gap: 14px;
	z-index: 20;
}
.elementor-widget-wcf--content-slider.wcf--slider-pagination-left .swiper-pagination-bullet {
	width: 44px;
	height: 44px;
	margin: 0 !important;
	border-radius: 50%;
	background: #fff;
	opacity: 1;
	box-shadow: inset 0 0 0 2px #fff;
	position: relative;
	cursor: pointer;
}
.elementor-widget-wcf--content-slider.wcf--slider-pagination-left .swiper-pagination-bullet::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #747474;
}
.elementor-widget-wcf--content-slider.wcf--slider-pagination-left .swiper-pagination-bullet-active {
	background: #fff;
	box-shadow: inset 0 0 0 2px #121212;
}
.elementor-widget-wcf--content-slider.wcf--slider-pagination-left .swiper-pagination-bullet-active::after {
	background: #121212;
}

/* --- 2. Accueil : le slider plein écran n'est gardé que sur les grands écrans.
       Sur tablette (≤ 1024 px) et sur les écrans peu hauts (≤ 820 px : laptops
       1366×768, 1280×720), son contenu était rogné et inaccessible ; on affiche
       alors la version empilée (celle du mobile), qui défile normalement. --- */
.elementor-widget-wcf--content-slider .swiper-slide {
	min-height: 100vh;
	min-height: 100svh;
	height: auto !important;
}
@media (max-width: 1024px), (max-height: 820px) {
	.elementor-1612 > .elementor-element-9970be3 {
		display: none !important;
	}
	.elementor-1612 > .elementor-element-941130b.elementor-hidden-desktop {
		display: flex !important;
	}
}
/* version empilée affichée sur un écran large (laptop peu haut) : les sections
   s'empilent verticalement, largeur de lecture confortable */
@media (min-width: 1025px) and (max-height: 820px) {
	.elementor-1612 .elementor-element.elementor-element-941130b {
		--flex-direction: column !important;
		--flex-wrap: nowrap !important;
		--align-items: stretch !important;
		--justify-content: flex-start !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
	}
	.elementor-1612 .elementor-element.elementor-element-941130b > .e-con {
		--width: 100% !important;
		--flex-shrink: 0;
		width: 100% !important;
		max-width: 1140px;
		margin-left: auto;
		margin-right: auto;
	}
	.elementor-1612 .elementor-element.elementor-element-941130b > .elementor-element-b43b5d9 {
		min-height: calc(100vh - 80px);
		overflow: clip; /* photo positionnée en absolu */
	}
	/* cartes « Notre expertise » : 3 par ligne, bouton dessous */
	.elementor-1612 .elementor-element.elementor-element-407f23e,
	.elementor-1612 .elementor-element.elementor-element-407f23e > .e-con-inner {
		--flex-direction: row !important;
		--flex-wrap: wrap !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		--gap: 24px 24px;
		gap: 24px;
	}
	.elementor-1612 .elementor-element.elementor-element-407f23e > .e-con,
	.elementor-1612 .elementor-element.elementor-element-407f23e > .e-con-inner > .e-con {
		--width: calc(33.333% - 16px) !important;
		width: calc(33.333% - 16px) !important;
	}
	.elementor-1612 .elementor-element.elementor-element-407f23e .elementor-element-058b989 {
		--width: 100% !important;
		width: 100% !important;
	}
	/* titres décoratifs géants : pas sur laptop non plus */
	.elementor-1612 .elementor-element-46d3f86,
	.elementor-1612 .elementor-element-973485d {
		display: none !important;
	}
}
/* titres décoratifs géants « About » / « Work » : jamais sur petit écran */
@media (max-width: 1024px) {
	.elementor-1612 .elementor-element-46d3f86,
	.elementor-1612 .elementor-element-973485d {
		display: none !important;
	}
}
/* grands écrans : le slide « Notre expertise » reste compact */
@media (min-width: 1025px) and (min-height: 821px) and (max-height: 900px) {
	.elementor-1599 > .e-con {
		padding-top: 90px !important;
		padding-bottom: 30px !important;
	}
}

/* --- 3. Pied de page et en-tête : largeur fluide (les conteneurs étaient fixés
       à 1920 px : logo et copyright coupés à gauche sous 1920 px) --- */
.elementor-14875 > .e-con,
.elementor-15697 > .e-con {
	--width: 100%;
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
}

/* --- 4. Grille de logos clients (remplace le carrousel Unlimited Elements) --- */
.sc-logos .wcf--gallery-item {
	background: #dcdcdc; /* gris clair : les logos « négatifs » (blancs) restent visibles */
	border-radius: 6px;
	aspect-ratio: 3 / 2;
	display: flex;
	overflow: hidden;
	align-items: center;
	justify-content: center;
	padding: 14px 18px;
	transition: transform .25s ease, box-shadow .25s ease;
}
.sc-logos .wcf--gallery-item:hover {
	background: #fff;
	transform: translateY(-3px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.sc-logos .wcf--gallery-item a {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
}
.sc-logos .wcf--gallery-item a img,
.sc-logos .wcf--gallery-item img {
	width: 100% !important;
	height: 100% !important;
	max-height: 100%;
	object-fit: contain !important;
	object-position: center;
	display: block;
}

/* --- 5. Mobile : pas de débordement horizontal, images fluides --- */
html, body { overflow-x: clip; }
.elementor img { max-width: 100%; height: auto; }
@media (max-width: 767px) {
	.elementor-widget-wcf--title h1,
	.elementor-widget-wcf--title h2 { overflow-wrap: anywhere; }
}

/* --- 6. Photo de Katia : toujours grande, jamais déformée, à toutes les tailles.
       Elementor lui donnait des largeurs/hauteurs fixes par point de rupture
       (780 px × 96 vh en « fill » sur laptop, 200 px sur mobile…). --- */
.elementor-1593 .elementor-element.elementor-element-9fa36d2,
.elementor-1612 .elementor-element.elementor-element-131d06f {
	left: 50% !important;
	right: auto !important;
	bottom: 0 !important;
	width: auto !important;
	max-width: none !important;
	text-align: center;
}
.elementor-1593 .elementor-element.elementor-element-9fa36d2 > .elementor-widget-container,
.elementor-1612 .elementor-element.elementor-element-131d06f > .elementor-widget-container {
	margin: 0 !important;
	--e-transform-translateX: -50%;
}
.elementor-1593 .elementor-element.elementor-element-9fa36d2 img,
.elementor-1612 .elementor-element.elementor-element-131d06f img {
	width: auto !important;
	height: auto !important;
	max-width: 92vw !important;
	max-height: clamp(380px, 86vh, 1100px) !important;
	object-fit: contain !important;
	object-position: bottom center !important;
	display: inline-block;
}
@media (max-width: 767px) {
	.elementor-1593 .elementor-element.elementor-element-9fa36d2 img,
	.elementor-1612 .elementor-element.elementor-element-131d06f img {
		max-height: 62svh !important;
	}
	.elementor-1612 .elementor-element.elementor-element-1d0bce8,
	.elementor-1593 .elementor-element.elementor-element-658fb6f {
		min-height: 92svh !important;
	}
}

/* --- 7. Titre d'accueil fluide (plus de paliers 200 / 160 / 60 px) --- */
.elementor-1593 .elementor-element.elementor-element-7e560be .wcf--title,
.elementor-1612 .elementor-element.elementor-element-5ec2cff .wcf--title {
	font-size: clamp(54px, 13.2vw, 200px) !important;
	line-height: .9 !important;
}
.elementor-1593 .elementor-element.elementor-element-7e560be .wcf--title .highlight,
.elementor-1612 .elementor-element.elementor-element-5ec2cff .wcf--title .highlight {
	font-size: clamp(30px, 9.6vw, 150px) !important;
	line-height: 1.05 !important;
}

/* --- 8. Plein écran à toutes les résolutions : fond de page noir (il était blanc)
       et sections Elementor sur toute la largeur (elles étaient plafonnées à 1920 px,
       d'où un cadre clair autour du site au-delà). Les contenus « boxed » restent
       centrés dans leur largeur de lecture. --- */
html, body { background: #121212 !important; }
.elementor .e-con.e-parent,
.swiper-slide .e-con.e-parent,
.elementor-1593 .elementor-element.elementor-element-3a34c8d,
.elementor-15697 .elementor-element.elementor-element-b2196c5,
.elementor-14875 .elementor-element.elementor-element-cb4c922,
.elementor-14875 .elementor-element.elementor-element-b0a8620 {
	--width: 100% !important;
	max-width: 100% !important;
}
.axtra-theme-elementor-header-section,
.axtra-theme-elementor-footer-section,
.body-wrapper, #smooth-wrapper, #smooth-content, .elementor-location-header, .elementor-location-footer {
	max-width: none !important;
}
/* titre d'accueil : garde ses deux lignes sur écran ultra-large */
.elementor-1593 .elementor-element.elementor-element-7e560be,
.elementor-1612 .elementor-element.elementor-element-5ec2cff {
	max-width: 1500px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
/* bouton rond du formulaire : le libellé passe sur deux lignes */
.fluentform button.ff-btn-submit { white-space: normal; line-height: 1.25; padding-left: 18px; padding-right: 18px; }

/* --- 9. Polices auto-hébergées (licence OFL) : plus aucune requête vers Google Fonts.
       Kanit 300–700 (le site en chargeait 18 variantes), Roboto variable. --- */
@font-face { font-family: "Kanit"; src: url("fonts/kanit-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Kanit"; src: url("fonts/kanit-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Kanit"; src: url("fonts/kanit-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Kanit"; src: url("fonts/kanit-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Kanit"; src: url("fonts/kanit-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("fonts/roboto.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* --- 10. Accueil version empilée : le bloc photo fait toute la hauteur d'écran
       sur tablette aussi (il était limité à 750 px : photo coupée en haut), et
       le cadre de la photo est centré par lui-même (plus de débordement à droite). --- */
.elementor-1612 .elementor-element.elementor-element-b43b5d9,
.elementor-1612 .elementor-element.elementor-element-1d0bce8 {
	min-height: 100svh !important;
}
.elementor-1612 .elementor-element.elementor-element-131d06f {
	transform: translateX(-50%) !important;
}
.elementor-1612 .elementor-element.elementor-element-131d06f > .elementor-widget-container {
	--e-transform-translateX: 0;
	transform: none !important;
}

/* --- 11. Page « Notre expertise » : 7 cartes en 4 colonnes fixes → 2 colonnes sur tablette,
       1 colonne sur mobile (elles étaient illisibles, 3 par ligne à 768 px). --- */
@media (max-width: 1024px) {
	.elementor-15937 .elementor-element.elementor-element-6b43956d > .e-con,
	.elementor-15937 .elementor-element.elementor-element-6b43956d > .e-con-inner > .e-con {
		--width: calc(50% - 12px) !important;
		width: calc(50% - 12px) !important;
	}
}
@media (max-width: 767px) {
	.elementor-15937 .elementor-element.elementor-element-6b43956d > .e-con,
	.elementor-15937 .elementor-element.elementor-element-6b43956d > .e-con-inner > .e-con {
		--width: 100% !important;
		width: 100% !important;
	}
}

/* --- 12. Police « Euclid Circular B » : 4 fichiers TTF (550 Ko) chargés pour le seul
       style par défaut du body ; le site est en Kanit, on aligne. --- */
:root { --font-euclid: "Kanit", sans-serif; }

/* --- 13. Menu off-canvas : bouton de fermeture en haut à droite sur mobile --- */
@media (max-width: 767px) {
	.offcanvas-close__button-wrapper.offcanvas__close-2 { top: 18px !important; right: 18px !important; bottom: auto !important; }
}
/* formulaire Contact Form 7 : bouton rond, libellé sur deux lignes */
.wpcf7-submit.wpcf7-submit { white-space: normal; line-height: 1.25; }

/* --- 14. Page « Notre expertise » : cartes de même largeur et de même hauteur par ligne
       (elles avaient des largeurs 25 / 30 / 33 % et étaient centrées verticalement, d'où
       l'effet décalé). 4 par ligne sur desktop, 2 sur tablette, 1 sur mobile. --- */
.elementor-15937 .elementor-element.elementor-element-6b43956d,
.elementor-15937 .elementor-element.elementor-element-6b43956d > .e-con-inner {
	--align-items: stretch !important;
	--justify-content: center !important;
	--flex-wrap: wrap !important;
	--gap: 20px 20px;
	align-items: stretch !important;
	justify-content: center !important;
	gap: 20px;
}
.elementor-15937 .elementor-element.elementor-element-6b43956d > .e-con,
.elementor-15937 .elementor-element.elementor-element-6b43956d > .e-con-inner > .e-con {
	--width: calc(25% - 15px) !important;
	width: calc(25% - 15px) !important;
	margin: 0 !important;
	scroll-margin-top: 110px;
	display: flex;
}
.elementor-15937 .elementor-element.elementor-element-6b43956d .elementor-widget-wcf--icon-box,
.elementor-15937 .elementor-element.elementor-element-6b43956d .elementor-widget-wcf--icon-box > .elementor-widget-container,
.elementor-15937 .elementor-element.elementor-element-6b43956d .wcf--icon-box {
	height: 100%;
	width: 100%;
}
@media (max-width: 1024px) {
	.elementor-15937 .elementor-element.elementor-element-6b43956d > .e-con,
	.elementor-15937 .elementor-element.elementor-element-6b43956d > .e-con-inner > .e-con {
		--width: calc(50% - 10px) !important;
		width: calc(50% - 10px) !important;
	}
}
@media (max-width: 767px) {
	.elementor-15937 .elementor-element.elementor-element-6b43956d > .e-con,
	.elementor-15937 .elementor-element.elementor-element-6b43956d > .e-con-inner > .e-con {
		--width: 100% !important;
		width: 100% !important;
	}
}

/* --- 15. Slider de l'accueil : fond uniforme, aucune bande claire en bas d'un slide
       moins haut que le plus grand. --- */
.elementor-widget-wcf--content-slider .wcf__slider-wrapper,
.elementor-widget-wcf--content-slider .swiper,
.elementor-widget-wcf--content-slider .swiper-slide {
	background: #121212;
}

/* --- 16. Slider de l'accueil : chaque slide fait exactement la hauteur restante sous
       l'en-tête (80 px). Avant, les slides faisaient 100 vh + l'en-tête : la page pouvait
       toujours défiler de 80 px ou plus, et restait « descendue » en changeant de slide. --- */
.elementor-widget-wcf--content-slider .swiper-wrapper {
	align-items: flex-start;
}
.elementor-widget-wcf--content-slider .swiper-slide {
	min-height: calc(100svh - var(--sc-hh, 80px));
	height: auto !important;
}
.elementor-widget-wcf--content-slider .swiper-slide .e-con.e-parent {
	--min-height: calc(100svh - var(--sc-hh, 80px)) !important;
	min-height: calc(100svh - var(--sc-hh, 80px)) !important;
}

/* --- 17. Slides : hauteur = écran moins l'en-tête, y compris le bloc photo du héros
       (il gardait 100 vh + 90 px de marge haute → la page défilait toujours). --- */
.elementor-1593 .elementor-element.elementor-element-3a34c8d {
	--padding-top: 0px !important;
	padding-top: 0 !important;
}
.elementor-1593 .elementor-element.elementor-element-658fb6f,
.elementor-1595 .e-con.e-parent, .elementor-1597 .e-con.e-parent,
.elementor-1599 .e-con.e-parent, .elementor-1601 .e-con.e-parent {
	--min-height: calc(100svh - var(--sc-hh, 80px)) !important;
	min-height: calc(100svh - var(--sc-hh, 80px)) !important;
}
.elementor-1599 .e-con.e-parent {
	--padding-bottom: 20px !important;
	padding-bottom: 20px !important;
}

/* cartes « Notre expertise » : la bordure de chaque carte prend toute la hauteur de sa ligne */
.elementor-15937 .elementor-element.elementor-element-6b43956d .e-con .elementor-widget-wcf--icon-box {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}
.elementor-15937 .elementor-element.elementor-element-6b43956d .elementor-widget-wcf--icon-box > .elementor-widget-container {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}
.elementor-15937 .elementor-element.elementor-element-6b43956d .wcf--icon-box {
	flex: 1 1 auto;
	height: auto;
}

/* conteneur du slider : plus de hauteur minimale 100 vh (le slider fait déjà la hauteur restante) */
.elementor-1612 .elementor-element.elementor-element-9970be3 { --min-height: 0px !important; min-height: 0 !important; }

/* puces du slider : centrées verticalement, sans déborder sous la page */
.elementor-widget-wcf--content-slider.wcf--slider-pagination-left .swiper-pagination { top: 50% !important; bottom: auto !important; height: auto !important; transform: translateY(-50%) !important; }

.elementor-widget-wcf--content-slider .ts-pagination { position: static !important; }

/* cartes « Notre expertise » : l'élément bordé (.wcf__iconbox) remplit la hauteur de la ligne */
.elementor-15937 .elementor-element.elementor-element-6b43956d .wcf__iconbox {
	flex: 1 1 auto;
	height: auto;
	display: flex;
	flex-direction: column;
}

/* --- 19. Accueil, slide « Notre expertise » : trois cartes de même largeur et même hauteur,
       bouton « Tout voir » centré en dessous (elles faisaient 25 % et étaient centrées
       verticalement, d'où les positions et tailles différentes). --- */
.elementor-1599 .elementor-element.elementor-element-aa5ba6c {
	--align-items: stretch !important;
	--justify-content: center !important;
	--flex-wrap: wrap !important;
	--gap: 24px 24px;
	align-items: stretch !important;
	justify-content: center !important;
	gap: 24px;
}
.elementor-1599 .elementor-element.elementor-element-31336be,
.elementor-1599 .elementor-element.elementor-element-532615d,
.elementor-1599 .elementor-element.elementor-element-fed94de {
	--width: calc(33.333% - 16px) !important;
	width: calc(33.333% - 16px) !important;
	margin: 0 !important;
	display: flex;
}
.elementor-1599 .elementor-element.elementor-element-29d61f4 {
	--width: 100% !important;
	width: 100% !important;
	margin: 8px 0 0 !important;
	justify-content: center;
}
.elementor-1599 .elementor-element.elementor-element-aa5ba6c .elementor-widget-wcf--icon-box,
.elementor-1599 .elementor-element.elementor-element-aa5ba6c .elementor-widget-wcf--icon-box > .elementor-widget-container,
.elementor-1599 .elementor-element.elementor-element-aa5ba6c .wcf__iconbox {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	height: auto;
	width: 100%;
}

/* --- 20. Slides de l'accueil : hauteur fixe = écran moins l'en-tête. Un slide dont le
       contenu dépasserait (formulaire sur petit écran) défile à l'intérieur de lui-même,
       la page ne bouge jamais. --- */
.elementor-widget-wcf--content-slider .swiper-slide {
	height: calc(100svh - var(--sc-hh, 80px)) !important;
	min-height: 0 !important;
	overflow: hidden !important; /* jamais de défilement dans un slide : le contenu est ajusté (slider-reset.js) */
}

/* rangée de cartes alignée sur le titre, à l'écart des puces du slider */
.elementor-1599 .elementor-element.elementor-element-aa5ba6c { width: min(1290px, 100% - 180px) !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; }

/* contenu ajusté à la hauteur du slide (voir slider-reset.js, fitSlides) */
.elementor-widget-wcf--content-slider .swiper-slide > * { transform-origin: top center; }

/* --- 21. Revue globale (2) --- */
/* menu : pastille « suiveur de curseur » figée en bas à droite */
.offcanvas__follow-2 { display: none !important; }

/* focus clavier visible partout */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [role="button"]:focus-visible, .swiper-pagination-bullet:focus-visible {
	outline: 2px solid #E18D4B !important;
	outline-offset: 3px !important;
}

/* formulaire Contact Form 7 : messages lisibles, dans la police du site */
.wpcf7-not-valid-tip {
	font-family: "Kanit", sans-serif !important;
	font-size: 14px !important;
	color: #FF7A6B !important;
	margin-top: 6px;
	letter-spacing: 0;
	word-spacing: normal;
}
.wpcf7 form .wpcf7-response-output {
	font-family: "Kanit", sans-serif !important;
	font-size: 16px !important;
	color: #FFFFFF !important;
	border: 1px solid #E18D4B !important;
	border-radius: 8px;
	padding: 14px 18px !important;
	margin: 24px 0 0 !important;
	word-spacing: normal;
	text-align: left;
}
.wpcf7 form.sent .wpcf7-response-output { border-color: #6BCB77 !important; }

/* Fluent Forms : messages d'erreur lisibles */
.fluentform .error, .fluentform .text-danger { font-family: "Kanit", sans-serif; font-size: 14px; color: #FF7A6B !important; }

/* --- 22. Revue globale (3) --- */
/* slider : le contenu de chaque slide laisse la place des puces à gauche */
@media (min-width: 1025px) {
	.elementor-widget-wcf--content-slider .swiper-slide .e-con.e-parent {
		--padding-left: 110px !important;
		--padding-right: 40px !important;
		padding-left: 110px !important;
		padding-right: 40px !important;
	}
}

/* « Nos clients » (version empilée) : même taille que les autres titres de section */
.elementor-1612 .elementor-element.elementor-element-3ae0c35 .wcf--title {
	font-size: clamp(32px, 6vw, 60px) !important;
	line-height: 1.05 !important;
}

/* bouton « Envoyer le message » (Fluent Forms) : vrai bouton partout, jamais une pastille de 20 px */
.fluentform .ff-btn-submit {
	min-width: 140px;
	min-height: 140px;
	border-radius: 50% !important;
	padding: 18px !important;
	white-space: normal !important;
	line-height: 1.25 !important;
	border: 1px solid rgba(255, 255, 255, .35) !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	text-align: center;
}
@media (max-width: 1024px) {
	.fluentform .ff-btn-submit {
		min-width: 0; min-height: 52px;
		border-radius: 999px !important;
		padding: 14px 32px !important;
	}
}

/* écrans tactiles : cibles d'au moins 44 px */
@media (pointer: coarse), (max-width: 1024px) {
	.open-offcanvas { padding: 10px 0 10px 14px; margin: -10px 0; min-height: 44px; display: inline-flex; align-items: center; }
	.elementor-icon-list-item > a, .wcf--footer--menu a, .nav-link { padding-top: 10px !important; padding-bottom: 10px !important; display: inline-block; }
	.wcf--site-logo a { display: inline-block; padding: 8px 0; }
}

/* logo de l'en-tête : zone tactile de 44 px de haut */
@media (pointer: coarse), (max-width: 1024px) {
	.axtra-theme-elementor-header-section a.elementor-clickable,
	.elementor-widget-wcf--site-logo a,
	.elementor-widget-wcf--site-logo a.elementor-clickable {
		display: inline-flex !important; align-items: center; min-height: 44px;
	}
}

/* ajustement des slides (slider-reset.js) : la hauteur minimale tient compte du zoom appliqué */
.elementor-widget-wcf--content-slider .swiper-slide .e-con.e-parent {
	--min-height: calc((100svh - var(--sc-hh, 80px)) / var(--sc-z, 1)) !important;
	min-height: calc((100svh - var(--sc-hh, 80px)) / var(--sc-z, 1)) !important;
}
.elementor-widget-wcf--content-slider .swiper-slide.sc-measure .e-con.e-parent {
	--min-height: 0px !important;
	min-height: 0 !important;
}

/* --- 23. Bouton « Envoyer le message » : un vrai cercle (il était écrasé, 148 × 167 px) --- */
@media (min-width: 1025px) {
	.fluentform .ff-btn-submit {
		width: 150px !important; height: 150px !important;
		min-width: 150px !important; min-height: 150px !important;
		aspect-ratio: 1 / 1; padding: 0 16px !important; box-sizing: border-box;
		border-radius: 50% !important; flex: 0 0 auto;
	}
}
.wpcf7-submit.wpcf7-submit {
	aspect-ratio: 1 / 1; height: auto !important; border-radius: 50% !important; box-sizing: border-box;
}

/* boutons d'envoi : cercles parfaits à toutes les tailles (le design d'origine est un rond) */
.fluentform .ff-btn-submit,
.wpcf7-submit.wpcf7-submit {
	width: var(--sc-btn, 150px) !important; height: var(--sc-btn, 150px) !important;
	min-width: 0 !important; min-height: 0 !important; max-width: none !important;
	aspect-ratio: 1 / 1; padding: 0 14px !important; box-sizing: border-box !important;
	border-radius: 50% !important; white-space: normal !important; line-height: 1.25 !important;
	display: inline-flex !important; align-items: center; justify-content: center; text-align: center;
}
.wpcf7-submit.wpcf7-submit { --sc-btn: 170px; display: inline-block !important; }
@media (max-width: 767px) {
	.fluentform .ff-btn-submit, .wpcf7-submit.wpcf7-submit { --sc-btn: 130px; }
}

/* bouton CF7 : libellé centré (le thème le remplace par un <button>) */
button.wpcf7-submit { display: inline-flex !important; }

/* --- 24. Accueil avec slider : page totalement fixe (aucun défilement, aucun rebond
       élastique de macOS/iOS qui faisait bouger le menu et la page). --- */
html.sc-slider-lock,
html.sc-slider-lock body {
	height: 100% !important;
	overflow: hidden !important;
	overscroll-behavior: none !important;
}
html.sc-slider-lock body { position: relative; }
/* partout ailleurs : pas de rebond qui déplace l'en-tête */
html, body { overscroll-behavior-y: none; }

/* --- 25. Page « Notre expertise » (ouverte par « Tout voir ») : grille régulière alignée
       sur le titre (1290 px), 3 colonnes ≥ 1200 px, 2 en tablette, 1 en mobile ; cartes de
       même hauteur par ligne, titres de même taille. La 7e carte, seule sur sa ligne, prend
       toute la largeur (titre à gauche, texte à droite) au lieu de laisser un trou.
       Remplace les largeurs en % des sections 11 et 14. --- */
.elementor-15937 .elementor-element.elementor-element-6b43956d {
	--padding-bottom: 0px !important;
	padding-bottom: 0 !important;
}
.elementor-15937 .elementor-element.elementor-element-6b43956d > .e-con-inner {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: auto;
	align-items: stretch !important;
	gap: 24px !important;
	width: 100%;
	max-width: 1290px !important;
	margin: 12px auto 0;
	padding: 0 !important;
}
.elementor-15937 .elementor-element.elementor-element-6b43956d > .e-con-inner > .e-con {
	--width: auto !important;
	width: auto !important;
	min-width: 0;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column;
}
.elementor-15937 .elementor-element.elementor-element-6b43956d > .e-con-inner > .e-con:last-child:nth-child(3n + 1) {
	grid-column: 1 / -1;
}
.elementor-15937 .elementor-element.elementor-element-6b43956d .wcf__iconbox {
	padding: 34px 48px 34px 34px !important;
	border-radius: 22px;
	box-sizing: border-box;
}
.elementor-15937 .elementor-element.elementor-element-6b43956d .wcf__iconbox .elementor-icon:empty {
	display: none;
}
.elementor-15937 .elementor-element.elementor-element-6b43956d .wcf__iconbox .title {
	font-size: clamp(18px, 0.9rem + 0.35vw, 21px) !important;
	line-height: 1.3 !important;
	margin: 0 0 16px !important;
	text-wrap: balance;
}
.elementor-15937 .elementor-element.elementor-element-6b43956d .wcf__iconbox .desc,
.elementor-15937 .elementor-element.elementor-element-6b43956d .wcf__iconbox .desc p {
	font-size: 16px !important;
	line-height: 1.6 !important;
	margin-bottom: 0 !important;
	text-wrap: pretty;
}
/* carte seule sur sa ligne : titre à gauche, texte à droite */
.elementor-15937 .elementor-element.elementor-element-6b43956d > .e-con-inner > .e-con:last-child:nth-child(3n + 1) .wcf__iconbox {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	column-gap: 48px;
	align-items: start;
}
.elementor-15937 .elementor-element.elementor-element-6b43956d > .e-con-inner > .e-con:last-child:nth-child(3n + 1) .wcf__iconbox .title {
	margin: 0 !important;
}
@media (max-width: 1199px) {
	.elementor-15937 .elementor-element.elementor-element-6b43956d > .e-con-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px !important;
	}
}
@media (max-width: 767px) {
	.elementor-15937 .elementor-element.elementor-element-6b43956d > .e-con-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px !important;
	}
	.elementor-15937 .elementor-element.elementor-element-6b43956d .wcf__iconbox {
		padding: 26px 40px 26px 24px !important;
		border-radius: 18px;
	}
	.elementor-15937 .elementor-element.elementor-element-6b43956d > .e-con-inner > .e-con:last-child:nth-child(3n + 1) .wcf__iconbox {
		display: flex !important;
	}
	.elementor-15937 .elementor-element.elementor-element-6b43956d > .e-con-inner > .e-con:last-child:nth-child(3n + 1) .wcf__iconbox .title {
		margin: 0 0 16px !important;
	}
}

/* --- 26. Page « Notre expertise » : bouton de fermeture (le menu n'est pas fixe, on n'avait
       aucun moyen de revenir au slider sans remonter tout en haut). Rond, comme les boutons
       d'envoi ; en haut à droite sur grand écran, en bas à droite sur mobile/tablette. --- */
.sc-close-page {
	position: fixed;
	z-index: 998;
	top: calc(var(--sc-hh, 80px) + 18px);
	right: max(16px, calc((100vw - 1290px) / 2 - 76px));
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 1px solid #fff;
	background: #121212;
	color: #fff;
	display: grid;
	place-items: center;
	padding: 0;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
	transition: background-color .25s, color .25s, border-color .25s, transform .25s;
}
.sc-close-page svg { width: 20px; height: 20px; display: block; }
.sc-close-page:hover { background: #fff; color: #121212; transform: rotate(90deg); }
.sc-close-page:focus-visible { outline: 2px solid #E18D4B; outline-offset: 3px; }
@media (max-width: 1024px) {
	.sc-close-page { top: auto; bottom: 18px; right: 18px; width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
	.sc-close-page, .sc-close-page:hover { transition: none; transform: none; }
}
body.offcanvas-open .sc-close-page, .offcanvas-3__area.show ~ .sc-close-page { display: none; }
/* (suite 25) icône vide du widget masquée (elle occupait la 1re case de la carte large et
   ajoutait 15 px au-dessus des titres) ; titre / texte placés explicitement ; l'arc décoratif
   du bas de page (fond 17.png, 170 à 300 px) ne chevauche plus la dernière carte. */
.elementor-15937 .elementor-element.elementor-element-6b43956d .wcf__iconbox .elementor-icon:not(:has(*)) {
	display: none !important;
}
.elementor-15937 .elementor-element.elementor-element-6b43956d > .e-con-inner > .e-con:last-child:nth-child(3n + 1) .wcf__iconbox .title { grid-column: 1; grid-row: 1; }
.elementor-15937 .elementor-element.elementor-element-6b43956d > .e-con-inner > .e-con:last-child:nth-child(3n + 1) .wcf__iconbox .desc { grid-column: 2; grid-row: 1; }
.elementor-15937 .elementor-element.elementor-element-71b22eee {
	--padding-bottom: 320px !important;
	padding-bottom: 320px !important;
}
@media (max-width: 767px) {
	.elementor-15937 .elementor-element.elementor-element-71b22eee {
		--padding-bottom: 200px !important;
		padding-bottom: 200px !important;
	}
}
/* tablette : l'introduction occupe toute la largeur, comme la grille en dessous */
@media (max-width: 1024px) {
	.elementor-15937 .elementor-element.elementor-element-9349dc,
	.elementor-15937 .elementor-element.elementor-element-1124c068 { --width: 100% !important; width: 100% !important; max-width: 100% !important; }
}

/* --- 27. Slider de l'accueil : puces de navigation avec une icône par section et un libellé
       (Accueil, L'agence, Nos clients, Notre expertise, Contact) qui apparaît au survol et
       au clavier. Section active : pastille sombre cerclée de blanc. Remplace le point
       central de la section 1. --- */
.elementor-widget-wcf--content-slider.wcf--slider-pagination-left .swiper-pagination-bullet.sc-nav {
	display: grid;
	place-items: center;
	color: #121212;
	background: #fff;
	box-shadow: none;
	border: 2px solid #fff;
	box-sizing: border-box;
	transition: background-color .25s, color .25s, transform .25s;
}
.elementor-widget-wcf--content-slider.wcf--slider-pagination-left .swiper-pagination-bullet.sc-nav::after { display: none; }
.sc-nav .sc-nav-ico { width: 20px; height: 20px; display: block; pointer-events: none; }
.elementor-widget-wcf--content-slider.wcf--slider-pagination-left .swiper-pagination-bullet.sc-nav.swiper-pagination-bullet-active {
	background: #121212;
	color: #fff;
	border-color: #fff;
}
.elementor-widget-wcf--content-slider.wcf--slider-pagination-left .swiper-pagination-bullet.sc-nav:not(.swiper-pagination-bullet-active):hover {
	transform: scale(1.08);
}
.sc-nav .sc-nav-label {
	position: absolute;
	left: calc(100% + 12px);
	top: 50%;
	transform: translate(-6px, -50%);
	white-space: nowrap;
	padding: 6px 14px;
	border-radius: 999px;
	background: #fff;
	color: #121212;
	font: 500 13px/1.2 "Kanit", sans-serif;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s, transform .2s, visibility .2s;
}
.sc-nav:hover .sc-nav-label,
.sc-nav:focus-visible .sc-nav-label {
	opacity: 1;
	visibility: visible;
	transform: translate(0, -50%);
}
@media (prefers-reduced-motion: reduce) {
	.sc-nav, .sc-nav .sc-nav-label { transition: none !important; }
}
/* (suite 27) les réglages Elementor du slider dessinent la puce avec une bordure de 22 px
   (12 px ≤ 1366 px) : on les neutralise pour les puces à icône */
.elementor-1612 .elementor-element.elementor-element-22c5c45 .swiper-pagination-bullet.sc-nav {
	width: 44px !important;
	height: 44px !important;
	border: 2px solid #fff !important;
	background: #fff !important;
	color: #121212 !important;
	padding: 0 !important;
}
.elementor-1612 .elementor-element.elementor-element-22c5c45 .swiper-pagination-bullet.sc-nav.swiper-pagination-bullet-active {
	background: #121212 !important;
	color: #fff !important;
}

/* --- 28. Logos clients : au survol, la case reste gris clair (en blanc, les logos blancs
       comme Karim Slama ou Caribana disparaissaient) ; seul le relief change. --- */
.sc-logos .wcf--gallery-item:hover { background: #e6e6e6; }

/* --- 29. Logos clients : cases blanches (les logos sont dessinés pour un fond blanc : plus
       d'intérieurs de lettres ou de bords blancs visibles) ; case sombre pour les logos
       blancs, cochés « Logo blanc » dans leur fiche (règles générées dans le <head>). --- */
.sc-logos .wcf--gallery-item,
.sc-logos .wcf--gallery-item:hover { background: #fff; }

/* --- 30. Accueil : Katia s'incline légèrement en 3D en suivant la souris (parallax.js).
       Pivot au niveau de la chaise ; rien ne bouge au doigt ni avec « réduire les animations ». --- */
.sc-tilt img {
	transform: perspective(1400px) rotateX(var(--sc-rx, 0deg)) rotateY(var(--sc-ry, 0deg)) translate3d(var(--sc-tx, 0px), var(--sc-ty, 0px), 0);
	transform-origin: 50% 85%;
	will-change: transform;
	backface-visibility: hidden;
}

/* --- 31. Logos clients : équilibre visuel. Un logo carré ou haut (AB Prod, Al-Andalus,
       Sister) prenait toute la hauteur de sa case et touchait presque les bords, alors que
       les logos larges, limités par la largeur, gardaient de l'air. Hauteur plafonnée à
       70 % de la case : les logos carrés rétrécissent, les logos larges ne bougent presque pas. --- */
.sc-logos .wcf--gallery-item { padding: 16px 20px; }
.sc-logos .wcf--gallery-item a img,
.sc-logos .wcf--gallery-item img {
	height: 70% !important;
	max-height: 70%;
}

/* --- 32. Accueil version empilée (mobile, tablette, laptop peu haut) :
       - la photo de Katia ne dépasse jamais de sa section : plus de hauteur minimale de 380 px
         (sur un téléphone en paysage, l'écran utile fait 320-370 px : la photo remontait sous
         l'en-tête) ;
       - en portrait, la section prend la hauteur de son contenu (titre juste sous l'en-tête,
         Katia en dessous, la tête devant le titre) au lieu de tout l'écran avec le titre
         centré : il y avait ~370 px de vide au-dessus du titre. --- */
.elementor-1612 .elementor-element.elementor-element-131d06f img {
	max-height: min(86svh, 1100px) !important;
}
@media (max-width: 767px) and (orientation: portrait) {
	.elementor-1612 .elementor-element.elementor-element-b43b5d9,
	.elementor-1612 .elementor-element.elementor-element-1d0bce8 {
		/* photo : 92 % de la largeur (ratio 0,754 → 122vw de haut), au plus 62 % de l'écran */
		min-height: calc(min(62svh, 122vw) + 24px) !important;
	}
	.elementor-1612 .elementor-element.elementor-element-1d0bce8 {
		justify-content: flex-start !important;
		padding-top: 40px !important;
	}
	.elementor-1612 .elementor-element.elementor-element-131d06f img {
		max-height: 62svh !important;
	}
}

/* --- 33. En-tête transparent (il était noir #000 sur le fond #121212 : bande visible, et
       « marche » au-dessus de la photo de Katia). Il n'est fixe sur aucune page : il se pose
       toujours sur le fond de la page, qu'il suit désormais. --- */
.elementor-element.elementor-element-b2196c5,
.elementor-element.elementor-element-b2196c5:not(.elementor-motion-effects-element-type-background),
.elementor-15937 .elementor-element.elementor-element-4d2f903,
.elementor-15937 .elementor-element.elementor-element-4d2f903:not(.elementor-motion-effects-element-type-background) {
	background-color: transparent !important;
	background-image: none !important;
}