/**************************************************** * LPMMC – PAGE TEMPLATE * Structure propre + responsive Desktop / Mobile / Tablette * Auteur : Julien + ChatGPT 😄 ****************************************************/ /* ================================================== ========== SECTION 1 – BASE COMMUNE (tous écrans) ================================================== */ /* ================================================== COMMUN – STRUCTURE DU CADRE PRINCIPAL ================================================== */ /* La colonne devient le cadre blanc principal */ .et_pb_column.juju-page-col { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 40px; box-sizing: border-box; width: 80%; max-width: 1400px; margin: 40px 0 60px 0; /* espace vertical */ } /* ================================================== REMONTÉE DU CADRE DANS LE BANDEAU ================================================== */ .et_pb_column.juju-page-col { margin-top: -150px; /* ajuste si besoin: -80, -100, -140 */ position: relative; z-index: 10; /* passe au-dessus du bandeau violet */ } /* ================================================== TITRE – STRUCTURE GÉNÉRALE ================================================== */ .et_pb_column.juju-page-col .et_pb_module.et_pb_post_title.juju-page-title { position: relative; background: transparent; margin: 0 0 24px 0; /* espace sous le titre */ padding: 0; border: none; display: flex; align-items: center; box-sizing: border-box; } /* -------------------------------------------------- Barre violette à gauche du titre -------------------------------------------------- */ .et_pb_column.juju-page-col .juju-page-title::before { content: ""; position: absolute; left: -80px; top: 40px; bottom: -50px; width: 6px; background: #800080; border-radius: 3px; } /* -------------------------------------------------- Conteneur du titre (bandeau noir) -------------------------------------------------- */ .et_pb_column.juju-page-col .juju-page-title .et_pb_title_container { background: #000; border-radius: 6px; margin-top: -10px; margin-left: -65px; padding: 10px 18px !important; /* hauteur réduite */ min-height: unset !important; height: auto !important; display: flex; align-items: center; } /* ================================================== TITRE + IMAGE – CONTENEUR GLOBAL ================================================== */ .et_pb_column.juju-page-col .et_pb_post_title { display: flex !important; align-items: center !important; gap: 0px !important; /* espace contrôlé entre titre et image */ } /* -------------------------------------------------- Image – suppression du push automatique Divi -------------------------------------------------- */ .et_pb_column.juju-page-col .et_pb_title_featured_container { margin-left: 0 !important; /* 🔑 TRÈS IMPORTANT */ } /* ================================================== TITRE – TYPOGRAPHIE ================================================== */ .et_pb_column.juju-page-col .juju-page-title .entry-title { font-family: "Barlow Condensed", sans-serif; font-size: 30px; /* même taille que h2 accueil */ font-weight: 700; line-height: 1.2; letter-spacing: 0; margin: 0; padding: 0; color: #fff; background: none; text-transform: none; /* sécurité Divi */ } /* ================================================== VIGNETTE IMAGE – TAILLE & POSITION ================================================== */ .et_pb_column.juju-page-col .et_pb_post_title.juju-page-title { display: flex; align-items: center; gap: 24px; } /* Conteneur image */ .et_pb_column.juju-page-col .et_pb_post_title.juju-page-title .et_pb_title_featured_container { max-width: 280px; } /* Wrapper image */ .et_pb_column.juju-page-col .et_pb_post_title.juju-page-title .et_pb_title_featured_container .et_pb_image_wrap { width: 100%; height: 160px; /* hauteur maîtrisée */ overflow: hidden; border-radius: 10px; } /* Image */ .et_pb_column.juju-page-col .et_pb_post_title.juju-page-title .et_pb_title_featured_container img { width: 100%; height: 100%; object-fit: cover; display: block; } /* -------------------------------------------------- Descente de la vignette image uniquement -------------------------------------------------- */ .et_pb_module.et_pb_post_title.juju-page-title .et_pb_title_featured_container { position: relative; margin-left: auto; } /* Force le déplacement vertical de la vignette */ .juju-page-col .et_pb_title_featured_container { position: relative !important; top: 55px !important; /* 🔽 descente visible */ } /* Descendre le module titre DANS le cadre */ .et_pb_column.juju-page-col .et_pb_module.et_pb_post_title.juju-page-title { position: relative !important; top: -60px !important; /* ajuste 60 / 90 / 120 */ margin-top: 0 !important; transform: none !important; } /* ================================================== DATE – sous le titre, alignée à gauche ================================================== */ /* La colonne devient référence pour la date */ .et_pb_column.juju-page-col { position: relative; } /* Date : sous le bandeau noir */ .et_pb_column.juju-page-col .page-date { position: absolute; left: -65px; /* aligné avec le texte du titre */ top: 145px; /* sous le bandeau noir */ font-size: 14px; font-weight: 700; color: #800080; white-space: nowrap; z-index: 50; /* AU-DESSUS du bandeau */ pointer-events: none; } /* ================================================== ZOOM – aligné avec la date ================================================== */ .et_pb_column.juju-page-col .article-zoom { position: absolute; top: 100px; /* même valeur que la date */ right: 0px; /* juste avant l’image */ z-index: 50; display: flex; align-items: center; gap: 6px; } /* ================================================== CORRECTION FLUIDITÉ – ÉQUILIBRE TITRE / IMAGE ================================================== */ .et_pb_column.juju-page-col .et_pb_post_title { display: flex !important; align-items: center; gap: 16px; width: 100%; box-sizing: border-box; } /* Bandeau noir : prend la place restante */ .et_pb_column.juju-page-col .et_pb_title_container { flex: 1 1 auto !important; min-width: 0; /* empêche le débordement */ max-width: 100%; } /* Image : largeur flexible */ .et_pb_column.juju-page-col .et_pb_title_featured_container { flex: 0 1 240px; /* peut rétrécir */ max-width: 240px; margin-left: 0 !important; } /* Image elle-même */ .et_pb_column.juju-page-col .et_pb_title_featured_container img { width: 100%; height: auto; display: block; object-fit: cover; } /* Ajustement final de l’espace titre / image */ .et_pb_column.juju-page-col .et_pb_post_title.juju-page-title { gap: 32px !important; /* 16 / 24 / 32 / 40 */ } /* ================================================== DESKTOP – STRUCTURE & CENTRAGE DU CONTENU (écrans >= 981px) ================================================== */ @media (min-width: 981px) { /* ================================================== Row principale – centrage du contenu ================================================== */ .et_pb_row.juju-page-row { display: flex !important; justify-content: center !important; } /* ================================================== Colonne principale – largeur contrôlée ================================================== */ .et_pb_row.juju-page-row > .et_pb_column.juju-page-col { width: 90% !important; max-width: 1400px !important; margin-left: auto !important; margin-right: auto !important; } } /* ================================================== Mode responsive ================================================== */ /* ================================================== MOBILE – Layout titre + date + zoom + vignette (≤ 767px) ================================================== */ @media (max-width: 767px) { /* ================================================== 1. CADRE PRINCIPAL – pleine largeur, centré ================================================== */ .et_pb_column.juju-page-col { margin-top: -400px !important; /* remonte le cadre dans le bandeau */ width: 100% !important; /* pleine largeur */ max-width: 100% !important; margin-left: auto !important; /* centrage horizontal */ margin-right: auto !important; padding: 20px 16px !important; /* marge interne gauche/droite */ box-sizing: border-box !important; /* inclut le padding dans la largeur */ border-radius: 12px; } /* ================================================== 2. RESET DES BIDOUILLES DESKTOP (on neutralise positions absolues, transforms, etc.) ================================================== */ .et_pb_column.juju-page-col .juju-page-title::before, .et_pb_column.juju-page-col .page-date, .et_pb_column.juju-page-col .article-zoom { position: relative !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; } /* ================================================== 3. STRUCTURE VERTICALE DU BLOC TITRE ================================================== */ .et_pb_column.juju-page-col .et_pb_post_title.juju-page-title { display: flex !important; flex-direction: column !important; /* empile les éléments */ align-items: stretch !important; gap: 12px !important; /* espace entre éléments */ top: 0 !important; } /* ================================================== 4. BANDEAU NOIR (titre) – largeur réelle, sans troncature ================================================== */ /* Conteneur global du module titre */ .et_pb_column.juju-page-col .et_pb_post_title { width: 100% !important; max-width: 100% !important; } /* Bandeau noir */ .et_pb_column.juju-page-col .et_pb_title_container { position: relative !important; top: 70px !important; width: calc(100% - 30px) !important; /* largeur contrôlée */ margin-left: 18px !important; /* plus large à gauche */ margin-right: 12px !important; /* plus serré à droite */ padding-left: 12px !important; padding-right: 12px !important; box-sizing: border-box; } /* Titre – une seule ligne, sans troncature */ .et_pb_column.juju-page-col .juju-page-title .entry-title { display: block; width: 100% !important; max-width: 100% !important; font-size: 18px !important; line-height: 1.3; white-space: nowrap !important; /* une seule ligne */ overflow: visible !important; /* pas de coupe */ text-overflow: unset !important; /* pas de "..." */ text-align: left; } /* ================================================== 5. BARRE VIOLETTE À GAUCHE DU TITRE ================================================== */ .et_pb_column.juju-page-col .juju-page-title::before { position: absolute !important; left: -4px !important; top: 50px !important; bottom: -45px !important; width: 6px; border-radius: 4px; } /* ================================================== 6. META (DATE + ZOOM) – sous le bandeau noir ================================================== */ /* Conteneur meta (si présent) */ .et_pb_column.juju-page-col .juju-meta-mobile { display: flex !important; justify-content: space-between !important; /* date à gauche / zoom à droite */ align-items: center !important; width: 100% !important; position: relative !important; top: 60px !important; /* descend sous le bandeau */ margin: 0 0 8px 0 !important; z-index: 20; } /* Date */ .et_pb_column.juju-page-col .page-date { position: relative !important; top: 85px !important; /* sous le bandeau */ left: 20px !important; /* décalage vers la droite */ margin: 0 !important; color: #800080; font-weight: 700; font-size: 13px; align-self: auto !important; } /* Zoom */ .et_pb_column.juju-page-col .article-zoom { position: relative !important; top: 55px !important; /* sous le bandeau */ left: 18px !important; /* décalage vers la droite */ margin: 0 !important; align-self: auto !important; } /* Sécurité si .juju-meta-mobile existe */ .juju-meta-mobile { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 8px; } /* ================================================== 7. VIGNETTE IMAGE – descente contrôlée (mobile) ================================================== */ .et_pb_column.juju-page-col .et_pb_title_featured_container { width: 90% !important; max-width: 90% !important; margin-top: 40px !important; /* descend la vignette */ margin-left: 0 !important; margin-right: 0 !important; left: 18px !important; /* décalage vers la droite */ order: 3; /* après titre + meta */ position: relative !important; } /* Wrapper image */ .et_pb_column.juju-page-col .et_pb_title_featured_container .et_pb_image_wrap { width: 100%; height: 160px; border-radius: 10px; overflow: hidden; } /* Image */ .et_pb_column.juju-page-col .et_pb_title_featured_container img { width: 100%; height: 100%; object-fit: cover; } } /* ================================================== Mode responsive ================================================== */ /* ================================================== TABLETTE – Layout titre + date + zoom + vignette (mini desktop, version propre) ================================================== */ @media (min-width: 768px) and (max-width: 1024px) { /* ================================================== 0. STRUCTURE GLOBALE – horizontal (mini desktop) ================================================== */ .et_pb_column.juju-page-col .et_pb_post_title.juju-page-title { display: flex !important; flex-direction: row !important; /* structure horizontale */ align-items: flex-start !important; gap: 24px !important; width: 100% !important; } /* ================================================== 1. CADRE PRINCIPAL – largeur max + centrage parfait ================================================== */ .et_pb_column.juju-page-col { margin-top: -130px !important; /* remonte le cadre dans le bandeau */ width: 100% !important; /* pleine largeur */ max-width: 100% !important; margin-left: auto !important; /* centrage horizontal */ margin-right: auto !important; padding: 20px 16px !important; /* marge interne gauche/droite */ box-sizing: border-box !important; border-radius: 12px; } /* ================================================== 2. BANDEAU NOIR – s’étend jusqu’à la vignette ================================================== */ .et_pb_column.juju-page-col .et_pb_title_container { flex: 1 1 auto !important; /* prend tout l’espace disponible */ width: auto !important; /* laisse Flex gérer */ max-width: none !important; /* enlève toute contrainte */ min-width: 0 !important; /* anti-bug flex Divi */ } /* ================================================== 3. IMAGE – largeur fixe, ne bouge pas ================================================== */ .et_pb_column.juju-page-col .et_pb_title_featured_container { flex: 0 0 240px !important; /* largeur fixe image */ max-width: 240px !important; } /* ================================================== 4. RESET DES BIDOUILLES DESKTOP (on neutralise positions absolues, transforms, etc.) ================================================== */ .et_pb_column.juju-page-col .juju-page-title::before, .et_pb_column.juju-page-col .page-date, .et_pb_column.juju-page-col .article-zoom { position: relative !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; } /* ================================================== 5. STRUCTURE HORIZONTALE DU BLOC TITRE ================================================== */ .et_pb_column.juju-page-col .et_pb_post_title { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 24px !important; width: 100% !important; box-sizing: border-box; } /* ================================================== 6. BANDEAU NOIR – prend l’espace restant, sans chevaucher ================================================== */ .et_pb_column.juju-page-col .et_pb_title_container { flex: 1 1 auto !important; /* prend tout l’espace dispo */ min-width: 0 !important; /* anti-bug flex */ max-width: 100% !important; margin: 0 !important; /* on vire les décalages */ position: relative !important; top: 50px !important; left: 0 !important; } /* Titre – une seule ligne, sans troncature */ .et_pb_column.juju-page-col .juju-page-title .entry-title { display: block; width: 100% !important; max-width: 100% !important; font-size: 18px !important; line-height: 1.3; white-space: nowrap !important; /* une seule ligne */ overflow: visible !important; /* pas de coupe */ text-overflow: unset !important; /* pas de "..." */ text-align: left; } /* ================================================== 7. BARRE VIOLETTE À GAUCHE DU TITRE ================================================== */ .et_pb_column.juju-page-col .juju-page-title::before { position: absolute !important; left: -25px !important; top: 50px !important; bottom: -45px !important; width: 6px; border-radius: 4px; } /* ================================================== 8. DATE – sous le bandeau, alignée à gauche (tablette) ================================================== */ .et_pb_column.juju-page-col { position: relative; } .et_pb_column.juju-page-col .page-date { position: absolute !important; left: 10px !important; /* aligné avec la barre violette */ top: 145px !important; /* sous le bandeau noir */ margin: 0 !important; font-size: 14px; font-weight: 700; color: #800080; white-space: nowrap; z-index: 50; } /* ================================================== 9. ZOOM – aligné à droite, sous le bandeau (tablette) ================================================== */ .et_pb_column.juju-page-col .article-zoom { position: relative !important; top: 80px !important; left: 17px !important; margin-left: auto !important; /* pousse à droite */ } /* ================================================== 10. IMAGE – positionnée à droite (tablette) ================================================== */ .et_pb_column.juju-page-col .et_pb_title_featured_container { margin-left: auto !important; /* pousse à droite */ flex: 0 0 240px !important; /* largeur contrôlée */ max-width: 240px !important; position: relative !important; top: 50px !important; left: 0px !important; } }