/* ============================================================ TYPIX - page produit Portage de la page de lab (D:\typix\lab-site-blanc) dans le portfolio. Deux regles de survie ici : 1. TOUT est scope sous .typixpage. Les noms de classes de la page sont tres generiques (.media, .chip, .panel, .step, .head, .faq) et fuiteraient sur le reste du site sans ce prefixe. 2. base.css et police.css imposent des regles GLOBALES sur p / a / h1 / h2 / b (mono, justifie, cesures, hover bleu, h1 a 3rem avec 4rem de padding-top). Cette feuille est chargee EN DERNIER et les neutralise dans son scope. Sans ca la page est meconnaissable. ⚠️ --espacecote n'est PAS utilise : le portfolio le passe a 17.5% au-dessus de 2000px, et combine a un max-width sur le meme element ca vide la largeur de contenu sur un ecran 4K (le bug qui avait casse les pages legales). Les gouttieres d'ici sont en pixels, volontairement. ============================================================ */ .typixpage { /* ---- couleurs, branchees sur les tokens du site ---- */ --lime: var(--vertmarque); /* #9bee68 */ --lime-deep: #7ed84a; /* meme teinte, un cran plus dense */ --bg: var(--backgroundaccueil); /* #f9f9f4 */ --bg-alt: var(--greymouvaplan); /* #ebebe6 */ --card: #ffffff; --ink: #1b1b18; --ink-2: #64645d; --ink-3: #8a8a81; --line: rgba(27, 27, 24, 0.12); --line-soft: rgba(27, 27, 24, 0.07); --accent: #1b1b18; /* ---- rayons du site ---- */ --r-btn: var(--anglebouton); /* 7px */ --r-card: var(--anglesindex); /* 10px */ --r-med: var(--anglesprojets); /* 15px */ --r-big: var(--anglesprojets); /* 15px */ /* ---- mesures ---- */ --page: 1400px; --gutter: 40px; /* fixe : voir l'avertissement 4K */ --navh: 74px; /* hauteur reelle de la navbar fixe, mesuree */ /* ---- espacements ---- Ces trois valeurs pilotent tout le rythme de la page. Elles etaient ecrites en dur sur une trentaine de lignes, ce qui rendait un simple resserrage impraticable : il fallait repasser sur chaque regle, et le moindre reajustement recommencait le travail. Les surcharges responsive redefinissent ces variables, comme --gutter et --navh plus bas. Valeurs d'origine : 132px, 54px, et 20 a 26px selon les grilles. */ --sp-section: 96px; /* rythme entre deux sections */ --sp-head: 38px; /* titre de section vers son contenu */ --sp-grid: 18px; /* ecarts dans les grilles de cartes */ --ease: cubic-bezier(0.4, 0, 0.2, 1); /* Textes en Inter, mono sur les etiquettes et les chiffres. C'est ce partage, mis au point ici, qui a ensuite ete etendu a tout le site : --police et --ibm vivent maintenant dans color.css et sont la source unique. */ --font: var(--police); /* ⚠️ N'est plus du monospace : IBM Plex Mono a ete retire de tout le site. Le nom est conserve pour ne pas reecrire les 4 regles qui l'utilisent, mais il pointe sur Inter comme le reste. */ --mono: var(--police); background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 1rem; line-height: 1.65; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---------- neutralisation des regles globales du site ---------- base.css : p justifie + cesures + mono + word-spacing, a en mono avec un hover bleu clair, h1 a 3rem et 4rem de padding-top, b en mono. police.css : h2 et p en blanc. Tout ca doit tomber ici, et seulement ici. */ .typixpage p { margin: 0; color: var(--ink-2); font-family: var(--font); font-size: 1rem; line-height: 1.65; letter-spacing: -0.005em; word-spacing: normal; text-align: left; text-justify: auto; hyphens: none; -webkit-hyphens: none; -moz-hyphens: none; cursor: auto; } .typixpage a { color: inherit; font-family: inherit; font-size: inherit; text-decoration: none; } .typixpage a:hover { color: inherit; } .typixpage h1, .typixpage h2, .typixpage h3 { margin: 0; padding: 0; color: var(--ink); font-family: var(--font); font-weight: 600; letter-spacing: -0.025em; cursor: auto; } .typixpage h1 { font-size: clamp(2.1rem, 5.4vw, 3.4rem); line-height: 1.12; letter-spacing: -0.02em; } .typixpage h2 { margin-bottom: 0; font-size: clamp(1.55rem, 3.1vw, 2.25rem); line-height: 1.2; letter-spacing: -0.02em; } .typixpage h3 { font-size: 1.15rem; line-height: 1.35; letter-spacing: -0.02em; } .typixpage b { font-family: inherit; font-weight: 600; color: var(--ink); } .typixpage li { cursor: auto; } .typixpage img, .typixpage video { display: block; max-width: 100%; } .typixpage * { box-sizing: border-box; } /* ---------- structure ---------- */ .typixpage .wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); } .typixpage .section { padding: var(--sp-section) 0; } .typixpage .section--alt { background: var(--bg-alt); } /* Arrivee sur une ancre de la barre d'icones : la section se cale AU RAS du haut de l'ecran, son propre fond part du bord. ⚠️ Le reflexe (s'arreter sous la navbar, ici --navh + 18px) ne marche pas sur ce site : la navbar se cache toute seule des qu'on defile vers le BAS (animationnavbar.js), donc a l'arrivee d'un saut vers l'avant elle n'est plus la et l'ecart laisse voir une bande de la section PRECEDENTE. C'est ce qui donnait l'impression de retomber trop haut. A zero, les deux cas sont propres : navbar masquee, la section touche le bord ; navbar visible (saut vers l'arriere), elle se pose sur le padding HAUT de la section d'arrivee, donc sur son fond a elle, et l'etiquette de section (--sp-section = 96px) reste degagee. */ .typixpage [id] { scroll-margin-top: 0; } /* Sous 768px la navbar ne se cache jamais (le script sort avant) et elle est opaque : on garde donc sa hauteur en decalage, ce qui masque la section precedente derriere elle au lieu de la laisser voir. Borne a 767px et pas 768px pour coller exactement au test du script. */ @media (max-width: 767px) { .typixpage [id] { scroll-margin-top: var(--navh); } } /* ---------- typographie ---------- */ /* etiquette de section : mono, majuscules, precedee d'un point de couleur. C'est le fil rouge graphique de la page. */ .typixpage .eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 16px; font-family: var(--police); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); } .typixpage .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); flex: none; } .typixpage .head--center .eyebrow { justify-content: center; } .typixpage .lead { margin: 18px 0 0; font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.7; color: var(--ink-2); max-width: 58ch; } .typixpage .sub { margin: 18px 0 0; font-size: 1rem; line-height: 1.7; color: var(--ink-2); max-width: 60ch; } .typixpage .head { max-width: 40ch; } .typixpage .head--center { max-width: 44ch; margin: 0 auto; text-align: center; } .typixpage .head--center .lead, .typixpage .head--center .sub { margin-left: auto; margin-right: auto; } .typixpage .fine { font-size: 13px; line-height: 1.5; color: var(--ink-3); } /* ---------- boutons ---------- */ .typixpage .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 26px; border: 1px solid transparent; border-radius: var(--r-btn); font-family: var(--font); font-size: 0.95rem; font-weight: 500; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease), opacity 0.22s var(--ease); } .typixpage .btn--primary { background: var(--ink); color: #fff; } .typixpage .btn--primary:hover { background: #000; color: #fff; } .typixpage .btn--accent { background: var(--lime); color: var(--ink); } .typixpage .btn--accent:hover { background: var(--lime-deep); color: var(--ink); } .typixpage .btn--sm { padding: 9px 18px; font-size: 15px; } .typixpage .btn--lg { padding: 17px 34px; font-size: 18px; } .typixpage .btn--block { width: 100%; } /* ---------- barre d'icones a gauche ---------- Collee au bord gauche, centree verticalement. Elle ne s'affiche qu'a partir de 1240px : en dessous la place manque et elle passerait par-dessus le contenu. Le libelle sort au survol et au focus clavier. */ .typixpage .rail { position: fixed; left: 14px; top: 50%; transform: translateY(-50%); z-index: 400; display: none; flex-direction: column; gap: 6px; padding: 8px; background: rgba(249, 249, 244, 0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line-soft); border-radius: var(--r-med); } @media (min-width: 1240px) { .typixpage .rail { display: flex; } } .typixpage .rail__i { position: relative; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 9px; color: var(--ink-3); text-decoration: none; transition: background 0.2s var(--ease), color 0.2s var(--ease); } .typixpage .rail__i svg { width: 19px; height: 19px; } .typixpage .rail__i:hover { background: rgba(27, 27, 24, 0.06); color: var(--ink); } /* section en cours de lecture */ .typixpage .rail__i.is-active { background: var(--lime); color: var(--ink); } /* Bouton d'achat de la barre : atteignable de n'importe ou dans la page. Meme gabarit que les icones de navigation, mais en aplat lime permanent, parce que ce n'est pas une destination dans la page, c'est une action. ⚠️ `position: relative` obligatoire : c'est lui qui ancre le libelle .rail__lb, positionne en absolu sur son parent. Le filet au-dessus est un pseudo-element et pas une bordure : une bordure agrandirait la boite de 1px et le bouton ne ferait plus le meme carre que les icones du dessus. */ .typixpage .rail__buy { position: relative; width: 38px; height: 38px; margin-top: 10px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--lime); color: var(--ink); text-decoration: none; transition: background 0.2s var(--ease); } .typixpage .rail__buy::before { content: ""; position: absolute; left: 2px; right: 2px; top: -8px; height: 1px; background: var(--line-soft); } .typixpage .rail__buy svg { width: 19px; height: 19px; } .typixpage .rail__buy:hover { background: var(--lime-deep); } .typixpage .rail__lb { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(-4px); padding: 6px 10px; border-radius: 7px; background: var(--ink); color: #fff; font-size: 0.76rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.18s var(--ease), transform 0.18s var(--ease); } .typixpage .rail__i:hover .rail__lb, .typixpage .rail__i:focus-visible .rail__lb, .typixpage .rail__buy:hover .rail__lb, .typixpage .rail__buy:focus-visible .rail__lb { opacity: 1; transform: translateY(-50%) translateX(0); } /* ---------- fil d'Ariane ---------- Sur sa propre ligne AU-DESSUS de la grille. Quand il etait dans la colonne media il decalait la video de 37px vers le bas et rendait le ferrage du haut impossible. Meme plafond de largeur que la grille, sinon il ne s'aligne pas sur le bord de la video. */ /* ⚠️ Le haut de page s'aligne sur la MARGE DU SITE (--espacecote) et non plus sur un plafond de 1800px centre : sur un 4K le mot « Boutique » tombait 388px a droite de son homologue de la page boutique. max-width EXPLICITEMENT annule : ces blocs portent aussi la classe .wrap, qui plafonne a --page. Garder les deux avec un --espacecote en POURCENTAGE au-dessus de 2000px, c'est le bug 4K du portfolio : le padding mange toute la largeur et le contenu tombe a quelques dizaines de pixels. Mesure faite, la video etait tombee a 243px de large. */ .typixpage .hero__fil { margin-bottom: 2rem; max-width: none; padding-inline: var(--espacecote); } /* Reglages RELEVES A LA MESURE sur .project-header-left h1 de la page boutique (Inter, 2.5rem, graisse 700, interlettrage -0.02em, noir) : les deux titres doivent etre indiscernables, c'est tout l'interet de la reprise. */ .typixpage .typixretour { display: inline-block; font-family: var(--font); font-size: 2.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: #000000; text-decoration: none; transition: opacity 0.2s var(--ease); } /* le seul indice qu'il est cliquable, le titre de la boutique n'en etant pas un */ .typixpage .typixretour:hover { opacity: 0.55; color: #000000; } /* Le chemin, AU-DESSUS du titre comme partout ailleurs sur le site. Meme fil d'Ariane que le reste du site (.ariane dans base.css) : meme typo, meme corps, meme trait balaye au survol, et desormais meme place et meme dégagement. Les deux composants doivent rester alignes -- si on touche a l'un, toucher a l'autre. ⚠️ Valeurs relevees sur .ariane (base.css) : `margin: 0 0 1.75rem` et aucun padding. Le `margin-top: 10px` et le `padding-left: 2px` d'avant tenaient au fait que le fil vivait SOUS le titre, ils decaleraient le fil de 2px vers la droite par rapport a celui de la page boutique. */ .typixpage .fil { display: flex; align-items: center; gap: 9px; margin: 0 0 1.75rem; font-family: var(--police); font-size: 0.82rem; letter-spacing: 0.01em; /* .ariane le declare, pas .fil : sans lui la hauteur du fil differe de quelques pixels d'une page a l'autre, et le mot « Boutique » ne tombe plus a la meme hauteur alors que c'est tout l'interet de la reprise. */ line-height: 1.4; } .typixpage .fil a { position: relative; overflow: hidden; padding-bottom: 3px; font-family: var(--police); color: var(--ink-2); text-decoration: none; transition: color 0.2s var(--ease); } .typixpage .fil a:hover { color: var(--ink); } /* ⚠️ transform-origin different au repos (right) et au survol (left) : c'est ce qui fait sortir le trait par la droite au lieu de le faire revenir sur ses pas. Copie conforme de .underline-hover dans navbar.css. */ .typixpage .fil a::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 0.9px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.5s ease; will-change: transform; } .typixpage .fil a:hover::after, .typixpage .fil a:focus-visible::after { transform: scaleX(1); transform-origin: left; } @media (prefers-reduced-motion: reduce) { .typixpage .fil a::after { transition: none; } } .typixpage .fil__sep { color: var(--ink-3); } .typixpage .fil__ici { color: var(--ink); font-weight: 500; } @media (max-width: 968px) { .typixpage .typixretour { font-size: 2rem; } } @media (max-width: 640px) { .typixpage .typixretour { font-size: 1.75rem; } } /* ---------- hero : media a gauche, panneau produit a droite ---------- */ /* meme retrait que .project-header sur les pages projet et la boutique, pour que le mot « Boutique » tombe a la meme hauteur d'une page a l'autre */ .typixpage .hero { padding: calc(var(--navh) + 3rem) 0 var(--sp-section); } /* Sous 980px on empile, et column-reverse fait remonter le texte au-dessus de la video : sur mobile l'accroche doit arriver avant l'image. */ .typixpage .hero__grid { display: flex; /* stretch : les deux colonnes prennent la hauteur de la ligne, ce qui permet de ferrer le panneau sur le haut ET le bas de la video (voir .prodbuy). On ne recadre jamais la video pour egaliser : ca coutait 30 % de l'image. */ align-items: stretch; gap: 76px; /* Meme alignement que le titre au-dessus : marge du site, aucun plafond. ⚠️ Ne JAMAIS remettre un max-width ici tant que le padding est en --espacecote : au-dessus de 2000px il vaut 17.5% de chaque cote et les deux ensemble ecrasent la ligne (video mesuree a 243px de large). */ max-width: none; padding-inline: var(--espacecote); } .typixpage .hero__col { min-width: 0; } .typixpage .hero__col--media { flex: 1 1 64%; display: flex; flex-direction: column; /* ⚠️ Video centree verticalement dans sa colonne, a TOUTES les largeurs a deux colonnes. C'est un compromis assume, et il faut comprendre pourquoi avant de le defaire. Les deux colonnes sont etirees a la meme hauteur (align-items: stretch), mais leurs CONTENUS n'ont pas la meme : le panneau produit est souvent un peu plus haut que la video 16:9, dont la hauteur ne depend que de sa largeur. On peut donc ferrer le haut, ferrer le bas, ou centrer, jamais les deux bouts a la fois. - `flex-start` (l'ancien defaut) : l'ecart s'accumule SOUS la video, le bouton d'achat depasse son bord inferieur. C'est le defaut signale. - `flex-end` : les deux bas se rejoignent, mais tout l'ecart remonte au-dessus de la video, et le desalignement se voit en haut. - `center` : l'ecart est coupe en deux, donc deux fois moins visible de chaque cote. C'est le seul reglage ou aucun des deux bords ne saute aux yeux, et c'est deja le choix retenu pour la bande 981-1240px. La seule facon d'avoir les deux bords vraiment a ras serait de remplir la colonne avec object-fit: cover, donc de ROGNER la video de la difference. Ecarte : l'ecart a combler atteint ~110px pour 390px de video vers 1241px, soit pres de 30 % de l'image mangee. Sous 981px les colonnes passent en display:contents, ce reglage n'a plus d'objet. */ justify-content: center; } .typixpage .hero__col--text { flex: 1 1 36%; /* colonne flex : le premier element est ferre en haut, et .prodbuy est pousse en bas par margin-top:auto */ display: flex; flex-direction: column; } /* Le bloc d'achat colle au bas de la colonne, donc au bas de la video quand c'est elle qui donne la hauteur de la ligne. ⚠️ `padding-top` EN PLUS de `margin-top: auto`, et pas un point de rupture : quand il reste de la place, `auto` la mange et les deux bas se ferrent ; quand il n'en reste pas, `auto` vaut 0 et le padding garantit quand meme un ecart avec le bloc licence au-dessus. Une seule regle couvre les deux cas. L'ancienne version basculait sur `@media (max-width: 1600px)`, ce qui ratait la bande 2000-2300px : au-dessus de 2000px --espacecote passe a 17.5%, la video RETRECIT (464px de haut a 2100px de large contre 556px a 1700px) et le panneau repassait devant, sans qu'aucun point de rupture ne s'en apercoive. */ .typixpage .prodbuy { margin-top: auto; padding-top: 34px; } @media (max-width: 980px) { .typixpage .hero { padding: calc(var(--navh) + 18px) 0 64px; } /* ⚠️ La reorganisation empilee du hero est TOUT EN BAS de ce fichier, et ce n'est pas un oubli : elle surcharge .prodbuy, .licence et .aebadge, dont les regles de base sont declarees PLUS LOIN dans ce fichier. A specificite egale c'est la derniere lue qui gagne, donc une surcharge ecrite ici serait morte. Voir « hero empile » en fin de fichier. */ } /* Ecran portrait : moniteur pivote (1080 de large), ou fenetre haute et etroite. On reste en deux colonnes, mais le partage 64/36 n'y tient plus. Mesure a 1080px AVANT : 1080 - 80 (--espacecote) - 76 (gap) = 924 utiles, soit 591px de video et 333px de panneau. 333px pour loger le badge Ae, le titre, la description, l'encart licence, le prix et le bouton : le panneau monte alors a ~616px de haut alors que la video, en 16:9, n'en fait que 333. D'ou 300px de creme sous la video, le vrai defaut de cette bande. 1) On reequilibre a 55/45 et on resserre le gap : le panneau passe de 333 a 428px, donc moins de retours a la ligne et un panneau plus court. 2) On centre la video verticalement. Elle est en 1920x1080, elle ne pourra JAMAIS egaler la hauteur du panneau a cette largeur : le vide est structurel, autant le repartir de part et d'autre plutot que de le laisser s'accumuler sous la video. .prodbuy n'a rien a corriger ici : son margin-top:auto vaut deja 0 puisque le texte est la colonne la plus haute, et son padding-top: 34px assure l'ecart avec la licence. Ne pas y toucher, cette regle couvre les deux cas sans point de rupture (voir son commentaire plus haut). */ @media (min-width: 981px) and (max-width: 1240px) { .typixpage .hero__grid { gap: 48px; } .typixpage .hero__col--media { flex: 1 1 55%; justify-content: center; } .typixpage .hero__col--text { flex: 1 1 45%; } } /* Ligne du titre produit : le nom, puis la pastille NEW a sa droite. ⚠️ Ce conteneur existe uniquement parce que la pastille ne peut pas vivre DANS le

: splittext.js decoupe .prodname caractere par caractere et les lettres de NEW s'animeraient hors de leur fond. Le rendu est le meme. Centre et pas aligne sur la ligne de base : a 53px de titre contre 13px de pastille, une base commune collerait la pastille au bas du titre. */ .typixpage .prodtitreligne { display: flex; align-items: center; gap: 14px; } /* Pastille NEW, meme couple de couleurs que les badges de l'accueil (#9bee68 / #1b3a1d, contraste 8,9:1) et que la pastille de prix de la boutique. Contrairement a ceux de l'accueil, elle est visible en permanence et pas au survol : une nouveaute ne s'annonce pas seulement a la souris, et il n'y a pas de survol sur telephone. ⚠️ Taille en px, pas en rem : base.css fait tomber la base rem a 13px sous 768px, un 0.8rem serait descendu a 10,4px. */ .typixpage .prodnew { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 5px; background: var(--vertmarque); color: var(--vertmarquedeux); font-family: var(--police); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; user-select: none; } /* Badge After Effects reconstruit : les couleurs Adobe reelles, net a toute taille, aucun asset. Il est SEUL sur sa ligne : accole au nom du createur, il laissait croire que Tibz Design etait After Effects. */ .typixpage .aebadge { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: #00005b; color: #9999ff; font-family: var(--font); font-weight: 700; font-size: 0.98rem; letter-spacing: -0.02em; } .typixpage .prodvendor { margin: 14px 0 4px; font-size: 0.94rem; font-weight: 500; color: var(--ink-2); } .typixpage .prodname { margin: 0; font-size: clamp(2.4rem, 3.6vw, 3.3rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.035em; } /* Bloc licence compact. Le detail complet vit dans la section #licence : le repeter ici alourdissait le panneau pour rien. */ .typixpage .licence { margin: 22px 0 0; } .typixpage .licence__lb { display: block; margin-bottom: 6px; font-family: var(--police); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .typixpage .licence__box { display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 14px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--card); } .typixpage .licence__val { flex: 1 1 auto; min-width: 0; font-size: 0.88rem; color: var(--ink); } .typixpage .licence__more { flex: none; padding: 4px 10px; border-radius: 5px; background: rgba(27, 27, 24, 0.05); font-size: 0.78rem; color: var(--ink-2); text-decoration: none; transition: background 0.2s var(--ease), color 0.2s var(--ease); } .typixpage .licence__more:hover { background: rgba(27, 27, 24, 0.1); color: var(--ink); } .typixpage .prodprice { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px; margin: 24px 0 16px; font-size: 2.4rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); } /* Prix de reference barre. Il suit le prix paye au lieu de le preceder : c'est le montant reellement demande qui doit se lire en premier. Plus petit et en gris moyen, sinon deux nombres de 2,4rem se disputent l'oeil et on ne sait plus lequel on paie. */ .typixpage .prodprice__avant { font-size: 1.15rem; font-weight: 500; letter-spacing: 0; color: var(--ink-3); text-decoration-thickness: 1px; } .typixpage .prodprice em { flex: 1 1 100%; margin-top: 6px; font-style: normal; font-size: 0.82rem; font-weight: 400; letter-spacing: 0; color: var(--ink-2); } /* ---------- media ---------- Les ratios des cartes collent aux sources (demos carrees, le reste 16:9), donc « cover » remplit pile la carte : aucun letterbox, le fond de carte ne se voit jamais. */ .typixpage .media { position: relative; overflow: hidden; background: var(--bg-alt); border-radius: var(--r-med); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); } /* Badge du type de produit, pose sur le visuel du hero. Meme role et meme coin que .storecard__type sur la carte de la boutique, mais pas la meme classe : ce sont deux pages, deux feuilles, et typix.css est scope sous .typixpage. Si l'apparence de l'un change, penser a l'autre. Aplat clair plutot qu'un fond translucide : la video de fond est sombre aujourd'hui, rien ne dit qu'elle le restera. */ .typixpage .media > .prodtype { position: absolute; left: 22px; bottom: 20px; z-index: 1; padding: 7px 14px; border-radius: var(--r-btn); background: var(--card); font-family: var(--police); font-size: 14px; font-weight: 500; color: var(--ink); } @media (max-width: 640px) { .typixpage .media > .prodtype { left: 14px; bottom: 13px; padding: 6px 11px; font-size: 12.5px; } } .typixpage .media--big { border-radius: var(--r-big); } .typixpage .media--sq { aspect-ratio: 1 / 1; } .typixpage .media--wide { aspect-ratio: 16 / 9; } .typixpage .media--strip { aspect-ratio: 6 / 1; } .typixpage .media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ---- Vignettes bicolores (--duo) ---- Deux couleurs du site : fond --vertmarquedeux (#1b3a1d), signes --vertmarque (#9bee68). Composition en DEUX fusions empilees : fond de carte = rgb(44,62,71) video en « screen » -> le noir de la source laisse voir le fond, les signes montent vers le blanc calque lime, multiply -> signes : blanc x lime = lime fond : base x lime = #1b3a1d Subtilite : le calque lime en multiply DIVISE le fond par lime/255. La couleur posee en fond est donc la cible PRE-DIVISEE : #1b3a1d / #9bee68 -> rgb(44, 62, 71) ce qui redonne exactement #1b3a1d apres fusion (verifie a la mesure). isolation:isolate enferme les fusions dans la carte : elles ne bavent jamais sur la page. */ .typixpage .media--duo { background: rgb(44, 62, 71); /* = #1b3a1d divise par le lime */ isolation: isolate; } .typixpage .media--duo > video { filter: grayscale(1) brightness(1.28); /* pas d'inversion ici */ mix-blend-mode: screen; } .typixpage .media--duo::after { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--lime); mix-blend-mode: multiply; pointer-events: none; } /* Video brute : aucun filtre, aucune teinte, aucun fond qui deborde. */ .typixpage .media--raw { background: transparent; box-shadow: none; } /* Amplifier AVANT d'inverser : les sources plafonnent vers 196/255 de luminance, et un contrast() APRES invert() pivote autour de 0.5 et ecrase les marques vers le blanc (rendu delave). Ici l'encre mesure ~8/255. */ .typixpage .media--ink { background: #fff; } .typixpage .media--ink > video { filter: grayscale(1) brightness(1.3) invert(1); } .typixpage .media--ink::after { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--tint, #000); /* noir = neutre en screen */ mix-blend-mode: screen; pointer-events: none; } /* ---------- grille de styles ---------- */ .typixpage .grid-demos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-grid); margin-top: var(--sp-head); } .typixpage .tile { display: flex; flex-direction: column; gap: 12px; margin: 0; } .typixpage .tile__cap { display: flex; align-items: baseline; gap: 10px; padding: 0 4px; } /* Legende POSEE DANS la video, en bas a gauche. z-index 4 : au-dessus du calque de fusion multiply de --duo (z-index 3), sinon le blanc serait teinte par la fusion. */ .typixpage .tile__cap--in { position: absolute; z-index: 4; left: 15px; bottom: 13px; padding: 0; gap: 9px; pointer-events: none; } .typixpage .tile__cap--in .tile__name { color: #fff; font-weight: 500; } .typixpage .tile__name { font-size: 16px; font-weight: 500; color: var(--ink); } .typixpage .chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: var(--sp-head); } .typixpage .chip { padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--card); font-size: 14px; color: var(--ink-2); } .typixpage .chip--solid { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 500; } /* ---------- cartes de controle ---------- Une grille 2 colonnes, chaque carte avec son visuel en haut. Avant, les videos et les cartes de texte etaient deux blocs separes qui racontaient la meme chose deux fois. */ .typixpage .feat { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-grid); max-width: 940px; margin: 52px auto 0; } .typixpage .feat__c { margin: 0; padding: 20px 20px 26px; background: var(--card); border-radius: var(--r-med); } .typixpage .feat__c .media { margin-bottom: 20px; } .typixpage .feat__c h3 { margin: 0 0 10px; font-size: 1.32rem; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); } .typixpage .feat__c p { margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--ink-2); } @media (max-width: 700px) { .typixpage .feat { grid-template-columns: 1fr; gap: var(--sp-grid); } } /* ---------- tuiles perso : enchainement 01 -> 02 ---------- Presente en colonne, pas en deux colonnes cote a cote : avec un align-items:center la colonne courte (la bande) se centrait sur la hauteur de la colonne haute (le rendu 16:9), et l'etape 01 finissait PLUS BAS que l'etape 02. L'ordre de lecture etait casse. */ .typixpage .flow { max-width: 880px; margin: 52px auto 0; } .typixpage .flow__step { margin: 0; padding: 22px; background: var(--card); border-radius: var(--r-med); } .typixpage .flow__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; } /* pastille lime : c'est ce qui reveille la section, qui etait tout en gris */ .typixpage .flow__n { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--lime); color: var(--ink); font-family: var(--police); font-size: 0.82rem; font-weight: 600; } .typixpage .flow__t { font-size: 1rem; font-weight: 500; line-height: 1.4; color: var(--ink); } .typixpage .flow__t em { display: block; margin-top: 4px; font-style: normal; font-weight: 400; font-size: 0.9rem; line-height: 1.5; color: var(--ink-2); } /* la liaison : ce que Typix fait entre les deux etapes, ecrit noir sur blanc. C'est ce qui manquait pour que la section soit explicite. */ .typixpage .flow__link { display: flex; align-items: center; gap: 16px; padding: 22px; } .typixpage .flow__arrow { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--lime); color: var(--ink); } .typixpage .flow__link p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--ink-2); } @media (max-width: 620px) { .typixpage .flow__step { padding: 16px; } .typixpage .flow__link { padding: 18px 4px; gap: 13px; } } /* ---------- creations ---------- */ .typixpage .grid-creas { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-grid); margin-top: var(--sp-head); } .typixpage .crea { cursor: pointer; margin: 0; } .typixpage .crea .media { transition: transform 0.3s var(--ease); } .typixpage .crea:hover .media { transform: scale(1.008); } .typixpage .crea__veil { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.32); opacity: 0; transition: opacity 0.26s var(--ease); } .typixpage .crea:hover .crea__veil, .typixpage .crea:focus-visible .crea__veil { opacity: 1; } .typixpage .crea__veil span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: var(--r-btn); background: rgba(255, 255, 255, 0.94); color: var(--ink); font-size: 15px; font-weight: 500; } /* ---------- etapes d'installation ---------- */ .typixpage .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-grid); margin-top: var(--sp-head); } .typixpage .step { padding: 30px 26px 32px; background: var(--card); border-radius: var(--r-card); } .typixpage .step__n { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-bottom: 20px; border-radius: 50%; background: var(--lime); color: var(--ink); font-family: var(--police); font-size: 15px; font-weight: 600; } .typixpage .step h3 { margin-bottom: 9px; } .typixpage .step p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); } /* ---------- inclus + prix ---------- */ .typixpage .buygrid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-grid); margin-top: var(--sp-head); align-items: start; } .typixpage .panel { padding: 36px 34px 38px; border: 1px solid var(--line-soft); border-radius: var(--r-big); background: var(--card); } .typixpage .panel--dark { background: var(--ink); border-color: var(--ink); color: #fff; } .typixpage .panel--dark h3, .typixpage .panel--dark p { color: #fff; } .typixpage .incl { list-style: none; margin: 24px 0 0; padding: 0; } .typixpage .incl li { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line-soft); } .typixpage .incl li:last-child { border-bottom: none; } .typixpage .incl .ck { flex: none; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--lime); color: var(--ink); } .typixpage .incl .itlabel { font-size: 16px; font-weight: 500; color: var(--ink); } .typixpage .incl .itsub { margin-left: auto; font-size: 14px; color: var(--ink-3); text-align: right; } .typixpage .reqs { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; } .typixpage .price { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 0; } .typixpage .price__now { font-size: 62px; font-weight: 600; line-height: 1; letter-spacing: -0.04em; } /* Panneau noir : le conteneur .price etait deja en flex align-items:baseline avec un gap, il accueille le prix barre sans autre reglage. L'opacite plutot qu'une couleur en dur, pour rester juste sur ce fond sombre. */ .typixpage .price__was { font-size: 24px; font-weight: 500; letter-spacing: -0.01em; opacity: 0.5; text-decoration-thickness: 1px; } .typixpage .price__note { margin-top: 14px; font-size: 15px; opacity: 0.65; } .typixpage .panel--dark .btn--primary { background: #fff; color: var(--ink); } .typixpage .panel--dark .btn--primary:hover { background: #f0f0f2; color: var(--ink); } .typixpage .assure { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .typixpage .assure li { display: flex; align-items: center; gap: 13px; font-size: 15px; } .typixpage .assure .ic { flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: rgba(255, 255, 255, 0.12); } .typixpage .pay { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.14); } .typixpage .pay__lb { margin: 0; font-size: 13px; opacity: 0.6; } .typixpage .pay__row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .typixpage .pay__row span { padding: 6px 11px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; opacity: 0.85; } /* ---------- licence (EULA integral) ---------- */ .typixpage .eula { max-width: 940px; margin: 52px auto 0; padding: 38px 40px 34px; background: var(--card); border-radius: var(--r-med); } .typixpage .eula__intro { margin: 0 0 30px; padding-bottom: 26px; border-bottom: 1px solid var(--line-soft); font-size: 0.95rem; line-height: 1.6; color: var(--ink-2); } .typixpage .eula__c { padding: 17px 0; border-bottom: 1px solid var(--line-soft); } .typixpage .eula__c:last-of-type { border-bottom: none; padding-bottom: 4px; } .typixpage .eula__t { margin: 0 0 5px; font-size: 0.98rem; font-weight: 600; } .typixpage .eula__p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--ink-2); } .typixpage .eula__ul { margin: 9px 0 0; padding: 0 0 0 4px; list-style: none; } .typixpage .eula__ul li { position: relative; padding-left: 17px; margin-bottom: 5px; font-size: 0.9rem; line-height: 1.55; color: var(--ink-2); } .typixpage .eula__ul li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 1.5px; background: var(--ink-3); } .typixpage .eula__foot { margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--line-soft); font-size: 0.8rem; color: var(--ink-3); } .typixpage .eula__foot a { color: var(--ink-2); text-decoration: underline; } @media (max-width: 620px) { .typixpage .eula { padding: 24px 20px 22px; } } /* ---------- FAQ ---------- */ .typixpage .faq { max-width: 780px; margin: 48px auto 0; } .typixpage .faq details { border-bottom: 1px solid var(--line); } .typixpage .faq summary { display: flex; align-items: center; gap: 16px; padding: 22px 4px; font-size: 18px; font-weight: 500; color: var(--ink); cursor: pointer; list-style: none; transition: color 0.2s var(--ease); } .typixpage .faq summary::-webkit-details-marker { display: none; } .typixpage .faq summary:hover { color: var(--accent); } .typixpage .faq summary .plus { flex: none; margin-left: auto; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--ink-3); transition: transform 0.24s var(--ease); } .typixpage .faq details[open] summary .plus { transform: rotate(45deg); } .typixpage .faq .ans { padding: 0 4px 26px; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 68ch; } /* ---------- lightbox ---------- ⚠️ Pas de scope .typixpage ici : le JS l'ajoute a document.body, donc en dehors du wrapper. Le nom est prefixe pour compenser. */ .typix-lightbox { position: fixed; inset: 0; z-index: 9500; /* la navbar du site est a 9000 */ display: flex; align-items: center; justify-content: center; padding: 4vmin; background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .typix-lightbox__box { position: relative; width: min(1080px, 94vw); border-radius: var(--anglesprojets); overflow: hidden; background: #000; } .typix-lightbox__box video { width: 100%; height: auto; max-height: 84vh; display: block; } .typix-lightbox__x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: #1b1b18; cursor: pointer; } .typix-lightbox__cap { padding: 14px 20px; background: #fff; color: #1b1b18; font-family: "Inter", sans-serif; font-size: 15px; font-weight: 500; } /* ---------- revelation au defilement (tres sobre) ---------- */ /* L'apparition au defilement est celle du reste du site : AOS, en fade-up, avec les memes reglages que l'accueil (duree 400, ancrage top-bottom). La page avait auparavant son propre mecanisme [data-rv], qui donnait une animation differente du reste du site. */ @media (prefers-reduced-motion: reduce) { .typixpage .crea:hover .media { transform: none; } } /* ---------- responsive ---------- */ /* le site passe --espacecote a 20px sous 768px : on suit, en fixe */ @media (max-width: 768px) { .typixpage { --gutter: 20px; --navh: 64px; } } @media (max-width: 980px) { .typixpage { --sp-section: 64px; --sp-head: 30px; } .typixpage .grid-demos { grid-template-columns: repeat(2, 1fr); } .typixpage .buygrid { grid-template-columns: 1fr; } .typixpage .steps { grid-template-columns: 1fr; } } @media (max-width: 620px) { .typixpage { font-size: 16px; } .typixpage { --sp-section: 48px; --sp-head: 26px; } /* ⚠️ La grille des styles reste a DEUX colonnes sur telephone, elle ne tombe pas a une seule. Les 9 vignettes sont carrees et se lisent tres bien a ~158px de cote (375 - 40 de gouttiere - 12 d'ecart, divise par 2) : en une colonne elles devenaient enormes et la section demandait neuf ecrans de defilement pour etre parcourue. */ .typixpage .grid-demos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } /* 9 vignettes sur 2 colonnes laissent une orpheline en fin de grille. On en retire une (Katakana) pour tomber sur 4 rangees pleines. ⚠️ display: none ne suffit PAS a economiser le telechargement : un