/**
 * Compat WordPress 6.x + plugins tiers
 *
 * - Layout flex pour les wp-block-columns (le markup a changé en 6.1+ :
 *   anciennes classes wp-container-N → nouvelles is-layout-flex). Le thème n'a
 *   pas de theme.json, donc on assure le layout flex à la main pour les deux
 *   versions du markup.
 * - Pleine largeur pour les éléments des Ninja Forms.
 */

/* ============================================================
   wp-block-columns : layout flex
   ============================================================
   Note : WP core injecte `flex-wrap: nowrap !important` à partir de 782px,
   donc on doit utiliser !important pour forcer le wrap. */
.wp-block-columns {
	display: flex;
	flex-wrap: wrap !important;
	gap: 2em;
}

.wp-block-column {
	flex: 1;
	min-width: 0;
}

/* Compensation du gap pour les flex-basis classiques générés par Gutenberg.
   Sans cette compensation, 2 colonnes à 50% + gap 2em = 100% + 32px → wrap.
   On soustrait la part de gap proportionnelle à chaque colonne. */

/* 2 colonnes 50% : sub 1em (= 2em gap / 2) */
.wp-block-column[style*="flex-basis:50%"],
.wp-block-column[style*="flex-basis: 50%"] {
	flex-basis: calc(50% - 1em) !important;
}

/* 3 colonnes 33.33% : sub 1.333em (= 2 gaps × 2em / 3) */
.wp-block-column[style*="flex-basis:33.33%"],
.wp-block-column[style*="flex-basis: 33.33%"],
.wp-block-column[style*="flex-basis:33%"] {
	flex-basis: calc(33.333% - 1.333em) !important;
}

/* 4 colonnes 25% : sub 1.5em (= 3 gaps × 2em / 4) */
.wp-block-column[style*="flex-basis:25%"],
.wp-block-column[style*="flex-basis: 25%"] {
	flex-basis: calc(25% - 1.5em) !important;
}

/* Layouts asymétriques à 2 colonnes (1 seul gap entre elles) : chaque colonne sub 1em */
.wp-block-column[style*="flex-basis:20%"],
.wp-block-column[style*="flex-basis: 20%"] {
	flex-basis: calc(20% - 1em) !important;
}
.wp-block-column[style*="flex-basis:30%"],
.wp-block-column[style*="flex-basis: 30%"] {
	flex-basis: calc(30% - 1em) !important;
}
.wp-block-column[style*="flex-basis:40%"],
.wp-block-column[style*="flex-basis: 40%"] {
	flex-basis: calc(40% - 1em) !important;
}
.wp-block-column[style*="flex-basis:60%"],
.wp-block-column[style*="flex-basis: 60%"] {
	flex-basis: calc(60% - 1em) !important;
}
.wp-block-column[style*="flex-basis:66.66%"],
.wp-block-column[style*="flex-basis:66.67%"],
.wp-block-column[style*="flex-basis: 66.66%"] {
	flex-basis: calc(66.666% - 1em) !important;
}
.wp-block-column[style*="flex-basis:70%"],
.wp-block-column[style*="flex-basis: 70%"] {
	flex-basis: calc(70% - 1em) !important;
}
.wp-block-column[style*="flex-basis:75%"],
.wp-block-column[style*="flex-basis: 75%"] {
	flex-basis: calc(75% - 1em) !important;
}
.wp-block-column[style*="flex-basis:80%"],
.wp-block-column[style*="flex-basis: 80%"] {
	flex-basis: calc(80% - 1em) !important;
}

@media (max-width: 781px) {
	.wp-block-columns {
		flex-direction: column;
	}
	.wp-block-column {
		flex-basis: 100% !important;
	}
}


/* ============================================================
   Ninja Forms : éléments en pleine largeur
   ============================================================ */
.nf-form-cont,
.nf-form-content,
.nf-field,
.nf-field-element {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.nf-field-element input[type="text"],
.nf-field-element input[type="email"],
.nf-field-element input[type="tel"],
.nf-field-element input[type="number"],
.nf-field-element input[type="url"],
.nf-field-element input[type="password"],
.nf-field-element input[type="search"],
.nf-field-element input[type="date"],
.nf-field-element select,
.nf-field-element textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Textarea : hauteur par défaut = celle d'un input (1 ligne), peu pratique pour
   un message. On force une min-height confortable et un resize vertical. */
.nf-field-element textarea {
	min-height: 140px;
	resize: vertical;
}

/* Ninja Forms champ HR (séparateur visuel) : le label par défaut "hr" s'affiche
   au-dessus du trait. On le masque, le séparateur parle de lui-même. */
.hr-container .nf-field-label {
	display: none;
}

/* Ninja Forms : le <span> dans les labels (symbole "requis", texte additionnel
   injecté par le plugin) est masqué. */
.nf-field-label span {
	display: none;
}

/* Ninja Forms honeypot anti-spam : champ caché aux humains, visible aux bots.
   Sans ce masquage le label "Si vous êtes un être humain..." apparaît à l'écran. */
.nf-form-hp {
	position: absolute !important;
	left: -10000px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* Ninja Forms : layout en colonnes (nf-cells contient des nf-cell avec width inline).
   Les custom elements <nf-cells>, <nf-fields>, <nf-field> sont inline par défaut,
   donc le width:50% des cellules ne s'appliquait pas et tout empilait verticalement. */
nf-cells {
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
}

nf-fields,
nf-field {
	display: block;
}

.nf-cell {
	box-sizing: border-box;
}

/* Compensation du gap (même logique que wp-block-column). Sans ça, 2 cellules à
   50% + gap 2em = 100% + 32px → la 2e cellule wrap sous la 1re. */
.nf-cell[style*="width: 50%"],
.nf-cell[style*="width:50%"] {
	width: calc(50% - 1em) !important;
}
.nf-cell[style*="width: 33.33%"],
.nf-cell[style*="width:33.33%"],
.nf-cell[style*="width: 33%"],
.nf-cell[style*="width:33%"] {
	width: calc(33.333% - 1.333em) !important;
}
.nf-cell[style*="width: 25%"],
.nf-cell[style*="width:25%"] {
	width: calc(25% - 1.5em) !important;
}

@media (max-width: 767px) {
	/* Spécificité au moins égale aux .nf-cell[style*="width:..."] ci-dessus
	   pour gagner la cascade avec !important. */
	.nf-cell[style*="width"] {
		width: 100% !important;
	}
}


/* ============================================================
   Fiches métiers : contact aligné à droite (single contact card)
   ============================================================
   Le défunt bloc ACF "contact" a un CSS où chaque card prend 50% en row.
   Avec UN seul contact, il reste collé à gauche. Sur fiches-métiers on
   préfère l'alignement à droite. */
.page-template-template-fiches-metiers .contacts-container .contacts-wrapper .contacts-inner {
	justify-content: flex-end;
}


/* ============================================================
   Boutons : pleine largeur en mobile
   ============================================================
   Le thème pose width: 220px sur tous les .btn en mobile, ce qui crée des
   boutons étroits centrés et peu engageants au tap. UX moderne préfère
   des CTA pleine largeur sur petit écran.
   On override sur tout le site en dessous du breakpoint thème (768px). */
@media (max-width: 767px) {
	.btn,
	.btn-jaune,
	.btn-jaune-to-blanc,
	.btn-blanc,
	.btn-cta-orange-large,
	.btn-transparent,
	.nf-form-content .nf-field-container .nf-field-element input[type="button"] {
		width: 100%;
	}
}