/*
Theme Name: ComnWeb Divi Child
Theme URI: https://comnweb.fr/
Description: Thème enfant Divi standard de ComnWeb.
Author: ComnWeb
Author URI: https://comnweb.fr/
Template: Divi
Version: 1.0.0
Text Domain: comnweb-divi-child
*/

/* ==========================================================
   COMNWEB — DESIGN SYSTEM
   ========================================================== */

:root {

	/* ---------------------------------------------------------
	   COLORS
	   --------------------------------------------------------- */

	--cw-color-accent: #DD4417;
	--cw-color-ink: #252422;
	--cw-color-text: #514E49;
	--cw-color-paper: #F7F5F0;


	/* ---------------------------------------------------------
	   TEXT
	   --------------------------------------------------------- */

	--text-xs: 0.79rem;
	--text-s: clamp(0.89rem, 0.07vw + 0.87rem, 0.94rem);
	--text-m: clamp(1rem, 0.19vw + 0.96rem, 1.13rem);
	--text-l: clamp(1.13rem, 0.34vw + 1.06rem, 1.35rem);
	--text-xl: clamp(1.27rem, 0.54vw + 1.16rem, 1.62rem);


	/* ---------------------------------------------------------
	   HEADINGS
	   --------------------------------------------------------- */

	--h-4: clamp(1.25rem, 0.19vw + 1.21rem, 1.38rem);
	--h-3: clamp(1.56rem, 0.41vw + 1.48rem, 1.83rem);
	--h-2: clamp(1.95rem, 0.75vw + 1.8rem, 2.44rem);
	--h-1: clamp(2.44rem, 1.25vw + 2.19rem, 3.26rem);
	--h-title: clamp(3.05rem, 1.97vw + 2.66rem, 4.34rem);


	/* ---------------------------------------------------------
	   SPACING
	   --------------------------------------------------------- */

	--spacing-xxs: clamp(5px, 0.48vw + 3.47px, 10px);
	--spacing-xs: clamp(10px, 0.96vw + 6.94px, 20px);
	--spacing-s: clamp(15px, 1.43vw + 10.41px, 30px);
	--spacing-m: clamp(20px, 1.91vw + 13.88px, 40px);
	--spacing-l: clamp(30px, 2.87vw + 20.82px, 60px);
	--spacing-xl: clamp(40px, 3.82vw + 27.76px, 80px);
	--spacing-2xl: clamp(60px, 5.74vw + 41.64px, 120px);
	--spacing-3xl: clamp(120px, 11.47vw + 83.29px, 240px);

}


/* ==========================================================
   EDITORIAL DECORATIONS
   Surlignages et cercles dessinés à la main
   ========================================================== */


/* ---------------------------------------------------------
   COLOR VARIANTS
   --------------------------------------------------------- */

.cw-deco--accent {
	--cw-deco-color: var(--cw-color-accent);
}

.cw-deco--ink {
	--cw-deco-color: var(--cw-color-ink);
}

.cw-deco--muted {
	--cw-deco-color: var(--cw-color-text);
}


/* ---------------------------------------------------------
   HIGHLIGHT
   --------------------------------------------------------- */

.cw-highlight {
	position: relative;
	display: inline-block;
}

.cw-highlight::after {
	content: "";
	position: absolute;

	left: -2%;
	bottom: -0.08em;

	width: 104%;
	height: 0.22em;

	background-color: var(--cw-deco-color, var(--cw-color-accent));

	-webkit-mask:
		url("https://comnweb.fr/wp-content/uploads/2026/08/comnweb-surlignage-v1.svg")
		center / 100% 100% no-repeat;

	mask:
		url("https://comnweb.fr/wp-content/uploads/2026/08/comnweb-surlignage-v1.svg")
		center / 100% 100% no-repeat;

	pointer-events: none;
}


/* ---------------------------------------------------------
   CIRCLE
   --------------------------------------------------------- */

.cw-circle {
	position: relative;
	display: inline-block;
	z-index: 0;
}

.cw-circle::after {
	content: "";
	position: absolute;

	left: -28%;
	top: -70%;

	width: 160%;
	height: 220%;

	background-color: var(--cw-deco-color, var(--cw-color-accent));

	-webkit-mask:
		url("https://comnweb.fr/wp-content/uploads/2026/08/comnweb-cercle-v1.svg")
		center / 100% 100% no-repeat;

	mask:
		url("https://comnweb.fr/wp-content/uploads/2026/08/comnweb-cercle-v1.svg")
		center / 100% 100% no-repeat;

	pointer-events: none;
	z-index: -1;
}


/* ==========================================================
   GLOBAL COMPONENTS
   ========================================================== */


/* ---------------------------------------------------------
   CARD ICON
   Uniformise le volume des icônes SVG dans les cartes
   --------------------------------------------------------- */

.cw-card-icon {
	height: 72px;

	display: flex;
	align-items: center;
	justify-content: center;
}

.cw-card-icon svg {
	width: auto;
	max-height: 56px;
}


/* ---------------------------------------------------------
   PRIMARY BUTTON
   Classe Divi : .cw-button
   --------------------------------------------------------- */

.et_pb_button.cw-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;

	gap: 0.6em;

	padding: 0.6rem 1.5rem !important;

	white-space: nowrap;
}


/* ---------------------------------------------------------
   CTA SPLIT
   Séparateur vertical entre deux colonnes de CTA
   --------------------------------------------------------- */

.cta-split {
	position: relative;
}

.cta-split::after {
	content: "";
	position: absolute;

	left: 50%;
	top: 8%;

	width: 1px;
	height: 84%;

	background-color: rgba(255, 255, 255, 0.5);

	transform: translateX(-50%);
	pointer-events: none;
}

@media (max-width: 767px) {

	.cta-split::after {
		display: none;
	}

}


/* ==========================================================
   LAYOUT HELPERS
   ========================================================== */


/* ---------------------------------------------------------
   STICKY EDITORIAL COLUMN
   --------------------------------------------------------- */

.process-sticky {
	position: sticky;
	top: 64px;

	align-self: flex-start;
}

@media (max-width: 767px) {

	.process-sticky {
		position: static;
	}

}


/* ---------------------------------------------------------
   HERO IMAGE
   --------------------------------------------------------- */

.hero-image .et_pb_image_wrap {
	display: block;
	aspect-ratio: 3 / 2;
}

.hero-image img {
	display: block;

	width: 100%;
	height: auto;
}


/* ==========================================================
   PORTFOLIO
   ========================================================== */


/* ---------------------------------------------------------
   PROJECT PALETTE
   Pastilles colorimétriques
   --------------------------------------------------------- */

.project-palette {
	display: flex;
	flex-wrap: wrap;

	gap: 8px;
}

.project-color {
	display: block;

	width: 32px;
	aspect-ratio: 1;

	background-color: var(--color);

	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 50%;
}


/* ---------------------------------------------------------
   PROJECT HEADER
   Passage vertical sur très petits écrans
   --------------------------------------------------------- */

@media (max-width: 360px) {

	.project-head {
		flex-direction: column;
		align-items: flex-start;

		gap: 8px;
	}

}


/* ---------------------------------------------------------
   PROJECT LINK
   Zone tactile étendue sur mobile
   --------------------------------------------------------- */

@media (max-width: 767px) {

	.project-link a {
		display: inline-block;

		padding: 10px 8px;
		margin: -10px -8px;
	}

}


/* ==========================================================
   ARTICLE TEMPLATE
   Contenu Gutenberg injecté dans le Theme Builder
   ========================================================== */


/* ---------------------------------------------------------
   TYPOGRAPHY
   --------------------------------------------------------- */

.cnw-post-content {
	font-size: var(--text-m);
}

.cnw-post-content h2 {
	margin-top: var(--spacing-l);
	margin-bottom: var(--spacing-xs);

	font-size: var(--h-2);
}

.cnw-post-content h3 {
	margin-top: var(--spacing-m);
	margin-bottom: var(--spacing-xs);

	font-size: var(--h-3);
}


/* ---------------------------------------------------------
   LISTS
   --------------------------------------------------------- */

.cnw-post-content li {
	margin-bottom: var(--spacing-xs);
}

.cnw-post-content li:last-child {
	margin-bottom: 0;
}


/* ==========================================================
   HEADER — MOBILE FULLSCREEN MENU
   Module Divi : .header-menu

   Breakpoint choisi : 1152px.
   Le menu mobile prend le relais avant que la navigation
   desktop manque d'espace.

   Le CSS ci-dessous neutralise également les styles desktop
   que Divi continue d'appliquer au-dessus de son breakpoint
   mobile natif (~980px).
   ========================================================== */

@media (max-width: 1152px) {


	/* ---------------------------------------------------------
	   CONFIGURATION
	   --------------------------------------------------------- */

	:root {
		--cnw-mobile-header-height: 78px;
	}


	/* ---------------------------------------------------------
	   BASCULE DESKTOP → MOBILE
	   --------------------------------------------------------- */

	.header-menu .et_pb_menu__menu {
		display: none !important;
	}

	.header-menu .et_pb_menu__wrap {
		align-items: center !important;
	}

	.header-menu .et_mobile_nav_menu {
		display: flex !important;
		align-items: center !important;
		align-self: center !important;

		margin: 0 !important;
	}

	.header-menu .mobile_nav {
		display: flex !important;
		align-items: center !important;
	}

	.header-menu .mobile_menu_bar {
		position: relative;

		display: flex !important;
		align-items: center !important;

		z-index: 10001;
	}


	/* ---------------------------------------------------------
	   HAMBURGER / CLOSE
	   --------------------------------------------------------- */

	.header-menu
	.et_mobile_nav_menu
	.mobile_nav
	.mobile_menu_bar::before {
		color: var(--cw-color-ink) !important;

		transition:
			transform 0.25s ease,
			opacity 0.2s ease;
	}

	.header-menu
	.et_mobile_nav_menu
	.mobile_nav.opened
	.mobile_menu_bar::before {
		content: "\4d";

		color: var(--cw-color-ink) !important;

		transform: rotate(90deg);
	}


	/* ---------------------------------------------------------
	   FULLSCREEN PANEL
	   --------------------------------------------------------- */

	.header-menu .et_mobile_menu {
		position: fixed !important;
		inset: 0 !important;

		display: block !important;

		width: 100vw !important;

		/* Fallback puis unités viewport dynamiques */
		height: 100vh !important;
		height: 100dvh !important;

		margin: 0 !important;

		padding:
			calc(var(--cnw-mobile-header-height) + 32px)
			clamp(32px, 8vw, 72px)
			48px !important;

		background: var(--cw-color-paper) !important;

		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;

		overflow-y: auto;

		/* État fermé */
		opacity: 0;
		visibility: hidden;
		pointer-events: none;

		transform: translateY(-12px);

		transition:
			opacity 0.25s ease,
			transform 0.3s ease,
			visibility 0s linear 0.3s;

		z-index: 9999;
	}


	/* ---------------------------------------------------------
	   RESET DES STYLES DIVI
	   Nécessaire car le menu est déclenché avant le breakpoint
	   mobile natif de Divi.
	   --------------------------------------------------------- */

	.header-menu .et_mobile_menu,
	.header-menu .et_mobile_menu ul,
	.header-menu .et_mobile_menu li {
		list-style: none !important;

		margin: 0 !important;
	}

	.header-menu .et_mobile_menu ul,
	.header-menu .et_mobile_menu li {
		padding-left: 0 !important;
	}

	.header-menu .et_mobile_menu li::marker {
		content: "";
	}

	.header-menu .et_mobile_menu li,
	.header-menu .et_mobile_menu li a {
		text-align: left !important;
	}


	/* ---------------------------------------------------------
	   PANEL — ÉTAT OUVERT
	   --------------------------------------------------------- */

	.header-menu .mobile_nav.opened .et_mobile_menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;

		transform: translateY(0);

		transition-delay: 0s;
	}


	/* ---------------------------------------------------------
	   MENU ITEMS
	   --------------------------------------------------------- */

	.header-menu .et_mobile_menu > li {
		opacity: 0;

		transform: translateY(14px);

		transition:
			opacity 0.3s ease,
			transform 0.3s ease;
	}

	.header-menu .mobile_nav.opened .et_mobile_menu > li {
		opacity: 1;

		transform: translateY(0);
	}


	/* Apparition progressive des liens */

	.header-menu .mobile_nav.opened .et_mobile_menu > li:nth-child(1) {
		transition-delay: 0.05s;
	}

	.header-menu .mobile_nav.opened .et_mobile_menu > li:nth-child(2) {
		transition-delay: 0.09s;
	}

	.header-menu .mobile_nav.opened .et_mobile_menu > li:nth-child(3) {
		transition-delay: 0.13s;
	}

	.header-menu .mobile_nav.opened .et_mobile_menu > li:nth-child(4) {
		transition-delay: 0.17s;
	}

	.header-menu .mobile_nav.opened .et_mobile_menu > li:nth-child(5) {
		transition-delay: 0.21s;
	}


	/* ---------------------------------------------------------
	   MENU LINKS
	   --------------------------------------------------------- */

	.header-menu .et_mobile_menu li a {
		padding: 20px 0 !important;

		font-size: clamp(1.35rem, 5vw, 1.75rem) !important;
		font-weight: 500;

		color: var(--cw-color-ink) !important;

		background: transparent !important;
		border-bottom: 1px solid rgba(37, 36, 34, 0.10) !important;

		opacity: 1 !important;

		transition:
			color 0.2s ease,
			padding-left 0.2s ease;
	}

	.header-menu .et_mobile_menu li a:hover,
	.header-menu .et_mobile_menu li a:focus-visible {
		padding-left: 6px !important;

		color: var(--cw-color-ink) !important;
		background: transparent !important;
	}


	/* ---------------------------------------------------------
	   LOCK PAGE SCROLL
	   --------------------------------------------------------- */

	body:has(.header-menu .mobile_nav.opened) {
		overflow: hidden;
	}

}