/*
Theme Name: La Voie Saine
Theme URI: https://lavoiesaine.ch
Author: La Voie Saine
Author URI: https://lavoiesaine.ch
Description: Thème WordPress sur-mesure pour lavoiesaine.ch, reconstruit à partir du site original (Incomedia WebSite X5) : présentation du livre "La Voie Saine du Musulman", bibliothèque, actualités et contenus religieux. Boutique/panier retirés.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lavoiesaine
*/

/* ==========================================================================
   1. RESET DE BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* ==========================================================================
   2. VARIABLES DE MARQUE (couleurs / typo extraites du site original)
   ========================================================================== */
:root {
	--lvs-bg-page: #5b5b5b;          /* fond gris derrière la colonne de contenu */
	--lvs-bg-card: #ffffff;          /* fond de la carte de contenu */
	--lvs-border: #a9a9a9;
	--lvs-gold-dark: #cb6b00;        /* titres */
	--lvs-gold: #bf8f00;             /* accents / liens actifs */
	--lvs-gold-text: #8a6600;        /* variante accessible (contraste AA) pour texte de petite taille */
	--lvs-gold-light: #ffefbf;       /* fonds de champs de formulaire */
	--lvs-gold-lighter: #ffdf80;     /* fonds de boutons */
	--lvs-text: #1a1a1a;
	--lvs-text-muted: #666666;
	--lvs-menu-bg: #232323;
	--lvs-menu-bg-hover: #3a3a3a;
	--lvs-font-heading: 'Aref Ruqaa', 'Traditional Arabic', Georgia, serif;
	--lvs-font-body: Tahoma, Geneva, Verdana, sans-serif;
	--lvs-max-width: 984px;
	--lvs-radius: 10px;
}

/* ==========================================================================
   3. STRUCTURE GÉNÉRALE
   ========================================================================== */
body {
	background-color: var(--lvs-bg-page);
	font-family: var(--lvs-font-body);
	font-size: 14px;
	line-height: 1.6;
	color: var(--lvs-text);
}

.lvs-page-wrap {
	max-width: var(--lvs-max-width);
	margin: 0 auto;
	background-color: var(--lvs-bg-card);
	box-shadow: 0 0 0 1px var(--lvs-border);
	border-radius: 0 0 var(--lvs-radius) var(--lvs-radius);
	overflow: hidden;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.lvs-skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	background: var(--lvs-gold-dark);
	color: #fff;
	padding: 10px 16px;
	z-index: 10000;
}
.lvs-skip-link:focus {
	left: 10px;
	top: 10px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ==========================================================================
   4. EN-TÊTE
   ========================================================================== */
.lvs-page-wrap > * {
	margin: 0; /* Sécurité : aucun écart entre l'en-tête et le menu, quel que soit le navigateur. */
}

.lvs-header {
	position: relative;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	background-color: #04040c; /* Couleur de secours pendant le chargement de l'image, ou si l'image choisie est plus petite que le conteneur. */
	aspect-ratio: 984 / 204; /* Garde toujours les proportions de la bannière, y compris avec une image personnalisée de taille différente : jamais de bande vide. */
	min-height: 120px;
	display: block;
}

.lvs-header__title {
	/* Le nom du site apparaît déjà, stylisé, dans l'image d'en-tête.
	   On garde un vrai H1 texte pour le SEO/accessibilité, masqué visuellement. */
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

.lvs-header-widgets {
	/* Ancré en haut de la bannière : ne se superpose jamais au texte/image
	   additionnel du Personnaliseur, qui est lui ancré en bas (voir
	   .lvs-header-extra--overlay) — les deux peuvent être utilisés en même
	   temps sans se chevaucher. */
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
}
.lvs-header-widget {
	padding: 12px 20px;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.lvs-header-widget-title {
	font-family: var(--lvs-font-heading);
	font-size: 20px;
	margin: 0 0 6px;
}
.lvs-header-widget img {
	max-width: 100%;
	height: auto;
}

.lvs-header-extra--overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 6;
	padding: 14px 20px;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
	background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}
.lvs-header-extra--overlay .lvs-header-extra__image {
	max-height: 90px;
	width: auto;
	margin-bottom: 8px;
}

.lvs-header-extra--below {
	background-color: #ffffff;
	padding: 16px 40px;
	border-bottom: 1px solid var(--lvs-border);
	text-align: center;
}
.lvs-header-extra--below .lvs-header-extra__image {
	max-width: 100%;
	height: auto;
	margin: 0 auto 10px;
}
.lvs-header-extra__text p {
	margin: 0 0 8px;
}
.lvs-header-extra__text p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   5. NAVIGATION PRINCIPALE
   ========================================================================== */
.lvs-nav {
	background-color: var(--lvs-menu-bg);
	position: relative;
	z-index: 20;
	line-height: 0; /* Empêche tout espace parasite dû à la hauteur de ligne par défaut du texte, entre l'en-tête et le menu. */
}

.lvs-nav__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	line-height: normal; /* On restaure une hauteur de ligne normale pour le contenu réel du menu. */
}

.lvs-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto;
}

.lvs-menu li { position: relative; }

.lvs-menu a {
	display: block;
	padding: 14px 22px;
	color: #f1d9a0;
	font-family: var(--lvs-font-heading);
	font-size: 17px;
	letter-spacing: .5px;
	transition: background-color .2s ease, color .2s ease;
}

.lvs-menu a:hover,
.lvs-menu a:focus,
.lvs-menu .current-menu-item > a {
	background-color: var(--lvs-menu-bg-hover);
	color: var(--lvs-gold-lighter);
}

/* Sous-menus (si un jour ajoutés) */
.lvs-menu ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background-color: var(--lvs-menu-bg);
	box-shadow: 0 6px 12px rgba(0,0,0,.35);
}
.lvs-menu li:hover > ul,
.lvs-menu li:focus-within > ul { display: block; }
.lvs-menu ul a { padding: 10px 18px; font-size: 15px; }

/* Bouton d'ouverture du menu mobile (mobile) — une étiquette <label> liée à
   une case à cocher cachée juste avant elle dans le HTML : le menu
   s'ouvre/se ferme nativement au clic, sans dépendre de JavaScript. Le
   script du thème (assets/js/main.js) ne fait qu'AMÉLIORER ce
   comportement (fermeture au clic extérieur, état aria-expanded précis) ;
   il n'est jamais requis pour que le menu s'ouvre. */
.lvs-menu-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 14px 18px;
	cursor: pointer;
}
.lvs-menu-toggle span {
	display: block;
	width: 26px;
	height: 3px;
	background: var(--lvs-gold-lighter);
	margin: 5px 0;
}

/* ==========================================================================
   6. CONTENU
   ========================================================================== */
.lvs-content {
	flex: 1 0 auto;
	padding: 30px 40px 40px;
}

.lvs-page-title {
	font-family: var(--lvs-font-heading);
	font-size: 30px;
	font-weight: 700;
	color: var(--lvs-gold-dark);
	text-align: center;
	margin-bottom: 24px;
}

.lvs-content h2 {
	font-family: var(--lvs-font-heading);
	color: var(--lvs-gold-dark);
	font-size: 22px;
	margin: 24px 0 10px;
}
.lvs-content h3 {
	font-family: var(--lvs-font-heading);
	color: var(--lvs-gold-text);
	font-size: 18px;
	margin: 18px 0 8px;
}
.lvs-content p { margin: 0 0 14px; text-align: justify; }
.lvs-content a { color: #0000ff; text-decoration: none; }
.lvs-content a:hover { text-decoration: underline; }
.lvs-content ul, .lvs-content ol { margin: 0 0 14px 22px; }
.lvs-content ul { list-style: disc; }
.lvs-content ol { list-style: decimal; }
.text-right { text-align: right; }
.lvs-content blockquote {
	margin: 16px 0;
	padding: 12px 18px;
	border-left: 3px solid var(--lvs-gold);
	background: #fbf3e0;
	font-style: italic;
}
.lvs-single-col p,
.lvs-single-col blockquote,
.lvs-arabic-inline {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* ==========================================================================
   BLOCS GUTENBERG (utilisés dans le contenu éditable de toutes les pages)
   Le thème n'enfile pas la feuille de style native de WordPress
   (wp-block-library), ces règles minimales couvrent donc les blocs
   utilisés dans les pages : paragraphe, titre, liste, citation, groupe,
   image, colonnes. Portée sur .lvs-content (présent sur toutes les pages)
   plutôt que sur un seul gabarit, pour s'appliquer partout où ces blocs
   peuvent apparaître (Présentation, Bibliothèque, etc.).
   ========================================================================== */
.lvs-content .wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 20px 0;
}
.lvs-content .wp-block-column {
	flex: 1 1 200px;
	min-width: 0;
}
.lvs-content .wp-block-image {
	margin: 0 0 10px;
	text-align: center;
}
.lvs-content .wp-block-image img {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--lvs-border);
	border-radius: 4px;
	margin: 0 auto;
}
.lvs-content .wp-block-group {
	margin: 0 0 14px;
}
@media (max-width: 600px) {
	.lvs-content .wp-block-columns { flex-direction: row; }
}

.lvs-single-col {
	max-width: 780px;
	margin: 0 auto;
}

.lvs-author-name {
	text-align: center;
	font-family: var(--lvs-font-heading);
	font-size: 20px;
	font-weight: 600;
	color: var(--lvs-gold-text);
	margin-bottom: 20px;
}

.lvs-arabic-quote {
	text-align: center;
	font-family: var(--lvs-font-heading);
	font-size: 22px;
	color: var(--lvs-text);
	direction: rtl;
	margin: 10px 0 24px;
}

.lvs-clear { clear: both; }
.lvs-text-center { text-align: center; }

.lvs-arabic-inline {
	font-family: 'Traditional Arabic', 'Scheherazade New', 'Amiri', Tahoma, serif;
	direction: rtl;
	unicode-bidi: embed;
	font-size: 1.15em;
}

.lvs-translit-block {
	margin: 4px 0;
}

.lvs-translit-block u {
	text-decoration: underline;
	text-decoration-color: var(--lvs-gold);
}

.lvs-section-note {
	font-size: 12px;
	color: var(--lvs-text-muted);
	font-style: italic;
	margin-top: 20px;
}

.lvs-important-box {
	margin: 20px 0;
	padding: 14px 18px;
	border: 1px solid var(--lvs-gold);
	background: #fff8ea;
	border-radius: 6px;
}

.lvs-subtitle-heading {
	text-align: center;
	font-family: var(--lvs-font-heading);
	font-size: 20px;
	font-weight: 600;
	color: var(--lvs-gold-text);
}

.lvs-figure {
	text-align: center;
	margin-bottom: 20px;
}
.lvs-figure img {
	margin: 0 auto 8px;
	border: 1px solid var(--lvs-border);
	border-radius: 4px;
}
.lvs-figure figcaption {
	font-family: var(--lvs-font-heading);
	font-size: 13px;
	font-weight: bold;
	color: var(--lvs-gold-text);
}

/* ==========================================================================
   7. FORMULAIRES
   ========================================================================== */
input[type=text], input[type=email], input[type=tel], input[type=password], textarea, select {
	font: inherit;
	border: 1px solid var(--lvs-gold);
	background-color: var(--lvs-gold-light);
	color: var(--lvs-text);
	border-radius: 4px;
	padding: 8px 10px;
	width: 100%;
	max-width: 420px;
}
textarea { resize: vertical; min-height: 120px; }

input[type=submit], button.lvs-button {
	cursor: pointer;
	font: inherit;
	font-weight: bold;
	background-color: var(--lvs-gold-lighter);
	color: #4a3300;
	border: 1px solid var(--lvs-gold);
	border-radius: 4px;
	padding: 10px 22px;
	-webkit-appearance: none;
}
input[type=submit]:hover, button.lvs-button:hover { background-color: var(--lvs-gold); color: #fff; }

.lvs-field { margin-bottom: 16px; }
.lvs-field label { display: block; font-weight: bold; margin-bottom: 4px; }
.lvs-field .required { color: #c00; }

.lvs-alert { padding: 10px 14px; border-radius: 5px; margin: 0 0 18px; }
.lvs-alert--success { color: #46543b; border: 1px solid #8da876; background-color: #d5ffb3; }
.lvs-alert--error { color: #ff6565; border: 1px solid #ff6565; background-color: #fcc; }

/* ==========================================================================
   8. RECHERCHE
   ========================================================================== */
.lvs-search-form { display: flex; gap: 8px; max-width: 420px; margin: 0 0 20px; }
.lvs-search-form input[type=search] {
	flex: 1;
	border: 1px solid var(--lvs-gold);
	background-color: var(--lvs-gold-light);
	border-radius: 4px;
	padding: 8px 10px;
	font: inherit;
}
.lvs-search-results-item { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px dashed var(--lvs-border); }
.lvs-search-results-item h2 { margin-top: 0; }

/* ==========================================================================
   9. PIED DE PAGE
   ========================================================================== */
.lvs-footer {
	background-color: #f4f4f4;
	border-top: 1px solid var(--lvs-border);
	padding: 18px 40px;
	text-align: center;
	font-size: 12px;
	color: var(--lvs-text-muted);
}
.lvs-footer a { color: var(--lvs-gold-text); }

.lvs-footer-widgets {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	max-width: var(--lvs-max-width);
	margin: 0 auto 16px;
	text-align: left;
}
.lvs-footer-widget {
	flex: 1 1 200px;
	max-width: 300px;
}
.lvs-footer-widget h3 {
	font-family: var(--lvs-font-heading);
	color: var(--lvs-gold-text);
	font-size: 14px;
	margin: 0 0 8px;
}

/* ==========================================================================
   11. FIL D'ARIANE
   ========================================================================== */
.lvs-breadcrumb {
	max-width: var(--lvs-max-width);
	margin: 0 auto;
	padding: 10px 40px 0;
	font-size: 12px;
	color: var(--lvs-text-muted);
}
.lvs-breadcrumb a { color: var(--lvs-gold-text); text-decoration: none; }
.lvs-breadcrumb a:hover { text-decoration: underline; }

/* ==========================================================================
   12. ARTICLES / GABARITS PAR DÉFAUT (page.php, single.php)
   ========================================================================== */
.lvs-page-thumbnail { margin: 0 0 20px; }
.lvs-page-thumbnail img { border-radius: 6px; }
.lvs-page-links { margin-top: 20px; font-size: 13px; }
.lvs-post-meta { font-size: 12px; color: var(--lvs-text-muted); margin: 0 0 8px; }
.lvs-post-excerpt { margin-bottom: 10px; }

/* ==========================================================================
   13. FORMULAIRE DE CONTACT
   ========================================================================== */
.lvs-contact-form { max-width: 480px; }

/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
	.lvs-content { padding: 24px 20px 30px; }
}

@media (max-width: 760px) {
	.lvs-menu-toggle { display: block; margin-left: auto; }
	.lvs-nav__inner { justify-content: flex-end; }
	.lvs-menu {
		display: none;
		flex-direction: column;
		width: 100%;
		background-color: var(--lvs-menu-bg);
	}
	/* La case à cocher pilote l'ouverture, sans JavaScript : cochée (au clic
	   sur l'étiquette .lvs-menu-toggle, ou au clavier), elle révèle le menu
	   via ce sélecteur de fratrie CSS pur. La classe "is-open", ajoutée par
	   main.js quand le script est disponible, produit le même résultat :
	   les deux mécanismes coexistent sans conflit. */
	.lvs-menu-checkbox:checked ~ .lvs-menu,
	.lvs-menu.is-open { display: flex; }
	.lvs-menu ul { position: static; box-shadow: none; }
	.lvs-page-title { font-size: 24px; }
}