/**
 * Attawoun — base de styles.
 *
 * Clair, sobre, beaucoup de blanc, palette réduite. Mobile-first :
 * tout est écrit pour le téléphone, l'écran large n'est qu'un élargissement.
 *
 * Ce fichier pose les fondations et les composants déjà utilisés par les
 * gabarits. Le travail de design fin viendra dessus.
 */

:root {
	--encre: #1E2823;
	--papier: #FBFAF5;
	--vert: #175449;
	--vert-fonce: #0E3A32;
	--teinte: #E4EEE9;
	--ligne: #E9E6DC;
	--sourd: #6B7370;
	--ambre: #A97B12;
	--carte: #FFFFFF;
	--rayon: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	background: var(--papier);
	color: var(--encre);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	padding-bottom: 76px; /* place pour la navigation basse */
}

a { color: inherit; }

.aw-ic { stroke: currentColor; fill: none; flex: none; vertical-align: middle; }
.aw-ic-plein { fill: currentColor; stroke: none; flex: none; vertical-align: middle; }

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

.aw-evitement {
	position: absolute; left: -9999px;
	background: var(--vert); color: #fff; padding: 12px 18px; z-index: 100;
}
.aw-evitement:focus { left: 12px; top: 12px; }

/* --- En-tête ---------------------------------------------------------- */

.aw-entete {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; padding: 14px 16px 10px;
}

.aw-lieu {
	display: inline-flex; align-items: center; gap: 6px;
	font-weight: 700; font-size: 14px; text-decoration: none;
}
.aw-lieu .aw-ic { color: var(--vert); }

.aw-avatar {
	width: 30px; height: 30px; border-radius: 50%;
	background: var(--teinte); color: var(--vert);
	font-size: 11px; font-weight: 800; text-decoration: none;
	display: flex; align-items: center; justify-content: center; flex: none;
}
.aw-avatar--vide { width: auto; border-radius: 999px; padding: 0 12px; font-size: 12px; }

/* --- Filtres ---------------------------------------------------------- */

.aw-filtres { padding: 0 16px; }

.aw-recherche {
	display: flex; align-items: center; gap: 8px;
	border: 1.2px solid var(--ligne); border-radius: var(--rayon);
	padding: 10px 12px; background: #fff; margin-bottom: 10px;
}
.aw-recherche .aw-ic { color: var(--sourd); }
.aw-recherche input {
	border: 0; outline: 0; flex: 1; font: inherit;
	font-size: 14px; background: transparent; color: inherit;
}

.aw-puces {
	display: flex; gap: 7px; overflow-x: auto;
	padding-bottom: 4px; scrollbar-width: none;
}
.aw-puces::-webkit-scrollbar { display: none; }

.aw-puce {
	display: inline-flex; align-items: center; gap: 5px;
	font: inherit; font-size: 13px; font-weight: 600;
	border: 1.2px solid var(--ligne); border-radius: 999px;
	padding: 7px 13px; background: #fff; color: var(--encre);
	white-space: nowrap; cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}
.aw-puce:hover { border-color: var(--vert); }
.aw-puce.est-active { background: var(--vert); border-color: var(--vert); color: #fff; }

.aw-barre-resultats {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; padding: 10px 0 4px;
	font-size: 13px; color: var(--sourd);
}
.aw-decompte .aw-compteur { font-weight: 700; color: var(--encre); }
.aw-tri {
	font: inherit; font-size: 13px; border: 0; background: transparent;
	color: var(--vert); font-weight: 600; cursor: pointer;
}

/* --- Résultats -------------------------------------------------------- */

.aw-resultats { padding: 4px 16px 20px; transition: opacity .15s; }
.aw-resultats.est-chargement { opacity: .45; pointer-events: none; }

.aw-carte {
	display: flex; gap: 12px; align-items: flex-start;
	background: var(--carte); border: 1px solid var(--ligne);
	border-radius: var(--rayon); padding: 13px; margin-bottom: 10px;
}

.aw-carte__visuel { flex: none; width: 46px; height: 46px; }
.aw-carte__visuel img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }

.aw-initiales {
	width: 100%; height: 100%; border-radius: 12px;
	background: var(--teinte); color: var(--vert);
	font-size: 14px; font-weight: 800;
	display: flex; align-items: center; justify-content: center;
}

.aw-carte__corps { flex: 1; min-width: 0; }

.aw-carte__titre { font-size: 15px; font-weight: 700; line-height: 1.3; }
.aw-carte__titre a { text-decoration: none; }
.aw-carte__titre a:hover { color: var(--vert); }

.aw-carte__meta { font-size: 12.5px; color: var(--sourd); margin-top: 5px; }

.aw-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; align-items: center; }

.aw-badge {
	display: inline-flex; align-items: center; gap: 3px;
	font-size: 11px; font-weight: 700; color: var(--vert);
	background: var(--teinte); padding: 3px 8px; border-radius: 999px;
}
.aw-badge--verifie { color: var(--vert); }

.aw-note { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; }
.aw-note .aw-ic-plein { color: #C9930F; }
.aw-note__nb { font-weight: 500; color: var(--sourd); font-size: 11.5px; }

/* --- Boutons ---------------------------------------------------------- */

.aw-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	background: var(--vert); color: #fff; text-decoration: none;
	font-size: 13px; font-weight: 700; border-radius: 11px;
	padding: 10px 14px; border: 1.2px solid var(--vert);
}
.aw-btn:hover { background: var(--vert-fonce); border-color: var(--vert-fonce); }
.aw-btn--sm { font-size: 12px; padding: 7px 12px; border-radius: 9px; margin-top: 8px; }
.aw-btn--ligne { background: #fff; color: var(--encre); border-color: var(--encre); }
.aw-btn--ligne:hover { background: var(--papier); }

/* --- Aucun résultat --------------------------------------------------- */

.aw-vide { text-align: center; padding: 40px 20px; }
.aw-vide__titre { font-weight: 700; margin-bottom: 6px; }
.aw-vide__texte { font-size: 14px; color: var(--sourd); margin-bottom: 18px; }

/* --- Landing ---------------------------------------------------------- */

.aw-lp { max-width: 760px; margin-inline: auto; padding: 0 20px 10px; }
.aw-lp__message { margin: 16px 0 0; }

.aw-hero { text-align: center; padding: 34px 0 44px; }

.aw-hero__verset {
	font-style: italic; color: var(--vert); font-size: 15px;
	margin-bottom: 20px;
}
.aw-hero__verset span {
	font-style: normal; font-size: 11.5px; color: var(--sourd);
	margin-left: 8px; letter-spacing: .04em;
}

.aw-hero__titre {
	font-size: clamp(27px, 6vw, 40px); font-weight: 800;
	line-height: 1.14; letter-spacing: -.025em;
}
.aw-hero__titre em { font-style: normal; color: var(--vert); }

.aw-hero__texte {
	font-size: 15.5px; color: #414843; line-height: 1.65;
	max-width: 520px; margin: 18px auto 0;
}

.aw-hero__actions {
	display: flex; gap: 10px; justify-content: center;
	flex-wrap: wrap; margin-top: 26px;
}

.aw-hero__preuve {
	font-size: 12.5px; color: var(--sourd); margin-top: 16px;
	letter-spacing: .02em;
}

.aw-btn--lg { font-size: 14.5px; padding: 13px 22px; border-radius: 13px; }
.aw-btn--clair { background: #fff; color: var(--vert-fonce); border-color: #fff; }
.aw-btn--clair:hover { background: var(--teinte); border-color: var(--teinte); }

/* --- Sections de la landing ------------------------------------------- */

.aw-section { padding: 34px 0; border-top: 1px solid var(--ligne); }
.aw-section--teinte {
	background: var(--teinte); border-top: 0;
	border-radius: 20px; padding: 30px 24px; margin: 12px 0;
}

.aw-section__titre {
	font-size: 19px; font-weight: 800; letter-spacing: -.015em;
	margin-bottom: 18px;
}
.aw-section__note {
	font-size: 13px; color: var(--sourd);
	margin-top: 16px; line-height: 1.6;
}

.aw-grille {
	list-style: none; display: grid;
	grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 9px;
}
.aw-grille li { list-style: none; }
.aw-grille__item {
	display: flex; align-items: center; gap: 10px;
	background: var(--carte); border: 1px solid var(--ligne);
	border-radius: 12px; padding: 12px 13px;
	font-size: 13.5px; font-weight: 600;
	text-decoration: none; height: 100%;
	transition: border-color .15s, transform .15s;
}
.aw-grille__item:hover { border-color: var(--vert); transform: translateY(-1px); }
.aw-grille__item--phare { border-color: var(--vert); background: var(--teinte); }
.aw-grille__nom small {
	display: block; font-weight: 500; font-size: 11.5px;
	color: var(--sourd); margin-top: 2px; line-height: 1.35;
}
.aw-grille__icone {
	width: 36px; height: 36px; border-radius: 10px; flex: none;
	background: var(--teinte); color: var(--vert);
	display: flex; align-items: center; justify-content: center;
}

.aw-duo { display: grid; grid-template-columns: 1fr; gap: 16px; }
.aw-duo__bloc h3 { font-size: 15.5px; font-weight: 800; margin-bottom: 6px; }
.aw-duo__bloc p { font-size: 14px; line-height: 1.62; color: #33403A; }

.aw-confiance { list-style: none; display: grid; gap: 16px; }
.aw-confiance li { display: flex; gap: 13px; align-items: flex-start; }
.aw-confiance .aw-ic { color: var(--vert); margin-top: 2px; flex: none; }
.aw-confiance strong { display: block; font-size: 14.5px; margin-bottom: 3px; }
.aw-confiance div { font-size: 13.5px; line-height: 1.6; color: #414843; }

.aw-cta {
	background: var(--vert-fonce); color: #F2F5F0;
	border-radius: 20px; padding: 34px 26px; text-align: center;
	margin: 24px 0 34px;
}
.aw-cta h2 { font-size: 20px; font-weight: 800; letter-spacing: -.015em; }
.aw-cta p {
	font-size: 14.5px; line-height: 1.6; margin: 10px auto 20px;
	max-width: 420px; color: #C8DAD3;
}

.aw-message {
	background: var(--teinte); color: var(--vert-fonce);
	border-radius: var(--rayon); padding: 12px 16px;
	font-size: 14px; font-weight: 600; margin-bottom: 20px;
}

.aw-pays { list-style: none; }

.aw-pays__item {
	background: var(--carte); border: 1px solid var(--ligne);
	border-radius: var(--rayon); margin-bottom: 8px;
}
.aw-pays__item.est-ferme { background: transparent; }

.aw-pays__lien {
	display: flex; align-items: center; justify-content: space-between;
	gap: 14px; padding: 14px 16px; text-decoration: none;
	flex-wrap: wrap;
}
a.aw-pays__lien:hover { color: var(--vert); }
a.aw-pays__lien .aw-ic { color: var(--vert); opacity: 0; transition: opacity .15s; }
a.aw-pays__lien:hover .aw-ic { opacity: 1; }

.aw-pays__texte { display: block; min-width: 0; }
.aw-pays__nom { display: block; font-size: 15px; font-weight: 700; }
.est-ferme .aw-pays__nom { color: #A9AFA9; }
.aw-pays__meta { display: block; font-size: 12.5px; color: var(--sourd); margin-top: 2px; }
.aw-pays__meta em { font-style: normal; color: var(--ambre); }

.aw-pays__actions { flex: 1; min-width: 250px; }
.aw-pays__inscrire {
	font-size: 12px; color: var(--sourd);
	margin-top: 7px; line-height: 1.5;
}
.aw-pays__inscrire a { color: var(--vert); font-weight: 600; }

.aw-hero__texte--fort {
	font-weight: 700; color: var(--vert); margin-top: 12px;
}

.aw-cta__actions {
	display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.aw-btn--fantome {
	background: transparent; color: #F2F5F0; border-color: rgba(255,255,255,.45);
}
.aw-btn--fantome:hover { background: rgba(255,255,255,.1); border-color: #fff; }

.aw-prevenir { display: flex; gap: 6px; align-items: center; }
.aw-prevenir input {
	flex: 1; min-width: 0; font: inherit; font-size: 13px;
	border: 1.2px solid var(--ligne); border-radius: 9px;
	padding: 8px 10px; background: #fff; color: inherit;
}
.aw-prevenir input:focus { outline: 0; border-color: var(--vert); }
.aw-prevenir .aw-btn { margin-top: 0; flex: none; }

.aw-accueil__note {
	font-size: 12.5px; color: var(--sourd);
	margin-top: 20px; line-height: 1.6; text-align: center;
}

/* --- Formulaire ------------------------------------------------------- */

.aw-hero--court { padding: 30px 0 22px; }
.aw-form-page { max-width: 640px; }

.aw-piege { position: absolute; left: -9999px; }

.aw-form__bloc {
	background: var(--carte); border: 1px solid var(--ligne);
	border-radius: var(--rayon); padding: 20px; margin-bottom: 14px;
}
.aw-form__bloc legend {
	font-size: 14px; font-weight: 800; padding: 0 8px;
	color: var(--vert); background: var(--papier);
	border: 1px solid var(--ligne); border-radius: 999px;
}

.aw-champ { margin-bottom: 14px; }
.aw-champ:last-child { margin-bottom: 0; }
.aw-champ label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 5px; }
.aw-champ label small { font-weight: 500; color: var(--sourd); }
.aw-champ > small { display: block; font-size: 11.5px; color: var(--sourd); margin-top: 4px; }
.aw-requis { color: var(--ambre); }

.aw-champ input[type="text"], .aw-champ input[type="email"],
.aw-champ select, .aw-champ textarea {
	width: 100%; font: inherit; font-size: 14px;
	border: 1.2px solid var(--ligne); border-radius: 10px;
	padding: 10px 12px; background: #fff; color: inherit;
}
.aw-champ input:focus, .aw-champ select:focus, .aw-champ textarea:focus {
	outline: 0; border-color: var(--vert); box-shadow: 0 0 0 3px var(--teinte);
}

.aw-champ__duo { display: grid; grid-template-columns: 1fr; gap: 0; }

.aw-form__choix { display: grid; grid-template-columns: 1fr; gap: 9px; }
.aw-radio {
	display: flex; gap: 10px; align-items: flex-start;
	border: 1.4px solid var(--ligne); border-radius: 12px;
	padding: 12px 14px; cursor: pointer;
}
.aw-radio:has(input:checked) { border-color: var(--vert); background: var(--tint-2, #F0F5F2); }
.aw-radio input { margin-top: 3px; accent-color: var(--vert); }
.aw-radio strong { display: block; font-size: 14px; }
.aw-radio small { display: block; font-size: 12px; color: var(--sourd); margin-top: 2px; }

.aw-cases { display: grid; gap: 9px; margin-bottom: 16px; }
.aw-case {
	display: flex; gap: 9px; align-items: center;
	font-size: 13.5px; cursor: pointer;
}
.aw-case input { accent-color: var(--vert); width: 17px; height: 17px; }

.aw-form__pied { text-align: center; padding: 8px 0 34px; }
.aw-form__pied small {
	display: block; font-size: 12px; color: var(--sourd);
	margin-top: 12px;
}
.aw-form__pied .aw-ic { color: var(--vert); }

/* --- Navigation basse ------------------------------------------------- */

.aw-nav {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
	display: flex; background: #fff; border-top: 1px solid var(--ligne);
	padding: 8px 4px calc(10px + env(safe-area-inset-bottom));
}
.aw-nav__item {
	flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
	font-size: 11px; font-weight: 600; color: #9AA19C; text-decoration: none;
}
.aw-nav__item.est-actif { color: var(--vert); font-weight: 800; }

/* --- Pied ------------------------------------------------------------- */

.aw-pied { padding: 26px 16px 30px; text-align: center; }
.aw-verset { font-style: italic; color: var(--vert); font-size: 14px; }
.aw-verset span { font-style: normal; font-size: 11.5px; color: var(--sourd); margin-left: 8px; }

/* --- Écran large ------------------------------------------------------ */

@media (min-width: 780px) {
	body { padding-bottom: 0; }

	.aw-duo { grid-template-columns: repeat(3, 1fr); gap: 22px; }
	.aw-champ__duo { grid-template-columns: 1fr 1fr; gap: 14px; }
	.aw-form__choix { grid-template-columns: 1fr 1fr; }
	.aw-section--teinte { padding: 34px 30px; }
	.aw-hero { padding: 48px 0 54px; }

	.aw-entete, .aw-filtres, .aw-resultats { max-width: 900px; margin-inline: auto; }

	.aw-nav {
		position: static; max-width: 900px; margin: 0 auto;
		border-top: 0; border-bottom: 1px solid var(--ligne);
		padding: 0 16px;
	}
	.aw-nav__item { flex: none; flex-direction: row; gap: 7px; padding: 14px 18px; font-size: 14px; }

	.aw-resultats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
	.aw-carte { margin-bottom: 0; }
	.aw-vide { grid-column: 1 / -1; }
}
