/* ============================================================================= HZM — Titres & texte défilant ========================================================================== */ .hzm-tt{position:relative;font-family:Arial,Helvetica,sans-serif;margin:var(--tt-mgt,0) var(--tt-mgr,0) var(--tt-mgb,0) var(--tt-mgl,0)} .hzm-tt .hzm-tt-in{position:relative;line-height:0; /* En flux inline, le titre s'aligne sur une ligne de base et le navigateur reserve autour de lui la place des hampes et des jambages : des dizaines de pixels de blanc sur une grande taille, qu'aucune marge ne peut retirer. En colonne flex, ses enfants ne participent plus a une ligne de texte et l'espace disparait. */ display:flex;flex-direction:column} /* L'alignement horizontal suivait « text-align » : en flex, il passe par l'alignement des elements. */ .hzm-tt.tt-al-left .hzm-tt-in{align-items:flex-start} .hzm-tt.tt-al-center .hzm-tt-in{align-items:center} .hzm-tt.tt-al-right .hzm-tt-in{align-items:flex-end} /* Le filigrane et les cadres restent poses en absolu : hors flux, ils ne deviennent pas des elements de la colonne. */ .hzm-tt .hzm-tt-in > .hzm-tt-wm{position:absolute} .hzm-tt .hzm-tt-over,.hzm-tt .hzm-tt-sub,.hzm-tt .hzm-tt-sep{line-height:normal} .hzm-tt.tt-al-left{text-align:left} .hzm-tt.tt-al-center{text-align:center} .hzm-tt.tt-al-right{text-align:right} .hzm-tt.tt-p-color .hzm-tt-in{background:var(--tt-panel,#0072FF)} .hzm-tt.tt-p-grad .hzm-tt-in{background:var(--tt-panel,linear-gradient(135deg,#0072FF,#8200F4,#FF6C5F))} /* ---- Titre ---- */ .hzm-tt .hzm-tt-h{position:relative;display:inline-block;vertical-align:top;margin:var(--tt-hmt,0) 0 var(--tt-hmb,0);padding:0 calc(.16em + var(--tt-pad,0px)) 0 calc(.05em + var(--tt-pad,0px));font-family:var(--tt-ff,inherit);font-size:var(--tt-size,42px);font-weight:var(--tt-weight,800);letter-spacing:var(--tt-ls,0);line-height:var(--tt-lh,1.2);color:var(--tt-c,#14143c)} .hzm-tt.tt-p-color .hzm-tt-h,.hzm-tt.tt-p-grad .hzm-tt-h{color:var(--tt-c,#fff)} .hzm-tt.ttcase-upper .hzm-tt-h{text-transform:uppercase} .hzm-tt.ttcase-lower .hzm-tt-h{text-transform:lowercase} .hzm-tt.ttcase-cap .hzm-tt-h{text-transform:capitalize} /* Remplissage */ .hzm-tt.ttf-grad .hzm-tt-h{background:var(--tt-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .hzm-tt.ttf-outline .hzm-tt-h{color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:var(--tt-stroke,1.5px) var(--tt-c,#8224E3)} .hzm-tt.ttf-neon .hzm-tt-h{color:var(--tt-c,#fff);text-shadow:0 0 calc(var(--tt-glow,14px) * .35) #fff,0 0 var(--tt-glow,14px) var(--tt-hi1,#0072FF),0 0 calc(var(--tt-glow,14px) * 1.9) var(--tt-hi2,#8200F4)} /* ---- Mot mis en valeur ---- */ .hzm-tt .hzm-tt-hi{position:relative;display:inline-block} .hzm-tt .hzm-tt-hiw{position:relative;z-index:1;font-family:var(--tt-ffh,inherit)} .hzm-tt.tthi-grad .hzm-tt-hiw{background:linear-gradient(90deg,var(--tt-hi1,#8200F4),var(--tt-hi2,#FF6C5F));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .hzm-tt.tthi-color .hzm-tt-hiw{color:var(--tt-hi1,#8224E3);-webkit-text-fill-color:var(--tt-hi1,#8224E3)} .hzm-tt.tthi-outline .hzm-tt-hiw{color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:var(--tt-stroke,1.5px) var(--tt-hi1,#8224E3)} .hzm-tt.tthi-marker .hzm-tt-hiw,.hzm-tt.tthi-marker2 .hzm-tt-hiw{color:inherit;-webkit-text-fill-color:currentColor;transition:color 220ms ease} .hzm-tt.tthi-marker .hzm-tt-hi,.hzm-tt.tthi-marker2 .hzm-tt-hi{padding:0 .2em;margin:0 .04em} .hzm-tt.tthi-marker .hzm-tt-hi::before,.hzm-tt.tthi-marker2 .hzm-tt-hi::before{content:"";position:absolute;left:0;right:0;bottom:.04em;top:auto;height:var(--tt-hih,30%);z-index:0;background:linear-gradient(90deg,var(--tt-hi1,#8200F4),var(--tt-hi2,#FF6C5F));border-radius:4px;transform-origin:left;transition:height 260ms cubic-bezier(.22,.85,.28,1),transform 260ms cubic-bezier(.22,.85,.28,1),opacity 220ms ease} .hzm-tt.tthi-marker2 .hzm-tt-hi{padding:0 .3em} .hzm-tt.tthi-marker2 .hzm-tt-hi::before{border-radius:2px;transform:skewX(-16deg);left:-.04em;right:-.04em} .hzm-tt.tthi-box .hzm-tt-hi{padding:0 .26em;margin:0 .06em} .hzm-tt.tthi-box .hzm-tt-hi::before{content:"";position:absolute;left:0;right:0;top:-.08em;bottom:-.06em;z-index:0;border:2px solid var(--tt-hi1,#8224E3);border-radius:8px} .hzm-tt.tthi-under .hzm-tt-hi::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:.09em;min-height:3px;border-radius:3px;background:linear-gradient(90deg,var(--tt-hi1,#8200F4),var(--tt-hi2,#FF6C5F));transform-origin:left} .hzm-tt.tthi-strike .hzm-tt-hi::after{content:"";position:absolute;left:-.05em;right:-.05em;top:52%;height:.08em;min-height:3px;border-radius:3px;background:var(--tt-hi1,#FF6C5F);transform-origin:left} /* Animation du mot */ @keyframes hzmTtGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes hzmTtPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}} .hzm-tt.tthia-draw .hzm-tt-hi::before,.hzm-tt.tthia-draw .hzm-tt-hi::after{transform:scaleX(0)} .hzm-tt.tthia-draw.is-in .hzm-tt-hi::before,.hzm-tt.tthia-draw.is-in .hzm-tt-hi::after{animation:hzmTtGrow var(--tt-dur,700ms) cubic-bezier(.22,.85,.28,1) forwards} .hzm-tt.tthia-draw.tthi-marker2.is-in .hzm-tt-hi::before{animation:hzmTtGrow var(--tt-dur,700ms) cubic-bezier(.22,.85,.28,1) forwards} .hzm-tt.tthia-pulse.is-in .hzm-tt-hi{animation:hzmTtPulse 2.4s ease-in-out infinite} /* ---- Soulignement décoratif ---- */ /* Hauteur réelle du tracé : chaque style la redéfinit. Elle sert à réserver la place sous le titre, pour que le trait ne retombe pas sur le slogan. */ .hzm-tt{--tt-ulhh:var(--tt-ulh,4px)} .hzm-tt.has-ul .hzm-tt-h{padding-bottom:calc(var(--tt-uloff,12px) + var(--tt-ulhh))} .hzm-tt .hzm-tt-ul{left:calc(.05em + var(--tt-pad,0px));right:calc(.16em + var(--tt-pad,0px));width:auto} .hzm-tt.ttulw-short .hzm-tt-ul{width:60px;right:auto} .hzm-tt.ttulw-custom .hzm-tt-ul{width:var(--tt-ulwv,240px);right:auto} .hzm-tt.tt-al-center.ttulw-short .hzm-tt-ul{left:50%;right:auto} .hzm-tt.tt-al-center.ttulw-custom .hzm-tt-ul{left:50%;right:auto} .hzm-tt.tt-al-right.ttulw-short .hzm-tt-ul{left:auto;right:calc(.16em + var(--tt-pad,0px))} .hzm-tt.tt-al-right.ttulw-custom .hzm-tt-ul{left:auto;right:calc(.16em + var(--tt-pad,0px))} .hzm-tt .hzm-tt-ul{position:absolute;left:0;bottom:0;width:100%;height:var(--tt-ulhh);border-radius:4px;transform-origin:left} .hzm-tt.tt-al-center .hzm-tt-ul{left:50%;transform:translateX(-50%)} .hzm-tt.tt-al-right .hzm-tt-ul{left:auto;right:0} .hzm-tt.ttulw-short .hzm-tt-ul{width:60px} .hzm-tt.ttul-none .hzm-tt-ul{display:none} @keyframes hzmTtUl{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes hzmTtUlC{from{transform:translateX(-50%) scaleX(0)}to{transform:translateX(-50%) scaleX(1)}} .hzm-tt.tt-ulanim .hzm-tt-ul{transform:scaleX(0)} .hzm-tt.tt-ulanim.tt-al-center .hzm-tt-ul{transform:translateX(-50%) scaleX(0)} .hzm-tt.tt-ulanim.is-in .hzm-tt-ul{animation:hzmTtUl var(--tt-dur,700ms) cubic-bezier(.22,.85,.28,1) 120ms forwards} .hzm-tt.tt-ulanim.tt-al-center.is-in .hzm-tt-ul{animation:hzmTtUlC var(--tt-dur,700ms) cubic-bezier(.22,.85,.28,1) 120ms forwards} /* Soulignement sous le mot en valeur */ .hzm-tt.ttulw-word .hzm-tt-ul{display:none} .hzm-tt.ttulw-word .hzm-tt-hi::after{content:"";position:absolute;left:0;right:0;bottom:calc(-1 * var(--tt-uloff,12px));height:var(--tt-ulhh);background-image:var(--tt-ulgrad,linear-gradient(90deg,#8224E3,#8224E3));-webkit-mask:inherit;mask:inherit;border-radius:4px;background:var(--tt-ulc,#8224E3);transform-origin:left} .hzm-tt.ttulw-word.ttul-none .hzm-tt-hi::after{display:none} .hzm-tt.ttulw-word.tt-ulanim .hzm-tt-hi::after{transform:scaleX(0)} .hzm-tt.ttulw-word.tt-ulanim.is-in .hzm-tt-hi::after{animation:hzmTtUl var(--tt-dur,700ms) cubic-bezier(.22,.85,.28,1) 160ms forwards} /* ---- Ornements ---- */ .hzm-tt .hzm-tt-over{display:block;font-family:var(--tt-ffo,inherit);font-size:var(--tt-oversize,13px);font-weight:800;letter-spacing:var(--tt-overls,2px);color:var(--tt-overc,#0072FF);margin-bottom:var(--tt-overmb,10px)} .hzm-tt.tt-p-grad .hzm-tt-over{color:var(--tt-overc,rgba(255,255,255,.9))} .hzm-tt .hzm-tt-sub{font-family:var(--tt-ffs,inherit);font-size:var(--tt-subsize,16px);line-height:var(--tt-sublh,1.6);color:var(--tt-subc,#6a6a80);margin-top:var(--tt-submt,14px)} .hzm-tt.tt-p-grad .hzm-tt-sub,.hzm-tt.tt-p-color .hzm-tt-sub{color:var(--tt-subc,rgba(255,255,255,.82))} .hzm-tt .hzm-tt-wm{position:absolute;top:-.28em;right:0;z-index:0;font-size:var(--tt-wmsize,110px);font-weight:900;line-height:1;color:var(--tt-wmc,rgba(20,20,60,.06));pointer-events:none;user-select:none} .hzm-tt.tt-al-center .hzm-tt-wm{left:50%;right:auto;transform:translateX(-50%)} .hzm-tt.tt-al-left .hzm-tt-wm{left:0;right:auto} .hzm-tt.tt-p-grad .hzm-tt-wm{color:var(--tt-wmc,rgba(255,255,255,.09))} .hzm-tt .hzm-tt-h,.hzm-tt .hzm-tt-over,.hzm-tt .hzm-tt-sub,.hzm-tt .hzm-tt-sep{position:relative;z-index:1} .hzm-tt .hzm-tt-sep{display:flex;align-items:center;gap:12px;margin:16px 0 4px} .hzm-tt.tt-al-center .hzm-tt-sep{justify-content:center} .hzm-tt.tt-al-left .hzm-tt-sep .hzm-tt-sepl:last-child,.hzm-tt.tt-al-right .hzm-tt-sep .hzm-tt-sepl:first-child{display:none} .hzm-tt .hzm-tt-sepl{flex:1;max-width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--tt-sepc,#d5d5e4))} .hzm-tt .hzm-tt-sepl:last-child{background:linear-gradient(90deg,var(--tt-sepc,#d5d5e4),transparent)} .hzm-tt.sep-line .hzm-tt-sepl,.hzm-tt .hzm-tt-sep.sep-line .hzm-tt-sepl{max-width:90px} .hzm-tt .hzm-tt-sepico{flex:none;font-size:15px;color:var(--tt-sepc,#8224E3);line-height:1} .hzm-tt .hzm-tt-sepdots{flex:none;display:flex;gap:5px} .hzm-tt .hzm-tt-sepdots i{display:block;width:calc(var(--tt-seph,2px) * 3);height:calc(var(--tt-seph,2px) * 3);border-radius:50%;background:var(--tt-sepc,#8224E3)} .hzm-tt .hzm-tt-sepdots i:nth-child(2){background:var(--tt-hi1,#8200F4)} .hzm-tt .hzm-tt-sepdots i:nth-child(3){background:var(--tt-hi2,#FF6C5F)} /* ---- Animations d'apparition ---- */ @keyframes hzmTtIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .hzm-tt.ttanim-fade .hzm-tt-in,.hzm-tt.ttanim-up .hzm-tt-in{opacity:0} .hzm-tt.ttanim-fade.is-in .hzm-tt-in{animation:hzmTtIn var(--tt-dur,700ms) ease forwards} .hzm-tt.ttanim-up.is-in .hzm-tt-in{animation:hzmTtIn var(--tt-dur,700ms) cubic-bezier(.22,.85,.28,1) forwards} .hzm-tt .hzm-tt-p{display:inline-block} /* Chaque fragment porte son propre fond : sa boîte doit donc, elle aussi, englober les glyphes qui débordent (les jambages des écritures manuscrites). Le padding élargit la boîte, la marge négative annule le décalage : la lettre suivante ne bouge pas d'un pixel. */ .hzm-tt.ttanim-word .hzm-tt-p,.hzm-tt.ttanim-letter .hzm-tt-p{padding-right:calc(.18em + var(--tt-pad,0px));margin-right:calc(-1 * (.18em + var(--tt-pad,0px)));padding-left:calc(.04em + var(--tt-pad,0px) * .3);margin-left:calc(-1 * (.04em + var(--tt-pad,0px) * .3))} /* Découpe + dégradé : le transform du span crée un contexte d'empilement, le background-clip du parent ne l'atteint plus. On le pose donc sur chaque span, et le JS recale le dégradé pour qu'il reste continu sur tout le titre. */ .hzm-tt.ttf-grad.ttanim-word .hzm-tt-h,.hzm-tt.ttf-grad.ttanim-letter .hzm-tt-h{background:none} .hzm-tt.ttf-grad.ttanim-word .hzm-tt-p,.hzm-tt.ttf-grad.ttanim-letter .hzm-tt-p{background-image:var(--tt-grad);background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .hzm-tt:not(.ttanim-word):not(.ttanim-letter) .hzm-tt-p{opacity:1} .hzm-tt.ttanim-word .hzm-tt-p,.hzm-tt.ttanim-letter .hzm-tt-p{opacity:0;transform:translateY(12px)} .hzm-tt.ttanim-word.is-in .hzm-tt-p,.hzm-tt.ttanim-letter.is-in .hzm-tt-p{animation-name:hzmTtIn;animation-duration:var(--tt-dur,700ms);animation-timing-function:cubic-bezier(.22,.85,.28,1);animation-delay:var(--tt-i,0ms);animation-fill-mode:forwards} /* ---- Rotateur / machine à écrire ---- */ .hzm-tt .hzm-tt-rot{display:inline-flex;align-items:baseline;color:var(--tt-r1,#8224E3);-webkit-text-fill-color:var(--tt-r1,#8224E3)} .hzm-tt.ttrf-grad .hzm-tt-rot .hzm-tt-rotw{background:linear-gradient(90deg,var(--tt-r1,#8200F4),var(--tt-r2,#FF6C5F));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .hzm-tt.ttrf-outline .hzm-tt-rot .hzm-tt-rotw{color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:var(--tt-stroke,1.5px) var(--tt-r1,#8224E3)} .hzm-tt .hzm-tt-rotw{display:inline-block;font-family:var(--tt-ffr,inherit);transition:opacity 280ms ease,transform 280ms ease} .hzm-tt .hzm-tt-rot.is-out .hzm-tt-rotw{opacity:0;transform:translateY(-10px)} @keyframes hzmTtCaret{0%,49%{opacity:1}50%,100%{opacity:0}} .hzm-tt .hzm-tt-caret{display:inline-block;width:2px;align-self:stretch;margin-left:3px;background:var(--tt-r1,#8224E3);animation:hzmTtCaret .85s step-end infinite} .hzm-tt .hzm-tt-rot.is-typing .hzm-tt-rotw{transition:none} /* ============================================================================= Texte défilant ========================================================================== */ .hzm-tt.hzm-tt-marquee{overflow:visible} .hzm-tt .hzm-tt-mqband{display:flex;align-items:center;overflow:hidden;transform:rotate(var(--tt-mtilt,0deg));padding:10px 0} .hzm-tt .hzm-tt-mqwrap{flex:1;min-width:0;overflow:hidden} .hzm-tt.mq-wide{position:relative;max-width:none} .hzm-tt.mq-wide .hzm-tt-mqband{width:100%;margin-left:0} .hzm-tt.mqb-color .hzm-tt-mqband{background:var(--tt-mband,#0072FF)} .hzm-tt.mqb-grad .hzm-tt-mqband{background:var(--tt-mband,var(--tt-mgrad,var(--tt-grad)))} .hzm-tt.mqb-dark .hzm-tt-mqband{background:#14143c} .hzm-tt.mqb-color .hzm-tt-mqband,.hzm-tt.mqb-grad .hzm-tt-mqband,.hzm-tt.mqb-dark .hzm-tt-mqband{padding:var(--tt-mpad,14px) 0} .hzm-tt .hzm-tt-mqtrack{display:flex;width:max-content;will-change:transform} @keyframes hzmTtMqL{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes hzmTtMqR{from{transform:translateX(-50%)}to{transform:translateX(0)}} .hzm-tt.mqd-left .hzm-tt-mqtrack{animation:hzmTtMqL var(--tt-mspeed,24s) linear infinite} .hzm-tt.mqd-right .hzm-tt-mqtrack{animation:hzmTtMqR var(--tt-mspeed,24s) linear infinite} .hzm-tt.mq-pause:hover .hzm-tt-mqtrack{animation-play-state:paused} .hzm-tt .hzm-tt-mqrun{display:flex;align-items:center;flex:none;white-space:nowrap;font-size:var(--tt-msize,34px);font-weight:800;letter-spacing:var(--tt-mls,0)} .hzm-tt.mq-upper .hzm-tt-mqrun{text-transform:uppercase} .hzm-tt .hzm-tt-mseg{padding:0 var(--tt-mgap,.34em);font-family:var(--tt-ffm,inherit);color:var(--tt-mc1,#14143c)} .hzm-tt.mqf-grad .hzm-tt-mseg{background:var(--tt-mgrad,var(--tt-grad));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .hzm-tt.mqf-outline .hzm-tt-mseg{color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.4px var(--tt-mc1,#8224E3)} .hzm-tt.mqb-color .hzm-tt-mseg,.hzm-tt.mqb-dark .hzm-tt-mseg{color:var(--tt-mc1,#fff)} .hzm-tt.mqb-grad .hzm-tt-mseg{color:var(--tt-mc1,#fff)} /* Un dégradé sur une bande dégradée est illisible : on retombe alors sur du plein. Mais la couleur choisie prime — elle n'est plus écrasée par un blanc en dur. */ .hzm-tt.mqb-grad.mqf-grad .hzm-tt-mseg{background:none;color:var(--tt-mc1,#fff);-webkit-text-fill-color:var(--tt-mc1,#fff)} .hzm-tt .hzm-tt-msepi{flex:none;font-size:.62em;color:var(--tt-msepc,#FF6C5F);line-height:1} .hzm-tt.mqb-grad .hzm-tt-msepi,.hzm-tt.mqb-color .hzm-tt-msepi{color:var(--tt-msepc,rgba(255,255,255,.75))} @media (max-width:700px){ .hzm-tt .hzm-tt-h{font-size:calc(var(--tt-size,42px) * .66)} .hzm-tt .hzm-tt-wm{font-size:calc(var(--tt-wmsize,110px) * .6)} .hzm-tt .hzm-tt-mqrun{font-size:calc(var(--tt-msize,34px) * .68)} .hzm-tt.tt-p-color .hzm-tt-in,.hzm-tt.tt-p-grad .hzm-tt-in{padding:calc(var(--tt-ppad,32px) * .62)} } @media (prefers-reduced-motion:reduce){ .hzm-tt .hzm-tt-mqtrack{animation:none} .hzm-tt.ttanim-fade .hzm-tt-in,.hzm-tt.ttanim-up .hzm-tt-in,.hzm-tt.ttanim-word .hzm-tt-p,.hzm-tt.ttanim-letter .hzm-tt-p{opacity:1;transform:none;animation:none} .hzm-tt.tt-ulanim .hzm-tt-ul,.hzm-tt.tt-ulanim .hzm-tt-hi::after{transform:scaleX(1)} .hzm-tt.tt-ulanim.tt-al-center .hzm-tt-ul{transform:translateX(-50%) scaleX(1)} } /* ---- Rotateur : styles de transition ---- */ .hzm-tt.ttrot-fixed .hzm-tt-rot{min-width:var(--tt-rotmin,auto);justify-content:center} .hzm-tt.ttrot-fade .hzm-tt-rot .hzm-tt-rotw{transition:opacity 280ms ease} .hzm-tt.ttrot-fade .hzm-tt-rot.is-out .hzm-tt-rotw{opacity:0;transform:none} .hzm-tt.ttrot-flip .hzm-tt-rot{perspective:600px} .hzm-tt.ttrot-flip .hzm-tt-rot .hzm-tt-rotw{transition:transform 320ms cubic-bezier(.22,.85,.28,1),opacity 320ms ease;transform-origin:center bottom} .hzm-tt.ttrot-flip .hzm-tt-rot.is-out .hzm-tt-rotw{opacity:0;transform:rotateX(-90deg)} .hzm-tt .hzm-tt-rotbar{position:absolute;left:0;right:0;bottom:-.16em;height:3px;border-radius:3px;background:rgba(128,128,128,.20);overflow:hidden} .hzm-tt .hzm-tt-rotbar i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--tt-r1,#8200F4),var(--tt-r2,#FF6C5F))} .hzm-tt.ttrot-bar .hzm-tt-rot{position:relative;padding-bottom:.1em} .hzm-tt.ttrot-bar .hzm-tt-rot.is-run .hzm-tt-rotbar i{width:100%;transition:width var(--tt-rotdelay,2600ms) linear} /* ---- Défilant : segments enrichis ---- */ .hzm-tt .hzm-tt-mseg.is-bold{font-weight:900} .hzm-tt .hzm-tt-mseg.is-italic{font-style:italic} .hzm-tt .hzm-tt-mseg.is-outline{color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.4px var(--tt-mc1,#8224E3);background:none} .hzm-tt .hzm-tt-msegico{margin-right:.32em;font-size:.78em} .hzm-tt a.hzm-tt-mseg{text-decoration:none;transition:opacity .2s} .hzm-tt a.hzm-tt-mseg:hover{opacity:.72} /* Effet gris */ .hzm-tt.mq-gray .hzm-tt-mseg{filter:grayscale(1);opacity:.55;transition:filter .3s ease,opacity .3s ease} .hzm-tt.mq-gray .hzm-tt-mqband:hover .hzm-tt-mseg{filter:grayscale(0);opacity:1} /* Défilement vertical */ /* En colonne, flex:1 signifie « prends toute la hauteur disponible » : il écrasait la hauteur réglée. On le neutralise, et la piste épouse la largeur du conteneur. */ .hzm-tt.mq-vert .hzm-tt-mqband{flex-direction:column;align-items:stretch;width:100%} .hzm-tt.mq-vert .hzm-tt-mqwrap{flex:0 0 auto;height:var(--tt-mh,260px);width:100%;overflow:hidden} .hzm-tt.mq-vert .hzm-tt-mqtrack{flex-direction:column;width:100%} .hzm-tt.mq-vert .hzm-tt-mqrun{display:flex;flex-direction:column;align-items:center;width:100%;white-space:normal} @keyframes hzmTtMqU{from{transform:translateY(0)}to{transform:translateY(-50%)}} @keyframes hzmTtMqD{from{transform:translateY(-50%)}to{transform:translateY(0)}} .hzm-tt.mq-vert.mqd-left .hzm-tt-mqtrack{animation-name:hzmTtMqU} .hzm-tt.mq-vert.mqd-right .hzm-tt-mqtrack{animation-name:hzmTtMqD} .hzm-tt.mq-vert .hzm-tt-mseg{padding:.2em .34em} .hzm-tt.mq-vert .hzm-tt-msepi{padding:.08em 0} /* Vitesse liée au scroll */ .hzm-tt.mq-smooth .hzm-tt-mqtrack{will-change:transform} /* ---- Titre fixe avant le défilant ---- */ .hzm-tt .hzm-tt-mbefore{flex:none;white-space:nowrap;font-size:var(--tt-mbsize,var(--tt-msize,34px));font-weight:900;letter-spacing:var(--tt-mls,0);padding:0 .5em 0 .2em;color:var(--tt-mbc,var(--tt-mc1,#14143c));line-height:1.15} .hzm-tt.mq-upper .hzm-tt-mbefore{text-transform:uppercase} .hzm-tt.mqbf-grad .hzm-tt-mbefore{background:var(--tt-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .hzm-tt.mqbf-outline .hzm-tt-mbefore{color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.4px var(--tt-mbc,var(--tt-mc1,#8224E3))} .hzm-tt.mqb-color .hzm-tt-mbefore,.hzm-tt.mqb-grad .hzm-tt-mbefore,.hzm-tt.mqb-dark .hzm-tt-mbefore{color:var(--tt-mbc,#fff)} .hzm-tt.mqb-grad.mqbf-grad .hzm-tt-mbefore,.hzm-tt.mqb-color.mqbf-grad .hzm-tt-mbefore{background:none;color:#fff;-webkit-text-fill-color:#fff} .hzm-tt.mq-gray .hzm-tt-mbefore{filter:none;opacity:1} .hzm-tt.mq-vert .hzm-tt-mbefore{padding:0 0 .4em;text-align:center;white-space:normal} @media (max-width:700px){ .hzm-tt .hzm-tt-mbefore{font-size:calc(var(--tt-mbsize,var(--tt-msize,34px)) * .68)} .hzm-tt.mq-hasbefore .hzm-tt-mqband{flex-direction:column;align-items:flex-start} .hzm-tt.mq-hasbefore .hzm-tt-mqwrap{width:100%} } /* ---- Rotateur : effets de remplacement ---- */ .hzm-tt.ttrot-erase .hzm-tt-rot .hzm-tt-rotw{transition:clip-path 300ms ease,opacity 200ms ease;clip-path:inset(0 0 0 0)} .hzm-tt.ttrot-erase .hzm-tt-rot.is-out .hzm-tt-rotw{clip-path:inset(0 0 0 100%);opacity:.2;transform:none} .hzm-tt.ttrot-wipe .hzm-tt-rot .hzm-tt-rotw{transition:clip-path 340ms cubic-bezier(.22,.85,.28,1),opacity 200ms ease;clip-path:inset(0 0 0 0)} .hzm-tt.ttrot-wipe .hzm-tt-rot.is-out .hzm-tt-rotw{clip-path:inset(0 100% 0 0);opacity:.35;transform:none} .hzm-tt.ttrot-zoom .hzm-tt-rot .hzm-tt-rotw{transition:transform 300ms cubic-bezier(.34,1.4,.64,1),opacity 260ms ease} .hzm-tt.ttrot-zoom .hzm-tt-rot.is-out .hzm-tt-rotw{opacity:0;transform:scale(.62)} .hzm-tt.ttrot-blur .hzm-tt-rot .hzm-tt-rotw{transition:filter 300ms ease,opacity 300ms ease,transform 300ms ease} .hzm-tt.ttrot-blur .hzm-tt-rot.is-out .hzm-tt-rotw{opacity:0;filter:blur(8px);transform:scale(1.06)} .hzm-tt.ttrot-under .hzm-tt-rot{position:relative;padding-bottom:.08em} .hzm-tt.ttrot-under .hzm-tt-rot .hzm-tt-rotw{transition:opacity 260ms ease,transform 260ms ease} .hzm-tt.ttrot-under .hzm-tt-rot.is-out .hzm-tt-rotw{opacity:0;transform:translateY(-6px)} .hzm-tt .hzm-tt-rotul{position:absolute;left:0;right:0;bottom:-.1em;height:var(--tt-ulh,4px);border-radius:4px;background:linear-gradient(90deg,var(--tt-r1,#8200F4),var(--tt-r2,#FF6C5F));transform-origin:left;transform:scaleX(1);transition:transform 300ms cubic-bezier(.22,.85,.28,1)} .hzm-tt .hzm-tt-rot.is-out .hzm-tt-rotul{transform:scaleX(0);transform-origin:right} /* ---- Rotateur : décor du mot qui change (indépendant du mot en valeur) ---- */ .hzm-tt[class*="ttrx-"] .hzm-tt-rot{position:relative} .hzm-tt.ttrx-marker .hzm-tt-rot,.hzm-tt.ttrx-marker2 .hzm-tt-rot{padding:0 .24em;margin:0 .05em} .hzm-tt.ttrx-marker .hzm-tt-rot .hzm-tt-rotw,.hzm-tt.ttrx-marker2 .hzm-tt-rot .hzm-tt-rotw{color:#fff;-webkit-text-fill-color:#fff;background:none;position:relative;z-index:1} .hzm-tt.ttrx-marker .hzm-tt-rot::before,.hzm-tt.ttrx-marker2 .hzm-tt-rot::before{content:"";position:absolute;left:0;right:0;top:.06em;bottom:.02em;z-index:0;background:linear-gradient(90deg,var(--tt-r1,#8200F4),var(--tt-r2,#FF6C5F));border-radius:6px} .hzm-tt.ttrx-marker2 .hzm-tt-rot{padding:0 .3em} .hzm-tt.ttrx-marker2 .hzm-tt-rot::before{border-radius:2px;transform:skewX(-16deg);left:-.04em;right:-.04em} .hzm-tt.ttrx-box .hzm-tt-rot{padding:0 .26em;margin:0 .06em} .hzm-tt.ttrx-box .hzm-tt-rot::before{content:"";position:absolute;left:0;right:0;top:-.08em;bottom:-.06em;z-index:0;border:2px solid var(--tt-r1,#8224E3);border-radius:8px} .hzm-tt.ttrx-under .hzm-tt-rot::after{content:"";position:absolute;left:0;right:0;bottom:-.08em;height:var(--tt-ulh,4px);border-radius:4px;background:linear-gradient(90deg,var(--tt-r1,#8200F4),var(--tt-r2,#FF6C5F))} .hzm-tt.ttrx-strike .hzm-tt-rot::after{content:"";position:absolute;left:-.04em;right:-.04em;top:52%;height:.08em;min-height:3px;border-radius:3px;background:var(--tt-r1,#FF6C5F);z-index:2} .hzm-tt.ttrx-marker .hzm-tt-rot .hzm-tt-caret,.hzm-tt.ttrx-marker2 .hzm-tt-rot .hzm-tt-caret{background:#fff;z-index:1} .hzm-tt.ttrot-under.ttrx-under .hzm-tt-rot::after{display:none} /* ---- Bande inclinée : couvrir bord à bord et ne rien rogner ---- */ .hzm-tt.hzm-tt-marquee.mq-tilt{overflow:hidden;padding:var(--tt-mtp,20px) 0} .hzm-tt.mq-tilt .hzm-tt-mqband{width:114%;margin-left:-7%} .hzm-tt.mq-tilt.mq-wide .hzm-tt-mqband{width:114%;margin-left:-7%} /* ============================================================================= Séparateur enrichi ========================================================================== */ .hzm-tt .hzm-tt-sepl{flex:1;max-width:var(--tt-sepw,120px);height:var(--tt-seph,2px);border-radius:4px;background:linear-gradient(90deg,transparent,var(--tt-sepc,#d5d5e4))} .hzm-tt .hzm-tt-sepl:last-child{background:linear-gradient(90deg,var(--tt-sepc,#d5d5e4),transparent)} .hzm-tt .hzm-tt-sep.sep-grad .hzm-tt-sepl,.hzm-tt .hzm-tt-sep.sep-grad .hzm-tt-sepl:last-child{background:var(--tt-grad)} .hzm-tt .hzm-tt-sep.sep-dash .hzm-tt-sepl,.hzm-tt .hzm-tt-sep.sep-dash .hzm-tt-sepl:last-child{background:repeating-linear-gradient(90deg,var(--tt-sepc,#8224E3) 0 10px,transparent 10px 18px);border-radius:0} .hzm-tt .hzm-tt-sep.sep-march .hzm-tt-sepl,.hzm-tt .hzm-tt-sep.sep-march .hzm-tt-sepl:last-child{height:calc(var(--tt-seph,2px) * 2.5);background:radial-gradient(circle at 50% 50%,var(--tt-sepc,#8224E3) 0 42%,transparent 44%);background-size:calc(var(--tt-seph,2px) * 5) 100%;background-repeat:repeat-x;border-radius:0} @keyframes hzmTtMarch{to{background-position:calc(var(--tt-seph,2px) * 5) 0}} .hzm-tt .hzm-tt-sep.sep-march.is-anim .hzm-tt-sepl,.hzm-tt .hzm-tt-sep.sep-march.is-anim .hzm-tt-sepl:last-child{animation:hzmTtMarch .7s linear infinite} .hzm-tt .hzm-tt-sep.sep-double .hzm-tt-sepl,.hzm-tt .hzm-tt-sep.sep-double .hzm-tt-sepl:last-child{height:calc(var(--tt-seph,2px) * 3);background:linear-gradient(180deg,var(--tt-sepc,#8224E3) 0 34%,transparent 34% 66%,var(--tt-sepc,#8224E3) 66% 100%);border-radius:0} .hzm-tt .hzm-tt-sep.sep-wave .hzm-tt-sepl,.hzm-tt .hzm-tt-sep.sep-wave .hzm-tt-sepl:last-child{height:calc(var(--tt-seph,2px) * 5);background:none;border-radius:0;-webkit-mask:url("data:image/svg+xml;utf8,") repeat-x center/40px 100%;mask:url("data:image/svg+xml;utf8,") repeat-x center/40px 100%;background-color:var(--tt-sepc,#8224E3)} .hzm-tt .hzm-tt-sep.sep-zig .hzm-tt-sepl,.hzm-tt .hzm-tt-sep.sep-zig .hzm-tt-sepl:last-child{height:calc(var(--tt-seph,2px) * 5);background:none;border-radius:0;-webkit-mask:url("data:image/svg+xml;utf8,") repeat-x center/40px 100%;mask:url("data:image/svg+xml;utf8,") repeat-x center/40px 100%;background-color:var(--tt-sepc,#8224E3)} .hzm-tt .hzm-tt-sepdia{flex:none;width:10px;height:10px;transform:rotate(45deg);background:linear-gradient(135deg,var(--tt-hi1,#8200F4),var(--tt-hi2,#FF6C5F))} /* Déploiement au scroll */ @keyframes hzmTtSepIn{from{transform:scaleX(0)}to{transform:scaleX(1)}} .hzm-tt .hzm-tt-sep.is-anim:not(.sep-march) .hzm-tt-sepl{transform:scaleX(0);transform-origin:right} .hzm-tt .hzm-tt-sep.is-anim:not(.sep-march) .hzm-tt-sepl:last-child{transform-origin:left} .hzm-tt.is-in .hzm-tt-sep.is-anim:not(.sep-march) .hzm-tt-sepl{animation:hzmTtSepIn var(--tt-dur,700ms) cubic-bezier(.22,.85,.28,1) 200ms forwards} /* ============================================================================= Liseré vertical ========================================================================== */ .hzm-tt.tt-bar-left .hzm-tt-in,.hzm-tt.tt-bar-right .hzm-tt-in{position:relative} /* Le liseré impose l'alignement (gauche ou droite) : le texte vient à lui. Le bloc garde donc sa largeur, et la barre longe le bord du texte. */ .hzm-tt.tt-bar-left:not(.tt-p-color):not(.tt-p-grad) .hzm-tt-in{padding-left:calc(var(--tt-barw,5px) + var(--tt-bargap,22px))} .hzm-tt.tt-bar-right:not(.tt-p-color):not(.tt-p-grad) .hzm-tt-in{padding-right:calc(var(--tt-barw,5px) + var(--tt-bargap,22px))} /* Avec un panneau, le liseré se pose À L'INTÉRIEUR, dans la marge du panneau. */ .hzm-tt.tt-bar-left.tt-p-color .hzm-tt-in,.hzm-tt.tt-bar-left.tt-p-grad .hzm-tt-in{padding-left:calc(var(--tt-ppl,32px) + var(--tt-barw,5px) + var(--tt-bargap,22px))} .hzm-tt.tt-bar-right.tt-p-color .hzm-tt-in,.hzm-tt.tt-bar-right.tt-p-grad .hzm-tt-in{padding-right:calc(var(--tt-ppr,32px) + var(--tt-barw,5px) + var(--tt-bargap,22px))} .hzm-tt.tt-bar-left.tt-p-color .hzm-tt-in::before,.hzm-tt.tt-bar-left.tt-p-grad .hzm-tt-in::before{left:var(--tt-ppl,32px)} .hzm-tt.tt-bar-right.tt-p-color .hzm-tt-in::before,.hzm-tt.tt-bar-right.tt-p-grad .hzm-tt-in::before{right:var(--tt-ppr,32px)} .hzm-tt.tt-bar-left.tt-p-color .hzm-tt-in::before,.hzm-tt.tt-bar-left.tt-p-grad .hzm-tt-in::before, .hzm-tt.tt-bar-right.tt-p-color .hzm-tt-in::before,.hzm-tt.tt-bar-right.tt-p-grad .hzm-tt-in::before{top:var(--tt-ppt,32px);bottom:var(--tt-ppb,32px)} @keyframes hzmTtBar{from{transform:scaleY(0)}to{transform:scaleY(1)}} .hzm-tt.tt-bar-left .hzm-tt-in::before,.hzm-tt.tt-bar-right .hzm-tt-in::before{content:"";position:absolute;top:2px;bottom:2px;width:var(--tt-barw,5px);border-radius:4px;background:var(--tt-barc,var(--tt-grad));transform-origin:top;transform:scaleY(0)} .hzm-tt.tt-bar-left .hzm-tt-in::before{left:0} .hzm-tt.tt-bar-right .hzm-tt-in::before{right:0} .hzm-tt.is-in.tt-bar-left .hzm-tt-in::before,.hzm-tt.is-in.tt-bar-right .hzm-tt-in::before{animation:hzmTtBar var(--tt-dur,700ms) cubic-bezier(.22,.85,.28,1) forwards} /* ============================================================================= Tracés à main levée (masques SVG) La couleur vient de background-color ; le masque découpe la forme du trait. ========================================================================== */ .hzm-tt.ttulw-word.ttul-hand .hzm-tt-hi::after{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")} .hzm-tt.ttulw-word.ttul-hand2 .hzm-tt-hi::after{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")} .hzm-tt.ttulw-word.ttul-zig .hzm-tt-hi::after{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")} /* ============================================================================= Remplissage par image / texture ========================================================================== */ .hzm-tt.ttf-image .hzm-tt-h{background-image:var(--tt-img,var(--tt-grad));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .hzm-tt.tthi-image .hzm-tt-hiw{background-image:var(--tt-imgh,var(--tt-img,var(--tt-grad)));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .hzm-tt.ttrf-image .hzm-tt-rot .hzm-tt-rotw{background-image:var(--tt-img,var(--tt-grad));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .hzm-tt.mqf-image .hzm-tt-mseg{background-image:var(--tt-imgm,var(--tt-grad));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .hzm-tt.mqf-image .hzm-tt-mbefore{background-image:var(--tt-imgm,var(--tt-grad));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} /* Cadrage */ .hzm-tt.ttimg-cover .hzm-tt-h,.hzm-tt.ttimg-cover .hzm-tt-hiw,.hzm-tt.ttimg-cover .hzm-tt-rotw,.hzm-tt.ttimg-cover .hzm-tt-mseg{background-size:cover;background-position:center;background-repeat:no-repeat} .hzm-tt.ttimg-contain .hzm-tt-h,.hzm-tt.ttimg-contain .hzm-tt-hiw,.hzm-tt.ttimg-contain .hzm-tt-rotw,.hzm-tt.ttimg-contain .hzm-tt-mseg{background-size:contain;background-position:center;background-repeat:no-repeat} .hzm-tt.ttimg-repeat .hzm-tt-h,.hzm-tt.ttimg-repeat .hzm-tt-hiw,.hzm-tt.ttimg-repeat .hzm-tt-rotw,.hzm-tt.ttimg-repeat .hzm-tt-mseg{background-size:auto;background-repeat:repeat} /* Texture animée : la matière défile lentement à l'intérieur des lettres */ @keyframes hzmTtImg{from{background-position:0 center}to{background-position:200% center}} .hzm-tt.tt-imganim.ttf-image .hzm-tt-h, .hzm-tt.tt-imganim.tthi-image .hzm-tt-hiw, .hzm-tt.tt-imganim.ttrf-image .hzm-tt-rot .hzm-tt-rotw, .hzm-tt.tt-imganim.mqf-image .hzm-tt-mseg{background-size:200% auto;animation:hzmTtImg 9s linear infinite} /* Découpe mot/lettre : même correctif que pour le dégradé */ .hzm-tt.ttf-image.ttanim-word .hzm-tt-h,.hzm-tt.ttf-image.ttanim-letter .hzm-tt-h{background-image:none} .hzm-tt.ttf-image.ttanim-word .hzm-tt-p,.hzm-tt.ttf-image.ttanim-letter .hzm-tt-p{background-image:var(--tt-img,var(--tt-grad));background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} @media (prefers-reduced-motion:reduce){.hzm-tt.tt-imganim .hzm-tt-h,.hzm-tt.tt-imganim .hzm-tt-hiw,.hzm-tt.tt-imganim .hzm-tt-mseg{animation:none}} /* ============================================================================= Surligneur — réactions au survol ========================================================================== */ /* Il se surélève : le bandeau monte et recouvre tout le mot */ .hzm-tt.tthov-rise .hzm-tt-hi{cursor:default} .hzm-tt.tthov-rise .hzm-tt-hi:hover::before{height:100%;bottom:0;border-radius:5px} .hzm-tt.tthov-rise.tthi-marker .hzm-tt-hi:hover .hzm-tt-hiw, .hzm-tt.tthov-rise.tthi-marker2 .hzm-tt-hi:hover .hzm-tt-hiw{color:#fff;-webkit-text-fill-color:#fff} /* Il se déploie : le bandeau se dessine de gauche à droite */ .hzm-tt.tthov-grow .hzm-tt-hi::before{transform:scaleX(0)} .hzm-tt.tthov-grow .hzm-tt-hi:hover::before{transform:scaleX(1)} /* Il apparaît : simple fondu */ .hzm-tt.tthov-show .hzm-tt-hi::before{opacity:0} .hzm-tt.tthov-show .hzm-tt-hi:hover::before{opacity:1} /* Un mot recouvert à 100 % en permanence : texte blanc d'office */ .hzm-tt.tthi-marker:not(.tthov-rise) .hzm-tt-hi::before{border-radius:4px} /* ============================================================================= Soulignements : traits sobres ========================================================================== */ /* Double trait : un gros, un fin */ /* Trait fin à points aux extrémités */ /* Trait fin à losanges aux extrémités */ /* Brosse : trait plein aux bords irréguliers */ /* Brosse texturée : matière effilochée, extrémités sèches */ /* Les mêmes, sous le mot en valeur */ /* ============================================================================= Soulignement — animations ========================================================================== */ /* Éclat qui balaie, de droite à gauche */ @keyframes hzmTtShine{from{background-position:180% 0,0 0}to{background-position:-80% 0,0 0}} .hzm-tt.ttula-shine .hzm-tt-ul{background-image:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%),var(--tt-ulgrad,linear-gradient(90deg,#8224E3,#8224E3));background-size:60% 100%,100% 100%;background-repeat:no-repeat,no-repeat;animation:hzmTtShine 2.6s linear infinite} /* Le dégradé coule dans le trait */ @keyframes hzmTtFlow{from{background-position:200% 0}to{background-position:0 0}} .hzm-tt.ttula-flow .hzm-tt-ul{background-size:200% 100%;animation:hzmTtFlow 3.4s linear infinite} /* Pulsation douce */ @keyframes hzmTtPulseUl{0%,100%{opacity:1}50%{opacity:.45}} .hzm-tt.ttula-pulse .hzm-tt-ul{animation:hzmTtPulseUl 2s ease-in-out infinite} @media (prefers-reduced-motion:reduce){.hzm-tt.ttula-shine .hzm-tt-ul,.hzm-tt.ttula-flow .hzm-tt-ul,.hzm-tt.ttula-pulse .hzm-tt-ul{animation:none}} /* ============================================================================= Soulignements — la FORME vient du masque, la COULEUR du background. Sans exception : c'est ce qui permet dégradés et animations sur tous les styles. ========================================================================== */ .hzm-tt .hzm-tt-ul{background-image:var(--tt-ulgrad,linear-gradient(90deg,#8224E3,#8224E3));background-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:100% 100%;mask-size:100% 100%} .hzm-tt.ttul-none .hzm-tt-ul{display:none} .hzm-tt.ttul-line{--tt-ulhh:calc(var(--tt-ulh,4px) * 1)} .hzm-tt.ttul-dots{--tt-ulhh:calc(var(--tt-ulh,4px) * 2)} .hzm-tt.ttul-dash{--tt-ulhh:calc(var(--tt-ulh,4px) * 1.2)} .hzm-tt.ttul-wave{--tt-ulhh:calc(var(--tt-ulh,4px) * 2.4)} .hzm-tt.ttul-zig{--tt-ulhh:calc(var(--tt-ulh,4px) * 2.6)} .hzm-tt.ttul-duo{--tt-ulhh:calc(var(--tt-ulh,4px) * 3.2)} .hzm-tt.ttul-ends{--tt-ulhh:calc(var(--tt-ulh,4px) * 2.8)} .hzm-tt.ttul-dia{--tt-ulhh:calc(var(--tt-ulh,4px) * 3.2)} .hzm-tt.ttul-brush{--tt-ulhh:calc(var(--tt-ulh,4px) * 2.4)} .hzm-tt.ttul-brush2{--tt-ulhh:calc(var(--tt-ulh,4px) * 2.8)} .hzm-tt.ttul-hand{--tt-ulhh:calc(var(--tt-ulh,4px) * 2.2)} .hzm-tt.ttul-hand2{--tt-ulhh:calc(var(--tt-ulh,4px) * 3.4)} .hzm-tt.ttul-line .hzm-tt-ul{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")} .hzm-tt.ttul-wave .hzm-tt-ul{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")} .hzm-tt.ttul-zig .hzm-tt-ul{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")} .hzm-tt.ttul-duo .hzm-tt-ul{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")} .hzm-tt.ttul-brush .hzm-tt-ul{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")} .hzm-tt.ttul-brush2 .hzm-tt-ul{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")} .hzm-tt.ttul-hand .hzm-tt-ul{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")} .hzm-tt.ttul-hand2 .hzm-tt-ul{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")} .hzm-tt.ttul-dots .hzm-tt-ul{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-size:calc(var(--tt-ulh,4px) * 2.6) 100%;mask-size:calc(var(--tt-ulh,4px) * 2.6) 100%} .hzm-tt.ttul-dash .hzm-tt-ul{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-size:calc(var(--tt-ulh,4px) * 5) 100%;mask-size:calc(var(--tt-ulh,4px) * 5) 100%;-webkit-mask-position:left center;mask-position:left center} .hzm-tt.ttul-ends .hzm-tt-ul{-webkit-mask:url("data:image/svg+xml;utf8,") no-repeat left center/var(--tt-ulhh) var(--tt-ulhh),url("data:image/svg+xml;utf8,") no-repeat right center/var(--tt-ulhh) var(--tt-ulhh),url("data:image/svg+xml;utf8,") no-repeat center/calc(100% - var(--tt-ulhh) * 1.7) var(--tt-ulh,4px);mask:url("data:image/svg+xml;utf8,") no-repeat left center/var(--tt-ulhh) var(--tt-ulhh),url("data:image/svg+xml;utf8,") no-repeat right center/var(--tt-ulhh) var(--tt-ulhh),url("data:image/svg+xml;utf8,") no-repeat center/calc(100% - var(--tt-ulhh) * 1.7) var(--tt-ulh,4px)} .hzm-tt.ttul-dia .hzm-tt-ul{-webkit-mask:url("data:image/svg+xml;utf8,") no-repeat left center/var(--tt-ulhh) var(--tt-ulhh),url("data:image/svg+xml;utf8,") no-repeat right center/var(--tt-ulhh) var(--tt-ulhh),url("data:image/svg+xml;utf8,") no-repeat center/calc(100% - var(--tt-ulhh) * 1.9) var(--tt-ulh,4px);mask:url("data:image/svg+xml;utf8,") no-repeat left center/var(--tt-ulhh) var(--tt-ulhh),url("data:image/svg+xml;utf8,") no-repeat right center/var(--tt-ulhh) var(--tt-ulhh),url("data:image/svg+xml;utf8,") no-repeat center/calc(100% - var(--tt-ulhh) * 1.9) var(--tt-ulh,4px)} /* ============================================================================= Apparitions — franches et perceptibles Le transform est porté par le conteneur, jamais par le titre : il ne peut donc pas casser le découpage du dégradé. ========================================================================== */ @keyframes hzmTtLeft{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:none}} @keyframes hzmTtRight{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}} @keyframes hzmTtZoom{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}} @keyframes hzmTtPop{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.08)}80%{transform:scale(.97)}100%{opacity:1;transform:none}} @keyframes hzmTtFlip{from{opacity:0;transform:perspective(900px) rotateX(-78deg)}to{opacity:1;transform:perspective(900px) rotateX(0)}} @keyframes hzmTtCurtain{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}} @keyframes hzmTtWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} @keyframes hzmTtBlur{from{opacity:0;filter:blur(14px);transform:scale(1.12)}to{opacity:1;filter:blur(0);transform:none}} .hzm-tt.ttanim-left .hzm-tt-in,.hzm-tt.ttanim-right .hzm-tt-in,.hzm-tt.ttanim-zoom .hzm-tt-in, .hzm-tt.ttanim-pop .hzm-tt-in,.hzm-tt.ttanim-flip .hzm-tt-in,.hzm-tt.ttanim-blur .hzm-tt-in{opacity:0} .hzm-tt.ttanim-curtain .hzm-tt-in{clip-path:inset(100% 0 0 0)} .hzm-tt.ttanim-wipe .hzm-tt-in{clip-path:inset(0 100% 0 0)} .hzm-tt.ttanim-left.is-in .hzm-tt-in{animation:hzmTtLeft var(--tt-dur,700ms) cubic-bezier(.22,.85,.28,1) forwards} .hzm-tt.ttanim-right.is-in .hzm-tt-in{animation:hzmTtRight var(--tt-dur,700ms) cubic-bezier(.22,.85,.28,1) forwards} .hzm-tt.ttanim-zoom.is-in .hzm-tt-in{animation:hzmTtZoom var(--tt-dur,700ms) cubic-bezier(.22,.85,.28,1) forwards} .hzm-tt.ttanim-pop.is-in .hzm-tt-in{animation:hzmTtPop calc(var(--tt-dur,700ms) * 1.3) cubic-bezier(.34,1.56,.64,1) forwards} .hzm-tt.ttanim-flip.is-in .hzm-tt-in{transform-origin:center bottom;animation:hzmTtFlip calc(var(--tt-dur,700ms) * 1.1) cubic-bezier(.22,.85,.28,1) forwards} .hzm-tt.ttanim-curtain.is-in .hzm-tt-in{animation:hzmTtCurtain calc(var(--tt-dur,700ms) * 1.1) cubic-bezier(.22,.85,.28,1) forwards} .hzm-tt.ttanim-wipe.is-in .hzm-tt-in{animation:hzmTtWipe calc(var(--tt-dur,700ms) * 1.2) cubic-bezier(.65,.05,.36,1) forwards} .hzm-tt.ttanim-blur.is-in .hzm-tt-in{animation:hzmTtBlur calc(var(--tt-dur,700ms) * 1.2) ease forwards} @media (prefers-reduced-motion:reduce){ .hzm-tt.ttanim-left .hzm-tt-in,.hzm-tt.ttanim-right .hzm-tt-in,.hzm-tt.ttanim-zoom .hzm-tt-in, .hzm-tt.ttanim-pop .hzm-tt-in,.hzm-tt.ttanim-flip .hzm-tt-in,.hzm-tt.ttanim-blur .hzm-tt-in{opacity:1;animation:none} .hzm-tt.ttanim-curtain .hzm-tt-in,.hzm-tt.ttanim-wipe .hzm-tt-in{clip-path:none;animation:none} } /* ============================================================================= Panneau — fond, espacements, bordure, ombre ========================================================================== */ .hzm-tt.tt-p-color .hzm-tt-in,.hzm-tt.tt-p-grad .hzm-tt-in{background:var(--tt-panel,#0072FF)} .hzm-tt.tt-p-color .hzm-tt-in,.hzm-tt.tt-p-grad .hzm-tt-in,.hzm-tt[class*="ttbd-"] .hzm-tt-in,.hzm-tt[class*="ttsh-"] .hzm-tt-in{border-radius:var(--tt-prad,16px);padding:var(--tt-ppt,32px) var(--tt-ppr,32px) var(--tt-ppb,32px) var(--tt-ppl,32px);position:relative} /* Sur fond coloré ou dégradé, les textes passent en clair par défaut */ .hzm-tt.tt-p-color .hzm-tt-h,.hzm-tt.tt-p-grad .hzm-tt-h{color:var(--tt-c,#fff)} .hzm-tt.tt-p-color .hzm-tt-over,.hzm-tt.tt-p-grad .hzm-tt-over{color:var(--tt-overc,rgba(255,255,255,.9))} .hzm-tt.tt-p-color .hzm-tt-sub,.hzm-tt.tt-p-grad .hzm-tt-sub{color:var(--tt-subc,rgba(255,255,255,.85))} .hzm-tt.tt-p-color .hzm-tt-wm,.hzm-tt.tt-p-grad .hzm-tt-wm{color:var(--tt-wmc,rgba(255,255,255,.10))} /* ---- Bordures ---- */ .hzm-tt.ttbd-solid .hzm-tt-in{border-style:solid;border-color:var(--tt-bdc,#8224E3)} .hzm-tt.ttbd-dashed .hzm-tt-in{border-style:dashed;border-color:var(--tt-bdc,#8224E3)} .hzm-tt.ttbd-solid.ttbds-all .hzm-tt-in,.hzm-tt.ttbd-dashed.ttbds-all .hzm-tt-in{border-width:var(--tt-bdw,2px)} .hzm-tt.ttbd-solid.ttbds-top .hzm-tt-in,.hzm-tt.ttbd-dashed.ttbds-top .hzm-tt-in{border-width:var(--tt-bdw,2px) 0 0 0} .hzm-tt.ttbd-solid.ttbds-bottom .hzm-tt-in,.hzm-tt.ttbd-dashed.ttbds-bottom .hzm-tt-in{border-width:0 0 var(--tt-bdw,2px) 0} .hzm-tt.ttbd-solid.ttbds-left .hzm-tt-in,.hzm-tt.ttbd-dashed.ttbds-left .hzm-tt-in{border-width:0 0 0 var(--tt-bdw,2px)} .hzm-tt.ttbd-solid.ttbds-right .hzm-tt-in,.hzm-tt.ttbd-dashed.ttbds-right .hzm-tt-in{border-width:0 var(--tt-bdw,2px) 0 0} .hzm-tt.ttbd-solid.ttbds-tb .hzm-tt-in,.hzm-tt.ttbd-dashed.ttbds-tb .hzm-tt-in{border-width:var(--tt-bdw,2px) 0} .hzm-tt.ttbd-solid.ttbds-lr .hzm-tt-in,.hzm-tt.ttbd-dashed.ttbds-lr .hzm-tt-in{border-width:0 var(--tt-bdw,2px)} /* Bordure en dégradé : un cadre découpé au masque */ .hzm-tt.ttbd-grad .hzm-tt-in::after{content:"";position:absolute;inset:0;border-radius:var(--tt-prad,16px);padding:var(--tt-bdw,2px);box-sizing:border-box;background:var(--tt-bdgrad,linear-gradient(135deg,#8224E3,#FF6C5F));pointer-events:none;z-index:1;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} /* Bordure multicolore animée : un conic-gradient qui tourne sous un masque */ /* L'angle du dégradé tourne — pas l'élément. Le fond couvre donc toujours tout le panneau, y compris très large et peu haut, sans coupure aux bords. */ @property --tt-ang{syntax:'';initial-value:0deg;inherits:false} @keyframes hzmTtBdSpin{to{--tt-ang:360deg}} .hzm-tt .hzm-tt-brd{position:absolute;inset:0;border-radius:var(--tt-prad,16px);padding:var(--tt-bdw,2px);box-sizing:border-box;pointer-events:none;z-index:1;background:conic-gradient(from var(--tt-ang),var(--tt-bdstops,#0072FF,#8200F4,#FF6C5F,#4ED199,#0072FF));animation:hzmTtBdSpin var(--tt-bdspd,4s) linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} /* Repli pour les navigateurs sans @property : le dégradé reste, figé. */ @supports not (background:conic-gradient(from var(--tt-ang),red,blue)){ .hzm-tt .hzm-tt-brd{background:conic-gradient(var(--tt-bdstops,#0072FF,#8200F4,#FF6C5F,#4ED199,#0072FF));animation:none} } /* ---- Ombres ---- */ .hzm-tt.ttsh-soft .hzm-tt-in{box-shadow:0 4px 20px -6px rgba(20,20,60,.14)} .hzm-tt.ttsh-drop .hzm-tt-in{box-shadow:0 22px 44px -14px rgba(20,20,60,.34)} .hzm-tt.ttsh-color .hzm-tt-in{box-shadow:0 18px calc(var(--tt-shsz,34px) * 1.2) -12px var(--tt-shc-soft,rgba(130,36,227,.5))} .hzm-tt.ttsh-glow .hzm-tt-in{box-shadow:0 0 var(--tt-shsz,34px) -4px var(--tt-shc-soft,rgba(130,36,227,.55))} .hzm-tt.ttsh-neon .hzm-tt-in{box-shadow:0 0 0 1px var(--tt-shc-thin,rgba(130,36,227,.28)),0 0 calc(var(--tt-shsz,34px) * .5) -2px var(--tt-shc-soft,rgba(130,36,227,.55)),0 0 var(--tt-shsz,34px) 2px var(--tt-shc-thin,rgba(130,36,227,.28)),inset 0 0 calc(var(--tt-shsz,34px) * .4) -8px var(--tt-shc-soft,rgba(130,36,227,.55))} @keyframes hzmTtHalo{0%,100%{box-shadow:0 0 calc(var(--tt-shsz,34px) * .55) -6px var(--tt-shc-soft,rgba(130,36,227,.55))}50%{box-shadow:0 0 calc(var(--tt-shsz,34px) * 1.35) 2px var(--tt-shc-soft,rgba(130,36,227,.55))}} .hzm-tt.ttsh-pulse .hzm-tt-in{animation:hzmTtHalo 2.6s ease-in-out infinite} @media (max-width:700px){ .hzm-tt.tt-p-color .hzm-tt-in,.hzm-tt.tt-p-grad .hzm-tt-in{padding:calc(var(--tt-ppt,32px) * .62) calc(var(--tt-ppr,32px) * .62) calc(var(--tt-ppb,32px) * .62) calc(var(--tt-ppl,32px) * .62)} } @media (prefers-reduced-motion:reduce){.hzm-tt .hzm-tt-brd::before{animation:none}} @media (prefers-reduced-motion:reduce){.hzm-tt.ttsh-pulse .hzm-tt-in{animation:none}} /* ---- Liseré : jusqu'où il descend ---- */ .hzm-tt.ttbarh-all .hzm-tt-in::before{top:2px;bottom:2px} .hzm-tt.ttbarh-custom .hzm-tt-in::before{top:50%;bottom:auto;height:var(--tt-barhv,70%);transform:translateY(-50%) scaleY(0);transform-origin:center} .hzm-tt.is-in.ttbarh-custom .hzm-tt-in::before{animation:hzmTtBarC var(--tt-dur,700ms) cubic-bezier(.22,.85,.28,1) forwards} @keyframes hzmTtBarC{from{transform:translateY(-50%) scaleY(0)}to{transform:translateY(-50%) scaleY(1)}} /* Le titre seul : la barre est portée par le titre, pas par le bloc */ .hzm-tt.ttbarh-title .hzm-tt-in::before{display:none} .hzm-tt.ttbarh-title .hzm-tt-h::before{content:"";position:absolute;top:0;bottom:var(--tt-ulhh,0px);width:var(--tt-barw,5px);border-radius:4px;background:var(--tt-barc,var(--tt-grad));transform-origin:top;transform:scaleY(0)} .hzm-tt.ttbarh-title.tt-bar-left .hzm-tt-h::before{left:calc(-1 * (var(--tt-bargap,22px) + var(--tt-barw,5px)))} .hzm-tt.ttbarh-title.tt-bar-right .hzm-tt-h::before{right:calc(-1 * (var(--tt-bargap,22px) + var(--tt-barw,5px)))} .hzm-tt.is-in.ttbarh-title .hzm-tt-h::before{animation:hzmTtBar var(--tt-dur,700ms) cubic-bezier(.22,.85,.28,1) forwards} @media (prefers-reduced-motion:reduce){.hzm-tt.ttbarh-custom .hzm-tt-in::before{transform:translateY(-50%) scaleY(1);animation:none}.hzm-tt.ttbarh-title .hzm-tt-h::before{transform:scaleY(1);animation:none}} /* ---- Ornements : dégradés ---- */ .hzm-tt.ttovg .hzm-tt-over{background-image:var(--tt-overg);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} /* Le sous-titre reste un BLOC : en inline-block il remontait à la suite du titre dès qu'il y avait de la place. Sa largeur s'ajuste au texte pour que le dégradé l'épouse, mais il garde sa ligne. */ .hzm-tt.ttsbg .hzm-tt-sub{background-image:var(--tt-subg);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:block;width:fit-content;max-width:100%} .hzm-tt.tt-al-center.ttsbg .hzm-tt-sub{margin-left:auto;margin-right:auto} .hzm-tt.tt-al-right.ttsbg .hzm-tt-sub{margin-left:auto;margin-right:0} /* Le séparateur et le liseré sont peints par un background : le dégradé y va de soi */ .hzm-tt .hzm-tt-sep.sep-grad .hzm-tt-sepl,.hzm-tt .hzm-tt-sep.sep-grad .hzm-tt-sepl:last-child{background:var(--tt-sepg,var(--tt-grad))} /* ---- Sur-titre : casse au choix ---- */ .hzm-tt.ttovc-upper .hzm-tt-over{text-transform:uppercase} .hzm-tt.ttovc-none .hzm-tt-over{text-transform:none} .hzm-tt.ttovc-lower .hzm-tt-over{text-transform:lowercase} .hzm-tt.ttovc-cap .hzm-tt-over{text-transform:capitalize} /* ============================================================================= Verre (glass) Un verre crédible tient à quatre choses, pas à un flou : 1. la SATURATION du fond derrière (sans elle, tout devient gris et mort) 2. une teinte translucide en DÉGRADÉ (une plaque n'a pas une opacité uniforme) 3. une ARÊTE DE LUMIÈRE en haut (le bord biseauté qui accroche le jour) 4. une ombre portée douce (le verre flotte, il n'est pas collé) ========================================================================== */ .hzm-tt.tt-p-glass .hzm-tt-in,.hzm-tt.tt-p-frost .hzm-tt-in{ position:relative; background:linear-gradient(135deg,var(--tt-glass,rgba(255,255,255,.18)),var(--tt-glass2,rgba(255,255,255,.06))); -webkit-backdrop-filter:blur(var(--tt-blur,12px)) saturate(170%); backdrop-filter:blur(var(--tt-blur,12px)) saturate(170%); border:1px solid rgba(255,255,255,.28); box-shadow:0 10px 34px -10px rgba(20,20,60,.30),inset 0 1px 0 rgba(255,255,255,.45); } /* Verre givré : plus dense, plus laiteux, le fond ne transparaît que par bribes */ .hzm-tt.tt-p-frost .hzm-tt-in{ -webkit-backdrop-filter:blur(calc(var(--tt-blur,12px) * 2.2)) saturate(130%) brightness(1.06); backdrop-filter:blur(calc(var(--tt-blur,12px) * 2.2)) saturate(130%) brightness(1.06); border-color:rgba(255,255,255,.4); } /* L'arête de lumière : un trait qui court sur le bord haut, plus vif au centre */ .hzm-tt.tt-p-glass .hzm-tt-in::before,.hzm-tt.tt-p-frost .hzm-tt-in::before{ content:"";position:absolute;left:12%;right:12%;top:0;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent); } /* Sur verre, les textes restent lisibles : ils prennent une ombre discrète */ .hzm-tt.tt-p-glass .hzm-tt-h,.hzm-tt.tt-p-frost .hzm-tt-h{color:var(--tt-c,#14143c)} .hzm-tt.tt-p-glass .hzm-tt-sub,.hzm-tt.tt-p-frost .hzm-tt-sub{color:var(--tt-subc,#3a3a52)} /* ---- Bande du défilant en verre ---- */ .hzm-tt.mqb-glass .hzm-tt-mqband,.hzm-tt.mqb-frost .hzm-tt-mqband{ position:relative; background:linear-gradient(135deg,var(--tt-glass,rgba(255,255,255,.18)),var(--tt-glass2,rgba(255,255,255,.06))); -webkit-backdrop-filter:blur(var(--tt-blur,12px)) saturate(170%); backdrop-filter:blur(var(--tt-blur,12px)) saturate(170%); border-top:1px solid rgba(255,255,255,.30); border-bottom:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.4); padding:var(--tt-mpad,14px) 0; } .hzm-tt.mqb-frost .hzm-tt-mqband{ -webkit-backdrop-filter:blur(calc(var(--tt-blur,12px) * 2.2)) saturate(130%) brightness(1.06); backdrop-filter:blur(calc(var(--tt-blur,12px) * 2.2)) saturate(130%) brightness(1.06); } .hzm-tt.mqb-glass .hzm-tt-mseg,.hzm-tt.mqb-frost .hzm-tt-mseg{color:var(--tt-mc1,#14143c)} .hzm-tt.mqb-glass .hzm-tt-msepi,.hzm-tt.mqb-frost .hzm-tt-msepi{color:var(--tt-msepc,#FF6C5F)} /* Repli : sans backdrop-filter, on donne un fond plus dense plutôt qu'un bloc vide */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .hzm-tt.tt-p-glass .hzm-tt-in,.hzm-tt.tt-p-frost .hzm-tt-in, .hzm-tt.mqb-glass .hzm-tt-mqband,.hzm-tt.mqb-frost .hzm-tt-mqband{background:rgba(255,255,255,.82)} } /* ============================================================================= L'ESPACE AUTOUR DU TITRE ----------------------------------------------------------------------------- Un titre de 107 px avec un interligne de 1,2 occupe une boîte de 128 px, alors que ses lettres n'en remplissent qu'une soixantaine. Le reste est du blanc, réparti au-dessus et au-dessous par la police — considérable sur une anglaise, qui réserve de la place pour ses hampes et ses jambages. Ce vide n'appartient à aucune marge : c'est pour cela qu'augmenter ou réduire « Sur-titre — marge basse » ne le faisait pas bouger. « text-box-trim » le retire là où le navigateur le gère, en rognant la boîte sur les lettres réellement dessinées. ========================================================================== */ @supports (text-box-trim: trim-both) { .hzm-tt .hzm-tt-h { text-box-trim: trim-both; text-box-edge: cap alphabetic; } } /* ============================================================================= SOULIGNEMENTS DU SUR-TITRE ET DU SOUS-TITRE ----------------------------------------------------------------------------- Le titre disposait de treize styles de trait ; ses deux voisins d'aucun. Sept chacun, choisis parmi ceux qui gardent du sens sur un texte court. Le trait est dessiné en fond plutôt qu'en bordure : une bordure occuperait de la place et décalerait les marges qu'on vient de régler. ========================================================================== */ .hzm-tt [class*="ttoul-"], .hzm-tt [class*="ttsul-"] { position: relative; padding-bottom: .42em; } .hzm-tt [class*="ttoul-"]::after, .hzm-tt [class*="ttsul-"]::after { content: ""; position: absolute; bottom: 0; height: var(--tt-overulh, 2px); pointer-events: none; } .hzm-tt [class*="ttsul-"]::after { height: var(--tt-subulh, 2px); } /* --- Étendue -------------------------------------------------------------- */ /* Sous le texte : le trait suit la largeur réelle des mots. C'est pour cela que le sur-titre est un « inline-block » — un bloc s'étendrait sur toute la ligne, quel que soit son contenu. */ .hzm-tt .hzm-tt-over[class*="ttoulw-text"], .hzm-tt .hzm-tt-sub[class*="ttsulw-text"] { display: inline-block; } .hzm-tt [class*="ttoulw-text"]::after, .hzm-tt [class*="ttsulw-text"]::after { left: 0; right: 0; } .hzm-tt [class*="ttoulw-short"]::after, .hzm-tt [class*="ttsulw-short"]::after { left: 50%; width: 60px; transform: translateX(-50%); } .hzm-tt [class*="ttoulw-full"]::after, .hzm-tt [class*="ttsulw-full"]::after { left: 0; right: 0; } /* Alignés à gauche ou à droite, le trait court les suit plutôt que de rester au centre. */ .hzm-tt.tt-al-left [class*="ttoulw-short"]::after, .hzm-tt.tt-al-left [class*="ttsulw-short"]::after { left: 0; transform: none; } .hzm-tt.tt-al-right [class*="ttoulw-short"]::after, .hzm-tt.tt-al-right [class*="ttsulw-short"]::after { left: auto; right: 0; transform: none; } /* --- Les sept styles ------------------------------------------------------ */ .hzm-tt .ttoul-line::after { background: var(--tt-overulc, currentColor); border-radius: 2px; } .hzm-tt .ttsul-line::after { background: var(--tt-subulc, currentColor); border-radius: 2px; } .hzm-tt .ttoul-thin::after { background: var(--tt-overulc, currentColor); height: 1px; } .hzm-tt .ttsul-thin::after { background: var(--tt-subulc, currentColor); height: 1px; } /* Double : un trait plein, et son jumeau plus fin dessous. */ .hzm-tt .ttoul-double::after { background: var(--tt-overulc, currentColor); box-shadow: 0 calc(var(--tt-overulh, 2px) + 3px) 0 0 var(--tt-overulc, currentColor); border-radius: 2px; } .hzm-tt .ttsul-double::after { background: var(--tt-subulc, currentColor); box-shadow: 0 calc(var(--tt-subulh, 2px) + 3px) 0 0 var(--tt-subulc, currentColor); border-radius: 2px; } .hzm-tt .ttoul-double, .hzm-tt .ttsul-double { padding-bottom: .62em; } /* Pointillé et tirets : une trame répétée, dont le pas suit l'épaisseur. */ .hzm-tt .ttoul-dots::after { background-image: radial-gradient(circle, var(--tt-overulc, currentColor) 45%, transparent 46%); background-size: calc(var(--tt-overulh, 2px) * 2.4) 100%; background-repeat: repeat-x; } .hzm-tt .ttsul-dots::after { background-image: radial-gradient(circle, var(--tt-subulc, currentColor) 45%, transparent 46%); background-size: calc(var(--tt-subulh, 2px) * 2.4) 100%; background-repeat: repeat-x; } .hzm-tt .ttoul-dash::after { background-image: linear-gradient(90deg, var(--tt-overulc, currentColor) 58%, transparent 58%); background-size: calc(var(--tt-overulh, 2px) * 4) 100%; background-repeat: repeat-x; } .hzm-tt .ttsul-dash::after { background-image: linear-gradient(90deg, var(--tt-subulc, currentColor) 58%, transparent 58%); background-size: calc(var(--tt-subulh, 2px) * 4) 100%; background-repeat: repeat-x; } /* Vague : dessinée en SVG, pour rester nette à toute échelle. */ .hzm-tt .ttoul-wave::after, .hzm-tt .ttsul-wave::after { height: 7px; background-repeat: repeat-x; background-size: 16px 7px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 7'%3E%3Cpath d='M0 5C2 1 6 1 8 5s6 4 8 0' fill='none' stroke='currentColor' stroke-width='1.6'/%3E%3C/svg%3E"); } .hzm-tt .ttoul-wave::after { color: var(--tt-overulc, currentColor); } .hzm-tt .ttsul-wave::after { color: var(--tt-subulc, currentColor); } /* Brosse : un trait dont les extrémités s'effilent. */ .hzm-tt .ttoul-brush::after { height: calc(var(--tt-overulh, 2px) * 1.8); border-radius: 50%; background: var(--tt-overulc, currentColor); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .hzm-tt .ttsul-brush::after { height: calc(var(--tt-subulh, 2px) * 1.8); border-radius: 50%; background: var(--tt-subulc, currentColor); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }