/* ========================================================================== LOT CONVERSION — /contact/ · /contact/merci/ · /urgence-dentaire/ Ce lot rend « Prendre RDV » fonctionnel sur tout le site : il habille les trois pages qui reçoivent les CTA des autres lots. Valeurs relevées sur le XD 1920 et sur les rendus de référence xd/artboards/{Contact, Contact – Merci, Urgence dentaire}.png. Chargé après pages.css, lot-a.css et lot-b.css par le glob de functions.php : ce fichier peut donc surcharger les règles communes, mais ne définit JAMAIS un sélecteur nu qui déborderait sur les pages des autres lots. Tout ce qui touche une brique partagée est préfixé `.gdc-lotc`. ========================================================================== */ /* ========================================================================== LARGEUR DE CONTENU Même correctif que lot-a.css et lot-b.css : pages.css borne déjà `.elementor-container` à 1520 px, mais Elementor lui ajoute une gouttière interne de 2vw (38,4 px à 1920). Le contenu retombait à 1443 px et démarrait à x=238 au lieu de x=200. On rend la gouttière au conteneur sans palier. ========================================================================== */ .gdc-lotc.gdc-section > .elementor-container { padding-inline: max(0px, min(var(--gdc-marge), 1520px - 100vw)); } /* ========================================================================== HÉROS DE CONVERSION XD : image plein cadre 1920×1080, H1 Bold 80, sous-titre Bold 50, un seul CTA blanc. Tout est centré sur les deux artboards (Contact, Urgence). Le voile de pages.css suffit pour Contact ; l'artboard Urgence est nettement plus sombre (photo aérienne désaturée), on l'assombrit d'un cran de plus. ========================================================================== */ .gdc-hero--conversion > .elementor-container { max-width: 1520px; } .gdc-hero--conversion::before { background: linear-gradient(180deg, rgba(20,18,14,.34) 0%, rgba(20,18,14,.56) 100%); } .gdc-hero--conversion h2.elementor-heading-title { /* Mesuré : à 24ch le sous-titre passait sur 3 lignes contre 2 au XD sur Contact, et sur 2 contre 1 sur Urgence. 42ch retombe sur le découpage de l'artboard aux deux endroits. */ max-width: 42ch; margin-inline: auto; } /* ========================================================================== CTA TÉLÉPHONE XD : même gabarit que le CTA calendrier. Le picto n'apparaît que sur le héros de Contact ; ailleurs le bouton est nu (« Appeler maintenant »). ========================================================================== */ .gdc-btn--tel .gdc-btn__picto-tel { width: clamp(1.5rem, 2.6vw, 3.125rem); height: auto; } /* Sur fond clair le picto est blanc sur blanc : on l'assombrit par filtre plutôt que d'embarquer un second fichier. */ .gdc-btn--sombre.gdc-btn--tel .gdc-btn__picto-tel { filter: invert(1); } .gdc-btn--sombre.gdc-btn--tel:hover .gdc-btn__picto-tel, .gdc-btn--sombre.gdc-btn--tel:focus-visible .gdc-btn__picto-tel { filter: none; } /* Le bouton « Envoyer » du XD est blanc bordé or, texte or. Aucune autre page ne porte cette variante : elle vit ici. */ .gdc-lotc .gdc-btn--or-contour { color: var(--gdc-or); background: var(--gdc-blanc); border-color: var(--gdc-or); } .gdc-lotc .gdc-btn--or-contour:hover, .gdc-lotc .gdc-btn--or-contour:focus-visible { background: var(--gdc-or-fond); color: var(--gdc-blanc); } /* Lien téléphone en ligne : le XD le pose en Regular, même taille que le texte, souligné au survol seulement. */ .gdc-lien-tel { text-decoration: none; font-weight: 700; white-space: nowrap; } .gdc-lien-tel:hover, .gdc-lien-tel:focus-visible { color: var(--gdc-or); text-decoration: underline; } /* ========================================================================== PAGE CONTACT — chapeau XD : texte aligné à gauche à x=200, deux lignes de 30 px. ========================================================================== */ .gdc-contact__intro { padding-block: var(--esp-xl) var(--esp-l); } .gdc-contact__chapeau { text-align: left; } .gdc-contact__chapeau p { margin-bottom: var(--esp-xs); } .gdc-contact__chapeau p:last-child { margin-bottom: 0; } /* ========================================================================== PAGE CONTACT — FORMULAIRE FLUENT FORMS XD : champs en gélule crème #EBE3D6 de 105 px de haut, libellé en gras sombre POSÉ DANS le champ (donc placeholder, pas étiquette au-dessus), et trois intertitres en capitales grasses au-dessus des groupes. Le zone de message fait 285 px. Fluent Forms sert son propre CSS ; toutes les règles sont donc écrites au niveau de spécificité de `.gdc-formulaire .fluentform`, jamais en !important. ========================================================================== */ /* Le formulaire est plus large que la colonne de texte : le XD pose les champs de x=100 à x=1820, soit 1720 px, alors que le chapeau est calé à x=200. Mesuré sur les rectangles de la spec, confirmé sur l'artboard. */ .gdc-contact__formulaire { padding-block: 0 var(--esp-xl); } /* Retrait intérieur commun aux champs et aux intertitres : x=200 au XD pour une gélule qui démarre à x=100. */ .gdc-formulaire { --champ-retrait: clamp(1.25rem, 5.2vw, 6.25rem); } /* pages.css borne `.elementor-section.elementor-section-boxed > .elementor-container` à 1520 px : il faut au moins autant de spécificité pour la relever. */ .elementor-section.gdc-contact__formulaire > .elementor-container { max-width: 1720px; padding-inline: max(0px, min(var(--temoin-marge, 6.25rem), 1720px - 100vw)); } .gdc-formulaire { max-width: 100%; } .gdc-formulaire .fluentform .ff-el-group { margin-bottom: var(--esp-m); } /* Les intertitres du XD (« Vos coordonnées », « Votre demande », « Votre message ») sont rendus par les séparateurs de section de Fluent Forms. Markup réel relevé sur la page servie : .ff-el-section-break > h3.ff-el-section-title + .ff-section_break_desk + hr Le filet et le bloc de description ne sont pas au XD : on les retire. */ .gdc-formulaire .ff-el-group.ff-el-section-break { border: 0; padding: 0; margin: var(--esp-l) 0 var(--esp-s); } .gdc-formulaire .ff-el-group.ff-el-section-break:first-child { margin-top: 0; } .gdc-formulaire .ff-el-section-title { padding-left: var(--champ-retrait); font-size: var(--fs-body); font-weight: 700; color: var(--gdc-noir); text-transform: uppercase; letter-spacing: .02em; line-height: var(--lh-serre); margin: 0; } .gdc-formulaire .ff-el-section-break hr, .gdc-formulaire .ff-section_break_desk { display: none; } /* Les étiquettes sont dans le champ au XD : on les retire du flux sans les retirer de l'accessibilité — le lecteur d'écran doit continuer à les lire. */ .gdc-formulaire .fluentform .ff-el-input--label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- Le champ lui-même : gélule crème, 105 px au XD --- */ .gdc-formulaire .fluentform .ff-el-form-control { width: 100%; min-height: clamp(3.25rem, 5.47vw, 6.5625rem); /* 52 → 105 px */ /* XD : la gélule démarre à x=100, son libellé à x=200 → 100 px de retrait, et non 50. Les intertitres se calent sur la même verticale. */ padding: var(--esp-s) var(--champ-retrait); background: var(--gdc-creme); border: 2px solid transparent; border-radius: 999px; font-family: var(--gdc-font); font-size: var(--fs-body); font-weight: 700; line-height: 1.3; color: var(--gdc-noir); box-shadow: none; transition: border-color var(--gdc-transition), background var(--gdc-transition); } .gdc-formulaire .fluentform .ff-el-form-control::placeholder { color: var(--gdc-noir); font-weight: 700; opacity: 1; } .gdc-formulaire .fluentform .ff-el-form-control:hover { background: #E3D9C8; } .gdc-formulaire .fluentform .ff-el-form-control:focus { background: var(--gdc-creme); border-color: var(--gdc-or); outline: none; } /* La zone de message : 285 px au XD, donc pas une gélule mais un bloc très arrondi. Le rayon de 999px la déformerait. */ .gdc-formulaire .fluentform textarea.ff-el-form-control { min-height: clamp(9rem, 14.84vw, 17.8125rem); /* 144 → 285 px */ border-radius: clamp(1.5rem, 2.6vw, 3.125rem); resize: vertical; } /* Le select : Fluent Forms garde la flèche native, invisible sur le crème. On la redessine, et on réserve la place à droite. */ .gdc-formulaire .fluentform select.ff-el-form-control { appearance: none; -webkit-appearance: none; padding-right: clamp(2.5rem, 5vw, 5rem); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M2 2l8 8 8-8' fill='none' stroke='%2314120E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right clamp(1rem, 2.1vw, 2.5rem) center; background-size: clamp(.75rem, 1.05vw, 1.25rem) auto; cursor: pointer; } /* --- Téléphone : le XD pose « +41 » dans le champ, séparé d'un filet vertical. Fluent Forms rend le préfixe hors du champ, dans .ff_input-group > .ff_input-group-prepend > .ff_input-group-text On refait du groupe entier la gélule, et le champ perd son propre fond. Markup relevé sur la page servie, pas supposé. --- */ .gdc-formulaire .fluentform .ff_input-group { display: flex; align-items: stretch; min-height: clamp(3.25rem, 5.47vw, 6.5625rem); background: var(--gdc-creme); border: 2px solid transparent; border-radius: 999px; transition: border-color var(--gdc-transition); } .gdc-formulaire .fluentform .ff_input-group:focus-within { border-color: var(--gdc-or); } .gdc-formulaire .fluentform .ff_input-group-prepend { display: flex; } .gdc-formulaire .fluentform .ff_input-group-text { display: flex; align-items: center; padding: 0 clamp(.75rem, 1.6vw, 1.875rem) 0 var(--champ-retrait); border: 0; border-right: 2px solid rgba(20, 18, 14, .35); margin-block: clamp(.6rem, 1.2vw, 1.4rem); background: transparent; font-family: var(--gdc-font); font-size: var(--fs-body); font-weight: 700; color: var(--gdc-noir); line-height: 1; } .gdc-formulaire .fluentform .ff_input-group .ff-el-form-control { flex: 1 1 auto; min-height: 0; background: transparent; border: 0; border-radius: 0 999px 999px 0; padding-left: clamp(.75rem, 1.6vw, 1.875rem); } .gdc-formulaire .fluentform .ff_input-group .ff-el-form-control:hover, .gdc-formulaire .fluentform .ff_input-group .ff-el-form-control:focus { background: transparent; border: 0; } /* --- Nom / Prénom sur une ligne, comme au XD --- Fluent Forms écrit `flex-basis: 50%` EN STYLE EN LIGNE sur chaque cellule : aucune feuille ne peut le battre. Une gouttière posée par `gap` faisait donc 50 % + 50 % + 20 px > 100 %, et les deux champs se retrouvaient l'un sous l'autre. Mesuré au navigateur (cell width = 1520 sur un conteneur de 1520). La gouttière passe donc à l'intérieur des cellules, compensée sur le conteneur : la somme reste à 100 %. */ .gdc-formulaire .fluentform .ff-t-container { display: flex; flex-wrap: wrap; gap: 0; margin-inline: 0; } /* La gouttière se pose à droite de chaque cellule sauf la dernière : le bord gauche de « Nom » reste donc aligné sur celui des champs pleine largeur. Une marge négative sur le conteneur décalait la ligne de dix pixels vers la gauche par rapport au reste du formulaire. La largeur de 50 % imposée en ligne par le plugin est préservée : `box-sizing: border-box` place la gouttière à l'intérieur de la cellule. */ .gdc-formulaire .fluentform .ff-t-cell { box-sizing: border-box; padding-inline: 0 var(--esp-s); } .gdc-formulaire .fluentform .ff-t-cell:last-child { padding-inline: 0; } /* Sous 700 px, deux champs de 50 % deviennent illisibles : le conteneur redevient un bloc, ce qui neutralise le flex-basis en ligne. */ @media (max-width: 700px) { .gdc-formulaire .fluentform .ff-t-container { display: block; margin-inline: 0; } .gdc-formulaire .fluentform .ff-t-cell, .gdc-formulaire .fluentform .ff-t-cell:last-child { padding-inline: 0; } } /* L'en-tête est collant : sans cette réserve, l'ancre « Prendre RDV » dépose le haut du formulaire sous la barre de navigation. */ #gdc-formulaire { scroll-margin-top: clamp(5.375rem, 8.8vw, 10.375rem); } /* --- Bouton d'envoi : blanc bordé or, centré, 474×121 au XD --- */ .gdc-formulaire .fluentform .ff-el-group.ff_submit_btn_wrapper { margin-top: var(--esp-l); text-align: center; } .gdc-formulaire .fluentform .ff-el-group.ff_submit_btn_wrapper.ff-text-left, .gdc-formulaire .fluentform .ff-el-group.ff_submit_btn_wrapper.ff-text-right { text-align: center; } .gdc-formulaire .fluentform .ff-btn-submit { display: inline-flex; align-items: center; justify-content: center; min-height: var(--btn-h); min-width: min(100%, 29.625rem); /* 474 px au XD */ padding-inline: var(--btn-px); border: 2px solid var(--gdc-or); border-radius: var(--btn-radius); background: var(--gdc-blanc); color: var(--gdc-or); font-family: var(--gdc-font); font-weight: 700; font-size: var(--fs-h3); line-height: 1; cursor: pointer; transition: background-color var(--gdc-transition), color var(--gdc-transition); } /* Hello Elementor peint tout button:hover/:focus en #c36. Sa spécificité bat la nôtre : on neutralise explicitement, comme pour .gdc-burger. */ .gdc-formulaire .fluentform .ff-btn-submit:hover, .gdc-formulaire .fluentform .ff-btn-submit:focus, .gdc-formulaire .fluentform .ff-btn-submit:focus-visible, .gdc-formulaire .fluentform .ff-btn-submit:active { background-color: var(--gdc-or-fond); color: var(--gdc-blanc); border-color: var(--gdc-or-fond); } /* --- Messages d'erreur et de succès --- */ .gdc-formulaire .fluentform .error, .gdc-formulaire .fluentform .text-danger { color: #A2231D; font-size: var(--fs-small); font-weight: 700; padding-left: var(--champ-retrait); } .gdc-formulaire .ff-message-success { padding: var(--esp-m); border: 2px solid var(--gdc-or); border-radius: 1.25rem; background: var(--gdc-creme); color: var(--gdc-noir); font-weight: 700; } /* ========================================================================== PAGE CONTACT — panneau or XD : le CTA « Prendre RDV » du panneau descend vers le formulaire de la page, pas vers /contact/ (voir l'écart n° 3 de build_conversion.py). Le défilement doit être doux et l'ancre ne doit pas passer sous l'en-tête collant : header.php pose ~150 px de haut au XD. ========================================================================== */ html { scroll-behavior: smooth; } #gdc-formulaire { scroll-margin-top: clamp(4.5rem, 7.8vw, 9.375rem); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ========================================================================== PAGE MERCI XD : pas de héros image. Titre or 80, sous-titre noir 50, quatre lignes centrées, puis le bandeau d'accès. Fond blanc. ========================================================================== */ /* XD : le titre démarre à y=350 sous un en-tête de 150, soit 200 px de blanc. Mesuré à 11,875rem la page dépassait le XD de 8,5 % ; à 200 px elle rentre dans la tolérance de ±8 %. */ .gdc-merci { padding-block: clamp(2.5rem, 7.29vw, 8.75rem) var(--esp-l); } .gdc-merci__titre .elementor-heading-title { font-size: var(--fs-hero); font-weight: 700; color: var(--gdc-or); line-height: 1.1; margin: 0 0 var(--esp-m); } .gdc-merci__soustitre .elementor-heading-title { font-size: var(--fs-h2); font-weight: 700; color: var(--gdc-noir); line-height: var(--lh-titre); margin: 0 0 var(--esp-xl); } .gdc-merci__corps p { margin-bottom: var(--esp-m); } .gdc-merci__corps p:last-child { margin-bottom: 0; } .gdc-merci__corps strong { color: var(--gdc-noir); } /* ========================================================================== PAGE URGENCE — bandeau noir sous le héros XD : bande pleine largeur de 398 px. Titre 50 à gauche, numéro 50 à droite, phrase 30 sous le titre, picto téléphone 87×87 sous le numéro. `.gdc-bande-urgence` vient de pages.css : on n'en modifie que la variante. ========================================================================== */ .gdc-bande-urgence--large { align-items: flex-start; padding-block: clamp(2.5rem, 6.4vw, 7.75rem); } .gdc-bande-urgence--large .gdc-bande-urgence__texte { flex: 1 1 28rem; } .gdc-bande-urgence--large h2 { font-size: var(--fs-h2); margin-bottom: var(--esp-m); } .gdc-bande-urgence--large p { max-width: 42ch; } .gdc-bande-urgence--large .gdc-bande-urgence__contact { display: flex; flex-direction: column; align-items: flex-end; gap: var(--esp-m); } .gdc-bande-urgence--large .gdc-bande-urgence__tel { font-size: var(--fs-h2); } .gdc-bande-urgence--large .gdc-bande-urgence__contact img { width: clamp(2.75rem, 4.53vw, 5.4375rem); /* 44 → 87 px */ height: auto; } @media (max-width: 760px) { .gdc-bande-urgence--large { flex-direction: column; } .gdc-bande-urgence--large .gdc-bande-urgence__contact { align-items: center; flex-direction: row; flex-wrap: wrap; gap: var(--esp-s) var(--esp-m); } } /* Mesuré à 320 px : le picto téléphone débordait de 7 px, ce qui ouvrait un défilement horizontal sur toute la page. Le numéro et son picto tiennent la ligne à eux deux ; sous 360 px on les laisse se replier et on rend le picto compressible. */ @media (max-width: 400px) { .gdc-bande-urgence--large .gdc-bande-urgence__contact img { width: 2.25rem; flex: 0 0 auto; } .gdc-bande-urgence--large .gdc-bande-urgence__tel { font-size: var(--fs-h3); white-space: normal; overflow-wrap: anywhere; } } /* ========================================================================== PAGE URGENCE — listes XD : deux colonnes de puces à x=200 et x=985, texte Bold 30, puce « • » posée dans le texte. On rend la puce au CSS et on garde une vraie