/* ========================================================================= Bandeau France Rénov' — mention obligatoire au 01/10/2026 Arrêté du 07/07/2026, JORFTEXT000054569418. Module autonome : aucune dépendance à un thème ni à un constructeur. Tout ce qui est réglable passe par des variables CSS, pour que le même fichier serve sur rezovert.fr (Kadence) et sur groupe-dual-energy.fr (ecohub / Elementor) sans être modifié. Valeurs reportées le 23/09/2026 depuis la charte d'application 2026 (agence 4août, mai 2026), page citée à chaque fois. ========================================================================= */ :root { /* Fond de la bande. L'arrêté exige que la mention soit « clairement distincte du contenu publicitaire ». Un fond légèrement teinté, différent du fond de page, est ce qui produit cette distinction. Valeur par défaut : le gris bleuté du design system Dual Energy. Sur rezovert.fr, surcharger avec le gris clair du thème. */ --fr-bandeau-fond: #F4F7FA; /* Couleur du texte de repli et du lien. Doit tenir AA sur --fr-bandeau-fond. */ --fr-bandeau-texte: #022E69; /* Filet de séparation, optionnel. Mettre à transparent pour l'enlever. */ --fr-bandeau-filet: #E6EAF0; /* Gouttière latérale. 56px correspond au gabarit des maquettes (1440). */ --fr-bandeau-gouttiere: 56px; --fr-bandeau-gouttiere-mobile: 20px; /* TODO(thème) : aligner sur la gouttière réelle de chaque site. */ /* Respiration verticale. */ --fr-bandeau-padding-v: 22px; --fr-bandeau-padding-v-mobile: 18px; /* Largeur d'affichage de l'asset sur ordinateur. Charte p. 25 : hauteur minimale de l'encart 150 px. L'asset 1x fait 701×151 : affiché à sa taille naturelle, il tient la règle. Ne pas descendre sous 701px tant que la place le permet. */ --fr-bandeau-image-max: 701px; } /* ------------------------------------------------------------------------- La bande ---------------------------------------------------------------------- */ .fr-bandeau { /* Pleine largeur, quel que soit le conteneur parent du thème. */ display: block; width: 100%; box-sizing: border-box; background: var(--fr-bandeau-fond); border-top: 1px solid var(--fr-bandeau-filet); border-bottom: 1px solid var(--fr-bandeau-filet); padding: var(--fr-bandeau-padding-v) var(--fr-bandeau-gouttiere); margin: 0; /* Contre Complianz et tout élément sticky ou flottant du thème. La bande est dans le flux, donc elle n'a pas besoin d'un z-index élevé : il s'agit seulement de garantir qu'elle crée son propre contexte d'empilement et ne passe pas SOUS un décor en position absolue. L'arrêté interdit que la mention soit « masquée ni obscurcie ». ⚠️ À vérifier sur site : le bandeau cookies Complianz est en position fixed avec un z-index élevé — il recouvre le bas de la fenêtre, pas le bandeau France Rénov' qui est en haut de page, mais le contrôle se fait à l'œil, bandeau cookies affiché ET accepté. */ position: relative; z-index: 1; /* Aucune animation, aucune transition : la mention doit être visible dès le premier rendu, pas après une apparition. */ animation: none !important; transition: none !important; opacity: 1 !important; visibility: visible !important; } /* Alignement : picto à gauche, texte à droite, centrés verticalement. En rendu image, l'asset officiel contient déjà picto ET texte — le conteneur se contente alors de le centrer. */ .fr-bandeau__lien { display: flex; align-items: center; justify-content: center; gap: 16px; text-decoration: underline; color: var(--fr-bandeau-texte); } .fr-bandeau__lien:hover, .fr-bandeau__lien:focus-visible { color: var(--fr-bandeau-texte); text-decoration: underline; } /* Cible de focus visible au clavier : la mention est un lien obligatoire, elle doit être atteignable et vue comme telle. */ .fr-bandeau__lien:focus-visible { outline: 2px solid var(--fr-bandeau-texte); outline-offset: 3px; } /* ------------------------------------------------------------------------- Rendu image — l'asset officiel ---------------------------------------------------------------------- */ .fr-bandeau__image { display: block; /* Jamais rogné, jamais déformé : le ratio d'origine est conservé et l'image se contente de rétrécir. C'est une exigence de la charte, pas un confort. */ width: 100%; max-width: var(--fr-bandeau-image-max); height: auto; object-fit: contain; } /* ------------------------------------------------------------------------- Rendu texte — repli, tant que le kit officiel n'est pas déposé ---------------------------------------------------------------------- */ .fr-bandeau__texte { margin: 0; color: var(--fr-bandeau-texte); font-size: 16px; line-height: 1.55; /* Le texte de repli hérite de la police du thème : il n'y a pas de police imposée pour ce cas, et imposer la nôtre jurerait avec chaque site. */ font-family: inherit; } .fr-bandeau__texte .fr-bandeau__lien { display: inline; } /* ------------------------------------------------------------------------- Responsive — jamais rogné, jamais déformé ---------------------------------------------------------------------- */ @media (max-width: 781px) { /* point de rupture WordPress par défaut */ .fr-bandeau { padding: var(--fr-bandeau-padding-v-mobile) var(--fr-bandeau-gouttiere-mobile); } .fr-bandeau__lien { gap: 12px; } .fr-bandeau__texte { font-size: 15px; } /* Charte p. 25 : « Sur mobile ou tablette, l'encart prend la pleine largeur support. » Les exemples mobiles des p. 25-26 montrent le même asset horizontal, en pleine largeur : pas de variante verticale. */ .fr-bandeau__image { max-width: 100%; } } /* ------------------------------------------------------------------------- Impression — le bandeau sort à l'impression ---------------------------------------------------------------------- */ @media print { .fr-bandeau { /* Explicite : certains thèmes masquent les