/*!**********************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/blocks/cards-modal/style.scss ***! \**********************************************************************************************************************************************************************************************************************************************************/ @charset "UTF-8"; /* ========================================================= GLOBAL ========================================================= */ html, body { height: 100%; overflow-x: hidden; } body.modal-open { overflow: hidden; } .ituCard { justify-content: flex-start !important; } /* ========================================================= EDITOR FIX — width for RichText in iframe ========================================================= */ .wp-block-brblocks-cards-modal .content.center { width: 100% !important; } .wp-block-brblocks-cards-modal .main { width: 100% !important; } .wp-block-brblocks-cards-modal .main p, .wp-block-brblocks-cards-modal .main h2 { width: 100% !important; min-width: 100% !important; } /* ========================================================= CARD WRAPPER ========================================================= */ .itu-cards-icons-item { position: relative; } /* Cache la modal-content dans la card dès le rendu initial, avant que le JS la déplace dans le store sur */ .itu-cards-icons-item .modal-content { display: none !important; } /* ========================================================= CARD STYLE ========================================================= */ .wp-block-brblocks-cards-modal { background-color: #fff; border-radius: 4px; box-shadow: 0 0 1.5rem rgba(169, 202, 216, 0.08); display: flex; flex-direction: column; align-items: center; padding: 24px !important; text-align: center; min-height: 237px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .wp-block-brblocks-cards-modal:hover { box-shadow: 0 0 1.5rem rgba(31, 167, 217, 0.21); transform: translateY(-2px); } .wp-block-brblocks-cards-modal:active { transform: scale(0.97); } .wp-block-brblocks-cards-modal img { width: 65px; margin-bottom: 24px !important; } .wp-block-brblocks-cards-modal h2 { font-size: 20px; font-weight: 700; margin: 0 0 8px; color: #2f2f2f; } .wp-block-brblocks-cards-modal > p.card-description { margin: 0 0 0.5rem 0; color: #0083b3; font-weight: 100 !important; } .wp-block-brblocks-cards-modal.layout-horizontal { flex-direction: row !important; align-items: center !important; text-align: left !important; min-height: unset !important; padding: 16px 24px !important; gap: 20px; } .wp-block-brblocks-cards-modal.layout-horizontal > img.card-icon, .wp-block-brblocks-cards-modal.layout-horizontal > h2.card-title, .wp-block-brblocks-cards-modal.layout-horizontal > p.card-description { display: none !important; } .wp-block-brblocks-cards-modal.layout-horizontal .horizontal-layout { display: flex; flex-direction: row; align-items: center; gap: 20px; width: 100%; } .wp-block-brblocks-cards-modal.layout-horizontal .horizontal-layout img { width: 52px !important; height: 52px !important; min-width: 52px; margin-bottom: 0 !important; -o-object-fit: contain; object-fit: contain; flex-shrink: 0; } .wp-block-brblocks-cards-modal.layout-horizontal .horizontal-layout img.round-image { border-radius: 50%; } .wp-block-brblocks-cards-modal.layout-horizontal .horizontal-layout .text-content { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; padding: 16px 0 16px; } .wp-block-brblocks-cards-modal.layout-horizontal .horizontal-layout .text-content h2, .wp-block-brblocks-cards-modal.layout-horizontal .horizontal-layout .text-content .card-title { margin: 0 !important; font-size: 1rem; font-weight: 700; line-height: 1.3; color: #2f2f2f; text-align: left; } .wp-block-brblocks-cards-modal.layout-horizontal .horizontal-layout .text-content p, .wp-block-brblocks-cards-modal.layout-horizontal .horizontal-layout .text-content .card-description { margin: 0 !important; font-size: 0.875rem; line-height: 1.4; color: #0076b3 !important; font-weight: 300 !important; text-align: left; } .wp-block-brblocks-cards-modal.layout-horizontal .horizontal-layout .text-content p a, .wp-block-brblocks-cards-modal.layout-horizontal .horizontal-layout .text-content .card-description a { color: #0076b3; text-decoration: none; } .wp-block-brblocks-cards-modal.layout-horizontal .horizontal-layout .text-content p a:hover, .wp-block-brblocks-cards-modal.layout-horizontal .horizontal-layout .text-content .card-description a:hover { text-decoration: underline; } /* ========================= ROUND IMAGE (CARD + MODAL) ========================= */ .wp-block-brblocks-cards-modal img.round-image { border-radius: 50%; -o-object-fit: cover; object-fit: cover; aspect-ratio: 1/1; overflow: hidden; border: 2px solid #009dd9; } body > .modal-content .media-text__media img.round-image { border-radius: 50% !important; -o-object-fit: cover; object-fit: cover; aspect-ratio: 1/1; overflow: hidden; border: 3px solid #009dd9; width: 80px; height: 80px; flex: 0 0 120px; } @media (min-width: 769px) { body > .modal-content .media-text__media img.round-image { width: 140px; height: 140px; flex-basis: 140px; } } @media (max-width: 768px) { body > .modal-content .media-text__media { display: none; } } /* ========================================================= OVERLAY (save.js placeholder — ne pas toucher) ========================================================= */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 2147483646 !important; opacity: 0; transition: opacity 0.35s ease; } .modal-overlay.is-visible { display: block; opacity: 1; } /* ========================================================= BR-MODAL-OVERLAY — créé dynamiquement par view.js Classe préfixée pour éviter les conflits avec le thème ========================================================= */ .br-modal-overlay { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 2147483646 !important; opacity: 0; transition: opacity 0.35s ease; } .br-modal-overlay.is-visible { opacity: 1; } /* ========================================================= MODAL CONTENT — pop depuis le centre "body >" neutralise les règles .modal-content du thème (flex:0 0 100% et animation:zoom) ========================================================= */ body > .modal-content, body > .modal-content.is-visible, body > .modal-content.is-closing { animation: none !important; } body > .modal-content { position: fixed !important; top: 50% !important; left: 50% !important; width: 90% !important; max-width: 800px !important; max-height: 90vh !important; background: #fff !important; border-radius: 10px !important; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35) !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; flex: none !important; overflow: hidden !important; z-index: 2147483647 !important; transform: translate(-50%, -50%) scale(0.2) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease, visibility 0s linear 0.42s !important; } body > .modal-content.is-visible { transform: translate(-50%, -50%) scale(1) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease, visibility 0s linear 0s !important; } body > .modal-content.is-closing { transform: translate(-50%, -50%) scale(0.15) !important; opacity: 0 !important; visibility: visible !important; pointer-events: none !important; transition: transform 0.28s cubic-bezier(0.55, 0, 1, 0.45), opacity 0.22s ease !important; } /* ========================================================= MODAL HEADER ========================================================= */ .modal-header { width: 100%; position: relative; background-color: #e5f5fb; padding: 16px 24px; border-bottom: 2px solid #009dd9; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.05); } .modal-header > div { display: flex; align-items: baseline !important; gap: 12px; } .modal-title { font-size: 18px; font-weight: 700; margin: 0; } .modal-header .card-description { margin: 0; font-size: 14px; font-weight: 400; color: #4a4a4a; } .br-modal-close { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: bold; cursor: pointer; opacity: 0.7; transition: opacity 0.2s ease; } .br-modal-close:hover { opacity: 1; } /* ========================================================= MODAL BODY ========================================================= */ .scrollable-content { padding: 20px; overflow-y: auto; max-height: calc(90vh - 120px); } .scrollable-content p, .scrollable-content li { text-align: left; } /* ========================================================= GRID SUPPORT ========================================================= */ .ituContainer.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; } .ituContainer.grid > .ituCard[data-span="1"] { grid-column: span 1; } .ituContainer.grid > .ituCard[data-span="2"] { grid-column: span 2; } .ituContainer.grid > .ituCard[data-span="3"] { grid-column: span 3; } .ituContainer.grid > .ituCard[data-span="4"] { grid-column: span 4; } .ituContainer.grid > .ituCard[data-span="5"] { grid-column: span 5; } .ituContainer.grid > .ituCard[data-span="6"] { grid-column: span 6; } .ituContainer.grid > .ituCard[data-span="7"] { grid-column: span 7; } .ituContainer.grid > .ituCard[data-span="8"] { grid-column: span 8; } .ituContainer.grid > .ituCard[data-span="9"] { grid-column: span 9; } .ituContainer.grid > .ituCard[data-span="10"] { grid-column: span 10; } .ituContainer.grid > .ituCard[data-span="11"] { grid-column: span 11; } .ituContainer.grid > .ituCard[data-span="12"] { grid-column: span 12; } /* ========================================================= MEDIA TEXT DESKTOP ========================================================= */ .media-text { display: flex; flex-direction: row; align-items: flex-start; gap: 20px; } .media-text__media { flex: 0 0 auto; } .media-text__content { flex: 1 1 auto; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 768px) { body > .modal-content { width: 94% !important; max-height: 85vh !important; } .scrollable-content { padding: 18px; } .media-text__media { display: none; } .media-text { flex-direction: column; } } @media (max-width: 480px) { .modal-header { padding: 12px 16px; } .br-modal-close { font-size: 18px; } } /* ========================================================= FORCE MODAL ABOVE THEME HEADER ========================================================= */ body.modal-open .ituTopNav { transform: none !important; } /*# sourceMappingURL=style-index.css.map*/