/* * Radio Bunker — dérivé de maruloko-metal (lui-même dérivé de * boogaloo-gradient-yellow, D10.257/D10.263), retravaillé pour coller à la * maquette Radio Bunker (Marc Bahaud, web radio metal) : béton/rouille/ * rouge signal plutôt que noir/or. * * Charpente strictement inchangée depuis maruloko-metal : contrat de * surfaces à deux accents (VALEUR pour titres/boutons/liens, STRUCTURE * pour bordures/séparateurs), angles vifs (radius 0), boutons pleins en * méplat à bordure épaissie 2px (« plaque rivetée » — encore plus * pertinent ici que sur maruloko-metal), texture de surface en rayures * diagonales fines. Rien de tout ça n'a été retouché. * * Ce qui change, uniquement la palette et la police : * - Couleur de VALEUR : rouille #c8511f à la place de l'or #f2c230. * - Couleur de STRUCTURE : rouge signal #c22a1a à la place du rouge sang * #c81e1e de maruloko-metal (même rôle, teinte resserrée vers le rouge * de la maquette — panneau ON AIR, ondes du logo). * - Accent secondaire / hover : ambre #d69a3b à la place du jaune pâle * #ffe066. * - Barlow Condensed à la place de Barlow (corps de texte plus resserré, * cohérent avec le ton « console »/« dossier » de la maquette). Anton * conservé pour les titres. * * Non résolu / à vérifier avec toi : la double déclaration de * --az-font-display plus bas (héritée de maruloko-metal, D10.36.17) fait * retomber ce token sur Barlow Condensed pour tout ce qui le consomme — * si des composants de _experience.css (stat panels, timeline, * release-card) apparaissent sur ce site, ils n'auront pas Anton. Je l'ai * reprise à l'identique faute de visibilité sur _experience.css ; à * confirmer si Radio Bunker doit s'en écarter. */ html[data-theme='radio-bunker'], body[data-theme='radio-bunker'], .theme-root[data-theme='radio-bunker'] { --brand-bg: #14120f; --brand-surface: #1c1912; --brand-surface-soft: #26211a; --brand-text: #cdc6b8; --brand-muted: #a49c8c; --brand-accent: #c8511f; --brand-accent-soft: #d69a3b; /* Mécanisme hérité de maruloko-metal (D10.263) : la rouille reste réservée aux titres/boutons/liens (couleur de valeur), le rouge structure les contours (cartes, séparateurs) — un vrai deuxième accent, pas juste une nuance du premier. */ --brand-border: rgba(194, 42, 26, .38); --brand-shadow: none; /* D10.392.2/.5 — Couleur/largeur du cadre vertical du site (layout/_layout.css), réglage de goût encore en cours d'ajustement — valeur actuelle choisie explicitement par le client, pas figée. À AJUSTER ICI directement si besoin : ce sont les 2 seules lignes qui pilotent le cadre pour ce preset, rien à toucher ailleurs (voir tokens/_foundation.css pour les défauts qui s'appliquent à tout site qui ne les redéfinit pas — transparent/1px). */ --page-frame-color: transparent; --page-frame-width: 1px; /* D10.397 — Retour terrain : "footer collé en bas" (min-height:100vh + main en flex-grow, layout/_layout.css) crée un vide visible entre la dernière section et le footer sur une fenêtre plus haute que le contenu (zoom arrière, grand écran) — désactivé pour ce preset : main garde sa hauteur naturelle, le footer suit directement le contenu. */ --main-flex-grow: 0; /* D10.393 — Retour terrain : header/footer collés au cadre vertical (largeur du conteneur .az-site-area__container calée pile sur --az-container, comme le cadre lui-même) — léger padding pour respirer. À AJUSTER ICI directement si besoin. */ --site-area-content-padding-inline: 1rem; /* D10.395 — Retour terrain : bordure haute du footer limitée à la largeur du site (1180px) plutôt que pleine largeur d'écran — même couleur que le défaut hérité (--color-border) qu'on désactive juste au-dessus sur .az-footer, reportée ici sur le conteneur plafonné (components/_navigation.css). */ --footer-border-top: none; --footer-border-top-contained: 1px solid var(--color-border); /* D10.263 — Accent secondaire, rouge sang, utilisé explicitement dans ce fichier (bordures, séparateurs) — pas un token du contrat central, propre à ce preset. */ --bunker-red: #c22a1a; --bunker-red-soft: #e2402a; /* Override demandé explicitement pour ce preset : moitié du padding intérieur par défaut du framework (--module-inner-padding, clamp 0.625rem→2rem, tokens/_foundation.css). Valeur fixe (pas de clamp) à 1rem = 16px, propre à radio-bunker. */ --module-inner-padding: 1rem; /* D10.257 — Angles vifs, même mécanisme que boogaloo-light : le métal n'a pas de coins arrondis. --az-radius-pill garde son sens (« pilule »), volontairement épargné — voir le même choix documenté dans boogaloo-light.css. */ --az-radius-sm: 0; --az-radius-md: 0; --az-radius-lg: 0; --nav-link-radius: 0; --button-radius: 0; --header-top-social-radius: 0; --theme-switcher-radius: 0; /* D10.284/287 — Widget radio du header : même traitement typographique que les titres de piste du panneau console (D10.278), --az-font-display déjà déclaré dans ce fichier. D10.287 : PAS de --header-radio-radius:0 ici — la forme pilule (défaut Core) est celle validée sur la maquette, contrairement aux angles droits du reste du preset (nav/boutons). La teinte de bordure reprend le même rouge-rouille que --surface-dark- border (D10-COMPONENT-TOKEN-BOUNDARIES.md : les tokens --header-* restent volontairement indépendants du système Surface, donc littéral répété plutôt qu'une référence croisée). */ --header-radio-border: rgba(194, 42, 26, .38); --header-radio-toggle-bg: var(--brand-accent); --header-radio-title-font: var(--az-font-display); --header-radio-title-transform: uppercase; --header-radio-title-letter-spacing: .01em; /* D10.299 — Fenêtre du titre défilant "éclairée" : fond assombri (indépendant de la couleur de fond réelle du preset, color-mix sur du noir plutôt qu'une teinte fixe) et texte blanc, façon panneau lumineux — cohérent avec l'esthétique "console" du reste du widget (dashes, ON AIR du panneau de page). */ --header-radio-title-mask-bg: color-mix(in srgb, black 35%, transparent); --header-radio-title-mask-color: #fff; /* D10.263 — Bordure des boutons pleins épaissie (nouveau token, tokens/_foundation.css — défaut 1px inchangé pour tout preset qui ne le redéfinit pas). Plaque rivetée plutôt que bouton premium. */ --button-border-width: 2px; /* D10.390 — Retour terrain : bouton contour secondaire (outline- secondary) un peu plus épais lui aussi — défaut 1px (tokens/_foundation.css, --button-outline-secondary-border-width), inchangé pour tout autre preset. */ --button-outline-secondary-border-width: 2px; /* Anton (une seule graisse, très condensée — brutal, affiche punk/metal) conservé tel quel depuis maruloko-metal. Barlow remplacé par Barlow Condensed pour le corps de texte : plus resserré, plus proche du ton « console »/« dossier » de la maquette Radio Bunker (labels, compteurs, listes de créneaux) que la version non condensée. --heading-transform (uppercase) et --heading-letter-spacing restent le défaut du framework (_foundation.css) : aucune surcharge nécessaire. */ --az-font-import: url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow+Condensed:wght@400;500;600;700;800&display=swap'); --az-font-sans: 'Barlow Condensed', Arial, Helvetica, sans-serif; --az-font-display: 'Anton', var(--az-font-sans); /* D10.377 — Titre des modules HTML et CTA (le titre seul, ni surtitre ni sous-titre) en Barlow Condensed ExtraBold, comme la maquette. Les autres titres de section du site gardent la typographie générique. La graisse 800 est ajoutée à l'import ci-dessus (400 à 700 seulement avant). Graisse : le montant d'une lettre mesure ~0,23 de la hauteur de capitale dans la maquette, entre le Bold (0,20) et l'ExtraBold (0,23) de Barlow Condensed, plus près du second. Espacement +.05em : celui qui ramène la largeur de la maquette (le titre générique du framework est à -.055em, pensé pour une police plus large). */ --html-title-font-family: var(--az-font-sans); --html-title-font-weight: 800; --html-title-letter-spacing: .05em; /* D10.391 — Titre du module HTML en gris clair plutôt que dans la teinte de marque (--surface-light-heading-section force normalement tous les titres de section à --brand-accent, y compris celui-ci) : le contraste couleur revient au surtitre (--html-kicker-color juste en dessous), pas au titre lui-même. --brand-text (gris clair chaud du thème) plutôt qu'un gris neutre en dur, pour rester dans la palette. */ --html-title-color: var(--brand-text); /* D10.380 — Petit trait sous le titre du module HTML, même teinte que le surtitre (--brand-accent) pour rester dans la même famille visuelle. Largeur fixe et courte (3rem), volontairement indépendante de la longueur du titre plutôt qu'une fraction de son texte : un titre court et un titre long gardent ainsi le même petit trait, cohérent partout. */ --html-title-rule-width: 6rem; --html-title-rule-thickness: 2px; --html-title-rule-gap: .5rem; --html-title-rule-color: var(--brand-accent); /* D10.391 — Surtitre du module HTML : même traitement « eyebrow » que celui de la Bannière (rouille de marque + liseret gauche, D10.369/D10.372), mais avec une couleur cette fois (contrairement au kicker de la Bannière, laissé volontairement neutre — voir le commentaire sur --hero-kicker-* plus bas) : demande explicite pour ce module précis. */ --html-kicker-color: var(--brand-accent); --html-kicker-border: 2px solid var(--brand-accent); --html-kicker-padding-left: .625rem; --html-kicker-size: 1.125rem; --html-kicker-weight: 700; --cta-title-font-family: var(--az-font-sans); --cta-title-font-weight: 800; --cta-title-letter-spacing: .05em; /* D10.396 — Retour terrain : titre du layout Bannière 'half-right' identique à celui du CTA — référence directe aux tokens ci-dessus (pas une valeur dupliquée) : les deux resteront toujours synchronisés, même si l'identité du titre CTA change plus tard. */ --hero-title-half-right-font-family: var(--cta-title-font-family); --hero-title-half-right-weight: var(--cta-title-font-weight); --hero-title-half-right-letter-spacing: var(--cta-title-letter-spacing); /* D10.396.1 — Retour terrain : même taille/interligne que le titre CTA (--heading-section-size/-line-height, ce que .azz-cta__title consomme lui-même, sections/_cta.css) — pas --cta-title-* (ces deux-là n'ont pas de tokens dédiés, ils lisent déjà le générique). */ --hero-title-half-right-size: var(--heading-section-size); --hero-title-half-right-line-height: var(--heading-section-line-height); /* D10.389 — Retour terrain, propre à radio-bunker : plus d'espace entre la description du CTA et le bouton (--az-space-3 par défaut ailleurs, jamais touché ici — voir le token dédié, tokens/_foundation.css). */ --cta-desc-margin-bottom: 0; /* D10.36.14 — Halo de la variante « encadré » retiré (demande explicite, « je n'en veux pas ») : le mécanisme --card-glow (D10.36.4) et son application dans cms-bridge.css ont été entièrement supprimés, pas seulement désactivé comme en D10.36.7. */ /* D10.36.4 — Titres de carte Services plus compacts (maquette Contact référence), sans toucher aux autres modules à items. D10.382 — Doublé (1rem -> 2rem), demande explicite. Le override mobile juste plus bas (D10.64, .8rem/400) reste inchangé : il existait déjà pour alléger ces titres sur petit écran, doubler la taille desktop ne doit pas rouvrir le problème de retour à la ligne qu'il corrigeait. */ --services-item-title-font-size: 2rem; /* D10.378 — Titres du module Services (module ET cartes) dans la même typographie que les titres HTML et CTA (D10.377) : Barlow Condensed ExtraBold, espacement .05em ; titres de carte en MAJUSCULES (elles ne l'étaient pas). Graisse des cartes 800, plus 600 : le 600 de D10.36.9 répondait à un Arial 700 jugé trop gras, pas à cette police. Le bloc mobile plus bas (D10.64, .8rem / 400) reste tel quel. */ --services-title-font-family: var(--az-font-sans); --services-title-font-weight: 800; --services-title-letter-spacing: .05em; --services-item-title-font-family: var(--az-font-sans); --services-item-title-font-weight: 800; --services-item-title-transform: uppercase; --services-item-title-letter-spacing: .05em; /* D10.381 — Petit trait vertical gris clair très discret sur le bord gauche de chaque carte Services (80% de la hauteur de la carte, centré). `color-mix` avec --brand-text plutôt qu'un gris en dur : reste dans la palette du thème, et le taux (18%) donne le rendu "très léger" demandé plutôt qu'une bordure franche. */ --services-item-rule-width: 1px; --services-item-rule-color: color-mix(in srgb, var(--brand-text) 18%, transparent); /* D10.394 — Retour terrain : layout média-à-gauche en variante 'minimale' (sans padding de carte) — le liseret ci-dessus touchait directement les icônes. À AJUSTER ICI directement si besoin. */ --services-media-left-rule-gap: 1rem; --brand-inverse-bg: #0f0d0a; --brand-inverse-text: #f4ede1; /* D10.36.17 — Sans ceci, --az-font-display retombait sur le défaut framework (Impact) : une police de test, jamais l'identité de ce preset. Alias conservateur vers --az-font-sans (aucune police distinctive choisie ici) : si une typographie display « expressive » dédiée à Boogaloo est voulue (voir DESIGN-DNA.md), c'est un choix visuel à valider, pas un correctif silencieux. Consommé par _experience.css (stat panels, timeline, release-card). */ --az-font-display: var(--az-font-sans); /* D10.35 — Trois ambiances sombres distinctes, portées uniquement par le preset. */ /* Surface Light — ambiance Studio : noir chaud, calme et éditorial. D10.41.34 — Demande client (mix Boogaloo/Boogaloo jaune) : bg/bg-soft/ border repris À L'IDENTIQUE de themes/boogaloo.css (le « marron » et sa bordure orange, plutôt que les teintes propres à ce preset) ; texte principal passé au blanc. Le rouille de marque (--brand-accent) reste l'accent de cette surface (liens, bouton primaire...), inchangé. */ --surface-light-bg: #14120f; --surface-light-bg-soft: #26211a; --surface-light-border: rgba(194, 42, 26, .38); --surface-light-accent: var(--brand-accent); --surface-light-text: #ffffff; --surface-light-text-muted: #9f9185; /* D10.41.35 — TOUS les rôles de titre (générique inclus, réellement consommé via --heading-color, cms-bridge.css) reprennent la même rouille que le menu de navigation actif (--brand-accent). */ --surface-light-heading: var(--brand-accent); --surface-light-heading-display: var(--brand-accent); --surface-light-heading-section: var(--brand-accent); --surface-light-heading-item: var(--brand-accent); --surface-light-heading-editorial: var(--brand-accent); --surface-light-link: var(--brand-accent); --surface-light-link-hover: var(--brand-accent-soft); --surface-light-button-primary-bg: var(--brand-accent); --surface-light-button-primary-background: var(--surface-light-button-primary-bg); /* D10.36.4 — Texte sombre : plus lisible sur un dégradé aussi clair que du blanc (conforme à la maquette Contact référence). */ --surface-light-button-primary-text: #150f0a; --surface-light-button-primary-border: var(--brand-accent); --surface-light-button-primary-hover-bg: #8f3c17; --surface-light-button-primary-hover-background: var(--surface-light-button-primary-hover-bg); --surface-light-button-primary-hover-text: #ffffff; --surface-light-button-primary-hover-border: var(--brand-accent); --surface-light-button-secondary-bg: #18140f; --surface-light-button-secondary-background: var(--surface-light-button-secondary-bg); --surface-light-button-secondary-text: #f4ede1; --surface-light-button-secondary-border: rgba(255, 255, 255, .10); --surface-light-button-secondary-hover-bg: #241f17; --surface-light-button-secondary-hover-background: var(--surface-light-button-secondary-hover-bg); --surface-light-button-secondary-hover-text: #ffffff; --surface-light-button-secondary-hover-border: rgba(200, 81, 31, .30); --surface-light-button-outline-primary-bg: transparent; --surface-light-button-outline-primary-text: var(--brand-accent); --surface-light-button-outline-primary-border: var(--brand-accent); /* D10.41.36 — Demande explicite (avec capture) : au survol, seul le texte passe en blanc — plus de remplissage rouille (--hover-bg restait à var(--brand-accent), gardait le fond opaque au lieu de rester transparent). */ --surface-light-button-outline-primary-hover-bg: transparent; --surface-light-button-outline-primary-hover-text: #ffffff; --surface-light-button-outline-primary-hover-border: var(--brand-accent); --surface-light-button-outline-secondary-bg: transparent; --surface-light-button-outline-secondary-text: #d0c4b8; --surface-light-button-outline-secondary-border: rgba(208, 196, 184, .45); --surface-light-button-outline-secondary-hover-bg: #d0c4b8; --surface-light-button-outline-secondary-hover-text: #0b0908; --surface-light-button-outline-secondary-hover-border: #d0c4b8; /* Surface Dark — ambiance Club : béton noir, relief mat et contraste rouille. D10.41.39 — Demande client : copie intégrale de la surface Light (D10.41.34/35/36), à une seule différence près — tous les titres en blanc au lieu du rouille de marque. */ --surface-dark-bg: #14120f; --surface-dark-bg-soft: #26211a; --surface-dark-border: rgba(194, 42, 26, .38); --surface-dark-accent: var(--brand-accent); --surface-dark-text: #ffffff; --surface-dark-text-muted: #9f9185; /* D10.41.39 — Seule différence avec la surface Light : tous les titres en blanc, au lieu du rouille de marque. */ --surface-dark-heading: #ffffff; --surface-dark-heading-display: #ffffff; --surface-dark-heading-section: #ffffff; --surface-dark-heading-item: #ffffff; --surface-dark-heading-editorial: #ffffff; --surface-dark-link: var(--brand-accent); --surface-dark-link-hover: var(--brand-accent-soft); --surface-dark-button-primary-bg: var(--brand-accent); --surface-dark-button-primary-background: var(--surface-dark-button-primary-bg); --surface-dark-button-primary-text: #150f0a; --surface-dark-button-primary-border: var(--brand-accent); --surface-dark-button-primary-hover-bg: #8f3c17; --surface-dark-button-primary-hover-background: var(--surface-dark-button-primary-hover-bg); --surface-dark-button-primary-hover-text: #ffffff; --surface-dark-button-primary-hover-border: var(--brand-accent); --surface-dark-button-secondary-bg: #18140f; --surface-dark-button-secondary-background: var(--surface-dark-button-secondary-bg); --surface-dark-button-secondary-text: #f4ede1; --surface-dark-button-secondary-border: rgba(255, 255, 255, .10); --surface-dark-button-secondary-hover-bg: #241f17; --surface-dark-button-secondary-hover-background: var(--surface-dark-button-secondary-hover-bg); --surface-dark-button-secondary-hover-text: #ffffff; --surface-dark-button-secondary-hover-border: rgba(200, 81, 31, .30); --surface-dark-button-outline-primary-bg: transparent; --surface-dark-button-outline-primary-text: var(--brand-accent); --surface-dark-button-outline-primary-border: var(--brand-accent); --surface-dark-button-outline-primary-hover-bg: transparent; --surface-dark-button-outline-primary-hover-text: #ffffff; --surface-dark-button-outline-primary-hover-border: var(--brand-accent); --surface-dark-button-outline-secondary-bg: transparent; --surface-dark-button-outline-secondary-text: #d0c4b8; --surface-dark-button-outline-secondary-border: rgba(208, 196, 184, .45); --surface-dark-button-outline-secondary-hover-bg: #d0c4b8; --surface-dark-button-outline-secondary-hover-text: #0b0908; --surface-dark-button-outline-secondary-hover-border: #d0c4b8; /* Ambiance Boogaloo : profondeur (voir data-surface='dark' dans cms-bridge.css). */ /* D10.263 — Rayures diagonales fines à la place du halo doux hérité de boogaloo-gradient-yellow — brossé/griffé, pas glacé. Deux dégradés répétés superposés (traits très fins, écartement large, opacité minime) — texture perceptible de près, invisible à distance normale de lecture, jamais au détriment du contraste du texte. */ --surface-dark-depth-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0px, rgba(255, 255, 255, .035) 1px, transparent 1px, transparent 9px), repeating-linear-gradient(115deg, rgba(0, 0, 0, .25) 0px, rgba(0, 0, 0, .25) 1px, transparent 1px, transparent 27px); /* Surface Accent — D10.376 : IDENTIQUE à la surface Light, seul le fond diffère. Demande explicite : le contexte accent reprend tout le contexte clair (textes, titres, liens, boutons, cartes, bordures) ; sa seule différence est la couleur de fond, un gris foncé. Chaque rôle est le rôle Light PAR RÉFÉRENCE : modifier la surface Light se répercute sur l'Accent, sans double saisie ni dérive possible. Fond : --brand-surface (#1c1912), le palier de la palette entre le fond de page (#14120f) et le fond des cartes (--surface-light-bg-soft, #26211a) — trois marches régulières, les cartes restent lisibles sur le module. Remplace les réglages propres à l'Accent d'avant (D10.36.7, D10.36.10, D10.41.38) : accent, lien et boutons ambrés, H1 blanc, texte atténué #7a7b7b. La texture diagonale (--surface-accent-depth-image) passe à none, car la surface Light n'en a pas. */ --surface-accent-bg: #0b0a08;/*var(--brand-surface);*/ --surface-accent-bg-soft: var(--surface-light-bg-soft); --surface-accent-border: var(--surface-light-border); --surface-accent-accent: var(--surface-light-accent); --surface-accent-text: var(--surface-light-text); --surface-accent-text-muted: var(--surface-light-text-muted); --surface-accent-heading: var(--surface-light-heading); --surface-accent-heading-display: var(--surface-light-heading-display); --surface-accent-heading-section: var(--surface-light-heading-section); --surface-accent-heading-item: var(--surface-light-heading-item); --surface-accent-heading-editorial: var(--surface-light-heading-editorial); --surface-accent-link: var(--surface-light-link); --surface-accent-link-hover: var(--surface-light-link-hover); --surface-accent-button-primary-bg: var(--surface-light-button-primary-bg); --surface-accent-button-primary-background: var(--surface-light-button-primary-background); --surface-accent-button-primary-text: var(--surface-light-button-primary-text); --surface-accent-button-primary-border: var(--surface-light-button-primary-border); --surface-accent-button-primary-hover-bg: var(--surface-light-button-primary-hover-bg); --surface-accent-button-primary-hover-background: var(--surface-light-button-primary-hover-background); --surface-accent-button-primary-hover-text: var(--surface-light-button-primary-hover-text); --surface-accent-button-primary-hover-border: var(--surface-light-button-primary-hover-border); --surface-accent-button-secondary-bg: var(--surface-light-button-secondary-bg); --surface-accent-button-secondary-background: var(--surface-light-button-secondary-background); --surface-accent-button-secondary-text: var(--surface-light-button-secondary-text); --surface-accent-button-secondary-border: var(--surface-light-button-secondary-border); --surface-accent-button-secondary-hover-bg: var(--surface-light-button-secondary-hover-bg); --surface-accent-button-secondary-hover-background: var(--surface-light-button-secondary-hover-background); --surface-accent-button-secondary-hover-text: var(--surface-light-button-secondary-hover-text); --surface-accent-button-secondary-hover-border: var(--surface-light-button-secondary-hover-border); --surface-accent-button-outline-primary-bg: var(--surface-light-button-outline-primary-bg); --surface-accent-button-outline-primary-text: var(--surface-light-button-outline-primary-text); --surface-accent-button-outline-primary-border: var(--surface-light-button-outline-primary-border); --surface-accent-button-outline-primary-hover-bg: var(--surface-light-button-outline-primary-hover-bg); --surface-accent-button-outline-primary-hover-text: var(--surface-light-button-outline-primary-hover-text); --surface-accent-button-outline-primary-hover-border: var(--surface-light-button-outline-primary-hover-border); --surface-accent-button-outline-secondary-bg: var(--surface-light-button-outline-secondary-bg); --surface-accent-button-outline-secondary-text: var(--surface-light-button-outline-secondary-text); --surface-accent-button-outline-secondary-border: var(--surface-light-button-outline-secondary-border); --surface-accent-button-outline-secondary-hover-bg: var(--surface-light-button-outline-secondary-hover-bg); --surface-accent-button-outline-secondary-hover-text: var(--surface-light-button-outline-secondary-hover-text); --surface-accent-button-outline-secondary-hover-border: var(--surface-light-button-outline-secondary-hover-border); --surface-accent-depth-image: none; /* D10.35.1 — Hiérarchie chromatique : principal, section, élément, éditorial. */ /* Boutons — variations adaptées à chaque ambiance sombre. */ /* Accordéon — pictogramme blanc dans un cercle rouille fin et compact. */ --accordion-icon-container-size: 2.5rem; --accordion-icon-container-bg: transparent; --accordion-icon-container-border: 1px solid color-mix( in srgb, var(--surface-light-button-primary-bg) 30%, transparent ); --accordion-icon-container-color: #fff; --accordion-icon-container-radius: var(--az-radius-pill); --accordion-icon-size: 1.25rem; /* D10.23.55 — Identité typographique Header/Footer historique. Ces valeurs quittent les composants et le contrat neutre du framework. */ /* Radio Bunker — la maquette n'a jamais mis les liens en 900 : Barlow Condensed y reste proche de son poids par défaut (~400), sans le traitement « affiche » hérité de maruloko-metal. 500 choisi ici plutôt que 400 strict pour la lisibilité par-dessus la texture béton du header (photo de fond) — à ajuster si tu trouves ça encore trop lourd. */ --header-nav-size: .875rem; --header-nav-weight: 500; --header-nav-transform: uppercase; --header-nav-letter-spacing: .14em; --header-nav-mobile-size: inherit; --header-nav-mobile-weight: 500; --header-nav-mobile-transform: uppercase; --header-nav-mobile-letter-spacing: .12em; --header-cta-font-size: .75rem; --header-cta-font-weight: 900; --header-cta-transform: uppercase; --header-cta-letter-spacing: .08em; --header-brand-size: inherit; --header-brand-weight: 900; --header-brand-line-height: 1; --header-brand-letter-spacing: .08em; --header-brand-transform: uppercase; /* D10.63 — Retour terrain : mêmes tokens que le crédit du site (--footer-credit-font-size/-line-height, _foundation.css) plutôt que des valeurs recopiées — si le crédit change plus tard, les liens du footer restent synchronisés sans y retoucher. -weight/-transform/ -letter-spacing redéclarés ici à des valeurs neutres explicites (pas omis : le contrat D10.23.55 exige que chaque preset déclare les 4 tokens, même à une valeur neutre) — le crédit n'en pose aucun lui-même (texte ambiant hérité), ces valeurs neutres reproduisent le même rendu sans dépendre d'un défaut Core qui pourrait changer. Avant ce chantier : gras, majuscules, lettres espacées (D10.29). */ --footer-nav-size: var(--footer-credit-font-size); --footer-nav-weight: 400; --footer-nav-transform: none; --footer-nav-letter-spacing: normal; --footer-nav-line-height: var(--footer-credit-line-height); /* D10.63 — Même principe pour le module Contact du footer (email) : mêmes tokens que le crédit, --footer-contact-email-weight retiré à son propre défaut Core (700, _semantic.css) sans y toucher — surchargé uniquement pour ce preset, pas pour tout le site. La ligne-hauteur (line-height:1, codée en dur dans _navigation.css) n'est volontairement pas touchée : elle cale sciemment la hauteur de l'icône sur celle du texte pour leur alignement vertical (voir le commentaire sur .azz-footer-contact__icon) — la changer désaligne l'icône sans bénéfice typographique demandé ici. */ --footer-contact-email-size: var(--footer-credit-font-size); --footer-contact-email-weight: 400; --footer-brand-size: 1rem; --footer-brand-weight: 700; --footer-brand-line-height: normal; --footer-brand-letter-spacing: .08em; --footer-brand-transform: uppercase; --header-bg: var(--brand-inverse-bg); --header-border: 0; /* Radio Bunker — la « demande client » blanc au repos venait de maruloko-metal (D10.41.34), pas d'un choix fait pour ce site : la maquette utilise un texte atténué (bone-dim) au repos, rouille uniquement à l'état actif (--nav-link-active-text: var(--color-accent) = --brand-accent, défaut du framework, inchangé). */ --nav-link-text: var(--brand-muted); /* D10.41.40 — Retour terrain : le CTA doit avoir la MÊME bordure que les autres modules en carte (Services/Portfolio/Accordéon...), pas une exception. Annule D10.41.37 (bordure rouille pleine dédiée au CTA, qui créait justement l'incohérence signalée). --cta-border-color retombe désormais sur son défaut central (--card-border), identique à tous les autres. */ --footer-bg: var(--brand-bg); --footer-text: var(--brand-muted); --footer-heading-text: #ffffff; /* D10.41.41 — Demande client : liens du module Liste de liens blancs au repos (même principe que D10.41.34 pour la nav du header). L'état actif/ survol reste le rouille de marque sans y toucher (défaut du framework, --footer-link-hover-text: var(--color-accent) = --brand-accent). Le module Menu du footer et les icônes sociales/CTA secondaire restent sur --footer-link-text (--brand-muted), non concernés par cette demande. */ --link-list-link-text: #ffffff; --azz-carousel-dot-active: var(--brand-accent-soft); /* D10.31 — Toujours le rouille de marque, quelle que soit la surface du module qui contient la coche. (D10.376 : la surface Accent reprend désormais l'accent de la surface Light, le rouille de marque — ce réglage reste donc valable, mais n'est plus une exception à l'Accent.) */ --rte-checklist-color: var(--brand-accent); /* Lecteur de flux (webradio, cms-bridge.css .azz-player--stream) — indicateur ON AIR + VU-mètre : même rouge que --bunker-red plutôt que le défaut framework générique, cohérent avec le reste du preset. */ --stream-live-color: var(--bunker-red); /* Bandeau défilant (cms-bridge.css .azz-rte-style--ticker) — bordure simple neutralisée (none) : le motif "rayures de danger" ci-dessous (::before/::after) la remplace, pas juste un token de couleur. */ --rte-ticker-font-size: .8rem; --rte-ticker-letter-spacing: .16em; --rte-ticker-color: var(--brand-muted); --rte-ticker-separator-color: var(--brand-accent); --rte-ticker-border: none; /* Radio Bunker — style « Citation » du texte riche recalé sur l'eyebrow de la maquette (même logique que le kicker de la Bannière plus bas) : petit et discret plutôt que la citation-titre du défaut framework (1.25rem, --context-text plein), liseret rouille passé de 3px à 2px. Italique/majuscules/tracking/retrait pilotés par les 5 tokens --rte-quote-* ci-dessous (branchés sur cms-bridge.css) — plus de sélecteur direct sur .azz-rte-style--quote depuis leur ajout au contrat central (tokens/_foundation.css). */ --rte-quote-font-size: .8125rem; --rte-quote-color: var(--context-text-muted); --rte-quote-border: 2px solid var(--brand-accent); --rte-quote-font-style: normal; --rte-quote-font-weight: 500; --rte-quote-text-transform: uppercase; --rte-quote-letter-spacing: .2em; --rte-quote-padding-inline-start: .625rem; /* Angle biseauté des boutons pleins (Primary) — voir commentaire plus bas dans ce fichier pour le détail de la découpe et du bord. */ --button-primary-clip-path: polygon(0 0, 100% 0, 100% 70%, 96% 100%, 0 100%); /* D10.398 — Retour terrain : surtitre de la Bannière (champ dédié, rendu en

, banner/index.ts) reproduit le même style « eyebrow » que le surtitre du module HTML (--html-kicker-*, plus haut dans ce même bloc — 2px de liseret rouille, taille/graisse) — SEULE différence assumée : aucun token de couleur dédié posé ici, le texte continue d'hériter la couleur du contexte de surface (comme partout ailleurs dans le Hero — titre, sous-titre), contrairement au kicker HTML qui, lui, en pose un explicitement. Transform/letter- spacing NON plus redéfinis ici, pour la même raison que le kicker HTML ne les redéfinit pas non plus : retombent sur les défauts centraux (none/normal, tokens/_foundation.css) — reproduction fidèle, pas une approximation. */ --hero-kicker-size: 1.125rem; --hero-kicker-weight: 700; --hero-kicker-border: 2px solid var(--brand-accent); --hero-kicker-padding-left: .625rem; /* Rayures de danger sur le bandeau défilant (au-dessus, au-dessous) — motif décoratif à la place de la ligne pleine par défaut du framework (--rte-ticker-border, déjà neutralisé à `none` plus haut dans ce même bloc de tokens). */ --rte-ticker-edge-inset: .6rem; --rte-ticker-edge-height: 3px; --rte-ticker-edge-pattern: repeating-linear-gradient(135deg, var(--brand-accent) 0 10px, transparent 10px 20px); } /* Footer Boogaloo — hiérarchie plus compacte (poids/taille), corrigé le D10.29 : le Surface Contract fournit désormais une hiérarchie de couleurs par niveau de titre. Forcer --heading-color localement court-circuiterait toujours le contrat (un preset ne doit jamais court-circuiter ce rôle, voir surface-preset-contract.test.ts). Seule la compaction reste justifiée : un titre de module a la même taille que dans le corps de page par défaut, trop grand pour les colonnes étroites du footer. */ html[data-theme='radio-bunker'] .az-footer, body[data-theme='radio-bunker'] .az-footer, .theme-root[data-theme='radio-bunker'] .az-footer { --heading-font-weight: 600; --module-item-heading-font-size: 1rem; } /* D10.42.3 — Demande client : bordure verticale rouge à gauche du module Contact footer, sur les trois contextes de surface footer (clair, accent, sombre). Texte (e-mail + sous-texte) forcé en blanc pour clair et sombre uniquement — l'accent garde sa couleur de texte de contexte par défaut (pas demandé). D10.42.7 — Bordure retargetée sur `.az-footer__zone` (voir _navigation.css, `.az-footer__zone:has(.azz-footer-contact)`, c'est CET élément qui consomme réellement `--footer-contact-border-*`, pas `.azz-footer-contact` lui-même) : une custom property posée sur `.azz-footer-contact` ne remonte jamais vers son ancêtre `.az-footer__zone` — les custom properties ne cascade que vers le bas. Sans ce correctif la bordure restait invisible (repli sur 0/transparent, valeur par défaut au niveau de la zone). Couleur du texte (e-mail/sous-texte) inchangée : elle est bien consommée sur `.azz-footer-contact` lui-même. */ html[data-theme='radio-bunker'] .az-footer[data-footer-surface='light'] .az-footer__zone:has(.azz-footer-contact), html[data-theme='radio-bunker'] .az-footer[data-footer-surface='accent'] .az-footer__zone:has(.azz-footer-contact), html[data-theme='radio-bunker'] .az-footer[data-footer-surface='dark'] .az-footer__zone:has(.azz-footer-contact), body[data-theme='radio-bunker'] .az-footer[data-footer-surface='light'] .az-footer__zone:has(.azz-footer-contact), body[data-theme='radio-bunker'] .az-footer[data-footer-surface='accent'] .az-footer__zone:has(.azz-footer-contact), body[data-theme='radio-bunker'] .az-footer[data-footer-surface='dark'] .az-footer__zone:has(.azz-footer-contact), .theme-root[data-theme='radio-bunker'] .az-footer[data-footer-surface='light'] .az-footer__zone:has(.azz-footer-contact), .theme-root[data-theme='radio-bunker'] .az-footer[data-footer-surface='accent'] .az-footer__zone:has(.azz-footer-contact), .theme-root[data-theme='radio-bunker'] .az-footer[data-footer-surface='dark'] .az-footer__zone:has(.azz-footer-contact) { --footer-contact-border-width: 3px; --footer-contact-border-color: var(--bunker-red); --footer-contact-border-padding: 1rem; } /* D10.67 — Retour terrain : bordure retirée en mobile (desktop inchangé, règle ci-dessus). Même sélecteur exact que la règle ci-dessus (pas un raccourci plus simple sur .theme-root) : une spécificité plus faible aurait perdu face à elle malgré un ordre de cascade plus tardif — confirmé avec Playwright avant d'abandonner un premier essai plus simple, pas supposé. Padding retiré aussi : sans ça, l'espace vide qu'occupait la bordure resterait, même invisible. */ @media (max-width: 720px) { html[data-theme='radio-bunker'] .az-footer[data-footer-surface='light'] .az-footer__zone:has(.azz-footer-contact), html[data-theme='radio-bunker'] .az-footer[data-footer-surface='accent'] .az-footer__zone:has(.azz-footer-contact), html[data-theme='radio-bunker'] .az-footer[data-footer-surface='dark'] .az-footer__zone:has(.azz-footer-contact), body[data-theme='radio-bunker'] .az-footer[data-footer-surface='light'] .az-footer__zone:has(.azz-footer-contact), body[data-theme='radio-bunker'] .az-footer[data-footer-surface='accent'] .az-footer__zone:has(.azz-footer-contact), body[data-theme='radio-bunker'] .az-footer[data-footer-surface='dark'] .az-footer__zone:has(.azz-footer-contact), .theme-root[data-theme='radio-bunker'] .az-footer[data-footer-surface='light'] .az-footer__zone:has(.azz-footer-contact), .theme-root[data-theme='radio-bunker'] .az-footer[data-footer-surface='accent'] .az-footer__zone:has(.azz-footer-contact), .theme-root[data-theme='radio-bunker'] .az-footer[data-footer-surface='dark'] .az-footer__zone:has(.azz-footer-contact) { --footer-contact-border-width: 0; --footer-contact-border-padding: 0; } } html[data-theme='radio-bunker'] .az-footer[data-footer-surface='light'] .azz-footer-contact, html[data-theme='radio-bunker'] .az-footer[data-footer-surface='dark'] .azz-footer-contact, body[data-theme='radio-bunker'] .az-footer[data-footer-surface='light'] .azz-footer-contact, body[data-theme='radio-bunker'] .az-footer[data-footer-surface='dark'] .azz-footer-contact, .theme-root[data-theme='radio-bunker'] .az-footer[data-footer-surface='light'] .azz-footer-contact, .theme-root[data-theme='radio-bunker'] .az-footer[data-footer-surface='dark'] .azz-footer-contact { --footer-contact-email-color: #ffffff; --footer-contact-subtitle-color: #ffffff; } /* D10.42.5 — Contexte de surface propre au module (`data-surface` posé sur `.azz-footer-contact` lui-même par footerContact.ts quand l'admin choisit autre chose que « Hérité »), indépendant du `data-footer-surface` global ci-dessus. Même règle (bordure rouge partout, texte blanc sauf en accent) mais reposée sur le bloc lui-même pour le texte, et sur la zone (via `:has()`) pour la bordure, même principe que ci-dessus. `.az-footer` est répété ici SANS la condition `[data-footer-surface=...]` pour égaler la spécificité des règles précédentes (même nombre de classes/attributs) — combiné à un ordre de cascade plus tardif dans ce fichier, ce choix explicite gagne toujours sur le contexte hérité de la zone, quel qu'il soit. */ html[data-theme='radio-bunker'] .az-footer .az-footer__zone:has(.azz-footer-contact[data-surface='light']), html[data-theme='radio-bunker'] .az-footer .az-footer__zone:has(.azz-footer-contact[data-surface='accent']), html[data-theme='radio-bunker'] .az-footer .az-footer__zone:has(.azz-footer-contact[data-surface='dark']), body[data-theme='radio-bunker'] .az-footer .az-footer__zone:has(.azz-footer-contact[data-surface='light']), body[data-theme='radio-bunker'] .az-footer .az-footer__zone:has(.azz-footer-contact[data-surface='accent']), body[data-theme='radio-bunker'] .az-footer .az-footer__zone:has(.azz-footer-contact[data-surface='dark']), .theme-root[data-theme='radio-bunker'] .az-footer .az-footer__zone:has(.azz-footer-contact[data-surface='light']), .theme-root[data-theme='radio-bunker'] .az-footer .az-footer__zone:has(.azz-footer-contact[data-surface='accent']), .theme-root[data-theme='radio-bunker'] .az-footer .az-footer__zone:has(.azz-footer-contact[data-surface='dark']) { --footer-contact-border-width: 3px; --footer-contact-border-color: var(--bunker-red); --footer-contact-border-padding: 1rem; } html[data-theme='radio-bunker'] .az-footer .azz-footer-contact[data-surface='light'], html[data-theme='radio-bunker'] .az-footer .azz-footer-contact[data-surface='dark'], body[data-theme='radio-bunker'] .az-footer .azz-footer-contact[data-surface='light'], body[data-theme='radio-bunker'] .az-footer .azz-footer-contact[data-surface='dark'], .theme-root[data-theme='radio-bunker'] .az-footer .azz-footer-contact[data-surface='light'], .theme-root[data-theme='radio-bunker'] .az-footer .azz-footer-contact[data-surface='dark'] { --footer-contact-email-color: #ffffff; --footer-contact-subtitle-color: #ffffff; } /* Remise à zéro explicite pour l'accent : sans ça, un footer globalement clair/sombre (qui force déjà le texte en blanc via les règles ancestor-based ci-dessus) laisserait ce blanc « fuiter » sur un bloc explicitement choisi en accent, qui doit garder sa couleur de texte normale (--color-accent), non demandée en blanc. */ html[data-theme='radio-bunker'] .az-footer .azz-footer-contact[data-surface='accent'], body[data-theme='radio-bunker'] .az-footer .azz-footer-contact[data-surface='accent'], .theme-root[data-theme='radio-bunker'] .az-footer .azz-footer-contact[data-surface='accent'] { --footer-contact-email-color: var(--color-accent); --footer-contact-subtitle-color: var(--footer-text); } /* Ambiances Boogaloo : profondeur générique des surfaces, sans ciblage de module. D10.36.3 — La propriété structurelle (background-image) vit désormais dans cms-bridge.css sur [data-surface='dark'|'accent'] ; un preset ne fournit plus que la VALEUR du token (voir DECISIONS.md D10.36.3). Déclarée dans le bloc de tokens principal ci-dessus (même sélecteur triple html/body/ .theme-root), pas ici. */ /* Retour terrain — module Accordéon (variante cartes, ex: page « À propos », Biographie/Événementiels/Soirées privées) : gouttière horizontale --az-space-5 (2rem/32px) jugée excessive sur mobile. --az-space-5 est un token d'échelle générique partagé par 7 autres usages sans rapport (.az-stack--md, .content-panel, .player-placeholder, séparateur...) : le réduire globalement les affecterait tous. --accordion-gutter-inline (indirection dédiée, tokens/_foundation.css) permet de ne toucher QUE ce module — le preset ne fait que fournir la valeur mobile, la consommation structurelle (padding-inline) reste dans le framework (_accordion.css). */ @media (max-width: 720px) { html[data-theme='radio-bunker'], body[data-theme='radio-bunker'], .theme-root[data-theme='radio-bunker'] { --accordion-gutter-inline: calc(var(--az-space-5) / 4); /* D10.64 — Retour terrain : titres des cartes Services trop lourds sur mobile (gras + taille desktop), certains écrans les font passer sur 2 lignes de façon peu lisible. Desktop inchangé (1rem/600, hors de ce bloc) — mobile seulement, plus léger. */ --services-item-title-font-size: .8rem; --services-item-title-font-weight: 400; } } /* Radio Bunker — angle en biseau sur les boutons PLEINS (Primary uniquement, pas Secondary/Outline — même partition que la maquette : « plaque rivetée » coupée, pas un simple rectangle), via le token --button-primary-clip-path (tokens/_foundation.css, branché sur cms-bridge.css .azz-button--primary) — cible TOUT bouton primaire du site (Bannière, CTA, Services, Pricing...), pas seulement le Hero : un seul vocabulaire de bouton plein sur tout Radio Bunker plutôt qu'un rendu différent par module. border-color = même couleur que le fond sur ce preset (--brand-accent des deux côtés, surface light/dark) : le bord ne suit pas nativement la découpe (CSS ne mitre pas un border sur un clip-path), mais invisible ici puisque bord et fond sont confondus — aucun artefact à corriger. */ /* Radio Bunker — kicker de la Bannière : voir les tokens --hero-kicker-* réglés en haut de ce fichier, dans le bloc de tokens principal. */ /* Radio Bunker — le lecteur de flux (kind 'stream') est désormais un vrai composant JS (cms-bridge.css .azz-player--stream, enhancers/ audioPlayer.ts), plus le