/* * Onglets de la page campagne * ============================================================================ * Deux familles ici : * * .hr-onglets-* la barre et les panneaux * .hr-cpo-* le contenu propre aux onglets Contreparties et News * * Le préfixe hr-cpo- n'est pas une coquetterie. Trois scripts déjà en place * (contreparties-ordre, contrepartie-stock-front, campagne-date-debut-gate) * balaient la page entière sur les noms du cœur — .hr-contrepartie-card, * .hr-contreparties-grid, .hr-cp-une-zone. Nos cartes doivent leur être * invisibles, donc elles ne portent aucun de ces noms, et les règles de mise en * forme correspondantes sont reprises ici explicitement. * * ---------------------------------------------------------------------------- * ACCORD AVEC LA PAGE * ---------------------------------------------------------------------------- * Tout ce qui suit puise dans les variables déclarées par haeros-core * (single-campagnes.css) : --hr-primary, --hr-dark, --hr-grey, --hr-light-grey, * --hr-white et l'échelle --hr-gap-*. Les valeurs en repli ne servent que si la * feuille du cœur n'a pas été chargée. Le jour où la charte bouge là-bas, les * onglets suivent sans qu'on y touche. * * La page a une grammaire simple, qu'on reprend telle quelle : des titres * centrés, beaucoup de blanc, de l'air entre les blocs, et l'or comme unique * accent — jamais décoratif, toujours porteur de sens. * * La barre d'onglets n'est donc pas une barre : c'est une ligne de mots posée * sur le blanc. Pas de fond, pas de cadre, pas de bouton dessiné, pas de filet * de séparation. Le seul trait de toute la rangée est celui, or, sous le * libellé ouvert — exactement comme « Biographie / Extrait 1 » plus bas. */ /* ================================================== La barre d'onglets ================================================== Reprise mot pour mot de la navigation des extraits (« Biographie / Extrait 1 / … »), déclarée dans haeros-core/campagne/single-campagnes.css aux lignes 396-422 : rangée centrée, écart de --hr-gap-xxl, libellés de 16 px en 500, gris au repos, et l'onglet actif en or souligné d'un filet or de 2 px. Ce motif existe déjà sur la page et les lecteurs l'ont appris là-bas. En introduire un second, si voisin soit-il, aurait obligé chacun à vérifier que les deux se manipulent pareil. Les valeurs viennent des mêmes variables : si la charte bouge dans le cœur, les deux rangées bougent ensemble. Seul ajout : le libellé s'épaissit au survol. Le cœur se contente d'assombrir la couleur ; le gras a été demandé, et il se superpose sans rien contredire. ================================================== */ /* Fond blanc, et rien d'autre : ni bordure, ni cadre, ni bouton dessiné. Le seul trait de toute la rangée est le filet or sous le libellé ouvert. Le blanc est posé explicitement, il n'est pas hérité : sans lui, c'est le crème de la page qui remontait et dessinait une bande colorée en travers, juste sous la bannière. La hauteur se calcule au plus juste — 16 px au-dessus du texte, 14 en dessous du filet. Elle valait près de 140 px pour deux mots : une bande vide qui séparait la bannière du contenu sans rien dire. L'air entre les onglets et ce qu'ils ouvrent est donné par le panneau lui-même, plus bas. */ .hr-onglets { background-color: var(--hr-white, #ffffff); border: none; padding: 16px 0 14px; } .hr-onglets__liste { display: flex; justify-content: center; gap: var(--hr-gap-xxl, 64px); flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 0 16px; } /* ⚠️ Les !important ne sont pas de la paresse. Le thème du site habille largement les éléments cliquables — fond plein, coins arrondis, ombre — et l'a fait avec assez de poids pour écraser une règle ordinaire. Nos onglets sont ressortis en pastilles dorées. Passer des