/* Theme Name: Trivium Patrimoine Theme URI: https://trivium-patrimoine.fr Author: Trivium Patrimoine Description: Thème sur mesure du cabinet Trivium Patrimoine — Bordeaux. Gabarits Accueil, Contact, Mentions légales, Actualités et Article, convertis à l'identique depuis la maquette. Version: 2.0 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v2 or later Text Domain: trivium */ /* ===== Styles repris de la maquette (helmet) ===== */ * { box-sizing: border-box; } body { margin: 0; background: #FFFFFF; color: #2D3C50; font-family: Manrope, sans-serif; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; transition: color 0.03s ease, background 0.03s ease, border-color 0.03s ease, transform 0.03s ease, box-shadow 0.03s ease; } a:hover { color: #A27777; } ::selection { background: #A27777; color: #FFFFFF; } @keyframes tpMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes tpFade { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } } @keyframes zdFwd { 0%, 100% { opacity: var(--o); transform: translateY(0); } 6% { opacity: calc(var(--o) * 2.4); transform: translateY(-4px); } 16% { opacity: var(--o); transform: translateY(0); } } @keyframes zdBack { 0%, 100% { filter: none; scale: 1; } 6% { filter: brightness(0.74) saturate(1.55); scale: 1.4; } 16% { filter: none; scale: 1; } } @keyframes zbRise { 0% { height: 30%; opacity: 0.55; } 100% { height: 48%; opacity: 1; } } @keyframes zbSway { 0%, 100% { transform: scaleY(0.94); } 50% { transform: scaleY(1.04); } } @keyframes zbEase { 0% { height: 86%; opacity: 1; } 100% { height: 74%; opacity: 0.82; } } @keyframes zbBreathe { 0%, 100% { transform: scaleY(0.97); opacity: 0.9; } 50% { transform: scaleY(1.03); opacity: 1; } } @keyframes zbTilt { 0%, 100% { transform: rotate(-2.6deg); } 50% { transform: rotate(2.6deg); } } @keyframes tpDraw { 0% { stroke-dashoffset: 150; } 100% { stroke-dashoffset: 0; } } [data-actu-cta]:hover [data-actu-arrow] { transform: translateX(7px); } a:hover [data-guide-arrow] { transform: translateX(5px); } /* Pont de survol sous les onglets a sous-menu. La barre fait 92px et l'onglet environ 42px, centre : il reste une bande morte d'a peu pres 25px entre le bas de l'onglet et le panneau, qui n'appartient ni a l'un ni a l'autre. La traverser declenchait mouseleave et fermait le menu. Le pont n'existe que pendant le survol, il ne peut donc jamais intercepter un clic au repos. */ [data-tp-on-mouseleave="closeCab"]:hover > span:first-child::after, [data-tp-on-mouseleave="closeMega"]:hover > span:first-child::after, [data-tp-on-mouseleave="closeObj"]:hover > span:first-child::after, [data-tp-on-mouseleave="closeRes"]:hover > span:first-child::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 32px; } [data-guide-card] { text-decoration: none; } [data-guide-card]:hover { filter: brightness(1.12); } #profils a:hover [data-profil-arrow] { transform: translateX(4px); } [data-profil-bar] { transition: filter 0.03s ease-out, opacity 0.03s ease-out; } #profils a:hover [data-profil-bar] { filter: brightness(0.72) saturate(1.1); opacity: 1; } [data-step-card]:hover [data-step-arrow], a:hover [data-step-arrow] { transform: translateX(7px); } [data-step-card]:hover [data-step-cta] { color: #FFFFFF; } a > .tp-chevron, button > .tp-chevron { transition: transform 0.25s ease-out; } a:hover > .tp-chevron:not(.tp-chevron--fixe), button:hover > .tp-chevron:not(.tp-chevron--fixe) { transform: translateX(4px); } [data-actu-arrow], [data-guide-arrow], [data-profil-arrow], [data-step-arrow] { transition: transform 0.25s ease-out; will-change: transform; backface-visibility: hidden; } [data-step-card] { transition: filter 0.03s ease-out; } [data-step-cta], [data-faq-q] { transition: color 0.03s ease !important; } [data-step-card]:hover { filter: brightness(1.14) !important; } [data-faq-row]:hover [data-faq-q] { color: #A27777 !important; } [data-cta] { display: inline-flex; align-items: center; gap: 9px; } [data-cta], [data-cta-soft] { transition: background-color 0.03s ease, color 0.03s ease, border-color 0.03s ease, box-shadow 0.03s ease !important; } [data-cta-arrow] { transition: transform 0.25s ease-out; will-change: transform; backface-visibility: hidden; } [data-cta]:hover [data-cta-arrow], [data-cta-soft]:hover [data-cta-arrow] { transform: translate3d(5px, 0, 0); } @media (max-width: 1000px) { [data-guides-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 620px) { [data-guides-grid] { grid-template-columns: minmax(0, 1fr) !important; } } /* mobile-stack */ @media (max-width: 860px) { /* Colonnes empilées, sauf les rangées « icône + texte » (première colonne étroite et fixe) */ [style*="grid-template-columns"]:not([style*="grid-template-columns: 8px"]):not([style*="grid-template-columns: 22px"]):not([style*="grid-template-columns: 26px"]):not([style*="grid-template-columns: 30px"]):not([style*="grid-template-columns: 34px"]):not([style*="grid-template-columns: 40px"]):not([style*="grid-template-columns: 44px"]):not([style*="grid-template-columns: 46px"]):not([style*="grid-template-columns: 52px"]):not([style*="grid-template-columns: 54px"]):not([style*="grid-template-columns: 56px"]):not([style*="grid-template-columns: 74px"]):not([style*="grid-template-columns: 62px"]):not([style*="grid-template-columns: 64px"]) { grid-template-columns: minmax(0, 1fr) !important; } [style*="grid-template-rows: subgrid"] { display: flex !important; flex-direction: column !important; } [style*="grid-row: 1 / span 4"], [style*="grid-row: 3"] { grid-row: auto !important; } section [style*="display: flex"]:not([style*="flex-direction: column"]):not([style*="justify-content: space-between"]):not(:has(> svg:first-child)):not(:has(> span:first-child > svg)):not(:has(> img:first-child)):not(li):not(:has(> span[aria-hidden="true"]:first-child)) { flex-wrap: wrap !important; } header > div { flex-wrap: nowrap !important; gap: 10px !important; } header nav { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; justify-content: flex-start !important; } header nav::-webkit-scrollbar { display: none; } header [style*="width: 280px"], header [style*="width: 310px"], header [style*="width: 248px"] { width: min(310px, calc(100vw - 32px)) !important; } header [style*="position: absolute"][style*="top: 100%"] { left: 0 !important; right: auto !important; } [style*="position: sticky"]:not(header):not([data-tp-lexique-bar]):not([data-tp-agrements-bar]) { position: static !important; } [style*="flex: 0 0 40%"] { flex: 0 0 86% !important; } [style*="writing-mode: vertical-rl"] { writing-mode: horizontal-tb !important; rotate: none !important; } [style*="border-left: 1px solid"] { border-left: none !important; padding-left: 0 !important; } [style*="border-right: 1px solid"] { border-right: none !important; padding-right: 0 !important; } [style*="max-width: 1500px"] { padding-left: 20px !important; padding-right: 20px !important; } section { padding-top: 48px !important; padding-bottom: 48px !important; } h1 { font-size: clamp(28px, 8vw, 38px) !important; } h2 { font-size: clamp(24px, 6.6vw, 32px) !important; } } @media (max-width: 560px) { [style*="border-radius: 44px"] { border-radius: 28px !important; } [style*="border-radius: 40px"], [style*="border-radius: 36px"], [style*="border-radius: 32px"] { border-radius: 26px !important; } } /* ===== Spécifique WordPress ===== */ * { box-sizing: border-box; } img { max-width: 100%; height: auto; } .screen-reader-text { position: absolute !important; left: -9999px; } body.admin-bar-showing header[style*="sticky"] { top: 32px; } /* Carte OpenStreetMap (page Contact) */ .leaflet-container { background: #E7EEF4; } .leaflet-tile-pane { filter: grayscale(1) contrast(0.92) brightness(1.05) sepia(0.24) hue-rotate(178deg) saturate(0.9); } .leaflet-control-attribution { font-size: 10px; background: rgba(255,255,255,0.7); } /* Contenu rédigé dans WordPress */ .tp-prose h2 { font-family: Poppins, sans-serif; font-size: clamp(21px, 2vw, 28px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: #31405A; margin: clamp(22px, 2.6vw, 34px) 0 14px; padding-top: clamp(16px, 2vw, 24px); border-top: 1px solid #EFE4D6; } .tp-prose h3 { font-family: Poppins, sans-serif; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; line-height: 1.25; color: #31405A; margin: clamp(18px, 2vw, 26px) 0 10px; } .tp-prose p { font-size: 17px; line-height: 1.78; color: #3E4A5A; margin: 0 0 16px; } .tp-prose ul, .tp-prose ol { font-size: 17px; line-height: 1.78; color: #3E4A5A; margin: 0 0 18px; padding-left: 22px; } .tp-prose li { margin-bottom: 8px; } .tp-prose li::marker { color: #A27777; } .tp-prose a { color: #A27777; font-weight: 500; border-bottom: 1px solid rgba(162,119,119,0.35); } .tp-prose strong { color: #2D3C50; font-weight: 600; } .tp-prose img { border-radius: 24px; } .tp-prose figure { margin: clamp(20px, 2.4vw, 30px) 0; } .tp-prose figcaption { font-size: 13.5px; color: #7C8697; margin-top: 8px; } .tp-prose blockquote { margin: clamp(16px, 2.2vw, 26px) 0; background: #C08D80; border-radius: 26px; padding: clamp(26px, 2.8vw, 36px); } .tp-prose blockquote p { font-family: Poppins, sans-serif; font-size: clamp(18px, 1.7vw, 23px); font-weight: 400; line-height: 1.45; letter-spacing: -0.015em; color: #FFF8F4; margin: 0; } /* Tableaux des articles : même dessin que les fiches (en-tête bleu nuit, lignes alternées bleu clair) */ .tp-prose table { width: 100%; border-collapse: separate; border-spacing: 0; margin: clamp(18px, 2.2vw, 28px) 0; font-size: 15.5px; line-height: 1.6; border: 1px solid #E2D6CC; border-radius: 22px; overflow: hidden; background: #FFF; } .tp-prose th, .tp-prose td { padding: 16px 20px; text-align: left; vertical-align: top; color: #3E4A5A; } .tp-prose thead th { font-family: Poppins, sans-serif; font-size: 14px; font-weight: 600; color: #FFF8F4; background: #2D3C50; } .tp-prose tbody tr:nth-child(even) > * { background: #F4F7FA; } .tp-prose tbody tr + tr > * { border-top: 1px solid #E2D6CC; } .tp-prose tbody th { font-family: Poppins, sans-serif; font-weight: 600; color: #2D3C50; } .tp-prose hr { border: none; border-top: 1px solid #EFE9E2; margin: clamp(24px, 3vw, 38px) 0; } .tp-prose .wp-block-pullquote { background: #FFF8F4; border-radius: 26px; padding: clamp(24px, 2.6vw, 32px); } .tp-prose .wp-block-image { margin: clamp(20px, 2.4vw, 30px) 0; } /* ===== États de survol / focus convertis depuis la maquette ===== */ .tpm1:hover { background: #FFFFFF !important; color: #2D3C50 !important; } .tpm2:hover { color: #FFFFFF !important; background-color: rgba(255,248,244,0.08) !important; background-image: radial-gradient(circle at 16px 50%, #D9A6A6 0 4px, transparent 4px) !important; } .tpm3:hover { color: #FFFFFF !important; background-color: rgba(255,248,244,0.08) !important; background-image: radial-gradient(circle at 16px 50%, #D9A6A6 0 4px, transparent 4px) !important; } .tpm4:hover { color: #FFFFFF !important; background-color: rgba(255,248,244,0.08) !important; background-image: radial-gradient(circle at 16px 50%, #D9A6A6 0 4px, transparent 4px) !important; } .tpm5:hover { color: #A27777 !important; background-color: #FFF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #A27777 0 4px, transparent 4px) !important; } .tpm6:hover { color: #A27777 !important; background-color: #FFF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #A27777 0 4px, transparent 4px) !important; } .tpm112:hover { color: #A27777 !important; background-color: #FFF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #A27777 0 4px, transparent 4px) !important; } .tpm7:hover { color: #A27777 !important; background-color: #FFF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #A27777 0 4px, transparent 4px) !important; } .tpm8:hover { background: #F3EAE4 !important; color: #2D3C50 !important; } .tpm9:hover { background: #F3EAE4 !important; color: #2D3C50 !important; } .tpm10:hover { background: #F3EAE4 !important; color: #2D3C50 !important; } .tpm11:hover { background: #F3EAE4 !important; color: #2D3C50 !important; } .tpm12:hover { background: #E7EEF4 !important; color: #2D3C50 !important; } .tpm13:hover { background: #E7EEF4 !important; color: #2D3C50 !important; } .tpm14:hover { background: #E7EEF4 !important; color: #2D3C50 !important; } .tpm15:hover { background: #E7EEF4 !important; color: #2D3C50 !important; } .tpm16:hover { background: #F1EDE4 !important; color: #2D3C50 !important; } .tpm17:hover { background: #F1EDE4 !important; color: #2D3C50 !important; } .tpm18:hover { background: #F1EDE4 !important; color: #2D3C50 !important; } .tpm19:hover { background: #F1EDE4 !important; color: #2D3C50 !important; } .tpm21:hover { background: #FFFFFF !important; color: #2D3C50 !important; } .tpm22:hover > span + span, .tpm30:hover > span + span, .tpm32:hover > span + span, .tpm113:hover > span + span { color: rgba(255,248,244,0.82) !important; } .tpm22:hover { color: #FFFFFF !important; background-color: rgba(255,248,244,0.08) !important; background-image: radial-gradient(circle at 16px 50%, #D9A6A6 0 4px, transparent 4px) !important; } .tpm23:hover { color: #A27777 !important; background-color: #FFF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #A27777 0 4px, transparent 4px) !important; } .tpm24:hover { color: #A27777 !important; background-color: #FFF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #A27777 0 4px, transparent 4px) !important; } .tpm25:hover { color: #A27777 !important; background-color: #FFF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #A27777 0 4px, transparent 4px) !important; } .tpm26:hover { color: #A27777 !important; background-color: #FFF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #A27777 0 4px, transparent 4px) !important; } .tpm27:hover { color: #A27777 !important; background-color: #FFF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #A27777 0 4px, transparent 4px) !important; } .tpm28:hover { color: #A27777 !important; background-color: #FFF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #A27777 0 4px, transparent 4px) !important; } .tpm29:hover { background: #FFFFFF !important; color: #2D3C50 !important; } .tpm30:hover { color: #FFFFFF !important; background-color: rgba(255,248,244,0.08) !important; background-image: radial-gradient(circle at 14px 19px, #D9A6A6 0 4px, transparent 4px) !important; } .tpm31:hover { color: #A27777 !important; background-color: #FFF8F4 !important; background-image: radial-gradient(circle at 14px 19px, #A27777 0 4px, transparent 4px) !important; } .tpm32:hover { color: #FFFFFF !important; background-color: rgba(255,248,244,0.08) !important; background-image: radial-gradient(circle at 14px 19px, #D9A6A6 0 4px, transparent 4px) !important; } .tpm33:hover { color: #A27777 !important; background-color: #FFF8F4 !important; background-image: radial-gradient(circle at 14px 19px, #A27777 0 4px, transparent 4px) !important; } .tpm34:hover { color: #A27777 !important; background-color: #FFF8F4 !important; background-image: radial-gradient(circle at 14px 19px, #A27777 0 4px, transparent 4px) !important; } .tpm35:hover { color: #A27777 !important; background-color: #FFF8F4 !important; background-image: radial-gradient(circle at 14px 19px, #A27777 0 4px, transparent 4px) !important; } .tpm36:hover { color: #A27777 !important; background-color: #FFF8F4 !important; background-image: radial-gradient(circle at 14px 19px, #A27777 0 4px, transparent 4px) !important; } .tpm37:hover { color: #A27777 !important; background-color: #FFF8F4 !important; background-image: radial-gradient(circle at 14px 19px, #A27777 0 4px, transparent 4px) !important; } .tpm38:hover { color: #A27777 !important; background-color: #FFF8F4 !important; background-image: radial-gradient(circle at 14px 19px, #A27777 0 4px, transparent 4px) !important; } .tpm39:hover { color: #A27777 !important; background-color: #FFF8F4 !important; background-image: radial-gradient(circle at 14px 19px, #A27777 0 4px, transparent 4px) !important; } .tpm113:hover { color: #FFFFFF !important; background-color: rgba(255,248,244,0.08) !important; background-image: radial-gradient(circle at 14px 19px, #D9A6A6 0 4px, transparent 4px) !important; } .tpm40:hover { background: #2D3C50 !important; color: #FFFFFF !important; } .tpm41:hover { background: #2D3C50 !important; color: #FFFFFF !important; } /* Menu principal sur une ligne : entre tablette et grand écran, « Appeler » passe en icône, puis le bouton Contact s'efface (le bandeau du haut le propose déjà), puis le menu se resserre. */ @media (min-width: 861px) and (max-width: 1480px) { header .tp-tel-texte { display: none; } header .tpm41 { padding: 0 14px !important; } } @media (min-width: 861px) and (max-width: 1180px) { header .tpm40 { display: none !important; } } @media (min-width: 861px) and (max-width: 1020px) { header nav { font-size: 13px !important; padding: 6px !important; } header nav > span > :first-child { padding-left: 7px !important; padding-right: 7px !important; } } @media (min-width: 861px) and (max-width: 940px) { header nav { font-size: 12.5px !important; } header nav > span > :first-child { padding-left: 6px !important; padding-right: 6px !important; } } .tpm42:hover { background: #A27777 !important; } .tpm43:hover { border-color: #A27777 !important; color: #A27777 !important; } .tpm44:hover { background: #41556D !important; } .tpm45:hover { background: rgba(255,248,244,0.13) !important; } .tpm46:hover { background: rgba(255,248,244,0.13) !important; } .tpm47:hover { background: rgba(255,248,244,0.13) !important; } .tpm48:hover { background: rgba(255,248,244,0.13) !important; } .tpm49:hover { background: rgba(255,248,244,0.13) !important; } .tpm50:hover { background: rgba(255,248,244,0.13) !important; } .tpm51:hover { background: rgba(255,248,244,0.13) !important; } .tpm52:hover { background: rgba(255,248,244,0.13) !important; } .tpm53:hover { background: rgba(255,248,244,0.13) !important; } .tpm54:hover { background: rgba(255,248,244,0.13) !important; } .tpm55:hover { background: rgba(255,248,244,0.13) !important; } .tpm56:hover { background: rgba(255,248,244,0.13) !important; } .tpm57:hover { background: #2D3C50 !important; } .tpm58:hover { background: #F2DCCB !important; color: #2D3C50 !important; } .tpm59:hover { background: #845B5B !important; color: #FFF8F4 !important; } .tpm60:hover { background: #907450 !important; color: #FFF8F4 !important; } .tpm61:hover { background: #F2DCCB !important; color: #2D3C50 !important; } .tpm62:hover { background: #EADCD2 !important; color: #2D3C50 !important; } .tpm63:hover { background: #4C6076 !important; color: #FFF8F4 !important; } .tpm64:hover { background: #F2DCCB !important; color: #2D3C50 !important; } .tpm65:hover { background: #2D3C50 !important; } .tpm66:hover { color: #FFFFFF !important; } .tpm67:hover { color: #D9A6A6 !important; background: #33445A !important; } .tpm67:hover [data-actu-excerpt] { color: #D9A6A6 !important; } .tpm68:hover { color: #D9A6A6 !important; } .tpm69:hover { background: #96686F !important; } .tpm70:hover { background: #A27777 !important; color: #FFFFFF !important; } .tpm71:hover { background: #A27777 !important; color: #FFFFFF !important; } .tpm72:hover { color: #D9A6A6 !important; border-color: #D9A6A6 !important; } .tpm73:hover { color: #D9A6A6 !important; border-color: #D9A6A6 !important; } .tpm74:hover { color: #D9A6A6 !important; border-color: #D9A6A6 !important; } .tpm75:hover { color: #D9A6A6 !important; border-color: #D9A6A6 !important; } .tpm76:hover { color: #D9A6A6 !important; border-color: #D9A6A6 !important; } .tpm77:hover { color: #D9A6A6 !important; border-color: #D9A6A6 !important; } .tpm78:hover { color: #2D3C50 !important; border-color: #2D3C50 !important; } .tpm79:hover { background: #2D3C50 !important; } .tpm80:hover { background: #2D3C50 !important; } .tpm81:hover { color: #2D3C50 !important; } .tpm82:hover { color: #2D3C50 !important; } .tpm83:hover { color: #FCF8F3 !important; } .tpm84:hover { color: #FCF8F3 !important; } .tpm85:hover { color: #FCF8F3 !important; } .tpm86:hover { color: #FCF8F3 !important; } .tpm87:hover { color: #FCF8F3 !important; } .tpm88:hover { color: #FCF8F3 !important; } .tpm89:hover { color: #FCF8F3 !important; } .tpm90:hover { color: #FCF8F3 !important; } .tpm91:hover { color: #FCF8F3 !important; } .tpm92:hover { color: #FCF8F3 !important; } .tpm93:hover { color: #FCF8F3 !important; } .tpm94:hover { color: #FCF8F3 !important; } .tpm95:hover { color: #FCF8F3 !important; } .tpm96:hover { color: #FCF8F3 !important; } .tpm114:hover { color: #FCF8F3 !important; } .tpm97:hover { color: #FCF8F3 !important; } .tpm98:hover { color: #FCF8F3 !important; } .tpm99:hover { background: #A27777 !important; color: #FFFFFF !important; } .tpm100:hover { background: #A27777 !important; color: #FFFFFF !important; } .tpm101:hover { background: #A27777 !important; color: #FFFFFF !important; } .tpm102:hover { color: #FCF8F3 !important; } .tpm103:hover { color: #FCF8F3 !important; } .tpm104:hover { color: #FCF8F3 !important; } .tpm105:hover { background: #A27777 !important; color: #FCF8F3 !important; transform: translateY(-3px) !important; } .tpm106:hover { background: rgba(252,248,243,0.28) !important; } .tpm107:hover { filter: brightness(0.965); } .tpm108:hover { filter: brightness(0.965); } .tpm109:hover { color: #FCF8F3 !important; } .tpm110:hover { color: #FCF8F3 !important; } .tpm111:hover { color: #FCF8F3 !important; } /* Page Immobilier */ .tpim1:hover { background: #8F6A6A !important; } .tpim2:hover { border-color: #A27777 !important; color: #A27777 !important; } .tpim3:hover { background: #FFF8F4 !important; } .tpim4:hover { background: #8F6A6A !important; } .tpnc1:hover { background: #8F6A6A !important; } .tpnc2:hover { background: #A27777 !important; } .tpnc3 .tpnc3-ico { background: var(--tp-glow-tint); color: var(--tp-glow); } .tpnc3[aria-selected="true"] { background: rgba(255,248,244,0.12) !important; } .tpnc3[aria-selected="true"] .tpnc3-ico { background: var(--tp-glow); color: #2D3C50; } .tpnc3[aria-selected="false"]:hover { background: rgba(255,248,244,0.06) !important; } .tpnc4:hover { background: #F3EAE4 !important; color: #A27777 !important; } .tpct1001:hover { background: #AA8080 !important; } .tpct1002:hover { background: rgba(255,255,255,0.16) !important; } .tpct1003:hover { background: rgba(255,255,255,0.16) !important; } .tpct1005:focus { border-color: #A27777 !important; } .tpct1006:focus { border-color: #A27777 !important; } .tpct1007:focus { border-color: #A27777 !important; } .tpct1008:focus { border-color: #A27777 !important; } .tpct1009:focus { border-color: #A27777 !important; } .tpct1010:hover { background: #2D3C50 !important; } .tpml1011:hover { background: #F3E7E2 !important; color: #A27777 !important; } .tpml1012:hover { background: #F3E7E2 !important; color: #A27777 !important; } .tpml1013:hover { background: #F3E7E2 !important; color: #A27777 !important; } .tpml1014:hover { background: #F3E7E2 !important; color: #A27777 !important; } .tpml1015:hover { background: #F3E7E2 !important; color: #A27777 !important; } .tpml1016:hover { background: #F3E7E2 !important; color: #A27777 !important; } .tpml1017:hover { background: #F3E7E2 !important; color: #A27777 !important; } .tpml1018:hover { background: #F3E7E2 !important; color: #A27777 !important; } .tpml1019:hover { background: #F3E7E2 !important; color: #A27777 !important; } .tpml1020:hover { background: #F3E7E2 !important; color: #A27777 !important; } .tpml1021:hover { background: #2D3C50 !important; } /* L'encart de contact mord sur le pied de page : sur toute page qui l'affiche (section#contact), on recule le contenu du pied de page de la hauteur du chevauchement. Les accueils 2 et 3 ont leur propre pied de page. */ body:not(.page-template-template-accueil-2):not(.page-template-template-accueil-3):has(section#contact) footer { margin-top: 0 !important; padding-top: calc(clamp(52px, 6vw, 84px) + clamp(56px, 7vw, 120px)) !important; } /* ── BLOC DE TEST — palette marine & sable, accueil 3 uniquement ────────── Genere mecaniquement depuis les regles ci-dessus, porte par la classe de page. A supprimer d'un bloc si la palette est abandonnee, ou a promouvoir en place si elle est retenue. ───────────────────────────────────────────────────────────────────── */ body.page-template-template-accueil-3 { margin: 0; background: #FFFFFF; color: #204650; font-family: Manrope, sans-serif; -webkit-font-smoothing: antialiased; } .page-template-template-accueil-3 a:hover { color: #7E6A45; } .page-template-template-accueil-3 ::selection { background: #7E6A45; color: #FFFFFF; } .page-template-template-accueil-3 [data-faq-row]:hover [data-faq-q] { color: #7E6A45 !important; } .page-template-template-accueil-3 .leaflet-container { background: #E5F2F6; } .page-template-template-accueil-3 .tp-prose h2 { font-family: Poppins, sans-serif; font-size: clamp(21px, 2vw, 28px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: #204650; margin: clamp(22px, 2.6vw, 34px) 0 14px; padding-top: clamp(16px, 2vw, 24px); border-top: 1px solid #ECE5D9; } .page-template-template-accueil-3 .tp-prose h3 { font-family: Poppins, sans-serif; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; line-height: 1.25; color: #204650; margin: clamp(18px, 2vw, 26px) 0 10px; } .page-template-template-accueil-3 .tp-prose p { font-size: 17px; line-height: 1.78; color: #3A4C51; margin: 0 0 16px; } .page-template-template-accueil-3 .tp-prose ul, .page-template-template-accueil-3 .tp-prose ol { font-size: 17px; line-height: 1.78; color: #3A4C51; margin: 0 0 18px; padding-left: 22px; } .page-template-template-accueil-3 .tp-prose li::marker { color: #7E6A45; } .page-template-template-accueil-3 .tp-prose a { color: #7E6A45; font-weight: 500; border-bottom: 1px solid rgba(126,106,69,0.35); } .page-template-template-accueil-3 .tp-prose strong { color: #204650; font-weight: 600; } .page-template-template-accueil-3 .tp-prose figcaption { font-size: 13.5px; color: #7A8A8E; margin-top: 8px; } .page-template-template-accueil-3 .tp-prose blockquote { margin: clamp(16px, 2.2vw, 26px) 0; background: #A58B58; border-radius: 26px; padding: clamp(26px, 2.8vw, 36px); } .page-template-template-accueil-3 .tp-prose blockquote p { font-family: Poppins, sans-serif; font-size: clamp(18px, 1.7vw, 23px); font-weight: 400; line-height: 1.45; letter-spacing: -0.015em; color: #FEF8F4; margin: 0; } .page-template-template-accueil-3 .tp-prose th { text-align: left; font-family: Poppins, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8E7A4C; padding: 0 14px 12px; border-bottom: 2px solid #C0A77A; } .page-template-template-accueil-3 .tp-prose td { padding: 14px; border-bottom: 1px solid #EAE6DB; color: #3A4C51; } .page-template-template-accueil-3 .tp-prose hr { border: none; border-top: 1px solid #EAE6DB; margin: clamp(24px, 3vw, 38px) 0; } .page-template-template-accueil-3 .tp-prose .wp-block-pullquote { background: #FEF8F4; border-radius: 26px; padding: clamp(24px, 2.6vw, 32px); } .page-template-template-accueil-3 .tpm1:hover { background: #FFFFFF !important; color: #204650 !important; } .page-template-template-accueil-3 .tpm2:hover { color: #7E6A45 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #7E6A45 0 4px, transparent 4px) !important; } .page-template-template-accueil-3 .tpm3:hover { color: #7E6A45 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #7E6A45 0 4px, transparent 4px) !important; } .page-template-template-accueil-3 .tpm4:hover { color: #7E6A45 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #7E6A45 0 4px, transparent 4px) !important; } .page-template-template-accueil-3 .tpm5:hover { color: #7E6A45 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #7E6A45 0 4px, transparent 4px) !important; } .page-template-template-accueil-3 .tpm6:hover { color: #7E6A45 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #7E6A45 0 4px, transparent 4px) !important; } .page-template-template-accueil-3 .tpm7:hover { color: #7E6A45 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #7E6A45 0 4px, transparent 4px) !important; } .page-template-template-accueil-3 .tpm8:hover { background: #EDE7D9 !important; color: #204650 !important; } .page-template-template-accueil-3 .tpm9:hover { background: #EDE7D9 !important; color: #204650 !important; } .page-template-template-accueil-3 .tpm10:hover { background: #EDE7D9 !important; color: #204650 !important; } .page-template-template-accueil-3 .tpm11:hover { background: #EDE7D9 !important; color: #204650 !important; } .page-template-template-accueil-3 .tpm12:hover { background: #E5F2F6 !important; color: #204650 !important; } .page-template-template-accueil-3 .tpm13:hover { background: #E5F2F6 !important; color: #204650 !important; } .page-template-template-accueil-3 .tpm14:hover { background: #E5F2F6 !important; color: #204650 !important; } .page-template-template-accueil-3 .tpm15:hover { background: #E5F2F6 !important; color: #204650 !important; } .page-template-template-accueil-3 .tpm16:hover { background: #F0ECE5 !important; color: #204650 !important; } .page-template-template-accueil-3 .tpm17:hover { background: #F0ECE5 !important; color: #204650 !important; } .page-template-template-accueil-3 .tpm18:hover { background: #F0ECE5 !important; color: #204650 !important; } .page-template-template-accueil-3 .tpm19:hover { background: #F0ECE5 !important; color: #204650 !important; } .page-template-template-accueil-3 .tpm20:hover { background: #FFFFFF !important; color: #204650 !important; } .page-template-template-accueil-3 .tpm21:hover { background: #FFFFFF !important; color: #204650 !important; } .page-template-template-accueil-3 .tpm22:hover { color: #7E6A45 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #7E6A45 0 4px, transparent 4px) !important; } .page-template-template-accueil-3 .tpm23:hover { color: #7E6A45 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #7E6A45 0 4px, transparent 4px) !important; } .page-template-template-accueil-3 .tpm24:hover { color: #7E6A45 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #7E6A45 0 4px, transparent 4px) !important; } .page-template-template-accueil-3 .tpm25:hover { color: #7E6A45 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #7E6A45 0 4px, transparent 4px) !important; } .page-template-template-accueil-3 .tpm26:hover { color: #7E6A45 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #7E6A45 0 4px, transparent 4px) !important; } .page-template-template-accueil-3 .tpm27:hover { color: #7E6A45 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #7E6A45 0 4px, transparent 4px) !important; } .page-template-template-accueil-3 .tpm28:hover { color: #7E6A45 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #7E6A45 0 4px, transparent 4px) !important; } .page-template-template-accueil-3 .tpm29:hover { background: #FFFFFF !important; color: #204650 !important; } .page-template-template-accueil-3 .tpm30:hover { color: #7E6A45 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 14px 19px, #7E6A45 0 4px, transparent 4px) !important; } .page-template-template-accueil-3 .tpm31:hover { color: #7E6A45 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 14px 19px, #7E6A45 0 4px, transparent 4px) !important; } .page-template-template-accueil-3 .tpm32:hover { color: #7E6A45 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 14px 19px, #7E6A45 0 4px, transparent 4px) !important; } .page-template-template-accueil-3 .tpm33:hover { color: #7E6A45 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 14px 19px, #7E6A45 0 4px, transparent 4px) !important; } .page-template-template-accueil-3 .tpm34:hover { color: #7E6A45 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 14px 19px, #7E6A45 0 4px, transparent 4px) !important; } .page-template-template-accueil-3 .tpm35:hover { color: #7E6A45 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 14px 19px, #7E6A45 0 4px, transparent 4px) !important; } .page-template-template-accueil-3 .tpm36:hover { color: #7E6A45 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 14px 19px, #7E6A45 0 4px, transparent 4px) !important; } .page-template-template-accueil-3 .tpm37:hover { color: #7E6A45 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 14px 19px, #7E6A45 0 4px, transparent 4px) !important; } .page-template-template-accueil-3 .tpm38:hover { color: #7E6A45 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 14px 19px, #7E6A45 0 4px, transparent 4px) !important; } .page-template-template-accueil-3 .tpm39:hover { color: #7E6A45 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 14px 19px, #7E6A45 0 4px, transparent 4px) !important; } .page-template-template-accueil-3 .tpm40:hover { background: #204650 !important; color: #FFFFFF !important; } .page-template-template-accueil-3 .tpm41:hover { background: #204650 !important; color: #FFFFFF !important; } .page-template-template-accueil-3 .tpm42:hover { background: #7E6A45 !important; } .page-template-template-accueil-3 .tpm43:hover { border-color: #7E6A45 !important; color: #7E6A45 !important; } .page-template-template-accueil-3 .tpm44:hover { background: #396875 !important; } .page-template-template-accueil-3 .tpm45:hover { background: rgba(244,241,234,0.13) !important; } .page-template-template-accueil-3 .tpm46:hover { background: rgba(244,241,234,0.13) !important; } .page-template-template-accueil-3 .tpm47:hover { background: rgba(244,241,234,0.13) !important; } .page-template-template-accueil-3 .tpm48:hover { background: rgba(244,241,234,0.13) !important; } .page-template-template-accueil-3 .tpm49:hover { background: rgba(244,241,234,0.13) !important; } .page-template-template-accueil-3 .tpm50:hover { background: rgba(244,241,234,0.13) !important; } .page-template-template-accueil-3 .tpm51:hover { background: rgba(244,241,234,0.13) !important; } .page-template-template-accueil-3 .tpm52:hover { background: rgba(244,241,234,0.13) !important; } .page-template-template-accueil-3 .tpm53:hover { background: rgba(244,241,234,0.13) !important; } .page-template-template-accueil-3 .tpm54:hover { background: rgba(244,241,234,0.13) !important; } .page-template-template-accueil-3 .tpm55:hover { background: rgba(244,241,234,0.13) !important; } .page-template-template-accueil-3 .tpm56:hover { background: rgba(244,241,234,0.13) !important; } .page-template-template-accueil-3 .tpm57:hover { background: #204650 !important; } .page-template-template-accueil-3 .tpm58:hover { background: #ECE2D1 !important; color: #204650 !important; } .page-template-template-accueil-3 .tpm59:hover { background: #84755B !important; color: #FEF8F4 !important; } .page-template-template-accueil-3 .tpm60:hover { background: #8B7755 !important; color: #FEF8F4 !important; } .page-template-template-accueil-3 .tpm61:hover { background: #ECE2D1 !important; color: #204650 !important; } .page-template-template-accueil-3 .tpm62:hover { background: #E7E0D5 !important; color: #204650 !important; } .page-template-template-accueil-3 .tpm63:hover { background: #45717D !important; color: #FEF8F4 !important; } .page-template-template-accueil-3 .tpm64:hover { background: #ECE2D1 !important; color: #204650 !important; } .page-template-template-accueil-3 .tpm65:hover { background: #204650 !important; } .page-template-template-accueil-3 .tpm67:hover { color: #BDA387 !important; background: #1D414A !important; } .page-template-template-accueil-3 .tpm67:hover [data-actu-excerpt] { color: #BDA387 !important; } .page-template-template-accueil-3 .tpm68:hover { color: #BDA387 !important; } .page-template-template-accueil-3 .tpm69:hover { background: #6A5938 !important; } .page-template-template-accueil-3 .tpm70:hover { background: #7E6A45 !important; color: #FFFFFF !important; } .page-template-template-accueil-3 .tpm71:hover { background: #7E6A45 !important; color: #FFFFFF !important; } .page-template-template-accueil-3 .tpm72:hover { color: #BDA387 !important; border-color: #BDA387 !important; } .page-template-template-accueil-3 .tpm73:hover { color: #BDA387 !important; border-color: #BDA387 !important; } .page-template-template-accueil-3 .tpm74:hover { color: #BDA387 !important; border-color: #BDA387 !important; } .page-template-template-accueil-3 .tpm75:hover { color: #BDA387 !important; border-color: #BDA387 !important; } .page-template-template-accueil-3 .tpm76:hover { color: #BDA387 !important; border-color: #BDA387 !important; } .page-template-template-accueil-3 .tpm77:hover { color: #BDA387 !important; border-color: #BDA387 !important; } .page-template-template-accueil-3 .tpm78:hover { color: #204650 !important; border-color: #204650 !important; } .page-template-template-accueil-3 .tpm79:hover { background: #204650 !important; } .page-template-template-accueil-3 .tpm80:hover { background: #204650 !important; } .page-template-template-accueil-3 .tpm81:hover { color: #204650 !important; } .page-template-template-accueil-3 .tpm82:hover { color: #204650 !important; } .page-template-template-accueil-3 .tpm83:hover { color: #FEF8F4 !important; } .page-template-template-accueil-3 .tpm84:hover { color: #FEF8F4 !important; } .page-template-template-accueil-3 .tpm85:hover { color: #FEF8F4 !important; } .page-template-template-accueil-3 .tpm86:hover { color: #FEF8F4 !important; } .page-template-template-accueil-3 .tpm87:hover { color: #FEF8F4 !important; } .page-template-template-accueil-3 .tpm88:hover { color: #FEF8F4 !important; } .page-template-template-accueil-3 .tpm89:hover { color: #FEF8F4 !important; } .page-template-template-accueil-3 .tpm90:hover { color: #FEF8F4 !important; } .page-template-template-accueil-3 .tpm91:hover { color: #FEF8F4 !important; } .page-template-template-accueil-3 .tpm92:hover { color: #FEF8F4 !important; } .page-template-template-accueil-3 .tpm93:hover { color: #FEF8F4 !important; } .page-template-template-accueil-3 .tpm94:hover { color: #FEF8F4 !important; } .page-template-template-accueil-3 .tpm95:hover { color: #FEF8F4 !important; } .page-template-template-accueil-3 .tpm96:hover { color: #FEF8F4 !important; } .page-template-template-accueil-3 .tpm114:hover { color: #FEF8F4 !important; } .page-template-template-accueil-3 .tpm97:hover { color: #FEF8F4 !important; } .page-template-template-accueil-3 .tpm98:hover { color: #FEF8F4 !important; } .page-template-template-accueil-3 .tpm99:hover { background: #7E6A45 !important; color: #FFFFFF !important; } .page-template-template-accueil-3 .tpm100:hover { background: #7E6A45 !important; color: #FFFFFF !important; } .page-template-template-accueil-3 .tpm101:hover { background: #7E6A45 !important; color: #FFFFFF !important; } .page-template-template-accueil-3 .tpm102:hover { color: #FEF8F4 !important; } .page-template-template-accueil-3 .tpm103:hover { color: #FEF8F4 !important; } .page-template-template-accueil-3 .tpm104:hover { color: #FEF8F4 !important; } .page-template-template-accueil-3 .tpm105:hover { background: #7E6A45 !important; color: #FEF8F4 !important; transform: translateY(-3px) !important; } .page-template-template-accueil-3 .tpm106:hover { background: rgba(244,241,234,0.28) !important; } .page-template-template-accueil-3 .tpm109:hover { color: #FEF8F4 !important; } .page-template-template-accueil-3 .tpm110:hover { color: #FEF8F4 !important; } .page-template-template-accueil-3 .tpm111:hover { color: #FEF8F4 !important; } .page-template-template-accueil-3 .tpct1001:hover { background: #A99A81 !important; } .page-template-template-accueil-3 .tpct1005:focus { border-color: #7E6A45 !important; } .page-template-template-accueil-3 .tpct1006:focus { border-color: #7E6A45 !important; } .page-template-template-accueil-3 .tpct1007:focus { border-color: #7E6A45 !important; } .page-template-template-accueil-3 .tpct1008:focus { border-color: #7E6A45 !important; } .page-template-template-accueil-3 .tpct1009:focus { border-color: #7E6A45 !important; } .page-template-template-accueil-3 .tpct1010:hover { background: #204650 !important; } .page-template-template-accueil-3 .tpml1011:hover { background: #EAE3D3 !important; color: #7E6A45 !important; } .page-template-template-accueil-3 .tpml1012:hover { background: #EAE3D3 !important; color: #7E6A45 !important; } .page-template-template-accueil-3 .tpml1013:hover { background: #EAE3D3 !important; color: #7E6A45 !important; } .page-template-template-accueil-3 .tpml1014:hover { background: #EAE3D3 !important; color: #7E6A45 !important; } .page-template-template-accueil-3 .tpml1015:hover { background: #EAE3D3 !important; color: #7E6A45 !important; } .page-template-template-accueil-3 .tpml1016:hover { background: #EAE3D3 !important; color: #7E6A45 !important; } .page-template-template-accueil-3 .tpml1017:hover { background: #EAE3D3 !important; color: #7E6A45 !important; } .page-template-template-accueil-3 .tpml1018:hover { background: #EAE3D3 !important; color: #7E6A45 !important; } .page-template-template-accueil-3 .tpml1019:hover { background: #EAE3D3 !important; color: #7E6A45 !important; } .page-template-template-accueil-3 .tpml1020:hover { background: #EAE3D3 !important; color: #7E6A45 !important; } .page-template-template-accueil-3 .tpml1021:hover { background: #204650 !important; } /* ── BLOC DE TEST — palette marine & sable clair, accueil 2 uniquement ──── Meme principe que le bloc de l'accueil 3 : genere depuis les regles d'origine et porte par la classe de page. Retirable d'un seul tenant. ───────────────────────────────────────────────────────────────────── */ body.page-template-template-accueil-2 { margin: 0; background: #FFFFFF; color: #16324A; font-family: Manrope, sans-serif; -webkit-font-smoothing: antialiased; } .page-template-template-accueil-2 a:hover { color: #8F7C53; } .page-template-template-accueil-2 ::selection { background: #8F7C53; color: #FFFFFF; } .page-template-template-accueil-2 [data-faq-row]:hover [data-faq-q] { color: #8F7C53 !important; } .page-template-template-accueil-2 .leaflet-container { background: #E5EFF6; } .page-template-template-accueil-2 .tp-prose h2 { font-family: Poppins, sans-serif; font-size: clamp(21px, 2vw, 28px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: #16324A; margin: clamp(22px, 2.6vw, 34px) 0 14px; padding-top: clamp(16px, 2vw, 24px); border-top: 1px solid #ECE6D9; } .page-template-template-accueil-2 .tp-prose h3 { font-family: Poppins, sans-serif; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; line-height: 1.25; color: #16324A; margin: clamp(18px, 2vw, 26px) 0 10px; } .page-template-template-accueil-2 .tp-prose p { font-size: 17px; line-height: 1.78; color: #394B5E; margin: 0 0 16px; } .page-template-template-accueil-2 .tp-prose ul, .page-template-template-accueil-2 .tp-prose ol { font-size: 17px; line-height: 1.78; color: #394B5E; margin: 0 0 18px; padding-left: 22px; } .page-template-template-accueil-2 .tp-prose li::marker { color: #8F7C53; } .page-template-template-accueil-2 .tp-prose a { color: #8F7C53; font-weight: 500; border-bottom: 1px solid rgba(126,110,76,0.35); } .page-template-template-accueil-2 .tp-prose strong { color: #16324A; font-weight: 600; } .page-template-template-accueil-2 .tp-prose figcaption { font-size: 13.5px; color: #78899C; margin-top: 8px; } .page-template-template-accueil-2 .tp-prose blockquote { margin: clamp(16px, 2.2vw, 26px) 0; background: #A58F60; border-radius: 26px; padding: clamp(26px, 2.8vw, 36px); } .page-template-template-accueil-2 .tp-prose blockquote p { font-family: Poppins, sans-serif; font-size: clamp(18px, 1.7vw, 23px); font-weight: 400; line-height: 1.45; letter-spacing: -0.015em; color: #FEF8F4; margin: 0; } .page-template-template-accueil-2 .tp-prose th { text-align: left; font-family: Poppins, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #90804F; padding: 0 14px 12px; border-bottom: 2px solid #C2AC7E; } .page-template-template-accueil-2 .tp-prose td { padding: 14px; border-bottom: 1px solid #EEE9DD; color: #394B5E; } .page-template-template-accueil-2 .tp-prose hr { border: none; border-top: 1px solid #EEE9DD; margin: clamp(24px, 3vw, 38px) 0; } .page-template-template-accueil-2 .tp-prose .wp-block-pullquote { background: #FEF8F4; border-radius: 26px; padding: clamp(24px, 2.6vw, 32px); } .page-template-template-accueil-2 .tpm1:hover { background: #FFFFFF !important; color: #16324A !important; } .page-template-template-accueil-2 .tpm2:hover { color: #8F7C53 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #8F7C53 0 4px, transparent 4px) !important; } .page-template-template-accueil-2 .tpm3:hover { color: #8F7C53 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #8F7C53 0 4px, transparent 4px) !important; } .page-template-template-accueil-2 .tpm4:hover { color: #8F7C53 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #8F7C53 0 4px, transparent 4px) !important; } .page-template-template-accueil-2 .tpm5:hover { color: #8F7C53 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #8F7C53 0 4px, transparent 4px) !important; } .page-template-template-accueil-2 .tpm6:hover { color: #8F7C53 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #8F7C53 0 4px, transparent 4px) !important; } .page-template-template-accueil-2 .tpm7:hover { color: #8F7C53 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #8F7C53 0 4px, transparent 4px) !important; } .page-template-template-accueil-2 .tpm8:hover { background: #F1EBDD !important; color: #16324A !important; } .page-template-template-accueil-2 .tpm9:hover { background: #F1EBDD !important; color: #16324A !important; } .page-template-template-accueil-2 .tpm10:hover { background: #F1EBDD !important; color: #16324A !important; } .page-template-template-accueil-2 .tpm11:hover { background: #F1EBDD !important; color: #16324A !important; } .page-template-template-accueil-2 .tpm12:hover { background: #E5EFF6 !important; color: #16324A !important; } .page-template-template-accueil-2 .tpm13:hover { background: #E5EFF6 !important; color: #16324A !important; } .page-template-template-accueil-2 .tpm14:hover { background: #E5EFF6 !important; color: #16324A !important; } .page-template-template-accueil-2 .tpm15:hover { background: #E5EFF6 !important; color: #16324A !important; } .page-template-template-accueil-2 .tpm16:hover { background: #F0ECE5 !important; color: #16324A !important; } .page-template-template-accueil-2 .tpm17:hover { background: #F0ECE5 !important; color: #16324A !important; } .page-template-template-accueil-2 .tpm18:hover { background: #F0ECE5 !important; color: #16324A !important; } .page-template-template-accueil-2 .tpm19:hover { background: #F0ECE5 !important; color: #16324A !important; } .page-template-template-accueil-2 .tpm20:hover { background: #FFFFFF !important; color: #16324A !important; } .page-template-template-accueil-2 .tpm21:hover { background: #FFFFFF !important; color: #16324A !important; } .page-template-template-accueil-2 .tpm22:hover { color: #8F7C53 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #8F7C53 0 4px, transparent 4px) !important; } .page-template-template-accueil-2 .tpm23:hover { color: #8F7C53 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #8F7C53 0 4px, transparent 4px) !important; } .page-template-template-accueil-2 .tpm24:hover { color: #8F7C53 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #8F7C53 0 4px, transparent 4px) !important; } .page-template-template-accueil-2 .tpm25:hover { color: #8F7C53 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #8F7C53 0 4px, transparent 4px) !important; } .page-template-template-accueil-2 .tpm26:hover { color: #8F7C53 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #8F7C53 0 4px, transparent 4px) !important; } .page-template-template-accueil-2 .tpm27:hover { color: #8F7C53 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #8F7C53 0 4px, transparent 4px) !important; } .page-template-template-accueil-2 .tpm28:hover { color: #8F7C53 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 16px 50%, #8F7C53 0 4px, transparent 4px) !important; } .page-template-template-accueil-2 .tpm29:hover { background: #FFFFFF !important; color: #16324A !important; } .page-template-template-accueil-2 .tpm30:hover { color: #8F7C53 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 14px 19px, #8F7C53 0 4px, transparent 4px) !important; } .page-template-template-accueil-2 .tpm31:hover { color: #8F7C53 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 14px 19px, #8F7C53 0 4px, transparent 4px) !important; } .page-template-template-accueil-2 .tpm32:hover { color: #8F7C53 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 14px 19px, #8F7C53 0 4px, transparent 4px) !important; } .page-template-template-accueil-2 .tpm33:hover { color: #8F7C53 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 14px 19px, #8F7C53 0 4px, transparent 4px) !important; } .page-template-template-accueil-2 .tpm34:hover { color: #8F7C53 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 14px 19px, #8F7C53 0 4px, transparent 4px) !important; } .page-template-template-accueil-2 .tpm35:hover { color: #8F7C53 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 14px 19px, #8F7C53 0 4px, transparent 4px) !important; } .page-template-template-accueil-2 .tpm36:hover { color: #8F7C53 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 14px 19px, #8F7C53 0 4px, transparent 4px) !important; } .page-template-template-accueil-2 .tpm37:hover { color: #8F7C53 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 14px 19px, #8F7C53 0 4px, transparent 4px) !important; } .page-template-template-accueil-2 .tpm38:hover { color: #8F7C53 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 14px 19px, #8F7C53 0 4px, transparent 4px) !important; } .page-template-template-accueil-2 .tpm39:hover { color: #8F7C53 !important; background-color: #FEF8F4 !important; background-image: radial-gradient(circle at 14px 19px, #8F7C53 0 4px, transparent 4px) !important; } .page-template-template-accueil-2 .tpm40:hover { background: #16324A !important; color: #FFFFFF !important; } .page-template-template-accueil-2 .tpm41:hover { background: #16324A !important; color: #FFFFFF !important; } .page-template-template-accueil-2 .tpm42:hover { background: #8F7C53 !important; } .page-template-template-accueil-2 .tpm43:hover { border-color: #8F7C53 !important; color: #8F7C53 !important; } .page-template-template-accueil-2 .tpm44:hover { background: #3A5B74 !important; } .page-template-template-accueil-2 .tpm45:hover { background: rgba(254,248,244,0.13) !important; } .page-template-template-accueil-2 .tpm46:hover { background: rgba(254,248,244,0.13) !important; } .page-template-template-accueil-2 .tpm47:hover { background: rgba(254,248,244,0.13) !important; } .page-template-template-accueil-2 .tpm48:hover { background: rgba(254,248,244,0.13) !important; } .page-template-template-accueil-2 .tpm49:hover { background: rgba(254,248,244,0.13) !important; } .page-template-template-accueil-2 .tpm50:hover { background: rgba(254,248,244,0.13) !important; } .page-template-template-accueil-2 .tpm51:hover { background: rgba(254,248,244,0.13) !important; } .page-template-template-accueil-2 .tpm52:hover { background: rgba(254,248,244,0.13) !important; } .page-template-template-accueil-2 .tpm53:hover { background: rgba(254,248,244,0.13) !important; } .page-template-template-accueil-2 .tpm54:hover { background: rgba(254,248,244,0.13) !important; } .page-template-template-accueil-2 .tpm55:hover { background: rgba(254,248,244,0.13) !important; } .page-template-template-accueil-2 .tpm56:hover { background: rgba(254,248,244,0.13) !important; } .page-template-template-accueil-2 .tpm57:hover { background: #16324A !important; } .page-template-template-accueil-2 .tpm58:hover { background: #ECE3D1 !important; color: #16324A !important; } .page-template-template-accueil-2 .tpm59:hover { background: #84765B !important; color: #FEF8F4 !important; } .page-template-template-accueil-2 .tpm60:hover { background: #8B7955 !important; color: #FEF8F4 !important; } .page-template-template-accueil-2 .tpm61:hover { background: #ECE3D1 !important; color: #16324A !important; } .page-template-template-accueil-2 .tpm62:hover { background: #E7E1D5 !important; color: #16324A !important; } .page-template-template-accueil-2 .tpm63:hover { background: #46657C !important; color: #FEF8F4 !important; } .page-template-template-accueil-2 .tpm64:hover { background: #ECE3D1 !important; color: #16324A !important; } .page-template-template-accueil-2 .tpm65:hover { background: #16324A !important; } .page-template-template-accueil-2 .tpm67:hover { color: #DCCFB5 !important; background: #1E3D59 !important; } .page-template-template-accueil-2 .tpm67:hover [data-actu-excerpt] { color: #DCCFB5 !important; } .page-template-template-accueil-2 .tpm68:hover { color: #DCCFB5 !important; } .page-template-template-accueil-2 .tpm69:hover { background: #6A5C3F !important; } .page-template-template-accueil-2 .tpm70:hover { background: #8F7C53 !important; color: #FFFFFF !important; } .page-template-template-accueil-2 .tpm71:hover { background: #8F7C53 !important; color: #FFFFFF !important; } .page-template-template-accueil-2 .tpm72:hover { color: #DCCFB5 !important; border-color: #DCCFB5 !important; } .page-template-template-accueil-2 .tpm73:hover { color: #DCCFB5 !important; border-color: #DCCFB5 !important; } .page-template-template-accueil-2 .tpm74:hover { color: #DCCFB5 !important; border-color: #DCCFB5 !important; } .page-template-template-accueil-2 .tpm75:hover { color: #DCCFB5 !important; border-color: #DCCFB5 !important; } .page-template-template-accueil-2 .tpm76:hover { color: #DCCFB5 !important; border-color: #DCCFB5 !important; } .page-template-template-accueil-2 .tpm77:hover { color: #DCCFB5 !important; border-color: #DCCFB5 !important; } .page-template-template-accueil-2 .tpm78:hover { color: #16324A !important; border-color: #16324A !important; } .page-template-template-accueil-2 .tpm79:hover { background: #16324A !important; } .page-template-template-accueil-2 .tpm80:hover { background: #16324A !important; } .page-template-template-accueil-2 .tpm81:hover { color: #16324A !important; } .page-template-template-accueil-2 .tpm82:hover { color: #16324A !important; } .page-template-template-accueil-2 .tpm83:hover { color: #FEF8F4 !important; } .page-template-template-accueil-2 .tpm84:hover { color: #FEF8F4 !important; } .page-template-template-accueil-2 .tpm85:hover { color: #FEF8F4 !important; } .page-template-template-accueil-2 .tpm86:hover { color: #FEF8F4 !important; } .page-template-template-accueil-2 .tpm87:hover { color: #FEF8F4 !important; } .page-template-template-accueil-2 .tpm88:hover { color: #FEF8F4 !important; } .page-template-template-accueil-2 .tpm89:hover { color: #FEF8F4 !important; } .page-template-template-accueil-2 .tpm90:hover { color: #FEF8F4 !important; } .page-template-template-accueil-2 .tpm91:hover { color: #FEF8F4 !important; } .page-template-template-accueil-2 .tpm92:hover { color: #FEF8F4 !important; } .page-template-template-accueil-2 .tpm93:hover { color: #FEF8F4 !important; } .page-template-template-accueil-2 .tpm94:hover { color: #FEF8F4 !important; } .page-template-template-accueil-2 .tpm95:hover { color: #FEF8F4 !important; } .page-template-template-accueil-2 .tpm96:hover { color: #FEF8F4 !important; } .page-template-template-accueil-2 .tpm114:hover { color: #FEF8F4 !important; } .page-template-template-accueil-2 .tpm97:hover { color: #FEF8F4 !important; } .page-template-template-accueil-2 .tpm98:hover { color: #FEF8F4 !important; } .page-template-template-accueil-2 .tpm99:hover { background: #8F7C53 !important; color: #FFFFFF !important; } .page-template-template-accueil-2 .tpm100:hover { background: #8F7C53 !important; color: #FFFFFF !important; } .page-template-template-accueil-2 .tpm101:hover { background: #8F7C53 !important; color: #FFFFFF !important; } .page-template-template-accueil-2 .tpm102:hover { color: #FEF8F4 !important; } .page-template-template-accueil-2 .tpm103:hover { color: #FEF8F4 !important; } .page-template-template-accueil-2 .tpm104:hover { color: #FEF8F4 !important; } .page-template-template-accueil-2 .tpm105:hover { background: #8F7C53 !important; color: #FEF8F4 !important; transform: translateY(-3px) !important; } .page-template-template-accueil-2 .tpm106:hover { background: rgba(254,248,244,0.28) !important; } .page-template-template-accueil-2 .tpm109:hover { color: #FEF8F4 !important; } .page-template-template-accueil-2 .tpm110:hover { color: #FEF8F4 !important; } .page-template-template-accueil-2 .tpm111:hover { color: #FEF8F4 !important; } .page-template-template-accueil-2 .tpct1001:hover { background: #A99C81 !important; } .page-template-template-accueil-2 .tpct1005:focus { border-color: #8F7C53 !important; } .page-template-template-accueil-2 .tpct1006:focus { border-color: #8F7C53 !important; } .page-template-template-accueil-2 .tpct1007:focus { border-color: #8F7C53 !important; } .page-template-template-accueil-2 .tpct1008:focus { border-color: #8F7C53 !important; } .page-template-template-accueil-2 .tpct1009:focus { border-color: #8F7C53 !important; } .page-template-template-accueil-2 .tpct1010:hover { background: #16324A !important; } .page-template-template-accueil-2 .tpml1011:hover { background: #EFE8D8 !important; color: #8F7C53 !important; } .page-template-template-accueil-2 .tpml1012:hover { background: #EFE8D8 !important; color: #8F7C53 !important; } .page-template-template-accueil-2 .tpml1013:hover { background: #EFE8D8 !important; color: #8F7C53 !important; } .page-template-template-accueil-2 .tpml1014:hover { background: #EFE8D8 !important; color: #8F7C53 !important; } .page-template-template-accueil-2 .tpml1015:hover { background: #EFE8D8 !important; color: #8F7C53 !important; } .page-template-template-accueil-2 .tpml1016:hover { background: #EFE8D8 !important; color: #8F7C53 !important; } .page-template-template-accueil-2 .tpml1017:hover { background: #EFE8D8 !important; color: #8F7C53 !important; } .page-template-template-accueil-2 .tpml1018:hover { background: #EFE8D8 !important; color: #8F7C53 !important; } .page-template-template-accueil-2 .tpml1019:hover { background: #EFE8D8 !important; color: #8F7C53 !important; } .page-template-template-accueil-2 .tpml1020:hover { background: #EFE8D8 !important; color: #8F7C53 !important; } .page-template-template-accueil-2 .tpml1021:hover { background: #16324A !important; } /* Lexique de l'investisseur — pseudo-états des pastilles de lettres et du champ de recherche */ .tplx-letters::-webkit-scrollbar { display: none; } .tplx-letter:hover { background: #A27777 !important; color: #FFFFFF !important; } .tplx-search:focus { border-color: #FFFFFF !important; outline: none; box-shadow: 0 0 0 4px rgba(255,255,255,0.28); } .tplx-entry:target { background: #FFF8F4; border-radius: 24px; } .tplx-entry a { color: #A27777; text-decoration: underline; text-underline-offset: 3px; } /* Bandeau newsletter du pied de page */ footer .tpnl-row { margin-top: calc(-1 * clamp(52px, 6vw, 84px)) !important; } body:has(section#contact) footer .tpnl-row { margin-top: calc(-1 * (clamp(52px, 6vw, 84px) + clamp(56px, 7vw, 120px))) !important; padding-top: calc(clamp(56px, 7vw, 120px) + clamp(44px, 4.6vw, 64px)) !important; } body.page-template-template-accueil-2:has(section#contact) footer .tpnl-row, body.page-template-template-accueil-3:has(section#contact) footer .tpnl-row { margin-top: 0 !important; } .tpnl-input::placeholder { color: rgba(255,255,255,0.85); } .tpnl-field:has(.tpnl-input:not(:placeholder-shown)) .tpnl-ico { opacity: 0; width: 0 !important; margin-right: -8px !important; } .tpnl-field:hover, .tpnl-field:focus-within { border-color: #FFFFFF !important; background: rgba(255,255,255,0.22) !important; } .tpnl-btn:hover { background: #8F6A6A !important; } .tpnl-btn:focus-visible { outline: 2px solid #FFF8F4; outline-offset: 3px; } /* Lexique : sur petit écran, le texte du bandeau couvre toute la largeur de l'image */ @media (max-width: 760px) { .tplx-veil { background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.88) 45%, rgba(255,255,255,0.94) 100%) !important; } } /* Méga-menu « Nos solutions » (template-parts/mega-solutions.php) */ .tpsol:hover { color: #FFFFFF !important; background-color: rgba(255,248,244,0.08) !important; } .tpsol-head:hover { color: #E8C2BE !important; } .tpsol-cta:hover { background: #8F6A6A !important; } .tpfsol:hover, .tpfsol-head:hover { color: #FFF8F4 !important; } .tpnc-track::-webkit-scrollbar { display: none; } section div.tpnc-track[data-tp-avis-track][tabindex] { flex-wrap: nowrap !important; } .tpnc-arrow:hover { background: #273343 !important; border-color: #273343 !important; color: #FFFFFF !important; } /* Nos agréments : barre d'ancres « En un coup d'œil » (template-agrements.php) */ .tpag-nav::-webkit-scrollbar { display: none; } section nav.tpag-nav[data-tp-agrements-nav][aria-label] { flex-wrap: nowrap !important; } .tpag-pill:hover { background: #F3E7E2 !important; } .tpag-pill.is-active { background: #A27777 !important; color: #FFFFFF !important; } .tpag-pill.is-active .tpag-pill-sub { color: #FFF8F4 !important; } .tpag1:hover { background: #E9D8D1 !important; } @media (max-width: 1180px) { .tpag-pill .tpag-pill-sub { display: none; } } @media (max-width: 560px) { [data-tp-agrements-bar] > span:first-child { display: none; } } /* Notre méthode (template-methode.php) */ .tpme1:hover { background: rgba(255,248,244,0.26) !important; } .tpme2:hover { background: rgba(255,248,244,0.14); } .tpme3:hover { color: #FFF8F4 !important; border-color: #FFF8F4 !important; } .tpme-chip:hover { background: #F3E7E2 !important; } .tpme-levier:hover { background: #F3E7E2 !important; } .tpme-pin:hover { border-color: #A27777 !important; } .tpme-pin.is-done { background: #D9A6A6 !important; border-color: #D9A6A6 !important; color: #FFFFFF !important; } .tpme-pin.is-active { background: #A27777 !important; border-color: #A27777 !important; color: #FFFFFF !important; box-shadow: 0 0 0 8px rgba(162,119,119,0.16), 0 16px 32px -14px rgba(162,119,119,0.9); } .tpme-vie .tpme-vie-long { display: none !important; } .tpme-vie.is-open .tpme-vie-long { display: flex !important; animation: tpFade 0.5s ease both; } .tpme-vie.is-open .tpme-vie-court { display: none; } .tpme-vie:hover img, .tpme-vie.is-open img { transform: scale(1.04); } .tpme-vie:focus-visible { outline: 2px solid #A27777; outline-offset: 3px; } @media (max-width: 860px) { section div.tpme-vies[data-tp-methode-vies] { flex-direction: column !important; flex-wrap: nowrap !important; height: auto !important; } .tpme-vie { flex: none !important; min-height: 300px; } section div.tpme-row[style] { flex-wrap: nowrap !important; gap: 10px !important; } .tpme-pin { width: 40px !important; height: 40px !important; font-size: 13px !important; } .tpme-track { left: 19px !important; top: 20px !important; } .tpme-vie .tpme-vie-long { display: flex !important; } .tpme-vie .tpme-vie-court { display: none !important; } } /* Devenir partenaire (template-partenaires.php) */ .tppa-pick:hover { background: rgba(255,248,244,0.24) !important; translate: 0 -4px; } .tppa-bloc:target { box-shadow: 0 0 0 4px rgba(162,119,119,0.22); } .tppa-faq summary::-webkit-details-marker { display: none; } .tppa-faq[open] .tppa-plus { rotate: 45deg; } .tppa-faq summary:hover { color: #A27777 !important; } /* Fiches solution : texte saisi dans l'éditeur */ .tpsol-texte p { margin: 0 0 16px; font-size: 16px; line-height: 1.78; color: #3E4A5A; } .tpsol-texte > :last-child { margin-bottom: 0; } .tpsol-texte strong { color: #273343; font-weight: 600; } .tpsol-texte a { color: #A27777; font-weight: 500; border-bottom: 1px solid rgba(162,119,119,0.35); } .tpsol-texte h3 { font-family: Poppins, sans-serif; font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: #31405A; margin: clamp(22px, 2.2vw, 30px) 0 12px; } .tpsol-texte > h3:first-child { margin-top: 10px; } .tpsol-texte ul, .tpsol-texte ol { margin: 0 0 16px; padding-left: 20px; font-size: 16px; line-height: 1.78; color: #3E4A5A; } .tpsol-texte li { margin-bottom: 6px; } .tpsol-texte li::marker { color: #A27777; } .tpsol-texte--sombre p, .tpsol-texte--sombre ul, .tpsol-texte--sombre ol { color: rgba(255,248,244,0.88); } .tpsol-texte--sombre strong, .tpsol-texte--sombre h3 { color: #FFF8F4; } .tpsol-texte--sombre a { color: #FFF8F4; } /* Texte rédigé dans les fiches : paragraphes et intertitres aérés */ .tpsv .tpsol-texte p { margin: 0 0 26px; font-size: 16.5px; line-height: 1.85; } .tpsv .tpsol-texte > :last-child { margin-bottom: 0; } .tpsv .tpsol-texte h3 { margin: 52px 0 16px; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.3; } .tpsv .tpsol-texte > h3:first-child { margin-top: 0; } /* FAQ des fiches : reprend celle de l'accueil (ligne ouverte sur fond bleuté, filets entre les lignes fermées) */ .tpsol-faq summary::-webkit-details-marker { display: none; } .tpsol-faq + .tpsol-faq { border-top: 1px solid rgba(162,119,119,0.22); } .tpsol-faq[open], .tpsol-faq[open] + .tpsol-faq { border-top-color: transparent; } .tpsol-faq[open] { background: #F4F7FA; margin: 8px 0; } .tpsol-faq-signe { background: #F3E7E2; color: #A27777; } .tpsol-faq-signe::before { content: "+"; } .tpsol-faq[open] .tpsol-faq-signe { background: #A27777; color: #FFFFFF; } .tpsol-faq[open] .tpsol-faq-signe::before { content: "\2212"; } .tpsol-faq summary:hover [data-faq-q] { color: #A27777 !important; } /* ===== Fiches solution (single-solution.php, js/solution.js) ===== Modules interactifs : animations, états et responsive ne peuvent pas être en ligne. */ .tpsv { --nuit: #2D3C50; --titre: #31405A; --ardoise: #54687F; --ardoise-2: #6E8098; --ardoise-pale: #D5DDE6; --voile: #F4F7FA; --creme: #FFF8F4; --rose: #F3E7E2; --terra: #A27777; --terra-fonce: #8F6A6A; --terra-pale: #E8C2BE; --filet: #E2D6CC; --texte: #3E4A5A; --gris: #556172; --libelle: #6E6259; --g: clamp(14px, 2.6vw, 52px); color: var(--texte); } .tpsv h2, .tpsv h3, .tpsv h4 { font-family: Poppins, sans-serif; color: var(--titre); margin: 0; letter-spacing: -0.025em; font-weight: 600; } .tpsv p { margin: 0; } .tpsv-wrap { max-width: 1500px; margin: 0 auto; padding: 0 var(--g); } .tpsv-inner { max-width: 1400px; margin: 0 auto; } .tpsv-section { padding-top: clamp(120px, 11vw, 168px); scroll-margin-top: 120px; } .tpsv-eyebrow { display: flex; align-items: center; gap: 12px; font-family: Poppins, sans-serif; font-size: 13.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #A27777; } /* identique à l’accueil */ .tpsv h2.tpsv-h2 { font-size: clamp(30px, 3.1vw, 44px); line-height: 1.08; text-wrap: pretty; } .tpsv-lead { font-size: clamp(16px, 1.25vw, 17.5px); line-height: 1.75; } .tpsv-tete { display: flex; flex-direction: column; gap: 18px; margin-bottom: clamp(24px, 2.4vw, 36px); } .tpsv-tete > div { display: flex; flex-direction: column; gap: 18px; } .tpsv .tpsv-tete .tpsv-lead { max-width: 720px; font-size: 16.5px; line-height: 1.75; color: var(--texte); } .tpsv-btn { display: inline-flex; align-items: center; gap: 10px; font-family: Poppins, sans-serif; font-size: 15px; font-weight: 500; padding: 17px 28px; border-radius: 999px; border: 0; cursor: pointer; transition: background .15s, box-shadow .15s, color .15s; } .tpsv-btn--terra { background: var(--terra); color: #FFF; } .tpsv-btn--terra:hover { background: #8F6A6A; color: #FFF; } .tpsv-btn--ligne { background: transparent; color: var(--nuit); box-shadow: inset 0 0 0 1.5px #E2D6CC; } .tpsv-btn--ligne:hover { box-shadow: inset 0 0 0 1.5px var(--terra); color: var(--terra); } .tpsv-mention { font-size: 12.5px; line-height: 1.5; color: var(--libelle); } .tpsv-num { font-family: Poppins, sans-serif; font-variant-numeric: tabular-nums; } .tpsv input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--ardoise-pale); outline: none; margin: 0; } .tpsv input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #FFF; border: 6px solid var(--ardoise); cursor: pointer; box-shadow: 0 6px 14px -6px rgba(39,51,67,.6); } .tpsv input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #FFF; border: 6px solid var(--ardoise); cursor: pointer; } .tpsv input[type=range]:focus-visible { box-shadow: 0 0 0 3px rgba(84,104,127,.3); } .tpsv-risque { display: flex; gap: 4px; } .tpsv-risque i { flex: 1; height: 8px; border-radius: 3px; background: var(--ardoise-pale); } .tpsv-risque i.on { background: var(--ardoise); } /* En-tête */ .tpsv-hero { display: grid; grid-template-columns: minmax(0, 580px) minmax(0, 540px); justify-content: center; gap: clamp(40px, 6vw, 104px); padding: clamp(32px, 4vw, 64px) 0 clamp(24px, 3vw, 48px); align-items: center; } .tpsv-hero__visuel { position: relative; aspect-ratio: 4 / 3; max-height: 440px; } .tpsv-hero__photo { position: absolute; inset: 0; border-radius: 44px; overflow: hidden; background: var(--ardoise-pale); clip-path: inset(0 0 0 0 round 44px); } .tpsv-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 35%; display: block; } .tpsv-hero__texte { display: flex; flex-direction: column; justify-content: center; gap: 24px; } .tpsv-ariane { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--gris); } .tpsv-ariane a { color: var(--gris); } .tpsv-ariane a:hover { color: var(--terra); } .tpsv-ariane b { font-weight: 500; color: var(--terra); } .tpsv h1.tpsv-h1 { display: flex; flex-direction: column; gap: 14px; margin: 0; font-family: Poppins, sans-serif; color: var(--titre); font-weight: 600; } .tpsv-ligne { display: block; overflow: hidden; padding-bottom: .2em; margin-bottom: -.14em; } .tpsv-ligne > span { display: block; } .tpsv-h1 .tpsv-grand { font-size: clamp(34px, 3.4vw, 50px); line-height: 1.02; letter-spacing: -.035em; } .tpsv-h1 .tpsv-sous { font-size: clamp(17px, 1.5vw, 21px); font-weight: 400; line-height: 1.3; letter-spacing: -.015em; color: var(--ardoise); } .tpsv-objectifs { border-top: 1px solid var(--filet); margin-top: 6px; } .tpsv-objectifs a { display: grid; grid-template-columns: 36px minmax(0, 1fr) 24px; align-items: center; gap: 12px; padding: 18px 4px; border-bottom: 1px solid var(--filet); border-radius: 14px; transition: padding .2s, background .2s; } .tpsv-objectifs a:hover { padding-left: 14px; background: var(--creme); } .tpsv-objectifs .n { font-family: Poppins, sans-serif; font-size: 12.5px; font-weight: 600; color: var(--libelle); letter-spacing: .08em; } .tpsv-objectifs b { font-family: Poppins, sans-serif; font-size: 17px; font-weight: 500; color: var(--nuit); } .tpsv-objectifs em { display: block; font-style: normal; font-size: 13.5px; color: var(--gris); margin-top: 2px; } .tpsv-objectifs svg { color: var(--terra); } /* Définition : la seule bande pleine largeur */ .tpsv-definition { position: relative; overflow: hidden; margin-top: clamp(40px, 4vw, 64px); padding: 96px 0; background: var(--ardoise); color: #FFFFFF; scroll-margin-top: 80px; } .tpsv-definition .tpsv-eyebrow { color: #FBE3DF; } .tpsv-definition__grille { position: relative; display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); gap: clamp(32px, 5vw, 96px); } .tpsv-definition__grille--pile { grid-template-columns: minmax(0, 1fr); gap: 28px; } .tpsv .tpsv-definition__grille--pile .tpsv-phrase { max-width: none; } .tpsv-definition h2 { color: #FFF8F4; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; } .tpsv .tpsv-phrase { font-family: Manrope, sans-serif; font-size: clamp(16px, 1.3vw, 18.5px); font-weight: 400; line-height: 1.6; letter-spacing: 0; color: #FFFFFF; max-width: 72ch; } .tpsv-phrase mark { background: none; color: #FBE3DF; font-weight: 700; } .tpsv .tpsv-phrase__suite { margin-top: 32px; max-width: none; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.75; color: #E4E9EF; } .tpsv-identite { position: relative; margin-top: 48px; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 12px; } .tpsv-identite > div { background: #485B71; border-radius: 26px; padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; min-height: 172px; transition: transform .35s cubic-bezier(.2,.8,.2,1), background .35s; } .tpsv-identite > div:hover { transform: translateY(-6px); background: #42546A; } .tpsv-identite svg { color: var(--terra-pale); flex-shrink: 0; margin-bottom: 18px; } .tpsv-identite small { font-family: Poppins, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #E1E7EE; } .tpsv-identite b { font-family: Poppins, sans-serif; font-size: 18px; font-weight: 600; color: #FFF8F4; line-height: 1.25; } .tpsv-identite .tpsv-risque i { background: rgba(255,248,244,.22); } .tpsv-identite .tpsv-risque i.on { background: var(--terra-pale); } /* Frise : la vie du contrat */ .tpsv-frise { position: relative; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); } .tpsv-frise::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 2px; background: #C9D2DC; } .tpsv-frise__prog { position: absolute; left: 0; top: 23px; height: 2px; width: 0; background: var(--ardoise); transition: width .4s ease; } .tpsv-jalon { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 0 16px 0 0; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; } .tpsv-jalon i { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 16px; background: #FFF; box-shadow: inset 0 0 0 2px #B9C4D1; display: flex; align-items: center; justify-content: center; font-style: normal; font-family: Poppins, sans-serif; font-size: 13px; font-weight: 600; color: var(--nuit); transition: all .2s; } .tpsv-jalon b { font-family: Poppins, sans-serif; font-size: 16px; font-weight: 600; color: var(--nuit); } .tpsv-jalon span { font-size: 13.5px; color: var(--gris); margin-top: -10px; } .tpsv-jalon.fait i { background: var(--ardoise-pale); box-shadow: none; } .tpsv-jalon.actif i { background: var(--ardoise); color: #FFF; box-shadow: 0 0 0 8px rgba(84,104,127,.14); } .tpsv-jalon:hover i { box-shadow: inset 0 0 0 2px var(--ardoise); } .tpsv-jalon:focus-visible { outline: 2px solid var(--ardoise); outline-offset: 6px; border-radius: 12px; } .tpsv-panneau { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px; } .tpsv-panneau[hidden] { display: none; } .tpsv-panneau > div { border-radius: 36px; padding: clamp(32px, 3.4vw, 48px); animation: tpsvFondu .35s ease both; } .tpsv-panneau__texte { background: #FFF; border: 1px solid var(--filet); display: flex; flex-direction: column; gap: 14px; } .tpsv-panneau__texte h3 { font-size: clamp(22px, 2vw, 28px); } .tpsv-panneau__texte p { font-size: 16px; line-height: 1.75; } .tpsv-panneau__cle { background: var(--ardoise); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; } .tpsv-panneau__cle small { font-family: Poppins, sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--terra-pale); } .tpsv-panneau__cle strong { font-family: Poppins, sans-serif; font-size: clamp(40px, 4.2vw, 64px); font-weight: 500; letter-spacing: -.04em; color: #FFF8F4; line-height: 1; } .tpsv-panneau__cle p { font-size: 15px; line-height: 1.6; color: #E4E9EF; } /* Fonctionnement : chiffre clé commun, accordéon (B), grille (C), onglets verticaux (D) */ /* Fonctionnement, structure F : frise verticale, chiffre clé collant à gauche */ .tpsv-vfrise { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 96px); align-items: start; } .tpsv-vfrise__ecran { position: sticky; top: 170px; aspect-ratio: 1 / 1; max-height: 400px; border-radius: 40px; overflow: hidden; background: var(--rose); } .tpsv-vfrise__carte { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: clamp(28px, 2.8vw, 40px); opacity: 0; transform: translateY(28px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); } .tpsv-vfrise__carte.on { opacity: 1; transform: none; } .tpsv-vfrise__carte .n { position: absolute; top: clamp(24px, 2.4vw, 34px); left: 50%; translate: -50% 0; font-family: Poppins, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .08em; color: var(--terra); } .tpsv-vfrise__carte .n small { font-size: inherit; color: var(--libelle); opacity: .6; } .tpsv-vfrise__carte > div { display: flex; flex-direction: column; align-items: center; gap: 14px; } .tpsv-vfrise__carte > div small { font-family: Poppins, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--terra-fonce); background: #FFF; padding: 7px 16px; border-radius: 999px; } .tpsv-vfrise__carte strong { font-family: Poppins, sans-serif; font-size: clamp(44px, 4.4vw, 72px); font-weight: 500; letter-spacing: -.045em; line-height: .95; color: var(--nuit); } .tpsv-vfrise__carte em { font-style: normal; font-size: 17px; font-weight: 500; line-height: 1.5; color: var(--nuit); max-width: 280px; } .tpsv-vfrise__liste { position: relative; list-style: none; margin: 0; padding: 0; } .tpsv-vfrise__fil { position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; background: var(--filet); } .tpsv-vfrise__fil span { display: block; width: 100%; height: 0; background: var(--terra); transition: height .15s linear; } .tpsv-vfrise__etape { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 24px; padding-bottom: clamp(28px, 2.6vw, 40px); transition: opacity .4s; } .tpsv-vfrise__etape:last-child { padding-bottom: 0; } .tpsv-js .tpsv-vfrise__etape { opacity: .35; } .tpsv-js .tpsv-vfrise__etape.on { opacity: 1; } .tpsv-vfrise__noeud { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: #FFF; box-shadow: inset 0 0 0 1.5px var(--filet); color: var(--nuit); transition: background .3s, color .3s, box-shadow .3s; } .tpsv-vfrise__etape.on .tpsv-vfrise__noeud { background: var(--ardoise); color: #FFF8F4; box-shadow: 0 0 0 8px rgba(162,119,119,.14); } .tpsv-vfrise__etape > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 2px; } .tpsv-vfrise__etape h3 { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.25; } .tpsv-vfrise__etape p { font-size: 15.5px; line-height: 1.7; max-width: 600px; } .tpsv-vfrise__carte strong.mot { font-size: clamp(34px, 3.2vw, 48px); line-height: 1.05; } .tpsv-vfrise__etape .tpsv-cle { display: none; } /* Fonctionnement, structure E : pastilles accolées + panneau */ .tpsv-parcours { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: 32px; background: var(--rose); } .tpsv-parcours .tpsv-jalon { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 16px 18px; border-radius: 26px; transition: background .2s, box-shadow .2s; } .tpsv-parcours .tpsv-jalon i { grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 50%; box-shadow: none; background: #FFF; font-size: 12px; } .tpsv-parcours .tpsv-jalon b { font-size: 15px; line-height: 1.25; } .tpsv-parcours .tpsv-jalon span { margin: 0; font-size: 12.5px; line-height: 1.3; } .tpsv-parcours .tpsv-jalon:hover { background: rgba(255,255,255,.6); } .tpsv-parcours .tpsv-jalon:hover i { box-shadow: inset 0 0 0 1.5px var(--terra); } .tpsv-parcours .tpsv-jalon.fait i { background: var(--terra-pale); color: var(--nuit); } .tpsv-parcours .tpsv-jalon.actif { background: #FFF; } .tpsv-parcours .tpsv-jalon.actif i { background: var(--ardoise); color: #FFF; box-shadow: none; } .tpsv-parcours__panneau { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-top: 16px; padding: clamp(28px, 3.2vw, 44px); border-radius: 36px; background: #FFF; border: 1px solid var(--filet); animation: tpsvFondu .35s ease both; } .tpsv-parcours__panneau[hidden] { display: none; } .tpsv-parcours__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 640px; } .tpsv-parcours__texte h3 { font-size: clamp(22px, 2vw, 28px); } .tpsv-parcours__texte p { font-size: 16px; line-height: 1.75; } .tpsv-parcours__suite { margin-top: 8px; padding: 0; background: none; border: 0; cursor: pointer; font: 500 14.5px Poppins, sans-serif; color: var(--terra); border-bottom: 1px solid currentColor; } .tpsv-parcours__suite:hover { color: var(--nuit); } .tpsv-parcours__panneau .tpsv-cle { flex-shrink: 0; align-self: flex-end; } .tpsv-cle { display: inline-flex; flex-direction: column; gap: 4px; align-self: flex-start; padding: 16px 20px; border-radius: 20px; background: var(--ardoise); color: #FFF8F4; min-width: 170px; } .tpsv-cle small { font-family: Poppins, sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--terra-pale); } .tpsv-cle b { font-family: Poppins, sans-serif; font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; } .tpsv-cle em { font-style: normal; font-size: 13px; color: #E4E9EF; } .tpsv-vie-acc summary { padding: 22px 0; } .tpsv-vie-acc__tete { display: flex; align-items: center; gap: 18px; } .tpsv-vie-acc__tete i, .tpsv-vie-carte__tete i, .tpsv-vtabs__liste i { flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-style: normal; font-family: Poppins, sans-serif; font-size: 13px; font-weight: 600; background: var(--voile); color: var(--nuit); } .tpsv-vie-acc details[open] .tpsv-vie-acc__tete i { background: var(--ardoise); color: #FFF; } .tpsv-vie-acc__tete span { display: flex; flex-direction: column; gap: 2px; } .tpsv-vie-acc__tete em { font-style: normal; font-family: Manrope, sans-serif; font-size: 14px; font-weight: 400; color: var(--gris); } .tpsv-vie-acc__corps { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; padding: 0 34px 28px 62px; animation: tpsvFondu .3s ease both; } .tpsv-vie-acc__corps h3 { font-size: 19px; margin-bottom: 8px; } .tpsv-vie-acc__corps p { font-size: 16px; line-height: 1.8; color: var(--texte); } .tpsv-vie-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .tpsv-vie-carte { display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 30px; background: #FFF; border: 1px solid var(--filet); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; } .tpsv-vie-carte:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -44px rgba(45,60,80,.5); } .tpsv-vie-carte__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .tpsv-vie-carte__tete span { font-family: Poppins, sans-serif; font-size: 13px; font-weight: 500; color: var(--gris); } .tpsv-vie-carte h3 { font-size: 19px; } .tpsv-vie-carte p { font-size: 15px; line-height: 1.7; color: var(--texte); margin-bottom: auto; } .tpsv-vie-carte .tpsv-cle { margin-top: 10px; padding: 12px 16px; min-width: 0; } .tpsv-vie-carte .tpsv-cle b { font-size: 22px; } .tpsv-vtabs { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px; align-items: stretch; } .tpsv-vtabs__liste { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 32px; background: var(--ardoise); } .tpsv-vtabs__liste button { display: flex; align-items: center; gap: 14px; padding: 12px; border: 0; border-radius: 20px; background: none; cursor: pointer; text-align: left; font-family: Poppins, sans-serif; font-size: 16px; font-weight: 600; color: #FFF8F4; transition: background .2s; } .tpsv-vtabs__liste button:hover { background: rgba(255,248,244,.08); } .tpsv-vtabs__liste button.on { background: #FFF8F4; color: var(--nuit); } .tpsv-vtabs__liste i { background: rgba(255,248,244,.14); color: #FFF8F4; width: 40px; height: 40px; } .tpsv-vtabs__liste button.on i { background: var(--ardoise); } .tpsv-vtabs__liste span { display: flex; flex-direction: column; gap: 2px; } .tpsv-vtabs__liste em { font-style: normal; font-family: Manrope, sans-serif; font-size: 13px; font-weight: 400; opacity: .8; } .tpsv-vtabs__liste button:focus-visible { outline: 2px solid #FFF8F4; outline-offset: 2px; } .tpsv-vtabs__panneau { display: flex; flex-direction: column; gap: 16px; justify-content: center; padding: clamp(32px, 4vw, 56px); border-radius: 32px; background: #FFF; border: 1px solid var(--filet); animation: tpsvFondu .35s ease both; } .tpsv-vtabs__panneau[hidden] { display: none; } .tpsv-vtabs__panneau h3 { font-size: clamp(22px, 2vw, 28px); } .tpsv-vtabs__panneau p { font-size: 16.5px; line-height: 1.8; color: var(--texte); max-width: 60ch; } .tpsv-acc { position: relative; border-left: 2px solid var(--filet); margin-top: 6px; } .tpsv-acc details { position: relative; padding: 0 0 0 26px; } .tpsv-acc details::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: transparent; transition: background .25s; } .tpsv-acc details[open]::before { background: var(--ardoise); width: 4px; left: -3px; } .tpsv-acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; font-family: Poppins, sans-serif; font-size: clamp(17px, 1.4vw, 19px); font-weight: 600; color: var(--titre); } .tpsv-acc summary::-webkit-details-marker { display: none; } .tpsv-acc summary svg { flex-shrink: 0; color: var(--nuit); transition: transform .25s; } .tpsv-acc details[open] summary svg { transform: rotate(180deg); } .tpsv-acc summary:hover { color: var(--terra-fonce); } .tpsv-acc details p { padding: 0 34px 22px 0; font-size: 16px; line-height: 1.8; color: var(--texte); animation: tpsvFondu .3s ease both; } .tpsv-acc summary:focus-visible { outline: 2px solid var(--nuit); outline-offset: 4px; border-radius: 6px; } /* Supports : comparatif en deux colonnes alignées, bon à savoir, modes de gestion */ .tpsv-comp { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 2fr); gap: clamp(16px, 1.8vw, 24px); padding: clamp(18px, 2.6vw, 36px); border-radius: 48px; background: #566780; box-shadow: 0 40px 80px -50px rgba(39,51,67,.55); } .tpsv-comp .tpsv-tete { grid-column: 1 / -1; margin: 0; padding: clamp(14px, 2vw, 28px) clamp(14px, 2vw, 28px) clamp(8px, 1vw, 14px); } .tpsv-comp .tpsv-eyebrow { color: #FBE3DF; } .tpsv .tpsv-comp h2.tpsv-h2 { color: #FFF8F4; } .tpsv-comp__note { grid-column: 1 / -1; display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 24px; padding: clamp(22px, 2.4vw, 32px) clamp(24px, 3vw, 44px); border-radius: 32px; background: #6E8098; } .tpsv-comp__note .tpsv-eyebrow { color: #FBE3DF; } .tpsv .tpsv-comp__note p { font-size: 16.5px; line-height: 1.75; color: #FFF8F4; max-width: 900px; } .tpsv-comp__note--titre { grid-template-columns: minmax(0, 1fr); gap: 14px; } .tpsv .tpsv-comp__note--titre p { max-width: none; } /* note à intertitre : texte sur toute la largeur de l'encadré */ .tpsv .tpsv-comp__note h3 { margin: 0; font-family: Poppins, sans-serif; font-size: clamp(19px, 1.6vw, 22px); font-weight: 600; line-height: 1.25; color: #FFF8F4; } .tpsv .tpsv-comp__note p + p { margin-top: 12px; } .tpsv .tpsv-comp__note strong { color: #FFF8F4; font-weight: 700; } .tpsv .tpsv-comp__note a { color: #FBE3DF; font-weight: 600; border-bottom: 1px solid rgba(251,227,223,.6); } .tpsv .tpsv-comp__note a:hover { color: #FFF8F4; } .tpsv-comp__pilotes { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 36px; padding: clamp(28px, 3vw, 44px) clamp(14px, 2vw, 28px) clamp(16px, 2vw, 24px); } .tpsv .tpsv-comp__pilotes h3 { font-size: clamp(22px, 2vw, 28px); color: #FFF8F4; } .tpsv-modes { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); } .tpsv-modes > div { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 4px clamp(20px, 2.6vw, 40px); border-left: 1px solid rgba(255,248,244,.18); } .tpsv-modes > div:first-child { padding-left: 0; border-left: 0; } .tpsv-modes .tete { display: flex; align-items: center; gap: 14px; } .tpsv-modes .ico { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 13px; background: #FFF8F4; color: var(--nuit); } .tpsv-modes .qui { margin-bottom: 4px; font-family: Poppins, sans-serif; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: rgba(251,227,223,.16); color: #FBE3DF; } .tpsv .tpsv-modes h4 { font-size: 19px; color: #FFF8F4; } .tpsv .tpsv-modes p { font-size: 15px; line-height: 1.7; color: #D5DDE6; } .tpsv-coquille { padding: clamp(28px, 4vw, 64px); border-radius: 48px; background: #FFF8F4; } .tpsv-comp__intro { display: flex; flex-direction: column; justify-content: center; gap: 32px; padding: clamp(24px, 2.4vw, 36px); border-radius: 32px; } /* Alignement : un seul retrait de texte pour toute la fiche (celui de « Notre accompagnement »). Les blocs colorés débordent de ce retrait pour que leur contenu tombe sur la même ligne. */ :root { --tpsv-in: clamp(0px, 4vw - 16px, 64px); } .tpsv-section { padding-inline: var(--tpsv-in); } .tpsv-section.tpsv-section--simu { padding-top: 0 !important; } .tpsv-section--simu > .tpsv-calc:first-child { margin-top: clamp(72px, 8vw, 120px); } .tpsv-definition .tpsv-inner { padding-inline: var(--tpsv-in); } .tpsv-comp, .tpsv-calc, .tpsv-coquille { margin-inline: calc(-1 * var(--tpsv-in)); padding-inline: max(var(--tpsv-in), 18px); } .tpsv-comp .tpsv-tete, .tpsv-comp__pilotes, .tpsv-comp__intro { padding-inline: 0; } .tpsv-comp__intro p:first-child { font-family: Poppins, sans-serif; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; letter-spacing: -.012em; color: #FFF8F4; } .tpsv-comp__duel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(16px, 1.8vw, 24px); } .tpsv-comp__col { grid-row: span var(--s, 5); display: grid; grid-template-rows: subgrid; row-gap: 0; padding: 14px clamp(24px, 2.4vw, 34px) 12px; border-radius: 32px; background: #FFF; box-shadow: 0 1px 2px rgba(39,51,67,.05), 0 14px 30px -22px rgba(39,51,67,.3); } .tpsv-comp__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0 12px; } .tpsv-comp__tete h3 { font-size: 18px; } .tpsv-comp__tete span { flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #FBEDE4; color: var(--nuit); } .tpsv-comp__col--b .tpsv-comp__tete span { background: rgba(162,119,119,.12); color: var(--terra); } .tpsv-comp__ligne { display: flex; flex-direction: column; gap: 3px; padding: 11px 0; border-top: 1px solid #5666807D; } .tpsv-comp__ligne span { font-family: Poppins, sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--terra); } .tpsv-comp__ligne p { font-size: 15.5px; line-height: 1.55; color: var(--nuit); } /* Fiscalité */ .tpsv-fisc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6.5vw, 120px); align-items: start; } .tpsv-fisc__texte { padding-top: 8px; } .tpsv-taux { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .tpsv-taux li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; background: rgba(255,248,244,.06); opacity: .5; transition: opacity .25s, background .25s; } .tpsv-taux li.on { opacity: 1; background: rgba(255,248,244,.13); } .tpsv-taux strong { font-family: Poppins, sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: #FFF8F4; white-space: nowrap; } .tpsv-taux span { font-family: Poppins, sans-serif; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: #F3CFCA; } .tpsv-fisc--seul { grid-template-columns: minmax(0, 1fr); } .tpsv-regles { display: flex; flex-direction: column; gap: 30px; align-self: center; } .tpsv-regle { display: flex; flex-direction: column; gap: 12px; } .tpsv-regle + .tpsv-regle { padding-top: 30px; border-top: 1px solid #EFE9E2; } .tpsv-regle__tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: nowrap; } .tpsv-regle strong { font-family: Poppins, sans-serif; font-size: clamp(30px, 2.6vw, 38px); font-weight: 500; letter-spacing: -.04em; color: var(--nuit); line-height: 1; white-space: nowrap; } .tpsv-regle p { font-size: 14.5px; line-height: 1.6; color: var(--texte); } .tpsv-pastille.tpsv-pastille--cuir { background: linear-gradient(120deg, #A27777, #C08D80); color: #FFF; white-space: nowrap; } /* Fiscalité, structures B et C : simulateur pleine largeur, texte en trois colonnes */ .tpsv-fisc-acc { max-width: 900px; } .tpsv .tpsv-fisc-acc summary h3 { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; } /* Tableaux des fiches : en-tête plein, lignes alternées, texte lisible (contraste AA) */ :is(.tpsv-fisc-acc, .tpsv-riche) table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 8px 0 24px; font-size: 15.5px; line-height: 1.6; border: 1px solid var(--filet); border-radius: 22px; overflow: hidden; background: #FFF; } :is(.tpsv-fisc-acc, .tpsv-riche) caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } :is(.tpsv-fisc-acc, .tpsv-riche) :is(th, td) { padding: 18px 22px; text-align: left; vertical-align: top; } :is(.tpsv-fisc-acc, .tpsv-riche) thead th { font-family: Poppins, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #FFF8F4; background: var(--ardoise); padding-top: 16px; padding-bottom: 16px; } :is(.tpsv-fisc-acc, .tpsv-riche) tbody tr:nth-child(even) > * { background: #F4F7FA; } /* bleu clair, sur tous les tableaux */ :is(.tpsv-fisc-acc, .tpsv-riche) tbody tr + tr > * { border-top: 1px solid var(--filet); } :is(.tpsv-fisc-acc, .tpsv-riche) tbody :is(th, td:first-child) { width: 30%; font-family: Poppins, sans-serif; font-size: 15.5px; font-weight: 600; color: var(--nuit); } :is(.tpsv-fisc-acc, .tpsv-riche) tbody td { color: var(--texte); } :is(.tpsv-fisc-acc, .tpsv-riche) tbody th + td, :is(.tpsv-fisc-acc, .tpsv-riche) tbody td:first-child + td { box-shadow: inset 1px 0 0 var(--filet); } @media (max-width: 640px) { :is(.tpsv-fisc-acc, .tpsv-riche) thead { display: none; } :is(.tpsv-fisc-acc, .tpsv-riche) :is(tbody, tr, th, td) { display: block; width: auto; } :is(.tpsv-fisc-acc, .tpsv-riche) tbody :is(th, td:first-child) { width: auto; padding-bottom: 4px; } :is(.tpsv-fisc-acc, .tpsv-riche) tbody :is(th, td) + td { padding-top: 4px; box-shadow: none; } :is(.tpsv-fisc-acc, .tpsv-riche) tbody tr + tr > * { border-top: 0; } :is(.tpsv-fisc-acc, .tpsv-riche) tbody tr + tr { border-top: 1px solid var(--filet); } :is(.tpsv-fisc-acc, .tpsv-riche) tbody td[data-tpsv-col]::before { content: attr(data-tpsv-col); display: block; margin-bottom: 2px; font-family: Poppins, sans-serif; font-size: 13px; font-weight: 600; color: var(--libelle); } } .tpsv-fisc__gauche { display: flex; flex-direction: column; gap: 24px; } .tpsv .tpsv-fisc__intro { max-width: 900px; font-size: 17px; line-height: 1.75; color: var(--nuit); font-weight: 500; } /* Fiscalité en onglets (volets à intertitres + chiffres clés, sans photo ni simulateur) : pastilles, tableau à filets, carte bleu nuit collante */ .tpsv-onglets { display: grid; grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; } .tpsv-onglets [data-tpsv-vtabs] { display: flex; flex-direction: column; align-self: stretch; } .tpsv-onglets__photo { flex: 1 1 auto; min-height: 220px; margin-top: 28px; border-radius: 28px; overflow: hidden; } .tpsv-onglets__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .single-solution-epargner-investir .tpsv-onglets__photo img { object-position: 50% 32%; } .single-solution-investir-immobilier .tpsv-onglets__photo img { object-position: 52% 22%; } /* visages entiers */ .single-solution-optimiser-sa-fiscalite .tpsv-onglets__photo img { object-position: 55% 18%; } /* visages entiers */ @media (max-width: 760px) { .tpsv-onglets__photo { min-height: 200px; } } .tpsv-onglets .tpsv-fisc__intro { margin: 0 0 28px; } .tpsv-onglets__liste { display: inline-flex; align-self: flex-start; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 999px; background: var(--voile); } .tpsv-onglets__liste button { border: 0; cursor: pointer; padding: 8px 13px; border-radius: 999px; background: none; font-family: Poppins, sans-serif; font-size: 13.5px; font-weight: 600; line-height: 1.2; color: var(--ardoise); transition: background .25s, color .25s; } .tpsv-onglets__liste button.on { background: var(--ardoise); color: var(--creme); } .tpsv-onglets__liste button:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; } .tpsv-onglets__panneau { margin-top: 28px; } .tpsv-onglets__panneau p { max-width: none; line-height: 1.62; } /* interligne resserré : la photo trouve sa place sous le texte */ /* le texte occupe toute la colonne : pas de trou à droite */ .tpsv-onglets__panneau table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 4px 0 20px; font-size: 14.5px; line-height: 1.5; } .tpsv-onglets__panneau caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .tpsv-onglets__panneau th, .tpsv-onglets__panneau td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid #EFE9E2; } .tpsv-onglets__panneau thead th { font-family: Poppins, sans-serif; font-size: 12px; font-weight: 600; line-height: 1.35; letter-spacing: .08em; text-transform: uppercase; color: #A99A8E; border-bottom-color: var(--filet); } .tpsv-onglets__panneau tbody th { font-family: Poppins, sans-serif; font-weight: 600; color: var(--nuit); width: 26%; } .tpsv-chiffres { position: sticky; top: 140px; display: flex; flex-direction: column; padding: clamp(26px, 3vw, 40px); border-radius: 36px; background: var(--ardoise); color: var(--creme); } .tpsv .tpsv-chiffres .tpsv-eyebrow { color: var(--terra-pale); margin-bottom: 18px; } .tpsv-chiffres__ligne { display: flex; flex-direction: column; gap: 6px; padding: 20px 0; border-top: 1px solid rgba(255,248,244,.14); } .tpsv-chiffres__ligne b { margin-bottom: 4px; font-family: Poppins, sans-serif; font-size: clamp(30px, 2.6vw, 38px); font-weight: 600; line-height: 1; letter-spacing: -.03em; color: #FFFFFF; } .tpsv-chiffres__ligne span { font-family: Poppins, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--terra-pale); } .tpsv-chiffres__ligne small { font-size: 14px; line-height: 1.45; color: #D9E0E8; } @media (max-width: 900px) { .tpsv-onglets { grid-template-columns: minmax(0, 1fr); } .tpsv-chiffres { position: static; } .tpsv-onglets__panneau table { font-size: 13.5px; } .tpsv-onglets__panneau th, .tpsv-onglets__panneau td { padding: 12px 10px; } } .tpsv-fisc--photo { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: clamp(32px, 4vw, 64px); align-items: center; } /* texte 70 %, photo 30 % */ .tpsv-fisc--photo .tpsv-decoupe { order: 2; } .tpsv-libre-photo { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: clamp(32px, 4vw, 64px); align-items: center; } .tpsv-libre-photo .tpsv-riche { max-width: none; } .tpsv-libre-photo--gauche { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); } .tpsv-libre-photo--gauche .tpsv-decoupe { order: 0; } .tpsv .tpsv-trans-chapo { margin-bottom: 20px; } .tpsv .tpsv-trans-chapo p { font-size: 17px; line-height: 1.75; font-weight: 500; color: var(--nuit); } .tpsv-riche.tpsv-libre-suite { max-width: 900px; margin-top: clamp(28px, 3vw, 40px); } /* jamais de texte en colonnes */ .tpsv-decoupe { position: relative; width: 100%; aspect-ratio: 1.25; } .tpsv-fisc-acc .tpsol-texte { padding: 0 34px 24px 0; animation: tpsvFondu .3s ease both; } .tpsv .tpsv-fisc-acc .tpsol-texte p { font-size: 16px; line-height: 1.8; padding: 0; } /* Sections rédigées (PER…) : texte libre lisible, tableaux et listes */ .tpsv-riche { max-width: 900px; } /* Fiche SCPI, SCI et OPCI : fonds bleu ardoise plutôt que bleu nuit */ .tpsv--scpi-sci-opci .tpsv-chiffres, .tpsv--scpi-sci-opci .tpsv-cle, .tpsv--scpi-sci-opci .tpsv-riche ul.tp-chiffres li:nth-child(2) { background: #566780; } /* Cartes chiffrées (ul.tp-chiffres) : un grand chiffre, un libellé, une précision ; la 2e carte en bleu nuit */ .tpsv-riche ul.tp-chiffres { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 8px 0 28px; padding: 0; } .tpsv-riche ul.tp-chiffres.tp-chiffres--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* six cartes : deux rangs complets */ @media (max-width: 960px) { .tpsv-riche ul.tp-chiffres.tp-chiffres--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .tpsv-riche ul.tp-chiffres.tp-chiffres--3 { grid-template-columns: minmax(0, 1fr); } } .tpsv-riche ul.tp-chiffres li { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: clamp(22px, 2.4vw, 30px); border-radius: 32px; background: var(--voile); font-size: 14.5px; line-height: 1.5; color: var(--corps, #3E4A5A); } .tpsv-riche ul.tp-chiffres li::before { display: none; } .tpsv .tpsv-riche ul.tp-chiffres li strong { font-family: Poppins, sans-serif; font-size: clamp(36px, 3.6vw, 48px); font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--nuit); margin-bottom: 6px; } .tpsv .tpsv-riche ul.tp-chiffres li span { font-family: Poppins, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--terra-fonce); } .tpsv-riche ul.tp-chiffres li:nth-child(2) { background: var(--ardoise); color: #D9E0E8; } .tpsv .tpsv-riche ul.tp-chiffres li:nth-child(2) strong { color: #FFFFFF; } .tpsv .tpsv-riche ul.tp-chiffres li:nth-child(2) span { color: var(--terra-pale); } .tpsv .tpsv-bulle--clair .tpsv-riche ul.tp-chiffres li:nth-child(odd) { background: #FFFFFF; } /* Grille de cartes (ul.tp-lignes.tp-cartes) : cartes extensibles qui remplissent toujours le rang (jamais de trou), icône du thème en haut */ .tpsv-riche ul.tp-lignes.tp-cartes { display: flex; flex-wrap: wrap; gap: 12px; border-top: 0; } .tpsv-riche ul.tp-lignes.tp-cartes li { flex: 1 1 280px; display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; border: 0; border-radius: 26px; background: #485B71; color: #E1E7EE; font-size: 14.5px; line-height: 1.6; transition: transform .35s cubic-bezier(.2,.8,.2,1), background .35s; } .tpsv-riche ul.tp-lignes.tp-cartes li:hover { transform: translateY(-6px); background: #42546A; } .tpsv .tpsv-riche ul.tp-lignes.tp-cartes li strong { flex-direction: column; align-items: flex-start; gap: 14px; font-size: 18px; line-height: 1.25; color: #FFF8F4; } .tpsv-riche ul.tp-lignes.tp-cartes li strong::before { position: static; top: auto; left: auto; width: 22px; height: 22px; border-radius: 0; background-color: transparent; background-size: 22px; } /* Icône fine et blanche à côté du titre de la carte */ .tpsv-riche ul.tp-lignes.tp-cartes li strong, .tpsv .tpsv-riche ul.tp-lignes.tp-cartes li strong { display: flex; flex-direction: row; align-items: center; gap: 12px; } .tpsv-riche ul.tp-lignes.tp-cartes li strong::before { display: block; flex-shrink: 0; width: 21px; height: 21px; background-size: 21px; background-repeat: no-repeat; background-position: center; filter: brightness(0) invert(1); opacity: 0.92; } /* Cartes et chiffres clés : le bloc occupe toute la largeur de la section (plus de vide à droite), le texte courant garde sa largeur de lecture */ .tpsv-section .tpsv-riche:has(> ul.tp-lignes.tp-cartes), .tpsv-section .tpsv-riche:has(> ul.tp-chiffres) { max-width: none; } .tpsv-section .tpsv-riche:has(> ul.tp-lignes.tp-cartes) > :is(p:not(.tp-encadre), h3, h4, ol:not(.tp-escalier), ul:not(.tp-cartes):not(.tp-chiffres):not(.tp-criteres):not(.tp-tuiles):not(.tp-lignes)) { max-width: 900px; } /* Lignes à filets (ul.tp-lignes) : pleine largeur, icône dans la gouttière, libellé puis texte alignés ; encadré bleu voile juste après */ .tpsv-riche ul.tp-lignes { list-style: none; margin: 10px 0 24px; padding: 0; border-top: 1px solid var(--filet); } .tpsv-riche ul.tp-lignes li { position: relative; margin: 0; padding: 20px 0 20px 64px; border-bottom: 1px solid var(--filet); font-size: 15.5px; line-height: 1.62; color: var(--texte); } .tpsv-riche ul.tp-lignes li strong { display: block; margin-bottom: 6px; font-family: Poppins, sans-serif; font-size: 16.5px; font-weight: 600; line-height: 1.3; color: var(--nuit); } .tpsv-riche ul.tp-lignes li strong::before { content: ""; position: absolute; left: 0; top: 21px; width: 44px; height: 44px; border-radius: 14px; background: var(--ardoise) center / 22px no-repeat; } .tpsv-riche ul.tp-lignes li.tp-ico-immeuble strong::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C2BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V5.5A1.5 1.5 0 0 1 6.5 4h7A1.5 1.5 0 0 1 15 5.5V20M15 10h3.5a1.5 1.5 0 0 1 1.5 1.5V20M3.5 20h17M8.5 8h3M8.5 12h3M8.5 16h3'/%3E%3C/svg%3E"); } .tpsv-riche ul.tp-lignes li.tp-ico-associes strong::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C2BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.5' r='3'/%3E%3Cpath d='M3.5 19c.8-3.2 2.9-5 5.5-5s4.7 1.8 5.5 5'/%3E%3Ccircle cx='16.5' cy='9.5' r='2.4'/%3E%3Cpath d='M15.5 14.2c2.3-.4 4.3 1.1 5 4.3'/%3E%3C/svg%3E"); } .tpsv-riche ul.tp-lignes li.tp-ico-contrat strong::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C2BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h7l4 4V19a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 6 19V5a1.5 1.5 0 0 1 1-1.5z'/%3E%3Cpath d='M14 3.5V8h4M9 12.5h6M9 16h4'/%3E%3C/svg%3E"); } .tpsv-riche ul.tp-lignes li.tp-ico-balance strong::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C2BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M8 20h8M5 7h14'/%3E%3Cpath d='M5 7l-2.5 6a2.5 2.5 0 0 0 5 0zM19 7l-2.5 6a2.5 2.5 0 0 0 5 0z'/%3E%3C/svg%3E"); } .tpsv-riche ul.tp-lignes li.tp-ico-mallette strong::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C2BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='7.5' width='17' height='12' rx='2.5'/%3E%3Cpath d='M9 7.5V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v1.5M3.5 13h17'/%3E%3C/svg%3E"); } .tpsv-riche ul.tp-lignes li.tp-ico-strates strong::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C2BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l8 4-8 4-8-4z'/%3E%3Cpath d='M4 12l8 4 8-4M4 16l8 4 8-4'/%3E%3C/svg%3E"); } .tpsv-riche ul.tp-lignes li.tp-ico-pourcent strong::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C2BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5L5 19'/%3E%3Ccircle cx='7' cy='7' r='2.5'/%3E%3Ccircle cx='17' cy='17' r='2.5'/%3E%3C/svg%3E"); } .tpsv-riche ul.tp-lignes li.tp-ico-etoile strong::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C2BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.2 5.8L20 11l-5.8 2.2L12 19l-2.2-5.8L4 11l5.8-2.2z'/%3E%3C/svg%3E"); } .tpsv-riche ul.tp-lignes li.tp-ico-horloge strong::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C2BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); } .tpsv-riche ul.tp-lignes li.tp-ico-retraite strong::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C2BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 18h16M7 18a5 5 0 0 1 10 0M12 6v3M5.6 9.6l1.8 1.8M18.4 9.6l-1.8 1.8'/%3E%3C/svg%3E"); } .tpsv-riche ul.tp-lignes li.tp-ico-cadeau strong::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C2BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='9' width='16' height='11' rx='2'/%3E%3Cpath d='M3.5 9h17M12 9v11M12 9c-1.5-3-5-3.5-5-1.2C7 9 12 9 12 9zM12 9c1.5-3 5-3.5 5-1.2C17 9 12 9 12 9z'/%3E%3C/svg%3E"); } .tpsv-riche ul.tp-lignes li.tp-ico-devises strong::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C2BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='5'/%3E%3Cpath d='M13.9 10.1a5 5 0 1 1-3.8 3.8'/%3E%3C/svg%3E"); } .tpsv-riche ul.tp-lignes li.tp-ico-globe strong::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C2BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M4 12h16M12 4c2.4 2.4 2.4 13.6 0 16M12 4c-2.4 2.4-2.4 13.6 0 16'/%3E%3C/svg%3E"); } .tpsv .tpsv-riche ul.tp-lignes + p { padding: 18px 22px; border-radius: 24px; background: var(--voile); color: var(--nuit); } /* Bulle coquille d'œuf (libre_bandeau = clair) : arrondie, pas pleine largeur, textes sombres, encadré blanc */ .tpsv .tpsv-bulle.tpsv-bulle--clair { margin-inline: calc(-1 * var(--tpsv-in)); padding: clamp(36px, 4.4vw, 64px) max(var(--tpsv-in), 24px); border-radius: 48px; background: #FFF8F4; color: var(--texte); } .tpsv .tpsv-bulle.tpsv-bulle--clair .tpsv-eyebrow { color: #A27777; } .tpsv .tpsv-bulle.tpsv-bulle--clair h2.tpsv-h2 { color: var(--titre); } .tpsv .tpsv-bulle.tpsv-bulle--clair .tpsol-texte :is(p, ul, ol) { color: var(--texte); } .tpsv .tpsv-bulle.tpsv-bulle--clair .tpsol-texte strong { color: var(--nuit); } .tpsv .tpsv-bulle.tpsv-bulle--clair .tpsol-texte a { color: var(--terra-fonce); } .tpsv-bulle--clair .tpsv-riche ul.tp-lignes, .tpsv-bulle--clair .tpsv-riche ul.tp-lignes li { border-color: var(--filet); } .tpsv .tpsv-bulle--clair .tpsv-riche ul.tp-lignes + p { background: #FFF; } .tpsv-bulle--clair .tpsv-riche { max-width: none; } @media (max-width: 760px) { .tpsv-riche ul.tp-lignes { grid-template-columns: minmax(0, 1fr); } } /* En-tête suivi directement d'un intertitre : espace resserré */ .tpsv-tete:has(+ .tpsv-libre-photo), .tpsv-tete:has(+ .tpsv-riche > h3:first-child) { margin-bottom: clamp(20px, 2vw, 30px); } .tpsv-libre-photo .tpsv-riche > h3:first-child { margin-top: 0; } /* Blocs pleine largeur (2026-10-23) : pas de vide à droite, moins de défilement. Le texte courant reste à 900 px. */ .tpsv-section .tpsv-riche:has(> :is(ul.tp-lignes, ul.tp-tuiles, ul.tp-criteres, ul.tp-fleches, div.tp-duo, div.tpsv-trio70)) { max-width: none; } .tpsv-section .tpsv-riche:has(> :is(ul.tp-lignes, ul.tp-tuiles, ul.tp-criteres, ul.tp-fleches, div.tp-duo, div.tpsv-trio70)) > p:not(.tp-encadre):not(ul + p) { max-width: 900px; } /* Lignes à filets sur deux colonnes, resserrées ; un dernier élément seul prend toute la largeur */ .tpsv-riche ul.tp-lignes:not(.tp-cartes) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 3.6vw, 56px); margin: 4px 0 20px; border-top: 0; } .tpsv-riche ul.tp-lignes:not(.tp-cartes) li { padding: 15px 0 15px 56px; border-top: 1px solid var(--filet); border-bottom: 0; font-size: 15px; line-height: 1.55; } .tpsv-riche ul.tp-lignes:not(.tp-cartes) li strong { margin-bottom: 3px; font-size: 16px; } .tpsv-riche ul.tp-lignes:not(.tp-cartes) li strong::before { top: 16px; width: 40px; height: 40px; border-radius: 12px; background-size: 20px; } .tpsv-riche ul.tp-lignes:not(.tp-cartes) li:last-child:nth-child(odd) { grid-column: 1 / -1; } .tpsv-riche ul.tp-lignes li.tp-ico-courbe strong::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C2BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17l5-6 4 3 6-8'/%3E%3C/svg%3E"); } /* Encadré bleu voile pleine largeur (p.tp-encadre) */ .tpsv .tpsv-section .tpsv-riche p.tp-encadre { max-width: none; padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.6vw, 34px); border-radius: 28px; background: #54687F; color: #FFFFFF; } .tpsv .tpsv-section .tpsv-riche p.tp-encadre strong { color: #D9A6A6; } /* Critères numérotés (ul.tp-criteres) : grille de trois aplats coquille d'œuf */ .tpsv-riche ul.tp-criteres { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(28px, 3.6vw, 56px); margin: 4px 0 24px; padding: 0; counter-reset: tpcrit; } .tpsv-riche ul.tp-criteres li { counter-increment: tpcrit; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 16px 0 18px; border-top: 1px solid var(--filet); font-size: 15px; line-height: 1.5; color: var(--texte); } .tpsv-riche ul.tp-criteres li::before { content: counter(tpcrit, decimal-leading-zero); font-family: Poppins, sans-serif; font-size: clamp(24px, 2.2vw, 30px); font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--terra); } .tpsv-riche ul.tp-criteres.tp-criteres--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tpsv-riche ul.tp-criteres.tp-criteres--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .tpsv-riche ul.tp-criteres li span b { display: block; margin-bottom: 2px; font-family: Poppins, sans-serif; font-size: 15px; font-weight: 600; color: var(--nuit); } /* Grille à cocher (ul.tp-criteres.tp-check) : carte bleu ardoise, chaque point se coche, jauge de progression (js/solution.js) */ .tpsv .tpsv-riche ul.tp-criteres.tp-check { gap: 10px; padding: clamp(20px, 2.4vw, 32px); border-radius: 36px; background: #54687F; } .tpsv .tpsv-riche ul.tp-check li { flex-direction: row; align-items: flex-start; gap: 12px; padding: 16px 18px; border: 0; border-radius: 20px; background: rgba(255,255,255,.08); color: #FFFFFF; cursor: pointer; user-select: none; transition: background .25s, transform .25s; } .tpsv .tpsv-riche ul.tp-check li:hover { background: rgba(255,255,255,.14); } .tpsv .tpsv-riche ul.tp-check li:focus-visible { outline: 2px solid #D9A6A6; outline-offset: 2px; } .tpsv .tpsv-riche ul.tp-check li::before { content: ""; flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; border: 2px solid #FFFFFF; border-radius: 50%; transition: background .25s, border-color .25s; } .tpsv .tpsv-riche ul.tp-check li.ok { background: rgba(255,255,255,.18); } .tpsv .tpsv-riche ul.tp-check li.ok::before { border-color: #D9A6A6; background: #D9A6A6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; } .tpsv .tpsv-riche ul.tp-check li.tp-check__tete { grid-column: 1 / -1; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 0 4px 8px; background: none; cursor: default; } .tpsv .tpsv-riche ul.tp-check li.tp-check__tete::before { display: none; } .tp-check__tete span { font-family: Poppins, sans-serif; font-size: 15px; font-weight: 600; color: #FFFFFF; } .tp-check__tete em { display: flex; align-items: center; gap: 12px; font-family: Poppins, sans-serif; font-size: 13px; font-style: normal; font-weight: 600; color: #D9A6A6; } .tp-check__tete i { position: relative; width: clamp(120px, 16vw, 220px); height: 6px; border-radius: 999px; background: rgba(255,255,255,.22); overflow: hidden; } .tp-check__tete i::after { content: ""; position: absolute; inset: 0; width: var(--p, 0%); border-radius: inherit; background: #D9A6A6; transition: width .4s cubic-bezier(.2,.8,.2,1); } /* Escalier (ol.tp-escalier) : même dessin que « Notre méthode » de l'accueil — colonnes en sous-grille (titres alignés), marches de 22 px, connecteurs point-tiret, du coquille d'œuf au bleu ardoise. li : em (pied), strong (titre), span et p (texte). */ .tpsv-section .tpsv-riche:has(> ol.tp-escalier) { max-width: none; } .tpsv .tpsv-riche ol.tp-escalier { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-rows: repeat(5, auto); column-gap: 40px; margin: 4px 0 24px; padding: 0; counter-reset: tpesc; } .tpsv .tpsv-riche ol.tp-escalier li { counter-increment: tpesc; grid-row: 1 / span 5; display: grid; grid-template-rows: subgrid; row-gap: 7px; position: relative; margin: 0; padding: 30px 22px 22px; border-radius: 24px; background: #FFF8F4; } .tpsv .tpsv-riche ol.tp-escalier li::before { content: counter(tpesc, decimal-leading-zero); align-self: start; font-family: Poppins, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .14em; color: #B98A7E; } .tpsv .tpsv-riche ol.tp-escalier li:not(:last-child)::after { content: ""; position: absolute; right: -32px; bottom: 64px; width: 24px; height: 6px; background: radial-gradient(circle, #B4837B 3px, transparent 3.5px) center / 6px 6px no-repeat, linear-gradient(#D8C4BE, #D8C4BE) left center / 5px 1.5px no-repeat, linear-gradient(#D8C4BE, #D8C4BE) right center / 5px 1.5px no-repeat; } .tpsv .tpsv-riche ol.tp-escalier li > strong { order: 1; align-self: end; font-family: Poppins, sans-serif; font-size: clamp(19px, 1.7vw, 24px); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; color: #2D3C50; } .tpsv .tpsv-riche ol.tp-escalier li > strong a { color: inherit; border-bottom: 0; } /* Cartes étroites (5 ou 6 étapes) : les mots longs (« accompagnement », « investissement ») se coupent au lieu de déborder. */ .tpsv .tpsv-riche ol.tp-escalier li { min-width: 0; } .tpsv .tpsv-riche ol.tp-escalier li > :is(strong, span, p, em) { min-width: 0; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } .tpsv .tpsv-riche ol.tp-escalier li > span { order: 2; font-size: 13.5px; line-height: 1.5; font-weight: 600; color: #3E4A5A; } .tpsv .tpsv-riche ol.tp-escalier li > p { order: 3; margin: 0; font-size: 13.5px; line-height: 1.5; color: #3E4A5A; } .tpsv .tpsv-riche ol.tp-escalier li > em { order: 4; font-size: 12.5px; font-style: normal; color: #3E4A5A; } .tpsv .tpsv-riche ol.tp-escalier li:nth-last-child(2) { margin-top: 22px; background: #DCC8C2 repeating-linear-gradient(0deg, rgba(45,60,80,.055) 0 1px, transparent 1px 4px); } .tpsv .tpsv-riche ol.tp-escalier li:nth-last-child(3) { margin-top: 44px; background: #F3E7E2; } .tpsv .tpsv-riche ol.tp-escalier li:nth-last-child(4) { margin-top: 66px; } .tpsv .tpsv-riche ol.tp-escalier li:nth-last-child(5) { margin-top: 88px; } .tpsv .tpsv-riche ol.tp-escalier li:nth-last-child(6) { margin-top: 110px; } .tpsv .tpsv-riche ol.tp-escalier li:last-child { background: #54687F; } .tpsv .tpsv-riche ol.tp-escalier li:last-child::before { color: #D9A6A6; } .tpsv .tpsv-riche ol.tp-escalier li:last-child > :is(strong, span, p, em) { color: #FFFFFF; } .tpsv .tpsv-coquille .tpsv-riche ol.tp-escalier li:not(:nth-last-child(-n+3)) { background: #FFFFFF; } /* sur fond coquille d'œuf */ @media (max-width: 960px) { .tpsv .tpsv-riche ol.tp-escalier { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 12px; } .tpsv .tpsv-riche ol.tp-escalier li { grid-row: auto; display: flex; flex-direction: column; margin-top: 0 !important; } .tpsv .tpsv-riche ol.tp-escalier li::after { display: none; } } /* Tuiles (ul.tp-tuiles) : colonnes à filets, sans cartes (« filets et aplats plutôt que des cartes ») ; pastille, nom, libellés, précision. Variantes --2 / --3 : nombre de colonnes ; --sombre et li.tp-phare : même dessin. */ .tpsv-riche ul.tp-tuiles { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 clamp(24px, 3vw, 44px); margin: 4px 0 22px; padding: 0; } .tpsv-riche ul.tp-tuiles.tp-tuiles--3 { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); } .tpsv-riche ul.tp-tuiles.tp-tuiles--2 { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } .tpsv .tpsv-section .tpsv-riche ul.tp-tuiles li { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 18px 0 22px; border-top: 1px solid var(--filet); border-radius: 0; background: none; } .tpsv .tpsv-section .tpsv-riche ul.tp-tuiles li > strong { font-family: Poppins, sans-serif; font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: var(--nuit); } .tpsv .tpsv-section .tpsv-riche ul.tp-tuiles li em { order: -1; align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: #F3E7E2; font-family: Poppins, sans-serif; font-size: 12px; font-style: normal; font-weight: 600; color: var(--terra-fonce); } .tpsv .tpsv-section .tpsv-riche ul.tp-tuiles li span { font-size: 14px; line-height: 1.45; color: var(--texte); } .tpsv .tpsv-section .tpsv-riche ul.tp-tuiles li span b { display: block; margin-bottom: 2px; font-family: Poppins, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--terra-fonce); } .tpsv .tpsv-section .tpsv-riche ul.tp-tuiles li p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--texte); } .tpsv .tpsv-section .tpsv-bulle--clair .tpsv-riche ul.tp-tuiles li em { background: #FFFFFF; } .tpsv-riche ul.tp-tuiles--2 li { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 8px 24px !important; } .tpsv-riche ul.tp-tuiles--2 li > :is(strong, em, p) { grid-column: 1 / -1; } .tpsv-riche ul.tp-tuiles--2 li em { grid-row: 1; } @media (max-width: 960px) { .tpsv-riche ul.tp-tuiles { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .tpsv-riche ul.tp-tuiles { grid-template-columns: minmax(0, 1fr); } } /* Deux encadrés côte à côte (div.tp-duo) */ .tpsv-riche div.tp-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .tpsv .tpsv-riche div.tp-duo p { margin: 0; padding: 22px 24px; border-radius: 24px; background: #FFF8F4; font-size: 15px; line-height: 1.65; } /* Graphiques placés dans un texte (template-parts/graphe-*.php) : carte bleu ardoise, texte blanc, accents terracotta */ .tpsv-section .tpsv-riche:has(> :is(.tpg, .tpsv-calc)) { max-width: none; } .tpsv-section .tpsv-riche:has(> .tpg) > p:not(.tp-encadre) { max-width: 900px; } .tpsv .tpg { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: center; margin: 8px 0 24px; padding: clamp(22px, 2.8vw, 40px); border-radius: 40px; background: #54687F; color: #FFFFFF; font-size: 14.5px; line-height: 1.55; } .tpsv .tpg small { display: block; margin-bottom: 2px; font-family: Poppins, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #FFFFFF; } .tpsv .tpg b { font-family: Poppins, sans-serif; font-size: 17px; font-weight: 500; color: #FFFFFF; font-variant-numeric: tabular-nums; } .tpsv .tpg b.tpg__grand { font-size: clamp(26px, 2.4vw, 34px); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; color: #FFFFFF; } .tpg__lecture { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 30px; margin-bottom: 6px; } .tpg svg { display: block; width: 100%; height: auto; } .tpg__grille { stroke: rgba(255,255,255,.12); } .tpg__axe { fill: #FFFFFF; font: 500 11px Poppins, sans-serif; } .tpsv .tpg .tpg__note { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: #FFFFFF; } .tpg__choix { align-self: center; } .tpg__option { border-top: 1px solid rgba(255,255,255,.22); } .tpg__option:last-child { border-bottom: 1px solid rgba(255,255,255,.22); } .tpg__option button { display: flex; gap: 14px; width: 100%; padding: 15px 0; border: 0; background: none; cursor: pointer; text-align: left; font-family: Poppins, sans-serif; font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; color: #FFFFFF; } .tpg__option button:focus-visible { outline: 2px solid #D9A6A6; outline-offset: 4px; border-radius: 8px; } .tpg__option button i { padding-top: 2px; font-size: 13px; font-style: normal; color: #D9A6A6; } .tpg__option.on button span { color: #D9A6A6; } .tpsv .tpg .tpg__texte { max-height: 0; overflow: hidden; padding-left: 33px; opacity: 0; font-size: 14.5px; line-height: 1.6; color: #FFFFFF; transition: max-height .45s ease, opacity .3s, padding .3s; } .tpsv .tpg .tpg__option.on .tpg__texte { max-height: 200px; padding-bottom: 16px; opacity: 1; } /* Autocall : zones de gain et de perte, seuil blanc, barrière terracotta, trajectoire qui se dessine */ .tpg__zone-gain { fill: rgba(255,255,255,.07); } .tpg__zone-perte { fill: rgba(217,166,166,.16); } .tpg__seuil { stroke: #FFFFFF; stroke-width: 1.5; stroke-dasharray: 6 6; } .tpg__barriere { stroke: #D9A6A6; stroke-width: 1.5; stroke-dasharray: 6 6; } .tpg__repere { font: 600 11.5px Poppins, sans-serif; } .tpg__repere--or { fill: #FFFFFF; } .tpg__repere--rose { fill: #D9A6A6; } .tpg__scenario { display: none; } .tpg__scenario.on { display: inline; } .tpg__trace { fill: none; stroke: #FFFFFF; stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; } .tpsv-js .tpg:not(.tpg--vu) .tpg__trace, .tpsv-js .tpg:not(.tpg--vu) .tpg__constat { visibility: hidden; } .tpg--vu .tpg__scenario.on .tpg__trace { animation: tpgTrace 1.3s cubic-bezier(.4,0,.2,1) both; } .tpg__constat { fill: #FFFFFF; } .tpg__constat--fin { fill: #D9A6A6; stroke: #FFFFFF; stroke-width: 3; } .tpg--vu .tpg__scenario.on .tpg__constat { animation: tpgPoint .3s calc(var(--d) * 1.3) both; } @keyframes tpgTrace { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } @keyframes tpgPoint { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .tpg--vu .tpg__scenario.on .tpg__trace, .tpg--vu .tpg__scenario.on .tpg__constat { animation: none; } } @media (max-width: 960px) { .tpsv .tpg { grid-template-columns: minmax(0, 1fr); border-radius: 32px; } } /* Forêts : aire et courbe terracotta */ .tpg__aire { fill: rgba(217,166,166,.18); } .tpg__trace.tpg__trace--rose { stroke: #D9A6A6; } /* SCPI : barres qui montent, 2025 en terracotta, repère des SCPI diversifiées en contour ; chiffres clés à droite */ .tpg__base { stroke: #FFFFFF; } .tpg__barre rect { fill: #FFFFFF; transform-box: fill-box; transform-origin: bottom; } .tpg__barre.on rect { fill: #D9A6A6; } .tpg__barre.repere rect { fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-dasharray: 6 5; } .tpg__valeur { fill: #FFFFFF; font: 600 15px Poppins, sans-serif; } .tpg__barre.on .tpg__valeur { fill: #D9A6A6; } .tpsv-js .tpg:not(.tpg--vu) .tpg__barre rect { transform: scaleY(0); } .tpsv-js .tpg:not(.tpg--vu) .tpg__valeur { opacity: 0; } .tpg__barre rect { transition: transform .9s cubic-bezier(.2,.8,.2,1) var(--d, 0s); } .tpg__valeur { transition: opacity .4s calc(var(--d, 0s) + .6s); } .tpg__chiffres > div { padding: 16px 0; border-top: 1px solid rgba(255,255,255,.22); } .tpg__chiffres > div:last-child { border-bottom: 1px solid rgba(255,255,255,.22); } .tpsv .tpg .tpg__chiffres small { margin: 6px 0 2px; } .tpsv .tpg .tpg__chiffres span { display: block; font-size: 14px; color: #FFFFFF; } /* Abondement : réglages à gauche, jauges qui se remplissent jusqu'aux plafonds à droite */ .tpsv .tpg.tpg--abond { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: stretch; } .tpg__reglages { display: flex; flex-direction: column; gap: 22px; } .tpg__champ { display: flex; flex-direction: column; gap: 8px; } .tpg__segment { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.12); } .tpg__segment button { padding: 10px 0; border: 0; border-radius: 999px; background: none; cursor: pointer; font-family: Poppins, sans-serif; font-size: 15px; font-weight: 600; color: #FFFFFF; transition: background .25s, color .25s; } .tpg__segment button.on { background: #FFFFFF; color: #54687F; } .tpg__segment button:focus-visible { outline: 2px solid #D9A6A6; outline-offset: 2px; } .tpsv .tpg input[type=range] { background: rgba(255,255,255,.24); } .tpsv .tpg input[type=range]::-webkit-slider-thumb { border-color: #D9A6A6; } .tpsv .tpg input[type=range]::-moz-range-thumb { border-color: #D9A6A6; } .tpg__resultat { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(18px, 2vw, 28px); border-radius: 28px; background: rgba(39,51,67,.22); } .tpsv .tpg .tpg__resultat b.tpg__grand { font-size: clamp(32px, 3vw, 44px); } .tpg__jauge span { display: flex; justify-content: space-between; font-family: Poppins, sans-serif; font-size: 14px; font-weight: 600; color: #FFFFFF; } .tpg__jauge > i { display: block; height: 12px; margin: 8px 0 6px; border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; } .tpg__jauge > i > i { display: block; width: var(--p, 0%); height: 100%; border-radius: inherit; background: #FFFFFF; transition: width .45s cubic-bezier(.2,.8,.2,1); } .tpg__jauge.plein > i > i, .tpg__jauge--total > i > i { background: #D9A6A6; } .tpg__jauge em { font-size: 12.5px; font-style: normal; color: #FFFFFF; } /* Courbe en J (vie_forme = courbe) : graphique bleu nuit à gauche, phases à droite */ .tpsv-jc { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: center; padding: clamp(22px, 2.8vw, 40px); border-radius: 40px; background: #54687F; color: #FFFFFF; } .tpsv-jc__lecture { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 30px; margin-bottom: 6px; } .tpsv-jc__lecture small { display: block; margin-bottom: 2px; font-family: Poppins, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #D9A6A6; } .tpsv-jc__lecture strong { font-family: Poppins, sans-serif; font-size: clamp(26px, 2.4vw, 34px); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #FFFFFF; } .tpsv-jc__lecture strong.neg { color: #FFFFFF; } .tpsv-jc__lecture strong.pos { color: #D9A6A6; } .tpsv-jc__lecture b { font-family: Poppins, sans-serif; font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; } .tpsv-jc svg { display: block; width: 100%; height: auto; } .tpsv-jc__bande { fill: rgba(255,248,244,0); transition: fill .4s; } .tpsv-jc__bande.on { fill: rgba(255,248,244,.08); } .tpsv-jc__grille { stroke: rgba(255,248,244,.12); } .tpsv-jc__zero { stroke: #FFFFFF; stroke-dasharray: 3 5; } .tpsv-jc__axe { fill: #FFFFFF; font: 500 11px Poppins, sans-serif; } .tpsv-jc__appel { fill: #273343; } .tpsv-jc__distri { fill: #FFFFFF; } .tpsv-jc g[data-an] { transition: opacity .3s; } .tpsv-jc g[data-an].off { opacity: .12; } .tpsv-jc__aire { fill: url(#tpsv-jc-or); } .tpsv-jc__courbe { fill: none; stroke: #D9A6A6; stroke-width: 3.5; stroke-linecap: round; } .tpsv-jc__curseur { stroke: #FFFFFF; stroke-dasharray: 2 4; } .tpsv-jc__point { fill: #FFF8F4; stroke: #D9A6A6; stroke-width: 4; } .tpsv .tpsv-jc input[type=range] { margin-top: 8px; background: rgba(255,248,244,.24); } .tpsv .tpsv-jc input[type=range]::-webkit-slider-thumb { border-color: #D9A6A6; } .tpsv .tpsv-jc input[type=range]::-moz-range-thumb { border-color: #D9A6A6; } .tpsv-jc__legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 13px; color: #FFFFFF; } .tpsv-jc__legende i { display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 3px; } .tpsv-jc__legende i.appel { background: #273343; } .tpsv-jc__legende i.distri { background: #FFFFFF; } .tpsv-jc__legende i.courbe { width: 16px; height: 3px; vertical-align: 3px; background: #D9A6A6; } .tpsv-jc__legende em { flex-basis: 100%; font-size: 12.5px; font-style: normal; color: #FFFFFF; } .tpsv-jc__phases { list-style: none; margin: 0; padding: 0; } .tpsv-jc__phases li { border-top: 1px solid rgba(255,248,244,.22); } .tpsv-jc__phases li:last-child { border-bottom: 1px solid rgba(255,248,244,.22); } .tpsv-jc__phases button { display: flex; gap: 14px; width: 100%; padding: 16px 0; border: 0; background: none; cursor: pointer; text-align: left; font-family: Poppins, sans-serif; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: #FFFFFF; transition: color .3s; } .tpsv-jc__phases button:focus-visible { outline: 2px solid #D9A6A6; outline-offset: 4px; border-radius: 8px; } .tpsv-jc__phases button i { padding-top: 3px; font-size: 13px; font-style: normal; color: #D9A6A6; } .tpsv-jc__phases button small { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #D9A6A6; } .tpsv-jc__phases li.on button, .tpsv-jc__phases button:hover { color: #FFFFFF; } .tpsv .tpsv-jc__phases p { max-height: 0; overflow: hidden; margin: 0; padding: 0 0 0 33px; opacity: 0; font-size: 14.5px; line-height: 1.6; color: #FFFFFF; transition: max-height .45s ease, opacity .3s, padding .3s; } .tpsv .tpsv-jc__phases li.on p { max-height: 260px; padding-bottom: 18px; opacity: 1; } .tpsv-jc__cles { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px clamp(20px, 3vw, 48px); padding-top: clamp(18px, 2vw, 26px); border-top: 1px solid rgba(255,248,244,.22); } .tpsv-jc__cles strong { display: block; font-family: Poppins, sans-serif; font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; color: #D9A6A6; } .tpsv-jc__cles small { display: block; margin: 6px 0 4px; font-family: Poppins, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #FFFFFF; } .tpsv .tpsv-jc__cles p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #FFFFFF; } .tpsv .tpsv-jc__cles p.tpsv-jc__note { grid-column: 1 / -1; padding: 12px 16px; border-radius: 16px; background: rgba(39,51,67,.22); font-size: 13.5px; color: #FFFFFF; } .tpsv-jc-suite { margin-top: clamp(8px, 1vw, 16px); } @media (max-width: 960px) { .tpsv-jc { grid-template-columns: minmax(0, 1fr); border-radius: 32px; } .tpsv-riche ul.tp-tuiles.tp-tuiles--3, .tpsv-riche ul.tp-criteres, .tpsv-riche ul.tp-criteres.tp-criteres--4, .tpsv-riche ul.tp-criteres.tp-criteres--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .tpsv-riche ul.tp-tuiles.tp-tuiles--3, .tpsv-riche ul.tp-tuiles.tp-tuiles--2, .tpsv-riche ul.tp-tuiles--2 li, .tpsv-riche ul.tp-criteres, .tpsv-riche ul.tp-criteres.tp-criteres--4, .tpsv-riche ul.tp-criteres.tp-criteres--5, .tpsv-riche div.tp-duo, .tpsv-riche ul.tp-lignes:not(.tp-cartes) { grid-template-columns: minmax(0, 1fr); } .tpsv-jc__lecture { gap: 6px 20px; } .tpsv-jc__cles { grid-template-columns: minmax(0, 1fr); } } /* « Pour qui » (section rédigée 2) : bandeau bleu pleine largeur, cartes de la fiche d’identité, liste à filets et coches, encadré « moins adapté » */ #libre2 .tpsv-riche ul { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; margin: 8px 0 24px; padding: 0; } /* toutes les cartes sur une ligne, jamais de trou */ @media (max-width: 960px) { #libre2 .tpsv-riche ul { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { #libre2 .tpsv-riche ul { grid-template-columns: minmax(0, 1fr); } } #libre2 .tpsv-riche li { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 26px 24px; border-radius: 26px; background: #485B71; color: #E1E7EE; font-size: 14.5px; line-height: 1.6; transition: transform .35s cubic-bezier(.2,.8,.2,1), background .35s; } #libre2 .tpsv-riche li:hover { transform: translateY(-6px); background: #42546A; } #libre2 .tpsv-riche li::before { content: ""; width: 22px; height: 22px; margin-bottom: 14px; background: center / 22px no-repeat; } /* même carte que la fiche d'identité */ #libre2 .tpsv-riche li strong { font-family: Poppins, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.25; color: #FFF8F4; } #libre2 .tpsv-riche li:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C2BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5L5 19'/%3E%3Ccircle cx='7' cy='7' r='2.5'/%3E%3Ccircle cx='17' cy='17' r='2.5'/%3E%3C/svg%3E"); } #libre2 .tpsv-riche li:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C2BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='7.5' width='17' height='12' rx='2.5'/%3E%3Cpath d='M9 7.5V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v1.5M3.5 13h17'/%3E%3C/svg%3E"); } #libre2 .tpsv-riche li:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C2BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l8 4-8 4-8-4z'/%3E%3Cpath d='M4 12l8 4 8-4M4 16l8 4 8-4'/%3E%3C/svg%3E"); } #libre2 .tpsv-riche li:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C2BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.2 5.8L20 11l-5.8 2.2L12 19l-2.2-5.8L4 11l5.8-2.2z'/%3E%3C/svg%3E"); } #libre2 .tpsv-riche li:nth-child(5)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C2BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 18h16M7 18a5 5 0 0 1 10 0M12 6v3M5.6 9.6l1.8 1.8M18.4 9.6l-1.8 1.8'/%3E%3C/svg%3E"); } /* Icône au choix par classe sur le
  • (tp-ico-…), sinon selon la position (fiche PER) */ #libre2 .tpsv-riche li.tp-ico-cadeau::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C2BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='9' width='16' height='11' rx='2'/%3E%3Cpath d='M3.5 9h17M12 9v11M12 9c-1.5-3-5-3.5-5-1.2C7 9 12 9 12 9zM12 9c1.5-3 5-3.5 5-1.2C17 9 12 9 12 9z'/%3E%3C/svg%3E"); } #libre2 .tpsv-riche li.tp-ico-strates::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C2BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l8 4-8 4-8-4z'/%3E%3Cpath d='M4 12l8 4 8-4M4 16l8 4 8-4'/%3E%3C/svg%3E"); } #libre2 .tpsv-riche li.tp-ico-immeuble::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C2BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V5.5A1.5 1.5 0 0 1 6.5 4h7A1.5 1.5 0 0 1 15 5.5V20M15 10h3.5a1.5 1.5 0 0 1 1.5 1.5V20M3.5 20h17M8.5 8h3M8.5 12h3M8.5 16h3'/%3E%3C/svg%3E"); } #libre2 .tpsv-riche li.tp-ico-horloge::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C2BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); } #libre2 .tpsv-riche li.tp-ico-pourcent::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C2BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5L5 19'/%3E%3Ccircle cx='7' cy='7' r='2.5'/%3E%3Ccircle cx='17' cy='17' r='2.5'/%3E%3C/svg%3E"); } #libre2 .tpsv-riche li.tp-ico-mallette::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C2BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='7.5' width='17' height='12' rx='2.5'/%3E%3Cpath d='M9 7.5V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v1.5M3.5 13h17'/%3E%3C/svg%3E"); } #libre2 .tpsv-riche li.tp-ico-etoile::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C2BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.2 5.8L20 11l-5.8 2.2L12 19l-2.2-5.8L4 11l5.8-2.2z'/%3E%3C/svg%3E"); } #libre2 .tpsv-riche li.tp-ico-retraite::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C2BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 18h16M7 18a5 5 0 0 1 10 0M12 6v3M5.6 9.6l1.8 1.8M18.4 9.6l-1.8 1.8'/%3E%3C/svg%3E"); } #libre2 .tpsv-riche li.tp-ico-globe::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C2BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M4 12h16M12 4c2.4 2.4 2.4 13.6 0 16M12 4c-2.4 2.4-2.4 13.6 0 16'/%3E%3C/svg%3E"); } #libre2 .tpsv-riche li.tp-ico-devises::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C2BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='5'/%3E%3Cpath d='M13.9 10.1a5 5 0 1 1-3.8 3.8'/%3E%3C/svg%3E"); } /* Section rédigée avec photo : l'en-tête est dans la colonne de texte */ .tpsv-libre-photo .tpsv-tete { margin-bottom: clamp(24px, 2.4vw, 36px); } /* « Pour qui » : liste placée sous un intertitre (ex. « Les limites à connaître ») en lignes à filets, pas en cartes */ #libre2 .tpsv-riche h3 ~ ul { display: block; border-top: 1px solid rgba(255,248,244,.18); } #libre2 .tpsv-riche h3 ~ ul li { display: grid; grid-template-columns: 22px minmax(0, 280px) minmax(0, 1fr); gap: 0 18px; align-items: start; padding: 20px 0; border-radius: 0; background: none; border-bottom: 1px solid rgba(255,248,244,.18); } #libre2 .tpsv-riche h3 ~ ul li:hover { transform: none; background: none; } #libre2 .tpsv-riche h3 ~ ul li::before { margin: 1px 0 0; } #libre2 .tpsv-riche h3 ~ ul li strong { font-size: 16.5px; } @media (max-width: 760px) { #libre2 .tpsv-riche h3 ~ ul li { display: block; position: relative; padding-left: 40px; } #libre2 .tpsv-riche h3 ~ ul li::before { position: absolute; left: 0; top: 21px; } #libre2 .tpsv-riche h3 ~ ul li strong { display: block; margin-bottom: 6px; } } #libre2 .tpsv-riche { max-width: none; } #libre2 .tpsv-riche > * { max-width: none; } /* textes et encadré sur toute la largeur du bandeau */ .tpsv #libre2 .tpsv-riche ul + p { padding: 20px 24px; border-radius: 24px; background: rgba(255,248,244,.1); color: #FFF8F4; } #libre2 .tpsv-riche ul + p a { color: #FBE3DF; font-weight: 600; border-bottom-color: rgba(251,227,223,.5); } #libre2 .tpsv-riche ul + p a:hover { color: #FFF8F4; } #libre2 .tpsv-riche h3 { color: #FFF8F4; } .tpsv .tpsv-riche h3 { margin-top: clamp(32px, 3.4vw, 44px); } .tpsv-calc__segment--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Fiscalité : simulateur de retrait (onglets, champs à curseur, barres comparées, chiffres) */ .tpsv-fisc--seul .tpsv-fisc__texte { max-width: 860px; } /* Fiscalité sans photo : bandeau bleu pleine largeur (comme la Définition), textes alignés sur la page */ .tpsv-bulle { margin-inline: calc(50% - 50vw); padding: clamp(64px, 7vw, 104px) calc(50vw - 50%); background: #566780; color: #E4E9EF; } .tpsv { overflow-x: clip; } /* le bandeau pleine largeur ne crée pas de défilement horizontal */ .tpsv-bulle .tpsv-tete { margin-bottom: clamp(28px, 3vw, 44px); } .tpsv-bulle .tpsv-eyebrow { color: #FBE3DF; } .tpsv .tpsv-bulle h2.tpsv-h2, .tpsv .tpsv-bulle .tpsv-fisc__intro { color: #FFF8F4; } .tpsv-bulle .tpsv-fisc-acc { max-width: none; border-left-color: rgba(255,248,244,.22); } .tpsv-bulle .tpsv-acc details[open]::before { background: #FBE3DF; } .tpsv-bulle .tpsv-acc details { padding-right: 24px; border-radius: 0 24px 24px 0; transition: background .25s; } .tpsv-bulle .tpsv-acc details[open] { background: rgba(255,248,244,.08); } /* volet ouvert : voile clair pour le délimiter */ .tpsv-bulle .tpsv-acc details:not([open]):hover { background: rgba(255,248,244,.04); } .tpsv-bulle .tpsv-acc summary, .tpsv-bulle .tpsv-acc summary svg { color: #FFF8F4; } .tpsv-bulle .tpsv-acc summary:hover { color: #FBE3DF; } .tpsv-bulle .tpsv-acc summary:focus-visible { outline-color: #FFF8F4; } .tpsv .tpsv-bulle .tpsol-texte :is(p, ul, ol) { color: #E4E9EF; } .tpsv .tpsv-bulle:not(.tpsv-bulle--clair) .tpsv-tete .tpsv-lead { color: #E4E9EF; } /* introduction lisible sur le bandeau bleu */ .tpsv-bulle .tpsol-texte strong { color: #FFF8F4; } .tpsv-bulle .tpsol-texte a { color: #FBE3DF; border-bottom-color: rgba(251,227,223,.5); } .tpsv-calc { margin-top: clamp(72px, 8vw, 120px); padding: clamp(24px, 3.6vw, 56px) clamp(14px, 2.8vw, 44px); border-radius: 48px; background: #566780; display: flex; flex-direction: column; gap: 28px; } .tpsv-calc__tete { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .tpsv-calc__badge { font-family: Poppins, sans-serif; font-size: 13px; font-weight: 500; color: #FFF8F4; padding: 6px 16px; border-radius: 999px; border: 1px solid rgba(255,248,244,.35); background: rgba(255,248,244,.08); } .tpsv .tpsv-calc__tete h3 { font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -.03em; color: #FFF8F4; } .tpsv-calc__tete p { max-width: 560px; font-size: 15.5px; line-height: 1.65; color: #D5DDE6; } .tpsv-calc__grille { width: 100%; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 14px; align-items: stretch; } .tpsv-calc__grille > div:first-child { display: flex; flex-direction: column; } .tpsv-calc__panneau { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; align-content: start; padding: clamp(24px, 3.2vw, 44px); border-radius: 30px; background: #FFF; } .tpsv-calc .l { font-family: Poppins, sans-serif; font-size: 14px; font-weight: 600; color: var(--nuit); } .tpsv-calc .l small { margin-left: 6px; font-family: Manrope, sans-serif; font-size: 13px; font-weight: 500; color: var(--libelle); } .tpsv-calc__segment { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; border-radius: 22px; background: var(--rose); } .tpsv-calc__segment--3 { grid-template-columns: repeat(3, 1fr); } .tpsv-calc__segment button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 16px; border: 0; border-radius: 17px; background: transparent; color: var(--nuit); cursor: pointer; transition: background .25s, color .25s, box-shadow .25s, transform .2s; } .tpsv-calc__segment b { font: 600 15.5px Poppins, sans-serif; } .tpsv-calc__segment span { font-size: 12.5px; color: var(--terra-fonce); } /* Choix non sélectionnés : pastilles blanches, pour montrer qu'ils sont cliquables */ .tpsv-calc__segment button:not(.on) { background: #FFF; box-shadow: inset 0 0 0 1px var(--filet); } .tpsv-calc__segment button:not(.on):hover { box-shadow: inset 0 0 0 1.5px var(--terra); } .tpsv-calc__segment button.on { background: var(--ardoise); color: #FFF8F4; } .tpsv-calc__segment button.on span { color: var(--terra-pale); } .tpsv-calc__segment button:focus-visible { outline: 2px solid var(--nuit); outline-offset: 2px; } .tpsv-calc__champ { display: flex; flex-direction: column; gap: 10px; } .tpsv-calc__champ .boite { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(192,141,128,.45); } .tpsv-calc__champ .boite b { font-family: Poppins, sans-serif; font-size: 16px; font-weight: 500; color: var(--nuit); } .tpsv-calc__champ .boite small { font-size: 12.5px; color: var(--libelle); } .tpsv-calc input[type=range] { height: 4px; background: linear-gradient(to right, var(--nuit) var(--p, 50%), rgba(192,141,128,.35) var(--p, 50%)); margin: 8px 0 0; } .tpsv-calc input[type=range]::-webkit-slider-thumb { width: 20px; height: 20px; border: 2px solid var(--nuit); box-shadow: 0 2px 6px rgba(39,51,67,.25); } .tpsv-calc input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid var(--nuit); } .tpsv-calc__champ .bornes { display: flex; justify-content: space-between; font-size: 12px; color: var(--libelle); } .tpsv-calc__plein { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; } .tpsv-calc__puces { display: flex; flex-wrap: wrap; gap: 8px; } .tpsv-calc__puces button { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 10px 16px; border-radius: 12px; border: 1px solid rgba(192,141,128,.45); background: #FFF; color: var(--nuit); font: 500 13.5px Poppins, sans-serif; transition: background .2s, color .2s; } .tpsv-calc__puces button svg { display: none; } .tpsv-calc__puces button.on { background: var(--ardoise); border-color: var(--ardoise); color: #FFF8F4; } .tpsv-calc__puces button.on svg { display: block; } .tpsv-barres { display: flex; flex-direction: column; gap: 10px; } .tpsv-barres > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 14px; } .tpsv-barres > div > span { font-size: 13px; color: var(--gris); } .tpsv-barres > div > div { height: 40px; } .tpsv-barres i { display: flex; align-items: center; justify-content: flex-end; height: 100%; min-width: 84px; width: 50%; padding: 0 12px; border-radius: 8px; background: var(--rose); transition: width .45s cubic-bezier(.2,.8,.2,1), background .3s; } .tpsv-barres b { font: 600 12.5px Poppins, sans-serif; color: var(--nuit); white-space: nowrap; } .tpsv-barres > div.on i { background: var(--ardoise); } .tpsv-barres > div.on b { color: #FFF8F4; } .tpsv-calc .tpsv-taux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .tpsv-calc .tpsv-taux li { background: var(--rose); opacity: .5; } .tpsv-calc .tpsv-taux li.on { opacity: 1; background: #F3E7E2; } .tpsv-calc .tpsv-taux strong { color: var(--nuit); font-size: 18px; } .tpsv-calc .tpsv-taux span { color: var(--terra-fonce); } .tpsv-calc__res { --d: 0px; display: flex; flex-direction: column; gap: 10px; } .tpsv-calc__haut { flex: 3 1 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 22px; text-align: center; padding: clamp(26px, 2.6vw, 36px) clamp(18px, 2vw, 28px) calc(clamp(22px, 2vw, 28px) + var(--d) / 2); border-radius: 22px; background: linear-gradient(160deg, #31405A, #273343); } .tpsv-calc__haut .net { display: flex; flex-direction: column; align-items: center; gap: 6px; } .tpsv-calc__haut .net small { font-size: 15px; font-weight: 500; color: #E4E9EF; } .tpsv-calc__haut .net b { font: 500 clamp(32px, 3vw, 42px) Poppins, sans-serif; letter-spacing: -.035em; line-height: 1.05; color: #FFF8F4; } .tpsv-calc__haut .bulles { display: grid; grid-template-columns: 1fr; gap: 8px; width: 100%; } .tpsv-calc__haut .bulles div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 16px; border-radius: 18px; background: #FFF; } .tpsv-calc__haut .bulles b { font: 600 clamp(20px, 1.8vw, 24px) Poppins, sans-serif; letter-spacing: -.02em; color: var(--nuit); } .tpsv-calc__haut .bulles small { font-size: 13.5px; font-weight: 500; color: var(--terra-fonce); } .tpsv-calc__bas { flex: 2 1 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; text-align: center; margin-top: calc(-1 * var(--d)); padding: calc(clamp(20px, 2vw, 28px) + var(--d) / 2) clamp(18px, 2vw, 28px) clamp(20px, 2vw, 28px); border-radius: 22px; background: linear-gradient(160deg, #31405A, #273343); } .tpsv .tpsv-calc__bas p { max-width: 260px; font-size: 15px; font-weight: 500; line-height: 1.6; color: #E4E9EF; } .tpsv-calc__methode { width: 100%; max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; } .tpsv .tpsv-calc__methode h4 { font-size: 15px; color: #FFF8F4; } .tpsv-calc__methode ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); counter-reset: etape; } .tpsv-calc__methode li { counter-increment: etape; display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid rgba(255,248,244,.22); font-size: 14px; line-height: 1.6; color: #D5DDE6; } .tpsv-calc__methode li::before { content: "0" counter(etape); font: 600 12px Poppins, sans-serif; letter-spacing: .08em; color: #FBE3DF; } .tpsv-calc__methode li b { font-family: Poppins, sans-serif; font-weight: 600; color: #FFF8F4; } .tpsv-calc__methode .tpsv-mention { color: #C9D3DF; } .tpsv-fisc-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.6vw, 56px); margin: 64px 0; } .tpsv-fisc-cols > div { padding-top: 24px; border-top: 2px solid var(--nuit); } .tpsv .tpsv-fisc-cols h3 { margin: 0 0 14px; } .tpsv .tpsv-fisc-cols p { font-size: 15.5px; } /* Transmission : texte à gauche, deux cartes compactes avant / après 70 ans */ .tpsv .tpsv-intro-riche { margin: -16px 0 72px; } .tpsv .tpsv-intro-riche:has(+ .tpsv-acc) { margin-bottom: 28px; } /* chapô juste au-dessus des volets */ .tpsv .tpsv-intro-riche p { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.75; color: var(--texte); } .tpsv-duo70 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; } .tpsv-carte70 { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 28px 26px 26px; border-radius: 32px; background: #FFF; border: 1px solid var(--filet); box-shadow: 0 30px 60px -44px rgba(45,60,80,.45); transition: transform .35s cubic-bezier(.2,.8,.2,1); } .tpsv-carte70:hover { transform: translateY(-6px); } .tpsv-carte70 .tpsv-pastille { margin-bottom: 14px; } .tpsv-carte70 strong { font-family: Poppins, sans-serif; font-size: clamp(32px, 2.8vw, 42px); font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--nuit); } .tpsv-carte70__sous { font-size: 14px; line-height: 1.45; color: var(--gris); } .tpsv-carte70 ul { list-style: none; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--filet); display: flex; flex-direction: column; gap: 12px; width: 100%; } .tpsv-carte70 li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; line-height: 1.4; color: var(--texte); } .tpsv-ico { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: normal; font-family: Poppins, sans-serif; font-size: 12px; font-weight: 700; background: var(--rose); color: var(--terra-fonce); } .tpsv-ico--ok { background: var(--voile); color: var(--nuit); } .tpsv-carte70--nuit { background: var(--ardoise); border-color: var(--ardoise); margin-top: 56px; } .tpsv-carte70--nuit strong { color: #FFF8F4; } .tpsv-carte70--nuit .tpsv-carte70__sous { color: #C9D3DF; } .tpsv-carte70--nuit ul { border-top-color: rgba(255,248,244,.16); } .tpsv-carte70--nuit li { color: #F3EEEA; } .tpsv-pastille { display: inline-flex; align-items: center; gap: 8px; font-family: Poppins, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 9px 18px; border-radius: 999px; background: var(--ardoise-pale); color: var(--nuit); } .tpsv-pastille--fonce { background: var(--ardoise); color: #FFF; } /* Accompagnement */ .tpsv-accomp { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); position: relative; } .tpsv-accomp::before { content: ""; position: absolute; left: 24px; right: 24px; top: 24px; height: 2px; background: repeating-linear-gradient(90deg, var(--ardoise-pale) 0 8px, transparent 8px 14px); } .tpsv-etape { position: relative; display: flex; flex-direction: column; gap: 14px; padding-right: 40px; } .tpsv-etape i { width: 48px; height: 48px; border-radius: 16px; background: var(--ardoise); color: #FFF; display: flex; align-items: center; justify-content: center; font-style: normal; font-family: Poppins, sans-serif; font-weight: 600; font-size: 14px; margin-bottom: 12px; } .tpsv-etape h3 { font-size: 19px; } .tpsv-etape p { font-size: 15px; line-height: 1.7; } .tpsv-etape em { font-style: normal; font-family: Poppins, sans-serif; font-size: 12.5px; font-weight: 500; color: var(--terra-fonce); background: var(--rose); border-radius: 999px; padding: 6px 12px; align-self: flex-start; } .tpsv-accomp-grille { display: flex; flex-direction: column; gap: clamp(40px, 4.4vw, 64px); } .tpsv-accomp-grille .tpsv-etape { padding-right: 24px; } /* Rendez-vous en bandeau, après la frise */ .tpsv-accomp-grille .tpsv-rdv { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; row-gap: 8px; align-items: center; padding: clamp(28px, 3vw, 40px) clamp(28px, 3.4vw, 48px); } .tpsv-accomp-grille .tpsv-rdv__titre { grid-column: 1; } .tpsv-accomp-grille .tpsv-rdv__texte { grid-column: 1; max-width: 640px; } .tpsv-accomp-grille .tpsv-rdv__btn { grid-column: 2; grid-row: 1 / 3; margin: 0; align-self: center; } @media (max-width: 760px) { .tpsv-accomp-grille .tpsv-rdv { grid-template-columns: minmax(0, 1fr); } .tpsv-accomp-grille .tpsv-rdv__btn { grid-column: 1; grid-row: auto; margin-top: 12px; justify-self: start; } } .tpsv-rdv { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: clamp(30px, 3vw, 44px); border-radius: 36px; background: var(--rose); color: var(--nuit); transition: transform .35s cubic-bezier(.2,.8,.2,1), background .35s; } .tpsv-rdv:hover { transform: translateY(-6px); color: var(--nuit); background: #EEDFD9; } .tpsv-rdv__titre { font-family: Poppins, sans-serif; font-size: clamp(22px, 1.9vw, 27px); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; } .tpsv-rdv__texte { font-size: 15px; line-height: 1.65; color: var(--texte); } .tpsv-rdv__btn { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; background: var(--terra); color: #FFF; font-family: Poppins, sans-serif; font-size: 14.5px; font-weight: 500; padding: 14px 22px; border-radius: 999px; } .tpsv-rdv:hover .tpsv-rdv__btn span { transform: translateX(4px); } .tpsv-rdv__btn span { transition: transform .25s ease-out; } /* Sommaire flottant et barre de lecture */ .tpsv-guide { position: fixed; left: 50%; top: 96px; z-index: 55; translate: -50% calc(-100% - 120px); transition: translate .5s cubic-bezier(.2,.8,.2,1); display: flex; align-items: center; gap: 4px; background: rgba(39,51,67,.92); backdrop-filter: blur(12px); border-radius: 999px; padding: 6px; box-shadow: 0 24px 48px -24px rgba(39,51,67,.8); max-width: calc(100vw - 32px); overflow-x: auto; scrollbar-width: none; } .tpsv-guide::-webkit-scrollbar { display: none; } .tpsv-guide.visible { translate: -50% 0; } .tpsv-guide a { white-space: nowrap; padding: 10px 16px; border-radius: 999px; font-family: Poppins, sans-serif; font-size: 13.5px; font-weight: 500; color: rgba(255,248,244,.72); transition: color .2s, background .2s; } .tpsv-guide a:hover { color: #FFF8F4; } .tpsv-guide a.on { background: #FFF8F4; color: var(--nuit); } .tpsv-guide .rdv { background: var(--terra); color: #FFF; margin-left: 6px; } .tpsv-guide .rdv:hover { background: #8F6A6A; color: #FFF; } .tpsv-lecture { position: fixed; left: 0; top: 0; height: 3px; width: 0; background: var(--terra); z-index: 70; } /* Mouvement */ @keyframes tpsvFondu { from { opacity: 0; transform: translateY(6px); } } @keyframes tpsvDevoile { from { clip-path: inset(0 100% 0 0 round 44px); } } @keyframes tpsvZoom { from { transform: scale(1.18); } } @keyframes tpsvPose { from { opacity: 0; transform: translateY(40px) rotate(-2deg); } } @keyframes tpsvMonte { from { transform: translateY(105%); } } .tpsv-intro .tpsv-hero__photo { animation: tpsvDevoile 1.3s cubic-bezier(.7,0,.2,1) both; } .tpsv-intro .tpsv-hero__photo img { animation: tpsvZoom 2.4s cubic-bezier(.2,.7,.2,1) both; } .tpsv-intro .tpsv-intro .tpsv-intro .tpsv-ligne > span { animation: tpsvMonte .9s cubic-bezier(.2,.8,.2,1) both; } .tpsv-intro .tpsv-ligne + .tpsv-ligne > span { animation-delay: .12s; } .tpsv-intro .tpsv-hero__texte > :not(h1) { animation: tpsvFondu .8s both; } .tpsv-intro .tpsv-hero__texte > :nth-child(1) { animation-delay: .2s; } .tpsv-intro .tpsv-hero__texte > :nth-child(3) { animation-delay: .45s; } .tpsv-intro .tpsv-hero__texte > :nth-child(4) { animation-delay: .55s; } .tpsv-js [data-tpsv-reveal] { opacity: 0; transform: translateY(36px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); } .tpsv-js [data-tpsv-reveal].vu { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .tpsv *, .tpsv *::before, .tpsv *::after { animation: none !important; transition: none !important; } .tpsv-js [data-tpsv-reveal] { opacity: 1; transform: none; } .tpsv-phrase mark { background: none; color: #FBE3DF; font-weight: 700; } } @media (max-width: 960px) { .tpsv-section { padding-top: 88px !important; padding-bottom: 0 !important; } .tpsv-hero, .tpsv-definition__grille, .tpsv-panneau, .tpsv-fisc { grid-template-columns: minmax(0, 1fr); } .tpsv-hero__visuel { max-height: none; } .tpsv-identite { grid-template-columns: 1fr 1fr; } .tpsv-parcours { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tpsv-vfrise { grid-template-columns: minmax(0, 1fr); } .tpsv-vfrise__ecran { display: none; } .tpsv-vfrise__etape { grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding-bottom: 28px; } .tpsv-vfrise__noeud { width: 44px; height: 44px; border-radius: 14px; } .tpsv-vfrise__fil { left: 21px; } .tpsv-vfrise__etape .tpsv-cle { display: inline-flex; margin-top: 6px; } .tpsv-js .tpsv-vfrise__etape { opacity: 1; } .tpsv-parcours__panneau { flex-direction: column; align-items: flex-start; } .tpsv-frise { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; } .tpsv-frise::before, .tpsv-frise__prog { display: none; } .tpsv-accomp-grille, .tpsv-vtabs, .tpsv-fisc-cols, .tpsv-calc__grille, .tpsv-calc__panneau { grid-template-columns: minmax(0, 1fr); } .tpsv-vie-grille { grid-template-columns: 1fr 1fr; } .tpsv-vie-acc__corps { grid-template-columns: minmax(0, 1fr); padding-left: 0; } .tpsv-accomp { grid-template-columns: 1fr; gap: 32px; } .tpsv-accomp::before { display: none; } .tpsv-definition { padding: 64px 0 !important; margin-top: 40px; } .tpsv-comp { grid-template-columns: minmax(0, 1fr); } .tpsv-comp__duel { display: flex; flex-direction: column; gap: 14px; } .tpsv-comp__note { grid-template-columns: minmax(0, 1fr); gap: 10px; } .tpsv-calc__methode ol { grid-template-columns: minmax(0, 1fr); } .tpsv-modes { grid-template-columns: minmax(0, 1fr); row-gap: 28px; } .tpsv-modes > div, .tpsv-modes > div:first-child { padding: 0; border-left: 0; } } @media (max-width: 560px) { .tpsv-identite, .tpsv-duo70, .tpsv-vie-grille { grid-template-columns: 1fr; } .tpsv-carte70--nuit { margin-top: 0; } .tpsv-frise { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Questions fréquentes (template-questions.php) : sommaire des thèmes collant à gauche, volets à droite */ .tpqf-grille { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: start; padding-bottom: clamp(72px, 8vw, 120px); } .tpqf-sommaire { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 28px; background: var(--rose); } .tpqf-sommaire > span { padding: 10px 14px 6px; font-family: Poppins, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--terra-fonce); } .tpqf-sommaire a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 20px; font-family: Poppins, sans-serif; font-size: 15px; font-weight: 500; color: var(--nuit); transition: background .2s; } .tpqf-sommaire a:hover { background: #FFF; } .tpqf-sommaire i { font-style: normal; font-size: 12px; font-weight: 600; min-width: 26px; height: 26px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: #FFF; color: var(--terra-fonce); } .tpqf-groupes { display: flex; flex-direction: column; gap: clamp(48px, 5vw, 72px); } .tpqf-groupe { scroll-margin-top: 120px; } .tpqf-groupe__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: 12px; } .tpsv .tpqf-groupe__tete h2 { margin: 0; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; } .tpqf-groupe__tete p { margin: 0; font-size: 15px; color: var(--gris); } .tpqf-groupe__tete a { display: inline-flex; align-items: center; gap: 8px; font-family: Poppins, sans-serif; font-size: 14.5px; font-weight: 500; color: var(--terra-fonce); } .tpqf-groupe__tete a:hover { color: var(--nuit); } .tpqf .tpsv-fisc-acc { max-width: none; } @media (max-width: 960px) { .tpqf-grille { grid-template-columns: minmax(0, 1fr); } .tpqf-sommaire { position: static; flex-direction: row; flex-wrap: wrap; } .tpqf-sommaire > span { width: 100%; } } /* Actualités : filtres en pastilles (survol des pastilles inactives) */ .tpac-filtre { transition: background .2s, box-shadow .2s; } .tpac-filtre:not(.on):hover { box-shadow: inset 0 0 0 1.5px #A27777; } /* Simulateurs (.tpsv-calc), refonte 2026-10-23 : une seule carte bleu ardoise, sans cartes imbriquées. Réglages à gauche sur le fond, résultat à droite derrière un filet, lignes à filets au lieu de bulles ; texte blanc, accents terracotta. */ .tpsv .tpsv-calc { gap: clamp(24px, 3vw, 40px); padding: clamp(28px, 3.6vw, 52px) max(var(--tpsv-in), clamp(22px, 3.4vw, 52px)); border-radius: 44px; background: #54687F; } .tpsv .tpsv-calc__tete { align-items: flex-start; text-align: left; max-width: 1240px; width: 100%; margin: 0 auto; } .tpsv .tpsv-calc__tete p { max-width: 640px; color: #FFFFFF; } .tpsv .tpsv-calc__badge { color: #FFFFFF; border-color: rgba(255,255,255,.4); background: none; } .tpsv .tpsv-calc__grille { gap: 0; } .tpsv .tpsv-calc__panneau { padding: 0 clamp(24px, 3.4vw, 52px) 0 0; border-radius: 0; background: none; gap: 28px 36px; } .tpsv .tpsv-calc .l { color: #FFFFFF; } .tpsv .tpsv-calc .l small { color: #D9A6A6; } .tpsv .tpsv-calc__champ .boite { padding: 2px 0 10px; border: 0; border-bottom: 1px solid rgba(255,255,255,.35); border-radius: 0; } .tpsv .tpsv-calc__champ .boite b { font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -.02em; color: #FFFFFF; } .tpsv .tpsv-calc__champ .boite small, .tpsv .tpsv-calc__champ .bornes { color: #FFFFFF; } .tpsv .tpsv-calc input[type=range] { background: linear-gradient(to right, #D9A6A6 var(--p, 50%), rgba(255,255,255,.25) var(--p, 50%)); } .tpsv .tpsv-calc input[type=range]::-webkit-slider-thumb { background: #FFFFFF; border-color: #D9A6A6; box-shadow: none; } .tpsv .tpsv-calc input[type=range]::-moz-range-thumb { background: #FFFFFF; border-color: #D9A6A6; } .tpsv .tpsv-calc__segment { background: rgba(255,255,255,.12); } .tpsv .tpsv-calc__segment button:not(.on) { background: none; box-shadow: none; color: #FFFFFF; } .tpsv .tpsv-calc__segment button:not(.on):hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); } .tpsv .tpsv-calc__segment button:not(.on) span { color: #FFFFFF; } .tpsv .tpsv-calc__segment button.on { background: #FFFFFF; color: #2D3C50; } .tpsv .tpsv-calc__segment button.on span { color: #A27777; } .tpsv .tpsv-calc__puces button { background: none; border-color: rgba(255,255,255,.45); color: #FFFFFF; } .tpsv .tpsv-calc__puces button.on { background: #FFFFFF; border-color: #FFFFFF; color: #2D3C50; } .tpsv .tpsv-calc .tpsv-barres > div > span { color: #FFFFFF; } .tpsv .tpsv-calc .tpsv-barres i { background: rgba(255,255,255,.88); } .tpsv .tpsv-calc .tpsv-barres > div.on i { background: #D9A6A6; } .tpsv .tpsv-calc .tpsv-barres b, .tpsv .tpsv-calc .tpsv-barres > div.on b { color: #2D3C50; } .tpsv .tpsv-calc .tpsv-taux li { background: rgba(255,255,255,.1); } .tpsv .tpsv-calc .tpsv-taux li.on { background: rgba(255,255,255,.18); } .tpsv .tpsv-calc .tpsv-taux strong { color: #FFFFFF; } .tpsv .tpsv-calc .tpsv-taux span { color: #D9A6A6; } .tpsv .tpsv-calc__res { justify-content: space-between; gap: 24px; padding-left: clamp(24px, 3.4vw, 52px); border-left: 1px solid rgba(255,255,255,.25); } .tpsv .tpsv-calc__haut, .tpsv .tpsv-calc__bas { flex: none; align-items: stretch; text-align: left; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; background: none !important; clip-path: none !important; } .tpsv .tpsv-calc__haut { gap: 18px; } .tpsv .tpsv-calc__haut .net { align-items: flex-start; gap: 4px; } .tpsv .tpsv-calc__haut .net small { font-family: Poppins, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #D9A6A6; } .tpsv .tpsv-calc__haut .net b { font-size: clamp(40px, 4vw, 58px); font-weight: 600; color: #FFFFFF; } .tpsv .tpsv-calc__haut .bulles { gap: 0; } .tpsv .tpsv-calc__haut .bulles div { flex-direction: row-reverse; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.22); border-radius: 0; background: none; text-align: left; } .tpsv .tpsv-calc__haut .bulles b { font-size: clamp(18px, 1.6vw, 22px); color: #FFFFFF; white-space: nowrap; } .tpsv .tpsv-calc__haut .bulles small { font-size: 14px; color: #FFFFFF; } .tpsv .tpsv-calc__bas { gap: 14px; } .tpsv .tpsv-calc__bas p { max-width: none; font-size: 14.5px; color: #FFFFFF; } .tpsv .tpsv-calc__bas .tpsv-btn { align-self: flex-start; opacity: 1; } .tpsv .tpsv-calc__methode { padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid rgba(255,255,255,.25); } .tpsv .tpsv-calc__methode h4, .tpsv .tpsv-calc__methode li, .tpsv .tpsv-calc__methode li b, .tpsv .tpsv-calc__methode .tpsv-mention { color: #FFFFFF; } .tpsv .tpsv-calc__methode li::before { color: #D9A6A6; } @media (max-width: 960px) { .tpsv .tpsv-calc__panneau { padding: 0 0 28px; } .tpsv .tpsv-calc__res { padding: 28px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.25); } } /* Critères : titre, précision terracotta, texte */ .tpsv-riche ul.tp-criteres li span em { display: block; margin: 2px 0 4px; font-family: Poppins, sans-serif; font-size: 12px; font-style: normal; font-weight: 600; color: var(--terra-fonce); } /* Simulateur placé dans un texte rédigé : dans la largeur du bloc, bouton jamais teinté comme un lien */ .tpsv .tpsv-section .tpsv-riche > .tpsv-calc { margin: 8px 0 28px; } .tpsv .tpsv-riche .tpsv-calc a.tpsv-btn { color: #FFFFFF; border-bottom: 0; } .tpsv .tpsv-riche .tpsv-calc ol { padding-left: 0; } .tpsv .tpsv-riche .tpsv-calc li { margin-bottom: 0; } /* Jamais deux blocs bleus l'un sous l'autre : un encadré qui suit un bloc bleu passe en aplat clair */ .tpsv .tpsv-section .tpsv-riche :is(.tpsv-calc, .tpg, ul.tp-check) + p.tp-encadre { background: #F3E7E2; color: var(--texte); } .tpsv .tpsv-section .tpsv-riche :is(.tpsv-calc, .tpg, ul.tp-check) + p.tp-encadre strong { color: var(--terra-fonce); } /* Le bleu ardoise est réservé à un seul grand bloc par page (simulateur ou graphique) : encadrés en aplat rosé, grille à cocher en aplat coquille d'œuf. */ .tpsv .tpsv-section .tpsv-riche p.tp-encadre { background: #F3E7E2; color: var(--texte); } .tpsv .tpsv-section .tpsv-riche p.tp-encadre strong { color: var(--terra-fonce); } .tpsv .tpsv-section .tpsv-bulle--clair .tpsv-riche p.tp-encadre { background: #FFFFFF; } .tpsv .tpsv-riche ul.tp-criteres.tp-check { background: #FFF8F4; } .tpsv .tpsv-section .tpsv-bulle--clair .tpsv-riche ul.tp-criteres.tp-check { background: #FFFFFF; } .tpsv .tpsv-riche ul.tp-check li { background: #FFFFFF; color: var(--texte); } .tpsv .tpsv-section .tpsv-bulle--clair .tpsv-riche ul.tp-check li { background: #FFF8F4; } .tpsv .tpsv-riche ul.tp-check li:hover { background: #F3E7E2; } .tpsv .tpsv-riche ul.tp-check li.ok { background: #F3E7E2; } .tpsv .tpsv-riche ul.tp-check li::before { border-color: #C9A08F; } .tpsv .tpsv-riche ul.tp-check li.ok::before { border-color: #A27777; background-color: #A27777; } .tp-check__tete span { color: var(--nuit); } .tp-check__tete em { color: var(--terra-fonce); } .tp-check__tete i { background: #E2D6CC; } .tp-check__tete i::after { background: #A27777; } .tpsv .tpsv-section .tpsv-riche ul.tp-chiffres li > p { margin: 0; font-size: 14.5px; line-height: 1.5; color: inherit; } /* texte avec liens, d'un seul tenant */ .tpsv-section .tpsv-riche:has(> .tpg-projets) { max-width: none; } @media (max-width: 760px) { .tpg-projets { grid-template-columns: minmax(0, 1fr) !important; } .tpg-projets > div:first-child { min-height: 220px !important; } } /* Gabarit G4 « Les étages » (template-parts/graphe-etages.php) : une colonne sur mobile, aplats pleine largeur. */ .tpsv-section .tpsv-riche:has(> .tpg-etages) { max-width: none; } @media (max-width: 860px) { .tpg-etages__etage { grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; margin: 0 !important; } } /* Gabarit G6 « Le curseur du temps » (template-parts/graphe-temps.php) : réglages et verdict dans la colonne de droite. */ .tpsv .tpg .tpg__reglages h3 { margin: 0 0 14px; font-family: Poppins, sans-serif; font-size: clamp(22px, 2vw, 26px); font-weight: 500; line-height: 1.2; color: #FFFFFF; } .tpsv .tpg .tpg__reglages label { display: block; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.22); cursor: pointer; } .tpsv .tpg .tpg__reglages label b { display: block; margin-bottom: 10px; font-size: 24px; } .tpsv .tpg .tpg__reglages > div span { font-size: 14.5px; line-height: 1.55; } .tpg--temps svg { overflow: visible; } /* Liste à flèches sur deux colonnes (ul.tp-fleches) : points à lister sans ordre, chevron terracotta, filets entre les lignes. */ .tpsv .tpsv-riche ul.tp-fleches { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); margin: 4px 0 24px; padding: 0; } .tpsv .tpsv-riche ul.tp-fleches li { position: relative; margin: 0; padding: 18px 0 18px 34px; border-top: 1px solid var(--filet); font-size: 15px; line-height: 1.55; color: var(--texte); } .tpsv .tpsv-riche ul.tp-fleches li::before { content: ""; position: absolute; left: 2px; top: 24px; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A27777' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: translate .25s ease-out; } .tpsv .tpsv-riche ul.tp-fleches li:hover::before { translate: 4px 0; } .tpsv .tpsv-riche ul.tp-fleches li span b { display: block; margin-bottom: 3px; font-family: Poppins, sans-serif; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--nuit); } @media (max-width: 760px) { .tpsv .tpsv-riche ul.tp-fleches { grid-template-columns: minmax(0, 1fr) !important; } } /* Menus déroulants de l'en-tête (template-parts/menu-deroulant.php) : pictogrammes qui se dessinent dès l'ouverture (l'animation repart à chaque affichage), chevrons nets en bordures, survols. */ @keyframes tpddTrace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } .tpdd .tpdd-trace { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tpddTrace .75s cubic-bezier(.45,.05,.25,1) forwards; animation-delay: calc(var(--i, 0) * 45ms); } @media (prefers-reduced-motion: reduce) { .tpdd .tpdd-trace { animation: none; stroke-dashoffset: 0; } } .tpdd-tete b, .tpdd-lien, .tpdd-tuile { transition: color .15s, background-color .15s; } .tpdd-tete:hover b { color: #FBE3DF !important; } .tpdd-tete:hover .tpdd-tuile { background: #A27777 !important; } .tpdd-tete:hover .tpdd-tuile svg { stroke: #FFFFFF !important; } .tpdd-lien::before { content: ""; grid-column: 1; grid-row: 1; width: 6px; height: 6px; margin-top: 6px; border-top: 1.8px solid #E8C2BE; border-right: 1.8px solid #E8C2BE; rotate: 45deg; translate: -1px 0; transition: translate .2s, border-color .15s; } .tpdd-lien:hover { background: #485B71; color: #FBE3DF !important; } .tpdd-lien:hover::before { translate: 1px 0; border-color: #FBE3DF; } .tpdd-cta { transition: background-color .2s; } .tpdd-cta:hover { background: #8F6A6A !important; color: #FFFFFF !important; } .tpdd-bouton::after { content: ""; width: 5px; height: 5px; border-top: 1.8px solid currentColor; border-right: 1.8px solid currentColor; rotate: 45deg; transition: translate .2s; } .tpdd-cta:hover .tpdd-bouton::after { translate: 3px 0; } @media (max-width: 1100px) { header .tpdd .tpdd-cols { grid-template-columns: repeat(2, minmax(0, 200px)) !important; } } @media (max-width: 760px) { header div.tpdd[style] { position: fixed !important; top: 102px !important; left: 16px !important; right: 16px !important; translate: none !important; width: auto !important; max-height: calc(100vh - 118px); overflow-y: auto; padding-top: 0 !important; } header .tpdd .tpdd-carte { grid-template-columns: minmax(0, 1fr) !important; } header .tpdd .tpdd-cols { grid-template-columns: minmax(0, 1fr) !important; } } .single-solution-investir-immobilier .tpsv-hero__photo img { object-position: 68% 30%; } /* Rubrique active du menu principal (trivium_menu_actif) : pastille blanche et point terracotta. */ header nav .tp-actif { background: #FFFFFF !important; color: #2D3C50 !important; } header nav .tp-actif svg { opacity: 1 !important; } /* Appel à l'action en cours de page (p.tp-rdv) : le bouton pilule terracotta du site, pas un lien souligné. */ .tpsol-texte p.tp-rdv { margin-top: 28px; } .tpsol-texte p.tp-rdv a.tpsv-btn { color: #FFFFFF; border-bottom: 0; } .tpsol-texte p.tp-rdv a.tpsv-btn::after { content: ""; width: 6px; height: 6px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; rotate: 45deg; transition: translate .2s; } .tpsol-texte p.tp-rdv a.tpsv-btn:hover::after { translate: 3px 0; } /* Trois cartes « chiffre clé » dans une section rédigée (div.tpsv-trio70) : dessin des cartes avant / après 70 ans, la carte du milieu décalée. */ .tpsv-riche div.tpsv-trio70 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; margin: 8px 0 28px; } .tpsv-riche div.tpsv-trio70 .tpsv-carte70 ul { margin: 18px 0 0; padding: 18px 0 0; font-size: 14.5px; } .tpsv-riche div.tpsv-trio70 .tpsv-carte70 li { margin: 0; align-items: flex-start; } .tpsv-riche div.tpsv-trio70 .tpsv-carte70 li .tpsv-ico { margin-top: -2px; } .tpsv-riche div.tpsv-trio70 .tpsv-carte70 li a { font-weight: 600; } .tpsv-riche div.tpsv-trio70 .tpsv-carte70--nuit li a { color: #FFFFFF; border-bottom-color: rgba(255,248,244,0.4); } .tpsv-riche div.tpsv-trio70 .tpsv-carte70 strong { font-weight: 600; } @media (max-width: 960px) { .tpsv-riche div.tpsv-trio70 { grid-template-columns: minmax(0, 1fr); } .tpsv-riche div.tpsv-trio70 .tpsv-carte70--nuit { margin-top: 0; } } /* Simulateur placé dans une section rédigée : le texte courant ne doit pas repasser en gris foncé sur le bleu. */ .tpsv .tpsv-riche .tpsv-calc :is(.tpsv-calc__tete p, .tpsv-calc__bas p, .tpsv-calc__methode li, .tpsv-calc__methode .tpsv-mention) { color: #FFFFFF; } /* Liste à flèches : sous-titre terracotta (em) entre le titre et le texte. */ .tpsv .tpsv-riche ul.tp-fleches li span em { display: block; margin: 0 0 4px; font-family: Poppins, sans-serif; font-size: 12.5px; font-style: normal; font-weight: 600; color: var(--terra-fonce); } /* Carte bleue des trios : tout le texte en blanc (le style du texte rédigé le repassait en foncé). */ .tpsv .tpsv-riche div.tpsv-trio70 .tpsv-carte70--nuit strong { color: #FFFFFF; } .tpsv .tpsv-riche div.tpsv-trio70 .tpsv-carte70--nuit .tpsv-carte70__sous, .tpsv .tpsv-riche div.tpsv-trio70 .tpsv-carte70--nuit li { color: #FFFFFF; } .tpsv .tpsv-riche div.tpsv-trio70 .tpsv-carte70--nuit a { color: #FFFFFF; border-bottom-color: rgba(255,255,255,0.5); } /* Texte toujours sur toute la largeur disponible (pas de trou à droite) : aucune limite de longueur de ligne sur les introductions, sections rédigées, volets, notes et paragraphes des fiches. */ .tpsv .tpsv-tete .tpsv-lead, .tpsv .tpsv-phrase, .tpsv-vfrise__etape p, .tpsv-parcours__texte, .tpsv-vtabs__panneau p, .tpsv .tpsv-comp__note p, .tpsv-fisc-acc, .tpsv .tpsv-fisc__intro, .tpsv-riche, .tpsv-riche.tpsv-libre-suite, .tpsv-section .tpsv-riche > :is(p, h3, h4, ul, ol), .tpsv-fisc--seul .tpsv-fisc__texte, .tpsv .tpsv-calc__tete p, .tpsv-accomp-grille .tpsv-rdv__texte, .tpsv .tpsv-onglets__panneau p { max-width: none !important; } .single-solution-expatries-non-residents .tpsv-hero__photo img { object-position: 62% 35%; } /* visage entier */ .single-solution-preparer-sa-retraite .tpsv-onglets__photo img { object-position: 55% 25%; } /* visages entiers */ .single-solution-chef-entreprise .tpsv-hero__photo img { object-position: 72% 25%; } /* visage du dirigeant entier */ .single-solution-chef-entreprise .tpsv-onglets__photo img { object-position: 55% 35%; } /* visages entiers */ /* Légendes sous les chiffres : semi-gras, un cran sous le chiffre */ .tpsv .tpsv-carte70__sous { font-family: Poppins, sans-serif; font-size: 15.5px; font-weight: 600; line-height: 1.4; color: var(--nuit); } .tpsv .tpsv-carte70--nuit .tpsv-carte70__sous, .tpsv .tpsv-riche div.tpsv-trio70 .tpsv-carte70--nuit .tpsv-carte70__sous { color: #FFFFFF; } .tpsv .tpsv-chiffres__ligne small { font-family: Poppins, sans-serif; font-size: 15px; font-weight: 600; color: #FFFFFF; } .tpsv .tpg .tpg__chiffres span { font-family: Poppins, sans-serif; font-size: 15px; font-weight: 600; } /* SFDR : « Article 6/8/9 » moins massifs */ .single-solution-investissement-responsable .tpsv .tpsv-riche ul.tp-chiffres li strong { font-size: clamp(26px, 2.3vw, 32px); } .single-solution-investissement-responsable .tpsv-onglets__photo img { object-position: 42% 22%; } /* visage entier */ /* Cartes à icône : pictogramme à côté du titre, partout */ .tpsv-identite > div { position: relative; min-height: 0; } .tpsv-identite svg { position: absolute; left: 24px; top: 24px; margin: 0; } .tpsv-identite small { display: flex; align-items: center; min-height: 24px; padding-left: 36px; } #libre2 .tpsv-riche ul:not(h3 ~ ul) li { position: relative; } #libre2 .tpsv-riche ul:not(h3 ~ ul) li::before { position: absolute; left: 24px; top: 26px; margin: 0; } #libre2 .tpsv-riche ul:not(h3 ~ ul) li strong { display: flex; align-items: center; min-height: 22px; padding-left: 34px; } .single-solution-proteger-sa-famille .tpsv-onglets__photo img { object-position: 45% 32%; } /* visages entiers */ /* Cartes chiffres : titres plus compacts, moins de scroll */ .tpsv .tpsv-riche ul.tp-chiffres li { padding: clamp(20px, 2vw, 26px); } .tpsv .tpsv-riche ul.tp-chiffres li strong { font-size: clamp(28px, 2.5vw, 34px); margin-bottom: 2px; } .single-solution-investissement-responsable .tpsv .tpsv-riche ul.tp-chiffres li strong { font-size: clamp(24px, 2.1vw, 30px); } .single-solution-optimiser-sa-fiscalite .tpsv-hero__photo img { object-position: 50% 28%; } /* visage entier */ /* Chiffres des cartes trio : plus compacts */ .tpsv .tpsv-carte70 strong.tpsv-num, .tpsv .tpsv-riche div.tpsv-trio70 .tpsv-carte70 strong.tpsv-num { font-size: clamp(26px, 2.2vw, 32px); } /* Barème des réductions : taux à gauche, filets, deux colonnes */ .tpsv .tpsv-riche ul.tp-taux { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 56px); margin: 18px 0 36px; padding: 0; } .tpsv .tpsv-riche ul.tp-taux li { display: grid; grid-template-columns: 132px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 4px 24px; margin: 0; padding: 22px 0; border-top: 1px solid #E2D6CC; } .tpsv .tpsv-riche ul.tp-taux li::before { display: none; } .tpsv .tpsv-riche ul.tp-taux li > b { grid-column: 1; grid-row: 1; font-family: Poppins, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; color: #A27777; } .tpsv .tpsv-riche ul.tp-taux li > small { grid-column: 1; grid-row: 2; font-family: Poppins, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; color: #A99A8E; } .tpsv .tpsv-riche ul.tp-taux li > div { grid-column: 2; grid-row: 1 / span 2; } .tpsv .tpsv-riche ul.tp-taux li strong { display: block; margin-bottom: 4px; font-family: Poppins, sans-serif; font-size: 17px; font-weight: 600; color: var(--nuit); } .tpsv .tpsv-riche ul.tp-taux li p { margin: 0; max-width: none; font-size: 14.5px; line-height: 1.55; } @media (max-width: 760px) { .tpsv .tpsv-riche ul.tp-taux { grid-template-columns: minmax(0, 1fr); } .tpsv .tpsv-riche ul.tp-taux li { grid-template-columns: 104px minmax(0, 1fr); } } .single-solution-proteger-sa-famille .tpsv-hero__photo img { object-position: 50% 45%; } /* toute la famille sous le toit */ /* Actualités : chaque note dans un encart blanc, relevé au survol */ .tpac-carte { transition: box-shadow .35s ease, transform .35s cubic-bezier(.2,.8,.2,1); } .tpac-carte:hover, .tpac-carte:focus-visible { transform: translateY(-4px); box-shadow: 0 0 0 1px #C9D8E8, 0 18px 40px -18px rgba(39,51,67,.22) !important; } .tpac-carte img { transition: transform .6s cubic-bezier(.2,.8,.2,1); } .tpac-carte:hover img { transform: scale(1.03); } /* Pages famille de Nos solutions : lignes cliquables vers les fiches */ .tpfa-ligne { transition: background-color .25s; } .tpfa-ligne:hover { background: rgba(255,255,255,.55); } .tpfa-ligne .tpfa-fleche { transition: background-color .25s, color .25s, translate .25s; } .tpfa-ligne:hover .tpfa-fleche { background: #A27777 !important; color: #FFFFFF !important; translate: 3px 0; } @media (max-width: 900px) { .tpfa-tete, .tpfa-accomp, .tpfa-faq, .tpfa-criteres { grid-template-columns: minmax(0, 1fr) !important; } .tpfa-ligne { grid-template-columns: 52px minmax(0, 1fr) 40px !important; } .tpfa-ligne > span:nth-child(3) { grid-column: 2 / -1; grid-row: 2; } .tpfa-chiffres { grid-template-columns: minmax(0, 1fr) !important; } .tpfa-chiffres > div { border-left: 0 !important; padding-left: 0 !important; } } /* Devenir partenaire : formulaire, profils cliquables, mise en page mobile */ .tppa-form input:focus, .tppa-form select:focus, .tppa-form textarea:focus { outline: none; border-color: #A27777 !important; background-color: #FFFFFF !important; } /* bleu ciel au repos */ .tppa-profil { transition: background .25s, translate .25s; } .tppa-profil:hover { background: rgba(255,255,255,0.12) !important; translate: 0 -4px; } .tppa-profil:hover .tppa-profil-cta { background: #A27777 !important; color: #FFFFFF !important; } @media (max-width: 1100px) { .tppa-profils, .tppa-apports { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 900px) { .tppa-hero, .tppa-etapes-bloc, .tppa-final { grid-template-columns: minmax(0, 1fr) !important; } .tppa-final > div:last-child { justify-content: flex-start !important; } } @media (max-width: 600px) { .tppa-profils, .tppa-apports, .tppa-duo { grid-template-columns: minmax(0, 1fr) !important; } } /* ===== Mobile : en-tête et menu (template-parts/menu-mobile.php) ===== */ .tpmm-ouvrir, .tpmm-panneau { display: none; } @media (max-width: 900px) { header nav { display: none !important; } header .tpm41 { width: 46px; padding: 0 !important; justify-content: center; font-size: 0 !important; gap: 0 !important; } header .tpm40 { padding: 13px 18px !important; font-size: 14px !important; } header[style*="position: sticky"] > div { justify-content: space-between !important; min-height: 72px !important; } header[style*="position: sticky"] img { height: 40px !important; } .tpmm-ouvrir { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 46px; height: 46px; flex-shrink: 0; border: 0; border-radius: 999px; background: #273343; cursor: pointer; } .tpmm-ouvrir span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #FFFFFF; } .tpmm-panneau:not([hidden]) { display: flex; position: fixed; inset: 0; z-index: 300; flex-direction: column; gap: 22px; padding: 18px 20px 28px; background: #273343; color: #FFFFFF; overflow-y: auto; } .tpmm-haut { display: flex; align-items: center; justify-content: space-between; } .tpmm-fermer { position: relative; width: 46px; height: 46px; border: 0; border-radius: 999px; background: rgba(255,255,255,0.12); cursor: pointer; } .tpmm-fermer span { position: absolute; left: 14px; top: 22px; width: 18px; height: 2px; border-radius: 2px; background: #FFFFFF; rotate: 45deg; } .tpmm-fermer span + span { rotate: -45deg; } .tpmm-nav { display: flex; flex-direction: column; } .tpmm-groupe { border-bottom: 1px solid rgba(255,255,255,0.14); } .tpmm-groupe summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 18px 2px; cursor: pointer; font-family: Poppins, sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: #FFFFFF; } .tpmm-groupe summary::-webkit-details-marker { display: none; } .tpmm-plus { position: relative; width: 30px; height: 30px; border-radius: 50%; background: #A27777; flex-shrink: 0; } .tpmm-plus::before, .tpmm-plus::after { content: ""; position: absolute; left: 9px; top: 14px; width: 12px; height: 2px; background: #FFFFFF; transition: rotate .2s; } .tpmm-plus::after { rotate: 90deg; } .tpmm-groupe[open] .tpmm-plus::after { rotate: 0deg; } .tpmm-contenu { display: flex; flex-direction: column; gap: 2px; padding: 0 2px 18px; } .tpmm-rubrique { margin-top: 12px; padding: 6px 0; font-family: Poppins, sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #E8C2BE; } .tpmm-lien { padding: 9px 0 9px 14px; border-left: 2px solid rgba(255,255,255,0.16); font-size: 16px; line-height: 1.35; color: #FFFFFF; } .tpmm-bas { display: flex; flex-direction: column; gap: 10px; margin-top: auto; } .tpmm-btn { display: flex; justify-content: center; padding: 16px 22px; border-radius: 999px; background: rgba(255,255,255,0.12); font-family: Poppins, sans-serif; font-size: 15px; font-weight: 500; color: #FFFFFF; } .tpmm-btn--terra { background: #A27777; } } /* ===== Mobile : mise en page générale ===== */ @media (max-width: 860px) { /* Le texte passe avant l'image : jamais deux images collées d'un bloc à l'autre */ :is([style*="grid-template-columns: minmax(0"], [style*="grid-template-columns: 0."], [style*="grid-template-columns: 1"]) > :has(img):not(:has(h1, h2, h3, h4, p, li, form, blockquote)) { order: 2; } /* Filigranes et images purement décoratives : masqués */ img[src*="monogramme"], img[aria-hidden="true"][alt=""][style*="position: absolute"][style*="opacity"] { display: none !important; } /* Textes plus compacts */ main p { font-size: 15.5px !important; line-height: 1.65 !important; } main h3 { font-size: clamp(17px, 4.8vw, 20px) !important; } /* Blocs mieux séparés */ main > section, main section { padding-top: 56px !important; padding-bottom: 0 !important; } main > section:first-child, main > section:first-of-type { padding-top: 12px !important; } /* Rien ne dépasse */ main img, main video, main iframe, main table { max-width: 100%; } main table { display: block; overflow-x: auto; } /* Annonce du haut plus discrète */ body > div > div:first-child > div[style*="background: #2D3C50"] { font-size: 13px !important; padding: 10px 16px !important; gap: 10px !important; } } @media (max-width: 860px) { /* Petites cartes de chiffres : deux par ligne */ [style*="repeat(2, minmax(0, 190px))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } [style*="repeat(auto-fit, minmax(140px, 1fr))"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 860px) { /* Un élément « sur 2 colonnes » ne doit pas recréer de colonne fantôme une fois tout empilé */ [style*="grid-template-columns"] > [style*="grid-column"] { grid-column: 1 / -1 !important; } } @media (max-width: 860px) { /* Encart rendez-vous : il ne chevauche plus la bande newsletter, sans forme décorative */ [style*="margin-bottom: calc(-1 * clamp(56px"] { margin-bottom: 0 !important; } [style*="margin-bottom: calc(-1 * clamp(56px"] > span[aria-hidden="true"][style*="position: absolute"] { display: none !important; } /* Nous connaître : la photo du fondateur sans l'encart du bas (le bouton est déjà au-dessus) */ [style*="aspect-ratio: 1 / 1"] > div[style*="position: absolute"][style*="bottom: 16px"] { display: none !important; } } @media (max-width: 860px) { /* Notre méthode : sans la frise de pastilles, chaque étape prend toute la largeur */ .tpme-pin, .tpme-track { display: none !important; } .tpme-row > article { padding: 26px 20px !important; border-radius: 26px !important; } .tpme-row > article > div[style*="background: #54687F"] { padding: 24px 20px !important; border-radius: 22px !important; } /* Étapes de vie : des cartes de couleur, sans photos empilées */ .tpme-vie { min-height: 0 !important; text-align: left; } .tpme-vie > img, .tpme-vie > span[aria-hidden="true"] { display: none !important; } .tpme-vie > span[style*="position: absolute"] { position: static !important; padding: 24px 22px !important; } .tpme-vie:nth-child(4n+1) { background: #31405A !important; } .tpme-vie:nth-child(4n+2) { background: #54687F !important; } .tpme-vie:nth-child(4n+3) { background: #A27777 !important; } .tpme-vie:nth-child(4n+4) { background: #33445A !important; } } @media (max-width: 860px) { /* Fiches : la carte d'identité en deux colonnes compactes */ .tpsv-identite { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } .tpsv-identite > div { padding: 16px 14px !important; gap: 8px !important; border-radius: 20px !important; } .tpsv-identite small { padding-left: 30px !important; font-size: 10px !important; } .tpsv-identite svg { left: 14px !important; top: 16px !important; width: 20px; height: 20px; } .tpsv-identite b { font-size: 15.5px !important; } } /* Les adresses email longues se coupent proprement au lieu de sortir du cadre */ a[href^="mailto:"], a[href^="mailto:"] * { overflow-wrap: anywhere; } @media (max-width: 860px) { /* Article : boutons de partage en ligne, au-dessus du texte */ aside[style*="position: sticky"]:has(a[aria-label="LinkedIn"]) { flex-direction: row !important; align-items: center; } aside:has(a[aria-label="LinkedIn"]) > span[style*="writing-mode"] { margin: 0 6px 0 0 !important; } /* Actualités : filtres sur une ligne qui défile, recherche pleine largeur */ div:has(> .tpac-filtre) { flex-wrap: nowrap !important; overflow-x: auto; max-width: 100%; scrollbar-width: none; } div:has(> .tpac-filtre)::-webkit-scrollbar { display: none; } .tpac-filtre { flex-shrink: 0; } form[role="search"] { margin-left: 0 !important; width: 100%; } form[role="search"] input { width: 100% !important; } } @media (max-width: 860px) { .tpme-sous { padding: 22px 18px !important; border-radius: 22px !important; } } /* Notre méthode : les trois étapes nettement séparées */ .tpme-frise > .tpme-row + .tpme-row { margin-top: clamp(28px, 4vw, 64px); } /* Notre méthode : étapes de vie en aplats, 5 de front puis 2 par ligne sur tablette */ @media (max-width: 1100px) { .tpme-vies-plat { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .tpme-vies-plat > div:last-child { grid-column: 1 / -1; } } @media (max-width: 860px) { .tpme-vies-plat { grid-template-columns: minmax(0, 1fr) !important; } } .tpdd-cta > span:nth-of-type(3) { font-weight: 400 !important; } /* texte de la carte : plus de graisse 300, trop fine sur le terracotta */ .tpdd-cta { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .tpdd-bouton { transition: background-color .2s, border-color .2s; } .tpdd-cta:hover .tpdd-bouton { background: rgba(255,255,255,0.26) !important; border-color: rgba(255,255,255,0.7) !important; } /* « Vous êtes » : flèche fine juste après le texte choisi, avec une marge, plus jamais collée à la bordure */ .tppa-select { -webkit-appearance: none; appearance: none; field-sizing: content; width: auto !important; max-width: 100%; min-width: 220px; align-self: flex-start; padding-right: 46px !important; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A27777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 18px center !important; background-size: 15px !important; } @media (max-width: 600px) { .tppa-select { align-self: stretch; } } /* Devenir partenaire : « Ce que nous construisons ensemble », trois cartes et une carte d'appel à l'action */ .tppa-apport { transition: translate .35s cubic-bezier(.2,.8,.2,1); } .tppa-apport:hover { translate: 0 -4px; } .tppa-apport-btn { transition: background-color .2s, color .2s; } .tppa-apport-btn:hover { background: #273343 !important; color: #FFFFFF !important; } @media (max-width: 1100px) { .tppa-autres { grid-template-columns: minmax(0, 1fr) !important; justify-items: start; } } /* Définition sur plusieurs blocs : paragraphes et leviers en cartes (une ligne, pour limiter le scroll) */ .tpsv-def-suite { margin-top: 28px; display: flex; flex-direction: column; gap: 22px; } .tpsv-def-suite p { margin: 0; font-size: clamp(15.5px, 1.15vw, 17px); line-height: 1.75; color: #E4E9EF; } .tpsv-def-cartes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } .tpsv-def-cartes li { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border-radius: 24px; background: rgba(255,255,255,0.08); font-size: 15px; line-height: 1.65; color: #E4E9EF; } .tpsv-def-cartes strong { font-family: Poppins, sans-serif; font-size: 17px; font-weight: 600; line-height: 1.3; color: #FBE3DF; } /* Écran de chargement (template-parts/loader.php) : tracé du monogramme, nom en fondu, rideau qui se lève */ @keyframes tpLoaderTrace { from { stroke-dashoffset: -1; } to { stroke-dashoffset: 0; } } /* -1 : le trait part de la fin du tracé (trait intérieur) et finit par la petite queue */ @keyframes tpLoaderNom { from { opacity: 0; translate: 0 10px; letter-spacing: 0.32em; } to { opacity: 1; translate: 0 0; letter-spacing: 0.22em; } } @keyframes tpLoaderFilet { from { transform: scaleX(0); } to { transform: scaleX(1); } } .tp-loader { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: #273343; transition: clip-path .9s cubic-bezier(.76,0,.24,1); clip-path: inset(0 0 0 0); } .tp-loader--fin { clip-path: inset(0 0 100% 0); } .tp-loader__centre { display: flex; flex-direction: column; align-items: center; gap: 26px; } .tp-loader__logo path { stroke-dasharray: 1; stroke-dashoffset: -1; animation: tpLoaderTrace 1.5s cubic-bezier(.65,0,.35,1) .15s forwards; } .tp-loader__nom { font-family: Poppins, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #FFF8F4; opacity: 0; animation: tpLoaderNom .7s ease-out 1.55s forwards; } .tp-loader__filet { width: 120px; height: 1.5px; background: #C0A17A; transform: scaleX(0); transform-origin: left; animation: tpLoaderFilet .8s cubic-bezier(.65,0,.35,1) 1.75s forwards; } /* ===== Mobile : accueil (agréments, cabinet, clients, expertises) ===== */ @media (max-width: 860px) { /* Agréments du haut : le libellé sur sa propre ligne, les pastilles en dessous */ .tp-agr-libelle { flex-basis: 100%; padding: 0 0 2px !important; } /* Le cabinet : sans la mosaïque de photos */ .tp-cabinet-photo { display: none !important; } /* Nos clients : bloc bien détaché du cabinet, titre centré, noms sur deux lignes */ main section.tp-clients { padding-top: 96px !important; flex-direction: column !important; align-items: center !important; gap: 22px !important; } .tp-clients__titre { align-items: center; text-align: center; max-width: none !important; } .tp-clients__ligne { display: none !important; } .tp-clients__mobile { display: flex !important; } /* Ingénierie patrimoniale : plus rapprochée des clients */ #solutions.tp-expertises { margin-top: 64px !important; } } /* ===== Mobile : ouverture du menu (rideau comme le loader, rubriques une à une) ===== */ @media (max-width: 900px) { .tpmm-panneau:not([hidden]) { clip-path: inset(0 0 100% 0); transition: clip-path .7s cubic-bezier(.76,0,.24,1); } .tpmm-panneau.tpmm--ouvert { clip-path: inset(0 0 0 0); } .tpmm-haut, .tpmm-groupe, .tpmm-bas > * { opacity: 0; translate: 0 16px; transition: opacity .35s ease, translate .35s ease; } .tpmm--ouvert :is(.tpmm-haut, .tpmm-groupe, .tpmm-bas > *) { opacity: 1; translate: 0 0; transition: opacity .55s ease, translate .7s cubic-bezier(.22,1,.36,1); } .tpmm--ouvert .tpmm-haut { transition-delay: .25s; } .tpmm--ouvert .tpmm-groupe:nth-child(1) { transition-delay: .32s; } .tpmm--ouvert .tpmm-groupe:nth-child(2) { transition-delay: .39s; } .tpmm--ouvert .tpmm-groupe:nth-child(3) { transition-delay: .46s; } .tpmm--ouvert .tpmm-groupe:nth-child(4) { transition-delay: .53s; } .tpmm--ouvert .tpmm-groupe:nth-child(5) { transition-delay: .6s; } .tpmm--ouvert .tpmm-bas > :nth-child(1) { transition-delay: .68s; } .tpmm--ouvert .tpmm-bas > :nth-child(2) { transition-delay: .74s; } /* Sous-menus : hauteur animée par le script, liens qui apparaissent l'un après l'autre */ .tpmm-contenu { overflow: hidden; } .tpmm-groupe summary { transition: color .25s; } .tpmm-groupe[open] summary { color: #E8C2BE; } .tpmm-plus::before, .tpmm-plus::after { transition: rotate .35s cubic-bezier(.22,1,.36,1); } @keyframes tpmmLien { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } } .tpmm-groupe.tpmm--deplie .tpmm-contenu > * { animation: tpmmLien .45s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--n, 0) * 35ms + 60ms); } } @media (max-width: 900px) and (prefers-reduced-motion: reduce) { .tpmm-panneau:not([hidden]), .tpmm-haut, .tpmm-groupe, .tpmm-bas > * { transition: none !important; } .tpmm-groupe.tpmm--deplie .tpmm-contenu > * { animation: none; } } @media (max-width: 860px) { /* Nos expertises : chaque onglet porte un chevron, le détail se déplie dessous (js/trivium-app.js) */ #solutions [data-tp-on-click^="s"]::after { content: ""; flex-shrink: 0; width: 8px; height: 8px; margin: 0 4px 0 auto; border-right: 2px solid #D9A6A6; border-bottom: 2px solid #D9A6A6; rotate: 45deg; translate: 0 -3px; transition: rotate .35s cubic-bezier(.22,1,.36,1), translate .35s; } #solutions [data-tp-on-click^="s"].tp-exp--ouvert::after { rotate: -135deg; translate: 0 2px; } #solutions .tp-exp-panneau { flex-shrink: 0; overflow: hidden; margin: 6px 0 12px; border-radius: 22px !important; } #solutions .tp-exp-panneau > div:first-child { padding: 20px 18px 6px !important; gap: 16px !important; } #solutions .tp-exp-panneau > div:first-child > div:first-child > div:first-child { display: none !important; } /* titre déjà dans l'onglet */ #solutions .tp-exp-panneau > div:first-child > div[style*="grid-template-columns"] { gap: 8px !important; } #solutions .tp-exp-panneau > div:first-child > div[style*="grid-template-columns"] > span { padding: 12px 14px !important; } #solutions .tp-exp-panneau > div:first-child > div:last-child { padding-bottom: 18px !important; } #solutions .tp-exp-panneau > div:nth-child(2) { margin: 0 !important; border-radius: 0 !important; min-height: 200px !important; flex: none !important; } /* photo : pleine largeur jusqu'au bas du bloc */ } /* ===== Mobile : espacements et blocs de l'accueil (retours du 3 novembre) ===== */ @media (max-width: 860px) { /* Blocs de couleur arrondis : autant d'air en bas qu'en haut, et un écart régulier entre les blocs */ main section[style*="border-radius"] { padding-bottom: 56px !important; margin-top: 56px !important; } main section.tp-expertises { margin-top: 56px !important; } /* Notre méthode : les trois étapes à la même distance les unes des autres, la première plus près du texte */ [style*="grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr)"] { gap: 12px !important; } [style*="grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr)"] > * { margin-top: 0 !important; } [style*="grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr)"] > :not([style*="background"]) { display: none !important; } #pourquoi-bilan { gap: 22px !important; } /* Actualités : titre comme les autres titres de section (pas en capitales) */ #actualites h2 { text-transform: none !important; letter-spacing: -0.02em !important; font-size: clamp(26px, 7vw, 30px) !important; line-height: 1.15 !important; } /* Vos besoins : une carte à la fois (et le début de la suivante), on fait glisser ou on utilise les flèches */ [data-guide-card] { flex: 0 0 86% !important; min-height: 300px; } #besoins :has(> [data-tp-style*="background:dot0"]) { display: none !important; } /* points du carrousel, calés sur l'ordinateur */ #besoins div:has(> [data-guide-card]) { flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; } /* Parlons de votre patrimoine : tout centré, et de l'air avant le pied de page */ [style*="margin-bottom: calc(-1 * clamp(56px"] { margin-bottom: 48px !important; text-align: center; } [style*="margin-bottom: calc(-1 * clamp(56px"] > div { align-items: center; } [style*="margin-bottom: calc(-1 * clamp(56px"] > div > div { justify-items: center !important; } [style*="margin-bottom: calc(-1 * clamp(56px"] a { justify-content: center; } } /* Libellés de bouton raccourcis sur mobile */ .tp-txt-court { display: none; } @media (max-width: 860px) { .tp-txt-long { display: none; } .tp-txt-court { display: inline; } } /* ===== Mobile : pied de page entièrement centré ===== */ @media (max-width: 860px) { footer { text-align: center; } footer :is(div, form)[style*="flex-direction: column"] { align-items: center !important; } footer [style*="display: flex"] { justify-content: center !important; } footer a[style*="display: flex"], footer a[style*="display: inline-flex"] { justify-content: center !important; text-align: center; } footer a.tpnc1 { align-self: center !important; } footer .tpfsol-head, footer span[style*="border-bottom: 1px solid"] { align-self: stretch; } footer [style*="border-top: 1px solid"] { flex-direction: column !important; align-items: center !important; } footer img { margin: 0 auto; } footer p { margin-left: auto !important; margin-right: auto !important; } } @media (max-width: 860px) { /* Nous connaître : l'étiquette « Corentin Grellier » en bas de la photo, plus sur son visage */ [style*="aspect-ratio: 1 / 1"] > span[style*="top: 16px"][style*="left: 16px"] { top: auto !important; bottom: 16px; } } @media (max-width: 860px) { /* Nous connaître, Nos solutions : chevron sur chaque famille, solutions dépliées dessous */ [data-tp-expertise-boite] { display: none !important; } button[data-tp-expertise] { display: flex !important; width: 100%; text-align: left; } button[data-tp-expertise]::after { content: ""; flex-shrink: 0; width: 8px; height: 8px; margin: 0 4px 0 auto; border-right: 2px solid #D9A6A6; border-bottom: 2px solid #D9A6A6; rotate: 45deg; translate: 0 -3px; transition: rotate .35s cubic-bezier(.22,1,.36,1), translate .35s; } button[data-tp-expertise].tp-exp--ouvert::after { rotate: -135deg; translate: 0 2px; } .tp-exp-volet { flex-shrink: 0; overflow: hidden; margin: 6px 0 12px; padding: 20px 18px !important; border-radius: 22px; background: #FFFFFF; gap: 14px !important; } .tp-exp-volet > div:first-child { display: none !important; } /* nom de la famille déjà dans l'onglet */ } @media (max-width: 860px) { /* Nous connaître, témoignages : les encarts côte à côte, un à la fois, on glisse ou on utilise les flèches */ .tpnc-track:is(#tp-x, .tpnc-track) { flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; } .tpnc-track > figure { flex: 0 0 86% !important; } /* Nous connaître : sans la mosaïque photo du bas */ .tp-nc-photo-bas { display: none !important; } } @media (max-width: 960px) { /* Étapes numérotées (accompagnement Trivium Patrimoine, accès…) : le numéro juste à côté du titre */ .tpsv .tpsv-riche ol.tp-escalier li { display: grid !important; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: none !important; grid-auto-rows: auto; column-gap: 12px; row-gap: 6px; align-items: baseline; } .tpsv .tpsv-riche ol.tp-escalier li::before { grid-column: 1; grid-row: 1; } .tpsv .tpsv-riche ol.tp-escalier li > strong { grid-column: 2; grid-row: 1; align-self: baseline; } .tpsv .tpsv-riche ol.tp-escalier li > :is(span, p, em) { grid-column: 1 / -1; } } @media (max-width: 860px) { /* Actualités : filtres sur une ligne qui défile, sans le grand fond coquille d'œuf */ .tpac-filtres:is(#tp-x, .tpac-filtres) { flex-wrap: nowrap !important; overflow-x: auto; max-width: 100%; width: 100%; padding: 2px 0 6px !important; border-radius: 0 !important; background: none !important; gap: 8px !important; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); } .tpac-filtres::-webkit-scrollbar { display: none; } .tpac-filtres .tpac-filtre { flex-shrink: 0; border: 1px solid #E2D6CC; } .tpac-filtres .tpac-filtre.on { border-color: transparent; } } @media (max-width: 860px) { /* Article : une seule colonne (partage, texte, puis encarts « Bilan » et « À lire aussi ») */ .tp-grid-2[style*="grid-template-columns: 62px"] { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; } .tp-grid-2[style*="grid-template-columns: 62px"] > aside { position: static !important; } } @media (max-width: 960px) { .tpsv .tpsv-riche ol.tp-escalier li > :is(span, p, em) { hyphens: manual; -webkit-hyphens: manual; } } @media (max-width: 860px) { /* Mentions légales : sommaire en pastilles compactes sur plusieurs lignes */ .tp-ml-sommaire:is(#tp-x, .tp-ml-sommaire) { flex-direction: row !important; flex-wrap: wrap !important; gap: 6px !important; } .tp-ml-sommaire > span { flex-basis: 100%; } .tp-ml-sommaire > a { padding: 8px 13px !important; font-size: 13px !important; } } @media (max-width: 860px) { /* Newsletter du pied de page : bande pile à la largeur de l'écran, champ avec ses marges */ footer #newsletter.tpnl-row { align-self: stretch !important; margin-left: -20px !important; margin-right: -20px !important; padding-left: 20px !important; padding-right: 20px !important; } } /* Bandeau de consentement Google Analytics (inc/seo-outils.php) */ .tp-cookies { position: fixed; left: 20px; bottom: 20px; z-index: 9999; width: min(420px, calc(100vw - 40px)); padding: 22px 22px 20px; border-radius: 24px; background: #FFFFFF; box-shadow: 0 30px 70px -30px rgba(39, 51, 67, 0.45), 0 0 0 1px #EFE9E2; font-family: Manrope, sans-serif; color: #3E4A5A; animation: tpCookies .5s cubic-bezier(.22,1,.36,1); } .tp-cookies[hidden] { display: none; } @keyframes tpCookies { from { opacity: 0; transform: translateY(16px); } } .tp-cookies__titre { margin: 0 0 6px; font-family: Poppins, sans-serif; font-size: 15px; font-weight: 600; color: #273343; } .tp-cookies__texte { margin: 0 0 16px; font-size: 13.5px; line-height: 1.6; } .tp-cookies__texte a { color: #A27777; text-decoration: underline; } .tp-cookies__boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .tp-cookies__boutons button { padding: 12px 16px; border: 0; border-radius: 999px; font-family: Poppins, sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .2s; } .tp-cookies__boutons [data-tp-choix="non"] { background: #F4F7FA; color: #273343; box-shadow: inset 0 0 0 1px #E2D6CC; } .tp-cookies__boutons [data-tp-choix="non"]:hover { background: #EFE9E2; } .tp-cookies__boutons [data-tp-choix="oui"] { background: #273343; color: #FFFFFF; } .tp-cookies__boutons [data-tp-choix="oui"]:hover { background: #31405A; } @media (max-width: 560px) { .tp-cookies { left: 12px; right: 12px; bottom: 12px; width: auto; } }