/* ==========================================================================
   baair.solutions — habillage des sections de l'accueil
   Chargée uniquement sur la page d'accueil (voir functions.php).
   Spécification : design_handoff_baair_solutions/README.md §5.1
   ========================================================================== */

/* --------------------------------------------------------------------------
   a) En-tête éditorial
   -------------------------------------------------------------------------- */

.baair-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(52px, 6.5vw, 104px);
  line-height: 0.93;
  letter-spacing: -0.04em;
  margin: 24px 0 28px;
  max-width: 20ch;
}

.baair-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

/* --------------------------------------------------------------------------
   Titres de section — le fragment italique est la signature du système
   -------------------------------------------------------------------------- */

.baair-section__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 3.6vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 16px 0 0;
  max-width: 24ch;
}

.baair-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* Filet de sécurité sur l'échelle typographique — pour les titres SANS classe
   dédiée (ceux que produit l'éditeur). Le `:not()` est indispensable : sinon
   `.baair-main h2` (0,1,1) écrase `.baair-section__title` (0,1,0) et tous les
   grands titres retombent en Instrument Serif italique, sans graisse.
   Régression constatée le 2026-07-30 — ne pas retirer le :not(). */
.baair-main h1:not([class*="baair-"]),
.baair-main .wp-block-post-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 4.2vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.baair-main h2:not([class*="baair-"]) {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.baair-main h3:not([class*="baair-"]) {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 1.9vw, 26px);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

/* --------------------------------------------------------------------------
   Les titres à forte présence — Fraunces 700 contre Instrument Serif italique.
   C'est ce contraste de graisse qui fait l'impact du système ; il doit gagner
   sur le filet de sécurité ci-dessus, d'où le préfixe .baair-main (0,2,0).
   -------------------------------------------------------------------------- */

.baair-main .baair-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(52px, 6.5vw, 104px);
  line-height: 0.93;
  letter-spacing: -0.04em;
}

.baair-main .baair-section__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(38px, 4.4vw, 68px);
  line-height: 1.0;
  letter-spacing: -0.038em;
}

.baair-main .baair-final__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(42px, 5.6vw, 92px);
  line-height: 0.96;
  letter-spacing: -0.042em;
}

.baair-main .baair-contact__title,
.baair-main .baair-page__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
}

/* Le fragment italique reste léger : c'est lui qui crée le contraste. */
.baair-main .baair-italic {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.015em;
}

/* « Le journal » en tête de section : petit label italique assumé, pas un
   titre écrasé. On lui donne son échelle propre. */
.baair-section__head h2 {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Les titres de cartes d'article : plus contenus que les titres de section. */
.baair-rule-grid .wp-block-post-title {
  font-size: clamp(20px, 1.6vw, 23px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

/* Le titre « à la une » du magazine */
.baair-featured__text .wp-block-post-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.04;
}

/* --------------------------------------------------------------------------
   c) Bandeau de preuve
   -------------------------------------------------------------------------- */

.baair-proof__grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: baseline;
}

.baair-proof__names {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
}

/* Pas de séparateurs typographiques : ils s'orphelinent au retour à la ligne. */
.baair-proof__names span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

@media (max-width: 780px) {
  .baair-proof__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   d) et e) Cartes
   -------------------------------------------------------------------------- */

.baair-cards { margin-top: 40px; }

.baair-card {
  display: flex;
  flex-direction: column;
  min-height: 280px;
}

.baair-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--meta);
  margin: 0 0 24px;
}

.baair-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
}

.baair-card p:not(.baair-card__meta) {
  font-size: 15px;
  line-height: 1.55;
  color: #3D3D38;
  margin: 0;
}

/* Le CTA est poussé en bas : toutes les cartes s'alignent. */
.baair-card__cta {
  margin-top: auto;
  padding-top: 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  text-decoration: none;
}

.baair-card__cta:hover { color: var(--purple); }

/* La carte sur fond os, et la carte sombre qui porte l'accent. */
.baair-rule-grid > .baair-card--bone { background: var(--bone); }

.baair-rule-grid > .baair-card--ink { background: var(--ink); }
.baair-card--ink,
.baair-card--ink h3 { color: var(--ink-paper); }
.baair-card--ink .baair-card__meta { color: var(--meta-dark); }
.baair-card--ink p:not(.baair-card__meta) { color: var(--meta-dark); }
.baair-card--ink .baair-card__cta { color: var(--ink-paper); }
.baair-card--ink .baair-card__cta:hover { color: var(--purple); }

/* --------------------------------------------------------------------------
   f) Bandeau promptmarket
   -------------------------------------------------------------------------- */

.baair-band { padding-block: 44px; }

.baair-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.baair-band__text {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.baair-band__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.baair-band__phrase {
  font-size: 15px;
  color: #3D3D38;
}

/* --------------------------------------------------------------------------
   h) Lead magnet
   -------------------------------------------------------------------------- */

.baair-magnet__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
}

.baair-magnet .baair-section__title { margin-top: 12px; }
.baair-magnet .baair-lead { margin-top: 18px; }

@media (max-width: 900px) {
  .baair-magnet__inner { grid-template-columns: 1fr; gap: 32px; }
}

/* --------------------------------------------------------------------------
   i) CTA final
   -------------------------------------------------------------------------- */

.baair-final {
  border-bottom: 2px solid var(--ink);
}

.baair-final__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5.5vw, 88px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  margin: 0 0 36px;
  max-width: 26ch;
}

/* --------------------------------------------------------------------------
   Newsletter — cadre du formulaire systeme.io embarqué
   -------------------------------------------------------------------------- */

/* Le bloc reste sur le fond de son contexte (noir dans le pied de page) :
   seule la zone d'inscription porte le violet. */
.baair-newsletter {
  background: transparent;
  padding: 0;
}

.baair-newsletter h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--meta-dark);
  margin: 0 0 10px;
}

.baair-section--dark .baair-newsletter p,
.baair-footer .baair-newsletter p {
  color: var(--ink-paper);
}

/* La zone d'inscription ne porte plus d'aplat : le formulaire systeme.io est
   lui-même réglé en noir d'encre (#0A0A0A), et le seul violet du bloc est
   son bouton. Un cadre violet ici redoublait la couleur et se voyait comme
   un contour rapporté — supprimé le 2026-08-01 à la demande d'Alexandre. */
.baair-newsletter__embed {
  margin-top: 18px;
  background: transparent;
  padding: 0;
}

/* ⚠️ Une iframe cross-origin ne se mesure pas : le navigateur ne peut pas
   lire la hauteur de son contenu. La hauteur ci-dessous n'est donc qu'un
   REPLI, utilisé tant que le script d'ajustement n'a pas parlé.

   La page systeme.io poste sa hauteur réelle au parent (`postMessage`, au
   chargement et à chaque `form_updated`) : le pattern écoute ce message et
   pose la hauteur exacte en style en ligne. Voir patterns/newsletter.php.
   C'est ce qui règle définitivement le piège de la hauteur en dur — y
   compris quand le formulaire grandit après envoi (message de confirmation).

   Le formulaire systeme.io a été réduit le 2026-07-30 (via le connecteur,
   pageId 34039625) à son champ et son bouton : le titre et le paragraphe
   étaient redondants avec le bloc qui l'entoure. Il est réglé en noir
   d'encre #0A0A0A, bouton violet, angles droits — le raccord est invisible
   sur fond sombre. */
.baair-newsletter__embed iframe {
  display: block;
  width: 100%;
  height: 190px;
  border: 0;
  background: transparent;
}

/* La colonne du pied de page est étroite : le bouton passe sous le champ. */
.baair-footer .baair-newsletter__embed iframe { height: 230px; }

@media (max-width: 900px) {
  .baair-newsletter__embed iframe,
  .baair-footer .baair-newsletter__embed iframe { height: 240px; }
}

/* --------------------------------------------------------------------------
   Aimant à prospects — « Le guide IA du dirigeant »

   Deuxième formulaire systeme.io, distinct de celui de la lettre. Il poste
   en direct sur systeme.io : pas d'iframe, donc pas de hauteur à mesurer,
   pas de point de rupture appliqué à la largeur d'un cadre, et l'habillage
   se fait ici plutôt qu'à la main dans l'éditeur systeme.io.
   Voir patterns/lead-magnet.php.
   -------------------------------------------------------------------------- */

.baair-leadmagnet { margin-top: 32px; }

.baair-leadmagnet__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--meta);
  margin: 0 0 14px;
}

/* Aucune media query : `flex-wrap` répond à la largeur RÉELLEMENT disponible.
   Le champ se replie donc tout seul dans une colonne de 245 px comme dans une
   section pleine largeur — c'est ce qui remplace le point de rupture que
   l'iframe de la lettre appliquait, lui, à sa propre largeur. */
.baair-leadmagnet__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}

/* Le libellé reste pour les lecteurs d'écran : le placeholder n'en est pas un. */
.baair-leadmagnet__srlabel {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 16 px : sous ce seuil, Safari iOS zoome à la mise au point du champ. */
.baair-leadmagnet__field {
  flex: 1 1 200px;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 22px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 10px 0;
  transition: border-color var(--dur-fast) ease;
  -webkit-appearance: none;
  appearance: none;
}

.baair-leadmagnet__field::placeholder { color: var(--meta); opacity: 1; }

.baair-leadmagnet__field:focus {
  outline: none;
  border-color: var(--ink);
}

.baair-leadmagnet__submit {
  flex: 0 0 auto;
  cursor: pointer;
}

.baair-leadmagnet__note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--meta);
  margin: 16px 0 0;
  max-width: 46ch;
}

.baair-leadmagnet__note a { color: inherit; text-decoration: underline; }

/* Sur fond sombre : le champ et sa note passent en clair. Le bouton, lui,
   deviendrait invisible en noir sur noir — il prend le violet de la marque,
   et l'encre au survol. */
.baair-section--dark .baair-leadmagnet__label,
.baair-footer .baair-leadmagnet__label { color: var(--meta-dark); }

.baair-section--dark .baair-leadmagnet__field,
.baair-footer .baair-leadmagnet__field {
  color: var(--ink-paper);
  border-bottom-color: rgba(255, 255, 255, 0.28);
}

.baair-section--dark .baair-leadmagnet__field::placeholder,
.baair-footer .baair-leadmagnet__field::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.baair-section--dark .baair-leadmagnet__field:focus,
.baair-footer .baair-leadmagnet__field:focus { border-bottom-color: var(--ink-paper); }

.baair-section--dark .baair-leadmagnet__note,
.baair-footer .baair-leadmagnet__note { color: var(--meta-dark); }

.baair-section--dark .baair-leadmagnet__submit,
.baair-footer .baair-leadmagnet__submit {
  background: var(--purple);
  border-color: var(--purple);
  color: var(--paper);
}

.baair-section--dark .baair-leadmagnet__submit:hover,
.baair-section--dark .baair-leadmagnet__submit:focus-visible,
.baair-footer .baair-leadmagnet__submit:hover,
.baair-footer .baair-leadmagnet__submit:focus-visible {
  background: var(--ink-paper);
  border-color: var(--ink-paper);
  color: var(--ink);
}