/*
Theme Name: CADview
Theme URI: https://cadview.fr/
Author: Sébastien Hommet
Author URI: https://cadview.fr/
Description: Thème enfant de Twenty Twenty-Five pour le site de Sébastien Hommet, dessinateur en architecture à Reims. Couleurs, polices hébergées localement, en-tête, pied de page et modèles de pages.
Template: twentytwentyfive
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.1.30
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cadview
*/

/* ==========================================================================
   Réglages communs
   ========================================================================== */
:root {
	--blue: #0A6CFF;
	--blue-ink: #0A5FE0;
	--blue-soft: #3D8BFF;
	--navy: #0A1B3D;
	--navy-deep: #07132B;
	--navy-line: #22314F;
	--ink: #111418;
	--text: #3A4556;
	--muted: #4F5B6E;
	--bg: #E5E8EC;
	--paper: #FFFFFF;
	--line: #D3D9E1;
	--line-strong: #C4CEDD;
	--on-navy: #FFFFFF;
	--on-navy-soft: #D5DEEC;
	--on-navy-mute: #A9B8D0;
	--label-navy: #8FB6FF;
	--f-display: Archivo, "Arial Narrow", sans-serif;
	--f-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
	--f-mono: "IBM Plex Mono", ui-monospace, monospace;
	--gutter: clamp(16px, 5vw, 80px);
	--max: 1280px;
	--r: 6px;
}

html { scroll-behavior: smooth; }
/* Le bouton « Découvrir mes services » arrive sous l'en-tête réduit, pas dessous. */
#services { scroll-margin-top: 72px; }
/* Lien « Confidentialité » : le titre arrive sous l'en-tête, même quand celui-ci rétrécit à l'arrivée sur la page. */
#confidentialite { scroll-margin-top: 160px; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}
body { background: var(--bg); color: var(--ink); }
img { max-width: 100%; height: auto; }
figure.wp-block-image { margin: 0; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
mark.has-inline-color { padding: 0; background-color: transparent; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 3px solid var(--focus, var(--blue-ink));
	outline-offset: 2px;
}
.cv-hero, .cv-navy, .cv-foot { --focus: var(--label-navy); }

/* Pas de cadre au clic ni au toucher (WordPress en met un sur tout élément actif) ; il reste au clavier. */
.wp-site-blocks :focus:not(:focus-visible) { outline: none; }
.cv-navy .cv-form { --focus: var(--blue-ink); }

/* Liens soulignés discrets, comme le prototype */
a { text-underline-offset: .15em; }

/* Conteneur centré */
.cv-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--max) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.cv-eyebrow {
	font-family: var(--f-mono);
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--blue-ink);
}
.cv-lead { font-size: clamp(17px, 1.6vw, 19px); color: var(--text); max-width: 62ch; }
/* Paragraphe secondaire sous le chapeau d'un haut de page : même largeur de lecture. */
.cv-phero .cv-txt > .cv-muted { max-width: 68ch; }
.cv-muted { color: var(--muted); }
.cv-more a, a.cv-more { font-weight: 600; text-decoration: none; }
.cv-more a:hover { text-decoration: underline; }

/* Sections */
.cv-section { padding-block: clamp(56px, 8vw, 96px); }
.cv-mist { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cv-lined { border-top: 1px solid var(--line); }
.cv-mist + .cv-lined,
.cv-mist + .cv-mist { border-top: 0; }
.cv-section-compact { padding-block: clamp(40px, 5vw, 64px); }

.cv-stack { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 40px); }
/* Section courte : surtitre, titre et un paragraphe (largeur de lecture donnée par .cv-lead). */
.cv-stack.cv-text { gap: clamp(16px, 2vw, 24px); }
.cv-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px 40px;
	margin-bottom: clamp(28px, 4vw, 48px);
}
.cv-head-t { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cv-head > p { max-width: 420px; }

/* Boutons */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; text-decoration: none; }
.cv-hero .is-style-outline > .wp-block-button__link,
.cv-navy .is-style-outline > .wp-block-button__link {
	background: transparent;
	border: 1px solid #5A6F94;
	color: var(--on-navy);
	padding: 13px 26px;
}
.cv-hero .is-style-outline > .wp-block-button__link:hover,
.cv-navy .is-style-outline > .wp-block-button__link:hover {
	border-color: var(--on-navy);
	background: transparent;
}

/* Grilles */
.cv-grid4, .cv-grid3, .cv-grid2 { display: grid; gap: 24px; }
.cv-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cv-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cv-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cv-top-align { align-items: start; }
@media (max-width: 1080px) {
	.cv-grid4, .cv-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.cv-grid4, .cv-grid3, .cv-grid2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   En-tête
   ========================================================================== */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}
body.admin-bar header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) {
	body.admin-bar header.wp-block-template-part { top: 0; }
}
.cv-top { background: var(--bg); border-bottom: 1px solid var(--line); }
.cv-top-in {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	max-width: calc(var(--max) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
	min-height: clamp(76px, 10.4vw, 150px);
	transition: min-height .25s ease;
}
@media (min-width: 981px) {
	.cv-top-in { max-width: none; padding-left: clamp(16px, 2vw, 28px); padding-right: var(--gutter); }
}
.cv-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cv-brand-logo, .cv-brand-logo a { display: block; flex-shrink: 0; }
.cv-brand-logo img {
	display: block;
	width: clamp(52px, 9vw, 130px);
	height: clamp(52px, 9vw, 130px);
	object-fit: contain;
	transition: width .25s ease, height .25s ease;
}
.cv-brand-txt { display: flex; flex-direction: column; min-width: 0; }
.cv-brand-name {
	font-family: var(--f-display);
	font-weight: 800;
	font-size: clamp(18px, 2.9vw, 42px);
	letter-spacing: .02em;
	line-height: 1.15;
	white-space: nowrap;
	transition: font-size .25s ease;
}
.cv-brand-name a { color: var(--ink); text-decoration: none; }
.cv-brand-tag {
	font-size: clamp(10.5px, 1.25vw, 18px);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
	line-height: 1.4;
	transition: font-size .25s ease;
}
.cv-top.cv-small .cv-top-in { min-height: 72px; }
.cv-top.cv-small .cv-brand-logo img { width: 52px; height: 52px; }
.cv-top.cv-small .cv-brand-name { font-size: 19px; }
.cv-top.cv-small .cv-brand-tag { font-size: 10.5px; }
@media (max-width: 420px) {
	.cv-brand-tag { display: none; }
	.cv-brand-name { font-size: 16px; }
}

/* Menu */
.cv-nav .wp-block-navigation__container { gap: 30px; align-items: center; }
.cv-nav .wp-block-navigation-item__content,
.cv-nav .wp-block-navigation-submenu__toggle { color: var(--ink); white-space: nowrap; }
.cv-nav .wp-block-navigation-item__content:hover { color: var(--blue-ink); }
.cv-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--blue-ink); }
.cv-nav .wp-block-navigation__submenu-container {
	background: var(--paper) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--r);
	padding: 8px !important;
	min-width: 250px !important;
	box-shadow: 0 12px 30px rgba(10, 27, 61, .12);
}
.cv-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 10px 12px !important;
	border-radius: 4px;
}
.cv-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--bg); text-decoration: none; }
.cv-nav .cv-nav-cta > .wp-block-navigation-item__content {
	background: var(--blue);
	color: var(--on-navy);
	padding: 12px 20px;
	border-radius: 4px;
	font-weight: 600;
	min-height: 46px;
	display: inline-flex;
	align-items: center;
}
.cv-nav .cv-nav-cta > .wp-block-navigation-item__content:hover { background: var(--blue-ink); color: var(--on-navy); text-decoration: none; }
/* Bouton menu (☰) jusqu'à 980 px de large, comme la maquette */
@media (max-width: 980px) {
	.cv-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
	.cv-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		width: 46px;
		height: 46px;
		border: 1px solid var(--line);
		border-radius: 4px;
		background: var(--paper);
		display: flex !important;
		align-items: center;
		justify-content: center;
	}
}
/* Menu téléphone (plein écran) */
.cv-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--bg) !important;
	padding: 20px var(--gutter) 32px !important;
}
.cv-nav .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 48px !important; }
.cv-nav .is-menu-open .wp-block-navigation__responsive-container-content,
.cv-nav .is-menu-open .wp-block-navigation__container,
.cv-nav .is-menu-open .wp-block-navigation-item {
	align-items: flex-start !important;
	justify-content: flex-start !important;
}
.cv-nav .is-menu-open .wp-block-navigation__container { gap: 0 !important; width: 100%; }
.cv-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--line); }
.cv-nav .is-menu-open .wp-block-navigation-item__content { padding: 14px 0 !important; font-size: 18px; }
.cv-nav .is-menu-open .wp-block-navigation__submenu-container {
	border: 0 !important;
	box-shadow: none;
	padding: 0 0 10px 14px !important;
	background: transparent !important;
	min-width: 0 !important;
}
.cv-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 8px 0 !important; font-size: 16px; }
.cv-nav .is-menu-open .cv-nav-cta { border-bottom: 0 !important; margin-top: 20px; }
.cv-nav .is-menu-open .cv-nav-cta > .wp-block-navigation-item__content { padding: 14px 22px !important; }

/* ==========================================================================
   Accueil
   ========================================================================== */
.cv-hero { background: var(--navy); color: var(--on-navy); overflow: hidden; }
.cv-hero-in {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	width: 100%;
	max-width: calc(var(--max) + 2 * var(--gutter));
	margin-inline: auto;
}
.cv-hero-text {
	padding: clamp(48px, 7vw, 110px) clamp(24px, 4vw, 64px) clamp(48px, 6vw, 80px) var(--gutter);
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.cv-hero h1 { color: var(--on-navy); }
.cv-hero-text > p { color: var(--on-navy-soft); font-size: clamp(17px, 1.6vw, 19px); max-width: 34em; }
/* Plan du bandeau : traits bleu clair sur une table à dessin (quadrillage discret, halo, repères d'angle). */
.cv-hero-img { position: relative; min-height: 320px; background: var(--navy); overflow: hidden; isolation: isolate; }
.cv-hero-img::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		radial-gradient(ellipse 60% 55% at 55% 48%, rgba(10, 108, 255, .22), transparent 72%),
		linear-gradient(rgba(143, 182, 255, .10) 1px, transparent 1px),
		linear-gradient(90deg, rgba(143, 182, 255, .10) 1px, transparent 1px),
		linear-gradient(rgba(143, 182, 255, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(143, 182, 255, .045) 1px, transparent 1px);
	background-size: auto, 120px 120px, 120px 120px, 24px 24px, 24px 24px;
	background-position: center, -1px -1px, -1px -1px, -1px -1px, -1px -1px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 30%);
	mask-image: linear-gradient(90deg, transparent, #000 30%);
}
.cv-hero-img::after {
	--c: rgba(143, 182, 255, .55);
	content: "";
	position: absolute;
	inset: clamp(14px, 1.6vw, 22px);
	pointer-events: none;
	background:
		linear-gradient(var(--c), var(--c)) left top / 18px 1px,
		linear-gradient(var(--c), var(--c)) left top / 1px 18px,
		linear-gradient(var(--c), var(--c)) right top / 18px 1px,
		linear-gradient(var(--c), var(--c)) right top / 1px 18px,
		linear-gradient(var(--c), var(--c)) left bottom / 18px 1px,
		linear-gradient(var(--c), var(--c)) left bottom / 1px 18px,
		linear-gradient(var(--c), var(--c)) right bottom / 18px 1px,
		linear-gradient(var(--c), var(--c)) right bottom / 1px 18px;
	background-repeat: no-repeat;
}
.cv-hero-img {
	/* le plan déborde du cadre, avec un fondu côté texte */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 14%);
	mask-image: linear-gradient(90deg, transparent, #000 14%);
}
.cv-hero-img img {
	position: absolute;
	top: 50%;
	left: 40%;
	display: block;
	width: auto;
	max-width: none;
	height: 190%;
	transform: translate(-50%, -50%) rotate(-45deg);
	filter: drop-shadow(0 0 10px rgba(61, 139, 255, .28));
	opacity: .75;
}
/* PC et tablette à l'horizontale : le plan s'étend sous le texte, en fondu. */
@media (min-width: 901px) {
	.cv-hero-in { position: relative; }
	.cv-hero-text { position: relative; z-index: 1; }
	.cv-hero-img {
		position: absolute;
		top: 0;
		right: min(0px, calc((100% - 100vw / var(--cv-z, 1)) / 2)); /* grand écran : jusqu'au bord de la fenêtre (--cv-z : agrandissement, voir fin du fichier) */
		bottom: 0;
		left: 22%;
		min-height: 0;
		-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .14) 24%, rgba(0, 0, 0, .5) 44%, #000 66%);
		mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .14) 24%, rgba(0, 0, 0, .5) 44%, #000 66%);
	}
	.cv-hero-img img { left: 46%; }
}
@media (max-width: 900px) {
	.cv-hero-in { grid-template-columns: 1fr; }
	.cv-hero-img { height: 360px; min-height: 0; }
	.cv-hero-img::before { -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%); mask-image: linear-gradient(180deg, transparent, #000 25%); }
	/* téléphone et tablette : le plan remonte sous les boutons, en fondu */
	.cv-hero-in { position: relative; }
	.cv-hero-text { position: relative; z-index: 1; }
	.cv-hero figure.cv-hero-img { height: 560px; margin-top: -280px; -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .25) 30%, rgba(0, 0, 0, .6) 48%, #000 66%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .25) 30%, rgba(0, 0, 0, .6) 48%, #000 66%); }
	.cv-hero-img img { height: 170%; left: 50%; top: 58%; }
}

.cv-trust { border-bottom: 1px solid var(--line); }
.cv-trust-in {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px 32px;
	padding-block: 32px;
}
/* Chaque bloc : une petite icône devant, un élément fort en haut, un complément en dessous. */
.cv-trust-item { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; align-content: end; min-width: 0; }
.cv-trust-item > .cv-ico { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.cv-trust-item > :not(.cv-ico) { grid-column: 2; }
.cv-trust-item .cv-ico img { display: block; width: 36px; height: 36px; }
.cv-trust-item .cv-strong { font-family: var(--f-display); font-weight: 800; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.2; color: var(--ink); }
.cv-trust-item .cv-fndi img { display: block; width: auto; height: 27px; max-width: 100%; object-fit: contain; object-position: left bottom; }
.cv-trust-item .cv-sub { color: var(--muted); font-size: 14.5px; line-height: 1.45; }
/* Les éléments du haut partagent la même ligne de base, les compléments commencent à la même hauteur. */
@supports (grid-template-rows: subgrid) {
	.cv-trust-item { grid-row: span 2; grid-template-rows: subgrid; }
	.cv-trust-item > .cv-strong,
	.cv-trust-item > .cv-fndi { align-self: end; }
	.cv-trust-item > .cv-sub { align-self: start; }
}
@media (max-width: 1100px) { .cv-trust-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; } }
/* Téléphone : l'icône passe au-dessus pour laisser toute la largeur au texte. */
@media (max-width: 520px) {
	.cv-trust-item { grid-template-columns: minmax(0, 1fr); }
	.cv-trust-item > .cv-ico { grid-row: auto; align-self: end; margin-bottom: 4px; }
	.cv-trust-item > :not(.cv-ico) { grid-column: 1; }
	.cv-trust-item .cv-ico img { width: 30px; height: 30px; }
	.cv-trust-item .cv-strong { font-size: 17px; }
	.cv-trust-item .cv-sub { font-size: 14px; }
	@supports (grid-template-rows: subgrid) {
		.cv-trust-item { grid-row: span 3; }
	}
}
@media (max-width: 389px) { .cv-trust-item .cv-strong { font-size: 16px; } }

/* Cartes de services */
.cv-svc {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
	background: var(--paper);
	transition: border-color .2s, transform .2s;
}
.cv-svc:hover { border-color: var(--blue); transform: translateY(-2px); }
/* Cartes Services : les mêmes images que les pages (outils, plan, cerfa, tirages 3D), posées sur le gris des pages. */
.cv-svc > figure img { display: block; width: 100%; height: 180px; object-fit: contain; padding: 14px 12px; box-sizing: border-box; background: var(--bg); }
.cv-svc-body { padding: 24px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.cv-n { font-family: var(--f-mono); font-size: 12px; color: var(--blue-ink); }
.cv-svc-body > p:not(.cv-n):not(.cv-go) { color: var(--muted); font-size: 15px; }
.cv-go { margin-top: auto; font-weight: 600; font-size: 15px; }
.cv-go a { text-decoration: none; color: var(--blue-ink); }
.cv-go a::after { content: ""; position: absolute; inset: 0; }

/* Encadrés */
.cv-box {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: clamp(22px, 3vw, 34px);
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}
.cv-box > p { color: var(--text); }
.cv-box > p.cv-muted { color: var(--muted); font-size: 15px; }
.cv-note { border: 1px solid var(--line); background: var(--paper); border-radius: var(--r); padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 12px; }

/* Méthode */

/* Projets */
.cv-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.cv-filters button {
	min-height: 44px;
	padding: 0 20px;
	border-radius: 999px;
	border: 1px solid var(--line-strong);
	background: var(--paper);
	color: var(--ink);
	font: 600 15px var(--f-body);
	cursor: pointer;
}
.cv-filters button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.cv-proj { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cv-proj[hidden] { display: none; }
.cv-views { position: relative; display: flex; flex-direction: column; gap: 12px; }
.cv-views.cv-js { display: block; }
.cv-views > figure img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--r);
}
.cv-views > figure.is-contain img,
.cv-views > figure.cv-contain img { object-fit: contain; background: #FFFFFF; border: 1px solid var(--line); padding: 8px; box-sizing: border-box; }
.cv-views > figure[hidden] { display: none; }
.cv-dots {
	position: absolute;
	left: 50%;
	bottom: 10px;
	transform: translateX(-50%);
	display: flex;
	background: rgba(10, 27, 61, .55);
	border-radius: 999px;
	padding: 0 6px;
}
.cv-dots button { width: 32px; min-height: 32px; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.cv-dots button span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .55); transition: background .2s, transform .2s; }
.cv-dots button[aria-pressed="true"] span { background: #FFFFFF; transform: scale(1.25); }
.cv-dots button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -4px; border-radius: 50%; }
@media (pointer: coarse) { .cv-dots button { width: 44px; min-height: 44px; } }
.cv-t { font-family: var(--f-mono); font-size: 12px; color: var(--blue-ink); }

/* Avis */
.cv-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 980px) { .cv-reviews { grid-template-columns: 1fr; } }
.cv-rev {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: clamp(22px, 3vw, 32px);
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}
.cv-stars { color: var(--blue); font-size: 18px; letter-spacing: 2px; }
.cv-quote { font-size: 17px; line-height: 1.6; color: var(--ink); }
.cv-author { margin-top: auto !important; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.5; }
.cv-author strong { font-weight: 600; }
.cv-role { color: var(--muted); }

/* Partenaires */
.cv-partners-title { font-size: clamp(22px, 2.4vw, 28px) !important; }
.cv-partners { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cv-partners > figure,
.cv-partners > figure > a {
	display: flex;
	align-items: center;
	justify-content: center;
}
.cv-partners > figure {
	min-height: 180px;
	padding: 20px;
	box-sizing: border-box;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--bg);
}
.cv-partners > figure img { max-height: 140px; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 560px) {
	.cv-partners { grid-template-columns: 1fr; }
	.cv-partners > figure { min-height: 150px; padding: 16px; }
	.cv-partners > figure img { max-height: 120px; }
}

/* À propos (accueil) */
.cv-about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.cv-about > figure img { width: 100%; max-width: 480px; aspect-ratio: 1; object-fit: contain; }
.cv-txt { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.cv-about .cv-lead { max-width: 600px; }
.cv-dates { display: flex; flex-wrap: wrap; gap: 16px 36px; font-family: var(--f-mono); font-size: 14px; }
.cv-dates strong { color: var(--blue-ink); font-weight: 500; }
@media (max-width: 820px) {
	.cv-about { grid-template-columns: 1fr; }
	.cv-about > figure img { max-width: 360px; }
}

/* ==========================================================================
   Bandeaux bleu nuit : appel à l'action et contact
   ========================================================================== */
.cv-navy { background: var(--navy); color: var(--on-navy); position: relative; overflow: hidden; }
.cv-navy h1, .cv-navy h2 { color: var(--on-navy); }
.cv-contact h1 { font-size: clamp(28px, 3.6vw, 44px); }
.cv-navy p { color: var(--on-navy-soft); }
.cv-navy .cv-eyebrow { color: var(--label-navy); }
/* Dessin des bandeaux bleu nuit : même traitement que le plan de l'accueil (quadrillage, halo, fondu), mais droit. */
.cv-navy > .cv-deco {
	position: absolute !important;
	inset: 0;
	width: auto;
	margin: 0;
	pointer-events: none;
	overflow: hidden;
	isolation: isolate;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .3) 32%, rgba(0, 0, 0, .75) 60%, #000 85%);
	mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .3) 32%, rgba(0, 0, 0, .75) 60%, #000 85%);
}
.cv-navy > .cv-deco::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		radial-gradient(ellipse 45% 55% at 28% 75%, rgba(10, 108, 255, .2), transparent 72%),
		linear-gradient(rgba(143, 182, 255, .08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(143, 182, 255, .08) 1px, transparent 1px),
		linear-gradient(rgba(143, 182, 255, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(143, 182, 255, .035) 1px, transparent 1px);
	background-size: auto, 120px 120px, 120px 120px, 24px 24px, 24px 24px;
	background-position: center, -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}
.cv-navy > .cv-deco img {
	position: absolute;
	bottom: -3%;
	right: -4%;
	display: block;
	width: min(860px, 62%);
	max-width: none;
	height: auto;
	opacity: .75;
	filter: drop-shadow(0 0 10px rgba(61, 139, 255, .25));
}
.cv-navy > .cv-deco-left img { right: auto; left: -4%; }
/* Téléphone et tablette : le dessin se place entre les coordonnées et le formulaire, sur toute la largeur. */
@media (max-width: 900px) {
	.cv-navy > .cv-deco img { display: none; }
	.cv-contact .cv-info::after {
		content: "";
		display: block;
		height: clamp(230px, 56vw, 420px);
		margin: 0 calc(-1 * var(--gutter)) -24px;
		background: url("assets/images/contact-maison.webp") 38% 28% / cover no-repeat;
		opacity: .75;
		filter: drop-shadow(0 0 8px rgba(61, 139, 255, .25));
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
		mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
	}
}
.cv-cta-in {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: clamp(48px, 7vw, 80px);
}
.cv-cta-in > .wp-block-group { display: flex; flex-direction: column; gap: 12px; }
.cv-cta-right { align-items: flex-start; }
.cv-phone { font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; }
.cv-navy .cv-phone, .cv-navy .cv-phone a { color: var(--on-navy); }
.cv-phone a, .cv-mail a { text-decoration: none; color: inherit; }
.cv-phone a:hover, .cv-mail a:hover { text-decoration: underline; }

.cv-contact-in {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(32px, 6vw, 80px);
	padding-block: clamp(56px, 8vw, 96px);
}
.cv-info { display: flex; flex-direction: column; gap: 18px; }
.cv-info .cv-mail, .cv-info .cv-mail a { color: var(--on-navy-soft); }
.cv-navy .cv-info .cv-zone { color: var(--on-navy-mute); font-size: 15px; }
/* Section contact : téléphone et e-mail de même importance (les bandeaux « Un projet ? » gardent leur grand numéro). */
.cv-contact .cv-phone,
.cv-contact .cv-mail { font-family: var(--f-body); font-weight: 600; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.4; }
.cv-contact .cv-phone a,
.cv-contact .cv-mail a { color: var(--on-navy); }
.cv-contact .cv-mail { overflow-wrap: anywhere; }
@media (max-width: 900px) { .cv-contact-in { grid-template-columns: 1fr; } }
.cv-form {
	background: var(--paper);
	color: var(--ink);
	border-radius: var(--r);
	padding: clamp(20px, 3vw, 36px);
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-self: start;
}
.cv-navy .cv-form p { color: var(--text); }
.cv-navy .cv-form .cv-fine { color: var(--muted); font-size: 13px; }
.cv-navy .cv-form h3 { color: var(--ink); }

/* Formulaire (Contact Form 7) */
.cv-form .wpcf7-form { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.cv-form .wpcf7 .hidden-fields-container { display: none; }
.cv-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 560px) { .cv-row { grid-template-columns: 1fr; } }
.cv-fld { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); min-width: 0; }
.cv-fld .wpcf7-form-control-wrap { display: block; }
.cv-form input[type="text"],
.cv-form input[type="email"],
.cv-form input[type="tel"],
.cv-form select,
.cv-form textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--line-strong);
	border-radius: 4px;
	background: var(--paper);
	color: var(--ink);
	font: 400 16px var(--f-body);
}
.cv-form textarea { min-height: 120px; padding: 12px 14px; resize: vertical; display: block; }
.cv-form input::placeholder, .cv-form textarea::placeholder { color: #6B7688; }
.cv-checks { border: 0; margin: 0; padding: 0; min-width: 0; }
.cv-checks legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 6px; color: var(--ink); }
.cv-checks .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.cv-checks .wpcf7-list-item { margin: 0; }
.cv-checks .wpcf7-list-item label { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; cursor: pointer; }
.cv-checks input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); }
.cv-send { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.cv-form .wpcf7-submit {
	min-height: 52px;
	border: 0;
	border-radius: 4px;
	background: var(--blue);
	color: var(--on-navy);
	font: 600 16px var(--f-body);
	cursor: pointer;
	width: 100%;
}
.cv-form .wpcf7-submit:hover { background: var(--blue-ink); }
.cv-form .wpcf7-spinner { margin: 8px auto 0; display: block; }
.cv-form .wpcf7-not-valid-tip { font-size: 13px; font-weight: 400; color: #B42318; margin-top: 4px; }
.cv-form .wpcf7-form .wpcf7-response-output { margin: 0; padding: 12px 14px; border-radius: 4px; font-size: 14px; color: var(--ink); }
.cv-form .wpcf7-form.sent .wpcf7-response-output { border-color: #2E7D32; background: #EEF7EE; }
.cv-form .wpcf7-turnstile:empty { display: none; }

/* ==========================================================================
   Pages intérieures
   ========================================================================== */
.cv-phero { border-bottom: 1px solid var(--line); }
.cv-phero-in {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
	padding-block: clamp(40px, 6vw, 80px);
}
.cv-phero-in.cv-single { grid-template-columns: 1fr; }
.cv-crumb { font-size: 14px; color: var(--muted); }
.cv-crumb a { color: var(--muted); }
.cv-pic { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.cv-pic img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: contain; }
.cv-portrait img { width: 100%; max-width: 440px; aspect-ratio: 1; object-fit: contain; }
/* Pages Relevés (mètre, télémètre, laser), Tracé de plans (plan du rez-de-chaussée), Permis (vrais formulaires
   cerfa DP et PC, en léger éventail) et Visualisation 3D (deux rendus en tirages photo) :
   images en grand, posées sur la page sans vignette.
   Feuilles entières (pas de coupure). PC : plus larges que leur colonne, elles empiètent un peu sur les marges du bandeau.
   Téléphone et tablette : en pleine largeur sous le bouton. */
.cv-phero:has(.cv-docs) { overflow: hidden; }
.cv-phero .cv-docs img { display: block; width: 118%; max-width: none; height: auto; margin: -40px 0 -48px -6%; pointer-events: none; }
@media (max-width: 860px) {
	.cv-phero-in { grid-template-columns: 1fr; }
	.cv-pic { max-width: 520px; }
	.cv-phero .cv-docs img { width: min(112%, 720px); margin: 0 0 -24px 50%; transform: translateX(-50%); }
}

.cv-checklist {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 48px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.cv-checklist li {
	position: relative;
	padding-left: 36px;
	font-size: 17px;
	min-width: 0;
}
.cv-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 22px;
	height: 22px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A6CFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / contain;
}
@media (max-width: 700px) { .cv-checklist { grid-template-columns: 1fr; } }

.cv-soft, .cv-towns { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.cv-soft { gap: 10px; }
.cv-soft li { font-family: var(--f-mono); font-size: 13px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); }
.cv-towns { gap: 8px 10px; }
.cv-towns li { font-size: 15px; padding: 6px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; }
.cv-soft-space { margin-top: 32px; }

.cv-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cv-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
@media (max-width: 1080px) { .cv-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cv-gallery { grid-template-columns: 1fr; } }

.cv-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.cv-timeline > div { border-top: 2px solid var(--blue); padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.cv-yr { font-family: var(--f-mono); font-weight: 500; color: var(--blue-ink); font-size: 15px; }
@media (max-width: 900px) { .cv-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cv-timeline { grid-template-columns: 1fr; } }

.cv-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cv-fndi-big img { width: 260px; height: auto; }

/* Questions fréquentes */
.cv-faq { max-width: 900px; }
.cv-faq .wp-block-details { border-bottom: 1px solid var(--line); margin: 0; }
.cv-faq .wp-block-details:first-of-type { border-top: 1px solid var(--line); }
.cv-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 20px 40px 20px 0;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: clamp(17px, 1.6vw, 20px);
	position: relative;
}
.cv-faq summary::-webkit-details-marker { display: none; }
.cv-faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-family: var(--f-mono); font-size: 24px; color: var(--blue-ink); }
.cv-faq details[open] summary::after { content: "–"; }
.cv-faq details > p { padding: 0 0 22px; color: var(--text); max-width: 70ch; }

/* Mentions légales */
.cv-legal { max-width: 760px; display: flex; flex-direction: column; gap: 32px; }
.cv-legal > .wp-block-group { display: flex; flex-direction: column; gap: 10px; }
.cv-legal h2 { font-size: 24px; }

/* ==========================================================================
   Pied de page
   ========================================================================== */
.cv-foot { background: var(--navy-deep); color: #C4CEDD; font-size: 14px; }
.cv-foot-in { padding-block: 56px 32px; display: flex; flex-direction: column; gap: 36px; }
.cv-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.cv-cols > .wp-block-group { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cv-foot p { color: #C4CEDD; }
.cv-foot a { color: #C4CEDD; text-decoration: none; }
.cv-foot a:hover { color: var(--on-navy); text-decoration: underline; }
.cv-foot .cv-foot-h { color: var(--on-navy); font-weight: 600; }
.cv-foot .cv-foot-name { font-family: var(--f-display); font-weight: 800; font-size: 18px; color: var(--on-navy); }
.cv-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 22px;
	border-top: 1px solid var(--navy-line);
	padding-top: 20px;
	font-size: 13px;
}
.cv-bottom p { font-size: 13px; }
.cv-bottom-links { display: flex; flex-wrap: wrap; gap: 22px; }
@media (max-width: 900px) { .cv-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .cv-cols { grid-template-columns: 1fr; } }

/* ==========================================================================
   Grands écrans (PC) : au-delà de 1440 px de large, tout le site s'agrandit
   proportionnellement. Même disposition et mêmes proportions qu'à 1440 px
   (textes, images, marges, dessins), quelle que soit la résolution de l'écran.
   --cv-z = largeur de la fenêtre / 1440, par paliers de 40 px.
   ========================================================================== */
@media screen and (min-width: 1440px) {
	/* Valeurs qui dépendent de la largeur de la fenêtre : figées à celles de 1440 px,
	   l'agrandissement s'occupe du reste. */
	:root { --gutter: 72px; }
	.cv-hero-text { padding: 100.8px 57.6px 80px var(--gutter); }
	.wp-site-blocks { zoom: var(--cv-z, 1); }
}
@media screen and (min-width: 1480px) { :root { --cv-z: 1.0278; } }
@media screen and (min-width: 1520px) { :root { --cv-z: 1.0556; } }
@media screen and (min-width: 1560px) { :root { --cv-z: 1.0833; } }
@media screen and (min-width: 1600px) { :root { --cv-z: 1.1111; } }
@media screen and (min-width: 1640px) { :root { --cv-z: 1.1389; } }
@media screen and (min-width: 1680px) { :root { --cv-z: 1.1667; } }
@media screen and (min-width: 1720px) { :root { --cv-z: 1.1944; } }
@media screen and (min-width: 1760px) { :root { --cv-z: 1.2222; } }
@media screen and (min-width: 1800px) { :root { --cv-z: 1.25; } }
@media screen and (min-width: 1840px) { :root { --cv-z: 1.2778; } }
@media screen and (min-width: 1880px) { :root { --cv-z: 1.3056; } }
@media screen and (min-width: 1920px) { :root { --cv-z: 1.3333; } }
@media screen and (min-width: 1960px) { :root { --cv-z: 1.3611; } }
@media screen and (min-width: 2000px) { :root { --cv-z: 1.3889; } }
@media screen and (min-width: 2040px) { :root { --cv-z: 1.4167; } }
@media screen and (min-width: 2080px) { :root { --cv-z: 1.4444; } }
@media screen and (min-width: 2120px) { :root { --cv-z: 1.4722; } }
@media screen and (min-width: 2160px) { :root { --cv-z: 1.5; } }
@media screen and (min-width: 2200px) { :root { --cv-z: 1.5278; } }
@media screen and (min-width: 2240px) { :root { --cv-z: 1.5556; } }
@media screen and (min-width: 2280px) { :root { --cv-z: 1.5833; } }
@media screen and (min-width: 2320px) { :root { --cv-z: 1.6111; } }
@media screen and (min-width: 2360px) { :root { --cv-z: 1.6389; } }
@media screen and (min-width: 2400px) { :root { --cv-z: 1.6667; } }
@media screen and (min-width: 2440px) { :root { --cv-z: 1.6944; } }
@media screen and (min-width: 2480px) { :root { --cv-z: 1.7222; } }
@media screen and (min-width: 2520px) { :root { --cv-z: 1.75; } }
@media screen and (min-width: 2560px) { :root { --cv-z: 1.7778; } }
@media screen and (min-width: 2600px) { :root { --cv-z: 1.8056; } }
@media screen and (min-width: 2640px) { :root { --cv-z: 1.8333; } }
@media screen and (min-width: 2680px) { :root { --cv-z: 1.8611; } }
@media screen and (min-width: 2720px) { :root { --cv-z: 1.8889; } }
@media screen and (min-width: 2760px) { :root { --cv-z: 1.9167; } }
@media screen and (min-width: 2800px) { :root { --cv-z: 1.9444; } }
@media screen and (min-width: 2840px) { :root { --cv-z: 1.9722; } }
@media screen and (min-width: 2880px) { :root { --cv-z: 2; } }
@media screen and (min-width: 2920px) { :root { --cv-z: 2.0278; } }
@media screen and (min-width: 2960px) { :root { --cv-z: 2.0556; } }
@media screen and (min-width: 3000px) { :root { --cv-z: 2.0833; } }
@media screen and (min-width: 3040px) { :root { --cv-z: 2.1111; } }
@media screen and (min-width: 3080px) { :root { --cv-z: 2.1389; } }
@media screen and (min-width: 3120px) { :root { --cv-z: 2.1667; } }
@media screen and (min-width: 3160px) { :root { --cv-z: 2.1944; } }
@media screen and (min-width: 3200px) { :root { --cv-z: 2.2222; } }
@media screen and (min-width: 3240px) { :root { --cv-z: 2.25; } }
@media screen and (min-width: 3280px) { :root { --cv-z: 2.2778; } }
@media screen and (min-width: 3320px) { :root { --cv-z: 2.3056; } }
@media screen and (min-width: 3360px) { :root { --cv-z: 2.3333; } }
@media screen and (min-width: 3400px) { :root { --cv-z: 2.3611; } }
@media screen and (min-width: 3440px) { :root { --cv-z: 2.3889; } }
@media screen and (min-width: 3480px) { :root { --cv-z: 2.4167; } }
@media screen and (min-width: 3520px) { :root { --cv-z: 2.4444; } }
@media screen and (min-width: 3560px) { :root { --cv-z: 2.4722; } }
@media screen and (min-width: 3600px) { :root { --cv-z: 2.5; } }
@media screen and (min-width: 3640px) { :root { --cv-z: 2.5278; } }
@media screen and (min-width: 3680px) { :root { --cv-z: 2.5556; } }
@media screen and (min-width: 3720px) { :root { --cv-z: 2.5833; } }
@media screen and (min-width: 3760px) { :root { --cv-z: 2.6111; } }
@media screen and (min-width: 3800px) { :root { --cv-z: 2.6389; } }
@media screen and (min-width: 3840px) { :root { --cv-z: 2.6667; } }