en via wpautop : le dernier
de la carte contient le lien */
.triv-voie-card > p:last-child {
margin-top: auto !important;
margin-bottom: 0 !important;
text-align: center !important;
padding-top: 22px !important;
border-top: 1px solid rgba(201, 169, 97, 0.18);
width: 100%;
}
/* Le lien lui-même : inline-block centré dans son
parent */
.triv-voie-card .triv-voie-link,
.triv-voie-card a.triv-voie-link {
display: inline-block !important;
margin-top: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
width: auto !important;
text-align: center !important;
font-size: 12px !important;
letter-spacing: 2.5px !important;
font-weight: 600 !important;
}
/* Garantir que tous les
SAUF le dernier laissent de la place pour pousser le lien */
.triv-voie-card > p:not(:last-child),
.triv-voie-card > h3,
.triv-voie-card > ul {
flex-shrink: 0;
}
/* La
reste a sa hauteur naturelle, espace au-dessus du lien gere par margin-top auto */
.triv-voie-card > ul {
margin-bottom: 0 !important;
}
/* =====================================================================
AB. Section "Notre conviction" — cohérence titre/texte + fondu
===================================================================== */
section[data-triv="conviction"] {
color: var(--triv-text-dark);
position: relative;
}
section[data-triv="conviction"] .triv-eyebrow {
font-size: 11px !important;
letter-spacing: 4px !important;
font-weight: 600 !important;
color: var(--triv-gold) !important;
opacity: 0.9;
margin-bottom: 8px;
}
.triv-conviction-title,
section[data-triv="conviction"] h2.triv-conviction-title,
section[data-triv="conviction"] h2 {
font-family: var(--triv-font-title) !important;
font-size: clamp(30px, 4vw, 48px) !important;
font-weight: 500 !important;
color: var(--triv-white) !important;
letter-spacing: 0.5px;
line-height: 1.25;
margin: 22px 0 36px !important;
}
section[data-triv="conviction"] p:not(.triv-eyebrow):not(.triv-conviction-quote) {
font-family: var(--triv-font-body) !important;
font-size: 18px !important;
line-height: 1.85 !important;
color: rgba(245, 245, 245, 0.78) !important;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.triv-conviction-quote,
section[data-triv="conviction"] p.triv-conviction-quote {
font-family: var(--triv-font-title) !important;
font-style: italic !important;
font-size: 22px !important;
color: var(--triv-gold) !important;
margin: 36px auto 0 !important;
line-height: 1.5 !important;
max-width: 640px !important;
}
/* =====================================================================
AC. Transition fondu : la section voies commence sur #141414
(deja en place via inline style, mais on s'assure de la continuité)
===================================================================== */
/* La section apres "conviction" qui contient les cartes : meme #141414 */
section[data-triv="conviction"] + section[style*="#141414"],
section[data-triv="conviction"] + section[style*="background-color:#141414"],
section[data-triv="conviction"] + section[style*="background-color: #141414"] {
background-color: #141414 !important;
border-top: 0 !important;
}
/* =====================================================================
AD. Hero home : texte CENTRE verticalement (apres retrait du bouton)
===================================================================== */
body.home .triv-hero {
align-items: center !important;
padding-top: 12vh !important;
padding-bottom: 8vh !important;
text-align: center;
}
@media (max-width: 768px) {
body.home .triv-hero {
padding-top: 10vh !important;
padding-bottom: 6vh !important;
}
}
/* =====================================================================
AE. Header sticky/fixed partout (toutes les pages)
===================================================================== */
.ct-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 999 !important;
background-color: rgba(10, 10, 10, 0.92) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: background-color 250ms ease, padding 250ms ease;
}
/* Sur la home aussi : meme regle (override de l'ancien position:absolute) */
body.home .ct-header {
position: fixed !important;
top: 0 !important;
background-color: rgba(10, 10, 10, 0.75) !important;
}
/* Pages internes : compenser la hauteur du header fixed avec du padding sur le main */
body:not(.home) main,
body:not(.home) #main {
padding-top: 80px !important;
}
/* Si Blocksy met un hero-section (page-title) en haut, garder padding mais l'hero garde sa hauteur */
body:not(.home) .hero-section {
margin-top: 0;
}
/* Mobile : compensation un poil moindre */
@media (max-width: 768px) {
body:not(.home) main,
body:not(.home) #main {
padding-top: 64px !important;
}
}
/* Header devient un peu plus opaque au scroll */
.ct-header.ct-sticky-active,
.ct-header[data-sticky="yes"][data-sticky-state="active"],
body.home .ct-header.ct-sticky-active {
background-color: var(--triv-black) !important;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6) !important;
}
/* =====================================================================
AF. Conviction quote : font-weight bold pour renforcer
===================================================================== */
.triv-conviction-quote,
section[data-triv="conviction"] p.triv-conviction-quote {
font-weight: 700 !important;
font-style: italic !important;
}
/* =====================================================================
AG. Dropdown menu (sous-menu SERVICES > Voies)
===================================================================== */
/* Chevron Blocksy SVG natif : ajuster taille + animation au hover */
.ct-header .ct-toggle-dropdown-desktop {
margin-left: 8px;
transition: transform 250ms ease;
display: inline-flex;
align-items: center;
}
.ct-header .menu-item-has-children:hover > a .ct-toggle-dropdown-desktop {
transform: translateY(2px);
}
.ct-header .ct-toggle-dropdown-desktop svg {
width: 7px !important;
height: 7px !important;
fill: currentColor !important;
}
/* Le sous-menu : fond noir + bordure doree fine */
.ct-header .sub-menu,
.ct-header .menu-item .sub-menu,
.ct-header .menu-item-has-children .sub-menu {
background-color: var(--triv-black) !important;
border: 1px solid rgba(201, 169, 97, 0.18) !important;
padding: 10px 0 !important;
min-width: 280px !important;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6) !important;
border-radius: 0 !important;
backdrop-filter: blur(12px);
margin-top: 8px;
}
/* Items du sous-menu : font normale (pas uppercase) */
.ct-header .sub-menu .menu-item > a,
.ct-header .sub-menu .menu-item a {
text-transform: none !important;
letter-spacing: 0.4px !important;
font-size: 13.5px !important;
font-family: var(--triv-font-body) !important;
font-weight: 400 !important;
padding: 11px 20px !important;
color: var(--triv-text-dark) !important;
border-bottom: 0 !important;
display: block;
transition: color 200ms ease, background-color 200ms ease, padding-left 200ms ease;
}
.ct-header .sub-menu .menu-item > a::after {
display: none !important;
}
/* Hover dans le sous-menu */
.ct-header .sub-menu .menu-item > a:hover,
.ct-header .sub-menu .menu-item.current-menu-item > a {
color: var(--triv-gold) !important;
background-color: rgba(201, 169, 97, 0.08) !important;
padding-left: 26px !important;
}
.ct-header .sub-menu .menu-item > a:hover .ct-menu-link-text {
color: var(--triv-gold) !important;
}
/* Pas de souligne doré sous les items du sous-menu */
.ct-header .sub-menu .menu-item > a::after {
width: 0 !important;
}
/* =====================================================================
AH. Logo plus grand + sub-menu items en 1 ligne
===================================================================== */
/* Logo plus grand */
.site-logo-container img,
.site-logo-container .default-logo,
.ct-header .default-logo {
max-height: 86px !important;
height: auto !important;
width: auto !important;
}
@media (max-width: 768px) {
.site-logo-container img,
.site-logo-container .default-logo,
.ct-header .default-logo {
max-height: 64px !important;
}
}
/* Le wrapper du header s'adapte */
.ct-header [data-row="middle"] {
min-height: 100px;
}
@media (max-width: 768px) {
.ct-header [data-row="middle"] {
min-height: 76px;
}
}
/* Sub-menu items en 1 SEULE LIGNE chacun */
.ct-header .sub-menu .menu-item > a,
.ct-header .sub-menu .menu-item a {
white-space: nowrap !important;
padding: 12px 24px !important;
}
.ct-header .sub-menu {
min-width: 320px !important;
max-width: none !important;
width: max-content !important;
}
/* =====================================================================
AI. Fix gap sub-menu (disparait au hover descendant)
===================================================================== */
/* Retirer le margin-top qui creait un trou non-hoverable */
.ct-header .sub-menu,
.ct-header .menu-item .sub-menu,
.ct-header .menu-item-has-children .sub-menu {
margin-top: 0 !important;
/* Padding-top genereux pour creer une zone hover sans gap visible */
padding-top: 14px !important;
padding-bottom: 14px !important;
}
/* Lien parent : etend sa hover-zone vers le bas avec un padding-bottom */
.ct-header .menu-item-has-children > a {
padding-bottom: 16px !important;
}
/* Petite securite : pseudo-element invisible qui couvre tout gap residuel */
.ct-header .menu-item-has-children::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -10px;
height: 14px;
z-index: -1;
}
.ct-header .menu-item-has-children {
position: relative;
}
/* =====================================================================
AJ. WPForms select : font-size legerement reduit pour tout afficher
===================================================================== */
.wpforms-container select,
.wpforms-container .wpforms-field-select select {
font-size: 14px !important;
padding: 13px 36px 13px 14px !important;
text-overflow: ellipsis;
}
.wpforms-container select option {
font-size: 14px !important;
}
/* =====================================================================
AK. WPForms select : hauteur min + line-height pour eviter coupe bas
===================================================================== */
.wpforms-container select,
.wpforms-container .wpforms-field-select select,
.wpforms-container .wpforms-field select {
font-size: 14px !important;
line-height: 1.6 !important;
padding: 14px 36px 14px 14px !important;
height: auto !important;
min-height: 52px !important;
box-sizing: border-box !important;
}
/* =====================================================================
AL. Conviction quote : retirer italique, garder bold
===================================================================== */
.triv-conviction-quote,
section[data-triv="conviction"] p.triv-conviction-quote {
font-style: normal !important;
font-weight: 700 !important;
}
/* =====================================================================
AM. Responsive — iPad portrait/landscape + mobile
===================================================================== */
/* Mobile portrait : la photo hero en cover (eviter bandes verticales enormes) */
@media (max-width: 600px) and (orientation: portrait) {
body.home .triv-hero {
background-size: cover !important;
background-position: center 30% !important;
}
body.home .triv-hero h1 {
font-size: clamp(34px, 9vw, 52px) !important;
}
}
/* iPad portrait (768-1024px) : photo en cover pour mieux remplir, footer 4 cols -> 2 cols */
@media (min-width: 601px) and (max-width: 1024px) and (orientation: portrait) {
body.home .triv-hero {
background-size: cover !important;
background-position: center center !important;
}
body.home .triv-hero h1 {
font-size: clamp(44px, 6vw, 64px) !important;
}
/* Footer 2 colonnes a la place de 4 */
.triv-footer-trivyum-grid {
grid-template-columns: 1fr 1fr !important;
gap: 40px !important;
}
}
/* iPad landscape (1024-1366px) : layout desktop OK mais reduit padding sections */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
.triv-hero {
min-height: 95vh;
}
section[data-triv="conviction"] {
padding: 90px 24px !important;
}
}
/* Menu mobile : burger menu adapté */
@media (max-width: 768px) {
.ct-header [data-device="desktop"] {
display: none !important;
}
.ct-header [data-device="mobile"] {
display: flex !important;
}
}
/* Sub-menu sur touch device : afficher au tap */
@media (hover: none) and (pointer: coarse) {
.ct-header .menu-item-has-children:focus-within > .sub-menu,
.ct-header .menu-item-has-children:active > .sub-menu {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
}
/* Auto-scroll desactive sur mobile (peut surprendre les utilisateurs) */
@media (max-width: 768px) {
body.home .triv-hero {
min-height: 90vh;
}
}
/* =====================================================================
AN. Hero Notre vision (page-id-969) — photo daniel-van-den-berg
===================================================================== */
body.page-id-969 .triv-hero,
body.page-id-969 .triv-hero-page {
background-image: url('/wp-content/uploads/2026/05/daniel-van-den-berg-29Jx9qyTW14-unsplash-scaled.jpg') !important;
background-size: cover !important;
background-position: center top !important;
background-repeat: no-repeat !important;
background-color: var(--triv-black) !important;
min-height: 100vh !important;
align-items: flex-end !important;
padding: 80px 24px 12vh !important;
text-align: center;
animation: triv-hero-photo-in 1.6s cubic-bezier(.22,.61,.36,1) both;
position: relative;
overflow: hidden;
}
/* Overlay sombre dégradé : transparent en haut (projecteurs visibles), sombre en bas (texte lisible) */
body.page-id-969 .triv-hero::after,
body.page-id-969 .triv-hero-page::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(180deg,
transparent 0%,
transparent 45%,
rgba(0, 0, 0, 0.30) 70%,
rgba(0, 0, 0, 0.65) 100%) !important;
z-index: 1 !important;
pointer-events: none !important;
}
/* Pattern diagonal subtle */
body.page-id-969 .triv-hero::before,
body.page-id-969 .triv-hero-page::before {
opacity: 0.15 !important;
}
/* H1 + subtitle révélés en séquence */
body.page-id-969 .triv-hero h1,
body.page-id-969 .triv-hero-page h1 {
color: var(--triv-white) !important;
font-size: clamp(40px, 5.5vw, 72px) !important;
text-shadow: 0 2px 30px rgba(0, 0, 0, 0.7);
animation: triv-text-reveal 1.4s cubic-bezier(.16,.84,.32,1) 0.5s both !important;
position: relative;
z-index: 3;
}
body.page-id-969 .triv-hero h1::before,
body.page-id-969 .triv-hero-page h1::before {
animation: triv-line-expand 1.2s cubic-bezier(.16,.84,.32,1) 1.2s both !important;
box-shadow: 0 0 18px rgba(201, 169, 97, 0.5);
}
body.page-id-969 .triv-hero p,
body.page-id-969 .triv-hero-page p {
animation: triv-text-reveal 1.2s cubic-bezier(.16,.84,.32,1) 1.4s both !important;
position: relative;
z-index: 3;
}
/* Le header transparent sur cette page aussi (pour voir les projecteurs derrière) */
body.page-id-969 .ct-header {
background-color: rgba(10, 10, 10, 0.75) !important;
backdrop-filter: blur(8px);
}
body.page-id-969 main,
body.page-id-969 #main {
padding-top: 0 !important;
}
/* Mobile : meme principe */
@media (max-width: 768px) {
body.page-id-969 .triv-hero,
body.page-id-969 .triv-hero-page {
padding: 70px 18px 10vh !important;
}
}
/* =====================================================================
AO. Item menu "Accueil" en icone maison SVG (avant VISION) — v2
===================================================================== */
/* L'item entier : largeur fixe pour qu'on voit bien l'icone */
.ct-header .menu-item.triv-menu-home-icon > a {
position: relative;
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 0 !important;
line-height: 0 !important;
color: transparent !important;
overflow: hidden;
}
/* Cache TOUT le texte du label "Accueil" */
.ct-header .menu-item.triv-menu-home-icon > a .ct-menu-link-text {
display: none !important;
}
.ct-header .menu-item.triv-menu-home-icon > a {
font-size: 0 !important;
}
/* Pas de souligne dore */
.ct-header .menu-item.triv-menu-home-icon > a::after {
display: none !important;
width: 0 !important;
}
/* Icone maison via background-image SVG base64 (visible meme avec font-size:0 du parent) */
.ct-header .menu-item.triv-menu-home-icon > a::before {
content: "" !important;
display: block !important;
width: 22px !important;
height: 22px !important;
background-color: #F5F5F5 !important;
-webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTEyIDNMMyAxMWgydjloNXYtNmg0djZoNXYtOWgyTDEyIDN6Jy8+PC9zdmc+") no-repeat center / contain;
mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTEyIDNMMyAxMWgydjloNXYtNmg0djZoNXYtOWgyTDEyIDN6Jy8+PC9zdmc+") no-repeat center / contain;
position: static !important;
transition: background-color 220ms ease !important;
border: 0 !important;
transform: none !important;
left: auto !important;
bottom: auto !important;
opacity: 0.92;
}
.ct-header .menu-item.triv-menu-home-icon > a:hover::before {
background-color: #C9A961 !important;
opacity: 1;
}
.ct-header .menu-item.triv-menu-home-icon.current-menu-item > a::before {
background-color: #C9A961 !important;
opacity: 1;
}
/* =====================================================================
AP. Notre vision (page-id-969) : plus de hauteur + léger dézoom
===================================================================== */
body.page-id-969 .triv-hero,
body.page-id-969 .triv-hero-page {
min-height: 110vh !important;
background-size: contain !important;
background-position: center top !important;
background-color: var(--triv-black) !important;
}
/* =====================================================================
AQ. Contact (page-id-777) : photo timothy-tan
===================================================================== */
body.page-id-777 .triv-hero,
body.page-id-777 .triv-hero-page {
background-image: url('/wp-content/uploads/2026/05/timothy-tan-PAe2UhGo-S4-unsplash-scaled.jpg') !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-color: var(--triv-black) !important;
min-height: 100vh !important;
align-items: flex-end !important;
padding: 80px 24px 12vh !important;
text-align: center;
animation: triv-hero-photo-in 1.6s cubic-bezier(.22,.61,.36,1) both;
position: relative;
overflow: hidden;
}
body.page-id-777 .triv-hero::after,
body.page-id-777 .triv-hero-page::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(180deg,
transparent 0%,
transparent 50%,
rgba(0, 0, 0, 0.35) 75%,
rgba(0, 0, 0, 0.70) 100%) !important;
z-index: 1 !important;
pointer-events: none !important;
}
body.page-id-777 .triv-hero::before,
body.page-id-777 .triv-hero-page::before {
opacity: 0.10 !important;
}
body.page-id-777 .triv-hero h1,
body.page-id-777 .triv-hero-page h1 {
color: var(--triv-white) !important;
font-size: clamp(40px, 5.5vw, 72px) !important;
text-shadow: 0 2px 30px rgba(0, 0, 0, 0.7);
animation: triv-text-reveal 1.4s cubic-bezier(.16,.84,.32,1) 0.5s both !important;
position: relative;
z-index: 3;
}
body.page-id-777 .triv-hero h1::before,
body.page-id-777 .triv-hero-page h1::before {
animation: triv-line-expand 1.2s cubic-bezier(.16,.84,.32,1) 1.2s both !important;
box-shadow: 0 0 18px rgba(201, 169, 97, 0.5);
}
body.page-id-777 .triv-hero p,
body.page-id-777 .triv-hero-page p {
animation: triv-text-reveal 1.2s cubic-bezier(.16,.84,.32,1) 1.4s both !important;
position: relative;
z-index: 3;
}
body.page-id-777 .ct-header {
background-color: rgba(10, 10, 10, 0.75) !important;
}
body.page-id-777 main,
body.page-id-777 #main {
padding-top: 0 !important;
}
/* =====================================================================
AR. Section "Aux confluents" — photo jean-karim-dangou
===================================================================== */
.triv-confluents,
section[data-triv="confluents"] {
background-image:
linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.80) 100%),
url('/wp-content/uploads/2026/05/jean-karim-dangou-jBLsQqkEFuc-unsplash.jpg') !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-color: var(--triv-black) !important;
min-height: 60vh !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: 100px 24px !important;
position: relative;
overflow: hidden;
}
.triv-confluents-inner {
max-width: 920px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.triv-confluents-line,
section[data-triv="confluents"] p.triv-confluents-line {
font-family: var(--triv-font-title) !important;
font-style: italic !important;
font-weight: 500 !important;
font-size: clamp(28px, 4vw, 46px) !important;
color: var(--triv-gold) !important;
line-height: 1.45 !important;
letter-spacing: 0.4px !important;
margin: 0 !important;
text-shadow: 0 2px 30px rgba(0, 0, 0, 0.75);
max-width: 820px;
}
@media (max-width: 768px) {
.triv-confluents { min-height: 50vh !important; padding: 70px 18px !important; }
.triv-confluents-line { font-size: clamp(22px, 6vw, 32px) !important; }
}
/* =====================================================================
AS. Cacher loupe de recherche + maison meme couleur que le menu
===================================================================== */
/* Cache la loupe de recherche du header */
.ct-header .ct-header-search,
.ct-header [data-id="search"],
.ct-header button.ct-header-search,
.ct-header button[data-toggle-panel="#search-modal"] {
display: none !important;
}
/* Maison : meme couleur que les autres items du menu, sans opacite */
.ct-header .menu-item.triv-menu-home-icon > a::before {
background-color: var(--triv-text-dark) !important;
opacity: 1 !important;
}
.ct-header .menu-item.triv-menu-home-icon > a:hover::before {
background-color: var(--triv-gold) !important;
}
.ct-header .menu-item.triv-menu-home-icon.current-menu-item > a::before {
background-color: var(--triv-gold) !important;
}
/* =====================================================================
AT. RESPONSIVE COMPLET — iPhone / iPad portrait / iPad land / Desktop
===================================================================== */
/* ==========================================================
📱 iPhone (375px - 430px) - mobile portrait
========================================================== */
@media (max-width: 430px) {
/* Hero home : photo en cover, padding plus compact */
body.home .triv-hero {
background-size: cover !important;
background-position: center 25% !important;
min-height: 92vh !important;
padding: 80px 16px 16vh !important;
}
body.home .triv-hero h1 {
font-size: clamp(32px, 9vw, 44px) !important;
letter-spacing: 0.5px;
}
/* Hero Notre vision : cover au lieu de contain (eviter bandes verticales enormes) */
body.page-id-969 .triv-hero,
body.page-id-969 .triv-hero-page {
background-size: cover !important;
background-position: center top !important;
min-height: 90vh !important;
}
body.page-id-969 .triv-hero h1 {
font-size: clamp(32px, 9vw, 48px) !important;
}
/* Hero Contact : ajuster position pour bien voir le terrain */
body.page-id-777 .triv-hero,
body.page-id-777 .triv-hero-page {
background-position: center 40% !important;
min-height: 88vh !important;
}
body.page-id-777 .triv-hero h1 {
font-size: clamp(34px, 9vw, 48px) !important;
}
/* Sections : padding mobile */
section[data-triv="conviction"] {
padding: 70px 18px !important;
}
.triv-conviction-title,
section[data-triv="conviction"] h2 {
font-size: clamp(24px, 6.5vw, 32px) !important;
margin: 18px 0 24px !important;
}
.triv-conviction-quote {
font-size: 18px !important;
}
/* Cartes 3 voies : padding mobile compact */
.triv-voie-card {
padding: 36px 22px 28px !important;
}
.triv-voie-card h3 {
font-size: 24px !important;
}
.triv-voie-card::before {
font-size: 110px !important;
top: -4px !important;
right: 4px !important;
}
/* Section fondateur */
.triv-founder {
padding: 60px 18px !important;
}
.triv-founder h2 {
font-size: 32px !important;
}
.triv-founder img {
box-shadow:
8px 8px 0 -2px rgba(201, 169, 97, 0.85),
0 16px 32px -16px rgba(10,10,10,0.4) !important;
}
/* Section confluents */
.triv-confluents {
min-height: 45vh !important;
padding: 60px 18px !important;
}
.triv-confluents-line {
font-size: 22px !important;
}
/* CTA final */
.triv-section-dark {
padding: 70px 18px !important;
}
.triv-section-dark h2 {
font-size: clamp(26px, 7vw, 36px) !important;
}
/* Boutons : touch target 44px min */
.triv-btn,
.triv-btn-outline,
a.triv-btn {
padding: 16px 30px !important;
min-height: 44px !important;
font-size: 12px !important;
}
/* WPForms : champs touch-friendly */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container select,
.wpforms-container textarea {
font-size: 16px !important; /* evite zoom iOS */
padding: 14px 14px !important;
min-height: 48px !important;
}
.wpforms-container select {
min-height: 52px !important;
}
.wpforms-container button[type="submit"] {
padding: 18px 32px !important;
min-height: 48px !important;
width: 100%;
}
/* Bannière cookies : ne pas couvrir le bouton CTA hero */
.triv-cookies-banner {
padding: 16px 16px !important;
}
.triv-cookies-text {
font-size: 12.5px !important;
line-height: 1.5;
}
.triv-cookies-btn {
padding: 12px 14px !important;
font-size: 11px !important;
letter-spacing: 1.2px !important;
}
/* Header : burger menu visible, icone maison cachee en mobile */
.ct-header [data-row="middle"] {
min-height: 64px !important;
}
.site-logo-container img {
max-height: 48px !important;
}
/* Footer */
.triv-footer-trivyum {
padding: 50px 18px 30px !important;
}
.triv-footer-trivyum-grid {
gap: 28px !important;
}
}
/* ==========================================================
📱 iPhone large (430px) — pas de besoin specifique
📱 Mobile landscape : reduire padding hero
========================================================== */
@media (max-height: 500px) and (orientation: landscape) {
body.home .triv-hero {
min-height: 100vh !important;
padding-bottom: 8vh !important;
}
}
/* ==========================================================
📱 iPad portrait (768px - 1024px portrait)
========================================================== */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
/* Hero photos : cover (eviter bandes) */
body.home .triv-hero,
body.page-id-969 .triv-hero,
body.page-id-969 .triv-hero-page,
body.page-id-777 .triv-hero,
body.page-id-777 .triv-hero-page {
background-size: cover !important;
}
body.page-id-969 .triv-hero,
body.page-id-969 .triv-hero-page {
min-height: 90vh !important;
background-position: center center !important;
}
/* Header un poil plus grand */
.ct-header [data-row="middle"] {
min-height: 80px;
}
.site-logo-container img {
max-height: 60px !important;
}
/* Cartes 3 voies : 2 colonnes au lieu de 1 (puisqu'on a la place) */
.triv-voies-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 24px !important;
}
.triv-voies-grid > .triv-voie-card:nth-of-type(3) {
grid-column: 1 / -1;
max-width: 540px;
margin: 0 auto;
}
/* Cartes valeurs : 2 colonnes */
.triv-valeurs-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
/* Section fondateur : reste 1 col mais plus aere */
.triv-founder-grid {
gap: 40px !important;
}
.triv-founder img {
max-width: 480px;
margin: 0 auto;
}
/* Prestations services : 2 col reste */
.triv-prestations {
grid-template-columns: repeat(2, 1fr) !important;
}
/* Cartes talents : 2 col */
.triv-talents-cta {
grid-template-columns: repeat(2, 1fr) !important;
}
/* Footer 2 colonnes (deja en place mais on confirme) */
.triv-footer-trivyum-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 36px !important;
}
/* Padding sections plus aere */
section[data-triv="conviction"] {
padding: 90px 32px !important;
}
.triv-confluents {
min-height: 55vh !important;
padding: 90px 32px !important;
}
}
/* ==========================================================
💻 iPad landscape (1024px - 1366px) - similaire au desktop
========================================================== */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
/* Hero : OK desktop, juste un poil de hauteur reduite */
.triv-hero {
min-height: 92vh;
}
/* Padding sections legerement reduit */
section[data-triv="conviction"] {
padding: 90px 28px !important;
}
.triv-founder {
padding: 100px 28px !important;
}
.triv-banner-positioning {
padding: 100px 28px !important;
}
.triv-section-dark {
padding: 110px 28px !important;
}
/* Cartes 3 voies : 3 col (desktop layout) - deja en place */
.triv-voies-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 24px !important;
}
/* Footer 4 cols si OK, sinon 2 */
.triv-footer-trivyum-grid {
grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
}
}
/* ==========================================================
🖥 Desktop large (>= 1367px)
========================================================== */
@media (min-width: 1367px) {
/* Hero confortable */
.triv-hero {
min-height: 100vh;
}
/* H1 hero confortable */
body.home .triv-hero h1 {
font-size: clamp(64px, 6.5vw, 110px) !important;
}
/* Sections paddings confortables */
section[data-triv="conviction"],
.triv-founder,
.triv-banner-positioning,
.triv-section-dark {
padding-left: 24px;
padding-right: 24px;
}
}
/* ==========================================================
🖱 Hover seulement pour pointer fin (souris) — pas tactile
========================================================== */
@media (hover: hover) and (pointer: fine) {
/* Animations hover restent (deja en place) */
}
@media (hover: none) {
/* Tactile : retirer effects hover-only qui peuvent gener */
.triv-voie-card:hover {
transform: none;
}
.triv-founder img:hover {
transform: none;
}
}
/* ==========================================================
📐 Touch targets generaux (accessibilite tactile)
========================================================== */
@media (pointer: coarse) {
a, button, input[type="submit"], input[type="button"], .menu-item > a {
min-height: 44px;
}
}
/* =====================================================================
AU. Section "Aux confluents" : dezoom photo (voir le soleil)
===================================================================== */
.triv-confluents,
section[data-triv="confluents"] {
background-size: contain !important;
background-position: center center !important;
min-height: 80vh !important;
}
/* Mobile : cover pour eviter trop de bandes laterales */
@media (max-width: 768px) {
.triv-confluents,
section[data-triv="confluents"] {
background-size: cover !important;
background-position: center top !important;
min-height: 55vh !important;
}
}
/* iPad portrait : meme logique */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
.triv-confluents,
section[data-triv="confluents"] {
background-size: cover !important;
background-position: center top !important;
min-height: 60vh !important;
}
}
/* =====================================================================
AV. Section "Aux confluents" v2 — split layout photo verticale | texte
===================================================================== */
/* Reset des anciens styles (override la v1) */
.triv-confluents.triv-confluents-split,
section[data-triv="confluents"].triv-confluents-split {
background-image: none !important;
background-color: var(--triv-black) !important;
padding: 0 !important;
min-height: auto !important;
display: block !important;
}
.triv-confluents-split-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
min-height: 78vh;
max-width: 1400px;
margin: 0 auto;
align-items: stretch;
}
/* Photo : ratio naturel preserve via aspect-ratio + cover */
.triv-confluents-photo {
position: relative;
overflow: hidden;
background-color: #0A0A0A;
}
.triv-confluents-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
filter: grayscale(15%) contrast(1.05) brightness(0.92);
transition: filter 600ms cubic-bezier(.2,.7,.2,1), transform 8s ease-out;
}
.triv-confluents-photo:hover img {
filter: grayscale(0%) contrast(1.05) brightness(1);
transform: scale(1.04);
}
/* Texte a droite : centre verticalement, fond noir, citation doree */
.triv-confluents-text {
display: flex;
align-items: center;
justify-content: center;
padding: 80px 60px;
background-color: var(--triv-black);
position: relative;
}
.triv-confluents-text::before {
/* Petit trait dore decoratif a gauche */
content: "";
position: absolute;
left: 60px;
top: 50%;
transform: translateY(calc(-50% - 60px));
width: 40px;
height: 1px;
background: var(--triv-gold);
}
.triv-confluents-text .triv-confluents-line,
.triv-confluents-split .triv-confluents-line {
font-family: var(--triv-font-title) !important;
font-style: italic !important;
font-weight: 700 !important;
font-size: clamp(24px, 2.4vw, 36px) !important;
color: var(--triv-gold) !important;
line-height: 1.5 !important;
letter-spacing: 0.3px !important;
margin: 0 !important;
max-width: 480px;
text-align: left;
text-shadow: none;
}
/* Mobile + tablette portrait : empile photo en haut, texte en bas */
@media (max-width: 900px) {
.triv-confluents-split-grid {
grid-template-columns: 1fr;
min-height: auto;
}
.triv-confluents-photo {
aspect-ratio: 3/4;
max-height: 70vh;
}
.triv-confluents-text {
padding: 50px 28px;
text-align: center;
}
.triv-confluents-text::before {
left: 50%;
transform: translateX(-50%);
top: 28px;
}
.triv-confluents-text .triv-confluents-line,
.triv-confluents-split .triv-confluents-line {
text-align: center;
font-size: clamp(20px, 5.5vw, 30px) !important;
max-width: 100%;
}
}
@media (max-width: 480px) {
.triv-confluents-text {
padding: 40px 20px;
}
.triv-confluents-photo {
aspect-ratio: 4/5;
}
}