/* Cabinet Hypnose Booking - styles publics Identité visuelle : bleu #549BDF, anthracite #373A36 Mobile-first, aucune dépendance externe. Unités en px fixes partout (pas de rem/em) : sur le site en prod (Elementor), le thème redéfinit la taille de police de à 10px au lieu des 16px standards pour ses propres calculs internes — tout ce qui était en rem s'affichait donc à 62% de sa taille prévue (ex. bouton à 10px au lieu de 16px, repéré en conditions réelles le 2026-07-21). Le px fixe est insensible à ce que fait le thème. */ .chb-app { /* !important nécessaire : sur les thèmes à blocs (ex. Twenty Twenty-Five), la règle globale ".is-layout-constrained > :where(...)" a exactement la même spécificité CSS (0,1,0) que ce sélecteur de classe seul, et peut l'emporter selon l'ordre de chargement des feuilles de style — repéré en conditions réelles le 2026-07-20, le formulaire restait bloqué à la largeur imposée par le thème au lieu de celle du plugin. */ max-width: 480px !important; margin: 0 auto; font-family: inherit; font-size: 16px !important; color: #373A36; } .chb-app h3 { color: #373A36; margin-bottom: 16px; font-size: 18px; } .chb-choice-group { display: flex; flex-direction: column; gap: 12px; } .chb-choice { padding: 16px; border: 2px solid #549BDF; border-radius: 10px; background: #fff; color: #373A36; font-size: 16px; cursor: pointer; transition: background-color 0.15s ease; } .chb-choice:hover, .chb-choice:focus-visible { background-color: #549BDF; color: #fff; } #chb-date-picker, #chb-reschedule-date { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 8px; margin-bottom: 16px; font-size: 16px; } .chb-slots-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .chb-slot-btn { padding: 10px; border: 1px solid #549BDF; border-radius: 8px; background: #fff; color: #373A36; font-size: 16px; cursor: pointer; } .chb-slot-btn:hover { background: #549BDF; color: #fff; } .chb-slot-btn-local { font-size: 12px; opacity: 0.75; } #chb-info-form label, #chb-waitlist-form label, #chb-package-info-form label { display: block; margin-top: 12px; font-weight: 600; font-size: 14px; } #chb-info-form input[type="text"], #chb-info-form input[type="email"], #chb-info-form input[type="tel"], #chb-waitlist-form input[type="text"], #chb-waitlist-form input[type="email"], #chb-waitlist-form input[type="tel"], #chb-package-info-form input[type="text"], #chb-package-info-form input[type="email"], #chb-package-info-form input[type="tel"] { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 8px; font-size: 16px; margin-top: 4px; } .chb-tz-note { font-size: 13px; color: #666; margin: 4px 0 12px; } .chb-next-availability { background: #f5f7fa; border-radius: 10px; padding: 14px; margin-bottom: 16px; } .chb-next-availability-label { font-weight: 600; margin: 0 0 10px; } .chb-next-availability-or { font-size: 13px; color: #666; margin: 10px 0 0; } .chb-phone-hint { font-size: 13px; color: #666; margin-top: 4px; } /* Certains thèmes (ex. OceanWP) appliquent -webkit-appearance:none à TOUS les input[type=checkbox] du site et dessinent eux-mêmes la coche via une pseudo-classe :checked:before qui dépend d'une police d'icônes (Font Awesome) — si cette police n'est pas chargée sur la page, la case se coche bien en interne mais AUCUNE coche ne s'affiche jamais visuellement, donnant l'impression qu'un clic ne fait rien. Repéré en conditions réelles le 2026-07-21 (Axel : "je ne peux pas cocher la case", alors que la case fonctionnait en réalité). Restaure l'apparence native du navigateur pour les cases du plugin, indépendante de toute police tierce. */ .chb-app input[type="checkbox"] { -webkit-appearance: checkbox !important; -moz-appearance: checkbox !important; appearance: auto !important; width: 18px !important; height: 18px !important; min-width: 18px !important; } /* Honeypot : invisible pour un humain, présent pour les bots */ .chb-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .chb-waiver { margin-top: 16px; font-size: 14px; background: #f5f7fa; padding: 12px; border-radius: 8px; } .chb-waitlist-optin { margin-top: 16px; font-size: 14px; } .chb-reduced-rate { margin-top: 16px; font-size: 14px; } .chb-cancellation-policy { font-size: 13px; color: #666; margin-top: 12px; } .chb-status-note { margin-top: 12px; padding: 12px; background: #f5f7fa; border-radius: 8px; font-weight: 600; } .chb-btn-primary { width: 100%; padding: 16px; margin-top: 20px; background: #549BDF; color: #fff; border: none; border-radius: 10px; font-size: 17px; font-weight: 600; cursor: pointer; } .chb-btn-primary:hover { background: #3f7fc0; } .chb-btn-secondary { padding: 12px 20px; background: #fff; border: 2px solid #373A36; border-radius: 8px; color: #373A36; font-size: 16px; cursor: pointer; margin-right: 8px; } .chb-btn-link { background: none; border: none; color: #549BDF; font-size: 16px; text-decoration: underline; cursor: pointer; display: block; margin-top: 8px; padding: 4px 0; } .chb-danger { color: #c0392b; } .chb-error-message { color: #c0392b; font-weight: 600; font-size: 16px; } .chb-manage-actions { display: flex; gap: 8px; margin: 16px 0; } /* .chb-manage-actions fixe display:flex, ce qui prime sur la règle par défaut du navigateur [hidden] { display:none } — sans cette règle, masquer le bloc via l'attribut "hidden" (lockToStatus() dans manage-booking.js) ne le cachait pas visuellement malgré hidden=true en JS (repéré en testant en navigateur réel le 2026-07-22, même famille de piège que le bug des cases à cocher OceanWP : la valeur DOM était correcte mais le rendu visuel ne suivait pas). */ .chb-manage-actions[hidden] { display: none; } #chb-data-export { background: #f5f7fa; padding: 16px; border-radius: 8px; overflow-x: auto; font-size: 13px; margin-top: 12px; } /* Écrans plus larges : un peu plus d'air, sans changer la logique mobile-first */ @media (min-width: 600px) { .chb-app { padding: 24px; } } /* Desktop : la limite de 480px (pensée pour mobile) faisait paraître le formulaire minuscule une fois logé dans un conteneur de page large (ex. 1120px chez un thème Elementor) — repéré en conditions réelles le 2026-07-20. Élargi sans aller jusqu'à une largeur de champ inconfortable. */ @media (min-width: 900px) { .chb-app { max-width: 640px !important; } }