/* Surcharges globales Belgrano. Elementor garde la main sur la mise en page ; ici : fondamentaux typographiques, couleurs par défaut, éléments de territoire. */ body { font-family: var(--bg-font-texte); color: var(--bg-texte); background-color: var(--bg-fond); } h1, h2, h3, .elementor-heading-title { font-family: var(--bg-font-titre); font-weight: 400; letter-spacing: 0.02em; } a { color: var(--bg-lien); } ::selection { background: var(--bg-sable); color: var(--bg-nuit); } /* Territoire : classes utilitaires posables sur les sections Elementor */ .bg-fond-nuit { background-color: var(--bg-nuit); color: var(--bg-ivoire); } .bg-fond-bleu { background-color: var(--bg-bleu); color: var(--bg-blanc); } .bg-fond-sable { background-color: var(--bg-sable); color: var(--bg-nuit); } .bg-fond-ivoire { background-color: var(--bg-ivoire); color: var(--bg-nuit); } .bg-titre-espace { text-transform: uppercase; letter-spacing: 0.12em; } /* Bandeau défilant d'actualités (shortcode [belgrano_ticker]) */ .bg-ticker { display: flex; align-items: stretch; overflow: hidden; font-family: var(--bg-font-texte); } .bg-ticker__label { flex: none; display: flex; align-items: center; padding: 14px 24px; background: var(--bg-sable); color: var(--bg-nuit); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .bg-ticker__viewport { flex: 1; overflow: hidden; display: flex; align-items: center; } .bg-ticker__track { display: flex; gap: 48px; white-space: nowrap; padding-left: 48px; animation: bg-ticker-scroll 60s linear infinite; } .bg-ticker:hover .bg-ticker__track { animation-play-state: paused; } .bg-ticker__item { display: inline-flex; align-items: baseline; gap: 12px; color: var(--bg-blanc); text-decoration: none; font-size: 16px; font-weight: 500; } /* 13 octobre : lisibilité du bandeau (retour Martin) : blanc pur forcé face aux couleurs de lien d'Elementor, corps 16 px, date Sable en 13 px */ .bg-ticker .bg-ticker__item, .bg-ticker .bg-ticker__item span { color: var(--bg-blanc) !important; opacity: 1; } .bg-ticker__item time { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; color: var(--bg-sable) !important; } .bg-ticker__item:hover span { text-decoration: underline; text-underline-offset: 3px; } @keyframes bg-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .bg-ticker__track { animation: none; } } /* Home : vignette de campagne décalée sur l'aplat (territoire de la charte) */ .bg-vignette img { display: block; width: 100%; height: auto; border-radius: 0; box-shadow: 0 24px 60px rgba(3, 34, 37, 0.25); } @media (min-width: 1025px) { .bg-vignette--decalee { margin-bottom: -96px; } } .bg-carte-plateforme { background: var(--bg-blanc); transition: transform .25s ease, box-shadow .25s ease; } .bg-carte-plateforme:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(3, 34, 37, 0.10); } /* ------------------------------------------------------------------ Titres : partie en italique, surtitre avec tiret (brandbook) ------------------------------------------------------------------ */ .elementor-heading-title em, .bg-italique { font-style: italic; font-weight: 400; } .bg-surtitre .elementor-heading-title::after { content: ""; display: block; width: 28px; height: 1px; background: currentColor; margin: 12px 0 0; opacity: .8; } .bg-surtitre.bg-centre .elementor-heading-title::after { margin-left: auto; margin-right: auto; } /* Liserés (barre de couleur en bas d'un bloc, cf. brandbook) */ .bg-lisere-bleu { border-bottom: 6px solid var(--bg-bleu); } .bg-lisere-sable { border-bottom: 6px solid var(--bg-sable); } .bg-lisere-vert { border-bottom: 6px solid var(--bg-vert-clair); } .bg-vignette--lisere img { border-bottom: 8px solid var(--bg-sable); } /* ------------------------------------------------------------------ Motifs : le signe posé en grand, coupé par les bords, une section ciblée à la fois ------------------------------------------------------------------ */ .bg-motif { position: relative; overflow: hidden; } .bg-motif::after { content: ""; position: absolute; inset: auto; pointer-events: none; background-repeat: no-repeat; background-size: contain; z-index: 1; } .bg-motif > * { position: relative; z-index: 2; } .bg-motif > .elementor-background-video-container { z-index: 0; } /* Hero : trame du signe bleu foncé ton sur ton, plaquée à droite derrière la vignette (brandbook) */ .bg-motif--hero::after { right: 0; top: 0; bottom: 0; width: 38%; background-image: url("../motifs/motif-bleu-fonce-plein.svg"); background-size: 150px; background-position: right top; background-repeat: repeat; opacity: .28; -webkit-mask-image: linear-gradient(to right, transparent, #000 60%); mask-image: linear-gradient(to right, transparent, #000 60%); } /* Portefeuille (nuit) : grappe de quatre signes en deux verts, à droite derrière les cartes (brandbook) */ .bg-motif--portefeuille::after { right: -60px; top: 50%; transform: translateY(-50%); width: 760px; height: 760px; background-image: url("../motifs/motif-grappe-vert.svg"); opacity: 1; } /* Présentation (ivoire) : contour orange coupé en bas à gauche (brandbook) */ .bg-motif--presentation::after { left: -140px; bottom: -220px; width: 560px; height: 560px; background-image: url("../motifs/motif-orange-contour.svg"); opacity: .8; } /* Chiffres clés (ivoire) : pas de motif, les cartes portent la section */ /* Trame : signe répété en bande à droite (cf. brandbook) */ .bg-motif--trame::after { right: 0; top: 0; bottom: 0; width: 34%; background-image: url("../motifs/motif-bleu-fonce-plein.svg"); background-size: 160px; background-repeat: repeat; opacity: .5; } /* Footer (ivoire) : contour orange coupé à droite */ .bg-motif--footer::after { right: -160px; bottom: -200px; width: 560px; height: 560px; background-image: url("../motifs/motif-orange-contour.svg"); opacity: .6; } @media (max-width: 767px) { .bg-motif--portefeuille::after, .bg-motif--footer::after { transform: scale(.6); transform-origin: inherit; } .bg-motif--hero::after { width: 100%; opacity: .25; } } /* ------------------------------------------------------------------ En-tête : transparent en haut de page (logo et menu blancs), blanc dès le défilement (logo bleu, menu nuit). Critère : classe bg-scrolled posée sur par assets/js/header.js, indépendante du collage Elementor. ------------------------------------------------------------------ */ @media (min-width: 768px) { .elementor-location-header { position: absolute; top: 0; left: 0; right: 0; z-index: 100; } html:not(.bg-scrolled) .fondBlanc { background-color: transparent !important; box-shadow: none !important; } html:not(.bg-scrolled) .fondBlanc a.elementor-item { color: var(--bg-blanc) !important; } html:not(.bg-scrolled) .fondBlanc .loupe .elementor-icon, html:not(.bg-scrolled) .fondBlanc .loupe i { color: var(--bg-blanc) !important; fill: var(--bg-blanc) !important; } html:not(.bg-scrolled) .fondBlanc .logoDore { display: none !important; } html:not(.bg-scrolled) .fondBlanc .logoBlanc { display: flex !important; } } .fondBlanc .logoBlanc { display: none; } html.bg-scrolled .fondBlanc, .fondBlanc { background-color: var(--bg-blanc); box-shadow: 0 16px 10px rgba(3, 34, 37, 0.03); transition: background-color .25s ease; } html.bg-scrolled .fondBlanc .logoDore { display: block !important; } html.bg-scrolled .fondBlanc a.elementor-item { color: var(--bg-nuit) !important; } html.bg-scrolled .fondBlanc .loupe .elementor-icon, html.bg-scrolled .fondBlanc .loupe i { color: var(--bg-nuit) !important; fill: var(--bg-nuit) !important; } /* Liseré vertical à gauche d'un paragraphe (brandbook, manifeste) */ .bg-lisere-gauche { border-left: 1px solid rgba(3, 34, 37, 0.25); padding-left: 24px; } .bg-lisere-gauche--sable { border-left-color: var(--bg-sable); } /* Portefeuille (brandbook « des marques d'excellence ») : fond nuit, titre capitales vert clair, carte blanche avec liseré vert */ .bg-titre-capitales .elementor-heading-title { font-family: var(--bg-font-texte); font-weight: 300; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.15; } .bg-carte-blanche { background: var(--bg-blanc); } .bg-carte-plateforme { background: var(--bg-blanc); transition: transform .25s ease, box-shadow .25s ease; } .bg-carte-plateforme:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(3, 34, 37, 0.35); } /* Liserés sur les blocs repris : compteurs des chiffres clés (sable) et cartes d'actualités (bleu) */ .bg-actus .e-loop-item { border-bottom: 6px solid var(--bg-bleu); } /* Présentation : carte blanche décalée, vignette qui chevauche */ .bg-carte-presentation { background: var(--bg-blanc); box-shadow: 0 16px 48px rgba(3, 34, 37, 0.08); } @media (min-width: 1025px) { .bg-vignette--chevauche { margin-left: -56px !important; width: calc(100% + 56px) !important; max-width: none !important; flex-shrink: 0; } .bg-vignette--chevauche img { width: 100% !important; max-width: none !important; } } /* ------------------------------------------------------------------ Boutons : un seul style sur tout le site, celui de la home actuelle : texte en capitales Outfit 800 12 px, souligné d'un filet, sans fond. La couleur vient du réglage du widget. ------------------------------------------------------------------ */ .elementor-widget-button .elementor-button { background: transparent !important; border: 0 !important; border-bottom: 1px solid currentColor !important; border-radius: 0 !important; padding: 0 0 5px !important; box-shadow: none !important; letter-spacing: 0.06em; } .elementor-widget-button .elementor-button:hover { border-bottom-color: transparent !important; } .elementor-widget-button .elementor-button .elementor-button-text::after { content: "\2192"; display: inline-block; margin-left: 8px; transition: transform .2s ease; } .elementor-widget-button .elementor-button:hover .elementor-button-text::after { transform: translateX(4px); } .elementor-widget-button .elementor-button .elementor-button-icon { display: none !important; } /* Liserés : couleurs de la charte uniquement */ .bg-lisere-orange { border-bottom: 6px solid var(--bg-orange); } .bg-lisere-gauche--orange { border-left-color: var(--bg-orange); } .bg-lisere-gauche--sable { border-left-color: var(--bg-sable); } /* Trame du signe en filigrane très léger sur fond blanc (chiffres clés) */ .bg-motif--trame-blanche::after { inset: 0; width: auto; height: auto; background-image: url("../motifs/motif-bleu-plein.svg"); background-size: 460px; background-position: -140px -120px; background-repeat: repeat; opacity: .05; -webkit-mask-image: linear-gradient(135deg, #000 20%, transparent 85%); mask-image: linear-gradient(135deg, #000 20%, transparent 85%); } /* Actualités sur bleu : signe bleu foncé en filigrane, coupé en bas à gauche */ .bg-motif--actus::after { left: -160px; bottom: -200px; width: 520px; height: 520px; background-image: url("../motifs/motif-bleu-fonce-plein.svg"); opacity: .35; } /* Centrage (la maquette centre presque tout) */ .bg-centre, .bg-centre .elementor-heading-title, .bg-centre .elementor-widget-text-editor, .bg-centre .bg-centre .elementor-widget-image img { margin-left: auto; margin-right: auto; object-position: center; } .bg-centre .elementor-widget-button .elementor-button-wrapper { text-align: center; } .bg-centre .bg-lisere-gauche { border-left: 0; padding-left: 0; } .bg-carte-plateforme.bg-centre .elementor-widget-image { text-align: center; } /* ------------------------------------------------------------------ Chiffres clés : cartes blanches, liseré de 6 px d'une couleur de la charte par carte (variables Elementor forcées) ------------------------------------------------------------------ */ .bg-chiffres .bg-carte-chiffre { background: var(--bg-blanc) !important; padding: 32px 24px 28px !important; box-shadow: 0 14px 36px rgba(3, 34, 37, 0.10); text-align: center; border-bottom-style: solid !important; border-bottom-width: 6px !important; --border-bottom-width: 6px; } .bg-chiffres .bg-carte-chiffre.bg-c1 { border-bottom-color: var(--bg-bleu-clair) !important; } .bg-chiffres .bg-carte-chiffre.bg-c2 { border-bottom-color: var(--bg-bleu) !important; } .bg-chiffres .bg-carte-chiffre.bg-c3 { border-bottom-color: var(--bg-bleu-moyen) !important; } .bg-chiffres .bg-carte-chiffre.bg-c4 { border-bottom-color: var(--bg-bleu-fonce) !important; } .bg-chiffres .bg-carte-chiffre > .elementor-element { width: 100% !important; max-width: 100%; text-align: center; } .bg-chiffres .bg-carte-chiffre .elementor-widget-image { text-align: center; } .bg-chiffres .bg-carte-chiffre img { width: 52px; height: auto; margin: 0 auto 14px; display: block; } .bg-chiffres .elementor-counter, .bg-chiffres .elementor-counter-title { text-align: center; } .bg-chiffres .elementor-counter-number-wrapper, .bg-chiffres .elementor-counter-number-prefix, .bg-chiffres .elementor-counter-number-suffix { color: var(--bg-nuit) !important; } .bg-chiffres .elementor-counter-title { color: var(--bg-bleu-fonce) !important; } .bg-chiffres .elementor-heading-title { color: var(--bg-nuit) !important; } .bg-chiffres .elementor-divider-separator { border-color: var(--bg-sable) !important; } .bg-chiffres .elementor-widget-button .elementor-button { color: var(--bg-nuit) !important; } .bg-chiffres .elementor-widget-counter { border: 0 !important; padding: 0 !important; } /* ------------------------------------------------------------------ Actualités sur bleu : titres blancs ; cartes = fond blanc, le gabarit « Communiqué de presse » (fond nuit) est neutralisé ici ------------------------------------------------------------------ */ .bg-actus .elementor-widget-heading .elementor-heading-title { color: var(--bg-nuit) !important; } .bg-actus .elementor-widget-text-editor:not(.e-loop-item *) { color: var(--bg-nuit) !important; } .bg-actus .elementor-divider-separator { border-color: var(--bg-sable) !important; } .bg-actus .elementor-widget-button:not(.e-loop-item *) .elementor-button { color: var(--bg-nuit) !important; } .bg-actus .e-loop-item { background: var(--bg-blanc) !important; border-bottom: 6px solid var(--bg-sable); box-shadow: 0 14px 36px rgba(3, 34, 37, 0.18); } .bg-actus .e-loop-item .e-con { background-color: var(--bg-blanc) !important; --background-color: var(--bg-blanc); } .bg-actus .e-loop-item .elementor-heading-title, .bg-actus .e-loop-item .elementor-heading-title a, .bg-actus .e-loop-item .elementor-widget-theme-post-title a { color: var(--bg-nuit) !important; } .bg-actus .e-loop-item .elementor-post-info, .bg-actus .e-loop-item .elementor-post-info a, .bg-actus .e-loop-item .elementor-icon-list-text { color: var(--bg-bleu-fonce) !important; } .bg-actus .e-loop-item .elementor-divider-separator { border-color: var(--bg-sable) !important; } .bg-actus .e-loop-item .elementor-button { color: var(--bg-nuit) !important; } /* ------------------------------------------------------------------ Portefeuille : tuiles interactives. Logo seul au repos ; au survol, la tuile passe en ivoire, le logo remonte, les marques et « Découvrir » apparaissent. Toute la tuile est cliquable (conteneur-lien Elementor). ------------------------------------------------------------------ */ .bg-tuile { position: relative; min-height: 236px; background: var(--bg-blanc) !important; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22); border-bottom-style: solid !important; border-bottom-width: 6px !important; --border-bottom-width: 6px; border-bottom-color: var(--bg-vert) !important; transition: background .3s ease, transform .3s ease, box-shadow .3s ease; overflow: hidden; } .bg-tuile > .e-con-inner, .bg-tuile { align-items: center; justify-content: center; } .bg-tuile .elementor-widget-image { transition: transform .35s ease; } .bg-tuile .elementor-widget-image img { height: 52px; width: auto; max-width: 80%; object-fit: contain; margin: 0 auto; display: block; } .bg-tuile .bg-tuile__plus { position: absolute; left: 24px; right: 24px; bottom: 26px; text-align: center; opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; } .bg-tuile .bg-tuile__plus p { margin: 0 0 10px; font-family: var(--bg-font-texte); font-size: 14px; line-height: 1.7; color: var(--bg-nuit); } .bg-tuile .bg-tuile__plus span { font-family: var(--bg-font-texte); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bg-vert); border-bottom: 1px solid currentColor; padding-bottom: 4px; } .bg-tuile:hover { background: var(--bg-ivoire) !important; transform: translateY(-4px); box-shadow: 0 22px 48px rgba(0, 0, 0, 0.3); } .bg-tuile:hover .elementor-widget-image { transform: translateY(-46px); } .bg-tuile:hover .bg-tuile__plus { opacity: 1; transform: none; } .bg-tuile:hover .bg-tuile__plus span { border-bottom-color: transparent; } @media (hover: none) { .bg-tuile .elementor-widget-image { transform: translateY(-46px); } .bg-tuile .bg-tuile__plus { opacity: 1; transform: none; } } /* Tuile du portefeuille : lien étiré sur toute la tuile (le conteneur-lien Elementor n'est pas rendu) */ .bg-tuile .bg-tuile__lien { position: absolute; inset: 0; z-index: 3; } /* ------------------------------------------------------------------ Volet de navigation plein écran (test, proposition C) ------------------------------------------------------------------ */ html.bg-volet-ouvert { overflow: hidden; } .bg-volet { position: fixed; inset: 0; z-index: 10000; font-family: var(--bg-font-texte); overflow-y: auto; overflow-x: hidden; scrollbar-gutter: auto; } .bg-volet__fond { position: absolute; inset: 0; background-color: var(--bg-nuit); background-repeat: no-repeat; background-position: right -60px bottom -80px; background-size: 520px auto; opacity: 0; transition: opacity .35s ease; } .bg-volet.est-ouvert .bg-volet__fond { opacity: 1; } .bg-volet__in { position: relative; height: 100%; max-width: 1140px; margin: 0 auto; padding: 40px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; color: var(--bg-blanc); opacity: 0; transform: translateY(12px); transition: opacity .35s ease .1s, transform .35s ease .1s; } .bg-volet.est-ouvert .bg-volet__in { opacity: 1; transform: none; } .bg-volet__fermer { position: absolute; right: 24px; top: 40px; background: none; border: 0; color: var(--bg-sable); font: 800 12px/1 var(--bg-font-texte); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; } .bg-volet__logo { display: inline-flex; align-items: center; gap: 12px; color: var(--bg-sable); text-decoration: none; font: 600 14px/1 var(--bg-font-texte); letter-spacing: .3em; text-transform: uppercase; } .bg-volet__menu { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 56px 0 40px; } .bg-volet__entree { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font-family: var(--bg-font-titre); font-size: 40px; line-height: 1.1; color: var(--bg-sable); text-decoration: none; transition: color .2s ease; } .bg-volet__entree:hover, .bg-volet__entree.est-active { color: var(--bg-blanc); font-style: italic; } .bg-volet__droite { padding-top: 120px; display: flex; flex-direction: column; } .bg-volet__sous { display: flex; flex-wrap: wrap; gap: 40px 64px; } .bg-volet__groupe { display: flex; flex-direction: column; gap: 6px; min-width: 200px; } .bg-volet__groupe b { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--bg-vert-clair); margin-bottom: 8px; } .bg-volet__groupe a { color: var(--bg-blanc); text-decoration: none; font-size: 15px; line-height: 1.6; opacity: .92; } .bg-volet__groupe a:hover { color: var(--bg-sable); } @media (max-width: 900px) { .bg-volet__in { grid-template-columns: 1fr; gap: 24px; } .bg-volet__droite { padding-top: 0; } .bg-volet__entree { font-size: 30px; } .bg-volet__fond { background-size: 320px auto; } } /* Actualités : style des cartes (gabarit « Communiqué de presse ») aligné sur la charte */ .bg-actus .e-loop-item .elementor-post-info, .bg-actus .e-loop-item .elementor-post-info * { font-family: var(--bg-font-texte) !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .14em; text-transform: uppercase; color: var(--bg-bleu-fonce) !important; } .bg-actus .e-loop-item .elementor-widget-theme-post-title .elementor-heading-title, .bg-actus .e-loop-item .elementor-widget-theme-post-title a { font-family: var(--bg-font-titre) !important; font-size: 20px !important; font-weight: 400 !important; line-height: 1.3 !important; color: var(--bg-nuit) !important; } .bg-actus .e-loop-item .elementor-divider-separator { border-color: var(--bg-sable) !important; width: 28px; } .bg-actus .e-loop-item .elementor-button { color: var(--bg-nuit) !important; } .bg-actus .e-loop-item > .e-con { padding: 21px 28px 18px !important; } /* ------------------------------------------------------------------ Portefeuille : un seul bloc blanc, quatre logos en grille séparés par un filet en croix, au survol la cellule se voile d'ivoire et révèle la marque en Playfair italique ------------------------------------------------------------------ */ .bg-grille { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg-blanc); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.25); border-bottom: 6px solid var(--bg-vert); } .bg-grille__cell { position: relative; display: flex; align-items: center; justify-content: center; min-height: 168px; padding: 32px 28px; text-decoration: none; overflow: hidden; } .bg-grille__cell:nth-child(odd) { border-right: 1px solid rgba(3, 34, 37, 0.12); } .bg-grille__cell:nth-child(-n+2) { border-bottom: 1px solid rgba(3, 34, 37, 0.12); } .bg-grille__cell img { height: 46px; width: auto; max-width: 85%; object-fit: contain; transition: transform .4s ease, opacity .4s ease; } .bg-grille__voile { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; background: var(--bg-ivoire); transform: translateY(100%); transition: transform .4s cubic-bezier(.2,.7,.2,1); } .bg-grille__voile b { font-family: var(--bg-font-texte); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--bg-vert); } .bg-grille__voile em { font-family: var(--bg-font-titre); font-style: italic; font-size: 20px; line-height: 1.3; color: var(--bg-nuit); } .bg-grille__cell:hover img, .bg-grille__cell:focus-visible img { transform: translateY(-10px) scale(.92); opacity: .25; } .bg-grille__cell:hover .bg-grille__voile, .bg-grille__cell:focus-visible .bg-grille__voile { transform: none; } @media (hover: none) { .bg-grille__voile { position: static; transform: none; background: none; padding: 12px 0 0; } .bg-grille__cell { flex-direction: column; } } @media (max-width: 767px) { .bg-grille__cell { min-height: 140px; padding: 24px 16px; } } /* Chiffres clés : centrage complet (le compteur Elementor aligne ses chiffres en flex, le pictogramme a une largeur auto) */ .bg-chiffres .bg-carte-chiffre { flex-direction: column !important; align-items: center !important; justify-content: center !important; } .bg-chiffres .bg-carte-chiffre .elementor-element { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; text-align: center !important; } .bg-chiffres .elementor-counter-number-wrapper { justify-content: center !important; text-align: center; } .bg-chiffres .elementor-counter-number-prefix, .bg-chiffres .elementor-counter-number-suffix { flex-grow: 0 !important; } .bg-chiffres .elementor-counter-title { text-align: center !important; justify-content: center !important; } /* Actualités : respiration avant « Lire la suite », survol des cartes */ .bg-actus .e-loop-item .elementor-widget-button { margin-top: 22px; } .bg-actus .e-loop-item { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .bg-actus .e-loop-item:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(3, 34, 37, 0.28); border-bottom-color: var(--bg-bleu-fonce); } .bg-actus .e-loop-item .elementor-widget-theme-post-title a { transition: color .2s ease; } .bg-actus .e-loop-item:hover .elementor-widget-theme-post-title a { color: var(--bg-bleu-fonce) !important; } .bg-actus .e-loop-item:hover .elementor-divider-separator { width: 56px; transition: width .3s ease; } /* Volet : sous-menus réellement masqués, neutralisation des styles par défaut (rose) du thème parent */ .bg-volet [hidden] { display: none !important; } .bg-volet a, .bg-volet a:hover, .bg-volet a:focus { text-decoration: none; } .bg-volet button, .bg-volet .bg-volet__entree, .bg-volet .bg-volet__fermer { border: 0 !important; background: none !important; outline-color: var(--bg-sable); } .bg-volet .bg-volet__groupe a { color: var(--bg-blanc) !important; } .bg-volet .bg-volet__groupe a:hover, .bg-volet .bg-volet__groupe a:focus { color: var(--bg-sable) !important; } .bg-volet .bg-volet__logo, .bg-volet .bg-volet__logo:hover { color: var(--bg-sable) !important; } .bg-volet .bg-volet__entree { color: var(--bg-sable) !important; } .bg-volet .bg-volet__entree:hover, .bg-volet .bg-volet__entree.est-active, .bg-volet .bg-volet__entree:focus { color: var(--bg-blanc) !important; } .bg-volet *:focus-visible { outline: 1px solid var(--bg-sable); outline-offset: 4px; } /* ------------------------------------------------------------------ En-tête A « classique affiné » (validé) : menu en petites capitales espacées, entrée active soulignée de sable, filet sable de 2 px au-dessus de la barre blanche, langue et loupe regroupées à droite. ------------------------------------------------------------------ */ .fondBlanc a.elementor-item { font-family: var(--bg-font-texte) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .14em !important; text-transform: uppercase !important; padding-bottom: 6px !important; border-bottom: 1px solid transparent; transition: border-color .2s ease, color .2s ease; } .fondBlanc a.elementor-item:hover, .fondBlanc a.elementor-item.elementor-item-active, .fondBlanc a.elementor-item.highlighted { border-bottom-color: var(--bg-sable) !important; } .fondBlanc a.elementor-item::after, .fondBlanc a.elementor-item::before { display: none !important; } html.bg-scrolled .fondBlanc { border-top: 2px solid var(--bg-sable); } @media (min-width: 768px) { html:not(.bg-scrolled) .fondBlanc { border-top: 2px solid transparent; } } .fondBlanc .FR, .fondBlanc .EN { opacity: .85; } .fondBlanc .loupe .elementor-icon { font-size: 15px !important; } /* ------------------------------------------------------------------ Chiffres clés : typographies de la charte (chiffre en Playfair, libellé en petites capitales Outfit), cartes qui occupent toute la largeur du conteneur, libellés sur deux lignes avec précision en petit ------------------------------------------------------------------ */ .bg-chiffres .bg-carte-chiffre { flex: 0 0 calc(25% - 15px) !important; width: calc(25% - 15px) !important; max-width: none !important; min-width: 0; } @media (max-width: 1024px) { .bg-chiffres .bg-carte-chiffre { flex-basis: calc(50% - 10px) !important; width: calc(50% - 10px) !important; } } @media (max-width: 767px) { .bg-chiffres .bg-carte-chiffre { flex-basis: 100% !important; width: 100% !important; } } .bg-chiffres > .e-con-inner > .elementor-widget-heading:first-child { flex-basis: 100% !important; width: 100% !important; } .bg-chiffres > .e-con-inner > .elementor-widget-heading { flex-basis: 100% !important; width: 100% !important; } .bg-masque { display: none !important; } .bg-actus > .e-con-inner > .elementor-widget-heading, .bg-actus > .e-con-inner > .elementor-widget-text-editor { flex-basis: 100% !important; width: 100% !important; } .bg-chiffres > .e-con-inner > .elementor-widget-button { flex-basis: 100% !important; width: 100% !important; } .bg-chiffres .elementor-counter-number-wrapper { font-family: var(--bg-font-titre) !important; font-size: 44px !important; font-weight: 400 !important; line-height: 1.1 !important; color: var(--bg-nuit) !important; } .bg-chiffres .elementor-counter-number-suffix, .bg-chiffres .elementor-counter-number-prefix { font-size: 22px !important; align-self: flex-end; padding-bottom: 6px; } .bg-chiffres .elementor-counter-title { font-family: var(--bg-font-texte) !important; font-size: 13px !important; font-weight: 300 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--bg-bleu-fonce) !important; line-height: 1.5 !important; margin-top: 10px; min-height: 3em; display: block !important; } .bg-chiffres .elementor-counter-title small { display: block; font-size: 10px; font-weight: 300; letter-spacing: .08em; text-transform: none; color: var(--bg-bleu-moyen); margin-top: 2px; } /* Tirets homogènes : toujours un trait de 28 x 1 px entre le surtitre et le titre ; dans les sections reprises, le séparateur Elementor est masqué et le trait est posé au-dessus du titre */ .bg-chiffres .elementor-widget-divider, .bg-actus .elementor-widget-divider:not(.e-loop-item *) { visibility: hidden; height: 0 !important; margin: 0 !important; padding: 0 !important; flex-basis: 100% !important; width: 100% !important; } /* Blocs jusqu'aux bords du conteneur */ .bg-grille { width: 100%; } /* Footer : bouton newsletter dans la couleur des autres éléments */ .elementor-location-footer .elementor-widget-button .elementor-button { color: var(--bg-nuit) !important; } /* En-tête A : sélecteur de langue en texte « FR | EN » (les drapeaux sont masqués), menu centré entre le logo et les outils */ .fondBlanc .FR img, .fondBlanc .EN img { display: none !important; } .fondBlanc .FR, .fondBlanc .EN { width: auto !important; } .fondBlanc .elementor-widget-nav-menu { margin-left: auto !important; margin-right: auto !important; } .fondBlanc .elementor-widget-nav-menu + .elementor-element { margin-left: 32px; } /* Sélecteur de langue « FR | EN » : la langue courante grisée, l'autre cliquable (le lien TranslatePress reste celui du widget) */ .fondBlanc .FR .elementor-widget-container, .fondBlanc .EN .elementor-widget-container { display: flex; align-items: center; gap: 8px; font-family: var(--bg-font-texte); font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--bg-blanc); } html.bg-scrolled .fondBlanc .FR .elementor-widget-container, html.bg-scrolled .fondBlanc .EN .elementor-widget-container { color: var(--bg-nuit); } .fondBlanc .FR .elementor-widget-container::before { content: "FR |"; opacity: .45; } .fondBlanc .EN .elementor-widget-container::before { content: "EN |"; opacity: .45; } .fondBlanc .FR a, .fondBlanc .EN a { color: inherit !important; text-decoration: none; display: inline-block; line-height: 1; } .fondBlanc .FR a::before { content: "EN"; } .fondBlanc .EN a::before { content: "FR"; } .fondBlanc .FR a:hover, .fondBlanc .EN a:hover { opacity: .7; } /* Logo de l'en-tête un peu plus petit */ .fondBlanc .logoBlanc img, .fondBlanc .logoDore img { height: 58px !important; width: auto !important; } /* Chiffres clés : plus d'air entre le chiffre et son libellé, libellé dans le bleu principal de la charte */ .bg-chiffres .elementor-counter-title { margin-top: 18px !important; color: var(--bg-bleu) !important; } .bg-chiffres .elementor-counter-title small { color: var(--bg-bleu-moyen); } /* Hero : vidéo discrète derrière la colonne de texte (test). Le fond bleu, la vignette et la trame restent inchangés. */ .bg-hero-video > .bg-video { position: absolute; left: 0; top: 0; width: 64%; height: 100%; object-fit: cover; opacity: .06; z-index: 0; pointer-events: none; filter: saturate(.6) blur(1px); -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%); mask-image: linear-gradient(to right, #000 55%, transparent 100%); } .bg-hero-video .bg-hero-video-src { display: none; } /* Titre long dans le hero (actualité de la nouvelle identité, 25 octobre) : à 90 px il prenait 7 lignes et repoussait le chapô et le bouton sous la ligne de flottaison (scripts/retouches-25oct.php pose et retire la classe). */ .bg-hero-titre--long .elementor-heading-title { font-size: clamp(32px, 3.7vw, 56px) !important; line-height: 1.15 !important; } /* Footer : contenu étiré sur toute la largeur du conteneur boxed (coordonnées, logo, newsletter), bords alignés sur le contenu des pages */ .elementor-location-footer .elementor-element-83234bf > .e-con-inner { padding-left: 0; padding-right: 0; } .elementor-location-footer .elementor-element-83234bf > .e-con-inner > .e-con { padding: 0 !important; } .elementor-location-footer .elementor-element-9bad720, .elementor-location-footer .elementor-element-9bad720 .elementor-widget { text-align: left !important; } .elementor-location-footer .elementor-element-9bad720 .elementor-icon-list-item, .elementor-location-footer .elementor-element-9bad720 .elementor-icon-list-item > a, .elementor-location-footer .elementor-element-9bad720 .elementor-icon-list-item > span { justify-content: flex-start !important; } .elementor-location-footer .elementor-element-4af8251 .elementor-social-icons-wrapper { justify-content: center; } .elementor-location-footer .elementor-element-fa2df25 { align-items: flex-end !important; } .elementor-location-footer .elementor-element-fa2df25 .elementor-button-wrapper { text-align: right !important; } @media (max-width: 767px) { .elementor-location-footer .elementor-element-9bad720, .elementor-location-footer .elementor-element-9bad720 .elementor-widget { text-align: center !important; } .elementor-location-footer .elementor-element-9bad720 .elementor-icon-list-item, .elementor-location-footer .elementor-element-9bad720 .elementor-icon-list-item > a, .elementor-location-footer .elementor-element-9bad720 .elementor-icon-list-item > span { justify-content: center !important; } .elementor-location-footer .elementor-element-fa2df25 { align-items: center !important; } .elementor-location-footer .elementor-element-fa2df25 .elementor-button-wrapper { text-align: center !important; } } /* Grille : au survol, le voile affiche le nom de la plateforme en Playfair et ses marques en liens soulignés (plus de bouton « Découvrir ») */ .bg-grille__voile { gap: 12px; padding: 16px 20px; } .bg-grille__voile .bg-grille__plateforme { font-family: var(--bg-font-titre); font-size: 21px; font-weight: 400; line-height: 1.15; color: var(--bg-nuit); } .bg-grille__voile .bg-grille__marques { display: flex; flex-direction: column; align-items: center; gap: 7px; border: 0; padding: 0; margin: 0; } .bg-grille .bg-grille__marque, .bg-grille a.bg-grille__marque { font-family: var(--bg-font-texte); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--bg-bleu-fonce); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; white-space: nowrap; transition: color .2s ease; } .bg-grille__marque::after { content: " →"; } .bg-grille a.bg-grille__marque:hover, .bg-grille a.bg-grille__marque:focus-visible { color: var(--bg-nuit); } .bg-grille__cell--multi { cursor: default; } .bg-grille__cell--multi:focus-within img { transform: translateY(-10px) scale(.92); opacity: .25; } .bg-grille__cell--multi:focus-within .bg-grille__voile { transform: none; } @media (max-width: 767px) { .bg-grille__voile { padding: 12px 12px 0; gap: 8px; } .bg-grille__voile .bg-grille__plateforme { font-size: 18px; } } /* Carte Leaflet (Présentation) : contexte d'empilement isolé, sinon ses calques (z-index 400 à 1000) passent devant le bandeau fixe de l'en-tête */ .leaflet-container { isolation: isolate; z-index: 0; } /* Fond de carte OpenStreetMap rendu clair et neutre, proche de l'ancien fond CARTO light */ .leaflet-container .leaflet-tile-pane { filter: grayscale(1) brightness(1.08) contrast(.85) opacity(.7); } .leaflet-container { font-family: var(--bg-font-texte); } #info-bandeau { color: var(--bg-nuit); font-family: var(--bg-font-texte); } /* Volet en panneau haut (BELGRANO_VOLET_PANNEAU) : le volet garde tout l'écran pour assombrir la page, le panneau bleu nuit avec la grappe ne prend que la hauteur de son contenu. Clic sur le fond assombri = fermeture (volet.js). */ .bg-volet--panneau .bg-volet__fond { background-image: none !important; background-color: rgba(3, 34, 37, .55); } .bg-volet--panneau .bg-volet__panneau { position: relative; background-color: var(--bg-nuit); background-repeat: no-repeat; background-position: right 48px bottom 32px; background-size: 320px auto; box-shadow: 0 24px 60px rgba(3, 34, 37, .35); max-height: 100vh; overflow-y: auto; opacity: 0; transform: translateY(-12px); transition: opacity .35s ease .05s, transform .35s ease .05s; } .bg-volet--panneau.est-ouvert .bg-volet__panneau { opacity: 1; transform: none; } .bg-volet--panneau .bg-volet__in { height: auto; min-height: 440px; padding: 32px 24px 72px; } /* grappe entière (320 px) visible en bas à droite, demande client du 8 octobre */ .bg-volet--panneau .bg-volet__fermer { top: 32px; } .bg-volet--panneau .bg-volet__menu { margin: 40px 0 0; } .bg-volet--panneau .bg-volet__entree { font-size: 34px; } .bg-volet--panneau .bg-volet__droite { padding-top: 96px; } @media (max-width: 900px) { .bg-volet--panneau .bg-volet__panneau { min-height: 100vh; } .bg-volet--panneau .bg-volet__droite { padding-top: 0; } } /* Liserés 6 px en bas de toutes les cartes (8 octobre, scripts/liseres-cartes.php) : rotation des couleurs pour les cartes de boucle */ /* ===================================================================================================================== Liserés des cartes (retours de Martin du 8 octobre) : règles à AJOUTER à la fin de wp-content/themes/hello-belgrano/assets/css/belgrano.css, puis déployer le thème (deploy-theme.sh) AVANT de lancer scripts/liseres-cartes.sh (le script refuse d'écrire le modèle #65 tant que la règle « Home » manque). Données (scripts/liseres-cartes.php) : chaque carte porte la classe bg-carte, plus de bordure gauche / droite / haut, liseré 6 px en bas en couleur globale. Cartes de rangées et de carrousels : couleur posée carte par carte dans Elementor, rien à faire ici. Cartes de boucle (modèles #5737, #6339, #65, #5489, #675, #719) : toutes identiques dans les données (première couleur du cycle) ; la rotation se fait ci-dessous selon le rang de la carte dans la grille. Cycle = celui des chiffres clés de la home (.bg-c1 à .bg-c4) : Bleu clair, Bleu, Bleu moyen, Bleu foncé, en variables globales du kit Elementor (bgc1a2b, accent, secondary, ee702a8). nth-of-type et non nth-child : Elementor Pro imprime un