/*
 * Page d'accueil (accueil.php) dans l'esprit de Friedensreich Hundertwasser :
 * couleurs franches cernées de brun, formes ondulées, aucun angle droit.
 */

:root {
	--encre: #2b1d14;
	--rouge: #d7263d;
	--jaune: #f6c90e;
	--bleu: #1b4f9c;
	--vert: #2e9e48;
	--orange: #f08a24;
	--violet: #7b3fa0;
	--turquoise: #1aa6a6;
	--rose: #e0487a;
	--fond: #fdf4dc;
	--papier: #fffaf0;
	/* bordure « carrelage » multicolore */
	--rayures: repeating-linear-gradient(115deg,
		var(--rouge) 0 18px, var(--jaune) 18px 36px, var(--bleu) 36px 54px,
		var(--vert) 54px 72px, var(--violet) 72px 90px, var(--orange) 90px 108px);
}

* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
}

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: var(--fond);
	/* petites spirales de fond, très discrètes */
	background-image: radial-gradient(circle at 20% 30%, rgba(26, 166, 166, 0.08) 0 40px, transparent 41px),
		radial-gradient(circle at 80% 70%, rgba(224, 72, 122, 0.08) 0 60px, transparent 61px);
	background-size: 420px 420px;
	color: var(--encre);
	font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

a {
	color: var(--bleu);
	font-weight: bold;
}
a:hover, a:focus {
	color: var(--rouge);
}

.PourLecteurEcran {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- En-tête : titre multicolore et ville ---------- */

.Entete {
	position: relative;
	text-align: center;
	padding-top: 28px;
	background: linear-gradient(#bfe3f2, var(--fond));
}

/* soleil-spirale et nuage-spirale dans le ciel */
.Soleil, .Nuage {
	position: absolute;
	pointer-events: none;
}
.Soleil {
	top: 14px;
	right: 4%;
	width: 96px;
}
.Nuage {
	top: 22px;
	left: 5%;
	width: 96px;
}

.Titre {
	position: relative;
	margin: 0 16px;
	font-size: clamp(2rem, 6vw, 3.6rem);
	line-height: 1.15;
	font-weight: 900;
	letter-spacing: 0.02em;
}
.Titre .Mot {
	white-space: nowrap;
}
.Titre .Mot span {
	display: inline-block;
	-webkit-text-stroke: 1.5px var(--encre);
	text-shadow: 3px 3px 0 var(--encre);
}
/* chaque lettre a sa couleur et penche un peu */
.Lettre0 { color: var(--rouge);     transform: rotate(-4deg); }
.Lettre1 { color: var(--jaune);     transform: rotate(3deg) translateY(-3px); }
.Lettre2 { color: var(--bleu);      transform: rotate(-2deg) translateY(2px); }
.Lettre3 { color: var(--vert);      transform: rotate(5deg); }
.Lettre4 { color: var(--orange);    transform: rotate(-5deg) translateY(-2px); }
.Lettre5 { color: var(--turquoise); transform: rotate(2deg) translateY(3px); }

.SousTitre {
	position: relative;
	margin: 10px 16px 0;
	padding-bottom: 12px;
	font-size: 1.1rem;
	font-style: italic;
}

/* hauteur proportionnelle à la largeur : les toits ne remontent jamais sur le texte */
.Ville {
	height: clamp(130px, 17vw, 320px);
	overflow: hidden;
}
.Ville img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
}

/* ---------- Contenu ---------- */

.Contenu {
	flex: 1;
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: 32px 16px 40px;
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
	gap: 36px;
	align-items: start;
}

.Presentation {
	background: var(--papier);
	border: 3px solid var(--encre);
	/* contour irrégulier, comme tracé à la main */
	border-radius: 38px 14px 46px 20px / 22px 40px 18px 44px;
	padding: 24px 28px;
}

.Chapeau {
	margin-top: 0;
	font-size: 1.08rem;
	font-weight: bold;
}

.Atouts {
	list-style: none;
	margin: 0;
	padding: 0;
}
.Atouts li {
	position: relative;
	padding-left: 44px;
	margin-bottom: 14px;
}
/* puce : petite fenêtre colorée, chacune différente */
.Atouts li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 3px;
	width: 22px;
	height: 26px;
	border: 3px solid var(--encre);
	border-radius: 11px 11px 4px 6px;
}
.Atout0::before { background: var(--rouge);     transform: rotate(-6deg); }
.Atout1::before { background: var(--jaune);     transform: rotate(5deg);  border-radius: 6px; }
.Atout2::before { background: var(--turquoise); transform: rotate(-3deg); }
.Atout3::before { background: var(--violet);    transform: rotate(7deg);  border-radius: 4px 12px 6px 10px; }
.Atout4::before { background: var(--vert);      transform: rotate(-5deg); }

/* ---------- Zone de connexion ---------- */

.ConnexionCadre {
	padding: 10px;
	background: var(--rayures);
	border: 3px solid var(--encre);
	border-radius: 30px 52px 26px 48px / 46px 28px 50px 30px;
}

.ConnexionCorps {
	background: var(--papier);
	border: 3px solid var(--encre);
	border-radius: 22px 44px 18px 40px / 38px 20px 42px 22px;
	padding: 22px 24px 20px;
}

.ConnexionCorps h2 {
	margin: 0 0 16px;
	font-size: 1.5rem;
	color: var(--violet);
}

.ConnexionCorps p {
	margin: 0 0 14px;
}

.ConnexionCorps label {
	display: block;
	margin: 12px 0 4px;
	font-weight: bold;
}

.Saisie {
	width: 100%;
	padding: 10px 14px;
	font: inherit;
	color: var(--encre);
	background: #fff;
	border: 3px solid var(--encre);
	border-radius: 14px 20px 12px 18px;
}
.Saisie:focus {
	outline: none;
	border-color: var(--bleu);
	box-shadow: 0 0 0 4px rgba(27, 79, 156, 0.25);
}

.Bouton {
	display: block;
	width: 100%;
	margin-top: 22px;
	padding: 12px 18px;
	font: inherit;
	font-size: 1.1rem;
	font-weight: bold;
	color: var(--encre);
	background: var(--jaune);
	border: 3px solid var(--encre);
	border-radius: 26px 16px 28px 14px / 18px 26px 14px 28px;
	box-shadow: 4px 4px 0 var(--encre);
	cursor: pointer;
	transition: transform 0.1s, box-shadow 0.1s, background-color 0.15s;
}
.Bouton:hover {
	background: var(--orange);
}
.Bouton:active {
	transform: translate(3px, 3px);
	box-shadow: 1px 1px 0 var(--encre);
}
.Bouton:focus-visible {
	outline: 3px solid var(--bleu);
	outline-offset: 3px;
}

.LiensConnexion {
	list-style: none;
	margin: 20px 0 0;
	padding: 14px 0 0;
	border-top: 3px dotted var(--encre);
	text-align: center;
}
.LiensConnexion li {
	margin: 4px 0;
}

.Etapes {
	margin: 0 0 14px;
	padding-left: 22px;
}
.Etapes li {
	margin-bottom: 10px;
}

.Note {
	font-size: 0.9rem;
	font-style: italic;
}

.ConnexionCorps .Retour {
	margin: 20px 0 0;
	text-align: center;
}

/* Messages renvoyés par resiweb.php */
.Message {
	margin: 0 0 16px;
	padding: 12px 14px;
	border: 3px solid var(--encre);
	border-radius: 16px 24px 14px 22px;
}
.Message.Succes {
	background: #d8f0c8;
}
.Message.Erreur {
	color: #fff;
	background: var(--rouge);
}

/* ---------- Pied de page ---------- */

.Pied {
	background: var(--bleu);
}
.Sol {
	height: 70px;
	background: var(--fond);
}
.Sol img {
	display: block;
	width: 100%;
	height: 100%;
}

.LiensLegaux {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 32px;
	padding: 14px 16px 18px;
	background: var(--violet);
}
.LiensLegaux a {
	color: #fff;
	font-size: 0.95rem;
}
.LiensLegaux a:hover, .LiensLegaux a:focus {
	color: var(--jaune);
}

/* ---------- Petits écrans ---------- */

@media (max-width: 820px) {
	.Contenu {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	/* sur téléphone, le formulaire passe en premier */
	.Connexion {
		order: -1;
	}
	.Soleil {
		width: 56px;
		top: 6px;
		right: 8px;
	}
	.Nuage {
		display: none;
	}
	.Presentation {
		padding: 20px;
	}
}