/* BEJOY Tunnel — mobile-first. * Les tokens (espresso/crème, motion, radius) vivent désormais dans * `assets/tokens.css` chargé EN PREMIER (dépendance `bejoy-tokens`). Ce bloc * `:root` est conservé comme FALLBACK : si tokens.css ne charge pas (ex. * /reserver isolé), les vars résolvent quand même. Quand tokens.css est là, * il fournit les MÊMES noms aux valeurs unifiées via `var()` — pas de * divergence. Le radius tunnel passe ici à 8px pour s'aligner sur l'unifié. */ :root { --bj-es: var(--bj-text, #332924); /* espresso — alias tunnel */ --bj-cr: #E8E6E2; /* hairline unifié (aligne sur override tokens.css) */ --bj-pa: var(--bj-bg, #FBF8F4); /* paper → fond crème unifié */ --bj-sa: #BDA795; /* sand (ton intermédiaire conservé) */ --bj-ta: var(--bj-text-2, #6E635C); /* taupe → secondaire unifié */ --bj-err: #A6402F; /* rouge unique (fallback si tokens.css absent) */ --bj-err-bg: #F6E8E4; /* fond erreur pastel (fallback) */ --bj-muted-bg: #F0ECE6; /* fond atténué (fallback) */ --bj-hover: #F7F6F4; /* hover léger (fallback) */ --bj-content-bg: #fff; /* surfaces de contenu */ --bj-btn-fg: #fff; /* texte bouton primaire */ --bj-font: 'Google Sans Flex', 'Inter', system-ui, sans-serif; --bj-radius: 8px; --bj-radius-sm: 6px; --bj-shadow: 0 1px 3px rgba(51,41,36,.10); --bj-shadow-lg: 0 4px 16px rgba(51,41,36,.14); --bj-recap-h: 72px; /* Motion — sobre, rapide, jamais de rebond */ --bj-dur-tap: 90ms; --bj-dur-fast: 130ms; --bj-dur-base: 190ms; --bj-dur-slow: 260ms; --bj-ease-out: cubic-bezier(.2, 0, 0, 1); --bj-ease-in-out: cubic-bezier(.4, 0, .2, 1); --bj-ease-tap: cubic-bezier(.3, 0, .3, 1); } /* Reset & base */ /* Plein écran réel : on annule le margin/padding par défaut du navigateur sur / (le thème le faisait avant, mais son CSS est neutralisé sur le tunnel). Sans ça, un liseré blanc apparaît autour. tunnel.css n'est chargé que sur les pages bejoy plein écran (tunnel/console/auth) → sans effet ailleurs. */ html, body { margin: 0; padding: 0; } .bejoy-tunnel * { box-sizing: border-box; margin: 0; padding: 0; } /* L'attribut [hidden] DOIT toujours masquer, même sur les éléments qui forcent un display (.tunnel-btn display:block, .tunnel-pay display:flex, .tunnel-promo…). Sans ça, leur règle de display écrase l'UA `[hidden]{display:none}` et un bouton/bloc masqué reste visible (ex. « Demander un devis » qui restait collé). */ .bejoy-tunnel [hidden] { display: none !important; } .bejoy-tunnel { font-family: var(--bj-font); background: var(--bj-pa); color: var(--bj-es); min-height: 100dvh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Layout ─────────────────────────────────────────────── */ .tunnel-main { /* Largeur et marges FLUIDES (clamp) : le content s'élargit en continu de 480px à 1180px au lieu de sauter au breakpoint. */ padding: clamp(16px, 4vw, 24px) clamp(16px, 4vw, 24px) calc(var(--bj-recap-h) + clamp(24px, 4vw, 32px)); max-width: clamp(480px, 92vw, 1180px); margin: 0 auto; } /* ── Header ─────────────────────────────────────────────── */ .tunnel-header { display: flex; align-items: center; gap: 10px; padding: 20px 0 24px; } .tunnel-header__home { display: inline-flex; align-items: center; text-decoration: none; } .tunnel-header__wordmark { font-size: 24px; font-weight: 600; letter-spacing: .03em; color: var(--bj-es); } .tunnel-header__logo { display: block; height: 64px; width: auto; } /* ── Step indicator ─────────────────────────────────────── */ .tunnel-steps { display: flex; gap: 8px; margin-bottom: 28px; } .tunnel-steps__item { flex: 1; display: flex; flex-direction: column; gap: 7px; background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: default; } .tunnel-steps__item--done { cursor: pointer; } .tunnel-steps__label { font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--bj-cr); transition: color .2s; } .tunnel-steps__item--done .tunnel-steps__label { color: var(--bj-ta); } .tunnel-steps__item--active .tunnel-steps__label { color: var(--bj-es); } @media (hover: hover) { .tunnel-steps__item--done:hover .tunnel-steps__label { color: var(--bj-es); } } .tunnel-steps__dot { display: block; height: 4px; border-radius: 2px; background: var(--bj-cr); transition: background .2s; } .tunnel-steps__dot--active { background: var(--bj-es); } .tunnel-steps__dot--done { background: var(--bj-sa); } /* ── Section title ──────────────────────────────────────── */ .tunnel-section-title { font-size: clamp(20px, 1rem + 1.6vw, 26px); /* fluide, plus de saut au breakpoint */ font-weight: 600; line-height: 1.2; margin-bottom: clamp(16px, 3vw, 22px); } /* ── Offer cards ─────────────────────────────────────────── */ .tunnel-offers { display: flex; flex-direction: column; gap: 12px; } /* Carte d'offre HORIZONTALE : icône de type · (nom + descriptif en pastille) · prix. Le descriptif est mis en avant (pastille) pour qu'on ne regarde pas que le nom. */ .tunnel-offer-card { display: flex; align-items: center; gap: 13px; text-align: left; background: var(--bj-content-bg, #fff); border: 1.5px solid var(--bj-cr); border-radius: var(--bj-radius); padding: 14px 16px; cursor: pointer; font-family: var(--bj-font); transition: border-color .15s, box-shadow .15s; } .tunnel-offer-card:hover, .tunnel-offer-card:focus-visible { border-color: var(--bj-sa); box-shadow: var(--bj-shadow); outline: none; } .tunnel-offer-card--selected { border-color: var(--bj-es); box-shadow: 0 0 0 2px var(--bj-es); } .tunnel-offer-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; } .tunnel-offer-card__name { font-size: 15.5px; font-weight: 600; color: var(--bj-es); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Descriptif EN AVANT : pastille sobre, lisible, qui attire l'œil autant que le nom. */ /* Même format que le badge de la console (.bj-badge--muted) : rectangle arrondi 7px + bordure + fond teinté, poids 500 / 12px. Cohérence tunnel ↔ console. */ .tunnel-offer-card__desc { display: inline-flex; align-items: center; font: 500 12px var(--bj-font, inherit); color: #4A5666; background: #EBEEF2; border: 1px solid #D8DFE8; border-radius: 7px; padding: 3px 9px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .tunnel-offer-card__price { flex-shrink: 0; font-size: 16px; font-weight: 600; color: var(--bj-es); font-variant-numeric: tabular-nums; white-space: nowrap; } /* « Sur devis » : badge explicite (pas un prix). Pastille bordée, plus petite, pour qu'on distingue d'emblée une offre à chiffrer d'une offre à prix fixe. */ .tunnel-offer-card__price--devis { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--bj-es); background: var(--bj-muted-bg, #F0ECE6); border: 1px solid var(--bj-border, #E0D8CE); border-radius: 999px; padding: 3px 10px; } /* ── Image placeholder (média manquant) ─────────────────── */ .tunnel-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--bj-sa), var(--bj-ta)); /* sable → taupe */ } .tunnel-ph svg { width: 30px; height: 30px; stroke: #fff; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; } /* ── Step 1 · Liste des espaces ─────────────────────────── */ .tunnel-rgrid { /* Colonnes FLUIDES : le nombre de colonnes se règle tout seul selon la place (auto-fit), reflux continu sans saut sec. */ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(14px, 2vw, 20px); } .tunnel-rcard { display: flex; flex-direction: row; /* une colonne d'espaces → image à gauche, infos à droite */ align-items: stretch; min-height: 104px; text-align: left; background: var(--bj-content-bg, #fff); border: 1.5px solid var(--bj-cr); border-radius: var(--bj-radius); overflow: hidden; cursor: pointer; padding: 0; font-family: var(--bj-font); transition: border-color var(--bj-dur-fast) var(--bj-ease-out), box-shadow var(--bj-dur-fast) var(--bj-ease-out), transform var(--bj-dur-tap) var(--bj-ease-tap); } @media (hover: hover) { .tunnel-rcard:hover { border-color: var(--bj-sa); box-shadow: var(--bj-shadow-lg); } } .tunnel-rcard:focus-visible { outline: none; border-color: var(--bj-sa); box-shadow: var(--bj-shadow); } .tunnel-rcard:active { transform: scale(.995); } .tunnel-rcard__media { position: relative; flex: 0 0 120px; /* colonne image fixe à gauche (mode ligne) */ align-self: stretch; /* l'image remplit toute la hauteur de la carte */ overflow: hidden; background: var(--bj-cr); } .tunnel-rcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .tunnel-rcard__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 14px 16px; } .tunnel-rcard__name { font-size: 16px; font-weight: 600; color: var(--bj-es); } .tunnel-rcard__price { font-size: 13px; color: var(--bj-ta); font-variant-numeric: tabular-nums; } /* Dès qu'il y a la place pour plusieurs colonnes, les cartes (plus étroites) repassent en VERTICAL (image en haut, pleine largeur) — un seul seuil, le reste du dimensionnement étant fluide. */ @media (min-width: 680px) { .tunnel-rcard { flex-direction: column; align-items: stretch; min-height: 0; } .tunnel-rcard__media { flex: 0 0 auto; align-self: auto; width: 100%; aspect-ratio: 16 / 10; } .tunnel-rcard__body { justify-content: flex-start; padding: 14px 16px 16px; } } /* ── Step 1 · Fiche détail ──────────────────────────────── */ .tunnel-rdetail__back { margin-bottom: 16px; } .tunnel-rdetail__cols { display: flex; flex-direction: column; gap: 22px; } .tunnel-rdetail__desc { font-size: 15px; line-height: 1.65; font-weight: 400; color: var(--bj-es); margin-bottom: 20px; } /* ── Galerie ─────────────────────────────────────────────── */ .tunnel-gallery__main { position: relative; aspect-ratio: 4 / 3; border-radius: var(--bj-radius); overflow: hidden; background: var(--bj-cr); } .tunnel-gallery__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .tunnel-gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; } .tunnel-gallery__thumb { position: relative; aspect-ratio: 1; border-radius: var(--bj-radius-sm); overflow: hidden; border: 1.5px solid transparent; background: var(--bj-cr); padding: 0; cursor: pointer; transition: border-color var(--bj-dur-fast) var(--bj-ease-out); } .tunnel-gallery__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .tunnel-gallery__thumb.is-active { border-color: var(--bj-es); } @media (hover: hover) { .tunnel-gallery__thumb:hover { border-color: var(--bj-sa); } } /* ── En-tête d'étape : titre + retour sur la même ligne ──── */ .tunnel-step-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .tunnel-step-head .tunnel-section-title { margin-bottom: 0; } .tunnel-back { flex: none; font-size: 13px; font-weight: 500; color: var(--bj-ta); background: transparent; border: none; padding: 4px 6px; min-height: 40px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; font-family: var(--bj-font); transition: color var(--bj-dur-fast) var(--bj-ease-out), opacity var(--bj-dur-tap) var(--bj-ease-tap); } .tunnel-back__chev { display: inline-block; font-size: 15px; line-height: 1; transition: transform var(--bj-dur-fast) var(--bj-ease-out); } @media (hover: hover) { .tunnel-back:hover { color: var(--bj-es); } .tunnel-back:hover .tunnel-back__chev { transform: translateX(-2px); } } .tunnel-back:active { opacity: .6; } /* ── Calendrier mois ─────────────────────────────────────── */ .tunnel-cal { background: var(--bj-content-bg, #fff); border: 1.5px solid var(--bj-cr); border-radius: var(--bj-radius); padding: 14px 12px; margin-top: 4px; } .tunnel-cal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .tunnel-cal__month { font-size: 15px; font-weight: 600; color: var(--bj-es); } .tunnel-cal__chev { width: 40px; height: 40px; border-radius: var(--bj-radius-sm); border: 1.5px solid var(--bj-cr); background: var(--bj-content-bg, #fff); color: var(--bj-ta); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; font-family: var(--bj-font); transition: color var(--bj-dur-fast) var(--bj-ease-out), background-color var(--bj-dur-fast) var(--bj-ease-out), transform var(--bj-dur-tap) var(--bj-ease-tap); } .tunnel-cal__chev svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .tunnel-cal__chev:disabled { opacity: .35; cursor: default; } .tunnel-cal__chev:active:not(:disabled) { transform: scale(.94); } @media (hover: hover) { .tunnel-cal__chev:hover:not(:disabled) { color: var(--bj-es); background: var(--bj-cr); } } .tunnel-cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 8px; } .tunnel-cal__dow span { text-align: center; font-size: 11px; color: var(--bj-ta); } .tunnel-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .tunnel-day { aspect-ratio: 1; min-width: 0; border-radius: var(--bj-radius); display: flex; align-items: center; justify-content: center; font-size: 13px; position: relative; isolation: isolate; font-family: var(--bj-font); padding: 0; color: var(--bj-es); background: transparent; border: none; font-variant-numeric: tabular-nums; } /* Remplissage espresso animé du jour choisi */ .tunnel-day::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--bj-es); transform: scale(.92); opacity: 0; z-index: -1; transition: opacity var(--bj-dur-base) var(--bj-ease-out), transform var(--bj-dur-base) var(--bj-ease-out); } .tunnel-day--empty { visibility: hidden; } .tunnel-day--avail { border: 1.5px solid var(--bj-sa); background: var(--bj-content-bg, #fff); cursor: pointer; transition: border-color var(--bj-dur-fast) var(--bj-ease-out), background-color var(--bj-dur-fast) var(--bj-ease-out), color var(--bj-dur-base) var(--bj-ease-out); transition-delay: 40ms; } .tunnel-day--full { color: var(--bj-sa); text-decoration: line-through; text-decoration-thickness: 1.5px; } .tunnel-day--past { color: var(--bj-cr); } /* Jour au-delà de la validité du pack : non posable, grisé (comme passé). */ .tunnel-day--off { color: var(--bj-cr); cursor: not-allowed; } .tunnel-day--today::after { content: ""; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--bj-es); z-index: 1; } .tunnel-day--selected { color: var(--bj-pa); border-color: transparent; } .tunnel-day--selected::before { opacity: 1; transform: scale(1); } .tunnel-day--selected.tunnel-day--today::after { background: var(--bj-pa); } @media (hover: hover) { .tunnel-day--avail:hover { border-color: var(--bj-ta); background-color: var(--bj-cr); } } .tunnel-day--avail:active { transform: scale(.97); background-color: var(--bj-cr); transition: transform var(--bj-dur-tap) var(--bj-ease-tap), background-color var(--bj-dur-tap) var(--bj-ease-tap); } .tunnel-cal__legend { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 14px; padding-top: 12px; border-top: 1.5px solid var(--bj-cr); } .tunnel-cal__leg { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--bj-ta); } .tunnel-cal__swatch { width: 13px; height: 13px; border-radius: 5px; flex: none; } /* Entrée des cellules après chargement de la dispo */ .tunnel-cal__grid.is-ready .tunnel-day { animation: tunnel-fade-in var(--bj-dur-slow) var(--bj-ease-out) both; } .tunnel-cal__grid.is-ready .tunnel-day:nth-child(n + 8) { animation-delay: 50ms; } .tunnel-cal__grid.is-ready .tunnel-day:nth-child(n + 22) { animation-delay: 100ms; } .tunnel-cal__grid.is-ready .tunnel-day:nth-child(n + 29) { animation-delay: 140ms; } @keyframes tunnel-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* État « aucune disponibilité ce mois » */ .tunnel-cal__empty { grid-column: 1 / -1; text-align: center; padding: 22px 8px; } .tunnel-cal__empty strong { display: block; font-size: 14px; font-weight: 600; color: var(--bj-es); margin-bottom: 4px; } .tunnel-cal__empty span { font-size: 13px; color: var(--bj-ta); } /* Bouton texte souligné (lien par e-mail dans la modale, « réessayer » des états d'erreur). */ .tunnel-link { font: inherit; font-weight: 500; font-size: 13px; background: none; border: 0; padding: 8px 4px; margin: 0; color: var(--bj-ta); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .tunnel-link:hover { color: var(--bj-es); } /* Bouton « Réessayer » de l'état d'erreur du calendrier. */ .tunnel-cal__retry { display: inline-block; margin-top: 12px; font: inherit; font-weight: 500; font-size: 13px; background: none; border: 1px solid var(--bj-cr); border-radius: var(--bj-radius-sm); padding: 9px 16px; min-height: 40px; color: var(--bj-ta); cursor: pointer; } .tunnel-cal__retry:hover { border-color: var(--bj-ta); color: var(--bj-es); } /* ── Pack : mode d'utilisation (toggle « both ») ─────────── */ .tunnel-pack-mode { margin: 0 auto 18px; max-width: 440px; text-align: center; } .tunnel-pack-mode__label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--bj-ta); margin-bottom: 10px; } .tunnel-pack-mode__toggle { display: inline-flex; gap: 4px; padding: 4px; background: var(--bj-cr); border-radius: var(--bj-radius-sm); } .tunnel-pack-mode__btn { padding: 8px 18px; border: none; border-radius: calc(var(--bj-radius-sm) - 2px); background: transparent; color: var(--bj-ta); font-family: var(--bj-font); font-size: 14px; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color var(--bj-dur-fast) var(--bj-ease-out), color var(--bj-dur-fast) var(--bj-ease-out), transform var(--bj-dur-tap) var(--bj-ease-tap); } .tunnel-pack-mode__btn:active { transform: scale(.97); } .tunnel-pack-mode__btn.is-active { background: var(--bj-content-bg, #fff); color: var(--bj-es); box-shadow: var(--bj-shadow); } .tunnel-pack-mode__hint { margin: 10px 0 0; font-size: 13px; color: var(--bj-ta); line-height: 1.5; } /* ── Pack : aperçu du bloc consécutif ───────────────────── */ /* Même largeur que le calendrier (.tunnel-cal) : pleine largeur sur mobile, 440px centré dès 640px — voir la règle jumelle dans @media (min-width:640px). */ .tunnel-pack-block { margin: 18px 0 0; padding: 14px 16px; border: 1.5px solid var(--bj-cr); border-radius: var(--bj-radius-sm); background: var(--bj-content-bg, #fff); } .tunnel-pack-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .tunnel-pack-block__head strong { font-size: 15px; color: var(--bj-es); } .tunnel-pack-block__range { font-size: 13px; color: var(--bj-ta); font-variant-numeric: tabular-nums; } .tunnel-pack-block__msg { margin: 0; font-size: 13px; line-height: 1.5; } .tunnel-pack-block__msg--ok { color: var(--bj-es); } /* Indisponible = échec : on le signale comme une erreur (rouge + fond pastel). */ .tunnel-pack-block__msg--ko { color: var(--bj-err); background: var(--bj-err-bg); border-radius: var(--bj-radius-sm); padding: 8px 10px; font-weight: 500; } /* ── Créneaux horaires (offres à l'heure) ───────────────── */ /* .tunnel-ends (fin de plage) et .tunnel-days (nombre de jours) réutilisent le rendu des créneaux : mêmes titres, même grille, mêmes boutons .tunnel-slot. */ .tunnel-slots, .tunnel-ends, .tunnel-days { margin-top: 22px; } @media (min-width: 640px) { .tunnel-slots, .tunnel-ends, .tunnel-days { max-width: 440px; margin-left: auto; margin-right: auto; } } .tunnel-slots__title { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--bj-ta); margin-bottom: 12px; } .tunnel-slots__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; } .tunnel-slot { padding: 10px 8px; background: var(--bj-content-bg, #fff); border: 1.5px solid var(--bj-cr); border-radius: var(--bj-radius-sm); color: var(--bj-es); font-family: var(--bj-font); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: border-color var(--bj-dur-fast) var(--bj-ease-out), background-color var(--bj-dur-fast) var(--bj-ease-out), color var(--bj-dur-fast) var(--bj-ease-out), transform var(--bj-dur-tap) var(--bj-ease-tap); } @media (hover: hover) { .tunnel-slot:hover { border-color: var(--bj-sa); background: var(--bj-cr); } } .tunnel-slot:focus-visible { outline: none; border-color: var(--bj-sa); box-shadow: var(--bj-shadow); } .tunnel-slot:active { transform: scale(.97); background: var(--bj-cr); } .tunnel-slot--selected { background: var(--bj-es); border-color: var(--bj-es); color: var(--bj-pa); } @media (hover: hover) { .tunnel-slot--selected:hover { background: var(--bj-es); color: var(--bj-pa); } } .tunnel-slots__empty { grid-column: 1 / -1; font-size: 13px; color: var(--bj-ta); padding: 6px 0; } @media (prefers-reduced-motion: reduce) { .bejoy-tunnel .tunnel-slot:active { transform: none !important; } } /* ── Form fields ─────────────────────────────────────────── */ .tunnel-field { margin-bottom: 16px; } /* Note repliable : case « Ajouter une note » → la zone se déploie au clic. */ .tunnel-note { margin: 4px 0 16px; } .tunnel-note__toggle { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--bj-es); cursor: pointer; } .tunnel-note__toggle input { width: 16px; height: 16px; accent-color: var(--bj-es); } .tunnel-note__body { margin: 10px 0 0; } .tunnel-note__body[hidden] { display: none; } .tunnel-field label { display: block; font-size: 13px; font-weight: 500; color: var(--bj-ta); margin-bottom: 6px; } .tunnel-field input, .tunnel-field textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--bj-cr); border-radius: var(--bj-radius-sm); font-family: var(--bj-font); font-size: 15px; color: var(--bj-es); background: var(--bj-content-bg, #fff); transition: border-color .12s; -webkit-appearance: none; } .tunnel-field input:focus, .tunnel-field textarea:focus { outline: none; border-color: var(--bj-es); } .tunnel-field input::placeholder, .tunnel-field textarea::placeholder { color: var(--bj-sa); } /* ── CGV checkbox ───────────────────────────────────────── */ /* Même traitement que la case « Ajouter un commentaire » (.tunnel-note__toggle) : même taille de texte, même couleur, même case. flex-start conservé car le libellé CGV peut passer sur plusieurs lignes (lien inclus). */ .tunnel-cgv { display: flex; align-items: flex-start; gap: 9px; margin-top: 8px; } .tunnel-cgv input[type="checkbox"] { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--bj-es); flex-shrink: 0; } .tunnel-cgv label, .tunnel-cgv .bj-cgv-mention { font-size: 14px; color: var(--bj-es); line-height: 1.5; } /* La mention est un cliquable (toggle la case via tunnel.js) : curseur pointeur sur le texte, mais les liens gardent leur curseur/navigation. */ .tunnel-cgv .bj-cgv-mention { cursor: pointer; } .tunnel-cgv a { color: var(--bj-clay); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } /* ── Primary button — DS (fond --bj-text, texte --bj-btn-fg) ─── */ .tunnel-btn { display: block; width: 100%; padding: 15px; background: var(--bj-text, var(--bj-es)); color: var(--bj-btn-fg, #fff); font-family: var(--bj-font); font-size: 15px; font-weight: 600; text-align: center; border: none; border-radius: var(--bj-radius); cursor: pointer; transition: opacity .15s; margin-top: 24px; } .tunnel-btn:hover { opacity: .88; } .tunnel-btn:disabled { opacity: .4; cursor: not-allowed; } /* Clients de confiance : deux moyens de paiement empilés (Stripe puis PayPal). */ .tunnel-pay { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; } .tunnel-pay .tunnel-btn { margin-top: 0; } /* Bouton secondaire (PayPal) : même gabarit, traitement plus discret. */ .tunnel-btn--alt { background: var(--bj-surface, #fff); color: var(--bj-text, var(--bj-es)); box-shadow: inset 0 0 0 1px var(--bj-border, #E8E6E2); } /* ── Carte récap (étape 4) ──────────────────────────────── */ .tunnel-recap-card { background: var(--bj-content-bg, #fff); border: 1.5px solid var(--bj-cr); border-radius: var(--bj-radius); padding: 18px 18px 4px; margin-bottom: 20px; } /* Connecté : identité du compte en lecture seule (aucune saisie). */ .tunnel-identity { display: flex; align-items: center; gap: 12px; background: var(--bj-muted-bg, #F0ECE6); border: 1px solid var(--bj-cr); border-radius: var(--bj-radius); padding: 12px 14px; margin: 0 0 20px; } .tunnel-identity > i { font-size: 22px; color: var(--bj-ta); flex-shrink: 0; } .tunnel-identity__txt { display: flex; flex-direction: column; min-width: 0; } .tunnel-identity__label { font-size: 12px; color: var(--bj-ta); } .tunnel-identity__who { font-size: 14px; font-weight: 600; color: var(--bj-es); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Encart « compte existant » (step Infos) : informe + bouton de connexion. */ .tunnel-account-prompt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--bj-muted-bg, #F0ECE6); border: 1px solid var(--bj-cr); border-radius: var(--bj-radius); padding: 11px 14px; margin: -4px 0 18px; } .tunnel-account-prompt > i { font-size: 20px; color: var(--bj-ta); flex-shrink: 0; } .tunnel-account-prompt__txt { flex: 1; min-width: 160px; font-size: 13.5px; color: var(--bj-es); } .tunnel-account-prompt__btn { flex-shrink: 0; width: auto; } @media (prefers-reduced-motion: no-preference) { .tunnel-recap-card { animation: tunnel-recap-in var(--bj-dur-slow) var(--bj-ease-out) both; } } @keyframes tunnel-recap-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .tunnel-recap-card__rows { display: flex; flex-direction: column; } .tunnel-recap-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--bj-cr); } .tunnel-recap-card__row:first-child { border-top: none; padding-top: 0; } .tunnel-recap-card__label { flex: none; font-size: 13px; font-weight: 500; color: var(--bj-ta); } .tunnel-recap-card__value { text-align: right; font-size: 14px; font-weight: 500; color: var(--bj-es); line-height: 1.4; } .tunnel-recap-card__total { margin-top: 6px; padding: 14px 0 16px; border-top: 1.5px solid var(--bj-cr); } .tunnel-recap-card__total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--bj-ta); padding: 4px 0; font-variant-numeric: tabular-nums; } .tunnel-recap-card__total-row--promo { color: var(--bj-es); font-weight: 500; } .tunnel-recap-card__total-row--grand { margin-top: 4px; font-size: 19px; font-weight: 600; color: var(--bj-es); } /* Sur devis : le total est un mot, pas un montant → chiffres proportionnels. */ .tunnel-recap-card__total-row--devis { font-variant-numeric: normal; } /* ── Code promo (étape 4) ───────────────────────────────── */ .tunnel-promo { margin-bottom: 20px; } .tunnel-promo__label { display: block; font-size: 13px; font-weight: 500; color: var(--bj-ta); margin-bottom: 6px; } .tunnel-promo__row { display: flex; gap: 8px; } .tunnel-promo__input { flex: 1; min-width: 0; padding: 12px 14px; border: 1.5px solid var(--bj-cr); border-radius: var(--bj-radius-sm); font-family: var(--bj-font); font-size: 15px; color: var(--bj-es); background: var(--bj-content-bg, #fff); text-transform: uppercase; transition: border-color .12s; -webkit-appearance: none; } .tunnel-promo__input:focus { outline: none; border-color: var(--bj-es); } .tunnel-promo__input::placeholder { color: var(--bj-sa); text-transform: none; } .tunnel-promo__apply { width: auto; flex: none; margin-top: 0; padding: 12px 16px; } .tunnel-promo__msg { font-size: 13px; margin: 8px 0 0; color: var(--bj-ta); } /* ── Sticky récap bar ───────────────────────────────────── */ .tunnel-recap-bar { position: fixed; bottom: 0; left: 0; right: 0; height: var(--bj-recap-h); background: var(--bj-es); color: var(--bj-pa); display: flex; align-items: center; z-index: 100; box-shadow: 0 -2px 12px rgba(51,41,36,.18); } /* Le fond espresso reste pleine largeur, le contenu s'aligne EXACTEMENT sur le content central (.tunnel-main : 480px par défaut, 1180px en ≥1024, padding identique). */ .tunnel-recap-bar__inner { width: 100%; max-width: clamp(480px, 92vw, 1180px); /* EXACTEMENT la largeur de .tunnel-main */ margin: 0 auto; padding: 0 clamp(16px, 4vw, 24px); /* même padding horizontal que .tunnel-main */ display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* « Votre sélection » / nom de la sélection ET prix à la MÊME taille que le nom de la ressource (16px). Le libellé tronque proprement s'il est long. */ .tunnel-recap-bar__label { font-size: 16px; color: #fff; opacity: .92; font-weight: 500; line-height: 1.3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tunnel-recap-bar__price { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; white-space: nowrap; } .tunnel-recap-bar--empty .tunnel-recap-bar__price { font-size: 14px; opacity: .55; } /* ── Loading skeleton ───────────────────────────────────── */ .tunnel-skeleton { border-radius: var(--bj-radius-sm); background: linear-gradient(90deg, var(--bj-cr) 25%, var(--bj-muted-bg) 50%, var(--bj-cr) 75%); background-size: 200% 100%; animation: bj-shimmer 1.4s infinite; height: 20px; margin-bottom: 8px; } @keyframes bj-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── Empty / error states ───────────────────────────────── */ .tunnel-notice { padding: 14px 16px; border-radius: var(--bj-radius-sm); font-size: 14px; line-height: 1.5; margin-top: 16px; } .tunnel-notice--error { background: var(--bj-err-bg); color: var(--bj-err); border: 1px solid var(--bj-err); } .tunnel-notice--info { background: var(--bj-cr); color: var(--bj-ta); } /* ── Desktop breakpoint ─────────────────────────────────── */ /* (Padding, largeur et taille de titre sont désormais FLUIDES via clamp dans les règles de base — plus d'override sec ici.) */ @media (min-width: 640px) { .tunnel-offers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* Calendrier compact et centré dès le desktop : ne s'étire pas sur toute la largeur. Le bloc « jours consécutifs » suit EXACTEMENT la même largeur. */ .tunnel-cal, .tunnel-pack-block { max-width: 440px; margin-left: auto; margin-right: auto; } .tunnel-cal__grid { gap: 8px; } .tunnel-gallery__thumbs { gap: 10px; } } /* ── Desktop large : fiche détail en 2 colonnes ─────────────── */ /* (Largeur du content, grille d'espaces et bascule des cartes sont désormais FLUIDES : max-width clamp, grille auto-fit, carte verticale dès ~680px.) */ @media (min-width: 1024px) { .tunnel-rdetail__cols { flex-direction: row; align-items: flex-start; gap: 28px; } .tunnel-gallery { flex: 1.1 1 0; min-width: 0; } .tunnel-rdetail__info { flex: 1 1 0; min-width: 0; } /* Offres de la fiche détail en 2 colonnes sur desktop large. */ .tunnel-rdetail .tunnel-offers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } } /* ── Micro-interactions transverses ─────────────────────── */ .tunnel-day, .tunnel-cal__chev, .tunnel-btn, .tunnel-back, .tunnel-offer-card { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .tunnel-btn { transition: opacity .15s var(--bj-ease-out), transform var(--bj-dur-tap) var(--bj-ease-tap); } .tunnel-btn:active { transform: scale(.99); } .tunnel-offer-card:active { transform: scale(.995); } /* Barre récap : micro-tween du libellé / prix à la mise à jour */ .tunnel-recap-bar__label, .tunnel-recap-bar__price { transition: opacity var(--bj-dur-base) var(--bj-ease-out), transform var(--bj-dur-base) var(--bj-ease-out); } .tunnel-recap-bar__label.is-upd, .tunnel-recap-bar__price.is-upd { opacity: 0; transform: translateY(4px); } /* Entrée d'étape */ .tunnel-step-anim { animation: tunnel-step-in var(--bj-dur-slow) var(--bj-ease-out) both; } @keyframes tunnel-step-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } /* Accessibilité : on respecte la réduction de mouvement */ @media (prefers-reduced-motion: reduce) { .bejoy-tunnel *, .bejoy-tunnel *::before, .bejoy-tunnel *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: 120ms !important; } .bejoy-tunnel .tunnel-day::before { transform: none !important; } .bejoy-tunnel .tunnel-day--avail:active, .bejoy-tunnel .tunnel-cal__chev:active, .bejoy-tunnel .tunnel-btn:active { transform: none !important; } } /* ── Espace pro (front) ─────────────────────────────────── */ .espace-main { max-width: 720px; } .bejoy-espace .tunnel-header { justify-content: space-between; } /* Connexion */ .espace-login { max-width: 380px; } .espace-login__lost { margin-top: 16px; font-size: 13px; } .espace-login__lost a { color: var(--bj-ta); text-underline-offset: 2px; } .espace-login__lost a:hover { color: var(--bj-es); } /* Déconnexion (en-tête) */ .espace-logout { margin: 0; margin-left: auto; } .espace-logout__btn { background: none; border: none; font-family: var(--bj-font); font-size: 13px; color: var(--bj-ta); cursor: pointer; padding: 6px 0; transition: color var(--bj-dur-fast) var(--bj-ease-out); } .espace-logout__btn:hover { color: var(--bj-es); } /* Blocs du tableau de bord */ .espace-block { background: var(--bj-content-bg, #fff); border: 1.5px solid var(--bj-cr); border-radius: var(--bj-radius); padding: 18px 18px 20px; margin-bottom: 18px; } .espace-block__title { font-size: 16px; font-weight: 600; color: var(--bj-es); margin-bottom: 14px; } /* Listes (réservations, factures) */ .espace-list { display: flex; flex-direction: column; } .espace-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--bj-cr); } .espace-row:first-child { border-top: none; } .espace-row__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .espace-row__label { font-size: 14px; font-weight: 500; color: var(--bj-es); } .espace-row__meta { font-size: 12px; color: var(--bj-ta); } .espace-row__action { flex-shrink: 0; font-size: 13px; color: var(--bj-es); text-underline-offset: 2px; } .espace-row__action:hover { opacity: .8; } /* Badges de statut (quasi-monochrome, sobre) */ .espace-badge { flex-shrink: 0; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: var(--bj-cr); color: var(--bj-ta); white-space: nowrap; } .espace-badge--confirmee, .espace-badge--payee { background: var(--bj-es); color: var(--bj-pa); } .espace-badge--attente_paiement { background: var(--bj-sa); color: var(--bj-pa); } .espace-badge--annulee, .espace-badge--refusee, .espace-badge--expiree { background: var(--bj-err-bg); color: var(--bj-err); } /* Annulation d'une réservation (sobre, sous la ligne concernée) */ .espace-cancel { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 12px; } .espace-cancel__note { font-size: 12px; color: var(--bj-ta); } .espace-cancel__btn { flex-shrink: 0; font-size: 13px; color: var(--bj-err); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; transition: opacity .12s ease; } .espace-cancel__btn:hover { opacity: .8; } .espace-cancel__btn:active { opacity: .6; } /* ── Console équipe : compteur de section + actions de gestion ─── */ .espace-block__count { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--bj-ta); background: var(--bj-cr); border-radius: 999px; padding: 1px 8px; vertical-align: middle; } .espace-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 12px; } .espace-action { margin: 0; } .espace-action__btn { flex-shrink: 0; font-size: 13px; font-weight: 500; color: var(--bj-es); background: var(--bj-content-bg, #fff); border: 1.5px solid var(--bj-cr); border-radius: var(--bj-radius); padding: 7px 14px; cursor: pointer; transition: border-color .12s ease, background-color .12s ease, opacity .12s ease; } .espace-action__btn:hover { border-color: var(--bj-es); } .espace-action__btn:active { opacity: .7; } .espace-action__btn--primary { color: var(--bj-pa); background: var(--bj-es); border-color: var(--bj-es); } .espace-action__btn--primary:hover { opacity: .9; border-color: var(--bj-es); } /* ── Espace : page de connexion centrée ─────────────────── */ .bejoy-espace-login { background: var(--bj-pa); } .espace-auth { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; } .espace-auth__inner { width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .espace-auth__logo { font-size: 19px; font-weight: 700; letter-spacing: .16em; color: var(--bj-es); } .espace-auth__card { width: 100%; background: var(--bj-content-bg, #fff); border: 1.5px solid var(--bj-cr); border-radius: var(--bj-radius); padding: 24px 22px; box-shadow: var(--bj-shadow); } .espace-auth__title { font-size: 19px; font-weight: 600; margin: 0 0 4px; } .espace-auth__sub { font-size: 13px; color: var(--bj-ta); margin: 0 0 18px; line-height: 1.45; } .espace-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 18px; } .espace-auth__remember { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--bj-ta); cursor: pointer; } .espace-auth__remember input { width: 16px; height: 16px; accent-color: var(--bj-es); } .espace-auth__lost { font-size: 13px; color: var(--bj-es); text-decoration: none; border-bottom: 1px solid var(--bj-cr); white-space: nowrap; } .espace-auth__lost:hover { border-color: var(--bj-sa); } .espace-auth__back { display: inline-block; margin-top: 18px; font-size: 13px; color: var(--bj-ta); text-decoration: none; } .espace-auth__back:hover { color: var(--bj-es); } .espace-auth__join { width: 100%; text-align: center; margin-top: 4px; } .espace-auth__join-q { font-size: 13px; color: var(--bj-ta); margin: 0 0 10px; } .espace-auth__join-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 13px; border: 1.5px solid var(--bj-es); border-radius: var(--bj-radius-sm); background: transparent; color: var(--bj-es); font-weight: 600; font-size: 14px; text-decoration: none; transition: background-color var(--bj-dur-fast) var(--bj-ease-out); } @media (hover: hover) { .espace-auth__join-btn:hover { background: var(--bj-cr); } } /* ── Espace : en-tête d'accueil du dashboard ─────────────── */ .espace-hello { margin-bottom: 18px; } .espace-hello__title { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 2px; } .espace-hello__sub { font-size: 13px; color: var(--bj-ta); margin: 0; } /* Espace — bloc packs */ .espace-pack { border:1px solid var(--bj-cr); border-radius:var(--bj-radius,8px); padding:16px; margin-bottom:14px; } .espace-pack__head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; } .espace-pack__name { font-weight:600; } .espace-pack__count { font-variant-numeric:tabular-nums; color:var(--bj-ta); } .espace-pack__meta { font-size:13px; color:var(--bj-ta); margin-top:4px; } .espace-pack__days { list-style:none; margin:12px 0 0; padding:0; } .espace-pack__day { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 0; border-top:1px solid var(--bj-cr); } .espace-pack__cal { margin-top:12px; } .espace-pack__confirm { margin-top:12px; } .espace-pack__redeem-toggle, .espace-pack__confirm-btn { margin-top:12px; background:var(--bj-es,#332924); color:#fff; border:0; border-radius:var(--bj-radius-sm, 8px); padding:8px 14px; cursor:pointer; } /* En-tête auth */ .tunnel-header { justify-content: space-between; } /* Composant compte de l'en-tête : EXACTEMENT le `.bj-account` de la console. Règles portées telles quelles depuis espace.css (avatar, bouton, nom, chevron, menu) ; seul le placement est adapté au contexte en-tête (à droite, largeur bornée au lieu de la pleine largeur sidebar). */ .bj-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0 } .bj-avatar--empty { background: var(--bj-muted-bg, #F0ECE6); color: var(--bj-text-3, #9A8F87) } .bj-account { position: relative; margin: 10px 12px 4px } .bj-account__btn { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--bj-content-bg); border: 1px solid var(--bj-cr); border-radius: 8px; padding: 7px 10px; cursor: pointer; font-family: inherit; color: var(--bj-text); text-align: left } .bj-account__btn:hover { background: var(--bj-hover) } .bj-account__btn .bj-avatar { width: 24px; height: 24px; font-size: 10px } .bj-account__name { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .bj-account__btn i { color: var(--bj-text-3); font-size: 15px; flex-shrink: 0 } .bj-account__menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--bj-content-bg); border: 1px solid var(--bj-cr); border-radius: 8px; box-shadow: 0 6px 20px rgba(51,41,36,.12); padding: 4px; z-index: 20 } .bj-account__menu[hidden] { display: none } .bj-account__menu button, .bj-account__item { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; border-radius: 6px; padding: 8px 10px; font-family: inherit; font-size: 13px; color: var(--bj-text-2); cursor: pointer; text-align: left; text-decoration: none } .bj-account__menu button:hover, .bj-account__item:hover { background: var(--bj-hover); color: var(--bj-text) } .bj-account__menu i { font-size: 16px } /* Placement en-tête : carte à droite, largeur bornée (≠ pleine largeur sidebar). */ .tunnel-header .bj-account { margin: 0 0 0 auto; width: min(260px, 56%) } @media (max-width: 480px) { .tunnel-header .bj-account { width: min(200px, 60%) } } /* Modale login */ .tunnel-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; } .tunnel-modal[hidden] { display: none; } .tunnel-modal__backdrop { position: absolute; inset: 0; background: rgba(51,41,36,.45); } .tunnel-modal__card { position: relative; background: var(--bj-content-bg, #fff); width: min(92vw, 380px); border-radius: var(--bj-radius); padding: 24px; box-shadow: var(--bj-shadow-lg); } .tunnel-modal__x { position: absolute; top: 10px; right: 12px; background: none; border: 0; font-size: 24px; line-height: 1; color: var(--bj-ta); cursor: pointer; } .tunnel-modal__title { font-size: 18px; font-weight: 600; color: var(--bj-es); margin: 0 0 6px; } .tunnel-modal__sub { font-size: 13px; color: var(--bj-ta); margin: 0 0 16px; } .tunnel-modal__lost { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--bj-ta); text-decoration: none; } @media (prefers-reduced-motion: no-preference) { .tunnel-modal__card { animation: tunnel-step-in var(--bj-dur-base) var(--bj-ease-out) both; } } /* ── Console équipe : calendrier FullCalendar + formulaires ───── */ #bj-espace-cal { margin-top: 4px; min-height: 360px; font-size: 13px; } #bj-espace-cal .fc { --fc-border-color: var(--bj-cr); --fc-today-bg-color: rgba(189, 167, 149, .12); --fc-now-indicator-color: var(--bj-es); } #bj-espace-cal .fc .fc-button-primary { background: var(--bj-es); border-color: var(--bj-es); color: var(--bj-pa); } #bj-espace-cal .fc .fc-button-primary:not(:disabled):hover { background: var(--bj-ta); border-color: var(--bj-ta); } #bj-espace-cal .fc .fc-toolbar-title { font-size: 15px; } /* Espacement des champs dans les formulaires de la console */ .espace-form .tunnel-field { margin-bottom: 12px; } .espace-form .tunnel-field:last-of-type { margin-bottom: 16px; } /* iOS Safari ZOOME au focus d'un champ < 16px (et reste zoomé : il faut dézoomer à la main). Sur écran TACTILE uniquement, les champs passent à 16px → plus de zoom intempestif au focus. Desktop inchangé. */ @media (pointer: coarse) { .bejoy-tunnel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .bejoy-tunnel select, .bejoy-tunnel textarea { font-size: 16px; } }