/*
 * Si loin si près — Look & feel "L'art de voyager"
 * Feuille de style extraite de la maquette d'accueil.
 *
 * Toutes les valeurs de la maquette (couleurs, typo, espacements) sont
 * centralisées dans les variables ci-dessous : modifie-les ici pour
 * faire évoluer l'ensemble du thème d'un coup.
 *
 * Les polices (Mulish, Cormorant Garamond) sont auto-hébergées et
 * chargées par WordPress via theme.json (assets/fonts/). Aucun appel
 * externe à Google Fonts n'est effectué.
 */


.chapeau{
    font-family: calibri;
    font-weight: 300;
    text-align: center;
    color: #3c3c3c;
    line-height: 1.4em;
    font-size: 24px;
}


/* ------------------------------------------------------------------ *
 * 1. Variables de design (design tokens)
 * ------------------------------------------------------------------ */
:root {
	/* Couleurs — fonds */
	--slsp-bg-page:      #EFE8DC; /* fond de la page */
	--slsp-bg-card:      #F6F1E9; /* conteneur principal / boutons (texte) */
	--slsp-bg-soft:      #FCFAF6; /* encart newsletter */
	--slsp-bg-placeholder:#CABEA8;/* images en attente */
	--slsp-bg-dark:      #1C2B3A; /* bloc magazine sombre */

	/* Couleurs — textes */
	--slsp-text:         #1C2B3A; /* texte principal */
	--slsp-text-muted:   #8A8174; /* texte secondaire / légendes */
	--slsp-text-nav:     #3A4654; /* liens de navigation */
	--slsp-text-light:   #F6F1E9; /* texte sur fond sombre / bouton */
	--slsp-text-dark-soft:#C7BBA6;/* texte secondaire sur fond sombre */

	/* Couleurs — accents (doré / laiton) */
	--slsp-gold:         #B08D57; /* accent principal (bordures, boutons) */
	--slsp-gold-text:    #8F6B2E; /* texte doré (tags, liens "lire") */

	/* Bordures */
	--slsp-border:       #E3DBCD;

	/* Typographies */
	--slsp-font-sans:  'Mulish', system-ui, sans-serif;
	--slsp-font-serif: 'Cormorant Garamond', Georgia, serif;

	/* Rayons d'arrondi */
	--slsp-radius-card:  14px;
	--slsp-radius-box:   12px;
	--slsp-radius-img:   8px;
	--slsp-radius-pill:  24px;
}

/* ------------------------------------------------------------------ *
 * 2. Base
 * ------------------------------------------------------------------ */
.slsp,
.slsp * {
	box-sizing: border-box;
	font-family: var(--slsp-font-sans);
}

.slsp {
	max-width: 680px;
	width: 100%;
	margin: 28px auto;
	padding: 26px 28px;
	background: var(--slsp-bg-card);
	border: 1px solid var(--slsp-border);
	border-radius: var(--slsp-radius-card);
	color: var(--slsp-text);
}

/* Optionnel : applique le fond sable à toute la page */
.slsp-page {
	background: var(--slsp-bg-page);
}

/* Police serif pour les titres */
.slsp .serif {
	font-family: var(--slsp-font-serif);
	font-weight: 600;
}

/* ------------------------------------------------------------------ *
 * 3. Éléments réutilisables
 * ------------------------------------------------------------------ */

/* Étiquette / catégorie en pilule */
.slsp .tag {
	display: inline-block;
	font-size: 10.5px;
	letter-spacing: .13em;
	color: var(--slsp-gold-text);
	border: 0.5px solid var(--slsp-gold);
	padding: 2px 10px;
	border-radius: 20px;
}

/* Bouton principal (doré) */
.slsp .btn {
	display: inline-block;
	background: var(--slsp-gold);
	color: var(--slsp-text-light);
	font-size: 13px;
	padding: 9px 18px;
	border-radius: var(--slsp-radius-pill);
	border: none;
	cursor: pointer;
	text-decoration: none;
}

.slsp .btn:hover { opacity: .9; }

/* Variante compacte (bouton "S'abonner" dans le header) */
.slsp .btn--sm {
	padding: 6px 14px;
	font-size: 12px;
}

/* Image en attente (placeholder) */
.slsp .ph {
	background: var(--slsp-bg-placeholder);
	border-radius: var(--slsp-radius-img);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--slsp-text-muted);
}

/* Lien "Lire le carnet →" */
.slsp .read-more {
	margin-top: 14px;
	font-size: 13px;
	color: var(--slsp-gold-text);
}

/* ------------------------------------------------------------------ *
 * 4. En-tête + navigation
 * ------------------------------------------------------------------ */
.slsp-header {
	text-align: center;
	border-bottom: 0.5px solid var(--slsp-border);
	padding-bottom: 16px;
	margin-bottom: 22px;
}

.slsp-header__title {
	font-size: 34px;
	line-height: 1;
	color: var(--slsp-text);
}

.slsp-header__tagline {
	font-size: 11px;
	letter-spacing: .18em;
	color: var(--slsp-text-muted);
	margin-top: 7px;
}

.slsp-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 16px;
	flex-wrap: wrap;
}

.slsp-nav a {
	font-size: 13px;
	color: var(--slsp-text-nav);
	text-decoration: none;
}

.slsp-nav a:hover { color: var(--slsp-gold-text); }

/* ------------------------------------------------------------------ *
 * 5. Article à la une (featured)
 * ------------------------------------------------------------------ */
.slsp-featured {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 30px;
}

.slsp-featured__media {
	flex: 1.2;
	min-width: 240px;
	height: 210px;
}

.slsp-featured__body {
	flex: 1;
	min-width: 220px;
}

.slsp-featured__title {
	font-size: 27px;
	line-height: 1.15;
	margin: 12px 0 8px;
	color: var(--slsp-text);
}

.slsp-featured__excerpt {
	font-size: 14px;
	color: var(--slsp-text-muted);
	line-height: 1.6;
}

/* ------------------------------------------------------------------ *
 * 6. Titre de section ("Échappées du moment")
 * ------------------------------------------------------------------ */
.slsp-section-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.slsp-section-head__title {
	font-size: 19px;
	color: var(--slsp-text);
}

.slsp-section-head__rule {
	flex: 1;
	height: 0.5px;
	background: var(--slsp-border);
}

/* ------------------------------------------------------------------ *
 * 7. Grille de cartes
 * ------------------------------------------------------------------ */
.slsp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 18px;
	margin-bottom: 30px;
}

.slsp-card__media {
	height: 130px;
	margin-bottom: 11px;
}

.slsp-card__title {
	font-size: 18px;
	line-height: 1.2;
	margin: 9px 0 5px;
	color: var(--slsp-text);
}

.slsp-card__meta {
	font-size: 12.5px;
	color: var(--slsp-text-muted);
}

/* ------------------------------------------------------------------ *
 * 8. Bloc magazine (sombre)
 * ------------------------------------------------------------------ */
.slsp-magazine {
	background: var(--slsp-bg-dark);
	border-radius: var(--slsp-radius-box);
	padding: 24px 26px;
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 28px;
}

.slsp-magazine__body {
	flex: 1;
	min-width: 220px;
}

.slsp-magazine__eyebrow {
	font-size: 11px;
	letter-spacing: .16em;
	color: var(--slsp-gold);
	margin-bottom: 9px;
}

.slsp-magazine__title {
	font-size: 25px;
	line-height: 1.1;
	color: var(--slsp-text-light);
	margin-bottom: 6px;
}

.slsp-magazine__text {
	font-size: 13.5px;
	color: var(--slsp-text-dark-soft);
	line-height: 1.55;
}

/* ------------------------------------------------------------------ *
 * 9. Newsletter ("La lettre du dimanche")
 * ------------------------------------------------------------------ */
.slsp-newsletter {
	background: var(--slsp-bg-soft);
	border: 0.5px solid var(--slsp-border);
	border-radius: var(--slsp-radius-box);
	padding: 22px 24px;
	text-align: center;
	margin-bottom: 8px;
}

.slsp-newsletter__title {
	font-size: 20px;
	color: var(--slsp-text);
	margin-bottom: 5px;
}

.slsp-newsletter__text {
	font-size: 13.5px;
	color: var(--slsp-text-muted);
	margin-bottom: 16px;
}

.slsp-newsletter__form {
	display: flex;
	gap: 9px;
	justify-content: center;
	flex-wrap: wrap;
}

.slsp-newsletter__input {
	background: #fff;
	border: 0.5px solid var(--slsp-border);
	border-radius: var(--slsp-radius-pill);
	padding: 9px 16px;
	font-size: 13px;
	color: var(--slsp-text);
	min-width: 200px;
}

/* ------------------------------------------------------------------ *
 * 10. Pied de page
 * ------------------------------------------------------------------ */
.slsp-footer {
	text-align: center;
	font-size: 11.5px;
	color: var(--slsp-text-muted);
	border-top: 0.5px solid var(--slsp-border);
	margin-top: 20px;
	padding-top: 14px;
}

/* ------------------------------------------------------------------ *
 * 11. Classes utilitaires pour les blocs (patterns Gutenberg)
 * ------------------------------------------------------------------ *
 * À appliquer directement sur un bloc via le champ
 * « Avancé › Classe(s) CSS additionnelle(s) ». Non scopées sous .slsp.
 */

/* Pastille de catégorie (ex. "CARNETS") — sur un bloc Paragraphe
 * ou un bloc Termes de publication (catégories d'une boucle de requête). */
.slsp-pill {
	display: inline-block;
	margin: 0;
	font-size: 10.5px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--slsp-gold-text);
	border: 0.5px solid var(--slsp-gold);
	padding: 2px 10px;
	border-radius: 20px;
}

.slsp-pill a {
	color: inherit;
	text-decoration: none;
}

/* Petit label en capitales espacées (ex. "LE NUMÉRO EN COURS") */
.slsp-eyebrow {
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* Filet fin qui s'étire à côté d'un titre — sur un bloc Séparateur,
 * placé dans un groupe en disposition Ligne (flex). */
.wp-block-separator.slsp-rule {
	flex: 1;
	height: 0;
	margin: 0;
	max-width: none;
	border: none;
	border-top: 0.5px solid var(--slsp-border);
	opacity: 1;
}

/* ------------------------------------------------------------------ *
 * 12. Menu principal câblé (wp_nav_menu · emplacement « Menu principal »)
 * ------------------------------------------------------------------ *
 * Menu rendu par le thème via le shortcode [slsp_menu] dans l'en-tête.
 * Sous-menus (sous-catégories) déroulants au survol + burger sur mobile.
 */

.slsp-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px;
}

.slsp-menu__list li {
	position: relative;
	margin: 0;
}

.slsp-menu__list a {
	display: inline-block;
	color: var(--slsp-text-nav);
	text-decoration: none;
	font-size: 14px;
	line-height: 1.4;
}

.slsp-menu__list a:hover,
.slsp-menu__list .current-menu-item > a {
	color: var(--slsp-gold-text);
}

/* Chevron sur les entrées ayant un sous-menu */
.slsp-menu .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: .4em;
	height: .4em;
	margin-left: .45em;
	border-right: 1.5px solid var(--slsp-gold);
	border-bottom: 1.5px solid var(--slsp-gold);
	transform: translateY(-2px) rotate(45deg);
}

/* Panneau déroulant */
.slsp-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 6px;
	position: absolute;
	top: 100%;
	left: 50%;
	min-width: 210px;
	background: var(--slsp-bg-soft);
	border: 1px solid var(--slsp-border);
	border-radius: 10px;
	box-shadow: 0 10px 28px rgba(28, 43, 58, .12);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(6px);
	transition: opacity .18s ease, transform .18s ease;
	z-index: 50;
}

.slsp-menu .menu-item-has-children:hover > .sub-menu,
.slsp-menu .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.slsp-menu .sub-menu a {
	display: block;
	white-space: nowrap;
	padding: 7px 12px;
	border-radius: 7px;
	font-size: 13.5px;
}

.slsp-menu .sub-menu a:hover {
	background: var(--slsp-bg-page);
}

/* Bouton burger — masqué sur desktop */
.slsp-menu-burger {
	display: none;
}

/* --- Mobile --- */
@media (max-width: 600px) {
	.slsp-menu-burger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		cursor: pointer;
	}
	.slsp-menu-burger__bars {
		position: relative;
	}
	.slsp-menu-burger__bars,
	.slsp-menu-burger__bars::before,
	.slsp-menu-burger__bars::after {
		display: block;
		width: 22px;
		height: 2px;
		background: var(--slsp-text);
	}
	.slsp-menu-burger__bars::before,
	.slsp-menu-burger__bars::after {
		content: "";
		position: absolute;
		left: 0;
	}
	.slsp-menu-burger__bars::before { top: -7px; }
	.slsp-menu-burger__bars::after  { top: 7px; }

	.slsp-menu {
		display: none;
		flex-basis: 100%;
		width: 100%;
	}
	.slsp-menu-check:checked ~ .slsp-menu {
		display: block;
	}
	.slsp-menu__list {
		flex-direction: column;
		align-items: center;
		gap: 6px;
		margin-top: 14px;
	}
	/* Sous-menus dépliés sous leur parent (pas de survol sur tactile) */
	.slsp-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		background: transparent;
		padding: 0 0 4px;
		min-width: 0;
		text-align: center;
	}
	.slsp-menu .sub-menu a { white-space: normal; }
}