/* Planning du Hameau — front (v1.1)
 * Typos : hérite des typos globales Elementor (Site Settings > Global Fonts)
 *   titres (années, mois, légende, intro) -> Primary
 *   jours / textes                         -> Text
 * Sans Elementor : hérite de la police du thème.
 * Surcharges possibles : --hp-font-title, --hp-font-text, --hp-text, etc. sur .hp-planning
 */
.hp-planning{
	--hp-font-title:var(--e-global-typography-primary-font-family, inherit);
	--hp-weight-title:var(--e-global-typography-primary-font-weight, 700);
	--hp-font-text:var(--e-global-typography-text-font-family, inherit);
	--hp-weight-text:var(--e-global-typography-text-font-weight, 400);
	--hp-text:#555;
	--hp-muted:#b5b5b5;
	--hp-faint:#dcdcdc;
	--hp-border:#ddd;
	--hp-mark-bg:#ffff4d;
	--hp-mark-fg:#6b1a78;
	color:var(--hp-text);
	font-family:var(--hp-font-text);
	font-weight:var(--hp-weight-text);
	max-width:1200px;
	margin:0 auto;
}

/* ---------- Intro ---------- */
.hp-planning .hp-intro{text-align:center;margin:0 0 2rem}
.hp-planning .hp-intro p{
	margin:0 0 .5rem;padding:0;
	font-family:var(--hp-font-title);font-weight:var(--hp-weight-title);
	font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.3;
}
.hp-planning .hp-intro mark{
	background:var(--hp-mark-bg);color:var(--hp-mark-fg);padding:.1em .3em;
	box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

/* ---------- Légende ---------- */
.hp-planning .hp-legend{text-align:center;font-family:var(--hp-font-title)}
.hp-planning .hp-legend--haut{margin:0 0 2rem}
.hp-planning .hp-legend--bas{margin:2.5rem 0 0}
.hp-planning .hp-legend p{margin:0 0 .8rem;padding:0;font-size:1.05rem;font-weight:400}
.hp-planning .hp-legend strong{font-weight:var(--hp-weight-title)}
.hp-planning .hp-legend ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem 1.8rem}
.hp-planning .hp-legend li{display:flex;align-items:center;gap:.6rem;margin:0;padding:0;font-size:1.05rem;font-weight:400;list-style:none}
.hp-planning .hp-legend li::before{content:none}
.hp-planning .hp-swatch{display:inline-block;width:2.2rem;height:2.2rem;flex:none}
@media (max-width:600px){
	.hp-planning .hp-legend ul{gap:.5rem 1rem}
	.hp-planning .hp-legend li{font-size:.95rem;gap:.4rem}
	.hp-planning .hp-swatch{width:1.3rem;height:1.3rem}
}

/* ---------- Années ----------
 * Sélecteurs volontairement spécifiques : le kit Elementor stylise tous les <button>
 * (fond, bordure, padding, couleur au survol).
 */
.hp-planning .hp-tabs{
	display:flex;align-items:center;gap:.5rem;
	border:1px solid var(--hp-border);border-radius:3px;
	padding:.4rem .6rem;margin:0 0 2rem;
}
.hp-planning .hp-tablist{flex:1;display:flex;justify-content:space-evenly;align-items:center;min-width:0}
.hp-planning .hp-tabs button.hp-tab,
.hp-planning .hp-tabs button.hp-nav{
	-webkit-appearance:none;appearance:none;
	background:none;border:0;border-radius:0;box-shadow:none;outline-offset:3px;
	margin:0;padding:.2rem .6rem;min-height:0;width:auto;
	font-family:var(--hp-font-title);font-weight:var(--hp-weight-title);
	text-transform:none;letter-spacing:normal;line-height:1.2;
	cursor:pointer;transition:color .15s,opacity .15s;
}
.hp-planning .hp-tabs button.hp-tab{font-size:clamp(1.3rem,2.4vw,1.9rem);color:var(--hp-muted)}
/* dégradé : l'année active est foncée, les suivantes s'estompent */
.hp-planning .hp-tabs button.hp-tab[aria-selected="true"]{color:var(--hp-text)}
.hp-planning .hp-tabs button.hp-tab[aria-selected="true"] ~ button.hp-tab ~ button.hp-tab{color:var(--hp-faint)}
.hp-planning .hp-tabs button.hp-tab:hover,
.hp-planning .hp-tabs button.hp-tab:focus,
.hp-planning .hp-tabs button.hp-tab:active{background:none;border:0;box-shadow:none;color:var(--hp-text)}

.hp-planning .hp-tabs button.hp-nav{color:var(--hp-text);display:flex;align-items:center;padding:.2rem}
.hp-planning .hp-tabs button.hp-nav:hover,
.hp-planning .hp-tabs button.hp-nav:focus,
.hp-planning .hp-tabs button.hp-nav:active{background:none;border:0;box-shadow:none;color:var(--hp-text)}
.hp-planning .hp-tabs button.hp-nav[disabled]{opacity:0;pointer-events:none}
.hp-planning .hp-nav svg{width:1.6rem;height:1.6rem;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}

.hp-planning .hp-tabs button:focus:not(:focus-visible){outline:none}

/* ---------- Grille des mois ---------- */
.hp-planning .hp-months{
	display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
	gap:2rem 1.8rem;
}
@media (max-width:1100px){.hp-planning .hp-months{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:800px){.hp-planning .hp-months{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.hp-planning .hp-months{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.8rem 1rem}}
@media (max-width:360px){.hp-planning .hp-months{grid-template-columns:1fr}}

.hp-planning .hp-month-title{
	text-align:center;margin:0 0 .4rem;
	font-family:var(--hp-font-title);font-weight:var(--hp-weight-title);
	font-size:1.05rem;line-height:1.3;color:var(--hp-text);
}

/* Reset des styles de tableau du thème (bordures, rayures, survol, padding) */
.hp-planning .hp-months .hp-month table{
	width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;
	margin:0;border:0;background:transparent;font-size:inherit;
}
.hp-planning .hp-months .hp-month table thead,
.hp-planning .hp-months .hp-month table tbody,
.hp-planning .hp-months .hp-month table tr,
.hp-planning .hp-months .hp-month table th,
.hp-planning .hp-months .hp-month table td{
	border:0;background-color:transparent;box-shadow:none;
}
.hp-planning .hp-months .hp-month table tbody tr:nth-child(odd) > td,
.hp-planning .hp-months .hp-month table tbody tr:hover > td{background-color:transparent}
.hp-planning .hp-months .hp-month table th,
.hp-planning .hp-months .hp-month table td{
	padding:0;text-align:center;vertical-align:middle;
	font-size:.82rem;line-height:1;height:2.1em;color:var(--hp-text);
	letter-spacing:0;
}
.hp-planning .hp-months .hp-month table th{font-family:var(--hp-font-title);font-weight:var(--hp-weight-title)}
.hp-planning .hp-months .hp-month table td{font-family:var(--hp-font-text);font-weight:var(--hp-weight-text)}
.hp-planning .hp-months .hp-month table td.is-today{font-weight:700;text-decoration:underline}

/* ---------- Impression ---------- */
@media print{
	.hp-planning *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
	.hp-planning .hp-tabs{display:none}
	.hp-planning .hp-year[hidden]{display:block}
}