/* ============================================================ DAL'ALU — Formulaire "Vous avez un projet ?" ============================================================ */ .dal-fp { --dal-fp-red: var(--dal-red, #DC0D15); --dal-fp-border: #e2e2e6; --dal-fp-placeholder: #9a9a9a; --dal-fp-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%239a9a9a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); padding: 60px 0; box-sizing: border-box; /* Ancre (boutons "Demander un devis" / "Nous contacter"). La hauteur du header sticky est déjà réservée globalement par le scroll-padding-top de (global.css du thème : 150px en desktop, 118px sous 1440px, 90px sous 1024px). Il ne reste donc qu'à annuler les 60px de padding haut de cette section, sinon le titre du formulaire arrive très bas dans la fenêtre. Résultat : titre calé juste sous le header, quel que soit le breakpoint. */ scroll-margin-top: -60px; } .dal-fp * { box-sizing: border-box; } .dal-fp__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 110px); align-items: center; width: 80%; margin: 0 auto; } /* ── Visuel gauche + pastille rouge ── */ .dal-fp__visuel { position: relative; height: 100%; } .dal-fp__visuel::before { content: ""; position: absolute; left: max(-140px, calc(50% - 50vw)); top: 25%; /* translateX piloté par le scroll (JS) : plus à droite au repos, revient à sa position en scrollant. translateY garde le centrage. */ transform: translateX(var(--dal-fp-blob-x, 0px)) translateY(-50%); will-change: transform; width: 320px; height: 30%; max-height: 240px; background: var(--dal-fp-red); border-radius: 150px; z-index: 0; } .dal-fp__visuel img { position: relative; z-index: 1; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 24px; display: block; max-height: 800px; } .dal-fp__col-form{ margin-top: 15px; } /* Bloc affiché conditionnellement (JS) */ .dal-fp__conditionnel[hidden] { display: none; } /* ── Sous-titre de section (variante franchise) ── */ .dal-fp__section { margin: 8px 0 0; font-size: 24px; font-weight: 800; color: var(--dal-fp-red); } /* ── Titre ── */ .dal-fp__titre { font-size: clamp(2rem, 2.4vw, 34px); font-weight: 700; color: #000; margin: 0 0 28px; } /* ── Formulaire ── */ .dal-fp__form { display: flex; flex-direction: column; gap: 10px; } .dal-fp__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* Champs texte / select / textarea */ .dal-fp__input { width: 100%; padding: 15px 22px; border: 1px solid var(--dal-fp-border); border-radius: 100px; background: #fff; font-family: var(--dal-font, "Futura Std", Futura, "Century Gothic", sans-serif); font-size: 14px; color: #000; font-weight: 400; outline: none; transition: border-color 0.15s ease; } .dal-fp__input::placeholder { color: var(--dal-fp-placeholder); } .dal-fp__input:focus { border-color: var(--dal-fp-red); } .dal-fp__textarea { border-radius: 22px; resize: vertical; min-height: 96px; } /* Select : caret custom (repli si le dropdown custom JS ne s'initialise pas) */ .dal-fp__select { appearance: none; -webkit-appearance: none; background-image: var(--dal-fp-caret); background-repeat: no-repeat; background-position: right 20px center; padding-right: 46px; cursor: pointer; } /* Placeholder du select (option désactivée) */ .dal-fp__select:invalid, .dal-fp__select option[value=""] { color: var(--dal-fp-placeholder); } /* ── Dropdown custom (remplace visuellement le select natif, en JS) ── Même habillage que .dal-fp__suggestions pour un rendu cohérent. */ .dal-fp__dropdown { position: relative; } /* Select natif conservé (valeur soumise avec le formulaire) mais masqué */ .dal-fp__select--natif-cache { position: absolute; opacity: 0; pointer-events: none; } .dal-fp__dropdown-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; appearance: none; -webkit-appearance: none; background-color: #fff; background-image: var(--dal-fp-caret); background-repeat: no-repeat; background-position: right 20px center; padding: 15px 22px; padding-right: 46px; border: 1px solid var(--dal-fp-border); border-radius: 100px; font-family: var(--dal-font, "Futura Std", Futura, "Century Gothic", sans-serif); font-size: 14px; font-weight: 400; color: #000; cursor: pointer; outline: none; transition: border-color 0.15s ease; } .dal-fp__dropdown-trigger.is-placeholder { color: var(--dal-fp-placeholder); } .dal-fp__dropdown-trigger:focus, .dal-fp__dropdown-trigger[aria-expanded="true"] { border-color: var(--dal-fp-red); } .dal-fp__dropdown-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--dal-fp-border); border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); max-height: 240px; overflow-y: auto; } .dal-fp__dropdown-list[hidden] { display: none; } .dal-fp__dropdown-option { padding: 10px 14px; border-radius: 10px; font-family: var(--dal-font, "Futura Std", Futura, "Century Gothic", sans-serif); font-size: 12px; color: #000; cursor: pointer; } .dal-fp__dropdown-option:hover, .dal-fp__dropdown-option[aria-selected="true"] { background: #f4f4f6; } /* ── Segmenté "type de projet" ── */ .dal-fp__segment { display: flex; border: 1.5px solid var(--dal-fp-red); border-radius: 100px; padding: 5px; gap: 4px; } .dal-fp__segment input { position: absolute; opacity: 0; pointer-events: none; } .dal-fp__segment label { flex: 1; text-align: center; padding: 11px 18px; border-radius: 100px; font-size: 18px; font-weight: 500; color: var(--dal-fp-red); cursor: pointer; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .dal-fp__segment input:checked + label { background: var(--dal-fp-red); color: #fff; } /* ── Bloc "Le chantier" + radios ── */ .dal-fp__chantier { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 4px 0; font-family: var(--dal-font, "Futura Std", Futura, "Century Gothic", sans-serif); } .dal-fp__chantier-label { font-weight: 600; color: var(--dal-fp-red); font-size: 18px; } .dal-fp__radio { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; color: #000; cursor: pointer; } .dal-fp__radio input { position: absolute; opacity: 0; pointer-events: none; } /* Puce ronde custom */ .dal-fp__radio span { width: 20px; height: 20px; border: 2px solid var(--dal-fp-red); border-radius: 50%; display: inline-flex; position: relative; flex-shrink: 0; } .dal-fp__radio input:checked + span::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--dal-fp-red); } /* ── Consentement ── */ .dal-fp__consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; font-weight: 400; line-height: 1.4; color: #4a4a4a; cursor: pointer; margin-top: 4px; } .dal-fp__consent input { position: absolute; opacity: 0; pointer-events: none; } .dal-fp__consent-box { width: 18px; height: 18px; border: 2px solid var(--dal-fp-red); border-radius: 4px; flex-shrink: 0; margin-top: 1px; position: relative; } .dal-fp__consent input:checked + .dal-fp__consent-box::after { content: ""; position: absolute; left: 4px; top: 0; width: 6px; height: 11px; border: solid var(--dal-fp-red); border-width: 0 2px 2px 0; transform: rotate(45deg); } .dal-fp__consent a { color: var(--dal-fp-red); text-decoration: underline; } /* ── Retour (succès / erreur) ── */ .dal-fp__feedback { font-size: 13px; padding: 12px 16px; border-radius: 12px; } .dal-fp__feedback.is-success { background: #e6f6ec; color: #1a8a4a; } .dal-fp__feedback.is-error { background: #fdecec; color: var(--dal-fp-red); } /* ── Bouton envoyer (hérite de .dal-btn--outline) ── */ .dal-fp__submit { align-self: flex-start; margin-top: 8px; padding: 14px 40px; font-size: 16px; font-weight: 500; cursor: pointer; } .dal-fp__submit[disabled] { opacity: 0.6; cursor: default; } /* ── Responsive ── */ @media (max-width: 900px) { .dal-fp__inner { grid-template-columns: 1fr; width: 90%; gap: 32px; } .dal-fp__visuel { order: 1; /* image sous le formulaire */ max-width: 480px; margin: 0 auto; } } @media (max-width: 560px) { .dal-fp__row { grid-template-columns: 1fr; } /* Segmenté empilé, boutons pleine largeur, libellé pouvant passer sur deux lignes (le texte "Bâtiment collectif…" est long) */ .dal-fp__segment { flex-direction: column; border-radius: 22px; } .dal-fp__segment label { white-space: normal; line-height: 1.2; padding: 12px 14px; font-size: 13px; } .dal-fp__submit { align-self: stretch; text-align: center; } } /* ── Autocomplétion d'adresse ── */ .dal-fp__autocomplete { position: relative; } .dal-fp__suggestions { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--dal-fp-border, #e2e2e6); border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); max-height: 240px; overflow-y: auto; } .dal-fp__suggestions[hidden] { display: none; } .dal-fp__suggestion { padding: 10px 14px; border-radius: 10px; font-size: 13px; color: #000; cursor: pointer; } .dal-fp__suggestion:hover { background: #f4f4f6; }