/* ═══════════════════════════════════════════════════════════════════════ 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-service-publicite-digitale. 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-service-publicite-digitale{ 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-service-publicite-digitale *, .abcdt-service-publicite-digitale *::before, .abcdt-service-publicite-digitale *::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-service-publicite-digitale h1,.abcdt-service-publicite-digitale h2,.abcdt-service-publicite-digitale h3,.abcdt-service-publicite-digitale h4,.abcdt-service-publicite-digitale h5,.abcdt-service-publicite-digitale h6, .abcdt-service-publicite-digitale p,.abcdt-service-publicite-digitale ul,.abcdt-service-publicite-digitale ol,.abcdt-service-publicite-digitale dl,.abcdt-service-publicite-digitale figure,.abcdt-service-publicite-digitale blockquote{ color:inherit;font-family:inherit;letter-spacing:inherit;text-transform:none } .abcdt-service-publicite-digitale img,.abcdt-service-publicite-digitale video,.abcdt-service-publicite-digitale canvas{ display:block;max-width:100% } .abcdt-service-publicite-digitale a{ color:inherit } .abcdt-service-publicite-digitale button,.abcdt-service-publicite-digitale input,.abcdt-service-publicite-digitale select,.abcdt-service-publicite-digitale textarea{ font-family:inherit;font-size:inherit;font-weight:inherit; font-style:inherit;line-height:normal;color:inherit;letter-spacing:inherit } .abcdt-service-publicite-digitale ::selection{ background:var(--blue);color:var(--on-blue) } .abcdt-service-publicite-digitale :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-service-publicite-digitale{ --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-service-publicite-digitale{ --gut:2.5rem } } @media(min-width:1200px){ .abcdt-service-publicite-digitale{ --gut:4rem } } .abcdt-service-publicite-digitale *, .abcdt-service-publicite-digitale *::before, .abcdt-service-publicite-digitale *::after{box-sizing:border-box} @media(prefers-reduced-motion:reduce){} .abcdt-service-publicite-digitale a{color:inherit} .abcdt-service-publicite-digitale .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)} .abcdt-service-publicite-digitale .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-service-publicite-digitale .skip:focus-visible{transform:translateY(0)} /* ── Typographie commune ───────────────────────────────────────── */ .abcdt-service-publicite-digitale .eyebrow{ margin:0 0 1.5rem;font-size:.7rem;font-weight:500;letter-spacing:.22em; text-transform:uppercase;color:var(--text-3) } .abcdt-service-publicite-digitale .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-service-publicite-digitale .h2--lg{font-size:clamp(2.1rem,5.4vw,4rem);max-width:20ch} .abcdt-service-publicite-digitale .h2--xl{font-size:clamp(2.3rem,6.6vw,5rem);max-width:14ch;font-weight:800} .abcdt-service-publicite-digitale .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-service-publicite-digitale .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-service-publicite-digitale .tlink::after{content:'→';transition:transform .3s var(--e)} .abcdt-service-publicite-digitale .tlink:hover{color:var(--blue-lift);border-bottom-color:var(--blue)} .abcdt-service-publicite-digitale .tlink:hover::after{transform:translateX(5px)} .abcdt-service-publicite-digitale .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-service-publicite-digitale .tlink--min{ border-bottom:0;padding:0;font-size:.92rem;color:var(--text-3);letter-spacing:.01em } .abcdt-service-publicite-digitale .tlink--min::after{font-size:.9em} .abcdt-service-publicite-digitale .tlink--min:hover{color:var(--text)} .abcdt-service-publicite-digitale .sec{position:relative;padding:clamp(5rem,13vh,9.5rem) 0} .abcdt-service-publicite-digitale .sec--quiet{padding:clamp(4rem,10vh,7rem) 0} .abcdt-service-publicite-digitale .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-service-publicite-digitale .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-service-publicite-digitale .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). */ /* ═══════════════════════════════════════════════════════════════════════ ABC DIGITAL TOUCH — Page service « Publicité digitale » Même socle que les autres pages service : core.css pour les tokens, patterns.css pour les primitives, contact.css pour la conversion. Ce fichier ne contient que ce qui appartient à cette page. TERRITOIRE — Acquisition raconte la direction, Lead Generation la sélection, E-commerce l'alignement. Ici c'est LE CADRE. La publicité, c'est acheter une fenêtre dans l'attention de quelqu'un, pour un moment, à un prix. Toute la page est donc faite de FENÊTRES : des rectangles à arête dure, ouverts par clip-path, qui se disputent une largeur constante. Rien n'est arrondi, rien ne flotte, rien ne se fond. La géométrie est orthogonale et la matière est dense. C'est ce qui doit rester lisible texte masqué : des rectangles nets, du blanc coupé au noir, une densité forte. Automation est un ruban continu ; Tracking est une révélation basse lumière ; ici ce sont des cadres. LE BLEU — nulle part ailleurs que dans les liens. ═══════════════════════════════════════════════════════════════════════ */ .abcdt-service-publicite-digitale .svc{ position:relative } /* ═══════════════════════════════════════════════════════════════ 01 · HERO — L'IRRUPTION --op : 0 = les trois fenêtres sont fermées, 1 = elles sont ouvertes. L'état CSS par défaut est 1 : sans script, le hero est déjà abouti. ═══════════════════════════════════════════════════════════════ */ .abcdt-service-publicite-digitale .ah{ position:relative;background:var(--ink) } .abcdt-service-publicite-digitale .ah__stage{ position:relative;isolation:isolate;overflow:hidden; min-height:100svh;display:flex;align-items:flex-end; padding:calc(var(--nav-h) + 4rem) 0 clamp(3rem,9vh,5.5rem) } .abcdt-service-publicite-digitale .ah__media{ position:absolute;inset:0;z-index:0 } .abcdt-service-publicite-digitale .ah__poster, .abcdt-service-publicite-digitale .ah__v{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; /* Le plan descend : la masse entre par le haut. On l'agrandit un peu pour que le mouvement vertical ne découvre jamais de bord. Le contraste monte légèrement avec la descente : le plafond ne fait pas que bouger, il se densifie. */ transform:scale(calc(1.06 + .035 * var(--pr,0))) translate3d(0,var(--hp,0px),0); filter:grayscale(1) contrast(calc(1.04 + .16 * var(--pr,0))) } /* La pression. Une nappe sombre qui pèse depuis le haut du cadre et s'alourdit à mesure qu'on descend — c'est le plafond noir qui s'approche, pas un fondu de sortie. Elle passe SOUS les fenêtres : elles restent des ouvertures, même quand la masse pèse. */ .abcdt-service-publicite-digitale .ah__press{ position:absolute;inset:0;z-index:3;pointer-events:none; background:linear-gradient(to bottom, rgba(6,6,10,calc(.16 + .62 * var(--pr,0))) 0%, rgba(6,6,10,calc(.04 + .3 * var(--pr,0))) 34%, transparent 62%) } .abcdt-service-publicite-digitale .ah__v{ opacity:0;transition:opacity 1.2s var(--e) } .abcdt-service-publicite-digitale .ah__v.is-lit{ opacity:1 } .abcdt-service-publicite-digitale .ah .tex{ z-index:2 } /* Le plan est CLAIR : un plafond noir qui pèse, et de la matière en dessous. C'est l'inverse tonal des trois autres pages service, et c'est voulu — la publicité, c'est ce qui s'impose par le haut. Le voile est donc un coin, pas une nappe : il noircit la colonne de gauche où s'installe le texte, et laisse la matière respirer à droite. Un fond de page très léger referme le bas. */ .abcdt-service-publicite-digitale .ah__veil{ position:absolute;inset:0;z-index:3; /* Sur mobile il n'y a pas de place pour un coin : le voile devient un simple fondu vertical, et la matière garde toute la moitié haute. */ background:linear-gradient(to bottom, rgba(6,6,10,.5) 0%, rgba(6,6,10,.04) 24%, rgba(6,6,10,.24) 50%, rgba(6,6,10,.82) 78%, var(--ink) 100%) } @media(min-width:900px){ .abcdt-service-publicite-digitale .ah__veil{ background: linear-gradient(98deg, rgba(6,6,10,.97) 0%, rgba(6,6,10,.93) 22%, rgba(6,6,10,.6) 44%, rgba(6,6,10,.12) 70%, rgba(6,6,10,.28) 100%), linear-gradient(to bottom, rgba(6,6,10,.62) 0%, rgba(6,6,10,.06) 30%, rgba(6,6,10,.1) 66%, rgba(6,6,10,.66) 100%) } } /* ── Les trois fenêtres ──────────────────────────────────────── Elles passent AU-DESSUS du voile : c'est le seul endroit où la matière est vue à pleine densité. Arête dure, filet d'un pixel, aucun arrondi — c'est la signature de la page. */ .abcdt-service-publicite-digitale .ah__slots{ position:absolute;z-index:5;inset:0;pointer-events:none; display:none } .abcdt-service-publicite-digitale .ah__slot{ position:absolute;margin:0;overflow:hidden;background:var(--ink-2); /* Double filet : un liseré clair franc à l'intérieur, une ombre nette à l'extérieur. C'est l'ARÊTE qui fait exister la fenêtre, pas le contraste de son contenu — elle se détache donc aussi bien sur le noir du plafond que sur le champ clair du plan. */ box-shadow:inset 0 0 0 1px rgba(232,232,240,.5), 0 0 0 1px rgba(6,6,10,.7); /* L'ouverture se fait au clip-path, pas à l'opacité : une fenêtre publicitaire s'ouvre, elle n'apparaît pas en fondu. */ clip-path:inset(calc(50% * (1 - var(--op,1))) 0 calc(50% * (1 - var(--op,1))) 0); /* Plus lent qu'avant, et étalé : un emplacement s'achète, il ne s'allume pas. Aucun rebond — une seule courbe sortante. */ transition:clip-path 1.5s cubic-bezier(.19,1,.22,1) } /* Les fenêtres sont recadrées sur la MASSE du plan, pas sur son champ clair : ce sont des rectangles sombres découpés dans la lumière. Un inventaire publicitaire, vu de loin. */ .abcdt-service-publicite-digitale .ah__slot img, .abcdt-service-publicite-digitale .ah__slot video{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:88% 42%; filter:grayscale(1) contrast(1.24) brightness(.82) } .abcdt-service-publicite-digitale .ah__slot video{ opacity:0;transition:opacity 1.2s var(--e) } .abcdt-service-publicite-digitale .ah__slot video.is-lit{ opacity:1 } /* Une colonne de trois emplacements, à fleur du bord droit du cadre. C'est un rail publicitaire : trois formats, empilés, séparés par deux pixels. Ils tombent dans la partie CLAIRE du plan — des blocs sombres découpés dans la lumière, jamais l'inverse. Ils sont calés à droite du texte : la colonne de lecture s'arrête bien avant, il n'y a aucun recouvrement. */ /* La largeur est indexée sur la HAUTEUR du cadre, pas sur sa largeur : les trois emplacements empilés occupent toujours la même part de l'écran, qu'il soit haut ou bas. C'est la seule façon de garantir que la colonne tienne dans le viewport à toutes les hauteurs. */ .abcdt-service-publicite-digitale .ah__slot{ --w:clamp(84px,15vh,190px);right:0;width:var(--w) } .abcdt-service-publicite-digitale .ah__slot--1{ top:17%;aspect-ratio:9/16;transition-delay:.2s } .abcdt-service-publicite-digitale .ah__slot--2{ top:calc(17% + var(--w) * 16 / 9 + 2px);aspect-ratio:3/4;transition-delay:.52s } .abcdt-service-publicite-digitale .ah__slot--3{ top:calc(17% + var(--w) * 16 / 9 + var(--w) * 4 / 3 + 4px); aspect-ratio:1/1;transition-delay:.84s } /* La troisième est le cadre vide : le plafond noir du plan, rien d'autre. */ .abcdt-service-publicite-digitale .ah__slot--3 img{ object-position:50% 4%;filter:grayscale(1) contrast(1.3) brightness(.5) } @media(min-width:900px){ .abcdt-service-publicite-digitale .ah__slots{ display:block } } .abcdt-service-publicite-digitale .ah__copy{ position:relative;z-index:6;width:100% } .abcdt-service-publicite-digitale .ah__k{ display:flex;align-items:center;gap:1rem;margin:0 0 clamp(1.4rem,3.5vh,2.2rem); font-size:.7rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3) } .abcdt-service-publicite-digitale .ah__k i{ width:clamp(28px,6vw,64px);height:1px;background:var(--line-2);flex:none } .abcdt-service-publicite-digitale .ah__h{ margin:0 0 0 -.045em; font-family:var(--ff-d);font-weight:800;letter-spacing:-.05em; font-size:clamp(2.9rem,13vw,9rem);line-height:.86;color:var(--text) } /* Les deux lignes se CALENT : elles arrivent décalées d'un demi-cadratin et d'un interlettrage un peu large, puis se rangent. Un seul geste, une seule fois, et le texte ne bouge plus jamais ensuite. */ .abcdt-service-publicite-digitale.abc-motion .ah__h span{ display:block; transform:translate3d(calc(.14em * (1 - var(--set,1))),0,0); letter-spacing:calc(-.05em + .04em * (1 - var(--set,1))); transition:transform 1.2s var(--e),letter-spacing 1.2s var(--e) } .abcdt-service-publicite-digitale.abc-motion .ah__h span:nth-child(2){ transition-delay:.11s } .abcdt-service-publicite-digitale .ah__l{ margin:clamp(1.6rem,4vh,2.4rem) 0 0;max-width:44ch; color:var(--text-2);font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.55 } .abcdt-service-publicite-digitale .ah__l em{ font-style:normal;color:var(--text) } .abcdt-service-publicite-digitale .ah__a{ display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2.2rem; margin:clamp(1.8rem,4.5vh,2.6rem) 0 0 } /* ── Les quatre repères ─────────────────────────────────────── Une bande de quatre colonnes séparées par des filets verticaux : le premier écho de la grammaire « fenêtres » de la page. */ .abcdt-service-publicite-digitale .ah__r{ list-style:none;margin:0;padding-top:clamp(2.5rem,7vh,4rem); padding-bottom:clamp(3rem,8vh,5rem); display:grid;grid-template-columns:minmax(0,1fr);gap:0 } .abcdt-service-publicite-digitale .ah__ri{ padding:1.3rem 0;border-top:1px solid var(--line) } .abcdt-service-publicite-digitale .ah__ri:last-child{ border-bottom:1px solid var(--line) } .abcdt-service-publicite-digitale .ah__ri b{ display:block;font-family:var(--ff-d);font-weight:700; font-size:clamp(1.05rem,2.4vw,1.3rem);letter-spacing:-.02em;color:var(--text) } .abcdt-service-publicite-digitale .ah__ri b i{ font-style:normal;color:var(--text-3);font-weight:400 } .abcdt-service-publicite-digitale .ah__ri span{ display:block;margin:.35rem 0 .6rem; font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3) } .abcdt-service-publicite-digitale .ah__ri p{ margin:0;font-size:.92rem;line-height:1.55;color:var(--text-2);max-width:34ch } @media(min-width:768px){ .abcdt-service-publicite-digitale .ah__r{ grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line) } .abcdt-service-publicite-digitale .ah__ri{ padding:clamp(1.4rem,3vh,2rem) clamp(1rem,2vw,1.6rem); border-top:0;border-left:1px solid var(--line) } .abcdt-service-publicite-digitale .ah__ri:first-child{ padding-left:0;border-left:0 } .abcdt-service-publicite-digitale .ah__ri:last-child{ border-bottom:0;padding-right:0 } } /* ═══════════════════════════════════════════════════════════════ 02 · CONVICTION — la phrase, coupée par une bande verticale ═══════════════════════════════════════════════════════════════ */ .abcdt-service-publicite-digitale .ac{ position:relative;isolation:isolate;overflow:hidden; padding:clamp(5rem,14vh,10rem) 0 } /* TRANSITION 1 · le rail du hero est à fleur du bord droit ; la bande de la conviction l'est aussi, et à la même largeur. Ce n'est pas une coïncidence de mise en page : c'est la MÊME arête verticale qui traverse la frontière des deux sections. Les repères, entre les deux, la prolongent d'un filet d'un pixel. */ .abcdt-service-publicite-digitale .ac{ --cutw:clamp(72px,13vw,200px);position:relative } .abcdt-service-publicite-digitale .ah__r{ position:relative } .abcdt-service-publicite-digitale .ah__r::after{ content:'';position:absolute;right:0;top:0;bottom:0;width:1px; background:linear-gradient(to bottom, rgba(232,232,240,.28) 0%, var(--line) 46%, rgba(232,232,240,.2) 100%) } .abcdt-service-publicite-digitale .ac__cut{ position:absolute;z-index:0;margin:0;overflow:hidden; top:0;bottom:0;right:0;width:var(--cutw); box-shadow:inset 1px 0 0 rgba(232,232,240,.14); -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 78%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 78%,transparent 100%) } .abcdt-service-publicite-digitale .ac__poster, .abcdt-service-publicite-digitale .ac__v{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:grayscale(1) contrast(1.15);opacity:.5; transform:translate3d(0,var(--cp,0px),0) scale(1.12) } .abcdt-service-publicite-digitale .ac__v{ opacity:0;transition:opacity 1.4s var(--e) } .abcdt-service-publicite-digitale .ac__v.is-lit{ opacity:.5 } /* La colonne de lecture s'arrête avant la bande, à toutes les largeurs : le texte ne passe jamais sur la matière. La réserve vaut la gouttière plus la largeur de la bande. */ .abcdt-service-publicite-digitale .ac__in{ position:relative;z-index:2; padding-right:calc(var(--gut) + var(--cutw) + clamp(.8rem,2.5vw,2.4rem)) } .abcdt-service-publicite-digitale .ac__h{ margin:0;max-width:19ch; font-family:var(--ff-d);font-weight:700;letter-spacing:-.038em; font-size:clamp(1.9rem,5vw,3.6rem);line-height:1.03;color:var(--text-2);text-wrap:balance } .abcdt-service-publicite-digitale .ac__h em{ font-style:normal;color:var(--text) } .abcdt-service-publicite-digitale .ac__body{ margin-top:clamp(2.4rem,7vh,4rem); display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem } .abcdt-service-publicite-digitale .ac__p{ margin:0;max-width:58ch;color:var(--text-2);font-size:1rem;line-height:1.62 } @media(min-width:900px){ .abcdt-service-publicite-digitale .ac__body{ grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(2rem,4vw,3.5rem) } .abcdt-service-publicite-digitale .ac__p{ max-width:none;font-size:.95rem } } /* ═══════════════════════════════════════════════════════════════ 03 · L'ARBITRAGE — six fenêtres, une largeur constante Sur ≥900 px la bande est une grille horizontale dont les colonnes sont exprimées en fractions : la colonne ouverte vaut 2,6 fr, les autres 1 fr. La somme est invariante — c'est tout le propos. Sous 900 px, plus aucune mécanique : une pile lisible. ═══════════════════════════════════════════════════════════════ */ .abcdt-service-publicite-digitale .ar{ position:relative;padding:clamp(4rem,11vh,8rem) 0 clamp(4rem,10vh,7rem) } .abcdt-service-publicite-digitale .ar__head{ margin-bottom:clamp(2.5rem,7vh,4rem) } .abcdt-service-publicite-digitale .ar__band{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:minmax(0,1fr); border-top:1px solid var(--line) } .abcdt-service-publicite-digitale .ar__col{ position:relative;border-bottom:1px solid var(--line) } .abcdt-service-publicite-digitale .ar__b{ display:block;width:100%;padding:1.2rem var(--gut); background:none;border:0;cursor:pointer;text-align:left; font-family:var(--ff-b);color:var(--text) } .abcdt-service-publicite-digitale .ar__role{ display:block;margin-bottom:.5rem; font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3); transition:color .3s var(--e) } .abcdt-service-publicite-digitale .ar__name{ display:block;font-family:var(--ff-d);font-weight:700;letter-spacing:-.03em; font-size:clamp(1.15rem,3.4vw,1.6rem);line-height:1.05; transition:color .3s var(--e) } .abcdt-service-publicite-digitale .ar__win{ position:relative;margin:0;overflow:hidden;background:var(--ink-2); height:clamp(140px,30vw,220px); box-shadow:inset 0 0 0 1px rgba(232,232,240,.12) } .abcdt-service-publicite-digitale .ar__win img, .abcdt-service-publicite-digitale .ar__win video{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:grayscale(1) contrast(1.08) } .abcdt-service-publicite-digitale .ar__win video{ opacity:0;transition:opacity 1.2s var(--e) } .abcdt-service-publicite-digitale .ar__win video.is-lit{ opacity:1 } .abcdt-service-publicite-digitale .ar__d{ padding:1.2rem var(--gut) 1.8rem } .abcdt-service-publicite-digitale .ar__d p{ margin:0;color:var(--text-2);font-size:.95rem;line-height:1.6;max-width:62ch } .abcdt-service-publicite-digitale .ar__k{ display:flex;flex-wrap:wrap;gap:.4rem .5rem;margin-top:1rem !important; font-size:0 } .abcdt-service-publicite-digitale .ar__k i{ font-style:normal;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase; color:var(--text-3);padding:.3rem .55rem; box-shadow:inset 0 0 0 1px var(--line) } .abcdt-service-publicite-digitale .ar__d .tlink{ margin-top:.7rem } .abcdt-service-publicite-digitale .ar__note{ margin:clamp(1.6rem,4vh,2.4rem) 0 0; font-size:.82rem;color:var(--text-3);max-width:56ch } /* Sous 900 px : aucun dépli, aucune largeur forcée, rien à deviner. Le canal le plus proche du centre du cadre s'éclaire simplement au défilement — sa fenêtre reprend sa pleine densité et son filet s'allume. Tout le texte reste lu, tout le temps. */ @media(max-width:899px){ .abcdt-service-publicite-digitale .ar__win img, .abcdt-service-publicite-digitale .ar__win video{ filter:grayscale(1) contrast(1.08) brightness(.66); transition:filter .7s var(--e) } .abcdt-service-publicite-digitale .ar__col{ box-shadow:inset 2px 0 0 rgba(232,232,240,0);transition:box-shadow .6s var(--e) } .abcdt-service-publicite-digitale .ar__col.is-near .ar__win img, .abcdt-service-publicite-digitale .ar__col.is-near .ar__win video{ filter:grayscale(1) contrast(1.12) brightness(1) } .abcdt-service-publicite-digitale .ar__col.is-near{ box-shadow:inset 2px 0 0 rgba(232,232,240,.3) } } @media(min-width:900px){ .abcdt-service-publicite-digitale .ar__band{ /* Six colonnes, dont une ouverte. La somme des fractions ne varie jamais : 2,6 + 1 + 1 + 1 + 1 + 1. La courbe est une seule sortante, sans dépassement : une lame s'ouvre en poussant les autres, elle ne rebondit pas. */ grid-template-columns:var(--tpl,2.6fr 1fr 1fr 1fr 1fr 1fr); border-top:0;border-left:1px solid var(--line); min-height:clamp(420px,58vh,560px); transition:grid-template-columns .78s cubic-bezier(.22,1,.28,1) } .abcdt-service-publicite-digitale .ar__col{ /* En-tête, puis une fenêtre média de hauteur FIXE, puis le texte. La fenêtre est identique dans les six colonnes : la bande de matière traverse la section d'un seul tenant, et seule la largeur distingue le canal ouvert. */ display:grid;grid-template-rows:auto var(--winh,clamp(150px,26vh,250px)) minmax(0,1fr); border-bottom:0;border-right:1px solid var(--line); min-width:0;overflow:hidden } /* Sans min-width:0, un bouton en cellule de grille refuse de passer sous la largeur de son texte : la lame déborderait. */ .abcdt-service-publicite-digitale .ar__b, .abcdt-service-publicite-digitale .ar__d{ min-width:0 } .abcdt-service-publicite-digitale .ar__b{ padding:1.3rem clamp(.9rem,1.4vw,1.4rem) .9rem } .abcdt-service-publicite-digitale .ar__role{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis } /* Fermée, la lame porte un nom discret ; ouverte, elle le déploie. Deux lignes sont toujours réservées pour que toutes les fenêtres média démarrent à la même hauteur. */ .abcdt-service-publicite-digitale .ar__name{ font-size:clamp(.86rem,1.05vw,1.06rem); /* Réserve exprimée en rem, pas en em : elle ne bouge pas quand le nom grossit à l'ouverture, donc les six fenêtres média démarrent toujours exactement à la même hauteur. */ min-height:2.7rem; transition:color .3s var(--e),font-size .5s var(--e) } .abcdt-service-publicite-digitale .ar__col.is-on .ar__name{ font-size:clamp(1.1rem,1.7vw,1.6rem) } .abcdt-service-publicite-digitale .ar__win{ height:auto;min-height:0;box-shadow:none;border-top:1px solid var(--line) } .abcdt-service-publicite-digitale .ar__d{ padding:1rem clamp(.9rem,1.4vw,1.4rem) 1.4rem; /* Le texte n'existe que dans la colonne ouverte. Ailleurs il est présent dans le DOM mais réduit à zéro. */ display:grid;grid-template-rows:0fr;opacity:0; transition:grid-template-rows .8s cubic-bezier(.19,1,.22,1), opacity .5s var(--e),padding-bottom .8s var(--e); padding-bottom:0 } .abcdt-service-publicite-digitale .ar__d > *{ overflow:hidden;min-height:0 } .abcdt-service-publicite-digitale .ar__col.is-on .ar__d{ grid-template-rows:1fr;opacity:1;padding-bottom:1.4rem } .abcdt-service-publicite-digitale .ar__col.is-on .ar__role{ color:var(--text-2) } .abcdt-service-publicite-digitale .ar__col:hover .ar__name, .abcdt-service-publicite-digitale .ar__b:focus-visible .ar__name{ color:var(--blue-lift) } /* L'ouverture est PHYSIQUE, pas seulement dimensionnelle. Trois choses bougent ensemble sur la même courbe : · le filet de gauche s'allume — l'emplacement est acheté ; · la fenêtre média se rapproche d'un demi-pour-cent ; · les lames voisines s'assombrissent d'un cran de plus. Aucun rebond, aucun ressort. */ .abcdt-service-publicite-digitale .ar__col{ box-shadow:inset 1px 0 0 rgba(232,232,240,0); transition:box-shadow .6s var(--e) } .abcdt-service-publicite-digitale .ar__col.is-on{ box-shadow:inset 1px 0 0 rgba(232,232,240,.34) } .abcdt-service-publicite-digitale .ar__win{ overflow:hidden } .abcdt-service-publicite-digitale .ar__col .ar__win img, .abcdt-service-publicite-digitale .ar__col .ar__win video{ filter:grayscale(1) contrast(1.1) brightness(.52); transform:scale(1); transition:filter .8s var(--e),transform .9s cubic-bezier(.22,1,.28,1) } .abcdt-service-publicite-digitale .ar__col.is-on .ar__win img, .abcdt-service-publicite-digitale .ar__col.is-on .ar__win video{ filter:grayscale(1) contrast(1.14) brightness(1); transform:scale(1.045) } /* Le clavier ouvre exactement comme le pointeur, et se voit. */ .abcdt-service-publicite-digitale .ar__b:focus-visible{ outline:2px solid var(--blue-lift);outline-offset:-4px } } /* ═══════════════════════════════════════════════════════════════ 04 · LA MÉTHODE — lecture calme, un rail de matière ═══════════════════════════════════════════════════════════════ */ /* TRANSITION 2 · la bande d'arbitrage se termine sur un filet vertical à droite. Il ne s'arrête pas avec elle : il descend dans la méthode, en s'éteignant, et vient mourir au niveau du premier temps. La colonne de lecture est à gauche, il ne gêne rien. */ .abcdt-service-publicite-digitale .am{ position:relative;padding:clamp(4.5rem,12vh,9rem) 0 } .abcdt-service-publicite-digitale .am::before{ content:'';position:absolute;z-index:0;pointer-events:none; right:0;top:0;width:1px;height:clamp(160px,26vh,300px); background:linear-gradient(to bottom, rgba(232,232,240,.22), transparent) } .abcdt-service-publicite-digitale .am__head, .abcdt-service-publicite-digitale .am__grid{ position:relative;z-index:1 } .abcdt-service-publicite-digitale .am__head{ margin-bottom:clamp(2.5rem,7vh,4rem) } .abcdt-service-publicite-digitale .am__grid{ display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vh,3rem) } .abcdt-service-publicite-digitale .am__rail{ position:relative;margin:0;overflow:hidden;background:var(--ink-2); height:clamp(180px,34vw,260px); box-shadow:inset 0 0 0 1px rgba(232,232,240,.12) } .abcdt-service-publicite-digitale .am__poster, .abcdt-service-publicite-digitale .am__v{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:grayscale(1) contrast(1.1);opacity:.62; transform:translate3d(0,var(--mp,0px),0) scale(1.14) } .abcdt-service-publicite-digitale .am__v{ opacity:0;transition:opacity 1.4s var(--e) } .abcdt-service-publicite-digitale .am__v.is-lit{ opacity:.62 } .abcdt-service-publicite-digitale .am__l{ list-style:none;margin:0;padding:0;counter-reset:am } .abcdt-service-publicite-digitale .am__i{ counter-increment:am; padding:clamp(1.6rem,4vh,2.4rem) 0;border-top:1px solid var(--line) } .abcdt-service-publicite-digitale .am__i:last-child{ border-bottom:1px solid var(--line) } .abcdt-service-publicite-digitale .am__i::before{ content:counter(am,decimal-leading-zero); display:block;margin-bottom:.9rem; font-family:var(--ff-d);font-size:.72rem;font-weight:600; letter-spacing:.18em;color:var(--text-3) } .abcdt-service-publicite-digitale .am__t{ margin:0 0 .8rem;font-family:var(--ff-d);font-weight:600;letter-spacing:-.025em; font-size:clamp(1.15rem,2.6vw,1.5rem);line-height:1.14;color:var(--text) } .abcdt-service-publicite-digitale .am__p{ margin:0;color:var(--text-2);font-size:.98rem;line-height:1.62;max-width:64ch } .abcdt-service-publicite-digitale .am__k{ display:flex;flex-wrap:wrap;gap:.4rem .5rem;margin:1rem 0 0 } .abcdt-service-publicite-digitale .am__k i{ font-style:normal;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase; color:var(--text-3);padding:.3rem .55rem;box-shadow:inset 0 0 0 1px var(--line) } .abcdt-service-publicite-digitale .am__p .tlink{ margin-top:.6rem } @media(min-width:900px){ .abcdt-service-publicite-digitale .am__grid{ grid-template-columns:minmax(0,.42fr) minmax(0,1fr); column-gap:clamp(2.5rem,6vw,5rem);align-items:start } .abcdt-service-publicite-digitale .am__rail{ position:sticky;top:calc(var(--nav-h) + 2rem); height:clamp(300px,52vh,460px) } } /* ═══════════════════════════════════════════════════════════════ 05 · LA COUPE — la seule scène collante de la page --cut va de 0 à 1. À 0, les douze cadres sont allumés et la grille est large. À 1, il n'en reste qu'un, et la grille s'est resserrée. L'état CSS par défaut est 0 : sans script et sous mouvement réduit, les douze cadres sont visibles et la scène se lit comme une planche contact. Elle est juste dans les deux régimes. ═══════════════════════════════════════════════════════════════ */ .abcdt-service-publicite-digitale .cp{ position:relative;background:var(--ink) } .abcdt-service-publicite-digitale .cp__track{ position:relative } .abcdt-service-publicite-digitale .cp__pin{ position:relative;isolation:isolate;overflow:hidden; min-height:100svh;display:flex;align-items:flex-end; padding:clamp(4rem,10vh,7rem) 0 clamp(3rem,8vh,5rem) } .abcdt-service-publicite-digitale .cp__grid{ position:absolute;inset:0;z-index:0; display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:minmax(0,1fr);gap:2px; padding:clamp(1rem,3vw,2.5rem); /* La grille se resserre à mesure que les cadres s'éteignent : le budget se concentre. Courbe quadratique — le resserrement se fait surtout à la fin, quand il ne reste presque plus rien à arbitrer. */ transform:scale(calc(1 - .095 * var(--cut,0) * var(--cut,0))); transform-origin:center; transition:transform .5s linear } /* QUATRE TEMPS, pas une extinction. --k · le seuil propre au cadre, tiré de son rang --d (dispersé dans le HTML : les verdicts tombent dans le désordre). --d0 · sa distance au seuil. Positif : il vit encore. --vd · le VERDICT. Il vaut 0 tant que le cadre est loin de son seuil, et monte à 1 juste avant. Combiné à l'opacité qui descend, il produit un dernier éclat court — le moment où l'on regarde le résultat — puis le cadre s'efface. 1 · tester — les douze sont là, on les laisse tourner. 2 · observer — chacun monte d'un cran de lumière à son tour. 3 · couper — il s'efface, sur une fenêtre assez large pour qu'on voie la coupe se faire et non un clignotement. 4 · amplifier— le survivant grandit et prend toute la lumière. Aucun flash : le pic de luminance est plafonné à +0,5 et il ne dure que le temps de la disparition du cadre. */ .abcdt-service-publicite-digitale .cp__c{ position:relative;margin:0;overflow:hidden;background:var(--ink-2); box-shadow:inset 0 0 0 1px rgba(232,232,240,.1); --k:calc((var(--d) + 1) / 13); --d0:calc(var(--k) - var(--cut,0)); --vd:clamp(0, calc(1 - var(--d0) * 8), 1); opacity:clamp(0, calc(var(--d0) * 5.2), 1); filter:grayscale(1) contrast(calc(1.1 + .1 * var(--vd))) brightness(calc(.88 + .5 * var(--vd))); transition:opacity .4s linear,filter .4s linear } .abcdt-service-publicite-digitale .cp__c img, .abcdt-service-publicite-digitale .cp__c video{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover } /* Le survivant ne s'éteint jamais. À mesure que les autres tombent, il monte en luminance jusqu'à traverser le fondu : à la fin de la scène, c'est la seule chose vivante à l'écran. C'est le créatif qu'on scale. */ .abcdt-service-publicite-digitale .cp__c--keep{ --amp:clamp(0, calc((var(--cut,0) - .68) / .32), 1); opacity:1;z-index:1; box-shadow:inset 0 0 0 1px rgba(232,232,240,calc(.12 + .42 * var(--cut,0))); /* AMPLIFIER : le survivant grandit dans les derniers trente pour cent du parcours, quand tout le reste est éteint. C'est le budget qui se reporte sur lui. */ transform:scale(calc(1 + .075 * var(--amp))); filter:none; transition:transform .6s var(--e),box-shadow .4s linear } .abcdt-service-publicite-digitale .cp__c--keep img, .abcdt-service-publicite-digitale .cp__c--keep video{ filter:grayscale(1) contrast(calc(1.14 + .1 * var(--amp))) brightness(calc(1 + .95 * var(--cut,0))) } .abcdt-service-publicite-digitale .cp__c--keep video{ opacity:0;transition:opacity 1.2s var(--e) } .abcdt-service-publicite-digitale .cp__c--keep video.is-lit{ opacity:1 } .abcdt-service-publicite-digitale .cp .tex{ z-index:2 } /* La planche contact est lisible en haut, le texte se pose sur du noir en bas. Sans ce fondu, la typographie se battrait avec la matière — et sur cette page la matière est très claire. */ .abcdt-service-publicite-digitale .cp__pin::after{ content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(to bottom, rgba(6,6,10,.42) 0%, rgba(6,6,10,.08) 18%, rgba(6,6,10,.5) 44%, rgba(6,6,10,.84) 70%, rgba(6,6,10,.96) 90%, var(--ink) 100%) } .abcdt-service-publicite-digitale .cp__copy{ position:relative;z-index:3;width:100% } /* Le surtitre tombe dans la zone médiane du fondu, encore claire : il lui faut un cran de contraste de plus qu'ailleurs sur le site. */ .abcdt-service-publicite-digitale .cp .eyebrow{ color:var(--text-2) } .abcdt-service-publicite-digitale .cp__h{ margin:.6rem 0 0;max-width:18ch; font-family:var(--ff-d);font-weight:800;letter-spacing:-.045em; font-size:clamp(1.9rem,6vw,4.2rem);line-height:.94;color:var(--text) } /* Cinq lignes courtes plutôt que quatre longues : chacune tient d'un seul tenant, la phrase se lit comme un carton de fin. */ .abcdt-service-publicite-digitale .cp__h span{ display:block } /* padding-block seul : .wrap porte déjà les gouttières, les écraser collerait le texte au bord de la fenêtre. */ .abcdt-service-publicite-digitale .cp__after{ padding-block:clamp(3rem,8vh,5rem) clamp(4rem,10vh,7rem) } .abcdt-service-publicite-digitale .cp__p{ margin:0;max-width:60ch;color:var(--text-2);font-size:1rem;line-height:1.62 } @media(min-width:700px){ .abcdt-service-publicite-digitale .cp__grid{ grid-template-columns:repeat(4,minmax(0,1fr)) } } @media(min-width:900px){ .abcdt-service-publicite-digitale.abc-motion .cp__track{ height:200svh } .abcdt-service-publicite-digitale.abc-motion .cp__pin{ position:sticky;top:0;height:100svh;min-height:0 } } /* ═══════════════════════════════════════════════════════════════ 06 · LES ERREURS — vis-à-vis, séparés par un filet dur ═══════════════════════════════════════════════════════════════ */ /* TRANSITION 3 · le cadre survivant de la coupe est le dernier objet à l'écran, et son arête est verticale. Le refend qui sépare le problème de la réponse, dans la section suivante, reprend cette arête : elle descend depuis le haut de la section, allumée, et s'éteint en arrivant sur le premier vis-à-vis. Ce qui a survécu au tri devient la ligne de partage. */ .abcdt-service-publicite-digitale .er{ position:relative;padding:clamp(4.5rem,12vh,9rem) 0 } .abcdt-service-publicite-digitale .er::before{ content:'';position:absolute;z-index:0;pointer-events:none; left:50%;top:0;width:1px;height:clamp(150px,24vh,280px); background:linear-gradient(to bottom, rgba(232,232,240,.26), transparent); display:none } @media(min-width:900px){ .abcdt-service-publicite-digitale .er::before{ display:block } } .abcdt-service-publicite-digitale .er__head, .abcdt-service-publicite-digitale .er__l{ position:relative;z-index:1 } .abcdt-service-publicite-digitale .er__head{ margin-bottom:clamp(2.5rem,7vh,4rem) } /* .wrap porte déjà les gouttières : on ne remet pas padding:0, sinon la liste vient se coller au bord de la fenêtre. */ .abcdt-service-publicite-digitale .er__l{ list-style:none;margin:0 auto } .abcdt-service-publicite-digitale .er__i{ display:grid;grid-template-columns:minmax(0,1fr); border-top:1px solid var(--line) } .abcdt-service-publicite-digitale .er__i:last-child{ border-bottom:1px solid var(--line) } .abcdt-service-publicite-digitale .er__pb, .abcdt-service-publicite-digitale .er__an{ position:relative;padding:clamp(1.6rem,4vh,2.4rem) 0 } .abcdt-service-publicite-digitale .er__an{ padding-top:0 } .abcdt-service-publicite-digitale .er__mat{ position:absolute;inset:auto 0 0 0;height:1px;background:var(--line); pointer-events:none } .abcdt-service-publicite-digitale .er__lab{ margin:0 0 .8rem;font-size:.62rem;letter-spacing:.2em; text-transform:uppercase;color:var(--text-3) } .abcdt-service-publicite-digitale .er__lab--on{ color:var(--text-2) } .abcdt-service-publicite-digitale .er__t{ margin:0 0 .8rem;font-family:var(--ff-d);font-weight:600;letter-spacing:-.025em; font-size:clamp(1.05rem,2.3vw,1.32rem);line-height:1.16;color:var(--text-3) } .abcdt-service-publicite-digitale .er__t--on{ color:var(--text) } .abcdt-service-publicite-digitale .er__p{ margin:0;color:var(--text-2);font-size:.95rem;line-height:1.6;max-width:52ch } .abcdt-service-publicite-digitale .er__pb .er__p{ color:var(--text-3) } @media(min-width:900px){ .abcdt-service-publicite-digitale .er__i{ grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:0 } .abcdt-service-publicite-digitale .er__pb{ padding-right:clamp(2rem,4vw,3.5rem) } .abcdt-service-publicite-digitale .er__an{ padding:clamp(1.6rem,4vh,2.4rem) 0 clamp(1.6rem,4vh,2.4rem) clamp(2rem,4vw,3.5rem); border-left:1px solid var(--line-2) } /* La matière n'apparaît que du côté de la réponse : une lueur rasante, jamais une image. C'est le seul dégradé de la page. */ .abcdt-service-publicite-digitale .er__mat{ inset:0 auto 0 0;width:100%;height:auto; background:linear-gradient(90deg, rgba(232,232,240,.05) 0%, transparent 42%) } } /* ═══════════════════════════════════════════════════════════════ 07 · L'AUDIT — une affirmation tenue par la matière ═══════════════════════════════════════════════════════════════ */ .abcdt-service-publicite-digitale .au{ position:relative;isolation:isolate; padding:clamp(5rem,14vh,10rem) 0 } /* La matière n'est pas une nappe de fond : c'est une FENÊTRE, posée en réserve à droite, avec la même arête d'un pixel que le rail du hero et que les lames de l'arbitrage. C'est la correction issue de la revue croisée : ce bloc et l'audit de la page Tracking disaient la même chose de la même façon — un plan plein cadre derrière une phrase. Ici la page retrouve sa grammaire, là-bas le plan reste plein cadre et c'est le révélateur qui le travaille. Les deux ne se ressemblent plus. */ .abcdt-service-publicite-digitale .au__media{ position:absolute;z-index:0;overflow:hidden; top:clamp(2rem,6vh,4rem);bottom:clamp(2rem,6vh,4rem); right:0;width:min(46vw,620px); box-shadow:inset 0 0 0 1px rgba(232,232,240,.16) } .abcdt-service-publicite-digitale .au__poster, .abcdt-service-publicite-digitale .au__v{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:50% 18%; filter:grayscale(1) contrast(1.2);opacity:.42; transform:scale(1.1) translate3d(0,var(--ap,0px),0) } .abcdt-service-publicite-digitale .au__v{ opacity:0;transition:opacity 1.4s var(--e) } .abcdt-service-publicite-digitale .au__v.is-lit{ opacity:.42 } /* Le voile ne sert plus qu'à empêcher la fenêtre de crier : elle est dense, mais elle reste un fond. */ .abcdt-service-publicite-digitale .au__veil{ position:absolute;inset:0; background:linear-gradient(96deg, rgba(6,6,10,.82) 0%, rgba(6,6,10,.3) 46%, rgba(6,6,10,.12) 100%) } .abcdt-service-publicite-digitale .au .tex{ z-index:1 } .abcdt-service-publicite-digitale .au__in{ position:relative;z-index:2 } @media(min-width:900px){ /* La colonne de lecture s'arrête avant la fenêtre. */ .abcdt-service-publicite-digitale .au__in{ padding-right:calc(min(46vw,620px) + clamp(1.5rem,3vw,3rem)) } } @media(max-width:899px){ /* Sous 900, la fenêtre passe derrière le texte, en réserve basse. */ .abcdt-service-publicite-digitale .au__media{ top:auto;height:46%;width:100%;bottom:0;box-shadow:none } .abcdt-service-publicite-digitale .au__veil{ background:linear-gradient(to bottom, var(--ink) 0%, rgba(6,6,10,.72) 44%, rgba(6,6,10,.6) 100%) } } .abcdt-service-publicite-digitale .au__h{ margin:0;max-width:20ch; font-family:var(--ff-d);font-weight:700;letter-spacing:-.04em; font-size:clamp(1.8rem,4.8vw,3.4rem);line-height:1.04;color:var(--text);text-wrap:balance } .abcdt-service-publicite-digitale .au__p{ margin:clamp(1.4rem,3.5vh,2rem) 0 0;max-width:58ch; color:var(--text-2);font-size:1rem;line-height:1.62 } /* ═══════════════════════════════════════════════════════════════ 08 · CE QUE ÇA PRODUIT — résolution, plus de matière ═══════════════════════════════════════════════════════════════ */ .abcdt-service-publicite-digitale .pr__cols{ margin-top:clamp(2.4rem,6vh,3.4rem); display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem } .abcdt-service-publicite-digitale .pr__p{ margin:0;color:var(--text-2);font-size:1rem;line-height:1.62;max-width:58ch } .abcdt-service-publicite-digitale .pr__l{ list-style:none;margin:clamp(2.4rem,6vh,3.6rem) 0 0;padding:0; display:grid;grid-template-columns:minmax(0,1fr) } .abcdt-service-publicite-digitale .pr__li{ padding:1.3rem 0;border-top:1px solid var(--line) } .abcdt-service-publicite-digitale .pr__li:last-child{ border-bottom:1px solid var(--line) } .abcdt-service-publicite-digitale .pr__li h3{ margin:0 0 .5rem;font-family:var(--ff-d);font-weight:600;letter-spacing:-.02em; font-size:clamp(1rem,2.2vw,1.14rem);color:var(--text) } .abcdt-service-publicite-digitale .pr__li p{ margin:0;font-size:.92rem;line-height:1.58;color:var(--text-3);max-width:40ch } @media(min-width:900px){ .abcdt-service-publicite-digitale .pr__cols{ grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(2rem,4vw,3.5rem) } .abcdt-service-publicite-digitale .pr__p{ max-width:none;font-size:.95rem } .abcdt-service-publicite-digitale .pr__l{ grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line) } .abcdt-service-publicite-digitale .pr__li{ padding:clamp(1.4rem,3vh,2rem) clamp(1rem,2vw,1.6rem); border-top:0;border-left:1px solid var(--line) } .abcdt-service-publicite-digitale .pr__li:first-child{ padding-left:0;border-left:0 } .abcdt-service-publicite-digitale .pr__li:last-child{ border-bottom:0;padding-right:0 } } /* ═══════════════════════════════════════════════════════════════ 09 · AUTOUR DE LA PUBLICITÉ — maillage interne Structure alignée sur « Autour du SEO » (section .sx de la page Référencement naturel) pour que la fusion des deux primitives soit mécanique. Classe distincte tant que la primitive n'est pas partagée. ═══════════════════════════════════════════════════════════════ */ .abcdt-service-publicite-digitale .rx{ position:relative;padding:clamp(4rem,10vh,7rem) 0;border-top:1px solid var(--line) } .abcdt-service-publicite-digitale .rx__head{ margin-bottom:clamp(2rem,5vh,3rem) } .abcdt-service-publicite-digitale .rx__h{ margin:0;max-width:22ch; font-family:var(--ff-d);font-weight:700;letter-spacing:-.03em; font-size:clamp(1.5rem,3.6vw,2.4rem);line-height:1.08;color:var(--text) } .abcdt-service-publicite-digitale .rx__l{ list-style:none;margin:0 auto } .abcdt-service-publicite-digitale .rx__l li{ border-top:1px solid var(--line) } .abcdt-service-publicite-digitale .rx__l li:last-child{ border-bottom:1px solid var(--line) } .abcdt-service-publicite-digitale .rx__l a{ display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline; gap:.3rem 1.2rem;padding:.9rem 0;text-decoration:none } .abcdt-service-publicite-digitale .rx__l a b{ font-family:var(--ff-d);font-weight:600;letter-spacing:-.02em; font-size:clamp(1rem,2.4vw,1.15rem);color:var(--text);transition:color .25s var(--e) } .abcdt-service-publicite-digitale .rx__l a span{ grid-column:1/-1;font-size:.84rem;color:var(--text-3);transition:color .25s var(--e) } .abcdt-service-publicite-digitale .rx__l a::after{ content:'→';grid-row:1;grid-column:2;color:var(--text-3); transition:transform .3s var(--e),color .25s var(--e) } .abcdt-service-publicite-digitale .rx__l a:hover b, .abcdt-service-publicite-digitale .rx__l a:focus-visible b{ color:var(--blue-lift) } .abcdt-service-publicite-digitale .rx__l a:hover span, .abcdt-service-publicite-digitale .rx__l a:focus-visible span{ color:var(--text-2) } .abcdt-service-publicite-digitale .rx__l a:hover::after, .abcdt-service-publicite-digitale .rx__l a:focus-visible::after{ transform:translateX(5px);color:var(--blue-lift) } @media(min-width:900px){ .abcdt-service-publicite-digitale .rx__l a{ grid-template-columns:minmax(0,18rem) minmax(0,1fr) auto } .abcdt-service-publicite-digitale .rx__l a span{ grid-column:2;grid-row:1 } .abcdt-service-publicite-digitale .rx__l a::after{ grid-column:3 } } /* ═══════════════════════════════════════════════════════════════ RÉVÉLATIONS COMMUNES — même convention que les autres pages. ═══════════════════════════════════════════════════════════════ */ .abcdt-service-publicite-digitale.abc-motion [data-rv]{ opacity:0;transform:translate3d(0,1.4rem,0) } .abcdt-service-publicite-digitale.abc-motion [data-rv].is-in{ opacity:1;transform:none; transition:opacity .85s var(--e),transform .95s var(--e) } .abcdt-service-publicite-digitale.abc-motion .am__i, .abcdt-service-publicite-digitale.abc-motion .er__i{ opacity:0;transform:translate3d(0,2rem,0) } .abcdt-service-publicite-digitale.abc-motion .am__i.is-in, .abcdt-service-publicite-digitale.abc-motion .er__i.is-in{ opacity:1;transform:none; transition:opacity .9s var(--e),transform 1s var(--e) } .abcdt-service-publicite-digitale.abc-motion .cp__h span{ opacity:0;transform:translate3d(0,.5em,0) } .abcdt-service-publicite-digitale.abc-motion .cp__pin.is-in .cp__h span{ opacity:1;transform:none;transition:opacity .8s var(--e),transform .9s var(--e) } .abcdt-service-publicite-digitale.abc-motion .cp__pin.is-in .cp__h span:nth-child(2){ transition-delay:.09s } .abcdt-service-publicite-digitale.abc-motion .cp__pin.is-in .cp__h span:nth-child(3){ transition-delay:.18s } .abcdt-service-publicite-digitale.abc-motion .cp__pin.is-in .cp__h span:nth-child(4){ transition-delay:.27s } .abcdt-service-publicite-digitale.abc-motion .cp__pin.is-in .cp__h span:nth-child(5){ transition-delay:.36s } /* ═══════════════════════════════════════════════════════════════ MOUVEMENT RÉDUIT Aucune vidéo, aucune transition, aucune scène collante. Les états par défaut du CSS étant déjà les états aboutis, il suffit de couper le mouvement : rien n'est à rétablir. ═══════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce){ .abcdt-service-publicite-digitale .ah__v, .abcdt-service-publicite-digitale .ah__slot video, .abcdt-service-publicite-digitale .ac__v, .abcdt-service-publicite-digitale .ar__v, .abcdt-service-publicite-digitale .am__v, .abcdt-service-publicite-digitale .cp__v, .abcdt-service-publicite-digitale .au__v{ display:none } /* La pression du plafond est un geste de défilement : sans mouvement elle n'a pas lieu d'être. Les filets de transition, eux, restent — ce sont des objets, pas des animations. */ .abcdt-service-publicite-digitale .ah__press{ display:none } .abcdt-service-publicite-digitale .ah__h span, .abcdt-service-publicite-digitale .ar__col, .abcdt-service-publicite-digitale .ar__win img, .abcdt-service-publicite-digitale .ar__win video, .abcdt-service-publicite-digitale .cp__c, .abcdt-service-publicite-digitale .cp__c--keep{ transition:none } .abcdt-service-publicite-digitale .ah__h span{ transform:none;letter-spacing:-.05em } .abcdt-service-publicite-digitale .ah__slot, .abcdt-service-publicite-digitale .ac__poster, .abcdt-service-publicite-digitale .ac__v, .abcdt-service-publicite-digitale .ar__band, .abcdt-service-publicite-digitale .ar__d, .abcdt-service-publicite-digitale .cp__grid, .abcdt-service-publicite-digitale .cp__c, .abcdt-service-publicite-digitale .rx__l a, .abcdt-service-publicite-digitale .rx__l a b, .abcdt-service-publicite-digitale .rx__l a span, .abcdt-service-publicite-digitale .rx__l a::after{ transition:none } .abcdt-service-publicite-digitale .ah__poster, .abcdt-service-publicite-digitale .ac__poster, .abcdt-service-publicite-digitale .am__poster, .abcdt-service-publicite-digitale .au__poster{ transform:none } .abcdt-service-publicite-digitale .ah__slot{ clip-path:none } .abcdt-service-publicite-digitale .cp__grid{ transform:none } .abcdt-service-publicite-digitale .am__rail{ position:static } } .abcdt-service-publicite-digitale .end{ position:relative;isolation:isolate;overflow:hidden; padding:clamp(6rem,17vh,12rem) 0 clamp(5rem,13vh,8rem); background:var(--ink) } .abcdt-service-publicite-digitale .end__media{ position:absolute;inset:0;z-index:0 } .abcdt-service-publicite-digitale .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-service-publicite-digitale .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-service-publicite-digitale .end .tex{ z-index:1 } .abcdt-service-publicite-digitale .end__in{ position:relative;z-index:2 } .abcdt-service-publicite-digitale .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-service-publicite-digitale .end__grid{ display:grid;grid-template-columns:minmax(0,1fr); gap:clamp(2.5rem,7vh,4rem);margin-top:clamp(2.5rem,7vh,4rem) } .abcdt-service-publicite-digitale .end__p{ margin:0 0 1.2rem;max-width:52ch;color:var(--text-2); font-size:1rem;line-height:1.62 } .abcdt-service-publicite-digitale .end__p:last-child{ margin-bottom:0 } .abcdt-service-publicite-digitale .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-service-publicite-digitale .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-service-publicite-digitale .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-service-publicite-digitale .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-service-publicite-digitale .end__h{ font-size:clamp(2.4rem,4.4vw,4rem) } .abcdt-service-publicite-digitale .end__act{ padding-top:.4rem } } @media (prefers-reduced-motion: reduce){ .abcdt-service-publicite-digitale .end__v, .abcdt-service-publicite-digitale .end__cta{ transition:none } .abcdt-service-publicite-digitale .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-service-publicite-digitale, body.has-tube .abcdt-service-publicite-digitale a, body.has-tube .abcdt-service-publicite-digitale button, body.has-tube .abcdt-service-publicite-digitale summary, body.has-tube .abcdt-service-publicite-digitale input, body.has-tube .abcdt-service-publicite-digitale textarea, body.has-tube .abcdt-service-publicite-digitale select, body.has-tube .abcdt-service-publicite-digitale label, body.has-tube .abcdt-service-publicite-digitale [role="button"]{cursor:none}