:root{
	--bg:#f3ead8;
	--surface:#fbfaf7;
	--text:#151515;
	--muted:#67615b;
	--line:rgba(21,21,21,.13);
	--shadow:0 22px 60px rgba(0,0,0,.10);
	--radius:26px;
	--blue:#00a2df;
	--gold:#b9925d;
	--red:#e2000b;
	--green:#3f8d58;
	--title:#767067;
	font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif
}

*{
	box-sizing:border-box
}

html,body{
	min-height:100%
}

body{
    
	margin:0;
	color:var(--text);
	background:linear-gradient(
    135deg,
    #fbfaf8 0%,
    #f4f2ee 35%,
    #efede9 70%,
    #e9e7e3 100%)

}

a{
	color:inherit
}

button,input,textarea{
	font:inherit
}

.svg-sprite{
	position:absolute;
	width:0;
	height:0;
	overflow:hidden
}

.page-shell{
	min-height:100svh;
	display:grid;
	grid-template-rows:auto 1fr auto;
	gap:clamp(12px,2vh,22px);
	padding:clamp(14px,2vw,28px)
}

.hero{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(280px,470px);
	align-items:end;
	gap:clamp(18px,4vw,52px)
}

.eyebrow,.tile-kicker{
	margin:0 0 8px;
	color:var(--muted);
	font-size:.76rem;
	font-weight:850;
	letter-spacing:.105em;
	font-variant-caps: small-caps;
	text-transform: capitalize;
}

.eyebrow{
	border-bottom : 1px solid var(--muted);
	font-size: clamp(.96rem, 1.1vw, 1.08rem);
}

.tile-kicker{
	border-left: 5px solid var(--title);
	border-bottom:1px solid var(--title);
	border-top-left-radius: var(--radius);
	border-bottom-left-radius: var(--radius);
	padding-left:var(--radius);
}

h1,h2,p{
	margin-top:0
}

h1,h2{
	color: var(--title);
}


h1{
	max-width:940px;
	margin-bottom:0;
	font-size:clamp(2.7rem,6vw,5.8rem);
	line-height:.98;
	letter-spacing:-.035em;
	font-weight:750;
}

.hero-side{
	display:flex;
	align-items:center;
	gap:18px;
	padding-bottom:8px
}

.profile-photo{
	width:clamp(76px,8vw,112px);
	height:clamp(76px,8vw,112px);
	flex:0 0 auto;
	border-radius:28px;
	object-fit:cover;
	background:rgba(0,0,0,.08);
	border:1px solid rgba(0,0,0,.08)
}

.hero-side-text p{
	margin-bottom:12px;
	color:var(--muted);
	font-size:clamp(1rem,1.25vw,1.18rem);
	line-height:1.42
}

.hero-link,.icon-btn,.contact-btn,.submit-btn,.footer button{
	appearance:none;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border:1px solid var(--line);
	background:rgba(255,255,255,.82);
	color:var(--text);
	text-decoration:none;
	cursor:pointer;
	transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease
}

.hero-link:hover,.icon-btn:hover,.contact-btn:hover,.submit-btn:hover,.footer button:hover{
	transform:translateY(-1px);
	border-color:rgba(21,21,21,.3);
	box-shadow:0 10px 24px rgba(0,0,0,.08)
}

.hero-link{
	gap:8px;
	min-height:38px;
	padding:0 14px;
	border-radius:999px;
	font-weight:800
}

.hero-link svg{
	width:17px;
	height:17px;
	fill:currentColor
}

.tiles{
	min-height:0;
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:clamp(12px,1.35vw,20px);
	align-items:stretch
}

.tile{
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:clamp(14px,2vh,22px);
	padding:clamp(18px,1.8vw,28px);
	border:1px solid var(--line);
	border-top-width:7px;
	border-radius:var(--radius);
	background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(250,248,244,.86));
	box-shadow:var(--shadow)
}

.tile-jfrf{
	border-top-color:var(--blue)
}

.tile-ac{
	border-top-color:var(--gold)
}

.tile-or{
	border-top-color:var(--red)
}

.tile-conseil{
	border-top-color:var(--green)
}

.tile h2{
	margin-bottom:0;
	font-size:clamp(2.25rem,3.3vw,4.2rem);
	line-height:1;
	font-weight:850;
}

.tile p,.tile-list{
	color:var(--muted);
	font-size:clamp(.96rem,1.1vw,1.08rem);
	line-height:1.42
}

.tile-list{
	margin:0;
	padding-left:1.1em
}

.tile-list li+li{
	margin-top:4px
}

.tile-actions{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:9px;
	margin-top:auto
}

.icon-btn{
	width:42px;
	height:42px;
	border-radius:999px
}

.icon-btn svg{
	width:19px;
	height:19px;
	fill:currentColor
}

.contact-btn{
	min-height:42px;
	padding:0 16px;
	border-radius:999px;
	font-weight:850
}

.icon-btn:hover,.contact-btn:hover{
	fill:var(--title);
	background-color: var(--title);
	color:var(--bg)
}

.reviews{
	display:grid;
	gap:3px;
	padding:13px 14px;
	border:1px solid var(--line);
	border-radius:18px;
	background:rgba(255,255,255,.72);
	color:var(--muted);
	font-size:.92rem
}

.reviews strong{
	color:var(--text)
}

.reviews-muted{
	opacity:.92
}

.footer{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:14px;
	color:var(--muted);
	font-size:.9rem
}

.footer a{
	color:var(--text);
	text-decoration:none;
	font-weight:750
}

.footer button{
	min-height:32px;
	padding:0 10px;
	border-radius:999px
}

.modal{
	width:min(560px,calc(100vw - 28px));
	max-height:min(820px,calc(100svh - 28px));
	border:0;
	border-radius:28px;
	padding:0;
	background:#fff;
	box-shadow:var(--shadow)
}

.modal::backdrop{
	background:rgba(0,0,0,.42);
	backdrop-filter:blur(6px)
}

.modal form,.legal-modal>div{
	position:relative;
	display:grid;
	gap:14px;
	padding:clamp(20px,4vw,34px)
}

.modal h2{
	margin-bottom:4px;
	font-size:clamp(1.8rem,6vw,3.2rem);
	line-height:1;
	letter-spacing:-.04em
}

.modal-close{
	position:absolute;
	top:14px;
	right:16px;
	width:38px;
	height:38px;
	border:1px solid var(--line);
	border-radius:50%;
	background:#fff;
	cursor:pointer;
	font-size:1.5rem
}

label{
	display:grid;
	gap:6px;
	color:var(--muted);
	font-size:.9rem;
	font-weight:750
}

input,textarea{
	width:100%;
	border:1px solid var(--line);
	border-radius:16px;
	padding:12px 13px;
	background:#fff;
	color:var(--text)
}

textarea{
	resize:vertical
}

.hp{
	position:absolute;
	left:-9999px
}

.rgpd-mini,.form-status,.legal-modal p{
	color:var(--muted);
	font-size:.88rem;
	line-height:1.45
}

.submit-btn{
	min-height:46px;
	border-radius:999px;
	background:var(--text);
	color:#fff;
	font-weight:850
}

.form-status{
	min-height:1.2em;
	margin-bottom:0
}

.form-status.ok{
	color:#267244
}

.form-status.error{
	color:#b00020
}

@media(max-width:1120px){
	.page-shell{
	min-height:auto
	}

	.hero{
		grid-template-columns:1fr;
		align-items:start
	}

	.hero-side{
		align-items:center;
		max-width:720px
	}

	.tiles{
		grid-template-columns:repeat(2,minmax(0,1fr))
	}
}

@media(max-width:680px){
	.page-shell{
	padding:14px
	}

	.hero-side{
		align-items:flex-start
	}

	.profile-photo{
		width:70px;
		height:70px;
		border-radius:20px
	}

	h1{
		font-size:clamp(2.55rem,14vw,4.4rem)
	}

	.tiles{
		grid-template-columns:1fr
	}

	.tile{
		border-radius:22px
	}

	.tile h2{
		font-size:clamp(2.45rem,13vw,4rem)
	}

	.footer{
		flex-wrap:wrap;
		padding-bottom:env(safe-area-inset-bottom)
	}
}

@media(max-height:760px) and (min-width:1121px){
	h1{
	font-size:clamp(2.5rem,5vw,4.8rem)
	}

	.tile{
		gap:12px;
		padding:18px
	}

	.tile h2{
		font-size:clamp(2rem,3vw,3.4rem)
	}

	.tile p,.tile-list,.reviews{
		font-size:.9rem
	}

	.icon-btn{
		width:38px;
		height:38px
	}

	.contact-btn{
		min-height:38px
	}
}