/* =====================================================================
 * ASTRA Agency — components.css
 * Header, footer, boutons, cartes projet, badges, grilles, hero, etc.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * HEADER / NAVIGATION
 * ------------------------------------------------------------------- */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(247, 245, 240, 0.88);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 2rem; min-height: 72px;
}
.site-brand {
	font-family: var(--font-display);
	font-size: 1.6rem; font-weight: 700; letter-spacing: 0.02em;
	display: flex; align-items: center; gap: 0.55rem;
}
.site-brand__mark { width: 26px; height: 26px; }
.site-brand strong { color: var(--color-text); }

/* Menu principal */
.primary-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.8rem; align-items: center; }
.primary-nav a {
	font-family: var(--font-body); font-size: 0.95rem; font-weight: 500;
	letter-spacing: 0.01em; padding: 0.4rem 0; position: relative;
}
.primary-nav a::after {
	content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px;
	background: var(--color-accent); transition: width var(--transition);
}
.primary-nav a:hover::after,
.primary-nav .current-menu-item > a::after { width: 100%; }

/* Sous-menu (Membres) */
.primary-nav .menu-item-has-children { position: relative; }
.primary-nav .sub-menu {
	position: absolute; top: 100%; left: 0; min-width: 220px;
	background: var(--color-surface); border: 1px solid var(--color-border);
	border-radius: var(--radius); padding: 0.5rem 0; flex-direction: column; gap: 0;
	box-shadow: 0 18px 40px rgba(13, 13, 13, 0.12);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.primary-nav .menu-item-has-children:hover > .sub-menu,
.primary-nav .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.primary-nav .sub-menu li { width: 100%; }
.primary-nav .sub-menu a { display: block; padding: 0.55rem 1.2rem; }
.primary-nav .sub-menu a::after { display: none; }
.primary-nav .sub-menu a:hover { background: var(--color-bg); }

/* Bouton burger (mobile) */
.menu-toggle {
	display: none; background: none; border: 0; cursor: pointer;
	width: 44px; height: 44px; padding: 10px;
}
.menu-toggle span { display: block; height: 2px; background: var(--color-text); margin: 5px 0; transition: var(--transition); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------------
 * BOUTONS
 * ------------------------------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; gap: 0.6rem;
	font-family: var(--font-body); font-weight: 500; font-size: 0.98rem;
	padding: 0.95rem 1.8rem; border-radius: var(--radius);
	border: 1px solid transparent; cursor: pointer; transition: var(--transition);
	letter-spacing: 0.01em;
}
.btn--primary { background: var(--color-dark); color: var(--color-bg); }
.btn--primary:hover { background: var(--color-accent); color: var(--color-dark); transform: translateY(-2px); }
.btn--secondary { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn--secondary:hover { border-color: var(--color-dark); color: var(--color-text); }
.btn--light { background: var(--color-bg); color: var(--color-dark); }
.btn--light:hover { background: var(--color-accent); }
.btn--ghost { background: transparent; border-color: rgba(247,245,240,0.4); color: var(--color-bg); }
.btn--ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ---------------------------------------------------------------------
 * BADGES / TAGS
 * ------------------------------------------------------------------- */
.badge {
	display: inline-block; font-family: var(--font-mono);
	font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
	padding: 0.35rem 0.7rem; border: 1px solid var(--color-border);
	border-radius: 100px; color: var(--color-text-light);
}
.badge--accent { border-color: var(--color-accent); color: var(--color-accent); }
.tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }

/* ---------------------------------------------------------------------
 * HERO (accueil)
 * ------------------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(5rem, 12vw, 9rem); overflow: hidden; }
.hero__bg {
	position: absolute; inset: 0; z-index: 0; opacity: 0.04; pointer-events: none;
	color: var(--color-dark);
}
.hero__bg svg { width: 130%; height: 130%; }
.hero__content { position: relative; z-index: 1; max-width: 17ch; }
.hero h1 { margin-bottom: 1.5rem; }
.hero__subtitle {
	font-family: var(--font-mono); font-size: clamp(0.95rem, 1.6vw, 1.15rem);
	letter-spacing: 0.06em; color: var(--color-text-light); margin-bottom: 2.5rem;
	max-width: 40ch;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------------------------------------------------------------------
 * GRILLE PROJETS — volontairement asymétrique (grille brisée)
 * ------------------------------------------------------------------- */
.section-head { max-width: 60ch; margin-bottom: clamp(2rem, 5vw, 3.5rem); }

.projects-grid {
	display: grid; grid-template-columns: repeat(12, 1fr);
	gap: clamp(1rem, 2.5vw, 2rem);
}
/* Tailles asymétriques pour casser la grille régulière */
.project-card--lg { grid-column: span 7; }
.project-card--md { grid-column: span 5; }
.project-card--sm { grid-column: span 4; }
.project-card--offset { margin-top: 4rem; }

.project-card { position: relative; display: block; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.project-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-dark); }
.project-card__media img,
.project-card__media .astra-placeholder {
	width: 100%; height: 100%; object-fit: cover;
	/* Images désaturées par défaut, retour en couleur au survol */
	filter: grayscale(100%) contrast(1.05); transition: filter var(--transition), transform var(--transition);
}
.project-card:hover .project-card__media img,
.project-card:hover .project-card__media .astra-placeholder { filter: grayscale(0%); transform: scale(1.04); }
/* Overlay couleur accent au survol */
.project-card__media::after {
	content: ""; position: absolute; inset: 0; background: var(--color-accent-alt);
	mix-blend-mode: multiply; opacity: 0; transition: opacity var(--transition);
}
.project-card:hover .project-card__media::after { opacity: 0.18; }

.project-card__body { padding: 1.4rem 1.5rem 1.7rem; }
.project-card__meta { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 0.6rem; }
.project-card__num { font-family: var(--font-label); font-size: 1.1rem; color: var(--color-accent); letter-spacing: 0.05em; }
.project-card__title { margin: 0 0 0.4rem; }
.project-card__desc { color: var(--color-text-light); font-size: 0.95rem; margin: 0; }

/* ---------------------------------------------------------------------
 * MANIFESTE (citation sur fond sombre)
 * ------------------------------------------------------------------- */
.manifesto blockquote {
	font-family: var(--font-display); font-weight: 500;
	font-size: clamp(1.8rem, 4.5vw, 3.4rem); line-height: 1.18;
	margin: 0; max-width: 22ch;
}
.manifesto blockquote .accent { color: var(--color-accent); font-style: italic; }
.manifesto cite { display: block; margin-top: 2rem; font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.1em; color: rgba(247,245,240,0.6); font-style: normal; }

/* ---------------------------------------------------------------------
 * ÉQUIPE
 * ------------------------------------------------------------------- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(1.5rem, 4vw, 2.5rem); }
.team-member { text-align: center; }
.team-member__photo {
	aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; margin-bottom: 1rem;
	background: var(--color-dark);
}
.team-member__photo img,
.team-member__photo .astra-placeholder { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter var(--transition); }
.team-member:hover .team-member__photo img,
.team-member:hover .team-member__photo .astra-placeholder { filter: grayscale(0%); }
.team-member__name { font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 0.2rem; }
.team-member__role { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-light); }

/* ---------------------------------------------------------------------
 * PAGE MEMBRE
 * ------------------------------------------------------------------- */
.member-hero { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.member-hero__photo { aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; background: var(--color-dark); }
.member-hero__photo img, .member-hero__photo .astra-placeholder { width: 100%; height: 100%; object-fit: cover; }
.member-hero__name { margin-bottom: 0.3rem; }
.member-hero__role { font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); font-size: 0.85rem; margin-bottom: 1.5rem; }
.member-quote { font-family: var(--font-display); font-style: italic; font-size: 1.6rem; line-height: 1.3; border-left: 3px solid var(--color-accent); padding-left: 1.5rem; margin: 2.5rem 0; }

/* Journal hebdomadaire du membre */
.journal { margin-top: 3rem; border-top: 1px solid var(--color-border); }
.journal__entry { display: grid; grid-template-columns: 140px 1fr; gap: 1.5rem; padding: 2rem 0; border-bottom: 1px solid var(--color-border); }
.journal__week { font-family: var(--font-label); font-size: 1.8rem; color: var(--color-accent); letter-spacing: 0.04em; }
.journal__week small { display: block; font-family: var(--font-mono); font-size: 0.7rem; color: var(--color-text-light); letter-spacing: 0.1em; }
.journal__body h4 { margin-bottom: 0.4rem; }

/* ---------------------------------------------------------------------
 * PAGE ÉVÉNEMENT (lien site + vidéo)
 * ------------------------------------------------------------------- */
.video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--color-dark); margin-block: 2.5rem; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.event-link-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 2rem; margin-top: 2rem; }

/* ---------------------------------------------------------------------
 * FORMULAIRE CONTACT (CF7)
 * ------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact-info p { color: var(--color-text-light); }
.contact-info a { color: var(--color-accent); }
.wpcf7-form p { margin-bottom: 1.1rem; }
.wpcf7-form label { display: block; font-size: 0.9rem; font-weight: 500; margin-bottom: 0.35rem; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%; padding: 0.8rem 1rem; font-family: var(--font-body); font-size: 1rem;
	background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
	color: var(--color-text); transition: border-color var(--transition);
}
.wpcf7-form input:focus, .wpcf7-form textarea:focus, .wpcf7-form select:focus { outline: none; border-color: var(--color-accent); }
.wpcf7-form .wpcf7-submit {
	background: var(--color-dark); color: var(--color-bg); border: 0; cursor: pointer;
	padding: 0.95rem 2rem; border-radius: var(--radius); font-family: var(--font-body); font-weight: 500;
	transition: var(--transition);
}
.wpcf7-form .wpcf7-submit:hover { background: var(--color-accent); color: var(--color-dark); }

/* ---------------------------------------------------------------------
 * FILTRES PROJETS
 * ------------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2.5rem; }
.filter-btn {
	font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
	background: transparent; border: 1px solid var(--color-border); border-radius: 100px;
	padding: 0.5rem 1.1rem; cursor: pointer; color: var(--color-text-light); transition: var(--transition);
}
.filter-btn:hover { border-color: var(--color-dark); color: var(--color-text); }
.filter-btn.is-active { background: var(--color-dark); color: var(--color-bg); border-color: var(--color-dark); }
.is-hidden { display: none !important; }

/* ---------------------------------------------------------------------
 * FOOTER
 * ------------------------------------------------------------------- */
.site-footer { background: var(--color-dark); color: rgba(247,245,240,0.7); padding-block: clamp(3rem, 7vw, 5rem) 2rem; }
.site-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(247,245,240,0.12); }
.site-footer__brand { font-family: var(--font-display); font-size: 1.8rem; color: var(--color-bg); }
.site-footer h4 { color: var(--color-bg); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.6rem; }
.site-footer a:hover { color: var(--color-accent); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 2rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em; color: rgba(247,245,240,0.5); }

/* ---------------------------------------------------------------------
 * UTILITAIRES DE PAGE
 * ------------------------------------------------------------------- */
.page-hero { padding-block: clamp(4rem, 9vw, 7rem) clamp(2rem, 5vw, 4rem); }
.page-hero h1 { max-width: 16ch; }
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.5rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; }
.value-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 2rem; }
.value-card .num { font-family: var(--font-label); font-size: 2rem; color: var(--color-accent); }

/* =====================================================================
 * Responsive
 * ===================================================================== */
@media (max-width: 1024px) {
	.project-card--lg, .project-card--md, .project-card--sm { grid-column: span 6; }
	.project-card--offset { margin-top: 0; }
}
@media (max-width: 768px) {
	/* Navigation : passage en menu mobile plein écran */
	.menu-toggle { display: block; }
	.primary-nav {
		position: fixed; inset: 72px 0 0 0; background: var(--color-bg);
		transform: translateX(100%); transition: transform var(--transition);
		padding: 2rem; overflow-y: auto;
	}
	.primary-nav.is-open { transform: translateX(0); }
	.primary-nav ul { flex-direction: column; gap: 0.5rem; align-items: stretch; }
	.primary-nav a { font-size: 1.3rem; font-family: var(--font-display); padding: 0.6rem 0; }
	.primary-nav .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
		border: 0; padding: 0 0 0 1rem; background: transparent;
	}
	.member-hero { grid-template-columns: 1fr; }
	.member-hero__photo { max-width: 320px; }
	.journal__entry { grid-template-columns: 1fr; gap: 0.5rem; }
	.contact-grid, .grid-2, .site-footer__top { grid-template-columns: 1fr; }
	.projects-grid { grid-template-columns: 1fr; }
	.project-card--lg, .project-card--md, .project-card--sm { grid-column: auto; }
}