/* ═══════════════════════════════════════════════════════════════════════ ABC DIGITAL TOUCH — Page service (généré) Généré par scripts/build-service.py — ne pas éditer à la main. TOUT est scopé sous .abcdt-testimonials. Aucune règle ne touche html, body, a, button, img ni les titres globaux : header et pied de page Elementor, Axeptio et HubSpot ne sont pas affectés. Les règles html{} et body{} du prototype sont retirées du scope, mais leurs déclarations sont REPORTÉES ci-dessous sur le wrapper. C'est exactement ce qui avait manqué lors du premier déploiement de la homepage, où le H1 s'était retrouvé gris foncé. ═══════════════════════════════════════════════════════════════════════ */ .abcdt-testimonials{ margin:0; background:var(--ink); color:var(--text); font-family:var(--ff-b); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:clip; position:relative; isolation:isolate; } /* Réinitialisation locale, strictement bornée au module. */ .abcdt-testimonials *, .abcdt-testimonials *::before, .abcdt-testimonials *::after{ box-sizing:border-box } /* Marges de flux du navigateur : elles disparaissent avec body{}, il faut les redonner explicitement, sinon les titres se collent. */ .abcdt-testimonials h1,.abcdt-testimonials h2,.abcdt-testimonials h3,.abcdt-testimonials h4,.abcdt-testimonials h5,.abcdt-testimonials h6, .abcdt-testimonials p,.abcdt-testimonials ul,.abcdt-testimonials ol,.abcdt-testimonials dl,.abcdt-testimonials figure,.abcdt-testimonials blockquote{ color:inherit;font-family:inherit;letter-spacing:inherit;text-transform:none } .abcdt-testimonials img,.abcdt-testimonials video,.abcdt-testimonials canvas{ display:block;max-width:100% } .abcdt-testimonials a{ color:inherit } .abcdt-testimonials button,.abcdt-testimonials input,.abcdt-testimonials select,.abcdt-testimonials textarea{ font-family:inherit;font-size:inherit;font-weight:inherit; font-style:inherit;line-height:normal;color:inherit;letter-spacing:inherit } .abcdt-testimonials ::selection{ background:var(--blue);color:var(--on-blue) } .abcdt-testimonials :focus-visible{ outline:2px solid var(--blue-lift);outline-offset:4px;border-radius:2px } /* ═══════════════════════════════════════════════════════════════════════ ABC DIGITAL TOUCH — Homepage V1 Direction A — Le Montage. Deux régimes : · par défaut → tout est visible, le hero fait un écran. C'est ce que voient les visiteurs sans JS et sous reduced-motion. · .js-motion → hero en sticky sur 3 plans, révélations au scroll. Le bleu est rare : accents de CTA uniquement. Tout le reste est noir, blanc et image. ═══════════════════════════════════════════════════════════════════════ */ .abcdt-testimonials{ --ink:#06060A; --ink-2:#0B0B11; --ink-3:#13131E; /* fonds de survol — défini ici, jamais hérité */ --text:#E8E8F0; --text-2:#B8B8C4; --text-3:#9A9AB4; /* plancher texte — 7,37:1 sur --ink */ --line:rgba(232,232,240,.12); --line-2:rgba(232,232,240,.26); --blue:#1A6FFF; --blue-lift:#4A8CFF; --on-blue:#06060A; --ff-d:'Syne',system-ui,sans-serif; --ff-b:'DM Sans',system-ui,sans-serif; --e:cubic-bezier(.16,1,.3,1); --nav-h:76px; --gut:1.5rem; --maxw:1360px; --hero-scroll:2600px; } @media(min-width:768px){ .abcdt-testimonials{ --gut:2.5rem } } @media(min-width:1200px){ .abcdt-testimonials{ --gut:4rem } } .abcdt-testimonials *, .abcdt-testimonials *::before, .abcdt-testimonials *::after{box-sizing:border-box} @media(prefers-reduced-motion:reduce){} .abcdt-testimonials a{color:inherit} .abcdt-testimonials .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)} .abcdt-testimonials .skip{ position:fixed;top:.75rem;left:.75rem;z-index:300; padding:.7rem 1.1rem;background:var(--blue);color:var(--on-blue); font-weight:500;font-size:.9rem;border-radius:4px;text-decoration:none; transform:translateY(-180%);transition:transform .25s var(--e) } .abcdt-testimonials .skip:focus-visible{transform:translateY(0)} /* ── Typographie commune ───────────────────────────────────────── */ .abcdt-testimonials .eyebrow{ margin:0 0 1.5rem;font-size:.7rem;font-weight:500;letter-spacing:.22em; text-transform:uppercase;color:var(--text-3) } .abcdt-testimonials .h2{ margin:0;font-family:var(--ff-d);font-weight:700; font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:1.04;letter-spacing:-.032em; text-wrap:balance;max-width:17ch } .abcdt-testimonials .h2--lg{font-size:clamp(2.1rem,5.4vw,4rem);max-width:20ch} .abcdt-testimonials .h2--xl{font-size:clamp(2.3rem,6.6vw,5rem);max-width:14ch;font-weight:800} .abcdt-testimonials .lede{margin:1.6rem 0 0;max-width:56ch;color:var(--text-3);font-size:1.02rem} /* Lien typographique — remplace les boutons pleins partout sauf le skip. */ .abcdt-testimonials .tlink{ display:inline-flex;align-items:center;gap:.6rem; background:none;border:0;padding:.35rem 0;cursor:pointer; font-family:var(--ff-b);font-size:1rem;font-weight:500;color:var(--text); text-decoration:none;letter-spacing:.005em; border-bottom:1px solid var(--line-2); transition:color .25s var(--e),border-color .25s var(--e) } .abcdt-testimonials .tlink::after{content:'→';transition:transform .3s var(--e)} .abcdt-testimonials .tlink:hover{color:var(--blue-lift);border-bottom-color:var(--blue)} .abcdt-testimonials .tlink:hover::after{transform:translateX(5px)} .abcdt-testimonials .tlink--lg{font-family:var(--ff-d);font-weight:600;font-size:clamp(1.05rem,2.2vw,1.35rem);letter-spacing:-.01em} /* Lien secondaire : plus petit, sans filet, il ne concurrence jamais le lien principal. Signalé par la flèche et le contraste seuls. */ .abcdt-testimonials .tlink--min{ border-bottom:0;padding:0;font-size:.92rem;color:var(--text-3);letter-spacing:.01em } .abcdt-testimonials .tlink--min::after{font-size:.9em} .abcdt-testimonials .tlink--min:hover{color:var(--text)} .abcdt-testimonials .sec{position:relative;padding:clamp(5rem,13vh,9.5rem) 0} .abcdt-testimonials .sec--quiet{padding:clamp(4rem,10vh,7rem) 0} .abcdt-testimonials .sec--rule{border-top:1px solid var(--line)} /* Grain — technique reprise de Card with Noise Pattern (@Ali-Hussein-dev) : une turbulence SVG tuilée, posée en data-URI, sans requête réseau ni WebGL. C'est ce qui donne au noir sa matière plutôt qu'une couleur. Le même motif sert au hero et aux quatre zones retravaillées. */ .abcdt-testimonials .tex{ position:absolute;inset:0;pointer-events:none;z-index:0; opacity:.05;mix-blend-mode:overlay;background-size:200px 200px; -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 84%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 84%,transparent 100%); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E") } /* Le lien de fin de chapitre respire toujours de la même façon. */ .abcdt-testimonials .after-cta{margin-top:clamp(2.5rem,7vh,4.5rem)} /* ── Curseur personnalisé ─────────────────────────────────────── Canvas 2D plein écran, hors du flux, sans coût de mise en page. Ces deux règles sont volontairement HORS du scope .abchome : la couche suit le pointeur sur toute la fenêtre. Elles ne s'appliquent que si le script a réellement démarré le canvas (classe .has-tube posée sur à ce moment-là, jamais au chargement). */ .abcdt-testimonials .sx{ position:relative;background:var(--ink) } .abcdt-testimonials .sx__l{ list-style:none;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) 5rem } .abcdt-testimonials .sx__l li{ border-top:1px solid var(--line) } .abcdt-testimonials .sx__l a{ display:grid;gap:.35rem;padding:1.3rem 0;text-decoration:none; transition:padding-left .5s var(--e) } .abcdt-testimonials .sx__l a:hover{ padding-left:.8rem } .abcdt-testimonials .sx__l b{ font-family:var(--ff-d);font-weight:700;letter-spacing:-.025em;font-size:1.02rem;color:#fff } .abcdt-testimonials .sx__l span{ color:var(--text-3);font-size:.86rem;line-height:1.5 } @media (min-width:900px){ .abcdt-testimonials .sx__l{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 4rem } } @media (min-width:1200px){ .abcdt-testimonials .sx__l{ grid-template-columns:repeat(4,minmax(0,1fr));gap:0 2.5rem } } .abcdt-testimonials .rd{ max-width:var(--maxw);margin-inline:auto;padding:4.5rem var(--gut) } .abcdt-testimonials .rd__h{ margin:1.1rem 0 0;font-family:var(--ff-d);font-weight:800; letter-spacing:-.04em;line-height:1.04;font-size:clamp(1.85rem,7vw,3.3rem); color:#fff;max-width:20ch;text-wrap:balance } .abcdt-testimonials .sm{ position:relative;isolation:isolate;overflow:hidden;background:var(--ink); height:var(--sm-h,clamp(7rem,20vh,13rem)); --sm-op:.5 } .abcdt-testimonials .sm__m{ position:absolute;inset:0;z-index:0 } .abcdt-testimonials .sm__p, .abcdt-testimonials .sm__v{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:grayscale(1) contrast(1.25) brightness(.72); opacity:var(--sm-op); /* La matière n'a ni début ni fin : elle sort du noir et y retourne. */ -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 46%,#000 54%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0%,#000 46%,#000 54%,transparent 100%) } .abcdt-testimonials .sm__v{ opacity:0;transition:opacity 1.6s var(--e) } .abcdt-testimonials .sm__v.is-lit{ opacity:var(--sm-op) } .abcdt-testimonials .sm .tex{ z-index:1;opacity:.06 } /* Le filet traverse la bande : c'est lui qui fait le lien entre ce qui précède et ce qui suit, plus que le plan. */ .abcdt-testimonials .sm__line{ position:absolute;left:0;right:0;top:50%;height:1px;z-index:2; background:linear-gradient(90deg,transparent 0%,var(--line-2) 18%,var(--line-2) 82%,transparent 100%); transform:scaleX(var(--cross,1));transform-origin:left center; transition:transform 1.6s var(--e) } /* Variante étroite, pour une simple respiration entre deux chapitres. */ .abcdt-testimonials .sm--thin{ --sm-h:clamp(4.5rem,12vh,7.5rem);--sm-op:.34 } /* Variante haute, pour une vraie entrée en matière. */ .abcdt-testimonials .sm--tall{ --sm-h:clamp(10rem,34vh,20rem);--sm-op:.62 } @media (prefers-reduced-motion:reduce){ .abcdt-testimonials .sm__line{ transition:none } .abcdt-testimonials .sm__v{ transition:none } } /* ═══════════════════════════════════════════════════════════════════════ ABC DIGITAL TOUCH — Page « Avis clients & études de cas » Signature de la page : LE CHŒUR ET LE DOSSIER. Deux régimes typographiques nettement séparés — la parole, servie en grand corps de lecture, et le dossier, servi en index numéroté qui s'ouvre. La page ne les mélange jamais. Aucune carte, aucun badge de plateforme, aucune note en étoiles. RÈGLE D'ÉTAT PAR DÉFAUT : les quatre dossiers sont OUVERTS dans le HTML. Sans JavaScript, la page est complète. Le script replie. ═══════════════════════════════════════════════════════════════════════ */ /* ── Signature de mouvement ──────────────────────────────────────── Le chœur est la page la plus vive des six : les voix se relaient, les rangs défilent, rien ne s'attarde. Plus rapide que la Méthode, plus lente que la traction du SaaS. */ .abcdt-testimonials{ --es:cubic-bezier(.26,.86,.28,1);--ds:.72s } /* ═══════════════════════════════════════════════════════════════════ 01 · HERO — LE CHŒUR ═══════════════════════════════════════════════════════════════════ */ .abcdt-testimonials .vh{ position:relative;isolation:isolate;overflow:hidden;background:var(--ink); padding:calc(var(--nav-h) + clamp(4.5rem,13vh,9rem)) 0 clamp(4rem,11vh,7.5rem) } /* ── LE PREMIER ÉCRAN ────────────────────────────────────────────── Trois matières, trois directions, trois vitesses. Tout tourne dès l'arrivée : rien n'attend un défilement, un survol ou un clic. */ .abcdt-testimonials .vh__media{ position:absolute;inset:0;z-index:0;overflow:hidden } /* La bande : la fumée des voix, large et lente, vers la gauche. */ .abcdt-testimonials .vh__band{ position:absolute;left:0;right:0;top:0;bottom:0 } .abcdt-testimonials .vh__poster, .abcdt-testimonials .vh__v{ position:absolute;inset:0;width:112%;height:100%;object-fit:cover;object-position:50% 40%; filter:grayscale(1) contrast(1.2) brightness(.95);opacity:.34; animation:abcdtte_vh-band 52s linear infinite alternate; -webkit-mask-image:linear-gradient(100deg,transparent 0%,rgba(0,0,0,.35) 26%,#000 74%); mask-image:linear-gradient(100deg,transparent 0%,rgba(0,0,0,.35) 26%,#000 74%) } .abcdt-testimonials .vh__v{ opacity:0;transition:opacity 1.4s var(--es) } .abcdt-testimonials .vh__v.is-lit{ opacity:.34 } @keyframes abcdtte_vh-band{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-9%,0,0) } } /* La fenêtre : une création publicitaire réelle, en couleurs, au format vertical dans lequel elle a été diffusée. Elle respire très lentement — un cadre qui vit, pas un cadre qui bouge. */ .abcdt-testimonials .vh__win{ position:absolute;right:clamp(1.5rem,7vw,7rem);top:0;bottom:0; width:clamp(150px,17vw,250px);overflow:hidden; border-left:1px solid var(--line-2);border-right:1px solid var(--line-2) } .abcdt-testimonials .vh__wp, .abcdt-testimonials .vh__wv{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:contrast(1.04) saturate(.72) brightness(.72); animation:abcdtte_vh-win 26s var(--e) infinite alternate; -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 82%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 82%,transparent 100%) } .abcdt-testimonials .vh__wv{ opacity:0;transition:opacity 1.4s var(--es) } .abcdt-testimonials .vh__wv.is-lit{ opacity:1 } @keyframes abcdtte_vh-win{ from{ transform:scale(1.04) translate3d(0,1.5%,0) } to{ transform:scale(1.12) translate3d(0,-1.5%,0) } } /* Un filet de lumière descend le long de la fenêtre : c'est ce qui attire l'œil à droite dans les deux premières secondes. */ .abcdt-testimonials .vh__wl{ position:absolute;left:-1px;right:-1px;height:22%; background:linear-gradient(to bottom,transparent,rgba(232,232,240,.14),transparent); animation:abcdtte_vh-scan 9s var(--e) infinite } @keyframes abcdtte_vh-scan{ 0%{ top:-24% } 60%,100%{ top:104% } } /* Les fragments de verbatim : ils traversent l'écran derrière le titre, dans l'autre sens, très en retrait. Ce ne sont pas des citations à lire — c'est du bruit de voix, rendu visible. */ .abcdt-testimonials .vh__frag{ /* Sous la ligne de boutons, jamais en travers du chapô : c'est du bruit de fond, ça ne doit jamais concurrencer une phrase qu'on lit. */ position:absolute;left:0;right:0;bottom:6%;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent) } .abcdt-testimonials .vh__ft{ display:flex;gap:clamp(1.6rem,4vw,3rem);white-space:nowrap;width:max-content; animation:abcdtte_vh-frag 64s linear infinite } .abcdt-testimonials .vh__ft i{ font-style:normal;font-family:var(--ff-d);font-weight:600;letter-spacing:-.02em; font-size:clamp(.95rem,2vw,1.35rem);color:rgba(232,232,240,.10);white-space:nowrap } @keyframes abcdtte_vh-frag{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } } .abcdt-testimonials .vh__veil{ position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(90deg, var(--ink) 0%, rgba(6,6,10,.78) 30%, rgba(6,6,10,.34) 68%, rgba(6,6,10,.55) 100%), linear-gradient(to bottom, rgba(6,6,10,.4) 0%, rgba(6,6,10,.12) 38%, rgba(6,6,10,.72) 88%, var(--ink) 100%) } .abcdt-testimonials .vh__media .tex{ z-index:2 } .abcdt-testimonials .vh__in{ position:relative;z-index:2 } /* Sans mouvement : plus de dérive, plus de balayage, plus de fragments qui défilent. Les affiches restent, la composition reste. */ @media (prefers-reduced-motion:reduce){ .abcdt-testimonials .vh__poster, .abcdt-testimonials .vh__v, .abcdt-testimonials .vh__wp, .abcdt-testimonials .vh__wv{ animation:none } .abcdt-testimonials .vh__wl, .abcdt-testimonials .vh__frag{ display:none } } /* Mobile : la fenêtre passe à gauche et se réduit, la bande reste, les fragments restent. Le premier écran garde ses trois matières et son mouvement — il est simplement recomposé. */ @media (max-width:899px){ .abcdt-testimonials .vh__win{ right:auto;left:0;width:38%;border-left:0 } .abcdt-testimonials .vh__frag{ bottom:5% } .abcdt-testimonials .vh__ft i{ font-size:1rem } .abcdt-testimonials .vh__veil{ background:linear-gradient(to bottom, rgba(6,6,10,.32) 0%, rgba(6,6,10,.6) 46%, var(--ink) 100%) } } .abcdt-testimonials .vh__k{ display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;margin:0 0 clamp(1.6rem,5vh,2.6rem); font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3) } .abcdt-testimonials .vh__k i{ width:26px;height:1px;background:var(--line-2);display:block;flex:none } .abcdt-testimonials .vh__h{ margin:0 0 0 -.035em; font-family:var(--ff-d);font-weight:800;letter-spacing:-.045em;line-height:.96; font-size:clamp(2.05rem,6.2vw,4.5rem);color:var(--text);max-width:18ch } .abcdt-testimonials .vh__l{ margin:clamp(1.8rem,5vh,2.8rem) 0 0;max-width:58ch; color:var(--text-2);font-size:clamp(1rem,1.5vw,1.1rem);line-height:1.62 } .abcdt-testimonials .vh__l em{ font-style:normal;color:var(--text) } .abcdt-testimonials .vh__a{ display:flex;align-items:center;gap:clamp(1.4rem,4vw,2.6rem);flex-wrap:wrap; margin:clamp(2.2rem,6vh,3.4rem) 0 0 } /* ═══════════════════════════════════════════════════════════════════ 02 · LES COMPTEURS ═══════════════════════════════════════════════════════════════════ */ .abcdt-testimonials .ct__l{ list-style:none;margin:0;padding:0 } .abcdt-testimonials .ct__i{ padding:clamp(1.3rem,3.4vh,1.8rem) 0;border-top:1px solid var(--line) } .abcdt-testimonials .ct__v{ margin:0;font-family:var(--ff-d);font-weight:800;letter-spacing:-.05em;line-height:.9; font-size:clamp(2.4rem,8vw,4rem);color:#fff } .abcdt-testimonials .ct__m{ margin:.7rem 0 0;color:var(--text-3);font-size:.9rem;line-height:1.5;max-width:30ch } @media (min-width:760px){ .abcdt-testimonials .ct__l{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(1.8rem,4vw,3.4rem) } .abcdt-testimonials .ct__v{ font-size:clamp(2.4rem,4.4vw,3.6rem) } } /* ═══════════════════════════════════════════════════════════════════ 03 · LE CHŒUR Trois couches : la voix active, le défilé, la matière. RÈGLE D'ÉTAT PAR DÉFAUT — celle qui décide de toute la section : ce qui est écrit ici est la LISTE COMPLÈTE des sept verbatims, empilés et lisibles. Le mode « une voix à la fois » n'existe que si le script ajoute la classe .is-live sur la liste. Sans JavaScript, sous mouvement réduit, ou si le module tombe, on lit les sept paroles en entier — ce qui est le meilleur état possible pour cette page. ═══════════════════════════════════════════════════════════════════ */ .abcdt-testimonials .ch{ position:relative;isolation:isolate;overflow:hidden } .abcdt-testimonials .ch__head{ position:relative;z-index:2 } .abcdt-testimonials .ch__stage{ position:relative;z-index:1; max-width:var(--maxw);margin:clamp(2.4rem,7vh,3.6rem) auto 0;padding:0 var(--gut); /* --vx : position du recadrage de la matière, 0 à 100. Le script la déplace à chaque changement de voix. */ --vx:50 } /* ── COUCHE 3 · la matière ───────────────────────────────────────── Un seul plan, recadré à chaque voix. Il ne représente personne : il donne au chœur un volume, et il bouge quand la voix change — c'est tout ce qu'on lui demande. */ .abcdt-testimonials .ch__media{ position:absolute;inset:-8% -4%;z-index:0;pointer-events:none;overflow:hidden } .abcdt-testimonials .ch__p, .abcdt-testimonials .ch__v{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:calc(var(--vx) * 1%) 50%; filter:grayscale(1) contrast(1.2) brightness(.9); opacity:.30;mix-blend-mode:screen; -webkit-mask-image:radial-gradient(86% 96% at calc(var(--vx) * 1%) 48%,#000 0%,transparent 74%); mask-image:radial-gradient(86% 96% at calc(var(--vx) * 1%) 48%,#000 0%,transparent 74%); transition:object-position 1.5s var(--e),-webkit-mask-image 1.5s var(--e),mask-image 1.5s var(--e) } .abcdt-testimonials .ch__v{ opacity:0;transition:opacity 1.6s var(--e),object-position 1.5s var(--e) } .abcdt-testimonials .ch__v.is-lit{ opacity:.30 } .abcdt-testimonials .ch__veil{ position:absolute;inset:0; background:linear-gradient(to bottom,var(--ink) 0%,rgba(6,6,10,.2) 40%,rgba(6,6,10,.35) 100%) } .abcdt-testimonials .ch__media .tex{ opacity:.05 } /* ── COUCHE 1 · les voix ────────────────────────────────────────── État par défaut : une liste. Rien n'est caché, rien n'est tronqué. */ .abcdt-testimonials .ch__l{ position:relative;z-index:1;list-style:none;margin:0;padding:0 } .abcdt-testimonials .ch__i{ padding:clamp(1.6rem,4vh,2.4rem) 0;border-top:1px solid var(--line) } .abcdt-testimonials .ch__i:first-child{ border-top:0;padding-top:0 } .abcdt-testimonials .ch__q{ margin:0 } .abcdt-testimonials .ch__b{ margin:0 } .abcdt-testimonials .ch__b p{ margin:0;color:var(--text);text-wrap:pretty; font-family:var(--ff-d);font-weight:500;letter-spacing:-.022em; font-size:clamp(1.15rem,3vw,1.7rem);line-height:1.3 } .abcdt-testimonials .ch__b p::before{ content:'«\00a0' } .abcdt-testimonials .ch__b p::after{ content:'\00a0»' } /* Le thème pose `figcaption{font-style:italic}`. L'identité d'un témoin n'est pas une légende d'image : elle se lit en romain. On neutralise l'héritage sur cette figcaption-ci, et sur elle seule — la citation vit dans le blockquote, elle n'est pas concernée. */ .abcdt-testimonials .ch__w{ display:flex;align-items:center;gap:.9rem;margin:1.5rem 0 0;font-style:normal } .abcdt-testimonials .ch__av{ width:52px;height:52px;flex:none;border-radius:50%;overflow:hidden; display:grid;place-items:center;background:var(--ink-3);border:1px solid var(--line-2) } .abcdt-testimonials .ch__av img{ width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06) } .abcdt-testimonials .ch__av--i{ font-family:var(--ff-d);font-weight:700;font-size:.9rem;color:var(--text-3) } .abcdt-testimonials .ch__id b{ display:block;font-family:var(--ff-d);font-weight:600;font-size:1rem;color:#fff;letter-spacing:-.015em } .abcdt-testimonials .ch__id i{ display:block;font-style:normal;font-size:.86rem;color:var(--text-3);margin-top:.12rem } /* La source, quand elle existe et qu'elle a été fournie. Un lien, rien d'autre : pas de logo, pas de note, pas de badge. */ .abcdt-testimonials .ch__src{ display:inline-block;margin:1rem 0 0; font-size:.8rem;color:var(--text-3);text-decoration:none; border-bottom:1px solid transparent;padding-bottom:1px; transition:color .25s var(--e),border-color .25s var(--e) } .abcdt-testimonials .ch__src::after{ content:'\2197';margin-left:.34em;font-size:.9em } .abcdt-testimonials .ch__src:hover, .abcdt-testimonials .ch__src:focus-visible{ color:var(--text-2);border-bottom-color:var(--line-2) } .abcdt-testimonials .ch__kpi{ margin:1.1rem 0 0;padding-top:.9rem;border-top:1px solid var(--line); font-size:.84rem;line-height:1.5;color:var(--text-3);max-width:60ch } .abcdt-testimonials .ch__kpi b{ color:var(--text);font-weight:500 } /* Mode piloté — posé par le script, jamais par le CSS seul. Les sept voix occupent la même case de grille : la hauteur est celle de la plus longue, et rien ne saute d'une voix à l'autre. Les voix inactives restent dans l'arbre d'accessibilité : une synthèse vocale les lit toutes les sept, dans l'ordre. */ .abcdt-testimonials .ch__l.is-live{ display:grid;align-items:start;min-height:clamp(15rem,34vh,20rem) } .abcdt-testimonials .ch__l.is-live .ch__i{ grid-area:1/1;border-top:0;padding:0;pointer-events:none; opacity:0;transform:translate3d(0,18px,0); transition:opacity calc(var(--ds) * 1.1) var(--es),transform calc(var(--ds) * 1.1) var(--es) } .abcdt-testimonials .ch__l.is-live .ch__i.is-on{ opacity:1;transform:none;pointer-events:auto } .abcdt-testimonials .ch__l.is-live .ch__b p{ font-size:clamp(1.25rem,2.9vw,2.05rem);max-width:30ch } /* En mode piloté et à partir de 900px, la voix se compose : le verbatim à gauche, l'identité et le résultat à droite, calés en bas. C'est ce qui distingue un chœur d'un long paragraphe. */ @media (min-width:900px){ .abcdt-testimonials .ch__l.is-live .ch__q{ display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,.38fr); column-gap:clamp(2.5rem,5vw,4.5rem);align-items:end } .abcdt-testimonials .ch__l.is-live .ch__b{ grid-column:1;grid-row:1 / span 2 } .abcdt-testimonials .ch__l.is-live .ch__w{ grid-column:2;grid-row:1;margin:0;align-self:end } .abcdt-testimonials .ch__l.is-live .ch__kpi{ grid-column:2;grid-row:2;margin-top:1.2rem;max-width:34ch } /* Pas de rangée imposée : la source se pose sous le KPI quand il y en a un, sous l'identité quand il n'y en a pas. Les voix sans chiffres ne doivent pas laisser un trou à la place. */ .abcdt-testimonials .ch__l.is-live .ch__src{ grid-column:2;margin-top:.9rem;align-self:start } } /* Sous 900px la voix active n'efface pas les autres : elle est simplement mise en avant pendant la lecture. Le mouvement reste, la lecture continue d'être linéaire. */ @media (max-width:899px){ .abcdt-testimonials .ch__l.is-live{ display:block;min-height:0 } .abcdt-testimonials .ch__l.is-live .ch__i{ grid-area:auto;opacity:.42;transform:none;pointer-events:auto; padding:clamp(1.6rem,4vh,2.4rem) 0;border-top:1px solid var(--line); transition:opacity .7s var(--e) } .abcdt-testimonials .ch__l.is-live .ch__i:first-child{ border-top:0;padding-top:0 } .abcdt-testimonials .ch__l.is-live .ch__i.is-on{ opacity:1 } } /* ── COUCHE 2 · le défilé ───────────────────────────────────────── Structure et rythme repris de la page d'accueil : deux rangs en sens inverse, vignettes à portrait, dégradés de bord, pause au survol et au focus. Deux différences assumées : les rangs n'ont pas la même vitesse, et une vignette ne s'ouvre pas dans une fenêtre — elle porte sa voix au premier plan, juste au-dessus. */ .abcdt-testimonials .chm{ position:relative;display:flex;flex-direction:column;gap:1rem; width:100%;overflow:hidden;margin-top:clamp(2.2rem,6vh,3.4rem); /* Sept vignettes par rang à l'origine, dix désormais : à durée égale le défilé aurait accéléré de 42 %. On rallonge la durée pour garder une vitesse de lecture proche, sans faire attendre une minute et demie avant d'avoir vu tout le corpus. Rang 1 : 58 s. Rang 2 : 67 s — les deux rangs restent désynchronisés. */ --mq-dur:58s } .abcdt-testimonials .chm__row{ display:flex;overflow:hidden;padding:.4rem 0 } .abcdt-testimonials .chm__track{ display:flex;gap:1rem;flex:none;min-width:100%;list-style:none;margin:0;padding:0; will-change:transform } .abcdt-testimonials.abc-motion .chm__track[data-dir="fwd"]{ animation:abcdtte_ch-mq-l var(--mq-dur) linear infinite } .abcdt-testimonials.abc-motion .chm__track[data-dir="rev"]{ animation:abcdtte_ch-mq-r calc(var(--mq-dur) * 1.16) linear infinite } @keyframes abcdtte_ch-mq-l{ from{transform:translateX(0)} to{transform:translateX(calc(-50% - .5rem))} } @keyframes abcdtte_ch-mq-r{ from{transform:translateX(calc(-50% - .5rem))} to{transform:translateX(0)} } .abcdt-testimonials .chm:hover .chm__track, .abcdt-testimonials .chm:focus-within .chm__track{ animation-play-state:paused } .abcdt-testimonials .chc{ display:flex;flex-direction:column;gap:.55rem;text-align:left; width:17.5rem;flex:none;padding:.95rem 1.05rem;border-radius:8px; background:var(--ink-2);border:1px solid var(--line);color:inherit; font:inherit;cursor:pointer; transition:border-color .3s var(--e),background .3s var(--e),transform .3s var(--e) } .abcdt-testimonials .chc:hover{ border-color:var(--line-2);background:var(--ink-3) } .abcdt-testimonials .chc[aria-pressed="true"]{ border-color:var(--line-2);background:var(--ink-3);transform:translateY(-2px) } .abcdt-testimonials .chc__top{ display:flex;align-items:center;gap:.55rem;min-width:0 } .abcdt-testimonials .chc__av{ width:32px;height:32px;flex:none;border-radius:50%;overflow:hidden; display:grid;place-items:center;background:var(--ink-3);border:1px solid var(--line-2); font-family:var(--ff-d);font-weight:700;font-size:.62rem;color:var(--text-3) } .abcdt-testimonials .chc__av img{ width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) } .abcdt-testimonials .chc__who{ display:flex;flex-direction:column;min-width:0 } .abcdt-testimonials .chc__who b{ font-size:.86rem;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis } .abcdt-testimonials .chc__who i{ font-style:normal;font-size:.74rem;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis } .abcdt-testimonials .chc__q{ font-size:.85rem;line-height:1.45;color:var(--text-2); display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden } .abcdt-testimonials .chm__fade{ position:absolute;inset-block:0;width:22%;pointer-events:none;z-index:2 } .abcdt-testimonials .chm__fade--l{ left:0;background:linear-gradient(to right,var(--ink),transparent) } .abcdt-testimonials .chm__fade--r{ right:0;background:linear-gradient(to left,var(--ink),transparent) } /* Le défilé n'a de sens qu'en mouvement et à la souris. Sans l'un ou sans l'autre, il disparaît — les sept paroles sont déjà entières au-dessus, il ne manque rien. */ .abcdt-testimonials:not(.abc-motion) .chm{ display:none } @media (max-width:899px){ .abcdt-testimonials .chm{ display:none } } .abcdt-testimonials .ch__note{ position:relative;z-index:2; margin:clamp(2rem,5vh,3rem) 0 0;padding-top:1.4rem;border-top:1px solid var(--line); max-width:64ch;color:var(--text-3);font-size:.86rem;line-height:1.6 } /* ═══════════════════════════════════════════════════════════════════ 04 · LES ÉDITIONS ═══════════════════════════════════════════════════════════════════ */ .abcdt-testimonials .ed{ position:relative;background:var(--ink);border-top:1px solid var(--line);padding:clamp(5rem,13vh,9.5rem) 0 0 } .abcdt-testimonials .ed__head .lede{ max-width:62ch } .abcdt-testimonials .ed__l{ list-style:none;margin:clamp(2.6rem,8vh,4.5rem) 0 0;padding:0;counter-reset:ed } .abcdt-testimonials .ed__i{ position:relative;isolation:isolate;overflow:hidden; border-top:1px solid var(--line) } .abcdt-testimonials .ed__i:last-child{ border-bottom:1px solid var(--line) } /* Le plan de la ligne — Cinematic List. Il n'apparaît que sous la ligne OUVERTE, et reste très en dessous du texte : c'est un fond, pas une image de couverture. */ .abcdt-testimonials .ed__bg{ position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 1.2s var(--e) } .abcdt-testimonials .ed__i.is-open .ed__bg{ opacity:1 } .abcdt-testimonials .ed__poster, .abcdt-testimonials .ed__v{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:grayscale(1) contrast(1.2) brightness(.5) } .abcdt-testimonials .ed__v{ opacity:0;transition:opacity 1.4s var(--e) } .abcdt-testimonials .ed__v.is-lit{ opacity:1 } .abcdt-testimonials .ed__veil{ position:absolute;inset:0; background:linear-gradient(95deg, var(--ink) 0%, rgba(6,6,10,.94) 42%, rgba(6,6,10,.74) 100%) } /* Le dossier 01 montre une création publicitaire réelle du client : elle garde ses couleurs, mais reste très en retrait. C'est un document. */ .abcdt-testimonials .ed__i[data-e="1"] .ed__poster, .abcdt-testimonials .ed__i[data-e="1"] .ed__v{ filter:contrast(1) saturate(.55) brightness(.3);object-position:50% 26% } /* La création ZAG porte un texte en gros corps ; sans ce voile supplémentaire il vient concurrencer celui du dossier. */ .abcdt-testimonials .ed__i[data-e="1"] .ed__veil{ background:linear-gradient(95deg, var(--ink) 0%, rgba(6,6,10,.97) 46%, rgba(6,6,10,.88) 100%) } .abcdt-testimonials .ed__row{ position:relative;z-index:1 } .abcdt-testimonials .ed__t{ margin:0 } .abcdt-testimonials .ed__b{ display:grid;grid-template-columns:auto minmax(0,1fr) auto; align-items:baseline;gap:.9rem 1.2rem; width:100%;padding:clamp(1.5rem,4vh,2.2rem) 0; background:none;border:0;text-align:left;cursor:pointer;color:inherit;font:inherit; transition:padding-left .5s var(--e) } .abcdt-testimonials .ed__b:hover{ padding-left:.7rem } .abcdt-testimonials .ed__n{ font-family:var(--ff-d);font-weight:700;font-size:.78rem;letter-spacing:.1em;color:var(--text-3); align-self:center } .abcdt-testimonials .ed__c{ grid-column:2;font-family:var(--ff-d);font-weight:800;letter-spacing:-.04em;line-height:1; font-size:clamp(1.6rem,5.6vw,3rem);color:#fff } .abcdt-testimonials .ed__s{ grid-column:2;grid-row:2;font-size:.8rem;line-height:1.5;color:var(--text-3);max-width:52ch } /* Le signe d'ouverture : deux traits, jamais une flèche de composant. */ .abcdt-testimonials .ed__x{ grid-column:3;grid-row:1 / span 2;align-self:center; position:relative;width:14px;height:14px;flex:none } .abcdt-testimonials .ed__x::before, .abcdt-testimonials .ed__x::after{ content:'';position:absolute;background:var(--text-2);transition:transform .5s var(--e),background-color .5s var(--e) } .abcdt-testimonials .ed__x::before{ left:0;right:0;top:6.5px;height:1px } .abcdt-testimonials .ed__x::after{ top:0;bottom:0;left:6.5px;width:1px;transform:scaleY(0) } .abcdt-testimonials .ed__i:not(.is-open) .ed__x::after{ transform:scaleY(1) } .abcdt-testimonials .ed__b:hover .ed__x::before, .abcdt-testimonials .ed__b:hover .ed__x::after{ background:#fff } .abcdt-testimonials .ed__p{ padding:0 0 clamp(2.2rem,6vh,3.4rem) } .abcdt-testimonials .ed__cols{ display:grid;gap:clamp(1.8rem,5vh,2.6rem) } .abcdt-testimonials .ed__lb{ margin:0 0 .7rem;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3) } .abcdt-testimonials .ed__d{ margin:0 0 1.6rem;max-width:58ch;color:var(--text-2);font-size:.98rem;line-height:1.7 } .abcdt-testimonials .ed__d--n{ margin-bottom:0 } .abcdt-testimonials .ed__d b{ color:#fff;font-weight:500 } .abcdt-testimonials .ed__q{ margin:0;padding-left:1.1rem;border-left:1px solid var(--line-2);max-width:52ch } .abcdt-testimonials .ed__q p{ margin:0;color:var(--text);font-size:.98rem;line-height:1.6 } .abcdt-testimonials .ed__q p::before{ content:'«\00a0' } .abcdt-testimonials .ed__q p::after{ content:'\00a0»' } .abcdt-testimonials .ed__q cite{ display:block;margin-top:.7rem;font-style:normal;font-size:.8rem;color:var(--text-3) } .abcdt-testimonials .ed__k{ list-style:none;margin:0;padding:0 } .abcdt-testimonials .ed__k li{ padding:.85rem 0;border-top:1px solid var(--line) } .abcdt-testimonials .ed__k li:first-child{ border-top:0;padding-top:0 } .abcdt-testimonials .ed__k b{ display:block;font-family:var(--ff-d);font-weight:800;letter-spacing:-.035em;line-height:1; font-size:clamp(1.4rem,3.6vw,1.9rem);color:#fff } .abcdt-testimonials .ed__k span{ display:block;margin-top:.35rem;color:var(--text-3);font-size:.84rem;line-height:1.45 } .abcdt-testimonials .ed__src{ margin:clamp(1.6rem,4vh,2.2rem) 0 0;padding-top:1rem;border-top:1px solid var(--line); font-size:.76rem;letter-spacing:.02em;color:var(--text-3) } .abcdt-testimonials .ed__foot{ padding-top:clamp(2rem,5vh,3rem);padding-bottom:clamp(5rem,13vh,9.5rem) } .abcdt-testimonials .ed__note{ margin:0;max-width:64ch;color:var(--text-3);font-size:.86rem;line-height:1.6 } @media (min-width:900px){ .abcdt-testimonials .ed__cols{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2.5rem,5vw,4.5rem) } .abcdt-testimonials .ed__k{ padding-top:.2rem } .abcdt-testimonials .ed__b{ grid-template-columns:auto minmax(0,1fr) auto;align-items:center } .abcdt-testimonials .ed__c{ grid-column:2;grid-row:1 } .abcdt-testimonials .ed__s{ grid-column:2;grid-row:2 } } /* Repli : sous mouvement réduit, on ne fait pas glisser le dossier, on le montre. L'ouverture reste instantanée. */ .abcdt-testimonials.abc-motion .ed__p{ opacity:0;transform:translate3d(0,10px,0);transition:opacity .55s var(--e),transform .55s var(--e) } .abcdt-testimonials.abc-motion .ed__i.is-open .ed__p{ opacity:1;transform:none } @media (prefers-reduced-motion:reduce){ .abcdt-testimonials.abc-motion .ed__p{ opacity:1;transform:none;transition:none } .abcdt-testimonials .ed__bg{ transition:none } } /* ═══════════════════════════════════════════════════════════════════ RÉVÉLATIONS ═══════════════════════════════════════════════════════════════════ */ .abcdt-testimonials.abc-motion [data-rv]{ opacity:0;transform:translate3d(0,14px,0); transition:opacity var(--ds) var(--es),transform var(--ds) var(--es) } .abcdt-testimonials.abc-motion [data-rv].is-in{ opacity:1;transform:none } @media (prefers-reduced-motion:reduce){ .abcdt-testimonials.abc-motion [data-rv]{ opacity:1;transform:none;transition:none } } /* ── Le titre laisse la fenêtre respirer à droite ──────────────── */ @media (min-width:900px){ .abcdt-testimonials .vh__h{ max-width:min(19ch,58%) } .abcdt-testimonials .vh__l{ max-width:min(52ch,52%) } } /* ═══════════════════════════════════════════════════════════════════ LA BASCULE — voix → preuve → dossier ═══════════════════════════════════════════════════════════════════ */ .abcdt-testimonials .bs{ --sm-h:clamp(7rem,18vh,11rem);--sm-op:.28;display:grid;place-items:center } .abcdt-testimonials .bs__t{ position:relative;z-index:3;margin:0;padding:0 var(--gut); display:flex;align-items:center;gap:clamp(.8rem,2.6vw,1.6rem);flex-wrap:wrap;justify-content:center; font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3);text-align:center } .abcdt-testimonials .bs__t i{ width:clamp(20px,6vw,56px);height:1px;background:var(--line-2);display:block;flex:none } .abcdt-testimonials .bs .sm__line{ opacity:.5 } /* ═══════════════════════════════════════════════════════════════════ LE MOMENT MÉDIA DE CHAQUE DOSSIER Une fenêtre au format du plan, pas une vignette rognée. Le plan ne se charge et ne joue que si le dossier est ouvert : c'est l'attribut data-hold, lu par le module de plans partagé. ═══════════════════════════════════════════════════════════════════ */ .abcdt-testimonials .ed__win{ margin:clamp(1.6rem,4vh,2.2rem) 0 0 } .abcdt-testimonials .ed__winm{ position:relative;overflow:hidden;border:1px solid var(--line);background:var(--ink-2); aspect-ratio:16/6 } .abcdt-testimonials .ed__winm img, .abcdt-testimonials .ed__winm video{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:grayscale(1) contrast(1.2) brightness(.86); transform:scale(1.02);transition:transform 2.4s var(--e) } .abcdt-testimonials .ed__winm video{ opacity:0;transition:opacity 1.4s var(--e),transform 2.4s var(--e) } .abcdt-testimonials .ed__winm video.is-lit{ opacity:1 } .abcdt-testimonials .ed__i.is-open .ed__winm img, .abcdt-testimonials .ed__i.is-open .ed__winm video{ transform:scale(1.08) } /* Le dossier ZAG montre une création publicitaire RÉELLE, au format vertical dans lequel elle a été diffusée. On ne la recadre pas en bandeau : ce serait la faire mentir sur son format, et il faudrait l'agrandir au-delà de sa définition. Elle est donc présentée telle qu'elle, dans une fenêtre haute et étroite, en couleurs. */ .abcdt-testimonials .ed__i[data-e="1"] .ed__winm{ aspect-ratio:9/16;max-width:min(280px,64%) } .abcdt-testimonials .ed__i[data-e="1"] .ed__winm img, .abcdt-testimonials .ed__i[data-e="1"] .ed__winm video{ filter:contrast(1.04) saturate(.85) brightness(.92) } .abcdt-testimonials .ed__win figcaption{ margin:.7rem 0 0;font-size:.76rem;color:var(--text-3);line-height:1.5 } @media (min-width:900px){ .abcdt-testimonials .ed__winm{ aspect-ratio:21/6 } .abcdt-testimonials .ed__i[data-e="1"] .ed__winm{ aspect-ratio:9/16;max-width:300px } } @media (prefers-reduced-motion:reduce){ .abcdt-testimonials .ed__winm img, .abcdt-testimonials .ed__winm video{ transition:none;transform:none } .abcdt-testimonials .ed__i.is-open .ed__winm img, .abcdt-testimonials .ed__i.is-open .ed__winm video{ transform:none } } .abcdt-testimonials .end{ position:relative;isolation:isolate;overflow:hidden; padding:clamp(6rem,17vh,12rem) 0 clamp(5rem,13vh,8rem); background:var(--ink) } .abcdt-testimonials .end__media{ position:absolute;inset:0;z-index:0 } .abcdt-testimonials .end__v{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover; /* Recadré sur le tiers droit du plan : celui qui est presque noir. Le même rush, une surface complètement différente. */ object-position:88% 50%; filter:grayscale(1) contrast(1.2); opacity:.6;transition:opacity 1.4s var(--e); transform:scale(1.14) } .abcdt-testimonials .end__veil{ position:absolute;inset:0; background: linear-gradient(to bottom, var(--ink) 0%, rgba(6,6,10,.5) 28%, rgba(6,6,10,.68) 72%, var(--ink) 100%), radial-gradient(70% 60% at 18% 42%, rgba(26,111,255,.09), transparent 72%) } .abcdt-testimonials .end .tex{ z-index:1 } .abcdt-testimonials .end__in{ position:relative;z-index:2 } .abcdt-testimonials .end__h{ margin:0 0 0 -.045em; font-family:var(--ff-d);font-weight:800;letter-spacing:-.046em; /* Deux lignes fixes, coupées après « Posons les ». La ligne large est « fondations. » : le plancher tient dans la gouttière à 320px. */ font-size:clamp(2rem,8.6vw,7rem);line-height:.9;color:var(--text) } .abcdt-testimonials .end__grid{ display:grid;grid-template-columns:minmax(0,1fr); gap:clamp(2.5rem,7vh,4rem);margin-top:clamp(2.5rem,7vh,4rem) } .abcdt-testimonials .end__p{ margin:0 0 1.2rem;max-width:52ch;color:var(--text-2); font-size:1rem;line-height:1.62 } .abcdt-testimonials .end__p:last-child{ margin-bottom:0 } .abcdt-testimonials .end__re{ display:flex;align-items:center;gap:.8rem;flex-wrap:wrap; margin:0 0 clamp(1.4rem,3.5vh,2rem); font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3) } .abcdt-testimonials .end__re i{ width:16px;height:1px;background:var(--line-2);display:block;flex:none } /* Aimantation légère du CTA — écrite par le script, plafonnée à 6px. */ .abcdt-testimonials .end__cta{ transform:translate3d(var(--mx,0px),var(--my,0px),0); transition:transform .35s var(--e),color .25s var(--e),border-color .25s var(--e) } @media(min-width:900px){ .abcdt-testimonials .end__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(3rem,7vw,6.5rem);align-items:start } /* La colonne est divisée par deux : le titre est recalibré sur cette demi-largeur, pas sur la largeur de page. */ .abcdt-testimonials .end__h{ font-size:clamp(2.4rem,4.4vw,4rem) } .abcdt-testimonials .end__act{ padding-top:.4rem } } @media (prefers-reduced-motion: reduce){ .abcdt-testimonials .end__v, .abcdt-testimonials .end__cta{ transition:none } .abcdt-testimonials .end__v{ opacity:0 } } /* ── Curseur personnalisé — VOLONTAIREMENT HORS DU SCOPE ────────── Le canvas est posé sur , pas dans le wrapper : ces deux règles doivent donc rester globales, exactement comme sur la page d'accueil. Elles ne s'appliquent que si le script a réellement démarré le canvas — la classe .has-tube n'est posée qu'au premier mouvement de souris, jamais au chargement. ──────────────────────────────────────────────────────────── */ .abc-cursor{ position:fixed;inset:0;z-index:9998;pointer-events:none; opacity:0;transition:opacity .35s cubic-bezier(.16,1,.3,1);contain:strict } .abc-cursor.is-on{opacity:1} body.has-tube, body.has-tube a,body.has-tube button,body.has-tube summary, body.has-tube input,body.has-tube textarea,body.has-tube select, body.has-tube label,body.has-tube [role="button"]{cursor:none} body.has-tube .abcdt-testimonials, body.has-tube .abcdt-testimonials a, body.has-tube .abcdt-testimonials button, body.has-tube .abcdt-testimonials summary, body.has-tube .abcdt-testimonials input, body.has-tube .abcdt-testimonials textarea, body.has-tube .abcdt-testimonials select, body.has-tube .abcdt-testimonials label, body.has-tube .abcdt-testimonials [role="button"]{cursor:none}