/* ========================================================================= EPICVIEW — Page Catalogue des services (catalogue-services.css) S'appuie sur home.css + communitymanagement.css (hero, boutons, reveal). Ce fichier : intégration du flipbook au thème + annuaire/recherche. (les styles internes du flipbook viennent de flipbook/catalogue.css) ========================================================================= */ /* ---------- Intégration du flipbook au thème (surcharges) ---------- */ /* Le flipbook sort du gabarit : il occupe toute la largeur de l'écran et une hauteur plein écran (svh = hauteur stable, pas de saut quand la barre d'URL mobile se replie). Le cadre perd donc ses coins arrondis. */ .ev-cat-flip-sec { padding-block: 0; padding-inline: 0; max-width: none; width: 100%; /* bloc de premier niveau : = largeur utile de */ } .ev-cat-flip-frame { position: relative; overflow: hidden; border: none; border-block: 1px solid rgba(164,0,0,.35); border-radius: 0; box-shadow: 0 40px 90px rgba(0,0,0,.55); } /* on remplace le fond gris d'origine par un fond sombre de marque */ .ev-cat-flip-frame .flipbook-container { height: 100svh; min-height: 560px; background: radial-gradient(90% 120% at 50% -10%, rgba(164,0,0,.16), transparent 60%), linear-gradient(160deg, #141416, #0a0a0c) !important; font-family: var(--ev-font) !important; } /* espacements : le magazine ne colle plus aux bords du cadre */ .ev-cat-flip-frame .flipbook-main-area { padding: clamp(1rem, 2.5vw, 2.5rem) clamp(1rem, 3vw, 3rem) !important; } /* ---------- Barre d'outils : TOUS les boutons doivent rester visibles ---- D'origine .flipbook-controls-inner est en nowrap + hauteur fixe : sous ~830 px le bouton « Télécharger PDF » sortait du cadre, et sous 400 px le son, le partage et le téléchargement étaient purement coupés. */ .ev-cat-flip-frame .flipbook-controls-inner { max-width: min(85rem, 100%); flex-wrap: wrap; height: auto; min-height: 45px; row-gap: .5rem; column-gap: clamp(.5rem, 2vw, 2rem); } .ev-cat-flip-frame .flipbook-nav-group { flex-wrap: wrap; justify-content: center; } @media (max-width: 900px) { /* le logo central est décoratif : il cède la place aux commandes */ .ev-cat-flip-frame .flipbook-controls-title { display: none; } .ev-cat-flip-frame .flipbook-controls-inner { justify-content: center; } } @media (max-width: 767px) { .ev-cat-flip-frame .flipbook-controls { padding: .55rem .45rem !important; } .ev-cat-flip-frame .flipbook-controls-inner { column-gap: .4rem; } .ev-cat-flip-frame .flipbook-nav-group { gap: .3rem; } /* flipbook/catalogue.css force height:100vh + max-height:700px en mobile : on rétablit une vraie hauteur plein écran, stable (svh). */ .ev-cat-flip-frame .flipbook-container { height: 100svh !important; max-height: none !important; min-height: 520px !important; } } .ev-cat-flip-frame .flipbook-controls { background-color: #0b0b0d !important; } /* plein écran : le cadre occupe tout l'écran (livre + barre d'outils) */ .ev-cat-flip-frame:fullscreen, .ev-cat-flip-frame:-webkit-full-screen { border-radius: 0; border: none; } .ev-cat-flip-frame:fullscreen .flipbook-container, .ev-cat-flip-frame:-webkit-full-screen .flipbook-container { height: 100svh !important; max-height: none !important; } /* logo texte dans la barre (remplace l'image externe) */ .ev-cat-flip-logo { font-family: var(--ev-font); font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; color: #fff; text-decoration: none; line-height: 1; white-space: nowrap; } .ev-cat-flip-logo b { color: var(--ev-red-lite); } /* chevrons latéraux (remplacent les png flaticon) */ .flipbook-side-arrows svg { width: 34px; height: 34px; color: #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); transition: color .25s var(--ev-ease); } .flipbook-side-arrows:hover svg { color: var(--ev-red-lite); } .flipbook-side-arrows.right svg { transform: none; } /* le bouton download reprend le rouge de marque au hover (pas de vert) */ .ev-cat-flip-frame #flipbook-btn-download:hover { background-color: var(--ev-red) !important; scale: .97; } .ev-cat-flip-frame .flipbook-btn-primary:hover { background-color: var(--ev-red) !important; } /* ========================================================================= ANNUAIRE / RECHERCHE INTELLIGENTE (widget sous le flipbook) ========================================================================= */ .ev-cat-dir { padding-block: clamp(3rem,7vw,5rem); } .ev-cat-search { position: relative; max-width: 680px; margin: 0 auto clamp(1.6rem,3vw,2.4rem); } .ev-cat-search__field { position: relative; display: flex; align-items: center; } .ev-cat-search__field svg { position: absolute; left: 1.1rem; width: 22px; height: 22px; color: var(--ev-grey-dim); pointer-events: none; } .ev-cat-search input { width: 100%; font-family: var(--ev-font); font-size: 1.05rem; color: #fff; padding: 1.05rem 3.2rem 1.05rem 3.2rem; border-radius: 100px; background: rgba(255,255,255,.04); border: 1px solid var(--ev-line); outline: none; transition: border-color .3s var(--ev-ease), background .3s var(--ev-ease); } .ev-cat-search input::placeholder { color: var(--ev-grey-dim); } .ev-cat-search input:focus { border-color: rgba(164,0,0,.6); background: rgba(255,255,255,.06); } .ev-cat-search__clear { position: absolute; right: 1rem; width: 30px; height: 30px; border-radius: 50%; display: none; place-items: center; cursor: pointer; border: none; background: rgba(255,255,255,.08); color: #fff; font-size: 1rem; } .ev-cat-search__clear.is-on { display: grid; } .ev-cat-search__count { text-align: center; margin-top: .8rem; font-size: .82rem; color: var(--ev-grey-dim); font-family: ui-monospace,monospace; } /* chips de catégories */ .ev-cat-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-bottom: clamp(2rem,4vw,2.8rem); } .ev-cat-chip { font-family: var(--ev-font); font-size: .88rem; font-weight: 600; color: var(--ev-grey); background: rgba(255,255,255,.03); border: 1px solid var(--ev-line); border-radius: 100px; padding: .55rem 1.15rem; cursor: pointer; white-space: nowrap; transition: color .3s var(--ev-ease), border-color .3s var(--ev-ease), background .3s var(--ev-ease); } .ev-cat-chip:hover { color: #fff; border-color: rgba(255,255,255,.35); } .ev-cat-chip.is-active { color: #fff; border-color: transparent; background: linear-gradient(100deg,var(--ev-red-lite),var(--ev-red)); box-shadow: 0 8px 22px rgba(164,0,0,.32); } .ev-cat-chip__n { opacity: .7; font-size: .78rem; margin-left: .25rem; } /* groupes + cartes de services */ .ev-cat-group { margin-bottom: clamp(2rem,4vw,3rem); } .ev-cat-group.is-hidden { display: none; } .ev-cat-group__head { display: flex; align-items: baseline; gap: .8rem; margin-bottom: 1.1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--ev-line); } .ev-cat-group__head h3 { font-size: clamp(1.15rem,2.4vw,1.5rem); font-weight: 800; } .ev-cat-group__head span { font-family: ui-monospace,monospace; font-size: .78rem; color: var(--ev-red-lite); } .ev-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: .9rem; } .ev-cat-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; padding: 1rem 1.2rem; border-radius: 14px; cursor: pointer; background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); border: 1px solid var(--ev-line); color: #fff; font-family: var(--ev-font); transition: transform .3s var(--ev-ease), border-color .3s var(--ev-ease), background .3s var(--ev-ease); } .ev-cat-item:hover { transform: translateY(-3px); border-color: rgba(164,0,0,.55); background: linear-gradient(160deg, rgba(164,0,0,.12), rgba(255,255,255,.02)); } .ev-cat-item.is-hidden { display: none; } .ev-cat-item__t { font-size: .95rem; font-weight: 600; line-height: 1.35; } .ev-cat-item__go { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; font-family: ui-monospace,monospace; font-size: .72rem; letter-spacing: .04em; color: var(--ev-red-lite); border: 1px solid rgba(164,0,0,.4); border-radius: 100px; padding: .35rem .7rem; white-space: nowrap; transition: background .3s var(--ev-ease), color .3s var(--ev-ease); } .ev-cat-item:hover .ev-cat-item__go { background: var(--ev-red); color: #fff; border-color: var(--ev-red); } .ev-cat-empty { text-align: center; color: var(--ev-grey); padding: 2rem; display: none; } .ev-cat-empty.is-on { display: block; } /* mise en évidence quand on saute à une page depuis l'annuaire */ .ev-cat-flip-frame.is-pulse { animation: evCatPulse 1s var(--ev-ease); } @keyframes evCatPulse { 0% { box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(164,0,0,.9); } 100% { box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03); } } @media (max-width: 640px) { .ev-cat-grid { grid-template-columns: 1fr; } .ev-cat-chips { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .ev-cat-chip { flex: 0 0 auto; } }