@charset "utf-8";
/* CSS Document */

:root {
	--max-width: 1100px;
	--page-padding: 24px;
	--gap: 24px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	/* background: #f0f2f5; */
	background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.25), transparent 40%), linear-gradient(135deg, #f1f1f1 60%, #f4b736 40%);
	background-attachment: fixed;
}

/* Wrapper général */
.page {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: flex-start; /* toujours en haut */
	padding: var(--page-padding);
}

/* DIV PRINCIPALE */
.container {
	width: 100%;
	max-width: var(--max-width);
	min-height: calc(90vh - (2 * var(--page-padding)));
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	background: #FFF;
	box-shadow: 0 20px 40px rgba(0,0,0,0.8); /* ombre */
	padding: 24px;
}

/* HEADER */
.header {
	background: #FFF;
	padding: 20px;
	display: flex;
	background: #FFF;
	justify-content: left;
	align-items: center;
}

.logo {
	height: 200px;
}

/* CONTENU 2 COLONNES */
.content {
	display: flex;
	gap: var(--gap);
	flex: 1;
	background: #FFF;
}

.left {
	flex: 1;
	aspect-ratio: 1 / 1;
	padding: 0px;
	background: #FFF;
}

.right {
	flex: 1;
	aspect-ratio: 1 / 1;
	padding: 0px 20px;
	display: flex;
	flex-direction: column;
	justify-content: top;
	background: #FFF;
}

/* Image test */
.left img {
	width: 100%;
	height: auto;
	border-radius: 10px;
}

/* MOBILE */
@media (max-width: 768px) {
	.content {
		flex-direction: column;
	}
	.right {
		order: 1;
	}
	.left  {
		order: 2;
	}
}


.form-box { flex: 2; }
.info-box {
  flex: 1;
  background: #f9fafc;
  border-radius: 12px;
  padding: 24px;
}

.info-box h3 { margin-top: 0; color: var(--primary); }
.info-box p { margin: 12px 0; color: #444; }

.form-group { margin-bottom: 16px; }
label { display: block; margin-bottom: 6px; font-weight: 600; }

input, textarea {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 15px;
  transition: 0.2s ease;
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(31,60,136,0.12);
}
textarea { min-height: 70px; resize: vertical; }

button {
  background: var(--primary);
  color: white;
  padding: 14px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  transition: 0.2s ease;
}
button:hover { background: var(--accent); }

.notice {
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 auto 20px auto;
  max-width: 760px;
  font-size: 15px;
}
.notice.success { background: #e9f9ee; border: 1px solid #bfe8cb; color: #1f6b36; }
.notice.error   { background: #fdecec; border: 1px solid #f2b8b8; color: #8a1f1f; }

.hp { position: absolute; left: -9999px; top: -9999px; } /* honeypot anti-spam */

@media (max-width: 768px) {
  .content { flex-direction: column; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: translateY(0); }
}

.link {
	color: #DF0F13;
	font-style: italic;
}

/* Empêche les mots longs / emails / URLs de déborder */
.container, .right, .left, p, h1, h2, h3 {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.content { min-width: 0; }     /* important */
.left, .right { min-width: 0; }/* important */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
@media (max-width: 768px) {
  .left, .right {
    aspect-ratio: auto;   /* on enlève le carré */
    height: auto;         /* le texte reprend sa place */
  }
}