/* ============================================================ Localo Chat — Premium Override v1 À charger EN DERNIER dans le , après themes.css Ne touche pas à la logique — uniquement l'esthétique ============================================================ */ /* ── 1. Police globale ──────────────────────────────────────── */ body { font-family: var(--localo-font, 'Sora', 'Avenir Next', 'Segoe UI', sans-serif); background: var(--localo-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── 2. Spinner de chargement ───────────────────────────────── */ .modern-spinner { background: radial-gradient(ellipse 65% 50% at 5% 0%, oklch(0.5 0.08 152 / 0.6), transparent), radial-gradient(ellipse 55% 40% at 95% 5%, oklch(0.52 0.09 170 / 0.5), transparent), linear-gradient(160deg, oklch(0.26 0.06 155) 0%, oklch(0.36 0.09 152) 50%, oklch(0.44 0.1 158) 100% ); } .spinner-text p { font-family: var(--localo-font, 'Sora', 'Segoe UI', sans-serif); font-weight: 600; letter-spacing: 0.02em; color: oklch(0.92 0.03 148); } /* Anneaux spinner : vert à la place du bleu */ .spinner-ring { border-color: oklch(0.65 0.1 155 / 0.25); border-top-color: oklch(0.78 0.1 148); } /* ── 3. Header ──────────────────────────────────────────────── */ .modern-header { background: linear-gradient( 120deg, oklch(0.26 0.06 155) 0%, oklch(0.36 0.09 152) 65%, oklch(0.44 0.1 170) 100% ); border-bottom: 1px solid oklch(0.38 0.07 150 / 0.55); box-shadow: 0 1px 0 oklch(0.55 0.07 152 / 0.18), 0 4px 16px oklch(0.22 0.025 265 / 0.18); } /* Titre "Localo" dans le header */ .brand-text h1 { font-family: var(--localo-font-display, 'Newsreader', 'Georgia', serif); font-weight: 600; letter-spacing: -0.01em; color: oklch(0.97 0.03 90); text-shadow: 0 1px 2px oklch(0.14 0.04 155 / 0.35); } .brand-text h1::after { background: linear-gradient(90deg, oklch(0.88 0.07 80 / 0.9), oklch(0.88 0.07 80 / 0.2)); } /* Badge rôle + lien dashboard */ .brand-subtitle, .header-dashboard-link { border-color: oklch(0.62 0.07 148 / 0.5); background: oklch(0.99 0 0 / 0.12); color: oklch(0.94 0.03 148); font-family: var(--localo-font, sans-serif); } .header-dashboard-link:hover { background: oklch(0.99 0 0 / 0.2); } /* Indicateur connexion */ .connection-indicator { background: oklch(0.99 0 0 / 0.1); border: 1px solid oklch(0.99 0 0 / 0.2); } .status-dot.connected { background: oklch(0.72 0.14 148); } .status-dot.error { background: oklch(0.62 0.19 28); } /* ── 4. Fond général de l'app ───────────────────────────────── */ body { background-color: var(--localo-bg); background-image: radial-gradient(ellipse 70% 45% at 5% -5%, oklch(0.88 0.05 152 / 0.4), transparent), radial-gradient(ellipse 60% 35% at 95% 8%, oklch(0.89 0.06 72 / 0.3), transparent); } /* ── 5. Messages ────────────────────────────────────────────── */ .message-list li { background: var(--localo-surface); border: 1px solid var(--localo-border-soft, oklch(0.92 0.012 82)); border-left: 3px solid oklch(0.84 0.015 250); border-radius: 14px; box-shadow: 0 1px 0 oklch(0.99 0 0 / 0.75) inset, 0 4px 14px var(--localo-shadow-xs, oklch(0.22 0.025 265 / 0.06)); transition: box-shadow 200ms ease, transform 200ms ease; } .message-list li:hover { box-shadow: 0 1px 0 oklch(0.99 0 0 / 0.75) inset, 0 8px 24px var(--localo-shadow-sm, oklch(0.22 0.025 265 / 0.10)); transform: translateY(-1px); } /* Bordure gauche colorée selon le rôle */ .message-list li.role-vacancier { border-left-color: oklch(0.82 0.02 250); background: oklch(0.998 0.003 252); } .message-list li.role-employe, .message-list li.role-employe-velo, .message-list li.role-employe-navette { border-left-color: var(--localo-primary, oklch(0.36 0.09 152)); background: linear-gradient(135deg, var(--localo-surface) 0%, var(--localo-brand-pale, oklch(0.96 0.025 152)) 100%); } .message-list li.role-directeur, .message-list li.role-adjoint, .message-list li.role-admin { border-left-color: oklch(0.54 0.12 248); background: linear-gradient(135deg, var(--localo-surface) 0%, oklch(0.97 0.012 245) 100%); } .message-list li.role-directeur-alert { border-left-color: oklch(0.62 0.18 28); background: linear-gradient(135deg, var(--localo-surface) 0%, oklch(0.97 0.02 28) 100%); } /* Typographie messages */ .message-content { font-size: 0.95rem; line-height: 1.65; color: var(--localo-text, oklch(0.22 0.025 265)); } .date-time { font-size: 0.72rem; color: var(--localo-subtle, oklch(0.65 0.016 260)); font-weight: 500; } /* Réactions */ .icon { background: var(--localo-brand-pale, oklch(0.96 0.025 152)); color: var(--localo-primary, oklch(0.36 0.09 152)); border: 1px solid oklch(0.62 0.06 152 / 0.18); border-radius: 8px; } .icon:hover { background: var(--localo-brand-light, oklch(0.92 0.04 152)); } .icon.clicked-like { background: var(--localo-brand-light, oklch(0.92 0.04 152)); color: var(--localo-primary, oklch(0.36 0.09 152)); } /* ── 6. Zone de saisie (write zone) ─────────────────────────── */ .write-zone { background: oklch(0.995 0.006 85 / 0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--localo-border-soft, oklch(0.92 0.012 82)); border-bottom: none; box-shadow: 0 -4px 24px oklch(0.22 0.025 265 / 0.09); } #messageInput { background: var(--localo-surface, oklch(0.995 0.006 85)); border: 1px solid var(--localo-border, oklch(0.88 0.02 80)); border-radius: 10px; color: var(--localo-text, oklch(0.22 0.025 265)); font-family: var(--localo-font, 'Sora', sans-serif); font-size: 0.95rem; } #messageInput:focus { border-color: var(--localo-primary, oklch(0.36 0.09 152)); box-shadow: 0 0 0 3px oklch(0.44 0.1 158 / 0.14); background: oklch(0.999 0.003 85); } #messageInput::placeholder { color: var(--localo-subtle, oklch(0.65 0.016 260)); } /* Compteur de caractères */ .character-count { background: oklch(0.97 0.012 82); color: var(--localo-subtle, oklch(0.65 0.016 260)); border-radius: 6px; font-size: 0.7rem; font-weight: 600; } /* ── 7. Bouton Envoyer ──────────────────────────────────────── */ .send-button { background: linear-gradient(135deg, var(--localo-accent, oklch(0.69 0.17 60)) 0%, var(--localo-accent-2, oklch(0.62 0.19 44)) 100% ); color: oklch(0.99 0 0); border: 1px solid oklch(0.62 0.18 48 / 0.5); box-shadow: inset 0 1px 0 oklch(0.99 0 0 / 0.2), 0 4px 14px oklch(0.48 0.16 55 / 0.26); font-family: var(--localo-font, sans-serif); font-weight: 700; } .send-button:hover:not(:disabled) { background: linear-gradient(135deg, oklch(0.72 0.17 62) 0%, oklch(0.65 0.19 46) 100% ); box-shadow: inset 0 1px 0 oklch(0.99 0 0 / 0.2), 0 8px 22px oklch(0.48 0.16 55 / 0.34); } /* Bouton annuler — plus subtil */ .cancel-button { background: var(--localo-surface-alt, oklch(0.975 0.012 80)); color: var(--localo-muted, oklch(0.48 0.022 265)); border: 1px solid var(--localo-border, oklch(0.88 0.02 80)); box-shadow: none; } .cancel-button:hover:not(:disabled) { background: var(--localo-border, oklch(0.88 0.02 80)); color: var(--localo-text, oklch(0.22 0.025 265)); transform: translateY(-1px); } /* ── 8. Bouton composeur flottant (+) ───────────────────────── */ .composer-toggle-button { background: linear-gradient( 135deg, color-mix(in oklch, var(--localo-primary, oklch(0.36 0.09 152)) 82%, black 18%) 0%, var(--localo-primary, oklch(0.36 0.09 152)) 100% ); border-color: oklch(0.55 0.07 152 / 0.5); box-shadow: 0 8px 24px oklch(0.22 0.06 155 / 0.28), inset 0 1px 0 oklch(0.99 0 0 / 0.15); color: oklch(0.99 0 0); } /* ── 9. Barre de navigation basse ───────────────────────────── */ .bottom-bar { background: oklch(0.995 0.006 85 / 0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--localo-border-soft, oklch(0.92 0.012 82)); box-shadow: 0 -2px 18px oklch(0.22 0.025 265 / 0.08); } /* Icônes inactives */ .bottom-bar .bar-icon { color: oklch(0.55 0.07 152); font-family: var(--localo-font, sans-serif); } .bottom-bar .bar-icon:hover { background: var(--localo-brand-pale, oklch(0.96 0.025 152)); color: var(--localo-primary, oklch(0.36 0.09 152)); } /* Onglet actif — vert premium */ .bottom-bar .bar-icon.active { background: linear-gradient( 135deg, color-mix(in oklch, var(--localo-primary, oklch(0.36 0.09 152)) 88%, black 12%) 0%, var(--localo-primary-mid, oklch(0.44 0.1 158)) 100% ); color: oklch(0.99 0 0); box-shadow: 0 4px 14px oklch(0.36 0.09 152 / 0.28); transform: translateY(-3px); } /* Label des onglets */ .bottom-bar .icon-label { font-family: var(--localo-font, sans-serif); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em; } /* ── 10. Barre de recherche ─────────────────────────────────── */ .search-bar { background: oklch(0.995 0.006 85 / 0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--localo-border-soft, oklch(0.92 0.012 82)); border-top: 2px solid var(--localo-primary, oklch(0.36 0.09 152)); } #searchInput { background: var(--localo-surface, oklch(0.995 0.006 85)); border-color: var(--localo-border, oklch(0.88 0.02 80)); font-family: var(--localo-font, sans-serif); } #searchInput:focus { border-color: var(--localo-primary, oklch(0.36 0.09 152)); box-shadow: 0 0 0 3px oklch(0.44 0.1 158 / 0.14); } .search-button { background: linear-gradient(135deg, var(--localo-primary, oklch(0.36 0.09 152)), var(--localo-primary-mid, oklch(0.44 0.1 158)) ); } #cancelSearch { background: oklch(0.88 0.016 28); color: oklch(0.52 0.17 28); border: 1px solid oklch(0.80 0.06 28 / 0.4); } /* ── 11. Toasts ─────────────────────────────────────────────── */ #toast, .toast { background: oklch(0.27 0.04 155); color: oklch(0.97 0.02 148); border: 1px solid oklch(0.42 0.08 155 / 0.5); box-shadow: 0 8px 28px oklch(0.22 0.025 265 / 0.22); font-family: var(--localo-font, sans-serif); font-weight: 500; border-radius: 12px; } /* ── 12. Modales ────────────────────────────────────────────── */ .modal-content { background: var(--localo-surface, oklch(0.995 0.006 85)); border: 1px solid var(--localo-border-soft, oklch(0.92 0.012 82)); box-shadow: 0 1px 0 oklch(0.99 0 0 / 0.75) inset, 0 24px 56px oklch(0.22 0.025 265 / 0.22); border-radius: 20px; } .modal-header h3 { font-family: var(--localo-font-display, 'Newsreader', 'Georgia', serif); font-weight: 600; color: var(--localo-text, oklch(0.22 0.025 265)); } /* Modale QR */ .qr-large-container { border: 2px solid var(--localo-border, oklch(0.88 0.02 80)) !important; background: var(--localo-surface) !important; box-shadow: 0 4px 20px var(--localo-shadow-xs) !important; border-radius: 16px !important; } /* ── 13. Section réservations ───────────────────────────────── */ .reservation-hub-header h2 { font-family: var(--localo-font-display, 'Newsreader', 'Georgia', serif); font-weight: 600; color: var(--localo-text, oklch(0.22 0.025 265)); } .reservation-hub-header p { color: var(--localo-muted, oklch(0.48 0.022 265)); } /* Créneaux disponibles */ .time-slot.available { border-color: var(--localo-primary, oklch(0.36 0.09 152)); background: linear-gradient(135deg, oklch(0.99 0.003 85) 0%, var(--localo-brand-pale, oklch(0.96 0.025 152)) 100% ); } .time-slot:hover:not(.disabled-for-user):not(.full) { border-color: var(--localo-primary, oklch(0.36 0.09 152)); background: var(--localo-brand-pale, oklch(0.96 0.025 152)); } .time-slot.my-reservation { background: linear-gradient(135deg, var(--localo-primary, oklch(0.36 0.09 152)), var(--localo-primary-mid, oklch(0.44 0.1 158)) ); border-color: var(--localo-primary, oklch(0.36 0.09 152)); } /* Boutons de navigation réservation */ .nav-button { background: linear-gradient(135deg, var(--localo-primary, oklch(0.36 0.09 152)), var(--localo-primary-mid, oklch(0.44 0.1 158)) ); } /* ── 14. Écran consentement cookies ─────────────────────────── */ .consent-banner { background: var(--localo-surface, oklch(0.995 0.006 85)); border: 1px solid var(--localo-border-soft, oklch(0.92 0.012 82)); box-shadow: 0 1px 0 oklch(0.99 0 0 / 0.75) inset, 0 28px 64px oklch(0.22 0.025 265 / 0.28); border-radius: 20px; } .consent-cookie-box { border-color: oklch(0.62 0.06 152 / 0.22); background: linear-gradient(180deg, var(--localo-brand-pale, oklch(0.96 0.025 152)) 0%, oklch(0.975 0.018 152) 100% ); } .consent-rules-box { border-color: oklch(0.62 0.06 152 / 0.22); background: linear-gradient(180deg, oklch(0.97 0.02 155) 0%, oklch(0.96 0.025 152) 100% ); } /* Bouton "Accepter" cookies → ambre */ .cookie-choice-primary, #cookieAcceptAll { background: linear-gradient(135deg, var(--localo-accent, oklch(0.69 0.17 60)), var(--localo-accent-2, oklch(0.62 0.19 44)) ); color: oklch(0.99 0 0); border: 1px solid oklch(0.62 0.18 48 / 0.5); } .cookie-choice-primary:hover, #cookieAcceptAll:hover { filter: brightness(1.06); } /* Bouton "Refuser" cookies */ .cookie-choice-secondary { background: var(--localo-surface-alt, oklch(0.975 0.012 80)); color: var(--localo-muted, oklch(0.48 0.022 265)); border: 1px solid var(--localo-border, oklch(0.88 0.02 80)); } /* Bouton "Activer les interactions" */ #acceptConsent.cookie-button { background: linear-gradient(135deg, var(--localo-accent, oklch(0.69 0.17 60)), var(--localo-accent-2, oklch(0.62 0.19 44)) ); color: oklch(0.99 0 0); font-family: var(--localo-font, sans-serif); font-weight: 700; border: 1px solid oklch(0.62 0.18 48 / 0.45); box-shadow: 0 4px 14px oklch(0.48 0.16 55 / 0.22); } #acceptConsent.cookie-button:hover { filter: brightness(1.06); } .consent-post-cookie-hint { border-left-color: var(--localo-primary, oklch(0.36 0.09 152)); background: var(--localo-brand-pale, oklch(0.96 0.025 152)); color: oklch(0.28 0.06 155); } .legal-links a { color: var(--localo-primary, oklch(0.36 0.09 152)); } /* ── 15. Tickets chauffeur ──────────────────────────────────── */ .driver-ticket { background: linear-gradient(135deg, var(--localo-primary, oklch(0.36 0.09 152)), oklch(0.28 0.07 158) ); border-color: oklch(0.26 0.06 155); } /* ── 16. Scrollbar raffinée ─────────────────────────────────── */ .message-list::-webkit-scrollbar { width: 4px; } .message-list::-webkit-scrollbar-track { background: transparent; } .message-list::-webkit-scrollbar-thumb { background: var(--localo-border, oklch(0.88 0.02 80)); border-radius: 4px; } .message-list::-webkit-scrollbar-thumb:hover { background: oklch(0.75 0.04 152); } /* ── Suppression du hint "Cookies acceptés..." ──────────────── */ /* Ce message n'est plus pertinent : les cookies sont auto-décidés et la modale ne montre que les règles tchat. */ .consent-post-cookie-hint { display: none !important; } /* ── ⚠️ Icône signalement : discrète par défaut ──────────────── */ /* Remplace le jaune alarmiste par un gris subtil. L'action reste accessible mais ne ressemble plus à une erreur. */ .report-icon, .message-footer-report { opacity: 0.55; filter: grayscale(0.6); transition: opacity 180ms ease, filter 180ms ease; } /* Redevient visible au tap (focus) ou dans le contexte actif */ .report-icon:hover, .report-icon:focus, .report-icon:active, .message-footer-report:hover, .message-footer-report:focus, .message-footer-report:active { opacity: 0.75; filter: grayscale(0); } /* ══════════════════════════════════════════════════════════════ UI Excellence — Réservations, QR Code, Infos, Signaler ══════════════════════════════════════════════════════════════ */ /* ── Boutons "Ouvrir" / "Envoyer le signalement" ─────────────── */ /* Remplace le bleu générique par le vert brand */ .reservation-hub-shell .button, .reservation-hub-shell .btn, .reservation-service-open-btn, .issue-submit-btn, button.submit-issue, .issue-main-container .button, [class*="reservation"] .send-button, [class*="issue"] .send-button { background: linear-gradient( 135deg, var(--localo-primary, oklch(0.36 0.09 152)), var(--localo-primary-mid, oklch(0.44 0.1 158)) ) !important; border-color: oklch(0.38 0.07 150 / 0.5) !important; box-shadow: inset 0 1px 0 oklch(0.99 0 0 / 0.15), 0 4px 14px oklch(0.36 0.09 152 / 0.25) !important; border-radius: 12px !important; } /* ── Cartes de service (Navette, Cours, Excursions) ──────────── */ .reservation-service-card, .reservation-hub-card, [class*="service-card"] { border-radius: 16px !important; border: 1px solid var(--localo-border-soft, oklch(0.92 0.012 82)) !important; box-shadow: 0 1px 0 oklch(0.99 0 0 / 0.75) inset, 0 6px 20px oklch(0.22 0.025 265 / 0.07) !important; background: var(--localo-surface, oklch(0.995 0.006 85)) !important; } /* Titre des cartes de service */ .reservation-service-card h3, .reservation-hub-card h3, .reservation-service-name { font-family: var(--localo-font-display, 'Newsreader', Georgia, serif) !important; font-weight: 600 !important; color: oklch(0.22 0.03 265) !important; letter-spacing: -0.01em !important; } /* ── Header réservations ─────────────────────────────────────── */ .reservation-hub-header h2 { font-family: var(--localo-font-display, 'Newsreader', Georgia, serif) !important; font-size: clamp(1.3rem, 4vw, 1.7rem) !important; letter-spacing: -0.02em !important; color: oklch(0.22 0.03 265) !important; } .reservation-hub-header p { color: var(--localo-muted, oklch(0.48 0.022 265)) !important; font-size: 0.9rem !important; } /* ── Écran QR Code ───────────────────────────────────────────── */ /* Titre : texte neutre (la couleur brand peut être bleue selon thème) */ .main-content.qr-content h2, .main-content.qr-content h3, .qr-title, [class*="qr"] h2, [class*="qr"] h3 { color: var(--localo-text, oklch(0.22 0.025 265)) !important; font-family: var(--localo-font-display, 'Newsreader', Georgia, serif) !important; font-weight: 600 !important; } /* Centrage vertical du contenu QR — supprime l'espace vide */ .main-content.qr-content, .main-changeable-zone.qr-content { justify-content: center !important; padding-top: 1rem !important; } /* Cadre QR plus raffiné */ .qr-large-container { border: 1.5px solid var(--localo-border, oklch(0.88 0.02 80)) !important; border-radius: 16px !important; box-shadow: 0 1px 0 oklch(0.99 0 0 / 0.8) inset, 0 8px 28px oklch(0.22 0.025 265 / 0.1) !important; min-height: auto !important; padding: 1rem !important; } /* ── Écran Infos ─────────────────────────────────────────────── */ /* Titre section "Informations pratiques" */ .info-section-title, .info-main-title, [class*="info"] h2 { font-family: var(--localo-font-display, 'Newsreader', Georgia, serif) !important; font-weight: 600 !important; letter-spacing: -0.015em !important; color: oklch(0.22 0.03 265) !important; } /* Nom du camping en petites caps élégantes */ .info-club-name, .club-name-label { font-size: 0.72rem !important; font-weight: 600 !important; letter-spacing: 0.1em !important; color: var(--localo-primary, oklch(0.36 0.09 152)) !important; text-transform: uppercase !important; } /* Cartes infos (Plan, Menu, Téléphones) */ .info-media-card, .info-card { border-radius: 14px !important; border: 1px solid var(--localo-border-soft, oklch(0.92 0.012 82)) !important; box-shadow: 0 1px 0 oklch(0.99 0 0 / 0.75) inset, 0 4px 14px oklch(0.22 0.025 265 / 0.06) !important; overflow: hidden !important; } /* Labels sous les cartes (PLAN, Menu du jour...) */ .info-media-card-label, .info-card-label { font-size: 0.82rem !important; font-weight: 600 !important; color: oklch(0.28 0.04 265) !important; padding: 0.5rem 0.7rem !important; letter-spacing: 0 !important; text-transform: none !important; } /* ── Écran Signaler ──────────────────────────────────────────── */ /* Remplacer ⚠️ alarmiste dans le titre par style neutre */ .issue-main-container h2, .issue-title, [class*="issue"] h2 { font-family: var(--localo-font-display, 'Newsreader', Georgia, serif) !important; font-size: 1.35rem !important; font-weight: 600 !important; color: oklch(0.22 0.03 265) !important; letter-spacing: -0.015em !important; } /* Masquer le ⚠️ du titre Signaler (différent du ⚠️ des messages) */ .issue-main-container h2 .issue-icon, .issue-title-icon { display: none !important; } /* Labels des champs du formulaire */ .issue-report-form label > span, .issue-report-form label { font-size: 0.82rem !important; font-weight: 600 !important; color: oklch(0.32 0.04 258) !important; } /* Champs du formulaire */ .issue-report-form input, .issue-report-form select, .issue-report-form textarea { border-radius: 10px !important; border: 1px solid var(--localo-border, oklch(0.88 0.02 80)) !important; background: var(--localo-surface, oklch(0.995 0.006 85)) !important; font-family: var(--localo-font, 'Sora', sans-serif) !important; } .issue-report-form input:focus, .issue-report-form select:focus, .issue-report-form textarea:focus { border-color: var(--localo-primary, oklch(0.36 0.09 152)) !important; box-shadow: 0 0 0 3px oklch(0.44 0.1 158 / 0.14) !important; } /* Note "Signalement privé" */ .issue-privacy-note { color: var(--localo-subtle, oklch(0.65 0.016 260)) !important; font-size: 0.78rem !important; } /* ══════════════════════════════════════════════════════════════ UI Excellence v2 — sélecteurs exacts depuis ui-navigation.js ══════════════════════════════════════════════════════════════ */ /* ── Signaler : supprimer le ⚠️ du titre ────────────────────── */ /* Le ⚠️ est le premier caractère du h3 : ::first-letter le masque */ .issue-main-container h3::first-letter { font-size: 0 !important; line-height: 0 !important; margin-right: 0 !important; } .issue-main-container h3 { font-family: var(--localo-font-display, 'Newsreader', Georgia, serif) !important; font-size: 1.35rem !important; font-weight: 600 !important; color: oklch(0.22 0.03 265) !important; letter-spacing: -0.015em !important; } /* ── QR Code : centrage vertical, supprimer espace vide ──────── */ .main-content.qr-content-large { display: flex !important; align-items: center !important; justify-content: center !important; padding-top: 0 !important; margin-top: 0 !important; } .qr-main-container-large { background: var(--localo-surface, oklch(0.995 0.006 85)) !important; border: 1px solid var(--localo-border-soft, oklch(0.92 0.012 82)) !important; border-radius: 20px !important; box-shadow: 0 1px 0 oklch(0.99 0 0 / 0.75) inset, 0 8px 28px oklch(0.22 0.025 265 / 0.09) !important; padding: 1.5rem !important; width: min(340px, 90%) !important; margin: 0 auto !important; } .qr-main-header-large h3 { color: var(--localo-text, oklch(0.22 0.025 265)) !important; font-family: var(--localo-font-display, 'Newsreader', Georgia, serif) !important; font-weight: 600 !important; font-size: 1.25rem !important; margin-bottom: 0.75rem !important; } /* ── Infos : icône □ cassée avant "Informations pratiques" ──── */ /* 🛈 = 🛈 — on masque et on restaure proprement */ .rules-main-header h3 { font-family: var(--localo-font-display, 'Newsreader', Georgia, serif) !important; font-size: 1.35rem !important; font-weight: 600 !important; color: oklch(0.22 0.03 265) !important; letter-spacing: -0.015em !important; } /* Masquer le caractère □ cassé (premier caractère du h3) */ .rules-main-header h3::first-letter { font-size: 0 !important; line-height: 0 !important; } /* Nom du camping (p.muted dans rules-main-header) */ .rules-main-header p.muted { font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important; color: var(--localo-primary, oklch(0.36 0.09 152)) !important; text-transform: uppercase !important; margin-bottom: 0.2rem !important; } /* ── Réservations : compacité pour tenir sur une seule page ──── */ .reservation-hub-shell { padding: 0.75rem !important; } .reservation-hub-header { margin-bottom: 0.75rem !important; padding-bottom: 0.5rem !important; } .reservation-hub-header h2 { font-size: 1.2rem !important; font-family: var(--localo-font-display, 'Newsreader', Georgia, serif) !important; font-weight: 600 !important; margin-bottom: 0.2rem !important; } .reservation-hub-header p { font-size: 0.82rem !important; color: var(--localo-muted) !important; margin: 0 !important; } /* Cartes services : padding réduit */ .reservation-hub-shell .card { padding: 0.85rem !important; margin-bottom: 0.6rem !important; border-radius: 14px !important; } /* Bouton Ouvrir : hauteur réduite, vert brand */ .reservation-hub-shell .send-button, .reservation-hub-shell button.send-button { background: linear-gradient(135deg, var(--localo-primary, oklch(0.36 0.09 152)), var(--localo-primary-mid, oklch(0.44 0.1 158)) ) !important; min-height: 42px !important; padding: 0.6rem 1rem !important; font-size: 0.9rem !important; border-radius: 10px !important; border-color: oklch(0.38 0.07 150 / 0.5) !important; box-shadow: inset 0 1px 0 oklch(0.99 0 0 / 0.15), 0 3px 10px oklch(0.36 0.09 152 / 0.22) !important; margin-top: 0.6rem !important; } /* ══════════════════════════════════════════════════════════════ QR Code — taille agrandie + compatibilité 100% cross-device ══════════════════════════════════════════════════════════════ */ /* Conteneur de la zone d'affichage QR */ .qr-display-area-large, .qr-display-area { display: flex !important; align-items: center !important; justify-content: center !important; padding: 0.75rem !important; background: #ffffff !important; border-radius: 12px !important; border: 1px solid oklch(0.88 0.02 80) !important; margin: 0.75rem auto !important; width: fit-content !important; max-width: 100% !important; } /* Canvas — Android Chrome, Samsung Internet, Firefox */ .qr-display-area-large canvas, .qr-display-area canvas { display: block !important; /* Rendu net sur écrans haute densité (Samsung, Pixel...) */ image-rendering: pixelated !important; image-rendering: crisp-edges !important; /* Taille CSS adaptée à l'écran, sans dépasser le conteneur */ width: min(300px, 75vw) !important; height: min(300px, 75vw) !important; max-width: 100% !important; } /* Image fallback — iOS Safari (qrcodejs génère img + canvas) */ .qr-display-area-large img, .qr-display-area img { display: block !important; image-rendering: pixelated !important; -webkit-image-rendering: pixelated !important; /* Safari iOS */ width: min(300px, 75vw) !important; height: min(300px, 75vw) !important; max-width: 100% !important; } /* Table fallback — très vieux navigateurs */ .qr-display-area-large table, .qr-display-area table { margin: 0 auto !important; border-collapse: collapse !important; } /* Texte de chargement / erreur */ .qr-loading, .qr-error { font-size: 0.85rem !important; color: oklch(0.55 0.02 248) !important; padding: 1rem !important; text-align: center !important; } /* Card container ajustée pour 300px */ .qr-main-container-large { width: min(360px, 92vw) !important; } /* ── QR Code : forcer le carré sur iOS (fix étirement vertical) */ .qr-display-area-large, .qr-display-area { width: min(300px, 75vw) !important; height: min(300px, 75vw) !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; } .qr-display-area-large canvas, .qr-display-area canvas, .qr-display-area-large img, .qr-display-area img { width: 100% !important; height: 100% !important; aspect-ratio: 1 / 1 !important; object-fit: contain !important; } /* ── QR Code : pleine largeur du conteneur, carré garanti ────── */ .qr-main-container-large { width: min(92vw, 400px) !important; padding: 1rem !important; } .qr-display-area-large { width: calc(100% - 0px) !important; height: auto !important; aspect-ratio: 1 / 1 !important; padding: 0.6rem !important; } .qr-display-area-large canvas, .qr-display-area-large img { width: 100% !important; height: 100% !important; aspect-ratio: 1 / 1 !important; display: block !important; } /* ── QR Code : supprimer les marges du conteneur parent ──────── */ .main-content.qr-content-large { padding: 0 !important; margin: 0 !important; } .qr-main-container-large { width: 100% !important; max-width: 400px !important; margin: 0 auto !important; border-radius: 0 !important; box-shadow: none !important; border: none !important; padding: 1rem 1rem 1.25rem !important; } .qr-display-area-large { width: 100% !important; max-width: 100% !important; } /* ── Modale règles tchat (chat-rules-consent) ───────────────── */ /* Masquer les
  • vides (moderation, local_use vidés en i18n) */ .chat-rules-consent-list li:empty { display: none !important; } /* Titre en Newsreader premium */ .chat-rules-consent-header h3 { font-family: var(--localo-font-display, 'Newsreader', Georgia, serif) !important; font-size: 1.2rem !important; font-weight: 600 !important; color: oklch(0.22 0.03 265) !important; letter-spacing: -0.01em !important; } /* Masquer le sous-titre vide */ .chat-rules-consent-intro:empty { display: none !important; } /* Items : même style card que le #consentScreen */ .chat-rules-consent-list { list-style: none !important; padding: 0 !important; display: grid !important; gap: 0.5rem !important; margin: 0.75rem 0 !important; } .chat-rules-consent-list li { padding: 0.52rem 0.6rem !important; border-radius: 9px !important; background: oklch(0.96 0.025 152) !important; border: 1px solid oklch(0.62 0.06 152 / 0.14) !important; font-size: 0.88rem !important; color: var(--localo-muted, oklch(0.48 0.022 265)) !important; line-height: 1.38 !important; } /* Bouton "J'ai compris" → vert brand */ .chat-rules-consent-footer .send-button { background: linear-gradient(135deg, var(--localo-accent, oklch(0.69 0.17 60)), var(--localo-accent-2, oklch(0.62 0.19 44)) ) !important; border-color: oklch(0.62 0.18 48 / 0.45) !important; box-shadow: inset 0 1px 0 oklch(0.99 0 0 / 0.2), 0 3px 10px oklch(0.48 0.16 55 / 0.22) !important; border-radius: 11px !important; } /* ── Modale règles tchat : bouton → lien discret ─────────────── */ /* Le bouton "J'ai compris" devient "Je reste en lecture seule" affiché comme un lien gris — la case cochée est l'engagement */ .chat-rules-consent-footer .send-button, .chat-rules-consent-footer button { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--localo-subtle, oklch(0.65 0.016 260)) !important; font-size: 0.82rem !important; font-weight: 500 !important; text-decoration: underline !important; text-underline-offset: 3px !important; min-height: 36px !important; padding: 0.4rem !important; } .chat-rules-consent-footer .send-button:hover, .chat-rules-consent-footer button:hover { background: transparent !important; color: var(--localo-muted, oklch(0.48 0.022 265)) !important; filter: none !important; transform: none !important; } /* Quand la case est cochée : valider automatiquement (géré par le JS existant). Le lien reste visible pour ceux qui veulent rester en lecture seule. */ .chat-rules-consent-footer { border-top: none !important; padding-top: 0 !important; display: flex !important; justify-content: center !important; } /* ── Titres en léger gras dans les items règles ─────────────── */ .chat-rules-consent-list li strong { font-weight: 600 !important; color: oklch(0.28 0.06 155) !important; } /* ── Modale règles tchat : fond flouté + hauteur auto ────────── */ .chat-rules-consent-modal { backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; background: oklch(0.14 0.03 155 / 0.55) !important; } .chat-rules-consent-content { height: auto !important; max-height: 90dvh !important; min-height: unset !important; } .chat-rules-consent-body { flex: 0 0 auto !important; overflow: visible !important; } /* ── Supprimer les pastilles (list-style) ────────────────────── */ .chat-rules-consent-list, .chat-rules-consent-list li { list-style: none !important; } /* ══════════════════════════════════════════════════════════════ Infos — grille premium : 2 colonnes strictes, cartes uniformes ══════════════════════════════════════════════════════════════ */ /* Grille : toujours 2 colonnes égales, 0 à 10 cartes */ .info-media-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; padding: 0 !important; } /* Carte : taille identique quelle que soit sa position */ .info-media-card { display: flex !important; flex-direction: column !important; background: var(--localo-surface, oklch(0.995 0.006 85)) !important; border: 1px solid var(--localo-border-soft, oklch(0.92 0.012 82)) !important; border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 1px 0 oklch(0.99 0 0 / 0.75) inset, 0 3px 12px oklch(0.22 0.025 265 / 0.06) !important; cursor: pointer !important; margin: 0 !important; transition: box-shadow 200ms ease, transform 200ms ease !important; } .info-media-card:hover, .info-media-card:focus { box-shadow: 0 1px 0 oklch(0.99 0 0 / 0.75) inset, 0 6px 20px oklch(0.22 0.025 265 / 0.1) !important; transform: translateY(-2px) !important; outline: none !important; } /* Image : ratio 4:3 fixe, toutes cartes identiques */ .info-media-card img { width: 100% !important; aspect-ratio: 4 / 3 !important; height: auto !important; object-fit: cover !important; display: block !important; border-radius: 0 !important; } /* Label : vert brand sur fond vert pâle */ .info-media-card figcaption { padding: 0.52rem 0.65rem !important; font-size: 0.82rem !important; font-weight: 600 !important; color: var(--localo-primary, oklch(0.36 0.09 152)) !important; background: var(--localo-brand-pale, oklch(0.96 0.025 152)) !important; border-top: 1px solid oklch(0.62 0.06 152 / 0.15) !important; line-height: 1.3 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* ══════════════════════════════════════════════════════════════ QR Code — layout premium (NE TOUCHE PAS au QR lui-même) ══════════════════════════════════════════════════════════════ */ /* Centrage vertical de la carte */ .main-content.qr-content-large { display: flex !important; align-items: center !important; justify-content: center !important; padding: 16px !important; } /* Carte principale */ .qr-main-container-large { background: var(--localo-surface, oklch(0.995 0.006 85)) !important; border: 1px solid var(--localo-border-soft, oklch(0.92 0.012 82)) !important; border-radius: 20px !important; box-shadow: 0 1px 0 oklch(0.99 0 0 / 0.75) inset, 0 8px 28px oklch(0.22 0.025 265 / 0.09) !important; padding: 20px 16px 18px !important; width: 100% !important; max-width: 400px !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 14px !important; } /* Titre "Partager le Chat Local" */ .qr-main-header-large h3 { font-family: var(--localo-font-display, 'Newsreader', Georgia, serif) !important; font-size: 1.25rem !important; font-weight: 600 !important; color: var(--localo-text, oklch(0.22 0.025 265)) !important; letter-spacing: -0.01em !important; text-align: center !important; margin: 0 !important; } /* Texte "Scannez ce QR code..." */ .qr-description-main-large { font-size: 0.88rem !important; color: var(--localo-muted, oklch(0.48 0.022 265)) !important; text-align: center !important; line-height: 1.45 !important; margin: 0 !important; } /* Expiration — reformulée via CSS :before + style */ .qr-expiry-note { color: var(--localo-primary, oklch(0.36 0.09 152)) !important; background: var(--localo-brand-pale, oklch(0.96 0.025 152)) !important; border: 1px solid oklch(0.62 0.06 152 / 0.18) !important; border-radius: 8px !important; padding: 6px 12px !important; font-size: 0.74rem !important; font-weight: 500 !important; text-align: center !important; width: 100% !important; margin: 0 !important; /* Remplacer le texte "Expiration du QR code:" par "Valide jusqu'au" */ } /* ── QR expiry : une seule ligne ─────────────────────────────── */ .qr-expiry-note { white-space: nowrap !important; font-size: 0.72rem !important; width: auto !important; max-width: 100% !important; } /* ── Signaler : bouton Envoyer — vert brand ──────────────────── */ #issueSubmitBtn.send-button, #issueSubmitBtn { background: linear-gradient(135deg, var(--localo-primary, oklch(0.36 0.09 152)), var(--localo-primary-mid, oklch(0.44 0.1 158)) ) !important; border-color: oklch(0.38 0.07 150 / 0.5) !important; box-shadow: inset 0 1px 0 oklch(0.99 0 0 / 0.15), 0 3px 10px oklch(0.36 0.09 152 / 0.22) !important; border-radius: 11px !important; color: oklch(0.99 0 0) !important; } /* ══════════════════════════════════════════════════════════════ iOS — empêcher le scroll automatique au focus clavier ══════════════════════════════════════════════════════════════ */ /* Le meta viewport interactive-widget est géré en HTML. Ici on fixe le conteneur du formulaire pour qu'il ne se redimensionne pas quand le clavier apparaît sur iOS. */ /* Zone principale : hauteur fixe, scroll interne seulement */ .rules-main-container.issue-main-container { height: 100% !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; } /* Empêcher le body de scroller quand le form est actif */ .main-content.rules-content { height: 100% !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } /* Le formulaire scroll en interne sans affecter la page */ .issue-report-form { overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } /* Inputs : prevent iOS zoom (font-size >= 16px obligatoire) */ .issue-report-form input, .issue-report-form select, .issue-report-form textarea { font-size: max(16px, 0.9rem) !important; } /* ══════════════════════════════════════════════════════════════ Réservations — layout premium ══════════════════════════════════════════════════════════════ */ /* Header */ .reservation-hub-header { padding: 0 0 12px !important; margin-bottom: 4px !important; border-bottom: 1px solid var(--localo-border-soft, oklch(0.92 0.012 82)) !important; } .reservation-hub-header h2 { font-family: var(--localo-font-display, 'Newsreader', Georgia, serif) !important; font-size: 1.4rem !important; font-weight: 600 !important; color: oklch(0.22 0.03 265) !important; letter-spacing: -0.02em !important; margin-bottom: 3px !important; } .reservation-hub-header p { font-size: 0.84rem !important; color: var(--localo-muted, oklch(0.48 0.022 265)) !important; margin: 0 !important; } /* Shell */ .reservation-hub-shell { padding: 14px !important; display: grid !important; gap: 10px !important; } /* Carte service */ .reservation-service-card { background: var(--localo-surface, oklch(0.995 0.006 85)) !important; border: 1px solid var(--localo-border-soft, oklch(0.92 0.012 82)) !important; border-radius: 16px !important; padding: 14px !important; box-shadow: 0 1px 0 oklch(0.99 0 0 / 0.75) inset, 0 4px 14px oklch(0.22 0.025 265 / 0.06) !important; } /* Icône service — vert brand au lieu du bleu */ .reservation-service-icon { background: var(--localo-brand-pale, oklch(0.96 0.025 152)) !important; border-color: oklch(0.62 0.06 152 / 0.25) !important; color: var(--localo-primary, oklch(0.36 0.09 152)) !important; } /* Titre du service */ .reservation-service-card h3, .reservation-service-name { font-family: var(--localo-font-display, 'Newsreader', Georgia, serif) !important; font-size: 1.05rem !important; font-weight: 600 !important; color: oklch(0.22 0.03 265) !important; letter-spacing: -0.01em !important; } /* Description */ .reservation-service-card p { color: var(--localo-muted, oklch(0.48 0.022 265)) !important; font-size: 0.84rem !important; line-height: 1.4 !important; } /* Méta (jours, places) */ .reservation-service-meta { color: var(--localo-subtle, oklch(0.65 0.016 260)) !important; font-size: 0.76rem !important; } /* Bouton Ouvrir — vert brand */ .reservation-service-open .send-button, .reservation-service-open button { background: linear-gradient(135deg, var(--localo-primary, oklch(0.36 0.09 152)), var(--localo-primary-mid, oklch(0.44 0.1 158)) ) !important; border-color: oklch(0.38 0.07 150 / 0.5) !important; box-shadow: inset 0 1px 0 oklch(0.99 0 0 / 0.15), 0 3px 10px oklch(0.36 0.09 152 / 0.22) !important; border-radius: 10px !important; min-height: 42px !important; font-size: 0.88rem !important; color: oklch(0.99 0 0) !important; } /* ── Icône Réserver : masquée par défaut, révélée par JS si services actifs ── */ /* Évite le flash initial — le JS ajoute la classe .has-services si nécessaire */ #reservationIcon { display: none !important; } #reservationIcon.has-services { display: flex !important; } /* ── Bouton Ouvrir réservation : le bouton EST la classe ─────── */ /* reservation-hub.js génère :