autour du contenu — sans ce position:relative, un .spot-lock-panel absolu se positionnerait par rapport au sheet/popup entier plutôt que par rapport au bloc flouté juste au-dessus de lui. Le .locked réserve, lui, la hauteur du panneau flottant : comme il est en position:absolute (hors flux), le tiroir/la popup se dimensionneraient sinon sur la seule hauteur du corps flouté et couperaient le bas du panneau (bouton "Voir l'adresse" tronqué). */ .spot-sheet-content { position: relative; } .spot-sheet-content.locked { min-height: 300px; } /* Au-delà de 640px, le tiroir/fond assombri ne sert plus (voir spots.js : les clics sur les pins ouvrent une popup Leaflet à la place) — on s'assure juste qu'ils restent hors écran si jamais ils sont déclenchés pendant un redimensionnement de fenêtre. */ @media (min-width: 640px) { .spot-sheet-backdrop.open { opacity: 0; pointer-events: none; } .spot-sheet.open { transform: translateY(100%); } } /* ---------- Popup carte (desktop) : ancrée au pin, style Leaflet réhabillé pour ressembler à nos cartes plutôt qu'à une bulle par défaut. ---------- */ .leaflet-popup.spot-popup { margin-bottom: 12px; } .spot-popup .leaflet-popup-content-wrapper { border-radius: var(--radius-md); border: 1px solid var(--border); box-shadow: var(--shadow-hover); padding: 0; } .spot-popup .leaflet-popup-content { margin: 18px 20px; font-family: var(--font-sans); line-height: 1.5; } .spot-popup .leaflet-popup-tip { border: 1px solid var(--border); box-shadow: none; } .spot-popup .leaflet-popup-close-button { top: 10px; right: 10px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-subtle); color: var(--text-secondary) !important; font-size: 1rem; } .spot-popup .leaflet-popup-close-button:hover { background: var(--border-soft); } .spot-popup-inner { width: 260px; max-width: 100%; position: relative; } .spot-popup-inner.locked { min-height: 300px; } /* Leaflet impose `.leaflet-popup-content a { color:#0078A8 }` par défaut (plus spécifique qu'un simple .btn-primary) — sans cette règle, le texte du bouton "Voir l'adresse" du panneau de déblocage devient bleu-gris quasi illisible sur son propre fond bleu, à l'intérieur d'une popup. */ .spot-popup-inner .btn-primary { color: #ffffff; } .spot-popup-inner .spot-card-top { margin-top: 2px; } .spot-popup-inner .spot-footer { border-top: 1px solid var(--border-soft); } /* Contrairement à la grille et au tiroir mobile, la popup Leaflet vit dans .leaflet-popup-content (marge fixe imposée par Leaflet) : plutôt que de lutter contre ce conteneur pour un plein cadre, l'image reste en encart — toujours en avant, juste avec ses propres coins arrondis et un peu d'air en dessous plutôt qu'un débordement. */ .spot-popup-inner .spot-media { border-radius: var(--radius-sm); aspect-ratio: 16 / 10; margin-bottom: 10px; } /* ---------- Unlock banner ---------- */ .unlock-banner { background: var(--primary-light); border: 1px solid var(--primary-dim); color: var(--text-primary); border-radius: var(--radius-md); padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 32px 0; } .unlock-banner h3 { color: var(--text-primary); margin-bottom: 4px; font-size: 1.05rem; } .unlock-banner h3 span { font-family: var(--font-mono); color: var(--primary); } .unlock-banner p { color: var(--text-secondary); margin: 0; font-size: 0.9rem; } .unlock-banner-action { display: flex; flex-direction: column; align-items: center; gap: 6px; } .unlock-banner-price { font-size: 0.74rem; color: var(--text-tertiary); } @media (max-width: 560px) { .unlock-banner { padding: 20px; } .unlock-banner-action { width: 100%; } .unlock-banner .btn { width: 100%; } } /* ---------- Itineraries ---------- */ .itinerary-list { display: flex; flex-direction: column; gap: 16px; } .itinerary-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow); padding: 24px 26px; position: relative; } @media (max-width: 480px) { .itinerary-card { padding: 20px 18px; } } .itinerary-card h3 { font-size: 1.15rem; letter-spacing: -0.02em; margin-bottom: 4px; } .itinerary-zone { color: var(--primary); font-weight: 600; font-size: 0.82rem; margin-bottom: 6px; } .itinerary-card > p { margin-bottom: 20px; } /* Bandeau en tête de card : vraie photo si le parcours en a une (posée depuis /admin, onglet "Journées"), sinon le même traitement "dégradé pastel + icône surdimensionnée" que .spot-media--fallback (fiches adresses) — une carte ne doit jamais paraître vide, avec ou sans photo. --itin-color est posé en style inline (js/planning.js), une couleur par parcours (voir ITINERARIES dans functions/lib/content.js). Même structure que .spot-media/.spot-media--fallback (js/spots.js) : icône cachée dès qu'une image est présente, visible seulement en secours. */ .itinerary-media { position: relative; overflow: hidden; aspect-ratio: 3 / 1; display: flex; align-items: center; justify-content: center; background: var(--surface-subtle); } .itinerary-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .itinerary-media .itinerary-media-icon { display: none; } .itinerary-media--fallback { background: linear-gradient(135deg, color-mix(in srgb, var(--itin-color, #6b7280) 22%, white) 0%, color-mix(in srgb, var(--itin-color, #6b7280) 6%, white) 100%); } .itinerary-media--fallback .itinerary-media-icon { display: block; font-size: 2.8rem; filter: drop-shadow(0 3px 8px rgba(24, 24, 22, 0.12)); } .itinerary-card > .itinerary-media:first-child { margin: -24px -26px 20px; } @media (max-width: 480px) { .itinerary-card > .itinerary-media:first-child { margin: -20px -18px 18px; } } .itinerary-card-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 4px; } .itinerary-icon { font-size: 1.9rem; line-height: 1.15; flex-shrink: 0; } .itinerary-head-text { min-width: 0; } .itinerary-head-text h3 { margin-bottom: 2px; } .itinerary-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; } .itinerary-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.76rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: var(--surface-subtle); color: var(--text-secondary); border: 1px solid var(--border); white-space: nowrap; } .itinerary-badge--duration { background: var(--primary-light); color: var(--primary); border-color: var(--primary-dim); } .itinerary-badge--free { background: var(--green-bg); color: var(--green); border-color: var(--green-border); } .itinerary-badge--premium { color: var(--text-secondary); } .itinerary-teaser { color: var(--text-secondary); } /* Encart "Bon à savoir" : un vrai conseil pratique par parcours (vérifié, pas une phrase de remplissage), distinct visuellement du reste de la carte pour qu'on le repère d'un coup d'œil avant de partir. */ .itinerary-tip { background: var(--amber-bg); border: 1px solid var(--amber-border); border-radius: var(--radius-sm); padding: 12px 16px; margin: 0 0 22px; } .itinerary-tip-label { display: block; font-size: 0.74rem; font-weight: 700; color: var(--amber); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; } .itinerary-tip p { margin: 0; font-size: 0.88rem; color: var(--text-primary); line-height: 1.5; } /* Deuxième rangée de filtres ("Durée"), plus discrète que "Envie de…" */ .filter-envie-label--sub { font-size: 0.92rem; margin: 18px 0 10px; } .theme-grid--duration .filter-chip { padding: 9px 16px; font-size: 0.85rem; } /* Timeline verticale : ligne de connexion + pastilles, horaire et icône toujours visibles (même verrouillé) pour montrer le déroulé complet de la journée sans révéler les adresses. */ .timeline-v { list-style: none; margin: 0; padding: 0; position: relative; } .timeline-v::before { content: ''; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: var(--border-soft); } .timeline-step { position: relative; display: flex; gap: 16px; padding-bottom: 22px; } .timeline-step:last-child { padding-bottom: 0; } .timeline-dot { position: relative; z-index: 1; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--primary-light); border: 1.5px solid var(--primary-dim); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1rem; } .timeline-step-body { flex: 1; padding-top: 4px; min-width: 0; } .timeline-time { font-family: var(--font-mono); font-weight: 500; color: var(--text-primary); font-size: 0.85rem; margin-bottom: 4px; } .timeline-activity { margin: 0 0 8px; font-size: 0.92rem; color: var(--text-secondary); } /* Étape avec une adresse précise : la même fiche que /spots.html (voir venueCardHTML dans js/planning.js), réutilisée telle quelle — mêmes classes .spot-card/.spot-media/.spot-card-top/.spot-card-blur-body/ .spot-lock-panel, donc même style de base déjà en place plus haut. Ici, toujours compacte (miniature + texte empilé), quelle que soit la largeur d'écran — elle vit dans le flux d'une étape, pas dans une grille vitrine (même technique que la vue scindée de /spots.html : vignette en position absolute + padding-left, voir plus haut pourquoi pas CSS Grid ici). */ .timeline-venue-card { margin-top: 8px; padding: 10px 12px 10px 96px; min-height: 92px; } /* .spot-card.locked (plus haut, pensé pour une grande carte de vitrine) impose min-height: 300px avec la même spécificité (deux classes) — sans ce ré-équilibrage, la version verrouillée resterait forcée à 300px alors que son contenu compact n'en a besoin que d'environ 92px. */ .timeline-venue-card.locked { min-height: 92px; } .timeline-venue-card > .spot-media:first-child { position: absolute; top: 10px; left: 10px; margin: 0; width: 72px; height: 72px; aspect-ratio: 1; border-radius: var(--radius-sm); } .timeline-venue-card .spot-media .spot-status-badge { display: none; } .timeline-venue-card .spot-card-top { margin-bottom: 3px; } .timeline-venue-card .spot-name { font-size: 0.88rem; margin-bottom: 2px; } .timeline-venue-card .spot-desc { margin-bottom: 4px; font-size: 0.78rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .timeline-venue-card .spot-footer { padding-top: 4px; margin-top: 2px; } .timeline-venue-card .spot-address { margin-bottom: 4px; font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .timeline-venue-card .spot-actions { gap: 4px; } .timeline-venue-card .spot-action-btn { padding: 3px 8px; font-size: 0.72rem; } .timeline-venue-card .spot-lock-panel { position: static; transform: none; width: auto; max-width: none; flex-direction: row; align-items: center; text-align: left; gap: 6px; padding: 4px 0 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; box-shadow: none; } .timeline-venue-card .spot-lock-panel-icon { width: 18px; height: 18px; font-size: 0.68rem; margin-bottom: 0; flex-shrink: 0; } .timeline-venue-card .spot-lock-panel-hint { display: none; } .timeline-venue-card .spot-lock-panel strong { font-size: 0.74rem; } .timeline-venue-card .spot-lock-panel .btn { margin-top: 0; padding: 3px 8px; font-size: 0.7rem; } /* Pied de carte, en flux normal (pas de calque flottant ni de fondu qui cache le déroulé) : juste un rappel du nombre d'adresses encore verrouillées dans ce parcours-là, et un accès direct au déblocage. */ .itinerary-unlock-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-soft); font-size: 0.85rem; color: var(--text-secondary); } @media (max-width: 480px) { .itinerary-unlock-footer { flex-direction: column; align-items: stretch; text-align: center; } .itinerary-unlock-footer .btn { width: 100%; } } /* ---------- Aperçu verrouillé / débloqué (juste avant le prix) ---------- Deux vraies cartes adresse (mêmes classes .spot-card que sur /spots.html, mêmes données réelles), côte à côte : ce qu'on voit avant et après avoir débloqué. Montrer plutôt que décrire — la liste à puces au-dessus reste, mais ça donne quelque chose de concret à regarder juste avant de payer. */ /* ---------- Comment ça marche (3 étapes, section "Le guide complet") ---------- */ .how-it-works { max-width: 780px; margin: 0 auto 40px; display: flex; align-items: center; justify-content: center; gap: 14px; } .how-step { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px 18px; text-align: center; box-shadow: var(--shadow); } .how-step-icon { font-size: 1.6rem; margin-bottom: 8px; } .how-step h3 { font-size: 0.98rem; margin: 0 0 6px; } .how-step p { font-size: 0.85rem; color: var(--text-secondary); margin: 0; } .how-step-arrow { flex-shrink: 0; color: var(--text-tertiary); font-size: 1.3rem; } @media (max-width: 760px) { .how-it-works { flex-direction: column; } .how-step-arrow { transform: rotate(90deg); } } html[dir="rtl"] .how-step-arrow:not(.rotated) { transform: scaleX(-1); } @media (max-width: 760px) { html[dir="rtl"] .how-step-arrow { transform: rotate(90deg); } } .preview-compare { max-width: 720px; margin: 0 auto 40px; } .preview-compare > .eyebrow { display: block; text-align: center; margin-bottom: 16px; } .preview-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .preview-col { display: flex; flex-direction: column; gap: 10px; } .preview-tag { align-self: center; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; padding: 3px 10px; border-radius: 999px; } .preview-tag--locked { color: var(--amber); background: var(--amber-bg); border: 1px solid var(--amber-border); } .preview-tag--unlocked { color: var(--green); background: var(--green-bg); border: 1px solid var(--green-border); } .preview-compare .spot-card { text-align: left; height: 100%; } @media (max-width: 620px) { .preview-compare-grid { grid-template-columns: 1fr; } } html[dir="rtl"] .preview-compare .spot-card { text-align: right; } /* ---------- Pricing ---------- */ .pricing-box { max-width: 460px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); color: var(--text-primary); border-radius: var(--radius-md); padding: 32px; text-align: center; box-shadow: var(--shadow-hover); } @media (max-width: 480px) { .pricing-box { padding: 24px 20px; } } /* État "déjà débloqué" sur /debloquer.html : mêmes proportions que la boîte de prix qu'elle remplace, accent vert plutôt que la couleur d'achat. */ .unlocked-box { border-color: var(--green-border); } .unlocked-check { font-size: 2.4rem; margin-bottom: 6px; } .unlocked-box p { color: var(--text-secondary); margin-bottom: 22px; } /* ---------- Page /restaurer-acces.html : email -> code -> accès ---------- */ .restore-box .form-row { text-align: left; margin-bottom: 18px; } .restore-box .form-row label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; } .restore-box input[type="email"] { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 1rem; color: var(--text-primary); } .restore-box input[type="email"]:focus { outline: none; border-color: var(--primary-dim); box-shadow: 0 0 0 3px var(--primary-light); } .restore-box .btn { width: 100%; } .restore-hint { font-size: 0.78rem; color: var(--text-tertiary); margin: 14px 0 0; } .restore-icon { font-size: 2.2rem; margin-bottom: 6px; } .restore-box > p { color: var(--text-secondary); } .restore-email-shown { font-size: 0.95rem; margin-bottom: 18px !important; } /* Cases de code façon carte bancaire : toujours de gauche à droite, même en arabe (RTL) — un code numérique ne s'inverse pas, comme un numéro de tél. */ .otp-row { display: flex; gap: 8px; justify-content: center; direction: ltr; margin: 18px 0; } .otp-digit { width: 44px; height: 54px; text-align: center; font-family: var(--font-mono); font-size: 1.4rem; font-weight: 600; color: var(--text-primary); border: 1.5px solid var(--border); border-radius: var(--radius-sm); } .otp-digit:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } @media (max-width: 360px) { .otp-digit { width: 38px; height: 48px; font-size: 1.2rem; } } .restore-error { color: var(--red); font-size: 0.85rem; margin: 0 0 14px; } .link-btn { display: block; width: 100%; background: none; border: none; color: var(--primary); font-weight: 600; font-size: 0.85rem; text-decoration: underline; cursor: pointer; margin-top: 16px; font-family: var(--font-sans); } .restore-back-link { text-align: center; font-size: 0.85rem; margin-top: 22px; color: var(--text-secondary); } @keyframes restore-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } } .shake { animation: restore-shake 0.4s ease; } @media (prefers-reduced-motion: reduce) { .shake { animation: none; } } .pricing-box .price { font-family: var(--font-mono); font-size: 2.6rem; font-weight: 500; letter-spacing: -0.02em; margin: 10px 0; color: var(--primary); } .pricing-box .price .price-suffix { font-size: 1rem; color: var(--text-tertiary); font-family: var(--font-sans); font-weight: 400; } .price-anchor { font-size: 0.84rem; color: var(--text-tertiary); font-style: italic; margin: 0 0 22px; line-height: 1.5; } .pricing-list { list-style: none; margin: 20px 0 26px; padding: 0; text-align: left; } .pricing-list li { padding: 7px 0; font-size: 0.92rem; color: var(--text-secondary); } .pricing-list li::before { content: "✓ "; color: var(--green); font-weight: 700; } .pricing-box .btn-primary { width: 100%; } /* Preuve compacte juste sous le bouton d'achat : même avis que dans la section témoignages plus bas, mais repris ici pile au moment où on hésite à cliquer plutôt que seulement en bas de page. */ .mini-proof { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; background: var(--green-bg); border: 1px solid var(--green-border); border-radius: var(--radius-md); text-align: left; } .mini-proof picture { flex-shrink: 0; line-height: 0; } .mini-proof img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: block; } .mini-proof-stars { display: block; font-size: 0.7rem; color: var(--green); letter-spacing: 1px; margin-bottom: 1px; } .mini-proof-quote { flex: 1; min-width: 0; font-size: 0.8rem; color: var(--text-secondary); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mini-proof-quote strong { color: var(--text-primary); font-weight: 600; } html[dir="rtl"] .mini-proof { text-align: right; } .reassure-line { font-size: 0.82rem; color: var(--green); font-weight: 500; margin-top: 12px; } .checkout-note { font-size: 0.78rem; color: var(--text-tertiary); margin-top: 6px; } /* Explique, avant même d'arriver sur la page Stripe, que l'email demandé là-bas (pour le reçu) est ce qui permettra ensuite "Restaurer mon accès" — pour que le lien entre les deux ne soit jamais une surprise. */ .email-reassure-line { max-width: 420px; margin: 14px auto 0; text-align: center; font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; } /* Lien "déjà payé, restaurer mon accès" : doit être facile à repérer pour un client qui revient sur un nouvel appareil, pas noyé en petit texte gris. */ .restore-access-cta { text-align: center; margin: 18px 0; } .restore-access-cta a { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border: 1px solid var(--primary-dim); border-radius: 100px; background: var(--primary-light); color: var(--primary); font-weight: 600; font-size: 0.88rem; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease; } .restore-access-cta a:hover { background: var(--primary-dim); border-color: var(--primary); } /* ---------- Page /debloquer.html : bandeau de réassurance paiement ---------- Une colonne unique plutôt qu'une grille 2 colonnes : avec 3 badges (dont la garantie satisfait-remboursé, plus longue à lire), une seule ligne par badge reste plus lisible qu'une grille resserrée sur ce conteneur étroit. */ .trust-badges { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 16px; } .trust-badge { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; font-size: 0.82rem; color: var(--text-secondary); font-weight: 500; } .trust-badge-icon { font-size: 1.15rem; flex-shrink: 0; } .trust-badge--guarantee { background: var(--green-bg); border-color: var(--green-border); color: var(--green); font-weight: 600; } .trust-badge--social { background: var(--primary-light); border-color: var(--primary-dim); color: var(--primary); font-weight: 600; } .payment-methods-label { text-align: center; font-size: 0.76rem; color: var(--text-tertiary); margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.04em; } .payment-logos { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; } .payment-logo { display: flex; align-items: center; justify-content: center; width: 52px; height: 34px; background: #fff; border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow); } .payment-logo svg { display: block; } .stripe-note { font-size: 0.76rem; color: var(--text-tertiary); text-align: center; margin: 0 0 8px; line-height: 1.5; } /* ---------- Footer ---------- */ footer { border-top: 1px solid var(--border); padding: 44px 0 24px; margin-top: 32px; } /* Sous 1024px, la barre .sticky-cta est fixe en bas d'écran en permanence (voir plus bas) : sans cette réserve, son dernier état mesuré (posé par js/app.js dans --sticky-cta-h) recouvre la ligne de copyright et le lien admin une fois qu'on scrolle tout en bas. --sticky-cta-h vaut 0px tant que la barre n'existe pas (desktop, page déjà débloquée...), donc cette règle n'ajoute rien là où il n'y a rien à réserver. */ body.has-sticky-cta footer { padding-bottom: calc(24px + var(--sticky-cta-h, 0px)); } .footer-grid { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 32px; padding-bottom: 30px; } .footer-brand .logo { font-size: 1.02rem; display: inline-block; } .footer-brand p { margin: 12px 0 0; font-size: 0.82rem; color: var(--text-tertiary); max-width: 260px; line-height: 1.55; } .footer-col h3 { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-tertiary); margin: 0 0 14px; } .footer-col a { display: block; font-size: 0.87rem; color: var(--text-secondary); text-decoration: none; padding: 6px 0; } .footer-col a:hover { color: var(--primary); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 0.78rem; color: var(--text-tertiary); } .footer-admin-link { opacity: 0.5; font-size: 0.78rem; text-decoration: none; color: inherit; } .footer-admin-link:hover { opacity: 1; } @media (max-width: 760px) { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; gap: 26px; text-align: center; } .footer-brand p { max-width: none; margin-left: auto; margin-right: auto; } .footer-bottom { flex-direction: column; text-align: center; } } /* ---------- Blog ---------- */ .blog-hero-lede { max-width: 620px; margin: 0 auto; } /* Barre d'outils : recherche + catégories, au-dessus de la grille. Réutilise volontairement les classes de /spots.html (.spots-search, .filter-chip) plutôt que d'en recréer des nouvelles — même vocabulaire visuel partout sur le site, cohérence "pro" plutôt que composants réinventés à chaque page. */ .blog-toolbar { margin-bottom: 18px; } .blog-category-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 4px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } @media (min-width: 700px) { .blog-category-row { flex-wrap: wrap; overflow-x: visible; } } /* Nombre de résultats + bouton reset, affiché seulement quand une recherche ou un filtre autre que "Tout" est actif (voir .blog-results-bar[hidden] plus bas) — pas de texte permanent qui n'apporte rien tant qu'on regarde juste la liste complète. */ .blog-results-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 2px 18px; font-size: 0.85rem; color: var(--text-tertiary); } .blog-results-bar[hidden] { display: none; } .blog-results-reset { border: none; background: none; font-family: var(--font-sans); font-size: 0.85rem; font-weight: 700; color: var(--primary); cursor: pointer; padding: 0; } .blog-results-reset:hover { text-decoration: underline; } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .blog-grid { grid-template-columns: 1fr; } } .blog-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow); overflow: hidden; /* pour que la miniature épouse les coins arrondis de la card */ text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; } .blog-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); } /* Masqué par défaut via JS uniquement (voir js/blog.js) : sans JS, ou pour tout robot qui lit le HTML brut, chaque card reste visible et son lien pleinement présent — le filtre/la recherche/la pagination sont une amélioration progressive, jamais une condition d'accès au contenu. */ .blog-card[hidden] { display: none; } .blog-card-thumb-wrap { aspect-ratio: 1200 / 420; background: var(--surface-subtle); overflow: hidden; } .blog-card-thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s ease; } .blog-card:hover .blog-card-thumb { transform: scale(1.04); } .blog-card-body { display: flex; flex-direction: column; flex: 1; padding: 20px 24px 24px; } .blog-card-eyebrow { font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--primary); margin-bottom: 10px; } .blog-card h2 { font-size: 1.15rem; letter-spacing: -0.01em; color: var(--text-primary); margin-bottom: 10px; } .blog-card p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.55; margin-bottom: 14px; } .blog-card-meta { margin-top: auto; font-size: 0.78rem; color: var(--text-tertiary); } /* État vide (recherche/filtre sans résultat) : même ton chaleureux que le reste du site plutôt qu'un message sec type "0 résultat". */ .blog-empty { text-align: center; padding: 56px 24px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-md); } .blog-empty[hidden] { display: none; } .blog-empty-emoji { font-size: 2rem; margin-bottom: 12px; } .blog-empty h3 { font-size: 1.1rem; margin-bottom: 8px; color: var(--text-primary); } .blog-empty p { color: var(--text-secondary); font-size: 0.92rem; margin-bottom: 18px; } .blog-load-more-wrap { display: flex; justify-content: center; margin-top: 32px; } .blog-load-more-wrap[hidden] { display: none; } .blog-load-more { border: 1.5px solid var(--border); background: var(--surface); padding: 13px 28px; border-radius: 999px; font-family: var(--font-sans); font-size: 0.92rem; font-weight: 700; color: var(--text-primary); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .blog-load-more:hover { border-color: var(--primary-dim); background: var(--surface-subtle); } /* ---------- Article (page blog individuelle) ---------- */ .article-wrap { max-width: 720px; } .breadcrumb { font-size: 0.82rem; color: var(--text-tertiary); margin-bottom: 18px; } .breadcrumb a { color: var(--text-tertiary); text-decoration: none; } .breadcrumb a:hover { color: var(--primary); } .article-meta { display: flex; align-items: center; gap: 10px; font-size: 0.84rem; color: var(--text-tertiary); margin-top: 16px; } .article-meta .avatar { width: 32px; height: 32px; font-size: 0.82rem; margin: 0; flex-shrink: 0; } .article-meta strong { color: var(--text-secondary); font-weight: 600; } /* Bandeau d'illustration en tête d'article — un dessin plutôt qu'une photo de stock : cet environnement n'a pas d'accès réseau vers une banque d'images (testé), et un dessin maison évite au passage tout souci de licence. Une dizaine de scènes réutilisées selon le thème de l'article (voir img/blog/scene-*.svg), pas une par article — cohérence visuelle d'ensemble plutôt que 24 styles différents. */ .article-hero-illus { display: block; width: 100%; aspect-ratio: 3 / 1.15; object-fit: cover; border-radius: var(--radius-md); margin-top: 24px; box-shadow: var(--shadow); } @media (max-width: 640px) { .article-hero-illus { aspect-ratio: 16 / 11; } } .article-toc { background: var(--surface-subtle); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 20px 24px; margin: 32px 0; } .article-toc-label { font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); margin-bottom: 10px; } .article-toc ol { margin: 0; padding-left: 20px; } .article-toc li { margin-bottom: 6px; font-size: 0.92rem; } .article-toc a { color: var(--primary); text-decoration: none; } .article-toc a:hover { text-decoration: underline; } /* "L'essentiel en bref" : résumé scannable juste après l'intro, avant le premier H2 — pour deux lecteurs à la fois. Quelqu'un qui scanne l'article sur mobile sans tout lire, et les outils qui extraient un résumé (aperçus IA, featured snippets Google) : une liste de faits courts se cite et se reformule bien plus facilement qu'un paragraphe de prose noyé dans le texte. Couleur primaire plutôt que le gris neutre de .article-toc : visuellement "la réponse", pas juste un sommaire de navigation. */ .article-tldr { background: var(--primary-light); border: 1px solid var(--primary-dim); border-radius: var(--radius-md); padding: 20px 24px; margin: 28px 0; } .article-tldr-label { font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--primary); margin-bottom: 10px; } .article-tldr ul { margin: 0; padding-left: 20px; color: var(--text-primary); } .article-tldr li { margin-bottom: 6px; font-size: 0.94rem; line-height: 1.5; } .article-tldr li:last-child { margin-bottom: 0; } .article-body h2 { font-size: 1.35rem; margin-top: 2em; letter-spacing: -0.01em; } .article-body h3 { font-size: 1.1rem; margin-top: 1.6em; } .article-body p { font-size: 1rem; line-height: 1.75; color: var(--text-secondary); margin-bottom: 1.2em; } .article-body ul, .article-body ol { margin: 0 0 1.2em; padding-left: 22px; color: var(--text-secondary); line-height: 1.7; } .article-body li { margin-bottom: 6px; } .article-body strong { color: var(--text-primary); } /* Encart qui vend le guide, glissé dans le corps de l'article — même esprit visuel que le reste du site (pas un bandeau publicitaire criard), mais assez distinct du texte autour pour donner envie de cliquer : liseré en dégradé, pastille de stat façon vitrine, et — quand des photos d'adresses sont disponibles — un petit collage façon Polaroid en tête de carte (voir .guide-promo-photos ci-dessous, injecté par initGuidePromoPolaroids() dans js/app.js : de vraies photos posées depuis /admin, pas des images en dur, donc l'encart s'anime tout seul au fur et à mesure que le guide se garnit de photos, sans jamais rien à retoucher ici). Deux occurrences par article (voir insertion dans le HTML) : une au fil du texte, une juste avant la FAQ/conclusion — pas la même carte copiée-collée deux fois, la seconde (.guide-promo--final) referme l'article sur un ton plus direct. */ .guide-promo { position: relative; background: linear-gradient(155deg, var(--primary-light) 0%, var(--surface) 65%); border: 1px solid var(--primary-dim); border-radius: 18px; padding: 30px 28px 28px; margin: 2.4em 0; box-shadow: var(--shadow); overflow: hidden; transition: box-shadow 0.2s ease, transform 0.2s ease; } .guide-promo:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); } .guide-promo::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--primary) 0%, #3fc2c9 100%); } .guide-promo-eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--primary); margin-bottom: 10px; } .guide-promo-stat { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: var(--primary); background: var(--surface); border: 1px solid var(--primary-dim); border-radius: 999px; padding: 3px 10px; white-space: nowrap; } .guide-promo h3 { font-size: 1.2rem; margin-bottom: 8px; letter-spacing: -0.01em; } .guide-promo p { font-size: 0.93rem; color: var(--text-secondary); margin-bottom: 20px; line-height: 1.6; } .guide-promo .btn { width: auto; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 2px 10px rgba(36, 96, 224, 0.25); } .guide-promo .btn::after { content: '→'; transition: transform 0.15s ease; } .guide-promo .btn:hover::after { transform: translateX(3px); } /* La flèche pointe dans le sens de lecture : vers la gauche en arabe (RTL), pas vers la droite comme pour les autres langues (LTR). Repéré lors d'un audit RTL : la flèche restait "→" sur les pages arabes. */ html[dir="rtl"] .guide-promo .btn::after { content: '←'; } html[dir="rtl"] .guide-promo .btn:hover::after { transform: translateX(-3px); } @media (max-width: 480px) { .guide-promo .btn { width: 100%; justify-content: center; } } /* Collage "Polaroid" : 2 ou 3 photos réelles d'adresses du guide, légèrement pivotées et superposées comme posées à la main sur la carte, cadre blanc épais en bas façon tirage instantané. N'existe que si le JS en a trouvé assez (voir initGuidePromoPolaroids()) — sans ce bloc, la carte retombe proprement sur son habillage texte seul, pas de trou ni de placeholder vide. */ .guide-promo-photos { display: flex; justify-content: center; margin: -4px 0 22px; } .guide-promo-photo { display: block; flex-shrink: 0; width: 92px; background: #fff; padding: 6px 6px 16px; border-radius: 3px; box-shadow: 0 10px 20px rgba(24, 24, 22, 0.18), 0 2px 4px rgba(24, 24, 22, 0.1); transition: transform 0.25s ease; } .guide-promo-photo:nth-child(1) { transform: rotate(-7deg) translate(6px, 3px); z-index: 1; } .guide-promo-photo:nth-child(2) { transform: rotate(4deg); z-index: 3; margin: 0 -14px; } .guide-promo-photo:nth-child(3) { transform: rotate(-3deg) translate(-6px, 4px); z-index: 2; } .guide-promo:hover .guide-promo-photo:nth-child(1) { transform: rotate(-11deg) translate(2px, -2px); } .guide-promo:hover .guide-promo-photo:nth-child(2) { transform: rotate(4deg) translateY(-4px); } .guide-promo:hover .guide-promo-photo:nth-child(3) { transform: rotate(1deg) translate(-2px, -1px); } .guide-promo-photo-img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 1px; background: var(--surface-subtle); } @media (max-width: 480px) { .guide-promo-photo { width: 78px; padding: 5px 5px 13px; } /* La pastille de stat (ex: "63 adresses · 6 journées") passe à la ligne plutôt que de se faire couper : white-space:nowrap dessus + une rangée trop étroite en portrait mobile la tronquaient sinon. */ .guide-promo-eyebrow { flex-wrap: wrap; row-gap: 6px; } } /* Variante de clôture : fond plein plutôt que dégradé pastel, pour un dernier appel plus affirmé juste avant que le lecteur ne quitte l'article. */ .guide-promo--final { background: linear-gradient(155deg, var(--primary) 0%, #173e94 100%); border-color: transparent; } .guide-promo--final::before { display: none; } .guide-promo--final .guide-promo-eyebrow { color: #cfe0fb; } .guide-promo--final .guide-promo-stat { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.3); color: #fff; } .guide-promo--final h3 { color: #fff; } .guide-promo--final p { color: #dbe6fb; } .guide-promo--final .btn-primary { background: #fff; color: var(--primary); border-color: #fff; } .guide-promo--final .btn-primary:hover { background: #eef1ff; } .article-faq { margin-top: 2.5em; } .article-faq h2 { font-size: 1.35rem; margin-bottom: 1em; } .article-footer-nav { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 3em; padding-top: 24px; border-top: 1px solid var(--border-soft); font-size: 0.9rem; } .article-footer-nav a { color: var(--primary); text-decoration: none; font-weight: 600; } .article-footer-nav a:hover { text-decoration: underline; } /* ---------- Simple pages (legal) ---------- */ .legal { max-width: 720px; margin: 0 auto; padding: 48px 24px; } .legal h2 { margin-top: 1.4em; } .legal p a { color: var(--primary); text-decoration: underline; } .placeholder-note { background: var(--amber-bg); border: 1px solid var(--amber-border); color: var(--amber); border-radius: var(--radius-sm); padding: 14px 18px; font-size: 0.86rem; margin-bottom: 30px; } /* ---------- Barre CTA flottante (mobile/tablette) ---------- En dessous de 1024px, le CTA de la nav passe dans le menu hamburger fermé par défaut (voir .nav-links) : sans ça, l'action principale du site devient invisible pour la majorité des visiteurs. Cette barre, injectée par app.js sur toutes les pages sauf merci.html, reste visible en permanence. z-index 90 : sous le toast (100) et sous le tiroir de fiche adresse (200/201) pour que ceux-ci restent lisibles par-dessus sans réglage supplémentaire. */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; align-items: center; justify-content: space-between; gap: 12px; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); animation: sticky-cta-in 0.25s ease; } .sticky-cta-price { font-size: 0.82rem; font-weight: 500; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Action secondaire de la barre (toutes les pages sauf /spots.html) : occupe la même place que .sticky-cta-price, mais c'est un vrai lien cliquable plutôt qu'un texte inerte — d'où la couleur d'action et le soulignement, seule façon de le distinguer visuellement du bouton primaire à côté sans lui donner le même poids. */ .sticky-cta-secondary { flex: 1 1 auto; min-width: 0; font-size: 0.82rem; font-weight: 600; color: var(--primary); text-decoration: underline; text-decoration-color: var(--primary-dim); text-underline-offset: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sticky-cta-secondary:hover { color: var(--primary-hover); } .sticky-cta .btn { flex-shrink: 0; min-height: 44px; padding: 10px 20px; font-size: 0.92rem; white-space: nowrap; } @keyframes sticky-cta-in { from { transform: translateY(100%); } to { transform: translateY(0); } } @media (max-width: 1024px) { .sticky-cta { display: flex; } /* La place qu'elle prend en bas d'écran est réservée sur le footer (voir body.has-sticky-cta footer, hauteur mesurée en JS dans js/app.js) pour qu'elle ne recouvre jamais la ligne de copyright ou le lien admin une fois qu'on scrolle tout en bas. */ } /* Page d'accueil : masquée quand la section prix (#guide) est déjà à l'écran, pour ne pas empiler deux CTA identiques l'un sur l'autre. */ .sticky-cta.sticky-cta-hidden { display: none; } @media (max-width: 340px) { /* Écrans très étroits : l'action secondaire (prix ou lien) cède la place, le bouton primaire seul reste lisible. */ .sticky-cta-price, .sticky-cta-secondary { display: none; } } html[dir="rtl"] .sticky-cta-price, html[dir="rtl"] .sticky-cta-secondary { text-align: right; } /* ---------- Toast ---------- */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--text-primary); color: #ffffff; padding: 12px 20px; border-radius: var(--radius-sm); font-size: 0.88rem; box-shadow: var(--shadow-hover); opacity: 0; pointer-events: none; transition: all 0.25s ease; z-index: 100; /* au-dessus de .sticky-cta (90) pour ne jamais se faire recouvrir */ max-width: calc(100vw - 32px); text-align: center; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* La barre CTA flottante occupe le bas de l'écran sous 1024px : le toast doit remonter au-dessus d'elle plutôt que de se retrouver caché derrière. */ @media (max-width: 1024px) { body.has-sticky-cta .toast { bottom: 78px; } } /* ---------- Merci page ---------- */ .merci-box { max-width: 560px; margin: 64px auto; text-align: center; padding: 0 24px; } .merci-icon { font-size: 2.6rem; margin-bottom: 16px; } /* Un seul

dans le DOM à la fois n'est pas possible ici (3 états exclusifs togglés en JS) : succès/erreur utilisent un

pour la hiérarchie de titres, mais gardent la même taille visuelle que le

de l'état "chargement". / .merci-box h1, .merci-box h2 { font-size: clamp(1.6rem, 4vw, 2rem); } .merci-email-note { background: var(--primary-light); border-radius: var(--radius-sm); padding: 12px 16px; margin: 4px 0 20px; font-size: 0.86rem; color: var(--text-secondary); line-height: 1.5; } .merci-email-note strong { color: var(--primary); } .merci-email-note[hidden] { display: none; } / [hidden] vs display, voir la note sur .nearme-status[hidden] dans css/style.css / @media (max-width: 480px) { .merci-box { margin: 40px auto; } } / ---------- RTL (arabe) ---------- / / Le flexbox et le grid se réorientent tout seuls avec dir="rtl" ; ce qui reste à corriger à la main, ce sont les propriétés "physiques" (left/right, text-align, margin-left) qui ne suivent pas le sens de lecture automatiquement. / html[dir="rtl"] .lang-switch-menu { right: auto; left: 0; } html[dir="rtl"] .lang-switch-option { text-align: right; } html[dir="rtl"] .nav-links li:last-child { margin-left: 0; margin-right: 8px; } html[dir="rtl"] .lang-switch { margin-left: 0; margin-right: 4px; } html[dir="rtl"] .hero-copy h1, html[dir="rtl"] .hero-copy .lede { text-align: right; } @media (max-width: 900px) { html[dir="rtl"] .hero-copy h1, html[dir="rtl"] .hero-copy .lede { text-align: center; } } html[dir="rtl"] .pull-quote { border-left: none; border-right: 3px solid var(--primary); padding-left: 0; padding-right: 20px; } html[dir="rtl"] .pricing-list { text-align: right; } html[dir="rtl"] .pricing-list li::before { content: none; } html[dir="rtl"] .pricing-list li::after { content: " ✓"; color: var(--green); font-weight: 700; } html[dir="rtl"] .spot-address, html[dir="rtl"] .spot-desc, html[dir="rtl"] .spot-whygo, html[dir="rtl"] .story-body, html[dir="rtl"] .faq-item { text-align: right; } / ---------- /mon-espace.html : verrouillé / débloqué + PDF ---------- / .account-state { margin-bottom: 8px; } .account-loading-text { text-align: center; color: var(--text-secondary); padding: 40px 0; } .account-error { text-align: center; color: var(--red); font-size: 0.9rem; } .account-box { margin-bottom: 18px; } .account-box-icon { font-size: 2.2rem; margin-bottom: 8px; } .account-box--unlocked { border-color: var(--green-border); } / Aperçu flouté sur l'état verrouillé : montre la forme du contenu (email, montant, date) sans jamais afficher de fausses données lisibles. / .account-preview { border: 1.5px dashed var(--border); border-radius: var(--radius-sm); padding: 14px 16px; margin: 20px 0 10px; text-align: left; } .account-preview-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 0.85rem; color: var(--text-secondary); } .account-preview-blur { filter: blur(4px); user-select: none; font-family: var(--font-mono); color: var(--text-tertiary); } .account-preview-caption { font-size: 0.78rem; color: var(--text-tertiary); font-style: italic; margin: 0 0 22px; } .account-receipt { text-align: left; margin-top: 4px; } .account-receipt h3 { font-size: 1rem; margin: 0 0 10px; text-align: center; } / [hidden] doit rester prioritaire sur le display:flex ci-dessous — même spécificité (une classe, un attribut), donc sans cette règle explicite l'ordre d'apparition dans la feuille l'emporterait et une ligne "cachée" par JS resterait visible (voir .admin-login-screen[hidden] plus haut pour le même correctif). / .account-receipt-row[hidden] { display: none; } .account-receipt-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); font-size: 0.92rem; } .account-receipt-row:last-of-type { border-bottom: none; } .account-receipt-row span { color: var(--text-secondary); } .account-receipt-row strong { color: var(--text-primary); font-weight: 600; } #account-receipt-details p[data-receipt-fallback] { color: var(--text-secondary); font-size: 0.88rem; text-align: center; margin: 6px 0 0; } .account-pdf-box { text-align: center; } .account-pdf-box .btn { width: 100%; } .account-pdf-hint { font-size: 0.78rem; color: var(--text-tertiary); margin: 12px 0 0; } .account-pdf-error { color: var(--red); font-size: 0.85rem; margin: 10px 0 0; } .account-links { margin-top: 6px; } html[dir="rtl"] .account-preview, html[dir="rtl"] .account-receipt { text-align: right; } / ============================================================ Admin (/admin.html) — tableau de bord interne, pas de i18n, densité d'information plus élevée que le reste du site public. Réutilise les tokens Meridian (couleurs, rayons, ombres) pour rester cohérent visuellement, mais avec sa propre mise en page. ============================================================ / .admin-body { background: var(--bg); } .admin-wrap { min-height: 100vh; } / ---- Écran de connexion ---- [hidden] doit rester prioritaire sur le display:flex ci-dessous — sans cette règle explicite, la règle "display:flex" de la classe (origine "auteur") l'emporterait sur le display:none de [hidden] (origine "user agent"), et le formulaire de connexion resterait visible même une fois .hidden posé en JS. / .admin-login-screen[hidden] { display: none; } .admin-login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .admin-login-box { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-hover); padding: 36px 32px; text-align: center; } .admin-login-box h1 { font-size: 1.3rem; margin: 0 0 22px; } .admin-login-box form { display: flex; flex-direction: column; gap: 14px; text-align: left; } .admin-login-box .btn { margin-top: 4px; } / Un champ sous 16px déclenche un zoom automatique au focus sur iOS Safari — gênant pour se connecter depuis un téléphone. / .admin-login-box .form-row input { font-size: 16px; } @media (max-width: 400px) { .admin-login-box { padding: 28px 20px; } } / ---- Header du dashboard ---- / .admin-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; gap: 12px; } .admin-header-right { display: flex; align-items: center; gap: 8px; } .admin-tabs { display: flex; align-items: center; gap: 8px; } .admin-tab { font-size: 0.88rem; font-weight: 500; color: var(--text-secondary); padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .admin-tab:hover { background: var(--surface-subtle); } .admin-tab.active { background: var(--primary-light); color: var(--primary); } .admin-badge { background: var(--red); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; } .admin-logout-btn { font-size: 0.85rem; color: var(--text-secondary); background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 14px; cursor: pointer; } .admin-logout-btn:hover { background: var(--surface-subtle); color: var(--text-primary); } / ---- Mobile : bandeau d'onglets en segmented control pleine largeur, plutôt que 3 petits onglets + déconnexion tassés sur une seule ligne qui finissait par passer à la ligne n'importe où. Grille 2×2 plutôt que les 4 onglets sur une seule ligne (flex: 1 1 0) : avec "Statistiques" (mot le plus long, aucun point de coupure) partagé sur 4 colonnes à 375px, le contenu ne tenait pas dans sa colonne — un flex item garde par défaut min-width:auto (= la largeur de son mot le plus long) et ignore tout rétrécissement, ce qui poussait .admin-tabs au-delà du viewport et faisait défiler toute la page horizontalement. Deux onglets par ligne donne à chaque libellé largement la place qu'il lui faut, sans troncature ni astuce de taille de police. ---- / @media (max-width: 640px) { .admin-header { padding: 14px 16px; row-gap: 12px; } .admin-header-right { flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: 10px; } .admin-tabs { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .admin-tab { justify-content: center; min-height: 44px; padding: 10px 8px; text-align: center; } .admin-logout-btn { align-self: flex-end; min-height: 40px; } } .admin-panel { padding: 28px 24px 60px; max-width: 1080px; margin: 0 auto; } @media (max-width: 640px) { .admin-panel { padding: 18px 14px 48px; } .admin-stat-card { padding: 16px 16px; } .admin-card { padding: 16px; } } / Action destructive (vide la table `events`, voir /api/admin/stats-reset) — discrète et à l'écart des cartes, comme .admin-spot-delete-btn : jamais un gros bouton rouge accrocheur pour une action qu'on ne veut pas déclencher par mégarde. / .admin-stats-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; } / ---- Brief du jour : carte d'accueil ludique en tête du tableau de bord ---- / .admin-brief { background: linear-gradient(160deg, var(--primary-light) 0%, var(--surface) 55%); border: 1px solid var(--primary-dim); border-radius: var(--radius-md); padding: 26px 26px 22px; margin-bottom: 20px; box-shadow: var(--shadow); } .admin-brief-eyebrow { font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary); margin-bottom: 8px; } .admin-brief-greeting { font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; color: var(--text-primary); } .admin-brief-date { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 14px; text-transform: capitalize; } .admin-brief-live { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; font-weight: 600; color: var(--green); background: var(--green-bg); border: 1px solid var(--green-border); border-radius: 999px; padding: 5px 12px 5px 10px; } .admin-brief-live-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--green); animation: admin-brief-pulse 1.8s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .admin-brief-live-dot { animation: none; } } @keyframes admin-brief-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.75); } } .admin-brief-divider { height: 1px; background: var(--primary-dim); margin: 20px 0 16px; } .admin-brief-section-label { font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 12px; } .admin-brief-section-label--inline { margin-bottom: 0; } .admin-brief-row-empty { font-size: 0.9rem; color: var(--text-tertiary); text-align: center; } .admin-brief-pill { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600; border-radius: 999px; padding: 3px 10px; white-space: nowrap; flex-shrink: 0; } .admin-brief-pill--good { color: var(--green); background: var(--green-bg); border: 1px solid var(--green-border); } .admin-brief-pill--bad { color: var(--red); background: var(--red-bg); border: 1px solid var(--red); } .admin-brief-pill--flat { color: var(--text-secondary); background: var(--surface-subtle); border: 1px solid var(--border); } @media (max-width: 480px) { .admin-brief { padding: 20px 18px 18px; } } .admin-stats-reset-btn { background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 12px; font-size: 0.8rem; font-weight: 600; color: var(--red, #b3261e); cursor: pointer; } .admin-stats-reset-btn:hover { background: var(--surface-subtle); border-color: var(--red, #b3261e); } / ---- Cartes de stats ---- / .admin-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; } @media (max-width: 760px) { .admin-stat-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .admin-stat-grid { grid-template-columns: 1fr; } } .admin-stat-card { / Sans ce min-width:0, une valeur ou un libellé trop long empêcherait la grille (.admin-stat-grid) de rétrécir sous 375px — comportement par défaut d'une grille CSS : la piste s'agrandit pour loger le contenu "incompressible" au lieu de laisser le texte passer à la ligne, ce qui fait déborder toute la page horizontalement sur mobile. / min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px 22px; box-shadow: var(--shadow); } .admin-stat-card--accent { border-color: var(--primary-dim); background: var(--primary-light); } .admin-stat-card--good { border-color: var(--green-border); background: var(--green-bg); } .admin-stat-card--bad { border-color: var(--red); background: var(--red-bg); } .admin-stat-card--bad .admin-stat-value { color: var(--red); } .admin-stat-label { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 6px; } .admin-stat-value { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 500; color: var(--text-primary); font-variant-numeric: tabular-nums; } / ---- Tuiles "Aujourd'hui", dans le bandeau .admin-brief ---- Même grammaire visuelle que .admin-stat-card juste en dessous (icône + gros chiffre + libellé) mais sur un fond clair semi-transparent pour ressortir sur le dégradé du bandeau — un seul langage de carte pour tout le haut du tableau de bord, plutôt que deux styles différents. / .admin-today-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } @media (max-width: 760px) { .admin-today-grid { grid-template-columns: repeat(2, 1fr); } } .admin-stat-tile { min-width: 0; / même raison que .admin-stat-card ci-dessus / background: color-mix(in srgb, var(--surface) 78%, transparent); border: 1px solid var(--primary-dim); border-radius: var(--radius-sm); padding: 14px 12px; text-align: center; } .admin-stat-tile--good { border-color: var(--green-border); background: color-mix(in srgb, var(--green-bg) 85%, transparent); } .admin-stat-tile-icon { font-size: 1.4rem; line-height: 1; margin-bottom: 6px; } .admin-stat-tile-value { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.1; } .admin-stat-tile-label { font-size: 0.74rem; color: var(--text-secondary); margin-top: 4px; } .admin-today-trend { display: flex; justify-content: center; margin-top: 14px; } / ---- Rangée de cartes secondaires ---- / .admin-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 760px) { .admin-row { grid-template-columns: 1fr; } } .admin-card { min-width: 0; / même raison que .admin-stat-card plus haut — cible réelle du débordement mobile trouvé sur "Qui clique sur « Je veux le guide » ?" / background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px; box-shadow: var(--shadow); } .admin-card h2 { font-size: 1rem; margin: 0 0 16px; } .admin-card-sub { margin: -10px 0 16px; font-size: 0.82rem; color: var(--text-tertiary); } .admin-empty { color: var(--text-tertiary); font-size: 0.88rem; } / Chapeau d'une nouvelle zone du tableau de bord (ex. "Comprendre les parcours"), sous le libellé de section — même rôle que .admin-card-sub mais hors carte, donc sans la marge négative pensée pour suivre un

. / .admin-section-sub { margin: -6px 0 16px; font-size: 0.84rem; color: var(--text-tertiary); max-width: 640px; } / Carte "taux de rebond" : un seul gros chiffre centré, même famille que .admin-stat-card mais sans dépendre de la grille à 3 colonnes. / .admin-bounce-card { text-align: center; padding: 24px 22px; } .admin-bounce-card .admin-stat-value { font-size: 2.2rem; margin-bottom: 4px; } .admin-bounce-card .admin-stat-label { margin-bottom: 0; } / ---- Répartition par langue ---- / .admin-lang-breakdown { display: flex; flex-direction: column; gap: 10px; } .admin-lang-row { display: grid; grid-template-columns: minmax(110px, max-content) 1fr 48px; align-items: center; gap: 10px; } .admin-lang-name { font-size: 0.85rem; color: var(--text-primary); white-space: nowrap; } .admin-lang-bar-track { height: 8px; background: var(--surface-subtle); border-radius: 999px; overflow: hidden; } .admin-lang-bar-fill { height: 100%; background: var(--primary); border-radius: 999px; } .admin-lang-pct { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-secondary); text-align: right; } / ---- Tendance 14 jours ---- / .admin-trend-bars { display: flex; align-items: flex-end; gap: 6px; height: 140px; } .admin-trend-bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; } .admin-trend-bar-fill { width: 100%; background: var(--primary); border-radius: 3px 3px 0 0; min-height: 4px; } .admin-trend-bar-label { font-size: 0.62rem; color: var(--text-tertiary); margin-top: 6px; writing-mode: vertical-rl; transform: rotate(180deg); } / ---- Bandeau "record" ludique, au-dessus des cartes de stats ---- / .admin-milestone { background: linear-gradient(90deg, var(--primary-light), var(--surface)); border: 1px solid var(--primary-dim); border-radius: var(--radius-md); padding: 12px 18px; margin-bottom: 16px; font-size: 0.9rem; color: var(--text-primary); } .admin-milestone strong { color: var(--primary-hover); } / ---- Pays des visiteurs ---- / .admin-country-list { display: flex; flex-direction: column; gap: 10px; } .admin-country-row { display: grid; grid-template-columns: 26px 1fr 1fr 40px; align-items: center; gap: 10px; } .admin-country-flag { font-size: 1.2rem; line-height: 1; } .admin-country-name { font-size: 0.85rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-country-count { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-secondary); text-align: right; } / ---- Pages les plus vues ---- / .admin-top-pages-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: admin-page; } .admin-top-pages-list li { counter-increment: admin-page; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.85rem; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); } .admin-top-pages-list li:last-child { border-bottom: none; padding-bottom: 0; } .admin-top-pages-list li::before { content: counter(admin-page); flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--primary-light); color: var(--primary); font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .admin-page-path { flex: 1; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: left; } .admin-page-views { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; } / ---- Tunnel de conversion ---- / .admin-funnel { display: flex; flex-direction: column; gap: 14px; } .admin-funnel-row { display: grid; grid-template-columns: 180px 1fr 56px; align-items: center; gap: 12px; } @media (max-width: 620px) { .admin-funnel-row { grid-template-columns: 1fr; gap: 4px; } } .admin-funnel-label { font-size: 0.85rem; color: var(--text-primary); } .admin-funnel-track { height: 26px; background: var(--surface-subtle); border-radius: var(--radius-sm); overflow: hidden; } .admin-funnel-fill { height: 100%; min-width: fit-content; background: linear-gradient(90deg, var(--primary), var(--primary-hover)); color: #fff; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; padding: 0 10px; border-radius: var(--radius-sm); white-space: nowrap; } .admin-funnel-pct { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-secondary); text-align: right; } .admin-funnel-drop { display: inline-block; margin-left: 8px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: var(--red); background: var(--red-bg); border: 1px solid var(--red); border-radius: 999px; padding: 1px 8px; vertical-align: middle; } / ---- Messages ---- / / overflow-y seul suffit en théorie, mais la spec CSS force le calcul de overflow-x à "auto" dès que overflow-y n'est pas "visible" (voir CSS2.1 §11.1.1) : sans quoi un message contenant une chaîne sans espace (URL collée, texte copié-collé sans retour à la ligne) déborde silencieusement de sa carte et fait apparaître un scroll horizontal sur tout l'onglet. overflow-wrap: anywhere sur .admin-message-body règle la cause (le texte casse proprement dans la carte) plutôt que le symptôme. / .admin-messages-list { display: flex; flex-direction: column; gap: 14px; max-height: 70vh; overflow-y: auto; } .admin-message { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; min-width: 0; } .admin-message-top { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; margin-bottom: 8px; font-size: 0.85rem; } .admin-message-top strong { color: var(--text-primary); } .admin-message-top a { color: var(--primary); overflow-wrap: anywhere; } .admin-message-lang, .admin-message-date { color: var(--text-tertiary); font-size: 0.78rem; } .admin-message-body { margin: 0; color: var(--text-primary); font-size: 0.92rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } .admin-message-page { margin-top: 8px; font-size: 0.76rem; color: var(--text-tertiary); overflow-wrap: anywhere; } .admin-message--unread { border-left: 3px solid var(--primary); background: var(--primary-light); } .admin-message-mark-read { margin-left: auto; } .admin-message-read-tag { margin-left: auto; color: var(--text-tertiary); font-size: 0.78rem; } / ---- Derniers achats confirmés (table `purchases`, voir functions/lib/purchases.js) ---- / .admin-purchases-list { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; } .admin-purchase-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 10px 4px; border-bottom: 1px solid var(--border-soft); font-size: 0.88rem; } .admin-purchase-row:last-child { border-bottom: none; } .admin-purchase-email { color: var(--primary); font-weight: 600; word-break: break-all; } .admin-purchase-amount { font-family: var(--font-mono); color: var(--text-primary); font-weight: 600; } .admin-purchase-date { margin-left: auto; color: var(--text-tertiary); font-size: 0.78rem; } @media (max-width: 480px) { .admin-purchase-date { margin-left: 0; } } / ---- Onglet "Adresses" : liste + formulaire création/édition ---- / .admin-spots-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; } .admin-spots-search { flex: 1 1 220px; font-family: inherit; font-size: 16px; / évite le zoom auto au focus sur iOS Safari / padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-primary); } .admin-spots-filter { font-family: inherit; font-size: 16px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-primary); } .admin-spots-toolbar .btn { flex-shrink: 0; } @media (max-width: 640px) { .admin-spots-toolbar { flex-direction: column; } / .admin-spots-search garde flex:1 1 220px (basis) pour le layout en ligne du desktop : une fois le conteneur passé en colonne ci-dessus, ce basis s'applique à la hauteur au lieu de la largeur et gonfle le champ à 220px de haut. flex:0 0 auto annule ça, width:100% prend le relais. / .admin-spots-search, .admin-spots-filter, .admin-spots-toolbar .btn { flex: 0 0 auto; width: 100%; min-height: 44px; } } / ---------- Onglet admin "Journées" : photo par parcours ---------- / .admin-itineraries-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; } .admin-itin-card { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); } .admin-itin-card .itinerary-media { aspect-ratio: 16 / 9; } .admin-itin-body { padding: 14px 16px 16px; } .admin-itin-body h3 { font-size: 0.98rem; margin-bottom: 2px; } .admin-itin-zone { color: var(--text-tertiary); font-size: 0.8rem; margin-bottom: 12px; } .admin-itin-actions { display: flex; flex-wrap: wrap; gap: 8px; } .admin-itin-upload-btn { cursor: pointer; white-space: nowrap; } .admin-spots-list { display: flex; flex-direction: column; gap: 8px; max-height: 65vh; overflow-y: auto; } / Toute la ligne est un