/* Castflow — talent v2 Scene fixe de 1920 x 1080, mise a l'echelle par la fenetre. Toutes les valeurs viennent de Figma (sequence « la » 1328:588). */ :root{ --encre:#0A0A0A; --corps:#3F4750; --muet:#6B747C; --teal:#007692; --teal-clair:#09A9AA; --gris:#F5F6F7; --filet:#E7EBEC; --blanc:#fff; --pille:#F0F1F2; } *{box-sizing:border-box} html,body{margin:0;padding:0} /* CFT-1485 — ON NE DOIT PAS POUVOIR BOUGER HORIZONTALEMENT, et c'est aussi ce qui décentrait toute la page sur iPhone. Les deux téléphones de côté sortent de la scène de 274 px de chaque bord (mesuré). Ils ne sont retenus que par le `overflow:hidden` de `.scene` — et `.scene` est en `position:sticky`. Chromium coupe et le document reste à 390 ; iOS Safari, lui, ne s'en sert pas pour borner la largeur du document sur un élément collant : la page devient donc pannable, la fenêtre de mise en page s'élargit, et TOUT ce qui est centré dedans se retrouve centré sur une boîte plus large que l'écran. C'est le décalage vers la droite qu'on voit sur les trois captures de Julien — la barre, le titre, le bouton et le téléphone décalés du MÊME nombre de pixels, ce qui est la signature d'un panoramique et non d'un défaut de centrage élément par élément. `clip` et pas `hidden` : `hidden` fabrique un conteneur de défilement, ce qui casserait le `position:sticky` de `.scene` — c'est-à-dire toute la page. */ html,body{overflow-x:clip} /* le défilement est piloté par le script : on coupe celui du navigateur */ html{scroll-behavior:auto} /* Les quelques regles dont Lenis a besoin (lenis 1.3.11, MIT). Recopiees plutot qu'importees : une feuille de plus pour cinq selecteurs, c'est une requete bloquante pour rien. « html.lenis » n'apparait qu'au bureau, et seulement une fois le module charge - sur telephone rien de tout ca ne s'allume, le defilement y reste celui du systeme. */ html.lenis, html.lenis body{height:auto} html.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip} html.lenis [data-lenis-prevent]{overscroll-behavior:contain} html.lenis.lenis-smooth iframe{pointer-events:none} body{overscroll-behavior:none} body{ font-family:Geist,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; color:var(--encre); background:var(--blanc); -webkit-font-smoothing:antialiased; } /* ---------- la scene ---------- */ .track{position:relative} /* Les points d'accroche : invisibles, sans epaisseur, hors du flux et hors du pointeur. Ils ne servent qu'a donner au navigateur un endroit ou se poser. */ .crans{position:absolute; inset:0; pointer-events:none} .crans i{position:absolute; left:0; width:1px; height:1px} /* CFT-1485 — « JE SCROLL DANS LE BEURRE ... COMME SI LE VIEWPORT SE DÉPLACE AVEC MON DOIGT ». Sur iOS, `100vh` est la hauteur BARRES CACHÉES : la scène était donc plus haute que ce qu'on voit, et pendant que les barres de Safari se replient c'est le décor entier qui glisse sous le doigt — un mouvement qui n'est pas l'animation et qu'aucun geste ne commande. `100svh` est la hauteur barres AFFICHÉES, la plus petite. C'est exactement le choix que le JS fait déjà de son côté (`hauteurVue()` se cale sur la fenêtre du chargement, barres visibles, et le commentaire là-bas explique pourquoi) : les deux se contredisaient, la boîte prenant la grande et l'échelle la petite. `100vh` reste écrit au-dessus pour les navigateurs sans `svh`. */ .scene{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; background:var(--gris)} .stage{position:absolute; left:50%; top:50%; width:1920px; height:1080px; margin:-540px 0 0 -960px; transform-origin:center center} /* les elements pilotes par une piste : origine en haut a gauche, exactement comme la matrice de Figma */ [data-el]{position:absolute; top:0; left:0; transform-origin:0 0} /* l'empilement, de l'arriere vers l'avant : le decor, la case et la paume, les telephones, la main qui passe devant, puis les textes */ .ring, .tuile{z-index:0} .bloc, .pivot{z-index:5} .bloc.bloc--case{z-index:1} .tel--cote{z-index:2} .tel--maitre{z-index:3} .bloc.bloc--main{z-index:4} .entete, .note{z-index:6} /* La barre passe AU-DESSUS de l'en-tête. Elles étaient au même niveau, et comme l'en-tête vient après dans le document, c'est lui qui gagnait : le titre et ses tuiles se dessinaient par-dessus le panneau déroulant, qui avait l'air translucide. Le z-index du panneau (7) ne pouvait rien y faire — il ne vaut qu'à l'intérieur du contexte d'empilement de la barre. */ .nav{z-index:9} /* ---------- la navigation ---------- Cotes de la planche Figma : barre de 1720 x 72 posée à x=100, coins à 36 ; liens centrés sur la scène avec 36 d'écart ; actions à droite avec 20 d'écart et un bouton de 117 x 48. */ .nav{width:1920px; height:86px} /* Le reste du site borne sa barre a 1300 (max-w-[1300px] dans les gabarits) : a 1720 elle s'etirait d'un bord a l'autre et ne ressemblait plus aux autres pages. Meme largeur, meme centrage. */ /* L'OMBRE PORTÉE. Le reste du site pose `shadow-[2px_10px_50px_rgba(0,0,0,0.18)]` sur sa barre et AUCUNE bordure ; celle-ci avait l'inverse — un filet gris et pas d'ombre — donc elle se lisait comme une autre barre, ce qui est exactement ce qu'on nous a rapporté. On reprend la valeur du gabarit telle quelle plutôt que d'en accorder une à l'œil : c'est la même barre. */ /* LA CONTRE-ECHELLE. La scene est mise a l echelle par min(largeur/1920, hauteur/1080) : au-dela de 1920 la barre grandissait avec le decor et n avait plus la taille de celle des autres pages. On annule donc l echelle SUR LA BARRE SEULE, avec « --ech » pose par mesure() : le produit des deux vaut 1, la barre se rend donc en vrais pixels CSS, exactement comme le gabarit du site (1300 de large, 71 de haut). Le decor autour, lui, garde son echelle : c est ce qui fait tenir la planche. « min(...100vw...) » parce que 100vw s evalue en pixels reels une fois l echelle annulee : sans ce plafond la barre deborderait d une fenetre plus etroite que 1340. Sur telephone la regle ne s applique pas (voir plus bas) : la barre y est dessinee pour la planche mobile et doit suivre la scene. */ .nav__bar{max-width:min(1300px, calc(100vw - 32px)); margin:7px auto; height:72px; border-radius:36px; background:var(--blanc); transform:scale(calc(1 / var(--ech, 1))); transform-origin:top center; box-shadow:2px 10px 50px rgba(0,0,0,.18); display:flex; align-items:center; justify-content:space-between; padding:0 12px 0 32px; font-size:14px; position:relative} /* LA MEME GOUTTIERE QUE LE RESTE DU SITE. Les gabarits posent « px-4 sm:px-6 md:px-10 lg:px-16 xl:px-24 2xl:px-[270px] » autour d une barre bornee a 1300. Une fois l echelle annulee, « 100vw » et les points de bascule s evaluent en pixels reels : on peut donc reprendre la meme regle telle quelle, plutot que d en approcher le resultat. Sans ca la barre etait a la bonne HAUTEUR mais pas a la bonne LARGEUR, ce qui se voit autant. Ces regles ne mordent pas sur telephone : « html.mobile .nav__bar » est plus specifique et remet max-width a none. */ @media (min-width:640px){.nav__bar{max-width:min(1300px, calc(100vw - 48px))}} @media (min-width:768px){.nav__bar{max-width:min(1300px, calc(100vw - 80px))}} @media (min-width:1024px){.nav__bar{max-width:min(1300px, calc(100vw - 128px))}} @media (min-width:1280px){.nav__bar{max-width:min(1300px, calc(100vw - 192px))}} @media (min-width:1536px){.nav__bar{max-width:min(1300px, calc(100vw - 540px))}} .nav__logo{display:flex; align-items:center; height:46px} .nav__logo img{height:46px; width:auto; display:block} /* Les liens sont centrés sur la BARRE, pas répartis entre le logo et les actions : sinon ils se décalent dès qu'un libellé change de longueur. */ .nav__liens{position:absolute; left:50%; translate:-50% 0; display:flex; gap:28px; align-items:center} /* ...MAIS PAS AU BUREAU DEPUIS LA CONTRE-ECHELLE. Centres sur la BARRE, les liens ne participent pas au flux : ils ignorent donc la largeur des actions a droite. Tant que tout etait reduit, le chevauchement restait sous le pixel ; a taille reelle « Contact » venait s asseoir sur « FR / EN ». Le gabarit du site resout ca avec une grille [auto | 1fr | auto]. On obtient la meme chose en rendant les liens au flux : « space-between » les pose entre le logo et les actions, sans jamais les recouvrir. Sur telephone ils sont masques, la regle n y change rien. */ html:not(.mobile) .nav__liens{position:static; translate:none} .nav__actions{display:flex; gap:10px; align-items:center} /* On neutralise tout ce que le navigateur pose de lui-même sur un lien : soulignement, couleur de lien visité (le « EN » virait au violet une fois cliqué), halo de tapotement sur mobile. */ .nav a, .nav a:visited, .nav a:active{color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent} .nav__liens > a, .nav__decl{color:var(--muet); transition:color .25s cubic-bezier(.16,1,.3,1)} .nav__liens > a:first-child{color:var(--encre)} .nav__liens > a:hover, .nav__decl:hover{color:var(--encre)} .nav__lang{display:flex; gap:6px; color:var(--muet); font-size:13px; margin-right:4px} .nav__lang b{color:var(--encre); font-weight:500} .nav__lang i{font-style:normal; color:#C9CFD4} .nav__lang a{transition:color .25s ease} .nav__lang a:hover{color:var(--encre)} /* écrits « .nav a.xxx » et non « .xxx » : la règle « .nav a » plus haut pose color:inherit avec une spécificité de (0,1,1), supérieure à celle d'une simple classe. Écrit autrement, le texte du bouton restait ENCRE sur fond teal — invisible — et aucun réordonnancement n'y aurait changé quoi que ce soit. */ .nav a.nav__conn{color:var(--encre); font-size:15px; padding:8px 20px; border-radius:999px; transition:opacity .25s ease} .nav a.nav__conn:hover{opacity:.6} .nav a.nav__cta{height:auto; font-size:15px; padding:8px 24px; border-radius:999px; background:var(--teal); color:#fff; display:grid; place-items:center; font-weight:500; transition:background-color .3s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1)} .nav a.nav__cta:hover{background:#00637A; box-shadow:0 10px 24px rgba(0,118,146,.28)} /* le déclencheur et son chevron, qui se retourne quand le panneau s'ouvre */ .nav__appli{position:relative} .nav__decl{font:inherit; background:none; border:0; padding:0; cursor:pointer; display:flex; align-items:center; gap:8px} .nav__decl i{width:8px; height:8px; border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor; rotate:45deg; translate:0 -2px; transition:rotate .35s cubic-bezier(.16,1,.3,1), translate .35s cubic-bezier(.16,1,.3,1)} .nav__decl[aria-expanded="true"]{color:var(--encre)} .nav__decl[aria-expanded="true"] i{rotate:225deg; translate:0 2px} /* le panneau : caché par l'opacité ET par la visibilité, sinon il resterait cliquable au-dessus de la page une fois transparent */ .nav__menu{position:absolute; left:-22px; top:52px; width:360px; padding:10px; border-radius:20px; background:#fff; border:1px solid #EDEFF1; box-shadow:0 20px 48px rgba(11,20,30,.16), 0 2px 6px rgba(11,20,30,.05); opacity:0; visibility:hidden; translate:0 -8px; z-index:7; transition:opacity .28s cubic-bezier(.2,.7,.3,1), translate .42s cubic-bezier(.16,1,.3,1), visibility 0s linear .28s} .nav__appli.ouvert .nav__menu{opacity:1; visibility:visible; translate:0 0; transition:opacity .28s cubic-bezier(.2,.7,.3,1), translate .42s cubic-bezier(.16,1,.3,1), visibility 0s} .nav__eb{margin:0; padding:8px 12px 10px; font-size:11px; letter-spacing:.14em; color:var(--muet); font-weight:600} .nav__item{display:flex; gap:14px; align-items:flex-start; padding:12px; border-radius:14px; color:inherit; transition:background-color .25s cubic-bezier(.16,1,.3,1)} /* LE SURVOL D'UNE RANGÉE. Rien n'est teinté au repos : une couleur de fond permanente se lit comme un survol resté collé. Le geste est fait de quatre choses qui partent ensemble, sur la même courbe : le fond se TIRE depuis la gauche au lieu d'apparaître d'un bloc, la tuile s'allume aux couleurs de la marque et grossit d'un souffle, la rangée avance de trois pixels, et une flèche arrive par la droite pour dire que ça mène ailleurs. Quatre effets qui démarreraient chacun de leur côté feraient du bruit ; groupés sur une seule courbe, ils font un mouvement. */ a.nav__item{position:relative; isolation:isolate; transition:translate .45s cubic-bezier(.16,1,.3,1)} a.nav__item::before{content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:#EEF6F8; opacity:0; scale:0 1; transform-origin:0 50%; transition:scale .5s cubic-bezier(.16,1,.3,1), opacity .28s ease} a.nav__item:hover::before{scale:1 1; opacity:1} a.nav__item:hover{translate:3px 0} .nav__tuile{transition:background-color .35s cubic-bezier(.16,1,.3,1), scale .45s cubic-bezier(.16,1,.3,1)} a.nav__item:hover .nav__tuile{background-color:#CFE6EC; scale:1.07} /* la flèche : un chevron dessiné avec deux bords, pas une image de plus */ a.nav__item::after{content:''; position:absolute; right:16px; top:50%; width:7px; height:7px; margin-top:-5px; border-right:1.8px solid var(--teal); border-bottom:1.8px solid var(--teal); rotate:-45deg; opacity:0; translate:-7px 0; transition:opacity .28s ease, translate .45s cubic-bezier(.16,1,.3,1)} a.nav__item:hover::after{opacity:1; translate:0 0} .nav__item span{display:flex; flex-direction:column; gap:3px; min-width:0} .nav__item b{font-size:16px; font-weight:500; color:var(--encre); display:flex; align-items:center; gap:9px} .nav__item > span > em{font-style:normal; font-size:14px; line-height:17px; color:var(--muet)} .nav__tuile{flex:0 0 40px; width:40px; height:40px; border-radius:12px; background:#E4F0F3 center/22px no-repeat} .nav__tuile--acteur{background-image:url("images/ico-user.svg")} .nav__tuile--agence{background-image:url("images/ico-folder.svg")} .nav__tuile--casting{background-color:var(--pille); background-image:url("images/ico-send.svg"); opacity:.55} /* l'app à venir reste VISIBLE mais inerte : ni lien, ni curseur, ni survol */ .nav__item--bientot{cursor:default} .nav__item--bientot b{color:var(--muet)} .nav__badge{font-style:normal; font-size:11px; letter-spacing:.09em; font-weight:600; color:var(--muet); background:var(--pille); padding:4px 9px; border-radius:9px} .nav__decl:focus-visible, .nav__item:focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:10px} /* ---------- les anneaux ---------- */ .ring{border:1px solid #E9ECEE; border-radius:50%; display:block} /* ---------- les tuiles ---------- « translate » porte la dérive sous le curseur ; « transform » reste au moteur des pistes. Les deux se composent sans se marcher dessus. */ .tuile[data-el]{transition:translate .55s cubic-bezier(.16,1,.3,1)} .tuile{border-radius:17px; background:var(--blanc); box-shadow:0 6px 20px rgba(12,26,32,.16); display:block; background-repeat:no-repeat; background-position:center; background-size:56%} [data-el="tuile-user"]{border-radius:18px} [data-el="tuile-search"]{border-radius:16px} .tuile--fixe{position:absolute; width:64px; height:64px; border-radius:18px} [data-ico="user"]{background-image:url("images/ico-user.svg")} [data-ico="folder"]{background-image:url("images/ico-folder.svg")} [data-ico="check"]{background-image:url("images/ico-check.svg")} [data-ico="search"]{background-image:url("images/ico-search.svg")} [data-ico="send"]{background-image:url("images/ico-send.svg")} [data-ico="calendar"]{background-image:url("images/ico-calendar.svg")} /* ---------- l'en-tete ---------- */ .entete{width:700px} .entete__titre{margin:0 0 0 -153px; width:1007px; font-size:96px; line-height:104px; font-weight:500; letter-spacing:-.035em} /* LES DEUX LIGNES DU TITRE SUR LE MEME AXE. Elles ne l'etaient pas : « l2 » porte un text-align:center explicite, « l1 » est un conteneur flex et n'avait PAS de justify-content — donc collee a gauche de ses 1007 px. Mesure a l'ecran : le milieu de la premiere ligne tombait a 104,6 px a gauche de l'axe, celui de la seconde a 0,5. C'est ce decalage qu'on voit, et il n'a rien a voir avec le centrage de la scene. Les tuiles annulent leur propre largeur (162 plus les 20 de marge) : elles suivent la fin du mot comme decoration, elles ne doivent pas peser dans le centrage du TEXTE, sinon la ligne repart de 91 px vers la gauche. */ .entete__l1{display:flex; justify-content:center; align-items:center; height:104px; white-space:nowrap} .entete__l2{display:block; text-align:center; width:1007px} /* les trois tuiles suivent la fin du titre : la largeur rendue du texte ne tombe jamais au pixel près sur celle de Figma, on les accroche au flux. */ .entete__tuiles{position:relative; flex:0 0 162px; width:162px; height:66px; margin-left:20px; margin-right:-182px} /* L'inclinaison passe de « transform » à la propriété « rotate », et la dérive sous le curseur s'écrira dans « translate ». Les trois se composent sans se marcher dessus : avec un seul transform, bouger les tuiles aurait effacé leur angle, et les redresser aurait effacé leur position. */ .entete__tuiles .tuile{position:absolute; width:58px; height:58px; border-radius:16px; transition:rotate .55s cubic-bezier(.16,1,.3,1), translate .5s cubic-bezier(.16,1,.3,1), scale .5s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1)} .entete__tuiles .tuile:nth-child(1){left:0; top:0; rotate:8deg} .entete__tuiles .tuile:nth-child(2){left:44px; top:6px; rotate:-4deg} .entete__tuiles .tuile:nth-child(3){left:96px; top:1px; rotate:5deg} /* Au survol du groupe, les trois se redressent d'un coup et se décollent : le tas en vrac devient une rangée. On vise le groupe, pas chaque tuile — les redresser une par une donnerait trois petits sursauts au lieu d'un geste. Le décollement passe par « scale », jamais par « translate » : celui-ci porte la dérive sous le curseur, écrite en style en ligne, qui l'emporterait ici. */ .entete__tuiles:hover .tuile{rotate:0deg; scale:1.06; box-shadow:0 13px 30px rgba(12,26,32,.24)} .entete__titre em{font-style:normal; color:var(--teal); font-weight:600} /* 27 d'écart sous un titre de 104 d'interligne, ça détache la phrase au lieu de la rattacher : elle appartient au titre, elle doit s'en approcher. */ .entete__sous{margin:13px 0 0 -85px; width:870px; font-size:24px; line-height:38px; color:var(--corps); text-align:center; letter-spacing:-.01em} .note{font-size:14px; line-height:34px; color:var(--corps); white-space:nowrap} .note--teal{color:var(--teal); font-weight:500} .note--teal i{font-style:normal; margin-right:6px} /* ---------- la case grise et la main ---------- */ .bloc--case, .bloc--main{height:1080px; pointer-events:none} /* Le dégradé allait de #F2F5F6 à #E9EDEF sur une page à #F5F6F7 : le coin haut gauche se confondait avec le fond pendant que le coin bas droit tranchait nettement. Une même surface à la fois invisible et voyante, ça ne se lit pas comme une carte, ça se lit comme un bug d'affichage. La plage est resserrée et un filet dessine le bord : c'est désormais un objet assumé. */ .bloc--case::before{content:''; position:absolute; left:200px; top:150px; width:560px; height:780px; border-radius:26px; background:linear-gradient(150deg,#EFF2F3 0%,#E8ECEE 100%); box-shadow:inset 0 0 0 1px #E3E8EA} .main{position:absolute; left:200px; top:150px; width:560px; height:780px; display:block; border-radius:26px} /* Les deux couches sont recalculees depuis la photo d'origine (4000 x 3000, detouree sur fond transparent) : memes pixels de part et d'autre, seul le masque change, la frontiere du detourage ne peut donc pas se voir. Le cadrage cale le bas de la photo sur le bord bas de la carte, sinon une bande de fond apparaissait sous la main et la faisait lire comme coupee. Le fond gris vient du ::before ci-dessus, les PNG sont transparents. */ /* ---------- le telephone ---------- */ .tel{width:300px; height:619px; border-radius:45px; background:#0E0F11; box-shadow:0 18px 51px rgba(11,20,30,.22); padding:9px} .tel__ilot{position:absolute; left:101px; top:21px; width:98px; height:29px; border-radius:15px; background:#0E0F11; z-index:3} .tel__ecran{position:relative; width:282px; height:601px; border-radius:37px; overflow:hidden; background:linear-gradient(160deg,#09A9AA 0%,#00768F 58%,#055F6D 100%)} .tel--cote{width:282px; height:582px; border-radius:42px} .tel--cote .tel__ecran{width:264px; height:564px; border-radius:35px; display:grid; place-items:center; align-content:center; gap:18px} .tel__ico{display:block; background-repeat:no-repeat; background-position:center; background-size:contain} .tel__ico--user{width:106px; height:132px; background-image:url("images/ico-tel-profil.svg")} .tel__ico--send{width:132px; height:129px; background-image:url("images/ico-tel-envoi.svg")} .tel--cote span{color:#fff; font-size:19px; letter-spacing:-.01em} /* les ecrans empiles dans le telephone : ils se croisent en fondu, sinon le changement tombe en plein glissement et se lit comme une coupure */ /* Le fondu était linéaire en .22s : la coupure s'entendait. Il dure maintenant .42s sur une courbe qui décélère, avec un souffle d'échelle — l'écran sortant recule d'un pour cent pendant que l'entrant se pose. */ .ec{position:absolute; inset:0; opacity:0; visibility:hidden; transform:scale(1.012); transform-origin:50% 45%; transition:opacity .42s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1), visibility 0s linear .42s} .ec.on{opacity:1; visibility:visible; transform:none; transition:opacity .42s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1), visibility 0s} /* ecran de marque */ .ec--marque{display:flex; flex-direction:column; align-items:center; --gx:50%; --gy:40%} /* LA VITRE VIVANTE. Un ecran de telephone parfaitement mat se lit comme une image collee. Deux couches lui rendent sa matiere, et aucune ne touche au contenu : — « lueur » est la tache speculaire du curseur. Elle se deplace avec la souris n'importe ou dans la fenetre, pas seulement au survol du telephone : l'appareil est petit a l'ecran, exiger le survol aurait rendu l'effet introuvable. Position posee en variables CSS depuis le script. (Il y avait aussi un « reflet » : un passage de lumiere en diagonale, toutes les huit secondes, qui balayait la vitre tout seul. Retire — voir plus bas.) */ .ec__lueur{position:absolute; pointer-events:none; opacity:0; transition:opacity .7s cubic-bezier(.16,1,.3,1)} .ec--marque.on .ec__lueur{opacity:1} /* LA LUEUR NE SUIT PLUS LE CURSEUR (D5). Elle balayait l'ecran d'un bord a l'autre au moindre mouvement de souris — « ca fait made in China ». Elle reste, parce qu'une vitre sans lueur se lit comme une image collee, mais elle est POSEE : une source en haut a gauche, faible, qui ne bouge jamais. Ce n'est plus un effet, c'est une matiere. */ .ec__lueur{inset:0; border-radius:37px; background:radial-gradient(52% 40% at 34% 22%, rgba(255,255,255,.13) 0%, rgba(255,255,255,.045) 48%, transparent 74%)} /* (Le reflet qui balayait la vitre toutes les huit secondes vivait ici. Il faisait « telephone de vitrine » plutot que « telephone de quelqu'un » — un effet de rendu produit, pas une qualite du produit. Retire.) */ /* Le logo, le lockup et la notification se posent l'un apres l'autre quand l'ecran s'allume, au lieu d'etre deja la. La notification vient du bas et se cale, comme sur un vrai appareil. */ .ec__cf, .ec__mot, .notif{opacity:0; transition:opacity .55s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.16,1,.3,1)} .ec__cf, .ec__mot{transform:translateY(14px)} .ec--marque.on .ec__cf{opacity:1; transform:none; transition-delay:.12s} .ec--marque.on .ec__mot{opacity:1; transform:none; transition-delay:.22s} /* Le vrai logo, exporté de la maquette (nœuds 1328:728 et 1328:731) : le « Cf » en SVG, le lockup en PNG blanc. Les deux étaient composés en texte, ce qui ne rendait ni le dessin de la ligature ni celui du « flow ». Cotes de la planche, dans l'écran : Cf à y=150, 97 x 58 ; lockup à y=221, 132 x 36 — soit 13 px sous le Cf. */ /* D6 — LE VRAI « Cf », pas une approximation. Le mockup dessinait un Cf en deux courbes qui ne sont pas celles de la charte. Celui-ci est decoupe dans l'icone officielle (assets/images/ favicon.png) : memes contours, meme rapport 539 / 468. La hauteur est conservee, la largeur suit le rapport reel — 67 au lieu de 97. */ .ec__cf{margin-top:150px; width:67px; height:58px; display:block; object-fit:contain} .ec__mot{margin-top:13px; width:132px; height:36px; display:block; object-fit:contain} /* la notification facon iOS */ .notif{position:absolute; left:13px; top:292px; width:256px; border-radius:18px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.34); box-shadow:0 4px 16px rgba(0,13,18,.2); display:flex; gap:10px; align-items:center; padding:12px; transform:translateY(24px) scale(.94); transform-origin:50% 100%} .ec--marque.on .notif{opacity:1; transform:none; transition-delay:.4s; box-shadow:0 10px 26px rgba(0,13,18,.30)} /* D6 — la pastille de la notification est L'ICONE D'APP officielle, pas un « Cf » retape dans un carre au degrade approchant. */ .notif__ico{width:34px; height:34px; border-radius:8px; flex:0 0 34px; display:block; object-fit:cover} .notif__col{flex:1; min-width:0} .notif__tete{display:flex; justify-content:space-between; font-size:8.4px; letter-spacing:.06em; color:rgba(255,255,255,.66); font-weight:600} .notif__tete span:last-child{letter-spacing:0; font-weight:400} .notif__titre{margin:3px 0 0; font-size:11.6px; line-height:15px; color:#fff; font-weight:600; letter-spacing:-.015em} .notif__corps{margin:3px 0 0; font-size:10.6px; line-height:14px; color:rgba(255,255,255,.94); letter-spacing:-.01em} /* ecran « 156 heures » : gabarit 217 x 463 de la maquette */ .ch__int{position:relative; width:217px; height:463px; transform:scale(1.2995); transform-origin:top left} .ch__gros{position:absolute; left:18px; top:52px; width:181px; font-size:56px; line-height:56px; color:#fff; font-weight:600; letter-spacing:-.04em} .ch__unite{position:absolute; left:18px; top:112px; width:181px; font-size:18px; line-height:22px; color:rgba(255,255,255,.72)} .ch__b{position:absolute; width:14px; border-radius:7px; background:rgba(255,255,255,.9)} .ec--chiffre .ch__filet{position:absolute; left:18px; top:340px; width:181px; height:1px; background:rgba(255,255,255,.35)} .ch__j{position:absolute; top:350px; width:14px; text-align:center; font-size:10px; line-height:14px; color:rgba(255,255,255,.72)} /* ecran « le mur d'annonces » : meme gabarit */ .li__int{position:relative; width:217px; height:463px; transform:scale(1.2995); transform-origin:top left} .li__tete{position:absolute; left:18px; top:40px; width:181px; height:30px; border-radius:9px; background:rgba(255,255,255,.22)} .li__champ{position:absolute; left:30px; top:52px; width:62px; height:6px; border-radius:3px; background:rgba(255,255,255,.5)} .li__r{position:absolute; left:18px; width:181px; height:78px; border-radius:12px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.2)} .li__r i{position:absolute; border-radius:3px; background:rgba(255,255,255,.5)} .li__r i.li__rond{left:10px; top:12px; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.55)} .li__a{left:40px; top:15px; width:74px; height:6px} .li__b{left:40px; top:27px; width:44px; height:5px; opacity:.7} .li__c{left:10px; top:48px; width:161px; height:6px; opacity:.8} .li__d{left:10px; top:60px; width:100px; height:6px; opacity:.55} /* ecran des trois profils : ecrit sur le gabarit de 217 de la maquette, puis remis a l'echelle de l'ecran de 282 */ .pf__int{position:relative; width:217px; height:463px; transform:scale(1.2995); transform-origin:top left} .pf{position:absolute; left:8px; width:201px; height:68px; border-radius:13px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.34)} .pf:nth-child(1){top:69px} .pf:nth-child(2){top:147px} .pf:nth-child(3){top:225px} .av{position:absolute; left:8px; top:8px; width:52px; height:52px; border-radius:26px; background:rgba(255,255,255,.16) center/cover no-repeat} .av--homme{background-image:url("images/av-homme.svg")} .av--femme{background-image:url("images/av-femme.svg")} .av--enfant{background-image:url("images/av-enfant.svg")} .pf b{position:absolute; left:69px; top:14px; width:126px; font-size:11px; line-height:18px; font-weight:500; color:rgba(255,255,255,.95); letter-spacing:-.01em; white-space:nowrap} .pf .bl{position:absolute; left:69px; height:6px; border-radius:3px; display:block} /* l'avatar est aussi un : les barres sont donc le 2e et le 3e du type */ .pf .bl:nth-of-type(2){top:35px; width:123px; background:rgba(255,255,255,.35)} .pf .bl:nth-of-type(3){top:47px; width:75px; background:rgba(255,255,255,.22)} /* le bottin : gabarit 278 x 591 de la maquette */ .bo__int{position:relative; width:278px; height:591px; transform:scale(1.0144); transform-origin:top left} .bo__fond{position:absolute; inset:0; filter:blur(0px); transition:filter .55s cubic-bezier(.4,0,.2,1)} .ec--bottin.flou .bo__fond{filter:blur(5px)} .bo__champ{position:absolute; left:12px; top:26px; width:254px; height:22px; border-radius:11px; background:rgba(255,255,255,.16)} .bo__loupe{position:absolute; left:11px; top:7px; width:8px; height:8px; border-radius:50%; border:1.4px solid rgba(255,255,255,.6)} .bo__mot{position:absolute; left:25px; top:9px; width:48px; height:4px; border-radius:2px; background:rgba(255,255,255,.4)} .bo__l{position:absolute; left:13px; width:254px; border-radius:9px; background:rgba(255,255,255,.10)} .bo__ico{position:absolute; left:7px; top:9px; width:16px; height:16px; border-radius:5px; background:rgba(255,255,255,.32)} .bo__a{position:absolute; left:31px; top:10px; height:4px; border-radius:2px; background:rgba(255,255,255,.5)} .bo__b{position:absolute; left:31px; top:22px; height:4px; border-radius:2px; background:rgba(255,255,255,.3)} .bo__l[style*="height: 26px"] .bo__a{top:11px} .bo__fondu{position:absolute; left:0; width:278px; pointer-events:none} .bo__fondu--haut{top:0; height:84px; background:linear-gradient(180deg,#0d8b9b 0%,rgba(13,139,155,0) 100%)} .bo__fondu--bas{top:471px; height:120px; background:linear-gradient(0deg,#0a6274 0%,rgba(10,98,116,0) 100%)} /* la notification arrive du bas, un peu reduite, et se pose : l'ombre s'ouvre en meme temps, ce qui la decolle de la liste floue derriere. */ .bo__n{position:absolute; left:16px; width:254px; border-radius:14px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.34); box-shadow:0 2px 6px rgba(0,13,18,.10); opacity:0; transform:translateY(18px) scale(.94); transform-origin:50% 100%; transition:opacity .36s cubic-bezier(.2,.7,.3,1), transform .62s cubic-bezier(.18,.9,.24,1), box-shadow .62s cubic-bezier(.18,.9,.24,1)} .bo__n.on{opacity:1; transform:none; box-shadow:0 9px 24px rgba(0,13,18,.28)} .bo__nico{position:absolute; left:11px; top:11px; width:24px; height:24px; border-radius:8px; background:#fff} .bo__nico::after{content:''; position:absolute; left:8px; top:8px; width:8px; height:8px; border-radius:50%; background:var(--teal)} .bo__n p{position:absolute; left:45px; top:11px; right:12px; margin:0; font-size:16px; line-height:22px; color:#fff; font-weight:500; letter-spacing:-.015em} /* ecran des etapes */ /* les trois etapes : gabarit 248 de la maquette, un doodle different chacune */ .et__int{position:relative; width:248px; height:529px; transform:scale(1.1371); transform-origin:top left} .ec__glyphe{position:absolute; left:74px; top:158px; width:100px; height:124px; background-repeat:no-repeat; background-position:center; background-size:contain; background-image:url("images/ico-tel-profil.svg")} .ec__glyphe[data-et="2"]{left:66px; top:170px; width:116px; height:128px; background-image:url("images/ico-search.svg")} .ec__glyphe[data-et="3"]{left:62px; top:178px; width:124px; height:121px; background-image:url("images/ico-tel-envoi.svg")} /* La mue du glyphe : il se replie vite (.19s, courbe qui accélère), change pendant qu'il est fermé, puis se redéploie lentement (.52s, courbe qui décélère). L'asymétrie est ce qui fait lire une transformation plutôt qu'un changement d'image. */ .ec__glyphe, .ec__label{ transition:opacity .42s cubic-bezier(.16,1,.3,1), transform .52s cubic-bezier(.16,1,.3,1)} .ec__glyphe.mue{opacity:0; transform:scale(.68) rotate(-14deg); transition-duration:.19s; transition-timing-function:cubic-bezier(.4,0,1,1)} .ec__label.mue{opacity:0; transform:translateY(7px); transition-duration:.19s; transition-timing-function:cubic-bezier(.4,0,1,1)} .ec__label{position:absolute; left:0; top:327px; width:248px; text-align:center; color:#fff; font-size:19px; line-height:25px; letter-spacing:-.01em} /* Le bento : ecrit sur un gabarit de 1167 x 2484 — les cotes exacts de l'ecran dans la maquette (1328:2709) — puis reduit a l'echelle de l'ecran reel. L'ecran garde le degrade teal du telephone : le fond gris qui etait pose ici ecrasait ce degrade et faisait des cartes blanches sur blanc. */ /* La planche fait exactement la hauteur de l'écran, mais son contenu ne la remplissait pas : il restait 116 px de teal nu entre la dernière carte et le bas du boîtier, soit une fois et demie la marge latérale. « space-between » répartit ce reliquat dans les cinq intervalles, et la marge basse égale désormais celle des côtés : le vide devient une respiration. */ .bento__int{width:1167px; height:2484px; transform:scale(.2416); transform-origin:top left; display:flex; flex-direction:column; gap:30px; justify-content:space-between; padding:218px 71px 71px} /* la colonne a deja gap:30, comme dans Figma : la marge basse s'ajoutait */ .bento__titre{margin:0; font-size:58px; line-height:76px; font-weight:500; letter-spacing:-.03em} .bento__titre{color:#fff} .bc{border-radius:40px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); padding:56px; color:#fff; transition:background-color .4s ease, border-color .4s ease, transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1)} /* hauteur de bloc 36 dans Figma : sans line-height on tombait a 32.9 */ .bc__eb{margin:0 0 32px; font-size:25px; line-height:36px; letter-spacing:.14em; color:rgba(255,255,255,.62); font-weight:600} .bc__eb--teal{color:rgba(255,255,255,.82)} /* La puce etait un ::before absolu, cale a la main : top 4 pour la premiere ligne, top 29 pour les suivantes a cause du filet et de son rembourrage. Deux nombres qui ne tenaient que par accident et qui donnaient ce leger faux aplomb. La ligne est maintenant une boite flex, la case s'aligne toute seule sur la premiere ligne du texte, quel que soit le nombre de lignes. */ .liste{margin:0; padding:0; list-style:none} .liste li{display:flex; align-items:flex-start; gap:32px; font-size:35px; line-height:51px; letter-spacing:-.015em} .liste li > span{flex:1; min-width:0} /* (51 - 43) / 2 : la case tombe sur l'axe optique de la premiere ligne */ .case{flex:0 0 43px; width:43px; height:43px; margin-top:4px; border-radius:50%; background-size:58%; background-position:center; background-repeat:no-repeat; transition:background-color .3s cubic-bezier(.16,1,.3,1), border-color .3s cubic-bezier(.16,1,.3,1), scale .35s cubic-bezier(.16,1,.3,1)} /* Figma : 45.2 entre le bas d'une ligne et le haut de la suivante, filet compris. On etait a 52, ce qui gonflait la premiere carte de 23. Le filet part de la colonne du TEXTE, pas du bord de la carte : il coupait la colonne des cases en deux, et c'est ce qui se lisait de travers. */ .liste li + li{margin-top:22px; padding-top:20px; position:relative} .liste li + li::before{content:''; position:absolute; left:75px; right:0; top:0; height:3px; background:rgba(255,255,255,.20)} .liste--oui li{color:#fff; cursor:pointer; border-radius:18px; transition:background-color .3s cubic-bezier(.16,1,.3,1)} /* On doit VOIR que c'est cliquable : la case vide est un anneau franc, la ligne s'eclaire au survol, et la case grossit d'un souffle. */ .liste--oui .case{border:3px solid rgba(255,255,255,.55); background-color:transparent} .liste--oui li:hover .case{border-color:#fff; scale:1.08} .liste--oui li:hover{background:rgba(255,255,255,.09)} .liste--oui li:focus-visible{outline:3px solid #fff; outline-offset:4px} .liste--oui li[aria-checked="true"]{color:#fff} .liste--oui li[aria-checked="true"] .case{border-color:#fff; background-color:#fff; background-image:url("data:image/svg+xml;utf8,")} .liste--oui li:not([aria-checked="true"]) > span{color:rgba(255,255,255,.88)} .liste--non li{color:rgba(255,255,255,.80)} .liste--non .case{border:3px solid rgba(255,255,255,.45); background-image:url("data:image/svg+xml;utf8,")} .bc__paire{display:flex; gap:30px} .bc__paire .bc{flex:1; min-width:0} .bc__gros{margin:24px 0 0; font-size:61px; line-height:79px; letter-spacing:-.03em; font-weight:500} .bc__det{margin:25px 0 0; font-size:32px; line-height:46px; color:rgba(255,255,255,.80)} /* la carte de la punchline est un teal plus sombre, pas du noir */ .bc--noire{background:rgba(2,52,66,.46); border:1px solid rgba(255,255,255,.12); padding:55px 56px 56px} /* COINS CONCENTRIQUES. L'écran a un rayon de 151 et la dernière carte de 40 : dans les angles du bas, l'écart entre les deux courbes s'élargissait en coin, et c'est ça qui se lisait de travers — pas la hauteur du vide. La règle est simple : rayon intérieur = rayon extérieur moins la marge, soit 151 - 71 = 80. Les deux courbes restent alors parallèles à 71 partout. */ .bento__int > :last-child{border-bottom-left-radius:80px; border-bottom-right-radius:80px} .bc__punch{margin:0; font-size:61px; line-height:81px; color:#fff; letter-spacing:-.03em; font-weight:500} /* la FAQ dans l'ecran : gabarit de 410 */ .faq__int{position:relative; width:410px; height:874px; transform:scale(.688); transform-origin:top left} .faq__eb{position:absolute; left:20px; top:62px; margin:0; font-size:16px; letter-spacing:.08em; color:rgba(255,255,255,.92); font-weight:600} .faq__n{position:absolute; left:20px; top:86px; margin:0; font-size:11.5px; color:rgba(255,255,255,.55)} .faq__liste{position:absolute; left:20px; top:134px; width:370px; margin:0; padding:0; list-style:none} /* Les cartes arrivent en cascade quand l'ecran bascule sur la FAQ, de haut en bas, 55 ms d'ecart. Elles s'affichaient toutes les sept d'un bloc. */ .faq__liste li{display:flex; gap:13px; align-items:flex-start; padding:22px 15px; border-radius:15px; background:rgba(255,255,255,.10); margin-bottom:18px; border:1px solid transparent; cursor:pointer; opacity:0; transform:translateY(16px)} .ec--faq.on .faq__liste li{opacity:1; transform:none; transition-delay:calc(var(--i, 0) * 55ms)} .faq__liste li:focus-visible{outline:2px solid #fff; outline-offset:2px} .faq__liste li.on{background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.34)} .faq__liste b{flex:0 0 24px; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.82); color:var(--teal); font-size:10px; display:grid; place-items:center; font-weight:600} .faq__liste li.on b{background:#fff} .faq__liste p{margin:0; font-size:15.5px; line-height:21px; color:rgba(255,255,255,.9); font-weight:600; letter-spacing:-.015em} .faq__liste li.on p{color:#fff} /* La reponse s'ouvrait en display:none -> block, c'est-a-dire sans transition possible : la carte doublait de hauteur d'une image a l'autre. La grille exterieure passe de 0fr a 1fr — elle s'anime jusqu'a la hauteur REELLE du texte, sans qu'on ait a la deviner — et le i du dedans coupe le debordement pendant le trajet. */ .faq__liste span{display:grid; grid-template-rows:0fr; margin-top:0; opacity:0; transition:grid-template-rows .52s cubic-bezier(.16,1,.3,1), margin-top .52s cubic-bezier(.16,1,.3,1), opacity .3s cubic-bezier(.4,0,1,1)} .faq__liste span > i{overflow:hidden; display:block; font-style:normal; font-size:13px; line-height:19px; color:rgba(255,255,255,.74); font-weight:400} .faq__liste li.on span{grid-template-rows:1fr; margin-top:9px; opacity:1; transition:grid-template-rows .52s cubic-bezier(.16,1,.3,1), margin-top .52s cubic-bezier(.16,1,.3,1), opacity .42s cubic-bezier(.2,.7,.3,1) .1s} /* ---------- les sections ---------- AUCUN bloc n'intercepte les clics. Ce sont des calques de texte qui couvrent la scène entière et qui passent DEVANT le téléphone (z-index 5 contre 3) : dès qu'une section est à l'écran, elle avalait tout ce qu'on essayait de cliquer dans l'appareil. La preuve tuait ainsi le bouton du bento, la FAQ tuait ses propres questions. Seuls les éléments réellement interactifs reprennent la main — une règle plutôt qu'une exception par section, sinon on rejoue ce bug à chaque nouveau bloc. */ .bloc, .pivot{pointer-events:none} .bloc a, .bloc button, .bloc input, .bloc label, .bloc [role], .pivot a, .pivot button{pointer-events:auto} /* ---------- les sections ---------- */ .bloc,.pivot{position:absolute; left:0; top:0; width:1920px; opacity:0; transform-origin:center center} /* les trois sections de donnees : colonne de droite, x 880 */ .bloc--donnee{height:1080px} .bloc--donnee .tuile--fixe{left:880px; top:320px} .bloc--donnee h2{position:absolute; left:880px; top:432px; width:720px; margin:0; font-size:64px; line-height:70px; font-weight:500; letter-spacing:-.035em} .bloc--donnee[data-de="6"] h2{font-size:96px; line-height:104px; top:420px} .bloc--donnee p{position:absolute; left:880px; top:648px; width:720px; margin:0; font-size:32px; line-height:46px; color:var(--corps)} .bloc--donnee[data-de="6"] p{top:660px} .pivot{height:1080px; text-align:center} /* Le titre remonte de 82 à 36 pour libérer la place de la phrase en dessous. Rien ne gêne en haut : la barre de navigation s'efface dès le plan 3, tout le haut de la scène est vide à partir de là. */ /* D7 — LE BLOC EST CENTRE DANS SA SECTION. Le pivot occupait 22 a 835 dans une scene de 1080 : vingt-deux pixels de vide en haut, deux cent quarante-cinq en bas. « Un gros espace vide sous le telephone. » Titre, phrase et appareil descendent ensemble de 111 — la moitie de l'ecart — et le bloc se pose alors a 133 / 134. Quand la punchline arrive, la phrase barree remonte de ces 111 EN PLUS de ses 52 d'origine : elle retrouve exactement sa place au-dessus de la punchline. */ .pivot__titre{position:absolute; left:340px; top:147px; width:1240px; margin:0; font-size:64px; line-height:72px; font-weight:500; letter-spacing:-.03em} /* Le mot est decoupe en neuf pour que chaque lettre bascule pour son compte — et un mot decoupe en neuf elements peut se rompre entre deux lettres. Sur 1240 de large ca n'arrivait jamais ; sur 326 le titre s'ecrivait « l'e / nvers. ». Le mot reste donc d'un seul tenant. */ .pivot__envers{color:var(--teal); white-space:nowrap} /* chaque lettre bascule pour son compte, au rythme des notifications qui se posent dans le telephone. La courbe depasse un peu 180 puis revient : c'est ce leger rebond qui fait la difference avec une rotation plate. */ .pivot__envers i{display:inline-block; font-style:normal; transform-origin:50% 50%; transition:transform .68s cubic-bezier(.34,1.3,.42,1); transition-delay:calc(var(--i, 0) * 48ms)} .pivot__envers i.on{transform:rotate(180deg)} /* Réduite à sa seule affirmation, la phrase peut porter la taille : à 17 px elle se lisait comme une légende, et la rature qui la traverse ensuite ne se voyait pas. À 26 elle tient encore sur une ligne (nowrap plus bas) et la barre devient un geste. */ /* 36 px, contre 17 au départ. La contrainte n'est pas la largeur — la phrase n'occupe que 741 des 1000 disponibles — mais le HAUT DU TÉLÉPHONE, qui monte à 203 au plan 15. En descendant de 36 à 136 et en montant le titre à 36, on tient : 36 de marge haute, 28 entre le titre et la phrase, 21 avant l'appareil. Au-delà de cette taille il faudrait déplacer le téléphone. */ .pivot__sous{position:absolute; left:460px; top:247px; width:1000px; margin:0; font-size:36px; line-height:46px; letter-spacing:-.02em; color:var(--corps)} /* Entree du pivot : le titre monte, la ligne du dessous le suit avec un temps de retard. Pas de filter:blur ici, il laisse le texte pateux apres coup. */ .pivot__titre, .pivot__sous{opacity:0; transform:translateY(26px); transition:opacity .85s cubic-bezier(.16,1,.3,1), transform .95s cubic-bezier(.16,1,.3,1), color .5s ease} .pivot.pose .pivot__titre{opacity:1; transform:none} .pivot.pose .pivot__sous{opacity:1; transform:none; transition-delay:.15s} /* Pendant la punchline seulement : la phrase barrée remonte de 82 pour ouvrir le bloc. On ne peut pas la déplacer pour de bon — aux plans 10 à 15 elle est posée sous le titre du pivot, qui descend jusqu'à 180, et elle le heurterait. Elle monte donc au moment où le titre s'efface, dans le même mouvement. */ .pivot.haute .pivot__sous{transform:translateY(-163px)} /* a la fin du pivot : le titre s'efface et la phrase du bas se raye, le trait se tirant de gauche a droite */ /* un seul trait pour toute la phrase : un par morceau donnait deux segments qui ne se rejoignaient pas. Le bloc est en ligne, sans retour possible, pour que le trait suive exactement la largeur du texte. */ .pivot__ligne{position:relative; display:inline-block; white-space:nowrap} .pivot__ligne::after{content:''; position:absolute; left:0; top:52%; width:100%; height:2px; background:currentColor; border-radius:1px; transform:scaleX(0); transform-origin:0 50%; transition:transform .7s cubic-bezier(.4,0,.2,1)} .pivot.pose.barre .pivot__titre{opacity:0; transform:translateY(-14px)} .pivot.barre .pivot__titre{opacity:0; transform:translateY(-14px)} .pivot.barre .pivot__sous{color:var(--muet)} .pivot.barre .pivot__ligne::after{transform:scaleX(1)} .bloc--punch{height:1398px; text-align:center} .punch__amorce{position:absolute; left:160px; top:362px; width:1600px; margin:0; font-size:40px; line-height:56px; color:var(--corps); text-decoration:line-through; text-decoration-thickness:2px} /* La punchline reprend la planche 1328:2320 : la phrase barrée, un filet, les deux lignes centrées, le téléphone dessous. Attention, les « top » de Figma ne se recopient pas : là-bas la phrase barrée est en 40 px (66 de haut), ici en 17 px (26 de haut). Reprendre l'ordonnée du filet creusait l'écart de 34 à 75. On reprend donc les ESPACES de la maquette — 34 sous la phrase barrée, 44 sous le filet — et non ses positions. Le bloc fait 1398 et se recentre de -159 : top 339 tombe à 180 dans la scène. Au repos la phrase barrée est à 176 — et non 202, qui inclut les 26 px de son décalage d'entrée. Remontée de 56, elle tombe à 120 : reste 34 sous elle pour le filet, 44 sous le filet pour le titre, 44 sous le titre pour l'appareil. */ .punch__filet{position:absolute; left:912px; top:339px; width:96px; height:4px; border-radius:2px; background:var(--teal); transform:scaleX(0); transform-origin:50% 50%; transition:transform .6s cubic-bezier(.16,1,.3,1)} .punch__gros{position:absolute; left:110px; top:387px; width:1700px; margin:0; font-size:104px; line-height:106px; font-weight:500; letter-spacing:-.035em} .punch__gros span{display:block; opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .95s cubic-bezier(.16,1,.3,1)} .punch__l2{color:var(--teal)} /* insécable : coupé sur deux lignes, le soulignement laissait un trait orphelin sous « toi. » */ /* La barre se REMPLIT AU SURVOL. Deux couches : la pâle est le rail, posée en ombre interne comme avant ; la pleine est un ::after qu'on étire de la gauche vers la droite. pointer-events:auto est indispensable ici : les blocs de section ne reçoivent plus les clics (ils couvraient le téléphone), et sans cette ligne le ne verrait jamais la souris passer. */ .punch__l2 u{text-decoration:none; white-space:nowrap; position:relative; display:inline-block; pointer-events:auto; box-shadow:inset 0 -7px 0 rgba(0,118,146,.28)} .punch__l2 u::after{content:''; position:absolute; left:0; right:0; bottom:0; height:7px; background:var(--teal); border-radius:1px; scale:0 1; transform-origin:0 50%; transition:scale .62s cubic-bezier(.16,1,.3,1)} .punch__l2 u:hover::after{scale:1 1} .bloc--punch.on .punch__filet{transform:scaleX(1)} .bloc--punch.on .punch__l1{opacity:1; transform:none; transition-delay:.10s} .bloc--punch.on .punch__l2{opacity:1; transform:none; transition-delay:.26s} /* La sortie part vers le HAUT, dans le sens de la lecture : redescendre par où elle est venue donnerait un aller-retour. La seconde ligne s'en va la première, le filet se rétracte en dernier. Elle est deux fois plus rapide que l'entrée (.34s contre .95s) : le geste qui mène aux étapes ne dure que ~500 ms, une sortie longue serait coupée net par l'extinction du bloc. Doit rester APRÈS les règles .on — même spécificité, c'est l'ordre qui tranche. */ .bloc--punch.part .punch__filet{transform:scaleX(0); transition-duration:.3s; transition-delay:.1s} .bloc--punch.part .punch__l1{opacity:0; transform:translateY(-30px); transition-duration:.3s, .34s; transition-delay:.06s} .bloc--punch.part .punch__l2{opacity:0; transform:translateY(-30px); transition-duration:.3s, .34s; transition-delay:0s} .bloc--etape{height:1080px} .et__eb{position:absolute; margin:0; font-size:17px; color:var(--teal); font-weight:600} .et__num{position:absolute; left:937px; top:106px; width:46px; height:46px; border-radius:50%; background:var(--teal); color:#fff; font-size:22px; display:grid; place-items:center; font-weight:500} .et__titre{position:absolute; left:230px; top:var(--y); width:1460px; margin:0; text-align:center; font-size:76px; line-height:86px; font-weight:500; letter-spacing:-.035em} /* les pastilles arrivent comme des messages : elles montent, s'ouvrent legerement, et viennent du cote ou elles sont posees */ /* Les pastilles se posent comme des messages : elles arrivent du bord dont elles viennent, un peu réduites, avec l'ombre qui s'ouvre en même temps. La cascade est portée par transition-delay (posé en JS, 115 ms par pastille) et non par le défilement : entre deux arrêts il n'y a que ~300 ms, un échelonnement calé sur le scroll s'y écraserait. */ /* L'ecart d'entree passe par --dx et --k au lieu d'etre ecrit dans chaque « transform ». Sur 390 la pastille n'a pas 38 pixels de marge pour venir du bord : seul --k change, et les regles « .on » et « .part » restent aussi specifiques qu'au bureau — sinon la version mobile, plus specifique, les aurait battues et les pastilles ne seraient jamais apparues. */ .et__puce{position:absolute; left:var(--x); top:var(--y); min-width:var(--w); --dx:0px; --k:1; border-radius:22px; background:var(--pille); padding:22px 26px; font-size:24px; line-height:31px; letter-spacing:-.01em; white-space:nowrap; text-align:center; box-shadow:0 1px 3px rgba(11,20,30,.04); opacity:0; transform:translate(calc(var(--dx) * var(--k)),20px) scale(.9); transform-origin:50% 100%; transition:opacity .5s cubic-bezier(.2,.7,.3,1), transform .78s cubic-bezier(.16,1,.3,1), box-shadow .78s cubic-bezier(.16,1,.3,1)} .et__puce[data-libre]{width:var(--w); min-width:0; white-space:normal} .et__puce[data-cote="g"]{--dx:-38px; transform-origin:0% 100%} .et__puce[data-cote="d"]{--dx:38px; transform-origin:100% 100%} /* La dérive au curseur passe par la propriété « translate », pas par « transform » : celui-ci porte déjà l'entrée et la sortie, et les deux se marcheraient dessus. Elles se composent, chacune avec sa propre durée. */ .et__puce, .et__compteur{translate:0 0; transition:opacity .5s cubic-bezier(.2,.7,.3,1), transform .78s cubic-bezier(.16,1,.3,1), box-shadow .78s cubic-bezier(.16,1,.3,1), translate .7s cubic-bezier(.16,1,.3,1); /* Le retard de cascade ne vaut QUE pour l'arrivée. Posé en ligne sur transition-delay, il s'appliquait aussi à la dérive au curseur : la septième pastille attendait 690 ms avant de réagir à la souris, et seule la première — retard nul — semblait vivante. Il passe donc par --d, et le quatrième délai, celui de « translate », reste à zéro. */ transition-delay:var(--d,0ms), var(--d,0ms), var(--d,0ms), 0ms} .et__puce.on{opacity:1; transform:translate(0,0) scale(1); box-shadow:0 10px 26px rgba(11,20,30,.09)} /* La sortie repart vers le bord d'où la pastille est venue, mais deux fois plus vite que l'entrée et sans le retard posé en JS : le geste qui mène à l'étape suivante ne dure que ~530 ms, et le bloc s'éteint à 250 ms. Une sortie longue serait coupée. Doit rester APRÈS .on — même spécificité. */ .et__puce.part, .et__compteur.part{opacity:0; --d:0ms; transition-duration:.2s, .28s, .28s, .7s} .et__puce.part{transform:translate(calc(var(--dx) * var(--k) * .79),16px) scale(.94)} .et__compteur.part{transform:translate(calc(var(--dx) * var(--k) * .79),16px) scale(.94)} /* D12 — LE BOUTON NE DISPARAIT PLUS ENTRE DEUX ETAPES. Il y en avait un par bloc : trois boutons, trois hauteurs (962, 941, 927), et une refonte complete a chaque passage puisqu'un bloc qui sort emporte son bouton avec lui. C'est desormais le calque « cta-etapes », pose une fois a 828 / 962, present de l'entree de la premiere etape a la sortie de la troisieme — sur les deux planches. Les trois d'origine restent dans le balisage pour qui n'a pas de script, mais ne s'affichent plus. */ /* « .bouton » pose « display:inline-flex » plus bas dans la feuille : a specificite egale c'est lui qui gagnait. On passe donc par le bloc. */ .bloc--etape .et__cta{display:none} /* Le contenu de l'étape entre en fondu, porté par le CSS et non par le défilement : entre deux arrêts il ne reste que ~300 ms, une opacité pilotée au scroll y serait un clignotement. Le numéro, puis le titre, puis le bouton ; les pastilles se posent entre les deux, comme des messages. */ .et__num, .et__titre, .et__cta{opacity:0; transform:translateY(22px); transition:opacity .62s cubic-bezier(.16,1,.3,1), transform .86s cubic-bezier(.16,1,.3,1)} .bloc--etape.on .et__num{opacity:1; transform:none} .bloc--etape.on .et__titre{opacity:1; transform:none; transition-delay:.07s} .bloc--etape.on .et__cta{opacity:1; transform:none; transition-delay:.46s} /* le titre et le numéro s'en vont vers le haut, le bouton vers le bas : ils se séparent au lieu de s'effacer sur place */ .bloc--etape.part .et__num, .bloc--etape.part .et__titre{opacity:0; transform:translateY(-18px); transition-duration:.22s, .3s; transition-delay:0s} .bloc--etape.part .et__cta{opacity:0; transform:translateY(18px); transition-duration:.22s, .3s; transition-delay:0s} /* Elle était en var(--gris) — la couleur exacte du fond de la scène — avec un filet à #EDEFF1, soit deux niveaux d'écart : la carte ne se voyait pas. La maquette a le même défaut. Elle est maintenant posée sur le fond, en blanc avec son ombre : c'est le chiffre qui porte la preuve de l'étape, il doit se détacher. L'ombre s'ouvre en même temps qu'elle arrive, comme les pastilles. */ .et__compteur{position:absolute; left:var(--x); top:var(--y); width:var(--w); --dx:-38px; --k:1; border-radius:22px; background:var(--blanc); border:1px solid var(--filet); padding:20px; box-shadow:0 1px 3px rgba(11,20,30,.04); opacity:0; transform:translate(calc(var(--dx) * var(--k)),20px) scale(.9); transform-origin:0% 100%; transition:opacity .5s cubic-bezier(.2,.7,.3,1), transform .78s cubic-bezier(.16,1,.3,1), box-shadow .78s cubic-bezier(.16,1,.3,1)} .et__compteur.on{opacity:1; transform:translate(0,0) scale(1); box-shadow:0 14px 32px rgba(11,20,30,.11)} .et__compteur em{font-style:normal; font-size:17px; color:var(--teal); font-weight:600} .et__compteur b{display:block; margin-top:8px; font-size:56px; line-height:64px; color:var(--teal); letter-spacing:-.03em} /* ENFANT, pas descendant. Le nombre est enveloppé dans … depuis qu'il est lu dans la base plutôt qu'écrit en dur, et « .et__compteur span » atteignait ce span-là aussi : le chiffre tombait de 56 px à 15 px, prenait la couleur du corps et 10 px de marge. Le « > » borne la règle à la légende, qui est seule enfant direct. Même piège déjà rencontré sur .preuve__cols, corrigé là-bas par une surcharge (.preuve__cols b span) — ici on le rend impossible. */ .et__compteur > span{display:block; margin-top:10px; font-size:15px; color:var(--corps)} /* ---------- la preuve, en cartes sous le téléphone ---------- L'appareil GARDE la taille du bento (1240 x 2558) et remonte : son bord bas s'arrête à 440, et tout ce qui suit tient dans la bande 500 → 1000 qu'il libère. Le titre et l'accroche sur une ligne, les quatre chiffres dessous, en rang de tuiles. Verre : quatre couches superposées — le flou de ce qu'il y a derrière, un dégradé de remplissage, un liseré clair sur la tranche haute, une ombre portée pour décoller. Un seul fond translucide resterait plat. */ /* Les deux seuls blocs qui traversent la scene entiere (1100 px de course) demandent leur propre calque : sans « will-change » le navigateur repeint 1920 x 1080 de texte et d'ombres a chaque image au lieu de deplacer une texture deja gravee. Ailleurs les blocs ne bougent que de 40 px — ca ne vaut pas la memoire d'un calque par section. */ .bloc--preuve, .bloc--options{will-change:transform} .bloc--preuve{height:1080px} /* L'accroche etait posee A DROITE du titre, sur une seule ligne de 720 : elle flottait au milieu de rien, sans rapport de lecture avec « La preuve ». Elle passe DESSOUS, sur une justification courte — titre, accroche, exergue, chiffres : une colonne, un seul sens de lecture. */ .preuve__titre{position:absolute; left:180px; top:466px; margin:0; font-size:54px; line-height:60px; font-weight:500; letter-spacing:-.03em} .preuve__intro{position:absolute; left:180px; top:540px; width:620px; margin:0; font-size:17px; line-height:27px; color:var(--corps)} /* D14 — CET EXERGUE REJOINT LE SYSTEME. Il etait a 11 px et ecrit en minuscules, seul de son espece : partout ailleurs ce niveau est a 13 px et en capitales — « CE QUE TU RECOIS », « CE QUE CA TE COUTE », « C'EST POUR TOI SI ». C'est ce que Julien releve : ce n'est ni un H3 ni un H4, ca ne correspond a aucun format de la charte. Il prend donc exactement les valeurs de « .opt__eb », qui est ce niveau. */ .preuve__eb{position:absolute; left:180px; top:624px; margin:0; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); font-weight:600} .preuve__cols{position:absolute; left:180px; top:664px; width:1560px; display:flex; gap:28px} /* Le titre, l'accroche et l'exergue montent avant les tuiles : la lecture se fait de haut en bas, l'animation aussi. Les retards sont posés ici et non dans le balisage — seul le rang des tuiles en demande un par élément. */ /* L'état de repos porte la SORTIE, la classe porte l'ENTRÉE. Une seule déclaration servirait les deux sens : la cascade de 600 ms rejouerait à l'envers et la preuve serait encore là quand « T'as deux options » arrive. La sortie est donc courte, sans retard, et sur une courbe qui accélère. */ .preuve__titre, .preuve__intro, .preuve__eb{ opacity:0; transform:translateY(22px); transition:opacity .3s cubic-bezier(.4,0,1,1), transform .3s cubic-bezier(.4,0,1,1)} .bloc--preuve.on .preuve__titre, .bloc--preuve.on .preuve__intro, .bloc--preuve.on .preuve__eb{opacity:1; transform:none; transition:opacity .55s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.16,1,.3,1)} .bloc--preuve.on .preuve__intro{transition-delay:90ms} .bloc--preuve.on .preuve__eb{transition-delay:180ms} .preuve__cols > div{flex:1; min-width:0; height:292px; padding:36px 30px; border-radius:30px; overflow:hidden; position:relative; background:linear-gradient(158deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.62) 52%, rgba(255,255,255,.78) 100%); /* Pas de backdrop-filter ici. Derriere ces tuiles il n'y a que du gris plat : le flou ne rendait rien de visible, mais obligeait le navigateur a relire et rebrouiller quatre pans d'ecran a chaque image de la montee. Le verre tient au degrade, au lisere et a l'ombre — pas au flou. */ border:1px solid rgba(255,255,255,.9); box-shadow:0 20px 46px rgba(11,20,30,.10), inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.5); opacity:0; transform:translateY(34px) scale(.96); transition:opacity .34s cubic-bezier(.4,0,1,1), transform .34s cubic-bezier(.4,0,1,1)} /* le lustre pris dans la courbure du verre */ .preuve__cols > div::before{content:''; position:absolute; left:0; right:0; top:0; height:56%; pointer-events:none; border-radius:30px 30px 44% 44% / 30px 30px 22px 22px; background:linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.10) 60%, rgba(255,255,255,0) 100%)} .bloc--preuve.on .preuve__cols > div{opacity:1; transform:none; box-shadow:0 26px 60px rgba(11,20,30,.14), inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.5); transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.16,1,.3,1), box-shadow .9s cubic-bezier(.16,1,.3,1); transition-delay:var(--d,0ms)} .preuve__cols b{position:relative; display:block; font-size:44px; line-height:50px; font-weight:500; letter-spacing:-.03em; color:var(--teal)} .preuve__cols > div > span{position:relative; display:block; margin-top:14px; font-size:16px; line-height:24px; color:var(--corps)} /* Les nombres sont enveloppés dans un pour être remplacés au chargement par les vrais comptes de l'étude. Sans cette règle ils héritent du descriptif juste au-dessus — bloc, 16 px, gris — et « 121 sur 146 » se casse en trois lignes empilées. */ .preuve__cols b span{display:inline; margin:0; position:static; font:inherit; color:inherit; letter-spacing:inherit; line-height:inherit} .bloc--options{height:1080px} .options__titre{position:absolute; left:360px; top:104px; width:1200px; margin:0; text-align:center; font-size:62px; line-height:70px; font-weight:500; letter-spacing:-.03em} .opt{position:absolute; top:380px; width:660px; height:430px; border-radius:24px; background:#fff; padding:48px; box-shadow:0 14px 34px rgba(8,23,28,.10)} .opt--1{left:100px; border:1.5px solid var(--teal)} .opt--2{left:1160px; border:1.5px solid var(--encre)} .opt__num{position:absolute; left:48px; top:40px; width:44px; height:44px; border-radius:50%; color:#fff; font-size:18px; display:grid; place-items:center; font-weight:600} .opt--1 .opt__num{background:var(--teal)} .opt--2 .opt__num{background:var(--encre)} .opt__eb{margin:0 0 0 60px; padding-top:14px; font-size:13px; letter-spacing:.14em; font-weight:600} .opt--1 .opt__eb{color:var(--teal)} .opt--2 .opt__eb{color:var(--encre)} .opt__txt{margin:78px 0 0; font-size:26px; line-height:36px; letter-spacing:-.02em} .opt .bouton{position:absolute; left:48px; bottom:44px; width:564px; height:64px; font-size:19px; padding-left:32px} .bloc--faq{height:1080px} .faqc__titre{position:absolute; left:180px; top:300px; margin:0; font-size:88px; line-height:94px; font-weight:500; letter-spacing:-.03em} .faqc__n{position:absolute; left:180px; top:424px; margin:0; font-size:20px; color:var(--corps)} .faqc__filet{position:absolute; left:180px; top:492px; width:300px; height:1px; background:var(--filet)} .faqc__barre{position:absolute; left:180px; top:511px; display:flex; align-items:center; gap:20px} .faqc__fl{width:40px; height:40px; border-radius:50%; background:#fff; border:1.2px solid #DCE2E5; font-size:18px; line-height:1; cursor:pointer; color:var(--encre); padding:0} .faqc__segs{display:flex; gap:8px} .faqc__segs i{position:relative; overflow:hidden; width:34px; height:5px; border-radius:3px; background:#DDE2E5; display:block} .faqc__segs i.plein{background:var(--teal)} /* Le segment courant se remplit pendant que le minuteur tourne : c'est la barre qui dit combien de temps il reste, pas un simple témoin de position. Le remplissage est remis à zéro puis relancé à chaque question — d'où le reflow forcé côté JS, sans quoi le navigateur fond les deux états. */ .faqc__segs i::after{content:''; position:absolute; inset:0; background:var(--teal); transform:scaleX(0); transform-origin:0 50%} .faqc__segs i.court::after{transform:scaleX(1); transition:transform var(--minuteur, 5.2s) linear} .faqc__fl:hover{background:var(--teal); border-color:var(--teal); color:#fff} .faqc__ouverte{position:absolute; left:180px; top:596px; width:890px} /* numero, question, reponse : elles montent l'une apres l'autre, et repartent vers le haut quand on change de question — dans le sens de la lecture. */ .faqc__num, .faqc__ouverte h3, .faqc__rep{ opacity:0; transform:translateY(-14px); transition:opacity .22s cubic-bezier(.4,0,1,1), transform .22s cubic-bezier(.4,0,1,1)} .faqc__ouverte.on .faqc__num, .faqc__ouverte.on h3, .faqc__ouverte.on .faqc__rep{ opacity:1; transform:none; transition:opacity .5s cubic-bezier(.2,.7,.3,1), transform .75s cubic-bezier(.16,1,.3,1)} .faqc__ouverte.on h3{transition-delay:80ms} .faqc__ouverte.on .faqc__rep{transition-delay:160ms} .faqc__num{margin:0; font-size:13px; letter-spacing:.04em; color:var(--teal); font-weight:600} .faqc__ouverte h3{margin:12px 0 0; font-size:42px; line-height:52px; font-weight:500; letter-spacing:-.025em} .faqc__rep{margin:22px 0 0; width:600px; font-size:19px; line-height:30px; color:var(--corps)} .bloc--pied{height:1080px; padding:60px 100px 0} /* Le teaser n'est pas une carte : dans la planche 1328:3145 c'est le fond nu, avec le téléphone qui monte derrière et passe sous la carte du pied. */ /* 520 quand le pied portait une simple infolettre. Le formulaire de waitlist — un titre, quatre champs, une ligne d'etat — a rendu la carte 237 pixels plus haute : elle finissait a 1162 dans une scene de 1080, et sa derniere ligne (droits et reseaux) tombait 82 pixels sous le cadre, hors d'atteinte. Le teaser lui rend la place ; il reste 174 de bande a l'appareil, qui n'a besoin que de se montrer. */ /* LE TEASER SE POSE EN DERNIER, ET LENTEMENT. Il monte avec le bloc, donc il arrivait en meme temps que la carte et que l'appareil : trois choses d'un coup, sur six cent quarante pixels de course. Il attend maintenant que la carte soit posee — classe « pret », a 25.90 — et il se pose alors en une seconde, titre puis phrase puis bouton. La transition est portee par le TEMPS et non par le defilement : une fois le signal donne, elle se joue en entier meme si l'on s'arrete. */ .pied__titre, .pied__sous, .pied__teaser .bouton{ opacity:0; transform:translateY(20px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform 1.15s cubic-bezier(.16,1,.3,1)} .bloc--pied.pret .pied__titre{opacity:1; transform:none} .bloc--pied.pret .pied__sous{opacity:1; transform:none; transition-delay:.14s} .bloc--pied.pret .pied__teaser .bouton{opacity:1; transform:none; transition-delay:.3s} @media (prefers-reduced-motion: reduce){ .pied__titre, .pied__sous, .pied__teaser .bouton{opacity:1; transform:none} } .pied__teaser{height:420px; text-align:center; position:relative} .pied__titre{margin:0; font-size:46px; line-height:55px; font-weight:500; letter-spacing:-.03em} .pied__sous{margin:20px auto 0; width:600px; font-size:17px; line-height:26px; color:var(--corps)} .pied__sous b{font-weight:600; color:var(--encre)} .pied__teaser .bouton{margin-top:34px} /* La planche pose la carte en #F4F5F6 sur une page blanche. Ici la scène est déjà grise : une carte plus claire que son fond ne se verrait pas. Elle reste donc blanche, ce qui est le système de la page. */ .pied__carte{margin-top:24px; border-radius:26px; background:var(--blanc); border:1px solid var(--filet); padding:44px 64px 30px; position:relative} .pied__haut{display:flex; gap:80px; align-items:flex-start} /* le lockup manquait : la planche le pose au-dessus de la mention légale */ .pied__marque{width:520px} /* la marque du pied est le LOGO, pas le mot composé en deux graisses */ .pied__logo{display:block; margin-bottom:18px} .pied__logo img{display:block; height:30px; width:auto} .pied__droits{margin:0; width:460px; font-size:14px; line-height:23px; color:var(--corps)} /* Quatre colonnes au lieu de trois : les gouttières passent de 70 à 44 et la largeur mini de 190 à 162, sinon la dernière déborde de la carte. */ .pied__cols{flex:1; display:flex; gap:44px; justify-content:flex-end} .pied__cols div{display:flex; flex-direction:column; gap:9px; min-width:162px} /* L'app à venir : même traitement que dans le menu du haut, gris et badge — elle est annoncée, elle n'est pas cliquable. */ /* Le badge passe SOUS le libellé plutôt qu'à côté : en ligne, il rendait cette colonne un tiers plus large que les trois autres et la dernière débordait de la carte. Empilé, les quatre colonnes ont la même largeur. */ .pied__soon{display:flex; flex-direction:column; align-items:flex-start; gap:5px; color:var(--muet)} .pied__soon i{font-style:normal; font-size:11px; letter-spacing:.09em; font-weight:600; color:var(--muet); background:var(--pille); padding:3px 8px; border-radius:8px} .pied__cols b{font-size:13px; letter-spacing:.06em; color:var(--muet); font-weight:600; margin-bottom:5px} .pied__cols a, .pied__cols span{font-size:15px; color:var(--encre); text-decoration:none; width:fit-content} /* Chaque libellé mène quelque part : trait qui se tire au survol, sans exception. */ .pied__cols a{cursor:pointer; position:relative; transition:color .25s cubic-bezier(.16,1,.3,1)} .pied__cols a::after{content:''; position:absolute; left:0; right:0; bottom:-3px; height:1.5px; background:currentColor; border-radius:1px; scale:0 1; transform-origin:0 50%; transition:scale .4s cubic-bezier(.16,1,.3,1)} .pied__cols a:hover{color:var(--teal)} .pied__cols a:hover::after{scale:1 1} /* LA BANDE DES GUIDES. Pleine largeur plutôt qu'une quatrième colonne : la note ci-dessus dit que la largeur mini est déjà descendue à 162 pour que la troisième ne déborde pas, et la grille mobile plus bas est un repeat(3,1fr) en dur. En bande, il n'y a plus de largeur à calculer — ça s'enroule. */ .pied__guides{margin-top:36px; padding-top:24px; border-top:1px solid var(--filet)} .pied__guides > b{display:block; font-size:13px; letter-spacing:.06em; color:var(--muet); font-weight:600; margin-bottom:12px} .pied__guides > div{display:flex; flex-wrap:wrap; gap:9px 26px} .pied__guides a{font-size:15px; color:var(--encre); text-decoration:none; position:relative; cursor:pointer; transition:color .25s cubic-bezier(.16,1,.3,1)} .pied__guides a::after{content:''; position:absolute; left:0; right:0; bottom:-3px; height:1.5px; background:currentColor; border-radius:1px; scale:0 1; transform-origin:0 50%; transition:scale .4s cubic-bezier(.16,1,.3,1)} .pied__guides a:hover{color:var(--teal)} .pied__guides a:hover::after{scale:1 1} .pied__champ{display:flex; align-items:center; gap:12px; margin-top:34px; width:560px; height:52px; border-radius:26px; background:var(--gris); border:1px solid #EDEFF1; padding:0 6px 0 22px} .pied__champ input{flex:1; border:0; background:none; font:inherit; font-size:15px; color:var(--encre); outline:none} .pied__champ input::placeholder{color:var(--muet)} /* teal dans la planche, pas encre : c'est le même appel que le bouton du haut */ .pied__champ button{border:0; border-radius:20px; background:var(--teal); color:#fff; font:inherit; font-size:14px; font-weight:500; height:40px; padding:0 22px; cursor:pointer} /* ---------- la waitlist ---------- Quatre champs, pas un : le formulaire ne demandait qu'une adresse et ne faisait rien de toute façon. La pilule reste la pilule ; le nom prend la sienne, et les deux listes se partagent une rangée. */ .pied__attente{margin-top:34px; width:560px; max-width:100%} .pied__attente__t{margin:0 0 14px; font-size:15px; font-weight:500; color:var(--encre)} .pied__attente .pied__champ{margin-top:10px; width:100%} .pied__attente .pied__champ:first-of-type{margin-top:0} .pied__attente__duo{display:flex; gap:10px; margin-top:10px} .pied__attente__duo select{flex:1 1 0; min-width:0; height:48px; border-radius:24px; background:var(--gris); border:1px solid #EDEFF1; padding:0 18px; font:inherit; font-size:14px; color:var(--encre); cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B747C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center} .pied__attente__duo select:invalid{color:var(--muet)} .pied__attente__etat{min-height:20px; margin:12px 0 0; font-size:14px} .pied__attente__etat.est-ok{color:var(--teal)} .pied__attente__etat.est-mal{color:#B4232A} .pied__bas{display:flex; justify-content:space-between; margin-top:28px; padding-top:22px; border-top:1px solid var(--filet); font-size:14px; color:var(--corps)} .pied__sociaux{display:flex; gap:26px} .pied__sociaux a{color:inherit; text-decoration:none; cursor:pointer} /* ---------- les boutons ---------- */ .bouton{display:inline-flex; align-items:center; justify-content:space-between; gap:18px; padding:7px 7px 7px 26px; border-radius:999px; font-size:16px; font-weight:500; letter-spacing:-.015em; cursor:pointer; text-decoration:none} .bouton i{width:36px; height:36px; border-radius:50%; display:block; flex:0 0 36px; background-repeat:no-repeat; background-position:center; background-size:14px} .bouton--noir{background:var(--encre); color:#fff} .bouton--noir i{background-color:#fff; background-image:url("data:image/svg+xml;utf8,")} .bouton--teal{background:var(--teal); color:#fff; box-shadow:0 10px 26px rgba(0,118,146,.30)} .bouton--teal i{background-color:#fff; background-image:url("data:image/svg+xml;utf8,")} .bouton--blanc{background:#fff; color:var(--encre)} .bouton--blanc i{background-color:var(--teal); background-image:url("data:image/svg+xml;utf8,")} .bc--noire .bouton{width:914px; height:111px; margin-top:51px; font-size:34px; padding:12px 12px 12px 48px} .bc--noire .bouton i{width:87px; height:87px; flex:0 0 87px; background-size:34px} /* 914 de large : le cercle part de la flèche de 87, plus loin du bord */ .bc--noire .bouton__sur{clip-path:circle(0px at calc(100% - 55px) 50%)} .bc--noire .bouton:hover .bouton__sur{clip-path:circle(145% at calc(100% - 55px) 50%)} /* ---------- ce qui répond au curseur ---------- Il n'y avait aucun :hover ni :focus dans toute la feuille. Une page où rien ne réagit sous la souris se lit comme une image, pas comme un produit. */ /* Le liseré clair autour du bouton une fois retourné : le calque du dessus couvre pourtant la boîte au pixel près (mesuré : 0 de débord sur les quatre côtés), et lui retirer son arrondi n'a rien changé. Plutôt que de continuer à chercher d'où vient le quart de pixel, on retire la cause de fond : le dessous n'est plus d'une AUTRE couleur à la fin du balayage. Le fond du bouton bascule sur celui du calque, avec un délai égal à la durée du balayage — donc invisible pendant le geste, et il n'y a plus rien à laisser percer une fois arrivé. Au retour, il revient sans délai. */ .bouton{transition:transform .42s cubic-bezier(.16,1,.3,1), box-shadow .55s cubic-bezier(.16,1,.3,1), background-color 0s linear 0s} .bouton:hover{transition:transform .42s cubic-bezier(.16,1,.3,1), box-shadow .55s cubic-bezier(.16,1,.3,1), background-color 0s linear .78s} .bouton--blanc:hover{background:var(--teal)} .bouton--teal:hover{background:#fff} .bouton--noir:hover{background:#fff} .nav a, .faq__liste li{ transition:color .28s cubic-bezier(.16,1,.3,1), background-color .28s cubic-bezier(.16,1,.3,1), border-color .28s cubic-bezier(.16,1,.3,1), opacity .5s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.16,1,.3,1), box-shadow .42s cubic-bezier(.16,1,.3,1)} /* LE TRAIT SOUS LES LIENS, et le piège qu'il tendait. La règle visait « .nav__liens a » et « .nav__actions a » — écrite pour l'ancienne barre plate, elle a survécu à la refonte. Or « .nav__actions a » attrape aussi le bouton S'inscrire, et « .nav__liens a » attrape les rangées du panneau déroulant, qui en sont des descendantes. D'où ce trait noir sous le bouton et sous « Acteur ». On ne vise plus que les liens de texte, et par leur nom. */ .nav__liens > a, .nav a.nav__conn, .nav__lang a{position:relative} .nav__liens > a::after, .nav a.nav__conn::after, .nav__lang a::after{ content:''; position:absolute; left:0; right:0; bottom:-5px; height:1.5px; border-radius:1px; background:currentColor; scale:0 1; transform-origin:0 50%; transition:scale .38s cubic-bezier(.16,1,.3,1)} .nav__liens > a:hover::after, .nav a.nav__conn:hover::after, .nav__lang a:hover::after{scale:1 1} /* LE BOUTON QUI S'INVERSE. Première tentative : un disque en ::before qui grandit, plus la couleur du texte qui bascule. Impossible à régler — le disque est blanc et le texte l'est aussi, donc à mi-course la moitié non couverte affiche du teal sur du teal, et la moitié couverte du blanc sur du blanc. Aucun délai ne sauve ça. Ici le bouton est dessiné DEUX FOIS : la version normale, et par-dessus la version inversée, révélée par un cercle qui s'ouvre depuis la flèche. Chaque pixel n'a jamais qu'une seule paire fond/texte, la lisibilité est acquise. */ .bouton{position:relative; z-index:0; overflow:hidden} /* PAS de border-radius sur le calque du dessus, malgré l'apparence. Deux bords arrondis antialiasés empilés ne font pas un bord opaque : chacun couvre la moitié du pixel de bordure, il en reste un quart de la couleur du dessous. C'était ça, le liseré clair tout autour du bouton une fois le balayage terminé. Le calque reste un rectangle plein et c'est le bouton, avec son overflow:hidden, qui découpe la pilule — un seul bord, donc opaque. */ .bouton__sur{position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; gap:inherit; padding:inherit; border-radius:0; white-space:nowrap; clip-path:circle(0px at calc(100% - 25px) 50%); transition:clip-path .78s cubic-bezier(.16,1,.3,1)} .bouton:hover .bouton__sur{clip-path:circle(145% at calc(100% - 25px) 50%)} .bouton:hover{transform:translateY(-2px)} /* teal -> blanc, avec la flèche qui s'inverse aussi */ .bouton--teal .bouton__sur{background:#fff; color:var(--teal)} .bouton--teal .bouton__sur i{background-color:var(--teal); background-image:url("data:image/svg+xml;utf8,")} .bouton--teal:hover{box-shadow:0 16px 34px rgba(0,118,146,.30)} /* blanc -> teal */ .bouton--blanc .bouton__sur{background:var(--teal); color:#fff} .bouton--blanc .bouton__sur i{background-color:#fff; background-image:url("data:image/svg+xml;utf8,")} .bouton--blanc:hover{box-shadow:0 14px 30px rgba(0,118,146,.28)} /* noir -> blanc */ .bouton--noir .bouton__sur{background:#fff; color:var(--encre)} .bouton--noir .bouton__sur i{background-color:var(--encre); background-image:url("data:image/svg+xml;utf8,")} .bouton--noir:hover{box-shadow:0 14px 30px rgba(10,10,10,.22)} /* la question survolée s'éclaire un peu avant d'être ouverte */ .faq__liste li:not(.on):hover{background:rgba(255,255,255,.10)} /* au clavier, on doit voir où on est */ a:focus-visible, .bouton:focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:6px} @media (prefers-reduced-motion: reduce){ .ec--bottin .bottin{transition:none} /* on garde les changements d'état, on retire le mouvement */ *, *::before, *::after{transition-duration:.01ms !important; animation-duration:.01ms !important} } /* La declinaison verticale ne cadre plus la planche du bureau de plus pres : elle rejoue la page sur la SECONDE PLANCHE Figma, celle de 390 (1260:2). Le bloc « PORTRAIT (<= 900px) » qui vivait ici — une camera qui se posait sur ce qui etait allume, et une trentaine de « !important » pour resserrer les colonnes de 1920 — est donc retire : les deux approches se battraient pour les memes proprietes. Tout ce qui suit est sous « html.mobile », la classe que le moteur pose quand il bascule de planche. */ /* ═══════════════════════════════════════════════════════════════════════════ LA SCENE MOBILE — 390 x 844 Posee par le moteur quand la fenetre passe sous 760 (classe « mobile » sur la racine). Les coordonnees des blocs sont reecrites pour la colonne de 390 ; la choregraphie, elle, vient des pistes et ne change pas. ═══════════════════════════════════════════════════════════════════════════ */ /* ── L'ACCROCHE PAR SECTION ────────────────────────────────────────────── Le rail porte un point d'accroche par arret, pose par le script a son offset exact. « mandatory » : quoi qu'il arrive, un geste finit sur une section. C'est le navigateur qui s'en charge, avec son propre moteur d'inertie — raison pour laquelle ca ne peut pas se battre avec lui, contrairement a un recalage ecrit en JavaScript. Uniquement sur la planche mobile : au bureau, on veut pouvoir s'arreter ou l'on veut (CFT-1479). */ html.mobile{scroll-snap-type:y mandatory} html.mobile .crans i{scroll-snap-align:start} html.mobile .bloc, html.mobile .pivot{width:390px} html.mobile .bloc--main, html.mobile .bloc--case, html.mobile .bloc--donnee, html.mobile .bloc--etape, html.mobile .bloc--preuve, html.mobile .bloc--options, html.mobile .bloc--faq, html.mobile .bloc--pied, html.mobile .pivot{height:844px} html.mobile .bloc--punch{height:1092px} /* ── la barre : logo et burger, tout le reste passe dans le tiroir ─────── */ /* Sur la planche, c'est la pastille elle-meme que la piste deplace : le calque « nav » vaut 358 x 52, pose a 16 / 14. La marge que la barre porte au bureau se rajouterait a cette pose et decalerait tout de seize pixels de plus. */ html.mobile .nav__bar{transform:none; max-width:none; margin:0; height:100%; border-radius:26px; padding:0 18px; max-width:none} html.mobile .nav__logo img{height:22px} html.mobile .nav__liens, html.mobile .nav__actions{display:none} html.mobile .nav__burger{display:flex} /* Le bouton du haut : 326 x 52, comme sur la planche. Il est pose par sa propre piste, donc pas de « left » ni de « top » ici — et surtout pas de transition sur « transform » : c'est le moteur qui l'ecrit a chaque image, et les 420 ms heritees de « .bouton » lui auraient fait suivre la scene avec un demi-battement de retard, tout seul parmi les calques. */ .cta-hero, .cta-etapes{position:absolute; justify-content:space-between; padding:6px 6px 6px 26px; font-size:16px; transition:background-color .42s cubic-bezier(.16,1,.3,1)} .cta-hero:hover, .cta-etapes:hover{transform:none} html.mobile .cta-hero i{width:36px; height:36px; flex:0 0 36px; background-size:14px} /* L'ombre du bouton vaut 26 pixels de flou pour 30 % d'opacite : a la taille du bureau c'est un relief, sur 326 de large c'est un halo qui devient l'element le plus bruyant de l'ecran. */ html.mobile .bouton--teal{box-shadow:0 6px 18px rgba(0,118,146,.18)} /* ── l'en-tete ──────────────────────────────────────────────────────────── */ html.mobile .entete{width:390px} html.mobile .entete__titre{margin:0; width:326px; font-size:34px; line-height:40px; letter-spacing:-.03em; text-align:center} html.mobile .entete__l1{display:block; height:auto; white-space:normal} html.mobile .entete__l2{width:326px} /* les trois tuiles du titre sortent du flux : a 34px elles pousseraient la ligne hors du cadre */ html.mobile .entete__tuiles{display:none} html.mobile .entete__sous{margin:14px 0 0; width:322px; font-size:15px; line-height:23px} /* Les deux notes ne disent pas la meme chose : la premiere est l'appel de l'asterisque du titre, la seconde est la rarete. Empilees a vingt pixels l'une de l'autre et de la meme couleur, elles se lisaient comme un seul paragraphe — et les jambages de la premiere touchaient la seconde. La seconde devient une pastille, la seule chose teal sous le bouton. */ html.mobile .note{font-size:12px; line-height:16px; white-space:normal; width:326px; text-align:center; color:var(--muet)} html.mobile .note--teal{display:flex; align-items:center; justify-content:center; gap:6px; height:auto; padding:5px 0; font-size:12.5px; font-weight:500} /* les tuiles du fond : plus petites, sinon elles mangent la colonne */ html.mobile .tuile[data-el]{transform-origin:center center} /* ── les deux appareils lateraux ───────────────────────────────────────── Au bureau ils sont a peine rognes : leur icone et leur libelle se lisent. Sur 390 il n'en reste qu'un tiers, et ce tiers tombe en plein milieu du dessin : on y voyait une moitie de silhouette et la fin d'un mot coupe (« rofil »). A cette taille ils ne servent plus a nommer deux ecrans, ils servent a donner de la profondeur — on ne garde donc que la surface. */ html.mobile .tel--cote .tel__ico, html.mobile .tel--cote span{display:none} /* Ils sont DERRIERE. Au bureau la profondeur vient de l'air qui les separe ; sur 390 il n'y en a pas assez, et trois surfaces du meme teal a la meme intensite se lisent a plat. Un voile les recule, et l'ombre de celui du milieu s'ouvre : on retrouve les trois plans. */ html.mobile .tel--cote .tel__ecran::after{content:''; position:absolute; inset:0; background:rgba(4,28,34,.30)} html.mobile .tel--cote{box-shadow:0 10px 30px rgba(11,20,30,.16)} html.mobile .tel--maitre{box-shadow:0 26px 64px rgba(11,20,30,.30)} /* ── la case et la main ─────────────────────────────────────────────────── */ /* La planche pose la case a 45 / 72, en 300 x 418 — meme rapport qu'au bureau, et le telephone qu'elle tient vient des pistes. */ html.mobile .bloc--case::before{left:45px; top:72px; width:300px; height:418px; border-radius:20px} html.mobile .main{left:45px; top:72px; width:300px; height:418px; border-radius:20px} /* ── les trois chiffres ─────────────────────────────────────────────────── */ /* Ces elements n'ont pas de classe a eux : ils sont vises par « .bloc--donnee h2 » et compagnie, cales a 880 sur la scene de 1920. Sur 390 ils partaient donc jusqu'a 1600, entierement hors du cadre. */ /* Les trois chiffres passent SOUS la main, comme sur la planche : tuile a 540, titre a 600, corps a la suite. Le titre fait une ou trois lignes selon la donnee — il ne peut donc pas etre pose a une hauteur fixe, sinon le corps lui rentre dedans ou le laisse flotter. Les deux redeviennent du texte qui coule, dans un bloc simplement rembourre de 600. */ html.mobile .bloc--donnee{padding:600px 32px 0} html.mobile .bloc--donnee .tuile--fixe{left:32px; top:540px; width:42px; height:42px; border-radius:12px} html.mobile .bloc--donnee h2, html.mobile .bloc--donnee[data-de="6"] h2{position:static; margin:0; width:auto; font-size:26px; line-height:33px; letter-spacing:-.03em} html.mobile .bloc--donnee p, html.mobile .bloc--donnee[data-de="6"] p{position:static; margin:14px 0 0; width:auto; font-size:14px; line-height:22px} /* La pastille numerotee des etapes et les pastilles de mots-cles : memes coordonnees de 1920 a ramener dans la colonne. */ /* (Deux regles d'un premier jet, retirees : elles portaient un « !important » qui battait la mise en page des etapes ecrite plus bas. La pastille du numero restait collee a gauche a hauteur du titre, au lieu d'etre centree au-dessus de lui comme sur la planche.) */ /* ── le pivot ───────────────────────────────────────────────────────────── */ html.mobile .pivot__titre{left:32px; top:88px; width:326px; font-size:28px; line-height:35px; text-wrap:balance} /* La phrase est en « nowrap » : c'est ce qui permet a la rature de la traverser d'un seul trait. Elle ne peut donc pas passer a la ligne, et sa taille est bornee par la colonne — 16 px la posent a 323 pour 326 disponibles. En dessous elle se lisait comme une legende, et la barre qui la traverse ensuite ne valait plus rien. */ html.mobile .pivot__sous{left:32px; top:170px; width:326px; font-size:16px; line-height:24px} /* Quand la punchline arrive (« haute »), le titre du pivot est deja parti et la phrase barree remonte pour lui laisser la scene — c'est ce que fait le bureau avec ses 52 pixels. Sans ce decalage, la punchline heritait d'une bande de 160 pixels et se lisait comme du corps de texte. */ html.mobile .pivot.haute .pivot__sous{transform:translateY(-82px)} html.mobile .pivot__l2 u::after{height:5px} /* ── la punchline ───────────────────────────────────────────────────────── */ /* Le pivot tient jusqu'au plan 17, la punchline entre des 16 : les deux sont a l'ecran en meme temps, et elles doivent se suivre en colonne comme au bureau — titre a 88, sous-titre a 170, filet, puis la phrase. Le bloc faisant 1092 pour une scene de 844, le moteur le recentre de 124 : ce qu'on ecrit ici est donc decale d'autant. 364 et 386 tombent a 240 et 262 dans le cadre. */ /* Au bureau la punchline fait 104 px et tient 212 des 1080 de la scene : un cinquieme de la hauteur, et c'est le plus gros caractere de toute la page. Transposer le RAPPORT plutot que la valeur donne 34 px sur quatre lignes, soit 168 des 844 — le meme cinquieme, la meme domination. Le bloc faisant 1092 pour une scene de 844, le moteur le recentre de 124 : 300 et 324 tombent a 176 et 200 dans le cadre. */ /* Le bloc est centre au bureau (« .bloc--punch{text-align:center} ») et le filet y est pose a 912 pour 96 de large, soit pile au milieu des 1920. Sur 390 je les avais alignes a gauche : le filet a 32 et la phrase au fil de la marge. Ils reviennent dans l'axe — 173 pour 44 de large, centre a 195. */ html.mobile .punch__filet{left:173px; top:274px; width:44px; height:3px} /* 32 px sur quatre lignes font 160 des 844 : 19 % de la hauteur, contre 19,6 % au bureau. A 38 le bloc ecrasait tout le reste de l'ecran ; a 26 — la seule taille ou chacune des deux phrases tient encore sur UNE ligne, mesure a 326 pile pour 326 disponibles — il se lisait comme du corps de texte. */ /* CFT-1485 — Julien demande « Nous, on te vend l'inverse : » sur UNE ligne et « tous les rôles juste pour toi. » sur une autre. À 32 px chacune en prenait deux, soit quatre lignes en tout. La note ci-dessus avait mesuré 26 px comme « la seule taille où chacune des deux phrases tient encore sur UNE ligne, 326 pile pour 326 disponibles » et l'avait écartée parce que ça se lisait comme du corps de texte. C'était un arbitrage, et c'est le designer qui tranche : il veut deux lignes. */ html.mobile .punch__gros{left:32px; top:298px; width:326px; font-size:26px; line-height:33px; letter-spacing:-.03em; text-wrap:pretty} /* La barre sous « juste pour toi » fait 7 px : au bureau c'est 6,7 % d'un caractere de 104, ici ce serait 18 % d'un caractere de 38 — un surlignage, plus un soulignement. Et posee au ras de la boite elle traversait les jambages du « j » et du « p ». */ /* Mesure faite : a 38 px les jambages du « j » et du « p » descendent a 47,2 du haut de la boite, qui n'en fait que 46 — ils DEPASSENT. Une barre posee au ras de la boite les traverse forcement. Le rail interieur, qui ne peut pas sortir de la boite, disparait donc sur mobile ; la barre, elle, descend de dix pixels et passe dessous. */ html.mobile .punch__l2 u{box-shadow:none} html.mobile .punch__l2 u::after{height:4px; bottom:-10px; border-radius:2px} /* ── les etapes ─────────────────────────────────────────────────────────── */ /* ── les etapes, rejouees sur la planche 390 (Figma 1260:2, ecrans 20-22) ── Chaque etape reprend la hauteur de son ecran Figma : le moteur recentre le bloc dans la scene de 844, ce qui reproduit exactement le cadrage de la planche. Les pastilles gardent leur position d'origine, autour du telephone, au lieu d'etre empilees en liste — c'est ce nuage qui fait la section. */ html.mobile .bloc--etape{height:var(--hm)} html.mobile .et__num{left:180px; top:70px; width:30px; height:30px; font-size:15px} html.mobile .et__titre{left:32px; top:var(--my); width:326px; font-size:26px; line-height:33px; letter-spacing:-.03em} html.mobile .et__puce{left:var(--mx); top:var(--my); width:var(--mw); min-width:0; white-space:normal; text-align:left; padding:9px 14px; font-size:13px; line-height:17px; border-radius:12px; --k:.45} html.mobile .et__compteur{left:var(--mx); top:var(--my); width:var(--mw); padding:20px; border-radius:16px; --k:.45} html.mobile .et__compteur em{font-size:13px} html.mobile .et__compteur b{margin-top:6px; font-size:36px; line-height:44px} html.mobile .et__compteur > span{margin-top:8px; font-size:13px; line-height:19px} html.mobile .cta-etapes{justify-content:space-between; padding:6px 6px 6px 20px; font-size:15px} html.mobile .cta-etapes i{width:34px; height:34px; flex:0 0 34px; background-size:12px} /* le bouton, a la taille de la planche : 230 x 46, la pastille de fleche a 30 */ html.mobile .bouton{gap:12px; padding:6px 6px 6px 20px; font-size:15px} html.mobile .bouton i{width:34px; height:34px; flex:0 0 34px; background-size:12px} /* MAIS PAS DANS LE TELEPHONE. Le bento n'est pas dessine en pixels d'ecran : c'est un gabarit de 1167 x 2484 que le moteur reduit ensuite a la taille de l'appareil. Son bouton y fait 914 de large et 34 de corps DANS CE GABARIT-LA. La regle ci-dessus l'atteignait quand meme et lui posait un corps de 15 : reduit ensuite d'un tiers, il ne restait qu'un texte de cinq pixels et une pastille de onze au bout d'une pilule de trois cents. */ /* ── « QUI ON CHERCHE » SUR TELEPHONE ──────────────────────────────────── CFT-1485 #5 et #6, qui sont le meme defaut mesure deux fois. Le bento est compose a 1167 de large et reduit par « scale(.2416) » pour tenir dans l ecran du telephone. Au bureau le telephone atteint 1033 px et le corps de texte se rend a 29 px : ca se lit. Sur un telephone de 390 il plafonne a 339, et le meme texte tombe entre 5 et 9,6 px. Aucune taille de police ne rattrape ca : c est la REDUCTION qui est en cause, pas la typographie. Ici on ne reduit donc pas, on remet en page. « transform:none » et une largeur relative : le bento occupe l ecran du telephone quelle que soit sa taille, avec des valeurs pensees pour 390 et non pour 1167. Les nombres ci-dessous ne sont pas la planche divisee par trois ; ils sont choisis pour que le corps de texte tombe autour de 14 px, le minimum lisible. Le bouton de la carte noire suit la meme regle : ses valeurs d avant (34 px de texte, une pastille de 87) etaient des unites de PLANCHE, justes tant qu une reduction les suivait. Sans elle il faut les vraies. */ html.mobile .bento__int{width:100%; height:100%; transform:none; gap:4px; padding:20px 12px 10px} html.mobile .bento__titre{font-size:17px; line-height:20px} html.mobile .bc{border-radius:14px; padding:8px 10px} html.mobile .bc__eb{margin:0 0 5px; font-size:8.5px; line-height:10px; letter-spacing:.11em} html.mobile .liste li{gap:8px; font-size:11.5px; line-height:14.5px; letter-spacing:-.005em} html.mobile .case{flex:0 0 13px; width:13px; height:13px; margin-top:1px} html.mobile .liste--oui .case, html.mobile .liste--non .case{border-width:1.4px} html.mobile .liste li + li{margin-top:4px; padding-top:4px} html.mobile .liste li + li::before{left:21px; height:1px} html.mobile .bc__paire{gap:5px} html.mobile .bc__gros{margin:3px 0 0; font-size:17px; line-height:20px} html.mobile .bc__det{margin:3px 0 0; font-size:9.5px; line-height:12px} html.mobile .bc--noire{padding:8px 10px 9px} html.mobile .bento__int > :last-child{border-bottom-left-radius:20px; border-bottom-right-radius:20px} html.mobile .bc__punch{font-size:14px; line-height:17.5px} /* Le bouton de la carte noire porte « width:914px » et « margin-top:51px » : des unites de PLANCHE, justes tant qu une reduction les suivait. Sans elle il debordait de sa carte de huit cents pixels et laissait cinquante pixels de vide au-dessus. Le « clip-path » du survol est cale sur la meme echelle, d ou les deux dernieres lignes. */ html.mobile .bc--noire .bouton{width:100%; height:auto; margin-top:9px; gap:7px; padding:5px 5px 5px 12px; font-size:11px} html.mobile .bc--noire .bouton i{width:20px; height:20px; flex:0 0 20px; background-size:8px} html.mobile .bc--noire .bouton__sur{clip-path:circle(0px at calc(100% - 15px) 50%)} html.mobile .bc--noire .bouton:hover .bouton__sur{clip-path:circle(145% at calc(100% - 15px) 50%)} /* ── la preuve ──────────────────────────────────────────────────────────── */ /* Au plan 22 l'appareil ne s'en va pas : il MONTE et s'arrete en occupant la bande du haut, jusqu'a y = 344. Toute la preuve se pose dessous — c'est le geste que la version bureau fait deja, a la difference qu'ici les quatre chiffres passent en carre : en colonne ils demandaient 484 pixels, et il n'en reste que 480 sous l'appareil. */ html.mobile .preuve__titre{left:32px; top:368px; font-size:28px; line-height:34px} html.mobile .preuve__intro{left:32px; top:410px; width:326px; font-size:13px; line-height:19px} html.mobile .preuve__eb{left:32px; top:474px; width:326px; font-size:11px; line-height:15px; white-space:normal} html.mobile .preuve__cols{left:32px; top:508px; width:326px; height:auto; flex-direction:row; flex-wrap:wrap; gap:10px} /* « width » ne suffit pas : la regle du bureau pose « flex:1 », qui met la base a zero et laisse les quatre tuiles se partager la ligne en quatre colonnes de soixante-douze — d'ou un mot par ligne et le texte coupe. Il faut reprendre la propriete « flex » elle-meme. */ html.mobile .preuve__cols > div{flex:0 0 158px; width:158px; height:auto; min-height:0; padding:14px 14px 16px; border-radius:16px} html.mobile .preuve__cols b{font-size:21px; line-height:25px} /* ENFANT DIRECT, pas descendant. Les nombres sont enveloppes dans 121 sur 146 depuis qu'ils sont lus dans la base, et « html.mobile .preuve__cols span » les atteignait aussi. Elle est plus specifique que la surcharge « .preuve__cols b span » qui les protege au bureau : les chiffres tombaient a 11 px pendant que le mot « sur » gardait ses 21, et on lisait « 121 SUR 146 ». Le « > » borne la regle a la legende, seule enfant directe de la tuile. Meme piege que sur .et__compteur, ferme de la meme facon. */ html.mobile .preuve__cols > div > span{margin-top:5px; font-size:11px; line-height:15px} /* ── les deux options ─────────────────────────────────────────────────── La planche les empile sous l'appareil, sur un ecran de 1057 qui defile. Ici rien ne defile : l'appareil rapetisse (130 x 268, pose par la piste) et les deux cartes tiennent dans ce qui reste. */ html.mobile .options__titre{left:32px; top:36px; width:326px; font-size:26px; line-height:33px} /* La carte est un empilement — pastille en haut a gauche, exergue a cote, texte dessous, bouton cale en bas — et TOUT y est pose en coordonnees de bureau : la pastille a 48/40, le bouton a « left:48 » sur 564 de large. Je n'avais repris que la largeur de la carte : le bouton partait donc a 48 pour 326 de large et sortait de cinquante pixels par la droite, par-dessus le texte, avec la pastille et l'exergue empiles au meme endroit. Chaque piece est reposee ici a l'echelle de la colonne. Le bas de la carte reserve 78 : les 44 du bouton, ses 18 de marge, et 16 de respiration. */ html.mobile .opt{width:326px; height:auto; padding:18px 18px 78px; border-radius:20px} html.mobile .opt--1{left:32px; top:388px} html.mobile .opt--2{left:32px; top:auto; bottom:14px} html.mobile .opt__num{left:18px; top:18px; width:30px; height:30px; font-size:14px} html.mobile .opt__eb{margin:0 0 0 40px; padding-top:7px; font-size:11px; letter-spacing:.1em} html.mobile .opt__txt{margin:16px 0 0; width:auto; font-size:15px; line-height:22px} html.mobile .opt .bouton{left:18px; right:18px; bottom:18px; width:auto; height:44px; font-size:14px; padding-left:20px} /* ── la FAQ ───────────────────────────────────────────────────────────── L'appareil garde les questions — c'est lui qu'on touche — et il remonte en haut de la scene ; la carte de la reponse s'ouvre dessous au lieu d'etre a cote, la colonne de 390 n'ayant pas la place pour deux. */ html.mobile .faqc__titre{left:32px; top:462px; font-size:26px; line-height:32px} html.mobile .faqc__n{left:32px; top:498px; font-size:13px} html.mobile .faqc__filet{left:32px; top:526px; width:326px} /* Les sept temoins font 34 avec 8 d'ecart, plus deux fleches de 40 et deux ecarts de 20 : 406 pour une colonne de 326. Ils se laissaient compresser par le flex — d'ou des barres ecrasees et un rythme faux. Remis a la taille de la colonne : 7 x 22 + 6 x 6 + 2 x 34 + 2 x 12 = 286. */ html.mobile .faqc__barre{left:32px; top:542px; width:326px; gap:12px} html.mobile .faqc__fl{width:34px; height:34px; font-size:16px; flex:0 0 34px} html.mobile .faqc__segs{gap:6px} html.mobile .faqc__segs i{width:22px; height:4px; flex:0 0 22px} html.mobile .faqc__ouverte{left:32px; top:588px; width:326px} html.mobile .faqc__ouverte h3{font-size:20px; line-height:26px} html.mobile .faqc__rep{width:326px; font-size:14px; line-height:21px} /* ── le bas de page ─────────────────────────────────────────────────────── */ /* ── le bas de page ───────────────────────────────────────────────────── Tout doit tenir dans les 844 de la scene : ce bloc est le dernier, ce qui depasse en bas n'est atteignable par aucun defilement. D'ou la carte en grille de deux colonnes plutot qu'en pile — c'est ce que fait la planche mobile aussi — et la bande laissee libre entre le bouton et la carte, ou le telephone vient se poser une derniere fois. */ html.mobile .bloc--pied{padding:32px 32px 0} /* Le bureau centre tout le teaser ; je l'avais aligne a gauche. */ /* Le formulaire de la waitlist demande quatre champs, un titre et une ligne d'etat : trois cents pixels a lui seul. Ce qui reste pour la bande ou l'appareil se montre une derniere fois est donc mince — quarante-quatre. */ html.mobile .pied__teaser{height:238px; padding-bottom:0; text-align:center} html.mobile .pied__titre{font-size:30px; line-height:36px; letter-spacing:-.03em} html.mobile .pied__sous{margin:12px auto 0; width:290px; font-size:14px; line-height:21px} html.mobile .pied__teaser .bouton{margin-top:22px} html.mobile .pied__carte{margin-top:0; padding:20px 20px 16px; border-radius:20px} html.mobile .pied__haut{flex-direction:column; gap:22px} html.mobile .pied__marque{width:auto} html.mobile .pied__logo{margin-bottom:12px; font-size:20px} html.mobile .pied__droits{width:auto; font-size:12px; line-height:19px} /* TROIS colonnes, comme au bureau. En deux, « Support » tombait sur une deuxieme rangee et la grille prenait 222 pixels d'un coup : tout le reste de la carte se retrouvait tasse pour lui faire de la place. Cote a cote, les trois n'en prennent qu'une centaine, et les cent vingt recuperes repartent dans les respirations — c'est la densite qu'il fallait corriger, pas les marges. */ html.mobile .pied__guides{margin-top:20px; padding-top:16px} html.mobile .pied__guides > b{font-size:10.5px; letter-spacing:.05em; margin-bottom:9px} html.mobile .pied__guides > div{gap:7px 16px} html.mobile .pied__guides a{font-size:12px} html.mobile .pied__cols{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; justify-content:stretch} html.mobile .pied__cols div{min-width:0; gap:5px} html.mobile .pied__cols b{font-size:10.5px; letter-spacing:.05em} html.mobile .pied__cols a, html.mobile .pied__cols span{font-size:12px; line-height:16px} html.mobile .pied__soon{gap:3px} html.mobile .pied__soon i{font-size:9px; padding:1px 5px} /* LE FORMULAIRE DE LA WAITLIST, SUR UNE COLONNE. « Ton adresse courriel » demande 119 et « Mets-moi sur la liste » 143 : avec les marges, 286 pour 284 de colonne. Deux pixels de trop, c'est-a-dire un mot coupe. Les deux se suivent donc au lieu de se battre pour la meme ligne, et chaque champ garde l'allure de pilule du bureau. Quarante-quatre de haut plutot que quarante-huit : sur quatre champs, un titre et une ligne d'etat, les quatre pixels comptent. */ html.mobile .pied__attente__t{margin:0 0 8px; font-size:15px} html.mobile .pied__attente__duo{gap:10px; margin-top:8px} html.mobile #rejoindre select{height:42px; border-radius:21px; padding:0 16px; font-size:14px} /* La ligne d'etat ne dit rien tant qu'on n'a pas envoye : vide, elle ne doit pas reserver sa hauteur. */ html.mobile .pied__attente__etat:empty{margin:0; min-height:0; height:0} html.mobile .pied__champ{flex-direction:column; align-items:stretch; gap:8px; width:auto; max-width:none; height:auto; margin-top:10px; background:none; border:0; padding:0; border-radius:0} /* « flex:1 » vient du bureau, ou le champ est une rangee : en colonne il fait partir la base a zero et le champ s'ecrasait a vingt et un pixels. */ html.mobile .pied__champ input{flex:0 0 48px; height:46px; border-radius:23px; padding:0 20px; background:var(--gris); border:1px solid #EDEFF1; font-size:14px; min-width:0; height:42px} html.mobile .pied__champ button{height:42px; border-radius:21px; padding:0; font-size:14px; white-space:nowrap} html.mobile .pied__bas{margin-top:22px; padding-top:16px; font-size:12px} html.mobile .pied__sociaux{gap:18px} /* Le survol n'existe pas au doigt : ce qui ne repond qu'au survol doit etre visible d'emblee, sinon l'information n'est jamais atteignable. */ @media (hover: none){ .punch__l2 u::after{scale:1 1} } /* ═══════════════════════════════════════════════════════════════════════════ LE TIROIR DU MENU — mobile La barre de 358 pixels ne peut pas porter cinq destinations, deux applications, la langue et deux boutons. Elle garde le logo et un bouton ; tout le reste s'ouvre ici, par-dessus la scene. Le panneau glisse depuis le haut, le fond s'assombrit : deux mouvements, pas dix. ═══════════════════════════════════════════════════════════════════════════ */ /* 18 de large, cale sur le bord interieur de la barre comme sur la planche. La zone touchable, elle, deborde de 13 par 11 : c'est le pseudo-element qui la porte, pour que le dessin reste a sa taille. */ .nav__burger{display:none; position:relative; flex-direction:column; justify-content:center; gap:4.2px; width:18px; height:36px; padding:0; border:0; background:none; cursor:pointer; pointer-events:auto} .nav__burger::after{content:''; position:absolute; inset:-11px -13px} .nav__burger i{display:block; height:1.8px; border-radius:2px; background:var(--encre); transition:transform .34s cubic-bezier(.16,1,.3,1), opacity .2s linear} .nav__burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)} .nav__burger[aria-expanded="true"] i:nth-child(2){opacity:0} .nav__burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .tiroir{position:absolute; left:0; top:0; width:390px; height:844px; z-index:10; pointer-events:none} .tiroir[hidden]{display:none} .tiroir__fond{position:absolute; inset:0; background:rgba(11,20,30,.34); opacity:0; transition:opacity .34s linear; pointer-events:auto} .tiroir.on .tiroir__fond{opacity:1} /* Le panneau part de sous la barre et descend. « visibility » suit l'opacite pour qu'il ne reste pas cliquable une fois referme. */ .tiroir__panneau{position:absolute; left:16px; top:78px; width:358px; padding:18px 18px 20px; border-radius:26px; background:var(--blanc); box-shadow:0 26px 60px rgba(11,20,30,.18); pointer-events:auto; opacity:0; transform:translateY(-14px) scale(.98); transform-origin:100% 0; transition:opacity .28s cubic-bezier(.2,.7,.3,1), transform .46s cubic-bezier(.16,1,.3,1)} .tiroir.on .tiroir__panneau{opacity:1; transform:none} .tiroir__eb{margin:0 0 10px 8px; font-size:11px; letter-spacing:.09em; color:var(--muet); font-weight:600} .tiroir__appli{display:flex; align-items:flex-start; gap:12px; padding:10px; border-radius:16px; text-decoration:none; color:inherit} .tiroir__appli:active{background:var(--pille)} .tiroir__appli--bientot{opacity:.55} .tiroir__appli b{display:block; font-size:15px; font-weight:600} .tiroir__appli em{display:block; margin-top:2px; font-style:normal; font-size:12.5px; line-height:17px; color:var(--corps)} .tiroir__liens{display:flex; flex-direction:column; margin-top:12px; padding-top:12px; border-top:1px solid var(--filet)} .tiroir__liens a{padding:11px 8px; font-size:16px; color:var(--encre); text-decoration:none; border-radius:10px} .tiroir__liens a:active{background:var(--pille)} .tiroir__bas{display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding:12px 8px 0; border-top:1px solid var(--filet); font-size:14px} .tiroir__conn{color:var(--encre); text-decoration:none; font-weight:500} .tiroir__cta{display:flex; margin-top:14px; width:100%; justify-content:space-between} /* ═══════════════════════════════════════════════════════════════════════════ LA BOITE — candidature (D15) et waitlist (D16) Hors de la scene, donc en pixels reels : un formulaire mis a l'echelle est un formulaire ou l'on ne lit pas ce qu'on tape. Elle se pose par-dessus tout, y compris la barre du haut (z-index 9) et le tiroir (10). ═══════════════════════════════════════════════════════════════════════════ */ .boite{position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:24px} .boite[hidden]{display:none} .boite__fond{position:absolute; inset:0; background:rgba(8,20,26,.52); opacity:0; transition:opacity .3s linear} .boite.on .boite__fond{opacity:1} .boite__panneau{position:relative; width:min(520px, 100%); max-height:calc(100vh - 48px); overflow:auto; background:var(--blanc); border-radius:24px; padding:38px 38px 32px; box-shadow:0 30px 80px rgba(8,20,26,.28); opacity:0; transform:translateY(14px) scale(.985); transition:opacity .28s cubic-bezier(.2,.7,.3,1), transform .5s cubic-bezier(.16,1,.3,1)} .boite.on .boite__panneau{opacity:1; transform:none} .boite__x{position:absolute; right:16px; top:14px; width:34px; height:34px; border:0; background:none; border-radius:50%; cursor:pointer; font-size:24px; line-height:1; color:var(--muet)} .boite__x:hover{background:var(--pille); color:var(--encre)} .boite__eb{margin:0 0 10px; font-size:13px; letter-spacing:.14em; font-weight:600; color:var(--teal)} .boite__titre{margin:0; font-size:32px; line-height:38px; font-weight:500; letter-spacing:-.03em; color:var(--encre)} .boite__sous{margin:12px 0 0; font-size:15px; line-height:23px; color:var(--corps)} .boite__note{margin:22px 0 -6px; font-size:13px; line-height:19px; color:var(--muet)} .boite__champ{display:block; margin-top:18px} .boite__champ > span{display:block; margin-bottom:7px; font-size:13px; font-weight:500; color:var(--encre)} .boite__champ input, .boite__champ select, .boite__champ textarea{ width:100%; box-sizing:border-box; font:inherit; font-size:15px; color:var(--encre); background:var(--gris); border:1px solid #E4E8EA; border-radius:12px; padding:12px 14px; outline:none} .boite__champ textarea{resize:vertical; min-height:112px; line-height:22px} .boite__champ input:focus, .boite__champ select:focus, .boite__champ textarea:focus{border-color:var(--teal); box-shadow:0 0 0 3px rgba(0,118,146,.14)} .boite__champ input::placeholder, .boite__champ textarea::placeholder{ color:var(--muet)} .boite__duo{display:grid; grid-template-columns:1fr 1fr; gap:14px} .boite__duo .boite__champ{margin-top:12px} .boite__envoi{margin-top:24px; width:100%; height:52px; justify-content:space-between} .boite__etat{margin:14px 0 0; min-height:0; font-size:14px; line-height:20px} .boite__etat:empty{margin:0} .boite__etat.est-ok{color:var(--teal)} .boite__etat.est-mal{color:#A8452F} @media (max-width: 560px){ .boite{padding:14px} .boite__panneau{padding:30px 22px 26px; border-radius:20px} .boite__titre{font-size:26px; line-height:32px} .boite__duo{grid-template-columns:1fr; gap:0} }