/* --------------------------------------------------------------------------- Habillage TwinMe des diaporamas programmes. Le moteur, la grille et les comportements viennent du diaporama BioTwin « Comprendre le jumeau virtuel » : deck.css et deck-mobile.css sont repris tels quels, sans modification. Cette feuille ne fait que reposer les couleurs et quelques composants propres a TwinMe, de sorte qu une mise a jour du moteur BioTwin se rejoue ici sans conflit. Chaque programme porte l accent de sa carte dans la boutique, pour que le diaporama et la page d achat se reconnaissent au premier coup d oeil. --------------------------------------------------------------------------- */ :root { --tm-teal: #0d7377; --tm-coral: #e8593c; --tm-purple: #7f77dd; --tm-green: #5da53a; --tm-blue: #1e6fb5; --tm-ink: #071b2c; } /* Un accent par programme, pose sur */ body[data-programme="sante"] { --accent: var(--tm-purple); --accent-soft: rgba(127, 119, 221, .16); } body[data-programme="longevite"] { --accent: var(--tm-green); --accent-soft: rgba(93, 165, 58, .16); } body[data-programme="poids"] { --accent: var(--tm-teal); --accent-soft: rgba(13, 115, 119, .16); } body[data-programme="apex"] { --accent: var(--tm-blue); --accent-soft: rgba(30, 111, 181, .16); } body[data-programme="hub"] { --accent: var(--tm-teal); --accent-soft: rgba(13, 115, 119, .16); } /* Le moteur BioTwin colore .accent en aqua. On le repasse sur l accent du programme, en gardant exactement la meme mecanique typographique. */ .slide .accent, .slide h1 .accent, .slide h2 .accent { color: var(--accent); } .slide .act { color: var(--accent); letter-spacing: .16em; } .progress span, #progressBar { background: var(--accent); } .act-nav button[aria-current="true"] span, .act-nav button:hover span { background: var(--accent); } /* --- Bandeau de prix ------------------------------------------------------- Une seule diapositive par diaporama porte un prix. Elle doit etre lisible d un coup d oeil et ne jamais ressembler a une grille tarifaire. */ .tm-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; margin-top: 18px; } .tm-price b { font-size: clamp(38px, 5.4vw, 76px); line-height: .95; letter-spacing: -.045em; color: var(--accent); } .tm-price s { font-size: clamp(16px, 1.6vw, 22px); opacity: .55; text-decoration-thickness: 1px; } .tm-price em { font-style: normal; font-size: clamp(14px, 1.4vw, 18px); opacity: .78; } /* --- Jeu de pastilles ------------------------------------------------------ Trois faits courts sous un titre, jamais plus. Remplace la liste a puces, que le diaporama de reference n emploie jamais. */ .tm-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .tm-chips span { padding: 8px 15px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .07); font-size: clamp(12px, 1.15vw, 15px); font-weight: 650; letter-spacing: .01em; backdrop-filter: blur(3px); } .slide.light .tm-chips span { border-color: rgba(7, 27, 44, .16); background: rgba(7, 27, 44, .04); } /* --- Mention non medicale -------------------------------------------------- TwinMe est une experience de bien-etre non medicale et non laboratoire. La mention est discrete mais presente sur la derniere diapositive de chaque diaporama, jamais mise en avant, jamais absente. */ .tm-boundary { margin-top: 22px; max-width: 70ch; font-size: clamp(11px, 1vw, 13px); line-height: 1.5; opacity: .62; } /* --- Grille du hub des quatre programmes ---------------------------------- */ .tm-hub { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: clamp(28px, 4vw, 52px); } .tm-hub a { position: relative; display: block; min-height: clamp(300px, 42vh, 460px); border-radius: 26px; overflow: hidden; color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, .16); transition: transform .22s ease, box-shadow .22s ease; } .tm-hub a:hover { transform: translateY(-6px); box-shadow: 0 26px 66px rgba(0, 8, 17, .38); } .tm-hub img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .tm-hub a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4, 20, 30, .94), rgba(4, 20, 30, .10) 68%); } .tm-hub div { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 22px; } .tm-hub small { display: block; text-transform: uppercase; letter-spacing: .13em; font-weight: 800; font-size: 11px; margin-bottom: 8px; } .tm-hub h2 { font-size: clamp(22px, 2vw, 32px); line-height: 1.02; letter-spacing: -.035em; margin: 0 0 10px; } .tm-hub p { margin: 0 0 12px; font-size: 14px; line-height: 1.45; opacity: .82; } .tm-hub b { font-size: 13px; font-weight: 750; } .tm-hub a[data-p="sante"] small, .tm-hub a[data-p="sante"] b { color: #b9b3f5; } .tm-hub a[data-p="longevite"] small, .tm-hub a[data-p="longevite"] b { color: #a8d98a; } .tm-hub a[data-p="poids"] small, .tm-hub a[data-p="poids"] b { color: #7fd2d4; } .tm-hub a[data-p="apex"] small, .tm-hub a[data-p="apex"] b { color: #8dc0ea; } @media (max-width: 1040px) { .tm-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .tm-hub { grid-template-columns: 1fr; } .tm-hub a { min-height: 260px; } } /* --- Apercu du portail, en direct ------------------------------------------ Le rendu du portail est integre tel quel plutot que capture : une capture se perime au premier changement d interface, l iframe suit. Elle est figee et hors du parcours de tabulation : elle se regarde, elle ne se manipule pas. */ .tm-embed { position: absolute; inset: 0; overflow: hidden; background: #f4f6f7; pointer-events: none; } .tm-embed iframe { position: absolute; top: 0; left: 50%; width: 1440px; height: 1500px; border: 0; transform: translateX(-50%) scale(.86); transform-origin: top center; pointer-events: none; } .slide .tm-embed + .scrim.bottom { background: linear-gradient(0deg, rgba(4, 20, 30, .96) 0%, rgba(4, 20, 30, .72) 26%, rgba(4, 20, 30, 0) 55%); } @media (max-width: 900px) { .tm-embed iframe { transform: translateX(-50%) scale(.52); } } /* ============================================================ v6. Regles imposees par le proprietaire. Aucun petit texte, aucun filigrane de numero, aucun acte. ============================================================ */ /* Le grand numero en haut a gauche est supprime, meme si une ancienne feuille de style le declare encore. Seul le numero du bas a droite reste. */ .chapter-number { display: none !important; } /* Le titre respire davantage, puisqu il est desormais seul a porter le sens. */ .slide .content h1, .slide .content h2 { max-width: 20ch; } .slide .content.wide h2 { max-width: 24ch; } /* Ce que lit une Bio-Signature. Grande taille : c est une phrase de titre, jamais une legende. */ .tm-lit { margin: clamp(14px, 1.6vw, 24px) 0 0; font-size: clamp(21px, 2.5vw, 36px); line-height: 1.28; font-weight: 500; letter-spacing: -.015em; color: #dfeaef; max-width: 30ch; } /* Le chiffre a retenir. Plus grand que la phrase, dans la couleur du programme. */ .tm-chiffre { margin: clamp(16px, 2vw, 30px) 0 0; font-size: clamp(30px, 4.4vw, 68px); line-height: 1; font-weight: 800; letter-spacing: -.045em; color: var(--tm-accent, #64eee3); } /* Une diapositive de pilier annonce une famille : le titre prend toute la place. */ .slide.tm-pilier .content h2 { font-size: clamp(38px, 6vw, 82px); max-width: 16ch; } .slide.tm-signature .content h2 { font-size: clamp(30px, 4.4vw, 62px); max-width: 18ch; } /* Arbre et foret : 30 pour cent l arbre, 70 pour cent la foret. C est la foret qu on doit voir, l arbre est la pour la comparaison. */ .split-frame.tm-3070 { grid-template-columns: 30fr 70fr; } @media (max-width: 820px) { .split-frame.tm-3070 { grid-template-columns: 1fr; grid-template-rows: 30fr 70fr; } } /* ============================================================ v7. Fiche de pilier, fiche de Bio-Signature, boutons. Le gabarit reprend celui du module biosignatures-v37 du site. ============================================================ */ /* ---- Fiche de pilier : nom sur une ligne, puis le compte, puis les noms ---- */ .slide.tm-pilier .content h2 { font-size: clamp(34px, 5.2vw, 74px); max-width: none; white-space: nowrap; /* le nom du pilier tient sur une ligne */ overflow: hidden; text-overflow: ellipsis; } .tm-compte { margin: clamp(10px, 1.4vw, 20px) 0 0; font-size: clamp(20px, 2.6vw, 38px); font-weight: 700; letter-spacing: -.02em; color: var(--tm-accent, #64eee3); } .tm-noms-sig { margin: clamp(8px, 1vw, 14px) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; max-width: 62ch; } .tm-noms-sig li { font-size: clamp(14px, 1.5vw, 21px); line-height: 1.35; color: #cddce2; font-weight: 500; } .tm-noms-sig li + li::before { content: '·'; margin-right: 18px; color: #5d7a86; } /* ---- Fiche de Bio-Signature ---- */ /* Le titre laisse de la place au texte et a la liste : il descend d un cran. */ .slide.tm-signature .content { inset-block-end: auto; top: clamp(70px, 9vh, 110px); bottom: auto; max-width: min(1180px, 92vw); } .slide.tm-signature .content h2 { font-size: clamp(28px, 3.8vw, 56px); max-width: 22ch; } /* Le sous-titre du portail. */ .slide.tm-signature .tm-lit { margin: clamp(8px, 1vw, 14px) 0 0; font-size: clamp(17px, 1.9vw, 27px); font-weight: 600; color: var(--tm-accent, #64eee3); max-width: 46ch; } /* La description editoriale du catalogue. */ .tm-desc { margin: clamp(10px, 1.2vw, 18px) 0 0; font-size: clamp(15px, 1.55vw, 22px); line-height: 1.42; color: #e2edf1; max-width: 62ch; } /* La phrase de cadrage, qui dit comment une Bio-Signature se lit. */ .tm-cadre { margin: clamp(7px, .9vw, 12px) 0 0; font-size: clamp(13px, 1.25vw, 17px); line-height: 1.45; color: #a8bec7; max-width: 66ch; } /* ---- La liste nominative des biomarqueurs, en tres petit, tout en bas ---- */ .tm-marqueurs { position: absolute; left: clamp(28px, 4.6vw, 74px); right: clamp(28px, 4.6vw, 74px); bottom: clamp(46px, 6vh, 76px); z-index: 3; pointer-events: none; } .tm-marqueurs-titre { margin: 0 0 6px; font-size: clamp(11px, 1.05vw, 14px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tm-accent, #64eee3); opacity: .92; } .tm-marqueurs ul { margin: 0; padding: 0; list-style: none; columns: 5; column-gap: 20px; max-height: 27vh; overflow: hidden; } .tm-marqueurs li { font-size: 10px; line-height: 1.38; color: #cfdde3; opacity: .82; break-inside: avoid; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 1100px) { .tm-marqueurs ul { columns: 3; } } @media (max-width: 700px) { .tm-marqueurs ul { columns: 2; max-height: 20vh; } } /* ---- Diapositive « bloc » : des lignes exactes, sans virgule ---- */ .slide.tm-bloc .content h2 { font-size: clamp(30px, 4.2vw, 62px); max-width: 22ch; color: #ffffff; } .tm-ligne { margin: clamp(8px, 1vw, 16px) 0 0; font-size: clamp(26px, 3.6vw, 58px); line-height: 1.08; font-weight: 800; letter-spacing: -.04em; color: var(--tm-accent, #64eee3); } /* ---- Titre pose en haut, pour rester lisible sur un rendu de portail ---- */ .slide.tm-haut .content { top: clamp(64px, 8vh, 104px); bottom: auto; inset-block-end: auto; } .scrim.tm-scrim-haut { background: linear-gradient(to bottom, rgba(4, 16, 27, .93) 0%, rgba(4, 16, 27, .82) 22%, rgba(4, 16, 27, .30) 46%, rgba(4, 16, 27, .10) 70%, rgba(4, 16, 27, .55) 100%); } /* ---- Titre sur une seule ligne, en bas : l image respire ---- */ .slide.tm-bas .content.tm-une-ligne h2 { white-space: nowrap; max-width: none; font-size: clamp(28px, 4.4vw, 68px); } .slide.tm-bas .content { max-width: none; } /* ---- Voile adouci : l image ne doit pas virer au noir a gauche ---- */ .slide.tm-voile-doux .scrim.left { background: linear-gradient(to right, rgba(4, 16, 27, .74) 0%, rgba(4, 16, 27, .52) 26%, rgba(4, 16, 27, .22) 52%, rgba(4, 16, 27, .05) 78%, rgba(4, 16, 27, 0) 100%); } /* ---- Boutons de l appel a l action ---- */ .tm-boutons { margin: clamp(18px, 2.2vw, 34px) 0 0; display: flex; flex-wrap: wrap; gap: 12px; } .tm-boutons a { display: inline-block; padding: 13px 24px; border-radius: 999px; font-size: clamp(14px, 1.4vw, 18px); font-weight: 700; letter-spacing: -.01em; text-decoration: none; color: #04101b; background: var(--tm-accent, #64eee3); border: 2px solid var(--tm-accent, #64eee3); transition: transform .18s ease, opacity .18s ease; } .tm-boutons a + a { color: #ffffff; background: transparent; border-color: rgba(255, 255, 255, .45); } .tm-boutons a:hover { transform: translateY(-2px); } .tm-boutons a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } /* ============================================================ v8. Corrections signalees a l ecran par le proprietaire. ============================================================ */ /* Le nom d un pilier ne doit JAMAIS etre coupe. On enleve la troncature posee en v7 et on laisse le titre se reduire s il est long. */ .slide.tm-pilier .content h2 { white-space: normal; overflow: visible; text-overflow: clip; font-size: clamp(30px, 4.4vw, 64px); line-height: 1.04; max-width: 24ch; } /* Le bloc du pilier remonte : le bas etait mal cadre. */ .slide.tm-pilier .content { inset-block-end: auto; top: clamp(64px, 9vh, 112px); bottom: auto; } .slide.tm-pilier .tm-desc { margin-top: clamp(10px, 1.3vw, 18px); max-width: 52ch; color: #e6f0f4; } .slide.tm-pilier .tm-compte { margin-top: clamp(14px, 1.8vw, 26px); } /* Les noms des Bio-Signatures s empilent, un par ligne. */ .tm-noms-sig { display: block; margin-top: clamp(8px, 1vw, 14px); max-width: none; } .tm-noms-sig li { display: block; font-size: clamp(15px, 1.6vw, 23px); line-height: 1.5; } .tm-noms-sig li + li::before { content: none; } /* La fiche de Bio-Signature n a plus de sous-titre : la description prend la place, et elle est plus longue qu avant. */ .slide.tm-signature .tm-desc { margin-top: clamp(10px, 1.3vw, 18px); font-size: clamp(15px, 1.5vw, 21px); line-height: 1.46; max-width: 74ch; } /* Une explication courte sur une diapositive de contenu. */ .slide:not(.tm-signature):not(.tm-pilier) .tm-desc { margin-top: clamp(12px, 1.5vw, 22px); font-size: clamp(16px, 1.7vw, 25px); line-height: 1.44; max-width: 56ch; } /* Titre fonce, pose sur le haut clair du rendu de portail. Il couvre la ligne d identite du compte de demonstration et reste lisible. */ .slide.tm-titre-sombre .scrim { background: none; } .slide.tm-titre-sombre .content { top: 0; left: 0; right: 0; bottom: auto; inset-block-end: auto; max-width: none; padding: clamp(18px, 2.4vh, 30px) clamp(28px, 4.6vw, 74px) clamp(20px, 2.6vh, 32px); background: linear-gradient(to bottom, #eef4f7 0%, #eef4f7 72%, rgba(238, 244, 247, 0) 100%); } .slide.tm-titre-sombre .content h2 { color: #06202f; font-size: clamp(26px, 3.6vw, 52px); max-width: 26ch; } .slide.tm-titre-sombre .content h2 .accent { color: #0c6b7d; } .slide.tm-titre-sombre .tm-boundary { color: #3d5763; opacity: 1; } /* Cause reelle du texte coupe sur les fiches de pilier : l interlignage a 1,04 donnait une boite de 66 px pour un texte de 74 px. Les accents du haut et les jambages du bas de « Sport et activite physique » sortaient de la boite. On rend la boite plus haute que les glyphes. */ .slide.tm-pilier .content h2 { line-height: 1.18; padding-bottom: .08em; } /* Les huit analyses nommees sous le chiffre, en plus petit, sur deux colonnes. Portee limitee a Longevite : la feuille est commune aux quatre diaporamas et Optimisation sante est approuve tel quel, on ne touche a rien chez lui. */ body[data-programme="longevite"] .tm-noms-analyses { margin: clamp(14px, 1.8vw, 26px) 0 0; padding: 0; list-style: none; columns: 2; column-gap: clamp(24px, 3vw, 48px); max-width: min(760px, 78vw); } body[data-programme="longevite"] .tm-noms-analyses li { font-size: clamp(14px, 1.45vw, 20px); line-height: 1.62; color: #cddce2; font-weight: 500; break-inside: avoid; } body[data-programme="longevite"] .tm-noms-analyses li::before { content: '·'; color: var(--tm-accent, #64eee3); margin-right: 9px; font-weight: 700; } @media (max-width: 760px) { body[data-programme="longevite"] .tm-noms-analyses { columns: 1; } }