/* ===========================================================
   Comprendre mon ado — feuille de style
   Palette volontairement chaleureuse et calme (pas clinique) :
   vert sauge (sérénité), beige chaud (accueil), terracotta
   (le guide de secours, repérable sans être alarmant).
=========================================================== */

:root {
	--vert: #6b8f71;
	--vert-fonce: #4f6f55;
	--vert-clair: #e7efe6;
	--terracotta: #c1694f;
	--terracotta-fonce: #a2543d;
	--terracotta-clair: #faebe5;
	--fond: #faf7f2;
	--carte: #ffffff;
	--texte: #3a362f;
	--texte-doux: #6b655a;
	--bordure: #e8e0d4;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
	background: var(--fond);
	color: var(--texte);
	line-height: 1.6;
}

a { color: var(--vert-fonce); }

.page-wrap {
	max-width: 880px;
	margin: 0 auto;
	padding: 0 20px 60px;
}

/* --- En-tête / navigation --- */
header.site {
	background: var(--carte);
	border-bottom: 1px solid var(--bordure);
}
.site-nav {
	max-width: 880px;
	margin: 0 auto;
	padding: 18px 20px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}
.site-nav .logo {
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--vert-fonce);
	text-decoration: none;
	margin-right: auto;
}
.site-nav .logo span { color: var(--terracotta); }
.site-nav a.nav-link {
	text-decoration: none;
	color: var(--texte-doux);
	font-size: 0.95rem;
	padding: 6px 4px;
	border-bottom: 2px solid transparent;
}
.site-nav a.nav-link:hover,
.site-nav a.nav-link.actif {
	color: var(--vert-fonce);
	border-bottom-color: var(--vert);
}
.btn-secours {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--terracotta);
	color: #fff !important;
	padding: 8px 16px;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.92rem;
	box-shadow: 0 2px 6px rgba(193, 105, 79, 0.35);
}
.btn-secours:hover { background: var(--terracotta-fonce); }

/* --- Suivi d'étapes du guide (tracker horizontal) --- */
.etapes-nav {
	max-width: 880px;
	margin: 0 auto;
	padding: 16px 20px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	flex-wrap: wrap;
}
.etape-item { display: flex; align-items: center; }
.etape-pastille {
	width: 30px; height: 30px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--carte);
	border: 2px solid var(--bordure);
	color: var(--texte-doux);
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
	flex-shrink: 0;
}
.etape-pastille.vue { border-color: var(--vert); color: var(--vert-fonce); }
.etape-pastille.active { background: var(--vert); border-color: var(--vert); color: #fff; }
.etape-trait { width: 26px; height: 2px; background: var(--bordure); }
.etape-trait.vue { background: var(--vert); }
.etape-label {
	text-align: center;
	font-size: 0.8rem;
	color: var(--texte-doux);
	margin: 6px auto 0;
}

/* --- Bandeau "objectif de cette étape" --- */
.objectif-etape {
	max-width: 620px;
	margin: 14px auto 0;
	text-align: center;
	background: var(--vert-clair);
	border-radius: 999px;
	padding: 8px 20px;
	font-size: 0.92rem;
	color: var(--vert-fonce);
	font-weight: 600;
}

/* --- Bannière de page --- */
.hero {
	padding: 48px 0 28px;
	text-align: center;
}
.hero h1 {
	font-size: 2rem;
	margin: 0 0 10px;
	color: var(--vert-fonce);
}
.hero p.intro {
	font-size: 1.1rem;
	color: var(--texte-doux);
	max-width: 620px;
	margin: 0 auto;
}
.hero-img {
	width: 170px;
	height: auto;
	margin: 0 auto 10px;
	display: block;
}
.hero-img.petit { width: 130px; }

/* --- Cartes de navigation (accueil) --- */
.grille-cartes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 18px;
	margin: 30px 0;
}
.carte {
	background: var(--carte);
	border: 1px solid var(--bordure);
	border-radius: 14px;
	padding: 22px;
	text-decoration: none;
	color: var(--texte);
	display: block;
	transition: transform .15s ease, box-shadow .15s ease;
}
.carte:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}
.carte .icone { font-size: 1.8rem; margin-bottom: 10px; display: block; }
.carte h3 { margin: 0 0 6px; color: var(--vert-fonce); font-size: 1.1rem; }
.carte p { margin: 0; color: var(--texte-doux); font-size: 0.95rem; }
.carte.urgence {
	background: var(--terracotta-clair);
	border-color: #ecd3c7;
}
.carte.urgence h3 { color: var(--terracotta-fonce); }

/* --- Contenu éditorial --- */
.contenu { background: var(--carte); border: 1px solid var(--bordure); border-radius: 16px; padding: 32px; margin: 24px 0; }
.contenu h2 { color: var(--vert-fonce); margin-top: 34px; }
.contenu h2:first-child { margin-top: 0; }
.contenu h3 { color: var(--texte); margin-top: 24px; }
.encadre {
	background: var(--vert-clair);
	border-left: 4px solid var(--vert);
	padding: 16px 20px;
	border-radius: 8px;
	margin: 20px 0;
}
.encadre.alerte {
	background: var(--terracotta-clair);
	border-left-color: var(--terracotta);
}
.encadre strong { color: var(--vert-fonce); }
.encadre.alerte strong { color: var(--terracotta-fonce); }

/* --- Guide de secours --- */
.guide-etape {
	background: var(--carte);
	border: 1px solid var(--bordure);
	border-left: 6px solid var(--terracotta);
	border-radius: 10px;
	padding: 20px 24px;
	margin: 18px 0;
}
.guide-etape h3 {
	margin: 0 0 10px;
	color: var(--terracotta-fonce);
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.15rem;
}
.guide-etape .num {
	background: var(--terracotta);
	color: #fff;
	width: 28px; height: 28px;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 0.9rem;
	flex-shrink: 0;
}
.colonnes-deux {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-top: 14px;
}
@media (max-width: 640px) { .colonnes-deux { grid-template-columns: 1fr; } }
.colonne-ok, .colonne-non {
	border-radius: 10px;
	padding: 14px 18px;
}
.colonne-ok { background: var(--vert-clair); }
.colonne-non { background: #fdeceb; }
.colonne-ok h4 { color: var(--vert-fonce); margin: 0 0 8px; }
.colonne-non h4 { color: #a33; margin: 0 0 8px; }
.colonne-ok ul, .colonne-non ul { margin: 0; padding-left: 20px; }
.colonne-ok li, .colonne-non li { margin-bottom: 6px; }

/* --- Respiration guidée --- */
.respiration-widget {
	text-align: center;
	background: var(--vert-clair);
	border-radius: 16px;
	padding: 30px 20px;
	margin: 24px 0;
}
.respiration-cercle {
	width: 120px; height: 120px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--vert);
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-weight: 600;
	transition: transform 4s ease-in-out;
}
.respiration-cercle.inspire { transform: scale(1.35); }
.respiration-cercle.expire { transform: scale(1); }
#respirationTexte { font-size: 1.05rem; color: var(--vert-fonce); font-weight: 600; min-height: 1.4em; }
#respirationBtn {
	margin-top: 14px;
	background: var(--vert);
	color: #fff;
	border: none;
	padding: 10px 22px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 0.95rem;
}
#respirationBtn:hover { background: var(--vert-fonce); }

/* --- Ressources / contacts --- */
.contact-carte {
	background: var(--carte);
	border: 1px solid var(--bordure);
	border-radius: 12px;
	padding: 18px 22px;
	margin-bottom: 14px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
.contact-carte .num {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--terracotta-fonce);
}
.contact-carte h4 { margin: 0 0 4px; color: var(--vert-fonce); }
.contact-carte p { margin: 0; color: var(--texte-doux); font-size: 0.92rem; }

/* --- Statistiques --- */
.stat-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px;
	margin: 22px 0;
}
.stat-carte {
	background: var(--carte);
	border: 1px solid var(--bordure);
	border-radius: 14px;
	padding: 20px 22px;
}
.stat-chiffre {
	font-size: 2.2rem;
	font-weight: 800;
	color: var(--vert-fonce);
	line-height: 1;
	margin-bottom: 6px;
}
.stat-carte.alerte .stat-chiffre { color: var(--terracotta-fonce); }
.stat-label { font-weight: 600; margin-bottom: 6px; }
.stat-detail { font-size: 0.88rem; color: var(--texte-doux); margin-bottom: 8px; }
.stat-source { font-size: 0.78rem; color: var(--texte-doux); }
.stat-source a { color: var(--texte-doux); text-decoration: underline; }

footer.site {
	text-align: center;
	padding: 30px 20px;
	color: var(--texte-doux);
	font-size: 0.85rem;
}

@media print {
	header.site, footer.site, .respiration-widget, .btn-secours { display: none !important; }
	body { background: #fff; }
	.contenu, .guide-etape { border: 1px solid #ccc; box-shadow: none; }
}