/* ═══════════════════════════════════════════════════════════════════════ ABC DIGITAL TOUCH — Homepage · feuille d'intégration WordPress Généré par scripts/build-export.py — ne pas éditer à la main. TOUT est scopé sous .abchome : aucune règle ne touche body, html, a, button, img ni les titres globaux. Le header et le footer Elementor, Axeptio et HubSpot ne sont pas affectés. Chemin des médias : les images et vidéos sont référencées en ../../../../uploads/abc-home/… dans home-content.html. Pour les servir depuis la médiathèque WordPress, remplacez « ../../../../uploads/abc-home/ » par votre URL de base — par exemple https://abcdigitaltouch.fr/wp-content/uploads/abc-home/ ═══════════════════════════════════════════════════════════════════════ */ /* Réinitialisation locale — strictement limitée au bloc de la homepage. Le prototype pose sa typographie et ses couleurs de base sur html/body. Ces deux sélecteurs sont écartés de l'export pour ne pas contaminer WordPress : leurs déclarations sont donc reportées ici, sur .abchome. Sans cela, tout élément sans couleur explicite — le H1 en premier — hérite de la couleur de texte du thème. */ .abchome, .abchome *, .abchome *::before, .abchome *::after { box-sizing: border-box; } .abchome { margin: 0; color: var(--text); background: var(--ink); font-family: var(--ff-b); font-size: 17px; line-height: 1.62; overflow-x: clip; -webkit-font-smoothing: antialiased; } /* Le thème peut cibler les titres directement : l'héritage perdrait alors contre sa règle. On force la reprise, sans écraser les couleurs propres au design, qui sont toutes portées par des sélecteurs de classe. */ /* Un thème cible souvent les types d'éléments directement (h2 {...}, li {...}) : l'héritage perd alors contre sa règle, et une propriété que le design laisse hériter — l'interligne au premier chef — est silencieuse- ment remplacée. On rétablit la chaîne pour les propriétés typographiques héritables, sur les types les plus souvent visés. Toutes les valeurs voulues par le design passent par des classes, donc plus spécifiques. */ .abchome h1, .abchome h2, .abchome h3, .abchome h4, .abchome h5, .abchome h6, .abchome p, .abchome li, .abchome ul, .abchome ol, .abchome dl, .abchome dt, .abchome dd, .abchome blockquote, .abchome figure, .abchome figcaption, .abchome span, .abchome a, .abchome em, .abchome strong, .abchome b, .abchome i, .abchome small, .abchome time, .abchome label, .abchome th, .abchome td { color: inherit; font-family: inherit; line-height: inherit; letter-spacing: inherit; text-transform: inherit; } /* Valeurs par défaut du navigateur que l'héritage ne restitue pas. */ .abchome h1, .abchome h2, .abchome h3, .abchome h4, .abchome h5, .abchome h6, .abchome strong, .abchome b, .abchome th { font-weight: bold; } .abchome em, .abchome i { font-style: italic; } /* Les contrôles de formulaire n'héritent pas de la police par défaut. On reprend les propriétés une à une plutôt que le raccourci « font », qui embarque aussi l'interligne et rendrait les boutons plus hauts que dans la maquette — le navigateur leur donne « normal ». */ .abchome button, .abchome input, .abchome select, .abchome textarea { font-family: inherit; font-size: inherit; font-weight: inherit; font-style: inherit; line-height: normal; color: inherit; letter-spacing: inherit; } /* Marges de flux reprises du navigateur. Un thème qui redéfinit celles des titres ou des paragraphes déplacerait la composition validée ; ces règles la rétablissent. Toutes les marges voulues par le design passent par des sélecteurs de classe, donc plus spécifiques : elles gardent la main. */ .abchome h1 { margin: .67em 0; } .abchome h2 { margin: .83em 0; } .abchome h3 { margin: 1em 0; } .abchome h4 { margin: 1.33em 0; } .abchome h5 { margin: 1.67em 0; } .abchome h6 { margin: 2.33em 0; } .abchome p { margin: 1em 0; } .abchome ul, .abchome ol { margin: 1em 0; padding-inline-start: 40px; } .abchome blockquote, .abchome figure { margin: 1em 40px; } .abchome dl { margin: 1em 0; } .abchome img, .abchome video { display: block; max-width: 100%; } .abchome a { color: inherit; } .abchome ::selection { background: #1A6FFF; color: #06060A; } .abchome :focus-visible { outline: 2px solid #4A8CFF; outline-offset: 4px; border-radius: 2px; } /* ── Curseur personnalisé — les SEULES règles hors .abchome ───────────── La couche suit le pointeur sur toute la fenêtre : elle ne peut donc pas vivre à l'intérieur du bloc. Les deux règles ne s'appliquent que si le script a réellement démarré le canvas — la classe .has-tube est posée sur à ce moment-là, jamais au chargement. Si vous ne voulez pas du curseur personnalisé, supprimez ce bloc : rien d'autre n'en dépend. */ .abc-cursor { position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0; transition: opacity .35s cubic-bezier(.22,.61,.36,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; } /* ═══════════════════════════════════════════════════════════════════════ 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. ═══════════════════════════════════════════════════════════════════════ */ .abchome{ --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){ .abchome{ --gut:2.5rem } } @media(min-width:1200px){ .abchome{ --gut:4rem } } .abchome *, .abchome *::before, .abchome *::after{box-sizing:border-box} @media(prefers-reduced-motion:reduce){} .abchome a{color:inherit} .abchome .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)} /* ── Typographie commune ───────────────────────────────────────── */ .abchome .eyebrow{ margin:0 0 1.5rem;font-size:.7rem;font-weight:500;letter-spacing:.22em; text-transform:uppercase;color:var(--text-3) } .abchome .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 } .abchome .h2--lg{font-size:clamp(2.1rem,5.4vw,4rem);max-width:20ch} .abchome .h2--xl{font-size:clamp(2.3rem,6.6vw,5rem);max-width:14ch;font-weight:800} .abchome .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. */ .abchome .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) } .abchome .tlink::after{content:'→';transition:transform .3s var(--e)} .abchome .tlink:hover{color:var(--blue-lift);border-bottom-color:var(--blue)} .abchome .tlink:hover::after{transform:translateX(5px)} .abchome .tlink--lg{font-family:var(--ff-d);font-weight:600;font-size:clamp(1.05rem,2.2vw,1.35rem);letter-spacing:-.01em} /* ── Navigation ────────────────────────────────────────────────── */ @media(min-width:860px){} /* Sous 500 px, logo et CTA se partagent la barre sans se replier. */ @media(max-width:499.98px){ } /* ═══════════════════════════════════════════════════════════════ 01 · HERO ═══════════════════════════════════════════════════════════════ */ .abchome .hero{position:relative;background:var(--ink)} .abchome .hero__stage{ position:relative;min-height:100svh;overflow:hidden; display:flex;align-items:flex-end;padding-top:var(--nav-h) } .abchome .hero__media{position:absolute;inset:0;z-index:0} .abchome .plan{position:absolute;inset:0;opacity:0} .abchome .plan.is-on{opacity:1} .abchome .plan__poster, .abchome .plan__video{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover } .abchome .plan__video{opacity:0;transition:opacity .8s var(--e)} .abchome .plan__video.is-ready{opacity:1} /* 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. */ .abchome .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") } .abchome .hero__grain{ position:absolute;inset:0;pointer-events:none;z-index:6;opacity:.06;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E") } .abchome .hero__veil{ position:absolute;inset:0;pointer-events:none; background: linear-gradient(to top,rgba(6,6,10,.96) 0%,rgba(6,6,10,.86) 30%,rgba(6,6,10,.5) 58%,rgba(6,6,10,.3) 80%,rgba(6,6,10,.5) 100%), radial-gradient(120% 100% at 40% 46%,transparent 32%,rgba(6,6,10,.55) 100%) } /* Le voile de sortie n'est pas un aplat : c'est un dégradé latéral. À gauche, sous la phrase et les deux liens, il est presque opaque et le texte reste parfaitement lisible ; à droite, une bande d'environ 40 % laisse passer la matière du plan qui continue de tourner. La composition reste celle du hero — aucun second hero, aucun média supplémentaire. */ .abchome .hero__veil{z-index:2} .abchome .plan{z-index:0} .abchome .hero__black{ position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none; background:linear-gradient(to left, rgba(6,6,10,.80) 0%, rgba(6,6,10,.90) 38%, rgba(6,6,10,.965) 62%, rgba(6,6,10,.985) 100%) } /* Sous 900 px la colonne de texte occupe toute la largeur : le voile redevient uniforme, la lisibilité prime sur l'effet. */ @media(max-width:899.98px){ .abchome .hero__black{background:rgba(6,6,10,.96)} } /* Fenêtre du dernier temps. Elle est posée au-dessus du voile et du fondu noir : c'est la seule position où la matière reste réellement visible, le voile atteignant 96 % d'opacité juste sous la phrase. Elle n'existe que sur ce temps — les trois premiers plans du hero ne changent pas. .hero__media portant déjà un z-index, la fenêtre ne peut jamais passer devant la colonne de texte. */ .abchome .hero__win{ position:absolute;inset:0 0 0 auto;width:46%;z-index:4;pointer-events:none; opacity:0;transition:opacity 1.1s var(--e); -webkit-mask-image:linear-gradient(to left,#000 26%,rgba(0,0,0,.55) 68%,transparent 100%); mask-image:linear-gradient(to left,#000 26%,rgba(0,0,0,.55) 68%,transparent 100%) } .abchome .hero__win video{ width:100%;height:100%;object-fit:cover;display:block; filter:grayscale(1) contrast(1.06) brightness(.98) } .abchome.abc-motion .hero.is-out .hero__win{opacity:.38} @media(max-width:899.98px){ /* Mobile : la fenêtre passe derrière toute la largeur, plus discrète, et reste sur le poster — aucune vidéo n'est chargée. */ .abchome .hero__win{ width:100%; -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.5) 52%,transparent 88%); mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.5) 52%,transparent 88%) } /* Le haut du plan 03 est très lumineux : sur mobile le cadrage descend vers une zone médiane, sinon la barre de navigation devient illisible avant que le fond du header ne se solidifie. */ .abchome .hero__win video{object-position:50% 58%} .abchome.abc-motion .hero.is-out .hero__win{opacity:.28} } .abchome .hero__copy{ position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto; padding:0 var(--gut) clamp(3rem,9vh,6rem) } .abchome .beat{display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start} .abchome .hero__kicker{ margin:0;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap; font-size:.68rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--text-2) } .abchome .hero__kicker i{width:22px;height:1px;background:var(--line-2);display:block} .abchome .hero__h1{ margin:0;font-family:var(--ff-d);font-weight:800; font-size:clamp(1.85rem,6.2vw,5.1rem);line-height:.98;letter-spacing:-.038em; text-wrap:balance;max-width:15ch } /* Le plancher du clamp est calibré sur « durablement », le mot le plus long du titre : 10,02 × la taille de police. Sous 360 px, la largeur utile ne suffit plus et le titre repasse en valeur relative. */ @media(max-width:359.98px){.abchome .hero__h1{font-size:8.2vw}} /* Sous 480 px, la ligne de contexte s'empile au lieu de laisser un filet orphelin en fin de ligne. */ @media(max-width:479.98px){ .abchome .hero__kicker{flex-direction:column;align-items:flex-start;gap:.3rem} .abchome .hero__kicker i{display:none} } /* Le mot occupe 90 à 95 % de la largeur utile et déborde à peine — la tension reste lisible comme un parti pris, jamais comme une coupe. Le coefficient vw est calibré sur ACQUISITION, le plus long des deux. */ .abchome .hero__word{ margin:0 0 0 -.04em;font-family:var(--ff-d);font-weight:800;text-transform:uppercase; font-size:clamp(1.9rem,8.4vw,7.5rem);line-height:.84;letter-spacing:-.045em; white-space:nowrap } .abchome .hero__note{margin:0;max-width:38ch;color:var(--text-2);font-size:clamp(.95rem,1.6vw,1.1rem)} /* Contexte du H1 : qui parle, de quoi il s'agit, pour qui. Il reste sous le titre en permanence — ce n'est pas un temps de la séquence. */ .abchome .hero__lead{ margin:clamp(1rem,2.4vh,1.6rem) 0 0;max-width:56ch; color:var(--text-3);font-size:clamp(.9rem,1.35vw,1rem);line-height:1.6 } .abchome .hero__out{ margin:0;font-family:var(--ff-d);font-weight:800; font-size:clamp(1.75rem,6vw,4.6rem);line-height:1;letter-spacing:-.036em; text-wrap:balance;max-width:16ch } /* Deux CTA de nature différente : l'un commercial, l'autre exploratoire. Ils ne partagent ni le même corps ni la même couleur, et surtout pas la même capsule. La respiration entre eux est explicite. */ .abchome .hero__acts{ margin:clamp(1.75rem,4vh,2.75rem) 0 0; display:flex;flex-wrap:wrap;align-items:center; gap:clamp(1.5rem,3vw,3rem) } /* Lien secondaire : plus petit, sans filet, il ne concurrence jamais le lien principal. Signalé par la flèche et le contraste seuls. */ .abchome .tlink--min{ border-bottom:0;padding:0;font-size:.92rem;color:var(--text-3);letter-spacing:.01em } .abchome .tlink--min::after{font-size:.9em} .abchome .tlink--min:hover{color:var(--text)} .abchome .hero__cue{ position:absolute;right:var(--gut);bottom:clamp(3rem,9vh,6rem);z-index:2;margin:0; font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-3) } .abchome .hero__rail{display:none} /* Sans JS : les quatre temps s'empilent, tout est lisible. */ .abchome .hero__copy .beat + .beat{margin-top:2.5rem} .abchome.abc-js .plan__poster{opacity:1} /* ── Régime animé ─────────────────────────────────────────────── */ .abchome.abc-motion .hero{height:calc(100svh + var(--hero-scroll))} .abchome.abc-motion .hero__stage{position:sticky;top:0;height:100svh;min-height:0} .abchome.abc-motion .hero__copy{display:grid;grid-template-columns:minmax(0,1fr)} .abchome.abc-motion .beat{grid-area:1/1;align-self:end;opacity:0;visibility:hidden;margin-top:0!important} .abchome.abc-motion .beat.is-on{opacity:1;visibility:visible} .abchome.abc-motion .hero__rail{ display:block;position:absolute;left:0;right:0;bottom:0;height:1px;z-index:3; background:var(--line) } .abchome.abc-motion .hero__rail span{ display:block;height:100%;width:100%;background:var(--text-2); transform:scaleX(0);transform-origin:left center } .abchome.abc-motion .plan{transition:opacity .9s var(--e)} .abchome.abc-motion .beat{transition:opacity .55s var(--e),visibility .55s var(--e)} .abchome.abc-motion .hero__cue{transition:opacity .4s var(--e)} .abchome.abc-motion .hero__cue.is-off{opacity:0} /* ═══════════════════════════════════════════════════════════════ Sections communes ═══════════════════════════════════════════════════════════════ */ .abchome .sec{position:relative;padding:clamp(5rem,13vh,9.5rem) 0} .abchome .sec--quiet{padding:clamp(4rem,10vh,7rem) 0} /* Le hero s'achève en noir plein ; la preuve démarre dans ce même noir, avec une amorce longue pour que la bascule reste imperceptible. */ .abchome #preuve{padding-top:clamp(7rem,20vh,14rem)} .abchome .sec--rule{border-top:1px solid var(--line)} .abchome [data-rv]{opacity:1} .abchome.abc-motion [data-rv]{opacity:0;transform:translateY(14px)} .abchome.abc-motion [data-rv].is-in{ opacity:1;transform:none; transition:opacity 1s var(--e),transform 1s var(--e) } /* Les grands titres se dévoilent par un masque plutôt qu'en fondu : c'est ce qui fait la différence entre « un bloc arrive » et « une page se déroule ». Mécanique reprise de Text Reveal (Mask). */ .abchome.abc-motion .h2[data-rv], .abchome.abc-motion .quote blockquote[data-rv]{ opacity:1;transform:none; clip-path:inset(0 0 105% 0) } .abchome.abc-motion .h2[data-rv].is-in, .abchome.abc-motion .quote blockquote[data-rv].is-in{ clip-path:inset(0 0 -20% 0); transition:clip-path 1.1s var(--e) } /* ── 02 · Preuve — bande de marques ──────────────────────────── Réf. Logo Marquee (@ddoemonn) pour l'accessibilité (pause au survol ET au focus, reduced-motion) et Blurred Marquee (@grootstudio) pour les bords masqués. Les marques entrent et sortent du noir. */ .abchome .sec--proof{padding:clamp(3.5rem,9vh,6rem) 0 clamp(5rem,13vh,9rem)} .abchome .brands{ --fade:16%; display:flex;flex-direction:column;gap:.25rem;overflow:hidden; margin-bottom:clamp(3.5rem,9vh,6rem); -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent); mask-image:linear-gradient(to right,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent) } .abchome .brands__row{display:flex;overflow:hidden} .abchome .brands__track{display:flex;flex:none;min-width:100%;will-change:transform} .abchome.abc-motion .brands__track[data-dir="l"]{animation:abcd-br-l var(--dur,200s) linear infinite} .abchome.abc-motion .brands__track[data-dir="r"]{animation:abcd-br-r var(--dur,250s) linear infinite} @keyframes abcd-br-l{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} @keyframes abcd-br-r{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}} .abchome .brands:hover .brands__track, .abchome .brands:focus-within .brands__track{animation-play-state:paused} .abchome .brand{ flex:none;display:flex;align-items:center; height:clamp(2.6rem,5vw,3.6rem);padding:0 clamp(1.5rem,3.5vw,3rem); transition:color .6s var(--e),opacity .6s var(--e) } /* Nom typographique temporaire : corps unique, aucune variation simulée. */ .abchome .brand__t{ font-family:var(--ff-d);font-weight:500; font-size:clamp(1.05rem,2.1vw,1.5rem);line-height:1;letter-spacing:-.018em; color:var(--text-3);white-space:nowrap } /* Logo réel : il suffit de remplacer .brand__t par cette image. */ .abchome .brand__i{height:100%;width:auto;object-fit:contain; filter:grayscale(1) brightness(0) invert(1);opacity:.55; transition:opacity .4s var(--e)} .abchome .brands .brand:hover .brand__i{opacity:1} .abchome .brands .brand:hover .brand__t{color:var(--text)} .abchome .brands:hover .brand{opacity:.45} .abchome .brands .brand:hover{opacity:1} .abchome .brands .brand:hover{color:var(--text)} .abchome .proof__k{margin-bottom:clamp(2.5rem,6vh,4rem)} .abchome .figures{display:grid;gap:clamp(2.5rem,6vw,5rem);grid-template-columns:1fr} @media(min-width:640px){.abchome .figures{grid-template-columns:1fr 1fr}} .abchome .figures>p{margin:0;display:flex;flex-direction:column;gap:.6rem} .abchome .figures__n{ font-family:var(--ff-d);font-weight:800; font-size:clamp(3.4rem,10vw,7rem);line-height:.84;letter-spacing:-.055em; font-variant-numeric:tabular-nums } .abchome .figures__l{color:var(--text-3);font-size:.95rem;line-height:1.5} /* ── 03 · Module conversationnel ─────────────────────────────── Reproduction de @kokonutd/v0-ai-chat, mesure pour mesure : colonne max-w-4xl (56rem) centrée · titre 4xl au-dessus · boîte rounded-xl (12px) + bordure 1px · textarea px-4 py-3, min 60px, max 200px, auto-extensible · barre d'outils p-3 · bouton d'envoi qui s'inverse en blanc dès qu'il y a du texte · rangée de pills rounded-full bordées, gap 12px, sous la boîte. Seule la palette change : neutral-900/800 → ink de marque. */ /* ── Écrin du module conversationnel ──────────────────────────── Le chat reste le point focal : rien de ce qui suit ne le touche. Trois couches seulement derrière lui — une bande de matière à droite, une lumière bleue très sombre, le grain commun. */ .abchome .sec--pb{position:relative;overflow:hidden} .abchome .sec--pb>.wrap, .abchome .sec--pb>.v0{position:relative;z-index:1} /* Écrin central : une grande matière derrière le module, plus large et plus haute que la section, éteinte sur les bords. Le plan 03 est déjà en cache — il sert de poster au hero — donc aucune requête de plus. Deux masques se composent par imbrication plutôt que par mask-composite, dont la syntaxe diffère encore entre moteurs : · le conteneur porte le fondu VERTICAL, calé pour être déjà à zéro bien avant les limites de la section — c'est ce qui supprime la couture ; · l'enfant porte le fondu RADIAL, qui éteint les bords latéraux. La couche déborde de 12 % en haut comme en bas : la rampe est donc plus longue que la zone réellement visible, et la matière n'apparaît jamais d'un coup. */ .abchome .pb__band{ position:absolute;left:50%;top:-12%;transform:translateX(-50%); width:min(94%,88rem);height:124%;z-index:0;pointer-events:none; -webkit-mask-image:linear-gradient(to bottom, transparent 0%,transparent 12%,rgba(0,0,0,.45) 24%,#000 36%, #000 62%,rgba(0,0,0,.4) 78%,transparent 90%,transparent 100%); mask-image:linear-gradient(to bottom, transparent 0%,transparent 12%,rgba(0,0,0,.45) 24%,#000 36%, #000 62%,rgba(0,0,0,.4) 78%,transparent 90%,transparent 100%) } .abchome .pb__band::before{ content:'';position:absolute;inset:0; background:url("../../../../uploads/abc-home/plan-03.jpg") center 24% / cover no-repeat; filter:grayscale(1) contrast(1.04) brightness(1.05); opacity:.34; -webkit-mask-image:radial-gradient(46% 68% at 50% 50%,#000 0%,rgba(0,0,0,.5) 52%,transparent 100%); mask-image:radial-gradient(46% 68% at 50% 50%,#000 0%,rgba(0,0,0,.5) 52%,transparent 100%) } /* Lumière diffuse : le bleu de marque, à une intensité où il ne se voit pas comme une couleur mais comme une profondeur. */ .abchome .pb__glow{ position:absolute;inset:0;z-index:0;pointer-events:none; background: /* Poche sombre au centre : la matière fleurit autour du module, mais le texte retrouve un fond franc. Sans elle, le sous-titre tombait à 2,89:1, sous le seuil AA — mesuré, pas estimé. */ radial-gradient(52% 46% at 50% 42%,rgba(6,6,10,.62) 0%,rgba(6,6,10,.34) 58%,transparent 80%), radial-gradient(52% 40% at 50% 44%,rgba(26,111,255,.14),transparent 72%), radial-gradient(86% 42% at 50% 52%,rgba(26,111,255,.05),transparent 76%) } @media(max-width:899.98px){ /* Mobile : la bande passe derrière toute la colonne, très effacée, et le halo se resserre. Rien qui puisse gêner la lecture du module. */ .abchome .pb__band{width:132%;top:-10%;height:120%} .abchome .pb__band::before{opacity:.3; -webkit-mask-image:radial-gradient(46% 62% at 50% 46%,#000 0%,rgba(0,0,0,.45) 55%,transparent 100%); mask-image:radial-gradient(46% 62% at 50% 46%,#000 0%,rgba(0,0,0,.45) 55%,transparent 100%)} .abchome .pb__glow{background: radial-gradient(70% 44% at 50% 40%,rgba(6,6,10,.6) 0%,rgba(6,6,10,.3) 60%,transparent 82%), radial-gradient(90% 40% at 50% 32%,rgba(26,111,255,.09),transparent 70%)} } .abchome .v0{max-width:56rem;margin:0 auto;padding:0 var(--gut);text-align:center} /* La composition reste centrée : titre, sous-titre et module sur le même axe, l'écrin derrière eux. */ .abchome .v0__h{ margin:0;font-family:var(--ff-d);font-weight:700; font-size:clamp(1.75rem,4.4vw,2.6rem);line-height:1.06;letter-spacing:-.032em; text-wrap:balance } .abchome .v0__sub{margin:1rem 0 0;color:var(--text-3);font-size:1rem} .abchome .v0__col{margin-top:2rem;text-align:left} /* Fil de conversation — au-dessus de la boîte, comme un vrai assistant. */ .abchome .v0__thread{display:flex;flex-direction:column;gap:1.25rem;margin-bottom:1.25rem} .abchome .v0__thread:empty{display:none} .abchome .msg{display:flex;flex-direction:column;gap:.4rem;max-width:100%;opacity:0;transform:translateY(10px)} .abchome .msg.is-in{opacity:1;transform:none;transition:opacity .45s var(--e),transform .45s var(--e)} .abchome .msg__who{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)} .abchome .msg__t{margin:0;font-size:.975rem;line-height:1.62;color:var(--text-2)} .abchome .msg__t + .msg__t{margin-top:.8rem} .abchome .msg--you{align-self:flex-end;align-items:flex-end;text-align:right;max-width:min(100%,36rem)} .abchome .msg--you .msg__t{ color:var(--text);font-family:var(--ff-d);font-weight:600;letter-spacing:-.015em; font-size:clamp(1rem,2vw,1.2rem);line-height:1.32; border-right:2px solid var(--blue);padding-right:.9rem } .abchome .msg--abc{align-self:flex-start;max-width:min(100%,44rem)} .abchome .msg__acts{display:flex;flex-wrap:wrap;gap:1.25rem;margin-top:1.1rem} /* Boîte de saisie */ .abchome .v0__box{ position:relative;background:var(--ink-2); border:1px solid var(--line);border-radius:12px } .abchome .v0__scroll{overflow-y:auto} .abchome .v0__ta{ display:block;width:100%;padding:.75rem 1rem;resize:none;background:transparent; border:0;outline:none;color:var(--text); font-family:var(--ff-b);font-size:.9rem;line-height:1.5; min-height:60px;overflow:hidden } .abchome .v0__ta::placeholder{color:var(--text-3);font-size:.9rem} .abchome .v0__box:focus-within{border-color:var(--line-2)} .abchome .v0__bar{display:flex;align-items:center;justify-content:space-between;padding:.75rem;gap:.5rem} .abchome .v0__grp{display:flex;align-items:center;gap:.5rem} .abchome .v0__icon{ display:inline-flex;align-items:center;gap:.25rem; padding:.5rem;border:0;border-radius:8px;background:transparent;cursor:pointer; color:var(--text);transition:background .25s var(--e) } .abchome .v0__icon:hover{background:var(--ink-3)} .abchome .v0__icon span{ font-size:.7rem;color:var(--text-3);max-width:0;overflow:hidden;white-space:nowrap; transition:max-width .3s var(--e) } .abchome .v0__icon:hover span, .abchome .v0__icon:focus-visible span{max-width:7rem} .abchome .v0__dashed{ display:inline-flex;align-items:center;gap:.25rem; padding:.25rem .5rem;border-radius:8px;text-decoration:none; border:1px dashed var(--line-2);color:var(--text-3); font-size:.8rem;white-space:nowrap; transition:border-color .25s var(--e),background .25s var(--e),color .25s var(--e) } .abchome .v0__dashed:hover{border-color:var(--text-3);background:var(--ink-3);color:var(--text)} .abchome .v0__send{ display:inline-grid;place-items:center; padding:.375rem;border-radius:8px;cursor:pointer; border:1px solid var(--line-2);background:transparent;color:var(--text-3); transition:background .25s var(--e),color .25s var(--e),border-color .25s var(--e) } .abchome .v0__send:hover{border-color:var(--text-3);background:var(--ink-3)} .abchome .v0__send.is-armed{background:var(--text);color:var(--ink);border-color:var(--text)} /* Pills sous la boîte */ .abchome .v0__acts{ display:flex;align-items:center;justify-content:center;flex-wrap:wrap; gap:.75rem;margin-top:1rem } .abchome .v0act{ display:inline-flex;align-items:center;gap:.5rem; padding:.5rem 1rem;border-radius:100px;cursor:pointer; background:var(--ink-2);border:1px solid var(--line); color:var(--text-3);font-family:var(--ff-b);font-size:.75rem; transition:background .25s var(--e),color .25s var(--e),border-color .25s var(--e) } .abchome .v0act:hover{background:var(--ink-3);color:var(--text)} .abchome .v0act[aria-pressed="true"]{color:var(--blue-lift);border-color:rgba(26,111,255,.5)} .abchome .v0act svg{flex:none;opacity:.75} @media(max-width:639.98px){ .abchome .v0__acts{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto; margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut); scrollbar-width:none} .abchome .v0__acts::-webkit-scrollbar{display:none} .abchome .v0act{white-space:nowrap} .abchome .v0__dashed span{display:none} } /* ── 03bis · Situations — couche éditoriale ──────────────────── Une liste numérotée, deux colonnes sur grand écran. Aucun cadre, aucune carte : des filets et de la typographie. Le contenu est identique avec ou sans JavaScript. */ .abchome .sec--sit{position:relative;padding:clamp(5rem,12vh,8.5rem) 0} .abchome .sec--sit>.wrap{position:relative;z-index:1} .abchome .sit{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vh,3rem)} /* Le chapitre s'annonce par son titre, pas par un chapeau. Deux lignes : la première recule, la seconde porte le mot qui compte. Le décalage et le contraste suffisent — aucun effet supplémentaire. */ .abchome .sit__h{ margin:0;font-family:var(--ff-d);font-weight:800;letter-spacing:-.042em; font-size:clamp(1.75rem,5.4vw,4.7rem);line-height:.94; display:flex;flex-direction:column;align-items:flex-start } .abchome .sit__h span{display:block;color:var(--text-3)} .abchome .sit__h .sit__h-b{color:var(--text)} .abchome .sit__intro{margin:0;max-width:52ch;color:var(--text-3);font-size:1rem;line-height:1.62} .abchome .sit__l{list-style:none;margin:0;padding:0;counter-reset:sit} .abchome .sit__i{ counter-increment:sit;position:relative;border-top:1px solid var(--line); padding:clamp(1.5rem,3.5vh,2.2rem) 0 clamp(1.5rem,3.5vh,2.2rem) 3.2rem } .abchome .sit__i:last-child{border-bottom:1px solid var(--line)} .abchome .sit__i::before{ content:'0' counter(sit);position:absolute;left:0;top:clamp(1.65rem,3.75vh,2.4rem); font-size:.68rem;letter-spacing:.18em;color:var(--text-3);font-variant-numeric:tabular-nums } .abchome .sit__t{ margin:0;font-family:var(--ff-d);font-weight:700;letter-spacing:-.026em; font-size:clamp(1.1rem,2.1vw,1.45rem);line-height:1.2;color:var(--text);text-wrap:balance } .abchome .sit__p{margin:.7rem 0 0;max-width:60ch;color:var(--text-3);font-size:.98rem;line-height:1.62} /* Lien éditorial dans le corps du texte : jamais de soulignement plein, un filet discret qui se réveille au survol. */ .abchome .sit__p a{ color:var(--text-2);text-decoration:none;border-bottom:1px solid var(--line-2); transition:color .25s var(--e),border-color .25s var(--e) } .abchome .sit__p a:hover{color:var(--blue-lift);border-bottom-color:var(--blue)} @media(min-width:900px){ /* Le titre occupe toute la largeur en haut ; la liste commence dessous, avec le chapeau dans la colonne opposée. Beaucoup de vide entre les deux : c'est ce vide qui donne son rang au chapitre. */ .abchome .sit{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); column-gap:clamp(3rem,7vw,6.5rem);align-items:start; row-gap:clamp(3.5rem,9vh,6rem)} .abchome .sit__head{grid-column:1 / -1} .abchome .sit__lede{grid-column:1;position:sticky;top:calc(var(--nav-h) + 4vh)} .abchome .sit__l{grid-column:2} .abchome .sit__i{padding-left:3.6rem} } /* ── 04 · Conviction — chorégraphie ──────────────────────────── Réf. Scroll Choreography (@componentry) : des éléments dispersés dans le cadre convergent vers une composition unique au fil du scroll. Ici la convergence est typographique — pas de schéma, pas de nœuds. --p (0 → 1) est piloté en JS. */ .abchome .cvz{position:relative;background:var(--ink)} .abchome.abc-motion .cvz{height:260vh} .abchome .cvz__stage{ position:relative;min-height:100svh;overflow:hidden; display:flex;flex-direction:column;justify-content:center; padding:clamp(5rem,12vh,8rem) var(--gut) } .abchome.abc-motion .cvz__stage{position:sticky;top:0;height:100svh} .abchome .cvz__field{position:absolute;inset:0;pointer-events:none} @media(min-width:900px){ /* Le champ de mots occupe la moitié droite : la colonne de texte garde la gauche, et la convergence finale se lit comme une seconde colonne. */ .abchome .cvz__field{inset:0 0 0 48%} } .abchome .cvw{ position:absolute;left:var(--x);top:var(--y); will-change:transform; font-family:var(--ff-d);font-weight:700;letter-spacing:-.03em;line-height:1; color:var(--text-3);white-space:nowrap; font-size:clamp(1.5rem,4.6vw,3.4rem); transform-origin:left center } /* État final : colonne alignée à gauche, tailles égalisées, filet commun. */ /* Aucun filet, aucune connexion : l'ordre se lit à l'alignement seul. */ .abchome .cvz__copy{position:relative;z-index:2;display:flex;flex-direction:column;gap:1.25rem; max-width:var(--maxw);margin:0 auto;width:100%} @media(min-width:900px){ .abchome .cvz__copy, .abchome .cvz__cta{max-width:calc(var(--maxw) * .44)} .abchome .cvz__copy{margin-inline:0} .abchome .cvz__cta{margin-inline:0} .abchome .cvz__stage{align-items:flex-start} } .abchome .cvz__t{ margin:0;font-family:var(--ff-d);font-weight:700; font-size:clamp(1.9rem,5vw,3.6rem);line-height:1.04;letter-spacing:-.034em; max-width:18ch;text-wrap:balance;grid-area:1/1 } .abchome.abc-motion .cvz__copy{display:grid;grid-template-columns:minmax(0,1fr)} .abchome.abc-motion .cvz__copy .eyebrow{grid-row:1;margin-bottom:1.25rem} .abchome.abc-motion .cvz__t{grid-row:2;grid-column:1;transition:opacity .5s var(--e),transform .5s var(--e)} .abchome.abc-motion .cvz__t[data-state="b"]{opacity:0;transform:translateY(10px)} .abchome.abc-motion .cvz.is-b .cvz__t[data-state="a"]{opacity:0;transform:translateY(-10px)} .abchome.abc-motion .cvz.is-b .cvz__t[data-state="b"]{opacity:1;transform:none} /* Appui du propos : lisible en permanence, il ne participe pas à la bascule et occupe donc sa propre ligne de grille. */ .abchome .cvz__p{margin:0;max-width:44ch;color:var(--text-3);font-size:.98rem;line-height:1.62} .abchome.abc-motion .cvz__p{grid-row:3;grid-column:1;margin-top:clamp(1.5rem,4vh,2.5rem)} .abchome .cvz__cta{position:relative;z-index:2;margin:clamp(2rem,5vh,3rem) auto 0; max-width:var(--maxw);width:100%} @media(max-width:767.98px){ /* Mobile : pas de scrub. Les mots s'alignent d'emblée, le propos reste. */ .abchome.abc-motion .cvz{height:auto} .abchome.abc-motion .cvz__stage{position:relative;height:auto;min-height:0; padding:clamp(4rem,10vh,6rem) var(--gut)} .abchome .cvz__field{position:relative;inset:auto;display:flex;flex-direction:column; gap:.15rem;margin-bottom:2.5rem} .abchome .cvw{position:relative;left:auto;top:auto;transform:none!important; font-size:clamp(1.4rem,7vw,2rem);color:var(--text)} } /* ── Pivot « Et chez vous ? » ────────────────────────────────── Une transition, pas une conversion : aucun lien, aucun bouton. Le chapitre Contact arrive juste après. Le titre déborde volontairement à gauche et se laisse rogner par le cadre — c'est ce qui lui donne son échelle. Aucun média : une lumière, du grain, de la typographie. */ .abchome .andyou{ position:relative;overflow:hidden; min-height:clamp(20rem,58vh,34rem);display:flex;align-items:center; padding:clamp(4rem,11vh,7rem) 0; background: /* Le pivot se dissout dans le noir du Contact : aucune couture. */ linear-gradient(to bottom,transparent 56%,var(--ink) 100%), radial-gradient(70% 60% at 18% 46%,rgba(26,111,255,.085),transparent 70%), radial-gradient(60% 50% at 86% 78%,rgba(232,232,240,.035),transparent 72%) } .abchome .andyou__in{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)} .abchome .andyou__t{ margin:0 0 0 -.055em;font-family:var(--ff-d);font-weight:800; font-size:clamp(2.6rem,14.6vw,12.7rem);line-height:.84;letter-spacing:-.05em; color:var(--text) } /* ── 06 · Témoignages — marquee ──────────────────────────────── Reproduction de @shadcnspace/marquee-01 : deux rangées défilant en sens opposés, --duration 20s, cartes w-64 (16rem) rounded-lg avec bordure 1px et padding 1rem, avatar 32px, nom text-sm / rôle text-xs, corps text-sm tronqué, gap 1rem, dégradés de bord sur 1/4 de largeur, pause au survol. Palette et typographie passées en ABC. */ .abchome .sec--tm{padding:clamp(5rem,13vh,9rem) 0} .abchome .mq{ position:relative;display:flex;flex-direction:column;gap:1rem; width:100%;overflow:hidden;margin-top:clamp(2.5rem,6vh,4rem); --mq-dur:34s } .abchome .mq__row{display:flex;overflow:hidden;padding:.5rem 0} .abchome .mq__track{display:flex;gap:1rem;flex:none;min-width:100%;will-change:transform; list-style:none;margin:0;padding:0} .abchome.abc-motion .mq__track[data-dir="fwd"]{animation:abcd-mq-l var(--mq-dur) linear infinite} .abchome.abc-motion .mq__track[data-dir="rev"]{animation:abcd-mq-r var(--mq-dur) linear infinite} @keyframes abcd-mq-l{from{transform:translateX(0)}to{transform:translateX(calc(-50% - .5rem))}} @keyframes abcd-mq-r{from{transform:translateX(calc(-50% - .5rem))}to{transform:translateX(0)}} .abchome .mq:hover .mq__track, .abchome .mq:focus-within .mq__track{animation-play-state:paused} .abchome .mqc{ position:relative;width:16rem;flex:none;text-align:left;list-style:none; overflow:hidden;padding:1rem;border-radius:8px; background:var(--ink-2);border:1px solid var(--line); display:flex;flex-direction:column;gap:.5rem; font-family:var(--ff-b); transition:border-color .3s var(--e),background .3s var(--e) } .abchome .mqc:has(.mqc__open){cursor:pointer} .abchome .mqc:hover{border-color:var(--line-2);background:var(--ink-3)} .abchome .mqc__f{margin:0;display:flex;flex-direction:column;gap:.5rem} .abchome .mqc__top{display:flex;flex-direction:row;align-items:center;gap:.5rem} .abchome .mqc__av{ width:32px;height:32px;flex:none;border-radius:50%;overflow:hidden; background:var(--ink-3);border:1px solid var(--line-2); display:grid;place-items:center; font-family:var(--ff-d);font-weight:700;font-size:.62rem;color:var(--text-3) } .abchome .mqc__av img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)} .abchome .mqc__who{display:flex;flex-direction:column;min-width:0} .abchome .mqc__n{font-size:.875rem;font-weight:500;color:var(--text);white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .abchome .mqc__r{font-size:.75rem;font-weight:500;color:var(--text-3);white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .abchome .mqc__b{ margin:0;font-size:.875rem;line-height:1.5;color:var(--text-2); display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden } .abchome .mqc__b p{margin:0} /* Le bouton recouvre la carte : la citation reste un
, et l'ensemble reste cliquable et atteignable au clavier. Il est vide — son intitulé est porté par aria-label, aucun texte n'est déporté. */ .abchome .mqc__open{ position:absolute;inset:0;z-index:1;appearance:none; border:0;background:none;padding:0;cursor:pointer } .abchome .mqc:has(.mqc__open:focus-visible){border-color:var(--line-2);background:var(--ink-3)} .abchome .mqc__kpi{margin:0;font-size:.72rem;color:var(--text-3)} .abchome .mqc__kpi b{font-family:var(--ff-d);font-weight:700;color:var(--text)} .abchome .mq__fade{position:absolute;inset-block:0;width:22%;pointer-events:none;z-index:2} .abchome .mq__fade--l{left:0;background:linear-gradient(to right,var(--ink),transparent)} .abchome .mq__fade--r{right:0;background:linear-gradient(to left,var(--ink),transparent)} /* Sans animation : les rangées deviennent défilables au doigt/clavier. */ /* Sans mouvement — pas de script, ou mouvement réduit — le défilé devient une grille : les sept avis sont lus en entier, rien n'est tronqué et aucun geste n'est requis. */ .abchome .mq__row.is-manual{overflow-x:auto;scrollbar-width:none} .abchome .mq__row.is-manual::-webkit-scrollbar{display:none} .abchome:not(.abc-motion) .mq{gap:0} .abchome:not(.abc-motion) .mq__row{display:block;overflow:visible;padding:0} .abchome:not(.abc-motion) .mq__track{ display:grid;grid-template-columns:1fr;gap:0; max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);min-width:0 } @media(min-width:768px){ .abchome:not(.abc-motion) .mq__track{grid-template-columns:1fr 1fr;column-gap:clamp(2rem,5vw,4rem)} } .abchome:not(.abc-motion) .mqc{ width:auto;border:0;border-top:1px solid var(--line);border-radius:0; background:none;padding:1.6rem 0 } .abchome:not(.abc-motion) .mqc:hover{background:none;border-top-color:var(--line)} .abchome:not(.abc-motion) .mqc__b{display:block;overflow:visible;-webkit-line-clamp:none} .abchome:not(.abc-motion) .mqc__b p + p{margin-top:.6rem} /* Verbatim intégral */ .abchome .tmd{ border:1px solid var(--line-2);border-radius:12px;background:var(--ink-2); color:var(--text);max-width:44rem;width:calc(100% - 2rem);padding:clamp(1.75rem,4vw,2.75rem); position:fixed;inset:0;margin:auto } .abchome .tmd::backdrop{background:rgba(6,6,10,.86)} .abchome .tmd__x{ position:absolute;top:.9rem;right:.9rem;width:36px;height:36px;cursor:pointer; border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--text-3); transition:color .25s var(--e),border-color .25s var(--e) } .abchome .tmd__x:hover{color:var(--text);border-color:var(--text-3)} .abchome .tmd__q{ margin:0 2rem 0 0;font-family:var(--ff-d);font-weight:600;letter-spacing:-.022em; font-size:clamp(1.05rem,2.3vw,1.5rem);line-height:1.34 } .abchome .tmd__q p{margin:0} .abchome .tmd__q p + p{margin-top:.8em} .abchome .tmd__by{margin:1.75rem 0 0;display:flex;flex-direction:column;gap:.15rem;font-size:.92rem} .abchome .tmd__by b{font-weight:500;color:var(--text)} .abchome .tmd__by span{color:var(--text-3);font-size:.86rem} .abchome .tmd__kpi{margin:1rem 0 0;font-size:.86rem;color:var(--text-3);line-height:1.5} .abchome .tmd__kpi b{font-family:var(--ff-d);font-weight:700;color:var(--text)} .abchome .tmd__kpi:empty{display:none} /* ── 07 · Méthode — Scroll 01 ────────────────────────────────── Reproduction de @felipemenezes098/scroll-01 : deux colonnes, média collant à gauche qui permute par fondu 0,15 s linéaire, colonne texte à droite avec py 35vh et espacement 30vh entre blocs. Sous 768 px, la référence bascule sur une pile simple — on la suit. */ .abchome .s01{max-width:var(--maxw);margin:clamp(3rem,8vh,5rem) auto 0;padding:0 var(--gut)} .abchome .s01__media{display:none} .abchome .s01__inline{ width:100%;height:clamp(13rem,42vw,18rem);object-fit:cover; filter:grayscale(1) contrast(1.05);margin-top:1.5rem } .abchome .s01__item{display:flex;flex-direction:column;gap:.7rem;max-width:52ch} .abchome .s01__flow{display:flex;flex-direction:column;gap:clamp(3.5rem,9vh,5rem)} .abchome .s01__n{font-size:.7rem;letter-spacing:.2em;color:var(--text-3);font-variant-numeric:tabular-nums} .abchome .s01__t{margin:0;font-family:var(--ff-d);font-weight:700; font-size:clamp(1.5rem,3.6vw,2.4rem);line-height:1.06;letter-spacing:-.03em} .abchome .s01__p{margin:0;color:var(--text-3);font-size:1rem} @media(min-width:768px){ .abchome .s01{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,4.5rem)} .abchome .s01__inline{display:none} .abchome .s01__media{ display:block;position:sticky;top:calc(var(--nav-h) + 3vh); height:min(70vh,34rem);overflow:hidden;background:var(--ink-2) } .abchome .s01__media img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:grayscale(1) contrast(1.05);opacity:0; transition:opacity .15s linear } .abchome .s01__media img.is-on{opacity:1} .abchome .s01__idx{ position:absolute;left:1rem;bottom:1rem;z-index:2; font-size:.7rem;letter-spacing:.16em;color:var(--text-2); font-variant-numeric:tabular-nums; background:linear-gradient(to top,rgba(6,6,10,.8),transparent);padding:.4rem .6rem } .abchome .s01__idx i{font-style:normal;opacity:.5;margin:0 .3rem} .abchome .s01__flow{display:block;padding:35vh 0} .abchome .s01__item{margin-bottom:30vh} .abchome .s01__item:last-child{margin-bottom:0} .abchome.abc-motion .s01__item{opacity:var(--o,1);transform:translateY(var(--y,0))} } /* ── 11 · Contact ────────────────────────────────────────────── Grille asymétrique inspirée de contact-01 (@shadcnspace), mais l'entrée n'est pas un formulaire : deux chemins typographiques, et seul celui choisi se déploie. */ .abchome .cx{position:relative;padding:clamp(5rem,13vh,9rem) 0 0;border-top:1px solid var(--line)} .abchome .cx__h{ margin:.75rem 0 0;font-family:var(--ff-d);font-weight:800; /* Calibré sur « acquisition. », la ligne la plus longue : le titre remplit la colonne sans jamais être coupé. */ font-size:clamp(1.9rem,4.6vw,3.6rem);line-height:1.02;letter-spacing:-.036em; max-width:20ch } .abchome .cx__paths{ max-width:var(--maxw);margin:clamp(4rem,11vh,8rem) auto 0;padding:0 var(--gut); display:grid;grid-template-columns:1fr;border-top:1px solid var(--line) } @media(min-width:840px){.abchome .cx__paths{grid-template-columns:1fr 1fr}} /* Les deux cartes sont de natures différentes — « Prendre rendez-vous » ouvre un panneau (