/*
Theme Name: baair.solutions
Theme URI: https://baair.solutions
Author: Alexandre Bruneau
Description: Thème bloc sur mesure pour baair.solutions. Noir, blanc, et un carré violet. Design system porté par theme.json ; aucune dépendance à un constructeur de pages.
Version: 0.14.6
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: baair
Tags: block-theme, full-site-editing, editorial, woocommerce
*/

/* ==========================================================================
   Les tokens (couleurs, polices, échelles, espacements) vivent dans theme.json
   et sont exposés en variables --wp--preset--*. Ce fichier ne contient que
   ce que theme.json ne sait pas exprimer : le reset de forme, les procédés
   de filets, et les utilitaires du système.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fondations de boîte et de forme
   -------------------------------------------------------------------------- */

/* border-box : présent dans le tokens.css du brief, perdu ici en retirant son
   scope `.baair`. Sans lui, une hauteur fixe n'inclut pas les bordures — un
   bouton à `min-height: 48px` bordé mesurait 50 px et ne s'alignait plus sur
   le menu (décalage de 12 px signalé le 2026-07-30). */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* LE CARRÉ EST LA SEULE FORME — règle non négociable du design system. */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

/* --------------------------------------------------------------------------
   2. Alias courts vers les tokens, pour écrire du CSS lisible.
   -------------------------------------------------------------------------- */

:root {
  --ink:        var(--wp--preset--color--ink);
  --paper:      var(--wp--preset--color--paper);
  --purple:     var(--wp--preset--color--purple);
  --bone:       var(--wp--preset--color--bone);
  --rule:       var(--wp--preset--color--rule);
  --rule-dark:  var(--wp--preset--color--rule-dark);
  --meta:       var(--wp--preset--color--meta);
  --meta-dark:  var(--wp--preset--color--meta-dark);
  --ink-paper:  var(--wp--preset--color--ink-paper);

  --font-display:   var(--wp--preset--font-family--display);
  --font-editorial: var(--wp--preset--font-family--editorial);
  --font-body:      var(--wp--preset--font-family--body);
  --font-mono:      var(--wp--preset--font-family--mono);

  --container: 1320px;
  --gutter: 48px;

  --ease:     cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur:      220ms;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------------
   3. Conteneur et sections
   -------------------------------------------------------------------------- */

.baair-container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.baair-section {
  padding-block: clamp(64px, 8vw, 112px);
  border-bottom: 1px solid var(--rule);
}

.baair-section--dark {
  background: var(--ink);
  color: var(--ink-paper);
  border-bottom-color: var(--rule-dark);
}

.baair-section--bone { background: var(--bone); }

/* --------------------------------------------------------------------------
   4. Le procédé de filets : le fond transparaît entre les cellules.
      À utiliser à la place de bordures individuelles (brief §3).
   -------------------------------------------------------------------------- */

.baair-rule-grid {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.baair-rule-grid > * {
  background: var(--paper);
  padding: 32px;
}

.baair-rule-grid--3 { grid-template-columns: repeat(3, 1fr); }
.baair-rule-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* Cas du bloc Requête : ce n'est PAS le conteneur qui porte ma classe qui
   fait la grille, mais son enfant `.wp-block-post-template`. Sans cette
   règle les articles s'empilent sur une colonne et laissent deux tiers de
   vide — c'est ce qui cassait l'accueil et la page Actualité (2026-07-30). */
.baair-rule-grid .wp-block-post-template {
  display: grid;
  grid-template-columns: inherit;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--rule);
  grid-column: 1 / -1;
}

.baair-rule-grid--3 .wp-block-post-template { grid-template-columns: repeat(3, 1fr); }
.baair-rule-grid--2 .wp-block-post-template { grid-template-columns: repeat(2, 1fr); }

/* Quand la grille est portée par le bloc Requête, c'est l'enfant qui dessine
   les filets : le parent ne doit plus ajouter les siens. */
.baair-rule-grid:has(> .wp-block-post-template) {
  display: block;
  background: transparent;
  padding: 0;
}
.baair-rule-grid:has(> .wp-block-post-template) > * { padding: 0; background: transparent; }

.baair-rule-grid .wp-block-post-template > li,
.baair-rule-grid .wp-block-post {
  background: var(--paper);
  padding: 32px;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.baair-section--dark .baair-rule-grid { background: var(--rule-dark); border-color: var(--rule-dark); }
.baair-section--dark .baair-rule-grid > * { background: var(--ink); }

@media (max-width: 1100px) {
  .baair-rule-grid--3,
  .baair-rule-grid--3 .wp-block-post-template { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .baair-rule-grid--3,
  .baair-rule-grid--2,
  .baair-rule-grid--3 .wp-block-post-template,
  .baair-rule-grid--2 .wp-block-post-template { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   5. Signatures typographiques
   -------------------------------------------------------------------------- */

.baair-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--meta);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.baair-section--dark .baair-eyebrow { color: var(--meta-dark); }

/* Le carré violet — ponctuation, jamais aplat ni dégradé. */
.baair-square {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--purple);
  flex: 0 0 auto;
}
.baair-square--md { width: 12px; height: 12px; }
.baair-square--lg { width: 24px; height: 24px; }

/* Carré inline calé sur la ligne de base d'un titre. */
.baair-square--inline {
  width: 0.34em;
  height: 0.34em;
  margin-left: 0.12em;
  vertical-align: baseline;
}

/* Le fragment italique Instrument Serif — la signature du système. */
.baair-italic {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.baair-lead {
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.5;
  max-width: 52ch;
  color: #1F1F1A;
}

.baair-section--dark .baair-lead { color: var(--ink-paper); }

/* --------------------------------------------------------------------------
   6. Boutons — le reste vient de theme.json
   -------------------------------------------------------------------------- */

/* Boîte à hauteur fixe et contenu centré : c'est ce qui garantit que deux
   boutons de tailles de texte différentes (14px et mono 11px) restent
   parfaitement alignés côte à côte. Avec un simple padding, ils ne l'étaient
   pas — signalé le 2026-07-30. */
.baair-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  padding: 0 24px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  white-space: nowrap;
  vertical-align: top;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.baair-btn:hover,
.baair-btn:focus-visible {
  background: var(--purple);
  border-color: var(--purple);
  color: var(--paper);
}

.baair-btn--ghost {
  background: transparent;
  color: var(--ink);
}
.baair-btn--ghost:hover,
.baair-btn--ghost:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.baair-btn--mono {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Sur fond d'encre, un bouton d'encre disparaît : il ne reste que son texte
   blanc, qui se lit comme un lien nu. Relevé le 2026-08-10 sur le bandeau de
   sortie du guide, premier bouton du thème posé dans une section sombre.
   On le retourne en contour clair, plein blanc au survol. */
.baair-section--dark .baair-btn {
  background: transparent;
  border-color: var(--ink-paper);
  color: var(--ink-paper);
}
/* Le survol doit repasser DEVANT `.baair-section--dark a:link` du §10 (0,2,1),
   qui force `--ink-paper` : sans le `a.` le texte resterait blanc sur blanc.
   Même procédé que le reste du §10 — on double le sélecteur. */
.baair-section--dark .baair-btn:hover,
.baair-section--dark .baair-btn:focus-visible,
.baair-section--dark a.baair-btn:hover,
.baair-section--dark a.baair-btn:focus-visible {
  background: var(--ink-paper);
  border-color: var(--ink-paper);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   7. En-tête collant
   -------------------------------------------------------------------------- */

/* Un élément collant ne circule que dans la boîte de son parent. WordPress
   enveloppe chaque partie de gabarit dans un `.wp-block-template-part` qui
   fait exactement la hauteur de l'en-tête : le sticky n'avait donc aucune
   course et disparaissait au premier défilement, sur toutes les pages.
   `display: contents` fait disparaître l'enveloppe de la mise en page : le
   header devient enfant direct de `.wp-site-blocks` et colle sur toute la
   hauteur du document. Constaté le 2026-07-30. */
.wp-site-blocks > .wp-block-template-part:has(> .baair-header) {
  display: contents;
}

.baair-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.baair-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  min-height: 68px;
}

/* Chaque cellule centre son propre contenu et ne porte aucune marge.
   WordPress applique `margin-block-start` aux enfants d'un groupe en flux
   (`is-layout-flow`) : la cellule du bouton se retrouvait poussée de 12 px
   vers le bas, désalignée du menu. Constaté le 2026-07-30. */
.baair-header .baair-header__inner > * {
  display: flex;
  align-items: center;
  align-self: center;
  min-height: 48px;
  margin-block: 0;
}

.baair-header .baair-header__inner > * > * { margin-block: 0; }

.baair-header__mark { justify-content: flex-start; }
.baair-header__cta  { justify-content: flex-end; }

.baair-header__mark img { height: 22px; width: auto; display: block; }

.baair-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.baair-nav a {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.baair-nav a {
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}
.baair-nav a:hover,
.baair-nav a[aria-current="page"] { color: var(--purple); }

@media (max-width: 900px) {
  .baair-nav { display: none; }
  .baair-header__inner { grid-template-columns: auto 1fr; }
}

/* --------------------------------------------------------------------------
   8. Pied de page
   -------------------------------------------------------------------------- */

.baair-footer {
  background: var(--ink);
  color: var(--ink-paper);
  padding-block: 72px 0;
}

.baair-footer a { color: var(--ink-paper); text-decoration: none; }
.baair-footer a:hover { color: var(--purple); }

.baair-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
}

.baair-footer__mark img { height: 22px; width: auto; filter: invert(1); }

.baair-footer__baseline {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 22px;
  margin-top: 16px;
  color: var(--ink-paper);
}

.baair-footer__col 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 16px;
}

.baair-footer__col ul { list-style: none; margin: 0; padding: 0; }
.baair-footer__col li { margin-bottom: 10px; font-size: 14px; }

.baair-footer__bar {
  margin-top: 56px;
  padding-block: 20px;
  border-top: 1px solid var(--rule-dark);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--meta-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  /* Mention légale et liens sur la même ligne optique. */
  align-items: center;
}

.baair-footer__bar p {
  margin: 0;
  line-height: 1.4;
}

/* « Gérer le consentement » est un <button> et non un lien — Complianz
   n'écoute que `button.cmplz-manage-consent`. On lui retire donc son
   apparence de bouton pour qu'il se lise comme ses voisins. */
.baair-footer__bar .baair-consent {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.baair-footer__bar .baair-consent:hover,
.baair-footer__bar .baair-consent:focus-visible {
  color: var(--paper);
}

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

/* --------------------------------------------------------------------------
   9. Article — lisibilité et structure (l'atout SEO/GEO du site)
   -------------------------------------------------------------------------- */

.baair-article__body > * { margin-block: 0 24px; }

.baair-article__body h2 { margin-block: 56px 20px; }
.baair-article__body h3 { margin-block: 40px 16px; }

.baair-article__body p,
.baair-article__body li {
  font-size: 17px;
  line-height: 1.65;
}

.baair-article__body img { max-width: 100%; height: auto; }

/* Sommaire à ancres — conservé depuis les articles existants. */
.baair-toc {
  background: var(--bone);
  padding: 28px 32px;
  margin-block: 40px;
}
.baair-toc a { color: var(--ink); text-decoration: none; }
.baair-toc a:hover { color: var(--purple); }

/* Cible d'ancre : ne pas passer sous l'en-tête collant. */
:target { scroll-margin-top: 88px; }

/* ==========================================================================
   10. COULEURS DE LIENS — reprise de contrôle
   ==========================================================================

   Le kit global d'Elementor (frontend.min.css, post-79.css) reste chargé et
   impose `a:link { color: #467FF7 }`. Un sélecteur de type `a:link` pèse
   0,1,1 et bat donc une simple classe (0,1,0) : tous les liens du thème
   ressortaient en bleu — menu, boutons, titres d'articles, pied de page.

   On repasse devant en doublant la classe avec :link/:visited (0,2,0).
   Ce bloc pourra être allégé une fois le CSS d'Elementor réellement purgé.
   ========================================================================== */

/* Règle de base : un lien hérite de la couleur de son contexte. */
a:link,
a:visited {
  color: inherit;
}

a:hover,
a:focus-visible {
  color: var(--purple);
}

/* Boutons pleins — texte toujours sur fond, jamais bleu. */
.baair-btn:link,
.baair-btn:visited,
.baair-btn:hover,
.baair-btn:focus-visible {
  color: var(--paper);
}

.baair-btn--ghost:link,
.baair-btn--ghost:visited {
  color: var(--ink);
}
.baair-btn--ghost:hover,
.baair-btn--ghost:focus-visible {
  color: var(--paper);
}

/* Menu principal */
.baair-nav a:link,
.baair-nav a:visited {
  color: var(--ink);
}
.baair-nav a:hover,
.baair-nav a:focus-visible,
.baair-nav a[aria-current="page"] {
  color: var(--purple);
}

/* Titres d'articles et de produits : noirs, violets au survol. */
.baair-main :where(h1, h2, h3, h4) a:link,
.baair-main :where(h1, h2, h3, h4) a:visited,
.wp-block-post-title a:link,
.wp-block-post-title a:visited,
.baair-shop__title a:link,
.baair-shop__title a:visited {
  color: var(--ink);
  text-decoration: none;
}

.baair-main :where(h1, h2, h3, h4) a:hover,
.wp-block-post-title a:hover,
.baair-shop__title a:hover {
  color: var(--purple);
}

/* Liens éditoriaux dans le corps d'un article ou d'une page */
.baair-article__body a:link,
.baair-article__body a:visited,
.baair-page__body a:link,
.baair-page__body a:visited {
  color: var(--ink);
}
.baair-article__body a:hover,
.baair-page__body a:hover {
  color: var(--purple);
}

/* CTA en petites capitales mono */
.baair-card__cta:link,
.baair-card__cta:visited,
.baair-btn--mono:link,
.baair-btn--mono:visited,
.baair-btn--mono a:link,
.baair-btn--mono a:visited {
  color: var(--ink);
}
.baair-card__cta:hover,
.baair-btn--mono:hover,
.baair-btn--mono a:hover {
  color: var(--purple);
}

/* Sur fond sombre : blanc, violet au survol. */
.baair-footer a:link,
.baair-footer a:visited,
.baair-section--dark a:link,
.baair-section--dark a:visited,
.baair-card--ink a:link,
.baair-card--ink a:visited {
  color: var(--ink-paper);
}

.baair-footer a:hover,
.baair-footer a:focus-visible,
.baair-section--dark a:hover,
.baair-card--ink a:hover {
  color: var(--purple);
}

/* Les intitulés de colonne du pied de page ne sont pas des liens :
   ils doivent rester lisibles, pas bleu foncé sur noir. */
.baair-footer .baair-footer__col h4,
.baair-footer h4 {
  color: var(--meta-dark);
}

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

/* --------------------------------------------------------------------------
   11. Accessibilité
   -------------------------------------------------------------------------- */

.baair-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  z-index: 100;
}
.baair-skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   12. Modale de réservation
   ========================================================================== */

.baair-modal {
  width: min(920px, 94vw);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}

.baair-modal::backdrop {
  background: rgba(10, 10, 10, 0.72);
}

.baair-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 32px 22px;
  border-bottom: 1px solid var(--rule);
}

.baair-modal__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 12px 0 0;
}

.baair-modal__close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.baair-modal__close:hover,
.baair-modal__close:focus-visible {
  background: var(--purple);
  border-color: var(--purple);
  color: var(--paper);
}

.baair-modal__body {
  height: min(660px, 74vh);
}

.baair-modal__body iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.baair-modal__fallback {
  padding: 40px 32px;
  text-align: center;
}

@media (max-width: 640px) {
  .baair-modal { width: 100vw; max-height: 100vh; height: 100vh; border: 0; }
  .baair-modal__head { padding: 20px 20px 16px; }
  .baair-modal__body { height: calc(100vh - 130px); }
}

/* La modale ne s'anime pas si le visiteur a réduit les animations. */
@media (prefers-reduced-motion: no-preference) {
  .baair-modal[open] { animation: baairModalIn 180ms var(--ease-out); }
  @keyframes baairModalIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}


/* ==========================================================================
   13. Retour au clic
   ==========================================================================

   Un bouton qui ne bouge pas sous le doigt donne l'impression que rien n'a
   été entendu. Un enfoncement de 3 % suffit : on ne le voit pas, on le sent.
   Le geste est bref (120 ms) — c'est le système qui répond, pas l'utilisateur
   qui décide.
   ========================================================================== */

.baair-btn,
.baair-cat,
.baair-modal__close,
.baair-form button[type="submit"],
.baair-shop__btn a,
.baair-shop__btn button,
.baair-product__cart button {
  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
              background-color var(--dur-fast) ease,
              border-color var(--dur-fast) ease,
              color var(--dur-fast) ease;
}

.baair-btn:active,
.baair-cat:active,
.baair-modal__close:active,
.baair-form button[type="submit"]:active,
.baair-shop__btn a:active,
.baair-shop__btn button:active,
.baair-product__cart button:active {
  transform: scale(0.97);
}

/* Les appareils tactiles déclenchent :hover au toucher — on réserve les
   effets de survol aux vrais pointeurs. */
@media (hover: none) {
  .baair-btn:hover { background: var(--ink); border-color: var(--ink); }
  .baair-btn--ghost:hover { background: transparent; color: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  .baair-btn:active,
  .baair-cat:active,
  .baair-modal__close:active { transform: none; }
}