.form-section h2,
.contact-form h2,
.form-title {
color: #005fa3 !important;
} .paiement-grid {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 40px;
}
.paiement-row {
display: flex;
gap: 20px;
}
.paiement-row:first-child {
justify-content: flex-start;
}
.paiement-row:last-child {
justify-content: flex-start;
}
.paiement-row .payment-card {
flex: 1;
min-width: 280px;
max-width: 500px;
}
.paiement-row:last-child .paiement-bancaire {
max-width: 500px;
}
@media (max-width: 900px) {
.paiement-row {
flex-direction: column;
}
}  .logo-section {
text-align: center;
margin: 8px auto 18px auto;
max-width: 1200px;
padding: 0 15px;
}
.homepage-logo {
max-width: 472px;
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
background-color: rgba(255, 255, 255, 0.9);
padding: 6px;
display: block;
margin: 0 auto;
object-fit: contain;
object-position: center;
box-sizing: border-box;
}
.welcome-title {
font-size: 40px;
background: linear-gradient(to bottom, #001f3f, #005fa3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 10px 0 6px 0;
text-align: center;
font-weight: 700;
position: relative;
line-height: 1.18;
}
.welcome-title::after {
content: "Réparation informatique à Lévis";
position: absolute;
top: 100%;
left: 0;
right: 0;
background: linear-gradient(to bottom, rgba(0, 119, 204, 0.5), transparent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transform: scaleY(-1);
opacity: 0.6;
z-index: -1;
} .intro-content {
background-color: rgba(255, 255, 255, 0.95);
border-radius: 10px;
padding: 32px;
margin-top: 16px;
box-shadow: 0 3px 12px rgba(0,0,0,0.08);
border: 1px solid rgba(0, 95, 163, 0.12);
}
.intro-text {
max-width: 980px;
margin: 0 auto;
line-height: 1.75;
color: #2f2f2f;
}
.intro-text-secondary {
margin: 18px auto 2px auto;
max-width: 980px;
text-align: center;
font-size: 1.05em;
font-weight: 600;
line-height: 1.55;
color: #2b4f70;
} .services-list {
list-style: disc;
padding: 0;
margin: 18px auto 20px auto;
max-width: 720px;
text-align: left;
padding-left: 24px;
}
.services-list li {
margin-bottom: 11px;
font-weight: 600;
text-align: left;
color: #333;
font-size: 17px;
line-height: 1.5;
} @media (max-width: 768px) {
.intro-text {
font-size: 1.1em;
padding: 0 20px;
}
} .background-image {
width: calc(100% + 80px);
position: relative;
left: -40px;
margin-top: 20px;
margin-bottom: 20px;
max-width: calc(1200px + 80px);
margin-left: auto;
margin-right: auto;
}
.homepage-background {
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
display: block;
opacity: 0.4;
} .overlay-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 600px;
z-index: 10;
padding: 30px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
color: white;
font-weight: 600;
} body {
background: url(//clic-informatique.ca/wp-content/themes/clic-informatique/images/fond02.webp?v=20251029) center/cover no-repeat fixed;
min-height: 100vh;
margin: 0;
padding: 0;
}
html {
height: 100%;
} body.home .main-content, body.page-template-index .main-content, body .main-content {
background-color: rgba(255, 255, 255, 0.95);
border-radius: 8px;
padding: 20px;
margin: 20px auto;
max-width: 1200px;
position: relative;
z-index: 10;
} .background-image, .container, .page-title, .service-cards-container, .main-content, header, footer {
position: relative;
} .paiement-title {
color: #005fa3 !important;
border-bottom: 3px solid #005fa3;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}  html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, ul, li, form, input, textarea, select, button {
margin: 0;
padding: 0;
}
html {
font-size: 16px;
line-height: 1.6;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color: #333333;
background-color: #f8f9fa;
line-height: 1.6;
} .page-title {
color: #005fa3;
font-size: 28px;
margin-bottom: 20px;
text-align: center;
padding: 20px;
background-color: #ffffff;
border-bottom: 3px solid #005fa3;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.page-content {
max-width: 1200px;
margin: 0 auto 30px auto;
padding: 20px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
font-size: 18px;
line-height: 1.7;
} .section-title {
color: #005fa3;
font-size: 24px;
font-weight: bold;
margin: 40px auto 30px auto;
text-align: center;
max-width: 1200px;
padding: 0 20px 15px 20px;
border-bottom: 2px solid #005fa3;
position: relative;
}
.section-title:first-of-type {
margin-top: 20px;
} .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
} .site-header {
background: transparent;
color: #ffffff;
padding: 0;
}
.header-topbar {
background: linear-gradient(rgba(0, 26, 56, 0.68), rgba(0, 26, 56, 0.68)),
url(//clic-informatique.ca/wp-content/themes/clic-informatique/images/fond02.webp?v=20251029) center/cover no-repeat #001a38;
}
.header-topbar-inner {
max-width: 1200px;
margin: 0 auto;
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(8px, 1.1vw, 16px);
flex-wrap: nowrap;
}
.logo {
display: flex;
align-items: center;
text-decoration: none;
flex-shrink: 0;
margin-right: clamp(9px, 1.25vw, 17px);
}
.logo-image {
height: clamp(64px, 8.5vw, 104px);
width: auto;
display: block;
}
.header-sep {
flex: 0 0 1px;
width: 1px;
height: 64px;
align-self: center;
background: linear-gradient(to bottom, rgba(232, 92, 12, 0) 0%, rgba(232, 92, 12, 0.72) 25%, #ff8a28 50%, rgba(232, 92, 12, 0.72) 75%, rgba(232, 92, 12, 0) 100%);
box-shadow: 0 0 4px rgba(232, 92, 12, 0.24);
}
.header-info {
display: flex;
align-items: center;
gap: 14px;
flex: 0 0 auto;
white-space: nowrap;
}
.header-info-phone {
gap: 8px;
margin-left: clamp(3px, 0.75vw, 11px);
}
.header-info-phone .header-info-icon {
align-self: flex-start;
height: calc(clamp(18px, 1.9vw, 24px) * 1.15);
margin-left: 6px;
}
.header-info-icon {
color: #e85c0c;
flex-shrink: 0;
display: flex;
align-items: center;
align-self: center;
}
.header-info-icon svg {
display: block;
width: clamp(22px, 2.2vw, 28px);
height: clamp(22px, 2.2vw, 28px);
}
.header-info-text {
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1.3;
}
.header-info-main {
color: #ffffff;
font-weight: 700;
font-size: clamp(14px, 1.5vw, 18px);
text-decoration: none;
white-space: nowrap;
}
.header-info-phone .header-info-text {
gap: 3px;
}
.header-info-phone .header-info-main {
font-size: clamp(18px, 1.9vw, 24px);
line-height: 1.15;
}
a.header-info-main:hover {
text-decoration: underline;
}
.header-info-sub {
display: flex;
align-items: center;
gap: 6px;
color: rgba(255, 255, 255, 0.8);
font-size: clamp(11px, 1.2vw, 15px);
line-height: 1.25;
white-space: nowrap;
}
.header-info-pickup {
display: block;
width: 100%;
color: rgba(255, 255, 255, 0.8);
font-size: clamp(11px, 1.2vw, 15px);
line-height: 1.25;
text-align: center;
white-space: nowrap;
}
.header-info-phone .header-info-sub {
font-size: clamp(12px, 1.25vw, 15px);
}
.header-icon-inline {
display: block;
width: 1.15em;
height: 1.15em;
flex-shrink: 0;
color: #e85c0c;
}
.social-icons {
display: flex;
align-items: center;
gap: clamp(8px, 1vw, 14px);
flex-wrap: nowrap;
flex-shrink: 0;
}
.social-icons img {
height: clamp(32px, 3.4vw, 40px);
width: clamp(32px, 3.4vw, 40px);
vertical-align: middle;
}
@media (max-width: 960px) {
.header-topbar-inner {
justify-content: center;
text-align: center;
padding: 12px 16px;
flex-wrap: wrap;
gap: 10px 0;
}
.header-sep {
display: none;
}
.logo {
width: 100%;
justify-content: center;
margin-right: 0;
}
.logo-image {
height: 56px;
}
.header-info,
.header-info-phone {
flex: 0 1 auto;
margin-left: 0;
padding: 0 14px;
}
.social-icons {
width: 100%;
justify-content: center;
}
} .header-navbar {
--nav-pad: clamp(12px, 1.5vw, 20px);
background-color: #04224a;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.header-navbar-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
align-items: center;
gap: 24px;
}
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 32px;
height: 32px;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
}
.nav-toggle-bar {
display: block;
width: 100%;
height: 2px;
background-color: #ffffff;
}
.main-nav {
flex: 1;
max-width: 760px;
}
.main-nav > ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: stretch;
justify-content: space-between;
flex-wrap: wrap;
}
.header-navbar .nav-item {
position: relative;
display: flex;
align-items: center;
}
.header-navbar .nav-item > a,
.header-navbar .nav-item > button.nav-link-dropdown {
display: flex;
align-items: center;
gap: 5px;
color: #ffffff;
text-decoration: none;
font-size: 15px;
font-weight: 600;
padding: 16px var(--nav-pad);
background: transparent;
border: none;
cursor: pointer;
font-family: inherit;
border-bottom: 3px solid transparent;
transition: color 0.2s, border-color 0.2s;
}
.header-navbar .nav-item > a:hover,
.header-navbar .nav-item > button.nav-link-dropdown:hover {
color: #ffd9ad;
}
.header-navbar .nav-item > .nav-link-dropdown {
gap: 2px;
}
.header-navbar .nav-item.is-active > a {
position: relative;
}
.header-navbar .nav-item.is-active > a::after {
content: "";
position: absolute;
left: calc(var(--nav-pad) - 11px);
right: calc(var(--nav-pad) - 11px);
bottom: 3px;
height: 3px;
border-radius: 2px;
background: linear-gradient(to right, rgba(232, 92, 12, 0) 0%, rgba(232, 92, 12, 0.82) 24%, #ff8a28 46%, #ffd36a 50%, #ff8a28 54%, rgba(232, 92, 12, 0.82) 76%, rgba(232, 92, 12, 0) 100%);
box-shadow: 0 0 6px rgba(255, 111, 26, 0.42), 0 0 12px rgba(232, 92, 12, 0.18);
}
.nav-item-icon {
color: #e85c0c;
flex-shrink: 0;
}
.nav-caret {
width: 20px;
height: 20px;
flex-shrink: 0;
transition: transform 0.2s;
}
.nav-item-dropdown.is-open > .nav-link-dropdown .nav-caret,
.nav-item-dropdown:hover > .nav-link-dropdown .nav-caret,
.nav-item-dropdown:focus-within > .nav-link-dropdown .nav-caret {
transform: rotate(180deg);
}
.nav-submenu {
list-style: none;
margin: 0;
padding: 8px 0;
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background-color: #ffffff;
border-radius: 0 0 8px 8px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
display: none;
z-index: 100;
}
.nav-item-dropdown.is-open > .nav-submenu,
.nav-item-dropdown:hover > .nav-submenu,
.nav-item-dropdown:focus-within > .nav-submenu {
display: block;
}
.nav-submenu li {
display: block;
}
.nav-submenu a {
display: block;
padding: 10px 18px;
color: #04224a;
text-decoration: none;
font-size: 14px;
font-weight: 500;
}
.nav-submenu a:hover {
background-color: #f2f6fa;
color: #e85c0c;
}
.btn-demande-service {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
background-color: #e85c0c;
color: #ffffff;
text-decoration: none;
font-weight: 700;
font-size: 14px;
padding: 11px 18px;
border-radius: 8px;
white-space: nowrap;
transition: background-color 0.2s;
}
.btn-demande-service:hover {
background-color: #ff7a00;
}
@media (max-width: 900px) {
.nav-toggle {
display: flex;
}
.header-navbar-inner {
flex-wrap: wrap;
padding: 10px 16px;
}
.main-nav {
flex-basis: 100%;
max-width: none;
order: 3;
display: none;
}
.main-nav.is-open {
display: block;
}
.main-nav > ul {
flex-direction: column;
}
.header-navbar .nav-item {
width: 100%;
flex-direction: column;
align-items: stretch;
}
.header-navbar .nav-item > a,
.header-navbar .nav-item > button.nav-link-dropdown {
width: 100%;
padding: 12px 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.header-navbar .nav-item.is-active > a {
border-bottom-color: rgba(255, 255, 255, 0.08);
border-left: 3px solid #e85c0c;
}
.header-navbar .nav-item.is-active > a::after {
display: none;
}
.nav-submenu {
position: static;
width: 100%;
min-width: 0;
padding: 0;
box-shadow: none;
border-radius: 0;
background-color: rgba(255, 255, 255, 0.05);
display: none;
}
.nav-item-dropdown:hover > .nav-link-dropdown .nav-caret,
.nav-item-dropdown:focus-within > .nav-link-dropdown .nav-caret {
transform: none;
}
.nav-item-dropdown.is-open > .nav-link-dropdown .nav-caret {
transform: rotate(180deg);
}
.main-nav .nav-submenu li {
margin-bottom: 0;
}
.nav-item-dropdown:hover > .nav-submenu,
.nav-item-dropdown:focus-within > .nav-submenu {
display: none;
}
.nav-item-dropdown.is-open > .nav-submenu {
display: block;
}
.nav-submenu a {
color: #ffffff;
padding: 10px 10px 10px 28px;
}
.nav-submenu a:hover {
background-color: rgba(255, 255, 255, 0.08);
color: #ffd9ad;
}
.btn-demande-service {
order: 2;
margin: 0 auto;
}
} .main-content {
max-width: 1200px;
margin: 30px auto;
padding: 0 15px;
}
.page-title {
font-size: 36px;
color: #005fa3;
margin-bottom: 30px;
text-align: center;
}
.page-content {
background-color: #ffffff;
padding: 30px;
border-radius: 8px;
margin-bottom: 30px;
} .services-container {
margin: 30px auto;
max-width: 1200px;
padding: 0 20px;
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: space-between;
}
.service-card {
background-color: #f9f9f9;
color: #333;
padding: 25px;
border-radius: 8px;
margin-bottom: 20px;
flex: 1;
min-width: 300px;
max-width: calc(50% - 10px);
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid #e0e0e0;
} .services-container .service-card:only-child {
max-width: 100%;
flex: 1 1 100%;
}
.service-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.service-title {
color: #005fa3;
margin-bottom: 15px;
font-size: 18px;
font-weight: bold;
text-align: center;
}
.price {
font-size: 24px;
font-weight: bold;
color: #005fa3;
margin: 15px 0;
text-align: center;
}
.service-description {
color: #666;
line-height: 1.6;
margin-bottom: 15px;
text-align: center;
font-style: italic;
font-size: 14px;
} .service-card ul {
list-style: none;
padding-left: 0;
margin: 15px 0;
text-align: left;
}
.service-card li {
padding: 8px 0;
position: relative;
padding-left: 20px;
color: #333;
margin-bottom: 8px;
}
.service-card li:before {
content: "✓";
color: #005fa3;
font-weight: bold;
position: absolute;
left: 0;
}
.service-card li:last-child {
margin-bottom: 0;
} @media (max-width: 768px) {
.services-container {
flex-direction: column;
}
.service-card {
max-width: 100%;
min-width: 100%;
}
} .contact-cta {
background: #005fa3;
color: white;
padding: 40px;
border-radius: 8px;
margin: 40px auto;
max-width: 1200px;
text-align: center;
box-shadow: 0 4px 15px rgba(0, 119, 204, 0.3);
}
.contact-cta h2 {
color: white;
margin-bottom: 20px;
font-size: 24px;
}
.contact-cta p {
margin-bottom: 25px;
font-size: 16px;
line-height: 1.6;
}
.cta-button {
display: inline-block;
background: white;
color: #005fa3;
padding: 15px 30px;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
font-size: 16px;
transition: all 0.3s ease;
}
.cta-button:hover {
background: #f0f0f0;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
} .contact-form {
background-color: #ffffff;
padding: 30px;
border-radius: 8px;
max-width: 600px;
margin: 30px auto;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #2c3e50;
}
.form-input,
.form-textarea,
.form-select {
display: block;
padding: 12px;
border: 1px solid #dddddd;
border-radius: 4px;
font-size: 16px;
font-family: Arial, sans-serif; }
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
outline: none;
border-color: #3498db;
}
.form-textarea {
min-height: 120px;
resize: vertical;
} .btn {
display: inline-block;
padding: 12px 24px;
background-color: #3498db;
color: #ffffff;
text-decoration: none;
border-radius: 4px;
border: none;
cursor: pointer;
font-size: 16px;
font-family: Arial, sans-serif;
}
.btn:hover {
background-color: #2980b9;
color: #ffffff;
text-decoration: none;
} .pricing-table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
background-color: #ffffff;
border-radius: 8px;
overflow: hidden;
}
.pricing-table th,
.pricing-table td {
padding: 15px;
text-align: left;
border-bottom: 1px solid #eeeeee;
}
.pricing-table th {
background-color: #2c3e50;
color: #ffffff;
font-weight: 600;
}
.pricing-table .price {
font-weight: bold;
color: #3498db;
} .site-footer {
background-color: #04224a;
color: #ffffff;
text-align: center;
padding: 30px 0;
margin-top: 60px;
}
.site-footer a {
color: #ffffff;
text-decoration: none;
}
.site-footer a:hover {
color: #ffffff;
text-decoration: underline;
} @media screen and (max-width: 768px) {
.main-nav li {
display: block;
margin-right: 0;
margin-bottom: 10px;
}
.page-title {
font-size: 28px;
}
.contact-form {
margin: 15px;
padding: 15px;
}
.form-input,
.form-textarea,
.form-select {
width: 100%;
max-width: 400px;
}
.service-card,
.page-content {
padding: 15px;
}
}
@media screen and (max-width: 480px) {
.page-title {
font-size: 24px;
}
.main-content {
padding: 0 10px;
}
.form-input,
.form-textarea,
.form-select {
width: 100%;
max-width: 280px;
}
.btn {
width: 100%;
text-align: center;
}
} .paiement-grid {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 40px;
}
.paiement-row {
display: flex;
gap: 20px;
}
.paiement-row:first-child {
justify-content: flex-start;
}
.paiement-row:last-child {
justify-content: flex-start;
}
.paiement-row .service-card {
flex: 1;
min-width: 280px;
max-width: 500px;
}
.paiement-row:last-child .paiement-bancaire {
max-width: 500px;
}
.service-card-spacer {
flex: 1;
min-width: 280px;
}
@media (max-width: 900px) {
.paiement-row {
flex-direction: column;
}
.service-card-spacer {
display: none;
}
} .payment-form {
background: #f0f8ff;
border: 2px solid #005fa3;
border-radius: 8px;
padding: 25px;
margin: 30px auto;
max-width: 600px;
}
.form-title {
color: #005fa3;
font-size: 20px;
margin-bottom: 20px;
text-align: center;
font-weight: bold;
}
.form-grid {
display: grid;
gap: 15px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-group.full-width {
grid-column: 1 / -1;
}
.form-group label {
font-weight: bold;
margin-bottom: 5px;
color: #333;
text-align: left;
}
.form-group input,
.form-group select {
padding: 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
font-family: inherit;
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: #005fa3;
box-shadow: 0 0 5px rgba(0, 119, 204, 0.3);
}
.price-input {
display: flex;
align-items: center;
gap: 10px;
}
.currency {
background: #005fa3;
color: white;
padding: 12px 15px;
border-radius: 4px;
font-weight: bold;
}
.submit-btn {
background: #005fa3;
color: white;
padding: 15px 30px;
border: none;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 15px;
width: 100%;
}
.submit-btn:hover {
background: #005fa3;
transform: translateY(-2px);
}
.security-note {
background: #fffacd;
border: 1px solid #ffd700;
border-radius: 5px;
padding: 15px;
margin: 20px auto;
text-align: center;
max-width: 600px;
}
.security-note p {
margin: 0;
font-size: 14px;
color: #666;
} @media (max-width: 768px) {
.form-row {
grid-template-columns: 1fr;
}
.payment-form {
padding: 20px;
margin: 20px 15px;
}
.price-input {
flex-direction: column;
align-items: stretch;
}
} .payment-online-card {
max-width: 100% !important;
flex: 1 1 100% !important;
}
.payment-online-card .form-grid {
display: grid;
gap: 15px;
margin-top: 20px;
}
.payment-online-card .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.payment-online-card .form-group {
display: flex;
flex-direction: column;
}
.payment-online-card .form-group.full-width {
grid-column: 1 / -1;
}
.payment-online-card label {
font-weight: bold;
margin-bottom: 5px;
color: #005fa3;
text-align: left;
font-size: 14px;
}
.payment-online-card input,
.payment-online-card select {
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
font-family: inherit;
}
.payment-online-card input:focus,
.payment-online-card select:focus {
outline: none;
border-color: #005fa3;
box-shadow: 0 0 5px rgba(0, 119, 204, 0.3);
}
.payment-online-card .price-input {
display: flex;
align-items: center;
gap: 10px;
}
.payment-online-card .currency {
background: #005fa3;
color: white;
padding: 10px 12px;
border-radius: 4px;
font-weight: bold;
font-size: 14px;
}
.payment-online-card .submit-btn {
background: #005fa3;
color: white;
padding: 12px 25px;
border: none;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 15px;
width: 100%;
}
.payment-online-card .submit-btn:hover {
background: #005fa3;
transform: translateY(-2px);
}
.security-note-inline {
background: #fffacd;
border: 1px solid #ffd700;
border-radius: 5px;
padding: 12px;
margin-top: 20px;
text-align: center;
}
.security-note-inline p {
margin: 0;
font-size: 13px;
color: #666;
} @media (max-width: 768px) {
.payment-online-card .form-row {
grid-template-columns: 1fr;
}
.payment-online-card .price-input {
flex-direction: column;
align-items: stretch;
}
}  .about-cards-container {
display: flex;
gap: 30px;
margin: 40px 0;
flex-wrap: wrap;
} .about-card {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
padding: 30px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.about-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
} .about-content-card {
flex: 2;
min-width: 300px;
} .about-photo-card {
flex: 1;
min-width: 250px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: flex-start;
} .about-image {
margin-bottom: 20px;
} .sylvain-photo {
width: 100%;
max-width: 300px;
height: auto;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
transition: transform 0.3s ease;
}
.sylvain-photo:hover {
transform: scale(1.05);
} .photo-caption {
margin-top: 15px;
font-size: 18px;
font-weight: bold;
color: #005fa3;
text-align: center;
} .education-list {
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
border-left: 4px solid #005fa3;
margin: 20px 0;
}
.education-list li {
margin-bottom: 8px;
color: #333;
} .highlight-box {
background: linear-gradient(135deg, #005fa3, #004d99);
color: white;
padding: 20px;
border-radius: 12px;
text-align: center;
margin: 30px 0;
box-shadow: 0 4px 15px rgba(0,119,204,0.3);
}
.highlight-box p {
margin: 0;
font-size: 18px;
} .faq-section {
margin-top: 50px;
}
.faq-section h2 {
color: #005fa3;
font-size: 32px;
margin-bottom: 30px;
text-align: center;
}
.faq-item {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
margin-bottom: 20px;
overflow: hidden;
transition: transform 0.3s ease;
}
.faq-item:hover {
transform: translateY(-2px);
}
.faq-question {
background: #005fa3;
color: white;
padding: 20px;
margin: 0;
font-size: 20px;
font-weight: bold;
} .repair-page .faq-question {
background: transparent !important;
color: #005fa3 !important;
padding: 0 !important;
}
.faq-answer {
padding: 25px;
}
.faq-answer p {
margin-bottom: 15px;
line-height: 1.6;
}
.faq-answer p:last-child {
margin-bottom: 0;
} @media (max-width: 768px) {
.about-cards-container {
flex-direction: column;
gap: 20px;
}
.about-content-card,
.about-photo-card {
flex: 1;
min-width: auto;
}
.sylvain-photo {
max-width: 250px;
}
} @media (max-width: 480px) {
.about-card {
padding: 20px;
}
.faq-question {
padding: 15px;
font-size: 18px;
}
.faq-answer {
padding: 20px;
}
.highlight-box {
padding: 15px;
}
.highlight-box p {
font-size: 16px;
}
}  .contact-layout {
display: flex;
gap: 30px;
margin: 40px 0;
flex-wrap: wrap;
} .contact-info {
flex: 1;
min-width: 300px;
} .contact-card {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
padding: 30px;
margin-bottom: 20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contact-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.contact-card h3 {
color: #005fa3;
font-size: 24px;
margin-bottom: 20px;
border-bottom: 2px solid #e0e0e0;
padding-bottom: 10px;
}
.contact-card p {
margin-bottom: 10px;
line-height: 1.6;
} .signature-photo {
width: 100%;
max-width: 250px;
height: auto;
border-radius: 12px;
margin: 15px auto;
display: block;
box-shadow: 0 4px 15px rgba(0,0,0,0.15);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.signature-photo:hover {
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(0,0,0,0.2);
} .important-card {
background: linear-gradient(135deg, #ff6b6b, #ee5a24);
border-radius: 12px;
box-shadow: 0 6px 20px rgba(255,107,107,0.3);
overflow: hidden;
margin-bottom: 20px;
animation: pulse-border 3s infinite;
}
@keyframes pulse-border {
0%, 100% { box-shadow: 0 6px 20px rgba(255,107,107,0.3); }
50% { box-shadow: 0 8px 25px rgba(255,107,107,0.5); }
}
.important-header {
background: rgba(0,0,0,0.1);
padding: 15px 20px;
display: flex;
align-items: center;
gap: 10px;
}
.important-header h3 {
color: white;
margin: 0;
font-size: 20px;
font-weight: bold;
}
.warning-icon {
font-size: 24px;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-10px); }
60% { transform: translateY(-5px); }
}
.important-content {
padding: 20px;
color: white;
}
.important-content p {
margin-bottom: 15px;
font-weight: 500;
} .anydesk-download {
margin: 20px 0;
text-align: center;
}
.download-btn {
display: inline-block;
background: #ffffff;
color: #333;
padding: 15px 25px;
border-radius: 8px;
text-decoration: none;
font-weight: bold;
font-size: 16px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
.download-btn:hover {
background: #f0f0f0;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.download-icon {
margin-right: 8px;
font-size: 18px;
}
.note {
font-style: italic;
font-size: 14px;
opacity: 0.9;
} .form-section {
flex: 2;
min-width: 400px;
} .form-title {
text-align: center;
margin-bottom: 30px;
padding: 25px;
background: linear-gradient(135deg, #005fa3, #004d99);
color: white;
border-radius: 15px;
box-shadow: 0 6px 20px rgba(0,119,204,0.3);
}
.form-title-main {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-bottom: 15px;
}
.form-icon {
font-size: 2em;
filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}
.form-title-text {
font-size: 26px;
font-weight: bold;
margin: 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.form-title-sub {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 18px;
opacity: 0.95;
font-style: italic;
}
.service-icon {
font-size: 1.3em;
filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));
} .success-message {
background: linear-gradient(135deg, #28a745, #20c997);
color: white;
padding: 30px;
border-radius: 12px;
margin-bottom: 30px;
box-shadow: 0 4px 15px rgba(40,167,69,0.3);
}
.success-message h3 {
margin-top: 0;
font-size: 24px;
}
.error-message {
background: linear-gradient(135deg, #dc3545, #c82333);
color: white;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
box-shadow: 0 4px 15px rgba(220,53,69,0.3);
} .success-details {
background: rgba(255,255,255,0.1);
padding: 20px;
border-radius: 8px;
margin: 20px 0;
}
.recap-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
margin: 15px 0;
}
.recap-item {
background: rgba(255,255,255,0.1);
padding: 10px;
border-radius: 6px;
border-left: 3px solid white;
}
.recap-item-full {
background: rgba(255,255,255,0.1);
padding: 15px;
border-radius: 6px;
margin-top: 15px;
} .next-steps {
background: rgba(255,255,255,0.1);
padding: 20px;
border-radius: 8px;
margin: 20px 0;
}
.next-steps ul {
margin: 10px 0;
padding-left: 20px;
}
.next-steps li {
margin-bottom: 8px;
} .new-request-section {
text-align: center;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.3);
}
.new-request-btn {
background: #ffffff;
color: #28a745;
border: none;
padding: 12px 25px;
border-radius: 8px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.new-request-btn:hover {
background: #f8f9fa;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.new-request-note {
margin-top: 10px;
font-size: 14px;
opacity: 0.8;
} .contact-form {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
padding: 30px;
margin-bottom: 30px;
}
.form-row {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.form-group {
flex: 1;
margin-bottom: 20px;
}
.form-group.full-width {
flex: none;
width: 100%;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #333;
font-size: 16px;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 12px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 18px;
font-family: inherit;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
box-sizing: border-box;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #005fa3;
box-shadow: 0 0 0 3px rgba(0,119,204,0.1);
}
.form-group textarea {
min-height: 120px;
resize: vertical;
} .submit-btn {
background: linear-gradient(135deg, #005fa3, #004d99);
color: white;
border: none;
padding: 15px 40px;
border-radius: 8px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
box-shadow: 0 4px 15px rgba(0,119,204,0.3);
}
.submit-btn:hover {
background: linear-gradient(135deg, #0066b3, #003d80);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,119,204,0.4);
} .privacy-notice {
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
margin-top: 20px;
border-left: 4px solid #005fa3;
}
.privacy-notice a {
color: #005fa3;
text-decoration: none;
}
.privacy-notice a:hover {
text-decoration: underline;
} .form-response-info {
background: #fff3cd;
border: 1px solid #ffeaa7;
border-radius: 8px;
padding: 15px;
margin-top: 20px;
text-align: center;
} @media (max-width: 768px) {
.contact-layout {
flex-direction: column;
gap: 20px;
}
.contact-info,
.form-section {
flex: none;
min-width: auto;
}
.form-row {
flex-direction: column;
gap: 0;
}
.form-group {
margin-bottom: 20px;
}
.recap-grid {
grid-template-columns: 1fr;
}
} @media (max-width: 480px) {
.contact-card,
.contact-form {
padding: 20px;
}
.form-title {
padding: 20px;
}
.form-title-text {
font-size: 22px;
}
.form-title-sub {
font-size: 16px;
}
.important-content {
padding: 15px;
}
.download-btn {
padding: 12px 20px;
font-size: 14px;
}
}  body.home .main-content {
max-width: none;
margin: 0;
padding: 0;
background: none;
border-radius: 0;
} .home-hero-legacy {
box-sizing: border-box;
width: calc(100% - 30px);
max-width: 1160px;
margin: 24px auto;
padding: 20px;
background-color: rgba(255, 255, 255, 0.95);
border-radius: 8px;
position: relative;
z-index: 10;
}
.home-hero-section {
--home-hero-photo-w: 49%;
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
align-items: center;
min-height: clamp(360px, 36vw, 520px);
color: #ffffff;
background:
radial-gradient(60% 95% at 88% 35%, rgba(26, 104, 214, 0.38), rgba(26, 104, 214, 0) 70%),
linear-gradient(90deg, rgba(1, 20, 52, 0.97) 0%, rgba(3, 32, 78, 0.90) 60%, rgba(4, 38, 92, 0.86) 100%),
url(//clic-informatique.ca/wp-content/themes/clic-informatique/images/fond02.webp?v=20251029) center/cover no-repeat,
#021a40;
}
.home-hero-media {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: var(--home-hero-photo-w);
z-index: -1;
clip-path: polygon(0 0, 75% 0, 100% 100%, 0 100%);
}
.home-hero-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(2, 26, 64, 0) 65%, rgba(2, 26, 64, 0.5) 100%);
}
.home-hero-photo {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 10% center;
}
.home-hero-content {
box-sizing: border-box;
flex: 1 1 0;
min-width: 0;
max-width: 760px;
margin-left: calc(var(--home-hero-photo-w) + 2%);
padding: clamp(28px, 4vw, 56px) clamp(20px, 6vw, 90px) clamp(28px, 4vw, 56px) 0;
}
.home-anniversary-image {
display: none;
position: absolute;
z-index: 1;
top: 50%;
right: clamp(24px, calc(24.5vw - 400px), 240px);
width: clamp(180px, 12vw, 240px);
height: auto;
object-fit: contain;
transform: translateY(-50%);
}
@media (min-width: 1920px) {
.home-anniversary-image {
display: block;
}
}
.home-hero-eyebrow {
margin: 0 0 14px;
color: #4fc3f7;
font-size: clamp(11px, 1.15vw, 14px);
font-weight: 700;
letter-spacing: 0.14em;
line-height: 1.5;
}
.home-hero-title {
margin: 0;
color: #ffffff;
font-size: clamp(2.1rem, 4.2vw, 3.4rem);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.01em;
}
.home-hero-subtitle {
margin: 10px 0 0;
color: #ffffff;
font-size: clamp(1.15rem, 2.45vw, 2rem);
font-weight: 700;
line-height: 1.2;
}
.home-hero-accent {
display: block;
color: #ff6a13;
}
.home-hero-text {
max-width: 30em;
margin: 18px 0 28px;
color: rgba(255, 255, 255, 0.88);
font-size: clamp(1rem, 1.7vw, 1.3rem);
line-height: 1.55;
}
.home-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.home-hero-btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
min-height: 52px;
padding: 12px 26px;
border: 1.5px solid transparent;
border-radius: 10px;
color: #ffffff;
font-size: clamp(0.95rem, 1.35vw, 1.1rem);
font-weight: 700;
line-height: 1.2;
text-decoration: none;
transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}
.home-hero-btn:hover {
transform: translateY(-1px);
}
.home-hero-btn:focus-visible {
outline: 3px solid #ffd9ad;
outline-offset: 3px;
}
.home-hero-btn-primary {
background: linear-gradient(180deg, #1f7aff, #0b5be0);
border-color: rgba(255, 255, 255, 0.18);
box-shadow: 0 6px 18px rgba(11, 91, 224, 0.35);
}
.home-hero-btn-primary:hover {
background: linear-gradient(180deg, #3a8cff, #1668ee);
}
.home-hero-btn-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex-shrink: 0;
border-radius: 50%;
background-color: #ffffff;
color: #0b5be0;
}
.home-hero-btn-secondary {
background-color: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.75);
}
.home-hero-btn-secondary:hover {
background-color: rgba(255, 255, 255, 0.12);
border-color: #ffffff;
} @media (max-width: 1024px) {
.home-hero-section {
--home-hero-photo-w: 44%;
}
.home-hero-content {
margin-left: calc(var(--home-hero-photo-w) + 3%);
padding-right: 24px;
}
} @media (max-width: 820px) {
.home-hero-section {
display: block;
min-height: 0;
}
.home-hero-media {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
max-height: 340px;
z-index: 0;
clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}
.home-hero-media::after {
background: linear-gradient(180deg, rgba(2, 26, 64, 0) 60%, rgba(2, 26, 64, 0.55) 100%);
}
.home-hero-content {
max-width: none;
margin-left: 0;
padding: 22px 20px 36px;
}
.home-hero-text {
max-width: 36em;
}
}
@media (max-width: 520px) {
.home-hero-actions {
flex-direction: column;
}
.home-hero-btn {
width: 100%;
}
} .home-services-section {
position: relative;
padding: clamp(36px, 5vw, 64px) 0;
color: #ffffff;
border-top: 1px solid rgba(80, 150, 230, 0.25);
background:
linear-gradient(180deg, rgba(3, 26, 64, 0.94) 0%, rgba(2, 18, 47, 0.97) 100%),
url(//clic-informatique.ca/wp-content/themes/clic-informatique/images/fond02.webp?v=20251029) center/cover no-repeat,
#021a40;
}
.home-services-inner {
box-sizing: border-box;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.home-services-sr {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.home-services-list {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: clamp(14px, 2.2vw, 30px);
margin: 0;
padding: 0;
list-style: none;
}
.home-services-item {
display: flex;
margin: 0;
padding: 0;
}
.home-services-card {
box-sizing: border-box;
display: flex;
flex: 1 1 auto;
flex-direction: column;
align-items: center;
gap: 18px;
min-height: 200px;
padding: 30px 16px 28px;
color: #ffffff;
text-align: center;
text-decoration: none;
background: linear-gradient(180deg, rgba(14, 52, 118, 0.55), rgba(6, 30, 76, 0.78));
border: 1px solid rgba(60, 140, 230, 0.35);
border-radius: 14px;
transition: border-color 0.2s, background-color 0.2s, transform 0.2s;
}
a.home-services-card:hover {
border-color: rgba(76, 211, 255, 0.7);
transform: translateY(-2px);
}
a.home-services-card:focus-visible {
outline: 3px solid #ffd9ad;
outline-offset: 3px;
}
.home-services-icon {
display: block;
flex-shrink: 0;
width: 52px;
height: 52px;
color: #4cd3ff;
filter: drop-shadow(0 0 6px rgba(76, 211, 255, 0.35));
}
.home-services-title {
margin: 0;
color: #ffffff;
font-size: clamp(1rem, 1.35vw, 1.2rem);
font-weight: 700;
line-height: 1.3;
} @media (max-width: 1100px) {
.home-services-list {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.home-services-item {
grid-column: span 2;
}
.home-services-item:nth-child(4) {
grid-column: 2 / span 2;
}
.home-services-item:nth-child(5) {
grid-column: 4 / span 2;
}
} @media (max-width: 700px) {
.home-services-list {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.home-services-item:nth-child(4) {
grid-column: span 2;
}
.home-services-item:nth-child(5) {
grid-column: 2 / span 2;
}
} @media (max-width: 420px) {
.home-services-list {
grid-template-columns: minmax(0, 1fr);
}
.home-services-item:nth-child(n) {
grid-column: auto;
}
.home-services-card {
flex-direction: row;
gap: 16px;
min-height: 72px;
padding: 16px 18px;
text-align: left;
}
.home-services-icon {
width: 44px;
height: 44px;
}
}  .home-trust-section {
position: relative;
padding: clamp(36px, 4.5vw, 64px) 0 clamp(36px, 5vw, 72px);
background: #ffffff;
}
.home-trust-inner {
box-sizing: border-box;
max-width: 1440px;
margin: 0 auto;
padding: 0 20px;
}
.home-trust-grid {
display: grid;
grid-template-columns: minmax(0, 2.35fr) minmax(370px, 1fr);
gap: clamp(20px, 2.6vw, 36px);
align-items: start;
} .home-trust-panel {
box-sizing: border-box;
display: grid;
grid-template-columns: minmax(auto, 1.1fr) minmax(0, 1fr);
gap: clamp(22px, 3vw, 40px);
align-items: center;
padding: clamp(24px, 3vw, 40px);
color: #ffffff;
background: linear-gradient(135deg, #04224a 0%, #021233 100%);
border: 1px solid rgba(60, 140, 230, 0.3);
border-radius: 16px;
box-shadow: 0 14px 26px rgba(0, 20, 50, 0.36), 0 34px 64px rgba(0, 20, 50, 0.44);
}
.home-trust-title {
margin: 0 0 16px;
color: #ffffff;
font-size: clamp(1.5rem, 2.4vw, 2.1rem);
font-weight: 800;
line-height: 1.2;
}
.home-trust-text {
margin: 0 0 26px;
color: rgba(255, 255, 255, 0.88);
font-size: clamp(1rem, 1.35vw, 1.15rem);
line-height: 1.65;
}
.home-trust-btn {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
width: 100%;
min-height: 54px;
padding: 12px 22px;
color: #ffffff;
font-size: clamp(0.95rem, 1.25vw, 1.05rem);
font-weight: 700;
line-height: 1.2;
text-align: center;
text-decoration: none;
background: linear-gradient(180deg, #1f7aff, #0b5be0);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 10px;
box-shadow: 0 6px 18px rgba(11, 91, 224, 0.35);
transition: background 0.2s, transform 0.2s;
}
.home-trust-btn:hover {
background: linear-gradient(180deg, #3a8cff, #1668ee);
transform: translateY(-1px);
}
.home-trust-btn:focus-visible {
outline: 3px solid #ffd9ad;
outline-offset: 3px;
} @media (min-width: 821px) {
.home-trust-btn {
gap: 12px;
padding-right: 18px;
padding-left: 18px;
}
.home-trust-btn > span:first-child {
white-space: nowrap;
}
}
.home-trust-btn-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 28px;
height: 28px;
color: #0b5be0;
background-color: #ffffff;
border-radius: 50%;
}
.home-trust-benefits {
box-sizing: border-box;
margin: 0;
padding: 6px clamp(16px, 2vw, 26px);
list-style: none;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(60, 140, 230, 0.22);
border-radius: 12px;
}
.home-trust-benefit {
display: flex;
align-items: center;
gap: 16px;
margin: 0;
padding: 15px 0;
border-bottom: 1px solid rgba(76, 140, 230, 0.28);
}
.home-trust-benefit:last-child {
border-bottom: 0;
}
.home-trust-icon {
display: block;
flex-shrink: 0;
width: 36px;
height: 36px;
color: #4cd3ff;
filter: drop-shadow(0 0 5px rgba(76, 211, 255, 0.3));
}
.home-trust-benefit-label {
color: #ffffff;
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
line-height: 1.35;
}
@media (min-width: 1200px) {
.home-trust-grid {
gap: clamp(40px, 5.2vw, 72px);
}
.home-trust-panel {
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
}
.home-trust-benefits {
padding-right: 14px;
padding-left: 14px;
}
.home-trust-benefit {
gap: 14px;
}
} .home-trust-steps-card {
box-sizing: border-box;
padding: clamp(22px, 2.6vw, 32px);
color: #04224a;
background: #ffffff;
border: 1px solid #dbe5f2;
border-radius: 14px;
box-shadow: 0 14px 26px rgba(0, 20, 50, 0.32), 0 34px 64px rgba(0, 20, 50, 0.40);
}
.home-trust-steps-title {
margin: 0 0 8px;
color: #04224a;
font-size: clamp(1.05rem, 1.55vw, 1.25rem);
font-weight: 800;
line-height: 1.25;
}
.home-trust-steps {
margin: 0;
padding: 0;
list-style: none;
}
.home-trust-step {
display: grid;
grid-template-columns: 44px 28px minmax(0, 1fr);
column-gap: 14px;
align-items: start;
margin: 0;
padding: 18px 0;
border-bottom: 1px solid #e3eaf4;
}
.home-trust-step:last-child {
padding-bottom: 4px;
border-bottom: 0;
}
.home-trust-step-icon {
display: block;
width: 44px;
height: 44px;
color: #1f7aff;
}
.home-trust-step-num {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
margin-top: 2px;
color: #ffffff;
font-size: 0.9rem;
font-weight: 700;
line-height: 1;
background: #1f7aff;
border-radius: 50%;
}
.home-trust-step-title {
margin: 0 0 4px;
color: #04224a;
font-size: clamp(1rem, 1.3vw, 1.1rem);
font-weight: 700;
line-height: 1.3;
}
.home-trust-step-text {
margin: 0;
color: #4a5b75;
font-size: clamp(0.92rem, 1.15vw, 1rem);
line-height: 1.5;
} @media (max-width: 1199px) {
.home-trust-grid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (min-width: 960px) and (max-width: 1100px) {
.home-trust-steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 24px;
}
.home-trust-step {
padding: 14px 0 4px;
border-bottom: 0;
}
} @media (max-width: 820px) {
.home-trust-panel {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 480px) {
.home-trust-inner {
padding: 0 14px;
}
.home-trust-panel {
padding: 22px 18px;
}
.home-trust-btn {
padding: 12px 16px;
}
.home-trust-step {
grid-template-columns: 36px 26px minmax(0, 1fr);
column-gap: 10px;
}
.home-trust-step-icon {
width: 36px;
height: 36px;
}
.home-trust-step-num {
width: 26px;
height: 26px;
}
} .home-reviews-section {
padding: 0 0 clamp(36px, 4.5vw, 64px);
background: #ffffff;
}
.home-reviews-inner {
box-sizing: border-box;
max-width: 1228px;
margin: 0 auto;
padding: 0 20px;
}
.home-reviews-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 8px 24px;
margin-bottom: clamp(16px, 2vw, 24px);
}
.home-reviews-title {
margin: 0;
color: #04224a;
font-size: clamp(1.4rem, 2.2vw, 1.9rem);
font-weight: 800;
line-height: 1.2;
}
.home-reviews-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: #1f7aff;
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
font-weight: 700;
text-decoration: none;
}
.home-reviews-link:hover {
text-decoration: underline;
}
.home-reviews-link:focus-visible {
outline: 3px solid #ffd9ad;
outline-offset: 3px;
border-radius: 4px;
}
.home-reviews-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(16px, 2.2vw, 28px);
}
@media (min-width: 1001px) {
.home-reviews-list {
gap: clamp(32px, 4.4vw, 56px);
}
}
.home-reviews-card {
box-sizing: border-box;
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
column-gap: clamp(16px, 2vw, 28px);
align-items: center;
margin: 0;
padding: clamp(22px, 2.6vw, 32px);
background: #ffffff;
border: 1px solid #e3eaf4;
border-radius: 12px;
box-shadow: 0 14px 26px rgba(0, 20, 50, 0.32), 0 34px 64px rgba(0, 20, 50, 0.40);
}
.home-reviews-quote-icon {
display: block;
width: 48px;
height: auto;
color: #1f7aff;
}
.home-reviews-stars {
display: flex;
gap: 4px;
margin-bottom: 10px;
color: #ff6a13;
}
.home-reviews-quote {
margin: 0;
padding: 0;
border: 0;
color: #04224a;
font-size: clamp(1rem, 1.35vw, 1.15rem);
line-height: 1.55;
}
.home-reviews-quote p {
margin: 0;
}
.home-reviews-author {
margin: 10px 0 0;
color: #4a5b75;
font-size: clamp(0.92rem, 1.1vw, 1rem);
} .home-reviews-card--placeholder {
border-style: dashed;
border-color: #c5d3e6;
box-shadow: none;
}
.home-reviews-card--placeholder .home-reviews-quote,
.home-reviews-card--placeholder .home-reviews-author {
color: #6b7c96;
font-style: italic;
}
.home-reviews-card--placeholder .home-reviews-quote-icon {
opacity: 0.45;
} @media (max-width: 1000px) {
.home-reviews-card {
grid-template-columns: 40px minmax(0, 1fr);
padding: 20px;
}
.home-reviews-quote-icon {
width: 40px;
}
} @media (max-width: 700px) {
.home-reviews-list {
grid-template-columns: minmax(0, 1fr);
}
.home-reviews-head {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 480px) {
.home-reviews-inner {
padding: 0 14px;
}
.home-reviews-card {
grid-template-columns: 32px minmax(0, 1fr);
column-gap: 14px;
padding: 18px 16px;
}
.home-reviews-quote-icon {
width: 32px;
}
}  .home-cta-section {
padding: clamp(28px, 3.5vw, 44px) 0;
color: #ffffff;
background: #04224a;
}
.home-cta-inner {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px clamp(18px, 3vw, 36px);
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.home-cta-icon {
display: block;
flex-shrink: 0;
width: 56px;
height: 56px;
color: #ffffff;
}
.home-cta-text {
flex: 1 1 260px;
min-width: 0;
}
.home-cta-title {
margin: 0 0 4px;
color: #ffffff;
font-size: clamp(1.5rem, 2.6vw, 2.1rem);
font-weight: 800;
line-height: 1.2;
}
.home-cta-lead {
margin: 0;
color: rgba(255, 255, 255, 0.92);
font-size: clamp(1rem, 1.5vw, 1.2rem);
line-height: 1.5;
}
.home-cta-btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-shrink: 0;
min-height: 54px;
padding: 12px 28px;
color: #ffffff;
font-size: clamp(1rem, 1.3vw, 1.1rem);
font-weight: 700;
line-height: 1.2;
text-align: center;
text-decoration: none;
background: #e85c0c;
border-radius: 10px;
transition: background-color 0.2s, transform 0.2s;
}
.home-cta-btn:hover {
background: #c94f08;
transform: translateY(-1px);
}
.home-cta-btn:focus-visible {
outline: 3px solid #ffd9ad;
outline-offset: 3px;
} .home-note-section {
padding: clamp(14px, 1.8vw, 20px) 0;
color: #04224a;
background: #eef2f7;
}
.home-note-inner {
box-sizing: border-box;
display: flex;
align-items: center;
gap: 16px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.home-note-icon {
display: block;
flex-shrink: 0;
width: 28px;
height: 28px;
color: #1f7aff;
}
.home-note-text {
flex: 1 1 auto;
min-width: 0;
margin: 0;
font-size: clamp(0.95rem, 1.25vw, 1.05rem);
line-height: 1.55;
}
.home-note-label {
font-weight: 800;
}
@media (min-width: 701px) {
.home-cta-btn {
white-space: nowrap;
}
} @media (max-width: 700px) {
.home-cta-inner {
padding: 0 16px;
}
.home-cta-icon {
width: 44px;
height: 44px;
}
.home-cta-btn {
flex: 1 1 100%;
width: 100%;
}
.home-note-inner {
padding: 0 16px;
gap: 12px;
}
}