/* ============================================================================ /formulaire-maison/ — feuille de style du funnel de qualification « maison ». PORTAGE de l'app Next.js autonome (dépôt greenkub-formulaire-maison), dont le rendu était écrit en classes Tailwind. Tailwind n'est PAS réintroduit dans ce repo : chaque utilitaire est traduit ici, à valeur égale. Même parti que la LP maison (public/lp-maison/lp-maison.css) : feuille vendorée servie depuis public/, namespace unique `.fm`, aucune interférence avec le CSS du site. Ce que le portage aligne sur le design system du repo : · vert de marque, blanc, rayon de bouton et polices = tokens --gk-* ; · titres en Sora, corps en Mulish (la source demandait « Avenir », jamais chargée : elle tombait sur la police système. Mulish liste déjà Avenir en repli, le rendu Mac est donc conservé). Ce que le portage garde en valeur littérale (parité stricte avec la maquette, ces teintes n'ont pas de token) : les verts d'interaction #369B6C / #2E8259, le vert clair #E3F5EC, les gris de stepper, les gris de texte et l'erreur. Elles sont déclarées UNE fois ci-dessous et consommées par variable. Breakpoint unique : 768 px (le `md:` de la source). ============================================================================ */ .fm { /* Palette du funnel — vert de marque et blanc pris au design system. */ --fm-green: var(--gk-vert); --fm-green-hover: #369B6C; --fm-green-hover-dark: #2E8259; --fm-green-light: #E3F5EC; --fm-green-dot: #A8DEC7; --fm-step-bg: #FBFBF9; --fm-step-bg-hover: #E8E8E6; --fm-step-ink: #B0B0B0; --fm-nav-off-bg: #B0B0B0; --fm-nav-off-ink: #666666; --fm-ink: #111827; --fm-ink-2: #1f2937; --fm-ink-3: #374151; --fm-ink-4: #4b5563; --fm-ink-5: #6b7280; --fm-border: #d1d5db; --fm-border-soft: #e5e7eb; --fm-surface-hover: #f9fafb; --fm-error: #ef4444; --fm-loader-track: #f3f3f3; --fm-white: var(--gk-blanc); --fm-radius: var(--gk-radius-sm); /* 8 px — boutons, champs, encarts */ --fm-radius-card: 12px; /* cartes calendrier (rounded-xl) */ /* Le funnel reste sur fond blanc quel que soit le thème du navigateur. */ color-scheme: light; width: 100%; /* `` + `` de l'app Next donnaient au funnel toute la hauteur de l'écran en mobile : la question restait centrée et les flèches tenaient le bas de l'écran. Le gabarit Minimal ne posant pas de hauteur, on la redonne ici. `dvh` et non `vh` : la barre d'adresse mobile rogne `vh` et faisait dépasser la page. */ min-height: 100dvh; display: flex; flex-direction: column; background: var(--fm-white); color: var(--fm-ink); font-family: var(--gk-font-corps); line-height: 1.5; } /* Marges d'en-tête et de paragraphe remises à zéro : le navigateur en pose sur h1/h4/p, et tokens.css sur h1-h3 et p. L'espacement du funnel est porté par les conteneurs flex et par les marges declarees sur les blocs eux-memes. `:where()` est INDISPENSABLE ici : ecrit `.fm h4 { margin: 0 }`, ce reset vaut (0,1,1) et battait par specificite le `margin-bottom` de `.fm__title` (0,1,0) — le titre de question, celui de la confirmation, le creneau et l'encart du telephone perdaient tous leur marge en silence. `:where()` a une specificite nulle : une marge declaree sur un bloc gagne toujours. */ :where(.fm h1, .fm h4, .fm p) { margin: 0; } /* ---------- Illustration (colonne gauche desktop, bandeau haut mobile) ---------- */ .fm__visual { position: relative; width: 100%; max-height: 280px; } .fm__img { display: block; width: 100%; height: auto; max-height: 280px; object-fit: cover; } /* `hidden md:block` : l'illustration disparaît en mobile dès que l'iframe de prise de rendez-vous ou l'écran de confirmation occupe l'écran. */ .fm__visual--desktop-only { display: none; } /* ---------- Colonne de contenu ---------- */ .fm__panel { width: 100%; flex: 1 1 auto; display: flex; flex-direction: column; padding: 1rem; background: var(--fm-white); min-width: 0; } /* ---------- Stepper 1 → 5 ---------- */ .fm__stepper-wrap { padding: 0.5rem 0; } .fm__stepper { display: flex; align-items: center; justify-content: center; gap: 0.5rem; overflow-x: auto; } .fm__step-item { display: flex; align-items: center; flex-shrink: 0; } .fm__step-btn { width: 2rem; height: 2rem; border: 0; border-radius: var(--gk-radius-pill); display: flex; align-items: center; justify-content: center; font-family: inherit; font-size: 0.75rem; font-weight: 500; background: var(--fm-step-bg); color: var(--fm-step-ink); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .fm__step-btn:not(:disabled):hover { background: var(--fm-step-bg-hover); } .fm__step-btn:disabled { cursor: not-allowed; } .fm__step-btn--on, .fm__step-btn--on:not(:disabled):hover { background: var(--fm-green); color: var(--fm-white); } .fm__step-label { margin-left: 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--fm-green); white-space: nowrap; } /* ---------- Zone de question ---------- */ .fm__body { flex: 1 1 auto; display: flex; align-items: center; min-height: 0; } .fm__inner { width: 100%; padding: 0.5rem 0; } .fm__q { text-align: left; } .fm__title { font-family: var(--gk-font-display); font-size: 1.125rem; line-height: 1.55; font-weight: 700; color: var(--fm-ink); /* 1,75rem et non le `mb-4` (1rem) de la source : la question et ses reponses se touchaient, l'oeil ne separait plus l'intitule de ce qu'il faut choisir. */ margin-bottom: 1.75rem; } .fm__row { display: flex; flex-wrap: wrap; gap: 1rem; } .fm__col { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; } .fm__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 24rem; margin-bottom: 1.5rem; } .fm__grid > .fm__opt { justify-self: center; } /* ---------- Boutons de réponse et CTA ---------- */ .fm__opt, .fm__cta, .fm__btn-solid, .fm__btn-ghost { font-family: inherit; border-radius: var(--fm-radius); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .fm__opt { padding: 10px 30px; font-size: 1rem; font-weight: 500; background: var(--fm-white); color: var(--gk-noir); border: 1px solid var(--fm-border); white-space: nowrap; } .fm__opt:hover { background: var(--fm-surface-hover); } /* La source retirait la bordure sur l'option sélectionnée, ce qui faisait sauter le bouton de 2 px au clic. La bordure est conservée en vert : même rendu, sans le saut. */ .fm__opt--on, .fm__opt--on:hover { background: var(--fm-green); border-color: var(--fm-green); color: var(--fm-white); } .fm__cta { padding: 10px 30px; font-size: 1rem; font-weight: 500; background: var(--fm-green); border: 0; color: var(--fm-white); } .fm__cta:hover { background: var(--fm-green-hover); } .fm__cta:disabled { opacity: 0.6; cursor: not-allowed; background: var(--fm-green); } .fm__cta--spaced { margin-top: 1.5rem; } /* Bouton d'envoi : spinner + libellé, curseur d'attente pendant l'aller-retour n8n. */ .fm__cta--busy { display: inline-flex; align-items: center; gap: 0.5rem; } .fm__cta--busy:disabled { cursor: wait; opacity: 1; } /* ---------- Champs ---------- */ .fm__fields { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 0 0.25rem; } .fm__field { width: 100%; padding: 12px 16px; font-family: inherit; font-size: 1rem; background: var(--fm-white); color: var(--fm-ink); border: 1px solid var(--fm-border); border-radius: var(--fm-radius); } .fm__field:focus { outline: none; border-color: transparent; box-shadow: 0 0 0 2px var(--fm-green); } .fm__field--error { border-color: var(--fm-error); } .fm__field--error:focus { box-shadow: 0 0 0 2px var(--fm-error); } .fm__field:disabled { opacity: 0.6; } .fm__error { color: var(--fm-error); font-size: 0.875rem; } /* ---------- Encart vert (suggestion email, numéro suspect) ---------- */ .fm__notice { width: 100%; background: var(--fm-green-light); border: 1px solid var(--fm-green-hover); border-radius: var(--fm-radius); padding: 1rem; } .fm__notice-text { font-size: 0.875rem; color: var(--fm-ink-2); } .fm__notice-text--block { margin-bottom: 0.75rem; } .fm__notice-link { font: inherit; font-weight: 500; color: var(--fm-green-hover); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; } .fm__notice-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .fm__btn-solid { padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; background: var(--fm-green-hover); border: 0; color: var(--fm-white); } .fm__btn-solid:hover { background: var(--fm-green-hover-dark); } .fm__btn-solid:disabled { opacity: 0.6; } .fm__btn-ghost { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; background: var(--fm-white); color: var(--fm-ink-4); border: 1px solid var(--fm-border); } .fm__btn-ghost:hover { background: var(--fm-surface-hover); } .fm__btn-ghost:disabled { cursor: wait; } /* ---------- Budget ---------- */ .fm__slider-wrap { display: flex; flex-direction: column; gap: 1rem; } .fm__slider { width: 100%; /* `margin: 2px` est le defaut NAVIGATEUR de input[type=range] : avec width 100 % il faisait deborder la piste de 4 px. Comme .fm__body porte overflow-y: auto en desktop, la spec force alors overflow-x a `auto` — d'ou une barre de scroll horizontale sur toute la colonne a l'etape budget. */ margin: 0; height: 8px; background: var(--fm-green-light); border-radius: var(--fm-radius); accent-color: var(--fm-green); -webkit-appearance: none; appearance: none; cursor: pointer; } .fm__slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: var(--gk-radius-pill); background: var(--fm-green); border: 2px solid var(--fm-white); box-shadow: var(--gk-shadow-card); cursor: pointer; } .fm__slider::-moz-range-thumb { width: 24px; height: 24px; border-radius: var(--gk-radius-pill); background: var(--fm-green); border: 2px solid var(--fm-white); box-shadow: var(--gk-shadow-card); cursor: pointer; } .fm__budget { text-align: center; font-family: var(--gk-font-display); font-size: 1.5rem; font-weight: 700; color: var(--fm-green); } /* ---------- Recherche de terrain (embed) ---------- */ .fm__embed { width: 100%; border: 0; display: block; } /* ---------- Flèches de navigation ---------- */ .fm__nav { padding: 1rem 0; display: flex; justify-content: flex-end; align-items: center; gap: 1rem; } .fm__nav-btn { width: 40px; height: 40px; border: 0; border-radius: var(--fm-radius); display: flex; align-items: center; justify-content: center; background: var(--fm-green); color: var(--fm-white); cursor: pointer; transition: background-color 0.15s ease; } .fm__nav-btn:hover { background: var(--fm-green-hover); } .fm__nav-btn:disabled { background: var(--fm-nav-off-bg); color: var(--fm-nav-off-ink); cursor: not-allowed; } .fm__nav-btn svg { width: 1.25rem; height: 1.25rem; } /* ---------- Attente ---------- */ @keyframes fm-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .fm__spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid var(--fm-loader-track); border-top-color: var(--fm-green); border-radius: var(--gk-radius-pill); animation: fm-spin 1s linear infinite; } .fm__loader { width: 50px; height: 50px; border: 5px solid var(--fm-loader-track); border-top: 5px solid var(--fm-green); border-radius: var(--gk-radius-pill); animation: fm-spin 1s linear infinite; margin: 0 auto; } /* ---------- Prise de rendez-vous ---------- */ .fm__booking { display: flex; align-items: center; justify-content: center; height: 100%; padding: 2rem 0; } .fm__booking-inner { width: 100%; } .fm__booking-head { text-align: center; max-width: 48rem; margin: 0 auto 1rem; } .fm__booking-title { font-family: var(--gk-font-display); font-size: 1.25rem; line-height: 1.4; font-weight: 700; color: var(--fm-ink); margin-bottom: 0.5rem; /* `mb-2` de la source */ } /* Deux mentions de reassurance sous le titre, sur une seule ligne. La coche verte sert de separateur : un point median entre les deux se retrouverait orphelin au passage a la ligne en mobile. `gap` gere les deux axes, donc l'empilement mobile reste propre sans regle supplementaire. */ .fm__booking-sub { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; /* 12 px par defaut : c'est la taille a laquelle les deux mentions tiennent sur UNE ligne des ~350 px de large. 14 px demanderait ~365 px, donc le passage a 14 px attend que la colonne soit vraiment large (bloc >= 900 px ci-dessous) et PAS le breakpoint de 768 : a 768 px la colonne de droite ne fait que 272 px. */ gap: 0.2rem 0.75rem; font-size: 0.75rem; color: var(--fm-ink-4); } .fm__booking-sub li { display: inline-flex; align-items: baseline; gap: 0.375rem; } .fm__booking-sub li::before { content: '✓'; color: var(--fm-green); font-weight: 700; } .fm__booking-slot { min-height: 400px; } .fm__booking-frame { width: 100%; height: 100%; min-height: 400px; } /* ---------- Confirmation de créneau ---------- */ .fm__conf { display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 2rem 1rem; } .fm__conf-head { text-align: center; margin-bottom: 1.5rem; } .fm__conf-badge-wrap { position: relative; display: inline-block; margin-bottom: 1rem; } .fm__conf-badge { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; background: var(--fm-green); border-radius: var(--gk-radius-pill); color: var(--fm-white); font-size: 2.25rem; font-weight: 700; line-height: 1; } .fm__conf-deco { position: absolute; color: var(--fm-green); line-height: 1; } .fm__conf-deco--star1 { top: -0.5rem; left: -0.5rem; font-size: 1.5rem; } .fm__conf-deco--star2 { top: -0.25rem; right: -0.5rem; font-size: 1.25rem; } .fm__conf-dot { position: absolute; border-radius: var(--gk-radius-pill); background: var(--fm-green); width: 0.5rem; height: 0.5rem; } .fm__conf-dot--1 { bottom: -0.25rem; left: 25%; } .fm__conf-dot--2 { bottom: -0.5rem; right: 25%; } .fm__conf-dot--3 { top: 50%; left: -0.75rem; width: 0.375rem; height: 0.375rem; background: var(--fm-green-dot); } .fm__conf-dot--4 { top: 33.333%; right: -0.75rem; width: 0.375rem; height: 0.375rem; background: var(--fm-green-dot); } .fm__conf-title { font-family: var(--gk-font-display); font-size: 1.875rem; line-height: 1.2; font-weight: 700; color: var(--fm-ink); margin-bottom: 0.5rem; } .fm__conf-sub { color: var(--fm-ink-4); font-size: 1.125rem; } .fm__conf-slot { display: inline-block; margin-top: 0.75rem; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; color: var(--fm-ink-3); background: var(--fm-green-light); border-radius: var(--fm-radius); } .fm__cal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .fm__cal-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; background: var(--fm-white); border: 1px solid var(--fm-border-soft); border-radius: var(--fm-radius-card); text-decoration: none; transition: box-shadow 0.2s ease, border-color 0.2s ease; } .fm__cal-card:hover { box-shadow: var(--gk-shadow-hover); border-color: var(--fm-green); } .fm__cal-icon { width: 3rem; height: auto; margin-bottom: 0.5rem; object-fit: contain; } .fm__cal-hint { font-size: 0.75rem; color: var(--fm-ink-5); margin-bottom: 0.25rem; } .fm__cal-name { font-size: 0.875rem; font-weight: 600; color: var(--fm-ink); } /* ============================================================================ Squelette d'hydratation — rendu par la page, retiré par l'île au montage. Reprend l'illustration d'intro (le LCP) et le stepper au repos, pour éviter l'écran blanc entre l'affichage du HTML et le montage de React. ============================================================================ */ .fm-boot { width: 100%; min-height: 100dvh; display: flex; flex-direction: column; } .fm-boot__panel { padding: 1rem; } /* identique à .fm__panel : aucun saut au montage */ /* ============================================================================ ≥ 768 px — le `md:` de la source : deux colonnes 50/50, pleine hauteur. ============================================================================ */ @media (min-width: 768px) { .fm, .fm-boot { flex-direction: row; height: 100vh; padding: 3rem; } .fm__visual, .fm-boot__visual { width: 50%; max-height: none; height: auto; } .fm__img, .fm-boot__img { max-height: none; height: 100%; } .fm__visual--desktop-only { display: block; } .fm__panel, .fm-boot__panel { width: 50%; /* `p-4 md:px-8` : seul l'horizontal passe à 2rem, le vertical reste à 1rem. */ padding: 1rem 2rem; } .fm__stepper { justify-content: flex-start; gap: 1rem; } .fm__stepper-wrap { padding: 1rem 0; } .fm__step-btn { width: 2.5rem; height: 2.5rem; font-size: 0.875rem; } .fm__step-label { margin-left: 0.75rem; } .fm__body { overflow-y: auto; } .fm__inner { padding: 1rem 0; } .fm__nav { padding: 1.5rem 0; } .fm__booking-title { font-size: 1.5rem; } .fm__conf-title { font-size: 2.25rem; } .fm__cal-icon { width: 3.5rem; } } /* ============================================================================ Exception au breakpoint unique de 768 px : les deux mentions de reassurance de l'ecran de prise de RDV. Elles ne dependent pas du passage en deux colonnes mais de la largeur REELLE de la colonne de droite (50vw moins les gouttieres). Elles La colonne mesure (100vw - 96) / 2 - 64 : 338 px a 900 px de large, 388 px a 1000 px. Il en faut 365 pour tenir sur une ligne a 14 px, d'ou le seuil a 1000 px — et non 768, ou la colonne ne fait que 272 px. En dessous elles restent a 12 px (une ligne des ~350 px de colonne), et se replient proprement sur deux lignes dans les deux bandes ou une ligne est physiquement impossible (768-845 px et < 340 px) : mieux vaut un repli centre qu'un texte illisible. ============================================================================ */ @media (min-width: 1000px) { .fm__booking-sub { gap: 0.25rem 1.25rem; font-size: 0.875rem; } }