/*
Theme Name: Duo
Theme URI: https://duo.copoweb.xyz
Author: Colin
Description: Thème sur-mesure pour un duo acoustique (guitare & voix) : page d'accueil avec présentation et agenda des concerts, galerie photos/vidéos, espace pro, contact et mentions légales.
Version: 1.1.3
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: theme-duo
*/

/* ==========================================================================
   1. Variables & base
   ========================================================================== */
:root {
	--fond: #faf6ef;          /* crème */
	--surface: #ffffff;
	--texte: #2b211a;         /* brun très foncé */
	--muted: #6b5d50;
	--bois: #b07d4f;          /* bois clair */
	--bois-fonce: #7a4f24;
	--bordure: #e7ddcd;
	--ombre: 0 14px 40px rgba(43, 33, 26, .10);
	--rayon: 14px;
	--max: 68rem;
	--serif: "Playfair Display", Georgia, serif;
	--sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

/* Le menu mobile (position:fixed) est parqué hors écran à droite quand il est
   fermé : on coupe le débordement horizontal pour éviter le scroll latéral.
   `clip` (et non `hidden`) ne crée pas de conteneur de défilement, donc le
   header en position:sticky continue de fonctionner. */
html, body { overflow-x: clip; }

body {
	margin: 0;
	font-family: var(--sans);
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--texte);
	background: var(--fond);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.2; font-weight: 700; }

a { color: var(--bois-fonce); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.container {
	width: 100%;
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: 1.25rem;
}
.container--narrow { max-width: 46rem; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.skip-link:focus {
	position: fixed; top: 1rem; left: 1rem; z-index: 999;
	width: auto; height: auto; clip: auto;
	background: var(--texte); color: #fff; padding: .6rem 1rem; border-radius: 8px;
}

/* ==========================================================================
   2. Boutons
   ========================================================================== */
.btn {
	display: inline-block;
	background: var(--bois-fonce);
	color: #fff;
	font-weight: 600;
	padding: .7rem 1.4rem;
	border-radius: 999px;
	transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--texte); color: #fff; text-decoration: none; transform: translateY(-2px); box-shadow: var(--ombre); }
.btn--lg { padding: .95rem 2rem; font-size: 1.05rem; }
.btn--ghost { background: transparent; color: var(--bois-fonce); border: 2px solid var(--bois); }
.btn--ghost:hover { background: var(--bois); color: #fff; }

/* ==========================================================================
   3. En-tête + navigation
   ========================================================================== */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(250, 246, 239, .92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--bordure);
}
.site-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; padding-block: .75rem;
}
.site-branding { display: flex; align-items: center; gap: .65rem; }
.site-logo img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.site-title {
	font-family: var(--serif); font-size: 1.5rem; font-weight: 700;
	color: var(--texte); letter-spacing: .3px;
}
.site-title:hover { text-decoration: none; color: var(--bois-fonce); }

/* Emblème animé : guitare + micro (guitare & voix) */
.brand-mark { display: inline-flex; cursor: pointer; }
.brand-mark:hover { text-decoration: none; }
.brand-emblem { width: 60px; height: 46px; }
.guitar-body { transform-box: fill-box; transform-origin: 50% 92%; animation: guitar-sway 4s ease-in-out infinite; }
.guitar-strings { animation: string-vibe 1.6s ease-in-out infinite; }
.mic { transform-box: fill-box; transform-origin: 50% 100%; animation: mic-bob 4s ease-in-out infinite; }
@keyframes guitar-sway {
	0%, 100% { transform: rotate(-5deg); }
	50%      { transform: rotate(5deg); }
}
@keyframes mic-bob {
	0%, 100% { transform: rotate(5deg); }
	50%      { transform: rotate(-5deg); }
}
@keyframes string-vibe {
	0%, 100% { opacity: .5; }
	50%      { opacity: 1; }
}

/* Menu */
.site-nav { display: flex; align-items: center; gap: 1.5rem; }
.site-nav ul {
	display: flex; align-items: center; gap: 1.4rem;
	list-style: none; margin: 0; padding: 0;
}
.site-nav a { color: var(--texte); font-weight: 500; position: relative; padding-block: .25rem; }
.site-nav a:hover { text-decoration: none; color: var(--bois-fonce); }
.site-nav a::after {
	content: ""; position: absolute; left: 0; bottom: -2px;
	width: 0; height: 2px; background: var(--bois); transition: width .2s ease;
}
.site-nav a:hover::after,
.site-nav .current-menu-item > a::after { width: 100%; }

/* Bouton burger (caché sur desktop) */
.menu-toggle {
	display: none; border: 0; background: transparent; cursor: pointer;
	padding: .5rem; width: 44px; height: 44px;
}
.menu-toggle__box { position: relative; display: block; width: 26px; height: 2px; }
.menu-toggle__bar, .menu-toggle__bar::before, .menu-toggle__bar::after {
	content: ""; position: absolute; left: 0; width: 26px; height: 2px;
	background: var(--texte); transition: transform .2s ease, opacity .2s ease;
}
.menu-toggle__bar { top: 0; }
.menu-toggle__bar::before { top: -8px; }
.menu-toggle__bar::after { top: 8px; }
.menu-toggle.is-active .menu-toggle__bar { background: transparent; }
.menu-toggle.is-active .menu-toggle__bar::before { transform: translateY(8px) rotate(45deg); }
.menu-toggle.is-active .menu-toggle__bar::after { transform: translateY(-8px) rotate(-45deg); }

/* ==========================================================================
   4. Réseaux sociaux
   ========================================================================== */
.social-links { display: flex; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.social-link {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 50%;
	background: var(--surface); color: var(--bois-fonce);
	border: 1px solid var(--bordure); transition: all .15s ease;
}
.social-link:hover { background: var(--bois-fonce); color: #fff; text-decoration: none; transform: translateY(-2px); }

/* ==========================================================================
   5. Hero
   ========================================================================== */
.hero {
	position: relative; display: flex; align-items: center; justify-content: center;
	min-height: 70vh; text-align: center; color: var(--texte);
	background: linear-gradient(160deg, #f3e7d6, #faf6ef);
}
.hero--image { color: #fff; background-size: cover; background-position: center; }
.hero__overlay { position: absolute; inset: 0; }
.hero--image .hero__overlay { background: linear-gradient(180deg, rgba(40,28,18,.25), rgba(40,28,18,.65)); }
.hero__content { position: relative; padding-block: 5rem; }
.hero__eyebrow { text-transform: uppercase; letter-spacing: .25em; font-size: .8rem; font-weight: 600; margin: 0 0 1rem; opacity: .85; }
.hero__title { font-size: clamp(2.5rem, 7vw, 4.5rem); margin: 0; }
.hero--image .hero__title { color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.35); }
.hero__tagline { font-size: 1.25rem; margin: 1rem 0 2rem; }
.hero .btn--lg { margin-top: .5rem; }

/* ==========================================================================
   6. Sections génériques
   ========================================================================== */
.section { padding-block: 4.5rem; }
.section--presentation { background: var(--surface); }
.section__title {
	font-size: clamp(1.8rem, 4vw, 2.6rem); text-align: center; margin: 0 0 2.5rem;
	position: relative;
}
.section__title::after {
	content: ""; display: block; width: 64px; height: 3px; margin: .8rem auto 0;
	background: var(--bois); border-radius: 3px;
}
.presentation__content { max-width: 46rem; margin-inline: auto; }

/* ==========================================================================
   7. Agenda / concerts
   ========================================================================== */
.concert-list { list-style: none; margin: 0 auto; padding: 0; max-width: 50rem; }
.concert-item {
	display: flex; align-items: center; gap: 1.25rem;
	background: var(--surface); border: 1px solid var(--bordure);
	border-radius: var(--rayon); padding: 1rem 1.25rem; margin-bottom: 1rem;
	transition: box-shadow .2s ease, transform .2s ease;
}
.concert-item:hover { box-shadow: var(--ombre); transform: translateY(-2px); }
.concert-date {
	flex: 0 0 auto; width: 72px; text-align: center;
	background: var(--bois-fonce); color: #fff; border-radius: 10px; padding: .5rem 0;
	display: flex; flex-direction: column; line-height: 1.1;
}
.concert-date__day { font-family: var(--serif); font-size: 1.7rem; font-weight: 700; }
.concert-date__month { text-transform: uppercase; font-size: .75rem; letter-spacing: .1em; }
.concert-date__year { font-size: .7rem; opacity: .8; }
.concert-info { flex: 1 1 auto; }
.concert-info__ville { margin: 0; font-size: 1.3rem; }
.concert-info__ville a { color: var(--texte); }
.concert-info__ville a:hover { color: var(--bois-fonce); text-decoration: none; }
.concert-info__lieu { margin: .15rem 0 0; color: var(--muted); }
.concert-info__heure { margin: .1rem 0 0; color: var(--muted); font-size: .9rem; }
.concert-billetterie { flex: 0 0 auto; }
.concert-empty { text-align: center; color: var(--muted); font-style: italic; }
.agenda__all { text-align: center; margin-top: 2.5rem; }

/* ==========================================================================
   8. Contenu éditorial (the_content) + galerie + vidéos + fichiers
   ========================================================================== */
.content > * { margin-block: 1.1rem; }
.content h2 { font-size: 1.9rem; margin-top: 2.4rem; }
.content h3 { font-size: 1.4rem; margin-top: 1.8rem; }
.content img, .content .wp-block-image img { border-radius: var(--rayon); }
.content figure { margin-inline: 0; }
.content a { text-decoration: underline; }

.page__header { text-align: center; margin-bottom: 2.5rem; }
.page__eyebrow { text-transform: uppercase; letter-spacing: .2em; font-size: .8rem; color: var(--bois); font-weight: 600; margin: 0 0 .5rem; }
.page__title { font-size: clamp(2rem, 5vw, 3rem); margin: 0; }
.page__thumbnail { margin-bottom: 2rem; }
.page__thumbnail img { border-radius: var(--rayon); width: 100%; }

/* Vidéos embarquées réactives */
.content .wp-block-embed iframe,
.content iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: var(--rayon); border: 0; }

/* Espace Pro : boutons de téléchargement (bloc « Fichier ») */
.content--pro .wp-block-file {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
	background: var(--surface); border: 1px solid var(--bordure);
	border-radius: var(--rayon); padding: 1rem 1.25rem; margin-block: .75rem;
}
.content--pro .wp-block-file a:first-child { font-weight: 600; text-decoration: none; }
.content--pro .wp-block-file__button {
	background: var(--bois-fonce); color: #fff; border-radius: 999px;
	padding: .5rem 1.2rem; font-size: .95rem; text-decoration: none;
}
.content--pro .wp-block-file__button:hover { background: var(--texte); }

/* ==========================================================================
   9. Concert (vue détaillée) & divers
   ========================================================================== */
.single-concert__lieu { font-size: 1.2rem; color: var(--muted); margin-top: .5rem; }
.link-back { font-weight: 600; }
.error-404 { padding-block: 6rem; }

/* ==========================================================================
   10. Pied de page
   ========================================================================== */
.site-footer { background: var(--texte); color: #e9e0d4; margin-top: 4rem; }
.site-footer__inner {
	display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem;
	padding-block: 3rem;
}
.site-footer a { color: #fff; }
.site-footer__name { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: #fff; }
.site-footer__tagline { color: #c9bcab; margin-top: .5rem; }
.site-footer__heading { font-family: var(--sans); font-size: .8rem; text-transform: uppercase; letter-spacing: .15em; color: #c9bcab; margin: 0 0 .8rem; }
.site-footer__social .social-link { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); color: #fff; }
.site-footer__social .social-link:hover { background: var(--bois); }
.site-footer__bottom {
	border-top: 1px solid rgba(255,255,255,.12); text-align: center;
	padding-block: 1.25rem; font-size: .85rem; color: #b9ab99;
}

/* ==========================================================================
   11. Responsive : menu mobile
   ========================================================================== */
@media (max-width: 860px) {
	/* Le backdrop-filter ferait du header le bloc englobant du menu en
	   position:fixed (il serait alors bridé à la hauteur de la barre, d'où le
	   « seul le premier item s'affiche ») : on le retire sur mobile. Le fond du
	   header est déjà quasi opaque, l'effet visuel est négligeable. */
	.site-header { backdrop-filter: none; }
	.menu-toggle { display: block; position: relative; z-index: 2; }
	.site-nav {
		position: fixed; inset: 0 0 0 auto; width: min(80vw, 320px);
		z-index: 1;
		flex-direction: column; align-items: flex-start; justify-content: flex-start;
		gap: 1.5rem; background: var(--surface); padding: 5rem 2rem 2rem;
		box-shadow: var(--ombre);
		transform: translateX(100%); transition: transform .25s ease;
		overflow-y: auto;
	}
	.site-nav.is-open { transform: translateX(0); }
	.site-nav ul { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
	.site-nav a { font-size: 1.15rem; }
	.site-footer__inner { grid-template-columns: 1fr; }
}

/* Accessibilité : on coupe les animations si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
	.guitar-body, .guitar-strings, .mic { animation: none; }
	* { scroll-behavior: auto; }
}