/** * Barre d'information — le bandeau collé tout en haut du site. * * CE QUI SE JOUE ICI, ET POURQUOI C'EST DÉLICAT. * La barre est en `position: fixed` : elle sort du flux, donc elle recouvrirait * le haut de la page si on ne poussait rien. Deux choses doivent descendre de sa * hauteur exacte — le corps de la page, et l'en-tête COLLANT d'Elementor, qui se * fixe lui aussi à `top: 0` et viendrait se superposer. * * Cette hauteur n'est pas connaissable d'avance : elle dépend du texte, de la * largeur de l'écran et du repli. C'est ck-barre-info.js qui la mesure et la * publie dans `--ck-barre-h`. Ici, on ne fait que la consommer. * * Les couleurs viennent des réglages, en `style=""` sur la barre. Les valeurs * ci-dessous ne sont que les points de départ. */ :root { /* Hauteur réelle, écrite par le script. 0 tant qu'il n'a pas mesuré : sans barre rendue, rien ne bouge. */ --ck-barre-h: 0px; /* Ce qui est DÉJÀ collé au-dessus de nous : la barre d'admin WordPress. */ --ck-barre-top: 0px; } .ck-barre-info { --ckb-fond: #0b1726; --ckb-texte: #fffcf8; --ckb-fz: 15px; --ckb-pad: 10px; --ckb-padx: 20px; /* `sticky`, PAS `fixed`. En fixed la barre sortait du flux : il fallait pousser `body` d'une hauteur mesurée, et une mesure fausse laissait un énorme espace blanc entre la barre et l'en-tête — constaté sur un site réel, body à 260px de marge pour une barre d'une cinquantaine. En sticky elle occupe sa vraie place, plus rien à mesurer ni à pousser, et elle reste quand même visible au défilement. */ /* Collante par défaut, et RÉGLABLE PAR APPAREIL : sur un téléphone, un bandeau qui ne part jamais mange une part sérieuse de l'écran. Le réglage écrit `--ckb-pos: static` sur les paliers décochés — la barre reprend alors sa place dans le flux et s'en va au défilement. */ position: var(--ckb-pos, sticky); top: var(--ck-barre-top); /* Au-dessus de l'en-tête collant d'Elementor (z-index 99 chez lui), en dessous de la barre d'admin de WordPress (99999). */ z-index: 99998; box-sizing: border-box; background: var(--ckb-fond); color: var(--ckb-texte); padding: var(--ckb-pad) var(--ckb-padx); font-size: var(--ckb-fz); line-height: 1.5; } /* --- Tiroir de menu ouvert : la barre passe DESSOUS ---------------------- ⚠️ LE DÉFAUT N'ÉTAIT PAS UN Z-INDEX TROP FAIBLE CHEZ LE MENU. Mesuré sur scierie.cercledesign.fr en mobile, tiroir ouvert : panneau du menu z-index: 100000 ↳ enfermé dans un DIV z-index: 1 ← c'est CE 1 qui compte ↳ dans le HEADER z-index: 100 barre d'information z-index: 99998 (frère du header) Le panneau annonce 100000, mais un ancêtre positionné avec un z-index crée un CONTEXTE D'EMPILEMENT : face à la barre, le panneau ne pèse que le poids de son conteneur. Monter encore le z-index du menu n'y aurait rien changé — c'est la barre qui doit s'effacer. `ck-panel-open` est posée sur par le menu lui-même, le temps que le tiroir est ouvert : la règle ne vit donc que pendant ce temps-là. */ html.ck-panel-open .ck-barre-info { z-index: 0; } /* Hors de sa fenêtre de dates au moment du rendu. Le script la rouvre le jour venu ; d'ici là elle ne prend aucune place et ne se lit pas. */ .ck-barre-info.is-hors-dates { display: none; } /* --- Les zones ----------------------------------------------------------- La barre est une grille dont les colonnes viennent du réglage (« 20-60-20 », « 80-10-10 »…). Chaque zone garde sa place même vide : sinon retirer le bouton ferait glisser tout le reste, et les proportions choisies ne voudraient plus rien dire. */ .ck-barre-info__dedans { display: grid; grid-template-columns: var(--ckb-cols, 1fr); align-items: center; gap: 1em; /* PLEINE LARGEUR par défaut. Le 1140px d'avant venait d'une habitude de gabarit, pas d'un besoin : un bandeau d'annonce court sur toute la page. Le réglage « Largeur du contenu » remet une limite pour qui en veut une. */ max-width: var(--ckb-maxw, none); margin: 0 auto; } .ck-barre-info__zone { display: flex; align-items: center; gap: 0.75em; min-width: 0; } /* Chaque zone se justifie vers son bord : la gauche à gauche, le centre au centre, la droite à droite. C'est ce qu'on attend d'un bandeau, et ça évite un réglage d'alignement de plus. */ /* `justify-content` place la BOÎTE, `text-align` place le TEXTE dedans. Sans le second, un message sur deux lignes restait centré dans une zone alignée à gauche — « partout où je le mets il est centré ». */ /* L'alignement du TEXTE se règle à part. Il gagne sur celui de la zone : un utilisateur qui écrit « à gauche » doit voir « à gauche », sans avoir à comprendre qu'une zone porte aussi un alignement. */ .ck-barre-info__texte { text-align: var(--ckb-align, inherit); width: 100%; } .ck-barre-info__zone--gauche { justify-content: flex-start; text-align: left; } .ck-barre-info__zone--centre { justify-content: center; text-align: center; } .ck-barre-info__zone--droite { justify-content: flex-end; text-align: right; } .ck-barre-info__zone--quatre { justify-content: flex-end; text-align: right; } /* Sous 767px la grille se replie : trois colonnes de 20 % sur un téléphone ne laissent la place à rien. Tout passe l'un sous l'autre, centré. */ @media (max-width: 767px) { .ck-barre-info__dedans { grid-template-columns: 1fr; gap: 0.5em; } .ck-barre-info__zone { justify-content: center; text-align: center; } } /* LA TAILLE DOIT ATTEINDRE LE TEXTE, PAS SEULEMENT SON CONTENEUR. Mesuré : la barre était bien à 15px, mais le

dedans rendait à 16px — le thème habille `p` et gagne contre une taille posée sur un ancêtre. On la repose donc sur les éléments eux-mêmes, avec deux classes pour passer devant. */ .ck-barre-info .ck-barre-info__texte, .ck-barre-info .ck-barre-info__texte p, .ck-barre-info .ck-barre-info__texte span, .ck-barre-info .ck-barre-info__texte strong, .ck-barre-info .ck-barre-info__texte a { font-size: var(--ckb-fz); line-height: 1.4; } .ck-barre-info__texte > :first-child { margin-top: 0; } .ck-barre-info__texte > :last-child { margin-bottom: 0; } .ck-barre-info__texte a { color: inherit; text-decoration: underline; } /* Le bouton porte son aspect CercleKit (Création › Buttons) : on ne lui impose aucune couleur, on le ramène juste à la taille d'un bandeau. */ .ck-barre-info__bouton { margin: 0; } .ck-barre-info .ck-btn { font-size: 0.9em; } /* Plus AUCUNE poussée de `body` : la barre est dans le flux, elle prend sa place toute seule. Ne reste que le décalage des éléments qui se collent eux aussi en haut — posé à l'exécution par ck-barre-info.js, qui sait lesquels le sont vraiment. */ @media (max-width: 767px) { .ck-barre-info__dedans { gap: 0.6em; } }