/* ═══════════════════════════════════════════════════════════════════════════ MOBILE STICKY CTA, reecriture GOAL-50 (QA iPhone de Lolo) ─────────────────────────────────────────────────────────────────────────── L'implementation precedente empilait trois calc() imbriques qui se repondaient les uns aux autres : l'offset bas de la barre, la reserve de place sur , et l'offset de la bulle WhatsApp recalculaient chacun de leur cote « ecart + zone sure + hauteur de barre ». Deux defauts en sont sortis en conditions reelles (iPhone a Dynamic Island, Safari) : - la barre etait ilotee (left/right: 10px) avec une bordure visible, et debordait a droite : un `position: fixed` avec `right` se mesure sur le viewport de MISE EN PAGE, qui s'elargit des qu'un element du document depasse en largeur. Bordure gauche visible, bordure droite hors ecran ; - remontee de `env(safe-area-inset-bottom)` dans `bottom`, la barre finissait tronquee par le bas de l'ecran. Nouvelle regle, volontairement simple, patron standard des barres iOS : 1. la barre est en PLEINE LARGEUR, `left: 0; right: 0; bottom: 0`. Elle ne peut plus etre ni asymetrique, ni rognee lateralement, ni poussee hors de l'ecran, meme si le document deborde en largeur ; 2. la zone sure est absorbee en PADDING BAS, pas en offset : les boutons restent au-dessus du home indicator, le fond descend jusqu'au bord ; 3. UNE SEULE source de verite, `--ladb-cta-h`, la hauteur reellement mesuree de la barre (padding et bordure compris, zone sure incluse), publiee par initMobileCta() dans assets/js/frontend.js. La reserve de place et l'offset de la bulle WhatsApp ne lisent QUE cette variable. Plus aucun calcul en double, plus de --ladb-cta-gap. ═══════════════════════════════════════════════════════════════════════════ */ .ladb-mobilecta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; box-sizing: border-box; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 16px; /* Zone sure absorbee en padding, jamais en offset. max() et non une addition : quand la barre d'outils de Safari est DEPLOYEE elle couvre deja le home indicator, donc env(safe-area-inset-bottom) vaut 0 et on retombe sur les 10px de respiration. Quand elle se RETRACTE, la zone sure passe a ~34px et remplace ces 10px au lieu de s'y ajouter : la barre ne grandit plus brutalement d'un cran a chaque changement d'etat de Safari. */ padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); /* Fond OPAQUE, et plus de backdrop-filter. Un backdrop-filter sur un element position:fixed force une couche de composition que Safari iOS ne repeint pas de facon fiable quand le viewport visuel change de taille, ce qui est exactement ce qui se passe quand la barre d'outils se retracte. C'est la cause la plus probable de la bande bleu nuit residuelle et des boutons vus tronques : un reste de couche non repeinte, pas un probleme de positionnement. Un aplat opaque supprime la couche et le probleme avec elle, et garantit que le fond couvre toute la surface, zone de padding comprise. */ /* ─── CONTENEUR SANS AUCUNE PEINTURE ─── Constat apres trois tentatives de forcer Safari a repeindre les enfants (promotion de couche, aplats opaques, garde-fou repeint) : le fond du CONTENEUR survit toujours au scroll inertiel, les boites ENFANTS ne sont jamais peintes. Y compris le degrade cuivre du bouton devis, qui est pourtant un fond d'enfant : ce n'est donc pas le texte qui manque, ce sont les boites enfants entieres. On arrete de lutter contre le repeint : on retire tout ce que le conteneur peint. Plus de fond, plus de bordure, plus d'ombre. S'il n'y a rien a peindre, il ne peut plus y avoir de bande bleue vide, quel que soit le comportement de Safari. Le pire cas devient l'invisibilite, qui est propre, au lieu d'un bandeau vide. Les deux boutons portent desormais eux-memes leur fond, leur bordure, leur arrondi et leur ombre : ce sont deux pastilles flottantes. */ background: transparent; border: 0; border-radius: 0; box-shadow: none; /* Un conteneur transparent intercepte quand meme les taps : sans cela il avalerait les clics dans ses marges laterales, dans l'ecart entre les deux boutons et dans toute la bande de zone sure, au-dessus du contenu de la page. On le rend traversant, et on rend la main aux boutons. */ pointer-events: none; transition: transform .25s ease, opacity .25s ease; } /* GOAL-52 Lot 2 : masquee quand #contact entre dans le viewport (voir frontend.js, initMobileCta/IntersectionObserver). translateY + opacity, jamais display:none, pour une transition douce plutot qu'un saut brutal. */ .ladb-mobilecta.is-hidden { transform: translateY(100%); opacity: 0; pointer-events: none; } .ladb-mobilecta.is-hidden a { pointer-events: none; } @media (prefers-reduced-motion: reduce) { .ladb-mobilecta { transition: none; } } /* La barre est TOUJOURS VISIBLE sur mobile. Le masquage au scroll vers le bas, introduit pour contourner un pretendu defaut de repeint, a ete RETIRE : la cause reelle du bandeau bleu nuit etait le fond du document, pas la barre (voir le bloc dedie dans global.css). Un CTA en permanence a l'ecran convertit mieux, et cela supprime au passage une boucle rAF, trois ecouteurs tactiles et une machine a etats devenus sans objet. */ @media (min-width: 900px) { .ladb-mobilecta { display: none; } } .ladb-mobilecta a { display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 10px; font-family: var(--font-display); font-weight: 700; font-size: 13px; padding: 13px 10px; text-decoration: none; /* Ombre discrete : les boutons flottent maintenant directement au-dessus du contenu qui defile, le conteneur ne peignant plus rien. */ box-shadow: 0 4px 14px rgba(6,13,26,.38); /* Le conteneur est traversant (pointer-events: none), on rend la main aux boutons pour qu'ils restent cliquables. */ pointer-events: auto; } /* Les deux boutons sont maintenant des PASTILLES AUTONOMES : le conteneur ne peint plus rien, chacun porte donc son propre fond opaque, sa bordure, son arrondi et une ombre discrete pour se detacher du contenu qui defile derriere, puisque la barre n'assure plus la separation. Les couleurs restent les aplats opaques calcules a la passe precedente (equivalents exacts des anciennes valeurs semi-transparentes composees sur #0B1A33), donc le rendu ne change pas a l'oeil. */ .ladb-mobilecta__call { background: #0B1A33; color: var(--copper-light); border: 1.5px solid #725D4D; } .ladb-mobilecta__call:hover, .ladb-mobilecta__call:focus-visible { background: #202738; color: var(--copper-light); border-color: #B0855C; } .ladb-mobilecta__dev { background: var(--gradient-copper); color: #2A1A09; border: 1.5px solid transparent; } .ladb-mobilecta__dev:hover, .ladb-mobilecta__dev:focus-visible { background: var(--gradient-copper-deep); color: #2A1A09; } .ladb-mobilecta .ic { width: 15px; height: 15px; flex-shrink: 0; } /* ============================================================================ BULLE WHATSAPP FLOTTANTE (GOAL-44 Phase 7, refonte GOAL-45 Lot 7.3) ---------------------------------------------------------------------------- Visible sur mobile ET desktop, en bas a droite. Sur mobile, la barre .ladb-mobilecta est fixed en bas (bottom:10px, environ 60 px de haut) : la bulle est remontee au-dessus d'elle pour ne pas masquer le CTA "Devis gratuit", qui reste l'action prioritaire. z-index 59, soit juste SOUS la barre (60), pour la meme raison. GOAL-45 7.3 : le lien direct vers wa.me ouvrait une page de partage brute. .ladb-wa est maintenant un conteneur de positionnement pour deux pieces : .ladb-wa__bubble (le rond cliquable qui ouvre/ferme) et .ladb-wa__panel (avatar, message d'accueil, bouton "Commencer le chat" qui ouvre wa.me). Couleur : vert WhatsApp fonce (#128C7E) et non le vert vif #25D366, trop criard a cote du cuivre et du bleu nuit. Le glyphe reste celui de WhatsApp : l'icone doit etre reconnue au premier coup d'oeil. ============================================================================ */ .ladb-wa { position: fixed; right: 16px; /* La bulle se cale juste au-dessus de la barre CTA, en ne lisant QUE --ladb-cta-h : la hauteur reellement mesuree de la barre, zone sure comprise puisqu'elle y est absorbee en padding. Une seule reference, donc aucun risque de compter la zone sure deux fois. NOTE, bug corrige ici : la version precedente portait un commentaire mal ferme, un terminateur de commentaire en trop suivi de texte libre. Le parseur CSS avalait donc la declaration bottom qui suivait, au titre de la recuperation d'erreur, et la bulle n'etait plus positionnee du tout. Meme classe de piege que celui documente dans CLAUDE.md sur les valeurs url() non fermees : un commentaire mal ferme casse la suite en silence. Ne jamais ecrire un terminateur de commentaire DANS un commentaire. */ bottom: calc(var(--ladb-cta-h, 84px) + 14px); z-index: 59; } /* La solidarite avec la barre est CONSERVEE, mais elle est desormais purement positionnelle : la bulle se cale au-dessus de la barre en lisant la meme et unique variable --ladb-cta-h. Les deux ne peuvent donc pas se chevaucher, quelle que soit la hauteur reelle de la barre. Il n'y a plus de mouvement solidaire a gerer puisque plus rien ne se masque. */ .ladb-wa__bubble { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #128C7E; color: #FFFFFF; box-shadow: 0 8px 22px rgba(6,13,26,.32); border: 1px solid rgba(255,255,255,.18); cursor: pointer; padding: 0; transition: transform var(--dur, .2s) var(--ease-out, ease), box-shadow var(--dur, .2s) var(--ease-out, ease), background var(--dur, .2s) var(--ease-out, ease); } .ladb-wa__bubble:hover, .ladb-wa__bubble:focus-visible { background: #0F7A6D; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(6,13,26,.40); } .ladb-wa__bubble:focus-visible { outline: 2px solid var(--copper-light, #D9A066); outline-offset: 3px; } .ladb-wa__ic { display: block; } /* Icone : croix quand le panneau est ouvert, plutot qu'un second bouton. */ .ladb-wa[data-open="true"] .ladb-wa__bubble { background: #0F7A6D; } /* Panneau : carte claire, coherente charte (pas le vert WhatsApp generique). */ .ladb-wa__panel { position: absolute; right: 0; bottom: calc(100% + 14px); width: 300px; max-width: calc(100vw - 32px); background: #FFFFFF; border-radius: 16px; box-shadow: 0 20px 50px rgba(6,13,26,.35); overflow: hidden; border: 1px solid rgba(11,26,51,.10); } .ladb-wa__panel[hidden] { display: none; } .ladb-wa__panelHead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: var(--blue-stellaire, #0B1A33); } .ladb-wa__agent { display: flex; align-items: center; gap: 10px; min-width: 0; } .ladb-wa__avatar { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--gradient-copper, linear-gradient(135deg,#D9A066,#B87333)); color: #2A1A09; font-family: var(--font-display); font-weight: 800; font-size: 15px; } .ladb-wa__name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #FFFFFF; } .ladb-wa__brand { display: block; font-size: 11px; color: rgba(255,255,255,.65); } .ladb-wa__close { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: rgba(255,255,255,.75); cursor: pointer; } .ladb-wa__close:hover, .ladb-wa__close:focus-visible { background: rgba(255,255,255,.12); color: #FFFFFF; } .ladb-wa__msg { margin: 16px; font-size: 14px; line-height: 1.5; color: #1A1F2E; } .ladb-wa__start { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 16px 16px; padding: 12px 16px; border-radius: 10px; background: #128C7E; color: #FFFFFF; font-family: var(--font-display); font-weight: 700; font-size: 14px; text-decoration: none; transition: background var(--dur, .2s) var(--ease-out, ease); } .ladb-wa__start:hover, .ladb-wa__start:focus-visible { background: #0F7A6D; color: #FFFFFF; } /* Desktop : plus de barre CTA mobile, la bulle redescend. */ @media (min-width: 900px) { .ladb-wa { right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } .ladb-wa__bubble { width: 56px; height: 56px; } } @media (prefers-reduced-motion: reduce) { .ladb-wa__bubble { transition: none; } .ladb-wa__bubble:hover, .ladb-wa__bubble:focus-visible { transform: none; } } /* Impression : une bulle flottante n'a aucun sens sur papier. */ @media print { .ladb-wa { display: none; } }