/* ══════════════════════════════════════════════════════════════════════════ HERO « le curseur × typo colossale » — fond sombre A+C · texte indigo (encre profonde + aurore + champ de fibres ; l'accent reste LE #3b30e0 du site) Module autonome : TOUT est préfixé #cs-hero, rien ne fuit dans la page — sauf l'état header.cs-dk, qui appartient au hero (c'est lui qui rend le header illisible tant qu'il est transparent sur la nuit). Les états qui vivaient sur dans le prototype (nomotion, data-phase) vivent ici sur #cs-hero — on ne touche pas au body du site. Direction choisie le 15/08 via cs-hero-lab.js (8 fonds comparés). ══════════════════════════════════════════════════════════════════════════ */ @font-face{ font-family:'Bricolage'; font-style:normal; font-weight:200 800; font-display:swap; src:url(bricolage-var.woff2) format('woff2-variations'); } /* ── la section hôte garde son label (métriques + relais du splash) mais perd toute la mise en page de l'ancien hero. Spécificité 0,2,1 : passe devant les section[data-screen-label="Hero"]{...!important} des blocs mobiles. ── */ section.cs-hero2[data-screen-label="Hero"]{ max-width:none !important; margin:0 !important; padding:0 !important; display:block !important; gap:0 !important; min-height:0 !important; align-items:stretch !important; justify-content:flex-start !important; position:relative; overflow:visible; } #cs-hero{ /* palette NUIT : les noms gardent leur sens sémantique (--cream = le fond, --ink = ce qui écrit dessus) pour que tout le module bascule sans réécriture. L'accent ne bouge pas : c'est LE #3b30e0 du site — assumé à ~2,4:1 sur la nuit parce qu'il ne porte que du display géant. JAMAIS en petit corps ici. */ /* ENCRE VIOLETTE (16/08). Historique, parce qu'il compte pour la suite : le 15/08 le fond était #0E0D12, un noir BLEUTÉ avec aurore violette et points blanc-violacé — « ça fait trop tech, on perd la DA ». Le sombre n'était pas l'erreur, l'AMBIGUÏTÉ l'était : un noir qui tire discrètement au bleu se lit « ciel », pas « encre ». On est passés au chaud, puis Dric a demandé le violet : cette fois le fond est FRANCHEMENT indigo, assumé comme couleur et non comme un noir qui dévie. Les points de trame restent CRÈME (243,239,230) et non blanc-bleu : c'est ce contraste chaud/froid qui les tient du côté de l'encre imprimée plutôt que des étoiles. */ /* --cream vaut EXACTEMENT le fond du shader : c'est ce qui reste visible si WebGL manque, si le contexte est perdu, ou pendant la première frame. */ --cream:#08061F; --cream2:#0F0B33; --paper:#161046; --ink:#F3EFE6; --muted:#9A93B5; --line:rgba(243,239,230,.13); --accent:#3b30e0; /* ⚠️ VRAI INDIGO, ET NON DU LAVANDE — mais pas #3b30e0 non plus, et ce n'est pas un choix, c'est de la physique. Dric : « remets les textes en indigo de la bonne couleur, le "mérite mieux" est violet là » — le #8F80FF précédent était effectivement délavé, il est corrigé. Reste que l'accent de la marque ne PEUT pas écrire sur la nuit : #3b30e0 a une luminance de 0,084, soit plus SOMBRE que le fond de soie sous le titre (0,002 à 0,367). Même posé sur la lueur d'encre qui ramène le fond local à 0,009, il plafonne à 2,28:1 — sous le seuil de 3:1 du très grand corps. ⚠️ ET SURTOUT : ce n'est PAS une question de clarté, c'est une question de TEINTE. Le premier essai remonté (#6B5BFF) était à 246° quand la soie est à 244° — la teinte du fond, juste éclaircie. Un accent ne peut pas se lire « bleu » s'il porte la couleur exacte de ce sur quoi il est posé : il se lira toujours « encore du violet », quelle que soit sa luminosité. D'où #4F74FF, écarté de 17° vers le bleu (227°, saturation pleine) : toujours de l'indigo — pas du bleu roi, qui commence vers 220° — mais assez détaché du fond pour se lire comme une couleur et non comme un reflet. 4,48:1. Toute valeur plus sombre OU rapprochée de 244° doit être re-mesurée. --accent reste intact partout où il est un aplat portant du blanc (CTA, pastilles, bouton de la carte) : là il est fond, pas texte. */ --accent-up:#4F74FF; --sel:#0D99FF; --guide:#FF2D8A; /* mesurés en JS : --cs-head = ce que la scène doit céder en hauteur, --cs-headtop = le décalage à s'imposer quand le header est fixe (il ne prend alors aucune place dans le flux, mais recouvre quand même le haut de la scène) */ --cs-head:145px; --cs-headtop:0px; background:var(--cream); color:var(--ink); font-family:'Inter',system-ui,sans-serif; position:relative; } #cs-hero *{margin:0;padding:0;box-sizing:border-box} /* ══ LA SCÈNE ══ */ #cs-hero .stage{position:relative;min-height:calc(100vh - var(--cs-head)); padding-top:var(--cs-headtop); display:flex;align-items:center;overflow:hidden} /* ══ FOND VIERGE (16/08) — la soie porte le décor à elle seule ══ Décision de Dric, et elle est juste : « enlève ta texture, le truc en incurvé etc, fond vierge, mets juste l'animation sur tout le hero ». Empilées, la trame de points, l'onde indigo, le grain et la poussière rejouaient en moins bien ce que le shader fait déjà par pixel — quatre matières pour une seule surface. Tout est éteint ICI, en CSS, plutôt que retiré du markup : le runtime .dc.html reconstruit le sous-arbre du hero et ferait revenir les nœuds. Les canvases restent donc dans le DOM, muets et jamais peints. */ #cs-hero .grid, #cs-hero #trA,#cs-hero #trB,#cs-hero #trW, #cs-hero .grain,#cs-hero #cs-dust{display:none} /* ── LE VOILE. Une seule couche au-dessus de la soie, reprise mot pour mot du prototype v2 de Dric : un radial qui rassombrit le bas et les coins. Rien de plus — ni lampe crème, ni rabat latéral. La lisibilité du titre ne se joue plus ici mais sur le texte lui-même (voir la lueur d'encre sous .hero-inner) : un voile assez fort pour tenir le crème se serait vu comme un cache gris sur la moitié gauche, et c'est exactement le « fond vierge » qu'on ne veut pas. ── */ #cs-hero .aurora{position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(120% 90% at 50% 110%,rgba(8,6,31,0) 55%,rgba(8,6,31,.55) 100%)} /* le fond WebGL vit derrière tout, à pleine résolution écran (cs-hero-silk.js) */ #cs-hero #cs-silk{position:absolute;inset:0;z-index:0;display:block; width:100%;height:100%;pointer-events:none} /* ── LA LUEUR D'ENCRE. C'est elle qui remplace le voile, et c'est le seul moyen de tenir « fond vierge » ET un texte lisible. Mesuré sur le rendu réel du shader : dans la zone du titre la luminance du fond va de 0,002 à 0,367 — autrement dit une crête de soie peut passer sous un mot et l'effacer. Un voile assez fort pour couvrir ça se voit comme un cache ; une ombre portée sombre, très diffuse et collée aux lettres, ne se voit pas du tout : elle ne noircit que les quelques pixels qui touchent le glyphe, là où le contraste se joue. Trois passes (large, moyenne, courte) plutôt qu'une seule bien opaque, sinon le halo se dessine comme un détourage. Les CTA sont des aplats portant leur propre couleur : ils la remettent à zéro. ── */ #cs-hero .hero-inner{position:relative;z-index:3;width:min(52%,960px);padding-left:clamp(20px,3.4vw,54px); text-shadow:0 0 1.1em rgba(8,6,31,.72),0 0 .45em rgba(8,6,31,.85),0 1px 3px rgba(8,6,31,.6)} #cs-hero .ctas{text-shadow:none} #cs-hero .kicker{display:flex;align-items:center;gap:12px;font-family:'Schibsted Grotesk',sans-serif; font-weight:600;font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:26px} #cs-hero .kline{display:block;width:34px;height:2px;background:var(--accent-up)} /* ══ typo colossale : Bricolage variable — la graisse est vivante ══ */ #cs-hero h1{font-family:'Bricolage','Schibsted Grotesk',sans-serif;font-weight:300;letter-spacing:-.025em; line-height:1;font-size:clamp(42px,5.2vw,96px);color:var(--ink)} #cs-hero h1 em{font-style:normal} /* les 3 lignes du titre. En classe et pas en style inline : le runtime .dc.html réécrit les attributs style, autant ne rien lui laisser à réécrire ici */ #cs-hero h1 .bld{display:block} /* l'indigo porte la promesse, pas le reproche : « fiche Google » reste neutre et c'est la rature qui s'en charge */ #cs-hero h1 .hl{color:var(--accent-up)} /* will-change RETIRE le 18/08/2026. Il etait pose sur CHAQUE lettre du titre (40 spans), soit 40 calques de compositing pour rien : font-variation-settings n'est pas une propriete compositable par le GPU, will-change ne l'accelere donc pas — il ne fait que reserver de la memoire graphique. Sur iPhone, cumule au canvas WebGL du fond, cette reservation peut faire echouer la couche qui porte le titre : les lignes recoivent bien leur classe .on mais la transition d'opacite ne se peint jamais → titre invisible, alors que le reste de la scene (la carte) s'affiche normalement. C'est exactement le symptome remonte. */ #cs-hero h1 .ch{display:inline-block;font-variation-settings:'wght' 300} #cs-hero h1 .sp{display:inline-block;width:.24em} #cs-hero h1 .w{display:inline-block} #cs-hero.nomotion h1 .ch{font-variation-settings:'wght' 760} /* ══ « fiche Google. » : le curseur ne la barre pas, il la GOMME ══ Barrer dirait « c'est faux ». Or une fiche Google n'est pas fausse, elle est VIDE — et c'est exactement ce que la carte annonce trois secondes plus tard (« Site web : non renseigné »). Des lettres évidées disent la même chose. L'effacement se fait lettre par lettre : le titre est déjà découpé pour la vague de graisse, on réutilise la même grammaire plutôt que d'ajouter un balayage continu — et un mot qui se vide lettre à lettre se lit « gommé », là où un fondu global se lirait « qui disparaît ». */ #cs-hero #fg{position:relative;display:inline-block;color:var(--ink)} /* contour posé dès le départ mais transparent : il ne coûte aucun reflow au moment de la gomme (le tracé ne participe pas aux métriques du texte) */ #cs-hero #fg .ch{-webkit-text-stroke:.022em transparent; transition:color .42s ease,-webkit-text-stroke-color .42s ease, font-variation-settings .42s cubic-bezier(.3,.9,.35,1)} /* lettre gommée. Le remplissage tombe à une TRACE d'encre, surtout pas à zéro : à 0 % on lit « lettres en contour », donc un parti pris typographique ; à 8 % on lit « effacé », parce qu'une vraie gomme laisse toujours un reste. Et la graisse chute en même temps — à 760 la Bricolage est massive, l'évider donnerait un anneau épais percé d'un trou. L'axe variable EST la gomme. !important : la boucle qui suit la souris écrit la graisse en style inline, et une règle !important d'auteur passe devant un inline normal. */ #cs-hero #fg .ch.gom{color:rgba(243,239,230,.10); -webkit-text-stroke-color:var(--ink); font-variation-settings:'wght' 220 !important} #cs-hero.nomotion #fg .ch{transition:none} #cs-hero .sub{font-size:clamp(16px,1.25vw,19px);line-height:1.6;color:var(--muted);margin:26px 0 34px;max-width:46ch} #cs-hero .sub strong{color:var(--ink);font-weight:600} #cs-hero .ctas{display:flex;align-items:center;gap:16px;flex-wrap:wrap} #cs-hero .cta{font-family:'Schibsted Grotesk',sans-serif;font-weight:600;font-size:1.02rem;color:var(--cream); background:var(--ink);text-decoration:none;padding:17px 28px;border-radius:100px;display:inline-flex; align-items:center;gap:10px} /* au survol le fond passe à l'indigo : le texte DOIT passer au blanc — la nuit du thème (var(--cream)) serait illisible sur #3b30e0 */ #cs-hero .cta:hover{background:var(--accent);color:#fff} /* ── le battement du CTA : PAS une boucle permanente. Un CTA qui clignote en continu est le réflexe le plus rapide pour faire descendre un site premium au niveau d'une landing page — et ici le curseur-robot dirige déjà le regard. Le battement est donc posé par le script à UN instant précis : quand la scène arrive sur « Et le vôtre ? », c'est-à-dire quand le récit vient de retourner la question au visiteur. L'animation devient la conclusion, pas un tic. Un anneau (box-shadow) et rien d'autre : les CTA portent .mag, dont la boucle écrit transform en inline — animer transform lui volerait le magnétisme. ── */ ⚠️ box-shadow est UNE seule propriété : une keyframe qui ne déclare que l'anneau EFFACE l'ombre portée du bouton pendant toute l'animation. Premier jet invisible pour cette raison — l'ombre indigo du bouton s'éteignait pendant que l'anneau montait, les deux se compensaient. L'ombre de base est donc répétée dans les trois keyframes, et l'anneau est en indigo PLEIN (le violet clair du premier jet ne tranchait pas sur un bouton indigo). ── */ @keyframes cs-cta-beat{ 0%{box-shadow:0 .5em 1.05em -.5em rgba(59,48,224,.75),0 0 0 0 rgba(59,48,224,.55)} 70%{box-shadow:0 .5em 1.05em -.5em rgba(59,48,224,.75),0 0 0 14px rgba(59,48,224,0)} 100%{box-shadow:0 .5em 1.05em -.5em rgba(59,48,224,.75),0 0 0 0 rgba(59,48,224,0)} } #cs-hero .beat{animation:cs-cta-beat 1.15s ease-out 2} #cs-hero.nomotion .beat{animation:none} @media (prefers-reduced-motion:reduce){#cs-hero .beat{animation:none}} #cs-hero .cta2{font-family:'Schibsted Grotesk',sans-serif;font-weight:600;font-size:.98rem;color:var(--ink); text-decoration:none;padding:15px 26px;border-radius:100px;border:1.5px solid rgba(243,239,230,.34); display:inline-flex;align-items:center;transition:border-color .2s,background .2s,color .2s} #cs-hero .cta2:hover{border-color:var(--ink);background:var(--ink);color:var(--cream)} /* éléments que le curseur pose : cachés puis pop */ #cs-hero .bld{opacity:0;transform:translateY(6px) scale(.96)} #cs-hero .bld.on{opacity:1;transform:none;transition:opacity .22s ease,transform .3s cubic-bezier(.2,.9,.3,1.25)} /* une fois révélés, les CTA magnétiques pilotent leur transform eux-mêmes */ #cs-hero .mag.magon{transition:opacity .22s ease,background .18s ease,box-shadow .18s ease} #cs-hero.nomotion .hero-inner .bld,#cs-hero.nomotion .fiche{opacity:1;transform:none} /* ══ LA ZONE DROITE — même hauteur que le bloc texte (19em ≈ 590px), décalée du bord ══ */ /* le 50 % se résout sur la boîte de padding de .stage, qui commence AU-DESSUS du header fixe : sans la moitié de --cs-headtop, la carte flotte plus haut que le bloc de texte, lui centré dans la zone réellement visible */ #cs-hero #press{position:absolute;left:calc(72% - 12.5em); top:calc(50% + (var(--cs-headtop) / 2) - 9.5em);width:25em;height:19em;z-index:4; font-size:clamp(13px,1.6vw,31px);touch-action:pan-y} /* halo indigo très doux qui ancre la fenêtre sur le plan de travail */ #cs-hero #press::before{content:"";position:absolute;inset:-14% -16% -20%;z-index:-1;pointer-events:none; background:radial-gradient(60% 56% at 50% 46%,rgba(59,48,224,.11),rgba(59,48,224,.04) 55%,transparent 76%)} /* ombre au sol : la fenêtre est posée sous la lampe, pas collée à la page */ #cs-hero #press::after{content:"";position:absolute;left:5%;right:5%;bottom:-6.5%;height:13%;z-index:-1; background:radial-gradient(50% 50% at 50% 50%,rgba(17,16,16,.30),transparent 70%); filter:blur(7px);pointer-events:none} /* ── LE RAIL D'OUTILS ──────────────────────────────────────────────────────── Posé AU-DESSUS de la carte et aligné sur son bord gauche : une barre d'outils au-dessus d'un document, pas un bureau. Placé à gauche il serait tombé dans le couloir déjà chargé entre le titre et la carte ; à droite il n'y a que 4,5 % de marge sous 1450 px. Au-dessus, la zone est vide à toutes les largeurs. Couleurs en dur : le rail est dans #press (épinglé au thème clair) mais il appartient à l'atelier sombre. pointer-events:none — il ne doit jamais voler un clic à la carte. ── */ #cs-hero #rail{position:absolute;left:0;bottom:calc(100% + .85em);z-index:2; display:flex;gap:.16em;padding:.2em;border-radius:.6em;pointer-events:none; background:rgba(32,28,24,.72);border:1px solid rgba(243,239,230,.11); box-shadow:0 .5em 1.4em -.6em rgba(0,0,0,.6)} #cs-hero #rail .tool{display:block;width:1.65em;height:1.65em;border-radius:.42em; color:rgba(243,239,230,.62);transition:color .25s,background .25s} #cs-hero #rail .tool svg{display:block;width:100%;height:100%} /* l'outil qu'on vient de prendre s'allume ; son logement se vide pendant le vol */ #cs-hero #rail .tool.hot{color:#F3EFE6;background:rgba(243,239,230,.13)} #cs-hero #rail .tool.vide{opacity:.2} /* le curseur est l'outil en cours d'usage tant qu'on n'en a pris aucun autre */ #cs-hero #rail .t-cur{color:#F3EFE6;background:rgba(243,239,230,.10)} /* ── le rail n'est PAS là sur la page vierge ──────────────────────────────── Il appartient au robot, pas à la page : il doit arriver quand le robot commence à poser la scène, juste après le kicker (voir runIntro). On anime « translate » et non « transform » : en mobile le rail porte déjà transform:translateX(-50%) pour son centrage, et translate est une propriété indépendante qui se compose avec, sans l'écraser. */ #cs-hero #rail{opacity:0;translate:0 .45em; transition:opacity .3s ease,translate .38s cubic-bezier(.2,.9,.3,1.25)} #cs-hero #rail.on{opacity:1;translate:0 0} #cs-hero.nomotion #rail{opacity:1;translate:0 0;transition:none} #cs-hero #mstack{position:absolute;inset:0} /* la maquette navigateur reste un site CLAIR sur le hero nuit : c'est le produit qu'on montre, et c'est l'objet le plus lumineux de l'écran — le projecteur. On la rattache donc aux variables d'origine du thème clair. */ #cs-hero #press{ --cream:#F3EFE6; --cream2:#ECE7DA; --paper:#FBF9F4; --ink:#111010; --muted:#6E6A60; --line:#DDD6C6; --accent:#3b30e0; color:#111010} /* ── l'avant : la fiche Google, volontairement terne ── */ #cs-hero .fiche{position:absolute;inset:0;display:flex;flex-direction:column;gap:.5em; background:#EDECE8;border:1px solid #D8D1C2;border-radius:.75em;padding:.76em .9em .69em; overflow:hidden;box-shadow:0 1.1em 2.4em -1.1em rgba(17,16,16,.38),0 .21em 0 rgba(17,16,16,.07); cursor:pointer;opacity:0;transform:translateY(6px) scale(.96)} /* posée par le curseur pendant l'intro, comme les blocs de texte */ #cs-hero .fiche.on{opacity:1;transform:none;transition:opacity .22s ease,transform .3s cubic-bezier(.2,.9,.3,1.25)} #cs-hero .fiche.out{transition:opacity .45s ease,transform .55s ease,filter .45s ease; opacity:0;transform:translateY(1.75em) rotate(2.5deg);filter:grayscale(1) blur(2px);pointer-events:none} #cs-hero .fiche.back{transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1)} #cs-hero .fsearch{display:flex;align-items:center;gap:.49em;height:1.87em;flex:none;padding:0 .76em; background:#F5F4F1;border:1px solid #DBD8D0;border-radius:.94em;color:#8B877E;font-size:.8em} #cs-hero .fsearch svg{width:.76em;height:.76em;flex:none} #cs-hero .fgrow{display:flex;gap:.69em;align-items:flex-start} #cs-hero .fname{font-weight:600;font-size:1.04em;color:#514E48} #cs-hero .fmeta{font-size:.73em;color:#8B877E;margin-top:.19em} #cs-hero .fst1{color:#A19C8F;font-size:.9em;letter-spacing:.07em} #cs-hero .fst2{color:#C6C1B4;font-size:.9em;letter-spacing:.07em} #cs-hero .fphoto{width:2.64em;height:2.64em;flex:none;border-radius:.42em;background:#DBD8D0} #cs-hero .fbtns{display:flex;gap:.42em} #cs-hero .fbtns span{font-size:.69em;font-weight:500;color:#7D796F;border:1px solid #D5D2CA; border-radius:.94em;padding:.28em .69em;background:#F5F4F1;line-height:1.2} #cs-hero .fline{height:.62em;border-radius:.35em;background:#DFDCD4;flex:none} /* la ligne « site web » + le bouton que le curseur va cliquer */ #cs-hero .fsite{display:flex;align-items:center;gap:.55em;margin-top:-.1em} #cs-hero .fsite>span{font-size:.73em;color:#9C978C} #cs-hero #addSite{font-family:inherit;font-size:.66em;font-weight:600;color:#3D5FA8;background:#F3F6FB; border:1px solid #C6D2E8;border-radius:.94em;padding:.32em .76em;cursor:pointer;line-height:1.2; transition:background .2s,border-color .2s} #cs-hero #addSite:hover{background:#E9F0FA;border-color:#A9BCE0} /* ── l'après : le site, assemblé composant par composant ── */ /* ── PROFONDEUR DE LA CARTE (16/08) — « on dirait qu'elle est juste posée là ». C'était exact, et la cause était unique : UNE seule ombre, large et diffuse (`0 1.9em 4em -1.5em`). Un objet réel n'en projette jamais une seule — il en projette trois, et c'est la plus COURTE qui dit le contact. Sans elle, la carte flotte : rien ne raccorde son bord bas au fond, quelle que soit la force de la nappe diffuse (l'augmenter ne fait que la faire léviter plus haut, c'est le piège). Donc : contact (courte et dense) + portée moyenne + ambiante large, plus une ARÊTE — un liseré clair en haut, qui capte la lumière, et un rebord sombre en bas. C'est l'arête qui donne l'épaisseur : sans elle l'objet a une ombre mais pas de tranche. ── */ #cs-hero .mini{position:absolute;inset:0;display:flex;flex-direction:column;border-radius:.75em;overflow:hidden; border:1px solid rgba(17,16,16,.14); box-shadow: 0 .1em .2em -.06em rgba(17,16,16,.34), 0 .5em 1em -.4em rgba(17,16,16,.30), 0 1.9em 4em -1.5em rgba(17,16,16,.55), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(17,16,16,.07); background:var(--skin-bg);color:var(--skin-tx)} /* ── LA TEXTURE : un reflet, pas du grain. La carte représente un ÉCRAN — lui poser un grain de papier serait un contresens, un écran n'en a pas. Ce qui fait qu'une capture se lit comme une dalle et non comme une image collée, c'est le reflet : une nappe de lumière rasante en haut à gauche et un assombrissement en bas. Très bas en opacité — dès qu'on le voit, c'est raté. Posé en ::after donc AU-DESSUS du contenu (un écran reflète par-dessus ce qu'il affiche), et clippé par l'overflow:hidden de la carte. ── */ #cs-hero #mcard::after{content:"";position:absolute;inset:0;z-index:6; pointer-events:none;border-radius:inherit; background: linear-gradient(148deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.07) 20%,rgba(255,255,255,0) 44%), radial-gradient(125% 62% at 50% 109%,rgba(17,16,16,.15),rgba(17,16,16,0) 64%)} #cs-hero .mini .bar{display:flex;align-items:center;gap:.35em;height:1.87em;flex:none;padding:0 .69em 0 .76em; background:var(--skin-bar);border-bottom:1px solid var(--skin-line)} #cs-hero .mini .bar i{width:.38em;height:.38em;border-radius:50%;background:var(--skin-dot);display:block} #cs-hero .mini .bar span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.66em;color:var(--skin-url); background:var(--skin-urlbg);border:1px solid var(--skin-line);border-radius:.55em; padding:.14em .55em .1em;margin-left:.55em} #cs-hero .mnav{display:flex;gap:.83em;align-items:center;justify-content:flex-end;padding:.55em .97em 0; font-size:.59em;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--skin-nav);flex:none} #cs-hero .mnav b{color:var(--skin-ac);font-weight:600} /* ── LE PLI. .mscroll occupe la zone visible sous la barre + la nav ; .mbody y fait exactement 100 % de haut, donc le hero du client remplit l'écran de la maquette et TOUT ce qui suit est sous le pli. C'est ce décalage que la molette du curseur va révéler avant d'emporter la carte. On translate un conteneur plutôt que d'utiliser overflow:auto : un vrai scroll interne capterait la molette du visiteur et se battrait avec le scroll de la page. ── */ #cs-hero .mscroll{flex:1;min-height:0;display:flex;flex-direction:column; will-change:transform;transform:translate3d(0,0,0)} #cs-hero .mbody{flex:none;height:100%;display:flex;gap:.83em;padding:.62em .9em .83em;min-height:0} #cs-hero .mcopy{flex:1;min-width:0;display:flex;flex-direction:column;gap:.31em} #cs-hero .mkick{font-size:.59em;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--skin-ac)} #cs-hero .mtitle{font-family:'Schibsted Grotesk',sans-serif;font-weight:700;font-size:1.5em; letter-spacing:-.02em;line-height:1.05;color:var(--skin-tx)} #cs-hero .msub{font-size:.73em;line-height:1.4;color:var(--skin-tx2)} #cs-hero .mchips{display:flex;flex-wrap:wrap;gap:.35em;margin-top:.14em} #cs-hero .mchips span{font-size:.62em;font-weight:600;color:var(--skin-tx2);border:1px solid var(--skin-line); border-radius:100px;padding:.21em .62em;line-height:1.2;white-space:nowrap} #cs-hero .mproof{display:flex;align-items:center;gap:.49em;margin-top:.14em} #cs-hero .mproof b{color:var(--skin-ac);font-size:.76em;letter-spacing:.1em;font-weight:400} #cs-hero .mproof span{font-size:.69em;color:var(--skin-tx2)} #cs-hero .mcta{margin-top:auto;align-self:flex-start;background:var(--skin-ac);color:var(--skin-ctatx);font-size:.73em; font-weight:700;line-height:1;padding:.55em .83em .48em;border-radius:.55em;box-shadow:0 .14em 0 var(--skin-acsh)} /* z-index:0 : sans lui .mvisu n'est pas un contexte d'empilement et ses étiquettes « Avant / Après » (z-index:2) remontent au niveau de #press — elles passaient alors DEVANT la carte « Et le vôtre ? » qui la recouvre pourtant */ #cs-hero .mvisu{flex:none;width:31%;border-radius:.55em;overflow:hidden;position:relative;z-index:0; background:var(--skin-visu)} #cs-hero .mvisu::before{content:"";position:absolute;left:20%;top:11%;width:40%;aspect-ratio:1;border-radius:50%; background:var(--skin-sun);opacity:.92} /* longueurs des fausses lignes de la fiche + petits écarts, en classes plutôt qu'en style inline (voir plus haut : le runtime réécrit les attributs style) */ #cs-hero .fline.w88{width:88%} #cs-hero .fline.w80{width:80%} #cs-hero .fline.w68{width:68%} #cs-hero .fline.w55{width:55%} #cs-hero .fgrow>.fcol{flex:1;min-width:0} #cs-hero .fmeta.gap{margin-top:.35em} /* ── peau « Atelier Vert » : la carte est une miniature du VRAI hero du site ── */ /* la palette réelle du site atelier-vert.fr, portée par la carte elle-même */ #cs-hero #mcard{ --skin-bg:#F5F1EB; --skin-bar:#ECE7DE; --skin-tx:#1B4332; --skin-tx2:#3A4A42; --skin-nav:#3A4A42; --skin-line:rgba(27,67,50,.16); --skin-dot:rgba(27,67,50,.25); --skin-url:#1B4332; --skin-urlbg:rgba(27,67,50,.05); --skin-ac:#1B4332; --skin-acsh:#0F2E20; --skin-ctatx:#F5F1EB; --skin-sun:#95B8A2; } /* ── LA COULEUR ARRIVE EN DERNIER. La maquette se construit désaturée : le robot pose la structure, le texte, les blocs — puis va chercher le pot au rail et la colorise. C'est le moment le plus « studio » de la scène, et c'est ce qu'un studio de design vend réellement. Un saturate() plutôt qu'une bascule de palette : ça marche quelle que soit la peau client, sans dupliquer ses 13 variables. Le filtre re-rasterise la carte pendant la transition — coût accepté ici car c'est un one-shot de 850 ms sur une carte immobile, à la différence du blur d'aurore qui repeignait à chaque frame. ── */ #cs-hero #mcard{filter:saturate(.07);transition:filter .85s ease} #cs-hero #mcard.painted{filter:none} #cs-hero.nomotion #mcard{filter:none;transition:none} @media (prefers-reduced-motion:reduce){#cs-hero #mcard{filter:none;transition:none}} /* gouttes de peinture au moment du coup de pot — mêmes mécaniques que les miettes de gomme, couleur de l'accent du site client */ #cs-hero .splat{position:absolute;z-index:28;width:4px;height:4px;border-radius:50%; background:#1B4332;pointer-events:none;animation:cs-crumb .6s ease-in forwards} #cs-hero #mcard.av .mcopy{gap:.26em} #cs-hero #mcard.av .mtitle{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:1.62em; letter-spacing:0;line-height:1.04} /* color:inherit obligatoire : le site porte une règle globale em{color:var(--accent)} qui repeignait « de A à Z. » en indigo au lieu du vert forêt du titre */ #cs-hero #mcard.av .mtitle em{font-style:italic;color:inherit;box-shadow:inset 0 -.13em 0 #C8D9CE} #cs-hero #mcard.av .mkick{display:inline-flex;align-self:flex-start;align-items:center;gap:.5em; background:#fff;border:1px solid rgba(27,67,50,.1);border-radius:100px;padding:.31em .8em; letter-spacing:.11em;color:#1B4332} #cs-hero #mcard.av .mkick i{width:.5em;height:.5em;border-radius:50%;background:#2D6A4F} #cs-hero #mcard.av .mchips{gap:.55em;margin-top:.21em;flex-wrap:nowrap} #cs-hero #mcard.av .mchips span{display:flex;flex-direction:column;gap:.1em;border:0;border-radius:0; padding:0 .66em 0 0;border-right:1px solid var(--skin-line);white-space:nowrap; font-size:.58em;font-weight:500;color:var(--skin-tx2)} #cs-hero #mcard.av .mchips span:last-child{border-right:0;padding-right:0} #cs-hero #mcard.av .mchips b{font-family:'DM Serif Display',Georgia,serif;font-weight:400; font-size:1.55em;line-height:1;color:#1B4332} #cs-hero #mcard.av .mproof b{font-size:.66em;color:#2D6A4F} #cs-hero #mcard.av .mcta{border-radius:100px} /* le visuel = l'avant/après du vrai hero, pelouse terne | jardin dense */ #cs-hero #mcard.av .mvisu{width:34%;background: linear-gradient(180deg,#C9CDB9 0 55%,#AFB49B 55% 100%);border:1px solid var(--skin-line)} #cs-hero #mcard.av .mvisu::before{content:"";left:49.3%;top:0;width:1.4%;aspect-ratio:auto;height:100%; border-radius:0;background:#F5F1EB;opacity:1} #cs-hero #mcard.av .mvisu::after{content:"";position:absolute;right:0;top:0;width:49.3%;height:100%; background:linear-gradient(180deg,#7FA98B 0 34%,#4C7A57 34% 72%,#2D5A40 72% 100%)} #cs-hero #mcard.av .mvisu b{position:absolute;z-index:2;top:5%;font-size:.5em;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:#F5F1EB;background:rgba(15,46,32,.6);border-radius:.4em;padding:.32em .6em;line-height:1} #cs-hero #mcard.av .mvisu b:first-child{left:5%} #cs-hero #mcard.av .mvisu b:last-child{right:5%} /* ── la section sous le pli : mêmes variables --skin-* que le reste, donc elle suit la peau du client et le saturate() de la colorisation sans rien dupliquer. Elle n'existe que pour être découverte au défilement : pas de .bld, pas de pose par le curseur. ── */ #cs-hero .msec{flex:none;padding:1.1em .9em 1.3em;border-top:1px solid var(--skin-line); background:var(--skin-bg)} #cs-hero .msectop{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.8em} #cs-hero .mseckick{display:inline-flex;align-items:center;gap:.5em;font-size:.55em;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:var(--skin-ac)} #cs-hero .mseckick i{width:.5em;height:.5em;border-radius:50%;background:var(--skin-ac);flex:none} #cs-hero .msecall{font-size:.52em;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--skin-nav);opacity:.75} #cs-hero .msecgrid{display:flex;gap:.7em} #cs-hero .mtile{flex:1;min-width:0;display:flex;flex-direction:column;gap:.3em} #cs-hero .mtile b{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:.8em; line-height:1.1;color:var(--skin-tx)} #cs-hero .mtile .ml{display:block;height:.32em;border-radius:.16em;background:var(--skin-line)} #cs-hero .mtile .ml.w88{width:88%}#cs-hero .mtile .ml.w82{width:82%}#cs-hero .mtile .ml.w74{width:74%} #cs-hero .mtile .ml.w62{width:62%}#cs-hero .mtile .ml.w58{width:58%}#cs-hero .mtile .ml.w50{width:50%} #cs-hero .mtimg{height:3.4em;border-radius:.42em;margin-bottom:.18em} #cs-hero .mtimg.t1{background:linear-gradient(160deg,var(--skin-sun),var(--skin-ac))} #cs-hero .mtimg.t2{background:linear-gradient(200deg,var(--skin-ac),var(--skin-acsh))} #cs-hero .mtimg.t3{background:linear-gradient(140deg,var(--skin-acsh),var(--skin-sun))} /* carte « Et le vôtre ? », crossfade + frappe */ /* dernière carte de la pile : elle recouvre la fiche ET le mini-site, donc elle passe explicitement devant plutôt que de compter sur l'ordre du DOM */ /* ── LE SWIPE. La maquette est JETÉE vers le haut et la question entre par le bas, d'un seul trait. Le clip qui rend ça possible est posé sur #mstack par le script (.swiping) UNIQUEMENT pendant le geste : en permanence, il couperait la sortie de la fiche Google, qui disparaît en translateY + rotate. Même courbe et durées voisines pour les deux cartes — c'est un seul mouvement qui les emporte, pas deux animations qui se croisent. ── */ #cs-hero #mstack.swiping{overflow:hidden;border-radius:.75em} #cs-hero #mcard.pushed{transform:translate3d(0,-100%,0); transition:transform .34s cubic-bezier(.16,.86,.3,1),filter .85s ease} #cs-hero #vcard{align-items:center;justify-content:center;background:var(--paper);border:1px dashed rgba(17,16,16,.3); z-index:2;opacity:0;pointer-events:none;transform:translate3d(0,100%,0); transition:opacity .3s ease,transform .3s cubic-bezier(.5,0,.75,.4)} #cs-hero #vcard.on{opacity:1;pointer-events:auto;cursor:pointer;transform:translate3d(0,0,0); transition:opacity .14s ease,transform .38s cubic-bezier(.16,.86,.3,1)} #cs-hero.nomotion #mcard.pushed,#cs-hero.nomotion #vcard{transition:none} @media (prefers-reduced-motion:reduce){#cs-hero #mcard.pushed,#cs-hero #vcard{transition:none}} #cs-hero #vcard .vtxt{font-family:'Schibsted Grotesk',sans-serif;font-weight:700;font-size:2.15em; color:var(--accent);letter-spacing:-.02em;min-height:1.2em} #cs-hero #vcard .vtxt i{font-style:normal;font-weight:400;color:var(--ink);opacity:.65;animation:cs-caret 1s steps(1) infinite} @keyframes cs-caret{50%{opacity:0}} /* le pic d'intention : un vrai bouton, pas un texte souligné */ #cs-hero #vcard .vsub{display:inline-block;font-family:'Schibsted Grotesk',sans-serif;font-weight:600;font-size:.82em; color:var(--cream);background:var(--accent);text-decoration:none;margin-top:1.15em; padding:.72em 1.25em .66em;border-radius:100px;box-shadow:0 .5em 1.1em -.5em rgba(59,48,224,.75); transition:transform .18s cubic-bezier(.34,1.5,.5,1),box-shadow .18s,background .18s} #cs-hero #vcard .vsub:hover{background:var(--ink);box-shadow:0 .6em 1.3em -.5em rgba(17,16,16,.6)} /* fill « backwards » et pas « both » : sinon l'animation garderait la main sur transform et bloquerait l'effet magnétique — et le pop doit rejouer à chaque boucle */ #cs-hero #vcard .vsub.on{animation:cs-vpop .42s cubic-bezier(.3,1.5,.5,1) backwards} @keyframes cs-vpop{from{opacity:0;transform:translateY(.5em) scale(.9)}to{opacity:1;transform:none}} #cs-hero.nomotion #vcard .vsub.on{animation:none} /* ⚠️ #hintp vit DANS #press, qui est ré-épinglé au thème clair (la maquette est un site clair) — mais lui est posé sous la carte, sur la nuit. Il ne peut donc pas prendre var(--muted) : il hériterait du muted CLAIR (#6E6A60, ~2:1 sur la nuit, illisible). Il porte ses propres valeurs, celles du thème sombre. */ #cs-hero #hintp{position:absolute;left:50%;bottom:-3em;transform:translateX(-50%);white-space:nowrap; font-family:'Schibsted Grotesk',sans-serif;font-weight:500;font-size:.62em;letter-spacing:.05em; color:#9C948A;opacity:0;transition:opacity .6s;z-index:4} #cs-hero #hintp.on{opacity:1} #cs-hero #hintp b{color:#F3EFE6} /* ══ outillage design : curseur bot, marquee, sélection, guides, ripple ══ */ #cs-hero #bot{position:absolute;left:0;top:0;z-index:30;pointer-events:none;opacity:0;transition:opacity .3s; will-change:transform} #cs-hero #bot.on{opacity:1} #cs-hero #bot svg{display:block;filter:drop-shadow(0 1px 2px rgba(17,16,16,.35))} #cs-hero #bot .tag{position:absolute;left:15px;top:19px;white-space:nowrap;font-family:'Schibsted Grotesk',sans-serif; font-weight:600;font-size:.72rem;color:#fff;background:var(--accent);padding:3px 9px;border-radius:100px; box-shadow:0 2px 8px -2px rgba(59,48,224,.6)} #cs-hero #bot.press svg{transform:scale(.82);transform-origin:2px 2px} /* left/top à 0 obligatoires : sans eux le badge part de sa position dans le flux et le script y ajoute encore celle de la souris — d'où un décalage constant */ /* pastille inversée : l'encre pleine du thème clair disparaissait dans la nuit */ #cs-hero #you{position:absolute;left:0;top:0;z-index:29;pointer-events:none;white-space:nowrap; font-family:'Schibsted Grotesk',sans-serif;font-weight:600;font-size:.68rem;color:#111010; background:rgba(243,239,230,.9);padding:2px 8px;border-radius:100px; opacity:0;transition:opacity .3s;will-change:transform} #cs-hero #you.on{opacity:1} #cs-hero #selbox{position:absolute;z-index:27;outline:1.5px solid var(--sel);opacity:0;pointer-events:none;border-radius:2px} #cs-hero #selbox i{position:absolute;width:7px;height:7px;background:#fff;border:1.5px solid var(--sel);border-radius:1px} #cs-hero #selbox i:nth-child(1){left:-4px;top:-4px} #cs-hero #selbox i:nth-child(2){right:-4px;top:-4px} #cs-hero #selbox i:nth-child(3){left:-4px;bottom:-4px} #cs-hero #selbox i:nth-child(4){right:-4px;bottom:-4px} #cs-hero #gv,#cs-hero #gh{position:absolute;z-index:25;background:var(--guide);opacity:0;pointer-events:none} #cs-hero #gv{width:1px;top:0;bottom:0} #cs-hero #gh{height:1px;left:0;right:0} #cs-hero .ripple{position:absolute;z-index:28;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%; border:2px solid var(--sel);opacity:.85;pointer-events:none;animation:cs-rip .5s ease-out forwards} @keyframes cs-rip{to{transform:scale(1.7);opacity:0}} /* rectangle de sélection translucide, comme une sélection de fichiers */ #cs-hero #marq{position:absolute;z-index:26;background:rgba(13,153,255,.13);border:1px solid rgba(13,153,255,.8); border-radius:2px;opacity:0;pointer-events:none;transition:opacity .25s} /* Le menu contextuel « Gommer » (#ctx) a été retiré le 16/08 : depuis le rail, il donnait deux provenances à un même outil. Le curseur sélectionne le mot, le rail s'allume, la gomme sort. */ /* ── la palette du pot : papier, ligne et ouverture du chrome déjà en scène, parce que c'est un geste d'outil — on clique un outil, il propose, on choisit. Le vert #1B4332 est celui d'atelier-vert.fr : le curseur ne prend pas « une » couleur, il prend CELLE du client. ── */ #cs-hero #pal{position:absolute;left:0;top:0;z-index:29;display:flex;gap:5px;padding:6px; background:var(--paper);border:1px solid var(--line);border-radius:10px; box-shadow:0 14px 34px -12px rgba(0,0,0,.6);pointer-events:none; opacity:0;transform:scale(.94);transform-origin:0 0;transition:opacity .16s,transform .16s} #cs-hero #pal.on{opacity:1;transform:scale(1)} #cs-hero #pal .sw{display:block;width:18px;height:18px;border-radius:5px; border:1px solid rgba(243,239,230,.16)} #cs-hero #pal .sw.c1{background:#3b30e0} #cs-hero #pal .sw.c2{background:#1B4332} #cs-hero #pal .sw.c3{background:#B4552D} #cs-hero #pal .sw.c4{background:#2E5E8A} #cs-hero #pal .sw.c5{background:#C89B3C} #cs-hero #pal .sw.hot{outline:2px solid #F3EFE6;outline-offset:2px} /* la gomme remplace le curseur le temps de l'effacement : même ancre (bx,by), légère inclinaison qui suit le sens du geste (posée par le script) */ /* color = var(--ink) : le contour du SVG est en currentColor, la gomme suit le thème */ #cs-hero #gum{position:absolute;left:0;top:0;z-index:30;opacity:0;pointer-events:none; color:var(--ink);transition:opacity .22s;will-change:transform} #cs-hero #gum svg{display:block;filter:drop-shadow(0 2px 3px rgba(17,16,16,.3))} #cs-hero.erasing #bot{opacity:0} #cs-hero.erasing #gum{opacity:1} /* miettes de gomme : on efface des lettres crème, les miettes sont crème — elles tombent dans la couche de poussière de la scène */ #cs-hero .crumb{position:absolute;z-index:28;width:3px;height:3px;border-radius:1px; background:rgba(243,239,230,.55);pointer-events:none;animation:cs-crumb .65s ease-in forwards} @keyframes cs-crumb{to{transform:translate(var(--dx,0),16px) rotate(80deg);opacity:0}} /* coupe-circuit (18/08/2026) : posé par cs-hero-filet.js quand l'intro n'a pas abouti sur WebKit. Masque TOUT le curseur-robot et ses effets — sans ça le filet forçait le texte final mais le bot restait visible, bloqué en boucle sur des coordonnées fausses (le symptôme vu : clic répété en haut à gauche). Garantie posée en CSS, pas en JS : même si une chaîne de promesses encore en vol touche un de ces éléments après coup, rien n'apparaît. */ #cs-hero.cs-stopped #bot, #cs-hero.cs-stopped #gum, #cs-hero.cs-stopped #you, #cs-hero.cs-stopped #rail, #cs-hero.cs-stopped #pal, #cs-hero.cs-stopped #selbox, #cs-hero.cs-stopped #marq, #cs-hero.cs-stopped #gv, #cs-hero.cs-stopped #gh, #cs-hero.cs-stopped .ripple, #cs-hero.cs-stopped .crumb, #cs-hero.cs-stopped .splat{display:none!important} @media (max-width:1450px){ #cs-hero #press{left:auto;right:4.5%;font-size:clamp(12px,1.45vw,20px)} } @media (max-width:1100px){ /* ── variante verticale : la scène est empilée, pas comprimée ── */ #cs-hero .stage{flex-direction:column;justify-content:flex-start; padding:calc(var(--cs-headtop) + 26px) 0 10px; min-height:calc(100vh - var(--cs-head));min-height:calc(100dvh - var(--cs-head))} /* le bloc texte éclate : la carte se glisse entre le sous-titre et les CTA */ #cs-hero .hero-inner{display:contents} #cs-hero .kicker,#cs-hero h1,#cs-hero .sub,#cs-hero .ctas{position:relative;z-index:3;width:100%; padding-left:clamp(20px,3.4vw,54px);padding-right:clamp(20px,3.4vw,54px)} #cs-hero .kicker{margin-bottom:18px} /* taille calée sur la graisse AU REPOS (760), pas sur la graisse d'entrée (300) : les lettres grasses sont ~7 % plus larges, sinon le titre reflue à 4 lignes */ #cs-hero h1{font-size:clamp(30px,10.2vw,64px);letter-spacing:-.03em} /* sur mobile le titre + la scène suffisent : le sous-titre répétait la promesse */ #cs-hero .sub{display:none} /* 18/08/2026 — l'indication est RETIREE sur mobile (décision de Dric). Elle mordait sur le bouton « Demander mon devis gratuit » : #hintp est en position:absolute, n'occupe donc aucune hauteur, et le seul espace qui l'écartait du CTA venait des marges auto — qui tombent à zéro sur écran court. C'est exactement le problème laissé ouvert ci-dessous, et la tentative du 16/08 (réserver la place par un margin-bottom fixe) avait cassé le hero. Sur mobile la scène se suffit : le curseur montre déjà ce que l'indication expliquait. setHint() continue de tourner et de poser data-phase, rien d'autre n'en dépend. */ #cs-hero #hintp{display:none} /* même gabarit pour les deux CTA : cible tactile confortable et poids égal */ #cs-hero .cta,#cs-hero .cta2{min-height:54px;font-size:16px;padding-left:14px;padding-right:14px} /* ⚠️ NE PAS remettre un margin-bottom fixe ici sans avoir regardé le hero TOURNER sur un vrai téléphone. Tenté le 16/08 (margin:auto auto 48px) pour réserver la place de #hintp : la mesure était bonne (l'indication ne mordait plus sur le bouton) mais le hero passait de 811 à 859 px sur un viewport de 700, et en vrai la scène partait chercher ses cibles hors écran — le titre ne s'affichait plus du tout. Annulé. Le problème de fond reste ouvert : #hintp est en position:absolute et n'occupe aucune hauteur, seul le margin:auto l'écarte du bouton, et cet espace tombe à zéro sur écran court. */ #cs-hero #press{position:relative;left:auto;right:auto;top:auto;order:1;width:25em;height:19em; max-width:calc(100% - 28px);margin:auto;font-size:clamp(12px,4vw,16px)} /* marge haute plancher : l'indication sous la carte (posée à -3.2em) garde son air même quand l'écran est juste et que les marges auto tombent à zéro */ /* marge basse resserrée par rapport au prototype : le header du site fait 80 px là où celui du prototype en faisait 53, et c'est ce qu'il faut rendre pour que le hero tienne encore exactement sur un écran */ #cs-hero .ctas{order:2;flex-direction:column;align-items:stretch;gap:12px;margin:3.6em 0 1.2em} #cs-hero .cta,#cs-hero .cta2{justify-content:center;text-align:center} #cs-hero #you{display:none} /* ── pas de rail sous 1100 px. Mesuré : la scène empilée ne laisse que 18 px entre le bas du titre et la carte, pour un rail de 33 px — il recouvrait la ligne « fiche Google. ». Les deux autres emplacements possibles (sous l'indication, 40 px de creux) dépendent du nombre de lignes de l'indication, qui passe à 3 sous 340 px. Le hero mobile tient à 812/812 exactement : je ne prends pas de place au titre pour un décor. La gomme reprend donc son apparition directe (gumVol se neutralise, voir cs-hero.js) et la colorisation de la maquette, elle, est jouée sur TOUS les écrans — c'est le beat qui compte. ── */ #cs-hero #rail{display:none} } @media (max-width:700px){ #cs-hero .stage{padding-top:calc(var(--cs-headtop) + 14px)} /* le sur-titre tenait sur deux lignes : on le resserre pour n'en faire qu'une */ #cs-hero .kicker{font-size:11px;letter-spacing:.1em} /* marges latérales resserrées : c'est ce qui rend la place au titre */ #cs-hero .kicker,#cs-hero h1,#cs-hero .sub,#cs-hero .ctas{padding-left:14px;padding-right:14px} } /* très petits écrans : on rend un peu de taille au titre pour garder « Votre métier mérite » sur une seule ligne, sinon « mérite » reste orpheline */ @media (max-width:340px){ /* le font-size:9.8vw qui vivait ici a été RETIRÉ le 16/08, pas oublié : le bloc mobile de fin de fichier passe le titre à 11vw et, venant plus tard à spécificité égale, l'écrasait — la règle était devenue du code mort qui se lisait comme active. Vérifié qu'elle n'est plus nécessaire : à 320 px, 11vw donne 35,2 px et la ligne la plus longue fait 279 px pour 292 px disponibles. Le plancher de contour ci-dessous, lui, reste indispensable. */ /* le contour est en em : sous 340 px il tomberait sous le demi-pixel et la lettre gommée redeviendrait un pâté gris. On lui donne un plancher. */ #cs-hero #fg .ch{-webkit-text-stroke-width:.9px} } /* ══ HEADER SUR LA NUIT — état posé par cs-hero.js (classe cs-dk) tant que le header est transparent au-dessus du hero (scrollY ≤ 30). Dès que le site lui peint sa barre crème floutée (son handler scroll, seuil identique), la classe tombe et l'encre d'origine redevient la bonne. Les !important sont nécessaires : téléphone, CTA et burger portent leurs couleurs en style inline. ══ */ header.cs-dk a{color:#F3EFE6} header.cs-dk [data-nav] a{color:#F3EFE6} /* hover nav : le #3b30e0 du site tomberait à 2,4:1 sur la nuit en petit corps — on prend le #817AEB que le site utilise déjà comme accent de survol sur encre */ header.cs-dk [data-hv="0"]:hover{color:#817AEB !important} header.cs-dk [data-headtel]{color:#F3EFE6 !important} header.cs-dk [data-headcta]{background:#F3EFE6 !important;color:#111010 !important} header.cs-dk [data-headcta]:hover{background:#817AEB !important;color:#fff !important} header.cs-dk [data-burger] span{background:#F3EFE6 !important} /* ══════════════════════════════════════════════════════════════════════════ VARIANTE CLAIRE « ENCRE » — html.cs-fond-encre, activée par ?fond=encre ══════════════════════════════════════════════════════════════════════════ La nuit reste la version par défaut et n'est pas touchée : tout se joue ici, en surcharges, pour qu'on compare les deux fonds à SCÈNE IDENTIQUE — même curseur, même maquette, même flick — et non sur deux pages qui auraient dérivé l'une de l'autre. ⚠️ Ce que cette variante rend évident : les trois tours perdus sur la couleur du « mérite mieux » étaient un problème de FOND, pas de teinte. Sur du papier, --accent-up REDEVIENT le #3b30e0 de la marque (6,81:1) — plus de lavande, plus de bleu roi, plus d'accent remonté. Le titre reprend l'encre (16,5:1). Rien ici n'est un compromis de lisibilité, et c'est tout le sujet. Les noms de variables sont sémantiques (--cream = le fond, --ink = ce qui écrit dessus) : redéfinir les six suffit, aucune règle en aval ne bouge. */ html.cs-fond-encre #cs-hero{ --cream:#f2efe7; --cream2:#EAE6DA; --paper:#FBF9F4; --ink:#111010; --muted:#6E6A60; --line:rgba(17,16,16,.14); --accent:#3b30e0; --accent-up:#3b30e0; } /* le voile était un rabat SOMBRE : sur du papier il ferait une salissure grise dans le coin. L'encre du shader porte seule le contraste de la scène. */ html.cs-fond-encre #cs-hero .aurora{display:none} /* la lueur d'encre n'existait que pour tenir le crème sur un fond qui s'éclaircissait par endroits. Sur papier, une ombre sombre derrière un texte sombre ne ferait que l'empâter. */ html.cs-fond-encre #cs-hero .hero-inner{text-shadow:none} /* ── POURQUOI LE TEXTE « RESSORT MIEUX » SUR LA NUIT — question de Dric, et la réponse n'est pas le contraste. Mesuré : crème sur la nuit = 15,53:1, encre sur le papier = 16,30:1. Le clair est même LÉGÈREMENT meilleur en ratio. Deux causes réelles, dans cet ordre : 1. OUI, j'avais ajouté une ombre — la lueur d'encre, trois passes — et je l'avais coupée en clair parce qu'une ombre sombre derrière un texte sombre ne fait que l'empâter. Résultat : la nuit avait un halo qui détache les lettres du fond, le clair n'avait rien. Le pendant correct en clair n'est pas une ombre sombre mais un halo de PAPIER : il repousse le lavis d'encre loin des lettres au lieu de les épaissir. C'est ce qui est posé ici. 2. L'irradiation : à graisse égale, un texte clair sur fond sombre paraît toujours plus gras qu'un texte sombre sur fond clair — c'est optique, pas corrigeable par le contraste. Si l'écart subsiste, le vrai levier est la graisse du titre (760 aujourd'hui, en dur dans cs-hero.js) : +40 à +60 en clair rétablirait la parité perçue. Non fait — ça touche la scène animée. ── */ html.cs-fond-encre #cs-hero .hero-inner{ text-shadow:0 0 .42em rgba(242,239,231,.92),0 0 1.1em rgba(242,239,231,.75)} html.cs-fond-encre #cs-hero .ctas{text-shadow:none} /* sur le papier, l'ombre de la carte porte enfin — on la laisse travailler un cran plus franchement que sur la nuit, où elle se perdait dans le fond. */ html.cs-fond-encre #cs-hero .mini{ box-shadow: 0 .1em .2em -.05em rgba(17,16,16,.40), 0 .5em 1em -.35em rgba(17,16,16,.34), 0 1.9em 4em -1.4em rgba(17,16,16,.50), inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(17,16,16,.08)} /* ── LES CTA EN INDIGO (variante claire). Sur la nuit, le bouton plein était CRÈME sur fond sombre : c'était l'objet le plus clair, il attirait l'œil sans rien devoir à la couleur. Basculée telle quelle sur du papier, la même règle donnait un bouton NOIR — correct au contraste, mais muet : la marque a une couleur, et le seul endroit où elle devrait être obligatoire, c'est le bouton qui demande le devis. L'indigo y est un aplat portant du blanc, donc aucune des contraintes qui l'interdisaient sur la nuit ne s'applique : 7,79:1. ⚠️ Le second bouton avait un vrai défaut en clair, pas seulement une couleur : son liseré était en rgba(243,239,230,.34), c'est-à-dire du CRÈME — invisible sur du papier. Il n'avait donc pas de bord du tout. Il reprend l'indigo. */ html.cs-fond-encre #cs-hero .cta{background:var(--accent);color:#fff} html.cs-fond-encre #cs-hero .cta:hover{background:#2A20B8;color:#fff} html.cs-fond-encre #cs-hero .cta2{color:var(--accent);border-color:rgba(59,48,224,.38)} html.cs-fond-encre #cs-hero .cta2:hover{background:var(--accent);border-color:var(--accent);color:#fff} /* le fond de repli (WebGL absent, contexte perdu, première frame) doit valoir le crème de la page — même raison que le papier du shader. */ html.cs-fond-encre #cs-hero{--cream:#f3efe6} /* ══════════════════════════════════════════════════════════════════════════ MOBILE — reprise du 16/08 : « le texte du hero n'est pas assez gros, il ne prend pas assez de place », et le rail réclamé. ══════════════════════════════════════════════════════════════════════════ Mesuré à 375×812 avant de toucher quoi que ce soit : le titre n'occupait que 115 px sur 812 (14 %), pendant qu'il y avait **57,6 px de marge morte** au-dessus des CTA. Le problème n'était donc pas le manque de place, c'était sa répartition — et c'est ce qui rend les deux demandes compatibles. ⚠️ Le titre monte à 11vw et PAS plus : mesuré à la graisse de repos (760), la ligne la plus longue (« Votre métier mérite ») fait 302 px pour 347 px de large disponible. À 11vw elle passe à ~326 px, soit 21 px de garde. Au-delà elle reflue à quatre lignes et le titre perd bien plus qu'il ne gagne. Toute augmentation doit être re-mesurée sur cette ligne-là, pas sur le bloc. */ @media (max-width:1100px){ #cs-hero h1{font-size:clamp(32px,11vw,64px)} /* la marge morte rendue : c'est elle qui paie l'agrandissement du titre ET le rail. On ne prend rien au titre, contrairement à l'arbitrage du 15/08. */ #cs-hero .ctas{margin:1.6em 0 1.1em} /* ── LE RAIL REVIENT SOUS 1100 px. Le 15/08 il avait été retiré, et la raison était juste À L'ÉPOQUE : il ne restait que 18 px entre le titre et la carte pour un rail de 33 px, et je refusais de prendre de la place au titre pour un décor. Ce qui a changé, c'est d'où vient la place : la marge morte des CTA la paie, le titre n'y perd rien. Et ce n'est pas un décor — c'est là que le curseur va chercher la gomme, sans quoi le geste devient inexpliqué. Réduit d'un tiers (13 px de base contre 15) : c'est un outil, il ne doit pas concurrencer la maquette. ── */ #cs-hero #rail{display:flex;font-size:13px} /* la maquette se décale pour laisser respirer le rail au-dessus d'elle. 3,5em et non 2,9 : le rail est positionné par rapport au HAUT de la maquette, donc cette marge doit loger le rail (28 px) ET l'air au-dessus. À 2,9em il ne restait que 4 px sous la dernière ligne du titre — mesuré. 3,8 et non 3,5 : cette marge est en em de la MAQUETTE, dont le corps tombe à 12,8 px sous 400 px de large — à 3,5em l'air repassait à 5 px à 320. */ #cs-hero #press{margin-top:3.8em} } /* ══════════════════════════════════════════════════════════════════════════ MOBILE, 2e passe — centré, plein cadre, et la coupe de ligne assumée ══════════════════════════════════════════════════════════════════════════ ⚠️ CORRECTION D'UNE MESURE FAUSSE. Le 11vw posé plus haut avait été calibré sur un titre figé à la graisse 300 (une injection `animation:none` avait arrêté la vague avant qu'elle n'atteigne 760). Remesuré à la graisse de REPOS : « Votre métier mérite » fait 328 px à 10,2vw pour 347 dispo, et **10,5vw casse déjà la ligne**. Le 10,2vw d'origine était donc au plafond, et monter était impossible — tant qu'on gardait cette coupe-là. D'où la vraie sortie, qui est aussi ce que Dric demande (« tout est collé à gauche, je préfère centré ou que ça prenne la largeur ») : on CASSE la ligne exprès après « métier ». La contrainte n'est alors plus la ligne de 328 px mais « mieux qu'une », qui en fait 222 — et le titre peut prendre 60 % de plus. Quatre lignes centrées et pleines valent mieux que trois lignes maigres alignées à gauche : sur un écran étroit, le titre EST la mise en page. Bénéfice de sens : « mérite » et « mieux », les deux mots indigo, ouvrent alors deux lignes consécutives. */ @media (max-width:1100px){ #cs-hero .kicker,#cs-hero h1{text-align:center} #cs-hero .kicker{justify-content:center} #cs-hero h1{font-size:clamp(34px,12.5vw,64px)} /* la coupe : l'espace entre « métier » et « mérite » prend toute la largeur. C'est le 4e enfant de la 1re ligne (w, sp, w, SP, hl) — un séparateur déjà présent, pas un
ajouté : la scène animée découpe le titre en mots et en lettres, on ne lui change rien. */ /* ⚠️ display:block et NON width:100%. Un inline-block pleine largeur casse bien la ligne, mais il occupe alors une ligne-boîte à lui seul : 47 px de vide entre « métier » et « mérite », et le hero débordait de 32 px. En bloc de taille nulle, la coupe est franche et ne coûte rien. */ #cs-hero h1 .bld:first-child .sp:nth-child(4){display:block;width:0;height:0} /* le filet du kicker saute en mobile : centré, il n'ancre plus rien (son rôle en desktop est de tenir le bord gauche de la colonne) et il devient un bout de trait suspendu devant le texte. */ #cs-hero .kline{display:none} /* le sélecteur d'outil est CENTRÉ au-dessus de la carte. En mobile tout est centré — kicker, titre, CTA : l'aligner sur un bord le sortait de l'axe. left/transform et non left:0;right:0 : la pastille doit garder sa largeur de contenu, pas s'étirer sur toute la carte. */ #cs-hero #rail{left:50%;right:auto;transform:translateX(-50%)} /* la maquette : le corps est ramené à 3,7vw pour que 25em vaille EXACTEMENT la largeur disponible. À 4vw elle valait 375 px, rabotée à 347 par le max-width, pendant que la hauteur restait sur 19em — la carte était donc déformée (1,22 au lieu de 1,32). Le corriger rend son cadrage à la carte ET libère 21 px, qui partent dans le titre. */ #cs-hero #press{font-size:clamp(11px,3.7vw,16px);margin-top:4.2em} #cs-hero .kicker{margin-bottom:10px} /* marge basse à 0,6em : sur un 320×720 le hero débordait de 2 px, mesuré. Le bas des CTA est le seul endroit où reprendre sans toucher au titre. */ #cs-hero .ctas{margin:1.2em 0 .6em} } /* ── écrans COURTS (et non étroits — c'est la hauteur qui contraint, pas la largeur : un 320×720 débordait de 2 px quand un 375×812 gardait 15 px de mou). On reprend l'air au-dessus de la maquette, seul poste ajustable qui ne touche ni au titre ni aux cibles tactiles. Réduire la marge BASSE des CTA était sans effet : elle ne déplace pas le bas de leur boîte. ── */ @media (max-width:1100px) and (max-height:780px){ #cs-hero #press{margin-top:3.6em} #cs-hero .kicker{margin-bottom:6px} /* ⚠️ le rail se rapproche de la CARTE au lieu qu'on repousse la carte. Il est positionné par rapport au haut de #press : réduire cet écart le fait descendre, ce qui rend de l'air au titre SANS rien coûter à la hauteur totale. En repoussant la carte, on gagnait l'air mais on reperdait le mou en bas — mesuré : rail à −2 px du titre, c'est-à-dire en chevauchement. */ #cs-hero #rail{bottom:calc(100% + .3em)} }