. Les quatre colonnes prenaient alors toutes la couleur du , donc la même : un comparateur qui ne compare rien. Sur l'attribut seul, la palette suit l'élément qui la porte, où qu'il soit. Ne pas y remettre `body`. */ [data-metier] { --mt-line: rgba(var(--mt-ombre), 0.16); --mt-display: "Cormorant Garamond", Georgia, serif; --mt-sans: "Outfit", -apple-system, "Helvetica Neue", sans-serif; --mt-brand: "Poppins", "Outfit", -apple-system, sans-serif; --mt-h-weight: 300; --mt-h-track: -0.005em; } /* ========================================================================== 2. LA PAGE ========================================================================== */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body[data-metier] { margin: 0; background: var(--mt-bg); color: var(--mt-text); font-family: var(--mt-sans); font-weight: 300; -webkit-font-smoothing: antialiased; } img, video { display: block; max-width: 100%; } .wrap { width: min(1080px, 100% - 2.8rem); margin-inline: auto; } /* ========================================================================== 3. L'EN-TÊTE — la vidéo seule, plein écran -------------------------------------------------------------------------- Sur téléphone : la verticale en plein cadre, rien par-dessus sauf les deux appels à l'action et « Défiler ». C'est le format d'origine ET celui de l'écran. Au-delà de 900 px : elle reste VERTICALE, dans un cadre au format téléphone posé à droite, et le texte passe à sa gauche (Lino, 21/08/2026 : « suis immo et sport, tu intègres les vidéos dans le téléphone »). ⚠️ CE CHOIX RÈGLE UN PROBLÈME RÉEL, il n'est pas décoratif : les quatre sources sont des 9:16, et aucune bande 16:9 n'existe pour elles. En plein cadre sur un écran d'ordinateur, une verticale est agrandie 2,7× et 68 % de l'image sort de l'écran (mesuré le 04/08). Dans le cadre, elle est affichée à sa taille réelle ou presque — c'est le seul traitement où l'image est nette sans encoder un second fichier. ========================================================================== */ .mt-head { position: relative; isolation: isolate; overflow: hidden; min-height: calc(var(--mt-vh, 1svh) * 100); } .mt-head-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; } /* « Défiler » — le mot clignote de lui-même en alternant deux couleurs, ce qui accroche l'œil sans poser la moindre pastille sur l'image. Blanc ↔ l'accent éclairci de la page : la luminosité d'une vidéo va de 20 à 240, aucune couleur ne tiendrait seule — mais l'une des deux est toujours lisible. ⚠️ La flèche de scrollcue.css n'a pas de couleur à elle (`currentColor`) : elle clignote avec le mot sans une ligne de plus. Ne pas lui en donner une. */ .mt-hint { position: absolute; bottom: calc(5.5vh + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); margin: 0; display: inline-flex; flex-direction: column; align-items: center; font-family: var(--mt-sans); font-size: clamp(0.98rem, 3.2vw, 1.18rem); font-weight: 600; letter-spacing: 0.3em; text-indent: 0.3em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 16px rgba(var(--mt-ombre), 0.75); animation: mt-hint-flash 1.4s steps(1) infinite; } @keyframes mt-hint-flash { 0%, 49% { color: #fff; } 50%, 100% { color: var(--mt-accent-lit); } } @media (prefers-reduced-motion: reduce) { .mt-hint { animation: none; } } /* ⚠️ CES DEUX RÈGLES DOIVENT RESTER AVANT LA MEDIA QUERY, et l'ordre est la SEULE chose qui les départage : elles ont la même spécificité que celles qui les rouvrent au-delà de 900 px (une classe de part et d'autre — une media query n'ajoute AUCUNE spécificité). Posées après, la mise en page laptop est annulée et la colonne de texte revient vide. Le défaut a été payé sur /realestate le 09/08/2026. ⚠️ `display: contents` et rien d'autre sur les deux enveloppes : elles disparaissent de l'arbre de rendu et la vidéo redevient l'enfant direct de `.mt-head`, où son `position: absolute; inset: 0` se résout bien. Leur donner une boîte, même vide, ferait s'effondrer l'en-tête plein cadre servie à tous les téléphones. */ .mt-head-phone, .mt-phone-screen { display: contents; } .mt-phone-island, .mt-phone-key, .mt-head-copy { display: none; } /* ========================================================================== 4. LE PARALLAXE — le fond se fige, le contenu passe par-dessus -------------------------------------------------------------------------- Tout repose sur `position: sticky`, sans une ligne de JS : 1. le titre défile normalement sur le fond de page ; 2. `.mt-stage-bg` entre par le bas, derrière lui ; 3. arrivé en haut de l'écran, il se FIGE ; 4. les offres puis le contact défilent par-dessus ; 5. le contact, opaque, finit par le recouvrir entièrement. ⚠️ LE CONTACT EST DANS `.mt-stage`, et il doit y rester : l'en sortir libérerait le fond trop tôt — il remonterait avec la page au lieu d'être recouvert. Même piège que sur /realestate et /action. ⚠️ `.mt-stage-bg` et `.mt-over` doivent TOUJOURS employer le même nombre (100 et -100) : c'est l'invariant du parallaxe, les désaccorder laisse un trou ou décale tout le parcours. ⚠️ LA PHOTO EST ARRIVÉE LE 21/08/2026, quelques heures après « on s'en fiche, ne mets rien » : une par page, fournie par Lino et posée dans `--mt-photo`. `background-color` reste sous elle — c'est ce qu'on voit le temps du chargement, et c'est la couleur de la page, jamais du blanc. */ .mt-stage { position: relative; } .mt-stage-bg { position: sticky; top: 0; height: calc(var(--mt-vh, 1svh) * 100); background-color: var(--mt-ink); background-image: var(--mt-photo, none); background-size: cover; background-position: center; } .mt-over { position: relative; z-index: 1; margin-top: calc(var(--mt-vh, 1svh) * -100); } /* ⚠️ DEUX FICHIERS PAR PHOTO, comme sur /realestate : 1200 px de large pour le téléphone, 2200 pour l'ordinateur. Servir la grande partout ferait télécharger 350 à 460 ko à un téléphone qui n'en affichera jamais la moitié des pixels. ⚠️ LES QUATRE PHOTOS SONT EN PAYSAGE (Lino, 21/08/2026) alors que le cadre est un écran entier, donc très vertical sur un téléphone : `cover` en garde la bande centrale et jette le reste. C'est assumé — c'est un fond, il passe presque entièrement sous les cartouches — mais si un sujet important tombe sur un bord, la sortie est un recadrage vertical du fichier `-mobile`, pas un réglage CSS. */ @media (min-width: 900px) { [data-metier="construction"] { --mt-photo: url("assets/construction/parallax.jpg"); } [data-metier="restauration"] { --mt-photo: url("assets/restauration/parallax.jpg"); } [data-metier="commerce"] { --mt-photo: url("assets/commerce/parallax.jpg"); } [data-metier="art"] { --mt-photo: url("assets/art/parallax.jpg"); } } /* ===== Le titre, et le texte qui le suit ===== */ .mt-title { width: min(1080px, 100% - 2.8rem); margin: 0 auto; padding: clamp(60px, 12vh, 128px) 0 clamp(20px, 3.2vh, 34px); max-width: 20ch; font-family: var(--mt-display); font-weight: var(--mt-h-weight); font-size: clamp(2.4rem, 8vw, 4.8rem); line-height: 1.06; letter-spacing: var(--mt-h-track); color: var(--mt-ink); } /* le mot qui se tape, dans l'accent éclairci — jamais de pavé derrière lui */ .mt-title b { font-weight: var(--mt-h-weight); font-style: italic; color: var(--mt-accent-lit); } .mt-title .tw-caret { font-style: normal; color: var(--mt-accent-lit); } /* ⚠️ LA COLONNE DE TEXTE EST CALÉE SUR CELLE DU TITRE : même fonte, même corps, même `max-width: 20ch`. C'est la seule façon d'obtenir le même bord gauche — les deux blocs sont centrés par `margin: 0 auto`, donc leur bord gauche dépend de leur largeur, et `ch` se résout sur la fonte de L'ÉLÉMENT. Une valeur en ch posée sur du texte courant donne une colonne plus étroite, et le texte part en retrait du titre comme un décalage accidentel. Les paragraphes reprennent aussitôt leur propre fonte et leur propre corps. */ .mt-intro { width: min(1080px, 100% - 2.8rem); margin: 0 auto; padding-bottom: clamp(52px, 10vh, 104px); font-family: var(--mt-display); font-size: clamp(2.4rem, 8vw, 4.8rem); max-width: 20ch; } .mt-intro-p { margin: 0; font-family: var(--mt-sans); font-size: clamp(1rem, 2.3vw, 1.12rem); font-weight: 300; line-height: 1.7; color: var(--mt-text); } .mt-intro-p + .mt-intro-p { margin-top: 1.05em; } .mt-intro-p b { font-weight: 500; color: var(--mt-ink); } @media (min-width: 900px) { .mt-title, .mt-intro { max-width: 22ch; } } /* ========================================================================== 5. LES OFFRES — QUATRE CADRES VIDES, POUR L'INSTANT -------------------------------------------------------------------------- Lino, 21/08/2026 : « juste des cadres vides qui passent au-dessus du volet en parallaxe, je suis en train de te trouver les photos de fond ». Ce sont donc de vrais cartouches, à la bonne place, à la bonne taille, avec le bon écart entre eux — mais sans un mot dedans. ⚠️ LE `min-height` N'EST PAS UN RÉGLAGE D'ESTHÉTIQUE : un cartouche réellement vide fait ZÉRO pixel de haut, et il n'y aurait rien à voir passer par-dessus le fond figé. C'est lui qui donne au volet la hauteur qu'il aura quand les offres seront écrites. ⚠️ LA CLASSE DU CONTENEUR S'APPELLE `.offers`, comme sur /realestate, et pour une raison mécanique : c'est le sélecteur écrit dans `data-va-aux-offres=".offers"`, le bouton « Découvrez nos offres » de l'en-tête. La renommer casse le second appel à l'action des quatre pages. */ .offers { display: flex; flex-direction: column; /* En vh et non en px : cet écart est le temps de respiration entre deux services, il se mesure donc par rapport à l'écran. C'est lui qui laisse le fond réapparaître pleinement entre deux offres. */ gap: clamp(64px, 20vh, 200px); padding: calc(var(--mt-vh, 1svh) * 62) 0 calc(var(--mt-vh, 1svh) * 34); } .offer { position: relative; } .offer-inner { width: min(1080px, 100% - 2.8rem); max-width: 62ch; margin-inline: auto; padding: clamp(28px, 5vw, 46px); /* ⚠️ LE CARTOUCHE PREND LA COULEUR DE LA PAGE, PAS DU BLANC, et c'est mesuré : sur la charpente en plein soleil du bâtiment, un cartouche blanc à 96 % ne se détachait plus du fond — deux clairs l'un sur l'autre. Teinté, il redevient un objet posé sur la photo, et il change avec la palette. ⚠️ `background` est déclaré DEUX FOIS exprès : la première ligne est le repli pour un navigateur sans `color-mix()`, qui aura un aplat opaque plutôt qu'aucun fond. Ne pas « nettoyer » en supprimant la première. */ background: var(--mt-bg); background: color-mix(in srgb, var(--mt-bg) 96%, transparent); border: 1px solid var(--mt-line); box-shadow: 0 24px 60px rgba(var(--mt-ombre), 0.22); } .offer-vide .offer-inner { min-height: clamp(220px, 34vh, 380px); } /* ===== LE CONTENU D'UNE OFFRE (21/08/2026) ================================ Trois offres par page, écrites après avoir regardé 28 vidéos de vidéastes des quatre métiers. Les noms de classes sont ceux de /realestate (`offer-h`, `offer-p`, `offer-liste`, `is-livrable`, `is-delai`) : le même objet porte le même nom d'une page à l'autre, même si les deux feuilles l'habillent séparément. ⚠️ `.offer-vide` RESTE DÉFINIE juste au-dessus : `influenceur` n'a pas encore ses offres, et le jour où sa page naîtra elle repartira de cadres vides. Ne pas la retirer en croyant qu'elle ne sert plus. */ /* Le chapeau : ce que l'offre EST, en trois mots. Il nomme le service quand le titre, lui, porte la promesse — la règle de nommage de Lino (« les offres portent une promesse, les forfaits portent un nom court »). */ .offer-role { margin: 0 0 0.45rem; font-family: var(--mt-sans); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.18em; text-indent: 0.18em; text-transform: uppercase; color: var(--mt-accent); } .offer-h { margin: 0 0 0.75rem; font-family: var(--mt-display); font-weight: var(--mt-h-weight); font-size: clamp(1.6rem, 4.6vw, 2.3rem); line-height: 1.12; letter-spacing: var(--mt-h-track); color: var(--mt-ink); text-wrap: balance; } .offer-p { margin: 0 0 0.9rem; font-size: clamp(0.98rem, 2.2vw, 1.06rem); font-weight: 300; line-height: 1.68; color: var(--mt-text); } .offer-p:last-of-type { margin-bottom: 1.5rem; } /* ⚠️ DEUX REGISTRES, DEUX BLOCS, comme sur /realestate : le paragraphe VEND, la liste ENGAGE (durées, nombre de fichiers, délai). Ne pas les fondre en un paragraphe qui grossit. */ .offer-liste-h { margin: 0 0 0.6rem; font-family: var(--mt-sans); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mt-text); } .offer-liste { margin: 0 0 1.4rem; padding: 0; list-style: none; } .offer-liste li { position: relative; padding-left: 1.25rem; margin-bottom: 0.42rem; font-size: 0.97rem; line-height: 1.55; color: var(--mt-text); } /* un filet court à la couleur du métier, jamais une puce ronde ni un chiffre : « pas de listes 01/02/03 » vaut pour tout le site */ .offer-liste li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 8px; height: 1px; background: var(--mt-accent); } /* la première ligne porte la personne (« Je viens filmer… »), les suivantes sont nominales — le partage relevé dans les listes de /realestate */ .offer-liste li:first-child { color: var(--mt-ink); font-weight: 400; } .offer-liste .is-livrable { color: var(--mt-ink); } .offer-liste .is-delai::before { background: var(--mt-deal); } .offer-liste .is-delai { color: var(--mt-deal); font-weight: 400; } /* ⚠️ LA LIGNE DE TOTAL — demandée par Lino le 23/08/2026 (« tu mettras ça en gras »), sur l'offre de suivi de chantier. C'est une CLASSE et non un `` posé dans le texte, ni un `:last-child` : la même règle que sur /realestate, où `:last-child` a dû être abandonné parce qu'il décorait la dernière ligne quelle qu'elle soit. Une position n'est pas un sens — le rôle de la ligne s'écrit dans le balisage. Le cran est 600, celui de `.is-delai`, et non un cran de plus : un total qui crierait plus fort que le délai déséquilibrerait la carte. */ .offer-liste .is-total { color: var(--mt-ink); font-weight: 600; } /* ⚠️ LE GARDE-FOU EST UN PARTI PRIS, PAS UN ORNEMENT. Lino déconseille d'acheter plus, dans le texte même qui vend (« attention, plus long n'est pas toujours mieux en vidéos commerciales », /realestate 16/08). Cinq offres sur douze en portent un. Les retirer se décide, ça ne se fait pas au nettoyage. */ .offer-garde { margin: 0 0 1.5rem; padding: 0.75rem 0.95rem; border-radius: 3px; background: color-mix(in srgb, var(--mt-accent) 9%, transparent); font-size: 0.93rem; line-height: 1.55; color: var(--mt-text); } .offer-garde b { color: var(--mt-accent); font-weight: 500; } /* Le prix et l'appel à l'action, sur une ligne qui passe à deux sur téléphone. */ .offer-deal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--mt-line); } .offer-price { margin: 0; font-family: var(--mt-display); font-size: clamp(1.9rem, 5vw, 2.4rem); font-weight: 500; line-height: 1; color: var(--mt-deal); font-variant-numeric: tabular-nums; } .offer-price .offer-unite { display: block; margin-top: 0.25rem; font-family: var(--mt-sans); font-size: 0.78rem; font-weight: 300; letter-spacing: 0.02em; color: var(--mt-text); } /* ⚠️ `.btn-devis` de /realestate vit dans realestate.css, qui n'est PAS chargée ici. D'où un bouton à part, et non une classe recopiée qui n'aurait aucun style. ⚠️⚠️ LE FOND EST `--mt-accent`, SURTOUT PAS `--mt-menu`. Le nom trompe : `--mt-menu` n'est pas « la couleur du bouton de menu », c'est l'accent qui doit tenir SUR le panneau de menu, donc une teinte CLAIRE (#8ab7d1 pour le bâtiment). En fond de bouton avec du texte blanc, elle tombait sous 2:1. Essayé et mesuré le 21/08/2026. `--mt-accent` donne de 5,6:1 à 11:1 sur les quatre palettes. */ .offer-cta { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.72rem 1.35rem; border: 0; border-radius: 999px; background: var(--mt-accent); color: #fff; font-family: var(--mt-sans); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.01em; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; } .offer-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(var(--mt-ombre), 0.28); } .offer-cta:focus-visible { outline: 2px solid var(--mt-accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .offer-cta { transition: none; } .offer-cta:hover { transform: none; } } /* ========================================================================== 6. LE CONTACT — c'est lui qui recouvre le fond -------------------------------------------------------------------------- ⚠️ Son fond doit rester OPAQUE et sa hauteur minimale valoir un écran : sans l'un ou l'autre, il ne masque pas l'image en fin de course. ========================================================================== */ .mt-contact { position: relative; min-height: calc(var(--mt-vh, 1svh) * 100); padding: clamp(72px, 13vh, 128px) 0 clamp(40px, 7vh, 72px); background: var(--mt-bg); } .mt-contact .wrap > .mt-eyebrow, .mt-contact .wrap > h2 { text-align: center; } .mt-eyebrow { margin: 0 0 1rem; font-family: var(--mt-sans); font-size: clamp(0.95rem, 2.6vw, 1.25rem); font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--mt-accent); } .mt-contact h2 { margin: 0 auto 2.4rem; max-width: 22ch; font-family: var(--mt-display); font-weight: var(--mt-h-weight); font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.12; letter-spacing: var(--mt-h-track); color: var(--mt-ink); } .mt-contact h2 b { font-weight: var(--mt-h-weight); font-style: italic; color: var(--mt-accent); white-space: nowrap; } .mt-foot { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: clamp(38px, 6vh, 62px); padding: 26px 0 44px; border-top: 1px solid var(--mt-line); font-size: 0.8rem; color: var(--mt-muted); } .mt-foot a { color: var(--mt-muted); text-decoration: none; } .mt-foot a:hover { color: var(--mt-accent); } /* ===== Habillage du composant ask (ask.css) ===== ask.css est déjà clair : on ne retouche que ce qui doit suivre la palette. ⚠️ Il est chargé AVANT cette feuille sur les quatre pages. Les deux ciblent `.ask-send`, `.ask-field`… à spécificité égale : c'est l'ordre de chargement qui tranche, et dans l'autre sens la page ne pourrait plus habiller le composant. */ .ask-standalone { padding: clamp(22px, 4vw, 34px) 0 0; } .ask-panel { background: var(--mt-bg); border-color: var(--mt-line); border-radius: 4px; } .ask-title, .ask-done h3 { font-family: var(--mt-display); font-weight: 400; color: var(--mt-ink); } .ask-eyebrow, .ask-field > span { color: var(--mt-muted); letter-spacing: 0.18em; } .ask-eyebrow { color: var(--mt-accent); } .ask-field input, .ask-field select, .ask-field textarea { border-radius: 2px; border-color: var(--mt-line); background: #fff; color: var(--mt-ink); } .ask-field input:focus, .ask-field select:focus, .ask-field textarea:focus { border-color: var(--mt-accent); box-shadow: 0 0 0 2px rgba(var(--mt-ombre), 0.14); } .ask-send { border-radius: 2px; background: var(--mt-accent); } .ask-send:hover:not(:disabled) { background: var(--mt-ink); } /* ===== Entrée « Récupérer mes vidéos » du menu ===== Le panneau de menu est quasi noir (rgba(20,21,23,.92)) : l'accent de la page NE PEUT PAS y être repris tel quel. Mesuré sur /realestate, le vert foncé y tombait à 1,67:1. `--mt-menu` est la version éclaircie de chaque palette, calibrée pour ce fond-là et pour lui seul. ⚠️ menu.css n'est pas touché : il reste sans dépendance de palette, et cette feuille est chargée après lui. */ .menu-item.is-accent { color: var(--mt-menu); } .menu-item.is-accent:hover { background: rgba(255, 255, 255, 0.1); } /* ========================================================================== 7. ORDINATEUR — le téléphone à droite, le texte à gauche -------------------------------------------------------------------------- Proportions relevées sur la maquette de Lino (image de 1920) : corps 720 × 1502, écran 680 × 1466, cadre 20, rayon 85, îlot 178 × 46. Tout est exprimé en fraction de `--ph-w` pour que l'objet reste juste à n'importe quelle taille — un rayon en px se déforme dès qu'on change la hauteur, et c'est exactement ce qui trahit un faux téléphone. ⚠️ `--ph-w` se DÉDUIT de la hauteur : c'est la hauteur disponible à l'écran qui commande, la largeur suit. ========================================================================== */ @media (min-width: 900px) { .mt-head { display: grid; /* Les deux colonnes se dimensionnent sur leur contenu et le couple est CENTRÉ : en `1fr` pour le texte, le vide restant retomberait au milieu de la page. Le texte se décale vers la droite et le téléphone vers la gauche d'un même mouvement, sans qu'aucune marge soit écrite en dur. */ grid-template-columns: auto auto; justify-content: center; align-items: center; gap: clamp(34px, 4vw, 76px); /* ⚠️ LA RÈGLE DE DÉGAGEMENT DE LA BARRE FLOTTANTE (Lino, 21/08/2026), et c'est une RÈGLE, pas un réglage : réserve haute = bord bas de la barre (76 px) + un écart, réserve basse = LE MÊME écart. La distance à la barre vaut donc `écart`, celle au bas de l'écran vaut `écart`, et quand l'écran est assez haut `align-content: center` ajoute la même moitié de chaque côté. Les deux restent égales par construction. ⚠️ NE PAS AJOUTER L'ÉCART D'UN SEUL CÔTÉ : ce serait précisément ce que la règle interdit — l'égalité posée le 16/08 tomberait. ⚠️ 76 px n'est pas une marge de confort, c'est le bord bas de la barre. Si menu.css change la hauteur de la barre, cette valeur change avec. */ align-content: center; padding: calc(76px + clamp(20px, 3vh, 36px)) clamp(28px, 5vw, 72px) clamp(20px, 3vh, 36px); } /* ===== LE TÉLÉPHONE ===== */ .mt-head-phone { display: block; position: relative; box-sizing: border-box; /* ⚠️ CALÉ EN HAUT, PAS CENTRÉ. `.mt-head` reste en `align-items: center` pour la colonne de texte ; seul le cadre s'en détache, et il part de la MÊME LIGNE que le titre — ce qui donne un bord haut commun aux deux colonnes. Ne pas transformer ça en `align-items: start` sur `.mt-head` : la colonne de texte, elle, doit rester centrée, c'est ce centrage qui rattrape les écrans hauts. */ align-self: start; /* hauteur d'écran moins les réserves ; le plafond évite d'agrandir une source qui ne fait que 1080 × 1920 */ --ph-h: min(calc(100svh - 160px), 820px); --ph-w: calc(var(--ph-h) * 0.4793); /* 720 / 1502 */ height: var(--ph-h); width: var(--ph-w); padding: calc(var(--ph-w) * 0.0278); /* épaisseur du cadre : 20 / 720 */ border-radius: calc(var(--ph-w) * 0.118); /* le corps : un noir légèrement dégradé pour que la tranche accroche la lumière comme du titane, plus un liseré clair d'un pixel. Aucune lueur, aucun halo — c'est un reflet de matière, pas un éclat. */ background: linear-gradient(145deg, #3a3a3d 0%, #17171a 16%, #17171a 84%, #3a3a3d 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 34px 80px rgba(var(--mt-ombre), 0.26); } .mt-phone-screen { display: block; position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; border-radius: calc(var(--ph-w) * 0.0902); /* rayon extérieur − cadre */ } /* ⚠️ La vidéo garde son `position: absolute` : elle se cale simplement sur l'écran du téléphone, qui est en `position: relative`. ⚠️ L'écran fait 1:2,156 (le vrai rapport d'un iPhone) alors que la séquence est en 9:16. `cover` rogne donc ~17 % de la LARGEUR, à gauche et à droite. C'est du cadrage perdu, pas de la définition. */ .mt-head-bg { z-index: auto; border-radius: inherit; } /* L'îlot dynamique et son objectif. */ .mt-phone-island { display: block; position: absolute; z-index: 2; top: calc(var(--ph-w) * 0.0306); left: 50%; transform: translateX(-50%); width: calc(var(--ph-w) * 0.247); height: calc(var(--ph-w) * 0.0639); border-radius: 999px; background: #000; } .mt-phone-island i { position: absolute; top: 50%; right: calc(var(--ph-w) * 0.026); width: calc(var(--ph-w) * 0.0361); height: calc(var(--ph-w) * 0.0361); transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 62% 38%, #2f4f7a 0%, #16233a 46%, #05070c 78%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10); } /* Les touches. Position et longueur en % de la HAUTEUR du corps, relevées sur la maquette. Elles débordent du cadre, d'où les décalages négatifs. */ .mt-phone-key { display: block; position: absolute; width: calc(var(--ph-w) * 0.0139); background: linear-gradient(90deg, #45454a, #202024); } .k-action, .k-vol-up, .k-vol-dn { left: calc(var(--ph-w) * -0.0125); border-radius: calc(var(--ph-w) * 0.006) 0 0 calc(var(--ph-w) * 0.006); background: linear-gradient(270deg, #45454a, #202024); } .k-side { right: calc(var(--ph-w) * -0.0125); border-radius: 0 calc(var(--ph-w) * 0.006) calc(var(--ph-w) * 0.006) 0; } .k-action { top: 12.6%; height: 3.7%; } .k-vol-up { top: 20.6%; height: 6.3%; } .k-vol-dn { top: 29.3%; height: 6.3%; } .k-side { top: 21.6%; height: 10.3%; } /* ===== LA COLONNE DE TEXTE ===== `--mt-hero-h` est posée ICI et lue par le titre ET par le texte : les deux plafonnent en `ch`, et `ch` se résout sur la fonte de l'élément — sans un corps commun, les deux colonnes n'auraient plus la même largeur. */ .mt-head-copy { display: block; --mt-hero-h: clamp(1.9rem, 3.4vw, 3.2rem); /* ⚠️ LE PLAFOND EN `vw` N'EST PAS DÉCORATIF : à 1280 px, l'écran n'offre que ~1136 px une fois les marges retirées, dont ~355 pour le téléphone. Une largeur fixe en rem ferait déborder la grille. ⚠️ LE PLAFOND EN `rem` EST UNE MESURE DE LECTURE : au-delà, la ligne dépasse 90 signes et l'œil ne retrouve plus le début de la suivante. */ --mt-col: min(56vw, 40rem); } /* ⚠️⚠️ LE TITRE A UNE LARGEUR FERME, ET C'EST CE QUI EMPÊCHE LE TÉLÉPHONE DE BOUGER. La colonne et le cadre sont deux éléments centrés ENSEMBLE : la place prise par la colonne décide de la position du téléphone. Or une colonne en `auto` se dimensionne sur son contenu, et ce contenu est un texte qui s'écrit lettre par lettre — la colonne respirerait à chaque frappe et le téléphone glisserait avec elle. Défaut constaté sur /realestate le 15/08/2026. */ .mt-head-copy .mt-title { width: var(--mt-col); margin: 0; max-width: none; font-size: var(--mt-hero-h); padding: 0 0 clamp(16px, 2.2vh, 28px); } .mt-head-copy .mt-intro { width: var(--mt-col); max-width: var(--mt-col); margin: 0; padding: 0; font-size: var(--mt-hero-h); } .mt-head-copy .mt-intro-p { max-width: none; } /* « Défiler » reste dans l'en-tête et se pose dans le coin bas-droit, à droite du téléphone. ⚠️ NE PAS LE REMONTER DANS LA COLONNE : c'est ce qui a débloqué la mise en page de /realestate le 16/08 — dans le flux, il allongeait la colonne de 64 px et l'en-tête débordait de l'écran, donc `align-content: center` n'avait plus rien à répartir. */ .mt-hint { left: auto; right: clamp(20px, 3vw, 44px); bottom: clamp(20px, 3vh, 36px); transform: none; width: 77px; text-align: center; font-size: 0.78rem; letter-spacing: 0.22em; text-indent: 0.22em; color: var(--mt-ink); text-shadow: none; animation-name: mt-hint-flash-clair; } @keyframes mt-hint-flash-clair { 0%, 49% { color: var(--mt-ink); } 50%, 100% { color: var(--mt-accent-lit); } } /* ⚠️ LA BARRE DE MENU DOIT ÊTRE REPRISE, exactement comme sur /realestate et pour la même raison : elle est en verre sombre à 34 % (menu.css), calibrée pour passer SUR UNE VIDÉO. Ici, au-delà de 900 px, la vidéo est dans le cadre et la barre se retrouve sur un fond CLAIR, où le verre donne un gris pâle et le wordmark blanc tombe à 2,2:1. À 0,72, le fond devient suffisamment sombre pour le blanc comme pour le jaune de marque. ⚠️ menu.css n'est pas touché : il reste sans dépendance de palette. */ .menu-bar { background: rgba(22, 24, 27, 0.72); border-color: rgba(255, 255, 255, 0.16); } }