. Invisible sur un fond blanc, visible ici : une bande claire entre la dernière section et le pied, relevée au navigateur le 2026-08-13. Les sections portent elles-mêmes leur respiration verticale. */ .wp-site-blocks > .baair-main, .wp-site-blocks > .wp-block-template-part, .baair-main { margin-block-start: 0; } /* -------------------------------------------------------------------------- §1. Un accent par porte — outil, immobilier, marque. La palette vient du logo officiel 2025 et des images du hero : indigo et ambre sont complémentaires, ils s'accordent à la photographie chaude au lieu de la contrarier. Chartreuse, cobalt et ember ont été supprimés — ils avaient été inventés sans jamais voir le logo. Ne pas les réintroduire. On surcharge --baair-accent sur le

d'une page ou sur une section ; les moments d'accent suivent. Défaut : l'indigo. -------------------------------------------------------------------------- */ :root { --baair-accent: var(--wp--preset--color--indigo); --baair-accent-deep: var(--wp--preset--color--purple-deep); --baair-on-accent: var(--wp--preset--color--paper); } .baair-porte--outil { --baair-accent: var(--wp--preset--color--indigo); --baair-on-accent: var(--wp--preset--color--paper); } .baair-porte--immobilier { --baair-accent: var(--wp--preset--color--ambre); --baair-on-accent: var(--wp--preset--color--ink); } .baair-porte--marque { --baair-accent: var(--wp--preset--color--ink); --baair-on-accent: var(--wp--preset--color--paper); } ::selection { background: var(--wp--preset--color--indigo); color: var(--wp--preset--color--paper); } /* -------------------------------------------------------------------------- §2. Les chiffres sont l'iconographie. `1080×1920` · `6000 mAh` · `10 kg` composés en grand dans le serif. Jamais de pictogramme sur une caractéristique technique. -------------------------------------------------------------------------- */ .baair-faits { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--wp--preset--color--rule); border-top: 1px solid var(--wp--preset--color--rule); border-bottom: 1px solid var(--wp--preset--color--rule); } .baair-fait { background: var(--wp--preset--color--paper); padding: 32px 24px; } .baair-fait__valeur { font-family: var(--wp--preset--font-family--display); font-size: clamp(36px, 4.6vw, 72px); line-height: 0.96; letter-spacing: -0.03em; font-weight: 400; } .baair-fait__legende { margin-top: 12px; font-family: var(--wp--preset--font-family--mono); font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--wp--preset--color--meta); } /* -------------------------------------------------------------------------- §3. Le bloc forfait — un prix affiché et son périmètre visible côte à côte. Le périmètre est un argument commercial, pas une mention légale. -------------------------------------------------------------------------- */ .baair-forfait { border: 1px solid var(--wp--preset--color--rule-dark); display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; } .baair-forfait__prix { padding: 32px 24px; background: var(--baair-accent); color: var(--baair-on-accent); font-family: var(--wp--preset--font-family--display); font-size: clamp(40px, 4.6vw, 72px); line-height: 0.96; } .baair-forfait__perimetre { padding: 32px 24px; } .baair-forfait__perimetre table { width: 100%; border-collapse: collapse; font-size: 14px; } .baair-forfait__perimetre td { border-top: 1px solid var(--wp--preset--color--rule); padding: 10px 0; vertical-align: top; } .baair-forfait__perimetre td:first-child { font-family: var(--wp--preset--font-family--mono); font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--wp--preset--color--meta); padding-right: 24px; white-space: nowrap; } @media (max-width: 720px) { .baair-forfait { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- §4. Le cadre 9:16 — le ratio de l'écran de la borne comme motif. -------------------------------------------------------------------------- */ .baair-portrait { aspect-ratio: 9 / 16; overflow: hidden; background: var(--wp--preset--color--ink); } .baair-portrait img, .baair-portrait video { width: 100%; height: 100%; object-fit: cover; display: block; } /* -------------------------------------------------------------------------- §5. La mention de transparence IA — permanente, jamais en petits caractères. Utilisée sur /visites-virtuelles/ et sous chaque exemple. -------------------------------------------------------------------------- */ .baair-mention-ia { display: inline-flex; align-items: baseline; gap: 8px; border: 1px solid var(--wp--preset--color--rule-dark); padding: 8px 14px; font-family: var(--wp--preset--font-family--mono); font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; } /* -------------------------------------------------------------------------- §6. Le logo — signe vectoriel + mot composé. Le signe vient du logo officiel 2025 ; le mot est du texte vivant, faute de verrouillage vectoriel (voir baair_studio_logo() dans functions.php). Les couleurs reprennent celles du verrouillage : indigo, pervenche, encre. -------------------------------------------------------------------------- */ /* Le logo est porté par une ancre, en en-tête comme en pied. Les deux règles du socle (`.baair-header__mark img`, `.baair-footer__mark img`) ciblent une image : elles sont devenues inertes, le logo étant un SVG en ligne. */ .baair-header__logo { display: inline-flex; text-decoration: none; } .baair-logo { display: inline-flex; align-items: center; gap: 10px; line-height: 1; } .baair-logo svg { display: block; height: 28px; width: auto; flex: none; } .baair-logo__mot { font-family: var(--wp--preset--font-family--body); font-size: 20px; font-weight: 600; letter-spacing: -0.035em; color: var(--wp--preset--color--indigo); } .baair-logo__point { color: var(--wp--preset--color--pervenche); } .baair-logo__suite { color: var(--wp--preset--color--ink); } /* Le pied est sur fond d'encre : l'arc indigo s'y noierait (contraste 1,7). On remonte le signe en clair et on garde la pervenche en second plan. Les `fill` du SVG sont des attributs de présentation — la moindre règle CSS les emporte, inutile de surenchérir en spécificité. */ .baair-footer .baair-logo svg { height: 32px; } .baair-footer .baair-logo__arc { fill: var(--wp--preset--color--ink-paper); } .baair-footer .baair-logo__halo { fill: var(--wp--preset--color--pervenche); } .baair-footer .baair-logo__play { fill: var(--wp--preset--color--ink); } .baair-footer .baair-logo__mot { color: var(--wp--preset--color--pervenche); } .baair-footer .baair-logo__suite { color: var(--wp--preset--color--ink-paper); } /* -------------------------------------------------------------------------- §6. Les trois portes — le moment de bascule. Chaque porte EST sa couleur : c'est là que la palette travaille. Une tuile peut être un ou un

selon que sa page existe ou non (voir patterns/portes.php). Les deux se ressemblent, sauf que la seconde ne porte ni « Voir → » ni curseur de lien : rien ne promet un clic qui mènerait à un 404. -------------------------------------------------------------------------- */ .baair-portes { padding-left: 0; padding-right: 0; } .baair-portes__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--wp--preset--color--rule); } .baair-porte { background: var(--baair-accent); color: var(--baair-on-accent); padding: clamp(32px, 3.4vw, 56px); min-height: 300px; display: flex; flex-direction: column; text-decoration: none; transition: filter 160ms cubic-bezier(0.2, 0.7, 0.2, 1); } /* ⚠️ Le §10 du socle reprend la main sur a:link / a:visited. On double donc le sélecteur, sinon la couleur héritée écrase celle de la porte. */ a.baair-porte:link, a.baair-porte:visited { color: var(--baair-on-accent); } a.baair-porte:hover { filter: brightness(1.08); } .baair-porte__qui { font-family: var(--wp--preset--font-family--mono); font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; opacity: 0.78; margin: 0 0 16px; } .baair-porte__titre { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(30px, 3vw, 46px); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 16px; } .baair-porte__quoi { font-size: 15px; line-height: 1.5; opacity: 0.86; margin: 0 0 28px; max-width: 34ch; } .baair-porte__lien { font-family: var(--wp--preset--font-family--mono); font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; margin: auto 0 0; } /* La bande de la borne : une respiration, pas une section. Elle a le poids de sa marge — moins de 15 % — et pas une ligne de plus. */ .baair-bande-borne { border-top: 1px solid var(--wp--preset--color--rule); border-bottom: 1px solid var(--wp--preset--color--rule); padding-top: 40px; padding-bottom: 40px; } /* -------------------------------------------------------------------------- §7. Le hero — statique sur son poster en attendant le film. Le scroll-scrub est abandonné sur la home (2026-08-25) : studio démontre qu'il fabrique des films, pas des sites malins. La structure est déjà celle du hero vidéo à venir : un média plein cadre (.baair-hero__media, aujourd'hui,