/* ========================================================================== TRIXMAX — vitrine trixmax.ch, direction « luxe », sombre ou claire. Portée : tout est limité à .tx-page (classe posée sur le des pages 13 et 23), pour ne jamais déborder sur le reste du site WordPress. Règles maison : espacements 4/8, courbes cubic-bezier, aucun dégradé violet/bleu, un seul accent (vert TRIXMAX), apparences sombre et claire, polices hébergées sur le site. ========================================================================== */ /* --- Polices (auto-hébergées : aucune requête vers un tiers) ------------- */ @font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/bodoni-moda-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/bodoni-moda-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/bodoni-moda-latin-500-italic.woff2") format("woff2"); } @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); } /* --- Jetons --------------------------------------------------------------- */ .tx-page { /* Apparence sombre (par défaut) : noir + vert TRIXMAX éclairci pour rester lisible. */ --tx-fond: #0a0d0c; --tx-fond-2: #111614; --tx-fond-3: #18201d; --tx-texte: #eef2ef; --tx-texte-doux: #a3aea9; --tx-sourdine: #6b7772; --tx-trait: rgba(238, 242, 239, 0.12); --tx-trait-fort: rgba(238, 242, 239, 0.24); --tx-accent: #3fa487; --tx-accent-vif: #6cc9ab; --tx-accent-voile: rgba(63, 164, 135, 0.14); --tx-sur-accent: #06110d; --tx-voile-barre: rgba(10, 13, 12, 0.88); --tx-cadre: #18201d; --tx-grain: 0.06; --tx-ombre: 0 32px 64px rgba(0, 0, 0, 0.56), 0 2px 8px rgba(0, 0, 0, 0.4); --tx-ombre-forte: 0 40px 80px rgba(0, 0, 0, 0.64), 0 4px 12px rgba(0, 0, 0, 0.48); --tx-serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif; --tx-sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --tx-space-xs: 4px; --tx-space-sm: 8px; --tx-space-md: 16px; --tx-space-lg: 32px; --tx-space-xl: 64px; --tx-space-2xl: 128px; --tx-courbe: cubic-bezier(0.32, 0.72, 0, 1); --tx-courbe-douce: cubic-bezier(0.22, 1, 0.36, 1); --tx-largeur: 1240px; --tx-rayon: 4px; background: var(--tx-fond); color: var(--tx-texte); font-family: var(--tx-sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } .tx-page *, .tx-page *::before, .tx-page *::after { box-sizing: border-box; } .tx-page ::selection { background: var(--tx-accent); color: var(--tx-sur-accent); } /* Grain : texture fixe très légère, donne de la matière au noir. */ .tx-page::before { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: var(--tx-grain); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* --- Gabarit Divi 5 ----------------------------------------------------------- Règles relevées sur le site en ligne (29/09) et neutralisées sous .tx-page : colonnes flottantes à 47,25 % (+ width:100%!important sur mobile, d'où les !important), clearfix de rangée qui deviendrait une case de grille, z-index des colonnes qui ferait passer la barre fixe SOUS les sections suivantes, fond blanc de #main-content. */ .tx-page #page-container, .tx-page #et-main-area, .tx-page #main-content { background: transparent; } .tx-page .et_pb_section { background: transparent; padding: var(--tx-space-2xl) 0; position: relative; } .tx-page .et_pb_section .et_pb_row { width: calc(100% - 2 * var(--tx-space-lg)); max-width: var(--tx-largeur); margin: 0 auto; padding: 0; } .tx-page .et_pb_section .et_pb_row::after { content: none; } .tx-page .et_pb_section .et_pb_row > .et_pb_column { float: none; width: auto !important; margin: 0 !important; z-index: auto; } .tx-page .et_pb_section .et_pb_column > .et_pb_module { margin-bottom: 0; } .tx-page .et_pb_section .et_pb_column > .et_pb_module + .et_pb_module { margin-top: 0; } /* --- Typographie ------------------------------------------------------------ */ .tx-page h1, .tx-page h2, .tx-page h3 { font-family: var(--tx-serif); font-weight: 400; color: var(--tx-texte); letter-spacing: -0.01em; margin: 0; padding: 0; } .tx-page h1 { font-size: clamp(40px, 5.6vw, 88px); line-height: 1; } .tx-page h2 { font-size: clamp(40px, 4.8vw, 72px); line-height: 1.04; } .tx-page h3 { font-size: 24px; line-height: 1.2; } .tx-page em, .tx-page .tx-italique { font-style: italic; font-weight: 500; color: var(--tx-accent-vif); } .tx-page p { margin: 0; padding: 0; color: var(--tx-texte-doux); } .tx-page :where(a) { color: inherit; } .tx-surtitre { display: inline-flex; align-items: center; gap: var(--tx-space-md); font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tx-accent); margin-bottom: var(--tx-space-lg); } .tx-surtitre::before { content: ""; width: 40px; height: 1px; background: var(--tx-accent); } /* --- Boutons ---------------------------------------------------------------- */ .tx-boutons { display: flex; flex-wrap: wrap; gap: var(--tx-space-md); } .tx-bouton, .tx-page .et_pb_contact_form .et_pb_contact_submit.et_pb_button, .tx-page .et_pb_contact_form .et_pb_contact_submit.et_pb_button:hover { display: inline-flex; align-items: center; gap: var(--tx-space-sm); padding: var(--tx-space-md) var(--tx-space-lg); border-radius: var(--tx-rayon); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--tx-accent); color: var(--tx-sur-accent); background: var(--tx-accent); transition: background 0.4s var(--tx-courbe), color 0.4s var(--tx-courbe), transform 0.4s var(--tx-courbe); } .tx-bouton:hover, .tx-page .et_pb_contact_form .et_pb_contact_submit.et_pb_button:hover { background: var(--tx-accent-vif); transform: translateY(-2px); } .tx-bouton::after, .tx-page .et_pb_contact_form .et_pb_contact_submit.et_pb_button::after { content: "→"; font-family: inherit; font-size: inherit; line-height: inherit; opacity: 1; position: static; margin: 0; transition: transform 0.4s var(--tx-courbe); } .tx-bouton:hover::after { transform: translateX(4px); } .tx-bouton--fin { background: transparent; color: var(--tx-texte); border-color: var(--tx-trait-fort); } .tx-bouton--fin:hover { background: transparent; border-color: var(--tx-accent); color: var(--tx-accent-vif); } .tx-page a:focus-visible, .tx-page button:focus-visible, .tx-page input:focus-visible, .tx-page textarea:focus-visible { outline: 1px solid var(--tx-accent); outline-offset: 4px; } /* --- Apparence claire : blanc + vert TRIXMAX ---------------------------- Suit le réglage de l'appareil ; le bouton de la barre force un choix (data-tx-theme="clair" | "sombre" sur .tx-page). */ @media (prefers-color-scheme: light) { .tx-page:not([data-tx-theme="sombre"]) { --tx-fond: #ffffff; --tx-fond-2: #f3f7f5; --tx-fond-3: #e8f0ec; --tx-texte: #0f1a16; --tx-texte-doux: #4a5752; --tx-sourdine: #66736e; --tx-trait: rgba(15, 26, 22, 0.12); --tx-trait-fort: rgba(15, 26, 22, 0.24); --tx-accent: #1f6f5c; --tx-accent-vif: #17574a; --tx-accent-voile: rgba(31, 111, 92, 0.1); --tx-sur-accent: #ffffff; --tx-voile-barre: rgba(255, 255, 255, 0.88); --tx-grain: 0.03; --tx-ombre: 0 24px 48px rgba(15, 26, 22, 0.16), 0 2px 8px rgba(15, 26, 22, 0.08); --tx-ombre-forte: 0 32px 64px rgba(15, 26, 22, 0.22), 0 4px 12px rgba(15, 26, 22, 0.1); } } .tx-page[data-tx-theme="clair"] { --tx-fond: #ffffff; --tx-fond-2: #f3f7f5; --tx-fond-3: #e8f0ec; --tx-texte: #0f1a16; --tx-texte-doux: #4a5752; --tx-sourdine: #66736e; --tx-trait: rgba(15, 26, 22, 0.12); --tx-trait-fort: rgba(15, 26, 22, 0.24); --tx-accent: #1f6f5c; --tx-accent-vif: #17574a; --tx-accent-voile: rgba(31, 111, 92, 0.1); --tx-sur-accent: #ffffff; --tx-voile-barre: rgba(255, 255, 255, 0.88); --tx-grain: 0.03; --tx-ombre: 0 24px 48px rgba(15, 26, 22, 0.16), 0 2px 8px rgba(15, 26, 22, 0.08); --tx-ombre-forte: 0 32px 64px rgba(15, 26, 22, 0.22), 0 4px 12px rgba(15, 26, 22, 0.1); } .tx-page { transition: background 0.6s var(--tx-courbe), color 0.6s var(--tx-courbe); } /* Bouton clair / sombre : soleil en sombre (passer au clair), lune en clair. */ .tx-theme { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--tx-trait-fort); border-radius: 50%; background: transparent; color: var(--tx-texte); cursor: pointer; transition: border-color 0.4s var(--tx-courbe), transform 0.6s var(--tx-courbe); } .tx-theme:hover { border-color: var(--tx-accent); transform: rotate(-24deg); } .tx-theme svg { width: 16px; height: 16px; } .tx-theme .tx-lune { display: none; } @media (prefers-color-scheme: light) { .tx-page:not([data-tx-theme="sombre"]) .tx-theme .tx-soleil { display: none; } .tx-page:not([data-tx-theme="sombre"]) .tx-theme .tx-lune { display: block; } } .tx-page[data-tx-theme="clair"] .tx-theme .tx-soleil { display: none; } .tx-page[data-tx-theme="clair"] .tx-theme .tx-lune { display: block; } /* --- Barre du haut ----------------------------------------------------------- */ .tx-barre { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: var(--tx-space-lg); padding: var(--tx-space-md) var(--tx-space-lg); transition: background 0.6s var(--tx-courbe), border-color 0.6s var(--tx-courbe); border-bottom: 1px solid transparent; } /* Barre d'administration WordPress (connecté) : hauteurs imposées par WordPress. */ .tx-page.admin-bar .tx-barre { top: 32px; } @media (max-width: 782px) { .tx-page.admin-bar .tx-barre { top: 46px; } } .tx-barre.tx-barre--pleine { background: var(--tx-voile-barre); border-bottom-color: var(--tx-trait); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .tx-marque { font-family: var(--tx-serif); font-weight: 600; font-size: 20px; letter-spacing: 0.32em; text-decoration: none; color: var(--tx-texte); } .tx-marque span { color: var(--tx-accent); } .tx-barre nav { display: flex; align-items: center; gap: var(--tx-space-lg); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; } .tx-barre nav a { text-decoration: none; color: var(--tx-texte-doux); transition: color 0.4s var(--tx-courbe); } .tx-barre nav a:hover { color: var(--tx-texte); } .tx-langues { display: flex; gap: var(--tx-space-sm); color: var(--tx-sourdine); } .tx-langues strong { color: var(--tx-texte); font-weight: 600; } .tx-barre .tx-bouton { padding: var(--tx-space-sm) var(--tx-space-md); font-size: 12px; } .tx-barre nav .tx-bouton, .tx-barre nav .tx-bouton:hover { color: var(--tx-sur-accent); } /* --- Hero -------------------------------------------------------------------- */ .tx-page .tx-hero { min-height: 100vh; display: flex; align-items: center; padding: var(--tx-space-2xl) 0 var(--tx-space-xl); overflow: hidden; } .tx-hero .et_pb_row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--tx-space-xl); align-items: center; } .tx-hero h1 { margin-bottom: var(--tx-space-lg); } /* Taille calée sur la largeur RÉELLE de la colonne (le rendu du texte varie d'un navigateur à l'autre : 566 px ici, 618 px là pour la même ligne) ; masquage vertical seulement, pour l'animation : un mot n'est jamais coupé sur le côté. */ .tx-page .tx-hero .et_pb_row > .et_pb_column:first-child { container-type: inline-size; } .tx-page .tx-hero h1 { font-size: clamp(40px, 13cqi, 88px); } .tx-hero h1 .tx-ligne { display: block; overflow: visible; overflow-y: clip; padding-bottom: 0.06em; white-space: nowrap; } .tx-hero h1 .tx-ligne > span { display: inline-block; } .tx-hero .tx-chapeau { font-size: 19px; max-width: 520px; margin-bottom: var(--tx-space-lg); } .tx-hero-garanties { display: flex; flex-wrap: wrap; gap: var(--tx-space-lg); margin-top: var(--tx-space-xl); padding-top: var(--tx-space-lg); border-top: 1px solid var(--tx-trait); } .tx-hero-garanties div { font-size: 13px; color: var(--tx-texte-doux); } .tx-hero-garanties strong { display: block; font-family: var(--tx-serif); font-size: 32px; font-weight: 400; line-height: 1.1; color: var(--tx-texte); } /* Composition d'appareils : ordinateur + téléphone qui se chevauchent. */ .tx-scene { position: relative; aspect-ratio: 5 / 4; } .tx-scene::before { /* hachures vertes, clin d'œil à l'enseigne de barbier */ content: ""; position: absolute; right: -8%; top: -8%; width: 56%; height: 72%; background: repeating-linear-gradient(-45deg, var(--tx-accent-voile) 0 1px, transparent 1px 16px); border: 1px solid var(--tx-accent-voile); } .tx-ordi { position: absolute; left: 0; top: 12%; width: 88%; border-radius: 8px; background: var(--tx-cadre); padding: 8px; border: 1px solid var(--tx-trait-fort); box-shadow: var(--tx-ombre); } .tx-ordi::before { content: ""; display: block; height: 16px; margin: -4px 0 4px; background: radial-gradient(circle, var(--tx-sourdine) 2px, transparent 3px) 0 50% / 12px 12px repeat-x; width: 40px; } .tx-tel { position: absolute; right: 0; bottom: 0; width: 30%; border-radius: 32px; background: var(--tx-cadre); padding: 8px; border: 1px solid var(--tx-trait-fort); box-shadow: var(--tx-ombre-forte); } .tx-ecran { position: relative; overflow: hidden; border-radius: 4px; background: #f6f5f3; } .tx-tel .tx-ecran { border-radius: 24px; aspect-ratio: 1170 / 2532; } .tx-ordi .tx-ecran { aspect-ratio: 16 / 10; } .tx-ecran img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; } /* Démo animée : les images d'un écran se succèdent (fondu + glissé). */ .tx-defile img { position: absolute; inset: 0; opacity: 0; transform: translateY(8px) scale(1.02); transition: opacity 0.8s var(--tx-courbe-douce), transform 1.2s var(--tx-courbe-douce); } .tx-defile img.tx-actif { opacity: 1; transform: none; } .tx-defile img:first-child { position: relative; } /* --- Bandeau défilant ------------------------------------------------------ */ .tx-page .tx-bandeau { padding: var(--tx-space-lg) 0; border-top: 1px solid var(--tx-trait); border-bottom: 1px solid var(--tx-trait); overflow: hidden; } .tx-page .tx-bandeau .et_pb_row { width: 100%; max-width: none; } .tx-ruban { display: flex; width: max-content; animation: tx-ruban 48s linear infinite; } .tx-ruban span { font-family: var(--tx-serif); font-style: italic; font-weight: 500; font-size: 32px; color: var(--tx-texte); white-space: nowrap; padding: 0 var(--tx-space-lg); display: inline-flex; align-items: center; gap: var(--tx-space-lg); } .tx-ruban span::after { content: "✦"; font-style: normal; font-size: 16px; color: var(--tx-accent); } /* Exception assumée à la règle « pas de linear » : un ruban continu exige une vitesse constante. */ @keyframes tx-ruban { to { transform: translateX(-50%); } } /* --- Section Suisse : titre collant + liste numérotée ------------------ */ .tx-suisse .et_pb_row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--tx-space-xl); align-items: start; } .tx-suisse .et_pb_row > .et_pb_column:first-child { align-self: stretch; } .tx-suisse .tx-colle { position: sticky; top: 128px; } .tx-suisse .tx-colle p { margin-top: var(--tx-space-lg); max-width: 420px; } .tx-page .tx-liste { list-style: none; line-height: inherit; margin: 0; padding: 0; counter-reset: tx; } .tx-liste li { counter-increment: tx; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--tx-space-md); padding: var(--tx-space-lg) 0; border-top: 1px solid var(--tx-trait); } .tx-liste li:last-child { border-bottom: 1px solid var(--tx-trait); } .tx-liste li::before { content: counter(tx, decimal-leading-zero); font-family: var(--tx-serif); font-style: italic; font-size: 20px; color: var(--tx-accent); line-height: 1.3; } .tx-liste h3 { margin-bottom: var(--tx-space-sm); } .tx-page .tx-liste li { padding-left: 0; } /* --- Fonctionnalités : grille 3 × 2 ---------------------------------------- */ .tx-page .tx-atouts { background: var(--tx-fond-2); } .tx-entete { display: flex; justify-content: space-between; align-items: end; gap: var(--tx-space-xl); margin-bottom: var(--tx-space-xl); } .tx-entete p { max-width: 400px; } .tx-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--tx-trait); border-left: 1px solid var(--tx-trait); } .tx-carte { position: relative; padding: var(--tx-space-lg); display: flex; flex-direction: column; border-right: 1px solid var(--tx-trait); border-bottom: 1px solid var(--tx-trait); transition: background 0.6s var(--tx-courbe); } .tx-carte::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--tx-accent); transition: width 0.8s var(--tx-courbe); } .tx-carte:hover { background: var(--tx-fond-3); } .tx-carte:hover::after { width: 100%; } .tx-carte .tx-num { font-family: var(--tx-serif); font-style: italic; color: var(--tx-accent); font-size: 20px; } .tx-carte h3 { margin: var(--tx-space-xl) 0 var(--tx-space-sm); min-height: 2.4em; } .tx-carte p { font-size: 15px; } /* --- Démonstration (tel + ordi) ------------------------------------------ */ .tx-demo .et_pb_row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--tx-space-xl); align-items: center; } .tx-demo .et_pb_row + .et_pb_row { margin-top: var(--tx-space-2xl); } .tx-demo .tx-inverse > :first-child { order: 2; } .tx-page .tx-etapes { list-style: none; line-height: inherit; margin: var(--tx-space-lg) 0 0; padding: 0; } .tx-page .tx-etapes li { padding: var(--tx-space-md) 0 var(--tx-space-md) var(--tx-space-lg); border-left: 1px solid var(--tx-trait); color: var(--tx-sourdine); transition: color 0.6s var(--tx-courbe), border-color 0.6s var(--tx-courbe); } .tx-etapes li.tx-actif { color: var(--tx-texte); border-left-color: var(--tx-accent); } .tx-etiquette { display: inline-block; margin-top: var(--tx-space-lg); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tx-sourdine); } .tx-demo .tx-tel { position: relative; width: min(320px, 72%); margin: 0 auto; } .tx-demo .tx-ordi { position: relative; width: 100%; top: 0; } /* --- Tarifs ------------------------------------------------------------------ */ .tx-offres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tx-space-md); align-items: stretch; } .tx-offre { position: relative; display: flex; flex-direction: column; padding: var(--tx-space-lg); border: 1px solid var(--tx-trait); border-radius: var(--tx-rayon); background: var(--tx-fond-2); transition: transform 0.6s var(--tx-courbe), border-color 0.6s var(--tx-courbe); } .tx-offre:hover { transform: translateY(-4px); border-color: var(--tx-trait-fort); } .tx-offre--vedette { border-color: var(--tx-accent); background: var(--tx-fond-3); } .tx-offre--vedette:hover { border-color: var(--tx-accent-vif); } .tx-offre .tx-badge { position: absolute; top: -12px; left: var(--tx-space-lg); padding: var(--tx-space-xs) var(--tx-space-sm); background: var(--tx-accent); color: var(--tx-sur-accent); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; border-radius: 2px; } .tx-offre h3 { font-size: 32px; } .tx-offre .tx-cible { font-size: 14px; margin-top: var(--tx-space-xs); } .tx-prix { display: flex; align-items: baseline; gap: var(--tx-space-sm); margin: var(--tx-space-lg) 0; padding-bottom: var(--tx-space-lg); border-bottom: 1px solid var(--tx-trait); } .tx-prix small { font-size: 13px; letter-spacing: 0.12em; color: var(--tx-texte-doux); } .tx-prix strong { font-family: var(--tx-serif); font-weight: 400; font-size: 64px; line-height: 1; color: var(--tx-texte); } .tx-page .tx-offre ul { list-style: none; line-height: inherit; margin: 0 0 var(--tx-space-lg); padding: 0; flex: 1; } .tx-page .tx-offre li { position: relative; padding: var(--tx-space-sm) 0 var(--tx-space-sm) var(--tx-space-lg); font-size: 15px; color: var(--tx-texte-doux); } .tx-offre li::before { content: ""; position: absolute; left: 0; top: 20px; width: 12px; height: 1px; background: var(--tx-accent); } .tx-offre .tx-bouton { justify-content: center; } /* Offre « clé en main » : accroche et lignes mises en avant. */ .tx-accroche { margin: calc(-1 * var(--tx-space-sm)) 0 var(--tx-space-lg); font-family: var(--tx-serif); font-style: italic; font-size: 20px; line-height: 1.3; color: var(--tx-accent-vif); } .tx-page .tx-offre li.tx-plus { color: var(--tx-texte); font-weight: 500; } .tx-offre li.tx-plus::before { height: 2px; } .tx-offre:not(.tx-offre--vedette) .tx-bouton { background: transparent; color: var(--tx-texte); border-color: var(--tx-trait-fort); } .tx-offre:not(.tx-offre--vedette) .tx-bouton:hover { border-color: var(--tx-accent); color: var(--tx-accent-vif); } .tx-sur-mesure { display: flex; justify-content: space-between; align-items: center; gap: var(--tx-space-lg); margin-top: var(--tx-space-md); padding: var(--tx-space-lg); border: 1px solid var(--tx-trait); border-radius: var(--tx-rayon); } .tx-sur-mesure h3 { font-size: 28px; margin-bottom: var(--tx-space-xs); } .tx-note { margin-top: var(--tx-space-lg); font-size: 14px; text-align: center; } /* --- Contact ---------------------------------------------------------------- */ .tx-page .tx-contact { background: var(--tx-fond-2); } .tx-contact .et_pb_row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--tx-space-xl); } .tx-contact h2 { margin-bottom: var(--tx-space-lg); } .tx-page .et_pb_contact_form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tx-space-lg) var(--tx-space-md); } .tx-page .et_pb_contact_form .et_pb_contact_field { margin: 0; padding: 0; width: auto; float: none; flex-basis: auto; } .tx-page .et_pb_contact_form .et_pb_contact_field[data-type="text"] { grid-column: 1 / -1; } .tx-page .et-pb-contact-message { color: var(--tx-accent-vif); margin-bottom: var(--tx-space-md); } .tx-page .et_pb_contact_form label { display: block; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tx-texte-doux); margin-bottom: var(--tx-space-sm); } .tx-page .et_pb_contact_form .input { width: 100%; padding: var(--tx-space-md) 0; background: transparent; border: 0; border-bottom: 1px solid var(--tx-trait-fort); border-radius: 0; color: var(--tx-texte); font: inherit; font-size: 17px; transition: border-color 0.4s var(--tx-courbe); } /* Divi double le libellé en texte indicatif : on garde le libellé seul. */ .tx-page .et_pb_contact_form .input::placeholder { color: transparent; } /* Divi impose sa police d'icônes (!important) au ::after de ses boutons. */ .tx-page .et_pb_contact_form .et_pb_contact_submit.et_pb_button::after { font-family: var(--tx-sans) !important; line-height: 1; align-self: center; transform: none; } .tx-page .et_pb_contact_form .et_pb_contact_submit.et_pb_button:hover::after { transform: translateX(4px); } .tx-page .et_pb_contact_form .input:focus { border-bottom-color: var(--tx-accent); outline: none; } .tx-page .et_pb_contact_form textarea.input { min-height: 128px; resize: vertical; } .tx-page .et_contact_bottom_container { grid-column: 1 / -1; display: flex; justify-content: flex-end; margin: 0; } .tx-page .et_pb_contact_form .et_pb_contact_submit.et_pb_button { cursor: pointer; font-family: var(--tx-sans); line-height: 1.6; margin: 0; } /* --- Pied de page -------------------------------------------------------- */ .tx-page .tx-pied { padding: var(--tx-space-xl) 0; border-top: 1px solid var(--tx-trait); } .tx-pied-contenu { display: flex; justify-content: space-between; align-items: center; gap: var(--tx-space-lg); font-size: 13px; color: var(--tx-sourdine); } .tx-pied p { color: var(--tx-sourdine); } /* --- Apparition au défilement (seulement si le script tourne) ----------- */ .tx-js .tx-reveal { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--tx-courbe-douce), transform 1.2s var(--tx-courbe-douce); transition-delay: calc(var(--tx-rang, 0) * 96ms); } .tx-js .tx-reveal.tx-visible { opacity: 1; transform: none; } .tx-js .tx-hero h1 .tx-ligne > span { transform: translateY(104%); transition: transform 1.2s var(--tx-courbe); transition-delay: calc(120ms + var(--tx-rang, 0) * 120ms); } .tx-js .tx-hero.tx-visible h1 .tx-ligne > span { transform: none; } .tx-js .tx-hero .tx-ordi, .tx-js .tx-hero .tx-tel { opacity: 0; transform: translateY(48px); transition: opacity 1.2s var(--tx-courbe-douce), transform 1.6s var(--tx-courbe-douce); } .tx-js .tx-hero .tx-tel { transition-delay: 240ms; } .tx-js .tx-hero.tx-visible .tx-ordi, .tx-js .tx-hero.tx-visible .tx-tel { opacity: 1; transform: translateY(var(--tx-parallaxe, 0px)); } .tx-js .tx-hero.tx-visible .tx-tel { transform: translateY(calc(var(--tx-parallaxe, 0px) * -1.6)); } /* --- Réduction des animations --------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .tx-page *, .tx-page *::before, .tx-page *::after { transition-duration: 1ms !important; transition-delay: 0ms !important; } .tx-ruban { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .tx-ruban span[aria-hidden] { display: none; } .tx-js .tx-reveal, .tx-js .tx-hero h1 .tx-ligne > span, .tx-js .tx-hero .tx-ordi, .tx-js .tx-hero .tx-tel { opacity: 1; transform: none; } } /* --- Tablette et mobile -------------------------------------------------- */ @media (max-width: 980px) { .tx-page { font-size: 16px; } .tx-page .et_pb_section { padding: var(--tx-space-xl) 0; } .tx-page .et_pb_section .et_pb_row { width: calc(100% - 2 * var(--tx-space-md)); } .tx-barre { padding: var(--tx-space-sm) var(--tx-space-md); } .tx-barre nav .tx-lien-section { display: none; } .tx-page .tx-hero { min-height: 0; padding-top: var(--tx-space-2xl); } .tx-hero .et_pb_row, .tx-suisse .et_pb_row, .tx-demo .et_pb_row, .tx-contact .et_pb_row { grid-template-columns: minmax(0, 1fr); gap: var(--tx-space-lg); } .tx-demo .tx-inverse > :first-child { order: 0; } .tx-suisse .tx-colle { position: static; } .tx-grille, .tx-offres { grid-template-columns: minmax(0, 1fr); } .tx-offres { gap: var(--tx-space-lg); } .tx-carte h3 { margin-top: var(--tx-space-lg); min-height: 0; } .tx-entete, .tx-sur-mesure { flex-direction: column; align-items: flex-start; } .tx-ruban span { font-size: 24px; } .tx-page .et_pb_contact_form { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 480px) { .tx-barre .tx-bouton { display: none; } .tx-hero-garanties { gap: var(--tx-space-md); } .tx-hero-garanties strong { font-size: 24px; } }