/*
 * Composants de base — documentés avec justification dans _team/docs/composants.md
 */

/* ---------------------------------------------------------------------------
 * 1. Boutons
 * Rayon modéré (var(--nwc-radius-md)), jamais de "pill" générique.
 * Un seul style plein (CTA) + un style discret (lien secondaire) — pas de 4e variante inutile.
 * ------------------------------------------------------------------------- */
.kb-button, .wp-block-button__link, .nwc-button {
	display: inline-block;
	font-family: var(--nwc-font-body);
	font-weight: 600;
	font-size: var(--nwc-text-body);
	border-radius: var(--nwc-radius-md) !important;
	padding: 0.85em 1.6em !important;
	text-align: center;
	/* Demande Jordan (25/10/2026) : aucun bouton ne doit garder le soulignement
	   hérité de la règle générique `a` (base.css, text-decoration-color: gold) —
	   un bouton n'est pas un lien de texte courant. Couvre .nwc-button et
	   toutes ses variantes (--primary/--ghost/--give/--on-dark) puisqu'elles
	   héritent toutes de ce sélecteur de base ; état hover inclus (aucune
	   règle hover ci-dessous ne réintroduit text-decoration). */
	text-decoration: none;
	transition: transform var(--nwc-duration-fast) var(--nwc-ease),
		box-shadow var(--nwc-duration-fast) var(--nwc-ease),
		background-color var(--nwc-duration-fast) var(--nwc-ease);
}

/*
 * Note sur le !important ci-dessus :
 * Kadence Blocks Pro injecte le rayon et le padding des boutons en style INLINE
 * par bloc (attribut "style" généré par l'éditeur), qui a toujours la priorité
 * sur une feuille de style externe quelle que soit sa spécificité. Sans ce
 * !important ciblé (2 propriétés, 1 sélecteur), chaque bouton existant devrait
 * être réédité un par un dans Gutenberg. C'est un repli documenté, pas une
 * habitude.
 *
 * Mise à jour (audit [CHEF-ARCHITECTURE] du 9/10/2026) : ce n'est plus la
 * "seule" exception du thème — d'autres !important sont apparus cette nuit
 * dans d'autres fichiers, chacun commenté localement. Deux familles légitimes
 * identifiées en plus de celle-ci :
 *   1. Neutralisation de l'apparence par défaut d'un plugin tiers (ex. widget
 *      The Events Calendar dans events-dons.css) — sa propre feuille de style
 *      est chargée séparément et peut gagner en spécificité sans !important.
 *   2. Correctifs mobile qui surchargent une valeur desktop au même sélecteur
 *      (hero-liquidglass.css, home-story.css) — à vérifier en plein jour : si
 *      aucun style inline Kadence n'entre en jeu à cet endroit précis, l'ordre
 *      des media queries devrait suffire sans !important (non corrigé cette
 *      nuit pour éviter une régression sur un rendu déjà validé par Jordan ;
 *      signalé sur _team/board.md).
 * Règle qui reste : jamais de !important sans commentaire expliquant pourquoi,
 * jamais en remplacement de la cascade normale par flemme.
 */

.nwc-button--primary {
	background-color: var(--nwc-gold);
	color: var(--nwc-ink);
	border: none;
}

.nwc-button--primary:hover {
	background-color: var(--nwc-gold-deep);
	/* color explicite nécessaire : la règle générique a:hover (base.css) pose
	   color:var(--nwc-gold-deep) avec une spécificité supérieure à l'état de
	   repos .nwc-button--primary (color:var(--nwc-ink)) — sans ce rappel, le
	   texte devient de la même couleur que le fond au survol et disparaît. */
	color: var(--nwc-ink);
	transform: translateY(-1px);
	box-shadow: var(--nwc-shadow-md);
}

/* Demande Jordan (25/10/2026, capture "Lire notre confession de foi") : même
   traitement que .nwc-upcoming-card__cta.nwc-button--primary (home-story.css,
   "En savoir plus") plutôt que fond transparent + bordure fine — fond
   --nwc-paper plein (blanc cassé du site, jamais #fff pur), texte en
   --nwc-ink. Choix de --nwc-ink repris tel quel de ce précédent : sur
   --nwc-paper (oklch 99%), --nwc-gold-deep (oklch 58%) retombe à ~3:1, sous
   le seuil AA texte pour un bouton 16px/600 ; --nwc-ink (oklch 23%) donne un
   contraste AAA tout en restant cohérent avec le cercle ink/icône crème déjà
   en place (cf. règle .nwc-button--primary/--ghost .nwc-button__arrow plus
   bas). Bordure conservée (même rôle que sur "En savoir plus" : détacher le
   bouton d'un fond de section crème très proche de --nwc-paper). Applique à
   TOUS les boutons ghost du site (header, "Voir tous les messages", "Lire
   notre confession de foi", "Nous contacter" pastoral, etc.), pas seulement
   celui déjà corrigé aujourd'hui. */
.nwc-button--ghost {
	background-color: var(--nwc-paper);
	color: var(--nwc-ink);
	border: 1.5px solid var(--nwc-mist-deep);
}

.nwc-button--ghost:hover {
	background-color: var(--nwc-cream);
	border-color: var(--nwc-gold-deep);
	color: var(--nwc-ink);
}

/* Bouton "Faire un don" — toujours visible, jamais relégué (cf. references.md, leçon Elevation Church) */
.nwc-button--give {
	background-color: var(--nwc-ember);
	color: var(--nwc-paper);
}

.nwc-button--give:hover {
	background-color: var(--nwc-ember-deep);
	/* Même bug que .nwc-button--primary:hover (voir commentaire ci-dessus) :
	   sans color explicite ici, a:hover (base.css) impose color:var(--nwc-gold-deep),
	   ce qui casse le contraste texte clair / fond sombre voulu pour ce bouton. */
	color: var(--nwc-paper);
	transform: translateY(-1px);
}

/*
 * Motif cercle+flèche "ButtonWithIcon" (demande Jordan 25/10/2026) généralisé
 * à TOUS les boutons .nwc-button de contenu (pas seulement le hero et le CTA
 * du header, cf. .nwc-hero__cta-primary dans hero-liquidglass.css et
 * .nwc-masthead__pill-cta dans header.css, qui restent des pilules à part —
 * marquage et tailles différents, volontairement non fusionnés ici).
 *
 * Factorisation : la mécanique (position, glissement, rotation) vit UNE
 * SEULE FOIS ici, scopée via :has(> .nwc-button__arrow) pour ne s'appliquer
 * qu'aux boutons qui portent effectivement le span flèche dans leur markup —
 * les autres usages existants de .nwc-button--primary/--ghost/--give
 * ailleurs sur le site (pages 557, 880, 1815 notamment) n'ont pas ce span et
 * restent donc visuellement inchangés, aucune régression sitewide. Seules
 * les couleurs du cercle (contraste clair/sombre selon le fond de section)
 * varient par variante ci-dessous.
 */
.nwc-button:has(> .nwc-button__arrow) {
	position: relative;
	display: inline-flex;
	align-items: center;
	/* padding-right au repos réserve la place du cercle (position absolue,
	   hors flux) — même piège déjà documenté sur .nwc-hero__cta-primary. */
	padding-right: calc(1.6em + 2.1rem) !important;
	transition: background-color var(--nwc-duration-fast) var(--nwc-ease),
		border-color var(--nwc-duration-fast) var(--nwc-ease),
		padding var(--nwc-duration-base) var(--nwc-ease);
}

.nwc-button:has(> .nwc-button__arrow):hover {
	padding-left: calc(1.6em + 2.1rem) !important;
	padding-right: 1.6em !important;
}

.nwc-button__arrow {
	position: absolute;
	top: 50%;
	left: calc(100% - 2.1rem - 0.4rem);
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	transform: translateY(-50%);
	transition: left var(--nwc-duration-base) var(--nwc-ease);
}

.nwc-button:has(> .nwc-button__arrow):hover > .nwc-button__arrow {
	left: 0.4rem;
}

.nwc-button__arrow svg {
	width: 0.85rem;
	height: 0.85rem;
	transition: transform var(--nwc-duration-base) var(--nwc-ease);
}

.nwc-button:has(> .nwc-button__arrow):hover > .nwc-button__arrow svg {
	transform: rotate(45deg);
}

/* Le texte reste au-dessus du cercle pendant le glissement. */
.nwc-button:has(> .nwc-button__arrow) > span:not(.nwc-button__arrow) {
	position: relative;
	z-index: 1;
}

/* Couleurs par défaut du cercle : encre foncée + icône claire, pensées pour
   un bouton (plein doré ou ghost transparent) posé sur un fond de section
   clair (crème) — cas de "En savoir plus" (carte "À venir") et "Voir tous
   les messages"/"Lire notre confession de foi" (sections claires). */
.nwc-button--primary .nwc-button__arrow,
.nwc-button--ghost .nwc-button__arrow {
	background: var(--nwc-ink);
	color: var(--nwc-cream);
}

/* Variante fond sombre (ex. bouton "Nous contacter" de la section couple
   pastoral, fond var(--nwc-ink-soft) — voir .nwc-home-pastoral dans
   home-story.css) : cercle clair + icône foncée, pour rester visible sur un
   fond déjà sombre — même inversion que .nwc-hero__cta-primary-arrow. */
.nwc-button--on-dark .nwc-button__arrow {
	background: var(--nwc-cream);
	color: var(--nwc-ink);
}

/* Demande Jordan (25/10/2026) : .nwc-button--ghost a désormais toujours un
   fond --nwc-paper plein (voir ci-dessus), même quand il est posé sur une
   section sombre (ex. "Nous contacter" dans .nwc-home-pastoral) et porte donc
   encore la classe --on-dark héritée de l'ancien style transparent. Le cercle
   doit rester cohérent avec le fond CLAIR du bouton lui-même, pas avec le
   fond de la section : on retombe ici sur la même paire ink/crème que les
   autres boutons ghost clairs, avec une spécificité plus forte (3 classes)
   que .nwc-button--on-dark .nwc-button__arrow ci-dessus pour la neutraliser
   uniquement dans ce cas combiné. */
.nwc-button--ghost.nwc-button--on-dark .nwc-button__arrow {
	background: var(--nwc-ink);
	color: var(--nwc-cream);
}

/* ---------------------------------------------------------------------------
 * 2. En-tête / navigation
 * Transparent sur le hero, bascule en fond plein au scroll — geste VOUS Church
 * retenu dans references.md, implémenté en CSS pur + une classe togglée en JS.
 * ------------------------------------------------------------------------- */
.nwc-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 100;
	height: var(--nwc-header-height);
	display: flex;
	align-items: center;
	background-color: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color var(--nwc-duration-base) var(--nwc-ease),
		border-color var(--nwc-duration-base) var(--nwc-ease),
		box-shadow var(--nwc-duration-base) var(--nwc-ease);
}

.nwc-header.is-scrolled {
	background-color: var(--nwc-paper);
	border-bottom-color: var(--nwc-mist);
	box-shadow: var(--nwc-shadow-sm);
}

/* Tant qu'aucun hero sombre n'est détecté (page sans .nwc-hero--dark), le header
   reste lisible dès le chargement : évite un header invisible sur une page de contenu simple. */
.nwc-header:not(.is-scrolled):not(.on-dark-hero) {
	background-color: var(--nwc-paper);
	border-bottom-color: var(--nwc-mist);
}

.nwc-header.on-dark-hero:not(.is-scrolled) {
	background-color: transparent;
	border-bottom-color: transparent;
}

.nwc-header.on-dark-hero:not(.is-scrolled) .nwc-nav-link,
.nwc-header.on-dark-hero:not(.is-scrolled) .nwc-logo {
	color: var(--nwc-paper);
}

.nwc-nav-link {
	font-family: var(--nwc-font-body);
	font-weight: 500;
	color: var(--nwc-ink);
	padding: var(--nwc-space-2) var(--nwc-space-3);
	transition: color var(--nwc-duration-fast) var(--nwc-ease);
}

.nwc-nav-link:hover {
	color: var(--nwc-gold-deep);
}

/* Menu mobile plein écran (panneau), cf. ux/specifications.md section 1 */
.nwc-mobile-panel {
	position: fixed;
	inset: 0;
	z-index: 99;
	background-color: var(--nwc-paper);
	display: flex;
	flex-direction: column;
	padding: var(--nwc-space-8) var(--nwc-space-5);
	transform: translateY(-8px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--nwc-duration-base) var(--nwc-ease),
		transform var(--nwc-duration-base) var(--nwc-ease),
		visibility 0s;
}

.nwc-mobile-panel.is-open {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
	pointer-events: auto;
}

/* ---------------------------------------------------------------------------
 * 3. Grille asymétrique (ministères, groupes…) — jamais la grille Bootstrap
 * 3 colonnes identiques citée comme piège générique dans references.md.
 * Variante de taille par position plutôt qu'une carte répétée à l'identique.
 * ------------------------------------------------------------------------- */
.nwc-asymmetric-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--nwc-space-6);
}

.nwc-asymmetric-grid > :nth-child(1) { grid-column: span 6; }
.nwc-asymmetric-grid > :nth-child(2) { grid-column: span 6; }

@media (min-width: 768px) {
	.nwc-asymmetric-grid > :nth-child(1) { grid-column: span 4; }
	.nwc-asymmetric-grid > :nth-child(2) { grid-column: span 2; }
	.nwc-asymmetric-grid > :nth-child(3) { grid-column: span 3; }
	.nwc-asymmetric-grid > :nth-child(4) { grid-column: span 3; }
}

@media (min-width: 1200px) {
	.nwc-asymmetric-grid > :nth-child(3) { grid-column: span 2; }
	.nwc-asymmetric-grid > :nth-child(4) { grid-column: span 4; }
}

.nwc-card {
	background-color: var(--nwc-paper);
	border: 1px solid var(--nwc-mist);
	border-radius: var(--nwc-radius-lg);
	padding: var(--nwc-space-6);
	transition: transform var(--nwc-duration-base) var(--nwc-ease),
		box-shadow var(--nwc-duration-base) var(--nwc-ease);
}

.nwc-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--nwc-shadow-md);
}

/* ---------------------------------------------------------------------------
 * 4. Formulaires — champs sans "bordure de formulaire" générique (wordpress_contraintes.md),
 * libellé toujours visible au-dessus (jamais un placeholder seul, ux/specifications.md section 11)
 * ------------------------------------------------------------------------- */
.nwc-field {
	display: flex;
	flex-direction: column;
	gap: var(--nwc-space-2);
	margin-bottom: var(--nwc-space-5);
}

.nwc-field label {
	font-family: var(--nwc-font-body);
	font-weight: 600;
	font-size: var(--nwc-text-small);
	color: var(--nwc-ink);
}

.nwc-field input,
.nwc-field textarea,
.nwc-field select {
	font-family: var(--nwc-font-body);
	font-size: var(--nwc-text-body);
	padding: var(--nwc-space-3) var(--nwc-space-4);
	border: 1.5px solid var(--nwc-mist-deep);
	border-radius: var(--nwc-radius-sm);
	background-color: var(--nwc-paper);
	color: var(--nwc-ink);
	transition: border-color var(--nwc-duration-fast) var(--nwc-ease);
	min-height: 44px; /* cible tactile, ux/specifications.md */
}

.nwc-field input:focus,
.nwc-field textarea:focus,
.nwc-field select:focus {
	border-color: var(--nwc-gold-deep);
}

.nwc-field.has-error input,
.nwc-field.has-error textarea {
	border-color: var(--nwc-ember);
}

.nwc-field-error {
	font-size: var(--nwc-text-small);
	color: var(--nwc-ember);
}

/* État "chargement" bouton de formulaire — jamais de double-soumission possible */
.nwc-button[data-state="loading"] {
	opacity: 0.7;
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * 5. Pied de page — stable, jamais animé (élément utilitaire, cf. specs §2)
 * ------------------------------------------------------------------------- */
.nwc-footer {
	background-color: var(--nwc-ink);
	color: var(--nwc-mist);
	padding-block: var(--nwc-space-9);
}

.nwc-footer a {
	color: var(--nwc-paper);
	text-decoration-color: var(--nwc-gold);
}

.nwc-footer-grid {
	display: grid;
	gap: var(--nwc-space-6);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.nwc-footer-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1200px) {
	.nwc-footer-grid { grid-template-columns: repeat(4, 1fr); }
}