/* ═══════════════════════════════════════════════════════════════════════ 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-referencement-naturel. 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-referencement-naturel{ 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-referencement-naturel *, .abcdt-service-referencement-naturel *::before, .abcdt-service-referencement-naturel *::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-referencement-naturel h1,.abcdt-service-referencement-naturel h2,.abcdt-service-referencement-naturel h3,.abcdt-service-referencement-naturel h4,.abcdt-service-referencement-naturel h5,.abcdt-service-referencement-naturel h6, .abcdt-service-referencement-naturel p,.abcdt-service-referencement-naturel ul,.abcdt-service-referencement-naturel ol,.abcdt-service-referencement-naturel dl,.abcdt-service-referencement-naturel figure,.abcdt-service-referencement-naturel blockquote{ color:inherit;font-family:inherit;letter-spacing:inherit;text-transform:none } .abcdt-service-referencement-naturel img,.abcdt-service-referencement-naturel video,.abcdt-service-referencement-naturel canvas{ display:block;max-width:100% } .abcdt-service-referencement-naturel a{ color:inherit } .abcdt-service-referencement-naturel button,.abcdt-service-referencement-naturel input,.abcdt-service-referencement-naturel select,.abcdt-service-referencement-naturel textarea{ font-family:inherit;font-size:inherit;font-weight:inherit; font-style:inherit;line-height:normal;color:inherit;letter-spacing:inherit } .abcdt-service-referencement-naturel ::selection{ background:var(--blue);color:var(--on-blue) } .abcdt-service-referencement-naturel :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-referencement-naturel{ --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-referencement-naturel{ --gut:2.5rem } } @media(min-width:1200px){ .abcdt-service-referencement-naturel{ --gut:4rem } } .abcdt-service-referencement-naturel *, .abcdt-service-referencement-naturel *::before, .abcdt-service-referencement-naturel *::after{box-sizing:border-box} @media(prefers-reduced-motion:reduce){} .abcdt-service-referencement-naturel a{color:inherit} .abcdt-service-referencement-naturel .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)} .abcdt-service-referencement-naturel .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-referencement-naturel .skip:focus-visible{transform:translateY(0)} /* ── Typographie commune ───────────────────────────────────────── */ .abcdt-service-referencement-naturel .eyebrow{ margin:0 0 1.5rem;font-size:.7rem;font-weight:500;letter-spacing:.22em; text-transform:uppercase;color:var(--text-3) } .abcdt-service-referencement-naturel .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-referencement-naturel .h2--lg{font-size:clamp(2.1rem,5.4vw,4rem);max-width:20ch} .abcdt-service-referencement-naturel .h2--xl{font-size:clamp(2.3rem,6.6vw,5rem);max-width:14ch;font-weight:800} .abcdt-service-referencement-naturel .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-referencement-naturel .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-referencement-naturel .tlink::after{content:'→';transition:transform .3s var(--e)} .abcdt-service-referencement-naturel .tlink:hover{color:var(--blue-lift);border-bottom-color:var(--blue)} .abcdt-service-referencement-naturel .tlink:hover::after{transform:translateX(5px)} .abcdt-service-referencement-naturel .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-referencement-naturel .tlink--min{ border-bottom:0;padding:0;font-size:.92rem;color:var(--text-3);letter-spacing:.01em } .abcdt-service-referencement-naturel .tlink--min::after{font-size:.9em} .abcdt-service-referencement-naturel .tlink--min:hover{color:var(--text)} .abcdt-service-referencement-naturel .sec{position:relative;padding:clamp(5rem,13vh,9.5rem) 0} .abcdt-service-referencement-naturel .sec--quiet{padding:clamp(4rem,10vh,7rem) 0} .abcdt-service-referencement-naturel .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-referencement-naturel .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-referencement-naturel .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 « Référencement naturel » Reconstruite depuis la planche de direction validée. L'ancienne implémentation n'est pas reprise : ni son architecture visuelle, ni ses plateaux, ni son film de fond. DEUX RÈGLES QUI STRUCTURENT TOUT LE FICHIER ─────────────────────────────────────────── 1. Chaque scène est pilotée par UNE variable, --p, de 0 à 1, et sa valeur PAR DÉFAUT est celle de l'affiche validée. Sans script et sous mouvement réduit, la page est donc déjà juste : il n'existe pas d'état « avant animation » qu'il faudrait réparer. 2. Un seul var() par produit dans un calc(). Multiplier deux var() par une unité rend la déclaration invalide après substitution et la propriété retombe silencieusement sur son initiale. ALTERNANCE : spectacle → lecture → spectacle → lecture. Les scènes signature portent peu de texte (250–650 caractères, comme les pages validées) ; le contenu long vit dans les zones de lecture. Écrit en mobile d'abord. Le palier desktop est à 900 px. ═══════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════ PRIMITIVES DE LECTURE Le vocabulaire commun des zones éditoriales. Elles sont calmes, noires et très structurées — jamais une grille de cartes. ══════════════════════════════════════════════════════════════════ */ /* Les eyebrows à filet : la classe partagée .eyebrow ne met en forme que le texte. On ne la modifie pas globalement — le filet n'existe que sur les deux scènes qui le portent. */ .abcdt-service-referencement-naturel .eyebrow:has(i){ display:flex;align-items:center;gap:1rem } .abcdt-service-referencement-naturel .eyebrow i{ display:block;width:56px;height:1px;background:var(--line-2);flex:none } .abcdt-service-referencement-naturel .rd{ max-width:var(--maxw);margin-inline:auto;padding:4.5rem var(--gut) } .abcdt-service-referencement-naturel .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-service-referencement-naturel .rd__h2{ margin:0 0 2rem;font-family:var(--ff-d);font-weight:700; letter-spacing:-.03em;line-height:1.1;font-size:clamp(1.35rem,4.6vw,2rem);color:#fff } .abcdt-service-referencement-naturel .rd__lead{ margin:1.6rem 0 0;max-width:62ch;color:var(--text-2); font-size:1.05rem;line-height:1.62 } .abcdt-service-referencement-naturel .rd__lead b{ color:#fff;font-weight:500 } .abcdt-service-referencement-naturel .rd__col{ max-width:66ch } .abcdt-service-referencement-naturel .rd__p{ margin:0 0 1.4rem;color:var(--text-2);font-size:1rem;line-height:1.72 } .abcdt-service-referencement-naturel .rd__p:last-child{ margin-bottom:0 } .abcdt-service-referencement-naturel .rd__p b, .abcdt-service-referencement-naturel .rd__lead b{ color:#fff;font-weight:500 } /* ══════════════════════════════════════════════════════════════════ 01 · HERO — la matière occupe le viewport, le noir porte le texte GRAMMAIRE RELEVÉE SUR LES QUATRE HEROES VALIDÉS, et appliquée ici : · le noir domine ; la matière est une PRÉSENCE, pas un mur · le H1 est très grand et vit EN BAS À GAUCHE, jamais en haut · eyebrow / H1 / chapô / CTA forment UN SEUL bloc dense · l'asymétrie vient d'un OBJET média décalé dans la moitié droite · le chapô est court et se lit d'un coup Le principe plein écran ne change pas : ce qui change, c'est la répartition du noir et la place du texte. NETTETÉ : le master est en 1280×720 — c'est la résolution du rush, on ne peut pas en inventer. Il est donc encodé à sa taille native et à haut débit, et le CSS n'ajoute AUCUN agrandissement au repos. ══════════════════════════════════════════════════════════════════ */ .abcdt-service-referencement-naturel .sh{ --p:0; position:relative;min-height:100svh;background:var(--ink);overflow:hidden; display:flex;flex-direction:column;isolation:isolate } .abcdt-service-referencement-naturel .sh__stage{ position:absolute;inset:0;z-index:0;overflow:hidden } /* LA MATIÈRE. Vectorielle : nette par construction à 1366, 1440, 1920, DPR 2 comme DPR 3. Aucun raster plein écran, donc aucun agrandissement possible nulle part. xMaxYMid slice ancre le bord DROIT : la masse reste visible quel que soit le format, y compris en portrait, où le cadre rogne à gauche — c'est-à-dire là où le texte vit et où la composition est noire. */ .abcdt-service-referencement-naturel .sh__art{ position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0; /* La dérive passe par des transform, jamais par le filtre : le navigateur rastérise feTurbulence une fois et le réutilise. */ transform:scale(calc(1 + var(--p,0) * .025)) translate3d(calc(var(--p,0) * -1.4%),0,0); transform-origin:74% 44% } /* Chaque plan dérive à sa vitesse : la profondeur vient de là. */ .abcdt-service-referencement-naturel .sh__l1{ transform:translate3d(calc(var(--drift,0) * 7px), calc(var(--drift,0) * -3px), 0) } .abcdt-service-referencement-naturel .sh__l2{ transform:translate3d(calc(var(--drift,0) * -12px), calc(var(--drift,0) * 6px), 0) } .abcdt-service-referencement-naturel .sh__l3{ transform:translate3d(calc(var(--drift,0) * 17px), calc(var(--drift,0) * -8px), 0) } .abcdt-service-referencement-naturel .sh__l4{ transform:translate3d(calc(var(--drift,0) * -20px), calc(var(--drift,0) * 9px), 0) } .abcdt-service-referencement-naturel .sh__l5{ transform:translate3d(calc(var(--drift,0) * 11px), calc(var(--drift,0) * -5px), 0) } @property --drift{ syntax:''; inherits:true; initial-value:0 } @keyframes abcdtseo_abcdtseoDrift{ 0%{ --drift:0 } 50%{ --drift:1 } 100%{ --drift:0 } } .abcdt-service-referencement-naturel.abc-motion .sh__art{ animation:abcdtseo_abcdtseoDrift 38s ease-in-out infinite } /* Le voile : il sculpte le noir autour de la matière et donne un sol au texte. Il n'a rien à masquer — la matière est nette. */ .abcdt-service-referencement-naturel .sh__veil{ position:absolute;inset:0;z-index:2;pointer-events:none; background: linear-gradient(0deg, #06060A 0%, #06060A 26%, rgba(6,6,10,.88) 46%, rgba(6,6,10,.42) 66%, rgba(6,6,10,.05) 86%, transparent 96%), linear-gradient(96deg, rgba(6,6,10,.94) 0%, rgba(6,6,10,.66) 26%, rgba(6,6,10,.22) 50%, transparent 72%), linear-gradient(180deg, rgba(6,6,10,.72) 0%, rgba(6,6,10,.18) 14%, transparent 28%) } /* LA MATIÈRE RÉELLE DU SITE, à sa résolution naturelle et JAMAIS au-delà. Le crop source fait 840×472 px ; la fenêtre est plafonnée à 340 px CSS, soit 680 px device à DPR 2 — ratio 0,81. À DPR 3 sur mobile la fenêtre tombe à 150 px, soit 450 px device : 0,54. */ .abcdt-service-referencement-naturel .sh__obj{ position:absolute;z-index:1;overflow:hidden; --objS:.28125; /* 180 / 640 */ right:5%;top:9%;width:180px;height:101px; border:1px solid rgba(232,232,240,.16);background:#08080c; box-shadow:0 2rem 5rem rgba(0,0,0,.5); transform:translate3d(0,calc(var(--p,0) * -5vh),0); opacity:calc(.9 - var(--p,0) * .5) } .abcdt-service-referencement-naturel .sh__obj img{ /* PARITÉ EXACTE EN PIXELS DEVICE. L'image est posée à 640×360 puis réduite de moitié : 640 pixels source atterrissent sur 320 px CSS, soit 640 px device à DPR 2. Ratio réel = 1,00, mesuré, pas supposé. Une première version utilisait object-fit:none dans une fenêtre de 320 px : elle n'affichait que 320 pixels source sur 640 device, soit ×2,00. J'avais annoncé du sous-échantillonnage — c'était faux. */ position:absolute;top:0;left:0; width:640px;height:360px;max-width:none; /* none, pas cover : la boîte de 640x360 DÉCOUPE une région de l'image rendue à sa taille naturelle. Avec cover, les deux boîtes ayant le même rapport 16:9, rien n'était recadré et on revoyait le plan entier en réduction — donc presque noir. */ object-fit:none;object-position:93% 90%; transform:scale(var(--objS,.5));transform-origin:0 0; filter:grayscale(1) contrast(1.34) brightness(1.06) } .abcdt-service-referencement-naturel .sh__lo{ position:relative;z-index:4;margin-top:auto; padding:0 var(--gut) 3.2rem;max-width:52ch } .abcdt-service-referencement-naturel .sh__eb{ margin:0 0 1rem } .abcdt-service-referencement-naturel .sh__h{ margin:0;font-family:var(--ff-d);font-weight:800; letter-spacing:-.052em;line-height:.92;color:#fff; /* « acquisition » occupe 7,82 px de largeur par pixel de corps. Pour tenir dans la gouttière il faut au plus (100% - 2×1,5rem)/7,82, soit environ 11 vw. À 11,6 vw le mot était coupé à 430 et à 375. */ font-size:clamp(2rem,11vw,3rem) } .abcdt-service-referencement-naturel .sh__h1, .abcdt-service-referencement-naturel .sh__h2{ display:block } .abcdt-service-referencement-naturel .sh__h2{ color:rgba(255,255,255,calc(.94 - var(--p,0) * .2)) } .abcdt-service-referencement-naturel .sh__lede{ margin:1.6rem 0 0;max-width:40ch;color:var(--text-2); font-size:.95rem;line-height:1.6 } .abcdt-service-referencement-naturel .sh__act{ margin:1.8rem 0 0;display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap } .abcdt-service-referencement-naturel .sh__act2{ font-size:.88rem;color:var(--text-3);text-decoration:none } .abcdt-service-referencement-naturel .sh__act2:hover{ color:var(--text) } /* Les quatre dimensions : une ligne discrète, pas un tableau de pied. */ .abcdt-service-referencement-naturel .sh__rail{ margin:2.2rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem; padding-top:1rem;border-top:1px solid rgba(232,232,240,.14) } .abcdt-service-referencement-naturel .sh__rail span{ font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3) } /* ══════════════════════════════════════════════════════════════════ 02 · CONVICTION — la matière convertit la phrase Les deux phrases occupent EXACTEMENT la même place optique. Une bande de matière descend ; au-dessus de son bord la première n'est plus, au-dessous la seconde est déjà là. Ce n'est pas un fondu enchaîné : c'est une substitution opérée par la matière. --y, le bord de la bande, est la seule chose qui bouge. ══════════════════════════════════════════════════════════════════ */ .abcdt-service-referencement-naturel .cv{ --p:1;position:relative;background:#06060A } .abcdt-service-referencement-naturel .cv__stage{ position:relative;min-height:100svh;overflow:hidden;isolation:isolate; display:flex;align-items:center } .abcdt-service-referencement-naturel .cv__bg{ position:absolute;inset:0;z-index:0 } .abcdt-service-referencement-naturel .cv__bg video{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:grayscale(1) contrast(1.45) brightness(.6); transform:scale(calc(1.06 - var(--p,1) * .06)) } .abcdt-service-referencement-naturel .cv__bg::after{ content:'';position:absolute;inset:0; background:radial-gradient(120% 90% at 20% 50%, transparent 0%, rgba(6,6,10,.55) 52%, rgba(6,6,10,.9) 100%) } .abcdt-service-referencement-naturel .cv__in{ position:relative;z-index:2;padding:0 var(--gut);width:100% } .abcdt-service-referencement-naturel .cv__eb{ margin:0 0 2.2rem } .abcdt-service-referencement-naturel .cv__h{ position:relative;margin:0;isolation:isolate; font-family:var(--ff-d);font-weight:800;letter-spacing:-.05em;line-height:.98; font-size:clamp(1.9rem,8.4vw,2.4rem) } /* Les deux masses partagent la même origine. La première est mangée par le haut, la seconde est écrite par le haut. */ .abcdt-service-referencement-naturel .cv__a, .abcdt-service-referencement-naturel .cv__b{ display:block;max-width:15ch } .abcdt-service-referencement-naturel .cv__a{ color:#fff;clip-path:inset(calc(var(--y,100%)) 0 0 0) } .abcdt-service-referencement-naturel .cv__b{ position:absolute;left:0;top:0;color:#fff; clip-path:inset(0 0 calc(100% - var(--y,100%)) 0) } .abcdt-service-referencement-naturel .cv__t{ display:block;margin-top:1.4rem;max-width:32ch; font-family:var(--ff-b);font-weight:400;font-size:.9rem;letter-spacing:0; line-height:1.55;color:var(--text-2); opacity:calc((var(--p,1) - .72) * 3.6) } /* La bande : elle AJOUTE de la lumière sur les lettres. Son bord bas est exactement --y : c'est lui qui opère la conversion. */ .abcdt-service-referencement-naturel .cv__band{ position:absolute;z-index:3;left:-40vw;right:-40vw; top:calc(var(--y,100%) - 2.2em);height:2.6em;overflow:hidden; mix-blend-mode:screen;pointer-events:none; opacity:calc(.1 + var(--bandO,0) * .68); -webkit-mask-image:linear-gradient(0deg,#000 0%,#000 42%,rgba(0,0,0,.35) 78%,transparent); mask-image:linear-gradient(0deg,#000 0%,#000 42%,rgba(0,0,0,.35) 78%,transparent) } .abcdt-service-referencement-naturel .cv__band img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; /* En mode écran sur une fumée déjà claire, un brightness > 1 brûle et donne un aplat blanc. On garde la texture : c'est elle qui rend le passage crédible. */ filter:grayscale(1) contrast(1.85) brightness(.9); transform:scale(1.18) translate3d(calc(var(--p,1) * -6%),0,0) } .abcdt-service-referencement-naturel .cv__rd{ padding-top:4.5rem } /* ══════════════════════════════════════════════════════════════════ 03 · CE QUE NOUS COUVRONS — une matière, trois transformations L'ancien traitement (masse + contre-forme + note + rail) est supprimé : c'était trois objets côte à côte. Ici il n'y a qu'une composition. Trois poids — --wT, --wC, --wA — sont trois cloches qui se recouvrent, calculées dans le pilote. À aucun instant un seul n'est à 1 et les autres à 0 : la composition se RECONFIGURE, elle ne change pas de carte. TECHNIQUE la trame apparaît, la matière se cadre CONTENU la surface se rapproche et se densifie AUTORITÉ une masse profonde prend le champ Les trois mots occupent la MÊME place optique, à trois profondeurs. ══════════════════════════════════════════════════════════════════ */ .abcdt-service-referencement-naturel .pi{ --p:1;--wT:0;--wC:0;--wA:1; position:relative;background:#08080c } .abcdt-service-referencement-naturel .pi__stage{ position:relative;min-height:100svh;overflow:hidden;isolation:isolate; display:flex;flex-direction:column;justify-content:flex-end; padding:0 var(--gut) 3.4rem } /* La matière. Elle se rapproche quand le contenu prend le poids. */ .abcdt-service-referencement-naturel .pi__media{ position:absolute;z-index:0;inset:0 } .abcdt-service-referencement-naturel .pi__media video{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:calc(50% - var(--wA,0) * 18%) 46%; filter:grayscale(1) contrast(1.34) brightness(calc(.3 + var(--wC,0) * .16)); transform:scale(calc(1 + var(--wC,0) * .1 + var(--wA,0) * .04)) } .abcdt-service-referencement-naturel .pi__media::after{ content:'';position:absolute;inset:0; background: linear-gradient(0deg, #08080c 0%, rgba(8,8,12,.96) 30%, rgba(8,8,12,.62) 56%, rgba(8,8,12,.2) 80%, transparent 94%), linear-gradient(96deg, rgba(8,8,12,.92) 0%, rgba(8,8,12,.5) 34%, rgba(8,8,12,.12) 64%, transparent 84%) } /* TECHNIQUE — la trame. Elle CADRE la matière au lieu de la décorer. */ .abcdt-service-referencement-naturel .pi__grid{ position:absolute;z-index:1;inset:7% 5% 30% 5%;pointer-events:none; opacity:var(--wT,0); background: repeating-linear-gradient(90deg, rgba(232,232,240,.2) 0 1px, transparent 1px calc(100% / 6)), repeating-linear-gradient(0deg, rgba(232,232,240,.13) 0 1px, transparent 1px calc(100% / 4)); transform:scale(calc(.94 + var(--wT,0) * .06)) } .abcdt-service-referencement-naturel .pi__grid::after{ content:'';position:absolute;inset:0;border:1px solid rgba(232,232,240,.32) } /* CONTENU — la surface. Plus près, en lumière ajoutée. */ .abcdt-service-referencement-naturel .pi__surf{ position:absolute;z-index:2;inset:-6% -4% 22% 28%;overflow:hidden; mix-blend-mode:screen;opacity:calc(var(--wC,0) * .78); -webkit-mask-image:radial-gradient(80% 70% at 50% 50%, #000 30%, transparent 100%); mask-image:radial-gradient(80% 70% at 50% 50%, #000 30%, transparent 100%) } .abcdt-service-referencement-naturel .pi__surf img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:grayscale(1) contrast(1.1) brightness(.9); transform:scale(calc(1.5 - var(--wC,0) * .34)) } /* AUTORITÉ — la masse. Elle vient du fond et prend le champ. */ .abcdt-service-referencement-naturel .pi__mass{ position:absolute;z-index:1;right:-8%;top:6%;width:58%;height:74%; background:radial-gradient(58% 58% at 46% 44%, rgba(232,232,240,.2) 0%, rgba(232,232,240,.07) 44%, transparent 74%); opacity:var(--wA,0); transform:translate3d(calc((1 - var(--wA,0)) * 12vw),0,0) scale(calc(.8 + var(--wA,0) * .3)) } .abcdt-service-referencement-naturel .pi__eb{ position:relative;z-index:5;margin:0 0 1rem } .abcdt-service-referencement-naturel .pi__h{ position:relative;z-index:5;margin:0 0 auto;max-width:16ch; font-family:var(--ff-d);font-weight:800;letter-spacing:-.04em;line-height:1.02; font-size:clamp(1.7rem,7vw,2.2rem);color:#fff; order:-1;padding-top:5.2rem } /* Les trois mots, à la même place, à trois profondeurs. */ .abcdt-service-referencement-naturel .pi__w{ position:relative;z-index:5;margin:0;height:.92em; font-family:var(--ff-d);font-weight:800;letter-spacing:-.055em;line-height:.92; font-size:clamp(2.6rem,13vw,3.6rem) } .abcdt-service-referencement-naturel .pi__w b{ position:absolute;left:0;bottom:0;white-space:nowrap;font-weight:800; transform-origin:0 100% } .abcdt-service-referencement-naturel .pi__w1{ color:rgba(255,255,255,calc(.02 + var(--eT,0) * .98)); transform:scale(calc(.9 + var(--eT,0) * .1)); filter:blur(calc((1 - var(--eT,0)) * 9px)) } .abcdt-service-referencement-naturel .pi__w2{ color:rgba(255,255,255,calc(.02 + var(--eC,0) * .98)); transform:scale(calc(.9 + var(--eC,0) * .1)); filter:blur(calc((1 - var(--eC,0)) * 9px)) } .abcdt-service-referencement-naturel .pi__w3{ color:rgba(255,255,255,calc(.02 + var(--eA,0) * .98)); transform:scale(calc(.9 + var(--eA,0) * .1)); filter:blur(calc((1 - var(--eA,0)) * 9px)) } /* Une seule ligne de sens, au même endroit, jamais trois. */ .abcdt-service-referencement-naturel .pi__say{ position:relative;z-index:5;margin:1.4rem 0 0;height:3.4em;max-width:34ch; color:var(--text-2);font-size:.94rem;line-height:1.55 } .abcdt-service-referencement-naturel .pi__say span{ position:absolute;left:0;top:0 } .abcdt-service-referencement-naturel .pi__s1{ opacity:var(--eT,0) } .abcdt-service-referencement-naturel .pi__s2{ opacity:var(--eC,0) } .abcdt-service-referencement-naturel .pi__s3{ opacity:var(--eA,0) } /* ══════════════════════════════════════════════════════════════════ LES TROIS PILIERS EN ENTIER — composition éditoriale continue Un filet vertical unique traverse les trois sujets : c'est LA même composition, pas trois objets. Ce qui change, c'est la géométrie — la mesure du texte, la forme de la liste, l'échelle. TECHNIQUE resserré, architectural : items en trame fine 2 col. CONTENU ouvert, large : items en flux continu sur une ligne AUTORITÉ dense, profond : items empilés, corps plus fort Les numéros restent, mais dans la gouttière et en très petit : ils situent, ils ne structurent pas. ══════════════════════════════════════════════════════════════════ */ .abcdt-service-referencement-naturel .pk{ position:relative;max-width:var(--maxw);margin-inline:auto; padding:4.5rem var(--gut) 5.5rem } /* Le filet continu : c'est lui qui fait l'unité de la composition. */ .abcdt-service-referencement-naturel .pk::before{ content:'';position:absolute;left:var(--gut);top:4.5rem;bottom:5.5rem;width:1px; background:linear-gradient(180deg, transparent, var(--line-2) 8%, var(--line-2) 92%, transparent) } .abcdt-service-referencement-naturel .pk__i{ position:relative;padding:0 0 3.4rem 1.6rem } .abcdt-service-referencement-naturel .pk__i:last-child{ padding-bottom:0 } .abcdt-service-referencement-naturel .pk__n{ margin:0 0 .5rem;font-family:var(--ff-d);font-weight:700;font-size:.6rem; letter-spacing:.16em;color:var(--text-3);font-variant-numeric:tabular-nums } .abcdt-service-referencement-naturel .pk__h{ margin:0;font-family:var(--ff-d);font-weight:700;letter-spacing:-.03em; line-height:1.02;color:#fff } .abcdt-service-referencement-naturel .pk__p{ margin:.9rem 0 0;color:var(--text-2);line-height:1.68 } .abcdt-service-referencement-naturel .pk__l{ list-style:none;margin:1.4rem 0 0;padding:0 } .abcdt-service-referencement-naturel .pk__l li{ color:var(--text-3) } /* ── TECHNIQUE : architectural. Mesure courte, trame fine. ─────── */ .abcdt-service-referencement-naturel .pk__i--t .pk__h{ font-size:clamp(1.15rem,4.4vw,1.4rem) } .abcdt-service-referencement-naturel .pk__i--t .pk__p{ max-width:46ch;font-size:.94rem } .abcdt-service-referencement-naturel .pk__i--t .pk__l{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem 1.4rem } .abcdt-service-referencement-naturel .pk__i--t .pk__l li{ font-size:.68rem;letter-spacing:.1em;text-transform:uppercase; padding-top:.5rem;border-top:1px solid rgba(232,232,240,.14) } /* ── CONTENU : ouvert. Mesure large, items en flux. ────────────── */ .abcdt-service-referencement-naturel .pk__i--c .pk__h{ font-size:clamp(1.3rem,5vw,1.7rem) } .abcdt-service-referencement-naturel .pk__i--c .pk__p{ max-width:62ch;font-size:1rem } .abcdt-service-referencement-naturel .pk__i--c .pk__l{ display:flex;flex-wrap:wrap;gap:.5rem 0 } .abcdt-service-referencement-naturel .pk__i--c .pk__l li{ font-size:.86rem;line-height:1.5 } .abcdt-service-referencement-naturel .pk__i--c .pk__l li::after{ content:'·';margin:0 .7rem;color:rgba(232,232,240,.32) } .abcdt-service-referencement-naturel .pk__i--c .pk__l li:last-child::after{ content:'' } /* ── AUTORITÉ : dense, profond. Items empilés, corps plus fort. ── */ .abcdt-service-referencement-naturel .pk__i--a .pk__h{ font-size:clamp(1.5rem,6vw,2.1rem) } .abcdt-service-referencement-naturel .pk__i--a .pk__p{ max-width:52ch;font-size:.98rem } .abcdt-service-referencement-naturel .pk__i--a .pk__l{ display:grid;gap:.1rem } .abcdt-service-referencement-naturel .pk__i--a .pk__l li{ font-family:var(--ff-d);font-weight:600;letter-spacing:-.02em; font-size:clamp(.95rem,3.8vw,1.15rem);color:rgba(232,232,240,.62);line-height:1.32 } /* ══════════════════════════════════════════════════════════════════ 04 · SEARCH → GEO — on TRAVERSE la recherche Ce n'est plus quatre blocs observés de loin. C'est un espace à quatre profondeurs réelles, avec occlusion et flou optique : z0 le corpus documentaire — la caméra entre dedans, son flou tombe à mesure qu'on s'en approche z1 deux surfaces LOINTAINES, floues, coupées par le cadre z2 GOOGLE, très proche : il déborde largement, on n'en voit que quelques lettres — c'est une architecture, pas un mot centré z5 deux surfaces PROCHES, nettes, qui passent DEVANT GOOGLE Réf. 17875 Scroll Image Tunnel (on entre dans la matière), 18439 Horizontal Depth Fade (le flou dit la distance), 5967 Zoom Parallax (chaque plan avance à sa vitesse). Au passage GEO la perspective se retourne : les surfaces pivotent pour faire face, le corpus recule, tout converge. Puis presque rien. ══════════════════════════════════════════════════════════════════ */ .abcdt-service-referencement-naturel .ge{ --p:.32;position:relative;background:#05050A } .abcdt-service-referencement-naturel .ge__track{ position:relative;height:520vh } .abcdt-service-referencement-naturel .ge__stage{ position:sticky;top:0;height:100svh;overflow:hidden;background:#05050A; perspective:1400px;perspective-origin:50% 46%;isolation:isolate } /* Le corpus. On y entre : l'échelle monte, le flou tombe, puis il recule au moment GEO. */ .abcdt-service-referencement-naturel .ge__far{ position:absolute;z-index:0;inset:-14%;overflow:hidden } .abcdt-service-referencement-naturel .ge__far video{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:grayscale(1) contrast(1.5) brightness(.5) blur(calc(var(--farBlur,10) * 1px)); transform:scale(var(--farS,1.1)); opacity:var(--farO,.5) } .abcdt-service-referencement-naturel .ge__far::after{ content:'';position:absolute;inset:0; background:radial-gradient(140% 110% at 50% 46%, transparent 0%, rgba(5,5,10,.4) 56%, rgba(5,5,10,.92) 100%) } .abcdt-service-referencement-naturel .ge__side{ position:absolute;z-index:6;margin:0;display:flex;flex-wrap:wrap;gap:1rem; left:var(--gut);right:var(--gut);bottom:6.5rem; opacity:calc(1 - var(--sOut,0) * .7) } .abcdt-service-referencement-naturel .ge__side span{ font-size:.52rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(232,232,240,.32) } .abcdt-service-referencement-naturel .ge__side--r{ display:none } /* GOOGLE : une architecture. Il est calé sur la ligne d'horizon de la scène et déborde des deux côtés dès qu'on s'en approche. */ .abcdt-service-referencement-naturel .ge__big{ position:absolute;z-index:2;left:50%;top:46%;margin:0;white-space:nowrap; font-family:var(--ff-d);font-weight:800;letter-spacing:-.07em;line-height:.8; font-size:16vw;color:rgba(255,255,255,.94); transform:translate3d(calc(-50% + var(--gX,0) * 1vw), -50%, 0) scale(var(--gS,.5)); opacity:var(--gOp,1) } .abcdt-service-referencement-naturel .ge__q{ position:absolute;z-index:7;left:0;right:0;top:24%;text-align:center;padding:0 1rem } .abcdt-service-referencement-naturel .ge__q1{ margin:0;font-family:var(--ff-d);font-weight:600;letter-spacing:-.015em; font-size:1rem;color:rgba(232,232,240,.62); transform:translate3d(0,calc(var(--sQ,0) * -6vh),0); opacity:var(--q1Op,1) } .abcdt-service-referencement-naturel .ge__type{ display:inline-block;position:relative; clip-path:inset(0 calc((1 - var(--type,1)) * 100%) 0 0) } .abcdt-service-referencement-naturel .ge__type::after{ content:'';position:absolute;top:.1em;bottom:.1em;width:1px; left:calc(var(--type,1) * 100%);background:#fff;opacity:var(--caret,0) } .abcdt-service-referencement-naturel .ge__q2{ position:absolute;left:0;right:0;top:0;margin:0;padding:0 1rem; font-family:var(--ff-d);font-weight:600;letter-spacing:-.015em; font-size:1rem;color:#fff; opacity:var(--sQ2,0); transform:translate3d(0,calc((1 - var(--sQ2,0)) * 1.4rem),0) } /* Les surfaces. Le flou et l'échelle disent la distance ; le pivot dit le changement d'espace au passage GEO. */ .abcdt-service-referencement-naturel .ge__s{ position:absolute;padding:1rem 1.1rem; background:rgba(8,8,13,.9);border:1px solid rgba(232,232,240,.16); box-shadow:0 2rem 5rem rgba(0,0,0,.72); opacity:var(--o,1); filter:blur(calc(var(--bl,0) * 1px)); transform:translate3d(var(--tx,0),var(--ty,0),0) rotateY(var(--ry,0deg)) rotate(var(--rot,0deg)) scale(var(--sc,1)) } .abcdt-service-referencement-naturel .ge__s b{ display:block;font-family:var(--ff-d);font-weight:700;letter-spacing:-.02em; color:#fff;margin-bottom:.45rem } .abcdt-service-referencement-naturel .ge__s em{ font-style:normal;display:block;color:var(--text-3);line-height:1.5 } /* Proches — devant GOOGLE. */ .abcdt-service-referencement-naturel .ge__s--a{ z-index:5;--rot:-1.4deg;left:4%;top:9%;width:200px } .abcdt-service-referencement-naturel .ge__s--a b{ font-size:1rem } .abcdt-service-referencement-naturel .ge__s--a em{ font-size:.78rem } .abcdt-service-referencement-naturel .ge__s--c{ z-index:5;--rot:-.8deg;right:4%;bottom:22%;width:190px } .abcdt-service-referencement-naturel .ge__s--c b{ font-size:.92rem } .abcdt-service-referencement-naturel .ge__s--c em{ font-size:.75rem } /* Lointaines — derrière GOOGLE, coupées par le cadre. */ .abcdt-service-referencement-naturel .ge__s--b{ z-index:1;--rot:1deg;right:-4%;top:16%;width:150px } .abcdt-service-referencement-naturel .ge__s--b b{ font-size:.8rem } .abcdt-service-referencement-naturel .ge__s--b em{ font-size:.68rem } .abcdt-service-referencement-naturel .ge__s--d{ z-index:1;--rot:1.6deg;left:-5%;bottom:12%;width:150px } .abcdt-service-referencement-naturel .ge__s--d b{ font-size:.78rem } .abcdt-service-referencement-naturel .ge__s--d em{ font-size:.66rem } /* ── LES MOTEURS CONVERSATIONNELS ──────────────────────────────── Après GOOGLE, l'architecture recule et les moteurs prennent le champ. Ce n'est pas une rangée de logos : ce sont cinq objets à cinq profondeurs. Aucun n'a la même taille, la même opacité ni le même z-index, et deux d'entre eux passent devant les surfaces éditoriales pendant que trois restent derrière. Les fichiers sont les SVG OFFICIELS, non modifiés. Le passage en monochrome se fait par filtre CSS — la géométrie n'est jamais retouchée. */ .abcdt-service-referencement-naturel .ai{ position:absolute;inset:0;pointer-events:none;z-index:3 } .abcdt-service-referencement-naturel .ai__o{ position:absolute;display:block; opacity:calc(var(--aiIn,0) * var(--ao,1)); filter:blur(calc(var(--ab,0) * 1px)); transform:translate3d(calc(var(--aiIn,0) * var(--ax,0) * 1vw - var(--ax,0) * 1vw), calc(var(--aiIn,0) * var(--ay,0) * 1vh - var(--ay,0) * 1vh), 0) scale(calc(.86 + var(--aiIn,0) * .14)) } .abcdt-service-referencement-naturel .ai__o img{ display:block;width:100%;height:auto; /* Le SVG officiel est laissé intact ; seul son rendu est mis en monochrome. brightness(0) puis invert(1) donne un blanc pur sans toucher au tracé. */ filter:brightness(0) invert(1) } /* ChatGPT : la masse. Il sort du cadre à gauche, devant les surfaces. */ .abcdt-service-referencement-naturel .ai__o--gpt{ --ao:.92;--ab:0;--ax:-7;--ay:2;z-index:6;left:-14%;top:16%;width:52% } /* Perplexity : il traverse un plan, à mi-profondeur. */ .abcdt-service-referencement-naturel .ai__o--per{ --ao:.86;--ab:0;--ax:5;--ay:-3;z-index:5;right:4%;bottom:26%;width:26% } /* Gemini : plus profond, plus flou, plus petit. */ .abcdt-service-referencement-naturel .ai__o--gem{ --ao:.5;--ab:2.4;--ax:-4;--ay:-4;z-index:1;right:8%;top:14%;width:20% } /* Claude : une autre profondeur encore, bas-gauche. */ .abcdt-service-referencement-naturel .ai__o--ant{ --ao:.44;--ab:1.6;--ax:3;--ay:4;z-index:2;left:6%;bottom:14%;width:24% } /* Copilot : le plus loin. */ .abcdt-service-referencement-naturel .ai__o--cop{ --ao:.32;--ab:3.2;--ax:-3;--ay:3;z-index:1;left:38%;top:8%;width:13% } .abcdt-service-referencement-naturel .ge__cue, .abcdt-service-referencement-naturel .ge__syn{ position:absolute;z-index:7;left:0;right:0;margin:0;text-align:center;pointer-events:none } .abcdt-service-referencement-naturel .ge__cue{ bottom:2.6rem;font-size:.56rem;letter-spacing:.24em;text-transform:uppercase; color:rgba(232,232,240,.42);opacity:var(--sCue,1) } .abcdt-service-referencement-naturel .ge__syn{ top:44%;font-family:var(--ff-d);font-weight:800;letter-spacing:-.045em;line-height:1; font-size:1.7rem;padding:0 1.6rem;color:#fff; opacity:var(--sSyn,0);transform:translate3d(0,calc((1 - var(--sSyn,0)) * 2rem),0) } /* ── LES MOTEURS CONCERNÉS — séquence éditoriale ──────────────── Les logos ont déjà servi de masses dans la scène GEO. Ici ils reviennent en SIGNATURES : petits, à des échelles et des retraits différents. Chaque moteur = une marque, une phrase, une fonction. Aucune boîte, beaucoup de vide, une descente asymétrique. */ .abcdt-service-referencement-naturel .eg{ max-width:var(--maxw);margin-inline:auto;padding:0 var(--gut) 4.5rem } .abcdt-service-referencement-naturel .eg__h{ margin:0 0 3rem;font-family:var(--ff-d);font-weight:700;letter-spacing:-.03em; font-size:clamp(1.35rem,4.6vw,2rem);color:#fff } .abcdt-service-referencement-naturel .eg__l{ list-style:none;margin:0;padding:0;display:grid;gap:2.6rem } .abcdt-service-referencement-naturel .eg__i{ position:relative;padding-top:1.4rem;border-top:1px solid var(--line) } .abcdt-service-referencement-naturel .eg__m{ margin:0 0 .7rem;display:flex;align-items:center;gap:.9rem;flex-wrap:wrap } .abcdt-service-referencement-naturel .eg__m img{ display:block;height:1.05em;width:auto;max-width:9rem; filter:brightness(0) invert(1);opacity:.9 } .abcdt-service-referencement-naturel .eg__m b{ font-family:var(--ff-d);font-weight:800;letter-spacing:-.035em;line-height:1; color:#fff;font-size:1.3rem } .abcdt-service-referencement-naturel .eg__m b span{ font-weight:400;letter-spacing:-.01em;color:var(--text-3);font-size:.62em } .abcdt-service-referencement-naturel .eg__d{ margin:0;color:var(--text-2);font-size:.94rem;line-height:1.66;max-width:56ch } .abcdt-service-referencement-naturel .eg__f{ margin:.8rem 0 0;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase; color:var(--text-3) } /* ── CE QUE CHANGE LE GEO — un rapport spatial ────────────────── À gauche des DESTINATIONS éparses, à droite une RÉPONSE qui se recompose. Ce n'est pas un tableau comparatif : les deux côtés n'ont ni la même forme, ni la même densité, ni le même poids. */ .abcdt-service-referencement-naturel .ch{ --p:1;max-width:var(--maxw);margin-inline:auto;padding:0 var(--gut) 5rem } .abcdt-service-referencement-naturel .ch__h{ margin:0 0 2.6rem;font-family:var(--ff-d);font-weight:700;letter-spacing:-.03em; font-size:clamp(1.35rem,4.6vw,2rem);color:#fff } .abcdt-service-referencement-naturel .ch__x{ display:grid;gap:3rem;margin-bottom:3.4rem } .abcdt-service-referencement-naturel .ch__lab{ margin:0 0 .8rem;font-family:var(--ff-d);font-weight:800;letter-spacing:.08em; font-size:.8rem } .abcdt-service-referencement-naturel .ch__a .ch__lab{ color:var(--text-3) } .abcdt-service-referencement-naturel .ch__b .ch__lab{ color:#fff } .abcdt-service-referencement-naturel .ch__say{ margin:0;font-family:var(--ff-d);font-weight:700;letter-spacing:-.03em;line-height:1.14; font-size:clamp(1.15rem,4.8vw,1.5rem) } .abcdt-service-referencement-naturel .ch__a .ch__say{ color:var(--text-2);max-width:16ch } .abcdt-service-referencement-naturel .ch__b .ch__say{ color:#fff;max-width:20ch } /* Les destinations : des fragments épars, de tailles inégales. */ .abcdt-service-referencement-naturel .ch__frag{ display:block;margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.5rem } .abcdt-service-referencement-naturel .ch__frag i{ display:block;height:2px;background:rgba(232,232,240,.3); transform:translate3d(0,calc(var(--p,1) * 0px),0) } .abcdt-service-referencement-naturel .ch__frag i:nth-child(1){ width:3.2rem } .abcdt-service-referencement-naturel .ch__frag i:nth-child(2){ width:1.4rem } .abcdt-service-referencement-naturel .ch__frag i:nth-child(3){ width:4.6rem } .abcdt-service-referencement-naturel .ch__frag i:nth-child(4){ width:2.1rem } .abcdt-service-referencement-naturel .ch__frag i:nth-child(5){ width:5.4rem } .abcdt-service-referencement-naturel .ch__frag i:nth-child(6){ width:1.1rem } /* La réponse : les mêmes fragments, mais assemblés en un seul bloc. */ .abcdt-service-referencement-naturel .ch__ans{ display:block;margin-top:1.6rem;display:grid;gap:.4rem;max-width:18rem } .abcdt-service-referencement-naturel .ch__ans i{ display:block;height:2px;background:rgba(232,232,240,.75) } .abcdt-service-referencement-naturel .ch__ans i:nth-child(1){ width:100% } .abcdt-service-referencement-naturel .ch__ans i:nth-child(2){ width:100% } .abcdt-service-referencement-naturel .ch__ans i:nth-child(3){ width:88% } .abcdt-service-referencement-naturel .ch__ans i:nth-child(4){ width:46% } .abcdt-service-referencement-naturel .ch__body{ max-width:66ch } /* ── CE QUI REND UNE RÉPONSE POSSIBLE — un seul système ───────── Une ligne centrale, quatre conditions qui viennent s'y rattacher à quatre profondeurs. Ni cartes, ni blocs numérotés. */ .abcdt-service-referencement-naturel .lv{ position:relative;max-width:var(--maxw);margin-inline:auto;padding:0 var(--gut) 5.5rem } .abcdt-service-referencement-naturel .lv__t{ margin:0 0 2.6rem;font-family:var(--ff-d);font-weight:700;letter-spacing:-.03em; font-size:clamp(1.35rem,4.6vw,2rem);color:#fff } .abcdt-service-referencement-naturel .lv__l{ position:relative;list-style:none;margin:0;padding:0 0 0 1.6rem } .abcdt-service-referencement-naturel .lv__l::before{ content:'';position:absolute;left:0;top:.6rem;bottom:.6rem;width:1px; background:linear-gradient(180deg,transparent,var(--line-2) 6%,var(--line-2) 94%,transparent) } .abcdt-service-referencement-naturel .lv__i{ position:relative;padding:0 0 2.2rem } .abcdt-service-referencement-naturel .lv__i:last-child{ padding-bottom:0 } /* L'attache : un trait qui relie la condition à la ligne centrale. */ .abcdt-service-referencement-naturel .lv__i::before{ content:'';position:absolute;left:-1.6rem;top:.72rem;height:1px; background:var(--line-2) } .abcdt-service-referencement-naturel .lv__i:nth-child(1)::before{ width:1.6rem } .abcdt-service-referencement-naturel .lv__i:nth-child(2)::before{ width:1.1rem } .abcdt-service-referencement-naturel .lv__i:nth-child(3)::before{ width:1.6rem } .abcdt-service-referencement-naturel .lv__i:nth-child(4)::before{ width:.8rem } .abcdt-service-referencement-naturel .lv__h{ margin:0;font-family:var(--ff-d);font-weight:700;letter-spacing:-.025em;color:#fff } .abcdt-service-referencement-naturel .lv__i:nth-child(1) .lv__h{ font-size:1.2rem } .abcdt-service-referencement-naturel .lv__i:nth-child(2) .lv__h{ font-size:1.08rem;color:rgba(255,255,255,.88) } .abcdt-service-referencement-naturel .lv__i:nth-child(3) .lv__h{ font-size:1.14rem } .abcdt-service-referencement-naturel .lv__i:nth-child(4) .lv__h{ font-size:1rem;color:rgba(255,255,255,.8) } .abcdt-service-referencement-naturel .lv__p{ margin:.7rem 0 0;color:var(--text-2);font-size:.94rem;line-height:1.68;max-width:60ch } /* ══════════════════════════════════════════════════════════════════ 05 · MÉTHODE — une matière qui passe du chaos au pilotage Réf. 19204 Scroll Choreography : quatre surfaces dispersées se choréographient puis se résolvent en une seule. Ce ne sont pas quatre étapes illustrées. C'est UNE matière vue par quatre fenêtres, et ce sont les fenêtres qui changent d'état : --p 0 dispersées, tournées, floues CHAOS --p .38 elles trouvent leur axe STRUCTURE --p .70 elles se rapprochent et se recouvrent DENSITÉ --p 1 une seule densité nette PILOTAGE Aucun 01/02/03/04, aucune timeline, aucune carte : les libellés des étapes sont CHAOS / STRUCTURE / DENSITÉ / PILOTAGE, qui disent l'état de la matière au moment où on les lit. ══════════════════════════════════════════════════════════════════ */ .abcdt-service-referencement-naturel .me{ --p:1;position:relative;background:var(--ink);overflow:hidden } /* UNE SEULE MATIÈRE, un seul cadrage à la fois. Les quatre fenêtres empilées sont supprimées : superposées, floutées et mobiles, elles rendaient la section illisible. Ce qui change maintenant, c'est le CADRAGE d'un unique plan — et rien d'autre. Aucun flou au repos : l'élément principal est toujours net. */ .abcdt-service-referencement-naturel .mv{ --mx:50%;--my:50%;--ms:1; position:relative;height:44svh;overflow:hidden;isolation:isolate;background:#08080c } .abcdt-service-referencement-naturel .mv__v{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:var(--mx) var(--my); filter:grayscale(1) contrast(1.34) brightness(.78); transform:scale(var(--ms)); transition:object-position 1s var(--e), transform 1s var(--e) } .abcdt-service-referencement-naturel .mv__veil{ position:absolute;inset:0; background: linear-gradient(0deg, #08080c 0%, rgba(8,8,12,.6) 34%, transparent 72%), linear-gradient(180deg, rgba(8,8,12,.7) 0%, transparent 34%) } /* ── INTERACTION : survol et FOCUS CLAVIER ────────────────────── Survoler ou tabuler sur une étape RECADRE la matière — un seul plan, un seul cadrage à la fois. La lecture ne dépend jamais de l'interaction : les quatre étapes sont toutes lisibles au repos, dans une hiérarchie claire. Aucune carte : la cible est la ligne de texte, la matière n'est jamais cliquable. */ .abcdt-service-referencement-naturel .me.is-act-0 .mv{ --mx:24%;--my:38%;--ms:1.12 } /* audit — vue large */ .abcdt-service-referencement-naturel .me.is-act-1 .mv{ --mx:58%;--my:44%;--ms:1.26 } /* stratégie — plus serré */ .abcdt-service-referencement-naturel .me.is-act-2 .mv{ --mx:44%;--my:62%;--ms:1.04 } /* production — ouverte */ .abcdt-service-referencement-naturel .me.is-act-3 .mv{ --mx:70%;--my:50%;--ms:1.16 } /* pilotage — stabilisée */ .abcdt-service-referencement-naturel .me__i{ position:relative;transition:opacity .5s var(--e) } .abcdt-service-referencement-naturel .me.is-act .me__i{ opacity:.62 } .abcdt-service-referencement-naturel .me.is-act .me__i.is-on{ opacity:1 } .abcdt-service-referencement-naturel .me__i.is-on .me__h{ color:#fff } .abcdt-service-referencement-naturel .me__i.is-on .me__n{ color:var(--text-2) } .abcdt-service-referencement-naturel .me__i::before{ content:'';position:absolute;left:0;top:-1px;height:1px;width:100%; background:rgba(232,232,240,.55);transform:scaleX(0);transform-origin:0 50%; transition:transform .6s var(--e) } .abcdt-service-referencement-naturel .me__i.is-on::before{ transform:scaleX(1) } .abcdt-service-referencement-naturel .me__t{ display:block;width:100%;text-align:left;background:none;border:0;padding:0; color:inherit;font:inherit;cursor:pointer } .abcdt-service-referencement-naturel .me__t:focus-visible{ outline:2px solid var(--blue-lift);outline-offset:.6rem } .abcdt-service-referencement-naturel .me__l{ list-style:none;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) } .abcdt-service-referencement-naturel .me__i{ padding:2.4rem 0;border-top:1px solid var(--line) } /* Le libellé d'état, pas un numéro. */ .abcdt-service-referencement-naturel .me__n{ margin:0 0 .8rem;font-family:var(--ff-b);font-weight:500;font-size:.6rem; letter-spacing:.26em;text-transform:uppercase;color:var(--text-3) } .abcdt-service-referencement-naturel .me__h{ margin:0;font-family:var(--ff-d);font-weight:700;letter-spacing:-.025em; font-size:clamp(1.2rem,4.4vw,1.55rem);color:#fff } .abcdt-service-referencement-naturel .me__p{ margin:.85rem 0 0;color:var(--text-2);font-size:.96rem;line-height:1.68;max-width:60ch } .abcdt-service-referencement-naturel .me__k{ margin:1.3rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem } .abcdt-service-referencement-naturel .me__k span{ font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3); padding-left:.9rem;position:relative } .abcdt-service-referencement-naturel .me__k span::before{ content:'';position:absolute;left:0;top:.5em;width:.4rem;height:1px;background:var(--line-2) } /* ══════════════════════════════════════════════════════════════════ DANS QUELS CONTEXTES — une succession de cadrages Du texte posé sur un fond n'est pas une direction. Ici la matière reste, et c'est une FENÊTRE qui se déplace et se resserre à chaque contexte nommé : la caméra cherche le problème. La fenêtre est un masque inversé — un box-shadow qui noircit tout sauf elle. Il n'y a donc qu'un seul objet, jamais trois cadres. ══════════════════════════════════════════════════════════════════ */ .abcdt-service-referencement-naturel .uc{ --p:1;--lx:50%;--ly:44%;--lw:74%;--lh:46%; position:relative;overflow:hidden;background:#08080c; min-height:100svh;display:flex;align-items:flex-end;isolation:isolate } .abcdt-service-referencement-naturel .uc__bg{ position:absolute;inset:0;z-index:0 } .abcdt-service-referencement-naturel .uc__bg video{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:grayscale(1) contrast(1.35) brightness(.86); transform:scale(calc(1.02 - var(--p,1) * .02)) } /* LA FENÊTRE. Un seul objet : ce qui est hors d'elle est éteint. */ .abcdt-service-referencement-naturel .uc__lens{ position:absolute;z-index:1;pointer-events:none; left:calc(var(--lx) - var(--lw) / 2); top:calc(var(--ly) - var(--lh) / 2); width:var(--lw);height:var(--lh); box-shadow:0 0 0 100vmax rgba(6,6,10,.9); outline:1px solid rgba(232,232,240,.26); transition:none } .abcdt-service-referencement-naturel .uc__lens::after{ content:'';position:absolute;inset:-1px; background:linear-gradient(0deg, rgba(6,6,10,.86) 0%, rgba(6,6,10,.25) 34%, transparent 62%) } /* Un sol sous le texte : la fenêtre éclaire, le texte doit rester lisible quoi qu'il arrive derrière. */ .abcdt-service-referencement-naturel .uc__in{ position:relative;z-index:2;width:100%;padding:0 var(--gut) 4.4rem; background:linear-gradient(0deg, rgba(6,6,10,.96) 0%, rgba(6,6,10,.86) 52%, rgba(6,6,10,.5) 82%, transparent 100%) } .abcdt-service-referencement-naturel .uc__h{ margin:1.1rem 0 0;font-family:var(--ff-d);font-weight:800;letter-spacing:-.042em; line-height:1.04;font-size:clamp(1.7rem,6.6vw,2.4rem);color:var(--text-2);max-width:18ch } .abcdt-service-referencement-naturel .uc__h b{ color:#fff;font-weight:800 } /* Les trois contextes occupent la même place : c'est celui qui est nommé qui existe, la fenêtre s'étant déplacée pour lui. */ .abcdt-service-referencement-naturel .uc__l{ position:relative;display:block;margin:2.4rem 0 0;height:5.4em } .abcdt-service-referencement-naturel .uc__i{ position:absolute;left:0;top:0;max-width:22ch; font-family:var(--ff-d);font-weight:700;letter-spacing:-.03em;line-height:1.14; font-size:clamp(1.15rem,5vw,1.5rem);color:#fff; opacity:var(--u,0); transform:translate3d(calc((1 - var(--u,0)) * -1.4rem),0,0) } .abcdt-service-referencement-naturel .uc__i--1{ --u:var(--u1,1) } .abcdt-service-referencement-naturel .uc__i--2{ --u:var(--u2,0) } .abcdt-service-referencement-naturel .uc__i--3{ --u:var(--u3,0) } .abcdt-service-referencement-naturel .uc__z{ margin:1.6rem 0 0;max-width:44ch;color:var(--text-3); font-size:.9rem;line-height:1.62 } /* ══════════════════════════════════════════════════════════════════ 06 · LA PREUVE — cas client Karmen Reprise de la grammaire de preuve validée sur E-commerce : un côté éditorial (eyebrow, titre, ligne client), une matière, et des indicateurs à des échelles et des positions inégales. CHEVAUCHEMENT CORRIGÉ. Les éléments de Karmen étaient positionnés en absolu contre la SECTION, laquelle contenait aussi le bloc « contextes » en flux normal : les deux compositions occupaient exactement la même boîte. Karmen a maintenant son propre bloc de positionnement, .kr__stage, placé APRÈS les contextes. ══════════════════════════════════════════════════════════════════ */ .abcdt-service-referencement-naturel .kr{ --p:1;position:relative;background:#0a0a0e } .abcdt-service-referencement-naturel .kr__stage{ position:relative;min-height:100svh;overflow:hidden;isolation:isolate; display:flex;flex-direction:column;justify-content:flex-end; padding:6rem var(--gut) 3.6rem } .abcdt-service-referencement-naturel .kr__band{ position:absolute;z-index:0;left:0;right:0;top:0;bottom:0;overflow:hidden; opacity:calc(.24 + var(--p,1) * .26) } .abcdt-service-referencement-naturel .kr__band video{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:70% 38%; filter:grayscale(1) contrast(1.5) brightness(.5); transform:scale(calc(1.04 - var(--p,1) * .04)) } .abcdt-service-referencement-naturel .kr__band::after{ content:'';position:absolute;inset:0; background: linear-gradient(0deg, #0a0a0e 0%, rgba(10,10,14,.94) 24%, rgba(10,10,14,.55) 52%, rgba(10,10,14,.2) 78%, transparent 94%), linear-gradient(96deg, rgba(10,10,14,.9) 0%, rgba(10,10,14,.5) 38%, transparent 72%) } .abcdt-service-referencement-naturel .kr__side{ position:relative;z-index:3;order:-1;margin-bottom:auto } .abcdt-service-referencement-naturel .kr__h{ margin:1.1rem 0 0;max-width:18ch; font-family:var(--ff-d);font-weight:800;letter-spacing:-.042em;line-height:1.04; font-size:clamp(1.7rem,6.6vw,2.3rem);color:#fff } /* La ligne client : nom, filet, discipline. Même forme que sur les pages validées, pour que la preuve se lise partout pareil. */ .abcdt-service-referencement-naturel .kr__client{ margin:1.8rem 0 0;display:flex;align-items:center;gap:.9rem;flex-wrap:wrap; font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3) } .abcdt-service-referencement-naturel .kr__client b{ color:#fff;font-weight:600;letter-spacing:.26em } .abcdt-service-referencement-naturel .kr__client i{ display:block;width:40px;height:1px;background:rgba(232,232,240,.4);flex:none } /* Les indicateurs : deux échelles franchement inégales, deux places différentes. Jamais deux cartes jumelles. */ .abcdt-service-referencement-naturel .kr__k{ position:relative;z-index:3;margin:0;display:grid;gap:2.4rem } .abcdt-service-referencement-naturel .kr__ki dt{ margin:0;font-family:var(--ff-d);font-weight:800;letter-spacing:-.06em;line-height:.82; color:#fff;font-variant-numeric:tabular-nums } .abcdt-service-referencement-naturel .kr__ki dt em{ font-style:normal;font-size:.34em;vertical-align:.9em } .abcdt-service-referencement-naturel .kr__ki dd{ margin:.8rem 0 0;max-width:24ch;color:var(--text-2);font-size:.92rem;line-height:1.5 } .abcdt-service-referencement-naturel .kr__ki--a dt{ font-size:clamp(3.4rem,17vw,5rem) } .abcdt-service-referencement-naturel .kr__ki--b dt{ font-size:clamp(2rem,9vw,2.6rem); color:transparent;-webkit-text-stroke:1.2px rgba(232,232,240,.85) } .abcdt-service-referencement-naturel .kr__ki--b dd{ color:var(--text-3);font-size:.86rem } /* ══════════════════════════════════════════════════════════════════ 07 · POURQUOI L'ORGANIQUE — quatre écrans, une seule matière Chaque avantage occupe un viewport entier, EN FLUX NORMAL : rien n'est épinglé, on ne rejoue pas un long plateau collant. La continuité vient de la MATIÈRE : un seul plan, collant en arrière-plan de la section, dont le cadrage évolue d'un écran à l'autre. Quatre fonds indépendants auraient donné quatre diapos. Chaque écran porte une phrase dominante, une explication courte et une transformation. Le texte long reste dans les zones de lecture, avant et après. ══════════════════════════════════════════════════════════════════ */ .abcdt-service-referencement-naturel .og{ --p:0;position:relative;background:#08080c;isolation:isolate } .abcdt-service-referencement-naturel .og__bg{ position:sticky;top:0;z-index:0;display:block; height:100svh;margin-bottom:-100svh;overflow:hidden } .abcdt-service-referencement-naturel .og__v{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:calc(28% + var(--p,0) * 44%) calc(64% - var(--p,0) * 34%); filter:grayscale(1) contrast(1.5) brightness(calc(.34 + var(--p,0) * .14)); transform:scale(calc(1.06 - var(--p,0) * .06)) } .abcdt-service-referencement-naturel .og__veil{ position:absolute;inset:0; background: linear-gradient(0deg, rgba(8,8,12,.9) 0%, rgba(8,8,12,.45) 34%, rgba(8,8,12,.45) 66%, rgba(8,8,12,.9) 100%), linear-gradient(96deg, rgba(8,8,12,.95) 0%, rgba(8,8,12,.6) 40%, rgba(8,8,12,.2) 74%, rgba(8,8,12,.6) 100%) } .abcdt-service-referencement-naturel .og__top, .abcdt-service-referencement-naturel .og__end{ position:relative;z-index:2 } .abcdt-service-referencement-naturel .og__l{ position:relative;z-index:2;margin:0;padding:0 } .abcdt-service-referencement-naturel .og__i{ min-height:100svh;display:flex;flex-direction:column;justify-content:center; max-width:var(--maxw);margin-inline:auto;padding:4rem var(--gut); /* --o : 0 quand l'écran est loin, 1 quand il est au centre du cadre. C'est lui qui fait la transformation typographique. */ --o:1 } .abcdt-service-referencement-naturel .og__t{ margin:0 0 1.4rem;font-size:.62rem;letter-spacing:.26em;text-transform:uppercase; color:var(--text-3); transform:translate3d(calc((1 - var(--o)) * -1.2rem),0,0);opacity:calc(.3 + var(--o) * .7) } /* La phrase dominante. */ .abcdt-service-referencement-naturel .og__b{ margin:0;max-width:21ch; font-family:var(--ff-d);font-weight:800;letter-spacing:-.045em;line-height:1; /* La phrase dominante fait jusqu'à 88 caractères : à 5 rem elle part sur six lignes et chasse l'explication hors du cadre. Le corps est calé sur la plus longue des quatre, pas sur la plus courte. */ font-size:clamp(1.6rem,6.4vw,2.1rem);color:#fff; transform:translate3d(0,calc((1 - var(--o)) * 2.2rem),0) scale(calc(.96 + var(--o) * .04)); transform-origin:0 50%; opacity:calc(.12 + var(--o) * .88) } /* Le régime paid : une note, en retrait, sous la phrase. */ .abcdt-service-referencement-naturel .og__a{ margin:2.2rem 0 0;max-width:38ch;color:var(--text-3);font-size:.9rem;line-height:1.6; padding-left:1.1rem;border-left:1px solid rgba(232,232,240,.2); opacity:calc(var(--o) * .9) } .abcdt-service-referencement-naturel .og__lab{ display:block;margin-bottom:.4rem; font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3) } .abcdt-service-referencement-naturel .og__z{ margin:0 0 1.6rem;max-width:62ch;color:var(--text-2);font-size:1rem;line-height:1.7 } .abcdt-service-referencement-naturel .og__z b{ color:#fff;font-weight:500 } /* ══════════════════════════════════════════════════════════════════ 08 · SUR LA DURÉE — la matière gagne du territoire La cascade de rémanences est supprimée : c'étaient encore quatre rectangles, même en perspective. UNE SEULE IDÉE, tenue jusqu'au bout. Le plan est là, entier, dès le début — mais un masque ne l'ouvre que par quelques éclats. À chaque passage un éclat s'élargit, et il ne se referme jamais. Quand ils se rejoignent, la surface devient continue et occupe tout le cadre. Le masque est composé de quatre bandes aux bords fondus : tant qu'elles sont étroites on voit des fragments, quand elles se recouvrent on ne voit plus qu'une matière. Noir carbone, vidéo, lumière. Aucun écran clair. ══════════════════════════════════════════════════════════════════ */ .abcdt-service-referencement-naturel .dr{ --p:1;--ra:170%;--rb:170%;position:relative;background:var(--ink) } .abcdt-service-referencement-naturel .dr__stage{ position:relative;min-height:100svh;overflow:hidden;isolation:isolate; display:flex;flex-direction:column;justify-content:flex-end; padding:0 var(--gut) 3.4rem;background:var(--ink) } /* Le masque : DEUX taches organiques qui s'étendent et finissent par se rejoindre. Aucune bande, aucun rectangle — on ne doit pas voir la mécanique avant de comprendre le message. Les quatre bandes précédentes étaient parfaitement lisibles comme dispositif : on voyait le truc, pas l'idée. */ .abcdt-service-referencement-naturel .dr__field{ position:absolute;z-index:0;inset:0;overflow:hidden; -webkit-mask-image: radial-gradient(var(--ra) calc(var(--ra) * .72) at 32% 46%, #000 0%, #000 46%, transparent 86%), radial-gradient(var(--rb) calc(var(--rb) * .68) at 72% 62%, #000 0%, #000 44%, transparent 84%); mask-image: radial-gradient(var(--ra) calc(var(--ra) * .72) at 32% 46%, #000 0%, #000 46%, transparent 86%), radial-gradient(var(--rb) calc(var(--rb) * .68) at 72% 62%, #000 0%, #000 44%, transparent 84%); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat } .abcdt-service-referencement-naturel .dr__v{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:grayscale(1) contrast(1.34) brightness(1.06) } /* Le sol : le texte garde son autorité quelle que soit l'ouverture. */ .abcdt-service-referencement-naturel .dr__veil{ position:absolute;z-index:1;inset:0;pointer-events:none; background: linear-gradient(0deg, var(--ink) 0%, rgba(6,6,10,.94) 24%, rgba(6,6,10,.5) 46%, rgba(6,6,10,.06) 74%, transparent 88%), linear-gradient(180deg, rgba(6,6,10,.8) 0%, rgba(6,6,10,.2) 16%, transparent 32%) } .abcdt-service-referencement-naturel .dr__k{ position:relative;z-index:3;margin:0 0 1rem; font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-3) } .abcdt-service-referencement-naturel .dr__h{ position:relative;z-index:3;margin:0;max-width:14ch; font-family:var(--ff-d);font-weight:800;letter-spacing:-.05em;line-height:.96; font-size:clamp(2.1rem,10vw,2.9rem);color:#fff } /* Les trois bénéfices : une colonne calme, qui se remplit au rythme des passages. Aucun cadre, aucune vignette. */ .abcdt-service-referencement-naturel .dr__c{ position:relative;z-index:3;margin:2.4rem 0 0;display:grid;gap:.7rem;max-width:34ch } .abcdt-service-referencement-naturel .dr__c span{ font-size:.92rem;line-height:1.5;color:var(--text-2); padding-left:1.1rem;border-left:1px solid rgba(232,232,240,.24) } .abcdt-service-referencement-naturel .dr__c1{ opacity:var(--k1,1) } .abcdt-service-referencement-naturel .dr__c2{ opacity:var(--k2,1) } .abcdt-service-referencement-naturel .dr__c3{ opacity:var(--k3,1) } .abcdt-service-referencement-naturel .dr__rd, .abcdt-service-referencement-naturel .kp{ background:var(--ink) } .abcdt-service-referencement-naturel .dr__rd{ padding-bottom:0 } /* Ce que vous gardez : les livrables réels. */ .abcdt-service-referencement-naturel .kp{ max-width:none } .abcdt-service-referencement-naturel .kp__l{ list-style:none;margin:0;padding:0;max-width:var(--maxw);margin-inline:auto } .abcdt-service-referencement-naturel .kp__i{ padding:1.7rem 0;border-top:1px solid var(--line) } /* L'exception du premier item n'a de sens QUE dans l'empilement mobile. Sans ce garde-fou de largeur, sa spécificité (0,2,0) battait la règle desktop (0,1,0) à l'intérieur de la media query — la spécificité l'emporte sur l'ordre — et la première colonne se retrouvait 28 px plus haut que les deux autres, sans filet. */ @media (max-width:899px){ .abcdt-service-referencement-naturel .kp__i:first-child{ border-top:0;padding-top:0 } } .abcdt-service-referencement-naturel .kp__i b{ display:block;font-family:var(--ff-d);font-weight:700;letter-spacing:-.025em; font-size:1.05rem;color:#fff;margin-bottom:.55rem } .abcdt-service-referencement-naturel .kp__i span{ display:block;color:var(--text-2);font-size:.94rem;line-height:1.66;max-width:56ch } /* ══════════════════════════════════════════════════════════════════ 09 · AUTOUR DU SEO ══════════════════════════════════════════════════════════════════ */ .abcdt-service-referencement-naturel .sx{ position:relative;background:var(--ink) } .abcdt-service-referencement-naturel .sx__l{ list-style:none;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) 5rem } .abcdt-service-referencement-naturel .sx__l li{ border-top:1px solid var(--line) } .abcdt-service-referencement-naturel .sx__l a{ display:grid;gap:.35rem;padding:1.3rem 0;text-decoration:none; transition:padding-left .5s var(--e) } .abcdt-service-referencement-naturel .sx__l a:hover{ padding-left:.8rem } .abcdt-service-referencement-naturel .sx__l b{ font-family:var(--ff-d);font-weight:700;letter-spacing:-.025em;font-size:1.02rem;color:#fff } .abcdt-service-referencement-naturel .sx__l span{ color:var(--text-3);font-size:.86rem;line-height:1.5 } /* ══════════════════════════════════════════════════════════════════ RÉVÉLATIONS Le CSS ne masque QUE sous .js-motion : sans script, tout le contenu est déjà visible. Aucun texte métier ne dépend d'une classe JS. ══════════════════════════════════════════════════════════════════ */ .abcdt-service-referencement-naturel.abc-motion [data-rv]{ opacity:0;transform:translate3d(0,1.1rem,0); transition:opacity .8s var(--e),transform .8s var(--e) } .abcdt-service-referencement-naturel.abc-motion [data-rv].is-in{ opacity:1;transform:none } /* ══════════════════════════════════════════════════════════════════ PALIER DESKTOP — 900 px Les compositions de la planche, format 1440×900. Le mobile ci-dessus n'est pas une réduction de celles-ci : les deux ont été composés ensemble. ══════════════════════════════════════════════════════════════════ */ @media (min-width:900px){ .abcdt-service-referencement-naturel .rd{ padding:7rem var(--gut) } /* 01 · HERO — le bloc reste bas-gauche, le H1 gagne l'échelle. */ .abcdt-service-referencement-naturel .sh__lo{ padding:0 4.2rem 4.4rem;max-width:none } .abcdt-service-referencement-naturel .sh__h{ font-size:clamp(3.6rem,7.2vw,6.2rem);max-width:11ch } .abcdt-service-referencement-naturel .sh__lede{ margin-top:2rem;font-size:1rem;max-width:44ch } .abcdt-service-referencement-naturel .sh__act{ margin-top:2.2rem;gap:2rem;white-space:nowrap } .abcdt-service-referencement-naturel .sh__obj{ --objS:.5; right:6%;top:10%;width:320px;height:180px } .abcdt-service-referencement-naturel .sh__veil{ background: linear-gradient(0deg, #06060A 0%, #06060A 26%, rgba(6,6,10,.9) 46%, rgba(6,6,10,.44) 64%, rgba(6,6,10,.06) 84%, transparent 96%), linear-gradient(100deg, rgba(6,6,10,.9) 0%, rgba(6,6,10,.52) 26%, rgba(6,6,10,.08) 52%, transparent 70%), linear-gradient(180deg, rgba(6,6,10,.58) 0%, rgba(6,6,10,.1) 12%, transparent 24%) } .abcdt-service-referencement-naturel .sh__rail{ margin-top:2.6rem;gap:.5rem 2.4rem } .abcdt-service-referencement-naturel .sh__rail span{ font-size:.58rem } /* 02 · CONVICTION — deux masses au même fer, la bande traverse. */ .abcdt-service-referencement-naturel .cv__in{ padding:0 4.2rem } .abcdt-service-referencement-naturel .cv__h{ font-size:clamp(3.2rem,6.4vw,5.4rem);line-height:.94 } .abcdt-service-referencement-naturel .cv__a, .abcdt-service-referencement-naturel .cv__b{ max-width:13ch } .abcdt-service-referencement-naturel .cv__t{ font-size:1rem;max-width:38ch;margin-top:2.2rem } .abcdt-service-referencement-naturel .cv__band{ top:calc(var(--y,100%) - 1.9em);height:2.2em } /* 03 · CE QUE NOUS COUVRONS */ .abcdt-service-referencement-naturel .pi__stage{ padding:0 4.2rem 4.2rem } .abcdt-service-referencement-naturel .pi__h{ font-size:clamp(2.2rem,4vw,3rem);padding-top:6.4rem;max-width:18ch } .abcdt-service-referencement-naturel .pi__w{ font-size:clamp(5rem,11vw,9.4rem) } .abcdt-service-referencement-naturel .pi__say{ font-size:1.02rem;max-width:40ch;height:2.4em } .abcdt-service-referencement-naturel .pi__grid{ inset:9% 7% 26% 7% } .abcdt-service-referencement-naturel .pi__surf{ inset:-8% -2% 24% 38% } /* LES TROIS PILIERS EN ENTIER — la géométrie s'écarte franchement d'un sujet à l'autre : c'est ce qui empêche la lecture en trois lignes identiques. */ .abcdt-service-referencement-naturel .pk{ padding:7rem 4.2rem 8rem } .abcdt-service-referencement-naturel .pk::before{ left:4.2rem;top:7rem;bottom:8rem } .abcdt-service-referencement-naturel .pk__i{ padding:0 0 5rem 3.4rem;display:grid;column-gap:4rem;align-items:start } .abcdt-service-referencement-naturel .pk__n{ position:absolute;left:0;top:.35rem;margin:0 } /* Technique : deux colonnes serrées, mesure courte. */ .abcdt-service-referencement-naturel .pk__i--t{ grid-template-columns:minmax(0,26rem) minmax(0,1fr) } .abcdt-service-referencement-naturel .pk__i--t .pk__h{ grid-column:1;font-size:1.5rem } .abcdt-service-referencement-naturel .pk__i--t .pk__p{ grid-column:1;max-width:38ch } .abcdt-service-referencement-naturel .pk__i--t .pk__l{ grid-column:2;grid-row:1 / span 2;margin-top:.3rem } /* Contenu : le texte occupe le champ, les items filent sous lui. */ .abcdt-service-referencement-naturel .pk__i--c{ grid-template-columns:minmax(0,1fr) } .abcdt-service-referencement-naturel .pk__i--c .pk__h{ font-size:2rem;max-width:20ch } .abcdt-service-referencement-naturel .pk__i--c .pk__p{ max-width:66ch;font-size:1.05rem } .abcdt-service-referencement-naturel .pk__i--c .pk__l li{ font-size:.94rem } /* Autorité : la masse à gauche, les items empilés à droite. */ .abcdt-service-referencement-naturel .pk__i--a{ grid-template-columns:minmax(0,1fr) minmax(0,20rem) } .abcdt-service-referencement-naturel .pk__i--a .pk__h{ grid-column:1;font-size:2.8rem;max-width:14ch } .abcdt-service-referencement-naturel .pk__i--a .pk__p{ grid-column:1;max-width:48ch } .abcdt-service-referencement-naturel .pk__i--a .pk__l{ grid-column:2;grid-row:1 / span 2;margin-top:.4rem } .abcdt-service-referencement-naturel .pk__i--a .pk__l li{ font-size:1.15rem } /* 04 · SEARCH — quatre profondeurs réelles. */ .abcdt-service-referencement-naturel .ge__stage{ height:100vh } .abcdt-service-referencement-naturel .ge__q{ top:20% } .abcdt-service-referencement-naturel .ge__q1, .abcdt-service-referencement-naturel .ge__q2{ font-size:1.5rem } .abcdt-service-referencement-naturel .ge__big{ font-size:22vw } .abcdt-service-referencement-naturel .ge__side{ left:auto;right:auto;bottom:auto;top:50%;transform:translateY(-50%); display:grid;gap:.8rem } .abcdt-service-referencement-naturel .ge__side--l{ left:1.8rem } .abcdt-service-referencement-naturel .ge__side--r{ display:grid;right:1.8rem;text-align:right } .abcdt-service-referencement-naturel .ge__side span{ font-size:.56rem } .abcdt-service-referencement-naturel .ge__s--a{ left:5%;top:14%;width:330px } .abcdt-service-referencement-naturel .ge__s--a b{ font-size:1.3rem } .abcdt-service-referencement-naturel .ge__s--a em{ font-size:.86rem } .abcdt-service-referencement-naturel .ge__s--c{ right:5%;bottom:16%;width:300px } .abcdt-service-referencement-naturel .ge__s--c b{ font-size:1.15rem } .abcdt-service-referencement-naturel .ge__s--c em{ font-size:.82rem } .abcdt-service-referencement-naturel .ge__s--b{ right:-3%;top:12%;width:230px } .abcdt-service-referencement-naturel .ge__s--b b{ font-size:.98rem } .abcdt-service-referencement-naturel .ge__s--b em{ font-size:.76rem } .abcdt-service-referencement-naturel .ge__s--d{ left:-4%;bottom:10%;width:230px } .abcdt-service-referencement-naturel .ge__s--d b{ font-size:.94rem } .abcdt-service-referencement-naturel .ge__s--d em{ font-size:.74rem } .abcdt-service-referencement-naturel .ai__o--gpt{ left:-11%;top:12%;width:38% } .abcdt-service-referencement-naturel .ai__o--per{ right:5%;bottom:24%;width:20% } .abcdt-service-referencement-naturel .ai__o--gem{ right:9%;top:16%;width:15% } .abcdt-service-referencement-naturel .ai__o--ant{ left:8%;bottom:12%;width:19% } .abcdt-service-referencement-naturel .ai__o--cop{ left:41%;top:9%;width:9% } .abcdt-service-referencement-naturel .ge__cue{ bottom:3.4rem;font-size:.6rem } .abcdt-service-referencement-naturel .ge__syn{ top:46%;font-size:3.4rem } /* LES MOTEURS — descente asymétrique : chaque moteur a son propre retrait et sa propre largeur. Aucun alignement en rangée. */ .abcdt-service-referencement-naturel .eg{ padding-bottom:7rem } .abcdt-service-referencement-naturel .eg__l{ gap:3.4rem } .abcdt-service-referencement-naturel .eg__i{ display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr) 11rem; column-gap:3rem;align-items:start } .abcdt-service-referencement-naturel .eg__m{ margin:0 } .abcdt-service-referencement-naturel .eg__d{ font-size:.98rem } .abcdt-service-referencement-naturel .eg__f{ margin:0;text-align:right } .abcdt-service-referencement-naturel .eg__i--1{ margin-left:0 } .abcdt-service-referencement-naturel .eg__i--2{ margin-left:6% } .abcdt-service-referencement-naturel .eg__i--3{ margin-left:3% } .abcdt-service-referencement-naturel .eg__i--4{ margin-left:10% } .abcdt-service-referencement-naturel .eg__i--5{ margin-left:6% } .abcdt-service-referencement-naturel .eg__i--1 .eg__m b{ font-size:1.7rem } .abcdt-service-referencement-naturel .eg__i--2 .eg__m b{ font-size:1.45rem } .abcdt-service-referencement-naturel .eg__i--3 .eg__m b{ font-size:1.3rem } .abcdt-service-referencement-naturel .eg__i--4 .eg__m b{ font-size:1.24rem } .abcdt-service-referencement-naturel .eg__i--5 .eg__m b{ font-size:1.14rem } .abcdt-service-referencement-naturel .eg__m img{ max-width:11rem } /* CE QUE CHANGE LE GEO — la dispersion à gauche, l'assemblage à droite, à deux échelles et deux densités différentes. */ .abcdt-service-referencement-naturel .ch{ padding-bottom:7rem } .abcdt-service-referencement-naturel .ch__x{ grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:5rem;margin-bottom:4.4rem } .abcdt-service-referencement-naturel .ch__a .ch__say{ font-size:1.6rem } .abcdt-service-referencement-naturel .ch__b .ch__say{ font-size:2.2rem } .abcdt-service-referencement-naturel .ch__lab{ font-size:.9rem } /* CE QUI REND UNE RÉPONSE POSSIBLE */ .abcdt-service-referencement-naturel .lv{ padding-bottom:7rem } .abcdt-service-referencement-naturel .lv__l{ padding-left:3.4rem } .abcdt-service-referencement-naturel .lv__i{ display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr); column-gap:3rem;padding-bottom:2.8rem } .abcdt-service-referencement-naturel .lv__i::before{ top:.86rem } .abcdt-service-referencement-naturel .lv__i:nth-child(1)::before{ width:3.4rem } .abcdt-service-referencement-naturel .lv__i:nth-child(2)::before{ width:2.2rem } .abcdt-service-referencement-naturel .lv__i:nth-child(3)::before{ width:3.4rem } .abcdt-service-referencement-naturel .lv__i:nth-child(4)::before{ width:1.6rem } .abcdt-service-referencement-naturel .lv__i:nth-child(1) .lv__h{ font-size:1.5rem } .abcdt-service-referencement-naturel .lv__i:nth-child(2) .lv__h{ font-size:1.24rem } .abcdt-service-referencement-naturel .lv__i:nth-child(3) .lv__h{ font-size:1.4rem } .abcdt-service-referencement-naturel .lv__i:nth-child(4) .lv__h{ font-size:1.14rem } .abcdt-service-referencement-naturel .lv__p{ margin-top:0 } /* 05 · MÉTHODE — la matière occupe le haut, l'index vit dessous. */ .abcdt-service-referencement-naturel .mv{ height:72svh } /* Trois colonnes, deux rangées. La grille est portée par le BOUTON, pas par le
  • : le bouton enveloppe les quatre éléments, il est donc le seul enfant du
  • et une grille posée sur le
  • n'aurait qu'un item. Le libellé d'état et les marqueurs encadrent le bloc de texte. */ .abcdt-service-referencement-naturel .me__i{ padding:3rem 0 } .abcdt-service-referencement-naturel .me__t{ display:grid;grid-template-columns:9rem minmax(0,1fr) 16rem; grid-template-rows:auto auto; column-gap:3rem;align-items:start } .abcdt-service-referencement-naturel .me__n{ grid-column:1;grid-row:1 / span 2;margin:0;padding-top:.35rem } .abcdt-service-referencement-naturel .me__h{ grid-column:2;grid-row:1 } .abcdt-service-referencement-naturel .me__p{ grid-column:2;grid-row:2 } .abcdt-service-referencement-naturel .me__k{ grid-column:3;grid-row:1 / span 2;display:grid;gap:.6rem;margin:0;align-content:start } /* DANS QUELS CONTEXTES */ .abcdt-service-referencement-naturel .uc__in{ padding:0 4.2rem 5rem;max-width:54%; background:linear-gradient(96deg, rgba(6,6,10,.96) 0%, rgba(6,6,10,.88) 62%, rgba(6,6,10,.35) 88%, transparent 100%); /* Le texte se tient à gauche pour que la fenêtre ait de la place à droite : la composition est asymétrique, pas centrée. */ } .abcdt-service-referencement-naturel .uc__h{ font-size:clamp(2.2rem,4.2vw,3rem);max-width:17ch } .abcdt-service-referencement-naturel .uc__l{ margin-top:3rem;height:3.6em } .abcdt-service-referencement-naturel .uc__i{ font-size:clamp(1.5rem,2.4vw,1.9rem);max-width:26ch } .abcdt-service-referencement-naturel .uc__z{ margin-top:2.4rem;font-size:.96rem } /* 06 · LA PREUVE — l'éditorial à gauche, les chiffres en bas, à deux échelles et deux hauteurs différentes. */ .abcdt-service-referencement-naturel .kr__stage{ padding:7rem 4.2rem 5rem } .abcdt-service-referencement-naturel .kr__h{ font-size:clamp(2.2rem,4.2vw,3rem);max-width:16ch } .abcdt-service-referencement-naturel .kr__client{ font-size:.7rem } .abcdt-service-referencement-naturel .kr__k{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:0 5rem;align-items:end } .abcdt-service-referencement-naturel .kr__ki--a dt{ font-size:clamp(6rem,11vw,10rem) } .abcdt-service-referencement-naturel .kr__ki--b{ padding-bottom:2.6rem } .abcdt-service-referencement-naturel .kr__ki--b dt{ font-size:clamp(3rem,5vw,4.4rem) } .abcdt-service-referencement-naturel .kr__ki dd{ font-size:.96rem;max-width:26ch } /* 07 · ORGANIQUE — la phrase occupe le champ, la note reste basse. */ .abcdt-service-referencement-naturel .og__i{ padding:4rem 4.2rem } .abcdt-service-referencement-naturel .og__b{ font-size:clamp(2.4rem,4vw,3.4rem);max-width:20ch } .abcdt-service-referencement-naturel .og__a{ margin-top:3.2rem;font-size:.98rem;max-width:44ch } .abcdt-service-referencement-naturel .og__t{ margin-bottom:2rem;font-size:.66rem } /* 08 · DURÉE — la matière prend tout le champ. */ .abcdt-service-referencement-naturel .dr__stage{ padding:0 4.2rem 4.4rem } .abcdt-service-referencement-naturel .dr__h{ font-size:clamp(2.8rem,5.4vw,4.4rem);max-width:13ch } .abcdt-service-referencement-naturel .dr__c{ margin-top:3rem;grid-auto-flow:column;grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.4rem;max-width:none } .abcdt-service-referencement-naturel .dr__c span{ font-size:.96rem } .abcdt-service-referencement-naturel .dr__k{ font-size:.58rem } /* Trois entrées, une seule grille. Les titres partagent la rangée 1, les descriptions la rangée 2 : même axe de titre, même axe de description, même rythme vertical — y compris quand un titre passe sur deux lignes. C'est la grille qui aligne, pas des marges rattrapées enfant par enfant. */ .abcdt-service-referencement-naturel .kp__l{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:auto auto;gap:0 3rem;align-items:start } .abcdt-service-referencement-naturel .kp__i{ display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:.6rem; border-top:1px solid var(--line);padding-top:1.7rem } .abcdt-service-referencement-naturel .kp__i b{ margin-bottom:0;align-self:start } .abcdt-service-referencement-naturel .kp__i span{ max-width:none;align-self:start } .abcdt-service-referencement-naturel .sx__l{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 4rem } } /* Écrans larges mais BAS — 1024×768 typiquement. Le hero y manque de hauteur, pas de largeur : le H1 passe à trois lignes et vient toucher le chapô. On rend donc la remontée et le corps au cadre. */ @media (min-width:900px) and (max-height:820px){ /* Le bloc est ancré en bas par margin-top:auto. La remontée négative appartenait au hero précédent, où le texte devait grimper dans le décrochement de la bande — ce dispositif n'existe plus, et elle faisait sortir l'eyebrow du cadre à 768 px de haut. */ .abcdt-service-referencement-naturel .sh__h{ font-size:clamp(2.2rem,4vw,3.1rem) } .abcdt-service-referencement-naturel .cv__h{ font-size:clamp(2.4rem,4.2vw,3.4rem) } .abcdt-service-referencement-naturel .pi__massW{ font-size:clamp(4rem,7vw,6.4rem) } .abcdt-service-referencement-naturel .ge__big{ font-size:clamp(5rem,9vw,7.4rem) } } @media (min-width:1200px){ .abcdt-service-referencement-naturel .sx__l{ grid-template-columns:repeat(4,minmax(0,1fr));gap:0 2.5rem } } /* ══════════════════════════════════════════════════════════════════ MOUVEMENT RÉDUIT / SANS SCRIPT Chaque scène montre directement son affiche validée — c'est déjà la valeur par défaut de --p, donc il n'y a rien à rejouer. Il reste à retirer les plateaux : un track de 400 vh sans animation ne serait qu'un long vide à faire défiler. ══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ } /* ══════════════════════════════════════════════════════════════════ MODE DEBUG LOCAL Actif uniquement avec ?debugScene=…&debugState=… . Il neutralise le moteur de défilement (fait dans page.js) et isole la scène visée pour qu'un état figé soit réellement observable. Rien de tout cela ne s'applique à la page telle qu'elle est servie. ?debugScene=hero&debugState=start|poster|end ?debugScene=conviction&debugState=start|poster|end ?debugScene=pillars&debugState=start|mid|end ?debugScene=search&debugState=question|google|depth|geo|synthesis ?debugScene=karmen&debugState=start|end ?debugScene=duration&debugState=trace1|trace2|trace3|trace4 ══════════════════════════════════════════════════════════════════ */ .abcdt-service-referencement-naturel .is-debug main > section:not(.is-debug-target):not(.is-debug-host){ display:none } .abcdt-service-referencement-naturel .is-debug section.is-debug-host > *:not(.is-debug-target){ display:none } .abcdt-service-referencement-naturel .is-debug .is-debug-target .rd, .abcdt-service-referencement-naturel .is-debug .is-debug-target .eg, .abcdt-service-referencement-naturel .is-debug .is-debug-target .st, .abcdt-service-referencement-naturel .is-debug .is-debug-target .kp, .abcdt-service-referencement-naturel .is-debug .is-debug-target .lv, .abcdt-service-referencement-naturel .is-debug .is-debug-target .ch{ display:none } .abcdt-service-referencement-naturel .is-debug .ge__track{ height:100svh } .abcdt-service-referencement-naturel .end{ position:relative;isolation:isolate;overflow:hidden; padding:clamp(6rem,17vh,12rem) 0 clamp(5rem,13vh,8rem); background:var(--ink) } .abcdt-service-referencement-naturel .end__media{ position:absolute;inset:0;z-index:0 } .abcdt-service-referencement-naturel .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-referencement-naturel .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-referencement-naturel .end .tex{ z-index:1 } .abcdt-service-referencement-naturel .end__in{ position:relative;z-index:2 } .abcdt-service-referencement-naturel .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-referencement-naturel .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-referencement-naturel .end__p{ margin:0 0 1.2rem;max-width:52ch;color:var(--text-2); font-size:1rem;line-height:1.62 } .abcdt-service-referencement-naturel .end__p:last-child{ margin-bottom:0 } .abcdt-service-referencement-naturel .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-referencement-naturel .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-referencement-naturel .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-referencement-naturel .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-referencement-naturel .end__h{ font-size:clamp(2.4rem,4.4vw,4rem) } .abcdt-service-referencement-naturel .end__act{ padding-top:.4rem } } @media (prefers-reduced-motion: reduce){ .abcdt-service-referencement-naturel .end__v, .abcdt-service-referencement-naturel .end__cta{ transition:none } .abcdt-service-referencement-naturel .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-referencement-naturel, body.has-tube .abcdt-service-referencement-naturel a, body.has-tube .abcdt-service-referencement-naturel button, body.has-tube .abcdt-service-referencement-naturel summary, body.has-tube .abcdt-service-referencement-naturel input, body.has-tube .abcdt-service-referencement-naturel textarea, body.has-tube .abcdt-service-referencement-naturel select, body.has-tube .abcdt-service-referencement-naturel label, body.has-tube .abcdt-service-referencement-naturel [role="button"]{cursor:none}