/* ============================================================
   TMOO — visual.css
   Langage graphique de la home, réutilisable sur les sous-pages :
   squiggle, ruban marquee, ghost text, stamp rond.
   ============================================================ */

/* ---- squiggle souligné (dessin animé au chargement) ---- */
.squig{display:inline-block;position:relative;white-space:nowrap}
.squig svg{position:absolute;left:0;right:0;bottom:-.12em;width:100%;height:.28em;overflow:visible}
.squig path{stroke:var(--a-acc,#E8501A);stroke-width:5;fill:none;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:vsq .9s cubic-bezier(.6,0,.3,1) .55s forwards}
@keyframes vsq{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.squig path{animation:none;stroke-dashoffset:0}}

/* ---- ruban marquee (double bande inclinée) ---- */
.beltwrap{position:relative;padding:40px 0 46px;overflow:hidden}
.tape{width:112vw;margin-left:-6vw;border-block:2px solid var(--a-ink,#141414)}
.tape.front{position:relative;z-index:2;transform:rotate(-1.4deg);background:var(--a-ink,#141414);color:var(--a-cr,#F5F2EA);padding:14px 0;overflow:hidden}
.tape.back{position:absolute;left:-6vw;top:50%;z-index:1;transform:translateY(-50%) rotate(1.6deg);background:var(--a-acc,#E8501A);height:54px;border-color:var(--a-ink,#141414)}
.tape .in3{display:flex;gap:0;white-space:nowrap;animation:vbelt 40s linear infinite;width:max-content}
.tape .in3 span{display:inline-flex;align-items:center;gap:16px;font-weight:700;font-size:15.5px;letter-spacing:.02em;padding-right:16px}
.tape .in3 span i{font-style:normal;color:var(--a-acc,#E8501A);font-size:18px}
.tape.front:hover .in3{animation-play-state:paused}
@keyframes vbelt{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.tape .in3{animation:none;flex-wrap:wrap;white-space:normal;width:auto;justify-content:center}}
@media(max-width:560px){.tape .in3 span{font-size:13.5px}.tape.back{height:46px}}

/* ---- ghost text (gros chiffre en contour derrière une section) ---- */
.blk{position:relative}
.gwrap2{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.gwrap2~.wrap{position:relative;z-index:1}
.ghost2{position:absolute;top:clamp(2px,2vw,20px);white-space:nowrap;font-weight:800;letter-spacing:-.05em;line-height:1;
  font-size:clamp(80px,14vw,200px);color:transparent;-webkit-text-stroke:2px rgba(20,20,20,.07);user-select:none}
.ghost2.right{right:-1vw}
.ghost2.left{left:-1vw}
.ghost2.or{-webkit-text-stroke-color:rgba(232,80,26,.12)}
@media(max-width:760px){.gwrap2{display:none}}

/* ---- stamp rond (texte tournant + valeur au centre) ---- */
.vstamp{position:relative;display:grid;place-items:center;color:#fff;
  width:clamp(88px,10vw,118px);aspect-ratio:1;border-radius:50%;background:var(--a-acc,#E8501A);
  border:3px solid var(--a-cr,#F5F2EA);rotate:8deg;box-shadow:0 10px 30px rgba(20,20,20,.18);z-index:4}
.vstamp svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vstamp .ct{font-family:'Space Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.14em;fill:#fff}
.vstamp .c0{font-weight:800;font-size:24px;line-height:1;color:#fff;text-align:center}
.vstamp .c0 small{display:block;font-family:'Space Mono',monospace;font-size:8.5px;font-weight:700;letter-spacing:.1em;margin-top:3px;opacity:.85}
.vstamp .spin{transform-origin:60px 60px;transform-box:view-box;animation:vspin 16s linear infinite}
@keyframes vspin{to{transform:rotate(360deg)}}
.vstamp.float{animation:vfloat 5s ease-in-out infinite}
@keyframes vfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(prefers-reduced-motion:reduce){.vstamp .spin,.vstamp.float{animation:none}}

/* stamp épinglé en haut à droite du hero */
.hero .wrap{position:relative}
.vstamp.pin{position:absolute;right:clamp(14px,5vw,64px);top:clamp(-14px,-1vw,6px)}
@media(max-width:720px){.vstamp.pin{top:-46px;width:86px}.hero .eyebrow{padding-right:108px}}

/* stamp posé sur le coin d'une carte */
.vstamp.corner{position:absolute;right:-18px;top:-34px;width:96px}
@media(max-width:720px){.vstamp.corner{right:-8px;top:-40px;width:84px}}

/* ---- carte garantie : un cran plus expressif ---- */
.gcard{position:relative}
.gcard q{font-size:clamp(20px,2.6vw,28px);line-height:1.35;letter-spacing:-.01em;display:block;quotes:none}
.gcard q b{color:#FFB39A!important}