/* ============================================================================ Cactis — Pages publiques embarquées en iframe (Module 2) Feuille de style PARTAGÉE par : rdv.html, rdv-affilie.html, suivi.html ---------------------------------------------------------------------------- Principes (maintenance junior-friendly) : - Identité visuelle du site cactis-agency.com : Inter + violet #702A93, pour que l'iframe se FONDE dans la page du site (aucune rupture visuelle, aucun logo Cactis Manager nulle part). - Deux thèmes : sombre (défaut, le site est noir) et clair via ?theme=light dans l'URL de l'iframe (géré en JS : classe .light sur ). - 100% responsive : pensé mobile d'abord, s'adapte à l'espace de l'iframe. - Aucune dépendance externe hors la police Google Fonts. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); :root { /* Identité Cactis (reprise de la charte du site) */ --violet: #702A93; --violet-light: #8c46af; --violet-glow: rgba(112, 42, 147, 0.35); --green: #2f9e6e; --amber: #d98a1f; --red: #d64545; /* Thème sombre (défaut — le site cactis-agency.com est noir) */ --bg: #0c0c0f; --card: #141417; --card-2: #1b1b20; --border: #26262c; --text: #f4f5f7; --text-dim: #cfcfd6; --text-faint: #a6a6ae; } html.light { --bg: #ffffff; --card: #ffffff; --card-2: #f1eef5; --border: #e2e2e8; --text: #101014; --text-dim: #43434c; --text-faint: #74747e; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--bg); } body { font-family: 'Inter', system-ui, sans-serif; color: var(--text); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* En iframe : fond PLEIN suivant le thème (blanc pur en ?theme=light) — rendu identique et prévisible quel que soit le fond du site. Hauteur AUTO forcée + overflow caché : le corps de page ne peut jamais s'étirer à la taille de l'iframe, ce qui rend impossible toute boucle d'agrandissement (la page ne « voit » que son propre contenu). */ /* v5.71 — CORRECTIF (demande validée, capture d'écran à l'appui : calendrier toujours tronqué sur PC malgré le relèvement des plafonds v5.69) — overflow caché signifiait qu'AUCUN moyen d'accéder au contenu au-delà de la hauteur réellement accordée par la page hôte n'existait, quelle qu'en soit la cause (plafond, délai, ou tout simplement comment cette page dimensionne l'iframe — hors de portée d'ici, cette page n'étant pas parmi mes fichiers de travail). overflow-y:auto en filet de secours : SI la page hôte redimensionne bien l'iframe (cas mobile confirmé), tout continue de s'afficher sans le moindre ascenseur, comme avant — SINON, un ascenseur apparaît DANS le widget lui-même plutôt qu'un contenu inaccessible. La mesure de hauteur envoyée à la page hôte (voir cactis-booking.js/ suivi.html) se base sur la taille intrinsèque de .wrap, jamais sur celle de body/fenêtre — aucun risque de boucle de redimensionnement réintroduit. */ html.embedded, html.embedded body { height: auto !important; min-height: 0 !important; max-height: 100vh !important; overflow-y: auto !important; overflow-x: hidden !important; } html.embedded .wrap { padding-bottom: 170px !important; } /* v5.10 — augmenté (110px -> 170px) : le bouton de validation restait rogné sur PC selon la façon dont le site hôte redimensionne l'iframe */ /* Ascenseur discret (uniquement visible si le filet de secours ci-dessus se déclenche réellement) — cohérent avec l'identité violette plutôt que la barre grise brute par défaut du navigateur. */ html.embedded::-webkit-scrollbar, html.embedded body::-webkit-scrollbar { width: 6px; } html.embedded::-webkit-scrollbar-track, html.embedded body::-webkit-scrollbar-track { background: transparent; } html.embedded::-webkit-scrollbar-thumb, html.embedded body::-webkit-scrollbar-thumb { background: var(--violet); border-radius: 999px; } html.embedded { scrollbar-width: thin; scrollbar-color: var(--violet) transparent; } /* Conteneur : centré, avec un périmètre de sécurité tout autour pour que rien ne soit jamais rogné par les bords de l'iframe (ombres des cartes comprises) */ .wrap { max-width: 680px; margin: 0 auto; padding: 14px 16px 28px; } /* Cartes et apparitions douces (impression "moderne et dynamique") */ .card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; animation: fadeUp .35s ease both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } } h1.title { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 4px; } p.subtitle { font-size: 13px; color: var(--text-dim); margin-bottom: 18px; } /* Étapes (1 Créneau — 2 Coordonnées — 3 Confirmation) */ .steps { display: flex; gap: 6px; margin-bottom: 18px; } .steps .step { flex: 1; text-align: center; font-size: 11px; font-weight: 600; color: var(--text-faint); padding: 7px 4px; border-radius: 8px; background: var(--card-2); border: 1px solid var(--border); transition: all .25s ease; } .steps .step.active { color: #fff; background: var(--violet); border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-glow); } .steps .step.done { color: var(--violet-light); border-color: var(--violet); } /* Champs de formulaire */ label { display: block; font-size: 12px; font-weight: 600; color: var(--text-dim); margin: 12px 0 5px; } .input { width: 100%; padding: 11px 13px; font: inherit; font-size: 14px; color: var(--text); background: var(--card-2); border: 1px solid var(--border); border-radius: 10px; outline: none; transition: border-color .2s, box-shadow .2s; } .input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-glow); } .row { display: flex; gap: 10px; } .row > * { flex: 1; } .row .dial { flex: 0 0 92px; } .row .dial-custom { flex: 0 0 92px; } /* Boutons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 18px; margin-top: 16px; font: inherit; font-size: 14.5px; font-weight: 700; color: #fff; background: var(--violet); border: none; border-radius: 10px; cursor: pointer; transition: background .2s, transform .1s; } .btn:hover { background: var(--violet-light); } .btn:active { transform: scale(.985); } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn.ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border); } .btn.ghost:hover { color: var(--text); border-color: var(--text-faint); } /* Messages */ .msg { border-radius: 10px; padding: 12px 15px; font-size: 13.5px; font-weight: 600; text-align: center; margin: 0 0 14px; animation: fadeUp .3s ease both; } .msg + .msg { margin-top: 0; } /* Zone de message en tête de carte : les confirmations/erreurs apparaissent TOUJOURS en haut, bien visibles, jamais perdues sous le formulaire. */ .msg-top:empty { display: none; } .msg.error { background: rgba(214,69,69,.12); border: 1px solid rgba(214,69,69,.4); color: var(--red); } .msg.success { background: rgba(47,158,110,.12); border: 1px solid rgba(47,158,110,.4); color: var(--green); } .msg.info { background: rgba(217,138,31,.10); border: 1px solid rgba(217,138,31,.35); color: var(--amber); } /* ---- Calendrier ---- */ .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .cal-head .month { font-weight: 700; font-size: 14.5px; text-transform: capitalize; } .cal-nav { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--card-2); color: var(--text); border: 1px solid var(--border); border-radius: 9px; cursor: pointer; font-size: 16px; transition: all .2s; } .cal-nav:hover:not(:disabled) { border-color: var(--violet); color: var(--violet-light); } .cal-nav:disabled { opacity: .3; cursor: not-allowed; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .cal-grid .dow { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--text-faint); padding: 4px 0; text-transform: uppercase; } .cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; border-radius: 9px; color: var(--text-faint); background: transparent; border: 1px solid transparent; cursor: default; transition: all .15s ease; } .cal-day.open { color: var(--text); background: var(--card-2); border-color: var(--border); cursor: pointer; } .cal-day.open:hover { border-color: var(--violet); color: var(--violet-light); transform: translateY(-1px); } .cal-day.selected { background: var(--violet); border-color: var(--violet); color: #fff; box-shadow: 0 0 0 3px var(--violet-glow); } /* ---- Créneaux horaires ---- */ .slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; margin-top: 12px; } .slot { padding: 10px 6px; text-align: center; font-size: 13.5px; font-weight: 600; background: var(--card-2); color: var(--text); border: 1px solid var(--border); border-radius: 9px; cursor: pointer; transition: all .15s ease; animation: fadeUp .25s ease both; } .slot:hover { border-color: var(--violet); color: var(--violet-light); } .slot.selected { background: var(--violet); border-color: var(--violet); color: #fff; } /* ---- Cases à cocher canaux de contact ---- */ .channels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; font-size: 13px; font-weight: 600; border-radius: 999px; cursor: pointer; background: var(--card-2); color: var(--text-dim); border: 1px solid var(--border); transition: all .15s ease; user-select: none; } .chip.on { background: var(--violet); border-color: var(--violet); color: #fff; } /* ---- Confirmation ---- */ .confirm-icon { width: 62px; height: 62px; margin: 6px auto 14px; border-radius: 50%; background: rgba(47,158,110,.14); border: 2px solid var(--green); display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--green); animation: pop .5s cubic-bezier(.2,1.4,.4,1) both; } .center { text-align: center; } /* ---- Pipeline de suivi de commande (6 étapes, comme l'app interne) ---- */ .pipeline { display: flex; align-items: flex-start; gap: 0; margin: 18px 0 8px; } .pstage { flex: 1; text-align: center; position: relative; } .pstage .dot { width: 26px; height: 26px; margin: 0 auto 6px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; background: var(--card-2); color: var(--text-faint); border: 2px solid var(--border); transition: all .3s ease; position: relative; z-index: 1; } .pstage.done .dot { background: var(--violet); border-color: var(--violet); color: #fff; } .pstage.current .dot { border-color: var(--violet); color: var(--violet-light); box-shadow: 0 0 0 4px var(--violet-glow); } /* v5.10 — parité avec l'application interne : l'étape Livré, en attente que le client télécharge/récupère, pulse doucement au lieu d'un simple halo fixe. */ .pstage.current .dot { animation: pstagePulse 2.2s ease-in-out infinite; } @keyframes pstagePulse { 0%, 100% { box-shadow: 0 0 0 4px var(--violet-glow); } 50% { box-shadow: 0 0 0 8px rgba(112, 42, 147, 0.12); } } .pstage .lbl { font-size: 10px; font-weight: 600; color: var(--text-faint); line-height: 1.25; } .pstage.done .lbl, .pstage.current .lbl { color: var(--text); } .pstage::before { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: var(--border); z-index: 0; } .pstage:first-child::before { display: none; } .pstage.done::before, .pstage.current::before { background: var(--violet); } /* Ligne récap (suivi) */ .kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; } .kv:last-child { border-bottom: none; } .kv .k { color: var(--text-faint); } .kv .v { font-weight: 600; text-align: right; } /* Étoiles d'avis */ .stars { display: flex; gap: 6px; justify-content: center; margin: 10px 0; } .star { font-size: 26px; cursor: pointer; color: var(--text-faint); transition: transform .1s, color .15s; } .star.on { color: var(--amber); } .star:hover { transform: scale(1.15); } /* Logo (page lien affilié UNIQUEMENT — défini par l'Admin dans les paramètres) */ .brand-logo { display: block; max-height: 54px; max-width: 200px; margin: 0 auto 16px; object-fit: contain; } /* Chargement */ .loader { display: inline-block; width: 18px; height: 18px; border: 2.5px solid var(--violet-glow); border-top-color: var(--violet); border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .center-pad { text-align: center; padding: 26px 0; color: var(--text-faint); font-size: 13px; } @media (max-width: 420px) { .wrap { padding: 14px 10px 26px; } .card { padding: 15px; } .row { flex-direction: column; gap: 0; } .row .dial { flex: 1; } .pstage .lbl { font-size: 8.5px; } } /* ---- Champs obligatoires (comportement V1 demandé) -------------------------- .req-empty : champ requis vide/incorrect → bordure rouge qui CLIGNOTE .req-ok : champ requis correctement rempli → bordure VERTE (validation visuelle immédiate, meilleure expérience de saisie) */ .input.req-empty { border-color: var(--red); animation: reqBlink 1.15s ease-in-out infinite; } .input.req-ok { border-color: var(--green); box-shadow: 0 0 0 2px rgba(47,158,110,.14); } @keyframes reqBlink { 0%, 100% { box-shadow: 0 0 0 0 rgba(214,69,69,0); } 50% { box-shadow: 0 0 0 3px rgba(214,69,69,.28); } } /* Groupe des canaux de contact : même logique (aucun canal choisi → clignote) */ .channels.req-empty { border: 1px dashed var(--red); border-radius: 12px; padding: 8px; animation: reqBlink 1.15s ease-in-out infinite; } .channels.req-ok { border: 1px solid var(--green); border-radius: 12px; padding: 8px; } /* ---- v5.9 — Suivi de commande : actualiser / re-tirer un avis / appel doux -- Réutilise --violet-glow (déjà défini, jamais utilisé jusqu'ici) pour une pulsation DOUCE et non agressive sur le bouton d'avis. */ .btn-refresh { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; cursor: pointer; background: var(--card-2); border: 1px solid var(--border); color: var(--text-dim); font-size: 16px; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; } .btn-refresh:hover { background: var(--border); color: var(--text); } .btn-refresh.spinning { animation: spin .7s linear infinite; } .btn-dice { background: transparent; border: none; color: var(--violet-light); cursor: pointer; font-size: 11.5px; padding: 2px 4px; white-space: nowrap; } .btn-dice:hover { text-decoration: underline; } @keyframes cactisPulseSoft { 0%, 100% { box-shadow: 0 0 0 0 var(--violet-glow); transform: scale(1); } 50% { box-shadow: 0 0 0 9px rgba(112, 42, 147, 0); transform: scale(1.015); } } .btn-pulse { animation: cactisPulseSoft 2.2s ease-in-out infinite; } /* ---- Puzzle glissant anti-robot (v5.69, demande validée) -------------------- Prévu à l'origine pour ce formulaire de suivi de commande (oublié lors de l'implémentation initiale) — même esthétique moderne que celui du formulaire brochure sur cactis-agency.com (dégradés, lueur pulsante sur la cible, halo qui s'intensifie pendant le glissement). */ .puzzle-track { position: relative; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--card-2), var(--bg)); border: 1px solid var(--border); box-shadow: inset 0 2px 6px rgba(0,0,0,.25); overflow: hidden; user-select: none; touch-action: none; cursor: grab; margin-top: 4px; } .puzzle-track.dragging { cursor: grabbing; } .puzzle-target { position: absolute; top: 5px; width: 26px; height: 38px; border-radius: 7px; background: var(--violet-glow); border: 1.5px dashed var(--violet-light); animation: puzzleGlow 1.8s ease-in-out infinite; } @keyframes puzzleGlow { 0%, 100% { box-shadow: 0 0 0 0 var(--violet-glow); } 50% { box-shadow: 0 0 10px 3px var(--violet-glow); } } .puzzle-progress { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(112,42,147,0), rgba(140,70,175,.28)); } .puzzle-progress.ok { background: linear-gradient(90deg, rgba(47,158,110,0), rgba(47,158,110,.25)); } .puzzle-cursor { position: absolute; top: 4px; width: 44px; height: 40px; border-radius: 9px; background: linear-gradient(135deg, var(--violet-light), var(--violet)); display: flex; align-items: center; justify-content: center; gap: 3px; box-shadow: 0 3px 10px rgba(0,0,0,.35); transition: left .2s ease, box-shadow .2s ease, background .3s ease; } .puzzle-track.dragging .puzzle-cursor { transition: box-shadow .2s ease, background .3s ease; box-shadow: 0 4px 16px rgba(0,0,0,.4), 0 0 14px 4px var(--violet-glow); } .puzzle-cursor.ok { background: linear-gradient(135deg, #39FF8A, var(--green)); animation: puzzleBurst .5s ease; } @keyframes puzzleBurst { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } } .puzzle-cursor span { width: 2.5px; height: 16px; background: rgba(255,255,255,.9); border-radius: 2px; } .puzzle-hint { font-size: 12px; font-weight: 600; color: var(--text-dim); margin: 12px 0 6px; } .puzzle-fail { font-size: 12px; color: var(--red); margin-top: 5px; display: none; } .puzzle-fail.on { display: block; }