@charset "UTF-8";/* ========================================================= BOSQWEB — PAGE CONTACT — V6 Niveau de finition aligné sur algovista.finance/contact Grille 2 colonnes / titre deux tons / accent bleu / bouton flèche Palette claire Bosqweb (vs. palette sombre AlgoVista) — mêmes tokens ========================================================= */ /* Polices (si pas déjà chargées par Purity, ajoute ce lien dans le du template plutôt qu'un @import CSS) : */ body.com_contact.view-contact { --nuit:#111A2E; --navy:#1B2A4A; --bleu:#1F5FA8; --bleu-fonce:#164679; --bleu-pale:#EAF1F9; --vert:#3E9A4E; --vert-pale:#F0F7F1; --blanc:#FFFFFF; --bande:#F5F8FB; --trait:#E2E8F0; --trait-fort:#C7D2E0; --gris:#5A6779; --serif:"Playfair Display",Georgia,"Times New Roman",serif; --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; } /* --------------------------------------------------------- PAGE --------------------------------------------------------- */ body.com_contact.view-contact #t4-main-body { padding: 0 !important; background-color: var(--blanc) !important; background-image: linear-gradient(rgba(31,95,168,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(31,95,168,.035) 1px, transparent 1px) !important; background-size: 48px 48px !important; } /* Neutralise une éventuelle grille Bootstrap héritée de Joomla */ body.com_contact.view-contact .contact .row { display: contents !important; } body.com_contact.view-contact .contact [class*="col-"] { width: 100% !important; max-width: 100% !important; float: none !important; padding: 0 !important; } /* --------------------------------------------------------- CONTENEUR — grille 2 colonnes, comme AlgoVista --------------------------------------------------------- */ body.com_contact.view-contact .contact { display: grid !important; grid-template-columns: minmax(280px, 1fr) minmax(340px, 1.15fr) !important; column-gap: 70px !important; row-gap: 0 !important; align-items: start !important; width: min(1120px, calc(100% - 40px)) !important; max-width: 1120px !important; min-height: 0 !important; margin: 0 auto !important; padding: 100px 0 120px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; position: relative !important; overflow: visible !important; font-family: var(--sans) !important; } /* --------------------------------------------------------- COLONNE TEXTE — eyebrow + titre deux tons via ::first-line --------------------------------------------------------- */ body.com_contact.view-contact .contact::before { grid-column: 1 !important; grid-row: 1 !important; order: 1 !important; content: "● BOSQWEB · CONTACT\A\A" "Une question ?\A" "Parlons du problème."; white-space: pre-line !important; display: block !important; margin: 0 0 20px !important; /* style par défaut = 2e ligne du titre (accent) */ color: var(--bleu) !important; font-family: var(--serif) !important; font-style: italic !important; font-weight: 800 !important; letter-spacing: -.02em !important; line-height: 1.18 !important; font-size: clamp(1.9rem, 3.4vw, 2.6rem) !important; } /* la 1re ligne générée (eyebrow) reçoit un style différent */ body.com_contact.view-contact .contact::before::first-line { color: var(--bleu) !important; font-family: var(--mono) !important; font-style: normal !important; font-weight: 500 !important; font-size: 11px !important; letter-spacing: .2em !important; text-transform: uppercase !important; } /* Sous-texte + email — bloc gris sous le titre */ body.com_contact.view-contact .contact::after { grid-column: 1 !important; grid-row: 2 !important; order: 2 !important; content: "Automatisation, intelligence artificielle, données ou systèmes existants : décrivez simplement la situation. Pas besoin de préparer un cahier des charges — une situation concrète suffit.\A\A" "Écrivez-nous directement : support@bosqweb.net"; white-space: pre-line !important; display: block !important; max-width: 42ch !important; margin: 0 !important; color: var(--gris) !important; font-family: var(--sans) !important; font-size: 15px !important; line-height: 1.65 !important; } /* --------------------------------------------------------- FORMULAIRE — carte avec accent bleu en haut, comme AlgoVista --------------------------------------------------------- */ body.com_contact.view-contact .contact-form { grid-column: 2 !important; grid-row: 1 / span 2 !important; order: 3 !important; position: relative !important; display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 40px 42px 42px !important; background: var(--blanc) !important; border: 1px solid var(--trait-fort) !important; border-top: 3px solid var(--bleu) !important; box-shadow: 0 24px 60px rgba(17,26,46,.06) !important; box-sizing: border-box !important; } /* --------------------------------------------------------- RESET JOOMLA --------------------------------------------------------- */ body.com_contact.view-contact .contact-form fieldset { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } body.com_contact.view-contact .contact-form .control-group { display: block !important; width: 100% !important; max-width: none !important; margin: 0 0 20px !important; padding: 0 !important; float: none !important; clear: both !important; } body.com_contact.view-contact .contact-form .controls { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important; } /* --------------------------------------------------------- LABELS --------------------------------------------------------- */ body.com_contact.view-contact .contact-form label { display: block !important; width: auto !important; margin: 0 0 7px !important; color: var(--gris) !important; font-family: var(--mono) !important; font-size: 10.5px !important; font-weight: 500 !important; letter-spacing: .14em !important; text-transform: uppercase !important; float: none !important; } body.com_contact.view-contact .contact-form .star { color: var(--vert) !important; } /* --------------------------------------------------------- CHAMPS --------------------------------------------------------- */ body.com_contact.view-contact .contact-form input[type="text"], body.com_contact.view-contact .contact-form input[type="email"], body.com_contact.view-contact .contact-form input[type="tel"], body.com_contact.view-contact .contact-form input[type="url"], body.com_contact.view-contact .contact-form select, body.com_contact.view-contact .contact-form textarea { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 12px 14px !important; background: var(--bande) !important; border: 1px solid var(--trait-fort) !important; border-radius: 0 !important; color: var(--nuit) !important; font-family: var(--sans) !important; font-size: 15px !important; box-shadow: none !important; box-sizing: border-box !important; transition: border-color .15s ease, background .15s ease !important; } body.com_contact.view-contact .contact-form input[type="text"], body.com_contact.view-contact .contact-form input[type="email"], body.com_contact.view-contact .contact-form input[type="tel"], body.com_contact.view-contact .contact-form input[type="url"], body.com_contact.view-contact .contact-form select { min-height: 46px !important; } body.com_contact.view-contact .contact-form textarea { min-height: 150px !important; resize: vertical !important; } body.com_contact.view-contact .contact-form input:focus, body.com_contact.view-contact .contact-form textarea:focus, body.com_contact.view-contact .contact-form select:focus { outline: none !important; background: var(--blanc) !important; border-color: var(--bleu) !important; } /* --------------------------------------------------------- CAPTCHA --------------------------------------------------------- */ body.com_contact.view-contact .contact-form [class*="captcha"], body.com_contact.view-contact .contact-form .captcha { max-width: 100% !important; float: none !important; } body.com_contact.view-contact .contact-form img { max-width: 100% !important; height: auto !important; } body.com_contact.view-contact .contact-form small, body.com_contact.view-contact .contact-form .form-text, body.com_contact.view-contact .contact-form .controls > p { display: block !important; max-width: 100% !important; margin: 8px 0 0 !important; color: var(--gris) !important; font-family: var(--sans) !important; font-size: 12.5px !important; line-height: 1.5 !important; } /* --------------------------------------------------------- BOUTON — plein largeur, flèche ajoutée, comme AlgoVista --------------------------------------------------------- */ body.com_contact.view-contact .contact-form button.btn, body.com_contact.view-contact .contact-form .btn-primary, body.com_contact.view-contact .contact-form input[type="submit"] { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 52px !important; margin-top: 8px !important; padding: 15px 24px !important; background: var(--bleu) !important; border: 0 !important; border-radius: 0 !important; color: var(--blanc) !important; font-family: var(--mono) !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .14em !important; text-transform: uppercase !important; box-shadow: none !important; transition: background .15s ease !important; } body.com_contact.view-contact .contact-form button.btn::after, body.com_contact.view-contact .contact-form .btn-primary::after, body.com_contact.view-contact .contact-form input[type="submit"]::after { content: " →" !important; } body.com_contact.view-contact .contact-form button.btn:hover, body.com_contact.view-contact .contact-form .btn-primary:hover, body.com_contact.view-contact .contact-form input[type="submit"]:hover { background: var(--bleu-fonce) !important; } /* --------------------------------------------------------- TABLETTE / MOBILE — la grille repasse en 1 colonne, 'order' garantit : titre → sous-texte/email → formulaire --------------------------------------------------------- */ @media (max-width: 900px) { body.com_contact.view-contact .contact { grid-template-columns: 1fr !important; row-gap: 34px !important; width: calc(100% - 36px) !important; padding: 70px 0 80px !important; } body.com_contact.view-contact .contact::before, body.com_contact.view-contact .contact::after, body.com_contact.view-contact .contact-form { grid-column: 1 !important; grid-row: auto !important; } body.com_contact.view-contact .contact::after { max-width: 100% !important; } body.com_contact.view-contact .contact-form { padding: 34px 34px 36px !important; } } @media (max-width: 600px) { body.com_contact.view-contact #t4-main-body { background-size: 32px 32px !important; } body.com_contact.view-contact .contact { width: calc(100% - 28px) !important; padding: 50px 0 60px !important; row-gap: 26px !important; } body.com_contact.view-contact .contact::before { font-size: 1.6rem !important; } body.com_contact.view-contact .contact-form { padding: 28px 22px 26px !important; } body.com_contact.view-contact .contact-form .control-group { margin-bottom: 17px !important; } body.com_contact.view-contact .contact-form input[type="text"], body.com_contact.view-contact .contact-form input[type="email"], body.com_contact.view-contact .contact-form input[type="tel"], body.com_contact.view-contact .contact-form input[type="url"], body.com_contact.view-contact .contact-form select, body.com_contact.view-contact .contact-form textarea { width: 100% !important; font-size: 16px !important; } body.com_contact.view-contact .contact-form textarea { min-height: 140px !important; } }