/* La capture d'email dans les articles — l'encart et la fenêtre.
   Code : inc/capture.php · comportement : assets/js/app.js (initCapture)

   Deux objets distincts, une seule feuille parce qu'ils font un seul métier :
     1. l'ENCART posé dans le corps de l'article (un bloc réutilisable, donc
        des blocs de cœur WordPress : `wp-block-group` + `wp-block-button`) ;
     2. la FENÊTRE qui s'ouvre au clic, rendue par le thème.

   ⚠ Pourquoi l'encart se répare ici et pas dans le contenu. Ces blocs sont
   posés 113 fois dans 176 articles. Les habiller en CSS, c'est une correction ;
   les réécrire, c'est 113 modifications qui ne seront jamais toutes faites. */

/* --- 1. L'encart ----------------------------------------------------------- */

/* ⚠ ARITHMÉTIQUE DE SPÉCIFICITÉ — la seule raison des `!important` ici.
   WordPress imprime ses couleurs de palette avec `!important` :
       .has-cyan-bluish-gray-background-color { background-color: … !important }
   Une classe, mais importante. Pour la défaire il faut être importante AUSSI,
   et compter plus de classes : `.pt-prose .wp-block-group.has-background` en
   fait trois. C'est le motif déjà rencontré avec LearnDash et WooCommerce —
   on ne surenchérit pas au hasard, on compte l'adversaire d'abord.

   Mesuré avant d'écrire : sur 176 articles publiés, un seul pose un groupe
   avec fond ailleurs que dans ces encarts, et cinq posent un bouton. La règle
   large ne fait donc pas de dégâts collatéraux. */
.pt-prose .wp-block-group.has-background {
	margin: 40px 0;
	padding: var(--pt-card-pad) !important;
	border-left: 2px solid var(--pt-primary);
	background-color: var(--pt-primary-ul) !important;
	color: var(--pt-ink-body);
}

.pt-prose .wp-block-group.has-background p {
	font-family: var(--pt-font-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--pt-ink-body);
}

.pt-prose .wp-block-group.has-background p:last-of-type {
	margin-bottom: 0;
}

.pt-prose .wp-block-group.has-background strong {
	color: var(--pt-ink);
}

/* Les boutons de cœur : WordPress les dessine en gélule (`border-radius:
   9999px`). Le site n'a aucun coin arrondi, nulle part — c'est écrit dans les
   jetons (`--pt-radius: 0`). */
.pt-prose .wp-block-buttons {
	margin-top: 22px;
	margin-bottom: 0;
}

/* Toute la surface du bloc bouton est cliquable — c'est elle qui porte la
   classe de déclenchement, et c'est elle que le lecteur vise. */
.pt-prose .wp-block-button[class*="popup-"] {
	cursor: pointer;
}

.pt-prose .wp-block-button__link {
	display: inline-block;
	padding: 14px 22px !important;
	border: 0;
	border-radius: var(--pt-radius) !important;
	background-color: var(--pt-primary) !important;
	color: #fff !important;
	font-family: var(--pt-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--pt-transition-button), transform var(--pt-transition-button);
}

.pt-prose .wp-block-button__link:hover {
	background-color: var(--pt-primary-hover) !important;
	color: #fff !important;
	transform: translateY(-1px);
}

/* ⚠ Le lien d'un bouton de cœur est un `<a>` : `.pt-prose a` lui pose un
   soulignement par BORDURE. `text-decoration: none` ne l'enlève pas — il faut
   défaire chaque propriété que la règle adverse a posée. */
.pt-prose .wp-block-button__link {
	border-bottom: 0 !important;
}

/* --- 2. La fenêtre --------------------------------------------------------- */

dialog.pt-capture {
	width: min(520px, calc(100vw - 36px));
	max-width: none;
	max-height: calc(100vh - 48px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var(--pt-radius);
	background: transparent;
	overflow: visible;
}

dialog.pt-capture::backdrop {
	background: rgba(6, 21, 31, 0.72);
}

.pt-capture__boite {
	position: relative;
	max-height: calc(100vh - 48px);
	padding: 34px var(--pt-card-pad) 26px;
	border: 1px solid var(--pt-line-strong);
	background: var(--pt-cream);
	box-shadow: var(--pt-shadow-float);
	overflow-y: auto;
}

.pt-capture__fermer {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--pt-ink-soft);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: color var(--pt-transition-button);
}

.pt-capture__fermer:hover {
	color: var(--pt-ink);
}

.pt-capture__titre {
	margin: 10px 0 10px;
	font-family: var(--pt-font-title);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--pt-ink);
}

.pt-capture__chapo {
	margin: 0 0 22px;
	font-family: var(--pt-font-body);
	font-size: 15px;
	line-height: 1.7;
	color: var(--pt-ink-soft);
}

.pt-capture__note {
	margin: 16px 0 0;
	font-family: var(--pt-font-body);
	font-size: 12px;
	line-height: 1.5;
	color: var(--pt-ink-muted);
}

/* --- 3. Le formulaire dans la fenêtre -------------------------------------- */

/* Fluent Forms vise ses champs par une seule classe : trois classes de notre
   côté suffisent, sans `!important`. Si un jour un champ résiste, compter
   les siennes avant d'ajouter du poids. */
.pt-capture .fluentform .ff-el-input--label label {
	font-family: var(--pt-font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--pt-ink-soft);
}

.pt-capture .fluentform .ff-el-form-control {
	padding: 13px 14px;
	border: 1px solid var(--pt-line-strong);
	border-radius: var(--pt-radius);
	background: #fff;
	font-family: var(--pt-font-body);
	font-size: 15px;
	color: var(--pt-ink);
	box-shadow: none;
}

.pt-capture .fluentform .ff-el-form-control:focus {
	border-color: var(--pt-primary);
	outline: 2px solid rgba(80, 114, 73, 0.25);
	outline-offset: 1px;
}

/* ⚠ COMPTER L'ADVERSAIRE AVANT D'ÉCRIRE — mesuré, pas supposé.
   Fluent Forms imprime pour CHAQUE formulaire un style sur mesure, dans un
   <style> du corps de page :
       form.fluent_form_6 .wpf_has_custom_css.ff-btn-submit { background: … }
   soit trois classes ET un élément — (0,3,1). Notre première règle en avait
   trois classes et aucun élément — (0,3,0) : à classes égales, c'est le nombre
   d'ÉLÉMENTS qui départage, et le bouton d'envoi sortait en bleu vif au milieu
   d'une fenêtre crème. On ajoute une quatrième classe (`.ff-btn`, que Fluent
   Forms pose lui-même) : (0,4,0) passe devant (0,3,1) sans un seul
   `!important`. */
.pt-capture .fluentform .ff-btn-submit.ff-btn {
	width: 100%;
	padding: 15px 22px;
	border: 0;
	border-radius: var(--pt-radius);
	background: var(--pt-primary);
	color: #fff;
	font-family: var(--pt-font-body);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--pt-transition-button);
}

.pt-capture .fluentform .ff-btn-submit.ff-btn:hover {
	background: var(--pt-primary-hover);
	color: #fff;
}

/* Le message de confirmation — « c'est envoyé, vérifiez votre boîte mail ».
   C'est le dernier écran que voit quelqu'un qui vient de donner son adresse :
   il mérite de ressembler au site. */
.pt-capture .ff-message-success,
.pt-capture .ff_submit_success {
	padding: 16px 18px;
	border-left: 2px solid var(--pt-primary);
	background: var(--pt-primary-ul);
	font-family: var(--pt-font-body);
	font-size: 15px;
	line-height: 1.65;
	color: var(--pt-ink-body);
}

/* --- Téléphone ------------------------------------------------------------- */

@media (max-width: 767px) {
	.pt-capture__boite {
		padding: 30px 18px 22px;
	}

	.pt-capture__titre {
		font-size: 24px;
	}
}

/* --- À l'impression -------------------------------------------------------- */

@media print {
	dialog.pt-capture {
		display: none !important;
	}
}