/* Devanturo — feuille de style Fond blanc cassé, une couleur d'accent, Fraunces pour les grands textes, DM Sans pour l'interface. Mise en page de base = statique (sans JS, ou mouvement réduit). La classe .anim sur active la mise en scène. */ :root { --fond: #F6F4EF; --encre: #141311; --rouge: #C8321F; --gris: #7a766f; --gris-texte: #66625b; /* texte gris de réassurance (ligne de prix, 15 €/an, pied) : ≈ 5,6:1 sur le fond ; --gris (≈ 4,1:1) reste pour le décoratif (constat C10) */ --ligne: #e3dfd6; --serif: 'Fraunces', Georgia, 'Times New Roman', serif; --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --entete-h: 84px; /* hauteur réservée à l'en-tête (promesse sur deux lignes) ; 52 px après le récit sur mobile (html.apres) ; 64 px à partir de 1024 */ --duree: 420ms; --courbe: cubic-bezier(.2, .7, .2, 1); /* transitions de l'interface (CAP §1) */ } * { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--fond); color: var(--encre); -webkit-text-size-adjust: 100%; } body { font-family: var(--sans); font-size: 17px; line-height: 1.45; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } ul, ol { list-style: none; } button { font: inherit; color: inherit; } [hidden] { display: none !important; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Focus visible au clavier, une seule couleur ; le champ garde son filet bas épaissi (CAP §15, constat M7). */ :where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; } /* Menu ouvert : verrou posé sur et non sur (sinon body devient conteneur de défilement et la scène collante saute : même piège que la modale, demos.css). */ .menu-ouvert body { overflow: hidden; } /* En-tête : transparent sur le récit ; opaque, filet bas et compact (mobile) dès que le pied de page entre à l'écran (html.apres, posé par page.js — constat I3). Le filet est un box-shadow interne : la hauteur ne bouge pas. */ .entete { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: calc(2px + env(safe-area-inset-top)) 20px 8px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; pointer-events: none; background: rgba(246, 244, 239, 0); box-shadow: inset 0 -1px 0 rgba(227, 223, 214, 0); transition: background-color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe); } .entete > * { pointer-events: auto; } .apres .entete, .menu-ouvert .entete { pointer-events: auto; } /* Version statique (sans .anim) : la page défile sous l'en-tête dès le début, il est donc opaque tout de suite. */ .apres .entete, :root:not(.anim) .entete { background: rgba(246, 244, 239, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 -1px 0 var(--ligne); } /* Première page (#accueil) : elle défile normalement sous l'en-tête ; sans fond, « DEVANTURO » et « Menu » passaient sur ses textes (captures téléphone du 14/09). */ html.anim:not(.accueil-quitte) .entete { background: rgba(246, 244, 239, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .entete-marque, .entete-lien, .nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; } /* Logo Devanturo (D + fourchette, choisi le 14/09/2026) devant le nom. */ .marque-icone { width: 20px; height: 20px; margin-right: 10px; flex: none; } .nav { display: none; } /* sous 1024 : dans le menu */ /* Le CTA de l'en-tête : bouton rouge carré, le même geste que partout (constat C04). Sous 1024, « Rendez-vous » compact collé à « Menu ». Caché sans décaler l'en-tête (visibility + opacity) quand un autre « Prendre rendez-vous » est à l'écran (html.cta-ecran, posé par recit.js), pendant l'introduction sur mobile, et menu ouvert (le menu a le sien). */ .entete-lien { justify-content: center; margin-left: auto; margin-right: 8px; padding: 0 12px; background: var(--rouge); color: #fff; font: 500 14px/1 var(--sans); letter-spacing: .01em; text-transform: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--duree) var(--courbe), opacity 260ms var(--courbe), visibility 0s; } .entete-lien:hover { background: #a82816; } .entete-long { display: none; } .cta-ecran .entete-lien, .menu-ouvert .entete-lien { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 260ms var(--courbe), visibility 0s linear 260ms; } @media (max-width: 1023.98px) { .anim:not(.intro-finie) .entete-lien { opacity: 0; visibility: hidden; pointer-events: none; } } .menu-bouton { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-right: -10px; padding: 0 10px; border: 0; background: none; letter-spacing: inherit; text-transform: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* La promesse, lisible dès la première seconde, sur tous les écrans ; après le récit, sur mobile, elle laisse la place à un en-tête de 52 px (reprise en toutes lettres dans l'offre). 14 px et le prix et le paiement en graisse 500 : ce qui est vendu se lit avant la démo (constat C05). */ .promesse { flex-basis: 100%; order: 3; margin: 0; font-size: 14px; line-height: 1.3; letter-spacing: .01em; text-transform: none; color: var(--encre); pointer-events: none; } .promesse b { font-weight: 500; } @media (max-width: 1023.98px) { :root.apres { --entete-h: 52px; } .apres .entete { padding-top: calc(4px + env(safe-area-inset-top)); padding-bottom: 4px; } .apres .promesse { display: none; } } /* Menu mobile : panneau plein écran sous l'en-tête, ouvert par page.js (CAP §3.2). */ .menu { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; overflow-y: auto; background: var(--fond); padding: calc(var(--entete-h) + 16px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom)); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity 260ms var(--courbe), transform 260ms var(--courbe), visibility 0s linear 260ms; } .menu.ouvert { visibility: visible; opacity: 1; transform: none; transition: opacity 260ms var(--courbe), transform 260ms var(--courbe), visibility 0s; } .menu-liens a { display: flex; align-items: center; min-height: 64px; font: 300 32px/1.1 var(--serif); letter-spacing: -.01em; text-decoration: none; border-bottom: 1px solid var(--ligne); } .menu-pied { margin-top: auto; padding-top: 24px; } .menu-cta { display: block; text-align: center; background: var(--rouge); color: #fff; padding: 18px 16px; text-decoration: none; font-weight: 500; font-size: 16px; } .menu-tel { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; font-size: 15px; text-decoration: none; } .menu-tel > span { border-bottom: 1px solid currentColor; padding-bottom: 2px; } @media (prefers-reduced-motion: reduce) { .entete, .menu, .barre { transition: none; } } /* Typographie */ h2.etiquette { font-weight: 400; } .etiquette { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--rouge); margin-bottom: 18px; } .titre { font-family: var(--serif); font-weight: 300; font-size: clamp(48px, 14vw, 104px); line-height: .94; letter-spacing: -.025em; font-variation-settings: 'opsz' 144; text-wrap: balance; } .phrase { font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 7.4vw, 44px); line-height: 1.06; letter-spacing: -.012em; font-variation-settings: 'opsz' 96; text-wrap: balance; } .phrase + .titre, .titre + .phrase { margin-top: 14px; } .mot { display: inline-block; } /* Première page (14/09, demandée par Baptiste) : une phrase en gros, le prix, deux boutons et la démo visible ; l'histoire commence en descendant. Téléphone : texte centré puis les écrans de la démo. Ordinateur : texte à gauche, démo à droite, le tout sur un écran. On peut toujours y remonter (logo). */ .accueil { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: 30px; max-width: 1480px; margin: 0 auto; padding: calc(var(--entete-h) + 26px + env(safe-area-inset-top)) 22px 24px; } .accueil-texte { display: flex; flex-direction: column; align-items: center; } .accueil-etiquette { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--rouge); } .accueil-titre { margin-top: 14px; font: 300 clamp(36px, 10vw, 60px)/1.02 var(--serif); letter-spacing: -.028em; font-variation-settings: 'opsz' 144; text-wrap: balance; } .accueil-prix { display: block; margin-top: .16em; color: var(--rouge); font-weight: 400; } .accueil-sous { margin-top: 16px; max-width: 34ch; font-size: 16px; line-height: 1.4; color: var(--gris-texte); text-wrap: balance; } .accueil-actions { margin-top: 22px; width: 100%; max-width: 420px; display: grid; gap: 10px; } .accueil-actions .bouton-rdv { min-height: 56px; } .accueil-demo { display: flex; align-items: center; justify-content: center; min-height: 56px; border: 1px solid var(--encre); color: var(--encre); text-decoration: none; font: 500 15px/1.2 var(--sans); transition: background-color var(--duree) var(--courbe), color var(--duree) var(--courbe); } .accueil-demo:hover { background: var(--encre); color: var(--fond); } .accueil-lancement { margin-top: 12px; font-size: 14px; color: var(--rouge); } .accueil-lancement b { font-weight: 600; } .accueil-etapes { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; font-size: 13px; color: var(--encre); } .accueil-etapes li { display: inline-flex; align-items: center; gap: 8px; } .accueil-etapes b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--rouge); color: #fff; font: 600 12px/1 var(--sans); } /* Les écrans de la démo : un seul lien (clic = modale), captures fixes, aucune animation lourde. */ .accueil-ecrans { position: relative; display: block; width: 100%; max-width: 520px; aspect-ratio: 16 / 11.5; color: var(--encre); text-decoration: none; -webkit-tap-highlight-color: transparent; } .accueil-ordi { position: absolute; right: 0; top: 0; width: 86%; aspect-ratio: 16 / 10; background: #111; border-radius: 10px; padding: 1.5%; box-shadow: 0 22px 56px rgba(20, 19, 17, .22); transition: transform var(--duree) var(--courbe); } .accueil-tel { position: absolute; left: 0; bottom: 6%; width: 28%; aspect-ratio: 9 / 19.2; background: #111; border-radius: 16px; padding: 2.2%; box-shadow: 0 22px 46px rgba(20, 19, 17, .3); transition: transform var(--duree) var(--courbe); } /* Chaque écran joue une vraie vidéo de la démo (fond en flammes + défilement), mise en pause quand la première page quitte l'écran (recit.js). */ .accueil-defile { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; container-type: size; background: #0d0c0b; } .accueil-ordi .accueil-defile { border-radius: 6px; } .accueil-tel .accueil-defile { border-radius: 12px; } .accueil-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; } .accueil-jouer { position: absolute; left: 57%; top: 66%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--fond); color: var(--encre); font: 500 14px/1 var(--sans); box-shadow: 0 8px 24px rgba(20, 19, 17, .25); white-space: nowrap; transition: background-color var(--duree) var(--courbe), color var(--duree) var(--courbe); } .accueil-legende { position: absolute; right: 0; bottom: 0; font-size: 11px; color: var(--gris-texte); } .accueil-ecrans:hover .accueil-ordi { transform: translateY(-4px); } .accueil-ecrans:hover .accueil-tel { transform: translateY(-8px); } .accueil-ecrans:hover .accueil-jouer { background: var(--rouge); color: #fff; } .accueil-suite { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; color: var(--encre); text-decoration: none; } .accueil-suite span { border-bottom: 1px solid currentColor; padding-bottom: 2px; } /* Tant que la première page est à l'écran : la promesse de l'en-tête (redondante) et son bouton s'effacent sans décaler l'en-tête. */ html:not(.accueil-quitte) .promesse { visibility: hidden; } html:not(.accueil-quitte) .entete-lien { opacity: 0; visibility: hidden; pointer-events: none; } /* jamais deux « Prendre rendez-vous » à l'écran */ @media (min-width: 1024px) { .accueil { min-height: 100svh; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); grid-template-rows: 1fr auto; column-gap: 5vw; row-gap: 2vh; align-items: center; justify-items: stretch; text-align: left; padding: calc(var(--entete-h) + 3vh) 6vw 2vh; } .accueil-texte { align-items: flex-start; } .accueil-etapes { justify-content: flex-start; margin-top: 3.2vh; font-size: clamp(14px, .95vw, 17px); } .accueil-titre { margin-top: 2.4vh; font-size: clamp(46px, 4.9vw, 92px); } .accueil-sous { margin-top: 2.8vh; max-width: 40ch; font-size: clamp(17px, 1.2vw, 22px); } .accueil-actions { margin-top: 4vh; max-width: none; width: auto; display: flex; gap: 14px; } .accueil-actions a { min-height: 60px; padding: 0 32px; font-size: 17px; } .accueil-ecrans { max-width: none; justify-self: end; } .accueil-tel { border-radius: 24px; } .accueil-tel .accueil-defile { border-radius: 18px; } .accueil-suite { grid-column: 1 / -1; justify-self: center; } } @media (prefers-reduced-motion: reduce) { .accueil-ordi, .accueil-tel { transition: none; } } /* la démo défile quand même, lentement : c'est le produit qu'on montre (demande du 14/09) */ /* Récit : mise en page de base */ .recit { position: relative; } .scene { position: relative; padding: calc(88px + env(safe-area-inset-top)) 24px 48px; max-width: 560px; margin: 0 auto; } .chapitre { padding: 40px 0; } .lumiere, .cartes { display: none; } .tel { position: relative; width: min(56vw, 215px); aspect-ratio: 9 / 19.2; margin: 32px auto; } .ecran > .ecran-braise { opacity: 1; } /* version statique : le téléphone montre LE BRAISÉ, juste avant la démo */ .rdv { margin-top: 36px; } /* Récit : mise en scène (html.anim) */ /* Frise de 0 à 218 unités (U, recit.js) : 100vh d'écran + 1133,6vh de défilement = 5,2vh par unité, comme toutes les frises précédentes. Changer la longueur de la frise (recit.js) = changer cette hauteur dans la même proportion (on garde la même distance par unité). */ .anim .recit { height: 1233.6vh; } .anim .scene { position: sticky; top: 0; height: 100svh; max-width: none; margin: 0; padding: 0; overflow: hidden; perspective: 1200px; } .anim .chapitre { position: absolute; left: 24px; right: 24px; top: calc(108px + env(safe-area-inset-top)); z-index: 5; padding: 0; max-width: 560px; } .anim .mot, .anim .ent { opacity: 0; transform: translateY(.4em); } /* Les chapitres de la suite (comment ça se passe, offre, qui vous parle, questions) prennent la hauteur de l'écran : ils commencent plus haut (juste sous l'en-tête) et restent au-dessus de la barre du bas. */ .anim .chapitre-plein { top: calc(96px + env(safe-area-inset-top)); } .anim .lumiere { display: block; position: absolute; inset: -20%; z-index: 1; opacity: 0; pointer-events: none; background: radial-gradient(60% 50% at 72% 28%, rgba(255, 190, 110, .6), rgba(255, 190, 110, 0) 70%); } .anim .cartes { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; } .carte { position: absolute; width: 31vw; max-width: 130px; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 24px 48px -20px rgba(20, 19, 17, .4); } .carte img { width: 100%; height: 100%; object-fit: cover; } .carte-1 { left: 5%; top: 42%; } .carte-2 { right: 4%; top: 36%; } .carte-3 { left: 9%; top: 68%; } /* La carte « ? » vit dans un calque devant le téléphone (.cartes-avant) ; sur mobile, sous ses résultats : entièrement visible à l'arrivée de l'introduction (unité 42). */ .anim .cartes-avant { z-index: 5; } .carte-vide { right: 4%; top: 71%; display: grid; place-items: center; align-content: center; gap: 6px; font-family: var(--serif); font-size: 64px; color: var(--rouge); font-weight: 300; } .carte-vide span { line-height: 1; } .carte-vide small { font: 500 11px/1.2 var(--sans); letter-spacing: .04em; color: var(--encre); text-align: center; padding: 0 6px; } /* Légende « Exemple » sur l'écran du téléphone quand il montre LE BRAISÉ (elle suit l'opacité de l'écran). */ .ecran-braise { position: relative; } .ecran-exemple { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); padding: 4px 10px; background: var(--fond); color: var(--encre); font: 600 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(20, 19, 17, .3); white-space: nowrap; } /* Barre de progression en haut de l'écran, mise en scène seulement. */ .progression { display: none; } .anim .progression { display: block; position: fixed; left: 0; right: 0; top: 0; z-index: 60; height: 3px; pointer-events: none; } .anim .progression span { display: block; height: 100%; background: var(--rouge); transform-origin: 0 50%; transform: scaleX(var(--progression, 0)); } /* Hauteur du téléphone — tableau unique (CAP §4.5), recopié à l'identique dans mesures() de scene3d.js (Hp). Toute modification doit être faite des DEUX côtés, sinon le téléphone WebGL et le téléphone HTML ne coïncident plus au fondu croisé (78–82 %) : vérifier ensuite window.__scene3d.ecartTel(). La position verticale (top: 41 %) ne change jamais : seules les fractions y de recit.js jouent. */ .anim .tel { position: absolute; left: 50%; top: 41%; margin: 0; width: auto; height: min(52svh, 470px); z-index: 4; transform-style: preserve-3d; will-change: transform; } /* Écran bas (375×667) : téléphone plus court, titre plus serré et cartes descendues au niveau du téléphone, pour que « Il ne vous voit pas. » reste entièrement lisible (CAP §4.5, constat I1). */ @media (max-width: 759.98px) and (max-height: 699.98px) { .anim .tel { height: min(48svh, 400px); } .titre { font-size: clamp(40px, 12vw, 104px); } .carte-1 { top: 48%; } .carte-2 { top: 46%; } } /* Mobile haut (390×844, 430×932) : le téléphone prend la place qu'il a (constat M8) ; recit.js passe l'échelle du chapitre 4 à 1 sur le même palier. */ @media (max-width: 759.98px) and (min-height: 800px) { .anim .tel { height: min(56svh, 520px); } } .anim .ecran > .ecran-braise { opacity: 0; } /* Tant que les actions de la démo ne sont pas .actif, elles sont aussi invisibles pour le clavier : aucun lien tabulable dans le vide (constat M2). */ .anim .rdv { position: absolute; left: 24px; right: 24px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 6; margin: 0; opacity: 0; visibility: hidden; pointer-events: none; max-width: 560px; } .anim .rdv.actif { visibility: visible; pointer-events: auto; } .anim .rdv.visible { visibility: visible; } /* visible pendant ses fondus (91 → 115), cliquable seulement avec .actif (92 → 112) */ /* Mise en scène 3D (scene3d.js) : n'existe que par-dessus html.anim. Aucune transition ici : les opacités sont pilotées image par image par le défilement. */ .anim .scene3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; opacity: var(--tel-3d, 1); } /* width/height : un canvas garderait sinon la taille de son tampon */ .anim .scene3d.masque { visibility: hidden; } .trois .tel-corps { opacity: var(--tel-css, 0); } .trois .tel { opacity: 1 !important; filter: none !important; } /* Le téléphone */ .tel-corps { position: absolute; inset: 0; background: #0b0b0b; border-radius: 34px; box-shadow: inset 0 0 0 1.5px #3a3a3a, inset 0 0 0 4px #111, 0 40px 70px -30px rgba(20, 19, 17, .55); } .tel-encoche { position: absolute; left: 50%; top: 12px; width: 26%; height: 14px; transform: translateX(-50%); background: #000; border-radius: 10px; z-index: 3; } .ecran { position: absolute; inset: 6px; border-radius: 29px; overflow: hidden; background: #000; } .ecran > div { position: absolute; inset: 0; opacity: 0; } .ecran-noir { background: #050505; opacity: 1; } .ecran-recherche { background: #f5f5f3; padding: 40px 10px 10px; color: #222; } /* Tailles relatives à l'écran (cqw, base : écran de 208 px de large) après une valeur en px de repli : lisibles sur grand écran (CAP §15, M1). */ .ecran-recherche { padding: 19.2cqw 4.8cqw 4.8cqw; } .recherche-barre { background: #fff; border: 1px solid #e2e2df; border-radius: 20px; padding: 8px 12px; padding: 3.85cqw 5.8cqw; font-size: 11px; font-size: 5.3cqw; color: #333; } .recherche-barre::before { content: '⌕ '; color: #888; } /* La frappe (CAP §4.4) : le texte garde son espace final pendant qu'il se tape ; le curseur n'existe qu'en mise en scène, clignote tant que la frappe est en cours (.frappe, posé par recit.js) et s'éteint une fois « restaurant ce soir » écrit en entier. */ .recherche-texte { white-space: pre; } .recherche-curseur { display: none; } .anim .recherche-curseur { display: inline-block; width: 1px; height: 1.1em; margin-left: 1px; vertical-align: -.18em; background: #333; opacity: 0; } .anim .frappe .recherche-curseur { animation: clignote 1s steps(1, end) infinite; } @keyframes clignote { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .recherche-liste li { display: flex; gap: 8px; gap: 3.85cqw; align-items: center; padding: 9px 2px; padding: 4.3cqw 1cqw; border-bottom: 1px solid #e9e9e6; } .recherche-vignette { width: 40px; height: 40px; width: 19.2cqw; height: 19.2cqw; border-radius: 8px; flex: none; background: #e6e3dc center / cover no-repeat; } .vignette-bistrot { background-image: url('assets/img/carte-bistrot.webp'); } .vignette-moderne { background-image: url('assets/img/carte-moderne.webp'); } .vignette-bar { background-image: url('assets/img/carte-bar.webp'); } .recherche-liste b { display: block; font-size: 11px; font-size: 5.3cqw; font-weight: 500; } .recherche-liste small { display: block; font-size: 8.5px; font-size: 4.1cqw; color: #777; margin-top: 2px; margin-top: 1cqw; } .ecran-braise { background: #0d0c0b; } .ecran-braise img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } /* Les deux écrans de la suite, dessinés en HTML : tailles relatives à l'écran (cqw), valeur en px d'abord pour les navigateurs sans container queries. Le téléphone est aria-hidden : ces textes sont décoratifs (la même information est dans le texte du chapitre). */ .ecran { container-type: size; } /* Comment ça se passe : la frise des trois étapes. */ .ecran-etapes { background: var(--fond); color: var(--encre); padding: 58px 18px 18px; padding: 28cqw 9cqw 9cqw; } .et-haut { text-align: center; font: 500 9px/1 var(--sans); font-size: 4cqw; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); } .et-frise { margin-top: 44px; margin-top: 20cqw; padding-left: 30px; padding-left: 14cqw; } .et-frise li { position: relative; padding-bottom: 36px; padding-bottom: 17cqw; } .et-frise li:last-child { padding-bottom: 0; } .et-frise li::before { content: ''; position: absolute; left: -24px; left: -11.4cqw; top: 3px; top: 1.4cqw; width: 12px; width: 5.4cqw; height: 12px; height: 5.4cqw; border-radius: 50%; border: 2px solid var(--rouge); border-width: .9cqw; background: var(--fond); box-sizing: border-box; } .et-frise li::after { content: ''; position: absolute; left: -19px; left: -9.15cqw; top: 17px; top: 7.8cqw; bottom: 3px; width: 2px; width: .9cqw; background: var(--ligne); } .et-frise li:last-child::after { display: none; } .et-frise .et-fin::before { background: var(--rouge); } .et-frise b { display: block; font: 300 18px/1.1 var(--serif); font-size: 8.4cqw; letter-spacing: -.01em; } .et-frise small { display: block; margin-top: 4px; margin-top: 1.8cqw; font: 400 10px/1.3 var(--sans); font-size: 4.6cqw; color: var(--gris); } .ligne-prix { margin-top: 12px; font-size: 13px; color: var(--gris-texte); } /* Les deux actions de la démo, côte à côte, même hauteur (56 px) : « Explorer le site → » (secondaire, contour encre) et « Prendre rendez-vous » (principal, rouge plein). Carrés ; la ligne téléphone garde une cible de 44 px, soulignée sur son . */ .rdv-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .bouton-rdv { display: flex; align-items: center; justify-content: center; min-height: 56px; border: 0; border-radius: 0; background: var(--rouge); color: #fff; padding: 6px 4px; text-align: center; text-decoration: none; font: 500 15px/1.2 var(--sans); -webkit-tap-highlight-color: transparent; transition: background-color var(--duree) var(--courbe); } .bouton-rdv:hover, .barre a:hover, .menu-cta:hover { background: #a82816; } /* rouge assombri : le principal survolé ne ressemble plus au secondaire .explorer survolé (encre plein) */ .rdv-tel { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; font-size: 14px; color: var(--encre); text-decoration: none; } .rdv-tel > span { border-bottom: 1px solid currentColor; padding-bottom: 1px; } .rdv .ligne-prix { margin-top: 2px; } /* Premier écran : le raccourci pour les pressés (l'introduction automatique remplace l'invitation à défiler) */ /* Cible de 44 px sans déplacer la mise en page (margin négative) ; le soulignement reste sur le interne (CAP §15, I5). */ .raccourci { display: inline-flex; align-items: center; min-height: 44px; margin: 8px 0 -12px; font: 500 13px/1 var(--sans); letter-spacing: .03em; color: var(--encre); text-decoration: none; } .raccourci > span { border-bottom: 1px solid var(--encre); padding-bottom: 4px; } /* Chapitre 5 — LE BRAISÉ : le même site sur téléphone et sur ordinateur. Base = version statique (texte, puis le portable CSS et un petit téléphone, les deux images) ; .anim = composition dans la scène, placée par recit.js (mêmes tweens pour le portable 3D et ce portable CSS). Angles droits partout sauf les écrans. */ .chapitre[data-chapitre="5"] .etiquette { margin-bottom: 16px; } .explorer { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 6px 4px; border: 1px solid var(--encre); border-radius: 0; text-align: center; color: var(--encre); background: transparent; text-decoration: none; font: 500 15px/1.2 var(--sans); transition: background-color var(--duree) var(--courbe), color var(--duree) var(--courbe); } .explorer:hover { background: var(--encre); color: #fff; } .demo-duo { position: relative; margin: 0 0 32px; padding-bottom: 8%; } .portable { position: relative; width: 84%; margin-left: auto; } .portable-ecran { position: relative; display: flex; align-items: center; aspect-ratio: 16 / 10.6; padding: 0 2.2%; background: #1c1b19; border-radius: 10px 10px 3px 3px; } .portable-encoche { position: absolute; left: 50%; top: 0; z-index: 1; width: 12%; height: 3.2%; transform: translateX(-50%); background: #1c1b19; border-radius: 0 0 4px 4px; } .portable-vitre { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: #0d0c0b; border-radius: 2px; } .portable-vitre img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .portable-base { position: relative; width: 112%; margin-left: -6%; padding-top: 2.4%; background: linear-gradient(#d9d6cf, #b8b4ac 45%, #8f8b83); border-radius: 0 0 10px 10px; box-shadow: 0 26px 44px -26px rgba(20, 19, 17, .45); } .portable-cran { position: absolute; left: 50%; top: 0; width: 11%; height: 45%; transform: translateX(-50%); background: #a9a59d; border-radius: 0 0 6px 6px; } .demo-tel { position: absolute; left: 0; bottom: 0; width: 24%; aspect-ratio: 9 / 19.2; padding: 4px; background: #0b0b0b; border-radius: 20px; box-shadow: inset 0 0 0 1.5px #3a3a3a, 0 30px 50px -26px rgba(20, 19, 17, .55); } .demo-tel-ecran { width: 100%; height: 100%; overflow: hidden; border-radius: 16px; background: #0d0c0b; } .demo-tel-ecran img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } /* Le bouton de l'écran : transparent, la mention n'apparaît qu'au survol souris ou au focus clavier (l'action, elle, ne dépend jamais du survol). */ .portable-clic { position: absolute; left: 16%; top: 0; width: 84%; aspect-ratio: 16 / 10.6; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; } .portable-clic > span { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; white-space: nowrap; background: rgba(246, 244, 239, .94); border: 1px solid var(--encre); color: var(--encre); font: 500 13px/1 var(--sans); letter-spacing: .01em; opacity: 0; transition: opacity var(--duree) var(--courbe); pointer-events: none; } .portable-clic:hover > span, .portable-clic:focus-visible > span { opacity: 1; } /* Mise en scène : les enfants de .demo-duo se placent dans .scene ; images chargées seulement quand html.demo-prete est posé (frise ≥ 47, entrée du chapitre 3). */ .anim .demo-duo { display: contents; } .anim .demo-tel { display: none; } .anim .portable { position: absolute; left: 50%; top: 41%; z-index: 3; width: var(--portable-l, 480px); margin: 0; opacity: 0; will-change: transform; } .anim .ecran-braise img, .anim .portable img { display: none; } .anim.demo-prete .ecran-braise img, .anim.demo-prete .portable img { display: block; } .portable-3d .portable { visibility: hidden; } /* le portable 3D est chargé : le portable CSS s'efface (même principe que --tel-css / --tel-3d) */ .anim .portable-clic { left: 0; top: 0; width: 0; height: 0; aspect-ratio: auto; z-index: 6; visibility: hidden; pointer-events: none; } .anim .portable-clic.actif { visibility: visible; pointer-events: auto; } .demo-clic .tel { cursor: pointer; } /* Tenue (96 → 112) : le téléphone flotte à peine, seulement 3D active et pointeur fin (le portable 3D flotte dans scene3d.js). */ @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .trois.demo-tenue .tel-corps { animation: flotte 6s ease-in-out infinite; } } @keyframes flotte { 0%, 100% { transform: none; } 25% { transform: translate3d(0, -4px, 0) rotate(.6deg); } 75% { transform: translate3d(0, 4px, 0) rotate(-.6deg); } } /* La suite du récit : comment ça se passe, l'offre, qui vous parle + les questions, le final (décision du 13/09 : tout dans le récit). Base = version statique (blocs à la suite dans la colonne de 560 px) ; .anim = chapitres de la scène collante, même colonne que le reste. */ .chapitre[id] { scroll-margin-top: calc(var(--entete-h) + 16px); } /* version statique : les ancres s'arrêtent sous l'en-tête (en mise en scène, page.js passe par la frise) */ .etapes p, .offre-liste li, .qui-texte, details p { font-size: 15px; line-height: 1.4; } /* Comment ça se passe : trois étapes numérotées, le titre de chaque étape en serif. */ .etapes { border-top: 1px solid var(--ligne); } .etapes li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--ligne); } .etapes .num { font: 500 14px/1.9 var(--sans); color: var(--rouge); } .etapes p { color: #3a3833; } .etapes b { display: block; margin-bottom: 4px; font: 300 clamp(21px, 5.6vw, 28px)/1.12 var(--serif); letter-spacing: -.01em; color: var(--encre); font-variation-settings: 'opsz' 96; } /* L'offre : le prix en grand, la condition en gras, la liste à tirets rouges, le bouton rouge. */ .offre-prix { margin: 10px 0 6px; font: 300 clamp(72px, 21vw, 120px)/.9 var(--serif); letter-spacing: -.045em; font-variation-settings: 'opsz' 144; } .offre-condition { font-size: 16px; font-weight: 500; line-height: 1.35; } .offre-liste { margin-top: 10px; } .offre-liste li { position: relative; padding: 4px 0 4px 22px; line-height: 1.3; } .offre-liste li::before { content: ''; position: absolute; left: 0; top: calc(4px + .6em); width: 12px; height: 2px; background: var(--rouge); } /* 2 px : à 1,5 px les tirets s'arrondissaient à 1 ou 2 px selon la ligne */ .offre-lancement { margin-top: 6px; font-size: 14px; line-height: 1.35; color: var(--rouge); } .offre-lancement b { font-weight: 600; } .offre-ensuite { margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--gris-texte); } .offre-actions { margin-top: 16px; } .offre-actions .bouton-rdv { width: 100%; } /* Qui vous parle + les questions : UN seul écran (décision du 13/09). Base = les deux blocs à la suite ; la mise en scène les compose en bande + questions (< 1024) ou en deux colonnes (≥ 1024). Portrait : initiales en attendant la vraie photo. */ .qui { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: start; } .qui .etiquette { margin-bottom: 10px; } .portrait { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: #e6e1d6; color: var(--gris); font: 300 19px/1 var(--serif); letter-spacing: .02em; } .portrait img { width: 100%; height: 100%; object-fit: cover; } .qui-texte { margin-top: 12px; color: #3a3833; } .qui-court { display: none; } /* version courte de .qui-texte : seulement dans la mise en scène sous 1024 (plus bas) */ .qui-accent { margin-top: 10px; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--rouge); } .faq { margin-top: 40px; } /* Les questions : accordéons natifs, une seule réponse ouverte (recit.js), réponses de deux lignes au plus. */ .questions { border-top: 1px solid var(--ligne); } details { border-bottom: 1px solid var(--ligne); } summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 50px; padding: 10px 0; font: 300 clamp(19px, 5vw, 24px)/1.15 var(--serif); letter-spacing: -.01em; -webkit-tap-highlight-color: transparent; } summary::-webkit-details-marker { display: none; } summary::after { content: '+'; flex: none; font: 400 22px/1 var(--sans); color: var(--rouge); } details[open] summary::after { content: '–'; } details p { max-width: 46ch; padding: 0 0 14px; color: #3a3833; } .anim details[open] p { animation: reponse .32s var(--courbe); } @keyframes reponse { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* Mise en scène sous 1024 : « qui vous parle » en bande (portrait, une phrase, « à dix minutes de chez vous »), cinq questions dessous, le tout dans la hauteur de l'écran sans défilement interne. La question sur le nom de domaine (déjà dite dans « ce que je paie ») n'y est pas. */ @media (max-width: 1023.98px) { .anim .qui { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ligne); } .anim .portrait { width: 48px; height: 48px; font-size: 17px; } .anim .qui .etiquette { margin-bottom: 6px; } .anim .qui-phrase { font-size: clamp(18px, 4.8vw, 26px); line-height: 1.15; } .anim .qui-texte { display: none; } .anim .qui-court { display: block; margin-top: 6px; font-size: 14px; line-height: 1.35; color: #3a3833; } .anim .qui-accent { margin-top: 6px; font-size: 14px; } .anim .faq { margin-top: 14px; } .anim .faq .etiquette { margin-bottom: 8px; } .anim .questions { border-top: 0; } .anim .q-secondaire { display: none; } .anim summary { min-height: 46px; padding-block: 8px; font-size: clamp(18px, 4.8vw, 22px); } .anim details p { padding-bottom: 10px; } } /* Le final — prendre rendez-vous : l'écran le plus simple du site. Base = bloc lisible ; mise en scène = centré dans l'écran, sans objet. */ .final-titre.avec-nom { font-size: clamp(36px, 10vw, 64px); line-height: 1; } .final-phrase { margin-top: 20px; font-size: 17px; line-height: 1.4; } .final-points { margin-top: 16px; } .final-points li { position: relative; padding: 3px 0 3px 22px; font-size: 15px; font-weight: 500; line-height: 1.3; } .final-points li::before { content: ''; position: absolute; left: 0; top: calc(3px + .6em); width: 12px; height: 2px; background: var(--rouge); } .final-actions { margin-top: 24px; } .bouton-final { width: 100%; min-height: 60px; font-size: 17px; } .anim .chapitre.chapitre-final { top: var(--entete-h); bottom: 0; left: 24px; right: 24px; width: auto; max-width: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-bottom: calc(24px + env(safe-area-inset-bottom)); } .anim .final-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 22px; } .anim .final-actions { display: flex; flex-direction: column; align-items: center; width: min(100%, 440px); } .anim .final-actions .rdv-tel { margin-top: 6px; } /* Écran bas (375×667) : l'offre tient au-dessus de la barre du bas (mesuré : 47 px avant). */ @media (max-width: 759.98px) and (max-height: 699.98px) { .anim .offre-prix { margin: 4px 0 2px; font-size: 60px; } .anim .offre-condition { font-size: 15px; } .anim .offre-liste { margin-top: 6px; } .anim .offre-liste li { padding-block: 2px; line-height: 1.25; } .anim .offre-liste li::before { top: calc(2px + .62em); } .anim .offre-ensuite { margin-top: 6px; } .anim .offre-actions { margin-top: 10px; } .anim .bouton-rdv { min-height: 50px; } html .barre { padding-block: 8px calc(8px + env(safe-area-inset-bottom)); } html .barre a { padding: 13px; } .anim summary { min-height: 44px; padding-block: 6px; font-size: 18px; } .anim .faq { margin-top: 10px; } } /* Les grandes images typographiques (prix, portrait, point d'interrogation) : seulement dans la mise en scène, au-delà de 1024 px (voir plus bas). */ .geant { display: none; } .pied { padding: 28px 24px calc(40px + env(safe-area-inset-bottom)); text-align: center; font-size: 13px; line-height: 1.5; color: var(--gris-texte); } .pied a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-block: -12px; } /* « CGV » faisait 28 px de large */ /* Prendre rendez-vous : le choix WhatsApp / appel / e-mail (