.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
}
.wpcf7 .hidden-fields-container {
display: none;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}:root { --primary: #2563eb;
--primary-dark: #1d4ed8;
--primary-light: #3b82f6;
--secondary: #0f172a;
--accent: #f59e0b; --text-dark: #1e293b;
--text-medium: #475569;
--text-light: #64748b; --bg-white: #ffffff;
--bg-light: #f8fafc;
--bg-gray: #f1f5f9;
--bg-dark: #0f172a; --border-light: #e2e8f0;
--border-medium: #cbd5e1; --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1); --radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
} body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 16px;
line-height: 1.7;
color: var(--text-dark);
background: var(--bg-light);
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1.3;
color: var(--secondary);
}
h1 { font-size: 2.25rem; margin-bottom: 1rem; }
h2 { font-size: 1.75rem; margin: 2rem 0 1rem; }
h3 { font-size: 1.375rem; margin: 1.5rem 0 0.75rem; } .site-header {
background: var(--bg-white) !important;
border-bottom: 1px solid var(--border-light);
box-shadow: var(--shadow-sm);
position: sticky;
top: 0;
z-index: 1000;
}
.inside-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
max-width: 1400px;
margin: 0 auto;
} .site-branding {
flex-shrink: 0;
}
.site-logo,
.site-title a {
font-weight: 800;
font-size: 1.5rem;
color: var(--secondary) !important;
text-decoration: none;
}
.site-logo:hover,
.site-title a:hover {
color: var(--primary) !important;
}
.custom-logo {
max-height: 45px;
width: auto;
} #site-navigation,
.main-navigation {
display: flex;
align-items: center;
}
.main-navigation .main-nav > ul,
#site-navigation .sf-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 4px;
}
.main-navigation .main-nav > ul > li > a,
#site-navigation .sf-menu > li > a {
color: var(--text-dark) !important;
font-weight: 600;
font-size: 0.95rem;
padding: 10px 16px;
text-decoration: none;
border-radius: var(--radius-md);
transition: all 0.2s;
display: block;
}
.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li.current-menu-item > a,
#site-navigation .sf-menu > li > a:hover,
#site-navigation .sf-menu > li.current-menu-item > a {
color: var(--primary) !important;
background: var(--bg-light);
} .main-navigation .main-nav > ul > li.current-menu-item > a,
#site-navigation .sf-menu > li.current-menu-item > a {
border-bottom: 3px solid var(--primary);
border-radius: var(--radius-md) var(--radius-md) 0 0;
} .main-navigation .main-nav ul ul,
#site-navigation .sf-menu ul {
background: white !important;
min-width: 220px;
box-shadow: var(--shadow-lg);
border-radius: var(--radius-md);
padding: 8px;
border: 1px solid var(--border-light);
}
.main-navigation .main-nav ul ul li a,
#site-navigation .sf-menu ul li a {
padding: 10px 14px !important;
color: var(--text-dark) !important;
font-weight: 500;
border-radius: var(--radius-sm);
}
.main-navigation .main-nav ul ul li a:hover,
#site-navigation .sf-menu ul li a:hover {
background: var(--bg-light) !important;
color: var(--primary) !important;
} .menu-toggle {
display: none;
background: none;
border: none;
padding: 10px;
cursor: pointer;
color: var(--secondary);
}
@media (max-width: 992px) {
.menu-toggle {
display: block;
}
#site-navigation .sf-menu,
.main-navigation .main-nav > ul {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
flex-direction: column;
padding: 16px;
box-shadow: var(--shadow-lg);
z-index: 1000;
}
#site-navigation.toggled .sf-menu,
.main-navigation.toggled .main-nav > ul {
display: flex;
}
#site-navigation .sf-menu > li > a,
.main-navigation .main-nav > ul > li > a {
padding: 14px;
border-bottom: 1px solid var(--border-light);
}
} .site-footer {
background: var(--secondary) !important;
color: rgba(255,255,255,0.8);
margin-top: 60px;
}
.footer-widgets-container,
.inside-footer-widgets {
max-width: 1400px;
margin: 0 auto;
padding: 50px 20px 30px;
}
.footer-widgets-container .inside-footer-widgets {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
}
.footer-widget {
color: rgba(255,255,255,0.8);
}
.footer-widget .widget-title {
color: white !important;
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid var(--primary);
}
.footer-widget p {
line-height: 1.7;
color: rgba(255,255,255,0.7);
}
.footer-widget a {
color: rgba(255,255,255,0.7) !important;
text-decoration: none;
transition: all 0.2s;
}
.footer-widget a:hover {
color: white !important;
}
.footer-widget ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-widget ul li {
margin-bottom: 10px;
}
.footer-widget ul li a {
display: inline-flex;
align-items: center;
gap: 6px;
}
.footer-widget ul li a:hover {
padding-left: 6px;
} .site-info {
background: rgba(0,0,0,0.2);
padding: 20px;
text-align: center;
color: rgba(255,255,255,0.6);
font-size: 0.9rem;
}
.site-info a {
color: var(--accent) !important;
text-decoration: none;
}
.site-info a:hover {
color: white !important;
} .footer-affiliate-disclosure {
background: rgba(255,255,255,0.05);
padding: 16px 20px;
text-align: center;
font-size: 0.85rem;
color: rgba(255,255,255,0.5);
border-top: 1px solid rgba(255,255,255,0.1);
max-width: 1400px;
margin: 0 auto;
}
.footer-affiliate-disclosure a {
color: var(--accent) !important;
} @media (max-width: 768px) {
.footer-widgets-container .inside-footer-widgets {
grid-template-columns: 1fr;
text-align: center;
}
.footer-widget .widget-title {
border-bottom: none;
border-top: 2px solid var(--primary);
padding-top: 10px;
}
} .gv-trending-bar {
background: var(--secondary);
padding: 12px 20px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.gv-trending-inner {
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 16px;
}
.gv-trending-label {
color: var(--accent);
font-weight: 700;
font-size: 0.9rem;
white-space: nowrap;
flex-shrink: 0;
}
.gv-trending-tags {
display: flex;
gap: 10px;
overflow-x: auto;
padding-bottom: 2px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.gv-trending-tags::-webkit-scrollbar {
display: none;
}
.gv-trending-tag {
background: rgba(255,255,255,0.1);
color: white !important;
padding: 6px 14px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
transition: all 0.2s;
border: 1px solid rgba(255,255,255,0.1);
}
.gv-trending-tag:hover {
background: var(--primary);
color: white !important;
border-color: var(--primary);
transform: translateY(-1px);
} .gv-trending-tag.active,
.gv-trending-tag[aria-current="page"] {
background: var(--primary);
border-color: var(--primary);
}
@media (max-width: 768px) {
.gv-trending-bar {
padding: 10px 16px;
}
.gv-trending-inner {
gap: 12px;
}
.gv-trending-label {
font-size: 0.8rem;
}
.gv-trending-tag {
padding: 5px 12px;
font-size: 0.8rem;
}
} .archive-header,
.page-header {
background: var(--bg-light);
padding: 40px 20px;
margin-bottom: 40px;
border-bottom: 1px solid var(--border-light);
}
.archive-title,
.page-title {
font-size: 2rem;
font-weight: 800;
color: var(--secondary);
margin-bottom: 8px;
}
.archive-description,
.taxonomy-description {
color: var(--text-medium);
font-size: 1rem;
max-width: 700px;
} .article-card {
background: var(--bg-white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
}
.article-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.article-card .entry-image {
aspect-ratio: 16/9;
object-fit: cover;
}
.article-card .entry-title {
font-size: 1.125rem;
padding: 1rem;
margin: 0;
}
.article-card .entry-title a {
color: var(--text-dark);
text-decoration: none;
}
.article-card .entry-title a:hover {
color: var(--primary);
} .category-badge {
display: inline-block;
background: var(--primary);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.025em;
}
.category-badge.tech { background: #3b82f6; }
.category-badge.sante { background: #10b981; }
.category-badge.finance { background: #f59e0b; }
.category-badge.gaming { background: #8b5cf6; }
.category-badge.productivite { background: #ec4899; } .single-post .entry-content {
background: var(--bg-white);
padding: 2rem;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.entry-content p {
margin-bottom: 1.25rem;
}
.entry-content ul, .entry-content ol {
margin: 1rem 0 1.5rem 1.5rem;
}
.entry-content li {
margin-bottom: 0.5rem;
}
.entry-content a {
color: var(--primary);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.entry-content a:hover {
color: var(--primary-dark);
} .product-box {
background: linear-gradient(135deg, var(--bg-white) 0%, var(--bg-light) 100%);
border: 2px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 1.5rem;
margin: 2rem 0;
display: flex;
gap: 1.5rem;
align-items: center;
}
.product-box.featured {
border-color: var(--primary);
background: linear-gradient(135deg, #eff6ff 0%, var(--bg-white) 100%);
}
.product-box .product-image {
width: 150px;
height: 150px;
object-fit: contain;
flex-shrink: 0;
}
.product-box .product-info {
flex: 1;
}
.product-box .product-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
color: var(--secondary);
}
.product-box .product-rating {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.product-box .stars {
color: var(--accent);
}
.product-box .rating-score {
font-weight: 700;
color: var(--text-dark);
}
.product-box .product-description {
color: var(--text-medium);
font-size: 0.9rem;
margin-bottom: 1rem;
}
.product-box .product-price {
font-size: 1.5rem;
font-weight: 800;
color: var(--primary);
}
.product-box .btn-affiliate {
display: inline-block;
background: var(--primary);
color: white;
padding: 0.75rem 1.5rem;
border-radius: var(--radius-md);
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
}
.product-box .btn-affiliate:hover {
background: var(--primary-dark);
color: white;
} .comparison-table {
width: 100%;
border-collapse: collapse;
margin: 2rem 0;
background: var(--bg-white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.comparison-table th {
background: var(--secondary);
color: white;
padding: 1rem;
text-align: left;
font-weight: 600;
}
.comparison-table td {
padding: 1rem;
border-bottom: 1px solid var(--border-light);
}
.comparison-table tr:hover {
background: var(--bg-light);
}
.comparison-table .winner {
background: #ecfdf5;
}
.comparison-table .winner td:first-child::before {
content: "🏆 ";
} .score-badge {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: var(--radius-sm);
font-weight: 700;
font-size: 0.875rem;
}
.score-badge.excellent { background: #dcfce7; color: #166534; }
.score-badge.good { background: #fef9c3; color: #854d0e; }
.score-badge.average { background: #fed7aa; color: #9a3412; }
.score-badge.poor { background: #fecaca; color: #991b1b; } .pros-cons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin: 2rem 0;
}
.pros, .cons {
background: var(--bg-white);
border-radius: var(--radius-lg);
padding: 1.5rem;
}
.pros {
border-left: 4px solid #10b981;
}
.cons {
border-left: 4px solid #ef4444;
}
.pros h4, .cons h4 {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 1rem;
font-size: 1rem;
}
.pros h4::before { content: "✅"; }
.cons h4::before { content: "❌"; }
.pros ul, .cons ul {
list-style: none;
margin: 0;
padding: 0;
}
.pros li, .cons li {
padding: 0.5rem 0;
border-bottom: 1px solid var(--border-light);
}
.pros li:last-child, .cons li:last-child {
border-bottom: none;
} .toc-box {
background: var(--bg-light);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 1.5rem;
margin: 1.5rem 0;
}
.toc-box h4 {
margin: 0 0 1rem;
font-size: 1rem;
color: var(--text-dark);
}
.toc-box ol {
margin: 0;
padding-left: 1.25rem;
}
.toc-box li {
margin-bottom: 0.5rem;
}
.toc-box a {
color: var(--text-medium);
text-decoration: none;
}
.toc-box a:hover {
color: var(--primary);
} .widget {
background: var(--bg-white);
border-radius: var(--radius-lg);
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: var(--shadow-sm);
}
.widget-title {
font-size: 1rem;
font-weight: 700;
margin: 0 0 1rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid var(--primary);
} .site-footer {
background: var(--bg-dark);
color: #94a3b8;
padding: 3rem 0 1.5rem;
margin-top: 3rem;
}
.site-footer a {
color: #cbd5e1;
}
.site-footer a:hover {
color: white;
}
.footer-bottom {
border-top: 1px solid #334155;
padding-top: 1.5rem;
margin-top: 2rem;
text-align: center;
font-size: 0.875rem;
} @media (max-width: 768px) {
.product-box {
flex-direction: column;
text-align: center;
}
.pros-cons {
grid-template-columns: 1fr;
}
h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
}  .notice {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 1rem 1.25rem;
border-radius: var(--radius-md);
margin: 1.5rem 0;
font-size: 0.95rem;
}
.notice-icon {
font-size: 1.25rem;
flex-shrink: 0;
}
.notice-info {
background: #eff6ff;
border-left: 4px solid #3b82f6;
color: #1e40af;
}
.notice-warning {
background: #fffbeb;
border-left: 4px solid #f59e0b;
color: #92400e;
}
.notice-success {
background: #ecfdf5;
border-left: 4px solid #10b981;
color: #065f46;
}
.notice-tip {
background: #fdf4ff;
border-left: 4px solid #a855f7;
color: #6b21a8;
} .faq-section {
margin: 2rem 0;
}
.faq-item {
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
margin-bottom: 1rem;
overflow: hidden;
}
.faq-item h3 {
margin: 0;
padding: 1rem 1.25rem;
font-size: 1rem;
font-weight: 600;
background: var(--bg-light);
cursor: pointer;
}
.faq-item h3::before {
content: "❓ ";
}
.faq-item div[itemprop="acceptedAnswer"] {
padding: 1rem 1.25rem;
}
.faq-item p {
margin: 0;
color: var(--text-medium);
} .affiliate-disclosure {
background: var(--bg-light);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
padding: 0.75rem 1rem;
font-size: 0.85rem;
color: var(--text-light);
margin-bottom: 1.5rem;
}
.affiliate-disclosure a {
color: var(--primary);
} .reading-progress {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 3px;
background: var(--primary);
z-index: 9999;
transition: width 0.1s ease;
} .author-box {
display: flex;
gap: 1.5rem;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 1.5rem;
margin: 2rem 0;
}
.author-box .avatar {
width: 80px;
height: 80px;
border-radius: 50%;
flex-shrink: 0;
}
.author-box .author-name {
font-weight: 700;
font-size: 1.125rem;
margin: 0 0 0.5rem;
}
.author-box .author-bio {
color: var(--text-medium);
font-size: 0.9rem;
margin: 0;
} .related-posts {
margin: 3rem 0;
}
.related-posts h3 {
font-size: 1.25rem;
margin-bottom: 1.5rem;
}
.related-posts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
@media (max-width: 768px) {
.related-posts-grid {
grid-template-columns: 1fr;
}
} .text-center { text-align: center; }
.text-primary { color: var(--primary); }
.text-muted { color: var(--text-light); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mt-2 { margin-top: 1rem; }