/* * Titanox — feuille unique, sans dépendance. * Toutes les valeurs viennent du relevé au navigateur (_source/tokens.json et les captures * de _source/shots/) : Poppins 16 px / 28,8 px, interlettrage 0,64 px, texte rgba(1,1,1,.9), * bleu nuit #144A79 (boutons, badges, titres de section), bleu sombre #1B2A4A (fond * « Le problème »), noir #010101 (bandeau, pied), conteneur 1400 px, marges 50 px. * Toutes les classes sont préfixées tx- : WordPress pose `page`, `home`… sur le . */ /* ---------------------------------------------------------------- polices */ @font-face { font-family: "Poppins"; src: url("fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("fonts/poppins-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("fonts/poppins-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("fonts/poppins-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("fonts/poppins-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("fonts/poppins-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Poppins"; src: url("fonts/poppins-700i.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "Nunito"; src: url("fonts/nunito-400.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; } @font-face { font-family: "Sofia Sans"; src: url("fonts/sofiasans-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } :root { --tx-noir: #010101; --tx-texte: rgba(1, 1, 1, .9); --tx-gris: rgba(1, 1, 1, .6); --tx-gris-clair: #F3F3F3; --tx-filet: rgba(1, 1, 1, .1); --tx-bleu: #144A79; --tx-bleu-sombre: #1B2A4A; --tx-bleu-clair: #DFEAF4; --tx-rouge: #E32636; --tx-vert: #1F8A4C; --tx-vert-clair: #DCF5E3; --tx-rose-clair: #FDE4E4; --tx-jaune: #FFD80F; --tx-blanc: #FFFFFF; --tx-corps: "Poppins", system-ui, -apple-system, sans-serif; --tx-nunito: "Nunito", "Poppins", sans-serif; --tx-wrap: 1400px; --tx-marge: 50px; --tx-r-media: 12px; --tx-r-bouton: 42px; } /* ------------------------------------------------------------------ socle */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--tx-corps); font-size: 16px; line-height: 1.8; letter-spacing: .64px; color: var(--tx-texte); background: var(--tx-blanc); -webkit-font-smoothing: antialiased; } body.tx-fige { overflow: hidden; } img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; letter-spacing: inherit; color: inherit; } h1, h2, h3 { font-family: var(--tx-corps); font-weight: 700; margin: 0 0 .5em; letter-spacing: .06rem; line-height: 1.25; color: var(--tx-noir); } h2 { font-size: 31.2px; } h3 { font-size: 20px; } p { margin: 0 0 1em; } .tx-wrap { max-width: var(--tx-wrap); margin: 0 auto; padding: 0 var(--tx-marge); } /* Une piste de grille ne descend jamais sous la largeur de son contenu : sans ce min-width, un carrousel large impose sa largeur à toute la page en mobile. */ .tx-wrap > *, [class*="__grille"] > *, [class*="__in"] > * { min-width: 0; } .tx-visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .tx-surtitre { font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--tx-bleu); text-align: center; margin: 0 0 6px; } .tx-surtitre::after { content: ""; display: block; width: 40px; height: 2px; background: var(--tx-bleu); margin: 12px auto 0; } .tx-surtitre--clair { color: var(--tx-blanc); } .tx-surtitre--clair::after { background: var(--tx-blanc); } /* ---------------------------------------------------------------- boutons */ .tx-bouton { display: block; width: 100%; border: 0; cursor: pointer; background: var(--tx-bleu); color: var(--tx-blanc); font-family: var(--tx-corps); font-size: 18px; font-weight: 700; letter-spacing: .5px; height: 49px; line-height: 49px; padding: 0 28px; border-radius: var(--tx-r-bouton); text-align: center; text-transform: uppercase; transition: filter .15s; } .tx-bouton:hover { filter: brightness(1.12); } .tx-bouton--auto { display: inline-block; width: auto; font-size: 16px; } .tx-bouton--noir { background: var(--tx-noir); } /* ---------------------------------------------------------------- bandeau */ .tx-ticker { height: 50px; overflow: hidden; background: var(--tx-noir); color: var(--tx-blanc); display: flex; align-items: center; } .tx-ticker__rail { display: flex; align-items: center; gap: 0; white-space: nowrap; width: max-content; animation: tx-defile 60s linear infinite; } .tx-ticker__item { margin: 0; padding: 0 56px; font-size: 18px; font-weight: 700; line-height: 18px; text-transform: uppercase; letter-spacing: .64px; } @keyframes tx-defile { from { transform: translateX(0); } to { transform: translateX(-25%); } } @media (prefers-reduced-motion: reduce) { .tx-ticker__rail, .tx-presse__rail { animation: none; } } /* ----------------------------------------------------------------- entête */ .tx-header { background: var(--tx-blanc); border-bottom: 1px solid var(--tx-filet); position: relative; z-index: 40; } .tx-header__in { min-height: 164px; display: grid; grid-template-columns: 1fr 200px 1fr; align-items: center; gap: 20px; padding-top: 20px; padding-bottom: 16px; } .tx-header__nav { display: flex; flex-wrap: wrap; gap: 0 4px; max-width: 560px; font-size: 14px; line-height: 18.2px; } .tx-header__nav a { padding: 12px; border-radius: 4px; white-space: nowrap; } .tx-header__nav a.est-actif { background: var(--tx-noir); color: var(--tx-blanc); font-weight: 700; padding: 8px 12px; margin: 4px 0; } .tx-header__nav a:not(.est-actif):hover { text-decoration: underline; text-underline-offset: 3px; } .tx-header__logo { justify-self: center; } .tx-header__logo img { width: 200px; height: 50px; object-fit: contain; } .tx-header__icons { justify-self: end; display: flex; align-items: center; gap: 18px; } .tx-header__cart { position: relative; display: inline-flex; padding: 8px; color: var(--tx-noir); } .tx-cart__n { position: absolute; top: 0; right: -2px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--tx-bleu); color: var(--tx-blanc); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; padding: 0 5px; } .tx-cart__n[hidden] { display: none; } .tx-burger { display: none; background: none; border: 0; padding: 6px; cursor: pointer; } .tx-burger span { display: block; width: 22px; height: 1.5px; background: var(--tx-noir); margin: 6px 0; } .tx-mobile-nav { border-top: 1px solid var(--tx-filet); background: var(--tx-blanc); } .tx-mobile-nav__in { display: flex; flex-direction: column; padding-top: 8px; padding-bottom: 12px; } .tx-mobile-nav__in a { padding: 11px 0; border-bottom: 1px solid var(--tx-gris-clair); font-size: 15px; } /* ---------------------------------------------------------- fiche produit */ .tx-produit { padding: 36px 0 40px; } .tx-produit__grille { display: grid; grid-template-columns: minmax(0, 715px) 535px; gap: 50px; align-items: start; justify-content: space-between; } .tx-achat__titre { width: 100%; margin-bottom: 8px; } /* galerie */ .tx-galerie { position: relative; } .tx-galerie__rail { display: block; border-radius: var(--tx-r-media); overflow: hidden; background: var(--tx-gris-clair); } .tx-galerie__vue { display: none; } .tx-galerie__vue[aria-current="true"] { display: block; } .tx-galerie__vue img, .tx-galerie__vue video { width: 100%; aspect-ratio: 1; object-fit: cover; } .tx-galerie__bande { display: flex; align-items: center; gap: 8px; margin-top: 12px; } .tx-galerie__fleche { flex: 0 0 24px; height: 44px; border: 0; background: none; cursor: pointer; font-size: 26px; line-height: 1; color: rgba(1,1,1,.45); } .tx-galerie__fleche:hover { color: var(--tx-noir); } .tx-galerie__vignettes { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; padding: 4px 2px; } .tx-galerie__vignettes::-webkit-scrollbar { display: none; } .tx-galerie__vignettes button { position: relative; flex: 0 0 115px; width: 115px; height: 115px; padding: 0; cursor: pointer; border: 1px solid var(--tx-filet); border-radius: 12px; overflow: hidden; background: none; } .tx-galerie__vignettes button[aria-current="true"] { border: 2px solid var(--tx-noir); } .tx-galerie__vignettes img { width: 100%; height: 100%; object-fit: cover; } .tx-galerie__lecture, .tx-play { position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; border-radius: 50%; background: var(--tx-blanc); border: 1px solid var(--tx-filet); } .tx-galerie__lecture::after, .tx-play::after { content: ""; position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--tx-noir); } .tx-play { width: 48px; height: 48px; background: var(--tx-bleu); border: 0; } .tx-play::after { border-width: 8px 0 8px 13px; border-left-color: var(--tx-blanc); } .tx-puces { display: flex; justify-content: center; gap: 8px; margin-top: 14px; } .tx-puces[hidden] { display: none; } .tx-puces button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: #C9CCD2; cursor: pointer; transition: width .2s; } .tx-puces button[aria-current="true"] { background: var(--tx-bleu); width: 22px; } .tx-puces--inline { margin: 0; } .tx-galerie > .tx-puces { display: none; } /* colonne d'achat */ .tx-stock { color: var(--tx-rouge); font-size: 14px; font-weight: 600; margin: 8px 0 6px; padding-left: 20px; position: relative; } .tx-stock::before { content: ""; position: absolute; left: 2px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--tx-rouge); box-shadow: 0 0 0 4px rgba(227,38,54,.18); } .tx-guide { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; margin-bottom: 14px; } .tx-guide__panneau { margin: 0 0 16px; border: 1px solid var(--tx-filet); border-radius: 12px; overflow: hidden; } .tx-offre__titre { display: flex; align-items: center; gap: 12px; margin: 6px 0 10px; color: var(--tx-bleu); font-size: 14px; font-weight: 700; letter-spacing: .5px; } .tx-offre__titre::before, .tx-offre__titre::after { content: ""; flex: 1; height: 2px; background: var(--tx-bleu); } .tx-offre__titre span { white-space: nowrap; } /* paliers (bloc Kaching) */ .tx-paliers { display: grid; gap: 10px; margin-bottom: 14px; } .tx-palier { position: relative; display: block; cursor: pointer; border: 2px solid var(--tx-filet); border-radius: 18px; background: #F5F6F8; padding: 11px 21px; transition: border-color .15s, background .15s; } .tx-palier input { position: absolute; opacity: 0; pointer-events: none; } .tx-palier.est-choisi, .tx-palier:has(input:checked) { background: var(--tx-blanc); border-color: var(--tx-bleu); } .tx-palier:has(input:focus-visible) { outline: 2px solid var(--tx-bleu); outline-offset: 2px; } .tx-palier__badge { position: absolute; top: -12px; right: 22px; background: var(--tx-bleu); color: var(--tx-blanc); font-family: sans-serif; font-size: 12px; font-weight: 700; line-height: 12px; padding: 6px 8px; border-radius: 0 0 5px 5px; white-space: nowrap; } .tx-palier__ligne { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; min-height: 55px; } .tx-palier__img { width: 48px; height: 48px; object-fit: contain; border-radius: 6px; } .tx-palier__nom { display: block; font-size: 19px; font-weight: 700; line-height: 26.6px; color: var(--tx-noir); letter-spacing: 0; } .tx-palier__eco { display: block; font-size: 13px; font-weight: 700; font-style: italic; color: #4A5D78; letter-spacing: 0; } .tx-palier__prix { text-align: right; letter-spacing: 0; } .tx-palier__now { display: block; font-size: 19px; font-weight: 700; line-height: 26.6px; color: var(--tx-noir); } .tx-palier__barre { display: block; font-size: 13px; font-weight: 700; color: rgba(1,1,1,.45); text-decoration: line-through; } .tx-palier__tailles { display: none; margin-top: 10px; letter-spacing: 0; } .tx-palier.est-choisi .tx-palier__tailles, .tx-palier:has(input:checked) .tx-palier__tailles { display: block; } .tx-palier__label { display: block; font-size: 14px; color: var(--tx-texte); margin-bottom: 6px; } .tx-palier__select { display: inline-flex; align-items: center; gap: 8px; margin: 0 14px 6px 0; } .tx-palier__num { font-size: 13px; font-weight: 700; color: var(--tx-gris); } .tx-palier__num span { opacity: .6; } .tx-palier select { font: inherit; font-size: 16px; padding: 8px 32px 8px 12px; border: 1px solid rgba(1,1,1,.3); border-radius: 8px; background: var(--tx-blanc); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23010101' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .tx-offre__cadeau { width: 100%; margin: 6px 0 4px; } /* compte à rebours */ .tx-compte { display: flex; justify-content: center; align-items: flex-start; gap: 14px; margin: 4px 0 14px; } .tx-compte div { text-align: center; } .tx-compte span { display: block; font-size: 60px; font-weight: 700; line-height: 1; letter-spacing: 0; color: var(--tx-noir); } .tx-compte small { display: block; font-size: 16px; color: var(--tx-gris); margin-top: 6px; } .tx-compte i { font-style: normal; font-size: 36px; line-height: 60px; color: var(--tx-gris); } .tx-mentions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; } .tx-mention { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; letter-spacing: 0; } .tx-mention--vert { background: var(--tx-vert-clair); color: var(--tx-vert); } .tx-mention--rouge { background: var(--tx-rose-clair); color: var(--tx-rouge); } .tx-paiements { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .tx-paiements img { width: 38px; height: 24px; } .tx-paiements--achat { margin: 16px 0 20px; } .tx-offre--simple { margin-top: 8px; } /* témoignages courts */ .tx-temoins { margin: 10px 0 14px; } .tx-temoins__rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; } .tx-temoins__rail::-webkit-scrollbar { display: none; } .tx-temoin { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; } .tx-temoin img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; } .tx-temoin p { margin: 0; font-size: 16px; line-height: 1.5; letter-spacing: 0; } .tx-temoin__nom { color: var(--tx-gris); font-size: 14px !important; margin-top: 6px !important; } .tx-etoiles { color: var(--tx-jaune); letter-spacing: 1px; font-size: 13px; } .tx-temoins__nav { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 10px; } .tx-temoins__nav button[data-tx-prec], .tx-temoins__nav button[data-tx-suiv] { background: none; border: 0; cursor: pointer; font-size: 22px; line-height: 1; color: var(--tx-gris); padding: 0 6px; } /* accordéons */ .tx-accordeons { border-top: 1px solid var(--tx-filet); margin-top: 6px; } .tx-accordeons details { border-bottom: 1px solid var(--tx-filet); } .tx-accordeons summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 6px; } .tx-accordeons summary::-webkit-details-marker { display: none; } .tx-accordeons summary h2 { margin: 0; font-size: 14.3px; line-height: 17.6px; letter-spacing: .78px; text-transform: uppercase; } .tx-accordeons__plus { position: relative; width: 14px; height: 14px; flex: 0 0 14px; } .tx-accordeons__plus::before, .tx-accordeons__plus::after { content: ""; position: absolute; background: var(--tx-noir); left: 0; top: 6px; width: 14px; height: 1.5px; } .tx-accordeons__plus::after { transform: rotate(90deg); transition: transform .2s; } .tx-accordeons details[open] .tx-accordeons__plus::after { transform: rotate(0); } .tx-accordeons__corps { padding: 0 6px 16px; font-size: 15px; line-height: 1.6; letter-spacing: 0; } .tx-accordeons__corps p { margin: 0 0 8px; } /* Titanox en action */ .tx-action { margin-top: 24px; } .tx-action__titre { color: var(--tx-bleu); font-size: 16px; font-weight: 700; letter-spacing: .5px; margin: 0 0 10px; } .tx-action__rail { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; } .tx-action__rail::-webkit-scrollbar { display: none; } .tx-video-carte { position: relative; flex: 0 0 123px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--tx-gris-clair); cursor: pointer; scroll-snap-align: start; } .tx-video-carte img { width: 100%; aspect-ratio: 123 / 225; object-fit: cover; } /* ------------------------------------------------------- mur d'avis photo */ .tx-mur { padding: 40px 0 30px; } .tx-mur__titre { max-width: 630px; margin: 0 0 40px; } .tx-mur__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 60px 66px; } .tx-mur__carte { position: relative; padding: 0; border: 0; background: none; text-align: left; } .tx-mur__carte img { width: 100%; border-radius: 10px; } .tx-mur__carte--video { cursor: pointer; } .tx-mur__carte--video .tx-play { top: 0; bottom: auto; margin: 0; left: 50%; transform: translate(-50%, 0); top: 22%; } .tx-mur .tx-puces { display: none; } /* presse */ .tx-presse { background: var(--tx-bleu-sombre); height: 95px; overflow: hidden; display: flex; align-items: center; } .tx-presse__rail { display: flex; align-items: center; gap: 0; width: max-content; animation: tx-defile 40s linear infinite; } .tx-presse__rail img { height: 56px; width: auto; margin: 0 55px; } /* ------------------------------------------------------------- 7 raisons */ .tx-raisons { padding: 60px 0 40px; font-family: var(--tx-nunito); } .tx-raisons__in { max-width: 1300px; } .tx-badge-bleu { display: inline-block; background: var(--tx-bleu); color: var(--tx-blanc); font-family: var(--tx-nunito); font-size: 13px; font-weight: 800; letter-spacing: .5px; padding: 6px 12px; border-radius: 6px; margin-bottom: 14px; } .tx-raisons__titre { font-family: var(--tx-nunito); font-size: 40px; line-height: 1.15; font-weight: 800; color: var(--tx-bleu-sombre); letter-spacing: 0; margin: 0 0 24px; } .tx-raisons__chapeau { font-family: var(--tx-nunito); font-size: 17px; font-weight: 700; color: #4A4F5C; margin: 0 0 40px; } .tx-raison { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 520px); gap: 40px; align-items: center; margin-bottom: 40px; justify-content: space-between; } .tx-raison--inverse .tx-raison__media { order: 2; } .tx-raison__media { border-radius: 14px; overflow: hidden; box-shadow: 8px 8px 0 var(--tx-bleu-clair); } .tx-raison__media img, .tx-raison__media video { width: 100%; aspect-ratio: 4 / 4; object-fit: cover; } .tx-raison__titre { display: inline-flex; align-items: center; gap: 14px; border: 2px solid var(--tx-bleu); border-radius: 40px; padding: 10px 24px 10px 14px; font-family: var(--tx-nunito); font-size: 18px; font-weight: 800; color: var(--tx-bleu); text-transform: uppercase; letter-spacing: 0; margin: 0 0 18px; line-height: 1.2; } .tx-raison__num { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: var(--tx-bleu); color: var(--tx-blanc); display: grid; place-items: center; font-size: 14px; } .tx-raison__texte p { font-family: var(--tx-nunito); font-size: 17px; line-height: 1.6; font-weight: 600; color: #2F3441; letter-spacing: 0; margin: 0; } .tx-raison__texte strong { color: var(--tx-bleu-sombre); font-weight: 800; } .tx-raisons__cta { text-align: right; margin: 0; } .tx-raisons__cta .tx-bouton { font-family: var(--tx-nunito); font-weight: 800; } /* ---------------------------------------------------------- le problème */ .tx-probleme { background: var(--tx-bleu-sombre); color: var(--tx-blanc); padding: 70px 0 60px; text-align: center; font-family: var(--tx-nunito); } .tx-probleme h2 { color: var(--tx-blanc); font-family: var(--tx-nunito); font-size: 40px; font-weight: 800; text-transform: uppercase; letter-spacing: 0; line-height: 1.15; margin: 6px 0 14px; } .tx-probleme__chapeau { max-width: 560px; margin: 0 auto 40px; font-size: 17px; font-weight: 700; color: rgba(255,255,255,.85); } .tx-probleme__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; max-width: 1120px; margin: 0 auto; } .tx-probleme__carte { background: #17233F; border-radius: 12px; overflow: hidden; text-align: left; } .tx-probleme__carte img { width: 100%; aspect-ratio: 352 / 240; object-fit: cover; } .tx-probleme__corps { padding: 22px 22px 30px; } .tx-probleme__corps h3 { color: var(--tx-blanc); font-family: var(--tx-nunito); font-size: 20px; font-weight: 800; letter-spacing: 0; margin-bottom: 10px; } .tx-probleme__corps p { font-size: 15.5px; line-height: 1.55; color: rgba(255,255,255,.85); font-weight: 600; margin: 0; } .tx-probleme__corps strong { color: var(--tx-blanc); font-weight: 800; } /* ---------------------------------------------------------- avis clients */ .tx-avis { padding: 44px 0 40px; } .tx-avis .tx-wrap { max-width: 1170px; } .tx-avis__titre { font-size: 18px; font-weight: 700; letter-spacing: .5px; margin: 0 0 16px; } .tx-avis__rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; } .tx-avis__rail::-webkit-scrollbar { display: none; } .tx-avis__carte { flex: 0 0 480px; scroll-snap-align: start; border: 1px solid var(--tx-filet); border-radius: 12px; padding: 20px 20px 18px; } .tx-avis__carte img { width: 98px; height: 18px; margin-bottom: 10px; } .tx-avis__carte h3 { font-size: 18px; margin-bottom: 8px; letter-spacing: 0; } .tx-avis__carte p { font-size: 15.5px; line-height: 1.5; letter-spacing: 0; margin: 0 0 10px; } .tx-avis__auteur { font-size: 14px; color: var(--tx-gris); } .tx-avis__auteur strong { color: var(--tx-noir); } .tx-avis__barre { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 14px 0 0; } .tx-avis__barre strong { color: var(--tx-vert); } .tx-avis__barre a { color: var(--tx-vert); font-weight: 700; text-decoration: underline; } .tx-fleches { display: flex; justify-content: center; gap: 14px; margin-top: 12px; } .tx-fleches button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #2B6BE3; background: var(--tx-blanc); color: #2B6BE3; font-size: 20px; line-height: 1; cursor: pointer; } /* fondateur */ .tx-fondateur { padding: 30px 0 20px; } .tx-fondateur img { width: 650px; max-width: 100%; } /* offre rappelée */ .tx-rappel { padding: 20px 0 40px; } .tx-rappel__in { display: grid; grid-template-columns: 445px; padding-left: calc(var(--tx-marge) + 28px); } .tx-rappel .tx-offre__titre { font-size: 13px; } /* ------------------------------------------------------------------ FAQ */ .tx-faq { padding: 40px 0 50px; } .tx-faq h2, .tx-faq--page h1 { text-align: center; font-size: 40px; margin-bottom: 30px; } .tx-faq__liste { max-width: 700px; margin: 0 auto; border-top: 1px solid var(--tx-filet); } .tx-faq details { border-bottom: 1px solid var(--tx-filet); } .tx-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 10px; font-size: 16px; font-weight: 700; letter-spacing: 0; } .tx-faq summary::-webkit-details-marker { display: none; } .tx-faq summary::after { content: ""; width: 10px; height: 10px; border-right: 1.5px solid var(--tx-noir); border-bottom: 1.5px solid var(--tx-noir); transform: rotate(45deg); flex: 0 0 10px; transition: transform .2s; margin-right: 6px; } .tx-faq details[open] summary::after { transform: rotate(225deg); } .tx-faq__r { padding: 0 10px 16px; font-size: 15px; line-height: 1.6; letter-spacing: 0; } .tx-faq__r p { margin: 0 0 8px; } /* ------------------------------------------------------- offre limitée */ .tx-limitee { text-align: center; padding: 40px 0 50px; font-family: var(--tx-nunito); } .tx-limitee__badge { display: inline-block; background: #C95343; color: var(--tx-blanc); font-family: "Sofia Sans", sans-serif; font-size: 14px; font-weight: 900; letter-spacing: .84px; text-transform: uppercase; padding: 8px 14px; border-radius: 6px; margin-bottom: 20px; } .tx-limitee h2 { font-family: var(--tx-nunito); font-size: 40px; font-weight: 800; letter-spacing: 0; color: #1F2430; line-height: 1.2; margin-bottom: 18px; } .tx-limitee__tiret { display: block; width: 28px; height: 4px; background: #1F2430; margin: 18px auto; } .tx-limitee p { max-width: 680px; margin: 0 auto 12px; font-size: 17px; font-weight: 700; color: #4A4F5C; line-height: 1.6; letter-spacing: 0; } .tx-limitee strong { color: #1F2430; font-weight: 800; } .tx-limitee .rouge { color: #E23B2E; } .tx-limitee .tx-bouton { margin-top: 14px; font-family: var(--tx-nunito); font-weight: 800; box-shadow: 0 8px 18px rgba(20,74,121,.28); } /* --------------------------------------------------------- réassurances */ .tx-reassurances { padding: 30px 0 60px; } .tx-reassurances__rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } .tx-reassurance { border: 1px solid var(--tx-filet); border-radius: 12px; padding: 30px 24px 32px; text-align: center; } .tx-reassurance__icone { width: 76px; height: 76px; border-radius: 50%; background: var(--tx-bleu-sombre); display: grid; place-items: center; margin: 0 auto 22px; } .tx-reassurance h3 { font-size: 20px; margin-bottom: 8px; letter-spacing: 0; } .tx-reassurance p { font-size: 15px; color: var(--tx-gris); margin: 0; letter-spacing: 0; line-height: 1.5; } .tx-reassurance a { text-decoration: underline; } .tx-reassurances .tx-puces { display: none; } /* ------------------------------------------------------------- accueil */ .tx-banniere { padding: 36px 0 0; } .tx-banniere__in { display: grid; grid-template-columns: 650px minmax(0, 1fr); gap: 70px; align-items: start; } .tx-banniere__media img { width: 650px; max-width: 100%; border-radius: 12px; } .tx-banniere__cta { padding-top: 60px; } .tx-edito { padding: 40px 0 26px; } .tx-edito--serre { padding: 18px 0 40px; } .tx-edito__in { max-width: 810px; text-align: center; } .tx-edito__in h2 { font-size: 31.2px; margin: 10px 0 16px; } .tx-edito__in p { font-size: 16px; } .tx-edito__grand { font-size: 26px; line-height: 1.5; letter-spacing: 0; color: var(--tx-noir); } .tx-edito__grand strong { color: var(--tx-bleu-sombre); } .tx-visuel { padding: 10px 0 30px; } .tx-visuel img { width: 650px; max-width: 100%; border-radius: 12px; } .tx-philo { background: var(--tx-noir); color: rgba(255,255,255,.85); padding: 70px 0 60px; } .tx-philo h2 { color: var(--tx-blanc); font-size: 26px; } .tx-philo strong { color: var(--tx-blanc); } .tx-gamme { padding: 40px 0 50px; } .tx-gamme__titre { text-align: center; font-size: 31.2px; color: var(--tx-bleu-sombre); margin-bottom: 40px; } .tx-gamme__titre sup { font-size: .5em; } .tx-cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; } .tx-carte { text-align: center; } .tx-carte__media img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; transition: transform .25s; } .tx-carte:hover .tx-carte__media img { transform: scale(1.03); } .tx-carte__nom { font-size: 14px; font-weight: 700; letter-spacing: 1px; line-height: 1.4; margin: 16px 0 6px; } .tx-carte__prix { font-size: 16px; letter-spacing: 1px; margin: 0; } .tx-carte__prix s { color: var(--tx-gris); font-size: 14px; } .tx-gamme__tout { text-align: center; margin: 44px 0 0; } .tx-gamme__tout .tx-bouton { text-transform: none; font-size: 15px; padding: 0 30px; } .tx-contact-bloc { padding: 40px 0 60px; } .tx-contact-bloc h2, .tx-contact-bloc h1 { text-align: center; font-size: 31.2px; margin-bottom: 30px; } .tx-form { max-width: 560px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .tx-form > .tx-form__large, .tx-form > button { grid-column: 1 / -1; } .tx-form__hp { display: none; } .tx-form input, .tx-form textarea { width: 100%; font: inherit; font-size: 15px; padding: 14px 16px; border: 1px solid rgba(1,1,1,.55); border-radius: 0; background: var(--tx-blanc); letter-spacing: 0; } .tx-form textarea { min-height: 100px; resize: vertical; } .tx-form .tx-bouton { height: 46px; line-height: 46px; text-transform: none; font-size: 15px; font-weight: 600; } .tx-form__ok, .tx-form__ko { text-align: center; max-width: 560px; margin: 0 auto; } .tx-form__ko { color: var(--tx-rouge); } /* --------------------------------------------------------- collections */ .tx-collection { padding: 40px 0 60px; } .tx-collection h1 { font-size: 40px; margin-bottom: 4px; } .tx-collection__compte { color: var(--tx-gris); font-size: 14px; margin-bottom: 30px; } .tx-reco { padding: 20px 0 30px; } .tx-reco h2 { font-size: 24px; margin-bottom: 26px; } /* -------------------------------------------------------------- pages */ .tx-page { padding: 50px 0 60px; } .tx-page__in { max-width: 900px; } .tx-page h1 { font-size: 40px; text-align: center; margin-bottom: 30px; } .tx-rte { font-size: 16px; letter-spacing: 0; } .tx-rte h2 { font-size: 24px; margin-top: 1.6em; } .tx-rte h3 { font-size: 18px; margin-top: 1.4em; } .tx-rte ul { padding-left: 22px; } .tx-rte a { text-decoration: underline; } .tx-article img { max-width: 100%; height: auto; } .tx-article { letter-spacing: 0; } /* ------------------------------------------------------------------ pied */ .tx-footer { background: var(--tx-noir); color: rgba(255,255,255,.9); padding: 32px 0 0; margin-top: 20px; } .tx-footer__in { display: grid; grid-template-columns: 1fr 0.8fr 0.8fr; gap: 60px; padding-top: 20px; padding-bottom: 30px; } .tx-footer h2 { color: var(--tx-blanc); font-size: 23.4px; line-height: 28.8px; letter-spacing: .78px; margin: 0 0 20px; } .tx-footer p, .tx-footer li { font-size: 16px; line-height: 28.8px; } .tx-footer ul { list-style: none; margin: 0; padding: 0; } .tx-footer li { margin-bottom: 6px; } .tx-footer a:hover { text-decoration: underline; } .tx-newsletter { display: flex; border: 1px solid rgba(255,255,255,.55); max-width: 406px; height: 50px; margin-top: 24px; } .tx-newsletter input { flex: 1; min-width: 0; background: none; border: 0; color: var(--tx-blanc); font: inherit; padding: 0 16px; letter-spacing: 0; } .tx-newsletter input::placeholder { color: rgba(255,255,255,.7); } .tx-newsletter button { background: none; border: 0; color: var(--tx-blanc); padding: 0 16px; cursor: pointer; } .tx-footer__bas { border-top: 1px solid rgba(255,255,255,.15); padding: 22px 0 26px; text-align: center; } .tx-footer__bas .tx-paiements { justify-content: center; gap: 10px; margin-bottom: 14px; } .tx-footer__copy { font-size: 12px; margin: 0; } /* -------------------------------------------------------------- visionneuse */ .tx-visionneuse { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.85); display: grid; place-items: center; padding: 20px; } .tx-visionneuse[hidden] { display: none; } .tx-visionneuse video { max-height: 86vh; max-width: 100%; border-radius: var(--tx-r-media); } .tx-visionneuse__fermer { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--tx-blanc); font-size: 20px; cursor: pointer; } /* ------------------------------------------------------------------ mobile */ @media (max-width: 1099px) { .tx-produit__grille { grid-template-columns: minmax(0, 1fr) 460px; gap: 30px; } .tx-mur__grille { gap: 40px 30px; } .tx-raison { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tx-reassurances__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tx-cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tx-header__in { grid-template-columns: 1fr 200px auto; } .tx-header__nav { max-width: none; } } @media (max-width: 989px) { .tx-produit__grille { grid-template-columns: minmax(0, 1fr); gap: 24px; } .tx-rappel__in { grid-template-columns: minmax(0, 1fr); } .tx-banniere__in { grid-template-columns: minmax(0, 1fr); gap: 20px; } .tx-banniere__cta { padding-top: 0; } .tx-footer__in { grid-template-columns: minmax(0, 1fr); gap: 30px; } .tx-mur__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tx-probleme__grille { grid-template-columns: minmax(0, 1fr); max-width: 520px; } .tx-header__in { grid-template-columns: auto 1fr auto; min-height: 63px; padding: 6px 0; } .tx-header__nav { display: none; } .tx-burger { display: block; } .tx-header__logo img { width: 135px; height: 34px; } } @media (max-width: 749px) { :root { --tx-marge: 16px; } body { font-size: 15px; } h2 { font-size: 26px; } .tx-ticker { height: 37px; } .tx-ticker__item { font-size: 14px; padding: 0 22px; } /* galerie : plein bord, un média par écran, flèches, puis vignettes de 75 px */ .tx-produit { padding: 0 0 30px; } .tx-galerie { margin: 0 calc(-1 * var(--tx-marge)); } .tx-galerie__rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: 0; } .tx-galerie__rail::-webkit-scrollbar { display: none; } .tx-galerie__vue { display: block; flex: 0 0 100%; scroll-snap-align: center; } .tx-galerie__bande { padding: 0 var(--tx-marge); margin-top: 10px; } .tx-galerie__vignettes button { flex-basis: 66px; width: 66px; height: 66px; border-radius: 8px; } .tx-galerie__fleche { display: none; } .tx-temoin p { font-size: 14px; } .tx-raison__texte p, .tx-raisons__chapeau { font-size: 15px; } .tx-probleme__corps p { font-size: 14.5px; } .tx-accordeons summary h2 { font-size: 13.5px; } .tx-galerie .tx-puces { display: none; } .tx-achat { padding-top: 14px; } .tx-palier { padding: 11px 14px; } .tx-palier__ligne { grid-template-columns: 48px 1fr auto; gap: 10px; } .tx-palier__nom { font-size: 19px; line-height: 1.3; } .tx-palier__badge { right: 14px; } .tx-compte span { font-size: 44px; } .tx-compte small { font-size: 14px; } .tx-compte i { font-size: 28px; line-height: 44px; } .tx-action__rail { margin-right: calc(-1 * var(--tx-marge)); } .tx-video-carte { flex-basis: 137px; } /* mur d'avis : un carrousel, une carte par écran, avec puces */ .tx-mur { padding: 24px 0 20px; } .tx-mur__titre { margin-bottom: 20px; } .tx-mur__grille { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; } .tx-mur__grille::-webkit-scrollbar { display: none; } .tx-mur__carte { flex: 0 0 100%; scroll-snap-align: center; } .tx-mur .tx-puces { display: flex; } .tx-presse { height: 86px; } .tx-presse__rail img { height: 44px; margin: 0 30px; } .tx-raisons { padding: 40px 0 20px; } .tx-raisons__titre { font-size: 30px; } .tx-raison { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-bottom: 34px; } .tx-raison--inverse .tx-raison__media { order: 0; } .tx-raison__titre { font-size: 15px; padding: 8px 18px 8px 10px; } .tx-raisons__cta { text-align: center; } .tx-raisons__cta .tx-bouton { height: auto; line-height: 1.3; padding: 14px 40px; white-space: normal; } .tx-probleme { padding: 44px 0 40px; } .tx-probleme h2 { font-size: 30px; } .tx-avis__carte { flex-basis: 300px; } .tx-fondateur { padding: 20px 0 10px; } .tx-faq h2, .tx-faq--page h1 { font-size: 34px; } .tx-limitee h2 { font-size: 32px; } .tx-limitee .tx-bouton { height: auto; line-height: 1.3; padding: 14px 32px; white-space: normal; } /* réassurances : carrousel */ .tx-reassurances { padding: 20px 0 40px; } .tx-reassurances__rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--tx-marge); scroll-behavior: smooth; } .tx-reassurances__rail::-webkit-scrollbar { display: none; } .tx-reassurance { flex: 0 0 calc(100vw - 2 * var(--tx-marge)); scroll-snap-align: center; } .tx-reassurances .tx-puces { display: flex; } .tx-banniere { padding: 0; } .tx-banniere__media { margin: 0 calc(-1 * var(--tx-marge)); } .tx-banniere__media img { width: 100%; border-radius: 0; } .tx-banniere__cta { text-align: center; padding: 22px 0 6px; } .tx-visuel img { width: 100%; } .tx-edito__grand { font-size: 22px; } .tx-philo { padding: 44px 0 34px; } .tx-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; } .tx-carte__nom { font-size: 13px; } .tx-form { grid-template-columns: minmax(0, 1fr); } .tx-page h1, .tx-collection h1 { font-size: 30px; } .tx-footer__in { padding-bottom: 10px; } .tx-footer h2 { font-size: 20px; } } /* ------------------------------------------------- suivre ma commande (repris d'aplusnutri) */ /* Le gabarit template-suivi.php est celui d'aplusnutri et lamier, tel quel : frise, statut, journal estimé, récapitulatif. Seules les couleurs sont celles de Titanox. */ .wrap--narrow { max-width: 900px; } .btn { border-radius: 42px !important; background: var(--tx-bleu) !important; color: #fff !important; display: inline-flex; align-items: center; justify-content: center; background: var(--tx-bleu); color: var(--tx-noir); font-weight: 700; font-size: 16px; text-decoration: none; padding: 17px 40px; border: 0; border-radius: 10px; transition: filter .15s ease; } .btn:hover { filter: brightness(.96); } .btn--navy { background: var(--tx-noir); color: #fff; } .tx-suivi-page { padding: 60px 0 80px; } .tx-suivi-page__title { font-size: clamp(32px, 4.4vw, 52px); } .tx-suivi-page__lead { color: var(--tx-gris); font-size: 18px; margin-bottom: 40px; } .prose h2 { font-size: 22px; margin-top: 2em; } .prose p, .prose li { font-size: 16px; } .notice { border-radius: 10px; padding: 18px 22px; margin-bottom: 28px; font-size: 16px; } .notice--ok { background: #e2f6ea; color: #0f7038; } .notice--ko { background: var(--tx-rose-clair); color: #a41230; } .form { display: grid; gap: 20px; max-width: 620px; } .form label { display: grid; gap: 8px; font-size: 15px; font-weight: 700; } .form label span { font-weight: 400; color: var(--tx-gris); } .form input, .form textarea { font: inherit; font-size: 16px; padding: 14px 16px; border: 1px solid var(--tx-filet); border-radius: 9px; width: 100%; color: var(--tx-noir); } .form input:focus, .form textarea:focus { outline: 2px solid var(--tx-bleu); outline-offset: 1px; } .form button { justify-self: start; } .form__hp { position: absolute; left: -9999px; } .track { border: 1px solid var(--tx-filet); border-radius: 14px; padding: 24px; margin-bottom: 28px; } .track__row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--tx-filet); font-size: 16px; } .track__row:last-child { border-bottom: 0; } .contact-mail { margin-top: 34px; font-size: 16px; } .suivi__retour { margin: -18px 0 26px; font-size: 15px; } .suivi__retour a { color: var(--tx-gris); text-decoration: none; } .suivi__retour a:hover { color: var(--tx-noir); } /* ---- La frise ---- */ .frise { list-style: none; margin: 0 0 46px; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: relative; } .frise__pas { position: relative; display: grid; justify-items: start; gap: 0; color: rgba(1,1,1,.3); min-width: 0; } .frise__ico { display: block; height: 30px; margin-bottom: 18px; } /* La ligne : tracée par chaque pas, sauf le dernier. Grise par défaut, ambre quand le pas suivant est franchi. */ .frise__pas::after { content: ""; position: absolute; left: 7px; right: -100%; top: 55px; height: 3px; background: var(--tx-filet); border-radius: 2px; } .frise__pas:last-child::after { display: none; } .frise__pas.is-faite:not(.is-courante)::after { background: var(--tx-bleu); } /* * Le segment qui part de l'étape en cours se remplit à --frise-avance, la part de * temps écoulée jusqu'à l'étape suivante : la barre bouge de jour en jour au lieu de * rester figée pendant les deux semaines d'acheminement. */ .frise__pas.is-courante.is-faite::after { background: linear-gradient(to right, var(--tx-bleu) var(--frise-avance, 0%), var(--tx-filet) var(--frise-avance, 0%)); } .frise__point { width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 3px solid var(--tx-filet); position: relative; z-index: 1; margin-bottom: 12px; } .frise__pas.is-faite { color: var(--tx-noir); } .frise__pas.is-faite .frise__point { background: var(--tx-bleu); border-color: var(--tx-bleu); } .frise__pas.is-courante .frise__point { box-shadow: 0 0 0 5px rgba(255, 164, 27, .25); } .frise__titre { font-size: 15px; font-weight: 700; line-height: 1.3; } .frise__date { font-size: 14px; color: var(--tx-gris); margin-top: 2px; } .frise__pas:not(.is-faite) .frise__date { color: rgba(1,1,1,.3); } @media (max-width: 760px) { /* En colonne : la ligne passe à la verticale, à gauche des pastilles. */ .frise { grid-auto-flow: row; grid-auto-columns: auto; gap: 26px; margin-bottom: 34px; } .frise__pas { grid-template-columns: 15px 1fr; grid-template-areas: "point titre" "point date"; column-gap: 16px; align-items: center; } .frise__ico { display: none; } .frise__point { grid-area: point; margin: 0; } .frise__titre { grid-area: titre; } .frise__date { grid-area: date; } .frise__pas::after { left: 6px; right: auto; top: 15px; bottom: -32px; width: 3px; height: auto; } } /* ---- Les deux colonnes ---- */ .suivi__grid { display: grid; gap: 40px; align-items: start; } @media (min-width: 900px) { .suivi__grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; } } .suivi__grid > * { min-width: 0; } .suivi__statut { font-size: clamp(30px, 4vw, 46px); margin: 0 0 10px; line-height: 1.1; } .suivi__eta { font-size: 17px; color: var(--tx-gris); margin: 0 0 26px; } .suivi__eta strong { color: var(--tx-noir); } .suivi__carte { background: #F5F6F8; border-radius: 14px; padding: 22px 24px; margin-bottom: 34px; } .suivi__carte-t { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tx-gris); margin: 0 0 10px; } .suivi__adresse { font-style: normal; font-size: 16px; line-height: 1.55; } /* ---- Le journal ---- */ .journal { list-style: none; margin: 0 0 30px; padding: 0; } .journal__l { position: relative; padding: 0 0 26px 32px; color: var(--tx-gris); font-size: 15px; } .journal__l:not(:last-child)::before { content: ""; position: absolute; left: 6px; top: 18px; bottom: 0; width: 2px; background: var(--tx-filet); } .journal__pt { position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--tx-filet); } .journal__l.is-fait { color: var(--tx-noir); } .journal__l.is-fait .journal__pt { background: var(--tx-bleu); border-color: var(--tx-bleu); } /* Échéance estimée déjà dépassée : la pastille est ambre pâle — l'étape est probable, pas constatée. C'est ce qui distingue une prévision d'un fait. */ .journal__l.is-passe .journal__pt { background: #4A76A8; border-color: #4A76A8; opacity: .55; } .journal__l.is-prevu .journal__pt { background: #fff; border-color: var(--tx-filet); } .journal__legende { margin: -6px 0 30px; font-size: 13px; color: rgba(1,1,1,.3); line-height: 1.5; } .journal__d { display: block; font-weight: 700; font-size: 14px; } .journal__t { display: block; } .suivi__aide { font-size: 15px; color: var(--tx-gris); } /* ---- Colonne de droite ---- */ .suivi__aside { border: 1px solid var(--tx-filet); border-radius: 14px; padding: 24px; } .suivi__aside-t { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tx-gris); margin: 0 0 8px; } .suivi__aside-t + .suivi__items, .suivi__aside-v + .suivi__aside-t { margin-top: 26px; } .suivi__aside-v { margin: 0; font-size: 18px; font-weight: 700; } .suivi__aside-v span { font-size: 15px; font-weight: 400; color: var(--tx-gris); } .suivi__items { list-style: none; margin: 0; padding: 0; } .suivi__item { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--tx-filet); } .suivi__item:last-child { border-bottom: 0; } .suivi__vign { position: relative; flex: 0 0 56px; } .suivi__vign img { width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--tx-filet); border-radius: 8px; display: block; } .suivi__qte { position: absolute; top: -7px; right: -7px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 11px; background: var(--tx-noir); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .suivi__nom { font-size: 15px; font-weight: 600; line-height: 1.35; min-width: 0; } .suivi__nom small { display: block; font-weight: 400; font-size: 13px; color: var(--tx-gris); } .suivi__total { display: flex; justify-content: space-between; align-items: baseline; margin: 20px 0 0; padding-top: 16px; border-top: 2px solid var(--tx-noir); font-size: 16px; } .suivi__total strong { font-size: 20px; } .wrap { max-width: var(--tx-wrap); margin: 0 auto; padding: 0 var(--tx-marge); } /* ========================================================================== PANIER — le tiroir latéral, repris de cleanerbreath et recoloré Titanox. Overlay flouté, tiroir de 448 px à droite, barre de temps, carte d'offre, lignes à quantité, accessoires proposés, pied avec sous-total et bouton. ========================================================================== */ .tx-panier__voile { position: fixed; inset: 0; z-index: 80; background: rgba(27, 42, 74, .4); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s ease; } .tx-panier__voile[hidden] { display: block; pointer-events: none; } .tx-panier-ouvert .tx-panier__voile { opacity: 1; } .tx-panier { position: fixed; top: 0; right: 0; z-index: 85; height: 100%; width: 100%; max-width: 448px; background: var(--tx-blanc); display: flex; flex-direction: column; box-shadow: -18px 0 50px rgba(1, 1, 1, .18); transform: translateX(100%); transition: transform .4s cubic-bezier(.22, 1, .36, 1); } /* Fermé, le tiroir reste dans le DOM pour que la transition se joue, mais il est `visibility: hidden` : sans cela, sa position hors écran à droite ajoute deux pixels de défilement horizontal en mobile. */ .tx-panier[hidden] { display: flex; visibility: hidden; pointer-events: none; } .tx-panier-ouvert .tx-panier { transform: translateX(0); visibility: visible; pointer-events: auto; } .tx-panier__tete { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--tx-filet); } .tx-panier__tete h2 { margin: 0; font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; } .tx-panier__tete button { background: none; border: 0; cursor: pointer; padding: 8px; border-radius: 50%; display: grid; place-items: center; color: var(--tx-noir); transition: background .15s; } .tx-panier__tete button:hover { background: #F5F6F8; } .tx-panier__contenu { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .tx-panier__timer { flex: 0 0 auto; background: var(--tx-bleu-sombre); color: var(--tx-blanc); padding: 10px 24px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; } .tx-panier__timer strong { color: #7FB2E0; font-variant-numeric: tabular-nums; } .tx-panier__livraison { flex: 0 0 auto; background: #F5F6F8; padding: 12px 24px; border-bottom: 1px solid var(--tx-filet); } .tx-panier__livraison-l { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; letter-spacing: 0; } .tx-panier__livraison-ok { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--tx-vert); } .tx-panier__livraison svg { color: var(--tx-bleu); flex: 0 0 auto; } .tx-panier__barre { margin-top: 8px; height: 6px; background: var(--tx-blanc); border-radius: 3px; overflow: hidden; } .tx-panier__barre span { display: block; height: 100%; background: var(--tx-bleu); border-radius: 3px; } /* En colonne flex, pas en grille : une carte à `overflow: hidden` posée dans une grille voit sa hauteur minimale tomber à zéro et s'écrase dès que la place manque. */ .tx-panier__corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; } .tx-panier__corps > * { flex: 0 0 auto; } /* ---------------------------------------------------------- panier vide */ .tx-panier__vide { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 60px 24px; } .tx-panier__vide-ico { width: 64px; height: 64px; border-radius: 18px; background: #EEF3F8; color: var(--tx-bleu); display: grid; place-items: center; } .tx-panier__vide h3 { margin: 0; font-size: 22px; } .tx-panier__vide p { margin: 0; font-size: 14px; color: var(--tx-gris); max-width: 280px; letter-spacing: 0; } .tx-panier__vide .tx-bouton { margin-top: 4px; font-size: 14px; } /* --------------------------------------------------------- carte d'offre */ .tx-panier__offre { position: relative; border: 2px solid rgba(20, 74, 121, .4); border-radius: 18px; background: var(--tx-blanc); overflow: hidden; box-shadow: 0 2px 10px rgba(20, 74, 121, .08); } .tx-panier__suppr { position: absolute; top: 8px; right: 8px; z-index: 2; width: 28px; height: 28px; border: 0; border-radius: 50%; cursor: pointer; background: var(--tx-rouge); color: var(--tx-blanc); display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); transition: filter .15s; } .tx-panier__suppr:hover { filter: brightness(1.1); } .tx-panier__suppr:disabled { opacity: .5; } .tx-panier__offre-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 56px 12px 12px; background: rgba(20, 74, 121, .07); border-bottom: 1px solid var(--tx-filet); } .tx-panier__etiquette { margin: 0 0 4px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--tx-bleu); display: flex; align-items: center; gap: 6px; } .tx-panier__offre-tete h3 { margin: 0; font-size: 16px; line-height: 1.25; letter-spacing: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tx-panier__eco { display: inline-block; background: var(--tx-bleu); color: var(--tx-blanc); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 3px 8px; border-radius: 20px; white-space: nowrap; } .tx-panier__offre-prix { margin: 0; text-align: right; white-space: nowrap; } .tx-panier__offre-prix strong { display: block; font-size: 22px; line-height: 1; color: var(--tx-bleu); } .tx-panier__offre-prix s { font-size: 12px; color: rgba(1, 1, 1, .45); } .tx-panier__offre-ligne { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; } .tx-panier__offre-ligne img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: 0 0 40px; background: #F5F6F8; } .tx-panier__offre-ligne h4 { margin: 0; font-size: 13px; line-height: 1.3; letter-spacing: 0; } .tx-panier__offre-ligne ul { list-style: none; margin: 2px 0 0; padding: 0; } .tx-panier__offre-ligne li { font-size: 11px; color: var(--tx-gris); letter-spacing: 0; } .tx-panier__offre-ligne li span { font-variant-numeric: tabular-nums; } .tx-panier__cadeaux { border-top: 1px solid var(--tx-filet); background: #F7F9FB; padding: 8px 12px 10px; } .tx-panier__cadeau { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0; } .tx-panier__cadeau img { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; background: var(--tx-blanc); flex: 0 0 32px; } .tx-panier__cadeau-nom { flex: 1; min-width: 0; } .tx-panier__cadeau s { font-size: 10px; color: rgba(1, 1, 1, .4); } .tx-panier__cadeau em { font-style: normal; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--tx-vert); } /* ------------------------------------------------------- ligne d'article */ .tx-panier__ligne { position: relative; display: flex; gap: 12px; padding: 12px; border: 2px solid var(--tx-filet); border-radius: 18px; background: var(--tx-blanc); } .tx-panier__ligne > img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: 0 0 64px; background: #F5F6F8; } .tx-panier__ligne-corps { flex: 1; min-width: 0; padding-right: 34px; } .tx-panier__ligne-corps h4 { margin: 0; font-size: 13px; line-height: 1.3; letter-spacing: 0; } .tx-panier__ligne-bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; } .tx-panier__qte { display: inline-flex; align-items: center; border: 1px solid var(--tx-filet); border-radius: 20px; } .tx-panier__qte button { background: none; border: 0; cursor: pointer; padding: 6px 8px; display: grid; place-items: center; color: var(--tx-noir); } .tx-panier__qte button:hover { color: var(--tx-bleu); } .tx-panier__qte button:disabled { opacity: .5; } .tx-panier__qte b { min-width: 20px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; } .tx-panier__ligne-prix { text-align: right; white-space: nowrap; } .tx-panier__ligne-prix s { display: block; font-size: 11px; color: rgba(1, 1, 1, .4); } .tx-panier__ligne-prix strong { font-size: 16px; color: var(--tx-bleu); } /* ------------------------------------------------------------- upsells */ .tx-panier__upsell { display: grid; gap: 12px; } .tx-panier__upsell h3 { margin: 4px 0 0; text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .25em; color: var(--tx-bleu); } .tx-panier__prop { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--tx-filet); border-radius: 18px; background: var(--tx-blanc); } .tx-panier__prop img { width: 80px; height: 80px; border-radius: 12px; object-fit: cover; flex: 0 0 80px; background: #F5F6F8; } .tx-panier__prop > div { flex: 1; min-width: 0; display: grid; gap: 6px; align-content: start; } .tx-panier__prop h4 { margin: 0; font-size: 13px; line-height: 1.3; letter-spacing: 0; } .tx-panier__prop-prix { margin: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; letter-spacing: 0; } .tx-panier__prop-prix strong { font-size: 16px; color: var(--tx-bleu); } .tx-panier__prop-prix s { font-size: 11px; color: rgba(1, 1, 1, .4); } .tx-panier__prop-prix span { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tx-vert); background: var(--tx-vert-clair); padding: 2px 6px; border-radius: 20px; } .tx-panier__prop-btn { width: 100%; border: 0; cursor: pointer; border-radius: 20px; padding: 8px 12px; background: var(--tx-bleu); color: var(--tx-blanc); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: filter .15s; } .tx-panier__prop-btn:hover { filter: brightness(1.12); } .tx-panier__prop-btn:disabled { opacity: .5; } /* ---------------------------------------------------------------- pied */ .tx-panier__pied { flex: 0 0 auto; border-top: 1px solid var(--tx-filet); background: var(--tx-blanc); padding: 18px 24px 20px; display: grid; gap: 12px; } .tx-panier__soustotal { margin: 0; display: flex; align-items: center; justify-content: space-between; } .tx-panier__soustotal span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--tx-gris); } .tx-panier__soustotal strong { font-size: 24px; color: var(--tx-bleu); } .tx-panier__pied .tx-bouton { font-size: 15px; box-shadow: 0 8px 18px rgba(20, 74, 121, .28); } .tx-panier__secure { margin: 0; text-align: center; font-size: 11px; color: var(--tx-gris); display: flex; align-items: center; justify-content: center; gap: 6px; letter-spacing: 0; } .tx-panier__secure svg { color: var(--tx-vert); } .tx-panier__pied .tx-paiements { opacity: .75; gap: 6px; } .tx-panier__pied .tx-paiements img { width: 32px; height: 20px; } @media (max-width: 749px) { .tx-panier { max-width: 100%; } .tx-panier__tete { padding: 16px; } .tx-panier__timer, .tx-panier__livraison { padding-left: 16px; padding-right: 16px; } .tx-panier__pied { padding: 16px; } }