/* * Styles des éléments injectés par l'application de gestion (popups, * statut du formulaire de contact). Fichier séparé : le style d'origine * (styles.css) n'est jamais modifié. Palette alignée sur la charte du site. */ /* --- Masque anti-« contenu d'origine » ---------------------------------- */ /* * La vitrine est le site d'origine servi verbatim : son HTML contient encore le * texte de l'export d'époque (catégories, prestations, horaires, prix…), que * les scripts d'injection remplacent ensuite par le contenu de la base. Le * navigateur peignant ce HTML dès qu'il l'analyse, l'ANCIEN contenu restait * visible une fraction de seconde à chaque chargement — une catégorie pourtant * supprimée depuis /gestion s'affichait puis disparaissait. * * `vitrine-admin.js` pose donc la classe `lua-sync` sur dès le * (avant tout affichage) et la retire une fois le contenu de la base appliqué. * Entre les deux, les règles ci-dessous rendent INVISIBLES les seules zones * réellement administrables — le reste de la page (mise en page, images, * en-tête, titres statiques) s'affiche normalement, sans attendre. * * `visibility: hidden` plutôt que `display: none` : la place reste réservée, la * page ne « saute » donc pas au démasquage, et les mesures géométriques faites * au chargement (indicateur du menu Prestations) restent justes. * * Les zones sont volontairement listées PAR PAGE (classe `lua-page-*`, posée en * même temps que `lua-sync`) : rien n'est masqué sur une page où le script * n'injecte rien. Les seuls contenus laissés hors masque sont les vidéos et les * liens tel:/mailto: : ils ne changent qu'exceptionnellement, et les masquer * creuserait un trou visible dans la bannière ou l'en-tête à chaque chargement. */ /* Accueil : tuiles de l'accordéon, entièrement reconstruites depuis la base. */ html.lua-sync.lua-page-home .ax-image-accordion .ax-ia-gallery-wrap, /* Prestations : les DEUX montages du menu (desktop et mobile/tablette), onglets et panneaux compris. */ html.lua-sync.lua-page-prestations .builder-widget-flex-content-switcher, html.lua-sync.lua-page-prestations .ax-content-switcher-wrapper, /* À propos : horaires, logos « Nos marques », photos du carrousel. */ html.lua-sync.lua-page-about .pp-business-hours, html.lua-sync.lua-page-about .builder-widget-image-box, html.lua-sync.lua-page-about .builder-image-carousel-wrapper, /* Contact : blocs « Horaires d'ouverture » et « Contact » (texte libre). */ html.lua-sync.lua-page-contact .builder-icon-box-description, /* Mentions légales : titre et corps, éditables depuis /gestion → Contenu. */ html.lua-sync.lua-page-legal .entry-content .builder-widget-heading h1.builder-heading-title, html.lua-sync.lua-page-legal .entry-content .builder-widget-text-editor .builder-widget-container { visibility: hidden; } /* --- Statut du formulaire de contact ----------------------------------- */ .lua-form-status { margin: 0 0 18px; padding: 14px 18px; border-radius: 8px; font-size: 15px; line-height: 1.5; } .lua-form-status[data-ok="1"] { background: #edf7ee; border: 1px solid #b7dfbb; color: #256029; } .lua-form-status[data-ok="0"] { background: #fdecea; border: 1px solid #f5c2bd; color: #8a1c13; } /* --- Vidéo de fond (page À propos) -------------------------------------- */ /* * Le lecteur Elementor d'origine dimensionne cette vidéo en JS (calcVideosSize, * déclenché sur l'évènement `canplay`) — logique absente de cet export statique. * Sans cela, la vidéo garde sa taille intrinsèque et peut se retrouver hors * cadre ou quasi invisible selon le ratio du conteneur. On fixe donc ici une * taille garantissant qu'elle couvre toujours son conteneur (comportement * équivalent à `object-fit: cover`, déjà posé par styles.css). */ .builder-background-video-hosted { width: 100%; height: 100%; min-width: 100%; min-height: 100%; } /* --- Horaires (page À propos) ------------------------------------------ */ /* * Couleur du statut de chaque jour, pilotée par la classe `.row-closed` que * pose le script d'injection selon les horaires enregistrés en /gestion : * - jour FERMÉ → rouge ; * - jour OUVERT → noir, comme les autres jours. * Le `!important` prend le pas sur les règles d'origine qui coloraient en dur * certains jours (jeudi/dimanche) en rouge, même une fois rouverts. */ .pp-business-hours .pp-business-hours-row.row-closed .pp-business-day, .pp-business-hours .pp-business-hours-row.row-closed .pp-business-timing { color: #bc1705 !important; } .pp-business-hours .pp-business-hours-row:not(.row-closed) .pp-business-day, .pp-business-hours .pp-business-hours-row:not(.row-closed) .pp-business-timing { color: #000 !important; } /* --- Badge « durée » des prestations ----------------------------------- */ /* * Encadré affiché à côté du titre d'une prestation (page Prestations) quand une * durée est renseignée depuis /gestion. Fond vert (charte du site), texte blanc. */ .lua-duration-badge { display: inline-block; vertical-align: middle; margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: #205b4f; color: #fff; font-size: 0.72em; font-weight: 600; line-height: 1.4; letter-spacing: 0.2px; white-space: nowrap; } /* --- Popups ------------------------------------------------------------- */ /* Palette alignée sur la charte du site vitrine (vert #205b4f / #53a292). */ .lua-popup-overlay { position: fixed; /* Décalages écrits en toutes lettres AVANT le raccourci `inset` : les navigateurs Android un peu anciens (Chrome < 87, WebView et Samsung Internet correspondants) ignorent `inset`, et l'habillage se retrouvait alors sans aucun décalage — donc positionné là où il tombe dans le flux, c'est-à-dire tout en bas de la page, en décalé. */ top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 9999; display: flex; /* Pas de centrage strict : quand la popup est plus haute que l'écran (petit mobile en paysage, clavier ouvert, barre d'URL visible), un conteneur `align-items: center` qui déborde ROGNE le haut du contenu — la croix de fermeture devenait alors inatteignable. Le centrage est obtenu par la marge automatique de la boîte, qui retombe naturellement à zéro dès qu'il n'y a plus la place. */ align-items: flex-start; justify-content: center; padding: 20px; /* C'est l'habillage qui défile, pas la boîte : sur mobile, la hauteur d'une `position: fixed` bornée en haut ET en bas suit la zone réellement visible, là où `vh` compte la barre d'URL même rétractée. */ overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: rgba(23, 46, 41, 0.6); animation: lua-popup-fade 0.25s ease; } .lua-popup-box { position: relative; max-width: 480px; width: 100%; margin: auto; /* centrage vertical tant qu'il y a la place (cf. ci-dessus) */ background: #fff; border-radius: 14px; padding: 40px 26px 30px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3); text-align: center; animation: lua-popup-rise 0.3s ease; } /* Blocage du défilement de la page tant qu'une popup est ouverte : sans lui, le doigt entraîne la page derrière l'habillage et la popup semble « bouger » sous le doigt sur Android. */ html.lua-modal-open, html.lua-modal-open body { overflow: hidden; } .lua-popup-title { margin: 0 0 16px; font-size: 22px; line-height: 1.3; color: #205b4f; } /* Séparateur horizontal beige (couleur de la palette du site vitrine) placé entre le titre et le contenu de la popup. */ .lua-popup-sep { width: 100%; height: 0; margin: 0 0 18px; border: 0; border-top: 1px solid #cba590; } .lua-popup-body { display: flex; flex-direction: column; gap: 16px; align-items: center; } .lua-popup-media { display: flex; flex-direction: column; gap: 12px; width: 100%; } .lua-popup-img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto; border-radius: 10px; } .lua-popup-desc { margin: 0; font-size: 15px; line-height: 1.6; color: #4a4a4a; white-space: pre-wrap; } /* Dispositions image / description. Par défaut « top » (image au-dessus). */ .lua-popup-box[data-layout='bottom'] .lua-popup-body { flex-direction: column-reverse; } .lua-popup-close { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%; background: #205b4f; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; z-index: 2; transition: background 0.15s ease, transform 0.15s ease; } .lua-popup-close:hover { background: #53a292; transform: scale(1.05); } .lua-popup-close:focus { outline: 2px solid #53a292; outline-offset: 2px; } .lua-popup-cta { display: inline-block; margin: 18px 0 0; padding: 12px 28px; border-radius: 999px; background: #205b4f; color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; transition: background 0.15s ease, transform 0.15s ease; } .lua-popup-cta:hover { background: #53a292; transform: translateY(-1px); } /* Sur ordinateur, la popup (et donc son image) est un peu plus grande : sur petit écran on garde la taille compacte d'origine. Les dispositions « gauche » / « droite » placent l'image et la description côte à côte, ce qui permet d'afficher une longue description sans avoir à faire défiler. */ @media (min-width: 768px) { .lua-popup-box { max-width: 620px; padding: 46px 38px 34px; } .lua-popup-title { font-size: 26px; } .lua-popup-desc { font-size: 16px; } .lua-popup-box[data-layout='left'], .lua-popup-box[data-layout='right'] { max-width: 860px; } .lua-popup-box[data-layout='left'] .lua-popup-body, .lua-popup-box[data-layout='right'] .lua-popup-body { flex-direction: row; align-items: center; text-align: left; gap: 26px; } .lua-popup-box[data-layout='right'] .lua-popup-body { flex-direction: row-reverse; } .lua-popup-box[data-layout='left'] .lua-popup-media, .lua-popup-box[data-layout='right'] .lua-popup-media { flex: 0 0 46%; max-width: 46%; } .lua-popup-box[data-layout='left'] .lua-popup-desc, .lua-popup-box[data-layout='right'] .lua-popup-desc { flex: 1; } } @keyframes lua-popup-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes lua-popup-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* --- Emoji ------------------------------------------------------------- */ /* * Les emoji saisis depuis /gestion (titres, descriptions, avis) sont enrobés * par les scripts d'injection dans un ``. * * Sans cela, le caractère hérite de la police du texte qui l'entoure. Or * plusieurs polices du site (Roboto, Roboto Slab, Nunito…) contiennent leur * PROPRE dessin, en noir et blanc, de certains symboles également utilisés * comme emoji (cœur, étoile, coche, ciseaux, soleil…). Un navigateur retient * la première police de la liste qui possède un dessin : sur iOS, où ces * polices sont réellement chargées, l'emoji sortait donc en noir et blanc, ou * dans un dessin typographique qui ne ressemble pas à celui saisi. * * En nommant les polices emoji du système EN PREMIER, on garantit le rendu en * couleur. Aucun risque pour le texte autour : ces polices ne contiennent que * des emoji, et tout le reste retombe sur `inherit`, donc sur la typographie * de la page. */ .lua-emoji { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', emoji, sans-serif; /* Le dessin d'un emoji est carré et souvent plus « lourd » que la fonte courante : on neutralise gras/italique hérités, qui produisent sinon une synthèse d'inclinaison disgracieuse sur iOS. */ font-weight: 400; font-style: normal; /* Empêche la coupure d'une séquence d'emoji (drapeaux, familles, teintes de peau) au milieu, ce qui la ferait éclater en plusieurs caractères. */ white-space: nowrap; } /* --- Page Prestations : même typographie sur mobile que sur ordinateur --- */ /* * La page Prestations embarque DEUX montages du même contenu : celui affiché * au-dessus de 1024px (`.sa-switch-content-item`) et celui affiché en dessous * (`.ax-cs-content-section`). Le premier n'impose aucune typographie et hérite * donc de celle de la page ; le second, lui, arrive du constructeur de pages * avec `font-weight: 600` et `font-family: Nunito` posés sur TOUT le panneau. * * Résultat : un même texte s'affichait en gras (et dans une autre police) sur * téléphone et sur tablette, mais normalement sur ordinateur — sans qu'aucun * réglage de /gestion puisse y changer quoi que ce soit. On rend simplement au * panneau mobile l'héritage du panneau desktop. Les titres et libellés qui ont * leur propre graisse la conservent : leurs règles sont posées élément par * élément et restent prioritaires. * * `!important` est nécessaire ici : les deux règles d'origine sont posées avec * des sélecteurs à rallonge (jusqu'à cinq classes, dont l'identifiant du * gabarit), qu'aucun sélecteur raisonnable ne peut dépasser en spécificité. */ .ax-cs-content-section { font-weight: inherit !important; font-family: inherit !important; } /* --- Menu Prestations : enroulement responsive du menu horizontal -------- */ /* * Le menu horizontal (« content switcher ») aligne toutes les catégories sur * une seule ligne. Avec des libellés longs (ou sur des écrans plus étroits), il * doit s'ADAPTER AU CONTENU : les onglets s'enroulent proprement sur plusieurs * rangées et restent centrés. L'indicateur de sélection est, lui, recalé par * `vitrine-prestations.js` pour suivre l'onglet actif, y compris sur deux * lignes ou plusieurs rangées. */ .sa-content-switcher .sa-switcher-container { width: 100%; } .sa-content-switcher .sa-switcher-wrap { max-width: 100%; } .sa-content-switcher .sa-switcher-tabs { flex-wrap: wrap; justify-content: center; max-width: 100%; row-gap: 4px; } .sa-content-switcher .sa-switcher-tabs .sa-switch-item { text-align: center; } .sa-content-switcher .sa-switcher-tabs .sa-switch-item span { line-height: 1.25; } /* Transition douce de l'indicateur lorsqu'il change de rangée/hauteur. */ .sa-content-switcher .sa-selector { transition: all 0.35s ease; } /* --- Formulaire de contact (page Contact) ------------------------------- */ /* * Restyle le formulaire d'origine (jugé trop sommaire) avec le style général et * la palette du site : champs arrondis, libellés soignés, focus vert de la * charte et bouton d'envoi en pilule verte (comme les CTA du site). Scopé au * formulaire pour ne rien changer ailleurs ; quelques `!important` pour * l'emporter sur le CSS embarqué du plugin de formulaire. */ .luaform-container .luaform-form .luaform-field { margin-bottom: 20px; } .luaform-container .luaform-form .luaform-field-label { font-weight: 600; font-size: 15px; color: #2f3a37; margin-bottom: 7px; } .luaform-container .luaform-form .luaform-required-label { color: #cba590; /* rosé/beige de la palette */ } .luaform-container .luaform-form input[type='text'], .luaform-container .luaform-form input[type='email'], .luaform-container .luaform-form input[type='number'], .luaform-container .luaform-form input[type='tel'], .luaform-container .luaform-form textarea { width: 100% !important; padding: 13px 16px !important; border: 1px solid #e6dccf !important; border-radius: 12px !important; background: #fff !important; color: #33403c !important; font-size: 15px !important; line-height: 1.5 !important; box-shadow: none !important; transition: border-color 0.15s ease, box-shadow 0.15s ease !important; } .luaform-container .luaform-form input[type='text']:focus, .luaform-container .luaform-form input[type='email']:focus, .luaform-container .luaform-form input[type='number']:focus, .luaform-container .luaform-form input[type='tel']:focus, .luaform-container .luaform-form textarea:focus { border-color: #205b4f !important; box-shadow: 0 0 0 3px rgba(32, 91, 79, 0.13) !important; outline: none !important; } .luaform-container .luaform-form textarea { min-height: 150px !important; resize: vertical !important; } /* Masque les flèches du champ « numéro de téléphone » (type number). */ .luaform-container .luaform-form input[type='number'] { -moz-appearance: textfield; } .luaform-container .luaform-form input[type='number']::-webkit-outer-spin-button, .luaform-container .luaform-form input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .luaform-container .luaform-form .luaform-field-sublabel { color: #9c9286; font-size: 12.5px; margin-top: 5px; } .luaform-container .luaform-form .luaform-submit-container { text-align: center; margin-top: 8px; } .luaform-container .luaform-form .luaform-submit { display: inline-block; padding: 14px 40px !important; border: none !important; border-radius: 999px !important; background: #205b4f !important; color: #fff !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0.3px; cursor: pointer; box-shadow: 0 6px 18px -8px rgba(32, 91, 79, 0.6) !important; transition: background 0.15s ease, transform 0.15s ease !important; } .luaform-container .luaform-form .luaform-submit:hover { background: #53a292 !important; transform: translateY(-1px); }