/* ==========================================================================
   CommWeb — couche "premium" des pages (overrides cw-*)
   Chargée APRÈS legacy-base.css, le CSS de page et works.css (priorité 30)
   Objectif : unifier et rehausser le rendu de toutes les pages du site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens harmonisés (alignés sur le design system principal)
   -------------------------------------------------------------------------- */
:root {
	--cw-ink: #0a0f1c;
	--cw-blue: #2f6bff;
	--cw-blue2: #245be0;
	--cw-orange: #00c2a8;
	--cw-orange2: #2fd6c0;
	--cw-alt: #f6f8fc;
	--cw-line: rgba(15, 23, 42, .10);
	--cw-radius: 24px;
	--cw-shadow-sm: 0 2px 6px rgba(2, 8, 23, .04);
	--cw-shadow: 0 20px 50px -22px rgba(2, 8, 23, .22);
	--cw-shadow-lg: 0 40px 80px -34px rgba(2, 8, 23, .32);
	--cw-ease: cubic-bezier(.22, .61, .36, 1);
	--cw-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--cw-font-head: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Le wrapper respire davantage sur grand écran */
.cw-wrap { max-width: 1200px; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }

/* --------------------------------------------------------------------------
   2. Typographie
   -------------------------------------------------------------------------- */
.cw-home { font-family: var(--cw-font); color: var(--cw-ink); -webkit-font-smoothing: antialiased; }

.cw-h1,
.cw-h2,
.cw-h3,
.cw-kicker,
.cw-btn,
.cw-miniBtn,
.cw-miniLink,
.cw-tag,
.cw-workCard__title,
.cw-loc__city {
	font-family: var(--cw-font-head);
}

.cw-h1 {
	font-size: clamp(2rem, 1.2rem + 3.2vw, 3.4rem);
	line-height: 1.06;
	letter-spacing: -.035em;
	font-weight: 800;
	margin: 0 0 1rem;
	text-wrap: balance;
}
.cw-h2 {
	font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.3rem);
	line-height: 1.14;
	letter-spacing: -.028em;
	font-weight: 800;
	margin: 0 0 .7rem;
	text-wrap: balance;
}
.cw-h3 { font-size: 1.15rem; line-height: 1.28; letter-spacing: -.015em; font-weight: 700; margin: 0 0 .5rem; }
.cw-h1__sub {
	display: block;
	margin-top: .7rem;
	font-family: var(--cw-font);
	font-size: clamp(1rem, .95rem + .5vw, 1.15rem);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.45;
	color: rgba(11, 18, 32, .62);
}
.cw-lead { font-size: clamp(1.05rem, 1rem + .4vw, 1.22rem); line-height: 1.6; color: rgba(11, 18, 32, .80); max-width: 62ch; }
.cw-sub { font-size: 1rem; line-height: 1.65; color: rgba(11, 18, 32, .74); }
.cw-note { font-size: .82rem; color: rgba(11, 18, 32, .60); }

.cw-kicker {
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cw-blue2);
	background: rgba(47, 107, 255, .07);
	border-color: rgba(47, 107, 255, .16);
	padding: 8px 14px;
}

/* --------------------------------------------------------------------------
   3. Boutons
   -------------------------------------------------------------------------- */
.cw-btn {
	height: 48px;
	padding: 0 24px;
	font-size: .94rem;
	font-weight: 700;
	letter-spacing: -.01em;
	border-radius: 999px;
	transition: transform .22s var(--cw-ease), box-shadow .28s var(--cw-ease),
		background-color .22s var(--cw-ease), border-color .22s var(--cw-ease), color .2s var(--cw-ease);
}
.cw-btn--primary {
	background: linear-gradient(135deg, var(--cw-blue) 0%, var(--cw-orange) 100%);
	box-shadow: 0 18px 40px -16px rgba(47, 107, 255, .6);
}
.cw-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 26px 52px -18px rgba(47, 107, 255, .7);
}
.cw-btn--ghost {
	color: var(--cw-ink);
	background: #fff;
	border: 1.5px solid var(--cw-line);
	box-shadow: var(--cw-shadow-sm);
}
.cw-btn--ghost:hover {
	transform: translateY(-2px);
	border-color: rgba(47, 107, 255, .4);
	color: var(--cw-blue);
	background: #fff;
}
.cw-miniBtn { height: 44px; padding: 0 20px; }
.cw-miniLink { font-weight: 700; }

/* --------------------------------------------------------------------------
   4. Héros & sections
   -------------------------------------------------------------------------- */
.cw-hero { padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem); }
.cw-hero:before {
	background:
		radial-gradient(48% 48% at 18% 12%, rgba(47, 107, 255, .16), transparent 62%),
		radial-gradient(46% 46% at 88% 26%, rgba(0, 194, 168, .14), transparent 60%),
		radial-gradient(52% 52% at 55% 88%, rgba(47, 107, 255, .10), transparent 64%);
}
.cw-hero__grid { gap: clamp(1.6rem, 4vw, 3rem); }

.cw-trust { font-weight: 600; font-size: .92rem; color: rgba(11, 18, 32, .74); }
.cw-trust li { position: relative; padding-left: 1.5rem; }
.cw-trust li::before {
	content: "";
	position: absolute; left: 0; top: .35em;
	width: 1.05em; height: 1.05em; border-radius: 50%;
	background: rgba(0, 194, 168, .16);
	box-shadow: inset 0 0 0 1.5px rgba(0, 194, 168, .55);
}
.cw-trust li::after {
	content: "";
	position: absolute; left: .34em; top: .58em;
	width: .28em; height: .5em;
	border: solid var(--cw-orange); border-width: 0 1.6px 1.6px 0;
	transform: rotate(45deg);
}

.cw-section { padding: clamp(3rem, 6vw, 4.5rem) 0; }
.cw-section--alt { background: linear-gradient(180deg, #f8fafd 0%, var(--cw-alt) 100%); }
.cw-section__head { max-width: 72ch; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

/* Filet décoratif discret sous les titres de section */
.cw-section__head .cw-h2 { position: relative; padding-bottom: .5rem; }
.cw-section__head .cw-h2::after {
	content: "";
	position: absolute; left: 0; bottom: 0;
	width: 54px; height: 3px; border-radius: 3px;
	background: linear-gradient(90deg, var(--cw-blue), var(--cw-orange));
}

/* --------------------------------------------------------------------------
   5. Cartes
   -------------------------------------------------------------------------- */
.cw-card {
	border-radius: var(--cw-radius);
	border: 1px solid var(--cw-line);
	background: #fff;
	box-shadow: var(--cw-shadow);
}
.cw-card--glass { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.cw-card__label {
	font-family: var(--cw-font-head);
	font-size: .72rem; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--cw-blue2); margin: 0 0 .6rem;
}
.cw-card__title { font-family: var(--cw-font-head); font-size: 1.2rem; font-weight: 700; margin: 0 0 1rem; }

.cw-metric {
	background: var(--cw-alt);
	border: 1px solid rgba(15, 23, 42, .07);
	border-radius: 16px;
	padding: 1rem;
}
.cw-metric__item { font-weight: 600; padding: .25rem 0; }
.cw-metric__k { color: rgba(11, 18, 32, .64); }
.cw-metric__v { color: rgba(11, 18, 32, .92); font-family: var(--cw-font-head); font-weight: 600; }

.cw-card--service {
	position: relative;
	overflow: hidden;
	padding: 1.7rem 1.5rem;
	border-radius: var(--cw-radius);
	box-shadow: var(--cw-shadow-sm);
	transition: transform .3s var(--cw-ease), box-shadow .3s var(--cw-ease), border-color .3s var(--cw-ease);
}
.cw-card--service::before {
	content: "";
	position: absolute; inset: 0 0 auto 0; height: 3px;
	background: linear-gradient(90deg, var(--cw-blue), var(--cw-orange));
	opacity: 0; transition: opacity .3s var(--cw-ease);
}
.cw-card--service:hover {
	transform: translateY(-6px);
	box-shadow: var(--cw-shadow-lg);
	border-color: transparent;
}
.cw-card--service:hover::before { opacity: 1; }

/* Grilles : plus d'air */
.cw-cards { gap: 1.2rem; }
.cw-locGrid { gap: 1.2rem; }
.cw-loc { padding: 1.6rem; border-radius: var(--cw-radius); box-shadow: var(--cw-shadow-sm); }
.cw-loc:hover { box-shadow: var(--cw-shadow-lg); }
.cw-loc__city { font-size: 1.2rem; }

/* Étapes */
.cw-steps { gap: 1.2rem; }
.cw-step {
	padding: 1.6rem;
	border-radius: var(--cw-radius);
	box-shadow: var(--cw-shadow-sm);
	transition: transform .3s var(--cw-ease), box-shadow .3s var(--cw-ease);
}
.cw-step:hover { transform: translateY(-4px); box-shadow: var(--cw-shadow); }
.cw-step__n { width: 44px; height: 44px; border-radius: 14px; font-family: var(--cw-font-head); }

/* CTA box */
.cw-ctaBox {
	padding: clamp(1.6rem, 3vw, 2.4rem);
	border-radius: var(--cw-radius);
	box-shadow: var(--cw-shadow);
	background:
		radial-gradient(120% 140% at 8% 18%, rgba(0, 194, 168, .12), transparent 58%),
		radial-gradient(120% 140% at 92% 82%, rgba(47, 107, 255, .14), transparent 58%),
		#fff;
}
.cw-ctaBox p { margin: 0; font-size: 1.05rem; line-height: 1.55; }
.cw-ctaBox strong { font-family: var(--cw-font-head); }

/* FAQ */
.cw-faq { gap: .8rem; }
.cw-faq__item {
	border-radius: 16px;
	padding: 1.1rem 1.3rem;
	box-shadow: var(--cw-shadow-sm);
	transition: box-shadow .25s var(--cw-ease), border-color .25s var(--cw-ease);
}
.cw-faq__item[open] { box-shadow: var(--cw-shadow); border-color: rgba(47, 107, 255, .22); }
.cw-faq__item summary {
	font-family: var(--cw-font-head);
	font-weight: 700; font-size: 1.02rem;
	list-style: none;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.cw-faq__item summary::-webkit-details-marker { display: none; }
.cw-faq__item summary::after {
	content: "+";
	font-size: 1.3rem; font-weight: 400; color: var(--cw-blue);
	transition: transform .25s var(--cw-ease);
}
.cw-faq__item[open] summary::after { transform: rotate(45deg); }
.cw-faq__item p { margin-top: .8rem; color: rgba(11, 18, 32, .76); }

/* --------------------------------------------------------------------------
   6. Formulaires (natif qualifié) — finitions premium
   -------------------------------------------------------------------------- */
.cw-form .form-row label { font-size: .88rem; color: var(--ink-2); }
.cw-form input,
.cw-form select,
.cw-form textarea {
	border-radius: 12px;
	padding: .85rem 1rem;
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cw-form input:focus,
.cw-form select:focus,
.cw-form textarea:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 4px rgba(47, 107, 255, .14);
}

/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.cw-cards { gap: 1rem; }
	.cw-section { padding: 3rem 0; }
}
@media (max-width: 560px) {
	.cw-h1 { font-size: clamp(1.8rem, 1.2rem + 5vw, 2.4rem); }
	.cw-h2 { font-size: clamp(1.4rem, 1.1rem + 3vw, 1.9rem); }
	.cw-btn { width: 100%; }
	.cw-hero__ctas { flex-direction: column; }
	.cw-ctaBox { flex-direction: column; align-items: flex-start; }
	.cw-card--service { padding: 1.4rem 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
	.cw-card--service,
	.cw-step,
	.cw-faq__item,
	.cw-btn { transition: none !important; }
}