/*
Theme Name: Parcours Rando
Theme URI: https://www.parcours-rando.fr
Author: chambre27.com
Description: Theme sur-mesure du site vitrine de Parcours Rando (accueil, fonctionnalites, tarifs, blog, pages legales), reprenant le design system "Carte topographique" deja utilise par le plugin (fond pierre, vert foret, accent ambre "balise de sentier").
Version: 0.2.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: parcours-rando-theme
*/

/*
 * Memes variables de couleur/rayon que public/css/parcours-app.css du
 * plugin (a la valeur pres) -- deliberement duplique plutot que partage,
 * pour que le theme reste independant du plugin (un site sans le plugin
 * actif garde un theme coherent) meme si les deux vivent aujourd'hui sur
 * la meme installation.
 */
:root {
	--pr-fond: #f0f0ea;
	--pr-surface: #fbfaf6;
	--pr-surface-douce: #e5e4db;
	--pr-texte: #182118;
	--pr-texte-doux: #58635a;
	--pr-bordure: #d9d8cd;
	--pr-accent: #1f4d3a;
	--pr-accent-hover: #17392c;
	--pr-accent-doux: #dde6dd;
	--pr-accent-2: #c8791f;
	--pr-accent-2-doux: #f4e3ce;
	--pr-accent-2-texte: #a3611a;
	--pr-danger: #a83c28;
	--pr-rayon: 14px;
	--pr-rayon-sm: 8px;
	--pr-ombre: 0 1px 2px rgba(23, 57, 44, .06), 0 8px 24px rgba(23, 57, 44, .08);
	--pr-ombre-flottante: 0 2px 8px rgba(23, 57, 44, .12), 0 14px 34px rgba(23, 57, 44, .14);
	--pr-police: "Seravek", "Avenir Next", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--pr-police-chiffres: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, monospace;
	--pr-largeur-contenu: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--pr-fond);
	color: var(--pr-texte);
	font-family: var(--pr-police);
	font-size: 16px;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--pr-accent); text-decoration-thickness: 1.5px; }
a:hover { color: var(--pr-accent-hover); }

.pr-conteneur {
	max-width: var(--pr-largeur-contenu);
	margin: 0 auto;
	padding: 0 24px;
}

/* --- En-tete ------------------------------------------------------- */

.pr-entete {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(251, 250, 246, .92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--pr-bordure);
}

.pr-entete__barre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
}

.pr-logo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--pr-texte);
	text-decoration: none;
}
.pr-logo:hover { color: var(--pr-accent); }
.pr-logo__pastille {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--pr-accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
}

.pr-nav-principale { display: flex; align-items: center; gap: 4px; }
.pr-nav-principale a {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 999px;
	color: var(--pr-texte);
	text-decoration: none;
	font-weight: 500;
	font-size: .95rem;
}
.pr-nav-principale a:hover,
.pr-nav-principale a.pr-lien-actif { background: var(--pr-accent-doux); color: var(--pr-accent-hover); }

.pr-entete__actions { display: flex; align-items: center; gap: 10px; }

.pr-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 22px;
	border-radius: 999px;
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .1s ease, box-shadow .15s ease;
}
.pr-bouton:hover { transform: translateY(-1px); }
.pr-bouton--principal { background: var(--pr-accent); color: #fff; box-shadow: var(--pr-ombre); }
.pr-bouton--principal:hover { background: var(--pr-accent-hover); color: #fff; }
.pr-bouton--secondaire { background: var(--pr-surface); color: var(--pr-texte); border-color: var(--pr-bordure); }
.pr-bouton--secondaire:hover { background: var(--pr-surface-douce); color: var(--pr-texte); }
.pr-bouton--accent2 { background: var(--pr-accent-2); color: #fff; }
.pr-bouton--accent2:hover { background: var(--pr-accent-2-texte); color: #fff; }

.pr-menu-mobile-bouton { display: none; }

/* --- Sections generiques -------------------------------------------- */

.pr-section { padding: 64px 0; }
.pr-section--douce { background: var(--pr-surface); }
.pr-section--accent { background: var(--pr-accent); color: #fff; }
.pr-section--accent a { color: #fff; }

.pr-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--pr-accent-doux);
	color: var(--pr-accent-hover);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
}

h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
.pr-texte-doux { color: var(--pr-texte-doux); }
.pr-lead { font-size: 1.15rem; color: var(--pr-texte-doux); max-width: 640px; }

/* --- Heros ------------------------------------------------------------ */

.pr-hero { padding: 72px 0 56px; }
.pr-hero__grille { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.pr-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.pr-hero__visuel {
	background: var(--pr-surface);
	border: 1px solid var(--pr-bordure);
	border-radius: var(--pr-rayon);
	box-shadow: var(--pr-ombre-flottante);
	padding: 24px;
}
.pr-hero__visuel dl { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; }
.pr-hero__visuel dt { font-size: .78rem; color: var(--pr-texte-doux); text-transform: uppercase; letter-spacing: .03em; }
.pr-hero__visuel dd { margin: 2px 0 0; font-family: var(--pr-police-chiffres); font-size: 1.4rem; font-weight: 700; color: var(--pr-accent); }

/* --- Grilles de fonctionnalites ---------------------------------------- */

.pr-grille-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.pr-carte {
	background: var(--pr-surface);
	border: 1px solid var(--pr-bordure);
	border-radius: var(--pr-rayon);
	padding: 24px;
	box-shadow: var(--pr-ombre);
}
.pr-carte__icone {
	width: 42px; height: 42px; border-radius: var(--pr-rayon-sm);
	background: var(--pr-accent-doux); color: var(--pr-accent-hover);
	display: flex; align-items: center; justify-content: center;
	font-size: 1.3rem; margin-bottom: 14px;
}

/* --- Tarifs -------------------------------------------------------- */

.pr-grille-tarifs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 36px; align-items: stretch; }
.pr-carte-tarif {
	background: var(--pr-surface); border: 1px solid var(--pr-bordure); border-radius: var(--pr-rayon);
	padding: 32px; display: flex; flex-direction: column; box-shadow: var(--pr-ombre);
}
.pr-carte-tarif--mis-en-avant { border-color: var(--pr-accent); box-shadow: var(--pr-ombre-flottante); position: relative; }
.pr-carte-tarif__prix { font-family: var(--pr-police-chiffres); font-size: 2.4rem; font-weight: 700; margin: 12px 0; }
.pr-carte-tarif ul { list-style: none; padding: 0; margin: 20px 0; display: flex; flex-direction: column; gap: 10px; }
.pr-carte-tarif li { padding-left: 26px; position: relative; }
.pr-carte-tarif li::before { content: "✓"; position: absolute; left: 0; color: var(--pr-accent); font-weight: 700; }
.pr-carte-tarif__note { margin-top: auto; font-size: .85rem; color: var(--pr-texte-doux); }

/* --- Blog ------------------------------------------------------------ */

.pr-grille-articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.pr-carte-article {
	background: var(--pr-surface); border: 1px solid var(--pr-bordure); border-radius: var(--pr-rayon);
	overflow: hidden; box-shadow: var(--pr-ombre); display: flex; flex-direction: column;
}
.pr-carte-article__corps { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pr-carte-article__meta { font-size: .8rem; color: var(--pr-texte-doux); text-transform: uppercase; letter-spacing: .02em; }
.pr-carte-article h3 { margin-bottom: 4px; }
.pr-carte-article a { text-decoration: none; color: inherit; }
.pr-carte-article__lire { margin-top: auto; color: var(--pr-accent); font-weight: 600; font-size: .9rem; }

.pr-article {
	max-width: 760px; margin: 0 auto; padding: 48px 0 80px;
}
.pr-article__entete { margin-bottom: 32px; }
.pr-article__meta { color: var(--pr-texte-doux); font-size: .9rem; }
.pr-article__corps { font-size: 1.05rem; }
.pr-article__corps h2 { margin-top: 1.6em; }
.pr-article__corps ul, .pr-article__corps ol { padding-left: 1.3em; }
.pr-article__corps blockquote {
	margin: 1.5em 0; padding: 4px 20px; border-left: 3px solid var(--pr-accent); color: var(--pr-texte-doux); font-style: italic;
}

/* --- Contenu de page generique (legal, etc.) --------------------------- */

.pr-page-simple { max-width: 760px; margin: 0 auto; padding: 48px 0 80px; font-size: 1.02rem; }
.pr-page-simple h2 { margin-top: 1.6em; }

/* --- Fil d'ariane -------------------------------------------------------- */
.pr-fil-ariane { font-size: .85rem; color: var(--pr-texte-doux); padding: 18px 0 0; }
.pr-fil-ariane a { color: var(--pr-texte-doux); }

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

.pr-pied { background: var(--pr-accent); color: #fff; padding: 48px 0 28px; margin-top: 40px; }
.pr-pied a { color: #fff; opacity: .85; text-decoration: none; }
.pr-pied a:hover { opacity: 1; text-decoration: underline; }
.pr-pied__grille { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.pr-pied h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; opacity: .8; margin-bottom: 14px; }
.pr-pied ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pr-pied__bas { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.18); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .85rem; opacity: .75; }

/* --- Avertissement estimations ------------------------------------------ */
.pr-avertissement {
	background: var(--pr-accent-2-doux); color: var(--pr-accent-2-texte);
	border-radius: var(--pr-rayon-sm); padding: 16px 20px; font-size: .92rem; margin-top: 32px;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 900px) {
	.pr-hero__grille { grid-template-columns: 1fr; }
	.pr-grille-cartes { grid-template-columns: repeat(2, 1fr); }
	.pr-grille-tarifs { grid-template-columns: 1fr; }
	.pr-grille-articles { grid-template-columns: repeat(2, 1fr); }
	.pr-pied__grille { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
	.pr-nav-principale { display: none; }
	.pr-menu-mobile-bouton {
		display: inline-flex; align-items: center; justify-content: center;
		width: 40px; height: 40px; border-radius: var(--pr-rayon-sm);
		border: 1px solid var(--pr-bordure); background: var(--pr-surface); font-size: 1.1rem;
	}
	.pr-grille-cartes, .pr-grille-articles { grid-template-columns: 1fr; }
	.pr-pied__grille { grid-template-columns: 1fr; }
	.pr-hero { padding: 40px 0 32px; }
	.pr-section { padding: 44px 0; }
}

/* --- Theme sombre (respecte la preference systeme) ---------------------- */
@media (prefers-color-scheme: dark) {
	:root {
		--pr-fond: #14201a;
		--pr-surface: #1b2921;
		--pr-surface-douce: #223226;
		--pr-texte: #eef2ee;
		--pr-texte-doux: #a9b6ac;
		--pr-bordure: #2c3c31;
		--pr-accent: #4f9c78;
		--pr-accent-hover: #6ab690;
		--pr-accent-doux: #223a2d;
	}
	.pr-entete { background: rgba(20, 32, 26, .9); }
	.pr-bouton--principal { color: #0f1a14; }
	.pr-bouton--principal:hover { color: #0f1a14; }
}