/*
Theme Name: Twenty Twenty-Five – BBC Brussels Business Club
Template: twentytwentyfive
Description: Habillage BBC (palette, typographie, header/footer) sur base de Twenty Twenty-Five.
Author: Aventurier Digital
Version: 1.0.39
Text Domain: twentytwentyfive-bbc
*/

/* ===== Losange décoratif (logo, puces de valeurs) — élément réutilisable, couleur pilotée par preset ===== */
.bbc-diamond {
	display: block;
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	transform: rotate(45deg);
	background: var(--wp--preset--color--accent-1);
}

/* ===== Cartes "Invité" / "Membre" (page Devenir membre) — même hauteur des
   deux cartes, comme la maquette. Le flex par défaut de .wp-block-columns
   (align-items:stretch) ne suffisait pas ici : WP force align-items:normal
   en !important sur .wp-block-columns, et même en le neutralisant à coup de
   !important, le stretch ne s'appliquait pas de façon fiable sur les deux
   colonnes (bordures d'épaisseur différente selon la carte). Une grille est
   plus prévisible : les lignes de grille s'étirent par défaut. ===== */
.bbc-membership-cards {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	align-items: stretch !important;
	gap: 26px;
	max-width: 820px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.bbc-membership-cards > .wp-block-column {
	box-sizing: border-box !important;
	height: 100% !important;
	/* Le blockGap du bloc (26px) est injecté par WP en margin-block-start sur
	   les enfants (pensé pour un espacement vertical en flex/flow) — en grille,
	   ça pousse juste la 2e carte plus bas au lieu d'espacer horizontalement
	   (déjà géré par le gap ci-dessus). */
	margin-top: 0 !important;
}
@media (max-width: 781px) {
	.bbc-membership-cards {
		grid-template-columns: 1fr;
	}
}

/* ===== Habillage des cartes Invité/Membre — entièrement piloté par
   className (aucun attribut border/spacing/color/style de bloc), pour que
   le HTML enregistré par chaque bloc reste le plus simple possible et ne
   diverge jamais de ce que Gutenberg régénère à l'ouverture de l'éditeur.
   Un style="..." écrit à la main dans le contenu (position:relative sur la
   colonne, badge en position absolute...) causait "Le bloc contient du
   contenu invalide ou inattendu" et rendait les 2 colonnes non éditables —
   déjà corrigé une première fois en passant par des attributs de bloc
   (border/spacing), mais même ceux-là ne suffisaient pas à garantir un
   round-trip fidèle une fois rouvert dans l'éditeur ; solution robuste :
   plus aucun attribut de style sur les blocs, tout en CSS de thème. ===== */
.bbc-membership-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--accent-3);
	border-radius: 18px;
	padding: 36px;
	box-sizing: border-box;
}
.bbc-membership-card__eyebrow {
	margin: 0 0 8px;
	color: var(--wp--preset--color--accent-1);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
.bbc-membership-card__desc {
	margin: 0;
	color: var(--wp--preset--color--accent-6);
	font-size: 13px;
}
.bbc-diamond-list {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.bbc-diamond-list li {
	position: relative;
	padding-left: 22px;
	color: var(--wp--preset--color--accent-4);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}
/* Même technique que .bbc-diamond (carré tourné à 45°) plutôt que le
   caractère "◆" — sa taille/forme dépendait trop de la police, jamais
   assez visible ni bien aligné avec le texte quelle que soit la taille de
   police tentée. Un carré CSS + centrage vertical par top:50%/margin-top
   négatif est fiable indépendamment du line-height. */
.bbc-diamond-list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	transform: rotate(45deg);
	background: var(--wp--preset--color--accent-1);
}

.bbc-membership-featured {
	position: relative;
	border-color: var(--wp--preset--color--contrast);
	border-width: 1.5px;
	background: var(--wp--preset--color--contrast);
}
.bbc-membership-featured .wp-block-heading {
	color: var(--wp--preset--color--base);
}
.bbc-membership-featured .bbc-membership-card__desc {
	color: var(--wp--preset--color--accent-8);
}
.bbc-membership-featured .bbc-diamond-list li {
	color: var(--wp--preset--color--accent-8);
}

.bbc-membership-badge {
	position: absolute;
	top: 33px;
	right: 36px;
	margin: 0;
	padding: 5px 12px;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--contrast);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .05em;
	border-radius: 14px;
	text-transform: uppercase;
}

/* ===== Logo (icône + BBC + accroche) — un seul lien cliquable vers l'accueil,
   pas de changement de couleur au survol (règle globale styles.elements.link
   du theme.json, sinon héritée comme n'importe quel lien). Rendu par le bloc
   dynamique bbc/logo-link (functions.php) plutôt que des blocs group/
   site-title/site-tagline enveloppés d'un <a> écrit à la main. ===== */
.bbc-logo-link,
.bbc-logo-link:hover {
	display: flex;
	align-items: center;
	gap: 13px;
	color: inherit;
	text-decoration: none;
}
.bbc-logo-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.bbc-logo-title {
	font-family: var(--wp--preset--font-family--heading, "Cormorant Garamond", serif);
	font-size: 22px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: 3px;
	color: var(--wp--preset--color--contrast);
}
.bbc-logo-tagline {
	font-family: var(--wp--preset--font-family--body, "Manrope", sans-serif);
	font-size: 7.5px;
	line-height: 1;
	font-weight: 500; /* maquette Claude Design : 500, pas 600 — trop gras sinon */
	letter-spacing: 2.5px;
	color: var(--wp--preset--color--accent-6);
}

/* ===== Pas d'espace entre le contenu de la page et le footer — le thème
   applique un blockGap racine (styles.spacing.blockGap: 0.8rem, theme.json)
   entre chaque bloc de premier niveau (.wp-site-blocks > *), y compris avant
   le footer, ce qui laissait passer une bande du fond crème de la page. La
   règle générée par WP utilise :where() (spécificité nulle), donc n'importe
   quel sélecteur normal suffit à la neutraliser ici. ===== */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* ===== Idem à l'intérieur des pages : les paragraphes-repères qui organisent
   le contenu dans l'éditeur (ex. <p><!-- FORMULES --></p>, un commentaire
   HTML seul dans un <p>, invisible) restent des enfants directs du flow —
   même mécanique de blockGap racine, donc chacun ajoute quand même 12.8px
   d'espace avant lui, même sans contenu visible. Un <p> ne contenant qu'un
   commentaire est bien :empty (les commentaires ne comptent pas comme
   contenu pour ce sélecteur) : on le sort du flux plutôt que de le laisser
   ajouter un espace non voulu entre les sections. ===== */
main p:empty {
	display: none;
}

/* ===== Header : fond translucide + flou au scroll (sticky) ===== */
.bbc-site-header {
	background: rgba(251, 249, 245, .86) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* ===== Nav principale : lien de la page courante mis en avant (ajouté automatiquement par WP) ===== */
.wp-block-navigation-item.current-menu-item > a {
	color: var(--wp--preset--color--contrast) !important;
}

/* ===== Footer : liens de navigation sans puces, soulignement au survol seulement ===== */
.bbc-footer-nav {
	list-style: none;
	padding-left: 0;
}
.bbc-footer-nav a {
	color: var(--wp--preset--color--accent-8);
	font-weight: 500;
	text-decoration: none;
}
.bbc-footer-nav a:hover {
	text-decoration: underline;
}

/* ===== Chiffres de la frise chronologique (grands nombres en Cormorant) ===== */
.bbc-timeline-year {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 34px;
	color: var(--wp--preset--color--contrast);
}

/* ===== Cartes de témoignage / bureau — avatar rond neutre ===== */
.bbc-avatar-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--accent-4);
	flex: 0 0 auto;
}

/* ===== Contact Form 7 ===== */
.bbc-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.wpcf7-form p,
.wpcf7-form label {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 12px;
	color: var(--wp--preset--color--accent-4);
	margin: 0 0 14px;
}
.wpcf7-form-control-wrap .wpcf7-form-control,
.wpcf7 select.wpcf7-form-control {
	display: block;
	width: 100%;
	box-sizing: border-box; /* sans ça, padding + bordure dépassent du champ
		vers la droite (content-box par défaut) — le champ n'a pas le même
		espace à droite qu'à gauche dans le cadre du formulaire */
	margin-top: 7px;
	font-size: 15px;
	font-weight: 400;
	padding: 12px 14px;
	border: 1px solid var(--wp--preset--color--accent-3);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}
.wpcf7-form textarea.wpcf7-form-control {
	min-height: 110px;
	resize: vertical;
}
.wpcf7-form-control:focus {
	border-color: var(--wp--preset--color--accent-1);
	outline: none;
}
.wpcf7-form input[type="submit"].wpcf7-submit {
	width: 100%;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 14px;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--accent-1);
	border: none;
	border-radius: 28px;
	padding: 15px 26px;
	cursor: pointer;
	transition: background .2s;
}
.wpcf7-form input[type="submit"].wpcf7-submit:hover {
	background: var(--wp--preset--color--accent-2);
}
.wpcf7-spinner { margin: 10px auto 0; }
.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--accent-1);
	border-radius: 8px;
	color: var(--wp--preset--color--contrast);
}

/* Cadre du formulaire de contact — ombre douce de la maquette Claude Design
   "BBC Contact" (pas de support "shadow" natif sur le bloc groupe). */
.bbc-contact-card {
	box-shadow: 0 10px 40px rgba(22, 55, 92, .06);
}

/* Boutons LinkedIn/Facebook de la page Contact — scopés à ce bloc précis
   (pas au style is-style-outline global, réutilisé ailleurs avec un autre
   rendu, ex. "Découvrir le club") pour coller à la maquette : fond blanc,
   bordure fine, coins peu arrondis. */
.bbc-social-btns .wp-block-button__link {
	background: #fff;
	border: 1px solid rgba(22, 55, 92, .14);
	border-radius: 10px;
	color: var(--wp--preset--color--contrast);
}
.bbc-social-btns .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--accent-1);
}

/* ===== Page single événement (single-evenement.php) — reprend les composants
   du plugin (.ade-ed-*) pour les badges/puces/listes, ajoute juste la mise en
   page propre à cette page (largeur, fil d'ariane, hero scindé, sections). ===== */
.ade-ed-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.ade-ed-breadcrumb {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--wp--preset--color--accent-6);
	margin: 28px 0 0;
}
.ade-ed-breadcrumb a { color: inherit; }
.ade-ed-breadcrumb a:hover { color: var(--wp--preset--color--accent-1); }

.ade-ed-single-hero {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 44px;
	align-items: start;
	margin-top: 22px;
}
@media (max-width: 900px) {
	.ade-ed-single-hero { grid-template-columns: 1fr; }
}
.ade-ed-single-hero__media { border-radius: 18px; overflow: hidden; }
.ade-ed-single-hero__img { display: block; width: 100%; height: 420px; object-fit: cover; }
.ade-ed-single-hero__content { padding-top: 6px; }
.ade-ed-single-hero__title {
	font-size: 44px;
	line-height: 1.08;
	font-weight: 500;
	margin: 0 0 18px;
	letter-spacing: -.01em;
}
.ade-ed-single-hero__infocard {
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-weight: 600;
	font-size: 14.5px;
	color: var(--wp--preset--color--contrast);
	margin-bottom: 32px;
	padding: 26px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--accent-3);
	border-radius: 16px;
}

.ade-ed-section { padding: 60px 0 0; }
.ade-ed-section:last-child { padding-bottom: 70px; }
/* Un événement sans programme/galerie/"autres événements" n'a aucune
   .ade-ed-section : le conteneur du hero se retrouve alors collé au footer,
   sans l'espace que .ade-ed-section:last-child fournit d'habitude. */
.ade-ed-container:last-child:not(.ade-ed-section) { padding-bottom: 70px; }
.ade-ed-section__title {
	font-size: 28px;
	font-weight: 500;
	margin: 0 0 18px;
}
.ade-ed-prose { font-size: 15.5px; line-height: 1.75; color: var(--wp--preset--color--accent-6); max-width: 720px; }
.ade-ed-prose p { margin: 0 0 14px; }

/* ===== Détails (Description + Lieu/Conférenciers) — grille 2 colonnes
   reprenant les proportions du hero (1.15fr/.85fr). Une colonne seule
   (événement sans lieu présentiel ni conférencier, ou sans description)
   occupe toute la largeur plutôt que de laisser un vide à côté. ===== */
.ade-ed-details {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 44px;
}
@media (max-width: 900px) {
	.ade-ed-details { grid-template-columns: 1fr; }
}
.ade-ed-details > *:only-child { grid-column: 1 / -1; }

.ade-ed-place__name { font-weight: 600; font-size: 15px; color: var(--wp--preset--color--contrast); margin-bottom: 4px; }
.ade-ed-place__city { font-size: 14px; color: var(--wp--preset--color--accent-6); margin-bottom: 14px; }
.ade-ed-place__maps {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 13.5px;
	color: var(--wp--preset--color--accent-1);
	margin-bottom: 32px;
}
.ade-ed-place__maps:hover { color: var(--wp--preset--color--accent-2); }
.ade-ed-place__maps svg { flex: 0 0 auto; }

.ade-ed-speakers { display: flex; flex-direction: column; gap: 14px; }
.ade-ed-speaker {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--accent-3);
	border-radius: 14px;
	padding: 18px 20px;
}
.ade-ed-speaker__photo {
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}
.ade-ed-speaker__body { min-width: 0; }
.ade-ed-speaker__name { font-weight: 700; font-size: 15px; color: var(--wp--preset--color--contrast); }
.ade-ed-speaker__role { font-weight: 500; font-size: 12.5px; line-height: 1.4; color: var(--wp--preset--color--accent-6); margin: 2px 0 6px; }
.ade-ed-speaker__link { font-weight: 700; font-size: 12px; color: var(--wp--preset--color--accent-1); }
.ade-ed-speaker__link:hover { color: var(--wp--preset--color--accent-2); }

/* ===== Bureau du club — bloc bbc/club-team. Le HTML est écrit à la main
   (pas un vrai wp:columns passé par render_block()), donc aucun gap flex
   n'est généré automatiquement par Gutenberg entre les colonnes : sans
   .bbc-club-team__grid, les cartes se touchent bord à bord. Et get_avatar()
   rend un <img width="400" height="400"> — sans .bbc-club-team__avatar en
   taille fixe (pas 100% de la colonne), la photo reste énorme même une
   fois le débordement corrigé. ===== */
.bbc-club-team__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 32px 28px;
}
.bbc-club-team__card {
	flex: 0 1 250px;
	text-align: left;
}
.bbc-club-team__avatar,
.bbc-club-team__avatar-placeholder {
	width: 250px;
	margin: 0;
}
.bbc-club-team__avatar {
	display: block;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 14px;
}
.bbc-club-team__avatar-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	border-radius: 14px;
	background: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--accent-1);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 34px;
}