/* IlikoCar — Overrides v3 Garde-fous minimalistes. landing.css v3 gère tout le reste. Chargé dans le du layout (plus d'injection JS). */ /* Garde-fou anti-défilement horizontal. IMPORTANT : "clip" et non "hidden" — hidden transforme html/body en conteneur de défilement, ce qui CASSE tous les position:sticky descendants (sidebar back-office notamment). clip bloque le débordement sans créer de scrollport. La ligne hidden est conservée en repli pour les très vieux navigateurs. */ html, body { overflow-x: hidden; overflow-x: clip; } /* Compat public : dashboard-pro.css n'est plus chargé sur le site public. Ces règles (auparavant non scopées dans dashboard-pro.css) s'appliquaient aux panneaux des pages publiques (pages statiques, etc.) — on les conserve ici à l'identique, variables inlinées, pour un rendu strictement iso. Sans effet en back-office : valeurs identiques à dashboard-pro.css. */ .dashPanel{background:#fff;border:1px solid #e6edf5;border-radius:22px;box-shadow:0 10px 28px rgba(15,23,42,.055);padding:18px} .panelTitle{margin-bottom:14px} .panelTitle strong{font-size:16px;letter-spacing:-.02em} .panelTitle span{font-size:12px;color:#64748b;font-weight:700} .panelTitle a{font-weight:900;color:#0f4ea4;text-decoration:none} /* Cartes véhicules sur la page résultats de recherche */ .grid[aria-label="Résultats véhicules"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .grid[aria-label="Résultats véhicules"] > .cardLink, .grid[aria-label="Résultats véhicules"] > .card { grid-column: auto !important; } /* Grille 12 colonnes legacy (pages internes) */ .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; } /* Guard KPI vehicle page mobile */ @media (max-width: 640px) { .vehicleHero{height:220px} .bookingHero{height:190px} .table{min-width:520px} [style*="grid-template-columns"] { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; } } /* ═══════════════════════════════════════════════════════════════ IlikoCar — Formulaires premium lisibles Objectif : remplacer les champs trop plats/grisés par de vrais champs lisibles, professionnels et cohérents sur loueur / client / admin. ═══════════════════════════════════════════════════════════════ */ :root{ --ik-form-bg:#ffffff; --ik-form-soft:#f8fafc; --ik-form-border:#d8e1ec; --ik-form-border-strong:#b7c6d8; --ik-form-ink:#0f172a; --ik-form-muted:#64748b; --ik-form-focus:#0b4b85; --ik-form-ring:rgba(14,116,144,.12); } /* Conteneur de champ legacy utilisé dans tout le site */ .field, .formField{ background:var(--ik-form-bg) !important; border:1px solid var(--ik-form-border) !important; border-radius:16px !important; padding:13px 14px !important; box-shadow:0 8px 22px rgba(15,23,42,.035) !important; transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease !important; } .field:hover, .formField:hover{ border-color:var(--ik-form-border-strong) !important; background:#fff !important; } .field:focus-within, .formField:focus-within{ border-color:rgba(14,116,144,.55) !important; box-shadow:0 0 0 4px var(--ik-form-ring), 0 12px 28px rgba(15,23,42,.055) !important; background:#fff !important; } /* Labels plus lisibles */ .label, .formFieldLabel{ display:flex !important; align-items:center !important; gap:7px !important; margin:0 0 8px !important; color:var(--ik-form-muted) !important; font-size:12px !important; line-height:1.2 !important; font-weight:900 !important; text-transform:uppercase !important; letter-spacing:.065em !important; } /* Vrai champ intérieur : fond blanc, bordure visible, texte plus lisible */ .field > .input, .field > input, .field > select, .field > textarea, .formField > input, .formField > select, .formField > textarea, .formField input[type="date"], .formField input[type="text"], .formField input[type="email"], .formField input[type="tel"], .formField input[type="number"], .formField input[type="password"], .formField select, .formField textarea{ width:100% !important; min-height:46px !important; border:1px solid #e2e8f0 !important; border-radius:12px !important; background:#fff !important; color:var(--ik-form-ink) !important; padding:11px 13px !important; font-family:'DM Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important; font-size:15px !important; line-height:1.35 !important; font-weight:750 !important; box-shadow:inset 0 1px 0 rgba(15,23,42,.025) !important; outline:0 !important; appearance:auto !important; -webkit-appearance:auto !important; } .field > textarea, .formField textarea{ min-height:110px !important; resize:vertical !important; } /* Champs .input utilisés hors wrapper .field */ .dashPro .input, .dashLayout .input, body.bo-theme .input, body.loueur-space .input, body.client-space .input, body.admin-space .input{ min-height:46px; border:1px solid #d8e1ec !important; border-radius:12px !important; background:#fff !important; color:var(--ik-form-ink) !important; padding:11px 13px !important; font-family:'DM Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important; font-size:15px !important; line-height:1.35 !important; font-weight:750 !important; box-shadow:inset 0 1px 0 rgba(15,23,42,.025) !important; } .field > .input:focus, .field > input:focus, .field > select:focus, .field > textarea:focus, .formField input:focus, .formField select:focus, .formField textarea:focus, .dashPro .input:focus, .dashLayout .input:focus, body.bo-theme .input:focus, body.loueur-space .input:focus, body.client-space .input:focus, body.admin-space .input:focus{ border-color:rgba(14,116,144,.65) !important; box-shadow:0 0 0 3px rgba(14,116,144,.10), inset 0 1px 0 rgba(15,23,42,.025) !important; } /* Placeholders moins agressifs */ .input::placeholder, .field input::placeholder, .field textarea::placeholder, .formField input::placeholder, .formField textarea::placeholder{ color:#94a3b8 !important; font-weight:650 !important; } /* Selects/date : conservent un comportement natif propre */ select.input, .field > select, .formField select{ cursor:pointer !important; } input[type="date"].input::-webkit-calendar-picker-indicator, .field input[type="date"]::-webkit-calendar-picker-indicator, .formField input[type="date"]::-webkit-calendar-picker-indicator{ opacity:.7 !important; cursor:pointer !important; } /* Aide sous champ */ .field .help, .field .hint, .formField .help, .formField .hint, .field + .hint, .formField + .hint{ color:var(--ik-form-muted) !important; font-size:12px !important; line-height:1.5 !important; font-weight:700 !important; } /* Responsive : champs moins hauts mais toujours lisibles */ @media (max-width: 640px){ .field, .formField{ border-radius:14px !important; padding:12px !important; } .field > .input, .field > input, .field > select, .field > textarea, .formField > input, .formField > select, .formField > textarea, .dashPro .input, .dashLayout .input, body.bo-theme .input, body.loueur-space .input, body.client-space .input, body.admin-space .input{ min-height:44px !important; font-size:15px !important; } } /* Correctif fiche véhicule — dates réservation non coupées sur PC */ .vehicleBookingCard .formDateRow{ display:grid !important; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important; gap:12px !important; align-items:stretch !important; } .vehicleBookingCard .formDateRow .formField{ min-width:0 !important; padding:10px !important; border-radius:18px !important; } .vehicleBookingCard .formDateRow input[type="date"]{ min-width:0 !important; width:100% !important; height:46px !important; min-height:46px !important; padding:10px 8px !important; font-size:14px !important; line-height:1.15 !important; font-weight:850 !important; letter-spacing:-.03em !important; overflow:visible !important; } .vehicleBookingCard .formDateRow input[type="date"]::-webkit-calendar-picker-indicator{ width:18px !important; height:18px !important; padding:0 !important; margin-left:2px !important; opacity:.75 !important; } @media (max-width: 430px){ .vehicleBookingCard .formDateRow{ grid-template-columns:1fr !important; } } /* Correctif recherche — texte des lieux en police normale */ .searchCard .formField select, .searchCard .formField input, .searchFilters .filterField select, .searchFilters .filterField input, .filterField select, .filterField input[type="date"]{ font-weight:500 !important; } .searchCard .formField select option, .searchFilters .filterField select option, .filterField select option{ font-weight:400 !important; } /* Correctif checkout mobile — paiement Stripe responsive */ .checkoutPage, .checkoutPage *{ box-sizing:border-box; min-width:0; } .checkoutPage{ overflow-x:hidden; } .checkoutPage .wrap{ max-width:1180px; overflow-x:clip; } .checkoutPage .checkoutGrid{ display:grid !important; grid-template-columns:minmax(0, 1fr) minmax(340px, .72fr) !important; gap:14px !important; align-items:start !important; width:100% !important; } .checkoutPage .checkoutGrid > .dashPanel, .checkoutPage .checkoutSummaryPanel, .checkoutPage .checkoutPaymentPanel{ grid-column:auto !important; width:100% !important; max-width:100% !important; overflow:hidden !important; } .checkoutPage [data-stripe-checkout], .checkoutPage .checkoutPayForm, .checkoutPage #payForm, .checkoutPage .field, .checkoutPage #card, .checkoutPage .checkoutStripeCard, .checkoutPage .StripeElement, .checkoutPage .__PrivateStripeElement, .checkoutPage .__PrivateStripeElement iframe{ width:100% !important; max-width:100% !important; min-width:0 !important; } .checkoutPage .checkoutStripeCard, .checkoutPage #card{ display:block !important; min-height:44px !important; padding:12px 10px !important; border:1px solid #e2e8f0 !important; border-radius:12px !important; background:#fff !important; overflow:hidden !important; } .checkoutPage #payForm button[type="submit"], .checkoutPage .checkoutPayForm button[type="submit"]{ width:100% !important; max-width:100% !important; min-width:0 !important; justify-content:center !important; white-space:normal !important; line-height:1.25 !important; text-align:center !important; } .checkoutPage .rowItem{ min-width:0 !important; } .checkoutPage .rowItem > *, .checkoutPage .tag, .checkoutPage .status{ min-width:0 !important; max-width:100% !important; overflow-wrap:anywhere !important; } @media (max-width: 860px){ body.client-mobile-public .checkoutPage{ width:100% !important; overflow-x:hidden !important; } body.client-mobile-public .checkoutPage .section{ padding-top:20px !important; padding-bottom:calc(150px + env(safe-area-inset-bottom)) !important; } body.client-mobile-public .checkoutPage .wrap{ width:100% !important; max-width:100% !important; padding-left:14px !important; padding-right:14px !important; overflow-x:hidden !important; } body.client-mobile-public .checkoutPage .pageHead{ display:grid !important; grid-template-columns:1fr !important; gap:12px !important; align-items:start !important; } body.client-mobile-public .checkoutPage .pageHeadActions{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; width:100% !important; } body.client-mobile-public .checkoutPage .pageHeadActions .btn{ width:100% !important; justify-content:center !important; white-space:normal !important; text-align:center !important; min-height:48px !important; } body.client-mobile-public .checkoutPage .checkoutGrid{ grid-template-columns:1fr !important; gap:12px !important; margin-top:12px !important; } body.client-mobile-public .checkoutPage .checkoutGrid > .dashPanel, body.client-mobile-public .checkoutPage .checkoutSummaryPanel, body.client-mobile-public .checkoutPage .checkoutPaymentPanel{ grid-column:1 / -1 !important; width:100% !important; } body.client-mobile-public .checkoutPage .dashPanel{ padding:18px !important; border-radius:22px !important; } body.client-mobile-public .checkoutPage .checkoutPaymentPanel{ order:2; } body.client-mobile-public .checkoutPage .checkoutSummaryPanel{ order:1; } body.client-mobile-public .checkoutPage .field{ padding:12px !important; overflow:hidden !important; } body.client-mobile-public .checkoutPage .checkoutStripeCard, body.client-mobile-public .checkoutPage #card{ min-height:46px !important; padding:12px 10px !important; } body.client-mobile-public .checkoutPage #payForm button[type="submit"], body.client-mobile-public .checkoutPage .checkoutPayForm button[type="submit"]{ min-height:52px !important; padding:14px 16px !important; font-size:15px !important; } } @media (max-width: 430px){ body.client-mobile-public .checkoutPage .pageHeadActions{ grid-template-columns:1fr !important; } body.client-mobile-public .checkoutPage .rowItem{ align-items:flex-start !important; gap:10px !important; } body.client-mobile-public .checkoutPage .tag, body.client-mobile-public .checkoutPage .status{ flex:0 1 auto !important; white-space:normal !important; text-align:center !important; } } /* Checkout — ne pas afficher l'identité du loueur avant validation */ .checkoutPage .checkoutLessorPending .status{ white-space:normal; text-align:center; } /* Correctif anti-débordement — dashboard client mobile */ @media (max-width: 860px){ body.client-space .dashRoleClient, body.client-space .dashRoleClient *{ min-width:0; } body.client-space .dashRoleClient .dashHeroNext{ max-width:100% !important; overflow:hidden !important; } }