/*
Theme Name: L'Escale de la Petite Venise — Journal
Theme URI: https://www.lescaledelapetitevenise.com/
Author: L'Escale de la Petite Venise
Description: Thème blog aux couleurs exactes du site L'Escale de la Petite Venise (conciergerie de location courte durée sur la Route des Vins). En-tête et pied de page repris à l'identique du site principal. L'URL du site principal se règle dans /inc/config.php.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: epv
Tags: blog, one-column, right-sidebar, custom-logo, translation-ready
*/

/* =====================================================================
   1. VARIABLES — couleurs et polices PRÉLEVÉES SUR LE SITE
   =====================================================================
   #FFFFFF  fond de l'en-tête et des pages   (section.navbar-v3)
   #05223D  texte de l'en-tête / accent      (.text-block-899, .link-v3)
   #303634  texte courant                    (body)
   #6A7471  fond du pied de page             (section.footer-v3)
   #FAF8F5  texte du pied de page            (.p-footer, .link-2)
   #FFFFFF  titre de marque du pied de page  (.txt-logo-footer-v3)
   ================================================================== */
:root {
	--epv-blanc:        #FFFFFF;
	--epv-accent:       #05223D;
	--epv-texte:        #303634;
	--epv-footer-bg:    #6A7471;
	--epv-footer-texte: #FAF8F5;
	--epv-footer-titre: #FFFFFF;
	--epv-trait:        rgba(5, 34, 61, .14);

	/* Police d'affichage du site : Palatino Linotype (en-tête) */
	--epv-serif: "Palatino Linotype", "Book Antiqua", Palatino, "Palatino LT STD", Georgia, serif;
	/* Police du pied de page et des textes du site : Bitter */
	--epv-bitter: Bitter, Georgia, "Times New Roman", serif;
	/* Police de corps du site : Inter Tight */
	--epv-sans: "Inter Tight", Intertight, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* =====================================================================
   2. BASE
   ================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--epv-blanc);
	color: var(--epv-texte);
	font-family: var(--epv-sans);
	font-size: 16px;
	line-height: 1.7;
	overflow-wrap: break-word;
}

img, svg, video, iframe { max-width: 100%; height: auto; }

a { color: var(--epv-accent); }

.epv-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--epv-accent);
	color: #fff;
	padding: 10px 16px;
	z-index: 999;
}
.epv-skip:focus { left: 0; }

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

/* =====================================================================
   3. EN-TÊTE — repris à l'identique de section.navbar-v3
      (flex, aligné en bas, padding 16px 32px 100px, fond blanc, centré)
   ================================================================== */
.epv-header {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: flex-start;
	flex-wrap: wrap;           /* robustesse : jamais de débordement */
	gap: 16px;
	padding: 16px 32px 100px;
	background: var(--epv-blanc);
	text-align: center;
}

/* Baseline de gauche — .text-block-899 : Palatino 27px/25px italique #05223D */
.epv-baseline {
	flex: 0 1 234px;
	width: 234px;
	max-width: 100%;
	margin: 0 1px 0 0;
	font-family: var(--epv-serif);
	font-size: 27px;
	line-height: 25px;
	font-style: italic;
	font-weight: 400;
	color: var(--epv-accent);
	text-align: center;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Logo — .image-25 : 220 x 220 */
.epv-logo-link {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
	text-decoration: none;
}
.epv-logo-img {
	display: block;
	width: 220px;
	max-width: 100%;
	height: auto;
}

/* Titre WordPress : le site n'affiche pas de titre texte dans l'en-tête.
   Il reste dans le code pour l'accessibilité et le référencement, borné en
   largeur et coupé sur plusieurs lignes s'il devait être affiché. */
.epv-site-title {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	max-width: 320px;
	font-family: var(--epv-serif);
	overflow-wrap: break-word;
}

/* Navigation — .columns (399 px) : 2 colonnes de liens .link-v3
   Palatino 25px, couleur #05223D. */
.epv-nav {
	flex: 0 1 399px;
	width: 399px;
	max-width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	min-width: 0;
}
.epv-nav-col {
	flex: 1 1 50%;
	min-width: 160px;
	max-width: 100%;
	padding: 0 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
/* Le site espace largement les deux liens de la première colonne. */
.epv-nav-col:first-child .epv-nav-link + .epv-nav-link { margin-top: 100px; }

.epv-nav-link {
	display: block;
	max-width: 100%;
	font-family: var(--epv-serif);
	font-size: 25px;
	line-height: 20px;
	font-weight: 400;
	color: var(--epv-accent);
	text-decoration: none;
	text-align: center;
	padding: 6px 0;
	overflow-wrap: break-word;
}
.epv-nav-link.is-italic { font-style: italic; }
.epv-nav-link:hover,
.epv-nav-link:focus { text-decoration: underline; }

/* Onglet actif : le site ne marque pas l'onglet courant ; on se contente
   d'un soulignement sobre, dans la couleur de l'en-tête. */
.epv-nav-link.is-active {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 1px;
}

/* =====================================================================
   4. CONTENU DU BLOG
   ================================================================== */
.epv-main {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 32px 80px;
}

.epv-layout {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	align-items: flex-start;
}
.epv-col-main { flex: 1 1 620px; min-width: 0; }
.epv-col-side { flex: 0 1 280px; min-width: 0; }

.epv-page-title,
.epv-archive-title {
	font-family: var(--epv-serif);
	font-size: 40px;
	line-height: 1.15;
	font-weight: 400;
	color: var(--epv-accent);
	margin: 0 0 8px;
	overflow-wrap: break-word;
}
.epv-archive-desc { margin: 0 0 32px; color: var(--epv-texte); }

.epv-entry { padding: 0 0 40px; margin: 0 0 40px; border-bottom: 1px solid var(--epv-trait); }
.epv-entry:last-of-type { border-bottom: 0; }

.epv-entry-title {
	font-family: var(--epv-serif);
	font-size: 30px;
	line-height: 1.2;
	font-weight: 400;
	margin: 0 0 8px;
	color: var(--epv-accent);
}
.epv-entry-title a { color: inherit; text-decoration: none; }
.epv-entry-title a:hover { text-decoration: underline; }

.epv-meta {
	font-family: var(--epv-bitter);
	font-size: 13px;
	color: #6A7471;
	margin: 0 0 16px;
}
.epv-meta a { color: #6A7471; }
.epv-meta-sep { opacity: .6; }

.epv-thumb { display: block; margin: 0 0 20px; }
.epv-thumb img { display: block; width: 100%; height: auto; }

.epv-entry-content > * + * { margin-top: 1.1em; }
.epv-entry-content h2,
.epv-entry-content h3,
.epv-entry-content h4 {
	font-family: var(--epv-serif);
	font-weight: 400;
	color: var(--epv-accent);
	line-height: 1.25;
	margin-top: 1.6em;
}
.epv-entry-content h2 { font-size: 28px; }
.epv-entry-content h3 { font-size: 23px; }
.epv-entry-content h4 { font-size: 19px; }
.epv-entry-content blockquote {
	margin: 1.5em 0;
	padding: 4px 0 4px 20px;
	border-left: 2px solid var(--epv-accent);
	font-family: var(--epv-serif);
	font-style: italic;
	font-size: 19px;
}
.epv-entry-content img { height: auto; }
.epv-entry-content table { width: 100%; border-collapse: collapse; }
.epv-entry-content td, .epv-entry-content th { border: 1px solid var(--epv-trait); padding: 8px; }
.epv-entry-content pre { overflow: auto; padding: 16px; background: #f5f5f4; }
.epv-entry-content code { font-size: 90%; }

.epv-more {
	display: inline-block;
	margin-top: 4px;
	font-family: var(--epv-bitter);
	font-size: 14px;
	color: var(--epv-accent);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.epv-tags { margin-top: 24px; font-family: var(--epv-bitter); font-size: 13px; }

/* Pagination */
.pagination, .epv-pagination { margin-top: 40px; font-family: var(--epv-bitter); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var(--epv-trait);
	color: var(--epv-accent);
	text-decoration: none;
}
.pagination .page-numbers.current { background: var(--epv-accent); color: #fff; border-color: var(--epv-accent); }

/* Navigation article précédent / suivant */
.epv-post-nav { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--epv-trait); font-family: var(--epv-bitter); font-size: 14px; }
.epv-post-nav a { color: var(--epv-accent); text-decoration: none; }
.epv-post-nav a:hover { text-decoration: underline; }

/* =====================================================================
   5. COLONNE LATÉRALE
   ================================================================== */
.epv-widget { margin-bottom: 36px; font-family: var(--epv-bitter); font-size: 14px; }
.epv-widget-title {
	font-family: var(--epv-serif);
	font-size: 20px;
	font-weight: 400;
	color: var(--epv-accent);
	margin: 0 0 12px;
}
.epv-widget ul { list-style: none; margin: 0; padding: 0; }
.epv-widget li { padding: 5px 0; border-bottom: 1px solid var(--epv-trait); }
.epv-widget a { color: var(--epv-texte); text-decoration: none; }
.epv-widget a:hover { text-decoration: underline; }

/* =====================================================================
   6. RECHERCHE
   ================================================================== */
.epv-search-form { display: flex; gap: 8px; max-width: 100%; }
.epv-search-form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--epv-trait);
	font-family: var(--epv-bitter);
	font-size: 14px;
	color: var(--epv-texte);
	background: #fff;
}
.epv-search-form button {
	flex: 0 0 auto;
	padding: 10px 16px;
	border: 0;
	background: var(--epv-accent);
	color: #fff;
	font-family: var(--epv-bitter);
	font-size: 14px;
	cursor: pointer;
}

/* =====================================================================
   7. COMMENTAIRES
   ================================================================== */
.epv-comments { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--epv-trait); }
.epv-comments-title { font-family: var(--epv-serif); font-size: 26px; font-weight: 400; color: var(--epv-accent); margin: 0 0 24px; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list ul.children { list-style: none; margin: 0 0 0 24px; padding: 0; }
.comment-body { padding: 16px 0; border-bottom: 1px solid var(--epv-trait); }
.comment-author { font-family: var(--epv-bitter); font-size: 14px; }
.comment-author img { border-radius: 50%; vertical-align: middle; margin-right: 8px; }
.comment-metadata { font-family: var(--epv-bitter); font-size: 12px; color: #6A7471; }
.comment-metadata a { color: #6A7471; }
.comment-respond { margin-top: 32px; }
.comment-reply-title { font-family: var(--epv-serif); font-size: 22px; font-weight: 400; color: var(--epv-accent); }
.comment-form label { display: block; font-family: var(--epv-bitter); font-size: 13px; margin-bottom: 4px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	max-width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--epv-trait);
	font-family: var(--epv-sans);
	font-size: 15px;
	background: #fff;
	color: var(--epv-texte);
}
.comment-form .submit {
	padding: 11px 22px;
	border: 0;
	background: var(--epv-accent);
	color: #fff;
	font-family: var(--epv-bitter);
	font-size: 14px;
	cursor: pointer;
}

/* =====================================================================
   8. 404
   ================================================================== */
.epv-404 { padding: 40px 0 60px; max-width: 620px; }

/* =====================================================================
   9. PIED DE PAGE — repris à l'identique de section.footer-v3
      fond #6A7471, padding 60px 64px, police Bitter, texte #FAF8F5
   ================================================================== */
.epv-footer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;              /* robustesse */
	align-items: flex-start;
	justify-content: flex-start;
	padding: 60px 64px;
	background: var(--epv-footer-bg);
	font-family: var(--epv-bitter);
	font-size: 14px;
	line-height: 20px;
	color: var(--epv-footer-texte);
}

.epv-footer-mark-link { flex: 0 0 auto; display: block; line-height: 0; }
.epv-footer-mark { display: block; width: 148px; max-width: 100%; height: auto; }

.epv-footer-left {
	flex: 0 1 455px;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.epv-footer-lockup { display: flex; align-items: center; margin: 0 0 20px; }
.epv-footer-title {
	margin-left: 10px;
	max-width: 100%;
	font-family: var(--epv-bitter);
	font-size: 18px;
	line-height: 1.4;
	font-weight: 500;
	letter-spacing: 4px;
	text-transform: capitalize;
	color: var(--epv-footer-titre);
	overflow-wrap: break-word;
}
.epv-footer-p { margin: 0 0 10px; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--epv-footer-texte); }
.epv-footer-mentions { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--epv-footer-texte); }

.epv-footer-col { flex: 0 0 auto; display: flex; flex-direction: column; min-width: 0; }
.epv-footer-col-mid { margin: 0 60px 0 92px; }

.epv-footer-h {
	margin: 0 0 6px;
	padding: 0 10px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: var(--epv-footer-texte);
}
.epv-footer-link {
	display: block;
	padding: 6px 10px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	color: var(--epv-footer-texte);
	text-decoration: none;
	overflow-wrap: break-word;
}
.epv-footer-link:hover,
.epv-footer-link:focus { text-decoration: underline; }

/* =====================================================================
   10. RESPONSIVE — l'en-tête et le pied de page ne cassent jamais
   ================================================================== */
@media (max-width: 991px) {
	.epv-header { padding: 16px 24px 60px; gap: 24px; justify-content: center; align-items: center; }
	.epv-baseline { flex: 1 1 100%; width: auto; }
	.epv-nav { flex: 1 1 100%; width: auto; justify-content: center; }
	.epv-nav-col:first-child .epv-nav-link + .epv-nav-link { margin-top: 40px; }
	.epv-footer { padding: 48px 32px; gap: 24px; }
	.epv-footer-col-mid { margin: 0; }
	.epv-footer-left { flex: 1 1 100%; }
	.epv-footer-col { flex: 1 1 220px; }
	.epv-main { padding: 0 24px 60px; }
}

@media (max-width: 600px) {
	.epv-header { padding: 16px 16px 40px; }
	.epv-baseline { font-size: 22px; line-height: 24px; }
	.epv-logo-img { width: 160px; }
	.epv-nav-col { flex: 1 1 100%; min-width: 0; }
	.epv-nav-col:first-child .epv-nav-link + .epv-nav-link { margin-top: 16px; }
	.epv-nav-link { font-size: 21px; line-height: 1.3; padding: 10px 0; }
	.epv-page-title, .epv-archive-title { font-size: 30px; }
	.epv-entry-title { font-size: 24px; }
	.epv-footer { padding: 40px 20px; }
	.epv-footer-title { font-size: 16px; letter-spacing: 2px; }
	.epv-main { padding: 0 20px 48px; }
}