/* Castflow — /talent/ v3 (6 novembre 2026) Scène de 1440 × 900 mise à l'échelle par la fenêtre, un geste = un arrêt, le téléphone qui traverse toute la page. Maquette Figma CFT-1811 (371:356). CE FICHIER EST ASSEMBLÉ EN DEUX PARTIES : 1. ce que /talent/ partage avec le reste du site et avec v2 (la barre, le panneau « Application », le tiroir, les boutons qui s'inversent, la boîte) : recopié de v2.css, aux lignes indiquées, pour que les deux pages — /talent/ (v3) et /en/talent/ (encore v2) — gardent la même barre ; 2. la page elle-même : v3-scene.css, inclus tel quel à la fin. Toute retouche de la partie 1 se fait dans v2.css ET ici. */ :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} html,body{overflow-x:clip} html{scroll-behavior:auto} 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(--gris); -webkit-font-smoothing:antialiased; } /* ═══ 1. LA BARRE ET SON PANNEAU (v2.css lignes 143-376) ═══════════════════ */ .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. */ /* CFT-1496 : la hauteur, les coins et le retrait intérieur du gabarit (h-[71px], rounded-[999px], px-8). Le retrait de droite valait 12 : les boutons se posaient vingt pixels plus près du bord que sur les autres pages. */ .nav__bar{max-width:min(1300px, calc(100vw - 32px)); margin:7px auto; height:71px; border-radius:999px; 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 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} /* Sur une barre étroite, c'est le logo qui cède, pas les boutons qui sortent de la pilule : max-width comme le reste du site. Mais la hauteur est un PLAFOND, pas une cote : figée, elle laissait la largeur céder seule et écrasait le mot. « contain » en gardait le dessin, pas la boîte. Même règle que « LE LOGO GARDE SES PROPORTIONS » dans assets/css/styles.css, mesurée par seo/check-nav.js --rendu. */ .nav__logo img{height:auto; max-height:46px; width:auto; max-width:100%; 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} /* LA MEME GRILLE QUE LE GABARIT (CFT-1496). Le site pose sa barre en [1fr | auto | 1fr] (assets/css/styles.css, .cf-nav) : les liens au centre exact de la barre, quelle que soit la largeur du logo ou des boutons. En « space-between » ils tombaient entre les deux, donc plus à gauche qu'ailleurs, et bougeaient avec la longueur d'un libellé. */ html:not(.mobile) .nav__bar{display:grid; grid-template-columns:1fr auto 1fr} html:not(.mobile) .nav__actions{grid-column:3; justify-self:end} .nav__liens, .nav__actions{white-space:nowrap} /* ENTRE 761 ET 1023 PX la page reste au bureau (sa planche mobile ne prend le relais qu'à 760), alors que la barre du site passe à sa version téléphone sous 1024. Les liens n'y tiennent pas : à 820 px en français ils ne laissaient AUCUNE place au logo, rendu à 0 x 0. On range donc la rangée de liens sous 1024, comme le site ; le logo, la langue et les deux boutons restent, à leur taille. Le tiroir n'est pas offert ici : il vit dans la scène mise à l'échelle, et au bureau il y serait minuscule. */ @media (max-width: 1023.98px){html:not(.mobile) .nav__liens{display: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} /* LES LIENS DU GABARIT, VALEUR POUR VALEUR (CFT-1496) : 14 px, graisse 500, noirs, et le survol pâlit (text-[14px] font-medium text-black, hover:opacity-60). Ils étaient gris en graisse 400, sauf « Accueil ». L'interligne 1,5 est celui que Tailwind pose partout sur le site. */ .nav__liens{color:#000; font-weight:500; line-height:1.5} .nav__liens > a, .nav__decl{color:#000; transition:opacity .2s ease} .nav__liens > a:hover, .nav__decl:hover{opacity:.6} .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} /* un vrai lien, pas celui du navigateur : dans le tiroir, hors de « .nav », il sortait bleu et souligné */ .nav__lang a{color:inherit; text-decoration:none; transition:color .25s ease} .nav__lang a:hover{color:var(--encre)} /* dans la barre, la langue du gabarit : 13 px en graisse 500, la langue courante noire, l'autre à 40 %, la barre oblique à 20 % */ .nav__actions .nav__lang{gap:4px; align-items:center; font-weight:500; line-height:1.5; color:rgba(0,0,0,.4)} .nav__actions .nav__lang a, .nav__actions .nav__lang b{padding:4px 6px} .nav__actions .nav__lang b{color:#000} .nav__actions .nav__lang i{color:rgba(0,0,0,.2)} .nav__actions .nav__lang a:hover{color:#000} /* é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. */ /* CFT-1496 : les deux boutons de la barre du site, valeur pour valeur. Le gabarit les a passés à la norme « .cf-btn--s » (assets/css/styles.css) : pilule de 36, 14 px, retrait de 16, bordure d'un pixel ; « Se connecter » en contour, « S'inscrire » en aplat NOIR qui vire au teal au survol. Cette barre-ci avait gardé l'ancienne version, 15 px sur 38,5 et un aplat teal : c'est le bouton « bleu ici, noir ailleurs » du retest du 11 septembre. La feuille du site n'est pas chargée sur /talent/, d'où la recopie. */ .nav a.nav__conn, .nav a.nav__cta{display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 16px; border:1px solid transparent; border-radius:999px; font-size:14px; font-weight:500; letter-spacing:-0.01em; line-height:1; white-space:nowrap; transition:background-color .25s ease, border-color .25s ease, color .25s ease} .nav a.nav__conn{background:transparent; border-color:rgba(0,0,0,.14); color:#0A0A0A} .nav a.nav__conn:hover{border-color:rgba(0,0,0,.32); background:rgba(0,0,0,.03)} .nav a.nav__cta{background:#0A0A0A; color:#fff} .nav a.nav__cta:hover{background:#007692} .nav a.nav__conn:active, .nav a.nav__cta:active{transform:translateY(1px)} .nav a.nav__conn:focus-visible, .nav a.nav__cta:focus-visible{ outline:2px solid #007692; outline-offset:3px} /* LA HAUTEUR DE LA BARRE, AU BUREAU. Le site pose sa pilule à 10 px du haut de la fenêtre (py-[10px]). Celle-ci vit dans la scène, qui est centrée dans la fenêtre et réduite : dès que la fenêtre est plus haute que la planche à l'échelle, la scène laisse une bande en haut, et la barre descendait avec elle — 50 px à 1440 × 900, 100 px à 1024 × 768. On la remonte donc de la hauteur de cette bande, (100vh − 1080 × échelle) / 2, exprimée dans les unités de la scène (divisée par l'échelle), puis de 10 px réels. Sur téléphone la barre suit la planche mobile, qui a sa propre pose. */ html:not(.mobile) .nav__bar{margin-top:0; transform:translateY(calc((10px - (100vh - 1080px * var(--ech, 1)) / 2) / var(--ech, 1))) scale(calc(1 / var(--ech, 1)))} /* 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:inline-flex; align-items:center; gap:6px} /* le chevron du gabarit (SVG de 9,5 x 5,5, trait de 1,5, CFT-1496) : celui dessiné en bordures était plus grand et plus fin, et se voyait */ .nav__chevron{display:block; flex-shrink:0; transition:transform .2s ease} .nav__decl[aria-expanded="true"] .nav__chevron{transform:rotate(180deg)} /* le panneau : caché par l'opacité ET par la visibilité, sinon il resterait cliquable au-dessus de la page une fois transparent */ /* CFT-1496 : le panneau du gabarit (.cf-appmenu__panel), cote pour cote : 18 px sous le déclencheur, 20 à sa gauche, filet #eceef1, ombre plus douce, rangées espacées de 2. La rangée de liens est en « nowrap » : le panneau, lui, revient à la ligne. */ .nav__menu{position:absolute; left:-20px; top:calc(100% + 18px); width:360px; padding:10px; display:flex; flex-direction:column; gap:2px; white-space:normal; border-radius:20px; background:#fff; border:1px solid #eceef1; box-shadow:0 14px 36px -6px rgba(0,0,0,.12); 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 0 8px 12px; font-size:11px; letter-spacing:.88px; line-height:1.5; color:#a6adb5; font-weight:500} .nav__item{display:flex; gap:14px; align-items:center; padding:12px 14px 12px 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:rgba(0,118,146,.07); 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:rgba(0,118,146,.16); 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:14px; 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} /* L'écart titre / description du gabarit. Là-bas la description est un EN LIGNE sous le titre : son « margin-top » ne compte pas, et c'est la ligne de 21 px du panneau (14 px × 1,5) qui la porte. Ici elle était une ligne de 19,5 à 3 px du titre, soit 1,5 px de plus par rangée d'une ligne. */ .nav__item span{display:flex; flex-direction:column; gap:0; min-width:0} .nav__item b{font-size:15px; font-weight:500; line-height:1.5; color:#0a0a0a; display:flex; align-items:center; gap:8px} .nav__item > span > em{font-style:normal; font-size:13px; line-height:21px; color:#5b6470} /* les tuiles et les icônes du gabarit (assets/images/icones/app-*.svg, aux tailles de .cf-appmenu__icon--*), pas une seconde série dessinée ici */ .nav__tuile{flex:0 0 40px; width:40px; height:40px; border-radius:12px; background:#f1f3f5 center no-repeat} .nav__tuile--acteur{background-image:url("/assets/images/icones/app-acteur.svg"); background-size:24px 22.04px} .nav__tuile--agence{background-image:url("/assets/images/icones/app-agence.svg"); background-size:24px 19.9px} .nav__tuile--casting{background-image:url("/assets/images/icones/app-directeur-casting.svg"); background-size:20.37px 24px} /* l'app à venir reste VISIBLE mais inerte : ni lien, ni curseur, ni survol */ .nav__item--bientot{cursor:default} .nav__item--bientot b{color:#5b6470} .nav__badge{font-style:normal; font-size:10px; letter-spacing:.6px; line-height:1.5; font-weight:500; color:#5b6470; background:#edf0f2; padding:4px 9px; border-radius:999px; white-space:nowrap} .nav__decl:focus-visible, .nav__item:focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:10px} /* ═══ LES BOUTONS (v2.css lignes 1431-1446, 1465-1473, 1487-1534) ═══════ */ .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; border:0; font-family:inherit; -webkit-appearance:none; appearance: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,")} .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} /* 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} /* ═══ LA BARRE SUR TÉLÉPHONE (v2.css lignes 1630-1637, 1657) ════════════ */ html.mobile .nav__bar{transform:none; max-width:none; margin:0; height:100%; border-radius:999px; padding:0 20px; max-width:none} /* le logo mobile du site : 36 px (h-[36px]), dans le meme fichier que la barre du bureau. A 22 px il faisait les deux tiers de celui des autres pages. */ html.mobile .nav__logo img{max-height:36px} html.mobile .nav__liens, html.mobile .nav__actions{display:none} html.mobile .nav__burger{display:flex} html.mobile .bouton--teal{box-shadow:0 6px 18px rgba(0,118,146,.18)} /* ═══ LE TIROIR (v2.css lignes 2361-2435) ═══════════════════════════════ */ 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. ═══════════════════════════════════════════════════════════════════════════ */ /* Le bouton du site mobile (w-9 h-9, rond, icone de 20 aux traits de 15 sur 1,5, espaces de 5), cale sur le retrait de 20 de la barre (CFT-1496). Le trait de 18 sur 1,8 se lisait plus lourd que sur les autres pages. La zone touchable deborde de 4 : c'est le pseudo-element qui la porte. */ .nav__burger{display:none; position:relative; flex-direction:column; justify-content:center; align-items:center; gap:3.5px; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:none; cursor:pointer; pointer-events:auto} .nav__burger::after{content:''; position:absolute; inset:-4px} .nav__burger i{display:block; width:15px; height:1.5px; border-radius:2px; background:#000; transition:transform .34s cubic-bezier(.16,1,.3,1), opacity .2s linear} .nav__burger[aria-expanded="true"] i:nth-child(1){transform:translateY(5px) rotate(45deg)} .nav__burger[aria-expanded="true"] i:nth-child(2){opacity:0} .nav__burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-5px) 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. */ /* 82 : douze pixels sous la barre, qui finit a 70 depuis CFT-1496. CFT-1834. LE BOUTON DE CONNEXION DOIT TENIR ENTIER, SANS DEFILER. Le panneau se pose a 82 et sa hauteur vient de son contenu : sur la planche de 844 il finissait a 682, et sur une planche courte (700, celle d'un iPhone barres affichees) a 18 pixels du bas de l'ecran. Le bouton se retrouvait donc colle au bord, sous la bande que le systeme couvre en bas (indicateur d'accueil, barre flottante d'iOS 26), et Sasha le voyait a peine. On resserre le rythme vertical du tiroir de 64 pixels, partout ou il ne se voit pas : les marges, les paddings, l'interligne des descriptions. Les cibles tactiles des liens passent de 43 a 39 pixels, au-dessus du minimum de 24 (WCAG 2.5.8). Un tiroir qui tient dans la planche la plus courte tient dans toutes les autres. */ .tiroir__panneau{position:absolute; left:16px; top:82px; width:358px; padding:14px 16px 16px; 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 6px 8px; font-size:11px; letter-spacing:.09em; color:var(--muet); font-weight:600} .tiroir__appli{display:flex; align-items:flex-start; gap:12px; padding:8px; 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:15px; color:var(--corps)} /* Le badge BIENTOT est lui aussi un : la regle ci-dessus le posait en bloc, et il s'etirait en une barre grise de toute la largeur. */ .tiroir__appli .nav__badge{display:inline-block; margin:0 0 0 8px; vertical-align:middle; font-size:10px; line-height:1.5; color:#5b6470} .tiroir__liens{display:flex; flex-direction:column; margin-top:8px; padding-top:8px; border-top:1px solid var(--filet)} .tiroir__liens a{padding:9px 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:8px; padding:8px 8px 0; border-top:1px solid var(--filet); font-size:14px} .tiroir__cta{display:flex; margin-top:10px; width:100%; justify-content:space-between} /* ═══════════════════════════════════════════════════════════════════════════ /* ═══ LA BOÎTE (v2.css lignes 2446, 2479-2554) ══════════════════════════ */ html.boite-ouverte, html.boite-ouverte body{overflow:hidden; touch-action:none} .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-x:hidden; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y pinch-zoom; 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} /* La province ou l'Etat : sa propre rangee, pleine largeur, sous le duo genre et age. Meme espacement que les deux champs du duo (12px), sur telephone comme sur ordinateur : le duo s'y empile deja sans ecart de grille, donc les trois champs se suivent d'un pas egal. Un nom long (« Washington (District de Columbia) ») tient dans le menu, qui a la largeur de la boite. */ .boite__champ--region{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} /* La ligne Loi 25 sous le bouton : la fin visée et le lien vers la politique, lisibles sans crier. Le message d'état passe dessous, il ne la pousse pas hors de vue quand il apparaît. */ .boite__tuteur{display:flex; gap:10px; align-items:flex-start; margin-top:16px; font-size:13px; line-height:19px; color:var(--encre); cursor:pointer} .boite__tuteur[hidden]{display:none} .boite__tuteur input{flex:0 0 auto; width:18px; height:18px; margin:1px 0 0; accent-color:var(--teal)} .boite__consent{margin:12px 0 0; font-size:12.5px; line-height:18px; color:var(--muet)} .boite__consent a{color:inherit; text-decoration:underline; text-underline-offset:2px} .boite__consent a:hover{color:var(--encre)} .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} } /* ── LE DEFILEMENT VIRTUEL DU TELEPHONE ──────────────────────────────────── /* ═══ LE MENU DE LA REFONTE, LES PASTILLES, LE MEMBRE (v2.css 2600-2817) ═ */ /* ═══════════════════════════════════════════════════════════════════════════ LE MENU DE LA REFONTE SUR /talent/ (6 octobre 2026) Le reste du site a pris la barre retenue (Figma 1246:94) et le panneau « Menu B » (1241:397) ; cette page gardait l'ancien panneau à icônes. La feuille du site n'est pas chargée ici : les règles sont donc RECOPIÉES de assets/css/styles.css (« LE MENU DE LA REFONTE »), aux noms de cette barre (.nav__bar, .nav__liens, .nav__appli.ouvert). Toute retouche se fait aux deux endroits. Bureau seulement : le téléphone garde son tiroir. Seule différence voulue : ici le bouton reste « Mets-toi sur la waitlist ». ═══════════════════════════════════════════════════════════════════════════ */ html:not(.mobile) .nav__bar{height:72px; padding:0 20px 0 28px; box-shadow:0 8px 32px rgba(0,0,0,.08)} html:not(.mobile) .nav__logo{height:34px} html:not(.mobile) .nav__logo img{max-height:34px} /* centrés sur la barre : le retrait est de 28 à gauche et de 20 à droite */ html:not(.mobile) .nav__liens{gap:2px; margin-left:-8px} .nav__liens > a, .nav__decl{display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:999px; line-height:1; color:#111110; transition:background-color .25s ease, color .25s ease} .nav__liens > a:hover, .nav__decl:hover{opacity:1; background:rgba(17,17,16,.04)} .nav__appli.ouvert .nav__decl{background:rgba(17,17,16,.07); color:#007692} .nav__actions{gap:12px} .nav__actions .nav__lang{gap:0; margin-right:0; color:#6b747c} .nav__actions .nav__lang a, .nav__actions .nav__lang b{padding:4px} .nav__actions .nav__lang b{color:#111110} .nav__actions .nav__lang i{color:rgba(107,116,124,.5)} /* « .nav a » pose color:inherit avec plus de poids qu'une classe seule */ .nav a.cf-menu__app{color:#fff} .nav a.cf-menu__cta{color:#fefefe} .nav__menu.cf-menu{translate:none} /* — Le panneau : il prend toute la largeur de la barre, 20 px dessous */ html:not(.mobile) .nav__appli { position: static; } .nav__menu.cf-menu { top: calc(100% + 20px); left: 0; right: 0; width: auto; padding: 16px; display: grid; grid-template-columns: minmax(0, 560fr) minmax(0, 312fr) minmax(0, 312fr); gap: 16px; border: 0; border-radius: 36px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1); transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.3s; text-align: left; font-weight: 400; } .nav__appli.ouvert .nav__menu.cf-menu { transform: none; } .cf-menu__app { position: relative; display: block; height: 340px; overflow: hidden; border-radius: 24px; color: #fff; text-decoration: none; } .cf-menu__app--acteurs { background: linear-gradient(27.1deg, #007692 21.7%, #009dc2 99.2%); } .cf-menu__app--studio { background: #111110; } .cf-menu__app--bientot { background: #f5f6f7; cursor: default; } a.cf-menu__app:focus-visible, .cf-menu__cta:focus-visible { outline: 2px solid #007692; outline-offset: 3px; } .cf-menu__texte { position: absolute; top: 24px; left: 24px; right: 24px; display: flex; flex-direction: column; gap: 8px; } .cf-menu__titre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 19px; font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; } .cf-menu__titre--pile { flex-direction: column; align-items: flex-start; gap: 8px; } .cf-menu__version { padding: 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; } .cf-menu__desc { max-width: 240px; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, 0.78); } .cf-menu__app--bientot .cf-menu__titre { color: #6b747c; } .cf-menu__app--bientot .cf-menu__version { background: rgba(17, 17, 16, 0.07); color: #6b747c; } .cf-menu__app--bientot .cf-menu__desc { max-width: 180px; color: rgba(63, 71, 80, 0.7); } .cf-menu__clap { position: absolute; right: 20px; top: 82px; width: 56px; height: 66.5px; } /* — Studio et Directeur de casting empilés dans une colonne (bento, Figma 1597:134) */ .cf-menu__pile { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .cf-menu__pile .cf-menu__app { height: 162px; } /* sous 1240 px, la colonne fait 220 px : le portable et le clap couvriraient le texte */ @media (max-width: 1239px) { .cf-menu__portable, .cf-menu__clap { display: none; } } /* — Les visuels : ceux des cartes « Acteur ou agence » (612 de large), réduits à 47,7 % et centrés dans la carte. Les cotes intérieures restent donc celles de la grande maquette (1150:81). */ .cf-menu__visuel { position: absolute; left: 50%; top: 190px; width: 612px; height: 320px; margin-left: -146px; transform: scale(0.47713); transform-origin: 0 0; pointer-events: none; } /* les téléphones à 74,5 % (×1,25 de l'ancien panneau), centrés dans la grande carte */ .cf-menu__tels { top: 140px; margin-left: -228.1px; transform: scale(0.7455); } /* le portable à 23,9 %, calé en bas à droite de la carte Studio */ .cf-menu__portable { left: calc(100% - 152px); top: 100px; margin-left: 0; transform: scale(0.23856); } .cf-menu__tel { position: absolute; width: 168px; height: 346px; overflow: hidden; border-radius: 32px; background: #0e0f11; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; backface-visibility: hidden; isolation: isolate; } .cf-menu__tel::before { content: ''; position: absolute; inset: 6px; border-radius: 25px; background: linear-gradient(61deg, #007692 21.7%, #009dc2 99.2%); } .cf-menu__tel::after { content: ''; position: absolute; top: 16px; left: 59px; width: 50px; height: 11px; border-radius: 100px; background: #0e0f11; } .cf-menu__tel img { position: absolute; top: 110px; width: auto; height: 78px; max-width: none; } .cf-menu__tel--g { left: 124.77px; top: 30.79px; transform: rotate(-10deg); } .cf-menu__tel--g img { left: 41.75px; } .cf-menu__tel--d { left: 316.68px; top: 59.96px; transform: rotate(10deg); } .cf-menu__tel--d img { left: 39.04px; } .cf-menu__tel--c { left: 222px; top: 14px; } .cf-menu__tel--c img { top: 118px; left: 36px; width: 96px; height: 28.14px; } .cf-menu__ecran { position: absolute; left: 110px; top: 0; width: 392px; height: 231.315px; overflow: hidden; border-radius: 15.892px; background: #0e0f11; } .cf-menu__ecran::before { content: ''; position: absolute; inset: 10.595px; border-radius: 7.063px; background: linear-gradient(25.5deg, #007692 21.7%, #009dc2 99.2%); } .cf-menu__ecran img { position: absolute; left: 94.03px; top: 98.44px; width: 221px; height: 34px; max-width: none; } .cf-menu__socle { position: absolute; left: 76px; top: 231.315px; width: 460px; height: 12px; border-radius: 2px 2px 10px 10px; background: linear-gradient(#dbe0e5, #b2bac2); } .cf-menu__ecran, .cf-menu__socle { transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); } /* — L'appel, à droite */ .cf-menu__appel { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; height: 340px; padding: 24px; border: 1px solid #e4e7ea; border-radius: 24px; background: #fff; white-space: normal; } .cf-menu__appel-texte { display: flex; flex-direction: column; gap: 8px; } .cf-menu__appel-texte p { margin: 0; } .cf-menu__autocollant { position: absolute; right: 36px; top: 156px; width: 114px; height: 99px; max-width: none; transform: rotate(8deg); pointer-events: none; } .cf-menu__question { max-width: none; font-size: 24px; font-weight: 500; line-height: 1.1; letter-spacing: -0.025em; color: #111110; } .cf-menu__reponse { font-size: 14px; line-height: 1.4; color: #3f4750; } /* le bouton au rond fléché, avec le survol des pages de la refonte : son double inversé (teal) est révélé par un cercle parti du rond */ .cf-menu__cta, .cf-menu__cta-sur { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 8px 0 26px; white-space: nowrap; } .cf-menu__cta { position: relative; z-index: 0; overflow: hidden; height: 52px; border-radius: 999px; background: #111110; color: #fefefe; font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: -0.01em; text-decoration: none; transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1), background-color 0s linear 0s; } .cf-menu__cta-rond { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #111110; } .cf-menu__cta-rond svg { position: absolute; inset: 10px; width: 16px; height: 16px; } .cf-menu__cta-sur { position: absolute; inset: 0; background: #007692; color: #fff; clip-path: circle(0 at calc(100% - 26px) 50%); transition: clip-path 0.78s cubic-bezier(0.16, 1, 0.3, 1); } .cf-menu__cta-sur .cf-menu__cta-rond { color: #007692; } /* — Mouvement : les cartes arrivent l'une après l'autre à l'ouverture ; au survol, les téléphones s'écartent et le portable monte (comme sur les cartes « Acteur ou agence » des pages). */ .cf-menu > * { opacity: 0; transform: translateY(14px); transition: opacity 0.45s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .nav__appli.ouvert .cf-menu > * { opacity: 1; transform: none; } .nav__appli.ouvert .cf-menu > :nth-child(2) { transition-delay: 0.06s; } .nav__appli.ouvert .cf-menu > :nth-child(3) { transition-delay: 0.12s; } .nav__appli.ouvert .cf-menu > :nth-child(4) { transition-delay: 0.18s; } @media (hover: hover) and (pointer: fine) { a.cf-menu__app:hover .cf-menu__tel--g { transform: translate(-44px, -40px) rotate(-14deg); } a.cf-menu__app:hover .cf-menu__tel--d { transform: translate(44px, -40px) rotate(14deg); } a.cf-menu__app:hover .cf-menu__tel--c { transform: translateY(-52px); } a.cf-menu__app:hover .cf-menu__ecran, a.cf-menu__app:hover .cf-menu__socle { transform: translateY(-44px); } .cf-menu__cta:hover { transform: translateY(-2px); background: #007692; box-shadow: 0 14px 30px rgba(10, 10, 10, 0.22); transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1), background-color 0s linear 0.78s; } .cf-menu__cta:hover .cf-menu__cta-sur { clip-path: circle(145% at calc(100% - 26px) 50%); } } @media (prefers-reduced-motion: reduce) { .nav__menu.cf-menu, .cf-menu > *, .cf-menu__tel, .cf-menu__ecran, .cf-menu__socle, .cf-menu__cta, .cf-menu__cta:hover, .cf-menu__cta-sur { transition: none; } .cf-menu > *, .cf-menu__cta:hover { transform: none; } } /* Le pied sur telephone : la troisieme colonne un peu plus large et le courriel sur une ligne, pour qu'il ne se coupe plus en « support@castfl / ow.co ». */ html.mobile .pied__cols{grid-template-columns:.9fr 1.05fr 1.35fr} html.mobile .pied__cols a[href^="mailto:"]{font-size:13px; letter-spacing:-.01em; white-space:nowrap} /* Les pastilles de version et d'etat : la meme partout (voir assets/css/styles.css). */ .cf-menu__version, .nav__badge, .tiroir__appli .nav__badge, .pied__cols .nav__badge{display:inline-block; vertical-align:middle; font-family:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11px; font-weight:500; line-height:1; letter-spacing:.06em; text-transform:uppercase; padding:5px 9px; border-radius:999px; white-space:nowrap} .nav__badge, .tiroir__appli .nav__badge{background:rgba(17,17,16,.07); color:#6b747c} /* CFT-1981 : le rond du profil remplace « Se connecter » dans la barre de /talent/. La feuille du site (.cf-avatar) n'est pas chargée sur cette page, donc on la recopie, à la taille de la pilule d'ici. */ .cf-membre{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:inherit} .nav a.nav__cta.cf-membre{height:36px; padding:0; background:transparent} .nav a.nav__cta.cf-membre:hover{background:transparent} .cf-avatar{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; overflow:hidden; background:#0A0A0A; color:#fff; font-weight:600; font-size:13px; line-height:1; letter-spacing:.02em; flex:none; box-shadow:0 0 0 2px #fff, 0 2px 8px rgba(0,0,0,.18)} .cf-avatar img{width:100%; height:100%; object-fit:cover; display:block} .cf-avatar--attente{opacity:.15} .cf-membre:hover .cf-avatar{box-shadow:0 0 0 2px #fff, 0 0 0 4px #1d7f86} .tiroir__cta.cf-membre{display:flex; align-items:center; justify-content:space-between; width:100%} /* ═══ 2. LA PAGE ELLE-MÊME (talent/v3-scene.css) ═══════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ LA SCÈNE DE /talent/ (v3, 6 novembre 2026) Maquette Figma CFT-1811 « Talent · version finale (6 nov. 2026) », 371:356 : trente arrêts de 1440 × 900, mis à l'échelle par la fenêtre. Toutes les cotes viennent de la maquette ; les sections plus hautes que 900 (05, 16, 18, 19, 21) sont resserrées pour tenir dans le cadre. La barre, le tiroir, les boutons, le menu et la boîte viennent de v2.css (recopiés plus haut dans v3.css) ; ce qui suit est la page elle-même. ═══════════════════════════════════════════════════════════════════════════ */ /* Unbounded Black : les titres des cartes (celui de assets/fonts, le même que sur /castings/ et l'accueil). */ @font-face{font-family:"Unbounded"; font-weight:900; font-style:normal; font-display:swap; src:url("/assets/fonts/Unbounded-Black.woff2") format("woff2")} /* ── la barre, en vrais pixels ──────────────────────────────────────────── Dans v2 elle vivait DANS la scène et annulait l'échelle sur elle seule (« --ech »). Ici elle est fixée hors de la scène : plus rien à annuler. */ .nav{position:fixed; left:0; right:0; top:0; width:auto; height:auto; z-index:40; pointer-events:none} .nav__bar{pointer-events:auto} html:not(.mobile) .nav__bar{margin:10px auto 0; transform:none} html.mobile .nav{top:10px; padding:0 16px} html.mobile .nav__bar{height:60px; margin:0; max-width:none} html:not(.mobile) .nav__burger{display:none} /* le hamburger : trois traits l'un sous l'autre (la règle de v2 est écrasée par « html.mobile .nav__burger » plus loin, on la redit ici) */ html.mobile .nav__burger{display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3.5px; width:36px; height:36px} /* La barre ne dessine rien au survol de la scène : seul le panneau est à elle. */ .nav__menu{pointer-events:auto} /* ── le rail et la scène ────────────────────────────────────────────────── Le rail fait la hauteur du défilement (v3.js) ; la scène y colle en 100vh et la planche de 1440 × 900 est centrée et réduite dedans. */ .track{position:relative} .scene{position:sticky; top:0; height:100vh; height:100lvh; overflow:hidden} /* (10 nov. 2026) la scène ne coupe plus vers le bas : quand elle s'en va avec le défilement, l'ombre du téléphone était tranchée net au bord de la scène */ @supports (overflow:clip){ .scene{overflow:visible; overflow-x:clip} } .stage{position:absolute; left:50%; top:50%; width:1440px; height:900px; transform:translate(-50%,-50%) scale(var(--ech, 1)); transform-origin:50% 50%} /* Avant le premier dessin, la scène ne se montre pas (voir le ). */ html.scene-attend .stage{opacity:0} .stage{transition:opacity .5s ease} /* Tout ce que v3.js pose vit en absolu dans la planche. Les blocs qui portent une fenêtre (data-de) sont dessinés par lui : opacité et glissement. */ .sec, .decor, .pb-carte, .cartes, .pastilles{position:absolute; left:0; top:0; width:1440px; height:900px; pointer-events:none} .sec > *, .pb-carte > *, .pastilles > *{pointer-events:auto} .sec[hidden], .decor[hidden], .pb-carte[hidden], .pastilles[hidden]{display:none} .inerte, .inerte > *{pointer-events:none !important} .sec{z-index:5} .decor, .pb-carte{z-index:2} .cartes{z-index:7} .pastilles{z-index:8} .tel--maitre{z-index:6} .tel--maitre.tel--fond{z-index:3} .tel--cote{z-index:4} /* le téléphone passe DEVANT le pied de page seulement s'il est devant : au P.S. il est derrière la carte blanche (z 3 contre 5) */ /* Les téléphones par section n'existent que sur téléphone. */ .mtel{display:none} /* les boutons de la page : la même pilule que v2, au rond fléché */ .bouton{position:absolute} /* ── les entrées en cascade (data-cascade) ─────────────────────────────── Les enfants arrivent un par un quand le bloc est posé (classe « pose », écrite par v3.js), 90 ms d'écart : le même geste que sur /a-propos/. */ [data-cascade] > *{opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1)} .sec.pose [data-cascade] > *{opacity:1; transform:none} .sec.pose [data-cascade] > :nth-child(2){transition-delay:.09s} .sec.pose [data-cascade] > :nth-child(3){transition-delay:.18s} .sec.pose [data-cascade] > :nth-child(4){transition-delay:.27s} .sec.pose [data-cascade] > :nth-child(5){transition-delay:.36s} /* ── la typographie des sections ───────────────────────────────────────── */ .sec h1, .sec h2, .sec h3, .sec p, .sec blockquote, .sec figure, .sec ol{margin:0} .sec em{font-style:normal; color:var(--teal)} .titre{font-weight:500; letter-spacing:-.025em; color:var(--encre)} /* ── 01 · l'ouverture ──────────────────────────────────────────────────── */ .tuile{position:absolute; border-radius:16px; background:#fff; box-shadow:0 6px 20px rgba(12,26,32,.16); background-repeat:no-repeat; background-position:center; background-size:52%} [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")} .tuile--h1{left:207px; top:257px; width:57px; height:57px; rotate:-12deg} .tuile--h2{left:325px; top:341px; width:51px; height:51px; rotate:9deg} .tuile--h3{left:1176px; top:270px; width:55px; height:55px; rotate:11deg} .tuile--h4{left:1066px; top:351px; width:48px; height:48px; rotate:-7deg} /* les tuiles de l'ouverture dérivent sous le curseur (v3.js, « translate ») */ .decor .tuile{transition:translate .7s cubic-bezier(.16,1,.3,1)} .hero__sur{position:absolute; left:0; right:0; top:124px; text-align:center; font-size:15px; line-height:22px; font-weight:500; color:var(--teal)} .hero__titre{position:absolute; left:0; right:0; top:158px; text-align:center; font-size:72px; line-height:78px; font-weight:500; letter-spacing:-.03em; color:var(--encre)} .hero__l1, .hero__l2{display:block; white-space:nowrap} .hero__l1{position:relative} .hero__l2 em{font-weight:600} /* les trois tuiles accrochées à la fin du titre, comme sur la planche */ .hero__tuiles{position:absolute; left:calc(50% + 300px); top:16px; width:140px; height:60px} .hero__tuiles .tuile{position:absolute; width:49px; height:49px; border-radius:14px; transition:rotate .55s cubic-bezier(.16,1,.3,1), scale .5s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1)} .hero__tuiles .tuile:nth-child(1){left:107px; top:0; rotate:-8deg} .hero__tuiles .tuile:nth-child(2){left:142px; top:6px; rotate:4deg; width:46px; height:46px} .hero__tuiles .tuile:nth-child(3){left:180px; top:2px; rotate:-5deg; width:47px; height:47px} .hero__tuiles:hover .tuile{rotate:0deg; scale:1.06; box-shadow:0 13px 30px rgba(12,26,32,.24)} .hero__sous{position:absolute; left:320px; top:324px; width:800px; text-align:center; font-size:16px; line-height:28px; color:var(--corps)} .hero__cta{left:607px; top:414px; width:225px; height:44px; padding:4px 4px 4px 22px; font-size:15px} .hero__cta i{width:36px; height:36px; flex:0 0 36px} .hero__note{position:absolute; left:0; right:0; top:468px; text-align:center; font-size:13px; line-height:19px; color:var(--muet)} /* ── le téléphone ─────────────────────────────────────────────────────── Dessiné à 300 de large (la boîte de l'écran, 1170 × 2532 réduits) et mis à l'échelle par v3.js : « translate(x, y) rotate(r) scale(w / 300) ». La coque (1350 × 2760) déborde de l'écran de 7,7 % de chaque côté et de 4,5 % en haut et en bas : c'est le vrai iPhone de la maquette, pas un dessin. */ /* PAS de « will-change:transform » : Chrome rastérise alors le calque à sa taille CSS (300 px) et le redimensionne ensuite, d'où un téléphone flou, mesuré à moitié moins net. Sans, il le redessine à l'échelle réelle. */ .tel{position:absolute; left:0; top:0; width:300px; height:649px; transform-origin:50% 50%} /* La coque est posée comme dans la planche (le calque « iPhone 18 Pro » fait 1,119 × la largeur de l'écran et 1,053 × sa hauteur) : l'écran passe SOUS le rebord de 7 px, comme sur un vrai téléphone. À 1350/1170 (la taille brute de l'image), le trou de la coque tombait pile sur l'écran et son bord clair se voyait tout autour. */ .tel__coque{position:absolute; left:-14px; top:-14px; width:329px; height:677px; max-width:none; pointer-events:none} /* (10 nov. 2026) l'ouverture de la coque fait 300,4 × 653 px et ses coins ont 50 px de rayon : l'écran déborde de 3-4 px sous le contour noir, sinon un liseré du fond passait entre les deux (« les petits espaces », le PO) */ .tel__ecrans{position:absolute; inset:-4px -3px; border-radius:54px; overflow:hidden; background:#101214; isolation:isolate} .tel__ecran{position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; opacity:0; transition:opacity .45s cubic-bezier(.4,0,.2,1)} .tel__ecran.on{opacity:1} /* un écran qui se croise avec le précédent reste visible sous lui */ .tel__ecran.sous{opacity:1; transition:none} /* les autocollants collés sur le profil : dans l'écran, par-dessus, posés par v3.js (ETIQ) ; la largeur est écrite par le script, l'image porte son ombre */ .tel__etiq{position:absolute; left:0; top:0; height:auto; transform-origin:50% 50%; pointer-events:none} .tel__etiq[hidden]{display:none} /* les deux de côté : un seul écran, pas de pile */ .tel--cote .tel__ecran{opacity:1; left:-3px; top:-4px; width:calc(100% + 6px); height:calc(100% + 8px); border-radius:54px} /* la pile (11 → 14) : le fond de l'app, et les cartes posées dessus, aux cotes de la planche (carte 239 × 396 dans un écran de 262 : 274 × 453 ici, l'image fait 275 × 464 avec son ombre, posée par son centre) */ .tel__pile{inset:0; width:100%; height:100%} .pile__fond{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block} .pile__carte{position:absolute; left:11px; top:76px; width:275px; height:464px; transform-origin:50% 80%} .pile__carte[hidden]{display:none} .pile__carte > img{display:block; width:100%; height:100%} /* le tampon qui se pose sur la carte quand elle bouge, comme dans l'app */ .pile__tampon{position:absolute; top:30px; padding:7px 11px 6px; border:4px solid currentColor; border-radius:10px; font-family:Unbounded, Geist, sans-serif; font-weight:900; font-size:19px; line-height:1; letter-spacing:.05em; text-transform:uppercase; font-style:normal; background:rgba(255,255,255,.92); opacity:0; pointer-events:none} .pile__tampon--oui{left:18px; color:var(--teal); transform-origin:0 0} .pile__tampon--non{right:18px; color:#B23A48; transform-origin:100% 0} .tel--cote{width:300px; height:649px} /* l'ombre portée au sol vit sur la coque, pas sur l'écran */ .tel--maitre .tel__coque, .tel--cote .tel__coque{filter:drop-shadow(0 30px 50px rgba(11,20,30,.28))} .tel--maitre.tel--fond .tel__coque{filter:drop-shadow(0 20px 40px rgba(11,20,30,.18))} /* derrière le contenu (15 → 21), le téléphone s'efface à moitié : il habille, il ne concurrence plus le texte (9 nov. 2026, le PO : « quand le tel est derrière, le rendre un peu transparent ») */ /* (10 nov.) l'effacement est posé par v3.js, au fil du trajet : transparence et flou de profondeur, seulement une fois arrivé sous le texte */ /* ── 02 → 04 · le problème ─────────────────────────────────────────────── */ .pb-carte{z-index:2} .pb-carte::before{content:''; position:absolute; left:150px; top:158px; width:420px; height:585px; border-radius:28px; background:#EEF0F2} .pb-ombre{position:absolute; left:275px; top:710px; width:170px; height:18px; border-radius:50%; background:rgba(11,20,30,.18); filter:blur(5px)} /* la tuile exportée porte déjà son ombre : 69 px pour 48 de tuile */ .pb__ico{position:absolute; left:650px; top:185px; width:68px; height:77px} .pb__titre{position:absolute; left:660px; bottom:490px; width:620px; font-size:64px; line-height:70px; font-weight:500; letter-spacing:-.03em; color:var(--encre)} .pb__texte{position:absolute; left:660px; top:424px; width:620px; font-size:24px; line-height:34px; color:var(--corps)} /* 02 → 04 : la tuile et le titre restent en place (leur section court sur les trois arrêts), seul le paragraphe change, en fondu, à la même position ; le téléphone change d'écran avec lui (9 nov. 2026, demande du PO) */ .sec--pb-titre{z-index:5} .pb__ligne{display:block} .pb__bloc{position:absolute; left:660px; top:185px; width:620px} .pb__bloc .pb__ico{position:static; display:block; width:auto; height:72px; margin:0 0 28px -4px; rotate:-6deg} .pb__bloc .pb__titre, .pb__bloc .pb__texte{position:static; width:auto} .pb__bloc .pb__texte{margin-top:22px} html.mobile .pb__bloc{position:static; width:auto} /* (10 nov. 2026) chaque cran porte son titre : le titre et le texte changent ensemble, la tuile reste */ /* ── 05 · t'es pas tout seul ───────────────────────────────────────────── */ /* le téléphone n'est plus au-dessus du titre (il est parti avec la page) : le contenu remonte pour se centrer */ .sec--seul{margin-top:-165px} html.mobile .sec--seul{margin-top:0} .seul__titre{position:absolute; left:0; right:0; top:428px; text-align:center; font-size:56px; line-height:62px; font-weight:500; letter-spacing:-.03em; color:var(--encre)} .seul__chiffres{position:absolute; left:120px; top:536px; width:1200px; display:grid; grid-template-columns:repeat(4, 285px); gap:20px} .chiffre{height:184px; padding:26px; border-radius:26px; background:#fff; box-shadow:0 20px 32px -24px rgba(11,20,30,.18)} .chiffre b{display:block; font-size:22px; line-height:22px; font-weight:500; color:var(--teal)} .chiffre p{margin-top:14px; font-size:15px; line-height:21px; color:#616970} .seul__source{position:absolute; left:0; right:0; top:736px; text-align:center; font-size:13px; line-height:18px; color:var(--muet)} .seul__fin{position:absolute; left:220px; top:785px; width:1000px; text-align:center; font-size:24px; line-height:34px; font-weight:500; color:var(--encre)} /* ── 06 → 13 · la solution ─────────────────────────────────────────────── */ .sol__titre{position:absolute; left:0; right:0; top:100px; text-align:center; font-size:52px; line-height:60px; font-weight:500; letter-spacing:-.03em; color:var(--encre)} .sol__sous{position:absolute; left:220px; top:172px; width:1000px; text-align:center; font-size:19px; line-height:28px; color:var(--corps)} /* les cartes projet : 160 × 167 dans la planche, v3.js les pose par leur centre */ .carte{position:absolute; left:0; top:0; width:160px; height:167px; transform-origin:50% 50%} /* L'OMBRE EST UN box-shadow, PAS UN filter:drop-shadow : dans la scène mise à l'échelle (transform), Chrome rastérise un calque filtré à sa taille CSS puis l'agrandit. Mesuré à 2560 px en DPR 2 : la carte filtrée était moitié moins nette que la même image à plat (532 contre 936) ; avec box-shadow, identique. */ .carte > img:first-child{display:block; width:160px; height:167px; border-radius:16px; box-shadow:0 14px 28px rgba(11,20,30,.22); transition:box-shadow .4s ease} .carte__marque{position:absolute; left:119px; top:-42px; width:69px; height:82px; opacity:0; scale:.4; transition:opacity .35s ease, scale .6s cubic-bezier(.34,1.45,.64,1)} .carte.marque .carte__marque{opacity:1; scale:1} /* refusée (croix rouge) : la carte grisaille en même temps que la croix se pose (9 nov. 2026, le PO : « tu le grisailles aussi, le projet qui est refusé ») */ .carte > img:first-child{transition:box-shadow .4s ease, filter .5s ease, opacity .5s ease} .carte.refusee > img:first-child{filter:grayscale(1); opacity:.55} html.mobile .mtel--cartes:has(.mpastille) .mcarte--1, html.mobile .mtel--cartes:has(.mpastille) .mcarte--4{filter:grayscale(1); opacity:.55} /* au survol, la carte se soulève et son autocollant se redresse un rien */ .carte:hover > img:first-child{box-shadow:0 24px 40px rgba(11,20,30,.3)} /* les pastilles ← Pas pour moi / Postuler → (11 → 14) : les images portent leur ombre, posées par le centre de la planche (451, 582) et (972, 582) ; celle du côté où la carte part s'allume (.vive, v3.js) */ .pastille{position:absolute; transition:transform .5s cubic-bezier(.16,1,.3,1), filter .5s ease} /* ce sont des boutons : l'image porte le dessin, le bouton porte le clic */ button.pastille{padding:0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent} button.pastille img{display:block; width:100%; height:100%} button.pastille:focus-visible{outline:2px solid var(--encre); outline-offset:4px; border-radius:999px} .pastille--g{left:363px; top:491px; width:176px; height:82px} .pastille--d{left:897px; top:488px; width:150px; height:90px} .pastille:hover{transform:translateY(-2px)} .pastille.vive{transform:translateY(-4px) scale(1.12)} /* 14 · la différence */ .diff__texte{position:absolute; left:170px; top:147px; width:1100px; text-align:center; font-size:30px; line-height:40px; font-weight:500; letter-spacing:-.015em; color:var(--encre)} /* ── 15 · qui est derrière ─────────────────────────────────────────────── */ .qui__photo{position:absolute; left:130px; top:170px; width:440px; height:560px; border-radius:28px; overflow:hidden; background:#E6E9EB; box-shadow:0 30px 60px -30px rgba(11,20,30,.3)} .qui__photo img{width:100%; height:100%; object-fit:cover; display:block} /* le texte est centré en hauteur sur la photo (170 → 730, milieu 450) */ .qui__texte{position:absolute; left:650px; top:450px; width:640px; translate:0 -50%} html.mobile .qui__texte{translate:none} .qui__titre{font-size:46px; line-height:54px; font-weight:500; letter-spacing:-.03em; color:var(--encre)} .qui__texte p{margin-top:16px; width:620px; font-size:18px; line-height:28px; color:var(--corps)} .qui__texte .qui__intro{margin-top:30px; font-weight:600; color:var(--encre)} /* ── 16 · ce que tu gagnes ─────────────────────────────────────────────── */ .gagne__titre{position:absolute; left:0; right:0; top:88px; text-align:center; font-size:50px; line-height:56px; font-weight:500; letter-spacing:-.03em; color:var(--encre)} .gagne__grille{position:absolute; left:130px; top:190px; width:1180px; height:620px} .gcarte{position:absolute; border-radius:28px; background:#fff; overflow:hidden; box-shadow:0 30px 40px -30px rgba(11,20,30,.22); transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1)} .gcarte:hover{transform:translateY(-6px); box-shadow:0 30px 60px -30px rgba(17,17,16,.25)} .gcarte h3{position:absolute; left:32px; top:32px; font-family:Unbounded, Geist, sans-serif; font-weight:900; font-size:26px; line-height:32px; color:#0A0A0D} .gcarte p{position:absolute; left:32px; top:82px; width:270px; font-size:17px; line-height:26px; color:#616970} .gcarte--teal{background:linear-gradient(160deg, #09A9AA 0%, #00768F 55%, #055F6D 100%)} .gcarte--teal h3, .gcarte--teal p{color:#fff} .gcarte--soirees{left:0; top:0; width:580px; height:300px} .gcarte--chances{left:600px; top:0; width:580px; height:300px} .gcarte--vitesse{left:0; top:320px; width:380px; height:300px} .gcarte--tete{left:400px; top:320px; width:380px; height:300px} .gcarte--agente{left:800px; top:320px; width:380px; height:300px} .gcarte--vitesse p, .gcarte--tete p, .gcarte--agente p{width:316px} .gcarte__projet{position:absolute; width:184px; height:192px; border-radius:18px; box-shadow:0 16px 30px rgba(11,20,30,.25); transition:transform .7s cubic-bezier(.16,1,.3,1)} .gcarte__projet--a{left:330px; top:28px; rotate:12deg} .gcarte__projet--b{left:388px; top:148px; rotate:-6deg} .gcarte__projet--c{left:310px; top:60px; width:168px; height:176px; rotate:8deg; opacity:.5} .gcarte__projet--d{left:422px; top:140px; width:168px; height:176px; rotate:-8deg} .gcarte__projet--e{left:150px; top:175px; width:160px; height:167px; rotate:-6deg} .gcarte__projet--f{left:230px; top:190px; width:160px; height:167px; rotate:5deg} .gcarte__marque{position:absolute; width:67px; height:79px} .gcarte__marque--c{left:442px; top:21px} .gcarte__marque--d{left:504px; top:99px} .gcarte:hover .gcarte__projet--a{transform:translate(-6px,-10px)} .gcarte:hover .gcarte__projet--b{transform:translate(8px,-6px)} .gcarte:hover .gcarte__projet--d, .gcarte:hover .gcarte__projet--f{transform:translateY(-8px)} .gcarte__sticker{position:absolute} .gcarte__sticker--a{left:31px; top:182px; width:163px; height:68px; rotate:-4deg} .gcarte__sticker--b{left:165px; top:225px; width:203px; height:66px; rotate:3deg} .gcarte__ligne{position:absolute; left:40px; top:236px; width:300px; height:22px} .gcarte__ligne::before{content:''; position:absolute; left:0; right:0; top:10px; height:3px; background:#E0E5E8} .gcarte__ligne i{position:absolute; top:0; width:22px; height:22px; border-radius:50%; background:#D9DEE3} .gcarte__ligne i:nth-child(1){left:-7px; top:-7px; width:36px; height:36px; background:var(--teal); box-shadow:0 0 0 6px rgba(0,118,146,.16)} .gcarte__ligne i:nth-child(2){left:110px} .gcarte__ligne i:nth-child(3){left:200px} .gcarte__ligne i:nth-child(4){left:290px} /* l'autocollant qui pivote au survol (refonte, § animations) */ .rf-sticker{transition:transform .6s cubic-bezier(.34,1.45,.64,1)} /* (12 nov. 2026) une règle de survol tronquée ici s'accrochait à la règle suivante et envoyait les autocollants en haut à gauche de leur carte : retirée */ /* ── 17 · la preuve ────────────────────────────────────────────────────── */ .preuve__sur{position:absolute; left:0; right:0; top:162px; text-align:center; font-size:20px; line-height:28px; font-weight:500; color:var(--encre)} .preuve__qui{position:absolute; left:0; right:0; top:222px; display:flex; justify-content:center; align-items:center; gap:12px; font-size:15px; color:var(--encre)} .avatar{display:inline-flex; width:44px; height:44px; border-radius:50%; align-items:center; justify-content:center; color:#fff; font-size:14px; font-weight:500; background:linear-gradient(160deg, #3D8FA8, #0F546E); flex:none} .preuve__vedette{position:absolute; left:180px; top:281px; width:1080px; text-align:center; font-size:46px; line-height:54px; font-weight:500; letter-spacing:-.025em; color:var(--encre)} .preuve__deux{position:absolute; left:130px; top:410px; width:1180px; display:flex; gap:24px} .temoin{flex:1 1 0; min-width:0; height:262px; padding:30px 32px; border-radius:28px; background:#fff; box-shadow:0 24px 40px -30px rgba(11,20,30,.22); position:relative} .temoin blockquote{font-size:16px; line-height:24px; color:#545C63} .temoin figcaption{position:absolute; left:32px; bottom:30px; display:flex; align-items:center; gap:12px} .temoin figcaption b{display:block; font-size:15px; font-weight:500; color:var(--encre)} .temoin figcaption em{display:block; font-style:normal; font-size:13px; line-height:18px; color:var(--muet)} .preuve__franchise{position:absolute; left:220px; top:700px; width:1000px; text-align:center; font-size:16px; line-height:23px; color:var(--muet)} .preuve__franchise b{font-weight:500; color:var(--encre)} /* ── 18 · combien ça coûte ─────────────────────────────────────────────── */ .prix__titre{position:absolute; left:0; right:0; top:198px; text-align:center; font-size:64px; line-height:70px; font-weight:500; letter-spacing:-.03em; color:var(--encre)} .prix__cartes{position:absolute; left:148px; top:307px; width:1144px; display:flex; gap:24px} .pcarte{position:relative; width:560px; height:360px; border-radius:28px; background:#fff; box-shadow:0 30px 40px -30px rgba(11,20,30,.22)} .pcarte__barre{position:absolute; left:40px; top:44px; font-family:Unbounded, Geist, sans-serif; font-weight:900; font-size:40px; line-height:50px; color:#BFC4C9; text-decoration:line-through; text-decoration-thickness:8px} .pcarte__zero{position:absolute; left:40px; top:104px; font-family:Unbounded, Geist, sans-serif; font-weight:900; font-size:96px; line-height:119px; color:var(--teal)} .pcarte__texte{position:absolute; left:40px; top:252px; width:480px; font-size:18px; line-height:27px; color:#616970} .pcarte--jour{background:linear-gradient(160deg, #09A9AA 0%, #00768F 55%, #055F6D 100%)} .pcarte--jour .pcarte__texte{top:226px; color:#fff} .pcarte--jour .pcarte__texte b{font-weight:600} .pcarte__jours{position:absolute; left:40px; top:44px; width:350px; display:grid; grid-template-columns:repeat(7, 38px); gap:12px} .pcarte__jours i{width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.95)} .pcarte__jours i.pale{background:rgba(255,255,255,.45)} .pcarte__clap{position:absolute; left:430px; top:48px; width:57px; height:67px} .prix__cta{left:720px; top:726px; translate:-50% 0} html.mobile .prix__cta{left:auto; translate:none} /* ── 19 · pourquoi une file ────────────────────────────────────────────── */ /* ── 20 · la garantie ──────────────────────────────────────────────────── */ .garantie__titre{position:absolute; left:132px; top:100px; width:1176px; text-align:center; font-family:Unbounded, Geist, sans-serif; font-weight:900; font-size:60px; line-height:66px; letter-spacing:-.01em; color:#0A0A0D} .garantie__stickers{position:absolute; left:200px; top:455px; width:1040px; display:flex; justify-content:space-between; align-items:center} .garantie__stickers img{height:112px; width:auto} .garantie__stickers img:nth-child(1){rotate:-6deg} .garantie__stickers img:nth-child(2){rotate:4deg} .garantie__stickers img:nth-child(3){rotate:-3deg} .garantie__petit{position:absolute; left:270px; top:690px; width:900px; text-align:center; font-size:16px; line-height:22px; color:var(--muet)} /* ── 21 · ta place ─────────────────────────────────────────────────────── */ .place__titre{position:absolute; left:0; right:0; top:100px; text-align:center; font-size:47px; line-height:54px; font-weight:500; letter-spacing:-.03em; color:var(--encre)} .place__carte{position:absolute; left:308px; top:300px; width:500px; height:261px; padding:34px; border-radius:34px; color:#fff; background:linear-gradient(135deg, #0F8CA8 0%, #085470 100%); box-shadow:0 44px 60px -36px rgba(8,84,112,.55)} .place__carte h3{font-family:Unbounded, Geist, sans-serif; font-weight:900; font-size:32px; line-height:35px} .place__carte ol{list-style:none; margin-top:20px; padding:0} .place__carte li{display:flex; align-items:center; gap:14px; height:32px; margin-top:18px; font-size:16px; font-weight:500} .place__carte li:first-child{margin-top:0} .place__carte li i{display:inline-flex; width:32px; height:32px; border-radius:50%; background:#fff; color:var(--teal); align-items:center; justify-content:center; font-style:normal; font-size:13px; font-weight:500; flex:none} .place__clap{position:absolute; left:413px; top:-38px; width:113px; height:133px} .place__cal{position:absolute; left:-34px; top:220px; width:73px; height:79px} .place__cta{left:563px; top:720px} .place__gratuit{position:absolute; left:0; right:0; top:800px; text-align:center; font-size:16px; line-height:23px; color:var(--muet)} .place__amb{position:absolute; left:0; right:0; top:842px; text-align:center; font-size:16px; line-height:23px; color:var(--muet)} /* CFT-2008 : la notification d'un envoi flotte au-dessus de la scène, se ferme et s'en va toute seule. Une ligne posée sous le bouton restait DERRIÈRE lui, parce que les boutons de la page sont posés en absolu. */ .talent-toast{position:fixed; left:50%; bottom:28px; z-index:90; transform:translateX(-50%); display:flex; align-items:center; gap:10px; max-width:min(560px,calc(100vw - 32px)); padding:12px 12px 12px 18px; border-radius:14px; background:#fff; color:var(--encre); box-shadow:0 14px 40px rgba(2,52,66,.22); font-size:15px; line-height:20px} .talent-toast__txt{margin:0} .talent-toast__x{flex:none; width:32px; height:32px; border:0; border-radius:50%; background:transparent; color:var(--muet); font:inherit; font-size:20px; line-height:1; cursor:pointer} .talent-toast__x:hover{background:var(--gris); color:var(--encre)} .talent-toast--mal .talent-toast__txt{color:#A8452F} .talent-cache{display:none!important} .lien{font:inherit; color:var(--teal); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px} .lien:hover{color:var(--encre)} /* ── 22 → 29 · la FAQ ──────────────────────────────────────────────────── */ .faq__titre{position:absolute; left:135px; top:255px; font-size:66px; line-height:72px; font-weight:500; letter-spacing:-.03em; color:var(--encre)} .faq__filet{position:absolute; left:135px; top:414px; width:225px; height:1px; background:#DADFE2} .faq__barre{position:absolute; left:135px; top:428px; display:flex; align-items:center; gap:8px} .faq__fl{width:30px; height:30px; border-radius:50%; border:1px solid #DADFE2; background:#fff; font:inherit; font-size:18px; line-height:1; color:var(--encre); cursor:pointer; transition:background-color .25s ease, border-color .25s ease} .faq__fl:hover{border-color:var(--teal); color:var(--teal)} .faq__segs{display:flex; gap:6px; margin:0 8px} .faq__segs i{display:block; width:26px; height:4px; border-radius:2px; background:#DADFE2; position:relative; overflow:hidden} .faq__segs i.vu{background:#B9C2C8} .faq__segs i.on::after{content:''; position:absolute; inset:0; background:var(--teal)} .faq__ouverte{position:absolute; left:135px; top:514px; width:560px} .faq__num{font-size:12px; line-height:16px; color:var(--muet); letter-spacing:.08em} .faq__ouverte h3{margin-top:8px; font-size:32px; line-height:38px; font-weight:500; letter-spacing:-.025em; color:var(--encre)} .faq__rep{margin-top:14px; width:450px; font-size:14px; line-height:22px; color:var(--corps)} /* numéro, question, réponse montent l'un après l'autre à chaque question */ .faq__ouverte > *{transition:opacity .5s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1)} .faq__ouverte.mue > *{opacity:0; transform:translateY(12px); transition:none} .faq__ouverte h3{transition-delay:.05s} .faq__rep{transition-delay:.1s} /* la liste écrite dans la page pour les robots : v3.js la lit, l'écran du téléphone la rejoue ; elle n'est pas affichée telle quelle */ .faq__liste{display:none} /* l'écran « Questions » du téléphone, façon app (écran FAQ · app, 304 × 661 dans la planche, ici dessiné à 300 de large) */ .tel__faq{background:#F4F6F7; padding:0; font-family:Geist, sans-serif; color:#0F1214} .tel__faq .heure{position:absolute; left:28px; top:14px; font-size:12px; font-weight:500} .tel__faq h4{position:absolute; left:14px; top:48px; margin:0; font-family:Unbounded, Geist, sans-serif; font-weight:900; font-size:27px; line-height:30px} .tel__faq ol{position:absolute; left:14px; top:98px; width:273px; margin:0; padding:0; list-style:none} .tel__faq li{position:relative; margin-top:7px; padding:11px 13px 11px 13px; border-radius:17px; background:#fff; box-shadow:0 3px 9px rgba(0,0,0,.05); transition:background-color .5s cubic-bezier(.22,1,.36,1), color .5s ease, box-shadow .5s ease} .tel__faq li:first-child{margin-top:0} .tel__faq li > span{display:flex; align-items:center; gap:9px} .tel__faq li b{display:inline-flex; width:23px; height:23px; border-radius:50%; flex:none; align-items:center; justify-content:center; font-size:9px; font-weight:500; color:var(--teal); background:rgba(0,118,146,.10); transition:background-color .5s ease, color .5s ease} .tel__faq li p{margin:0; flex:1; font-size:12px; line-height:16px; font-weight:500} .tel__faq li svg{flex:none; width:10px; height:5px; transition:transform .5s cubic-bezier(.22,1,.36,1)} .tel__faq li i{display:block; margin:0 0 0 32px; font-style:normal; font-size:11px; line-height:15px; color:#fff; max-height:0; overflow:hidden; opacity:0; transition:max-height .6s cubic-bezier(.22,1,.36,1), opacity .4s ease, margin .5s ease} .tel__faq li.on{background:linear-gradient(160deg, #3D8FA8, #1A5C78); color:#fff; box-shadow:0 8px 18px rgba(0,0,0,.14)} .tel__faq li.on b{background:#fff} .tel__faq li.on svg{transform:rotate(180deg)} .tel__faq li.on i{max-height:120px; opacity:1; margin-top:8px} .tel__faq li.on svg path{stroke:#fff} /* ── 30 · P.S. et le pied ──────────────────────────────────────────────── */ .ps__titre{position:absolute; left:337px; top:108px; width:766px; text-align:center; font-size:35px; line-height:42px; font-weight:500; letter-spacing:-.025em; color:var(--encre)} .ps__cta{left:607px; top:206px; height:48px; padding:6px 6px 6px 24px; font-size:15px} .ps__pps{position:absolute; left:434px; top:270px; width:556px; text-align:center; font-size:15px; line-height:22px; color:var(--muet)} .pied__carte{position:absolute; left:75px; top:378px; width:1290px; min-height:317px; border-radius:26px; background:#fff; border:1px solid var(--filet); padding:44px 48px 30px} .pied__haut{display:flex; gap:80px; align-items:flex-start} .pied__marque{width:520px} .pied__logo{display:block; margin-bottom:18px} .pied__logo img{display:block; height:30px; width:auto} .pied__droits{margin:0; font-size:12px; line-height:20px; color:var(--corps)} .pied__cols{flex:1; display:flex; gap:44px; justify-content:flex-end} .pied__cols div{display:flex; flex-direction:column; gap:9px; min-width:150px} .pied__cols b{font-size:11px; font-weight:500; letter-spacing:.02em; color:var(--muet); margin-bottom:4px} .pied__cols a{font-size:12px; line-height:18px; color:var(--encre); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(10,10,10,.25); width:fit-content} .pied__cols a:hover{color:var(--teal)} .pied__soon{font-size:12px; line-height:18px; color:var(--muet)} .pied__soon i{display:inline-block; margin-left:6px; font-style:normal; font-size:9px; letter-spacing:.06em; padding:3px 6px; border-radius:999px; background:#EDF0F2; color:#6B747C} .pied__guides{margin-top:30px; padding-top:24px; border-top:1px solid var(--filet)} .pied__guides b{display:block; font-size:11px; font-weight:500; color:var(--muet); margin-bottom:10px} .pied__guides div{display:flex; gap:28px; flex-wrap:wrap} .pied__guides a{font-size:12px; color:var(--encre); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(10,10,10,.25)} .pied__guides a:hover{color:var(--teal)} .pied__bas{display:flex; justify-content:space-between; margin-top:22px; padding-top:18px; border-top:1px solid var(--filet)} .pied__sociaux{display:flex; gap:24px} .pied__sociaux a{font-size:12px; color:var(--corps); text-decoration:none} .pied__sociaux a:hover{color:var(--teal)} .sec--pied .pied__carte{z-index:5} /* ── la boîte : la case à cocher et le bouton, en plus de v2 ───────────── */ .boite__coche{display:flex; gap:12px; align-items:flex-start; margin-top:18px; font-size:13px; line-height:19px; color:var(--corps); cursor:pointer} .boite__coche input{flex:0 0 auto; width:18px; height:18px; margin:1px 0 0; accent-color:var(--teal)} .boite__envoi{position:relative; justify-content:space-between} .boite__envoi .bouton__sur{clip-path:circle(0px at calc(100% - 25px) 50%)} .boite__renvoi{display:block; margin-top:16px} .boite__app{position:relative; margin-top:20px} .boite__resultat .boite__etat{min-height:0} /* ── quand on a demandé moins d'animations ─────────────────────────────── */ @media (prefers-reduced-motion: reduce){ [data-cascade] > *{opacity:1; transform:none; transition:none} .tel__ecran, .carte__marque, .faq__ouverte > *, .tel__faq li, .tel__faq li i{transition:none} } /* ═══════════════════════════════════════════════════════════════════════════ SUR TÉLÉPHONE (html.mobile, sous 1024 px ou une tablette tenue droite) : la même page, lue de haut en bas. Plus de scène ni de rail ; chaque bloc devient une section de page, et montre son propre téléphone (.mtel), avec les cotes de la planche mobile (Figma 378:2, 390 de large). ═══════════════════════════════════════════════════════════════════════════ */ html.mobile .track{height:auto} html.mobile .scene{position:static; height:auto; overflow:visible} html.mobile .stage{position:static; width:auto; height:auto; transform:none; padding-top:86px} html.mobile .sec, html.mobile .decor, html.mobile .pb-carte, html.mobile .cartes, html.mobile .pastilles, html.mobile .tel{position:static; width:auto; height:auto; pointer-events:auto; transform:none} html.mobile .decor, html.mobile .pb-carte, html.mobile .cartes, html.mobile .pastilles, html.mobile .tel{display:none !important} html.mobile .sec{display:block; padding:56px 24px; opacity:1 !important; transform:none !important; visibility:visible !important} html.mobile .sec[hidden]{display:block} html.mobile .sec > *{position:static; width:auto; left:auto; top:auto; right:auto; text-align:center} html.mobile .sec h2, html.mobile .sec .hero__titre{font-size:34px; line-height:38px} html.mobile .sec p{font-size:17px; line-height:25px} html.mobile .bouton{position:relative; display:inline-flex; margin:28px auto 0; width:auto; height:52px; padding:8px 8px 8px 26px; font-size:16px} html.mobile .mtel{display:block; position:relative; margin:32px auto 0; width:342px; max-width:100%} html.mobile .mtel__tel{position:relative; display:block; width:230px; height:498px; margin:0 auto} html.mobile .mtel__coque{position:absolute; left:-4.85%; top:-2.15%; width:109.7%; height:104.3%; max-width:none; filter:drop-shadow(0 24px 40px rgba(11,20,30,.26))} html.mobile .mtel__ecran{position:absolute; left:-2px; top:-3px; width:calc(100% + 4px); height:calc(100% + 6px); object-fit:cover; border-radius:41px; background:#101214} /* 01 */ html.mobile .sec--hero{padding-top:24px; padding-bottom:0; overflow:hidden} html.mobile .hero__sur{font-size:13px; line-height:19px} html.mobile .hero__titre{margin-top:10px; font-size:40px; line-height:43px} html.mobile .hero__l1, html.mobile .hero__l2{white-space:normal} html.mobile .hero__tuiles{display:none} html.mobile .hero__sous{margin-top:14px} html.mobile .hero__sous br{display:none} html.mobile .hero__note{margin-top:18px; font-size:13px} html.mobile .mtel--hero{height:300px; width:390px; margin-left:-24px} html.mobile .mtel--hero .mtel__tel{position:absolute; width:120px; height:260px} html.mobile .mtel--hero .mtel__tel .mtel__ecran{border-radius:22px} html.mobile .mtel--hero .mtel__tel--c{left:135px; top:10px; z-index:2} html.mobile .mtel--hero .mtel__tel--g{left:12px; top:44px; rotate:-10deg} html.mobile .mtel--hero .mtel__tel--d{left:258px; top:44px; rotate:10deg} /* 02 → 04 */ html.mobile .sec--pb > *{text-align:left} html.mobile .pb__ico{display:block; margin-bottom:16px} html.mobile .sec--pb .pb__titre{display:block; height:auto} html.mobile .pb__texte{margin-top:14px} html.mobile .sec--pb .mtel{padding:24px; border-radius:24px; background:#EEF0F2} /* sur téléphone les trois textes se suivent : le titre une fois, en haut */ html.mobile .sec--pb-titre{display:none} html.mobile .pb__titre--mobile{display:block} html.mobile .sec--pb + .sec--pb{padding-top:0} /* 05 */ html.mobile .sec--seul{padding-top:0} html.mobile .mtel--haut{margin-top:0; height:260px; overflow:hidden} html.mobile .mtel--haut .mtel__tel{margin-top:-40px} html.mobile .seul__titre{margin-top:28px} html.mobile .seul__chiffres{display:grid; grid-template-columns:1fr; gap:12px; margin-top:24px} html.mobile .chiffre{height:auto; text-align:left} html.mobile .chiffre p{font-size:15px; line-height:21px} html.mobile .seul__source{margin-top:20px; font-size:13px; line-height:18px} html.mobile .seul__fin{margin-top:18px} /* 06 → 14 */ html.mobile .sol__sous{margin-top:12px} html.mobile .mtel--cartes{height:520px; overflow:visible} html.mobile .mcarte{position:absolute; width:110px; filter:drop-shadow(0 10px 20px rgba(11,20,30,.22))} html.mobile .mcarte--1{left:-6px; top:60px; rotate:-7deg} html.mobile .mcarte--2{right:-6px; top:30px; rotate:6deg} html.mobile .mcarte--3{left:4px; top:340px; rotate:5deg} html.mobile .mcarte--4{right:0; top:360px; rotate:-9deg} html.mobile .mpastille{position:absolute; width:33px} html.mobile .mpastille--1{left:88px; top:40px} html.mobile .mpastille--2{right:-10px; top:10px} html.mobile .mpastille--3{left:98px; top:320px} html.mobile .mpastille--4{right:-8px; top:340px} html.mobile .mpast{display:flex; justify-content:center; gap:14px; margin-top:24px} html.mobile .mpast img{height:55px; width:auto} html.mobile .diff__texte{font-size:22px; line-height:30px} /* 15 */ html.mobile .qui__photo{width:100%; height:342px; margin:0 0 28px} html.mobile .qui__texte > *{text-align:left} html.mobile .qui__texte p{width:auto} html.mobile .qui__titre{text-align:left} html.mobile .mtel--fond{display:none} /* 16 */ html.mobile .gagne__grille{display:flex; flex-direction:column; gap:14px; margin-top:28px; height:auto} html.mobile .gcarte{position:relative; left:auto; top:auto; width:100%; height:auto; min-height:300px; padding:32px 32px 160px; text-align:left} html.mobile .gcarte h3, html.mobile .gcarte p{position:static; width:auto} html.mobile .gcarte p{margin-top:12px} html.mobile .gcarte--teal, html.mobile .gcarte--chances{padding-bottom:230px} html.mobile .gcarte__projet--a{left:auto; right:60px; top:150px} html.mobile .gcarte__projet--b{left:auto; right:-10px; top:240px} html.mobile .gcarte__projet--c{left:40px; top:190px} html.mobile .gcarte__projet--d{left:auto; right:0; top:230px} html.mobile .gcarte__marque--c{left:182px; top:174px} html.mobile .gcarte__marque--d{left:auto; right:92px; top:212px} html.mobile .gcarte__projet--e{left:110px; top:auto; bottom:-40px} html.mobile .gcarte__projet--f{left:auto; right:0; top:auto; bottom:-40px} html.mobile .gcarte__ligne{top:auto; bottom:48px; left:32px; width:calc(100% - 64px)} html.mobile .gcarte__sticker--a{top:auto; bottom:70px; left:32px} html.mobile .gcarte__sticker--b{top:auto; bottom:30px; left:140px} /* 17 */ html.mobile .preuve__vedette{margin-top:16px; font-size:24px; line-height:32px} html.mobile .preuve__qui{margin-top:14px} html.mobile .preuve__deux{flex-direction:column; gap:14px; margin-top:24px} html.mobile .temoin{width:100%; height:auto; padding-bottom:90px; text-align:left} html.mobile .preuve__franchise{margin-top:22px; font-size:13px; line-height:19px} /* 18 */ html.mobile .prix__cartes{flex-direction:column; gap:14px; margin-top:24px} html.mobile .pcarte{width:100%; height:auto; padding:40px 28px 32px; text-align:left} html.mobile .pcarte__barre, html.mobile .pcarte__zero, html.mobile .pcarte__texte{position:static; width:auto} html.mobile .pcarte__zero{font-size:72px; line-height:84px} html.mobile .pcarte__texte{margin-top:16px} html.mobile .pcarte__jours{position:static; display:grid; grid-template-columns:repeat(7, 34px); gap:8px; width:auto} html.mobile .pcarte__jours i{width:34px; height:34px} html.mobile .pcarte__clap{left:auto; right:28px; top:36px} /* 19 */ /* 20 */ html.mobile .garantie__titre{width:auto; font-size:30px; line-height:36px; text-align:left} html.mobile .garantie__stickers{display:flex; flex-wrap:wrap; justify-content:flex-start; gap:10px; margin-top:28px; width:auto} html.mobile .garantie__stickers img{height:58px} html.mobile .garantie__petit{margin-top:28px; font-size:13px; line-height:19px; text-align:left} /* 21 */ html.mobile .place__carte{width:100%; height:auto; margin-top:36px; text-align:left} html.mobile .place__carte h3{font-size:24px} html.mobile .place__clap{left:auto; right:-10px; top:-48px; width:90px; height:106px} html.mobile .place__cal{left:-14px; top:auto; bottom:-30px} html.mobile .mtel--place{margin-top:30px} html.mobile .place__gratuit{margin-top:14px; font-size:13px} html.mobile .place__amb{margin-top:16px; font-size:13px} /* FAQ */ html.mobile .faq__titre{text-align:left} html.mobile .faq__filet{display:block; margin:16px 0 14px} html.mobile .faq__barre{display:flex; justify-content:flex-start} html.mobile .faq__ouverte{margin-top:24px; width:auto} html.mobile .faq__ouverte > *{text-align:left} html.mobile .faq__rep{width:auto} html.mobile .mtel--faq .mtel__ecran--faq{display:block; overflow:hidden; position:absolute; inset:0} html.mobile .mtel--faq .tel__faq{position:absolute; left:0; top:0; width:300px; height:649px; transform:scale(.7667); transform-origin:0 0} /* 30 */ html.mobile .sec--pied{padding-bottom:24px} html.mobile .ps__titre{font-size:26px; line-height:32px} html.mobile .ps__pps{margin-top:24px} html.mobile .mtel--pied{display:none} html.mobile .pied__carte{width:auto; margin-top:40px; padding:28px 20px 20px; text-align:left} html.mobile .pied__haut{flex-direction:column; gap:28px} html.mobile .pied__marque{width:auto} html.mobile .pied__cols{justify-content:flex-start; flex-wrap:wrap; gap:20px} html.mobile .pied__cols div{min-width:140px} html.mobile .pied__bas{flex-direction:column; gap:12px} /* ── LA SUITE : une vraie page (10 nov. 2026) ──────────────────────────── Après la dernière slide (« la différence »), la scène s'en va avec le défilement et les sections se suivent de haut en bas. Chacune garde son dessin de planche (1440 de large, enfants en absolu) ; « --h » est sa hauteur utile, « --mt » rogne le blanc du haut. Le tout suit l'échelle de la scène par « zoom », qui garde la mise en page en flux et le texte net. */ html:not(.mobile) .suite{position:relative; overflow:hidden} html:not(.mobile) .suite__planche{width:1440px; margin:0 auto; zoom:var(--ech, 1)} /* (10 nov. 2026, le PO : « un scroll normal, pas un PowerPoint ») : rien n'apparaît ni ne s'efface, tout est déjà là ; la section monte et sort par le haut, la suivante arrive par le bas, c'est le défilement qui fait tout */ html:not(.mobile) .suite .sec{position:relative; height:var(--h, 900px); margin-top:var(--mt, 0px)} html:not(.mobile) .suite [data-cascade] > *{opacity:1; transform:none; transition:none} .suite .sec--qui{--mt:-40px; --h:810px} .suite .sec--gagne{--h:880px} .suite .sec--preuve{--mt:-60px; --h:830px} .suite .sec--prix{--mt:-90px; --h:860px} .suite .sec--file{--h:800px} .suite .sec--garantie{--h:850px} .suite .sec--place{--h:950px} .suite .sec--faq{--mt:-40px; --h:880px} .suite .sec--pied{--h:1190px} /* le téléphone de « Ta place » et celui de la FAQ : posés dans leur section */ html:not(.mobile) .suite .mtel--place, html:not(.mobile) .suite .mtel--faq, html:not(.mobile) .suite .mtel--pied{display:block; position:absolute; margin:0} /* le pied : la carte descend, et le téléphone, net et penché, se cache à moitié derrière elle (10 nov. 2026, le PO : « comme sur la version précédente ») */ html:not(.mobile) .suite .mtel--pied{left:615px; top:380px; width:209px; height:452px; rotate:-8deg; z-index:1} html:not(.mobile) .suite .pied__carte{top:660px} html:not(.mobile) .suite .mtel--place{left:909px; top:221px; width:209px; height:452px} html:not(.mobile) .suite .mtel--faq{left:934px; top:121px; width:304px; height:658px} html:not(.mobile) .suite .mtel__tel{position:absolute; inset:0; display:block} html:not(.mobile) .suite .mtel__coque{position:absolute; left:-4.85%; top:-2.15%; width:109.7%; height:104.3%; max-width:none; pointer-events:none; z-index:2; filter:drop-shadow(0 24px 40px rgba(11,20,30,.22))} html:not(.mobile) .suite .mtel__ecran{position:absolute; left:-2px; top:-3px; width:calc(100% + 4px); height:calc(100% + 6px); display:block; object-fit:cover; overflow:hidden; border-radius:38px; background:#101214} html:not(.mobile) .suite .mtel--faq .mtel__ecran{border-radius:55px} html:not(.mobile) .suite .mtel--faq .tel__faq{position:absolute; left:0; top:0; width:300px; height:649px; transform:scale(1.0267); transform-origin:0 0} @media (prefers-reduced-motion: reduce){ html:not(.mobile) .suite .sec{opacity:1; translate:0 0; transition:none} } /* ── 19 · pourquoi une file, version sobre (10 nov. 2026, le chef : « quelque chose de minimaliste et classe ») : plus de dessins, deux nombres. Le petit en teal, le gros en gris pâle ; la date de la vague dans une carte blanche. */ .file__titre{position:absolute; left:0; right:0; top:110px; text-align:center; font-size:56px; line-height:64px; font-weight:500; letter-spacing:-.03em; color:var(--encre)} .file__sur{position:absolute; left:0; right:0; top:198px; text-align:center; font-size:20px; line-height:28px; color:var(--muet)} .file__duo{position:absolute; left:220px; top:268px; width:1000px; display:grid; grid-template-columns:1fr 80px 1fr; align-items:center} .file__nb{text-align:center} .file__nb b{display:block; font-size:168px; line-height:160px; font-weight:500; letter-spacing:-.05em} .file__nb span{display:block; margin-top:8px; font-size:20px; line-height:28px} .file__nb--oui b{color:var(--teal)} .file__nb--oui span{color:var(--encre); font-weight:500} .file__nb--non b{color:#D0D6DA} .file__nb--non span{color:var(--muet)} .file__a{justify-self:center; display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin-bottom:36px; border-radius:50%; border:1px solid #DADFE2; font-size:18px; line-height:1; color:var(--muet)} .file__vague{position:absolute; left:270px; top:566px; width:900px; box-sizing:border-box; display:flex; align-items:center; gap:40px; padding:34px 44px; border-radius:28px; background:#fff; box-shadow:0 30px 40px -30px rgba(11,20,30,.22)} .file__date{flex:none; width:96px; padding-right:40px; border-right:1px solid #E6E9EB; text-align:center} .file__date b{display:block; font-size:72px; line-height:70px; font-weight:500; letter-spacing:-.04em; color:var(--teal)} .file__date span{display:block; margin-top:2px; font-size:13px; line-height:18px; letter-spacing:.14em; text-transform:uppercase; color:var(--muet)} .file__vague h3{font-size:30px; line-height:38px; font-weight:500; letter-spacing:-.02em; color:var(--encre)} .file__vague div p{margin-top:8px; font-size:17px; line-height:26px; color:var(--corps)} html.mobile .file__sur{margin-top:10px} html.mobile .file__duo{display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:26px} html.mobile .file__nb b{font-size:96px; line-height:96px} html.mobile .file__nb span{font-size:17px} html.mobile .file__a{margin:6px 0} html.mobile .file__vague{margin-top:34px; padding:22px; gap:18px} html.mobile .file__vague > *, html.mobile .file__vague div > *{text-align:left} html.mobile .file__date{width:56px; padding-right:18px} html.mobile .file__date b, html.mobile .file__date span{text-align:center} html.mobile .file__date b{font-size:44px; line-height:44px} html.mobile .file__vague h3{font-size:22px; line-height:28px} html.mobile .file__vague div p{font-size:15px; line-height:22px} /* ═══ NOUVEAUX VISUELS (12 nov. 2026, maquettes Figma CFT-1811 du 11 nov.) ═══ Le PO : « c'est exactement la même page, j'ai juste changé des visuels ». 02 → 04 : le feed bleu et la publication qui ressort ; 05 : l'écran à l'icône Castflow ; la suite en « verre liquide » : cartes blanches, verre, Geist pour le texte, Unbounded et autocollants à petite dose. */ :root{--pale:#D1D6DA; --verre-fond:linear-gradient(180deg, rgba(255,255,255,.62), rgba(245,247,249,.38)); --verre-bord:rgba(209,217,222,.6); --verre-ombre:0 24px 48px -10px rgba(11,20,30,.14), inset 0 1.5px 2px rgba(255,255,255,.95), inset 0 -1px 10px rgba(255,255,255,.55)} /* ── 02 → 04 · la publication qui ressort du téléphone (cotes de la planche : la carte fait 286 de large sur un visuel de 242, centrée ; 1 px de planche = 300/216 px du téléphone) */ .tel__hors{position:absolute; left:-48.6px; width:397.3px; height:auto; max-width:none; z-index:3; border-radius:25px; box-shadow:0 30px 50px -6px rgba(5,31,46,.32); pointer-events:none; opacity:0; translate:0 14px; transition:opacity .45s cubic-bezier(.4,0,.2,1), translate .6s cubic-bezier(.16,1,.3,1)} .tel__hors.on{opacity:1; translate:0 0} .tel__hors--minuit{top:221.7px} .tel__hors--trop-tard{top:150.9px} .tel__hors--arnaque{top:128.6px} .mtel__hors{display:none} html.mobile .mtel__hors{display:block; position:absolute; left:-15%; width:130%; max-width:none; z-index:3; border-radius:18px; box-shadow:0 24px 40px -6px rgba(5,31,46,.32); top:34%} /* ── la notification en verre (P9 et « Ce que tu gagnes ») */ .notif{position:absolute; display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:center; box-sizing:border-box; padding:14px 18px 14px 14px; border-radius:20px; background:var(--verre-fond); border:1.2px solid var(--verre-bord); box-shadow:var(--verre-ombre); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); font-family:Geist, sans-serif; text-align:left} .notif img{grid-row:1 / 3; width:36px; height:36px; border-radius:9px; display:block} .notif b{font-size:15px; line-height:20px; font-weight:500; color:var(--encre); white-space:nowrap} .notif em{font-style:normal; color:var(--teal)} .notif small{font-size:12.5px; line-height:17px; color:var(--muet); white-space:nowrap} /* ── 16 · ce que tu gagnes (Figma 509:2) */ .gagne__titre{left:130px; right:auto; top:110px; text-align:left; font-family:Geist, sans-serif; font-size:52px; line-height:60px; font-weight:500; letter-spacing:-.03em} .gagne__grille{top:230px} .gcarte, .gcarte--teal{background:#fff; border:1.2px solid var(--verre-bord); box-shadow:var(--verre-ombre)} .gcarte h3, .gcarte--teal h3{font-family:Geist, sans-serif; font-weight:500; font-size:28px; line-height:36px; letter-spacing:-.02em; color:var(--encre)} .gcarte p, .gcarte--teal p{top:78px; color:var(--muet)} .gcarte__notifs{position:absolute; inset:0; pointer-events:none} .gcarte .notif{background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,249,250,.92))} .gcarte--soirees .notif{transform-origin:0 0; width:280px} .gcarte--soirees .notif--a{left:198px; top:146px; transform:scale(1.25)} .gcarte--soirees .notif--b{left:222px; top:172px; width:262px; transform:scale(1.15); opacity:.7} .gcarte__notifs--agente .notif{left:32px; top:200px; width:316px} .gcarte .gcarte__jours{position:absolute; left:32px; top:178px; width:auto; display:flex; gap:36px; margin:0} .gcarte__jours b{font-family:Geist, sans-serif; font-weight:500; font-size:72px; line-height:88px; letter-spacing:-.04em; color:var(--pale)} .gcarte__jours b:first-child{color:var(--teal)} .gcarte__pastilles{position:absolute; left:32px; top:212px; display:flex; gap:10px} .gcarte__pastilles i{font-style:normal; font-family:Geist, sans-serif; font-weight:500; font-size:16px; line-height:20px; color:var(--encre); padding:10px 18px 10px 16px; border-radius:999px; background:var(--verre-fond); border:1.2px solid var(--verre-bord); box-shadow:var(--verre-ombre)} /* ── 18 · combien ça coûte (Figma 512:86) */ .prix__titre{left:148px; right:auto; top:150px; text-align:left; font-family:Geist, sans-serif; font-size:52px; line-height:60px; font-weight:500; letter-spacing:-.03em} .pcarte, .pcarte--jour{background:#fff; border:1.2px solid var(--verre-bord); box-shadow:var(--verre-ombre)} .pcarte__zero, .pcarte--jour .pcarte__zero{left:40px; top:44px; font-family:Geist, sans-serif; font-weight:500; font-size:120px; line-height:120px; letter-spacing:-.04em; color:var(--teal)} .pcarte__barre{left:40px; top:168px; font-family:Geist, sans-serif; font-weight:500; font-size:40px; line-height:48px; letter-spacing:-.04em; color:var(--pale); text-decoration:line-through; text-decoration-thickness:3px} .pcarte__barre--egal{text-decoration:none} .pcarte__texte, .pcarte--jour .pcarte__texte{top:250px; color:var(--muet)} .pcarte--jour .pcarte__texte b{font-weight:600; color:var(--muet)} .bouton--verre{background:var(--verre-fond); color:var(--teal); border:1.2px solid var(--verre-bord); box-shadow:var(--verre-ombre); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px)} .bouton--verre i{background-color:var(--teal); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:16px} .bouton--verre:hover{background:#fff} /* ── 19 · pourquoi une file : P9, la notification du 9 (Figma 481:77) */ .file__titre{left:120px; right:auto; top:150px; width:600px; text-align:left; font-family:Geist, sans-serif; font-size:52px; line-height:60px} .file__nb{position:absolute; left:120px; text-align:left; margin:0} .file__nb b{display:block; font-family:Geist, sans-serif; font-size:120px; line-height:120px; font-weight:500; letter-spacing:-.04em} .file__nb span{display:block; margin:6px 0 0 6px; font-size:20px; line-height:26px} .file__nb--oui{top:340px} .file__nb--non{top:520px} .file__nb--non b{color:var(--pale)} .file__nb--non span{font-weight:400; color:var(--muet)} html:not(.mobile) .suite .sec--file{overflow:hidden} html:not(.mobile) .suite .mtel--file{display:block; position:absolute; margin:0; left:920px; top:116px; width:330px; height:717px; rotate:-10deg} .mtel--file .mtel__ecran{border-radius:56px !important} .notif--file{left:770px; top:270px; width:520px; height:108px; padding:0 24px; column-gap:20px; border-radius:32px; margin:0; z-index:3} .notif--file img{width:48px; height:48px; border-radius:12px} .notif--file b{font-size:20px; line-height:26px} .notif--file small{font-size:16px; line-height:22px; margin-top:4px} .suite .sec--file{--h:800px} /* ── 20 · la garantie (Figma 521:40) */ .garantie__titre{left:148px; top:170px; width:600px; text-align:left; font-family:Unbounded, Geist, sans-serif; font-weight:600; font-size:46px; line-height:56px; letter-spacing:-.02em; color:var(--encre)} .garantie__titre em{font-style:normal; color:var(--teal)} .garantie__promesse{position:absolute; left:148px; top:248px; width:540px; margin:0; font-size:22px; line-height:32px; color:var(--muet)} .garantie__cond{position:absolute; left:148px; top:392px; width:540px; margin:0; font-size:14px; line-height:22px; color:var(--muet)} .garantie__cond b{display:block; margin-bottom:6px; font-weight:500; color:var(--encre)} .garantie__carte{position:absolute; left:812px; top:177px; width:480px; box-sizing:border-box; margin:0; padding:36px 36px 20px; list-style:none; border-radius:28px; background:#fff; border:1.2px solid var(--verre-bord); box-shadow:var(--verre-ombre)} .garantie__carte li{display:grid; grid-template-columns:88px 1fr; grid-template-rows:auto auto; align-content:center; height:116px; border-bottom:1px solid #E8ECEE} .garantie__carte li:first-child{margin-top:-18px} .garantie__carte li:last-child{border-bottom:0} .garantie__carte img{grid-row:1 / 3; align-self:center; height:60px; width:auto} .garantie__carte b{font-family:Unbounded, Geist, sans-serif; font-weight:900; font-size:34px; line-height:42px; color:var(--encre)} .garantie__carte span{font-size:16px; line-height:22px; color:var(--muet); margin-top:4px} .garantie__carte li.teal b{color:var(--teal)} .suite .sec--garantie{--h:680px} /* ── 21 · ta place : le formulaire dans le téléphone (Figma 467:517) */ .place__titre{top:78px} .suite .sec--place{--h:1180px} html:not(.mobile) .suite .mtel--place{left:519px; top:225px; width:402px; height:874px} .mtel--place .mtel__coque{z-index:2; pointer-events:none} .place__ecran{display:flex !important; align-items:center; border-radius:62px !important; background:linear-gradient(160deg, #0E92A8 0%, #0A6B86 55%, #0A5670 100%) !important; z-index:1} .place__contenu{display:block; width:100%; box-sizing:border-box; padding:0 34px; color:#fff; font-family:Geist, sans-serif; position:relative; z-index:3} .place__contenu h3{margin:0; font-family:Unbounded, Geist, sans-serif; font-weight:900; font-size:30px; line-height:36px; color:#fff} .place__contenu ol{list-style:none; margin:20px 0 0; padding:0} .place__contenu li{display:flex; align-items:center; gap:14px; margin-top:18px; font-size:16px; line-height:22px; font-weight:500} .place__contenu li:first-child{margin-top:0} .place__contenu li i{flex:none; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:#fff; color:var(--teal); font-style:normal; font-size:13px; font-weight:600} .place__form{display:flex; flex-direction:column; gap:12px; padding-top:28px; margin:20px 0 0} .place__form input[type=text], .place__form input[type=email]{box-sizing:border-box; width:100%; height:52px; padding:0 18px; border-radius:16px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.12); color:#fff; font:400 16px/1 Geist, sans-serif; outline:none; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)} .place__form input::placeholder{color:rgba(255,255,255,.6)} .place__form input:focus{border-color:rgba(255,255,255,.7); background:rgba(255,255,255,.18)} .place__coche{display:flex; align-items:center; gap:10px; padding:4px 0 8px; font-size:14px; color:rgba(255,255,255,.8); cursor:pointer} .place__coche input{appearance:none; -webkit-appearance:none; flex:none; width:18px; height:18px; margin:0; border-radius:5px; border:1.5px solid rgba(255,255,255,.7); background:transparent; cursor:pointer} .place__coche input:checked{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23007692' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 12px no-repeat} .place__form .place__cta{position:relative; left:auto; top:auto; width:100%; color:var(--teal)} .place__gratuit{position:static; display:block; text-align:center; font-size:13px; line-height:18px; color:rgba(255,255,255,.75)} .mtel--place .place__clap{position:absolute; left:402px; top:-38px; width:92px; height:108px; z-index:4} .mtel--place .place__cal{position:absolute; left:-47px; top:298px; width:62px; height:67px; z-index:4} .place__amb{top:1120px} /* ── le mobile : les mêmes visuels, empilés */ html.mobile .gagne__titre, html.mobile .prix__titre, html.mobile .file__titre, html.mobile .garantie__titre{text-align:left} html.mobile .gcarte--soirees .notif--a{left:auto; right:18px; top:auto; bottom:30px; transform:none} html.mobile .gcarte--soirees .notif--b{display:none} html.mobile .gcarte__notifs--agente .notif{position:relative; left:auto; top:auto; width:auto; margin-top:24px} html.mobile .gcarte__notifs{position:static} html.mobile .gcarte__jours, html.mobile .gcarte__pastilles{position:static; margin-top:24px; flex-wrap:wrap} html.mobile .gcarte--soirees{padding-bottom:120px} html.mobile .file__nb, html.mobile .notif--file, html.mobile .garantie__promesse, html.mobile .garantie__cond, html.mobile .garantie__carte{position:relative; left:auto; top:auto; width:auto; margin-top:24px} html.mobile .file__nb b{font-size:88px; line-height:92px} html.mobile .notif--file{height:auto; padding:16px; border-radius:24px} html.mobile .notif--file b, html.mobile .notif--file small{white-space:normal} html.mobile .mtel--file{display:none} html.mobile .garantie__carte li{height:96px} html.mobile .garantie__carte b{font-size:26px; line-height:32px} html.mobile .mtel--place{width:100%; max-width:380px} html.mobile .mtel--place .mtel__tel{width:100%; height:auto; aspect-ratio:402 / 874} html.mobile .place__contenu{padding:0 22px} html.mobile .place__contenu h3{font-size:24px} html.mobile .mtel--place .place__clap{left:auto; right:-14px; top:-30px; width:70px; height:auto} html.mobile .mtel--place .place__cal{left:-14px; top:40%; width:48px; height:auto} html.mobile .pcarte__zero, html.mobile .pcarte--jour .pcarte__zero{position:static; font-size:72px; line-height:76px} html.mobile .pcarte__barre{position:static; margin-top:6px; font-size:28px; line-height:34px} html.mobile .pcarte__texte, html.mobile .pcarte--jour .pcarte__texte{position:static; margin-top:18px} html.mobile .gcarte .gcarte__jours{display:flex; flex-direction:row; gap:24px} html.mobile .gcarte__jours b{font-size:56px; line-height:64px} html.mobile .sec--prix .pcarte .pcarte__zero{font-size:72px; line-height:76px; color:var(--teal)} html.mobile .sec--prix .pcarte .pcarte__barre{font-size:28px; line-height:34px} /* (12 nov.) « Ta place » selon l'état : etat.js retire « data-boite » du bouton dès qu'on a un compte ; le formulaire n'a alors plus de raison d'être */ .place__form:has(.place__cta:not([data-boite])) > input, .place__form:has(.place__cta:not([data-boite])) > .place__coche{display:none} /* (12 nov. 2026, le PO : « c'est censé être du liquid glass ») : le vrai verre de la maquette 481:84. Fond translucide teinté, flou et saturation de ce qui est derrière, contour en dégradé (clair en haut à gauche, gris au milieu, clair en bas), reflet en haut et ombre intérieure en bas. */ .notif, .gcarte .notif, .gcarte__pastilles i, .bouton--verre{ background:linear-gradient(160deg, rgba(255,255,255,.58) 0%, rgba(236,241,244,.34) 55%, rgba(255,255,255,.46) 100%); border:0; isolation:isolate; -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%); box-shadow:0 24px 48px -10px rgba(11,20,30,.16), 0 2px 6px rgba(11,20,30,.05), inset 0 1.5px 1.5px rgba(255,255,255,.95), inset 0 -3px 8px rgba(30,60,80,.07), inset 0 0 22px rgba(255,255,255,.5)} .notif::before, .gcarte__pastilles i::before, .bouton--verre::before{content:''; position:absolute; inset:0; border-radius:inherit; padding:1.2px; pointer-events:none; z-index:1; background:linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(198,207,214,.75) 45%, rgba(220,227,232,.6) 60%, rgba(255,255,255,.9) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)} .gcarte__pastilles i{position:relative} .bouton--verre{position:absolute} /* la notification de derrière : on la voit à travers le verre, floutée */ .gcarte--soirees .notif--b{opacity:.85} .notif--file{align-content:center; row-gap:2px} /* la pile comme la maquette 547:457 : la notification de derrière garde son icône et son texte, à 70 %, et on la devine floue à travers le verre de devant (flou 13,75 px dans Figma, soit 11 px avant le scale 1.25) */ .gcarte--soirees .notif--b{opacity:.7} .gcarte--soirees .notif--a{-webkit-backdrop-filter:blur(11px) saturate(180%); backdrop-filter:blur(11px) saturate(180%)} /* ── 17 · la preuve, avec les photos (12 nov. 2026, Figma 467:433, « c'est la bonne version ») : le titre à gauche, la citation vedette avec Sarah à côté, trois cartes blanches, la photo et le nom en bas de chaque carte */ .preuve__sur{left:212px; right:auto; top:162px; text-align:left; margin:0; font-family:Geist, sans-serif; font-size:20px; line-height:29px; font-weight:500; color:#0A0A0D} .preuve__vedette{position:absolute; left:187px; top:219px; width:1050px; margin:0; display:flex; align-items:center; gap:18px; text-align:left} .preuve__vedette blockquote{flex:0 0 763px; margin:0; font-family:Geist, sans-serif; font-size:32px; line-height:37.8px; font-weight:500; letter-spacing:-.01em; color:var(--encre); text-align:center} .preuve__vedette figcaption, .temoin figcaption{display:flex; align-items:center; gap:12px; text-align:left} .temoin__photo{flex:none; display:block; width:44px; height:44px; border-radius:50%; object-fit:cover} .preuve__vedette figcaption b, .temoin figcaption b{display:block; font-size:15px; line-height:20px; font-weight:500; color:var(--encre)} .preuve__vedette figcaption em, .temoin figcaption em{display:block; margin-top:2px; font-style:normal; font-size:13px; line-height:18px; color:#6B737A} .preuve__trois{position:absolute; left:180px; top:323px; width:1063px; display:flex; gap:24px} .preuve__trois .temoin{position:relative; flex:1 1 0; min-width:0; height:242px; box-sizing:border-box; margin:0; padding:30px 32px; display:flex; flex-direction:column; justify-content:space-between; border-radius:28px; background:#fff; box-shadow:0 12px 32px rgba(0,0,0,.06)} .preuve__trois .temoin blockquote{margin:0; font-size:15px; line-height:22px; color:#545C63} .preuve__trois .temoin figcaption{position:static} .suite .sec--preuve{--h:690px} html.mobile .preuve__sur, html.mobile .preuve__vedette, html.mobile .preuve__trois{position:relative; left:auto; top:auto; width:auto} html.mobile .preuve__vedette{flex-direction:column; align-items:flex-start; margin-top:16px} html.mobile .preuve__vedette blockquote{flex:none; font-size:24px; line-height:30px; text-align:left} html.mobile .preuve__trois{flex-direction:column; gap:14px; margin-top:24px} html.mobile .preuve__trois .temoin{height:auto; gap:22px; padding-bottom:28px} .preuve__vedette figcaption{letter-spacing:normal; font-family:Geist, sans-serif} /* ── la roulette du feed (12 nov. 2026) : le fond de l'écran sans les cartes, et par-dessus la bande de publications qui défile. Cotes : 1 px de la planche = 1,314 px du téléphone (l'écran exporté est recadré en hauteur). */ .tel__roulette{position:absolute; left:0; right:0; top:98px; bottom:0; overflow:hidden; pointer-events:none; opacity:0; transition:opacity .45s cubic-bezier(.4,0,.2,1); z-index:1; -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 96px), transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 96px), transparent 100%)} .tel__roulette.on{opacity:1} .tel__bande{position:absolute; left:9.8px; top:12.4px; width:286.4px; will-change:transform} .tel__bande img{display:block; width:286.4px; height:107.7px; margin-bottom:13.2px; filter:blur(.6px)} .tel__etiq, .tel__faq{z-index:2} /* (12 nov. 2026, le PO : « beaucoup plus petit le tel ») : le téléphone de « Ta place » à 70 %, centré, tout son contenu avec lui */ html:not(.mobile) .suite .mtel--place{left:578px; top:210px; width:284px; height:617px} .mtel--place .place__ecran{border-radius:48px !important} .place__contenu{padding:0 20px} .place__contenu h3{font-size:24px; line-height:30px} .place__contenu ol{margin-top:16px} .place__contenu li{gap:11px; margin-top:12px; font-size:14px; line-height:19px} .place__contenu li i{width:26px; height:26px; font-size:12px} .place__form{gap:9px; padding-top:16px; margin-top:14px} .place__form input[type=text], .place__form input[type=email]{height:44px; padding:0 15px; border-radius:13px; font-size:15px} .place__coche{font-size:13px; padding:2px 0 4px} .place__form .place__cta{height:48px; font-size:15px; padding:4px 4px 4px 18px} .place__form .place__cta i{width:40px; height:40px; flex-basis:40px} .place__gratuit{font-size:12px} .mtel--place .place__clap{left:266px; top:-34px; width:76px; height:89px} .mtel--place .place__cal{left:-34px; top:200px; width:50px; height:54px} .suite .sec--place{--h:930px} .place__amb{top:860px} /* (12 nov. 2026, le PO : « baisse un peu la taille du tel ») : le téléphone de « Pourquoi on te fait attendre » à 80 %, en entier dans la section */ html:not(.mobile) .suite .mtel--file{left:975px; top:160px; width:264px; height:574px} .mtel--file .mtel__ecran{border-radius:45px !important} /* ── les apparitions de la suite (12 nov. 2026) : un fondu et une montée de 20 px, lents et sans rebond, en cascade (--d posé par v3.js) */ html:not(.mobile) .suite .apparait{opacity:0; translate:0 20px; transition:opacity .9s cubic-bezier(.4,0,.2,1) var(--d, 0s), translate 1.1s cubic-bezier(.16,1,.3,1) var(--d, 0s)} html:not(.mobile) .suite .sec.pose .apparait{opacity:1; translate:0 0} html:not(.mobile) .suite .apparait.qui__texte{translate:0 calc(-50% + 20px)} html:not(.mobile) .suite .sec.pose .apparait.qui__texte{translate:0 -50%} html:not(.mobile) .suite .apparait.prix__cta{translate:-50% 20px} html:not(.mobile) .suite .sec.pose .apparait.prix__cta{translate:-50% 0} /* ── le téléphone qui voyage, 2e version (12 nov. 2026, 14 h 35) : un téléphone neutre (écran blanc, icône Cf) glisse entre les sections ; le vrai téléphone et le contenu de la section n'apparaissent qu'une fois le téléphone posé */ .voyageur{display:none; position:fixed; left:0; top:0; z-index:0; pointer-events:none; will-change:transform} html.voyage:not(.mobile) .voyageur{display:block} html:not(.mobile) .suite .voyageur > figure{display:block; position:absolute; left:0; top:0; margin:0} html.voyage:not(.mobile) .suite .voy-maison{opacity:0; transition:opacity .5s cubic-bezier(.4,0,.2,1); pointer-events:none} html.voyage:not(.mobile) .suite .voy-maison.tel-pose{opacity:1; pointer-events:auto} html.voyage:not(.mobile) .suite .voy-sec:not(.tel-vu) .apparait{opacity:0; translate:0 20px} html.voyage:not(.mobile) .suite .voy-sec:not(.tel-vu) .apparait.prix__cta{translate:-50% 20px} /* le P.S. n'a pas les apparitions de la suite : même attente, en simple fondu */ html.voyage:not(.mobile) .suite .sec--pied > :not(.mtel):not(.pied__carte){transition:opacity .9s cubic-bezier(.4,0,.2,1)} html.voyage:not(.mobile) .suite .sec--pied.voy-sec:not(.tel-vu) > :not(.mtel):not(.pied__carte){opacity:0} /* (12 nov. 2026, 15 h 10, le chef : « remets les visuels d'avant, juste en bleu ») : les trois publications qui ressortent du téléphone reviennent, recolorées en bleu (carte-hors-*-bleu.webp) */ /* ── 16 · Ce que tu gagnes : LA BONNE VERSION (12 nov. 2026, le PO, Figma 505:796). Titres en Unbounded, « Tes soirées » en dégradé teal avec deux cartes projet, la frise de « Ta vitesse », les autocollants de « Ta tête tranquille », deux cartes projet dans « Ton agente ». Cotes relevées sur la maquette. */ html:not(.mobile) .gagne__titre{left:0; right:0; top:120px; text-align:center; font-size:50px; line-height:55px; letter-spacing:-1px} .gcarte{background:#fff; border:0; box-shadow:0 10px 30px rgba(0,0,0,.07)} .gcarte--teal{background:linear-gradient(169.34deg, #09A9AA 8.49%, #00768F 56.64%, #055F6D 91.51%); border:0; box-shadow:0 10px 30px rgba(0,0,0,.07)} .gcarte h3, .gcarte--teal h3{font-family:Unbounded, Geist, sans-serif; font-weight:900; font-size:26px; line-height:32px; letter-spacing:0; color:#0A0A0D} .gcarte p, .gcarte--teal p{top:82px; font-size:17px; line-height:25.5px; color:#616970} .gcarte--teal h3{color:#fff} .gcarte--teal p{color:rgba(255,255,255,.85)} .gcarte__projet{border-radius:12.4px; box-shadow:none} html:not(.mobile) .gcarte__projet--a{left:342.5px; top:26.3px; width:184px; height:192.3px; rotate:-8deg} html:not(.mobile) .gcarte__projet--b{left:389.4px; top:159.1px; width:184px; height:192.3px; rotate:6deg} html:not(.mobile) .gcarte__projet--c{left:308.7px; top:69.5px; width:168px; height:175.6px; rotate:7deg; opacity:.4} html:not(.mobile) .gcarte__projet--d{left:428.7px; top:130.8px; width:168px; height:175.6px; rotate:-6deg} html:not(.mobile) .gcarte__projet--e{left:137.6px; top:185.3px; width:160px; height:167.2px; rotate:8deg} html:not(.mobile) .gcarte__projet--f{left:239.6px; top:179.6px; width:160px; height:167.2px; rotate:-7deg} html:not(.mobile) .gcarte__sticker--a{left:36.3px; top:200px; width:141px; height:auto; rotate:5deg} html:not(.mobile) .gcarte__sticker--b{left:174px; top:229.5px; width:182px; height:auto; rotate:-4deg} html.mobile .gcarte--vitesse{padding-bottom:110px} html.mobile .gcarte__ligne i:nth-child(2){left:36%} html.mobile .gcarte__ligne i:nth-child(3){left:66%} html.mobile .gcarte__ligne i:nth-child(4){left:calc(100% - 22px)} /* ── 14 · la différence (12 nov. 2026, 15 h 15, le PO : « mets le texte sur le côté, bien designé, le tel de l'autre ») : le texte à gauche, en grand, sur deux temps (la plateforme en noir, Castflow en teal) ; le téléphone à droite. */ html:not(.mobile) .diff__texte{left:150px; top:450px; translate:0 -50%; width:600px; text-align:left; font-size:44px; line-height:52px; letter-spacing:-.025em} html:not(.mobile) .diff__texte em{display:block; margin-top:28px} /* ── 17 · la preuve : quatre témoignages (12 nov. 2026, Figma 576:38). La citation de Sarah en grand à gauche (420 de large), les quatre cartes en grille 2 × 2 à droite (340 × 242, écart 20), le tout centré : 1180 × 504 dans la section. */ html:not(.mobile) .suite .sec--preuve{--h:700px} html:not(.mobile) .preuve__sur{left:130px; top:172px; font-size:17px; line-height:25px; font-weight:500; letter-spacing:0; color:var(--teal)} html:not(.mobile) .preuve__vedette{left:130px; top:225px; width:420px; display:block} html:not(.mobile) .preuve__vedette blockquote{text-align:left; font-size:40px; line-height:46px; letter-spacing:-.8px; font-weight:500; color:#0A0A0A} html:not(.mobile) .preuve__vedette figcaption{margin-top:28px} html:not(.mobile) .preuve__trois{left:610px; top:98px; width:700px; display:grid; grid-template-columns:340px 340px; gap:20px} html:not(.mobile) .preuve__trois .temoin{height:242px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 12px 32px rgba(0,0,0,.06)} html:not(.mobile) .preuve__trois .temoin blockquote{font-size:15px; line-height:21.75px} /* ── 05 · t'es pas tout seul, la phrase de fin (12 nov. 2026, 15 h 25, le chef : « il faut mettre la phrase du bas en valeur », le PO : « rends ça plus beau ») : plus de bandeau. Trois temps qui montent : deux lignes calmes, puis la chute en Unbounded, en grand, « des tiens » en teal. La source reste sous les cartes. */ .seul__fin span, .seul__fin b{display:block} html:not(.mobile) .seul__source{top:736px} html:not(.mobile) .seul__fin{left:120px; top:776px; width:1200px; text-align:center} html:not(.mobile) .seul__fin span{font-size:26px; line-height:36px; font-weight:500; letter-spacing:-.015em; color:var(--encre)} html:not(.mobile) .seul__fin span + span{color:var(--muet)} html:not(.mobile) .seul__fin b{margin-top:8px; font-family:Unbounded, Geist, sans-serif; font-weight:900; font-size:60px; line-height:68px; letter-spacing:-.03em; color:var(--encre)} .seul__fin b em{font-style:normal; color:var(--teal)} html.mobile .seul__fin span{font-size:18px; line-height:26px; font-weight:500} html.mobile .seul__fin span + span{color:var(--muet)} html.mobile .seul__fin b{margin-top:14px; font-family:Unbounded, Geist, sans-serif; font-weight:900; font-size:30px; line-height:36px; letter-spacing:-.02em} /* le menu s'efface en descendant, revient en remontant (voir v3.js) */ .nav{transition:translate .45s cubic-bezier(.4,0,.2,1), opacity .3s ease} html.nav-cachee .nav{translate:0 -130%; opacity:0; pointer-events:none} @media (prefers-reduced-motion: reduce){ .nav{transition:none} } /* le téléphone qui voyage, un seul objet (12 nov. 2026, 16 h 05) : une coque, les écrans dessous, ce qui dépasse dessus ; plus aucun fondu sur le vrai téléphone */ html.voyage:not(.mobile) .suite .voy-maison{transition:none} .voy__ecrans, .voy__dessus{position:absolute; inset:0; display:block} .voy__ecrans{z-index:1} .voy__dessus{z-index:3} html:not(.mobile) .suite .voy__coque{position:absolute; left:-4.85%; top:-2.15%; width:109.7%; height:104.3%; max-width:none; pointer-events:none; z-index:2; filter:drop-shadow(0 24px 40px rgba(11,20,30,.22))} /* (13 nov. 2026, le PO : « si le tel remonte, refais disparaître le titre, fais vraiment de belles animations ») : le contenu d'une section sort d'un léger flou en montant quand le téléphone s'y pose (en cascade), et s'efface vite, tout d'un bloc, dès qu'il repart */ html.voyage:not(.mobile) .suite .voy-sec .apparait{ transition:opacity .85s cubic-bezier(.22,1,.36,1) var(--d, 0s), translate 1.1s cubic-bezier(.16,1,.3,1) var(--d, 0s), filter .85s cubic-bezier(.22,1,.36,1) var(--d, 0s)} html.voyage:not(.mobile) .suite .voy-sec:not(.tel-vu) .apparait{opacity:0; translate:0 26px; filter:blur(10px); transition:opacity .32s cubic-bezier(.4,0,.2,1), translate .45s cubic-bezier(.4,0,.2,1), filter .32s cubic-bezier(.4,0,.2,1)} html.voyage:not(.mobile) .suite .voy-sec:not(.tel-vu) .apparait.prix__cta{translate:-50% 26px} html.voyage:not(.mobile) .suite .sec--pied.voy-sec:not(.tel-vu) > :not(.mtel):not(.pied__carte){transition:opacity .32s cubic-bezier(.4,0,.2,1)} /* (13 nov. 2026, le PO : « enlève cet énorme espace du footer, je ne peux pas voir le titre ») : le bas de page tient dans une fenêtre (900 de haut) : titre, bouton, téléphone et carte du pied visibles ensemble, la carte collée à 24 px du bas, plus de vide dessous */ .suite .sec--pied{--h:900px} html:not(.mobile) .suite .pied__carte{top:auto; bottom:24px} html:not(.mobile) .suite .mtel--pied{top:350px} /* (13 nov. 2026, le PO : « des icônes Castflow qui volent, pour mettre un peu de vie à ce header ») : quatre autocollants de la marque autour du titre ; ils flottent lentement, chacun à son rythme, sans rebond, et dérivent un peu sous le curseur (v3.js) */ /* (13 nov., « plus élaboré ») : dix autocollants sur trois plans, placés et animés par v3.js (ils sortent du téléphone, puis dérivent) ; ici seulement leur taille et leur netteté */ .vol{position:absolute; left:0; top:0; display:block; opacity:0; will-change:transform} .vol img{display:block; width:100%; height:auto} /* maquette Figma 588:294 : six étiquettes de profil (l'image porte déjà son ombre et sa marge) */ .vol--1{width:166px} .vol--2{width:172px} .vol--3{width:136px} .vol--4{width:204px} .vol--5{width:152px} .vol--6{width:154px} /* ── L'OUVERTURE FAÇON JOBR (13 nov. 2026, maquette Figma 603:58) : le texte à gauche, le champ courriel avec son bouton, le téléphone à droite et ses deux boutons dessous */ html:not(.mobile) .hero__titre{left:150px; right:auto; top:232px; text-align:left} html:not(.mobile) .hero__sous{left:150px; top:412px; width:610px; text-align:left; font-size:18px} html:not(.mobile) .hero__note{left:176px; right:auto; top:612px; text-align:left} .hero__champ{display:flex; align-items:center; gap:8px; height:54px; padding:6px 6px 6px 26px; background:#fff; border:1px solid rgba(15,23,30,.08); border-radius:999px; box-shadow:0 8px 24px rgba(15,23,30,.06)} html:not(.mobile) .hero__champ{position:absolute; left:150px; top:538px; width:440px} .hero__champ input{flex:1 1 auto; min-width:0; height:100%; border:0; background:none; outline:0; font:inherit; font-size:16px; color:var(--encre)} .hero__champ input::placeholder{color:#8F99A6} .hero__champ:focus-within{border-color:var(--teal)} .hero__champ .hero__cta{position:static; left:auto; top:auto; flex:0 0 auto; width:auto; height:42px; gap:14px; padding:3px 3px 3px 18px; font-size:13px; border:0; cursor:pointer; font-family:inherit; white-space:nowrap} .hero__champ .hero__cta i{width:30px; height:30px; flex:0 0 30px} .hpastille--g{left:1012px; top:682px; width:88px; height:105px} /* (13 nov., 14 h 10) des icônes rondes, plus de texte */ .hpastille--d{left:1098px; top:684px; width:86px; height:102px} .file__carte{will-change:transform} html.mobile .hero__champ{margin:20px auto 0; max-width:340px; padding-left:20px} html.mobile .hero__champ .hero__cta{position:static; left:auto; top:auto; margin:0; height:42px; padding:3px 3px 3px 16px; font-size:13px} html.mobile .hero__champ input{text-align:left} /* (13 nov. 2026, 14 h 05, le PO : « beaucoup plus simple et épuré ») la fin de « T'es pas tout seul » : une petite ligne grise et une phrase dans la police des titres, plus de gros Unbounded */ html:not(.mobile) .seul__fin{top:800px} html:not(.mobile) .seul__fin span{font-size:18px; line-height:26px; font-weight:400; letter-spacing:0; color:var(--muet)} html:not(.mobile) .seul__fin b{margin-top:6px; font-family:inherit; font-weight:500; font-size:40px; line-height:48px; letter-spacing:-.03em; color:var(--encre)} html.mobile .seul__fin span{font-size:15px; line-height:22px; font-weight:400; color:var(--muet)} html.mobile .seul__fin b{margin-top:6px; font-family:inherit; font-weight:500; font-size:26px; line-height:32px; letter-spacing:-.03em}