/* Theme Name: JBTheme Theme URI: https://jbouvier.com Description: Le thème enfant pour palier à tout ce qui n'est pas possible, par défaut, avec Divi. Jérôme Bouvier : Création de site web, vitrine ou e-commerce ; formation des administrateurs ; Newsleters ; Mesures et optimisations. Author: Jérôme Bouvier Author URI: https://jbouvier.com Template: Divi Version: 1.0.0 */ /*****Add any custom CSS below this line*****/ /* ========================================================================== REALISATION CUSTOM (pour le masonry) ========================================================================== */ /* Container masonry 2 colonnes */ .jb-masonry { column-gap: 2rem; } .jb-masonry.jb-cols-1 { column-count: 1; } .jb-masonry.jb-cols-2 { column-count: 2; } /* Items : éviter la cassure, et occuper toute la largeur de la colonne */ .jb-masonry .jb-item { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 1.5rem 0; } .jb-masonry .jb-figure { margin: 0; padding: 0; line-height: 0; position: relative; overflow: hidden; border-radius: 0; } .jb-masonry .jb-thumb { display: block; width: 100%; height: auto; } /* Le lien = conteneur de positionnement */ .jb-masonry .jb-link { position: relative; display: block; text-decoration: none; color: inherit; } /* H2 overlay en GRID : [ligne flexible][nom] sur 2 lignes (nom / ville) */ .jb-masonry .jb-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 16px; padding-left: 25px; /* le trait commence à 25px du bord gauche */ color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); z-index: 1; display: grid; grid-template-columns: 1fr auto; /* 1fr = trait ; auto = texte */ grid-template-rows: auto auto; /* ligne 1 = nom ; ligne 2 = ville */ column-gap: 10px; /* espace trait <-> nom */ row-gap: 6px; align-items: center; /* centre verticalement le trait avec le nom */ } /* Trait : colonne 1, ligne du nom */ .jb-masonry .jb-title::before { content: ""; grid-column: 1; grid-row: 1; height: 1px; background: #fff; } /* Nom : colonne 2, première ligne */ .jb-masonry .jb-name { grid-column: 2; grid-row: 1; font-size: clamp(1.25rem, 0.914rem + 0.07vw, 1.6rem); text-transform: uppercase; font-weight: 300; line-height: 1.1; white-space: normal; word-break: break-word; justify-self: end; /* ancre le bloc texte au bord droit de la colonne 2 */ text-align: right; /* aligne chaque ligne à droite */ hyphens: auto; /* césure auto si le mot est très long (FR requis sur ) */ overflow-wrap: anywhere; /* évite les débordements sur mots/liens très longs */ -webkit-hyphens: auto; -ms-hyphens: auto; } /* Ville : colonne 2, deuxième ligne — alignée au nom, sous le nom */ .jb-masonry .jb-ville { grid-column: 2; grid-row: 2; margin-top: 0; /* row-gap gère l'espacement */ font-size: clamp(0.95rem, 0.754rem + 0.02vw, 0.95rem); font-weight: 400; text-transform: none; line-height: 1.15; justify-self: start; /* ancre à gauche de la colonne 2 */ text-align: left; /* aligne le texte à gauche */ } /* Ajustements petits écrans */ @media (max-width: 480px) { .jb-masonry .jb-title { padding-left: 16px; column-gap: 8px; } } /* Responsive : 1 colonne en mobile */ @media (max-width: 640px) { .jb-masonry { column-gap: 1rem; } .jb-masonry.jb-cols-2 { column-count: 1; } .jb-masonry .jb-title { column-gap: 8px; padding-left: 20px; } } /* parce qu'une maquette surprise qui ne tien pas en compte le rwd pose trop de probleme quand long textes rencontrent petits écrans : */ @media (max-width: 800px) and (min-width: 641px), (max-width: 350px) { .jb-masonry .jb-name { font-size: clamp(1rem, 0.914rem + 0.07vw, 1.6rem); } .jb-masonry .jb-ville { font-size: clamp(0.8rem, 0.754rem + 0.02vw, 0.95rem);} } /* Interaction, apparaition du h2 - - - - - */ /* État initial : titre masqué, image normale */ .jb-masonry .jb-title { opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; } /* Overlay d’assombrissement sur l’image via pseudo-élément du lien */ .jb-masonry .jb-link::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0); /* pas d’assombrissement par défaut */ transition: background .25s ease; pointer-events: none; /* ne bloque pas les clics */ } /* États actifs : hover, focus clavier, classe JS tactile */ .jb-masonry .jb-link:hover .jb-title, .jb-masonry .jb-link:focus .jb-title, .jb-masonry .jb-link:focus-visible .jb-title, .jb-masonry .jb-link.is-active .jb-title { opacity: 1; transform: translateY(0); } .jb-masonry .jb-link:hover::after, .jb-masonry .jb-link:focus::after, .jb-masonry .jb-link:focus-visible::after, .jb-masonry .jb-link.is-active::after { background: rgba(0,0,0,.35); /* niveau d’assombrissement : ajuste si besoin */ } /* Accessibilité focus : conserver un focus visible propre autour de la carte */ .jb-masonry .jb-link:focus-visible { outline: 2px solid #ffffffcc; outline-offset: 3px; } /* Réduire / supprimer les animations si l’utilisateur le souhaite */ @media (prefers-reduced-motion: reduce) { .jb-masonry .jb-title, .jb-masonry .jb-link::after { transition: none; } } /* Les filtres pour les réalisations */ .jb-filters { display: flex; justify-content:center; gap: .75rem; flex-wrap: wrap; margin: 0 0 1rem 0; padding: 0; list-style: none; } .jb-filters a { display: inline-block; } .jb-filters a:hover, .jb-filters a:focus-visible, .jb-filters a.is-active { text-decoration:underline; } /* Masquage des items non retenus */ .jb-masonry .jb-item.is-hidden { display: none; } /* ========================================================================== FIN DE REALISATION CUSTOM (pour le masonry) ========================================================================== */