:root {
	/* Palette (extrait des PDFs) */
	--lavender: #e7bcff; /* bandeau clair */
	--bg: #e7deff; /* fond clair */
	--purple: #8528c3; /* violet principal */
	--text: #000000;
	--white: #ffffff;
	--shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
	--radius-xl: 34px;
}

* {
	box-sizing: border-box;
}
html,
body {
	height: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: "Georgia", "Times New Roman", serif;
	overflow-x: hidden;
	overflow-y: auto;
}

/* Layout helpers */
.container {
	width: min(1200px, calc(100% - 64px));
	margin: 0 auto;
}
body.outils {
	overflow-y: auto;
}

main {
	padding: 0px 0 54px;
}

/* Header / navigation */
.site-header {
	background: var(--lavender);
	padding: 14px 0;
}

.nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 34px;
	flex-wrap: wrap;
}

.nav a {
	text-decoration: none;
	color: var(--text);
	letter-spacing: 0.04em;
	font-size: 18px;
	line-height: 1;
	padding: 8px 10px;
	border-radius: 14px;
}

.nav a.is-active {
	background: rgba(255, 255, 255, 0.6);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
}

/* Home hero */
.hero {
	text-align: center;
	padding: 28px 0 10px;
}

.hero h1 {
	margin: 10px 0 10px;
	font-size: clamp(42px, 5vw, 64px);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.hero .subtitle {
	margin: 0 0 10px;
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.hero .logo-word {
	margin: 0 0 18px;
	font-size: 18px;
	letter-spacing: 0.06em;
}

.panel {
	background: var(--white);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow);
	padding: 26px 28px;
}

.panelContact {
	background: var(--white);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow);
	padding: 26px 28px;
	width: 1100px;
	justify-content: center;
}

.copy {
	font-size: 18px;
	line-height: 1.55;
	letter-spacing: 0.02em;
}

.copy.caps {
	text-transform: uppercase;
}

.cta-row {
	display: grid;
	gap: 18px;
	justify-items: center;
	margin-top: 18px;
}

.btn {
	appearance: none;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 22px;
	min-width: 260px;
	border-radius: 20px;
	background: var(--purple);
	color: var(--white);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.06em;
	text-decoration: none;
	box-shadow: 0 18px 30px rgba(133, 40, 195, 0.25);
}
.btn:focus {
	outline: 3px solid rgba(133, 40, 195, 0.25);
	outline-offset: 3px;
}

/* Generic page structure inspired by PDFs */
.page-grid {
	display: grid;
	gap: 34px;
	align-items: start;
}
.page-grid.two {
	grid-template-columns: 1.05fr 0.95fr;
	margin-top: 5rem;
}
.page-grid.two img {
	width: 100%;
	height: auto;
}
.page-grid.two-reverse {
	grid-template-columns: 0.95fr 1.05fr;
	margin-top: 5rem;
}

/* Image placeholders */
.media {
	border-radius: 28px;
	overflow: hidden;
	box-shadow: var(--shadow);
	background: #000;
}

.boldtext {
	font-weight: 600;
}

.media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Specific heights similar to the mockups */
.media.tall {
	height: 38vh;
}
.media.mid {
	height: 36vh;
}
.media.small {
	height: 280px;
}

.section-title {
	margin: 0 0 14px;
	font-size: 34px;
	letter-spacing: 0.02em;
}

/* Footer (simple, discreet) */
.site-footer {
	padding: 30px 0 40px;
	text-align: center;
	color: rgba(17, 17, 17, 0.7);
	font-size: 14px;
}

/* Responsive */
@media (max-width: 920px) {
	.container {
		width: min(1100px, calc(100% - 36px));
	}
	.nav {
		gap: 18px;
	}
	.page-grid.two,
	.page-grid.two-reverse {
		grid-template-columns: 1fr;
	}
	.media.tall {
		height: 420px;
	}
}

/* new part*/

/* HOME specific */
body.home {
	background: var(--bg);
}

/* Le header reste lavande et fin (comme l'image) */
.site-header {
	background: var(--lavender);
	padding: 18px 0;
}

/* Bandeau violet plein écran */
.hero-band {
	background: var(--purple);
	padding: 10px 0 52px; /* hauteur proche de l'image */
}

.hero-inner {
	text-align: center;
	color: #fff;
}

.hero-inner h1 {
	margin: 0 0 10px;
	font-size: 46px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #fff;
}

.hero-subtitle {
	margin: 0 0 10px;
	font-size: 20px;
	letter-spacing: 0.04em;
	color: #fff;
}

.hero-logo {
	margin: 0;
	font-size: 10px;
	letter-spacing: 0.06em;
	color: #fff;
	opacity: 0.9;
}

/* Section basse (fond clair) */
.home-bottomimg {
	padding: 160px 0 100px;
	background-image: url(photos/lotus.png);
	height: 10px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-size: 40%;
	position: relative;
}

/* Grille 2 colonnes (image à gauche, texte à droite) */
.home-grid {
	display: grid;
	grid-template-columns: 380px 1fr;
	gap: 0px;
	align-items: start;
	margin-top: 50px;
}

/* Image noire + bord bleu (comme la maquette) */
.home-image {
	width: 420px;
	height: 250px;
	border-radius: 22px;
	overflow: hidden;
	background: #000;
	border: 3px solid #fff9a8; /* bleu du contour */
	box-shadow: rgba(0, 0, 0, 0.46) 0px 22px 50px 4px;
	margin-top: 10px;
}

.home-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Texte à droite */
.home-text {
	padding-top: 8px;
}

.home-paragraph {
	margin: 0 0 22px;
	font-size: 13px;
	line-height: 1.55;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgb(0, 0, 0);
}
.home-paragraph9 {
	margin: 0 0 22px;
	font-size: 20px;
	line-height: 1.55;
	letter-spacing: 0.05em;
	width: 550px;
	color: rgb(0, 0, 0);
}
.home-paragraph10 {
	margin: 0 0 22px;
	font-size: 20px;
	line-height: 1.55;
	letter-spacing: 0.05em;
	width: 1050px;
	color: rgb(0, 0, 0);
}

.home-paragraph.hint {
	margin-top: 28px;
}

/* Bouton centré sous le texte */
.home-cta {
	margin-top: 52px;
	display: flex;
	justify-content: left;
}

/* Bouton plus petit, comme l'image */
.btn-home {
	min-width: 200px;
	padding: 18px 26px;
	border-radius: 12px;
	font-size: 14px;
	letter-spacing: 0.08em;
	line-height: 1.1;
	font-family: Arial, Helvetica, sans-serif;
}

/* Responsive (mobile) */
@media (max-width: 920px) {
	.home-grid {
		grid-template-columns: 1fr;
		gap: 28px;
		justify-items: center;
		text-align: center;
	}

	.home-image {
		width: min(420px, 100%);
	}

	.home-text {
		width: min(560px, 100%);
	}
}

/* Pages (padding général, pas la home) */
.page {
	padding: 54px 0 54px;
}

/* OUTILS : alternance texte / image */
.tools-row {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 64px;
	align-items: start;
	margin-top: 56px;
}

.tools-row.is-reverse {
	grid-template-columns: 0.9fr 1.1fr;
}

.tools-text {
	padding: 34px 38px;
}

/* Image + caption */
.tools-media {
	margin: 0;
	display: grid;
	gap: 10px;
	justify-items: center;
	width: 100%;
	position: x;
}

.tools-img {
	width: 100%;
	height: 510px; /* comme la maquette */
	border-radius: 22px;
	background: #000;
	box-shadow: var(--shadow);
}

.tools-caption {
	font-size: 14px;
	letter-spacing: 0.06em;
	text-align: center;
	color: rgba(17, 17, 17, 0.85);
	text-transform: uppercase;
	text-decoration: underline; /* effet lien comme sur l'image */
}

/* Mobile */
@media (max-width: 920px) {
	.tools-row,
	.tools-row.is-reverse {
		grid-template-columns: 1fr;
		gap: 24px;
		margin-top: 34px;
	}

	.tools-text {
		padding: 26px 28px;
	}

	.tools-img {
		height: 220px;
	}
}

.page-grid.three {
	margin-top: 100px;
	justify-content: center;
}

/* HOME – texte plus lisible (surtout mobile) */
.home-text {
	max-width: 520px;
	margin: 0 auto;
}

.home-paragraph {
	font-size: 22px; /* un poil plus grand */
	line-height: 1.75; /* plus d’air */
	letter-spacing: 0.02em; /* beaucoup moins serré */
	text-transform: none; /* IMPORTANT: retire les majuscules auto */
	text-align: left;
	color: rgb(0, 0, 0);
	width: 900px;
}

/* Si tu veux garder les majuscules, utilise plutôt ceci:
.home-paragraph{
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.8;
}
*/

.home-paragraph.hint {
	margin-top: 18px;
	font-size: 22px;
}

/* Optionnel : rendre le texte un peu plus “doux” */
.home-paragraph {
	font-weight: 500;
}

/* Logo dans le hero */
.hero-logo {
	margin-top: 18px;
	display: flex;
	justify-content: center;
}

.hero-logo img {
	width: 420px; /* taille idéale desktop */
	height: auto;
	opacity: 0.95;
	position: absolute;
}

/* Mobile */
@media (max-width: 920px) {
	.hero-logo img {
		width: 300px;
		z-index: -1;
		position: absolute;
		top: 370px; /* plus petit sur mobile */
	}
	.hero-band {
		background: var(--purple);
		padding: 0px 0 12px; /* hauteur proche de l'image */
	}
	.hero h1 {
		z-index: 9999;
	}
}

.imageDown {
	display: flex;
	justify-content: center;
	margin-top: -100px;
	width: 100%;
}

.imageDown img {
	width: 150%;
	height: auto;
	z-index: -9;
	opacity: 0.9;
}

/* =========================
   RESPONSIVE FIXES (mobile)
   ========================= */
@media (max-width: 640px) {
	.container {
		width: calc(100% - 32px);
	}

	.nav {
		gap: 10px;
	}
	.nav a {
		font-size: 14px;
		padding: 6px 8px;
	}

	/* Allow pages to scroll properly */
	body {
		overflow-y: auto;
	}

	/* Home */
	.home-grid {
		grid-template-columns: 1fr;
		gap: 22px;
		justify-items: center;
		text-align: center;
		margin-top: 24px;
	}

	.home-image {
		width: 100%;
		max-width: 420px;
		height: auto;
		aspect-ratio: 16 / 9;
	}
	.home-image img {
		height: 100%;
	}

	.home-text {
		width: 100%;
		max-width: 560px;
		margin: 0 auto;
		padding-top: 0;
	}

	/* Keep text readable on small screens without changing content */
	.home-paragraph,
	.home-paragraph9,
	.home-paragraph10 {
		width: auto !important;
		max-width: 100%;
		font-size: 14px !important;
		line-height: 1.7 !important;
		letter-spacing: 0.02em !important;
		text-align: left !important;
	}
	.home-paragraph.hint {
		font-size: 14px !important;
		margin-top: 14px;
	}

	.home-cta {
		justify-content: center;
		margin-top: 22px;
	}
	.btn-home {
		min-width: 210px;
	}

	/* Hero logo (avoid absolute overlap on mobile) */
	.hero-logo img {
		position: static !important;
		width: 160px !important;
		z-index: auto !important;
	}

	/* Generic grids */
	.page-grid.two,
	.page-grid.two-reverse {
		grid-template-columns: 1fr;
		margin-top: 2rem;
	}

	/* Panels that had fixed widths */
	.panelContact {
		width: auto;
		max-width: 100%;
	}

	/* Tools */
	.tools-row,
	.tools-row.is-reverse {
		grid-template-columns: 1fr;
		gap: 22px;
		margin-top: 34px;
	}
	.tools-img {
		height: 240px;
	}
}

@media (min-width: 641px) and (max-width: 920px) {
	.container {
		width: calc(100% - 48px);
	}

	.nav a {
		font-size: 16px;
	}

	.home-grid {
		grid-template-columns: 1fr;
		gap: 28px;
		justify-items: center;
		text-align: center;
		margin-top: 34px;
	}
	.home-image {
		width: min(520px, 100%);
		height: auto;
		aspect-ratio: 16 / 9;
	}
	.home-text {
		width: min(680px, 100%);
	}
	.home-paragraph,
	.home-paragraph9,
	.home-paragraph10 {
		width: auto !important;
		max-width: 100%;
		font-size: 16px !important;
		line-height: 1.75 !important;
		letter-spacing: 0.02em !important;
		text-align: left !important;
	}
	.home-cta {
		justify-content: center;
	}

	.hero-logo img {
		position: static !important;
		width: 220px !important;
		z-index: auto !important;
	}

	.panelContact {
		width: auto;
		max-width: 100%;
	}
}
/* =========================
   MOBILE FIXES (HOME / ABOUT / CONSULT)
   Ne change aucun texte
   ========================= */

/* 1) Header plus petit sur mobile */
@media (max-width: 920px) {
	.site-header {
		padding: 10px 0 !important;
	}

	.nav {
		gap: 14px !important;
	}

	.nav a {
		font-size: 14px !important;
		padding: 6px 8px !important;
	}
}

/* 2) HOME : photo plus grande (comme desktop) */
@media (max-width: 920px) {
	.home-bottom {
		padding: 28px 0 56px !important;
	}

	/* Sur mobile tu es en 1 colonne : on agrandit l'image */
	.home-image {
		width: min(520px, 100%) !important;
		height: 320px !important; /* augmente ici si tu veux encore plus */
		margin-top: 0 !important;
		border-radius: 22px !important;
	}

	.home-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		display: block;
	}

	/* Bouton : un peu plus large mais pas trop */
	.btn-home {
		min-width: 210px !important;
	}
}

/* 3) Textes mobile : même style que desktop (homeparagraph9) */
@media (max-width: 920px) {
	/* Si ta classe existe, on l'utilise pour uniformiser */
	.homeparagraph9 {
		font-family: "Georgia", "Times New Roman", serif !important;
		font-size: 14px !important;
		line-height: 1.75 !important;
		letter-spacing: 0.02em !important;
		text-transform: uppercase !important; /* enlève si tu veux minuscules */
		text-align: center !important;
	}

	/* Au cas où ton HTML n'applique pas homeparagraph9 partout */
	.home-paragraph {
		font-size: 14px !important;
		line-height: 1.75 !important;
		letter-spacing: 0.02em !important;
		text-align: left !important;
	}
}

/* 4) A PROPOS + CONSULTATION : enlever la "bande noire" sur les photos
   (souvent: container noir + image pas parfaitement cover) */
@media (max-width: 920px) {
	.media {
		background: transparent !important; /* évite que le fond noir apparaisse */
	}

	.media img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: center !important;
		display: block !important;
	}

	/* Si tes images "about" / "consult" ont une hauteur trop petite */
	.media.mid {
		height: 320px !important;
	}

	.media.tall {
		height: 360px !important;
	}
}

@media (max-width: 920px) {
	.home-bottomimg {
		padding: 110px 0 100px; /* moins haut sur mobile */
		background-size: 95%; /* lotus plus visible */
		background-position: center top;
	}

	/* Sécurité : rien ne dépasse */
	.home-bottomimg * {
		max-width: 100%;
	}
}
/* FIX iPhone (titres hero centrés + tailles adaptées) */
@media (max-width: 430px) {
	.hero-inner {
		text-align: center !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.hero-inner h1 {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto 10px !important;
		text-align: center !important;

		/* taille adaptée mobile */
		font-size: clamp(26px, 7vw, 36px) !important;
		line-height: 1.15 !important;

		/* évite que ça “déborde” */
		white-space: normal !important;
		overflow-wrap: anywhere !important;
	}

	.hero-subtitle {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto 10px !important;
		text-align: center !important;

		font-size: clamp(14px, 4.2vw, 18px) !important;
		line-height: 1.2 !important;
	}

	/* Si ton logo était en absolute et poussait le layout */
	.hero-logo img {
		position: static !important;
		display: block !important;
		margin: 0 auto 12px !important;
		width: 120px !important;
		height: auto !important;
		z-index: auto !important;
	}
}
.home-image {
	display: flex;
	align-items: center;
	justify-content: center;
}

.home-image img {
	width: auto;
	height: 100%;
	max-width: 100%;
	object-position: left center;
}

@media (min-width: 921px) {
	.tools-row.is-reverse {
		grid-template-columns: 0.9fr 1.1fr;
	}
}