/* ========================================================================== Régie du Croset SA — main.css Tokens du design system + chrome global (nav, footer, boutons, prose). Accent : rouge brun #9a2421 (logo) ; le rosewood #9c3d42 reste réservé au listing Flatfox. Marcellus (titres, Regular seul) + Hanken Grotesk (le reste). Fonds plats, photo plein cadre uniquement au héro (sous scrim sombre). ========================================================================== */ :root { /* --- Gamme de rouges de marque --- */ --rdc-red-900: #5c1311; --rdc-red-800: #7e1d1b; /* survol / appui */ --rdc-red-700: #9a2421; /* rouge PRINCIPAL (logo, theme-color) */ --rdc-red-600: #9c3d42; /* rosewood : accent du listing Flatfox */ --rdc-red-200: #e9c9c7; --rdc-red-100: #f5e2e0; --rdc-red-50: #fbf2f1; /* --- Anthracite du logo --- */ --rdc-gray-700: #58595b; /* --- Neutres chauds (pierre) --- */ --rdc-stone-950: #1e1c1a; --rdc-stone-900: #2b2826; --rdc-stone-800: #3f3c39; --rdc-stone-600: #6b665f; --rdc-stone-500: #87817a; --rdc-stone-400: #a8a29a; --rdc-stone-300: #cfc9c0; --rdc-stone-200: #e5e1da; --rdc-stone-100: #f0eee9; --rdc-stone-50: #f8f7f4; --rdc-white: #ffffff; /* --- Statuts --- */ --rdc-green-600: #2f7d4f; --rdc-amber-600: #b97324; /* --- Alias sémantiques --- */ --color-accent: var(--rdc-red-700); --color-accent-hover: var(--rdc-red-800); --color-accent-soft: var(--rdc-red-600); --color-accent-tint: var(--rdc-red-50); --color-accent-border: var(--rdc-red-200); --text-heading: var(--rdc-stone-950); --text-body: var(--rdc-stone-800); --text-muted: var(--rdc-stone-600); --text-faint: var(--rdc-stone-400); --text-on-accent: var(--rdc-white); --text-on-dark: #f4f1ec; --text-price: var(--rdc-red-700); --surface-page: var(--rdc-stone-50); --surface-card: var(--rdc-white); --surface-sunken: var(--rdc-stone-100); --surface-dark: #211e1c; --border-subtle: #e8e4dd; --border-strong: #d3cdc4; --border-input: #d8d3ca; --focus-ring: rgba(154, 36, 33, 0.28); --scrim-hero: linear-gradient(180deg, rgba(30, 22, 20, 0.20) 0%, rgba(30, 22, 20, 0.62) 100%); /* --- Typo --- */ /* TEST : titres en sans-serif standard (Inter) au lieu du serif Marcellus. Pour revenir au serif : remettre 'Marcellus', 'Times New Roman', serif et la graisse des titres a 400 (voir h1..h4 plus bas) + family=Marcellus dans functions.php. */ --font-display: 'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --font-body: 'Hanken Grotesk', -apple-system, 'Segoe UI', sans-serif; --tracking-caps: 0.16em; --tracking-wide: 0.08em; /* --- Espacement, rayons, ombres, mouvement --- */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; --shadow-card: 0 1px 3px rgba(33, 26, 24, 0.07), 0 1px 2px rgba(33, 26, 24, 0.05); --shadow-hover: 0 10px 28px rgba(33, 26, 24, 0.14); --shadow-pop: 0 18px 48px rgba(33, 26, 24, 0.22); --shadow-search: 0 14px 40px rgba(33, 26, 24, 0.18); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --duration-fast: 150ms; --duration-base: 220ms; --container: 1200px; --rdc-nav-h: 84px; } /* -------------------------------------------------------------------------- Reset léger + base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--text-body); background: var(--surface-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; } a { color: var(--color-accent); text-decoration: none; } a:hover { color: var(--color-accent-hover); text-decoration: underline; text-underline-offset: 3px; } h1, h2, h3, h4 { font-family: var(--font-display); /* TEST police sans-serif : 600 (semibold), plus lisible qu'un 400 en sans pour de grands titres. Marcellus n'avait que le Regular (400). */ font-weight: 600; line-height: 1.1; letter-spacing: 0.01em; color: var(--text-heading); margin: 0 0 0.5em; } /* Portion mise en exergue d'un titre ( des zones Gutenberg) : on la remet droite (Marcellus n'a pas de vrai italique, le navigateur en synthétisait un penché peu flatteur), sans la colorer : le rouge devenait illisible sur les titres posés par-dessus une image (héro, bande d'appel). Elle hérite donc de la couleur du titre, lisible sur fond clair comme sur fond sombre. Le surlignage animé de .rdc-statement-text garde son propre style. */ h1 em, h2 em, h3 em, h4 em { font-style: normal; } .rdc-icon { flex-shrink: 0; } .rdc-flip { transform: rotate(180deg); } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; } .rdc-skip-link:focus { clip: auto; clip-path: none; height: auto; width: auto; position: fixed; top: 8px; left: 8px; z-index: 100000; background: var(--color-accent); color: #fff; padding: 10px 16px; border-radius: var(--radius-md); font-weight: 600; } /* Conteneurs */ .rdc-wrap { max-width: var(--container); margin: 0 auto; padding-left: clamp(20px, 4vw, 40px); padding-right: clamp(20px, 4vw, 40px); } .rdc-inner { position: relative; z-index: 2; } .rdc-site-main { display: block; } .rdc-s-light { background: var(--surface-page); } /* -------------------------------------------------------------------------- Boutons — rayon 8 px, le survol assombrit (pas de réduction) -------------------------------------------------------------------------- */ .rdc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: var(--radius-md); border: 1.5px solid transparent; font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; text-decoration: none !important; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .rdc-btn-sm { height: 36px; padding: 0 16px; font-size: 14px; } .rdc-btn-lg { height: 52px; padding: 0 28px; font-size: 16px; } .rdc-btn-primary { background: var(--color-accent); color: var(--text-on-accent); border-color: var(--color-accent); } .rdc-btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--text-on-accent); } .rdc-btn-ghost { background: transparent; color: var(--color-accent); border-color: var(--color-accent); } .rdc-btn-ghost:hover { background: var(--color-accent-tint); color: var(--color-accent); } .rdc-btn-quiet { background: var(--surface-sunken); color: var(--text-heading); } .rdc-btn-quiet:hover { background: var(--rdc-stone-200); color: var(--text-heading); } .rdc-btn-light { background: #fff; color: var(--color-accent); border-color: #fff; } .rdc-btn-light:hover { background: var(--rdc-stone-100); border-color: var(--rdc-stone-100); color: var(--color-accent); } .rdc-btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.6); } .rdc-btn-outline-light:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .rdc-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus-ring); } /* -------------------------------------------------------------------------- En-tête de section (eyebrow + Marcellus + filet rouge + lead) -------------------------------------------------------------------------- */ .rdc-sh { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 720px; } .rdc-sh--center { align-items: center; text-align: center; margin: 0 auto; } .rdc-sh-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-accent); } .rdc-sh-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; letter-spacing: 0.01em; color: var(--text-heading); text-wrap: balance; } .rdc-sh-rule { width: 56px; height: 3px; background: var(--color-accent); border-radius: 2px; } .rdc-sh-lead { margin: 0; font-size: 19px; line-height: 1.55; color: var(--text-muted); text-wrap: pretty; } .rdc-sh--dark .rdc-sh-eyebrow { color: var(--rdc-red-200); } .rdc-sh--dark .rdc-sh-title { color: var(--text-on-dark); } .rdc-sh--dark .rdc-sh-lead { color: rgba(244, 241, 236, 0.75); } /* Ligne « en-tête + bouton » des sections de l'accueil */ .rdc-sh-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } /* Pilule à filets : —— ◦ [ Libellé ] ◦ —— */ .rdc-pill { display: flex; align-items: center; justify-content: center; gap: 14px; } .rdc-pill-line { flex: 0 0 56px; height: 1px; background: var(--border-strong); } .rdc-pill-dot { width: 5px; height: 5px; border-radius: 99px; background: var(--color-accent); flex-shrink: 0; } .rdc-pill-label { display: inline-flex; align-items: center; height: 30px; padding: 0 16px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); font-size: 12.5px; font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); white-space: nowrap; } .rdc-pill--dark .rdc-pill-line { background: rgba(244, 241, 236, 0.3); } .rdc-pill--dark .rdc-pill-label { border-color: rgba(244, 241, 236, 0.3); color: var(--text-on-dark); } /* -------------------------------------------------------------------------- Navigation — blanche givrée par-dessus le héro, blanche pleine ailleurs -------------------------------------------------------------------------- */ .rdc-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--rdc-nav-h); display: flex; flex-direction: column; justify-content: center; background: var(--surface-card); border-bottom: 1px solid var(--border-subtle); transition: box-shadow var(--duration-base) var(--ease-out); } body.rdc-has-dark-hero .rdc-nav { background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: rgba(255, 255, 255, 0.4); } .rdc-nav.rdc-scrolled { box-shadow: var(--shadow-card); } .admin-bar .rdc-nav { top: 32px; } @media screen and (max-width: 782px) { /* Barre d'admin masquée sur mobile pour tout le monde, y compris l'administrateur : le client ne modifie jamais depuis son téléphone et veut voir le site comme un simple visiteur. Seuil identique à celui de WordPress (782px). */ #wpadminbar { display: none !important; } /* WordPress pousse de 46px pour compenser la barre : on annule ce décalage avec une spécificité supérieure à celle de son style (astuce :not(#id), qui compte comme un sélecteur d'identifiant). */ html:not(#rdc-no-adminbar) { margin-top: 0 !important; } .admin-bar .rdc-nav { top: 0; } } /* Accueil, mobile uniquement : nav transparente en haut de page, à titre de test demandé par le client. Dès le premier scroll (classe .rdc-scrolled posée par main.js), retour en douceur à la nav blanche normale. */ @media (max-width: 720px) { body.home.rdc-has-dark-hero .rdc-nav { transition: background var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); } body.home.rdc-has-dark-hero .rdc-nav:not(.rdc-scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; } /* Léger dégradé sombre pour garder le logo et les liens lisibles sur le héro. */ body.home.rdc-has-dark-hero .rdc-nav:not(.rdc-scrolled)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(20, 14, 13, 0.35), rgba(20, 14, 13, 0)); } /* Logo, badge et repli textuel passent en blanc tant que la nav est transparente. */ body.home.rdc-has-dark-hero .rdc-brand-logo, body.home.rdc-has-dark-hero .rdc-brand::after { transition: filter var(--duration-base) var(--ease-out); } /* Traits du burger : on conserve la transition d'ouverture (transform, opacity) et on y ajoute celle de la couleur. */ body.home.rdc-has-dark-hero .rdc-nav-burger span { transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-fast), background var(--duration-base) var(--ease-out); } body.home.rdc-has-dark-hero .rdc-nav:not(.rdc-scrolled) .rdc-brand-logo, body.home.rdc-has-dark-hero .rdc-nav:not(.rdc-scrolled) .rdc-brand::after { filter: brightness(0) invert(1); } body.home.rdc-has-dark-hero .rdc-nav:not(.rdc-scrolled) .rdc-brand-name, body.home.rdc-has-dark-hero .rdc-nav:not(.rdc-scrolled) .rdc-mark { color: #fff; } body.home.rdc-has-dark-hero .rdc-nav:not(.rdc-scrolled) .rdc-nav-burger span { background: #fff; } } /* Barre volontairement plus large que le contenu (1480 vs 1200) : la marque se cale tout à gauche, le groupe social + CTA tout à droite, et les liens sont centrés en absolu au milieu de la barre (cf. .rdc-nav-links). */ .rdc-nav-row { position: relative; display: flex; align-items: center; gap: 0; width: 100%; max-width: 1480px; } .rdc-brand { display: inline-flex; align-items: center; gap: 7px; color: var(--text-heading); text-decoration: none !important; } .rdc-brand .rdc-mark { color: var(--color-accent); } .rdc-brand-logo { height: 60px; width: auto; display: block; } /* Badge anniversaire repris de l'ancien site, posé après le logo (élément flex). */ .rdc-brand::after { content: ""; display: block; flex-shrink: 0; width: 62px; height: 33px; background: url("../../medias/40ans.png") no-repeat center / contain; } .rdc-brand-name { font-weight: 700; font-size: 16px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--rdc-gray-700); white-space: nowrap; } .rdc-brand-sa { font-weight: 400; font-size: 10px; vertical-align: super; margin-left: 5px; opacity: 0.75; } .rdc-nav-links { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .rdc-nav-links > li { position: relative; } .rdc-nav-links a { position: relative; display: inline-block; padding: 8px 14px; border-radius: var(--radius-sm); color: var(--text-body); font-size: 15px; font-weight: 500; text-decoration: none !important; transition: color var(--duration-fast) var(--ease-out); } .rdc-nav-links a:hover { color: var(--text-heading); } .rdc-nav-links .current-menu-item > a, .rdc-nav-links .current_page_item > a { color: var(--color-accent); font-weight: 600; } .rdc-nav-links .current-menu-item > a::after, .rdc-nav-links .current_page_item > a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; border-radius: 1px; background: var(--color-accent); } /* Sous-menus (menus WP, profondeur 2) */ .rdc-nav-links .sub-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px; padding: 8px; margin: 0; list-style: none; background: var(--surface-card); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-pop); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), visibility var(--duration-base); } /* Pont invisible au-dessus du sous-menu : le survol ne se perd pas dans l'écart. */ .rdc-nav-links .sub-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } .rdc-nav-links li:hover > .sub-menu, .rdc-nav-links li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } /* Élément avec sous-menu : petit chevron qui pivote à l'ouverture. */ .rdc-nav-links > .menu-item-has-children > a { padding-right: 28px; } .rdc-nav-links > .menu-item-has-children > a::before { content: ''; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.7; transition: transform var(--duration-base) var(--ease-out), margin-top var(--duration-base) var(--ease-out); } .rdc-nav-links > .menu-item-has-children:hover > a::before, .rdc-nav-links > .menu-item-has-children:focus-within > a::before { transform: rotate(-135deg); margin-top: -1px; } /* Parent d'une page courante (ex. Carrières sous « L'entreprise ») : mis en valeur. */ .rdc-nav-links .current-menu-ancestor > a, .rdc-nav-links .current-menu-parent > a { color: var(--color-accent); font-weight: 600; } .rdc-nav-links .sub-menu a { display: block; border-radius: var(--radius-md); padding: 9px 12px; } .rdc-nav-links .sub-menu a:hover { background: var(--color-accent-tint); color: var(--color-accent); } .rdc-nav-cta { flex-shrink: 0; margin-left: 12px; } /* Burger */ .rdc-nav-burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .rdc-nav-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--text-heading); transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-fast); } .rdc-nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .rdc-nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .rdc-nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* -------------------------------------------------------------------------- Menu mobile — overlay plein écran « givré », logo en filigrane rouge -------------------------------------------------------------------------- */ /* Blocage du scroll de fond quand l'overlay est ouvert */ html.rdc-nav-locked, body.rdc-nav-locked { overflow: hidden; } .rdc-nav-mobile { /* z-index très élevé : le menu ouvert doit couvrir toute carte Leaflet (ses contrôles montent jusqu'à 1000) et le chrome de la page Louer. isolation: isolate borne le mix-blend-mode du filigrane à l'intérieur du menu, pour un rendu identique sur toutes les pages (sinon il « screen » avec le contenu derrière, d'où le filigrane visible seulement parfois). */ position: fixed; inset: 0; z-index: 1200; isolation: isolate; display: flex; flex-direction: column; padding: max(16px, env(safe-area-inset-top)) clamp(22px, 6vw, 48px) max(24px, env(safe-area-inset-bottom)); background: var(--surface-dark); color: var(--text-on-dark); overflow: hidden; /* État fermé : invisible, légèrement décalé vers le haut. */ opacity: 0; transform: translateY(-12px); visibility: hidden; transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out), visibility 320ms; } .rdc-nav-mobile[hidden] { display: none; } .rdc-nav-mobile.is-open { opacity: 1; transform: none; visibility: visible; } /* Voile chaud pour densifier le fond sombre et faire vibrer l'accent. */ .rdc-nav-mobile::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 85% at 100% 0%, rgba(154, 36, 33, 0.30) 0%, rgba(154, 36, 33, 0) 55%), radial-gradient(90% 70% at 0% 100%, rgba(126, 29, 27, 0.22) 0%, rgba(126, 29, 27, 0) 60%); } /* Pictogramme en filigrane : grand, en bas, teinté ROUGE, façon astiqué. */ .rdc-nav-mobile-mark { position: absolute; z-index: 0; pointer-events: none; user-select: none; right: -14%; bottom: -10%; width: min(96vw, 560px); height: auto; opacity: 0.07; filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.06)); mix-blend-mode: screen; transform: rotate(-6deg) scale(0.96); transition: transform 700ms var(--ease-out), opacity 700ms var(--ease-out); } /* Teinte rouge du filigrane par superposition. */ .rdc-nav-mobile::after { content: ""; position: absolute; z-index: 0; pointer-events: none; right: -14%; bottom: -10%; width: min(96vw, 560px); height: min(96vw, 560px); background: radial-gradient(circle at 60% 60%, rgba(154, 36, 33, 0.35), rgba(154, 36, 33, 0) 62%); opacity: 0; transition: opacity 700ms var(--ease-out); } .rdc-nav-mobile.is-open .rdc-nav-mobile-mark { opacity: 0.12; transform: rotate(-6deg) scale(1); } .rdc-nav-mobile.is-open::after { opacity: 1; } /* Barre supérieure : logo + bouton de fermeture */ .rdc-nav-mobile-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; } .rdc-nav-mobile-brand { display: inline-flex; align-items: center; /* Apparaît en fondu vers le haut à l'ouverture, comme les items du menu. */ opacity: 0; transform: translateY(10px); } .rdc-nav-mobile.is-open .rdc-nav-mobile-brand { animation: rdc-nav-stagger 460ms var(--ease-out) forwards; animation-delay: 60ms; } .rdc-nav-mobile-brand img { height: 40px; width: auto; display: block; filter: brightness(0) invert(1); opacity: 0.95; } .rdc-nav-mobile-brand .rdc-mark { color: #fff; } .rdc-nav-mobile-close { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.06); color: var(--text-on-dark); cursor: pointer; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .rdc-nav-mobile-close:hover { background: var(--color-accent); border-color: var(--color-accent); } .rdc-nav-mobile-close:active { transform: scale(0.94); } .rdc-nav-mobile-close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); } /* Corps : liens en grand, centrés verticalement */ .rdc-nav-mobile-body { position: relative; z-index: 2; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; /* Resserré et borné par la hauteur d'écran : avec 8 items + CTA + réseaux sociaux, le menu ne doit jamais défiler. overflow-y reste un ultime secours (cf. plus bas). */ gap: clamp(10px, 1.8vh, 20px); padding: clamp(14px, 3vh, 32px) 0; overflow-y: auto; } .rdc-nav-mobile-list { list-style: none; margin: 0; padding: 0; } .rdc-nav-mobile-list > li { /* Cascade à l'ouverture (décalage par index --rdc-stagger). */ opacity: 0; transform: translateY(14px); } /* Séparateur presque transparent entre deux items. */ .rdc-nav-mobile-list > li + li { border-top: 1px solid rgba(244, 241, 236, 0.08); } .rdc-nav-mobile.is-open .rdc-nav-mobile-list > li { animation: rdc-nav-stagger 460ms var(--ease-out) forwards; animation-delay: calc(120ms + var(--rdc-stagger, 0) * 60ms); } @keyframes rdc-nav-stagger { to { opacity: 1; transform: none; } } .rdc-nav-mobile-list a { display: flex; align-items: baseline; gap: 16px; padding: clamp(6px, 1.4vh, 10px) 0; color: var(--text-on-dark); font-family: var(--font-display); /* Bornée aussi par la hauteur d'écran, pour ne jamais provoquer de défilement. */ font-size: clamp(22px, min(6.6vw, 4.4vh), 36px); font-weight: 400; line-height: 1.05; letter-spacing: 0.01em; text-decoration: none !important; transition: color var(--duration-fast) var(--ease-out), padding-left var(--duration-base) var(--ease-out); } .rdc-nav-mobile-list a:hover, .rdc-nav-mobile-list a:focus-visible { color: #fff; padding-left: 6px; outline: none; } .rdc-nav-mobile-list a:focus-visible .rdc-nav-mobile-lbl { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; } .rdc-nav-mobile-num { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: var(--tracking-wide); color: var(--color-accent-soft); flex-shrink: 0; transform: translateY(-0.35em); } .rdc-nav-mobile-list .current-menu-item > a, .rdc-nav-mobile-list .current_page_item > a { color: #fff; } .rdc-nav-mobile-list .current-menu-item .rdc-nav-mobile-num, .rdc-nav-mobile-list .current_page_item .rdc-nav-mobile-num { color: var(--rdc-red-200); } /* Sous-menus (menus WP à plusieurs niveaux) : accordéon repliable au clic */ .rdc-nav-mobile-list .has-sub { position: relative; } .rdc-nav-mobile-list .has-sub > a { padding-right: 52px; } .rdc-nav-mobile-subtoggle { position: absolute; top: 6px; right: 0; width: 42px; height: 42px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(244, 241, 236, 0.28); border-radius: 50%; background: transparent; color: var(--text-on-dark); cursor: pointer; transition: background var(--duration-fast) var(--ease-out); } .rdc-nav-mobile-subtoggle::before { content: ""; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--duration-base) var(--ease-out); } .rdc-nav-mobile-subtoggle:hover, .rdc-nav-mobile-subtoggle:focus-visible { background: rgba(244, 241, 236, 0.12); outline: none; } .rdc-nav-mobile-list .is-sub-open > .rdc-nav-mobile-subtoggle::before { transform: translateY(2px) rotate(-135deg); } .rdc-nav-mobile-list .sub-menu { list-style: none; margin: 0; padding: 0 0 0 4px; overflow: hidden; max-height: 0; opacity: 0; transition: max-height var(--duration-base) var(--ease-out), opacity var(--duration-fast) var(--ease-out), margin var(--duration-base) var(--ease-out); } .rdc-nav-mobile-list .is-sub-open > .sub-menu { max-height: 60vh; opacity: 1; margin: 6px 0 10px; } /* Les enfants glissent et apparaissent depuis la droite, en cascade. */ .rdc-nav-mobile-list .sub-menu li { opacity: 0; transform: translateX(24px); } .rdc-nav-mobile-list .is-sub-open > .sub-menu li { animation: rdc-sub-in 380ms var(--ease-out) forwards; } .rdc-nav-mobile-list .is-sub-open > .sub-menu li:nth-child(1) { animation-delay: 60ms; } .rdc-nav-mobile-list .is-sub-open > .sub-menu li:nth-child(2) { animation-delay: 115ms; } .rdc-nav-mobile-list .is-sub-open > .sub-menu li:nth-child(3) { animation-delay: 170ms; } .rdc-nav-mobile-list .is-sub-open > .sub-menu li:nth-child(4) { animation-delay: 225ms; } .rdc-nav-mobile-list .is-sub-open > .sub-menu li:nth-child(n+5) { animation-delay: 280ms; } @keyframes rdc-sub-in { to { opacity: 1; transform: none; } } .rdc-nav-mobile-list .sub-menu a { font-size: clamp(18px, 5vw, 22px); color: rgba(244, 241, 236, 0.78); } .rdc-nav-mobile-list .sub-menu a:hover { color: #fff; } @media (prefers-reduced-motion: reduce) { .rdc-nav-mobile-list .sub-menu li { opacity: 1; transform: none; animation: none; } } /* CTA en bas du corps */ .rdc-nav-mobile-cta { margin-top: clamp(6px, 1.2vh, 14px); } .rdc-nav-mobile-cta .rdc-btn { width: 100%; opacity: 0; transform: translateY(14px); } .rdc-nav-mobile.is-open .rdc-nav-mobile-cta .rdc-btn { animation: rdc-nav-stagger 460ms var(--ease-out) forwards; animation-delay: 360ms; } @media (prefers-reduced-motion: reduce) { .rdc-nav-mobile { transition: opacity 1ms, visibility 1ms; transform: none; } .rdc-nav-mobile-mark, .rdc-nav-mobile::after { transition: none; } .rdc-nav-mobile.is-open .rdc-nav-mobile-list > li, .rdc-nav-mobile.is-open .rdc-nav-mobile-cta .rdc-btn, .rdc-nav-mobile.is-open .rdc-nav-mobile-brand { animation: none; opacity: 1; transform: none; } .rdc-nav-mobile-list > li, .rdc-nav-mobile-cta .rdc-btn, .rdc-nav-mobile-brand { opacity: 1; transform: none; } } /* Bouton de fermeture intégré : le burger se mue déjà en croix (voir plus haut) mais l'overlay possède sa propre croix dédiée pour rester atteignable. */ @media (max-width: 1080px) { .rdc-nav-links, .rdc-nav-cta { display: none; } .rdc-nav-burger { display: flex; } } /* -------------------------------------------------------------------------- Révélations au scroll (IntersectionObserver pose .rdc-in) — discrètes -------------------------------------------------------------------------- */ .rdc-reveal { opacity: 0; transform: translateY(28px); transition: opacity 750ms var(--ease-out), transform 750ms var(--ease-out); will-change: opacity, transform; } .rdc-reveal.rdc-in { opacity: 1; transform: none; } /* Quand le moteur GSAP (motion.js) est actif, il pilote opacity/transform en inline : on retire la transition CSS pour éviter tout double effet. */ .rdc-gsap .rdc-reveal { transition: none; } @media (prefers-reduced-motion: reduce) { .rdc-reveal { opacity: 1; transform: none; transition: none; } } /* -------------------------------------------------------------------------- Fil d'Ariane -------------------------------------------------------------------------- */ .rdc-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); margin-bottom: 26px; } .rdc-breadcrumb a { color: var(--text-muted); text-decoration: none; } .rdc-breadcrumb a:hover { color: var(--color-accent); } .rdc-breadcrumb .rdc-sep { opacity: 0.4; } /* -------------------------------------------------------------------------- Pages génériques + prose -------------------------------------------------------------------------- */ .rdc-generic { padding: calc(var(--rdc-nav-h) + clamp(48px, 7vw, 90px)) 0 clamp(72px, 9vw, 128px); } .rdc-lead { font-size: clamp(30px, 4vw, 44px); max-width: 24ch; } .rdc-prose { max-width: 72ch; font-size: 17px; line-height: 1.6; overflow-wrap: break-word; } .rdc-prose h2 { font-size: clamp(24px, 3vw, 32px); margin-top: 1.6em; } .rdc-prose h3 { font-size: clamp(20px, 2.4vw, 24px); margin-top: 1.4em; } .rdc-prose a { text-decoration: underline; text-underline-offset: 3px; } .rdc-prose img { border-radius: var(--radius-lg); } /* Securite responsive du contenu d'article : rien ne deborde en largeur. */ .rdc-prose table { display: block; width: 100%; overflow-x: auto; } .rdc-prose pre { overflow-x: auto; } .rdc-prose :where(iframe, embed, object, video) { max-width: 100%; } .rdc-prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--color-accent); font-family: var(--font-display); font-size: 1.15em; color: var(--text-heading); } /* Liste d'articles (index.php) */ .rdc-post-list { display: grid; gap: 24px; margin-top: 36px; max-width: 760px; } .rdc-post-card { padding: 26px 28px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); } .rdc-post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); } .rdc-post-title { font-size: 24px; margin-bottom: 4px; } .rdc-post-title a { color: var(--text-heading); text-decoration: none; } .rdc-post-title a:hover { color: var(--color-accent); } .rdc-post-meta { font-size: 12.5px; font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; } .rdc-post-thumb { margin: 8px 0 26px; } .rdc-post-thumb img { border-radius: var(--radius-lg); max-height: 70vh; object-fit: cover; width: 100%; } .rdc-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } .rdc-pagination { margin-top: 40px; } .rdc-pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; } .rdc-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); color: var(--text-heading); font-weight: 600; text-decoration: none; } .rdc-pagination .page-numbers.current { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } .rdc-pagination a.page-numbers:hover { border-color: var(--color-accent); color: var(--color-accent); text-decoration: none; } /* 404 */ .rdc-404 .rdc-404-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } .rdc-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-accent); margin-bottom: 16px; } /* -------------------------------------------------------------------------- Footer — surface sombre chaude -------------------------------------------------------------------------- */ .rdc-footer { background: var(--surface-dark); color: var(--text-on-dark); } .rdc-footer a { color: rgba(244, 241, 236, 0.78); text-decoration: none; } .rdc-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .rdc-footer-top { padding-top: 64px; padding-bottom: 48px; } .rdc-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 56px; } .rdc-footer-logo { height: 72px; width: auto; align-self: flex-start; margin-top: -6px; } .rdc-footer-brand { display: flex; flex-direction: column; gap: 20px; } .rdc-footer-mark { color: var(--color-accent); } .rdc-footer-brand .rdc-brand-name { color: #fff; } .rdc-footer-brand p { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(244, 241, 236, 0.72); max-width: 380px; text-wrap: pretty; } /* -------------------------------------------------------------------------- Réseaux sociaux (helper rdc_social_links) : header, menu mobile, footer. Les URL viennent du Customizer ; n'apparaît que si au moins un est renseigné. -------------------------------------------------------------------------- */ .rdc-social { display: inline-flex; align-items: center; gap: 10px; } .rdc-social-link { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; text-decoration: none !important; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .rdc-social-link:hover { transform: translateY(-1px); } .rdc-social-link .rdc-icon { display: block; } /* Header (desktop) : icônes discrètes, masquées sous 1080px (menu burger). margin-left:auto pousse le groupe social + CTA tout à droite de la barre ; icônes resserrées (gap 6) et un peu plus petites, collées au bouton. */ .rdc-nav-social { margin-left: auto; gap: 6px; } .rdc-nav-social .rdc-social-link { width: 32px; height: 32px; color: var(--text-muted); border: 1px solid var(--border-subtle); } .rdc-nav-social .rdc-social-link:hover { color: var(--color-accent); border-color: var(--color-accent-border); background: var(--color-accent-tint); } @media (max-width: 1080px) { .rdc-nav-social { display: none; } } /* Menu mobile : rangée d'icônes centrée, au fond du panneau. Espace avec le CTA nettement resserré (l'essentiel de la respiration verticale vient déjà du gap de .rdc-nav-mobile-body). */ .rdc-nav-mobile-social { position: relative; z-index: 2; justify-content: center; gap: 14px; margin-top: clamp(2px, 0.6vh, 8px); } .rdc-nav-mobile-social .rdc-social-link { width: 46px; height: 46px; color: var(--text-on-dark); border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06); } .rdc-nav-mobile-social .rdc-social-link:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } /* Footer : icônes claires sur fond sombre. */ .rdc-footer-social { gap: 12px; } .rdc-footer-social .rdc-social-link { width: 40px; height: 40px; color: var(--text-on-dark, #f4f1ec); border: 1px solid rgba(255, 255, 255, 0.18); } .rdc-footer-social .rdc-social-link:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } .rdc-fcol { display: flex; flex-direction: column; gap: 10px; } .rdc-fcol-title { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: rgba(244, 241, 236, 0.55); margin: 0 0 8px; } .rdc-fcol a { font-size: 15px; width: fit-content; } .rdc-fcontact { display: grid; gap: 12px; font-size: 15px; color: rgba(244, 241, 236, 0.78); } .rdc-fcontact-row { display: flex; gap: 10px; align-items: flex-start; } .rdc-fcontact-row .rdc-icon { margin-top: 2px; color: var(--rdc-red-200); } /* Evite qu'une adresse e-mail longue deborde la colonne du footer sur mobile. */ .rdc-fcontact-row a { overflow-wrap: anywhere; } .rdc-footer-bar { border-top: 1px solid rgba(244, 241, 236, 0.12); } .rdc-footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px; font-size: 13px; color: rgba(244, 241, 236, 0.45); } .rdc-footer-legal { display: flex; gap: 20px; } .rdc-footer-legal a { color: rgba(244, 241, 236, 0.45); font-size: 13px; } /* -------------------------------------------------------------------------- Lecteur vidéo (composant partagé : accueil, carrières…) : vidéo principale 16/9 + vignettes optionnelles, chargement paresseux (iframe injectée au clic par main.js). Une seule vidéo = pas de vignettes, juste le lecteur principal. -------------------------------------------------------------------------- */ .rdc-vgallery { display: flex; flex-direction: column; gap: 14px; } .rdc-vgallery-stage { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-dark); box-shadow: var(--shadow-pop); } .rdc-vgallery-cover { position: absolute; inset: 0; width: 100%; height: 100%; display: block; padding: 0; border: 0; background: none; cursor: pointer; } .rdc-vgallery-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-out); } .rdc-vgallery-poster--blank { background: radial-gradient(120% 120% at 28% 18%, rgba(154, 36, 33, 0.55), transparent 60%), linear-gradient(135deg, #2b2826, #1e1c1a); } .rdc-vgallery-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 16, 15, 0) 35%, rgba(20, 16, 15, 0.5)); } .rdc-vgallery-cover:hover .rdc-vgallery-poster { transform: scale(1.04); } .rdc-vgallery-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-accent); color: #fff; box-shadow: 0 10px 30px rgba(154, 36, 33, 0.5), 0 0 0 8px rgba(255, 255, 255, 0.12); transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), background 220ms var(--ease-out); } .rdc-vgallery-play svg { width: 30px; height: 30px; margin-left: 4px; } .rdc-vgallery-cover:hover .rdc-vgallery-play, .rdc-vgallery-cover:focus-visible .rdc-vgallery-play { transform: translate(-50%, -50%) scale(1.08); background: var(--color-accent-hover); box-shadow: 0 14px 40px rgba(154, 36, 33, 0.62), 0 0 0 10px rgba(255, 255, 255, 0.16); } .rdc-vgallery-cover:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; } .rdc-vgallery-frame { position: absolute; inset: 0; display: none; } .rdc-vgallery-frame iframe { width: 100%; height: 100%; border: 0; display: block; } .rdc-vgallery.is-playing .rdc-vgallery-cover { display: none; } .rdc-vgallery.is-playing .rdc-vgallery-frame { display: block; } .rdc-vgallery-thumbs { display: flex; gap: 12px; } .rdc-vgallery-thumb { flex: 1 1 0; position: relative; aspect-ratio: 16 / 9; padding: 0; border: 0; cursor: pointer; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-dark); box-shadow: var(--shadow-card); transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); } .rdc-vgallery-thumb.is-active { display: none; } /* la vidéo active est la principale */ .rdc-vgallery-thumb img, .rdc-vgallery-thumb .rdc-vgallery-poster--blank { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .rdc-vgallery-thumb:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); } .rdc-vgallery-thumb:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .rdc-vgallery-thumb-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(20, 16, 15, 0.6); color: #fff; } .rdc-vgallery-thumb-play svg { width: 15px; height: 15px; margin-left: 2px; } @media (prefers-reduced-motion: reduce) { .rdc-vgallery-poster, .rdc-vgallery-play, .rdc-vgallery-thumb { transition: none; } } @media (max-width: 900px) { .rdc-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } .rdc-footer-top { padding-top: 52px; padding-bottom: 40px; } } @media (max-width: 560px) { .rdc-footer-grid { grid-template-columns: 1fr; gap: 32px; } .rdc-footer-logo { height: 60px; } .rdc-footer-bottom { justify-content: flex-start; } .rdc-footer-legal { flex-wrap: wrap; gap: 8px 18px; } } /* -------------------------------------------------------------------------- Responsive global — chrome (nav, conteneurs, titres, boutons, prose) Mobile-first : ces ajustements ciblent 360 à 1024 px. -------------------------------------------------------------------------- */ /* Empêche tout débordement horizontal accidentel sur petit écran. overflow-x: clip n'établit pas de conteneur de défilement, donc ne casse pas les éléments en position: sticky (colonne latérale du bien, services). */ body { overflow-x: clip; } @supports not (overflow: clip) { body { overflow-x: hidden; } } @media (max-width: 1080px) { /* La barre n'a plus que la marque + le burger : on récupère l'espace. */ .rdc-nav-row { gap: 12px; } } @media (max-width: 600px) { :root { --rdc-nav-h: 72px; } .rdc-brand-logo { height: 48px; } .rdc-brand::after { width: 60px; height: 30px; } .rdc-nav-burger { margin-right: -8px; } /* En-têtes de section : un cran plus serrés et la ligne titre+bouton passe en colonne pour que le bouton ne soit pas comprimé. */ .rdc-sh { gap: 12px; } .rdc-sh-lead { font-size: 17px; } .rdc-sh-row { align-items: flex-start; } /* Boutons : zone tactile confortable, et pleine largeur quand seuls. */ .rdc-btn { height: 46px; } .rdc-btn-sm { height: 40px; } /* Pages génériques + prose */ .rdc-prose { font-size: 16px; } .rdc-404 .rdc-404-actions { gap: 10px; } .rdc-404 .rdc-404-actions .rdc-btn { flex: 1 1 auto; } } @media (max-width: 380px) { /* Pilule à filets : on masque les filets latéraux pour gagner en largeur. */ .rdc-pill-line { flex-basis: 24px; } .rdc-pagination .nav-links { gap: 6px; } } /* ========================================================================== Modules "Autres ..." en bas des single (bien, offre, article). Chargé dans main.css car les trois types utilisent un CSS de gabarit different (bien.css, carrieres.css ne couvrent pas tous les contextes). ========================================================================== */ /* Conteneur de section */ .rdc-related { position: relative; padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 5vw, 56px); border-top: 1px solid var(--border-subtle); margin-top: clamp(32px, 5vw, 48px); } .rdc-related-title { font-family: var(--font-display); font-size: clamp(20px, 2.5vw, 26px); font-weight: 600; color: var(--text-heading); margin: 0 0 clamp(24px, 4vw, 36px); } /* Grille fixe (1 a 3 elements) */ .rdc-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; } @media (max-width: 980px) { .rdc-related-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .rdc-related-grid { grid-template-columns: 1fr; } } /* Slider horizontal (4 a 6 elements). Le wrap sert de repere de position aux fleches, superposees sur les cartes (une a gauche, une a droite). La piste commence au bord gauche : la premiere carte reste alignee avec le titre. */ .rdc-related-slider-wrap { position: relative; } .rdc-related-track.is-slider { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; /* Masque la scrollbar de facon propre */ scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px; /* respiration sous les cartes */ } .rdc-related-track.is-slider::-webkit-scrollbar { display: none; } /* Flèches de navigation : superposees sur les cartes, centrees verticalement, collees aux bords gauche et droit sans deborder du conteneur. */ .rdc-related-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 42px; height: 42px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface-card); color: var(--text-heading); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-card); transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out); } .rdc-related-nav-prev { left: 8px; } .rdc-related-nav-next { right: 8px; } .rdc-related-nav:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } .rdc-related-nav:disabled, .rdc-related-nav.is-disabled { opacity: 0; pointer-events: none; } @media (max-width: 620px) { .rdc-related-nav { width: 38px; height: 38px; } .rdc-related-nav-prev { left: 4px; } .rdc-related-nav-next { right: 4px; } } /* -------------------------------------------------------------------------- Carte bien dans le module related (.rdc-related-bien*) Style inspire de .rdc-bien (home.css) mais autonome : home.css n'est charge que sur la page d'accueil, pas sur single-bien.php. -------------------------------------------------------------------------- */ .rdc-related-bien { position: relative; display: block; height: 360px; border-radius: var(--radius-xl); overflow: hidden; isolation: isolate; cursor: pointer; background: var(--surface-sunken); box-shadow: var(--shadow-card); text-decoration: none !important; transition: box-shadow var(--duration-base) var(--ease-out); /* Dans le slider : largeur fixe + snap */ flex: 0 0 300px; scroll-snap-align: start; } .rdc-related-bien:hover { box-shadow: var(--shadow-hover); } .rdc-related-bien-media { position: absolute; inset: 0; } .rdc-related-bien-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-out); } .rdc-related-bien:hover .rdc-related-bien-media img { transform: scale(1.05); } .rdc-related-bien-placeholder { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, var(--rdc-stone-100) 0%, var(--rdc-stone-200) 100%); color: var(--rdc-stone-300); } .rdc-related-bien-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(30, 22, 20, 0) 55%, rgba(30, 22, 20, 0.42) 100%); } .rdc-related-bien-panel { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 4px; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: var(--radius-lg); padding: 14px 16px; transition: transform 380ms var(--ease-out); } .rdc-related-bien:hover .rdc-related-bien-panel { transform: translateY(-6px); } .rdc-related-bien-loc { font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); } .rdc-related-bien-title { font-size: 15.5px; font-weight: 600; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rdc-related-bien-price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; } .rdc-related-bien-price { font-family: var(--font-display); font-size: 19px; color: var(--text-price); } .rdc-related-bien-go { width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-muted); display: grid; place-items: center; flex-shrink: 0; transition: background 280ms ease, color 280ms ease, transform 380ms var(--ease-out); } .rdc-related-bien:hover .rdc-related-bien-go { background: var(--color-accent); color: #fff; transform: rotate(-45deg); } .rdc-related-bien-meta { display: flex; align-items: center; gap: 12px; margin-top: 2px; padding-top: 7px; border-top: 1px solid var(--border-subtle); font-size: 12.5px; color: var(--text-muted); } .rdc-related-bien-meta > span { display: inline-flex; align-items: center; gap: 5px; } /* Grille fixe : cartes biens pleine hauteur */ .rdc-related-grid .rdc-related-bien { flex: none; height: 360px; } /* -------------------------------------------------------------------------- Carte article dans le module related (.rdc-related-actu*) Classes propres au module (centres.css n'est pas charge sur single.php). Structure identique a .rdc-centre-actu de centres.css. -------------------------------------------------------------------------- */ .rdc-related-actu { background: var(--surface-card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); /* Dans le slider : largeur fixe + snap */ flex: 0 0 280px; scroll-snap-align: start; } .rdc-related-actu:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); } .rdc-related-actu-link { display: flex; flex-direction: column; color: inherit; text-decoration: none !important; } .rdc-related-actu-link:hover { color: inherit; } .rdc-related-actu-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-sunken); } .rdc-related-actu-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-out); } .rdc-related-actu:hover .rdc-related-actu-img { transform: scale(1.04); } .rdc-related-actu-img--blank { display: flex; align-items: center; justify-content: center; color: var(--text-faint); } .rdc-related-actu-body { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px 18px; } .rdc-related-actu-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); } .rdc-related-actu-date .rdc-icon { color: var(--color-accent); } .rdc-related-actu-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--text-heading); } .rdc-related-actu:hover .rdc-related-actu-title { color: var(--color-accent); } /* Grille fixe : cartes article pleine largeur dans leur colonne */ .rdc-related-grid .rdc-related-actu { flex: none; } /* -------------------------------------------------------------------------- Carte offre dans le module related : herite de .rdc-car-job (carrieres.css) charge conditionnellement sur single-offre.php. La carte a besoin d'une largeur fixe dans le slider. -------------------------------------------------------------------------- */ .rdc-related-track.is-slider .rdc-car-job { flex: 0 0 300px; scroll-snap-align: start; } /* ========================================================================== Single article (magazine) Hero immersif pleine largeur + corps centré + encart centre lié. ========================================================================== */ /* -------------------------------------------------------------------------- Article : conteneur principal (remplace .rdc-generic sur single.php) -------------------------------------------------------------------------- */ /* Scopé sur
: les cartes d'articles de l'accueil () portent la même classe et ne doivent pas hériter de ce padding. */ article.rdc-article { /* Pas de padding-top global : le héro colle sous la nav grâce à margin-top. */ padding-bottom: clamp(72px, 9vw, 128px); } /* -------------------------------------------------------------------------- Héro : couverture (avec ou sans image) -------------------------------------------------------------------------- */ .rdc-article-hero { position: relative; overflow: hidden; margin-top: var(--rdc-nav-h); padding: clamp(40px, 7vw, 80px) 0 clamp(32px, 5vw, 56px); /* Hauteur maitrisée : jamais toute la hauteur écran. */ min-height: clamp(320px, 38vh, 520px); display: flex; align-items: flex-end; /* Fond sobre quand pas d'image : teinte chaude du thème. */ background: linear-gradient(135deg, var(--rdc-stone-100) 0%, var(--rdc-stone-200) 100%); color: var(--text-heading); } /* Avec image à la une : fond sombre + texte blanc. */ .rdc-article-hero.has-cover { background: var(--rdc-stone-950); color: #fff; } /* Image de fond */ .rdc-article-hero-media { position: absolute; inset: 0; z-index: 0; } .rdc-article-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; } /* Overlay dégradé sombre en bas (renforce la lisibilité du texte blanc). */ .rdc-article-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 14, 12, 0.20) 0%, rgba(20, 14, 12, 0.75) 100%); } /* Contenu du héro : au-dessus de l'image */ .rdc-article-hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } /* Héro sans image : fil d'Ariane en couleur normale */ .rdc-article-hero:not(.has-cover) .rdc-breadcrumb { color: var(--text-muted); } .rdc-article-hero:not(.has-cover) .rdc-breadcrumb a { color: var(--text-muted); } .rdc-article-hero:not(.has-cover) .rdc-breadcrumb a:hover { color: var(--color-accent); } /* Héro avec image : fil d'Ariane blanc translucide */ .rdc-article-hero.has-cover .rdc-breadcrumb { color: rgba(255, 255, 255, 0.80); } .rdc-article-hero.has-cover .rdc-breadcrumb a { color: rgba(255, 255, 255, 0.80); } .rdc-article-hero.has-cover .rdc-breadcrumb a:hover { color: #fff; } .rdc-article-hero.has-cover .rdc-breadcrumb .rdc-sep { opacity: 0.5; } /* Eyebrow : filet rouge + libellé */ .rdc-article-hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; } /* Héro sans image : couleur accent (rouge) */ .rdc-article-hero:not(.has-cover) .rdc-article-hero-eyebrow { color: var(--color-accent); } /* Héro avec image : blanc translucide */ .rdc-article-hero.has-cover .rdc-article-hero-eyebrow { color: rgba(255, 255, 255, 0.90); } /* Filet horizontal avant le libellé */ .rdc-article-hero-filet { display: inline-block; width: 32px; height: 2px; border-radius: 2px; background: currentColor; flex-shrink: 0; } /* H1 du titre */ .rdc-article-hero-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; max-width: 22ch; } .rdc-article-hero:not(.has-cover) .rdc-article-hero-title { color: var(--text-heading); } .rdc-article-hero.has-cover .rdc-article-hero-title { color: #fff; } /* Méta : date + temps de lecture */ .rdc-article-hero-meta { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; } .rdc-article-hero:not(.has-cover) .rdc-article-hero-meta { color: var(--text-muted); } .rdc-article-hero.has-cover .rdc-article-hero-meta { color: rgba(255, 255, 255, 0.80); } .rdc-article-hero.has-cover .rdc-article-hero-meta .rdc-icon { color: rgba(255, 255, 255, 0.65); } .rdc-article-hero:not(.has-cover) .rdc-article-hero-meta .rdc-icon { color: var(--color-accent); } /* Séparateur ponctuel entre date et temps de lecture */ .rdc-article-hero-sep { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; flex-shrink: 0; } /* -------------------------------------------------------------------------- Corps de l'article : prose centrée -------------------------------------------------------------------------- */ article.rdc-article .rdc-article-body { padding: clamp(40px, 6vw, 72px) 0 0; } /* Prose centrée horizontalement : supprime le vide à droite. */ .rdc-article-prose { margin-inline: auto; } /* -------------------------------------------------------------------------- Encart centre lié -------------------------------------------------------------------------- */ .rdc-article-centre-card { display: flex; align-items: center; gap: 16px; margin-top: clamp(28px, 4vw, 44px); padding: 20px 24px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-left: 4px solid var(--color-accent); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .rdc-article-centre-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--color-accent-tint); color: var(--color-accent); flex-shrink: 0; } .rdc-article-centre-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; } .rdc-article-centre-label { font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); } .rdc-article-centre-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Sur mobile : passe en colonne et le bouton prend la pleine largeur. */ @media (max-width: 600px) { .rdc-article-centre-card { flex-wrap: wrap; } .rdc-article-centre-card .rdc-btn { width: 100%; justify-content: center; } } /* -------------------------------------------------------------------------- Module « Autres articles » : sur l'article, le module .rdc-related est enveloppé dans .rdc-wrap par template-parts/related.php via le gabarit. On ne le re-enveloppe pas ici, il hérite de son style de main.css. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- Responsive : ajustements mobiles -------------------------------------------------------------------------- */ @media (max-width: 600px) { .rdc-article-hero { /* Légèrement moins haut sur mobile. */ min-height: clamp(260px, 45vw, 360px); align-items: flex-end; } .rdc-article-hero-title { font-size: clamp(22px, 6vw, 32px); } } /* Héro avec image à la une, mobile : image plus haute et texte calé en bas à gauche, avec la même gouttière à gauche et en bas (celle de .rdc-wrap). Le héro reste sous la nav fixe grâce à margin-top: var(--rdc-nav-h) (inchangé), donc la hauteur accrue ne fait jamais passer le texte dessous. */ @media (max-width: 720px) { .rdc-article-hero.has-cover { /* svh tient compte de la barre d'adresse mobile ; repli vh au besoin. */ min-height: 70vh; min-height: 70svh; align-items: flex-end; /* Pas de padding en haut (le texte est en bas) ; padding bas identique au padding gauche de .rdc-wrap pour une gouttière symétrique. */ padding: 0 0 clamp(20px, 4vw, 40px); } /* Dégradé renforcé : l'image est plus haute, il faut plus de contraste pour garder le texte lisible en bas. */ .rdc-article-hero.has-cover .rdc-article-hero-shade { background: linear-gradient(180deg, rgba(20, 14, 12, 0.10) 0%, rgba(20, 14, 12, 0.42) 42%, rgba(20, 14, 12, 0.90) 100%); } } /* -------------------------------------------------------------------------- Encart de contact fixe (colonne droite de l'article) Affiché uniquement une fois le héro dépassé et masqué avant le pied de page (piloté par assets/js/article-aside.js via IntersectionObserver sur le héro et sur