/** * Page « Actualités » — Régie du Croset. * Héro avec slider auto (image centrale mise en avant), liste filtrable des * articles + pagination, zone d'avis libre, bande d'appel. Aux couleurs de la * régie (rouge de marque + pierre). S'appuie sur les variables de main.css. * * @package Regie_Du_Croset */ /* ========================================================================== 01 · Héro ========================================================================== */ .rdc-ah { position: relative; padding: calc(var(--rdc-nav-h) + 56px) 0 72px; /* Fond de base : doux dégradé pierre. Les lueurs animées (blobs aurora + arcs SVG) sont dans .rdc-ah-bg et prennent le relais pour la profondeur rouge. */ background: linear-gradient(180deg, var(--rdc-stone-50) 0%, var(--surface-card) 78%); overflow: hidden; text-align: center; } /* Couche décorative du fond (aria-hidden) : blobs + arcs SVG. */ .rdc-ah-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* Blob aurora de base : blobs positionnés en absolu, animés par GSAP. */ .rdc-ah-aurora { position: absolute; border-radius: 50%; filter: blur(64px); opacity: 0.5; will-change: transform, opacity; } /* Grand blob rouge principal, centré en haut. */ .rdc-ah-aurora-1 { width: 920px; height: 620px; top: -300px; left: 50%; margin-left: -460px; /* moitié de la largeur : centrage sans transform, GSAP pilote seul le transform */ background: radial-gradient(closest-side, rgba(154, 36, 33, 0.30), rgba(154, 36, 33, 0) 72%); } /* Blob rosé secondaire, légèrement décalé à gauche. */ .rdc-ah-aurora-2 { width: 720px; height: 520px; top: -240px; left: 32%; background: radial-gradient(closest-side, rgba(229, 124, 118, 0.26), rgba(229, 124, 118, 0) 72%); } /* Arcs SVG concentriques très discrets. Le SVG est centré en CSS (translateX) ; GSAP agrandit chaque cercle depuis l'épicentre (effet goutte d'eau), le centrage du SVG n'est jamais écrasé. La zone est haute (720) pour que les ondes aient la place de s'étendre au-delà du titre avant de s'effacer. */ .rdc-ah-lines { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(1200px, 140%); height: 720px; } .rdc-ah-lines-g { will-change: opacity; } /* Repli statique : sans JS (ou prefers-reduced-motion), les arcs restent discrètement visibles à très faible opacité. vector-effect conserve un contour fin même quand JS agrandit le cercle via scale (effet goutte d'eau). */ .rdc-ah-lines-g circle { opacity: 0.05; vector-effect: non-scaling-stroke; } /* Le contenu du héro doit rester AU-DESSUS de la couche décorative. */ .rdc-ah-head, .rdc-ah-slider { position: relative; z-index: 1; } .rdc-ah-head { max-width: 760px; } .rdc-ah-eyebrow { display: inline-block; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-accent); } .rdc-ah-title { margin: 14px 0 0; font-size: clamp(34px, 5.4vw, 60px); line-height: 1.06; color: var(--text-heading); text-wrap: balance; } .rdc-ah-lead { margin: 18px auto 0; max-width: 600px; font-size: clamp(16px, 1.6vw, 18px); line-height: 1.6; color: var(--text-muted); text-wrap: pretty; } /* --- Galerie décorative en boucle continue : la piste défile sans fin et l'image qui passe au centre grandit doucement vers un format plus carré. La géométrie (largeurs, hauteurs, écart, taille de l'image centrale) est pilotée par le JS en styles inline ; le CSS ne pose que l'apparence. --- */ .rdc-ah-slider { position: relative; margin-top: 52px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); } .rdc-ah-track { position: relative; display: flex; align-items: center; gap: 4px; width: max-content; height: 366px; will-change: transform; } /* Cellule à empreinte fixe : la carte interne grandit sans bousculer les autres. */ .rdc-ah-slide { flex: 0 0 auto; position: relative; width: 224px; height: 100%; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; } .rdc-ah-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* centrage par défaut (repli sans JS) ; le JS repose le transform complet */ /* Taille initiale de repli (sans JS). Avec JS, le JS pose sa propre taille inline une seule fois dans build(). */ width: 178px; height: 140px; /* border-radius fixe : le JS n'anime plus le rayon, seulement transform/opacity. */ border-radius: 16px; overflow: hidden; background: var(--surface-sunken); box-shadow: var(--shadow-card); opacity: 0.72; /* Le JS pilote transform et opacity via le ticker GSAP : pas de transition CSS. */ will-change: transform, opacity; transition: none; } .rdc-ah-card img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ========================================================================== 02 · Liste des articles ========================================================================== */ .rdc-al { padding: 88px 0 104px; background: var(--surface-card); } .rdc-al-empty { margin-top: 28px; color: var(--text-muted); font-size: 16px; } /* --- Puces de filtre --- */ .rdc-al-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; } .rdc-chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--radius-pill); border: 1.5px solid var(--border-strong); background: var(--surface-card); color: var(--text-body); font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .rdc-chip:hover { background: var(--color-accent-tint); } .rdc-chip.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } .rdc-chip:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus-ring); } .rdc-chip-count { min-width: 22px; padding: 0 6px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-muted); font-size: 12px; font-weight: 700; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .rdc-chip.is-active .rdc-chip-count { background: rgba(255, 255, 255, 0.22); color: #fff; } /* --- Grille de cartes --- */ .rdc-al-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 38px; align-items: stretch; } .rdc-al-none { margin-top: 40px; text-align: center; color: var(--text-muted); font-size: 16px; } .rdc-ac { display: flex; } .rdc-ac[hidden] { display: none; } .rdc-ac-link { display: flex; flex-direction: column; width: 100%; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; box-shadow: var(--shadow-card); transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); } .rdc-ac-link:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--border-strong); text-decoration: none; /* pas de soulignement du titre au survol */ } .rdc-ac-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-sunken); } .rdc-ac-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-out); } .rdc-ac-link:hover .rdc-ac-media img { transform: scale(1.05); } .rdc-ac-tags { position: absolute; top: 12px; left: 12px; display: flex; gap: 7px; flex-wrap: wrap; } .rdc-ac-tag { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .rdc-ac-tag--actualite { background: rgba(255, 255, 255, 0.92); color: var(--rdc-stone-900); } .rdc-ac-tag--conseil { background: var(--color-accent); color: #fff; } .rdc-ac-tag--presse { background: var(--rdc-stone-900); color: #fff; } .rdc-ac-tag--centre { background: rgba(43, 40, 38, 0.78); color: #fff; } .rdc-ac-tag--centre .rdc-icon { width: 12px; height: 12px; } /* Nom du média d'origine, pour un article de presse (« Paru dans 24 heures »). */ .rdc-ac-source { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--color-accent); } .rdc-ac-body { display: flex; flex-direction: column; gap: 9px; padding: 22px 22px 24px; flex: 1 1 auto; } .rdc-ac-date { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--text-faint); } .rdc-ac-date .rdc-icon { color: var(--color-accent); width: 14px; height: 14px; } .rdc-ac-title { font-family: var(--font-display); font-size: 20px; line-height: 1.25; font-weight: 600; color: var(--text-heading); text-wrap: balance; } .rdc-ac-excerpt { font-size: 14.5px; line-height: 1.6; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .rdc-ac-more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--color-accent); } .rdc-ac-arrow { display: inline-flex; transition: transform var(--duration-base) var(--ease-out); } .rdc-ac-link:hover .rdc-ac-arrow { transform: translateX(4px); } /* --- Pagination --- */ .rdc-al-pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 52px; } .rdc-al-pager[hidden] { display: none; } .rdc-al-page { min-width: 42px; height: 42px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); border: 1.5px solid var(--border-strong); background: var(--surface-card); color: var(--text-body); font-family: var(--font-body); font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .rdc-al-page:hover:not([disabled]) { background: var(--color-accent-tint); } .rdc-al-page.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; cursor: default; } .rdc-al-page[disabled] { opacity: 0.4; cursor: not-allowed; } .rdc-al-page--nav { font-size: 18px; line-height: 1; } .rdc-al-page:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus-ring); } /* ========================================================================== 03 · Avis clients (zone libre éditée par la régie) ========================================================================== */ .rdc-areviews { padding: 96px 0; background: var(--surface-page); } .rdc-areviews-body { margin-top: 40px; } /* ========================================================================== 03bis · Réseaux sociaux (widget Elfsight, masqué si non réglé) ========================================================================== */ .rdc-asocial { padding: 88px 0; background: var(--surface-card); } .rdc-asocial-body { margin-top: 40px; } /* ========================================================================== 04 · Bande d'appel (réutilise .rdc-cta de home.css, défini ici en repli) ========================================================================== */ .rdc-cta { position: relative; overflow: hidden; background: var(--color-accent); } .rdc-cta-watermark { position: absolute; right: 48px; bottom: -8px; height: 280px; width: auto; opacity: 0.18; transform: rotate(-4deg); pointer-events: none; user-select: none; } .rdc-cta-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-top: 76px; padding-bottom: 76px; flex-wrap: wrap; } .rdc-cta-text { display: flex; flex-direction: column; gap: 10px; max-width: 560px; } .rdc-cta-text h2 { margin: 0; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.15; color: #fff; text-wrap: balance; } .rdc-cta-text p { margin: 0; font-size: 16.5px; color: rgba(255, 255, 255, 0.85); text-wrap: pretty; } .rdc-cta-actions { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1024px) { .rdc-al-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .rdc-ah { padding: calc(var(--rdc-nav-h) + 36px) 0 56px; } .rdc-al { padding: 60px 0 72px; } .rdc-areviews { padding: 60px 0; } .rdc-asocial { padding: 60px 0; } /* Repli sans JS : piste plus courte sur mobile (avec JS, tailles inline). */ .rdc-ah-track { gap: 4px; height: 224px; } .rdc-ah-slide { width: 122px; } .rdc-ah-card { width: 104px; height: 84px; } .rdc-al-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 30px; } /* Puces de filtre : défilent horizontalement si trop nombreuses. */ .rdc-al-filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: calc(-1 * clamp(20px, 4vw, 40px)); margin-right: calc(-1 * clamp(20px, 4vw, 40px)); padding: 0 clamp(20px, 4vw, 40px) 4px; } .rdc-al-filters::-webkit-scrollbar { display: none; } .rdc-chip { flex-shrink: 0; } .rdc-cta-row { padding-top: 56px; padding-bottom: 56px; gap: 24px; } .rdc-cta-actions { width: 100%; } .rdc-cta-actions .rdc-btn { flex: 1 1 auto; } .rdc-cta-watermark { right: -20px; height: 200px; opacity: 0.14; } } @media (max-width: 480px) { .rdc-al { padding: 48px 0 60px; } } /* Mouvement réduit : la piste ne défile pas (le JS fige une vue remplie). */ @media (prefers-reduced-motion: reduce) { .rdc-ac-link, .rdc-ac-media img { transition: none; } } /* ========================================================================== Filtres mobiles (≤ 720px) : puce du filtre actif + bouton « Filtrer » qui ouvre le panneau de tous les filtres en pop-up ancrée. Desktop et tablette (> 720px) restent inchangés : le panneau (.rdc-al-filters) affiche la rangée de puces défilante d'origine, la barre compacte reste masquée. Sans JS, un repli