/**
* Word-HTML Theme - Complete Stylesheet
*
* Design System: TikTok Sans (titres) / Inter (texte)
* Primary: #16404b (dark teal)
* Background: #fff3e9 (warm cream) for secondary
* Accent: #e2ff5e (lime green)
*
* @package Word_HTML
*/
/* ========================
CSS Custom Properties
======================== */
:root {
/* Primary Colors */
--primary: #16404b;
--primary-rgb: 22, 64, 75;
--primary-dark: #0f2d35;
--primary-light: #1a5a6b;
--secondary: #fff3e9;
--secondary-rgb: 255, 243, 233;
--tertiary: #e2ff5e;
--tertiary-rgb: 226, 255, 94;
--quaternary: #d4d7c2;
--gray: #45454c;
/* Backgrounds */
--background: #ffffff;
--background-alt: #f8f9fa;
--background-dark: #0a0a0a;
--foreground: #171717;
/* Text Colors */
--text-dark: #1a1a1a;
--text-body: #4a4a4a;
--text-muted: #6b7280;
--text-light: #9ca3af;
/* Layout */
--container-max: 1320px;
--section-spacing: 100px;
--section-spacing-sm: 60px;
/* Typography Scale */
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
--font-size-5xl: 3rem;
--font-size-6xl: 3.75rem;
/* Border Radius */
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-2xl: 1.5rem;
--radius-3xl: 2rem;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
/* Transitions */
--transition-fast: 150ms;
--transition-normal: 250ms;
--transition-slow: 350ms;
}
/* ========================
Reset & Base
======================== */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
/* ========================
Polices
========================
Les titres passent de Lexend a TikTok Sans, publiee par ByteDance sous
licence SIL OFL 1.1 en juillet 2025 (licence jointe dans assets/fonts/).
C'est la meme famille que celle de reel.farm, dont le rendu des titres
servait de reference : plus resserree et plus grasse que Lexend, qui etait
large et arrondi.
Fichier variable et heberge par nos soins : un seul telechargement de 117 Ko
couvre toutes les graisses de 300 a 900, sans requete vers Google. L'axe
`opsz` fait le reste — la meme police se resserre d'elle-meme dans un gros
titre et s'ouvre dans un petit texte.
Le corps de texte reste en Inter, exactement comme chez eux. */
@font-face {
font-family: 'TikTok Sans';
src: url('../fonts/TikTokSans-variable-latin.woff2') format('woff2-variations'),
url('../fonts/TikTokSans-variable-latin.woff2') format('woff2');
font-weight: 300 900;
font-style: normal;
font-display: swap;
}
body {
background: var(--background);
color: var(--text-body);
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: var(--font-size-base);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--primary);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--primary-dark);
}
/* ========================
Typography
======================== */
h1, h2, h3, h4, h5, h6 {
font-family: 'TikTok Sans', 'Inter', system-ui, sans-serif;
font-weight: 700;
line-height: 1.2;
/* Chasse resserree et interligne court : c'est ce qui donne aux titres de
reel.farm leur aspect compact. Lexend etait large, on gagne en densite. */
letter-spacing: -0.025em;
font-optical-sizing: auto;
color: var(--text-dark);
}
/* Les tres gros titres se resserrent encore : a 56 px, un interligne de 1,2
ouvre des rivieres blanches entre les lignes. */
h1, h2 {
line-height: 1.08;
}
h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 800;
letter-spacing: -0.03em;
}
h2 {
font-size: clamp(2rem, 4.5vw, 3.25rem);
font-weight: 700;
}
h3 {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 600;
}
h4 {
font-size: clamp(1.25rem, 2vw, 1.5rem);
font-weight: 600;
}
p {
font-size: var(--font-size-lg);
line-height: 1.75;
color: var(--text-body);
}
.lead {
font-size: var(--font-size-xl);
line-height: 1.6;
}
.wh-text-primary {
color: var(--primary);
}
.wh-text-muted {
color: var(--text-muted);
font-size: var(--font-size-sm);
}
/* ========================
Container
======================== */
.container {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 24px;
}
@media (min-width: 640px) {
.container { padding: 0 32px; }
}
@media (min-width: 1024px) {
.container { padding: 0 48px; }
}
/* ========================
Section
======================== */
.section {
padding: var(--section-spacing) 0;
}
@media (max-width: 1023px) {
.section { padding: var(--section-spacing-sm) 0; }
}
@media (max-width: 640px) {
.section { padding: 48px 0; }
}
.wh-bg-white { background: #ffffff; }
.wh-bg-gray { background: #f8f9fa; }
.wh-bg-secondary { background: var(--secondary); }
/* ========================
Buttons
======================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 32px;
font-family: 'TikTok Sans', 'Inter', sans-serif;
font-size: var(--font-size-base);
font-weight: 600;
line-height: 1;
text-decoration: none;
border-radius: var(--radius-full);
border: 2px solid transparent;
cursor: pointer;
transition: all var(--transition-normal) ease;
white-space: nowrap;
}
.btn-lg {
padding: 20px 40px;
font-size: var(--font-size-lg);
}
.btn-sm {
padding: 10px 20px;
font-size: var(--font-size-sm);
}
.btn-primary {
background: var(--primary);
color: white;
border-color: var(--primary);
}
.btn-primary:hover {
background: var(--primary-dark);
border-color: var(--primary-dark);
color: white;
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(22, 64, 75, 0.35);
}
.btn-secondary {
background: var(--secondary);
color: var(--primary);
border-color: var(--secondary);
}
.btn-secondary:hover {
background: #ffe4d1;
border-color: #ffe4d1;
color: var(--primary);
}
.btn-tertiary {
background: var(--tertiary);
color: var(--primary);
border-color: var(--tertiary);
}
.btn-tertiary:hover {
background: #d4f24f;
border-color: #d4f24f;
color: var(--primary);
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(226, 255, 94, 0.4);
}
.btn-outline {
background: transparent;
border: 2px solid var(--primary);
color: var(--primary);
}
.btn-outline:hover {
background: var(--primary);
color: white;
}
.btn-white {
background: white;
color: var(--primary);
border-color: white;
}
.btn-white:hover {
background: var(--secondary);
border-color: var(--secondary);
color: var(--primary);
}
/* ========================
Badges
======================== */
.badge {
display: inline-flex;
align-items: center;
padding: 8px 16px;
font-size: var(--font-size-xs);
font-weight: 700;
border-radius: var(--radius-full);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.badge-primary {
background: var(--primary);
color: white;
}
.badge-secondary {
background: var(--secondary);
color: var(--primary);
}
.badge-success {
background: #10b981;
color: white;
}
.badge-new {
background: #10b981;
color: white;
font-size: 10px;
padding: 4px 10px;
}
.badge-popular {
background: #f59e0b;
color: white;
font-size: 10px;
padding: 4px 10px;
}
/* ========================
Cards
======================== */
.card {
background: white;
border-radius: var(--radius-2xl);
padding: 32px;
transition: all var(--transition-normal) ease;
border: 1px solid transparent;
}
.card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
}
/* Feature Card */
.feature-card {
background: var(--secondary);
border-radius: var(--radius-3xl);
padding: 48px 40px;
text-align: center;
transition: all var(--transition-normal) ease;
}
.feature-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
}
.feature-card-icon {
width: 80px;
height: 80px;
background: var(--primary);
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
color: white;
}
.feature-card h3 {
font-size: var(--font-size-2xl);
margin-bottom: 16px;
}
.feature-card p {
font-size: var(--font-size-base);
color: var(--text-muted);
}
/* Tool Card */
.tool-card {
background: white;
border-radius: var(--radius-2xl);
padding: 24px;
border: 2px solid #e5e7eb;
display: flex;
align-items: center;
gap: 20px;
text-decoration: none;
color: inherit;
transition: all var(--transition-normal) ease;
}
.tool-card:hover {
border-color: var(--primary);
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
color: inherit;
}
.tool-card-icon {
width: 64px;
height: 64px;
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.tool-card-content {
flex: 1;
min-width: 0;
}
.tool-card h3 {
font-size: var(--font-size-lg);
font-weight: 600;
margin-bottom: 4px;
}
.tool-card p {
font-size: var(--font-size-sm);
color: var(--text-muted);
margin: 0;
}
/* Category Card */
.category-card {
background: white;
border-radius: var(--radius-2xl);
padding: 32px;
border: 2px solid #e5e7eb;
transition: all var(--transition-normal) ease;
}
.category-card:hover {
border-color: var(--primary);
box-shadow: var(--shadow-lg);
}
.category-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.category-card-icon {
width: 56px;
height: 56px;
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
}
.category-card h3 {
font-size: var(--font-size-xl);
margin-bottom: 4px;
}
.tool-count {
font-size: var(--font-size-sm);
color: var(--text-muted);
}
.category-card-link {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border-radius: var(--radius-lg);
text-decoration: none;
color: var(--text-body);
font-size: var(--font-size-base);
transition: all var(--transition-fast);
}
.category-card-link:hover {
background: var(--secondary);
color: var(--primary);
}
/* Pricing Card */
.pricing-card {
background: white;
border-radius: var(--radius-3xl);
padding: 48px 40px;
border: 2px solid #e5e7eb;
position: relative;
transition: all var(--transition-normal) ease;
}
.pricing-card:hover {
border-color: var(--primary);
box-shadow: var(--shadow-xl);
}
.pricing-card.featured {
background: var(--primary);
color: white;
border-color: var(--primary);
transform: scale(1.05);
}
.pricing-card.featured:hover {
transform: scale(1.08);
}
.pricing-card.featured h3,
.pricing-card.featured .price,
.pricing-card.featured p,
.pricing-card.featured span {
color: white;
}
.pricing-card.featured .btn-primary {
background: var(--tertiary);
color: var(--primary);
border-color: var(--tertiary);
}
.pricing-card .price {
font-size: var(--font-size-6xl);
font-weight: 800;
line-height: 1;
}
/* ========================
Grids
======================== */
.grid-tools {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 24px;
}
/* Trois colonnes imposees : avec six cartes, un auto-fill donnait quatre
colonnes puis une rangee orpheline de deux. Deux rangees de trois se lisent
mieux et se terminent proprement. */
.grid-features {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
}
@media (max-width: 1023px) {
.grid-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}
@media (max-width: 640px) {
.grid-features { grid-template-columns: 1fr; }
}
.grid-categories {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
gap: 32px;
margin-top: 48px;
}
@media (max-width: 767px) {
.grid-tools,
.grid-categories {
grid-template-columns: 1fr;
}
}
/* ========================
Section Headers
======================== */
.section-header {
margin-bottom: 48px;
}
.section-header.center {
text-align: center;
}
.section-header h2 {
margin-bottom: 16px;
}
.section-header p {
font-size: var(--font-size-xl);
color: var(--text-muted);
max-width: 640px;
}
.section-header.center p {
margin: 0 auto;
}
.section-header .badge {
margin-bottom: 16px;
}
/* ========================
Hero Section
======================== */
/* Le convertisseur est la raison de la visite : il doit etre atteignable sans
defiler. On garde le titre et l'accroche (utiles au referencement) mais on
les compacte pour que la barre d'outils de l'editeur entre dans le premier
ecran, y compris sur un portable 13 pouces. */
.hero {
background: var(--secondary);
padding: 30px 0 44px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -40%;
right: -10%;
width: 60%;
height: 140%;
background: radial-gradient(circle, rgba(226, 255, 94, 0.2) 0%, transparent 45%);
pointer-events: none;
}
.hero::after {
content: '';
position: absolute;
bottom: -20%;
left: -10%;
width: 50%;
height: 60%;
background: radial-gradient(circle, rgba(226, 255, 94, 0.15) 0%, transparent 50%);
pointer-events: none;
}
.hero-content-wrapper {
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 24px;
}
/* max-width elargie : a taille de police reduite, un bloc etroit rallongerait
le titre a trois lignes et annulerait le gain. */
.hero-content {
text-align: center;
margin-bottom: 22px;
max-width: 880px;
}
.hero-content .badge {
margin-bottom: 14px;
}
.hero-content h1 {
font-size: clamp(1.6rem, 3.1vw, 2.25rem);
line-height: 1.14;
margin-bottom: 12px;
}
.hero-content .lead {
font-size: 1.0625rem;
line-height: 1.55;
margin: 0;
color: var(--text-body);
}
.hero-converter {
width: 100%;
max-width: 900px;
}
@media (max-width: 1023px) {
.hero { padding: 24px 0 36px; }
.hero-content { margin-bottom: 18px; }
}
@media (max-width: 640px) {
.hero-content .badge { margin-bottom: 12px; }
.hero-content h1 { font-size: 1.55rem; margin-bottom: 10px; }
.hero-content .lead { font-size: 1rem; }
}
/* Page Hero */
.page-hero {
padding-top: 48px;
padding-bottom: 48px;
}
.page-hero h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
}
/* Tool Hero — meme logique que l'accueil : la zone de depot doit etre visible
sans defiler, donc l'en-tete se contente de presenter l'outil. */
.tool-hero {
padding-top: 38px;
padding-bottom: 38px;
text-align: center;
}
/* La premiere section apres l'en-tete porte l'outil lui-meme : ses 100 px de
respiration l'envoyaient sous la ligne de flottaison. */
.tool-hero + .section {
padding-top: 40px;
}
.tool-hero h1 {
font-size: clamp(1.7rem, 3.4vw, 2.15rem);
line-height: 1.16;
margin-bottom: 12px;
color: white;
}
.tool-hero p {
font-size: 1.0625rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.9);
}
.bg-gradient-primary {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
}
/* ========================
Announcement Bar
======================== */
.wh-announcement-bar {
background: linear-gradient(to right, #16404b, #1a5a6b, #16404b);
color: white;
padding: 6px 16px;
text-align: center;
}
.wh-announcement-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: var(--font-size-xs);
font-weight: 500;
}
.wh-announcement-inner strong {
color: var(--tertiary);
}
/* ========================
Header / Navbar
======================== */
.wh-header {
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: box-shadow var(--transition-normal) ease;
box-shadow: var(--shadow-sm);
}
.wh-header.scrolled {
box-shadow: var(--shadow-lg);
}
.wh-nav-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
.wh-nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
gap: 16px;
}
/* Logo */
.wh-logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
flex-shrink: 0;
}
.wh-logo-icon {
width: 36px;
height: 36px;
background-color: var(--primary);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.wh-logo-icon span {
color: white;
font-weight: 700;
font-size: 0.75rem;
}
.wh-logo-text {
font-size: 1.125rem;
font-weight: 700;
color: var(--primary);
white-space: nowrap;
}
/* Nav Center */
.wh-nav-center {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
}
/* Nav Links */
.wh-nav-link {
display: flex;
align-items: center;
gap: 4px;
padding: 8px 10px;
font-size: 0.8125rem;
font-weight: 500;
color: var(--text-body);
text-decoration: none;
border-radius: 8px;
transition: all var(--transition-fast);
white-space: nowrap;
background: transparent;
border: none;
cursor: pointer;
font-family: inherit;
}
.wh-nav-link:hover,
.wh-nav-dropdown.active .wh-nav-link {
color: var(--primary);
background: #f3f4f6;
}
.wh-nav-link--all {
font-weight: 600;
color: var(--primary);
}
.wh-nav-link--all:hover,
.wh-nav-dropdown.active .wh-nav-link--all {
background: var(--secondary);
}
.wh-nav-link-icon {
flex-shrink: 0;
display: flex;
}
.wh-nav-badge {
padding: 1px 5px;
font-size: 9px;
font-weight: 700;
color: white;
background-color: #06b6d4;
border-radius: 4px;
flex-shrink: 0;
}
/* Nav Right */
.wh-nav-right {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Search Button */
.wh-search-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
color: #6b7280;
background-color: #f3f4f6;
border-radius: var(--radius-full);
border: none;
cursor: pointer;
font-size: 0.8125rem;
font-family: inherit;
white-space: nowrap;
transition: all var(--transition-fast);
}
.wh-search-btn:hover {
background-color: #e5e7eb;
color: var(--primary);
}
/* ========================
Mega Menu Dropdown
======================== */
.wh-mega-dropdown {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
padding-top: 12px;
z-index: 100;
}
.wh-mega-dropdown-inner {
background: white;
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-2xl);
border: 1px solid rgba(0, 0, 0, 0.08);
overflow: hidden;
min-width: 640px;
padding: 20px 28px;
animation: wh-fadeIn 0.15s ease-out;
}
.wh-mega-dropdown-inner--wide {
min-width: 880px;
padding: 24px 32px;
}
.wh-mega-dropdown--all {
left: 50%;
right: auto;
}
/* Mega dropdown positioned from header */
.wh-header .wh-nav-dropdown {
position: relative;
}
.wh-mega-tools-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
.wh-mega-tool-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 10px;
text-decoration: none;
color: inherit;
transition: all var(--transition-fast);
}
.wh-mega-tool-item:hover {
background: #f9fafb;
color: inherit;
}
.wh-mega-tool-icon {
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.wh-mega-tool-info {
flex: 1;
min-width: 0;
}
.wh-mega-tool-name {
display: flex;
align-items: center;
gap: 6px;
}
.wh-mega-tool-name > span:first-child {
font-size: 0.875rem;
font-weight: 600;
color: #111827;
}
.wh-mega-tool-badge {
padding: 2px 6px;
font-size: 0.625rem;
font-weight: 700;
color: var(--primary);
background-color: var(--tertiary);
border-radius: 4px;
}
.wh-mega-tool-desc {
font-size: 0.75rem;
color: var(--text-muted);
}
.wh-mega-footer {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid #f3f4f6;
}
.wh-mega-all-link {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
font-size: 0.875rem;
font-weight: 600;
color: white;
border-radius: 10px;
text-decoration: none;
transition: opacity var(--transition-fast);
}
.wh-mega-all-link:hover {
opacity: 0.9;
color: white;
}
/* All categories mega dropdown */
.wh-mega-all-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.wh-mega-all-header h3 {
font-size: 0.9375rem;
font-weight: 700;
color: #111827;
}
.wh-mega-all-header span {
font-size: 0.75rem;
color: var(--text-light);
}
.wh-mega-all-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.wh-mega-cat-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px 12px;
border-radius: 14px;
text-decoration: none;
background-color: #f9fafb;
border: 1px solid transparent;
transition: all var(--transition-fast);
}
.wh-mega-cat-card:hover {
background: white;
border-color: #e5e7eb;
box-shadow: var(--shadow-sm);
color: inherit;
}
.wh-mega-cat-icon {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.wh-mega-cat-info {
text-align: center;
}
.wh-mega-cat-name {
display: block;
font-size: 0.8125rem;
font-weight: 600;
color: #111827;
}
.wh-mega-cat-count {
display: block;
font-size: 0.6875rem;
color: var(--text-light);
margin-top: 2px;
}
.wh-mega-all-cta {
margin-top: 20px;
display: flex;
justify-content: center;
}
/* ========================
Mobile Menu
======================== */
.wh-mobile-toggle {
display: none;
padding: 8px;
color: #6b7280;
background: none;
border: none;
cursor: pointer;
flex-shrink: 0;
}
.wh-mobile-menu {
display: none;
position: fixed;
inset: 0;
top: 90px;
z-index: 999;
background: white;
overflow-y: auto;
}
.wh-mobile-menu.open {
display: block;
animation: wh-slideDown 0.2s ease-out;
}
.wh-mobile-menu-inner {
padding: 16px 20px;
}
.wh-mobile-search {
padding-bottom: 16px;
border-bottom: 1px solid #f3f4f6;
margin-bottom: 20px;
}
.wh-mobile-search-btn {
width: 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: #f9fafb;
border-radius: 12px;
border: none;
cursor: pointer;
font-family: inherit;
font-size: 0.9375rem;
color: var(--text-light);
}
.wh-mobile-section-title {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-light);
text-transform: uppercase;
margin-bottom: 12px;
padding-left: 4px;
}
.wh-mobile-categories {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 20px;
}
.wh-mobile-cat-link {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border-radius: 14px;
text-decoration: none;
color: inherit;
transition: transform var(--transition-fast);
}
.wh-mobile-cat-link:hover {
color: inherit;
}
.wh-mobile-cat-icon {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: white;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.wh-mobile-cat-info {
flex: 1;
}
.wh-mobile-cat-name {
display: block;
font-weight: 600;
color: #111827;
font-size: 0.9375rem;
}
.wh-mobile-cat-badge {
font-size: 0.6875rem;
font-weight: 600;
}
.wh-mobile-cat-link svg:last-child {
color: #d1d5db;
}
.wh-mobile-all-link,
.wh-mobile-blog-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-radius: 14px;
text-decoration: none;
color: inherit;
margin-bottom: 12px;
}
.wh-mobile-all-link {
background: var(--secondary);
}
.wh-mobile-blog-link {
background: #F5F3FF;
}
.wh-mobile-all-inner {
display: flex;
align-items: center;
gap: 12px;
}
.wh-mobile-all-inner span:last-child {
font-weight: 600;
color: var(--primary);
font-size: 0.9375rem;
}
.wh-mobile-all-count {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.75rem;
color: var(--primary);
opacity: 0.7;
}
.wh-mobile-cta {
padding-top: 16px;
border-top: 1px solid #f3f4f6;
}
.wh-mobile-cta-btn {
display: block;
width: 100%;
text-align: center;
border-radius: 14px;
}
/* ========================
Search Modal
======================== */
.wh-search-modal {
display: none;
position: fixed;
inset: 0;
z-index: 2000;
}
.wh-search-modal.open {
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 10vh;
padding-left: 16px;
padding-right: 16px;
}
.wh-search-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
}
.wh-search-dialog {
position: relative;
background: white;
border-radius: 20px;
width: 100%;
max-width: 600px;
box-shadow: var(--shadow-2xl);
overflow: hidden;
animation: wh-fadeIn 0.2s ease-out;
}
.wh-search-input-wrap {
position: relative;
padding: 20px 24px;
border-bottom: 1px solid #f3f4f6;
}
.wh-search-input-wrap > svg:first-child {
position: absolute;
left: 40px;
top: 50%;
transform: translateY(-50%);
color: var(--text-light);
pointer-events: none;
}
.wh-search-input {
width: 100%;
height: 56px;
padding-left: 52px;
padding-right: 52px;
font-size: 1rem;
font-family: inherit;
background: #f9fafb;
border: 2px solid transparent;
border-radius: 14px;
outline: none;
transition: all 0.2s;
}
.wh-search-input:focus {
border-color: var(--primary);
background: white;
}
.wh-search-close {
position: absolute;
right: 36px;
top: 50%;
transform: translateY(-50%);
padding: 8px;
color: var(--text-light);
background: none;
border: none;
cursor: pointer;
border-radius: 8px;
transition: all var(--transition-fast);
}
.wh-search-close:hover {
background: #f3f4f6;
color: var(--text-body);
}
.wh-search-results {
padding: 16px 24px;
max-height: 60vh;
overflow-y: auto;
}
.wh-search-section-label {
font-size: 0.6875rem;
font-weight: 700;
color: var(--text-light);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 12px;
}
.wh-search-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.wh-search-tag {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 10px;
font-size: 0.875rem;
font-weight: 500;
color: #374151;
cursor: pointer;
transition: all var(--transition-fast);
font-family: inherit;
}
.wh-search-tag:hover {
background: var(--primary);
color: white;
border-color: var(--primary);
}
.wh-search-footer {
padding: 12px 24px;
background: #f9fafb;
border-top: 1px solid #f3f4f6;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.75rem;
color: var(--text-light);
}
.wh-search-footer kbd {
padding: 2px 6px;
background: white;
border-radius: 4px;
border: 1px solid #e5e7eb;
font-size: 0.6875rem;
margin-right: 4px;
}
.wh-search-footer a {
font-size: 0.8125rem;
font-weight: 600;
color: var(--primary);
display: flex;
align-items: center;
gap: 4px;
}
/* ========================
Converter Box
======================== */
.converter-box {
background: white;
border-radius: var(--radius-3xl);
box-shadow: var(--shadow-2xl);
overflow: hidden;
}
.converter-tabs {
display: flex;
border-bottom: 1px solid #e5e7eb;
}
.converter-tab {
flex: 1;
padding: 14px 20px;
font-size: var(--font-size-base);
font-weight: 600;
background: #f8f9fa;
border: none;
cursor: pointer;
transition: all var(--transition-fast);
font-family: inherit;
}
.converter-tab.active {
background: var(--primary);
color: white;
}
.converter-tab:not(.active):hover {
background: #eef0f2;
}
.converter-body {
padding: 24px 28px 28px;
}
.wh-converter-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
}
@media (max-width: 767px) {
.wh-converter-grid {
grid-template-columns: 1fr;
}
.converter-body {
padding: 18px;
}
}
.wh-converter-label {
display: block;
font-size: var(--font-size-sm);
font-weight: 600;
color: #374151;
margin-bottom: 8px;
}
.converter-textarea {
width: 100%;
min-height: 280px;
padding: 24px;
border: 2px solid #e5e7eb;
border-radius: var(--radius-xl);
font-size: var(--font-size-base);
font-family: 'Monaco', 'Menlo', monospace;
resize: vertical;
transition: border-color var(--transition-fast);
}
.converter-textarea:focus {
outline: none;
border-color: var(--primary);
}
.wh-output {
background: #f9fafb;
}
.converter-actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
align-items: center;
margin-top: 32px;
padding: 16px 0;
}
.converter-actions .btn {
min-width: 200px;
}
.wh-converter-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 48px;
}
/* Feature Box */
.feature-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px 16px;
background: var(--secondary);
border-radius: var(--radius-2xl);
min-height: 100px;
}
.feature-box svg {
margin-bottom: 12px;
color: var(--primary);
}
.feature-box span {
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--text-dark);
line-height: 1.3;
}
/* ========================
Upload Zone
======================== */
.upload-zone {
border: 3px dashed #d1d5db;
border-radius: var(--radius-3xl);
padding: 48px 32px;
text-align: center;
background: #fafafa;
transition: all var(--transition-normal) ease;
cursor: pointer;
max-width: 520px;
margin: 0 auto 24px auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.upload-zone:hover {
border-color: var(--primary);
background: var(--secondary);
transform: scale(1.01);
}
.upload-zone-icon {
width: 80px;
height: 80px;
margin: 0 auto 24px;
background: var(--secondary);
border-radius: var(--radius-2xl);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
}
.upload-zone h3 {
font-size: var(--font-size-xl);
margin-bottom: 12px;
}
.upload-zone p {
font-size: var(--font-size-base);
color: var(--text-muted);
}
/* ========================
FAQ Accordion
======================== */
.faq-section {
max-width: 800px;
margin: 0 auto;
}
.faq-section h2 {
text-align: center;
margin-bottom: 56px;
}
.wh-faq-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.accordion-item {
border: 2px solid #e5e7eb;
border-radius: var(--radius-xl);
overflow: hidden;
transition: all var(--transition-fast) ease;
background: white;
}
.accordion-item:hover {
border-color: var(--primary);
}
.accordion-header {
width: 100%;
padding: 28px 32px;
background: white;
border: none;
text-align: left;
font-size: var(--font-size-lg);
font-weight: 600;
font-family: inherit;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background var(--transition-fast);
color: var(--primary);
}
.accordion-header:hover {
background: #f9fafb;
}
.accordion-header svg {
color: var(--text-light);
flex-shrink: 0;
transition: transform var(--transition-fast);
}
.accordion-header[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.accordion-content {
padding: 0 32px 28px;
font-size: var(--font-size-base);
color: var(--text-muted);
line-height: 1.8;
}
/* ========================
Footer
======================== */
.footer {
background: var(--primary);
color: white;
padding: 80px 0 40px;
}
.wh-footer-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px 32px;
}
@media (min-width: 768px) {
.wh-footer-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.wh-footer-grid {
grid-template-columns: repeat(7, 1fr);
gap: 32px;
}
}
.wh-footer-col h4 {
color: white;
font-size: var(--font-size-lg);
font-weight: 600;
margin-bottom: 24px;
display: flex;
align-items: center;
gap: 12px;
}
.wh-footer-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.wh-footer-col ul {
list-style: none;
padding: 0;
}
.wh-footer-col ul li {
margin-bottom: 8px;
}
.wh-footer-col a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-size: var(--font-size-base);
transition: color var(--transition-fast);
display: block;
padding: 3px 0;
}
.wh-footer-col a:hover {
color: white;
}
/* Footer bottom */
.footer-bottom {
margin-top: 60px;
padding-top: 32px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.wh-footer-bottom-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
@media (min-width: 1024px) {
.wh-footer-bottom-inner {
flex-direction: row;
justify-content: space-between;
}
}
.wh-footer-bottom-left {
display: flex;
align-items: center;
gap: 24px;
}
.wh-footer-logo {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.wh-footer-logo-icon {
width: 40px;
height: 40px;
background: white;
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.wh-footer-logo-icon span {
color: var(--primary);
font-weight: 700;
font-size: var(--font-size-sm);
}
.wh-footer-logo-text {
font-weight: 700;
color: white;
font-size: var(--font-size-lg);
white-space: nowrap;
}
.wh-footer-copyright {
color: rgba(255, 255, 255, 0.6);
font-size: var(--font-size-sm);
}
.wh-footer-bottom-right {
display: flex;
align-items: center;
gap: 32px;
}
.wh-footer-social {
display: flex;
align-items: center;
gap: 20px;
}
.wh-footer-social a {
color: rgba(255, 255, 255, 0.6);
transition: color var(--transition-fast);
padding: 8px;
display: flex;
}
.wh-footer-social a:hover {
color: white;
}
/* ========================
CTA Section
======================== */
.cta-section {
background: var(--primary);
padding: 100px 0;
text-align: center;
}
.cta-section .container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.cta-section h2 {
color: white;
margin-bottom: 20px;
}
.cta-section p {
color: white;
margin-bottom: 40px;
max-width: 640px;
}
.wh-cta-buttons {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
margin-top: 8px;
}
/* ========================
Breadcrumb
======================== */
.wh-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 24px;
font-size: var(--font-size-sm);
flex-wrap: wrap;
}
.wh-breadcrumb a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
}
.wh-breadcrumb a:hover {
color: white;
}
.wh-breadcrumb span {
color: rgba(255, 255, 255, 0.4);
}
.wh-breadcrumb .current {
color: white;
font-weight: 500;
}
.page-hero .wh-breadcrumb a {
color: var(--primary);
opacity: 0.7;
}
.page-hero .wh-breadcrumb a:hover {
opacity: 1;
}
.page-hero .wh-breadcrumb span {
color: var(--text-light);
}
.page-hero .wh-breadcrumb .current {
color: var(--text-dark);
}
/* ========================
Steps
======================== */
.wh-steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
@media (max-width: 767px) {
.wh-steps-grid { grid-template-columns: 1fr; }
}
.how-to-use-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 24px 16px;
}
.step-number {
width: 64px;
height: 64px;
background: var(--primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 24px;
}
.how-to-use-step h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 16px;
}
.how-to-use-step p {
font-size: 1rem;
color: var(--text-muted);
line-height: 1.7;
max-width: 280px;
}
/* ========================
Blog Layout
======================== */
.wh-blog-layout {
display: grid;
grid-template-columns: 1fr 340px;
gap: 48px;
}
@media (max-width: 1023px) {
.wh-blog-layout {
grid-template-columns: 1fr;
}
}
.wh-blog-featured-image {
border-radius: var(--radius-2xl);
overflow: hidden;
margin-bottom: 32px;
}
.wh-blog-featured-image img {
width: 100%;
height: auto;
}
.wh-blog-header {
margin-bottom: 40px;
}
.wh-blog-meta {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
font-size: var(--font-size-sm);
color: var(--text-muted);
}
.wh-blog-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 40px;
padding-top: 24px;
border-top: 1px solid #e5e7eb;
}
/* Blog Grid */
.wh-blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 32px;
}
@media (max-width: 767px) {
.wh-blog-grid { grid-template-columns: 1fr; }
}
/* Post Card */
.wh-post-card {
border-radius: var(--radius-2xl);
overflow: hidden;
border: 2px solid #e5e7eb;
transition: all var(--transition-normal);
}
.wh-post-card:hover {
border-color: var(--primary);
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
}
.wh-post-card-inner {
text-decoration: none;
color: inherit;
display: block;
}
.wh-post-card-image {
aspect-ratio: 16/9;
overflow: hidden;
}
.wh-post-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-normal);
}
.wh-post-card:hover .wh-post-card-image img {
transform: scale(1.05);
}
.wh-post-card-body {
padding: 24px;
}
.wh-post-card-meta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
font-size: var(--font-size-sm);
color: var(--text-muted);
}
.wh-post-card-body h3 {
font-size: var(--font-size-xl);
margin-bottom: 8px;
color: var(--text-dark);
}
.wh-post-card-body p {
font-size: var(--font-size-base);
color: var(--text-muted);
margin-bottom: 16px;
}
.wh-post-card-link {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--primary);
}
/* Sidebar */
.wh-sidebar-section {
margin-bottom: 32px;
}
.wh-sidebar-section h3 {
font-size: var(--font-size-xl);
margin-bottom: 20px;
}
.wh-sidebar-posts {
display: flex;
flex-direction: column;
gap: 16px;
}
.wh-sidebar-post {
display: flex;
gap: 12px;
text-decoration: none;
color: inherit;
padding: 12px;
border-radius: var(--radius-lg);
transition: background var(--transition-fast);
}
.wh-sidebar-post:hover {
background: #f9fafb;
color: inherit;
}
.wh-sidebar-post-thumb {
width: 64px;
height: 64px;
border-radius: var(--radius-md);
overflow: hidden;
flex-shrink: 0;
}
.wh-sidebar-post-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.wh-sidebar-post-info h4 {
font-size: var(--font-size-sm);
font-weight: 600;
margin-bottom: 4px;
line-height: 1.4;
}
.wh-sidebar-post-info time {
font-size: var(--font-size-xs);
color: var(--text-muted);
}
.wh-sidebar-cta {
background: var(--secondary);
border-radius: var(--radius-2xl);
padding: 32px;
text-align: center;
}
.wh-sidebar-cta h3 {
font-size: var(--font-size-xl);
margin-bottom: 12px;
}
.wh-sidebar-cta p {
font-size: var(--font-size-sm);
color: var(--text-muted);
margin-bottom: 20px;
}
/* ========================
Pricing
======================== */
.wh-pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
max-width: 1040px;
margin: 0 auto;
}
@media (max-width: 1023px) {
.wh-pricing-grid {
grid-template-columns: 1fr;
max-width: 480px;
}
.pricing-card.featured {
transform: none;
}
}
.wh-pricing-popular {
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
}
.wh-pricing-popular span {
display: flex;
align-items: center;
gap: 4px;
background: var(--tertiary);
color: var(--primary);
padding: 4px 16px;
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: 600;
white-space: nowrap;
}
.wh-pricing-header {
margin-bottom: 24px;
}
.wh-pricing-header h3 {
font-size: var(--font-size-xl);
font-weight: 700;
margin-bottom: 8px;
}
.wh-pricing-header p {
font-size: var(--font-size-sm);
}
.pricing-card:not(.featured) .wh-pricing-header h3 {
color: var(--primary);
}
.pricing-card:not(.featured) .wh-pricing-header p {
color: var(--text-muted);
}
.wh-pricing-price {
margin-bottom: 24px;
}
.wh-pricing-period {
font-size: var(--font-size-base);
}
.pricing-card:not(.featured) .wh-pricing-period {
color: var(--text-muted);
}
.wh-pricing-features {
list-style: none;
padding: 0;
margin-bottom: 32px;
display: flex;
flex-direction: column;
gap: 12px;
}
.wh-pricing-features li {
display: flex;
align-items: flex-start;
gap: 12px;
}
.wh-pricing-check {
flex-shrink: 0;
margin-top: 2px;
}
.pricing-card:not(.featured) .wh-pricing-check {
color: #10b981;
}
.pricing-card.featured .wh-pricing-check {
color: var(--tertiary);
}
.pricing-card:not(.featured) .wh-pricing-features span {
color: var(--text-body);
}
.pricing-card.featured .wh-pricing-features span {
color: rgba(255, 255, 255, 0.9);
}
.wh-pricing-cta {
width: 100%;
}
.wh-pricing-note {
text-align: center;
color: var(--text-muted);
margin-top: 32px;
font-size: var(--font-size-sm);
}
/* ========================
Dashboard
======================== */
.wh-dashboard-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.wh-dashboard-grid {
display: flex;
flex-direction: column;
gap: 40px;
}
.wh-dashboard-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 767px) {
.wh-dashboard-stats {
grid-template-columns: 1fr;
}
}
.wh-stat-card {
background: white;
border-radius: var(--radius-2xl);
padding: 24px;
border: 2px solid #e5e7eb;
display: flex;
flex-direction: column;
gap: 16px;
}
.wh-stat-icon {
width: 56px;
height: 56px;
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
}
.wh-stat-number {
font-size: var(--font-size-3xl);
font-weight: 800;
color: var(--text-dark);
}
.wh-stat-label {
font-size: var(--font-size-sm);
color: var(--text-muted);
}
.wh-stat-limit {
display: flex;
align-items: center;
gap: 12px;
}
.wh-stat-limit span {
font-size: var(--font-size-sm);
color: var(--text-muted);
white-space: nowrap;
}
.progress-bar {
height: 8px;
background: #e5e7eb;
border-radius: var(--radius-full);
overflow: hidden;
flex: 1;
}
.progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--tertiary));
border-radius: var(--radius-full);
transition: width var(--transition-normal) ease;
}
/* History Table */
.wh-history-table-wrap {
overflow-x: auto;
}
.wh-history-table {
width: 100%;
border-collapse: collapse;
}
.wh-history-table th {
text-align: left;
padding: 12px 16px;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--text-muted);
border-bottom: 2px solid #e5e7eb;
}
.wh-history-table td {
padding: 12px 16px;
font-size: var(--font-size-base);
border-bottom: 1px solid #f3f4f6;
}
/* ========================
Tools Directory
======================== */
.wh-tools-search {
max-width: 480px;
margin: 32px auto 24px;
}
.wh-tools-search-input {
width: 100%;
padding: 16px 16px 16px 52px;
font-size: var(--font-size-base);
font-family: inherit;
border: 2px solid #e5e7eb;
border-radius: var(--radius-full);
transition: border-color var(--transition-fast);
}
.wh-tools-search-input:focus {
outline: none;
border-color: var(--primary);
}
.search-input-wrapper {
position: relative;
}
.search-input-wrapper svg {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
pointer-events: none;
}
.wh-tools-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-top: 16px;
}
.wh-filter-pill {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: var(--radius-full);
border: 1px solid #e5e7eb;
background: white;
font-size: var(--font-size-sm);
font-weight: 500;
font-family: inherit;
cursor: pointer;
transition: all var(--transition-fast);
color: var(--text-body);
}
.wh-filter-pill:hover {
border-color: var(--primary);
color: var(--primary);
}
.wh-filter-pill.active {
background: var(--primary);
border-color: var(--primary);
color: white;
}
.wh-filter-count {
font-size: var(--font-size-xs);
opacity: 0.7;
}
.wh-category-section {
margin-bottom: 48px;
}
.wh-category-section-header {
margin-bottom: 24px;
}
.wh-category-section-header h2 {
font-size: var(--font-size-2xl);
}
/* ========================
404
======================== */
.wh-404-section {
min-height: calc(100vh - 200px);
display: flex;
align-items: center;
justify-content: center;
padding: 48px 24px;
background: var(--secondary);
}
.wh-404-content {
text-align: center;
max-width: 520px;
}
.wh-404-icon {
width: 120px;
height: 120px;
border-radius: var(--radius-3xl);
background: var(--primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 32px;
}
.wh-404-icon span {
font-size: var(--font-size-4xl);
font-weight: 800;
}
.wh-404-content h1 {
margin-bottom: 16px;
}
.wh-404-content p {
margin-bottom: 32px;
color: var(--text-muted);
}
.wh-404-actions {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
/* ========================
Empty State
======================== */
.wh-empty-state {
text-align: center;
padding: 64px 24px;
}
.wh-empty-state h2 {
font-size: var(--font-size-2xl);
margin-bottom: 12px;
}
.wh-empty-state p {
color: var(--text-muted);
margin-bottom: 24px;
}
.wh-empty-state--small {
padding: 32px 16px;
}
/* ========================
Notices
======================== */
.wh-notice {
padding: 16px 24px;
border-radius: var(--radius-xl);
margin: 16px 0;
}
.wh-notice-warning {
background: #FEF3C7;
border: 1px solid #F59E0B;
color: #92400E;
}
.wh-notice p {
font-size: var(--font-size-base);
color: inherit;
margin: 0;
}
/* ========================
Prose Content
======================== */
.wh-prose {
max-width: 720px;
margin: 0 auto;
}
.wh-prose h2 {
font-size: var(--font-size-3xl);
margin: 48px 0 16px;
}
.wh-prose h3 {
font-size: var(--font-size-2xl);
margin: 40px 0 12px;
}
.wh-prose p {
margin-bottom: 20px;
}
.wh-prose ul,
.wh-prose ol {
margin-bottom: 20px;
padding-left: 24px;
}
.wh-prose li {
margin-bottom: 8px;
font-size: var(--font-size-lg);
line-height: 1.7;
}
.wh-prose img {
border-radius: var(--radius-xl);
margin: 32px 0;
}
.wh-prose a {
color: var(--primary);
text-decoration: underline;
}
/* ========================
Pagination
======================== */
.wh-pagination {
margin-top: 48px;
display: flex;
justify-content: center;
}
.wh-pagination .nav-links {
display: flex;
gap: 8px;
}
.wh-pagination a,
.wh-pagination span {
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 16px;
border-radius: var(--radius-lg);
font-size: var(--font-size-base);
font-weight: 500;
text-decoration: none;
transition: all var(--transition-fast);
}
.wh-pagination a {
background: white;
border: 2px solid #e5e7eb;
color: var(--text-body);
}
.wh-pagination a:hover {
border-color: var(--primary);
color: var(--primary);
}
.wh-pagination .current {
background: var(--primary);
color: white;
border: 2px solid var(--primary);
}
/* ========================
Utility Helpers
======================== */
.wh-flex-center {
display: flex;
align-items: center;
}
.wh-gap-4 {
gap: 16px;
}
.wh-cat-see-all {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--primary);
display: flex;
align-items: center;
gap: 8px;
}
.wh-cat-see-all:hover {
text-decoration: underline;
}
.wh-section-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 48px;
}
.wh-section-top-left {
display: flex;
align-items: center;
gap: 16px;
}
.wh-section-icon {
width: 64px;
height: 64px;
border-radius: var(--radius-2xl);
display: flex;
align-items: center;
justify-content: center;
}
.wh-bg-amber {
background: #FEF3C7;
color: #D97706;
}
.wh-section-subtitle {
font-size: var(--font-size-lg);
color: var(--text-muted);
margin-top: 4px;
}
.wh-mobile-center {
text-align: center;
margin-top: 48px;
}
.explore-btn-wrapper {
margin-top: 48px;
text-align: center;
}
.wh-tool-interface {
max-width: 800px;
margin: 0 auto;
}
.wh-tool-content {
max-width: 720px;
margin: 0 auto;
}
.wh-page-content {
max-width: 800px;
margin: 0 auto;
}
.popular-search-tag {
display: inline-flex;
align-items: center;
padding: 8px 16px;
background: white;
border: 1px solid #e5e7eb;
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
color: var(--text-body);
text-decoration: none;
transition: all var(--transition-fast);
}
.popular-search-tag:hover {
background: var(--secondary);
border-color: var(--primary);
color: var(--primary);
}
.wh-cat-hero-icon {
width: 80px;
height: 80px;
border-radius: var(--radius-2xl);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
}
/* ========================
Animations
======================== */
@keyframes wh-fadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes wh-slideDown {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ========================
Responsive Visibility
======================== */
.wh-hide-mobile {
display: none;
}
.wh-hide-xs {
display: none;
}
.wh-show-mobile-nav {
display: flex;
}
.wh-hide-mobile-nav {
display: none;
}
.wh-show-mobile {
display: block;
}
.wh-hide-lg {
display: none;
}
@media (min-width: 480px) {
.wh-hide-xs { display: inline; }
}
@media (min-width: 640px) {
.wh-hide-mobile { display: inline; }
}
@media (min-width: 1024px) {
.wh-show-mobile-nav { display: none; }
.wh-hide-mobile-nav { display: flex; }
.wh-show-mobile { display: none; }
}
@media (min-width: 1280px) {
.wh-hide-lg { display: inline; }
}
/* ========================
Focus States
======================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
outline: 3px solid var(--primary);
outline-offset: 2px;
}
::selection {
background: var(--primary);
color: white;
}
/* ========================
Form Elements
======================== */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
textarea,
select {
font-family: inherit;
font-size: var(--font-size-base);
padding: 14px 18px;
border: 2px solid #e5e7eb;
border-radius: var(--radius-lg);
transition: border-color var(--transition-fast);
}
input:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--primary);
}
/* ========================
Responsive
======================== */
@media (max-width: 767px) {
body { font-size: 15px; }
p { font-size: var(--font-size-base); }
.lead { font-size: var(--font-size-lg); }
.btn { padding: 14px 24px; }
.btn-lg { padding: 16px 32px; }
.container { padding-left: 16px; padding-right: 16px; }
}
/* ── Blocs de code dans les articles ────────────────────────────────────
Les tutoriels affichent beaucoup de HTML d'exemple : fond sombre, mono,
défilement horizontal, bouton copier (injecté par mega-menu.js). */
.wh-article-content pre,
.single-post .entry-content pre,
article .wh-prose pre {
position: relative;
background: #12262d;
color: #e6edf0;
border-radius: 14px;
padding: 22px 24px;
overflow-x: auto;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 14px;
line-height: 1.65;
margin: 24px 0;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.wh-article-content pre code,
.single-post .entry-content pre code,
article .wh-prose pre code {
background: none; color: inherit; padding: 0; font-size: inherit;
}
.wh-article-content code,
.single-post .entry-content code,
article .wh-prose code {
background: #eef3f5;
color: #16404b;
border-radius: 6px;
padding: 2px 7px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .88em;
}
.wh-code-copy {
position: absolute;
top: 10px; right: 10px;
background: rgba(255,255,255,.1);
color: #cfe0e6;
border: 1px solid rgba(255,255,255,.18);
border-radius: 8px;
font-size: 12px;
font-weight: 600;
padding: 5px 12px;
cursor: pointer;
transition: background .15s ease;
}
.wh-code-copy:hover { background: rgba(255,255,255,.2); }
.wh-code-copy.copied { background: #1e9e5a; border-color: #1e9e5a; color: #fff; }
/* ── Quiz d'article ─────────────────────────────────────────────────────
Markup produit par la rédaction : .wh-quiz > .wh-quiz-q > button.wh-quiz-option
(data-correct="1" sur la bonne réponse). Le JS du thème anime tout. */
.wh-quiz {
background: #f4f8fa;
border: 1px solid #dfe8ec;
border-radius: 16px;
padding: 28px;
margin: 32px 0;
}
.wh-quiz > h2, .wh-quiz > h3 { margin-top: 0; }
.wh-quiz-q { margin: 22px 0 0; }
.wh-quiz-q p { font-weight: 600; margin: 0 0 12px; }
.wh-quiz-option {
display: block;
width: 100%;
text-align: left;
font: inherit;
font-size: 15px;
background: #fff;
border: 1.5px solid #dfe8ec;
border-radius: 10px;
padding: 12px 16px;
margin: 8px 0;
cursor: pointer;
transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.wh-quiz-option:hover { border-color: #16404b; transform: translateX(2px); }
.wh-quiz-q.answered .wh-quiz-option { cursor: default; opacity: .75; }
.wh-quiz-q.answered .wh-quiz-option[data-correct="1"] {
border-color: #1e9e5a; background: #e7f6ee; opacity: 1; font-weight: 600;
}
.wh-quiz-option.wrong { border-color: #d64545; background: #fdf1f1; opacity: 1; }
.wh-quiz-option::before { content: "○ "; color: #9fb0b8; }
.wh-quiz-q.answered .wh-quiz-option[data-correct="1"]::before { content: "✓ "; color: #1e9e5a; }
.wh-quiz-option.wrong::before { content: "✗ "; color: #d64545; }
.wh-quiz-score {
margin-top: 20px;
padding: 14px 18px;
background: #16404b;
color: #fff;
border-radius: 10px;
font-weight: 600;
text-align: center;
display: none;
}
.wh-quiz-score.show { display: block; }
/* ── Quiz déplacé dans la sidebar (desktop) ─────────────────────────────── */
.wh-sidebar-quiz { position: sticky; top: 96px; margin-bottom: 28px; }
.wh-sidebar-quiz .wh-quiz {
margin: 0;
background: #fff;
border: 1px solid #dfe8ec;
box-shadow: 0 12px 34px -20px rgba(16,42,51,.35);
}
.wh-sidebar-quiz .wh-quiz > h2 { font-size: 20px; }
.wh-sidebar-quiz .wh-quiz-option { font-size: 14px; padding: 10px 13px; }
/* la version inline d'origine est masquée dès qu'elle a été relogée */
.wh-quiz.wh-quiz-relocated { display: none; }
@media (max-width: 1024px) {
/* en mobile, on garde le quiz inline dans l'article */
.wh-sidebar-quiz { display: none; }
.wh-quiz.wh-quiz-relocated { display: block; }
}
/* ── Points essentiels (encadré tête d'article, pattern iLovePDF) ─────── */
.wh-takeaways {
background: linear-gradient(135deg, #f0f7f9, #e8f2f5);
border-left: 4px solid #16404b;
border-radius: 0 14px 14px 0;
padding: 22px 26px;
margin: 26px 0;
}
.wh-takeaways h2, .wh-takeaways h3 { margin: 0 0 12px; font-size: 20px; }
.wh-takeaways ul { margin: 0; padding-left: 20px; }
.wh-takeaways li { margin: 7px 0; }
/* ── Bandeau CTA vers l'outil en fin d'article ─────────────────────────── */
.wh-article-cta {
background: #16404b;
color: #fff;
border-radius: 16px;
padding: 28px 30px;
margin: 34px 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.wh-article-cta h3 { color: #fff; margin: 0 0 6px; font-size: 21px; }
.wh-article-cta p { color: rgba(255,255,255,.75); margin: 0; font-size: 15px; }
.wh-article-cta .btn, .wh-article-cta a.wh-cta-btn {
background: #c8f04b;
color: #16404b;
font-weight: 700;
padding: 13px 26px;
border-radius: 999px;
text-decoration: none;
white-space: nowrap;
transition: transform .15s ease, filter .15s ease;
}
.wh-article-cta a.wh-cta-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
/* ── Quiz en accordéon dans la sidebar (ne cache plus les articles liés) ── */
.wh-sidebar-quiz { position: static; margin-bottom: 24px; }
.wh-sidebar-quiz .wh-quiz { padding: 0; overflow: hidden; }
.wh-quiz-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
font: inherit;
font-size: 16px;
font-weight: 700;
background: #16404b;
color: #fff;
border: 0;
padding: 16px 20px;
cursor: pointer;
}
.wh-quiz-toggle .wh-quiz-chev { transition: transform .2s ease; }
.wh-quiz-toggle[aria-expanded="true"] .wh-quiz-chev { transform: rotate(180deg); }
.wh-quiz-body { padding: 6px 20px 20px; display: none; }
.wh-quiz-body.open { display: block; }
.wh-sidebar-quiz .wh-quiz > h2 { display: none; } /* le titre vit dans le bouton */
/* ── Notation réelle des outils ─────────────────────────────────────────── */
.wh-rate {
max-width: 860px;
margin: 18px auto 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px 16px;
font-size: 14.5px;
color: #5c6b73;
}
.wh-rate-stars { display: inline-flex; gap: 2px; }
.wh-rate-star {
background: none; border: 0; padding: 2px;
font-size: 24px; line-height: 1; color: #d4dde2; cursor: pointer;
transition: color .12s ease, transform .12s ease;
}
.wh-rate-star.on, .wh-rate-star:hover { color: #f5a623; }
.wh-rate-star:hover { transform: scale(1.15); }
.wh-rate-out { font-weight: 600; color: #1c2b33; }
/* ── Éditeur homepage : finitions ───────────────────────────────────────── */
.wh-live-hint { font-size: 13px; color: #7a8a92; align-self: center; }
.wh-hero-alt { text-align: center; margin: 14px 0 0; font-size: 14.5px; color: #5c6b73; }
.wh-hero-alt a { color: #16404b; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.converter-textarea { min-height: 240px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; }
.wh-output { background: #f7fafb; }
/* ── Bandeau de confiance (signal présent chez tous les concurrents) ────── */
/* Quatre colonnes imposees plutot qu'un auto-fit : la colonne d'un outil fait
855 px, il en fallait 842 pour tenir quatre pistes de 200 px avec les gouttieres
— a treize pixels pres, la quatrieme mention retombait seule sur une ligne. */
.wh-trust {
max-width: 900px;
margin: 26px auto 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: start;
gap: 18px 16px;
padding: 20px;
background: #f4f8fa;
border: 1px solid #e3ebef;
border-radius: 14px;
}
@media (max-width: 900px) {
.wh-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
.wh-trust { grid-template-columns: 1fr; }
}
.wh-trust-item { display: flex; gap: 11px; align-items: flex-start; }
.wh-trust-icon {
flex: 0 0 38px; width: 38px; height: 38px;
display: inline-flex; align-items: center; justify-content: center;
background: #16404b; color: #fff; border-radius: 10px;
/* Ombre portee douce : la pastille se detache du fond au lieu d'y etre collee. */
box-shadow: 0 5px 12px rgba(22, 64, 75, .24), 0 1px 2px rgba(22, 64, 75, .2);
}
.wh-trust-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.wh-trust-text strong { font-size: 14.5px; color: #1c2b33; }
.wh-trust-text span { font-size: 13px; color: #5c6b73; }
/* ── Quiz sidebar : compact, une question à la fois ─────────────────── */
.wh-sidebar-quiz .wh-quiz h2,
.wh-sidebar-quiz .wh-quiz-body > h2,
.wh-sidebar-quiz .wh-quiz-body > h3 { display: none !important; }
.wh-sidebar-quiz .wh-quiz {
border: 1px solid #e6e0d6; border-radius: 12px; background: #fff;
overflow: hidden; margin: 0 0 22px; padding: 0;
}
.wh-sidebar-quiz .wh-quiz-toggle {
width: 100%; display: grid;
grid-template-columns: 1fr auto; grid-template-areas: "label chev" "count chev";
align-items: center; gap: 0 10px;
padding: 13px 15px; background: #FDF8F0; border: 0; border-bottom: 1px solid transparent;
font: inherit; font-size: 14.5px; font-weight: 700; line-height: 1.3;
color: #1a2332; text-align: left; cursor: pointer;
}
.wh-sidebar-quiz .wh-quiz-toggle > span:first-child { grid-area: label; }
.wh-sidebar-quiz .wh-quiz-count { grid-area: count; font-size: 12px; font-weight: 500; color: #8a8577; }
.wh-sidebar-quiz .wh-quiz-chev { grid-area: chev; transition: transform .2s; color: #8a8577; }
.wh-sidebar-quiz .wh-quiz-toggle[aria-expanded="true"] { border-bottom-color: #ece6dc; }
.wh-sidebar-quiz .wh-quiz-toggle[aria-expanded="true"] .wh-quiz-chev { transform: rotate(180deg); }
.wh-sidebar-quiz .wh-quiz-body { display: none; padding: 14px 15px 16px; }
.wh-sidebar-quiz .wh-quiz-body.open { display: block; }
.wh-sidebar-quiz .wh-quiz-progress {
height: 4px; border-radius: 4px; background: #f0e9dd; overflow: hidden; margin: 0 0 8px;
}
.wh-sidebar-quiz .wh-quiz-progress-fill {
display: block; height: 100%; width: 0; background: #EE6C4D; transition: width .3s ease;
}
.wh-sidebar-quiz .wh-quiz-step {
margin: 0 0 12px; font-size: 11.5px; font-weight: 600;
letter-spacing: .04em; text-transform: uppercase; color: #8a8577;
}
.wh-sidebar-quiz .wh-quiz-q { margin: 0; padding: 0; border: 0; }
.wh-sidebar-quiz .wh-quiz-q + .wh-quiz-q { margin-top: 18px; }
.wh-sidebar-quiz .wh-quiz-q p {
font-size: 14px; line-height: 1.42; font-weight: 600; color: #1a2332; margin: 0 0 10px;
}
.wh-sidebar-quiz .wh-quiz-q p code { font-size: 12.5px; word-break: break-word; }
.wh-sidebar-quiz .wh-quiz-option {
display: block; width: 100%; margin: 0 0 6px; padding: 9px 12px;
font-size: 13.5px; line-height: 1.35; border-radius: 8px;
border: 1px solid #e6e0d6; background: #fff; text-align: left;
}
.wh-sidebar-quiz .wh-quiz-option:last-child { margin-bottom: 0; }
.wh-sidebar-quiz .wh-quiz-nav { margin-top: 14px; }
.wh-sidebar-quiz .wh-quiz-next {
width: 100%; padding: 10px 12px; border: 0; border-radius: 8px;
background: #1a2332; color: #fff; font: inherit; font-size: 13.5px;
font-weight: 600; cursor: pointer;
}
.wh-sidebar-quiz .wh-quiz-next:hover { background: #EE6C4D; }
.wh-sidebar-quiz .wh-quiz-score { font-size: 13px; padding: 10px 12px; margin-top: 12px; }
/* Les options du quiz sont séparées par des
dans le HTML des articles
déjà publiés : elles sont en display:block, le saut de ligne ne fait
qu'ajouter un blanc irrégulier entre deux boutons. */
.wh-quiz-option + br { display: none; }
/* ── Archive blog ───────────────────────────────────────────────────── */
.wh-blog-hero { padding: 40px 0 28px; background: #FDF8F0; }
.wh-blog-hero h1 { font-size: clamp(28px, 4vw, 40px); margin: 0 0 14px; line-height: 1.15; }
.wh-blog-hero-lead { max-width: 760px; font-size: 16.5px; line-height: 1.6; color: #4a5568; margin: 0; }
.wh-blog-cats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 22px 0 0; }
.wh-blog-cats li { margin: 0; padding: 0; list-style: none; }
.wh-blog-cats a {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px; border-radius: 999px; background: #fff;
border: 1px solid #e6e0d6; font-size: 14px; font-weight: 600;
color: #2d3748; text-decoration: none; transition: all .15s;
}
.wh-blog-cats a:hover { border-color: #EE6C4D; color: #EE6C4D; }
.wh-blog-cats a span { font-size: 12px; color: #a0aec0; font-weight: 500; }
.wh-blog-main { padding: 36px 0 56px; }
.wh-blog-featured { margin: 0 0 44px; }
.wh-blog-featured > a {
display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
text-decoration: none; color: inherit;
background: #fff; border: 1px solid #ece6dc; border-radius: 16px;
overflow: hidden; transition: box-shadow .2s, transform .2s;
}
.wh-blog-featured > a:hover { box-shadow: 0 12px 32px rgba(0,0,0,.09); transform: translateY(-2px); }
.wh-blog-featured-img { margin: 0; aspect-ratio: 16 / 9; }
.wh-blog-featured-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wh-blog-featured-body { padding: 28px 30px; display: flex; flex-direction: column; justify-content: center; }
.wh-blog-featured-body h2 { font-size: clamp(20px, 2.1vw, 26px); line-height: 1.25; margin: 10px 0 12px; }
.wh-blog-featured-body p { color: #4a5568; line-height: 1.6; margin: 0 0 16px; font-size: 15px; }
.wh-blog-section-title { font-size: 22px; margin: 0 0 22px; padding-bottom: 12px; border-bottom: 2px solid #f0e9dd; }
.wh-blog-main .wh-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.wh-blog-main .navigation.pagination { margin: 44px 0 0; }
.wh-blog-main .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.wh-blog-main .page-numbers {
min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
padding: 0 14px; border-radius: 10px; background: #fff; border: 1px solid #e6e0d6;
font-weight: 600; color: #2d3748; text-decoration: none;
}
.wh-blog-main .page-numbers:hover { border-color: #EE6C4D; color: #EE6C4D; }
.wh-blog-main .page-numbers.current { background: #EE6C4D; border-color: #EE6C4D; color: #fff; }
.wh-blog-tools-cta {
margin: 52px 0 0; padding: 32px; text-align: center;
background: #FDF8F0; border: 1px solid #f0e9dd; border-radius: 16px;
}
.wh-blog-tools-cta h2 { font-size: 22px; margin: 0 0 8px; }
.wh-blog-tools-cta p { color: #4a5568; margin: 0 0 20px; }
.wh-blog-tools-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
@media (max-width: 860px) {
.wh-blog-featured > a { grid-template-columns: 1fr; }
.wh-blog-featured-body { padding: 22px; }
}
/* ── Éditeur visuel de la page d'accueil ────────────────────────────────
Un vrai éditeur remplace la zone de texte : barre d'outils, rendu mis en
forme à gauche, code HTML modifiable à droite. */
.wh-editor-pane { display: flex; flex-direction: column; min-width: 0; }
.wh-editor-toolbar {
display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
padding: 7px 8px; margin: 0;
background: #FDF8F0; border: 1px solid #dfd8cb; border-bottom: 0;
border-radius: 10px 10px 0 0;
}
.wh-tb-group { display: flex; gap: 2px; align-items: center; }
.wh-tb-group + .wh-tb-group {
margin-left: 4px; padding-left: 6px; border-left: 1px solid #e6ded1;
}
.wh-tb {
min-width: 32px; height: 32px; padding: 0 8px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 1px solid transparent; border-radius: 7px;
font: inherit; font-size: 14px; font-weight: 600; line-height: 1;
color: #2d3748; cursor: pointer; transition: background .12s, border-color .12s;
}
.wh-tb:hover { background: #fff; border-color: #e0d8c9; }
.wh-tb.is-active { background: #1a2332; border-color: #1a2332; color: #fff; }
.wh-tb-txt { font-size: 12.5px; letter-spacing: .01em; }
.wh-editor {
min-height: 300px; max-height: 460px; overflow-y: auto;
padding: 18px 20px;
background: #fff; border: 1px solid #dfd8cb; border-radius: 0 0 10px 10px;
font-size: 15px; line-height: 1.65; color: #1a2332;
outline: none; text-align: left;
}
.wh-editor:focus { border-color: #EE6C4D; box-shadow: 0 0 0 3px rgba(238,108,77,.12); }
.wh-editor:empty::before {
content: attr(data-placeholder);
color: #9aa3ad; pointer-events: none; display: block;
}
.wh-editor > :first-child { margin-top: 0; }
.wh-editor > :last-child { margin-bottom: 0; }
.wh-editor h1 { font-size: 26px; line-height: 1.2; margin: 20px 0 10px; }
.wh-editor h2 { font-size: 21px; line-height: 1.25; margin: 18px 0 9px; }
.wh-editor h3 { font-size: 17.5px; line-height: 1.3; margin: 16px 0 8px; }
.wh-editor p { margin: 0 0 12px; }
.wh-editor ul, .wh-editor ol { margin: 0 0 12px; padding-left: 24px; }
.wh-editor li { margin: 4px 0; }
.wh-editor a { color: #EE6C4D; text-decoration: underline; }
.wh-editor blockquote {
margin: 14px 0; padding: 8px 16px;
border-left: 3px solid #EE6C4D; background: #FDF8F0; color: #4a5568;
}
.wh-editor pre {
margin: 14px 0; padding: 12px 14px; overflow-x: auto;
background: #1a2332; color: #e8eef5; border-radius: 8px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
}
.wh-editor code {
padding: 2px 5px; border-radius: 4px; background: #f2ede4;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px;
}
.wh-editor pre code { padding: 0; background: none; color: inherit; }
.wh-editor hr { margin: 18px 0; border: 0; border-top: 1px solid #e6ded1; }
.wh-editor img { max-width: 100%; height: auto; }
.wh-output-head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 7px 10px;
background: #1a2332; border: 1px solid #1a2332; border-bottom: 0;
border-radius: 10px 10px 0 0;
}
.wh-output-badge {
font-size: 11px; font-weight: 700; letter-spacing: .08em;
color: #FDF8F0; text-transform: uppercase;
}
.wh-output-count { font-size: 11.5px; color: #8f9bab; }
.wh-converter-grid .converter-textarea.wh-output {
min-height: 300px; max-height: 460px;
border-radius: 0 0 10px 10px; border: 1px solid #dfd8cb; border-top: 0;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 13px; line-height: 1.6; background: #fff;
}
/* Les deux colonnes n'ont pas la meme entete : barre d'outils a gauche, bandeau
HTML a droite. On laisse la zone de saisie occuper la hauteur restante pour
que les deux cadres se terminent sur la meme ligne. */
.wh-editor,
.wh-converter-grid .converter-textarea.wh-output { flex: 1 1 auto; }
@media (max-width: 860px) {
.wh-editor, .wh-converter-grid .converter-textarea.wh-output { min-height: 220px; }
.wh-tb-group + .wh-tb-group { margin-left: 0; padding-left: 4px; }
}
/* Sur telephone la barre d'outils s'etalait sur quatre rangees et repoussait la
zone de saisie hors de l'ecran. Boutons resserres : deux rangees suffisent,
sans descendre sous la cible tactile de 28 px. */
@media (max-width: 640px) {
.wh-tb { min-width: 28px; height: 28px; padding: 0 6px; font-size: 13px; }
.wh-tb-txt { font-size: 11.5px; }
.wh-editor-toolbar { gap: 3px; padding: 6px; }
.wh-tb-group + .wh-tb-group { padding-left: 3px; }
}
/* ── Lettre d'information ───────────────────────────────────────────── */
.wh-newsletter {
background: #1a2332; color: #f5f1e8; border-radius: 16px;
padding: 34px 32px; margin: 44px 0;
}
.wh-newsletter--inline { margin: 40px 0 8px; padding: 28px 26px; }
.wh-newsletter-inner {
display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 28px; align-items: center; max-width: 980px; margin: 0 auto;
}
.wh-newsletter h2 {
margin: 0 0 10px; font-size: clamp(20px, 2.2vw, 26px);
line-height: 1.22; color: #fff;
}
.wh-newsletter p { margin: 0; color: #c3cbd6; line-height: 1.6; font-size: 15px; }
.wh-newsletter-form { display: flex; flex-wrap: wrap; gap: 10px; }
.wh-newsletter-form input[type="email"] {
flex: 1 1 200px; min-width: 0; padding: 13px 15px;
border: 1px solid #38424f; border-radius: 10px;
background: #101822; color: #fff; font: inherit; font-size: 15px;
}
.wh-newsletter-form input[type="email"]::placeholder { color: #7b8797; }
.wh-newsletter-form input[type="email"]:focus {
outline: none; border-color: #EE6C4D; box-shadow: 0 0 0 3px rgba(238,108,77,.22);
}
.wh-newsletter-form .btn { flex: 0 0 auto; padding: 13px 22px; font-size: 15px; }
.wh-newsletter-legal {
flex: 1 1 100%; margin: 2px 0 0; font-size: 12.5px; color: #8b97a6; line-height: 1.5;
}
.wh-newsletter-legal a { color: #c3cbd6; text-decoration: underline; }
.wh-newsletter-legal a:hover { color: #EE6C4D; }
@media (max-width: 780px) {
.wh-newsletter { padding: 26px 20px; }
.wh-newsletter-inner { grid-template-columns: 1fr; gap: 18px; }
}
/* ── Archive des outils ─────────────────────────────────────────────── */
.wh-tools-hero { padding: 40px 0 28px; background: #FDF8F0; }
.wh-tools-hero h1 { font-size: clamp(27px, 3.8vw, 38px); line-height: 1.16; margin: 0 0 14px; }
.wh-tools-hero-lead { max-width: 780px; font-size: 16.5px; line-height: 1.6; color: #4a5568; margin: 0; }
.wh-tools-cats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 22px 0 0; }
.wh-tools-cats li { margin: 0; list-style: none; }
.wh-tools-cats a {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px; border-radius: 999px; background: #fff;
border: 1px solid #e6e0d6; font-size: 14px; font-weight: 600;
color: #2d3748; text-decoration: none; transition: all .15s;
}
.wh-tools-cats a:hover { border-color: #EE6C4D; color: #EE6C4D; }
.wh-tools-cats a span { font-size: 12px; color: #a0aec0; font-weight: 500; }
.wh-tools-main { padding: 36px 0 56px; }
.wh-tools-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px;
}
.wh-tool-card { margin: 0; }
.wh-tool-card > a {
display: flex; flex-direction: column; height: 100%; overflow: hidden;
padding: 20px 22px; text-decoration: none; color: inherit;
background: #fff; border: 1px solid #ece6dc; border-radius: 13px;
transition: box-shadow .18s, transform .18s, border-color .18s;
}
.wh-tool-card > a:hover {
border-color: #EE6C4D; box-shadow: 0 10px 26px rgba(0,0,0,.07); transform: translateY(-2px);
}
/* Vignette : deduite du slug, elle donne a chaque carte une couleur et un
contenu propres. Elle deborde jusqu'aux bords via des marges negatives,
ce qui evite de restructurer le balisage de la carte. */
.wh-vig {
position: relative; overflow: hidden;
display: flex; align-items: center; justify-content: center; gap: 10px;
height: 96px; margin: -20px -22px 15px; padding: 0 16px;
background:
radial-gradient(120% 140% at 82% 12%, color-mix(in srgb, var(--vig-teinte) 22%, transparent) 0%, transparent 58%),
var(--vig-fond);
border-bottom: 1px solid #f0eae0;
}
/* Repli pour les navigateurs sans color-mix : le fond teinte suffit. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
.wh-vig { background: var(--vig-fond); }
}
.wh-vig-filigrane {
position: absolute; right: -14px; bottom: -26px; line-height: 0;
color: var(--vig-teinte); opacity: .1; pointer-events: none;
}
.wh-vig-jeton {
position: relative; z-index: 1;
padding: 7px 12px; border-radius: 9px;
background: #fff; border: 1px solid rgba(26, 35, 50, .12);
border-color: color-mix(in srgb, var(--vig-teinte) 30%, #fff);
box-shadow: 0 2px 6px rgba(26, 35, 50, .07);
font-size: 13px; font-weight: 800; letter-spacing: .04em;
color: var(--vig-teinte); white-space: nowrap;
}
/* Encre calculee cote PHP : le jaune des outils Image rendait le blanc illisible. */
.wh-vig-jeton--cible {
background: var(--vig-teinte); border-color: var(--vig-teinte);
color: var(--vig-encre, #fff);
}
.wh-vig-jeton--large {
font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.wh-vig-fleche {
position: relative; z-index: 1; line-height: 0;
color: var(--vig-teinte); opacity: .65;
transition: transform .18s;
}
.wh-tool-card > a:hover .wh-vig-fleche { transform: translateX(3px); }
.wh-vig-action {
position: relative; z-index: 1;
font-size: 14.5px; font-weight: 700; color: var(--vig-teinte);
}
@media (max-width: 480px) {
.wh-vig { height: 84px; }
}
.wh-tool-card h2 { font-size: 17px; line-height: 1.3; margin: 0 0 7px; color: #1a2332; }
.wh-tool-card p { flex: 1; margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: #5a6675; }
.wh-tool-card-go {
display: inline-flex; align-items: center; gap: 5px;
font-size: 13.5px; font-weight: 600; color: #EE6C4D;
}
.wh-tools-main .navigation.pagination { margin: 40px 0 0; }
.wh-tools-main .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.wh-tools-main .page-numbers {
min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
padding: 0 14px; border-radius: 10px; background: #fff; border: 1px solid #e6e0d6;
font-weight: 600; color: #2d3748; text-decoration: none;
}
.wh-tools-main .page-numbers.current { background: #EE6C4D; border-color: #EE6C4D; color: #fff; }
.wh-tools-note {
margin: 48px 0 0; padding: 30px; text-align: center;
background: #FDF8F0; border: 1px solid #f0e9dd; border-radius: 16px;
}
.wh-tools-note h2 { font-size: 21px; margin: 0 0 8px; }
.wh-tools-note p { color: #4a5568; margin: 0 0 18px; }
.wh-tools-cats a.is-active { background: #1a2332; border-color: #1a2332; color: #fff; }
.wh-tools-cats a.is-active span { color: #a8b3c0; }
.wh-tools-reset { margin: 14px 0 0; font-size: 14px; }
.wh-tools-reset a { color: #5a6675; text-decoration: none; }
.wh-tools-reset a:hover { color: #EE6C4D; }
/* ── Encart « l'outil qui va avec » ─────────────────────────────────── */
.wh-outil-lie {
margin: 26px 0; padding: 16px 18px;
background: #FDF8F0; border: 1px solid #f0e5d4;
border-left: 4px solid #EE6C4D; border-radius: 10px;
}
.wh-outil-lie-label {
display: block; margin: 0 0 6px;
font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: #EE6C4D;
}
.wh-outil-lie a { display: block; text-decoration: none; color: inherit; }
.wh-outil-lie strong { display: block; font-size: 17px; line-height: 1.3; color: #1a2332; }
.wh-outil-lie a:hover strong { color: #EE6C4D; }
.wh-outil-lie span:last-child { font-size: 13.5px; color: #6b7684; }
/* ─────────────────────────────────────────────────────────────────────────
Titre d'article : la taille globale (56 px) etait pensee pour une page
d'accueil pleine largeur. Dans la colonne d'un article elle donne trois
lignes de titre avant le premier mot du texte. On redescend a 40 px.
───────────────────────────────────────────────────────────────────────── */
.wh-blog-header h1 {
font-size: clamp(1.75rem, 3.2vw, 2.5rem);
line-height: 1.14;
letter-spacing: -0.02em;
margin: 0 0 18px;
}
/* Le quiz de la colonne de droite suit le defilement : il etait passe en
`static` pour ne plus masquer les articles lies, mais l'accordeon replie
tient maintenant en une seule ligne. */
.wh-sidebar-quiz {
position: sticky;
top: 96px;
z-index: 5;
}
/* La copie de colonne se distingue de l'original reste en fin d'article. */
.wh-quiz--colonne { margin: 0; }
.wh-footer-plus a { opacity: .75; font-style: italic; }
/* ─────────────────────────────────────────────────────────────────────────
Video de presentation
─────────────────────────────────────────────────────────────────────────
Rapport d'image fixe par `aspect-ratio` : sans lui, l'image d'attente
arrive apres le texte et decale la page, ce qui coute cher en CLS. */
.wh-video-section { padding: 64px 0 12px; }
.wh-video-entete { max-width: 760px; margin: 0 0 28px; }
.wh-video-entete h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); margin: 0 0 10px; }
.wh-video-entete p { margin: 0; font-size: 17px; line-height: 1.6; color: #5a6675; }
.wh-video-cadre {
position: relative;
border-radius: 18px;
overflow: hidden;
background: #16404b;
border: 1px solid #ece6dc;
box-shadow: 0 18px 44px rgba(26, 35, 50, .12);
}
.wh-video {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
background: #16404b;
}
@media (max-width: 640px) {
.wh-video-section { padding: 44px 0 8px; }
.wh-video-cadre { border-radius: 14px; }
}
/* Bouton de lecture pose par-dessus l'affiche. Il disparait des que la
lecture part, laissant les commandes natives. */
.wh-video-play {
position: absolute; inset: 0; z-index: 2;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
width: 100%; border: 0; padding: 0; cursor: pointer;
background: linear-gradient(180deg, rgba(22,64,75,.14) 0%, rgba(22,64,75,.42) 100%);
font: inherit; color: #fff;
transition: opacity .2s;
}
.wh-video-play-rond {
display: inline-flex; align-items: center; justify-content: center;
width: 84px; height: 84px; border-radius: 999px;
background: #EE6C4D; color: #fff;
box-shadow: 0 12px 30px rgba(0,0,0,.28);
transition: scale .18s;
padding-left: 5px; /* le triangle parait decentre sans ce rattrapage */
}
.wh-video-play:hover .wh-video-play-rond { scale: 1.06; }
.wh-video-play-texte { font-size: 16px; font-weight: 600; letter-spacing: .01em; }
/* L'affiche ne disparait qu'une fois la lecture confirmee, pas au clic. */
.wh-video-cadre.lance .wh-video-play { opacity: 0; pointer-events: none; }
/* Etat de chargement : le rond devient un anneau qui tourne, pour que la
seconde d'attente se lise comme un chargement et non comme une panne. */
.wh-video-cadre.chargement .wh-video-play-rond svg { display: none; }
.wh-video-cadre.chargement .wh-video-play-rond::after {
content: '';
width: 34px; height: 34px;
border: 3px solid rgba(255,255,255,.35);
border-top-color: #fff;
border-radius: 999px;
animation: wh-tourne .8s linear infinite;
}
.wh-video-cadre.chargement .wh-video-play-texte { opacity: .8; }
@keyframes wh-tourne { to { rotate: 360deg; } }