/**
* AccesID WOW Design System
* Extracted and productionized from tarifs.html + etablissements.html
*
* @package AccesID
* @since 1.0.3
*/
/* =============================================================================
FOUNDATION — font, tokens, reset
============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root {
--acc-primary: #6366f1;
--acc-primary-dark: #4f46e5;
--acc-secondary: #10b981;
--acc-secondary-dark: #059669;
--acc-purple-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
--acc-green-grad: linear-gradient(135deg, #10b981 0%, #059669 100%);
--acc-orange-grad: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
--acc-slate-50: #f8fafc;
--acc-slate-100: #f1f5f9;
--acc-slate-200: #e2e8f0;
--acc-slate-300: #cbd5e1;
--acc-slate-500: #64748b;
--acc-slate-700: #334155;
--acc-slate-900: #1e293b;
--acc-radius-sm: 8px;
--acc-radius-md: 16px;
--acc-radius-lg: 24px;
--acc-radius-full: 9999px;
--acc-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
--acc-shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--acc-shadow-lg: 0 10px 30px rgba(99,102,241,0.2);
--acc-shadow-xl: 0 25px 60px rgba(16,185,129,0.15);
--acc-transition: all 0.3s ease;
}
.accesid-hero,
.accesid-section,
.accesid-stats-strip,
.accesid-cta-banner,
.accesid-auth-container,
.accesid-account,
.accesid-categories,
.accesid-benefits,
.accesid-how-it-works {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--acc-slate-900);
line-height: 1.6;
}
.accesid-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
}
/* =============================================================================
BUTTONS
============================================================================= */
.accesid-btn {
display: inline-block;
padding: 12px 28px;
border-radius: var(--acc-radius-full);
font-weight: 600;
font-size: 0.95rem;
text-decoration: none !important;
cursor: pointer;
border: none;
transition: var(--acc-transition);
text-align: center;
font-family: inherit;
line-height: 1;
}
.accesid-btn-lg { padding: 16px 40px; font-size: 1.05rem; }
.accesid-btn-full { display: block; width: 100%; }
.accesid-btn-primary {
background: var(--acc-purple-grad);
color: #fff !important;
}
.accesid-btn-primary:hover {
transform: translateY(-2px);
box-shadow: var(--acc-shadow-lg);
}
.accesid-btn-outline {
color: var(--acc-primary) !important;
border: 2px solid var(--acc-primary);
background: transparent;
}
.accesid-btn-outline:hover {
background: var(--acc-primary);
color: #fff !important;
}
.accesid-btn-white {
background: #fff;
color: var(--acc-primary) !important;
}
.accesid-btn-white:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(0,0,0,0.25);
}
.accesid-btn-outline-white {
background: transparent;
color: #fff !important;
border: 2px solid rgba(255,255,255,0.8);
}
.accesid-btn-outline-white:hover {
background: #fff;
color: var(--acc-primary) !important;
}
/* =============================================================================
HERO
============================================================================= */
.accesid-hero {
padding: 140px 20px 100px;
color: #fff;
position: relative;
overflow: hidden;
}
.accesid-hero-deco {
position: absolute;
right: -200px;
top: -200px;
width: 600px;
height: 600px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
pointer-events: none;
}
.accesid-hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 1;
}
.accesid-hero-title {
font-size: 3.2rem;
font-weight: 800;
margin: 0 0 24px;
line-height: 1.1;
color: #fff;
}
.accesid-hero-subtitle {
font-size: 1.25rem;
opacity: 0.95;
margin: 0 0 32px;
line-height: 1.6;
}
.accesid-hero-cta {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.accesid-hero-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.accesid-hero-stat {
background: rgba(255,255,255,0.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 28px 20px;
border-radius: var(--acc-radius-md);
text-align: center;
border: 1px solid rgba(255,255,255,0.15);
}
.accesid-hero-stat-number {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 4px;
}
.accesid-hero-stat-label {
font-size: 0.95rem;
opacity: 0.9;
}
/* =============================================================================
SEARCH BAR
============================================================================= */
.accesid-search-hero {
max-width: 800px;
margin: -40px auto 0;
position: relative;
z-index: 10;
padding: 0 20px;
}
.accesid-search-form {
background: #fff;
border-radius: var(--acc-radius-full);
padding: 8px;
display: flex;
align-items: center;
gap: 4px;
box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.accesid-search-icon {
padding: 0 16px;
color: var(--acc-slate-500);
display: flex;
align-items: center;
}
.accesid-search-input {
flex: 1;
border: none;
outline: none;
padding: 14px 8px;
font-size: 1rem;
font-family: inherit;
background: transparent;
color: var(--acc-slate-900);
}
.accesid-search-input::placeholder { color: var(--acc-slate-500); }
.accesid-search-locate {
background: var(--acc-slate-100);
border: none;
width: 44px;
height: 44px;
border-radius: 50%;
cursor: pointer;
color: var(--acc-slate-700);
display: flex;
align-items: center;
justify-content: center;
transition: var(--acc-transition);
}
.accesid-search-locate:hover {
background: var(--acc-primary);
color: #fff;
}
.accesid-search-submit {
padding: 14px 32px;
}
.accesid-search-filters-quick {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
margin-top: 20px;
justify-content: center;
}
.accesid-search-filters-label {
font-size: 0.9rem;
color: #fff;
opacity: 0.9;
font-weight: 500;
}
.accesid-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: rgba(255,255,255,0.2);
backdrop-filter: blur(10px);
border-radius: var(--acc-radius-full);
cursor: pointer;
font-size: 0.85rem;
color: #fff;
transition: var(--acc-transition);
border: 1px solid rgba(255,255,255,0.2);
}
.accesid-chip input { display: none; }
.accesid-chip:has(input:checked),
.accesid-chip input:checked + span {
background: #fff;
color: var(--acc-primary);
}
/* =============================================================================
SECTIONS génériques
============================================================================= */
.accesid-section {
padding: 100px 20px;
background: #fff;
}
.accesid-section:nth-of-type(even) { background: var(--acc-slate-50); }
.accesid-section-header {
text-align: center;
max-width: 720px;
margin: 0 auto 60px;
}
.accesid-section-badge {
display: inline-block;
background: rgba(99,102,241,0.1);
color: var(--acc-primary);
padding: 8px 20px;
border-radius: var(--acc-radius-full);
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 16px;
}
.accesid-section-title {
font-size: 2.8rem;
font-weight: 800;
margin: 0 0 16px;
color: var(--acc-slate-900);
line-height: 1.2;
}
.accesid-section-subtitle {
font-size: 1.15rem;
color: var(--acc-slate-500);
line-height: 1.6;
margin: 0;
}
/* =============================================================================
CATEGORIES GRID
============================================================================= */
.accesid-categories-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
}
.accesid-category-card {
background: #fff;
padding: 28px 16px;
border-radius: var(--acc-radius-md);
text-align: center;
text-decoration: none !important;
color: var(--acc-slate-900) !important;
transition: var(--acc-transition);
border: 1px solid var(--acc-slate-200);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.accesid-category-card:hover {
transform: translateY(-6px);
box-shadow: var(--acc-shadow-lg);
border-color: var(--acc-primary);
}
.accesid-category-icon {
font-size: 2.5rem;
line-height: 1;
}
.accesid-category-name {
font-weight: 600;
font-size: 0.95rem;
}
.accesid-category-count {
font-size: 0.8rem;
color: var(--acc-slate-500);
}
/* =============================================================================
STATS STRIP
============================================================================= */
.accesid-stats-strip {
padding: 60px 20px;
background: var(--acc-slate-900);
color: #fff;
}
.accesid-stats-strip-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
text-align: center;
}
.accesid-stats-strip-number {
font-size: 3rem;
font-weight: 800;
background: var(--acc-purple-grad);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-bottom: 8px;
}
.accesid-stats-strip-label {
font-size: 0.95rem;
opacity: 0.8;
}
/* =============================================================================
HOW IT WORKS
============================================================================= */
.accesid-steps-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.accesid-step {
background: #fff;
padding: 32px 24px;
border-radius: var(--acc-radius-md);
text-align: center;
border: 1px solid var(--acc-slate-200);
position: relative;
transition: var(--acc-transition);
}
.accesid-step:hover { transform: translateY(-4px); box-shadow: var(--acc-shadow-md); }
.accesid-step-number {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--acc-purple-grad);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.1rem;
}
.accesid-step-icon {
font-size: 3rem;
margin: 20px 0 16px;
line-height: 1;
}
.accesid-step-title {
font-size: 1.2rem;
font-weight: 700;
margin: 0 0 10px;
}
.accesid-step-desc {
color: var(--acc-slate-500);
font-size: 0.95rem;
margin: 0;
}
/* =============================================================================
BENEFITS GRID
============================================================================= */
.accesid-benefits-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.accesid-benefit-card {
text-align: center;
padding: 40px 28px;
border-radius: var(--acc-radius-lg);
transition: var(--acc-transition);
border: 1px solid var(--acc-slate-200);
background: #fff;
}
.accesid-benefit-card:hover {
transform: translateY(-8px);
box-shadow: var(--acc-shadow-xl);
border-color: var(--acc-secondary);
}
.accesid-benefit-icon {
width: 72px;
height: 72px;
background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(5,150,105,0.1));
border-radius: var(--acc-radius-lg);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 2rem;
}
.accesid-benefit-card h3 {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 12px;
}
.accesid-benefit-card p {
color: var(--acc-slate-500);
margin: 0;
line-height: 1.6;
}
/* =============================================================================
CTA BANNER
============================================================================= */
.accesid-cta-banner {
padding: 80px 20px;
text-align: center;
color: #fff;
}
.accesid-cta-banner h2 {
font-size: 2.5rem;
font-weight: 800;
margin: 0 0 16px;
color: #fff;
}
.accesid-cta-banner p {
font-size: 1.2rem;
opacity: 0.95;
margin: 0 0 32px;
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
/* =============================================================================
AUTH (login / signup)
============================================================================= */
.accesid-auth-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
max-width: 1100px;
margin: 40px auto;
background: #fff;
border-radius: var(--acc-radius-lg);
overflow: hidden;
box-shadow: var(--acc-shadow-md);
min-height: 600px;
}
.accesid-auth-card {
padding: 60px 50px;
display: flex;
flex-direction: column;
justify-content: center;
}
.accesid-auth-header h1 {
font-size: 2.2rem;
font-weight: 800;
margin: 0 0 8px;
}
.accesid-auth-header p {
color: var(--acc-slate-500);
margin: 0 0 32px;
}
.accesid-auth-form .accesid-field {
margin-bottom: 20px;
}
.accesid-fields-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.accesid-field label {
display: block;
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 6px;
color: var(--acc-slate-700);
}
.accesid-field-hint {
font-weight: 400;
color: var(--acc-slate-500);
font-size: 0.85rem;
}
.accesid-field input[type="text"],
.accesid-field input[type="email"],
.accesid-field input[type="password"] {
width: 100%;
padding: 14px 16px;
border: 2px solid var(--acc-slate-200);
border-radius: var(--acc-radius-sm);
font-size: 1rem;
font-family: inherit;
transition: border-color 0.2s;
}
.accesid-field input:focus {
outline: none;
border-color: var(--acc-primary);
}
.accesid-field-checkbox label {
display: flex;
align-items: flex-start;
gap: 8px;
font-weight: 400;
cursor: pointer;
}
.accesid-field-checkbox input {
margin-top: 3px;
}
.accesid-field-link {
float: right;
font-size: 0.85rem;
color: var(--acc-primary);
text-decoration: none;
margin-top: -24px;
}
.accesid-auth-footer {
margin-top: 24px;
text-align: center;
padding-top: 24px;
border-top: 1px solid var(--acc-slate-200);
color: var(--acc-slate-500);
font-size: 0.9rem;
}
.accesid-auth-footer a {
color: var(--acc-primary);
font-weight: 600;
}
.accesid-auth-alert {
padding: 12px 16px;
border-radius: var(--acc-radius-sm);
margin-bottom: 16px;
font-size: 0.9rem;
}
.accesid-auth-alert.error {
background: #fee2e2;
color: #991b1b;
}
.accesid-auth-alert.success {
background: #d1fae5;
color: #065f46;
}
.accesid-auth-side {
background: var(--acc-purple-grad);
color: #fff;
padding: 60px 50px;
display: flex;
flex-direction: column;
justify-content: center;
}
.accesid-auth-side-green { background: var(--acc-green-grad); }
.accesid-auth-side h2 {
color: #fff;
margin: 0 0 24px;
font-size: 1.8rem;
font-weight: 700;
}
.accesid-auth-benefits {
list-style: none;
padding: 0;
margin: 0;
}
.accesid-auth-benefits li {
padding: 10px 0;
font-size: 1rem;
opacity: 0.95;
}
.accesid-auth-upsell {
margin-top: 32px;
padding: 16px;
background: rgba(255,255,255,0.15);
backdrop-filter: blur(10px);
border-radius: var(--acc-radius-sm);
font-size: 0.9rem;
opacity: 0.95;
}
/* =============================================================================
ACCOUNT DASHBOARD v2
============================================================================= */
.accesid-account {
display: grid;
grid-template-columns: 280px 1fr;
gap: 0;
max-width: 1200px;
margin: 40px auto;
background: #fff;
border-radius: var(--acc-radius-lg);
overflow: hidden;
box-shadow: var(--acc-shadow-md);
min-height: 700px;
}
.accesid-account-sidebar {
background: var(--acc-slate-50);
padding: 32px 24px;
border-right: 1px solid var(--acc-slate-200);
}
.accesid-account-avatar {
text-align: center;
padding-bottom: 24px;
border-bottom: 1px solid var(--acc-slate-200);
margin-bottom: 24px;
}
.accesid-account-avatar img {
border-radius: 50%;
margin-bottom: 12px;
}
.accesid-account-avatar h2 {
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 4px;
}
.accesid-account-level {
font-size: 0.85rem;
color: var(--acc-slate-500);
margin: 0;
}
.accesid-account-nav a {
display: block;
padding: 10px 14px;
color: var(--acc-slate-700);
text-decoration: none;
border-radius: var(--acc-radius-sm);
margin-bottom: 4px;
font-size: 0.95rem;
transition: var(--acc-transition);
}
.accesid-account-nav a:hover,
.accesid-account-nav a.active {
background: var(--acc-purple-grad);
color: #fff;
}
.accesid-account-logout {
margin-top: 24px;
border-top: 1px solid var(--acc-slate-200);
padding-top: 16px !important;
color: #dc2626 !important;
}
.accesid-account-logout:hover {
background: #fee2e2 !important;
color: #991b1b !important;
}
.accesid-account-main {
padding: 40px 50px;
}
.accesid-account-section {
margin-bottom: 48px;
}
.accesid-account-section h1 {
font-size: 2rem;
font-weight: 800;
margin: 0 0 24px;
}
.accesid-account-section h2 {
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 8px;
}
.accesid-account-section-desc {
color: var(--acc-slate-500);
margin: 0 0 24px;
}
.accesid-account-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 32px;
}
.accesid-account-stat {
background: var(--acc-slate-50);
padding: 20px;
border-radius: var(--acc-radius-md);
text-align: center;
}
.accesid-account-stat-icon {
font-size: 1.8rem;
margin-bottom: 6px;
}
.accesid-account-stat-value {
font-size: 1.8rem;
font-weight: 800;
color: var(--acc-slate-900);
}
.accesid-account-stat-label {
font-size: 0.85rem;
color: var(--acc-slate-500);
}
.accesid-account-cta {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.accesid-profile-groups {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
margin-bottom: 24px;
}
.accesid-profile-group {
border: 1px solid var(--acc-slate-200);
border-radius: var(--acc-radius-md);
padding: 20px;
}
.accesid-profile-group legend {
font-weight: 700;
padding: 0 8px;
font-size: 0.95rem;
}
.accesid-profile-group label {
display: block;
padding: 8px 0;
font-size: 0.95rem;
cursor: pointer;
}
.accesid-profile-group label:hover { color: var(--acc-primary); }
.accesid-profile-group input { margin-right: 8px; }
.accesid-profile-status {
display: inline-block;
margin-left: 16px;
padding: 8px 14px;
border-radius: var(--acc-radius-full);
background: #d1fae5;
color: #065f46;
font-size: 0.85rem;
font-weight: 600;
}
/* =============================================================================
RESPONSIVE
============================================================================= */
@media (max-width: 960px) {
.accesid-hero-grid { grid-template-columns: 1fr; }
.accesid-hero-stats { grid-template-columns: repeat(2, 1fr); }
.accesid-hero-title { font-size: 2.4rem; }
.accesid-categories-grid { grid-template-columns: repeat(3, 1fr); }
.accesid-steps-grid { grid-template-columns: repeat(2, 1fr); }
.accesid-benefits-grid { grid-template-columns: 1fr; }
.accesid-stats-strip-grid { grid-template-columns: repeat(2, 1fr); }
.accesid-auth-container { grid-template-columns: 1fr; }
.accesid-auth-side { display: none; }
.accesid-account { grid-template-columns: 1fr; }
.accesid-account-stats { grid-template-columns: repeat(2, 1fr); }
.accesid-account-main { padding: 24px 20px; }
}
@media (max-width: 560px) {
.accesid-categories-grid { grid-template-columns: repeat(2, 1fr); }
.accesid-steps-grid { grid-template-columns: 1fr; }
.accesid-stats-strip-grid { grid-template-columns: 1fr; }
.accesid-hero-title { font-size: 1.9rem; }
.accesid-section-title { font-size: 2rem; }
.accesid-section { padding: 60px 20px; }
.accesid-fields-row { grid-template-columns: 1fr; }
.accesid-auth-card { padding: 40px 24px; }
}
/* =============================================================================
SOCIAL AUTH BUTTONS (v1.0.6)
============================================================================= */
.accesid-social-buttons {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0 0 24px;
}
.accesid-social-layout-compact {
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
.accesid-social-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 20px;
border-radius: var(--acc-radius-full);
font-weight: 600;
font-size: 0.95rem;
text-decoration: none !important;
border: 1.5px solid var(--acc-slate-200);
background: #fff;
color: var(--acc-slate-900) !important;
transition: var(--acc-transition);
font-family: inherit;
cursor: pointer;
}
.accesid-social-btn:hover {
transform: translateY(-2px);
box-shadow: var(--acc-shadow-md);
border-color: var(--acc-slate-300);
}
.accesid-social-btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.accesid-social-btn-label {
font-weight: 600;
}
.accesid-social-layout-compact .accesid-social-btn {
width: 52px;
height: 52px;
padding: 0;
border-radius: 50%;
justify-content: center;
}
.accesid-social-layout-compact .accesid-social-btn-label { display: none; }
/* Brand-specific accents on hover */
.accesid-social-btn-google:hover { border-color: #EA4335; }
.accesid-social-btn-facebook:hover { border-color: #1877F2; }
.accesid-social-btn-linkedin:hover { border-color: #0A66C2; }
.accesid-social-btn-apple { background: #000; color: #fff !important; border-color: #000; }
.accesid-social-btn-apple:hover { background: #1a1a1a; border-color: #1a1a1a; }
.accesid-social-btn-apple .accesid-social-btn-icon svg { color: #fff; }
/* Separator "ou" */
.accesid-social-separator {
display: flex;
align-items: center;
gap: 12px;
margin: 4px 0;
color: var(--acc-slate-500);
font-size: 0.85rem;
}
.accesid-social-separator::before,
.accesid-social-separator::after {
content: "";
flex: 1;
height: 1px;
background: var(--acc-slate-200);
}
/* =============================================================================
EMAIL AUTH FLOWS (v1.0.8) — Magic Link / Reset / Verify
============================================================================= */
.accesid-magic-link-container {
max-width: 480px;
margin: 60px auto;
padding: 0 20px;
}
.accesid-magic-link-card {
background: #fff;
padding: 48px 40px;
border-radius: var(--acc-radius-lg);
box-shadow: var(--acc-shadow-md);
text-align: center;
}
.accesid-magic-link-icon {
font-size: 3rem;
margin-bottom: 16px;
display: block;
}
.accesid-magic-link-card h2 {
font-size: 1.6rem;
font-weight: 800;
margin: 0 0 8px;
}
.accesid-magic-link-card > p {
color: var(--acc-slate-500);
margin: 0 0 24px;
}
.accesid-magic-link-input {
width: 100%;
padding: 14px 16px;
border: 2px solid var(--acc-slate-200);
border-radius: var(--acc-radius-sm);
font-size: 1rem;
font-family: inherit;
margin-bottom: 12px;
box-sizing: border-box;
}
.accesid-magic-link-input:focus { outline: none; border-color: var(--acc-primary); }
.accesid-magic-link-footer {
margin-top: 24px;
font-size: 0.9rem;
color: var(--acc-slate-500);
}
.accesid-magic-link-alert {
padding: 12px 16px;
border-radius: var(--acc-radius-sm);
margin-bottom: 16px;
font-size: 0.9rem;
text-align: left;
}
.accesid-magic-link-alert.success { background: #d1fae5; color: #065f46; }
.accesid-magic-link-alert.error { background: #fee2e2; color: #991b1b; }
/* Auth single column (no side panel) — for reset/forgot pages */
.accesid-auth-single {
grid-template-columns: 1fr !important;
max-width: 520px !important;
}
.accesid-auth-single .accesid-auth-card { padding: 50px 40px; }
/* =============================================================================
v1.0.9 — Subscription, Pricing, 2FA, Analytics, Upsell
============================================================================= */
/* Subscription card in account */
.accesid-subscription-card {
background: var(--acc-slate-50);
padding: 24px;
border-radius: var(--acc-radius-md);
border: 2px solid var(--acc-slate-200);
}
.accesid-subscription-card.accesid-plan-liberte,
.accesid-subscription-card.accesid-plan-autonomie {
background: linear-gradient(135deg, rgba(99,102,241,.05), rgba(139,92,246,.05));
border-color: var(--acc-primary);
}
.accesid-subscription-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.accesid-subscription-tier { font-size: 1.5rem; font-weight: 800; }
.accesid-subscription-price { color: var(--acc-slate-500); margin-left: 8px; font-size: 1rem; }
.accesid-subscription-status {
padding: 4px 12px;
border-radius: var(--acc-radius-full);
font-size: 0.85rem;
font-weight: 600;
background: #d1fae5;
color: #065f46;
}
.accesid-subscription-status.status-past_due { background: #fef3c7; color: #92400e; }
.accesid-subscription-status.status-canceled { background: #fee2e2; color: #991b1b; }
.accesid-subscription-period {
color: var(--acc-slate-500);
font-size: 0.9rem;
margin: 0 0 16px;
}
.accesid-subscription-usage {
background: #fff;
padding: 16px;
border-radius: var(--acc-radius-sm);
margin-bottom: 16px;
}
.accesid-usage-row {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid var(--acc-slate-200);
}
.accesid-usage-row:last-child { border-bottom: none; }
.accesid-subscription-actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* Pricing dynamic */
.accesid-pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 40px;
}
.accesid-pricing-card {
background: #fff;
padding: 40px 28px;
border-radius: var(--acc-radius-lg);
border: 2px solid var(--acc-slate-200);
position: relative;
transition: var(--acc-transition);
display: flex;
flex-direction: column;
}
.accesid-pricing-card:hover { transform: translateY(-4px); box-shadow: var(--acc-shadow-lg); }
.accesid-pricing-card.is-featured {
background: var(--acc-purple-grad);
color: #fff;
border-color: transparent;
transform: scale(1.05);
}
.accesid-pricing-card.is-featured h3,
.accesid-pricing-card.is-featured .accesid-pricing-amount,
.accesid-pricing-card.is-featured .accesid-pricing-period { color: #fff; }
.accesid-pricing-card.is-featured .accesid-pricing-features li { color: rgba(255,255,255,0.95); }
.accesid-pricing-card.is-current {
border-color: var(--acc-secondary);
box-shadow: 0 0 0 4px rgba(16,185,129,0.15);
}
.accesid-pricing-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
padding: 6px 16px;
border-radius: var(--acc-radius-full);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.accesid-pricing-badge-current { background: var(--acc-secondary); color: #fff; }
.accesid-pricing-badge-featured { background: #fbbf24; color: #1e293b; }
.accesid-pricing-icon { font-size: 2.5rem; margin-bottom: 12px; }
.accesid-pricing-name { font-size: 1.3rem; font-weight: 800; margin: 0 0 8px; }
.accesid-pricing-price { margin: 16px 0 24px; }
.accesid-pricing-amount { font-size: 2.5rem; font-weight: 800; color: var(--acc-slate-900); }
.accesid-pricing-period { color: var(--acc-slate-500); font-size: 0.95rem; margin-left: 4px; }
.accesid-pricing-features { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.accesid-pricing-features li { padding: 8px 0; font-size: 0.95rem; }
.accesid-pricing-cta { margin-top: auto; }
.accesid-btn-disabled {
background: var(--acc-slate-100) !important;
color: var(--acc-slate-500) !important;
cursor: not-allowed;
pointer-events: none;
}
/* Security grid */
.accesid-security-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.accesid-security-item {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
background: var(--acc-slate-50);
border-radius: var(--acc-radius-md);
}
.accesid-security-icon { font-size: 1.8rem; }
.accesid-security-body { flex: 1; }
.accesid-security-body strong { display: block; margin-bottom: 4px; }
.accesid-security-body p { margin: 0; color: var(--acc-slate-500); font-size: 0.9rem; }
.accesid-btn-sm { padding: 8px 16px; font-size: 0.85rem; }
.accesid-linked-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: #fff;
border-radius: var(--acc-radius-full);
font-size: 0.85rem;
margin-right: 4px;
border: 1px solid var(--acc-slate-200);
}
.accesid-unlink-btn {
background: none;
border: none;
cursor: pointer;
color: var(--acc-slate-500);
font-size: 0.85rem;
padding: 0;
}
.accesid-unlink-btn:hover { color: #dc2626; }
/* Upsell card */
.accesid-upsell-card {
background: linear-gradient(135deg, rgba(99,102,241,.05), rgba(139,92,246,.05));
padding: 40px 32px;
border-radius: var(--acc-radius-lg);
text-align: center;
border: 2px dashed var(--acc-primary);
margin: 24px 0;
}
.accesid-upsell-icon { font-size: 3rem; margin-bottom: 12px; }
.accesid-upsell-title { font-size: 1.4rem; font-weight: 800; margin: 0 0 8px; }
.accesid-upsell-desc { color: var(--acc-slate-500); margin: 0 0 16px; }
.accesid-upsell-plan {
display: inline-flex;
gap: 8px;
padding: 8px 16px;
background: #fff;
border-radius: var(--acc-radius-full);
margin: 16px 0 24px;
font-size: 0.9rem;
}
.accesid-upsell-plan-price { font-weight: 700; color: var(--acc-primary); }
/* 2FA setup */
.accesid-2fa-container {
max-width: 640px;
margin: 60px auto;
padding: 0 20px;
}
.accesid-2fa-active {
text-align: center;
background: #fff;
padding: 40px;
border-radius: var(--acc-radius-lg);
box-shadow: var(--acc-shadow-md);
}
.accesid-2fa-icon { font-size: 4rem; margin-bottom: 12px; }
.accesid-2fa-recovery-info {
background: var(--acc-slate-50);
padding: 16px;
border-radius: var(--acc-radius-sm);
margin: 24px 0;
}
.accesid-warn { color: #ea580c; font-weight: 700; }
.accesid-warning { color: #991b1b; padding: 8px; background: #fee2e2; border-radius: var(--acc-radius-sm); margin: 8px 0; }
.accesid-2fa-disable-form {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--acc-slate-200);
text-align: left;
}
.accesid-2fa-disable-form input[type=password] {
width: 100%;
padding: 12px;
border: 2px solid var(--acc-slate-200);
border-radius: var(--acc-radius-sm);
margin: 12px 0;
box-sizing: border-box;
}
.accesid-2fa-steps {
list-style: none;
counter-reset: step;
padding: 0;
}
.accesid-2fa-steps > li {
background: #fff;
padding: 24px;
margin-bottom: 16px;
border-radius: var(--acc-radius-md);
box-shadow: var(--acc-shadow-sm);
}
.accesid-2fa-qr-area { text-align: center; padding: 20px; }
.accesid-2fa-qr img { display: block; margin: 0 auto 16px; max-width: 240px; }
.accesid-2fa-secret-text {
display: inline-block;
padding: 8px 12px;
background: var(--acc-slate-100);
border-radius: var(--acc-radius-sm);
user-select: all;
font-family: monospace;
font-size: 0.95rem;
letter-spacing: 0.05em;
}
.accesid-2fa-confirm-form input[name=code] {
font-size: 1.5rem;
text-align: center;
letter-spacing: 0.5em;
padding: 12px;
width: 200px;
border: 2px solid var(--acc-slate-200);
border-radius: var(--acc-radius-sm);
}
.accesid-2fa-recovery-list {
background: #fef3c7;
padding: 16px;
border-radius: var(--acc-radius-sm);
font-family: monospace;
margin: 16px 0;
}
.accesid-2fa-recovery-list code {
display: block;
padding: 4px;
font-size: 1.05rem;
letter-spacing: 0.05em;
}
/* Business analytics dashboard */
.accesid-business-dashboard { max-width: 1100px; margin: 40px auto; padding: 0 20px; }
.accesid-business-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32px;
flex-wrap: wrap;
gap: 16px;
}
.accesid-business-header h1 { margin: 0; }
#accesid-place-selector {
padding: 10px 16px;
border: 2px solid var(--acc-slate-200);
border-radius: var(--acc-radius-sm);
font-size: 1rem;
background: #fff;
}
.accesid-business-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.accesid-business-stat,
.accesid-business-detail {
background: #fff;
padding: 24px 20px;
border-radius: var(--acc-radius-md);
text-align: center;
box-shadow: var(--acc-shadow-sm);
}
.accesid-business-stat-icon,
.accesid-business-detail-icon { font-size: 2rem; margin-bottom: 8px; }
.accesid-business-stat-value { font-size: 2rem; font-weight: 800; color: var(--acc-primary); }
.accesid-business-detail-value { font-size: 1.5rem; font-weight: 700; color: var(--acc-slate-900); }
.accesid-business-stat-label,
.accesid-business-detail-label { font-size: 0.85rem; color: var(--acc-slate-500); margin-top: 4px; }
.accesid-business-detail-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.accesid-business-chart {
background: #fff;
padding: 20px;
border-radius: var(--acc-radius-md);
box-shadow: var(--acc-shadow-sm);
}
.accesid-chart-legend {
margin-top: 12px;
font-size: 0.85rem;
color: var(--acc-slate-500);
}
.accesid-business-footer-note {
margin-top: 32px;
text-align: center;
color: var(--acc-slate-500);
font-size: 0.85rem;
}
@media (max-width: 960px) {
.accesid-pricing-grid { grid-template-columns: 1fr; }
.accesid-pricing-card.is-featured { transform: none; }
.accesid-business-stats-grid,
.accesid-business-detail-grid { grid-template-columns: repeat(2, 1fr); }
}
/* =============================================================================
v1.1.0 — MAP V2 : Carte plein écran style AccessNow / Google Maps
============================================================================= */
.accesid-mapv2-app {
display: grid;
grid-template-columns: 380px 1fr;
grid-template-rows: 1fr;
width: 100%;
height: 100vh;
max-height: 100vh;
background: var(--acc-slate-50);
position: relative;
overflow: hidden;
}
/* ------ SIDEBAR GAUCHE ------ */
.accesid-mapv2-sidebar {
background: #fff;
border-right: 1px solid var(--acc-slate-200);
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 20;
}
.accesid-mapv2-sidebar-header {
padding: 16px;
border-bottom: 1px solid var(--acc-slate-200);
background: #fff;
position: relative;
}
.accesid-mapv2-search {
display: flex;
align-items: center;
background: var(--acc-slate-50);
border: 2px solid var(--acc-slate-200);
border-radius: 999px;
padding: 4px 4px 4px 16px;
transition: var(--acc-transition);
}
.accesid-mapv2-search:focus-within {
border-color: var(--acc-primary);
background: #fff;
box-shadow: 0 0 0 4px rgba(99,102,241,.1);
}
.accesid-mapv2-search-icon { color: var(--acc-slate-500); margin-right: 8px; }
.accesid-mapv2-search-input {
flex: 1;
border: none;
background: transparent;
padding: 10px 0;
font-size: 15px;
outline: none;
font-family: inherit;
color: var(--acc-slate-900);
}
.accesid-mapv2-search-locate {
background: var(--acc-primary);
color: #fff;
border: none;
width: 38px;
height: 38px;
border-radius: 50%;
cursor: pointer;
font-size: 16px;
transition: var(--acc-transition);
}
.accesid-mapv2-search-locate:hover { background: #4f46e5; transform: scale(1.05); }
.accesid-mapv2-search-suggestions {
position: absolute;
top: calc(100% - 8px);
left: 16px;
right: 16px;
background: #fff;
border-radius: var(--acc-radius-md);
box-shadow: var(--acc-shadow-lg);
max-height: 320px;
overflow-y: auto;
z-index: 30;
}
.accesid-mapv2-search-suggest {
display: block;
width: 100%;
text-align: left;
padding: 12px 16px;
background: none;
border: none;
border-bottom: 1px solid var(--acc-slate-100);
cursor: pointer;
font-size: 14px;
color: var(--acc-slate-900);
transition: background .15s;
}
.accesid-mapv2-search-suggest:hover { background: var(--acc-slate-50); }
.accesid-mapv2-search-suggest:last-child { border-bottom: none; }
/* ------ TABS ------ */
.accesid-mapv2-tabs {
display: flex;
border-bottom: 1px solid var(--acc-slate-200);
background: #fff;
}
.accesid-mapv2-tab {
flex: 1;
background: none;
border: none;
padding: 14px 8px;
font-size: 14px;
font-weight: 600;
color: var(--acc-slate-500);
cursor: pointer;
border-bottom: 3px solid transparent;
transition: var(--acc-transition);
font-family: inherit;
}
.accesid-mapv2-tab:hover { background: var(--acc-slate-50); }
.accesid-mapv2-tab.active {
color: var(--acc-primary);
border-bottom-color: var(--acc-primary);
}
.accesid-mapv2-list-count {
display: inline-block;
margin-left: 4px;
padding: 2px 8px;
background: var(--acc-slate-100);
border-radius: 999px;
font-size: 12px;
color: var(--acc-slate-700);
}
.accesid-mapv2-tab.active .accesid-mapv2-list-count { background: var(--acc-primary); color: #fff; }
.accesid-mapv2-tab-panel {
flex: 1;
overflow-y: auto;
display: none;
padding: 16px;
}
.accesid-mapv2-tab-panel.active { display: block; }
/* ------ FILTERS ------ */
.accesid-mapv2-filter-section { margin-bottom: 28px; }
.accesid-mapv2-filter-section h3 {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--acc-slate-500);
margin: 0 0 12px;
display: flex;
align-items: center;
justify-content: space-between;
}
.accesid-mapv2-lock-icon { font-size: 14px; }
.accesid-mapv2-categories {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.accesid-mapv2-cat-chip {
cursor: pointer;
user-select: none;
}
.accesid-mapv2-cat-chip input { display: none; }
.accesid-mapv2-cat-chip span {
display: inline-block;
padding: 7px 12px;
background: var(--acc-slate-50);
border: 2px solid var(--acc-slate-200);
border-radius: 999px;
font-size: 13px;
font-weight: 500;
color: var(--acc-slate-700);
transition: var(--acc-transition);
}
.accesid-mapv2-cat-chip:hover span { border-color: var(--cat-color); }
.accesid-mapv2-cat-chip input:checked + span {
background: var(--cat-color);
color: #fff;
border-color: var(--cat-color);
}
.accesid-mapv2-access-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.accesid-mapv2-access-chip {
cursor: pointer;
user-select: none;
}
.accesid-mapv2-access-chip input { display: none; }
.accesid-mapv2-access-chip span {
display: block;
padding: 10px 12px;
background: var(--acc-slate-50);
border: 2px solid var(--acc-slate-200);
border-radius: var(--acc-radius-sm);
font-size: 13px;
text-align: center;
transition: var(--acc-transition);
}
.accesid-mapv2-access-chip input:checked + span {
background: var(--acc-primary);
color: #fff;
border-color: var(--acc-primary);
}
.accesid-mapv2-tiers { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.accesid-mapv2-tier-radio {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: var(--acc-slate-50);
border-radius: var(--acc-radius-sm);
cursor: pointer;
font-size: 14px;
transition: var(--acc-transition);
}
.accesid-mapv2-tier-radio:has(input:checked) { background: rgba(99,102,241,.1); color: var(--acc-primary); font-weight: 600; }
.accesid-mapv2-verified-toggle {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: var(--acc-slate-50);
border-radius: var(--acc-radius-sm);
cursor: pointer;
font-size: 13px;
}
.accesid-mapv2-verified-toggle:has(input:checked) { background: rgba(16,185,129,.1); color: #047857; font-weight: 600; }
.accesid-mapv2-locked { opacity: .6; }
.accesid-mapv2-locked input { cursor: not-allowed; }
.accesid-mapv2-locked-msg {
margin-top: 8px;
padding: 10px 12px;
background: rgba(99,102,241,.05);
border-radius: var(--acc-radius-sm);
font-size: 12px;
color: var(--acc-slate-700);
}
.accesid-mapv2-locked-msg a { color: var(--acc-primary); font-weight: 600; }
.accesid-mapv2-reset-filters { margin-top: 16px; }
/* ------ LIST ------ */
.accesid-mapv2-list {
display: flex;
flex-direction: column;
}
.accesid-mapv2-list-empty {
text-align: center;
color: var(--acc-slate-500);
padding: 40px 20px;
font-size: 14px;
}
.accesid-mapv2-list-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: #fff;
border: 2px solid transparent;
border-radius: var(--acc-radius-md);
cursor: pointer;
text-align: left;
width: 100%;
transition: var(--acc-transition);
font-family: inherit;
margin-bottom: 6px;
}
.accesid-mapv2-list-item:hover {
border-color: var(--acc-primary);
background: var(--acc-slate-50);
transform: translateY(-1px);
}
.accesid-mapv2-list-icon {
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.accesid-mapv2-list-body { flex: 1; min-width: 0; }
.accesid-mapv2-list-body strong {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--acc-slate-900);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 2px;
}
.accesid-mapv2-list-body small {
display: block;
font-size: 12px;
color: var(--acc-slate-500);
}
.accesid-mapv2-list-verified {
display: inline-block;
background: #d1fae5;
color: #047857;
font-size: 10px;
padding: 1px 5px;
border-radius: 999px;
margin-left: 4px;
vertical-align: middle;
}
.accesid-mapv2-list-score {
background: var(--acc-primary);
color: #fff;
padding: 4px 10px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
flex-shrink: 0;
}
.accesid-mapv2-list-more {
text-align: center;
color: var(--acc-slate-500);
font-size: 12px;
padding: 12px;
}
/* ------ CANVAS ------ */
.accesid-mapv2-canvas {
position: relative;
overflow: hidden;
}
.accesid-mapv2-map { width: 100%; height: 100%; }
.accesid-mapv2-loading {
position: absolute;
top: 16px;
left: 50%;
transform: translateX(-50%);
background: #fff;
padding: 8px 16px;
border-radius: 999px;
box-shadow: var(--acc-shadow-md);
font-size: 13px;
z-index: 10;
display: none;
align-items: center;
}
.accesid-mapv2-mobile-toggle {
display: none;
position: absolute;
bottom: 80px;
right: 16px;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--acc-primary);
color: #fff;
border: none;
font-size: 24px;
box-shadow: var(--acc-shadow-lg);
cursor: pointer;
z-index: 15;
}
.accesid-mapv2-gating-banner {
position: absolute;
bottom: 16px;
left: 16px;
right: 16px;
background: linear-gradient(135deg, rgba(99,102,241,.95), rgba(139,92,246,.95));
color: #fff;
padding: 12px 20px;
border-radius: var(--acc-radius-md);
box-shadow: var(--acc-shadow-lg);
font-size: 14px;
text-align: center;
z-index: 12;
backdrop-filter: blur(8px);
}
.accesid-mapv2-gating-banner a {
color: #fff;
font-weight: 700;
text-decoration: underline;
}
/* ------ DETAIL PANEL (sidebar droite desktop / bottom sheet mobile) ------ */
.accesid-mapv2-detail {
position: absolute;
top: 0;
right: 0;
width: 420px;
height: 100%;
background: #fff;
box-shadow: -4px 0 24px rgba(0,0,0,.08);
transform: translateX(100%);
transition: transform .32s cubic-bezier(.32,.72,.28,1);
z-index: 25;
overflow-y: auto;
}
.accesid-mapv2-detail.is-open { transform: translateX(0); }
.accesid-mapv2-detail-close {
position: absolute;
top: 12px;
right: 12px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(0,0,0,.7);
color: #fff;
border: none;
cursor: pointer;
font-size: 16px;
z-index: 5;
backdrop-filter: blur(8px);
}
.accesid-mapv2-detail-drag { display: none; }
.accesid-mapv2-detail-loading { padding: 60px; text-align: center; font-size: 30px; }
.accesid-mapv2-detail-hero {
height: 240px;
background: var(--acc-slate-200) center/cover no-repeat;
background-image: linear-gradient(135deg, #e0e7ff, #f3e8ff);
}
.accesid-mapv2-detail-hero-empty {
display: flex;
align-items: center;
justify-content: center;
font-size: 60px;
color: var(--acc-slate-300);
}
.accesid-mapv2-detail-body { padding: 24px; }
.accesid-mapv2-detail-cat {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
margin-bottom: 8px;
}
.accesid-mapv2-detail-body h1 {
font-size: 24px;
font-weight: 800;
margin: 0 0 8px;
color: var(--acc-slate-900);
line-height: 1.2;
}
.accesid-mapv2-detail-address {
color: var(--acc-slate-500);
font-size: 14px;
margin: 0 0 20px;
}
.accesid-mapv2-detail-actions {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin: 0 0 24px;
}
.accesid-mapv2-action {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 14px 8px;
background: var(--acc-slate-50);
border: 2px solid var(--acc-slate-200);
border-radius: var(--acc-radius-md);
text-decoration: none;
color: var(--acc-slate-900);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: var(--acc-transition);
font-family: inherit;
}
.accesid-mapv2-action span:first-child { font-size: 22px; }
.accesid-mapv2-action:hover {
border-color: var(--acc-primary);
background: rgba(99,102,241,.05);
transform: translateY(-2px);
}
.accesid-mapv2-action-primary {
background: var(--acc-primary);
color: #fff;
border-color: var(--acc-primary);
grid-column: span 2;
flex-direction: row;
justify-content: center;
}
.accesid-mapv2-action-primary:hover {
background: #4f46e5;
color: #fff;
}
.accesid-mapv2-action-fav[data-favorited="1"] {
background: rgba(251,191,36,.15);
border-color: #fbbf24;
}
.accesid-mapv2-detail-score {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
background: var(--acc-slate-50);
border-radius: var(--acc-radius-md);
margin: 0 0 24px;
}
.accesid-mapv2-score-circle {
width: 80px;
height: 80px;
position: relative;
flex-shrink: 0;
}
.accesid-mapv2-score-circle svg { width: 100%; height: 100%; }
.accesid-mapv2-score-num {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 22px;
font-weight: 800;
color: var(--score-color);
}
.accesid-mapv2-score-meta strong { display: block; font-size: 16px; margin-bottom: 4px; }
.accesid-mapv2-score-verified {
display: inline-block;
background: #d1fae5;
color: #047857;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
margin-bottom: 4px;
}
.accesid-mapv2-score-meta small { display: block; color: var(--acc-slate-500); font-size: 12px; }
.accesid-mapv2-detail-gate {
text-align: center;
padding: 32px 20px;
background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(139,92,246,.08));
border-radius: var(--acc-radius-md);
border: 2px dashed var(--acc-primary);
margin: 0 0 24px;
}
.accesid-mapv2-detail-gate-icon { font-size: 40px; margin-bottom: 12px; }
.accesid-mapv2-detail-gate p { color: var(--acc-slate-700); margin: 0 0 16px; font-size: 14px; }
.accesid-mapv2-detail-section { margin-bottom: 24px; }
.accesid-mapv2-detail-section h3 {
font-size: 16px;
font-weight: 700;
margin: 0 0 12px;
color: var(--acc-slate-900);
}
.accesid-mapv2-detail-section p { color: var(--acc-slate-700); line-height: 1.6; margin: 0 0 8px; }
.accesid-mapv2-detail-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
margin-bottom: 24px;
}
.accesid-mapv2-detail-gallery img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 6px;
cursor: pointer;
}
.accesid-mapv2-ophq-grid { display: flex; flex-direction: column; gap: 12px; }
.accesid-mapv2-ophq-cat {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
padding: 8px 0;
position: relative;
}
.accesid-mapv2-ophq-cat-bar {
grid-column: span 2;
height: 6px;
background: var(--acc-slate-200);
border-radius: 999px;
overflow: hidden;
order: 3;
}
.accesid-mapv2-ophq-cat-bar::after {
content: '';
display: block;
height: 100%;
width: var(--w);
background: linear-gradient(90deg, var(--acc-primary), var(--acc-secondary));
border-radius: 999px;
}
.accesid-mapv2-ophq-cat-label { font-size: 13px; text-transform: capitalize; color: var(--acc-slate-700); }
.accesid-mapv2-ophq-cat-score { font-size: 13px; font-weight: 700; color: var(--acc-primary); }
/* ------ TOAST ------ */
.accesid-mapv2-toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(20px);
background: rgba(15,23,42,.95);
color: #fff;
padding: 12px 20px;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
box-shadow: var(--acc-shadow-lg);
z-index: 9999;
opacity: 0;
transition: opacity .25s, transform .25s;
}
.accesid-mapv2-toast.is-visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ------ HOMEPAGE MAP ------ */
.accesid-homepage-map-section { padding: 60px 0; background: var(--acc-slate-50); }
.accesid-homepage-map-wrapper {
position: relative;
margin-top: 40px;
border-radius: var(--acc-radius-lg);
overflow: hidden;
box-shadow: var(--acc-shadow-lg);
}
.accesid-homepage-map-wrapper .accesid-mapv2-app {
height: 500px !important;
}
.accesid-homepage-map-gate {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(15,23,42,.85), rgba(30,41,59,.85));
backdrop-filter: blur(2px);
display: flex;
align-items: center;
justify-content: center;
z-index: 30;
pointer-events: none;
}
.accesid-homepage-map-gate-card {
background: #fff;
padding: 40px;
border-radius: var(--acc-radius-lg);
text-align: center;
max-width: 480px;
box-shadow: 0 20px 50px rgba(0,0,0,.3);
pointer-events: auto;
}
.accesid-homepage-map-gate-icon { font-size: 50px; margin-bottom: 16px; }
.accesid-homepage-map-gate-card h3 {
font-size: 22px;
font-weight: 800;
margin: 0 0 8px;
}
.accesid-homepage-map-gate-card p {
color: var(--acc-slate-500);
margin: 0 0 20px;
}
.accesid-homepage-map-gate-cta {
display: flex;
flex-direction: column;
gap: 8px;
}
.accesid-homepage-map-cta-row {
text-align: center;
margin-top: 24px;
}
/* ------ MOBILE / TABLET ------ */
@media (max-width: 960px) {
.accesid-mapv2-app {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.accesid-mapv2-sidebar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 75%;
max-height: 75vh;
border-right: none;
border-top: 1px solid var(--acc-slate-200);
border-radius: 16px 16px 0 0;
transform: translateY(calc(100% - 60px));
transition: transform .32s cubic-bezier(.32,.72,.28,1);
z-index: 18;
}
.accesid-mapv2-sidebar.is-mobile-open { transform: translateY(0); }
.accesid-mapv2-sidebar-header::before {
content: '';
display: block;
width: 40px;
height: 4px;
background: var(--acc-slate-300);
border-radius: 2px;
margin: -8px auto 12px;
}
.accesid-mapv2-mobile-toggle { display: block; }
.accesid-mapv2-detail {
width: 100%;
height: 90%;
max-height: 90vh;
top: auto;
right: 0;
bottom: 0;
transform: translateY(100%);
border-radius: 16px 16px 0 0;
z-index: 28;
}
.accesid-mapv2-detail.is-open { transform: translateY(0); }
.accesid-mapv2-detail-drag {
display: block;
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 5px;
background: var(--acc-slate-300);
border-radius: 3px;
z-index: 4;
cursor: grab;
}
.accesid-mapv2-detail-hero { height: 180px; }
.accesid-homepage-map-wrapper .accesid-mapv2-app { height: 400px !important; }
.accesid-homepage-map-gate-card { padding: 28px 20px; margin: 20px; }
}
@media (max-width: 480px) {
.accesid-mapv2-detail-actions { grid-template-columns: 1fr 1fr; }
.accesid-mapv2-action-primary { grid-column: span 2; }
.accesid-mapv2-detail-body h1 { font-size: 20px; }
.accesid-homepage-map-cta-row { padding: 0 16px; }
}
/* =============================================================================
v1.1.1 — SINGLE PLACE TEMPLATE
============================================================================= */
.accesid-single-place { background: var(--acc-slate-50); min-height: 100vh; }
.accesid-single-hero {
position: relative;
min-height: 420px;
background: linear-gradient(135deg, #6366f1, #8b5cf6) center/cover no-repeat;
color: #fff;
padding: 80px 0 100px;
}
.accesid-single-back {
display: inline-flex;
align-items: center;
gap: 6px;
color: rgba(255,255,255,.9);
text-decoration: none;
font-size: 14px;
font-weight: 500;
margin-bottom: 24px;
padding: 8px 14px;
background: rgba(0,0,0,.3);
backdrop-filter: blur(8px);
border-radius: 999px;
transition: var(--acc-transition);
}
.accesid-single-back:hover { background: rgba(0,0,0,.5); color: #fff; transform: translateX(-2px); }
.accesid-single-hero-content { position: relative; z-index: 2; max-width: 720px; }
.accesid-single-cat {
display: inline-block;
padding: 5px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
color: #fff;
margin-bottom: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.accesid-single-hero h1 {
font-size: 48px;
font-weight: 800;
margin: 0 0 12px;
line-height: 1.1;
letter-spacing: -0.02em;
color: #fff;
text-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.accesid-single-address {
font-size: 18px;
color: rgba(255,255,255,.95);
margin: 0 0 16px;
}
.accesid-single-rating {
display: flex;
align-items: center;
gap: 6px;
font-size: 16px;
}
.accesid-single-rating strong { font-size: 18px; }
.accesid-star { color: rgba(255,255,255,.4); font-size: 18px; }
.accesid-star.is-filled { color: #fbbf24; }
.accesid-single-score-badge {
position: absolute;
right: 24px;
bottom: -60px;
background: #fff;
padding: 24px;
border-radius: 20px;
box-shadow: 0 12px 40px rgba(0,0,0,.15);
text-align: center;
z-index: 5;
color: var(--acc-slate-900);
width: 200px;
}
.accesid-single-score-ring { width: 100px; height: 100px; margin: 0 auto; }
.accesid-single-score-text {
margin-top: -64px;
margin-bottom: 16px;
pointer-events: none;
}
.accesid-single-score-text strong { font-size: 36px; font-weight: 800; color: var(--score-color); display: block; line-height: 1; }
.accesid-single-score-text span { font-size: 13px; color: var(--acc-slate-500); }
.accesid-single-score-meta { font-size: 13px; }
.accesid-single-score-meta > span { display: block; font-weight: 700; margin-bottom: 4px; }
.accesid-single-verified-tag {
display: inline-block !important;
background: #d1fae5;
color: #047857;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
margin: 0 !important;
}
/* Sticky action bar */
.accesid-single-actionbar {
position: sticky;
top: 0;
background: #fff;
border-bottom: 1px solid var(--acc-slate-200);
box-shadow: 0 2px 12px rgba(0,0,0,.04);
z-index: 50;
padding: 12px 0;
margin-top: 60px;
}
.accesid-single-actionbar-inner {
display: flex;
gap: 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.accesid-single-actionbar-inner::-webkit-scrollbar { display: none; }
.accesid-single-action {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: var(--acc-slate-50);
border: 2px solid var(--acc-slate-200);
border-radius: 999px;
text-decoration: none;
color: var(--acc-slate-900);
font-size: 14px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: var(--acc-transition);
font-family: inherit;
}
.accesid-single-action:hover { border-color: var(--acc-primary); background: rgba(99,102,241,.05); transform: translateY(-1px); }
.accesid-single-action-primary { background: var(--acc-primary); color: #fff; border-color: var(--acc-primary); }
.accesid-single-action-primary:hover { background: #4f46e5; color: #fff; }
.accesid-single-action-fav.is-favorited { background: #fef3c7; border-color: #fbbf24; color: #78350f; }
.accesid-single-action-icon { font-size: 18px; }
/* Main grid */
.accesid-single-grid {
display: grid;
grid-template-columns: 1fr 360px;
gap: 32px;
padding: 32px 20px;
align-items: start;
}
.accesid-single-section {
background: #fff;
padding: 28px;
border-radius: var(--acc-radius-lg);
margin-bottom: 24px;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.accesid-single-section h2 {
font-size: 22px;
font-weight: 800;
margin: 0 0 20px;
display: flex;
align-items: center;
gap: 8px;
color: var(--acc-slate-900);
}
.accesid-single-reviews-summary {
margin-left: auto;
background: var(--acc-slate-100);
padding: 4px 12px;
border-radius: 999px;
font-size: 14px;
font-weight: 600;
color: var(--acc-slate-700);
}
.accesid-single-description {
font-size: 16px;
line-height: 1.7;
color: var(--acc-slate-700);
}
.accesid-single-description p { margin: 0 0 14px; }
/* Gallery */
.accesid-single-gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.accesid-single-gallery-item {
aspect-ratio: 1;
overflow: hidden;
border-radius: var(--acc-radius-md);
cursor: pointer;
transition: var(--acc-transition);
}
.accesid-single-gallery-item:hover { transform: scale(1.03); }
.accesid-single-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* OPHQ */
.accesid-single-ophq { display: flex; flex-direction: column; gap: 14px; }
.accesid-single-ophq-row {
display: grid;
grid-template-columns: 200px 1fr 50px;
gap: 12px;
align-items: center;
}
.accesid-single-ophq-label { font-size: 14px; font-weight: 600; text-transform: capitalize; }
.accesid-single-ophq-bar { height: 10px; background: var(--acc-slate-200); border-radius: 999px; overflow: hidden; }
.accesid-single-ophq-fill { height: 100%; border-radius: 999px; transition: width .8s cubic-bezier(.34,1.56,.64,1); }
.accesid-single-ophq-pct { font-weight: 700; text-align: right; font-size: 15px; }
.accesid-single-eval-meta { margin-top: 16px; color: var(--acc-slate-500); }
.accesid-single-gate {
text-align: center;
padding: 32px;
background: linear-gradient(135deg, rgba(99,102,241,.05), rgba(139,92,246,.05));
border: 2px dashed var(--acc-primary);
border-radius: var(--acc-radius-md);
}
.accesid-single-gate > span { font-size: 40px; display: block; margin-bottom: 12px; }
.accesid-single-gate p { color: var(--acc-slate-700); margin: 0 0 16px; }
/* Badge OB3 */
.accesid-single-badge-card {
display: flex;
gap: 24px;
align-items: center;
padding: 20px;
background: linear-gradient(135deg, #d1fae5, #ecfdf5);
border-radius: var(--acc-radius-md);
}
.accesid-single-badge-qr { width: 120px; height: 120px; flex-shrink: 0; background: #fff; padding: 8px; border-radius: 8px; }
.accesid-single-badge-meta p { margin: 0 0 8px; }
/* Reviews */
.accesid-single-reviews { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.accesid-single-review {
padding: 16px;
background: var(--acc-slate-50);
border-radius: var(--acc-radius-md);
}
.accesid-single-review header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.accesid-single-review header strong { font-size: 14px; }
.accesid-single-review-rating { display: inline-flex; gap: 2px; }
.accesid-single-review-rating .accesid-star { color: var(--acc-slate-300); font-size: 14px; }
.accesid-single-review-rating .accesid-star.is-filled { color: #fbbf24; }
.accesid-single-review header small { color: var(--acc-slate-500); margin-left: auto; }
.accesid-single-review p { margin: 0; color: var(--acc-slate-700); line-height: 1.6; font-size: 14px; }
.accesid-single-no-reviews { color: var(--acc-slate-500); font-style: italic; margin-bottom: 16px; }
/* Sidebar */
.accesid-single-sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 100px; }
.accesid-single-card {
background: #fff;
padding: 20px;
border-radius: var(--acc-radius-lg);
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.accesid-single-card h3 {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--acc-slate-500);
margin: 0 0 14px;
}
.accesid-single-minimap {
width: 100%;
height: 200px;
border-radius: var(--acc-radius-md);
margin-bottom: 12px;
background: var(--acc-slate-100);
}
.accesid-single-minimap-address {
font-size: 14px;
color: var(--acc-slate-700);
line-height: 1.5;
margin: 0 0 12px;
}
.accesid-single-contact { list-style: none; padding: 0; margin: 0; }
.accesid-single-contact li {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--acc-slate-100);
font-size: 14px;
}
.accesid-single-contact li:last-child { border-bottom: none; }
.accesid-single-contact a { color: var(--acc-slate-900); text-decoration: none; word-break: break-word; }
.accesid-single-contact a:hover { color: var(--acc-primary); }
.accesid-single-hours { list-style: none; padding: 0; margin: 0; }
.accesid-single-hours li {
display: flex;
justify-content: space-between;
padding: 8px 0;
font-size: 14px;
}
.accesid-single-hours li.is-today {
background: rgba(99,102,241,.08);
padding: 8px 12px;
margin: 0 -12px;
border-radius: var(--acc-radius-sm);
font-weight: 700;
color: var(--acc-primary);
}
.accesid-single-cta-upgrade {
background: linear-gradient(135deg, rgba(99,102,241,.05), rgba(139,92,246,.05));
border: 2px solid var(--acc-primary);
}
.accesid-single-cta-upgrade h3 { color: var(--acc-primary); }
.accesid-single-cta-upgrade p { font-size: 14px; margin: 0 0 14px; color: var(--acc-slate-700); }
@media (max-width: 960px) {
.accesid-single-grid { grid-template-columns: 1fr; }
.accesid-single-sidebar { position: static; }
.accesid-single-hero { padding: 40px 0 80px; min-height: 320px; }
.accesid-single-hero h1 { font-size: 32px; }
.accesid-single-score-badge {
position: static;
margin: 24px auto 0;
right: auto;
bottom: auto;
}
.accesid-single-actionbar { margin-top: 0; padding: 10px 0; }
.accesid-single-action-label { display: none; }
.accesid-single-action { padding: 10px 14px; }
.accesid-single-section { padding: 20px; }
.accesid-single-section h2 { font-size: 18px; }
.accesid-single-gallery { grid-template-columns: repeat(3, 1fr); }
.accesid-single-ophq-row { grid-template-columns: 1fr 50px; }
.accesid-single-ophq-bar { grid-column: span 2; }
.accesid-single-badge-card { flex-direction: column; text-align: center; }
}
/* Lightbox simple */
.accesid-lightbox-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.92);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
padding: 20px;
opacity: 0;
transition: opacity .25s;
}
.accesid-lightbox-overlay.is-visible { opacity: 1; }
.accesid-lightbox-img { max-width: 95%; max-height: 90vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.accesid-lightbox-close {
position: absolute;
top: 20px;
right: 20px;
background: rgba(255,255,255,.1);
color: #fff;
border: none;
width: 44px;
height: 44px;
border-radius: 50%;
font-size: 24px;
cursor: pointer;
}
.accesid-lightbox-close:hover { background: rgba(255,255,255,.2); }
.accesid-lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255,255,255,.1);
color: #fff;
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 24px;
cursor: pointer;
}
.accesid-lightbox-nav:hover { background: rgba(255,255,255,.2); }
.accesid-lightbox-prev { left: 20px; }
.accesid-lightbox-next { right: 20px; }
/* =============================================================================
v1.1.2 — WOW SECTIONS V2 + ACCESSIBILITY WIDGET (style AccessNow + AllAccessible)
============================================================================= */
/* CSS Vars locales pour cette section */
.acc-hero-v2,
.acc-cats-v2,
.acc-stats-v2,
.acc-how-v2,
.acc-features-v2,
.acc-cta-v2,
.acc-testi-v2,
.acc-partners-v2 {
--acc-v2-primary: #6366f1;
--acc-v2-primary-dark: #4338ca;
--acc-v2-secondary: #10b981;
--acc-v2-purple: #8b5cf6;
--acc-v2-amber: #f59e0b;
--acc-v2-text: #0f172a;
--acc-v2-text-light: #475569;
--acc-v2-text-muted: #94a3b8;
--acc-v2-bg: #ffffff;
--acc-v2-bg-alt: #f8fafc;
--acc-v2-border: #e2e8f0;
font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
}
/* ============================================================================
HERO V2 — massif avec mots rotatifs
============================================================================ */
.acc-hero-v2 {
position: relative;
min-height: 90vh;
overflow: hidden;
background: #0f172a;
color: #fff;
padding: 100px 0 80px;
}
.acc-hero-v2-bg { position: absolute; inset: 0; z-index: 0; }
.acc-hero-v2-bg-gradient {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 30%, rgba(99,102,241,.45), transparent 50%),
radial-gradient(circle at 80% 70%, rgba(139,92,246,.4), transparent 55%),
radial-gradient(circle at 50% 50%, rgba(16,185,129,.15), transparent 70%);
}
.acc-hero-v2-bg-pattern {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}
.acc-hero-v2-container {
position: relative;
z-index: 1;
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: 1fr 480px;
gap: 60px;
align-items: center;
}
.acc-hero-v2-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,.1);
backdrop-filter: blur(10px);
padding: 8px 16px;
border-radius: 100px;
font-size: 13px;
font-weight: 600;
border: 1px solid rgba(255,255,255,.15);
margin-bottom: 24px;
}
.acc-hero-v2-badge-dot {
width: 8px;
height: 8px;
background: var(--acc-v2-secondary);
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(16,185,129,.3);
animation: acc-pulse 2s ease-in-out infinite;
}
@keyframes acc-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(16,185,129,.3); }
50% { box-shadow: 0 0 0 8px rgba(16,185,129,.1); }
}
.acc-hero-v2-title {
font-size: clamp(40px, 6vw, 76px);
font-weight: 900;
line-height: 1.05;
letter-spacing: -0.03em;
margin: 0 0 24px;
color: #fff;
}
.acc-hero-v2-title-line { display: block; }
.acc-hero-v2-title-rotating {
display: block;
color: transparent;
background: linear-gradient(90deg, #a5b4fc, #c4b5fd, #f0abfc);
-webkit-background-clip: text;
background-clip: text;
min-height: 1.1em;
position: relative;
}
.acc-hero-v2-rotating-current {
display: inline-block;
animation: acc-word-fade 0.4s ease;
}
@keyframes acc-word-fade {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.acc-hero-v2-subtitle {
font-size: 19px;
line-height: 1.6;
color: rgba(255,255,255,.85);
margin: 0 0 32px;
max-width: 560px;
}
.acc-hero-v2-search {
margin-bottom: 32px;
}
.acc-hero-v2-search-form {
display: flex;
align-items: center;
background: #fff;
border-radius: 100px;
padding: 6px 6px 6px 24px;
box-shadow: 0 12px 40px rgba(0,0,0,.3);
max-width: 580px;
}
.acc-hero-v2-search-icon { font-size: 20px; color: var(--acc-v2-text-light); }
.acc-hero-v2-search-input {
flex: 1;
border: none;
background: transparent;
padding: 14px 12px;
font-size: 16px;
color: var(--acc-v2-text);
outline: none;
font-family: inherit;
}
.acc-hero-v2-search-btn {
background: var(--acc-v2-text);
color: #fff;
border: none;
padding: 14px 28px;
border-radius: 100px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
display: inline-flex;
align-items: center;
gap: 8px;
}
.acc-hero-v2-search-btn:hover { background: var(--acc-v2-primary); transform: translateX(2px); }
.acc-hero-v2-search-btn span { transition: transform 0.2s; }
.acc-hero-v2-search-btn:hover span { transform: translateX(4px); }
.acc-hero-v2-search-tags {
margin-top: 16px;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
font-size: 13px;
color: rgba(255,255,255,.7);
}
.acc-hero-v2-search-tags a {
background: rgba(255,255,255,.08);
color: rgba(255,255,255,.9);
padding: 6px 12px;
border-radius: 100px;
text-decoration: none;
border: 1px solid rgba(255,255,255,.15);
transition: all 0.2s;
font-size: 13px;
}
.acc-hero-v2-search-tags a:hover { background: rgba(255,255,255,.15); transform: translateY(-1px); }
.acc-hero-v2-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; }
.acc-hero-v2-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
border-radius: 100px;
font-size: 15px;
font-weight: 700;
text-decoration: none;
transition: all 0.25s;
cursor: pointer;
font-family: inherit;
border: 2px solid transparent;
}
.acc-hero-v2-cta-primary {
background: linear-gradient(135deg, var(--acc-v2-primary), var(--acc-v2-purple));
color: #fff;
box-shadow: 0 8px 24px rgba(99,102,241,.4);
}
.acc-hero-v2-cta-primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(99,102,241,.55);
color: #fff;
}
.acc-hero-v2-cta-ghost {
background: rgba(255,255,255,.08);
color: #fff;
border-color: rgba(255,255,255,.2);
backdrop-filter: blur(8px);
}
.acc-hero-v2-cta-ghost:hover { background: rgba(255,255,255,.15); color: #fff; }
.acc-hero-v2-cta-white {
background: #fff;
color: var(--acc-v2-primary);
}
.acc-hero-v2-cta-white:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.2); color: var(--acc-v2-primary); }
.acc-hero-v2-cta-outline-white {
background: transparent;
color: #fff;
border-color: rgba(255,255,255,.5);
}
.acc-hero-v2-cta-outline-white:hover { background: rgba(255,255,255,.1); color: #fff; }
.acc-hero-v2-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
padding-top: 32px;
border-top: 1px solid rgba(255,255,255,.1);
}
.acc-hero-v2-stat-num {
display: block;
font-size: 32px;
font-weight: 800;
background: linear-gradient(135deg, #fff, #c4b5fd);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1;
}
.acc-hero-v2-stat-label {
display: block;
font-size: 13px;
color: rgba(255,255,255,.7);
margin-top: 6px;
font-weight: 500;
}
/* Visual phone mockup */
.acc-hero-v2-visual {
position: relative;
height: 560px;
}
.acc-hero-v2-phone {
position: absolute;
width: 320px;
height: 540px;
background: #1e1b4b;
border-radius: 40px;
padding: 16px;
box-shadow: 0 40px 80px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.1);
transform: rotate(-4deg);
top: 0;
left: 50%;
margin-left: -160px;
animation: acc-float 8s ease-in-out infinite;
}
@keyframes acc-float {
0%, 100% { transform: rotate(-4deg) translateY(0); }
50% { transform: rotate(-4deg) translateY(-12px); }
}
.acc-hero-v2-phone-screen {
background: linear-gradient(135deg, #ddd6fe, #fce7f3);
border-radius: 30px;
height: 100%;
overflow: hidden;
padding: 30px 20px 20px;
position: relative;
}
.acc-hero-v2-phone-screen::before {
content: '';
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 24px;
background: #1e1b4b;
border-radius: 12px;
}
.acc-hero-v2-phone-card {
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0,0,0,.1);
margin-top: 50px;
}
.acc-hero-v2-phone-card-img {
height: 140px;
background:
linear-gradient(135deg, #fef3c7, #fbbf24),
url('data:image/svg+xml;utf8,') center/40% no-repeat;
background-blend-mode: overlay;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
}
.acc-hero-v2-phone-card-img::after { content: '🏨'; }
.acc-hero-v2-phone-card-body { padding: 16px; }
.acc-hero-v2-phone-card-tag {
display: inline-block;
background: rgba(147,51,234,.1);
color: #9333ea;
padding: 3px 10px;
border-radius: 100px;
font-size: 11px;
font-weight: 700;
margin-bottom: 8px;
}
.acc-hero-v2-phone-card-title { font-weight: 800; color: #0f172a; font-size: 14px; margin-bottom: 4px; }
.acc-hero-v2-phone-card-meta { color: #64748b; font-size: 12px; margin-bottom: 12px; }
.acc-hero-v2-phone-card-score {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.acc-hero-v2-phone-card-score-bar { flex: 1; height: 6px; background: #e2e8f0; border-radius: 100px; overflow: hidden; }
.acc-hero-v2-phone-card-score-bar span { display: block; height: 100%; background: linear-gradient(90deg, #6366f1, #10b981); }
.acc-hero-v2-phone-card-score strong { color: #10b981; font-size: 13px; font-weight: 800; }
.acc-hero-v2-phone-card-tags { display: flex; gap: 6px; }
.acc-hero-v2-phone-card-tags span {
background: #f1f5f9;
width: 28px;
height: 28px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.acc-hero-v2-floating-card {
position: absolute;
background: #fff;
border-radius: 16px;
padding: 14px 18px;
box-shadow: 0 16px 40px rgba(0,0,0,.2);
display: flex;
align-items: center;
gap: 12px;
color: var(--acc-v2-text);
z-index: 2;
animation: acc-float-card 6s ease-in-out infinite;
}
.acc-hero-v2-floating-1 { top: 10%; left: -20px; }
.acc-hero-v2-floating-2 { bottom: 10%; right: -20px; animation-delay: -2s; }
@keyframes acc-float-card {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.acc-hero-v2-floating-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #6366f1, #10b981);
border-radius: 12px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 800;
}
.acc-hero-v2-floating-card strong { display: block; font-size: 14px; font-weight: 800; }
.acc-hero-v2-floating-card small { font-size: 12px; color: var(--acc-v2-text-muted); }
.acc-hero-v2-scroll-hint {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
width: 26px;
height: 42px;
border: 2px solid rgba(255,255,255,.4);
border-radius: 100px;
z-index: 2;
}
.acc-hero-v2-scroll-hint span {
display: block;
width: 4px;
height: 8px;
background: rgba(255,255,255,.7);
border-radius: 100px;
margin: 6px auto;
animation: acc-scroll-hint 2s ease-in-out infinite;
}
@keyframes acc-scroll-hint {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(14px); }
}
/* ============================================================================
CATEGORIES V2
============================================================================ */
.acc-cats-v2 { padding: 100px 0; background: var(--acc-v2-bg-alt); }
.acc-cats-v2-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.acc-cats-v2-header { text-align: center; max-width: 720px; margin: 0 auto 60px; }
.acc-cats-v2-eyebrow {
display: inline-block;
color: var(--acc-v2-primary);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 12px;
}
.acc-cats-v2-title {
font-size: clamp(32px, 4.5vw, 52px);
font-weight: 900;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--acc-v2-text);
margin: 0 0 16px;
}
.acc-cats-v2-subtitle {
font-size: 19px;
color: var(--acc-v2-text-light);
line-height: 1.6;
margin: 0;
}
.acc-cats-v2-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.acc-cats-v2-card {
background: #fff;
border-radius: 24px;
overflow: hidden;
text-decoration: none;
color: var(--acc-v2-text);
transition: all 0.3s;
box-shadow: 0 4px 12px rgba(0,0,0,.05);
}
.acc-cats-v2-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 50px rgba(0,0,0,.12);
color: var(--acc-v2-text);
}
.acc-cats-v2-card-img {
position: relative;
height: 200px;
background-size: cover;
background-position: center;
overflow: hidden;
}
.acc-cats-v2-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0,0,0,.1), rgba(0,0,0,.4));
transition: opacity 0.3s;
}
.acc-cats-v2-card:hover .acc-cats-v2-card-overlay { opacity: 0.6; }
.acc-cats-v2-card-icon {
position: absolute;
bottom: 16px;
left: 16px;
width: 56px;
height: 56px;
background: var(--cat-color);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
box-shadow: 0 8px 20px rgba(0,0,0,.2);
}
.acc-cats-v2-card-body { padding: 24px; }
.acc-cats-v2-card-body h3 {
font-size: 22px;
font-weight: 800;
margin: 0 0 8px;
}
.acc-cats-v2-card-body p {
color: var(--acc-v2-text-light);
margin: 0 0 16px;
font-size: 15px;
line-height: 1.5;
}
.acc-cats-v2-card-arrow {
color: var(--cat-color);
font-weight: 700;
font-size: 14px;
display: inline-flex;
align-items: center;
transition: transform 0.2s;
}
.acc-cats-v2-card:hover .acc-cats-v2-card-arrow { transform: translateX(4px); }
/* ============================================================================
STATS V2
============================================================================ */
.acc-stats-v2 {
padding: 60px 0;
background: linear-gradient(135deg, var(--acc-v2-primary), var(--acc-v2-purple));
color: #fff;
}
.acc-stats-v2-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.acc-stats-v2-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
align-items: center;
gap: 16px;
}
.acc-stats-v2-item { text-align: center; grid-column: span 2; }
.acc-stats-v2-num {
font-size: clamp(36px, 5vw, 56px);
font-weight: 900;
line-height: 1;
margin-bottom: 8px;
}
.acc-stats-v2-num sup { font-size: 0.5em; vertical-align: top; }
.acc-stats-v2-label {
font-size: 14px;
color: rgba(255,255,255,.85);
font-weight: 500;
}
.acc-stats-v2-divider {
width: 1px;
height: 60px;
background: rgba(255,255,255,.2);
grid-column: span 1;
justify-self: center;
}
/* ============================================================================
HOW IT WORKS V2
============================================================================ */
.acc-how-v2 { padding: 100px 0; background: var(--acc-v2-bg); }
.acc-how-v2-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.acc-how-v2-header { text-align: center; max-width: 720px; margin: 0 auto 60px; }
.acc-how-v2-steps {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
gap: 24px;
align-items: stretch;
}
.acc-how-v2-step {
background: var(--acc-v2-bg-alt);
padding: 40px 28px;
border-radius: 24px;
text-align: center;
transition: all 0.3s;
position: relative;
border: 2px solid transparent;
}
.acc-how-v2-step:hover {
transform: translateY(-4px);
border-color: var(--acc-v2-primary);
background: #fff;
box-shadow: 0 20px 50px rgba(0,0,0,.08);
}
.acc-how-v2-step-num {
color: var(--acc-v2-primary);
font-weight: 900;
font-size: 13px;
letter-spacing: 0.2em;
margin-bottom: 16px;
opacity: 0.6;
}
.acc-how-v2-step-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--acc-v2-primary), var(--acc-v2-purple));
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
margin: 0 auto 24px;
box-shadow: 0 12px 32px rgba(99,102,241,.3);
}
.acc-how-v2-step h3 {
font-size: 24px;
font-weight: 800;
margin: 0 0 12px;
color: var(--acc-v2-text);
}
.acc-how-v2-step p {
color: var(--acc-v2-text-light);
line-height: 1.6;
margin: 0;
font-size: 15px;
}
.acc-how-v2-step-arrow {
align-self: center;
color: var(--acc-v2-text-muted);
font-size: 32px;
font-weight: 300;
}
/* ============================================================================
FEATURES SPLIT
============================================================================ */
.acc-features-v2 { padding: 100px 0; background: var(--acc-v2-bg-alt); }
.acc-features-v2-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.acc-features-v2-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.acc-features-v2-visual { position: relative; }
.acc-features-v2-mockup {
background: linear-gradient(135deg, var(--acc-v2-primary), var(--acc-v2-purple));
border-radius: 32px;
padding: 60px 40px;
box-shadow: 0 30px 80px rgba(99,102,241,.3);
transform: rotate(-2deg);
transition: transform 0.3s;
}
.acc-features-v2-mockup:hover { transform: rotate(0deg); }
.acc-features-v2-screen {
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 12px 32px rgba(0,0,0,.15);
}
.acc-features-v2-mock-header {
padding: 12px 16px;
background: #f8fafc;
display: flex;
gap: 6px;
}
.acc-features-v2-mock-header span {
width: 12px;
height: 12px;
border-radius: 50%;
background: #e2e8f0;
}
.acc-features-v2-mock-header span:first-child { background: #ef4444; }
.acc-features-v2-mock-header span:nth-child(2) { background: #f59e0b; }
.acc-features-v2-mock-header span:nth-child(3) { background: #10b981; }
.acc-features-v2-mock-content {
height: 320px;
background:
radial-gradient(circle at 30% 20%, rgba(99,102,241,.1), transparent 50%),
radial-gradient(circle at 70% 60%, rgba(16,185,129,.1), transparent 50%),
#f1f5f9;
position: relative;
}
.acc-features-v2-mock-pin {
position: absolute;
font-size: 28px;
animation: acc-pin-bounce 3s ease-in-out infinite;
filter: drop-shadow(0 4px 8px rgba(0,0,0,.2));
}
.acc-features-v2-mock-pin:nth-child(2) { animation-delay: 0.5s; }
.acc-features-v2-mock-pin:nth-child(3) { animation-delay: 1s; }
.acc-features-v2-mock-pin:nth-child(4) { animation-delay: 1.5s; }
@keyframes acc-pin-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.acc-features-v2-list {
list-style: none;
padding: 0;
margin: 32px 0;
}
.acc-features-v2-list li {
display: flex;
gap: 20px;
padding: 16px 0;
border-bottom: 1px solid var(--acc-v2-border);
}
.acc-features-v2-list li:last-child { border-bottom: none; }
.acc-features-v2-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
background: rgba(99,102,241,.1);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.acc-features-v2-list strong {
display: block;
font-size: 17px;
font-weight: 800;
color: var(--acc-v2-text);
margin-bottom: 4px;
}
.acc-features-v2-list p {
color: var(--acc-v2-text-light);
margin: 0;
line-height: 1.5;
font-size: 14px;
}
/* ============================================================================
CTA BANNER V2
============================================================================ */
.acc-cta-v2 {
position: relative;
padding: 120px 0;
overflow: hidden;
color: #fff;
}
.acc-cta-v2-bg {
position: absolute;
inset: 0;
background:
linear-gradient(135deg, var(--acc-v2-primary) 0%, var(--acc-v2-purple) 50%, #ec4899 100%);
z-index: 0;
}
.acc-cta-v2-bg::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 30%, rgba(255,255,255,.1), transparent 50%),
radial-gradient(circle at 80% 70%, rgba(255,255,255,.08), transparent 50%);
}
.acc-cta-v2-container {
position: relative;
z-index: 1;
max-width: 900px;
margin: 0 auto;
padding: 0 24px;
text-align: center;
}
.acc-cta-v2-content h2 {
font-size: clamp(36px, 5vw, 60px);
font-weight: 900;
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0 0 20px;
color: #fff;
}
.acc-cta-v2-content p {
font-size: 19px;
line-height: 1.6;
color: rgba(255,255,255,.9);
margin: 0 0 36px;
}
.acc-cta-v2-buttons { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
/* ============================================================================
TESTIMONIALS V2
============================================================================ */
.acc-testi-v2 { padding: 100px 0; background: var(--acc-v2-bg); }
.acc-testi-v2-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 60px;
}
.acc-testi-v2-card {
background: var(--acc-v2-bg-alt);
padding: 40px 32px;
border-radius: 24px;
position: relative;
transition: all 0.3s;
border: 2px solid transparent;
}
.acc-testi-v2-card:hover {
transform: translateY(-4px);
border-color: var(--acc-v2-primary);
background: #fff;
box-shadow: 0 20px 50px rgba(0,0,0,.08);
}
.acc-testi-v2-quote {
font-size: 64px;
font-weight: 900;
color: var(--acc-v2-primary);
line-height: 0.6;
margin-bottom: 16px;
opacity: 0.4;
}
.acc-testi-v2-card p {
font-size: 17px;
line-height: 1.6;
color: var(--acc-v2-text);
margin: 0 0 24px;
}
.acc-testi-v2-card footer { display: flex; align-items: center; gap: 14px; }
.acc-testi-v2-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 18px;
flex-shrink: 0;
}
.acc-testi-v2-card footer strong { display: block; font-size: 15px; font-weight: 800; color: var(--acc-v2-text); }
.acc-testi-v2-card footer small { font-size: 13px; color: var(--acc-v2-text-light); }
/* ============================================================================
PARTNERS V2
============================================================================ */
.acc-partners-v2 { padding: 60px 0; background: var(--acc-v2-bg-alt); border-top: 1px solid var(--acc-v2-border); }
.acc-partners-v2-label {
text-align: center;
color: var(--acc-v2-text-muted);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
margin: 0 0 32px;
}
.acc-partners-v2-logos {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 48px;
}
.acc-partners-v2-logos span {
color: var(--acc-v2-text-muted);
font-size: 18px;
font-weight: 800;
opacity: 0.6;
transition: opacity 0.2s;
}
.acc-partners-v2-logos span:hover { opacity: 1; color: var(--acc-v2-primary); }
/* ============================================================================
ACCESSIBILITY WIDGET (style AllAccessible)
============================================================================ */
.acc-a11y-toggle {
position: fixed;
bottom: 24px;
right: 24px;
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: #fff;
border: none;
cursor: pointer;
box-shadow: 0 8px 24px rgba(99,102,241,.4);
z-index: 9998;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.acc-a11y-toggle:hover {
transform: scale(1.1);
box-shadow: 0 12px 32px rgba(99,102,241,.55);
}
.acc-a11y-toggle::before {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
opacity: 0.3;
z-index: -1;
animation: acc-pulse-ring 2s ease-out infinite;
}
@keyframes acc-pulse-ring {
0% { transform: scale(1); opacity: 0.5; }
100% { transform: scale(1.5); opacity: 0; }
}
.acc-a11y-panel {
position: fixed;
bottom: 100px;
right: 24px;
width: 380px;
max-height: 85vh;
background: #fff;
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0,0,0,.2);
z-index: 9999;
display: flex;
flex-direction: column;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
}
.acc-a11y-panel[hidden] { display: none; }
.acc-a11y-panel-header {
padding: 20px 24px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
}
.acc-a11y-panel-header h3 { margin: 0; font-size: 17px; font-weight: 800; color: #fff; }
.acc-a11y-close {
background: rgba(255,255,255,.2);
color: #fff;
border: none;
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
font-size: 14px;
}
.acc-a11y-close:hover { background: rgba(255,255,255,.3); }
.acc-a11y-panel-content {
overflow-y: auto;
padding: 20px 24px;
flex: 1;
}
.acc-a11y-section { margin-bottom: 24px; }
.acc-a11y-section h4 {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #94a3b8;
margin: 0 0 12px;
}
.acc-a11y-profiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acc-a11y-profile {
background: #f1f5f9;
border: 2px solid transparent;
padding: 14px 12px;
border-radius: 12px;
cursor: pointer;
font-size: 13px;
font-weight: 700;
color: #0f172a;
transition: all 0.2s;
font-family: inherit;
text-align: left;
}
.acc-a11y-profile:hover { background: rgba(99,102,241,.1); }
.acc-a11y-profile.is-active { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; }
.acc-a11y-controls { display: flex; flex-direction: column; gap: 8px; }
.acc-a11y-control {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: #f8fafc;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
color: #0f172a;
}
.acc-a11y-stepper { display: flex; align-items: center; gap: 4px; }
.acc-a11y-stepper button {
width: 32px;
height: 32px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 16px;
font-weight: 800;
color: #6366f1;
cursor: pointer;
}
.acc-a11y-stepper button:hover { background: #6366f1; color: #fff; border-color: #6366f1; }
.acc-a11y-value { min-width: 50px; text-align: center; font-size: 13px; font-weight: 700; }
.acc-a11y-toggle-btn {
background: #f8fafc;
border: 2px solid transparent;
padding: 12px 16px;
border-radius: 12px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
color: #0f172a;
text-align: left;
transition: all 0.2s;
font-family: inherit;
}
.acc-a11y-toggle-btn:hover { background: rgba(99,102,241,.08); }
.acc-a11y-toggle-btn.is-active {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: #fff;
}
.acc-a11y-reset {
width: 100%;
background: transparent;
border: 2px solid #e2e8f0;
color: #475569;
padding: 12px;
border-radius: 12px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
margin-top: 8px;
transition: all 0.2s;
font-family: inherit;
}
.acc-a11y-reset:hover { border-color: #ef4444; color: #ef4444; }
.acc-a11y-footer {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #e2e8f0;
font-size: 12px;
color: #94a3b8;
text-align: center;
line-height: 1.5;
}
/* ============================================================================
ACCESSIBILITY MODES — appliqués au via JS
============================================================================ */
html.acc-a11y-high-contrast { filter: contrast(1.4); }
html.acc-a11y-dark-mode { filter: invert(1) hue-rotate(180deg); }
html.acc-a11y-dark-mode img,
html.acc-a11y-dark-mode video,
html.acc-a11y-dark-mode iframe,
html.acc-a11y-dark-mode .mapboxgl-map { filter: invert(1) hue-rotate(180deg); }
html.acc-a11y-invert { filter: invert(1); }
html.acc-a11y-invert img,
html.acc-a11y-invert video,
html.acc-a11y-invert .mapboxgl-map { filter: invert(1); }
html.acc-a11y-grayscale { filter: grayscale(1); }
html.acc-a11y-stop-animations *,
html.acc-a11y-stop-animations *::before,
html.acc-a11y-stop-animations *::after {
animation: none !important;
transition: none !important;
}
html.acc-a11y-highlight-links a {
background: yellow !important;
color: #000 !important;
padding: 2px 4px !important;
border-bottom: 2px solid #000 !important;
}
html.acc-a11y-big-cursor,
html.acc-a11y-big-cursor * { cursor: url('data:image/svg+xml;utf8,') 0 0, auto !important; }
html.acc-a11y-readable-font * { font-family: Arial, Helvetica, sans-serif !important; }
html.acc-a11y-dyslexia-font * { font-family: 'Comic Sans MS', 'Open Dyslexic', sans-serif !important; }
.acc-a11y-reading-guide {
position: fixed;
left: 0;
right: 0;
height: 60px;
background: rgba(255,235,59,.3);
border-top: 2px solid #fbbf24;
border-bottom: 2px solid #fbbf24;
pointer-events: none;
z-index: 999999;
transform: translateY(-50%);
}
/* ============================================================================
RESPONSIVE
============================================================================ */
@media (max-width: 960px) {
.acc-hero-v2-container { grid-template-columns: 1fr; gap: 40px; }
.acc-hero-v2-visual { display: none; }
.acc-hero-v2-stats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.acc-cats-v2-grid { grid-template-columns: repeat(2, 1fr); }
.acc-stats-v2-grid { grid-template-columns: 1fr 1fr; }
.acc-stats-v2-divider { display: none; }
.acc-stats-v2-item { grid-column: span 1; }
.acc-how-v2-steps { grid-template-columns: 1fr; }
.acc-how-v2-step-arrow { transform: rotate(90deg); }
.acc-features-v2-grid { grid-template-columns: 1fr; gap: 40px; }
.acc-testi-v2-grid { grid-template-columns: 1fr; }
.acc-a11y-panel { width: calc(100vw - 32px); right: 16px; bottom: 90px; }
.acc-a11y-toggle { bottom: 16px; right: 16px; width: 52px; height: 52px; }
}
@media (max-width: 480px) {
.acc-hero-v2 { padding: 60px 0 40px; min-height: auto; }
.acc-cats-v2-grid { grid-template-columns: 1fr; }
.acc-hero-v2-stats { grid-template-columns: 1fr 1fr; }
.acc-hero-v2-search-form { flex-direction: column; padding: 12px; border-radius: 24px; }
.acc-hero-v2-search-input { padding: 10px; }
.acc-hero-v2-search-btn { width: 100%; padding: 12px; }
}
/* =============================================================================
v1.1.3 — HERO V3 LIGHT MODE (style AccessNow.com — fond blanc)
Override le hero v2 avec une version claire
============================================================================= */
.acc-hero-v2 {
background: #ffffff !important;
color: var(--acc-v2-text) !important;
padding: 80px 0 60px;
min-height: auto;
}
.acc-hero-v2-bg {
background:
radial-gradient(ellipse at 80% 0%, rgba(99,102,241,.08), transparent 50%),
radial-gradient(ellipse at 0% 100%, rgba(139,92,246,.06), transparent 50%);
}
.acc-hero-v2-bg-gradient { display: none; }
.acc-hero-v2-bg-pattern {
background-image:
linear-gradient(rgba(99,102,241,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(99,102,241,.04) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
}
.acc-hero-v2-badge {
background: rgba(99,102,241,.08) !important;
color: var(--acc-v2-primary);
border-color: rgba(99,102,241,.15) !important;
backdrop-filter: none;
}
.acc-hero-v2-title { color: var(--acc-v2-text); }
.acc-hero-v2-title-rotating {
background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
-webkit-background-clip: text;
background-clip: text;
}
.acc-hero-v2-subtitle { color: var(--acc-v2-text-light); }
.acc-hero-v2-search-form {
border: 2px solid var(--acc-v2-border);
box-shadow: 0 8px 28px rgba(15,23,42,.08);
}
.acc-hero-v2-search-form:focus-within {
border-color: var(--acc-v2-primary);
box-shadow: 0 8px 28px rgba(99,102,241,.2);
}
.acc-hero-v2-search-tags { color: var(--acc-v2-text-muted); }
.acc-hero-v2-search-tags a {
background: rgba(99,102,241,.08);
color: var(--acc-v2-primary);
border: 1px solid rgba(99,102,241,.15);
}
.acc-hero-v2-search-tags a:hover {
background: rgba(99,102,241,.15);
color: var(--acc-v2-primary-dark);
}
.acc-hero-v2-cta-ghost {
background: var(--acc-v2-bg-alt);
color: var(--acc-v2-text);
border-color: var(--acc-v2-border);
backdrop-filter: none;
}
.acc-hero-v2-cta-ghost:hover { background: var(--acc-v2-border); color: var(--acc-v2-text); }
.acc-hero-v2-stats { border-top-color: var(--acc-v2-border); }
.acc-hero-v2-stat-num {
background: linear-gradient(135deg, #0f172a, #6366f1);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.acc-hero-v2-stat-label { color: var(--acc-v2-text-light); }
/* Phone mockup garde son fond sombre — c est le focal point */
.acc-hero-v2-floating-card {
box-shadow: 0 16px 40px rgba(15,23,42,.15);
}
.acc-hero-v2-scroll-hint { display: none; }
/* Hero alternatif minimaliste (style AccessNow) sans phone mockup */
.acc-hero-v2.acc-hero-v3-minimal .acc-hero-v2-container {
grid-template-columns: 1fr;
text-align: center;
max-width: 900px;
}
.acc-hero-v2.acc-hero-v3-minimal .acc-hero-v2-visual { display: none; }
.acc-hero-v2.acc-hero-v3-minimal .acc-hero-v2-stats {
max-width: 720px;
margin: 0 auto;
}
.acc-hero-v2.acc-hero-v3-minimal .acc-hero-v2-cta-row { justify-content: center; }
.acc-hero-v2.acc-hero-v3-minimal .acc-hero-v2-search-form,
.acc-hero-v2.acc-hero-v3-minimal .acc-hero-v2-subtitle { margin-left: auto; margin-right: auto; }
.acc-hero-v2.acc-hero-v3-minimal .acc-hero-v2-search-tags { justify-content: center; }
/* =============================================================================
v1.1.6 — BADGE TIERS + PROMOACCÈS + B2G DASHBOARD
============================================================================= */
/* ---------- BADGE TIERS GRID ---------- */
.acc-badge-tiers-v2 { padding: 100px 0; background: var(--acc-v2-bg); }
.acc-badge-tiers-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-top: 50px;
}
.acc-badge-tier-card {
background: #fff;
border-radius: 20px;
padding: 28px 22px;
border: 2px solid var(--tier-color);
box-shadow: 0 8px 32px rgba(15, 23, 42, .06);
transition: transform .3s, box-shadow .3s;
display: flex;
flex-direction: column;
}
.acc-badge-tier-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 50px rgba(15, 23, 42, .12);
}
.acc-badge-tier-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.acc-badge-tier-card-num {
font-size: 12px;
font-weight: 800;
color: var(--tier-color);
background: var(--tier-bg);
padding: 4px 10px;
border-radius: 100px;
letter-spacing: .1em;
}
.acc-badge-tier-card-num::before { content: 'NIVEAU '; }
.acc-badge-tier-card-icon {
font-size: 32px;
background: var(--tier-bg);
width: 56px;
height: 56px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.acc-badge-tier-card h3 {
font-size: 22px;
font-weight: 800;
margin: 0 0 8px;
color: var(--tier-color);
letter-spacing: -0.01em;
}
.acc-badge-tier-card-desc {
color: var(--acc-v2-text-light);
font-size: 14px;
line-height: 1.6;
margin: 0 0 20px;
flex: 1;
}
.acc-badge-tier-card-meta {
background: var(--tier-bg);
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 16px;
}
.acc-badge-tier-meta-row {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 6px 0;
font-size: 12px;
border-bottom: 1px solid rgba(15, 23, 42, .05);
}
.acc-badge-tier-meta-row:last-child { border-bottom: none; }
.acc-badge-tier-meta-label {
color: var(--acc-v2-text-light);
font-weight: 600;
flex-shrink: 0;
}
.acc-badge-tier-meta-value {
color: var(--acc-v2-text);
text-align: right;
font-weight: 600;
}
.acc-badge-tier-card-cases {
background: var(--acc-v2-bg-alt);
border-radius: 10px;
padding: 12px 14px;
}
.acc-badge-tier-card-cases summary {
font-size: 13px;
font-weight: 700;
cursor: pointer;
color: var(--tier-color);
list-style: none;
display: flex;
align-items: center;
gap: 6px;
}
.acc-badge-tier-card-cases summary::after {
content: '▸';
margin-left: auto;
transition: transform .2s;
font-size: 11px;
}
.acc-badge-tier-card-cases[open] summary::after { transform: rotate(90deg); }
.acc-badge-tier-card-cases ul {
margin: 12px 0 0;
padding-left: 18px;
font-size: 12px;
color: var(--acc-v2-text-light);
line-height: 1.7;
}
/* Inline badge utilité (pour cartes, fiches, etc.) */
.acc-badge-tier {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 100px;
font-size: 12px;
font-weight: 700;
border: 1px solid;
line-height: 1;
white-space: nowrap;
}
.acc-badge-tier-medium { font-size: 13px; padding: 5px 12px; }
.acc-badge-tier-large { font-size: 14px; padding: 7px 16px; }
.acc-badge-tier-crypto { font-size: 10px; }
/* ---------- PROMOACCÈS SECTION ---------- */
.acc-promoacces-v2 { padding: 100px 0; background: var(--acc-v2-bg-alt); }
.acc-promoacces-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.acc-promoacces-content .acc-cats-v2-title { margin-bottom: 16px; }
.acc-promoacces-lead {
font-size: 18px;
color: var(--acc-v2-text);
line-height: 1.6;
margin-bottom: 28px;
font-weight: 500;
}
.acc-promoacces-content p {
color: var(--acc-v2-text-light);
line-height: 1.7;
margin-bottom: 28px;
}
.acc-promoacces-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
background: #fff;
padding: 24px;
border-radius: 16px;
box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
margin-bottom: 28px;
}
.acc-promoacces-stats > div {
text-align: center;
padding: 0 8px;
border-right: 1px solid var(--acc-v2-border);
}
.acc-promoacces-stats > div:last-child { border-right: none; }
.acc-promoacces-stats strong {
display: block;
font-size: 28px;
font-weight: 900;
color: var(--acc-v2-primary);
line-height: 1;
margin-bottom: 4px;
}
.acc-promoacces-stats span {
font-size: 12px;
color: var(--acc-v2-text-light);
font-weight: 600;
}
.acc-promoacces-mockup {
position: relative;
height: 480px;
}
.acc-promoacces-card {
position: absolute;
background: #fff;
border-radius: 20px;
padding: 24px;
box-shadow: 0 20px 60px rgba(15, 23, 42, .15);
width: 280px;
}
.acc-promoacces-card:first-child {
top: 20px;
left: 0;
transform: rotate(-3deg);
z-index: 1;
}
.acc-promoacces-card-2 {
bottom: 20px;
right: 0;
transform: rotate(3deg);
z-index: 2;
border: 2px solid var(--acc-v2-primary);
}
.acc-promoacces-card-header {
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 12px;
border-bottom: 1px solid var(--acc-v2-border);
margin-bottom: 14px;
}
.acc-promoacces-card-header span { font-size: 22px; }
.acc-promoacces-card-header strong { font-size: 16px; color: var(--acc-v2-text); }
.acc-promoacces-card-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
font-size: 13px;
color: var(--acc-v2-text);
}
.acc-promoacces-card-footer { padding-top: 14px; border-top: 1px solid var(--acc-v2-border); }
/* ---------- B2G DASHBOARD ---------- */
.acc-b2g-v2 {
padding: 100px 0;
background: linear-gradient(135deg, #0f172a, #1e293b);
color: #fff;
}
.acc-b2g-v2 .acc-cats-v2-eyebrow { color: #c4b5fd; }
.acc-b2g-v2 .acc-cats-v2-title { color: #fff; }
.acc-b2g-v2 .acc-cats-v2-subtitle { color: rgba(255, 255, 255, .8); }
.acc-b2g-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin: 50px 0;
}
.acc-b2g-feature {
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 16px;
padding: 28px 24px;
backdrop-filter: blur(10px);
transition: all .3s;
}
.acc-b2g-feature:hover {
background: rgba(255, 255, 255, .08);
transform: translateY(-4px);
border-color: rgba(196, 181, 253, .4);
}
.acc-b2g-feature-icon {
font-size: 36px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
width: 64px;
height: 64px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
}
.acc-b2g-feature h3 {
font-size: 18px;
font-weight: 800;
margin: 0 0 8px;
color: #fff;
}
.acc-b2g-feature p {
color: rgba(255, 255, 255, .75);
font-size: 14px;
line-height: 1.6;
margin: 0;
}
.acc-b2g-cta {
text-align: center;
background: rgba(99, 102, 241, .15);
border: 1px solid rgba(196, 181, 253, .3);
border-radius: 24px;
padding: 48px 32px;
margin-top: 40px;
}
.acc-b2g-cta h3 {
font-size: 28px;
font-weight: 800;
color: #fff;
margin: 0 0 12px;
}
.acc-b2g-cta p {
color: rgba(255, 255, 255, .85);
margin: 0 0 24px;
font-size: 16px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Partners disclaimer */
.acc-partners-v2-disclaimer {
text-align: center;
color: var(--acc-v2-text-muted);
font-size: 12px;
margin-top: 24px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.5;
}
/* Responsive */
@media (max-width: 960px) {
.acc-badge-tiers-grid { grid-template-columns: repeat(2, 1fr); }
.acc-promoacces-grid { grid-template-columns: 1fr; gap: 40px; }
.acc-promoacces-mockup { height: 400px; }
.acc-b2g-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.acc-badge-tiers-grid { grid-template-columns: 1fr; }
.acc-b2g-grid { grid-template-columns: 1fr; }
.acc-promoacces-stats { grid-template-columns: 1fr; }
.acc-promoacces-stats > div { border-right: none; border-bottom: 1px solid var(--acc-v2-border); padding-bottom: 14px; padding-top: 14px; }
.acc-promoacces-stats > div:last-child { border-bottom: none; }
}
/* =============================================================================
v1.1.6 — PORTAILS (Évaluateur + SDC)
============================================================================= */
.acc-portal {
max-width: 1200px;
margin: 40px auto;
padding: 0 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
}
.acc-portal-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 24px;
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid var(--acc-v2-border);
}
.acc-portal-eyebrow {
display: inline-block;
color: var(--acc-v2-primary);
font-size: 13px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
margin-bottom: 8px;
}
.acc-portal-header h1 {
font-size: 36px;
font-weight: 900;
margin: 0;
color: var(--acc-v2-text);
letter-spacing: -0.02em;
}
.acc-portal-header-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.acc-portal-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 32px;
}
.acc-portal-stat {
background: #fff;
padding: 24px;
border-radius: 16px;
border: 1px solid var(--acc-v2-border);
box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.acc-portal-stat-num {
font-size: 36px;
font-weight: 900;
color: var(--acc-v2-text);
line-height: 1;
margin-bottom: 6px;
}
.acc-portal-stat-label {
color: var(--acc-v2-text-light);
font-size: 13px;
font-weight: 600;
}
.acc-portal-stat-meta {
color: var(--acc-v2-text-muted);
font-size: 12px;
margin-top: 6px;
}
.acc-portal-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 32px;
}
.acc-portal-section {
background: #fff;
border-radius: 16px;
padding: 24px;
border: 1px solid var(--acc-v2-border);
box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
margin-bottom: 20px;
}
.acc-portal-section h2 {
font-size: 18px;
font-weight: 800;
margin: 0 0 16px;
color: var(--acc-v2-text);
display: flex;
align-items: center;
gap: 8px;
}
.acc-portal-empty {
background: var(--acc-v2-bg-alt);
padding: 40px 20px;
border-radius: 12px;
text-align: center;
color: var(--acc-v2-text-light);
}
.acc-portal-empty p { margin: 0 0 6px; font-size: 14px; }
.acc-portal-empty small { font-size: 12px; color: var(--acc-v2-text-muted); }
.acc-portal-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.acc-portal-table th,
.acc-portal-table td {
padding: 10px 12px;
text-align: left;
border-bottom: 1px solid var(--acc-v2-border);
}
.acc-portal-table th {
font-weight: 700;
color: var(--acc-v2-text-muted);
font-size: 12px;
text-transform: uppercase;
letter-spacing: .05em;
background: var(--acc-v2-bg-alt);
}
.acc-portal-table tr:hover td { background: var(--acc-v2-bg-alt); }
.acc-portal-recent-list {
list-style: none;
padding: 0;
margin: 0;
}
.acc-portal-recent-list li {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--acc-v2-border);
}
.acc-portal-recent-list li:last-child { border-bottom: none; }
.acc-portal-recent-icon {
width: 36px;
height: 36px;
background: var(--acc-v2-bg-alt);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
.acc-portal-recent-list li > div { flex: 1; min-width: 0; }
.acc-portal-recent-list strong { display: block; font-size: 14px; color: var(--acc-v2-text); }
.acc-portal-recent-list small { font-size: 12px; color: var(--acc-v2-text-light); }
.acc-portal-recent-tier { flex-shrink: 0; }
.acc-portal-tools-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.acc-portal-tool {
display: block;
background: linear-gradient(135deg, rgba(99, 102, 241, .03), rgba(139, 92, 246, .03));
border: 2px solid var(--acc-v2-border);
border-radius: 14px;
padding: 20px;
text-decoration: none;
color: var(--acc-v2-text);
transition: all .2s;
}
.acc-portal-tool:hover {
border-color: var(--acc-v2-primary);
background: linear-gradient(135deg, rgba(99, 102, 241, .08), rgba(139, 92, 246, .06));
color: var(--acc-v2-text);
transform: translateY(-2px);
}
.acc-portal-tool-icon {
display: inline-block;
font-size: 28px;
margin-bottom: 8px;
}
.acc-portal-tool strong { display: block; font-size: 15px; margin-bottom: 4px; }
.acc-portal-tool small { color: var(--acc-v2-text-light); font-size: 12px; line-height: 1.5; }
/* SDC dashboard specifics */
.acc-portal-demo-banner {
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 12px 18px;
border-radius: 12px;
margin-bottom: 24px;
font-size: 14px;
display: flex;
align-items: center;
gap: 12px;
}
.acc-sdc-progress { margin: 16px 0; }
.acc-sdc-progress-bar {
height: 14px;
background: var(--acc-v2-border);
border-radius: 100px;
overflow: hidden;
margin-bottom: 8px;
}
.acc-sdc-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--acc-v2-primary), var(--acc-v2-purple));
border-radius: 100px;
}
.acc-sdc-progress-label {
font-size: 14px;
color: var(--acc-v2-text-light);
margin: 0;
}
.acc-sdc-cat-bars {
display: flex;
flex-direction: column;
gap: 10px;
}
.acc-sdc-cat-bar {
display: grid;
grid-template-columns: 140px 1fr 60px;
gap: 12px;
align-items: center;
}
.acc-sdc-cat-bar-label { font-size: 13px; font-weight: 600; }
.acc-sdc-cat-bar-track {
height: 8px;
background: var(--acc-v2-border);
border-radius: 100px;
overflow: hidden;
}
.acc-sdc-cat-bar-fill { height: 100%; border-radius: 100px; transition: width .8s ease-out; }
.acc-sdc-cat-bar-value {
font-size: 12px;
font-weight: 700;
color: var(--acc-v2-text-muted);
text-align: right;
}
.acc-sdc-map-placeholder {
background: var(--acc-v2-bg-alt);
border: 2px dashed var(--acc-v2-border);
border-radius: 12px;
min-height: 300px;
}
.acc-sdc-export-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 12px;
}
/* Login required / not authorized */
.acc-portal-login-required,
.acc-portal-not-authorized {
max-width: 600px;
margin: 60px auto;
background: #fff;
padding: 40px;
border-radius: 16px;
text-align: center;
border: 1px solid var(--acc-v2-border);
}
/* Nearby button */
.acc-nearby-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, var(--acc-v2-primary), var(--acc-v2-purple));
color: #fff;
border: none;
padding: 14px 28px;
border-radius: 100px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 8px 24px rgba(99, 102, 241, .35);
transition: all .2s;
font-family: inherit;
}
.acc-nearby-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(99, 102, 241, .45);
}
.acc-nearby-btn-icon { font-size: 18px; }
@media (max-width: 960px) {
.acc-portal-stats { grid-template-columns: repeat(2, 1fr); }
.acc-portal-grid { grid-template-columns: 1fr; }
.acc-portal-tools-grid { grid-template-columns: 1fr; }
.acc-portal-header h1 { font-size: 28px; }
}
@media (max-width: 480px) {
.acc-portal-stats { grid-template-columns: 1fr; }
.acc-sdc-cat-bar { grid-template-columns: 100px 1fr 50px; }
}
/* =============================================================================
v1.1.6 — DASHBOARD SDC RICHE (avec graphs SVG)
============================================================================= */
/* KPI Grid (6 cards) */
.acc-sdc-kpi-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 14px;
margin-bottom: 24px;
}
.acc-sdc-kpi {
background: #fff;
border-radius: 14px;
padding: 18px;
border: 1px solid var(--acc-v2-border);
box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
display: flex;
align-items: flex-start;
gap: 12px;
transition: transform .2s, box-shadow .2s;
}
.acc-sdc-kpi:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}
.acc-sdc-kpi-primary {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: #fff;
border-color: transparent;
}
.acc-sdc-kpi-primary .acc-sdc-kpi-num,
.acc-sdc-kpi-primary .acc-sdc-kpi-label,
.acc-sdc-kpi-primary .acc-sdc-kpi-meta {
color: #fff;
}
.acc-sdc-kpi-primary .acc-sdc-kpi-icon {
background: rgba(255, 255, 255, .2);
}
.acc-sdc-kpi-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.acc-sdc-kpi-content { min-width: 0; flex: 1; }
.acc-sdc-kpi-num {
font-size: 26px;
font-weight: 900;
line-height: 1;
color: var(--acc-v2-text);
margin-bottom: 3px;
letter-spacing: -0.02em;
}
.acc-sdc-kpi-num small {
font-size: 13px;
color: var(--acc-v2-text-muted);
font-weight: 600;
}
.acc-sdc-kpi-label {
font-size: 12px;
color: var(--acc-v2-text-light);
font-weight: 700;
margin-bottom: 3px;
line-height: 1.2;
}
.acc-sdc-kpi-meta {
font-size: 11px;
color: var(--acc-v2-text-muted);
}
.acc-sdc-trend-up {
color: #10b981;
font-weight: 700;
}
.acc-sdc-trend-down {
color: #ef4444;
font-weight: 700;
}
/* Section head with toggle buttons */
.acc-sdc-section-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
flex-wrap: wrap;
gap: 12px;
}
.acc-sdc-section-head h2 {
margin: 0 !important;
}
.acc-sdc-section-actions {
display: flex;
gap: 4px;
background: var(--acc-v2-bg-alt);
padding: 4px;
border-radius: 100px;
}
.acc-sdc-toggle-btn {
padding: 6px 14px;
font-size: 12px;
font-weight: 700;
color: var(--acc-v2-text-light);
border-radius: 100px;
cursor: pointer;
transition: all .2s;
}
.acc-sdc-toggle-btn.is-active {
background: #fff;
color: var(--acc-v2-primary);
box-shadow: 0 1px 3px rgba(15, 23, 42, .1);
}
/* Chart SVG */
.acc-sdc-chart-svg {
width: 100%;
height: auto;
display: block;
}
.acc-sdc-chart-legend {
display: flex;
gap: 24px;
flex-wrap: wrap;
justify-content: center;
margin-top: 12px;
font-size: 13px;
color: var(--acc-v2-text-light);
}
.acc-sdc-chart-legend span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.acc-sdc-legend-dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
}
/* Pie chart wrap */
.acc-sdc-pie-wrap {
display: grid;
grid-template-columns: 220px 1fr;
gap: 24px;
align-items: center;
}
.acc-sdc-pie-svg {
display: block;
}
.acc-sdc-pie-legend {
list-style: none;
padding: 0;
margin: 0;
}
.acc-sdc-pie-legend li {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid var(--acc-v2-border);
font-size: 14px;
}
.acc-sdc-pie-legend li:last-child { border-bottom: none; }
.acc-sdc-legend-label {
flex: 1;
color: var(--acc-v2-text);
font-weight: 600;
}
.acc-sdc-legend-value {
font-weight: 800;
color: var(--acc-v2-text);
}
.acc-sdc-legend-value small {
color: var(--acc-v2-text-muted);
font-weight: 600;
}
/* Grid 2:1 (2 columns first row wider) */
.acc-portal-grid.acc-sdc-grid-2-1 {
grid-template-columns: 1.2fr 1fr;
}
/* Cat bars amélio (avec % inline) */
.acc-sdc-cat-bar {
display: grid;
grid-template-columns: 130px 1fr 60px;
gap: 12px;
align-items: center;
padding: 8px 0;
}
.acc-sdc-cat-bar-track {
height: 26px;
background: var(--acc-v2-bg-alt);
border-radius: 100px;
overflow: hidden;
position: relative;
}
.acc-sdc-cat-bar-fill {
height: 100%;
border-radius: 100px;
transition: width 1s ease-out;
position: relative;
display: flex;
align-items: center;
padding-right: 10px;
justify-content: flex-end;
}
.acc-sdc-cat-bar-pct {
color: #fff;
font-size: 11px;
font-weight: 800;
text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
/* Radar chart */
.acc-sdc-radar-svg {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
/* Streets list */
.acc-sdc-streets {
display: flex;
flex-direction: column;
gap: 8px;
}
.acc-sdc-street {
display: grid;
grid-template-columns: 180px 1fr 50px 50px;
gap: 10px;
align-items: center;
padding: 6px 0;
font-size: 13px;
}
.acc-sdc-street-name {
color: var(--acc-v2-text);
font-weight: 600;
}
.acc-sdc-street-bar {
height: 8px;
background: var(--acc-v2-bg-alt);
border-radius: 100px;
overflow: hidden;
}
.acc-sdc-street-fill {
height: 100%;
border-radius: 100px;
transition: width 1s ease-out;
}
.acc-sdc-street-pct {
font-weight: 800;
text-align: right;
font-size: 13px;
}
.acc-sdc-street-count {
color: var(--acc-v2-text-muted);
font-size: 12px;
text-align: right;
}
/* Top list */
.acc-sdc-top-list {
list-style: none;
padding: 0;
margin: 0;
counter-reset: top;
}
.acc-sdc-top-list li {
display: flex;
align-items: center;
gap: 14px;
padding: 12px;
margin-bottom: 8px;
background: linear-gradient(135deg, rgba(99, 102, 241, .03), rgba(139, 92, 246, .02));
border-radius: 10px;
border-left: 3px solid var(--acc-v2-primary);
}
.acc-sdc-top-list li:nth-child(1) { border-left-color: #f59e0b; background: linear-gradient(135deg, rgba(245, 158, 11, .08), rgba(245, 158, 11, .02)); }
.acc-sdc-top-list li:nth-child(2) { border-left-color: #cbd5e1; }
.acc-sdc-top-list li:nth-child(3) { border-left-color: #d97706; }
.acc-sdc-top-rank {
font-size: 22px;
font-weight: 900;
color: var(--acc-v2-text-muted);
width: 40px;
flex-shrink: 0;
}
.acc-sdc-top-list li:nth-child(1) .acc-sdc-top-rank { color: #f59e0b; }
.acc-sdc-top-info {
flex: 1;
min-width: 0;
}
.acc-sdc-top-info strong {
display: block;
font-size: 14px;
color: var(--acc-v2-text);
margin-bottom: 2px;
}
.acc-sdc-top-info small {
font-size: 12px;
color: var(--acc-v2-text-light);
}
/* Map container (full carte AccesID intégrée) */
.acc-sdc-map-container {
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--acc-v2-border);
}
/* Export section */
.acc-sdc-export-section {
background: linear-gradient(135deg, rgba(99, 102, 241, .03), rgba(139, 92, 246, .03)) !important;
border-color: var(--acc-v2-primary) !important;
}
.acc-sdc-export-buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-top: 16px;
}
.acc-sdc-export-btn {
background: #fff;
border: 2px solid var(--acc-v2-border);
border-radius: 12px;
padding: 16px;
text-decoration: none;
color: var(--acc-v2-text);
transition: all .2s;
display: flex;
flex-direction: column;
gap: 4px;
text-align: left;
}
.acc-sdc-export-btn:hover {
border-color: var(--acc-v2-primary);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(99, 102, 241, .15);
color: var(--acc-v2-text);
}
.acc-sdc-export-icon {
font-size: 28px;
margin-bottom: 4px;
}
.acc-sdc-export-btn strong {
font-size: 14px;
color: var(--acc-v2-text);
}
.acc-sdc-export-btn small {
font-size: 11px;
color: var(--acc-v2-text-light);
line-height: 1.4;
}
/* Demo banner amélio */
.acc-portal-demo-banner span {
flex: 1;
font-weight: 500;
}
/* Responsive dashboard SDC */
@media (max-width: 1200px) {
.acc-sdc-kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
.acc-sdc-kpi-grid { grid-template-columns: repeat(2, 1fr); }
.acc-portal-grid.acc-sdc-grid-2-1 { grid-template-columns: 1fr; }
.acc-sdc-pie-wrap { grid-template-columns: 1fr; justify-items: center; }
.acc-sdc-export-buttons { grid-template-columns: repeat(2, 1fr); }
.acc-sdc-street { grid-template-columns: 130px 1fr 40px 40px; }
}
@media (max-width: 480px) {
.acc-sdc-kpi-grid { grid-template-columns: 1fr; }
.acc-sdc-export-buttons { grid-template-columns: 1fr; }
.acc-sdc-street { grid-template-columns: 1fr; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--acc-v2-border); }
.acc-sdc-cat-bar { grid-template-columns: 100px 1fr 50px; }
}
/* =============================================================================
v1.1.7 — HERO V3 (style AllAccessible Partner Program — bandeau noir + reste blanc)
============================================================================= */
.acc-hero-v3 {
position: relative;
min-height: 540px;
background: linear-gradient(180deg, #0b1020 0%, #1a1f3a 50%, #0f172a 100%);
color: #fff;
overflow: hidden;
padding: 80px 20px 100px;
display: flex;
align-items: center;
justify-content: center;
}
.acc-hero-v3-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.acc-hero-v3-bg-gradient {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at top, rgba(99, 102, 241, .15), transparent 60%),
radial-gradient(ellipse at bottom, rgba(139, 92, 246, .12), transparent 60%);
}
.acc-hero-v3-bg-glow {
position: absolute;
width: 600px;
height: 600px;
border-radius: 50%;
filter: blur(120px);
opacity: 0.25;
}
.acc-hero-v3-bg-glow-1 {
background: #6366f1;
top: -200px;
left: -200px;
animation: acc-hero-v3-glow 12s ease-in-out infinite;
}
.acc-hero-v3-bg-glow-2 {
background: #ec4899;
bottom: -200px;
right: -200px;
animation: acc-hero-v3-glow 16s ease-in-out infinite reverse;
}
@keyframes acc-hero-v3-glow {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(60px, 40px); }
}
.acc-hero-v3-bg-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}
.acc-hero-v3-container {
position: relative;
z-index: 1;
max-width: 880px;
margin: 0 auto;
text-align: center;
width: 100%;
}
/* Eyebrow pill (top badge) */
.acc-hero-v3-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, .08);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, .15);
color: rgba(255, 255, 255, .9);
font-size: 13px;
font-weight: 600;
padding: 8px 18px;
border-radius: 100px;
margin-bottom: 32px;
letter-spacing: 0.01em;
}
.acc-hero-v3-eyebrow-icon {
color: #c4b5fd;
font-size: 16px;
line-height: 1;
}
/* Title with gradient highlight */
.acc-hero-v3-title {
font-size: clamp(40px, 6.5vw, 72px);
font-weight: 900;
line-height: 1.05;
letter-spacing: -0.03em;
color: #fff;
margin: 0 0 24px;
}
.acc-hero-v3-title-highlight {
background: linear-gradient(135deg, #06b6d4 0%, #6366f1 50%, #c4b5fd 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
display: inline-block;
}
.acc-hero-v3-subtitle {
font-size: clamp(15px, 1.6vw, 18px);
color: rgba(255, 255, 255, .75);
line-height: 1.6;
max-width: 640px;
margin: 0 auto 44px;
font-weight: 400;
}
/* Feature cards row (4 cards inline) */
.acc-hero-v3-features {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
max-width: 760px;
margin: 0 auto 48px;
}
.acc-hero-v3-feature {
background: rgba(255, 255, 255, .04);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 16px;
padding: 22px 16px;
text-align: center;
transition: all .3s;
}
.acc-hero-v3-feature:hover {
background: rgba(255, 255, 255, .07);
border-color: rgba(196, 181, 253, .25);
transform: translateY(-3px);
}
.acc-hero-v3-feature-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(255, 255, 255, .08);
color: var(--icon-color, #c4b5fd);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
border: 1px solid rgba(255, 255, 255, .06);
}
.acc-hero-v3-feature strong {
display: block;
font-size: 14px;
font-weight: 700;
color: #fff;
margin-bottom: 3px;
line-height: 1.2;
}
.acc-hero-v3-feature small {
color: rgba(255, 255, 255, .55);
font-size: 11.5px;
line-height: 1.4;
}
/* CTA row */
.acc-hero-v3-cta-row {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 24px;
}
.acc-hero-v3-cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 32px;
border-radius: 10px;
font-size: 15px;
font-weight: 700;
text-decoration: none;
transition: all .2s;
border: 1px solid transparent;
min-width: 200px;
}
.acc-hero-v3-cta-primary {
background: #2563eb;
color: #fff;
}
.acc-hero-v3-cta-primary:hover {
background: #1d4ed8;
color: #fff;
transform: translateY(-1px);
box-shadow: 0 10px 28px rgba(37, 99, 235, .35);
}
.acc-hero-v3-cta-ghost {
background: rgba(255, 255, 255, .05);
color: #fff;
border-color: rgba(255, 255, 255, .15);
}
.acc-hero-v3-cta-ghost:hover {
background: rgba(255, 255, 255, .1);
color: #fff;
border-color: rgba(255, 255, 255, .25);
}
/* Secondary link */
.acc-hero-v3-secondary-link {
color: rgba(255, 255, 255, .55);
font-size: 14px;
margin: 0;
}
.acc-hero-v3-secondary-link a {
color: #06b6d4;
text-decoration: none;
font-weight: 600;
margin-left: 6px;
}
.acc-hero-v3-secondary-link a:hover {
color: #67e8f9;
text-decoration: underline;
}
/* Light mode for sections AFTER hero (override v2 wraps) */
body .acc-hero-v3 + section,
body .acc-hero-v3 ~ section.acc-cats-v2,
body .acc-hero-v3 ~ section.acc-features-v2,
body .acc-hero-v3 ~ section.acc-stats-v2,
body .acc-hero-v3 ~ section.acc-howit-v2,
body .acc-hero-v3 ~ section.acc-testimonials-v2,
body .acc-hero-v3 ~ section.acc-partners-v2,
body .acc-hero-v3 ~ section.acc-badge-tiers-v2,
body .acc-hero-v3 ~ section.acc-promoacces-v2 {
background: #ffffff;
}
/* Responsive */
@media (max-width: 768px) {
.acc-hero-v3 {
padding: 60px 16px 70px;
min-height: 480px;
}
.acc-hero-v3-features {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.acc-hero-v3-feature {
padding: 18px 12px;
}
.acc-hero-v3-cta { min-width: 160px; padding: 12px 24px; font-size: 14px; }
}
@media (max-width: 480px) {
.acc-hero-v3-title { font-size: 36px; }
.acc-hero-v3-features { grid-template-columns: repeat(2, 1fr); }
.acc-hero-v3-cta-row { flex-direction: column; }
.acc-hero-v3-cta { width: 100%; }
}
/* =============================================================================
v1.1.8 — NAVBAR + FOOTER (Site Chrome)
============================================================================= */
/* Sticky navbar */
.acc-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9000;
transition: background .3s, box-shadow .3s, border-color .3s;
border-bottom: 1px solid transparent;
}
.acc-navbar-overlay {
background: transparent;
color: #fff;
}
.acc-navbar-solid {
background: rgba(255, 255, 255, .98);
backdrop-filter: blur(10px);
border-bottom-color: var(--acc-v2-border, #e2e8f0);
}
.acc-navbar.is-scrolled {
background: rgba(255, 255, 255, .98);
backdrop-filter: blur(10px);
border-bottom-color: var(--acc-v2-border, #e2e8f0);
box-shadow: 0 4px 20px rgba(15, 23, 42, .06);
color: var(--acc-v2-text, #0f172a);
}
.acc-navbar.is-scrolled .acc-navbar-menu a,
.acc-navbar.is-scrolled .acc-navbar-logo {
color: var(--acc-v2-text, #0f172a);
}
.acc-navbar-inner {
max-width: 1280px;
margin: 0 auto;
padding: 14px 20px;
display: flex;
align-items: center;
gap: 24px;
}
/* Logo */
.acc-navbar-logo {
display: inline-flex;
align-items: center;
gap: 8px;
color: inherit;
text-decoration: none;
flex-shrink: 0;
font-weight: 800;
}
.acc-navbar-logo img {
height: 36px;
width: auto;
}
.acc-navbar-logo-icon {
width: 32px;
height: 32px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: #fff;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.acc-navbar-logo-text {
font-size: 18px;
letter-spacing: -0.01em;
}
/* Menu */
.acc-navbar-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 4px;
flex: 1;
justify-content: center;
}
.acc-navbar-menu li { margin: 0; }
.acc-navbar-menu a {
display: block;
padding: 8px 14px;
color: inherit;
text-decoration: none;
font-size: 14px;
font-weight: 600;
border-radius: 8px;
transition: background .2s, color .2s;
}
.acc-navbar-overlay .acc-navbar-menu a {
color: rgba(255, 255, 255, .9);
}
.acc-navbar-menu a:hover {
background: rgba(99, 102, 241, .1);
color: var(--acc-v2-primary, #6366f1);
}
.acc-navbar-menu a[aria-current="page"] {
color: var(--acc-v2-primary, #6366f1);
background: rgba(99, 102, 241, .08);
}
.acc-navbar-overlay .acc-navbar-menu a[aria-current="page"] {
background: rgba(255, 255, 255, .15);
color: #fff;
}
/* Actions (Login/Signup) */
.acc-navbar-actions {
display: flex;
gap: 8px;
align-items: center;
flex-shrink: 0;
}
.acc-navbar-btn {
padding: 8px 18px;
border-radius: 8px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: all .2s;
border: 1px solid transparent;
}
.acc-navbar-btn-ghost {
color: inherit;
background: transparent;
}
.acc-navbar-overlay .acc-navbar-btn-ghost {
color: #fff;
border-color: rgba(255, 255, 255, .25);
}
.acc-navbar-btn-ghost:hover {
background: rgba(99, 102, 241, .1);
color: var(--acc-v2-primary, #6366f1);
}
.acc-navbar-overlay .acc-navbar-btn-ghost:hover {
background: rgba(255, 255, 255, .15);
color: #fff;
}
.acc-navbar-btn-primary {
background: #2563eb;
color: #fff;
}
.acc-navbar-btn-primary:hover {
background: #1d4ed8;
color: #fff;
transform: translateY(-1px);
}
/* Burger (mobile) */
.acc-navbar-burger {
display: none;
width: 40px;
height: 40px;
border: none;
background: transparent;
cursor: pointer;
padding: 8px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
border-radius: 8px;
}
.acc-navbar-burger span {
display: block;
width: 22px;
height: 2px;
background: currentColor;
border-radius: 2px;
transition: transform .3s;
}
.acc-navbar.is-open .acc-navbar-burger span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.acc-navbar.is-open .acc-navbar-burger span:nth-child(2) {
opacity: 0;
}
.acc-navbar.is-open .acc-navbar-burger span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Body padding pour compenser navbar fixe (override sur pages avec hero foncé) */
body.has-accesid-chrome {
padding-top: 0;
}
body.has-accesid-chrome:not(.home) .acc-hero-v3 {
/* hero already has padding */
}
/* Mobile responsive navbar */
@media (max-width: 980px) {
.acc-navbar-burger { display: flex; }
.acc-navbar-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
flex-direction: column;
padding: 16px;
gap: 4px;
box-shadow: 0 12px 40px rgba(0, 0, 0, .15);
border-bottom: 1px solid var(--acc-v2-border, #e2e8f0);
max-height: 0;
overflow: hidden;
transition: max-height .3s ease;
}
.acc-navbar.is-open .acc-navbar-menu {
max-height: 500px;
}
.acc-navbar-menu a {
padding: 12px 16px;
font-size: 16px;
color: var(--acc-v2-text, #0f172a) !important;
}
.acc-navbar-actions {
margin-left: auto;
}
.acc-navbar-btn {
padding: 6px 12px;
font-size: 13px;
}
}
/* ============================================================================
FOOTER
============================================================================ */
.acc-footer {
background: linear-gradient(180deg, #0f172a 0%, #0b1020 100%);
color: rgba(255, 255, 255, .8);
padding: 60px 20px 24px;
margin-top: 80px;
}
.acc-footer-inner {
max-width: 1280px;
margin: 0 auto;
}
.acc-footer-cols {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
gap: 40px;
margin-bottom: 40px;
padding-bottom: 32px;
border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.acc-footer-col h3 {
color: #fff;
font-size: 14px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 14px;
}
.acc-footer-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.acc-footer-col li {
margin-bottom: 8px;
}
.acc-footer-col a {
color: rgba(255, 255, 255, .7);
text-decoration: none;
font-size: 14px;
transition: color .2s;
}
.acc-footer-col a:hover {
color: #fff;
}
.acc-footer-col-brand .acc-footer-logo {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
color: #fff;
text-decoration: none;
font-size: 22px;
font-weight: 800;
}
.acc-footer-tagline {
font-size: 14px;
line-height: 1.6;
color: rgba(255, 255, 255, .7);
margin-bottom: 18px;
}
.acc-footer-partners {
color: rgba(255, 255, 255, .55);
font-size: 12px;
margin: 0;
}
.acc-footer-partners strong {
color: #fff;
font-size: 14px;
letter-spacing: 0.02em;
}
.acc-footer-bottom {
text-align: center;
color: rgba(255, 255, 255, .55);
font-size: 13px;
}
.acc-footer-bottom p {
margin: 0 0 8px;
}
.acc-footer-disclaimer {
font-size: 12px;
opacity: 0.7;
max-width: 720px;
margin: 0 auto !important;
}
@media (max-width: 768px) {
.acc-footer-cols {
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.acc-footer-col-brand {
grid-column: 1 / -1;
}
}
@media (max-width: 480px) {
.acc-footer-cols { grid-template-columns: 1fr; }
}
/* =============================================================================
v1.1.8 — PRICING PAGES (B2C, B2B, B2G)
============================================================================= */
.acc-pricing-section {
padding: 80px 20px 60px;
background: #fff;
}
.acc-pricing-container {
max-width: 1200px;
margin: 0 auto;
}
.acc-pricing-header {
text-align: center;
margin-bottom: 48px;
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.acc-pricing-header h1 {
font-size: clamp(32px, 5vw, 48px);
font-weight: 900;
color: var(--acc-v2-text, #0f172a);
margin: 12px 0 16px;
line-height: 1.1;
letter-spacing: -0.02em;
}
.acc-pricing-header p {
color: var(--acc-v2-text-muted, #64748b);
font-size: 17px;
line-height: 1.6;
}
/* Toggle mensuel/annuel */
.acc-pricing-toggle {
display: inline-flex;
background: var(--acc-v2-bg-alt, #f1f5f9);
border-radius: 100px;
padding: 4px;
margin: 0 auto 40px;
gap: 4px;
}
.acc-pricing-section .acc-pricing-toggle {
display: flex;
width: fit-content;
margin: 0 auto 40px;
}
.acc-pricing-toggle-btn {
background: transparent;
border: none;
padding: 10px 24px;
font-size: 14px;
font-weight: 700;
color: var(--acc-v2-text-muted, #64748b);
cursor: pointer;
border-radius: 100px;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all .2s;
}
.acc-pricing-toggle-btn.is-active {
background: #fff;
color: var(--acc-v2-primary, #6366f1);
box-shadow: 0 1px 3px rgba(15, 23, 42, .1);
}
.acc-pricing-toggle-badge {
background: #10b981;
color: #fff;
padding: 2px 8px;
border-radius: 100px;
font-size: 11px;
font-weight: 800;
}
/* Pricing grid */
.acc-pricing-grid {
display: grid;
gap: 20px;
margin-bottom: 60px;
}
.acc-pricing-grid-3 { grid-template-columns: repeat(3, 1fr); }
.acc-pricing-grid-4 { grid-template-columns: repeat(4, 1fr); }
.acc-pricing-plan {
background: #fff;
border: 2px solid var(--acc-v2-border, #e2e8f0);
border-radius: 16px;
padding: 28px;
display: flex;
flex-direction: column;
position: relative;
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.acc-pricing-plan:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(15, 23, 42, .08);
}
.acc-pricing-plan-popular {
border-color: var(--acc-v2-primary, #6366f1);
background: linear-gradient(180deg, rgba(99, 102, 241, .03), #fff);
transform: scale(1.02);
}
.acc-pricing-plan-popular:hover {
transform: translateY(-4px) scale(1.02);
}
.acc-pricing-plan-tag {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: #fff;
padding: 6px 16px;
border-radius: 100px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
.acc-pricing-plan-header {
margin-bottom: 24px;
}
.acc-pricing-plan-icon,
.acc-pricing-plan-tier-icon {
width: 48px;
height: 48px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-bottom: 12px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: #fff;
}
.acc-pricing-plan h3 {
font-size: 22px;
font-weight: 800;
color: var(--acc-v2-text, #0f172a);
margin: 0 0 4px;
}
.acc-pricing-plan-desc {
color: var(--acc-v2-text-muted, #64748b);
font-size: 14px;
margin: 0;
}
.acc-pricing-plan-price {
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid var(--acc-v2-border, #e2e8f0);
}
.acc-pricing-plan-amount {
font-size: 40px;
font-weight: 900;
color: var(--acc-v2-text, #0f172a);
letter-spacing: -0.02em;
line-height: 1;
}
.acc-pricing-plan-amount small {
font-size: 22px;
color: var(--acc-v2-text-muted, #64748b);
margin-left: 2px;
}
.acc-pricing-plan-period {
color: var(--acc-v2-text-muted, #64748b);
font-size: 14px;
display: block;
margin-top: 4px;
}
.acc-pricing-plan-alt-price {
color: var(--acc-v2-text-muted, #64748b);
font-size: 13px;
margin: 8px 0 0;
}
.acc-pricing-plan-features {
list-style: none;
padding: 0;
margin: 0 0 24px;
flex: 1;
}
.acc-pricing-plan-features li {
padding: 7px 0;
font-size: 14px;
color: var(--acc-v2-text, #0f172a);
line-height: 1.5;
}
.acc-pricing-plan-feature-faded {
color: var(--acc-v2-text-muted, #94a3b8) !important;
font-style: italic;
}
.acc-pricing-plan-note {
background: var(--acc-v2-bg-alt, #f1f5f9);
padding: 12px;
border-radius: 8px;
font-size: 13px;
color: var(--acc-v2-text-muted, #64748b);
margin: 0 0 16px;
}
.acc-pricing-plan-cta {
display: block;
text-align: center;
padding: 13px 20px;
border-radius: 10px;
font-weight: 700;
text-decoration: none;
transition: all .2s;
margin-top: auto;
font-size: 15px;
}
.acc-pricing-plan-cta-primary {
background: #2563eb;
color: #fff;
}
.acc-pricing-plan-cta-primary:hover {
background: #1d4ed8;
color: #fff;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(37, 99, 235, .25);
}
.acc-pricing-plan-cta-secondary {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: #fff;
}
.acc-pricing-plan-cta-secondary:hover {
color: #fff;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(245, 158, 11, .25);
}
.acc-pricing-plan-cta-ghost {
background: transparent;
color: var(--acc-v2-text, #0f172a);
border: 2px solid var(--acc-v2-border, #e2e8f0);
}
.acc-pricing-plan-cta-ghost:hover {
border-color: var(--acc-v2-primary, #6366f1);
color: var(--acc-v2-primary, #6366f1);
}
.acc-pricing-footnote {
text-align: center;
color: var(--acc-v2-text-muted, #64748b);
font-size: 14px;
margin-top: 32px;
}
.acc-pricing-footnote a {
color: var(--acc-v2-primary, #6366f1);
font-weight: 700;
}
/* Why section */
.acc-pricing-why {
margin: 80px 0 60px;
}
.acc-pricing-why h2 {
text-align: center;
font-size: 32px;
font-weight: 900;
margin-bottom: 40px;
color: var(--acc-v2-text, #0f172a);
}
.acc-pricing-why-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.acc-pricing-why-item {
background: linear-gradient(135deg, rgba(99, 102, 241, .03), #fff);
border: 1px solid var(--acc-v2-border, #e2e8f0);
border-radius: 12px;
padding: 24px;
}
.acc-pricing-why-icon {
font-size: 32px;
margin-bottom: 12px;
}
.acc-pricing-why-item h3 {
font-size: 16px;
font-weight: 800;
margin: 0 0 8px;
color: var(--acc-v2-text, #0f172a);
}
.acc-pricing-why-item p {
color: var(--acc-v2-text-muted, #64748b);
font-size: 14px;
line-height: 1.6;
margin: 0;
}
/* Comparaison table */
.acc-pricing-compare {
margin: 80px 0;
}
.acc-pricing-compare h2 {
text-align: center;
font-size: 28px;
font-weight: 900;
margin-bottom: 32px;
}
.acc-pricing-compare-table-wrap {
overflow-x: auto;
border: 1px solid var(--acc-v2-border, #e2e8f0);
border-radius: 16px;
}
.acc-pricing-compare-table {
width: 100%;
border-collapse: collapse;
background: #fff;
min-width: 720px;
}
.acc-pricing-compare-table th,
.acc-pricing-compare-table td {
padding: 14px 16px;
text-align: left;
border-bottom: 1px solid var(--acc-v2-border, #e2e8f0);
font-size: 14px;
}
.acc-pricing-compare-table th {
background: var(--acc-v2-bg-alt, #f1f5f9);
font-weight: 800;
color: var(--acc-v2-text, #0f172a);
}
.acc-pricing-compare-table th.is-popular {
background: linear-gradient(135deg, rgba(99, 102, 241, .15), rgba(139, 92, 246, .1));
color: var(--acc-v2-primary, #6366f1);
}
.acc-pricing-compare-table tbody tr:hover {
background: rgba(99, 102, 241, .02);
}
.acc-pricing-compare-price-row {
background: var(--acc-v2-bg-alt, #f8fafc);
}
/* SDC page */
.acc-sdc-value-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 48px;
}
.acc-sdc-value-item {
background: #fff;
border: 1px solid var(--acc-v2-border, #e2e8f0);
border-radius: 12px;
padding: 24px;
text-align: center;
}
.acc-sdc-value-icon {
font-size: 40px;
margin-bottom: 12px;
}
.acc-sdc-value-item h3 {
font-size: 16px;
font-weight: 800;
margin: 0 0 8px;
}
.acc-sdc-value-item p {
color: var(--acc-v2-text-muted, #64748b);
font-size: 14px;
line-height: 1.6;
margin: 0;
}
.acc-sdc-cta-block {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: #fff;
padding: 48px;
border-radius: 20px;
text-align: center;
margin-bottom: 48px;
}
.acc-sdc-cta-block h2 {
color: #fff;
font-size: 32px;
font-weight: 900;
margin: 0 0 16px;
}
.acc-sdc-cta-block p {
font-size: 16px;
color: rgba(255, 255, 255, .9);
line-height: 1.6;
max-width: 720px;
margin: 0 auto 16px;
}
.acc-sdc-cta-buttons {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-top: 24px;
}
.acc-sdc-cta-block .acc-pricing-plan-cta-primary {
background: #fff;
color: #6366f1;
}
.acc-sdc-cta-block .acc-pricing-plan-cta-primary:hover {
background: #f1f5f9;
color: #6366f1;
}
.acc-sdc-cta-block .acc-pricing-plan-cta-ghost {
background: rgba(255, 255, 255, .1);
color: #fff;
border-color: rgba(255, 255, 255, .3);
}
.acc-sdc-cta-block .acc-pricing-plan-cta-ghost:hover {
background: rgba(255, 255, 255, .2);
color: #fff;
}
.acc-sdc-included {
background: #f8fafc;
border-radius: 16px;
padding: 32px;
}
.acc-sdc-included h3 {
font-size: 20px;
font-weight: 800;
margin: 0 0 16px;
}
.acc-sdc-included ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.acc-sdc-included li {
padding: 8px 0;
font-size: 14px;
color: var(--acc-v2-text, #0f172a);
}
@media (max-width: 980px) {
.acc-pricing-grid-3,
.acc-pricing-grid-4 { grid-template-columns: 1fr; }
.acc-pricing-plan-popular { transform: none; }
.acc-pricing-why-grid { grid-template-columns: 1fr; }
.acc-sdc-value-grid { grid-template-columns: 1fr 1fr; }
.acc-sdc-included ul { grid-template-columns: 1fr; }
}
/* =============================================================================
v1.1.8 — UNDERSTAND BADGES PAGE
============================================================================= */
.acc-understand-section {
padding: 60px 20px;
}
.acc-understand-hero {
background: linear-gradient(180deg, #0b1020 0%, #1a1f3a 100%);
color: #fff;
text-align: center;
padding: 100px 20px 60px;
}
.acc-understand-hero h1 {
color: #fff;
font-size: clamp(36px, 5vw, 56px);
font-weight: 900;
margin: 16px 0;
letter-spacing: -0.02em;
}
.acc-understand-lead {
color: rgba(255, 255, 255, .8);
font-size: 18px;
line-height: 1.6;
max-width: 800px;
margin: 0 auto 32px;
}
.acc-understand-jumpto {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.acc-understand-jumpto a {
color: #fff;
background: rgba(255, 255, 255, .1);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, .2);
padding: 10px 20px;
border-radius: 100px;
text-decoration: none;
font-size: 14px;
font-weight: 700;
transition: all .2s;
}
.acc-understand-jumpto a:hover {
background: rgba(255, 255, 255, .2);
color: #fff;
}
.acc-understand-container {
max-width: 1200px;
margin: 0 auto;
}
.acc-understand-header {
text-align: center;
margin-bottom: 48px;
}
.acc-understand-header h2 {
font-size: clamp(28px, 4vw, 40px);
font-weight: 900;
margin: 12px 0 16px;
letter-spacing: -0.02em;
}
.acc-understand-header p {
color: var(--acc-v2-text-muted, #64748b);
font-size: 17px;
line-height: 1.6;
max-width: 760px;
margin: 0 auto;
}
.acc-understand-tiers {
display: grid;
gap: 20px;
margin-bottom: 60px;
}
.acc-understand-tier-card {
background: #fff;
border: 2px solid var(--tier-color, #94a3b8);
border-radius: 16px;
padding: 28px;
box-shadow: 0 4px 16px rgba(15, 23, 42, .04);
}
.acc-understand-tier-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid var(--acc-v2-border, #e2e8f0);
}
.acc-understand-tier-icon {
width: 56px;
height: 56px;
border-radius: 14px;
background: var(--tier-bg, #f1f5f9);
color: var(--tier-color, #94a3b8);
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
flex-shrink: 0;
}
.acc-understand-tier-num {
color: var(--acc-v2-text-muted, #64748b);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.acc-understand-tier-card h3 {
font-size: 22px;
font-weight: 900;
margin: 0;
color: var(--tier-color, #0f172a);
}
.acc-understand-tier-trust {
margin-left: auto;
flex-shrink: 0;
}
.acc-understand-star {
color: #cbd5e1;
font-size: 18px;
}
.acc-understand-star.is-on {
color: #f59e0b;
}
.acc-understand-tier-promise {
font-size: 16px;
line-height: 1.7;
color: var(--acc-v2-text, #0f172a);
margin: 0 0 16px;
}
.acc-understand-tier-criteria {
background: var(--acc-v2-bg-alt, #f8fafc);
padding: 16px;
border-radius: 10px;
font-size: 14px;
line-height: 1.6;
color: var(--acc-v2-text-muted, #475569);
}
.acc-understand-tier-criteria strong {
color: var(--acc-v2-text, #0f172a);
display: block;
margin-bottom: 4px;
}
/* Personalized search */
.acc-understand-personalized {
background: linear-gradient(180deg, #f8fafc, #fff);
border: 1px solid var(--acc-v2-border, #e2e8f0);
border-radius: 20px;
padding: 40px;
margin: 60px 0 30px;
}
.acc-understand-personalized h2 {
font-size: 28px;
font-weight: 900;
margin: 0 0 12px;
text-align: center;
}
.acc-understand-personalized > p {
text-align: center;
color: var(--acc-v2-text-muted, #64748b);
margin: 0 0 32px;
}
.acc-understand-needs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 32px;
}
.acc-understand-need {
background: #fff;
border: 1px solid var(--acc-v2-border, #e2e8f0);
border-radius: 12px;
padding: 14px;
text-align: center;
}
.acc-understand-need-icon {
font-size: 28px;
display: block;
margin-bottom: 6px;
}
.acc-understand-need strong {
display: block;
font-size: 13px;
color: var(--acc-v2-text, #0f172a);
margin-bottom: 2px;
}
.acc-understand-need small {
font-size: 11px;
color: var(--acc-v2-text-muted, #94a3b8);
line-height: 1.4;
}
.acc-understand-cta-row {
text-align: center;
margin: 0;
}
/* Report block */
.acc-understand-report {
background: linear-gradient(135deg, #fef3c7, #fef9c3);
border-left: 4px solid #f59e0b;
border-radius: 12px;
padding: 24px;
display: flex;
gap: 20px;
align-items: flex-start;
margin-top: 32px;
}
.acc-understand-report-icon {
font-size: 36px;
line-height: 1;
}
.acc-understand-report h3 {
margin: 0 0 8px;
font-size: 18px;
font-weight: 800;
}
.acc-understand-report p {
margin: 0;
color: #78350f;
line-height: 1.6;
}
/* Business section */
.acc-understand-business {
background: linear-gradient(180deg, #fff, #f8fafc);
}
.acc-understand-stat-hook {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: #fff;
padding: 36px;
border-radius: 20px;
display: grid;
grid-template-columns: auto 1fr;
gap: 32px;
align-items: center;
margin-bottom: 60px;
}
.acc-understand-stat-num {
font-size: 96px;
font-weight: 900;
line-height: 1;
letter-spacing: -0.04em;
}
.acc-understand-stat-content h3 {
color: #fff;
font-size: 24px;
font-weight: 800;
margin: 0 0 12px;
}
.acc-understand-stat-content p {
color: rgba(255, 255, 255, .9);
font-size: 16px;
line-height: 1.6;
margin: 0;
}
.acc-understand-reasons {
margin-bottom: 60px;
}
.acc-understand-reasons h3 {
text-align: center;
font-size: 28px;
font-weight: 900;
margin-bottom: 32px;
}
.acc-understand-reasons-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.acc-understand-reason {
background: #fff;
border: 1px solid var(--acc-v2-border, #e2e8f0);
border-radius: 14px;
padding: 24px;
transition: transform .2s, box-shadow .2s;
}
.acc-understand-reason:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}
.acc-understand-reason-icon {
font-size: 32px;
margin-bottom: 12px;
}
.acc-understand-reason h4 {
font-size: 16px;
font-weight: 800;
margin: 0 0 8px;
}
.acc-understand-reason p {
color: var(--acc-v2-text-muted, #64748b);
font-size: 14px;
line-height: 1.6;
margin: 0;
}
.acc-understand-process {
margin-bottom: 60px;
}
.acc-understand-process h3 {
text-align: center;
font-size: 28px;
font-weight: 900;
margin-bottom: 32px;
}
.acc-understand-process-steps {
display: grid;
gap: 16px;
max-width: 760px;
margin: 0 auto;
}
.acc-understand-step {
background: #fff;
border: 1px solid var(--acc-v2-border, #e2e8f0);
border-radius: 12px;
padding: 20px 24px;
display: flex;
gap: 20px;
align-items: flex-start;
}
.acc-understand-step-num {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: #fff;
font-size: 18px;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.acc-understand-step strong {
display: block;
font-size: 16px;
margin-bottom: 4px;
color: var(--acc-v2-text, #0f172a);
}
.acc-understand-step p {
color: var(--acc-v2-text-muted, #64748b);
font-size: 14px;
margin: 0;
line-height: 1.6;
}
.acc-understand-cta-block {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: #fff;
padding: 48px;
border-radius: 20px;
text-align: center;
}
.acc-understand-cta-block h3 {
color: #fff;
font-size: 28px;
font-weight: 900;
margin: 0 0 12px;
}
.acc-understand-cta-block p {
color: rgba(255, 255, 255, .95);
font-size: 16px;
margin: 0 0 24px;
}
.acc-understand-cta-block .acc-pricing-plan-cta-primary {
background: #fff;
color: #d97706;
}
.acc-understand-cta-block .acc-pricing-plan-cta-primary:hover {
background: #fef3c7;
color: #92400e;
}
.acc-understand-cta-block .acc-pricing-plan-cta-ghost {
background: rgba(255, 255, 255, .15);
color: #fff;
border-color: rgba(255, 255, 255, .35);
}
.acc-understand-cta-block .acc-pricing-plan-cta-ghost:hover {
background: rgba(255, 255, 255, .25);
color: #fff;
}
/* Comparison */
.acc-understand-compare {
background: var(--acc-v2-bg-alt, #f8fafc);
}
.acc-understand-compare-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 32px;
}
.acc-understand-compare-col {
background: #fff;
border: 1px solid var(--acc-v2-border, #e2e8f0);
border-radius: 14px;
padding: 28px;
}
.acc-understand-compare-col.is-us {
background: linear-gradient(180deg, rgba(99, 102, 241, .04), #fff);
border-color: var(--acc-v2-primary, #6366f1);
box-shadow: 0 8px 28px rgba(99, 102, 241, .08);
}
.acc-understand-compare-logo {
font-size: 22px;
font-weight: 900;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--acc-v2-border, #e2e8f0);
color: var(--acc-v2-text, #0f172a);
}
.acc-understand-compare-col.is-us .acc-understand-compare-logo {
color: var(--acc-v2-primary, #6366f1);
}
.acc-understand-compare-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.acc-understand-compare-col li {
padding: 6px 0;
font-size: 13px;
line-height: 1.5;
color: var(--acc-v2-text, #0f172a);
}
.acc-understand-compare-note {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--acc-v2-border, #e2e8f0);
font-style: italic;
color: var(--acc-v2-text-muted, #64748b);
font-size: 13px;
}
.acc-understand-compare-conclusion {
background: #fff;
border-left: 4px solid var(--acc-v2-primary, #6366f1);
padding: 20px;
border-radius: 8px;
color: var(--acc-v2-text, #0f172a);
line-height: 1.7;
margin: 0;
}
@media (max-width: 980px) {
.acc-understand-stat-hook {
grid-template-columns: 1fr;
text-align: center;
}
.acc-understand-stat-num { font-size: 64px; }
.acc-understand-reasons-grid,
.acc-understand-compare-grid { grid-template-columns: 1fr; }
.acc-understand-needs-grid { grid-template-columns: repeat(2, 1fr); }
.acc-understand-tier-trust { display: none; }
}
/* =============================================================================
v1.1.8 — STATEMENT WCAG
============================================================================= */
.acc-statement-section {
padding: 80px 20px;
background: #fff;
}
.acc-statement-container {
max-width: 880px;
margin: 0 auto;
}
.acc-statement-header {
text-align: center;
margin-bottom: 48px;
}
.acc-statement-header h1 {
font-size: clamp(32px, 5vw, 48px);
font-weight: 900;
margin: 12px 0 16px;
}
.acc-statement-lead {
color: var(--acc-v2-text-muted, #475569);
font-size: 17px;
line-height: 1.7;
}
.acc-statement-block {
background: #fff;
border: 1px solid var(--acc-v2-border, #e2e8f0);
border-radius: 14px;
padding: 28px;
margin-bottom: 20px;
}
.acc-statement-block h2 {
font-size: 22px;
font-weight: 800;
margin: 0 0 16px;
}
.acc-statement-conformity-meter {
margin-top: 20px;
}
.acc-statement-conformity-label {
font-size: 13px;
color: var(--acc-v2-text-muted, #64748b);
margin-bottom: 8px;
}
.acc-statement-conformity-bar {
height: 24px;
background: var(--acc-v2-bg-alt, #f1f5f9);
border-radius: 100px;
overflow: hidden;
margin-bottom: 8px;
}
.acc-statement-conformity-fill {
height: 100%;
background: linear-gradient(90deg, #10b981, #059669);
border-radius: 100px;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 12px;
color: #fff;
font-size: 12px;
font-weight: 800;
}
.acc-statement-conformity-targets {
display: flex;
gap: 8px;
font-size: 11px;
font-weight: 800;
color: var(--acc-v2-text-muted, #94a3b8);
}
.acc-statement-conformity-targets span {
padding: 2px 10px;
border-radius: 100px;
background: var(--acc-v2-bg-alt, #f1f5f9);
}
.acc-statement-conformity-targets .is-passed {
background: #d1fae5;
color: #065f46;
}
.acc-statement-conformity-targets .is-current {
background: #6366f1;
color: #fff;
}
.acc-statement-list {
list-style: none;
padding: 0;
margin: 0;
}
.acc-statement-list li {
padding: 8px 0;
border-bottom: 1px solid var(--acc-v2-border, #e2e8f0);
}
.acc-statement-list li:last-child { border-bottom: none; }
.acc-statement-list strong { display: block; }
.acc-statement-list small {
display: block;
color: var(--acc-v2-text-muted, #64748b);
font-size: 13px;
margin-top: 2px;
}
.acc-statement-tech-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.acc-statement-tech {
background: var(--acc-v2-bg-alt, #f8fafc);
padding: 14px;
border-radius: 10px;
text-align: center;
}
.acc-statement-tech strong { display: block; }
.acc-statement-tech small {
color: var(--acc-v2-text-muted, #64748b);
font-size: 12px;
}
.acc-statement-widget-promo {
background: linear-gradient(135deg, rgba(99, 102, 241, .04), rgba(139, 92, 246, .03));
border-color: rgba(99, 102, 241, .2);
}
.acc-statement-profiles {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin: 16px 0;
}
.acc-statement-profile {
background: #fff;
border: 1px solid var(--acc-v2-border, #e2e8f0);
padding: 8px 14px;
border-radius: 100px;
font-size: 13px;
font-weight: 600;
}
.acc-statement-issues {
list-style: none;
padding: 0;
margin: 0;
}
.acc-statement-issues li {
background: #fef9c3;
border-left: 3px solid #f59e0b;
padding: 16px 20px;
border-radius: 8px;
margin-bottom: 12px;
}
.acc-statement-issues strong {
display: block;
color: #78350f;
margin-bottom: 4px;
}
.acc-statement-issues p {
margin: 0;
color: #92400e;
font-size: 14px;
line-height: 1.6;
}
.acc-statement-feedback {
background: linear-gradient(135deg, rgba(6, 182, 212, .05), rgba(99, 102, 241, .03));
}
.acc-statement-feedback-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 20px 0;
}
.acc-statement-feedback-option {
background: #fff;
border: 2px solid var(--acc-v2-border, #e2e8f0);
border-radius: 12px;
padding: 20px;
text-decoration: none;
color: var(--acc-v2-text, #0f172a);
transition: all .2s;
text-align: center;
}
.acc-statement-feedback-option:hover {
border-color: var(--acc-v2-primary, #6366f1);
transform: translateY(-2px);
color: var(--acc-v2-text, #0f172a);
}
.acc-statement-feedback-icon {
font-size: 32px;
display: block;
margin-bottom: 8px;
}
.acc-statement-feedback-option strong {
display: block;
font-size: 15px;
margin-bottom: 2px;
}
.acc-statement-feedback-option small {
color: var(--acc-v2-text-muted, #64748b);
font-size: 13px;
}
.acc-statement-feedback-note {
background: var(--acc-v2-bg-alt, #f8fafc);
padding: 12px;
border-radius: 8px;
margin: 0;
font-size: 13px;
color: var(--acc-v2-text-muted, #64748b);
line-height: 1.6;
}
.acc-statement-commitment {
background: linear-gradient(135deg, rgba(16, 185, 129, .04), rgba(5, 150, 105, .03));
}
.acc-statement-commitment-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.acc-statement-commitment-list li {
background: #fff;
border-left: 3px solid #10b981;
padding: 14px 16px;
border-radius: 8px;
}
.acc-statement-commitment-list strong {
display: block;
margin-bottom: 4px;
}
.acc-statement-commitment-list small {
color: var(--acc-v2-text-muted, #64748b);
font-size: 13px;
}
.acc-statement-meta {
text-align: center;
color: var(--acc-v2-text-muted, #64748b);
font-size: 14px;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--acc-v2-border, #e2e8f0);
}
@media (max-width: 768px) {
.acc-statement-tech-grid { grid-template-columns: 1fr 1fr; }
.acc-statement-feedback-options,
.acc-statement-commitment-list { grid-template-columns: 1fr; }
}
/* =============================================================================
v1.1.9 — LEAFLET FALLBACK (when no Mapbox token)
============================================================================= */
.accesid-mapv2-pin-leaflet {
background: transparent !important;
border: none !important;
}
.accesid-mapv2-pin-dot {
width: 22px;
height: 22px;
border-radius: 50%;
border: 3px solid #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
.accesid-mapv2-popup {
font-family: system-ui, -apple-system, sans-serif;
line-height: 1.5;
}
.accesid-mapv2-popup strong {
display: block;
font-size: 16px;
margin-bottom: 4px;
color: #0f172a;
}
.accesid-mapv2-popup-tier {
font-size: 13px;
font-weight: 800;
margin-bottom: 6px;
}
.accesid-mapv2-popup-score,
.accesid-mapv2-popup-cat,
.accesid-mapv2-popup-city {
font-size: 13px;
color: #475569;
margin-bottom: 2px;
}
.accesid-mapv2-popup-link {
display: inline-block;
margin-top: 8px;
color: #2563eb;
font-weight: 700;
text-decoration: none;
font-size: 13px;
}
.accesid-mapv2-popup-link:hover { text-decoration: underline; }
/* ============================================================
v1.2.1 — Formulaires éval, signup, thank-you
============================================================ */
/* === EVAL FORM (Quick Scan / Full Audit) === */
.acc-eval-form-section {
padding: 48px 16px;
background: #f8fafc;
min-height: 80vh;
}
.acc-eval-form-container {
max-width: 1100px;
margin: 0 auto;
}
.acc-eval-form-header { text-align: center; margin-bottom: 32px; }
.acc-eval-form-header h1 {
font-size: clamp(28px, 4vw, 42px);
font-weight: 900;
color: #0f172a;
margin: 8px 0 4px;
letter-spacing: -0.02em;
}
.acc-eval-place {
font-size: 18px;
color: #475569;
font-weight: 600;
}
.acc-eval-place .acc-eval-address {
color: #64748b;
font-weight: 400;
font-size: 16px;
}
.acc-eval-no-place {
background: #fef3c7;
border-left: 4px solid #f59e0b;
padding: 16px 20px;
border-radius: 8px;
color: #78350f;
margin-top: 16px;
}
/* Score summary widget (sticky en haut) */
.acc-eval-summary {
position: sticky;
top: 80px;
z-index: 20;
background: #fff;
border: 2px solid #e2e8f0;
border-radius: 14px;
padding: 20px 24px;
margin-bottom: 24px;
box-shadow: 0 4px 12px rgba(15,23,42,0.06);
}
.acc-eval-summary-grid {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
gap: 24px;
align-items: center;
}
.acc-eval-summary-stat { display: flex; flex-direction: column; }
.acc-eval-summary-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #64748b;
font-weight: 700;
margin-bottom: 4px;
}
.acc-eval-summary-num {
font-size: 38px;
font-weight: 900;
color: #6366f1;
line-height: 1;
letter-spacing: -0.02em;
}
.acc-eval-summary-num small {
font-size: 18px;
color: #94a3b8;
font-weight: 600;
}
.acc-eval-summary-tier {
font-size: 18px;
font-weight: 800;
color: #0f172a;
}
.acc-eval-summary-bar {
height: 32px;
background: #f1f5f9;
border-radius: 100px;
position: relative;
overflow: hidden;
}
.acc-eval-summary-bar-fill {
height: 100%;
background: linear-gradient(90deg, #6366f1, #8b5cf6);
color: #fff;
font-weight: 700;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
transition: width 0.4s ease;
min-width: 60px;
}
@media (max-width: 720px) {
.acc-eval-summary { position: static; }
.acc-eval-summary-grid { grid-template-columns: 1fr; gap: 12px; }
}
/* Eval groups */
.acc-eval-form { display: flex; flex-direction: column; gap: 20px; }
.acc-eval-group {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 24px 28px;
margin: 0;
}
.acc-eval-group legend {
font-size: 18px;
font-weight: 800;
color: #0f172a;
padding: 0 12px;
background: #fff;
border-radius: 8px;
}
.acc-eval-row {
display: grid;
grid-template-columns: 2fr 3fr 2fr;
gap: 16px;
align-items: start;
padding: 14px 0;
border-bottom: 1px solid #f1f5f9;
}
.acc-eval-row:last-child { border-bottom: 0; }
.acc-eval-row-label strong {
display: block;
font-size: 15px;
color: #0f172a;
line-height: 1.4;
}
.acc-eval-row-label small {
color: #94a3b8;
font-size: 12px;
font-weight: 600;
}
.acc-eval-row-input {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.acc-eval-row-input label {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
cursor: pointer;
font-size: 13px;
transition: all 0.15s;
}
.acc-eval-row-input label:has(input:checked) {
background: #eef2ff;
border-color: #6366f1;
color: #4338ca;
font-weight: 700;
}
.acc-eval-row-input input[type=radio] { margin: 0; cursor: pointer; }
.acc-eval-measure-input {
width: 100px;
padding: 8px 10px;
border: 1px solid #cbd5e1;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
}
.acc-eval-target {
color: #64748b;
font-size: 12px;
margin-left: 8px;
}
.acc-eval-row-note input {
width: 100%;
padding: 8px 12px;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 13px;
background: #f8fafc;
}
.acc-eval-notes {
width: 100%;
padding: 12px;
border: 1px solid #cbd5e1;
border-radius: 8px;
font-size: 14px;
font-family: inherit;
resize: vertical;
}
.acc-eval-form-actions {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
margin-top: 24px;
padding: 24px;
background: #fff;
border-radius: 14px;
border: 2px solid #6366f1;
}
.acc-eval-form-actions .button-hero {
background: #6366f1 !important;
color: #fff !important;
border: none;
padding: 14px 32px !important;
font-size: 16px;
font-weight: 800;
border-radius: 10px;
cursor: pointer;
}
.acc-eval-form-actions .button-hero:hover { background: #4f46e5 !important; }
@media (max-width: 720px) {
.acc-eval-row { grid-template-columns: 1fr; gap: 8px; }
.acc-eval-form-actions { flex-direction: column; align-items: stretch; }
}
/* === SIGNUP FORM === */
.acc-signup-section {
padding: 48px 16px;
background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
min-height: 80vh;
}
.acc-signup-container { max-width: 1100px; margin: 0 auto; }
.acc-signup-header { text-align: center; margin-bottom: 36px; }
.acc-signup-header h1 {
font-size: clamp(28px, 4vw, 42px);
font-weight: 900;
color: #0f172a;
letter-spacing: -0.02em;
margin: 8px 0 12px;
}
.acc-signup-header p { font-size: 17px; color: #475569; max-width: 700px; margin: 0 auto; }
.acc-signup-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 32px;
align-items: start;
}
.acc-signup-form {
background: #fff;
border-radius: 14px;
padding: 32px;
box-shadow: 0 4px 16px rgba(15,23,42,0.08);
}
.acc-signup-field { margin-bottom: 20px; }
.acc-signup-field label {
display: block;
font-weight: 700;
color: #0f172a;
margin-bottom: 6px;
font-size: 14px;
}
.acc-signup-field input {
width: 100%;
padding: 12px 14px;
border: 1.5px solid #cbd5e1;
border-radius: 10px;
font-size: 16px;
transition: border-color 0.15s;
}
.acc-signup-field input:focus {
outline: none;
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
.acc-signup-field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.acc-signup-consent {
margin: 24px 0;
font-size: 14px;
color: #64748b;
line-height: 1.6;
}
.acc-signup-consent label {
display: flex;
gap: 10px;
align-items: flex-start;
cursor: pointer;
}
.acc-signup-consent a { color: #6366f1; }
.acc-signup-submit {
width: 100%;
padding: 16px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: #fff;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 800;
cursor: pointer;
transition: transform 0.1s;
}
.acc-signup-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(99,102,241,0.3); }
.acc-signup-submit:disabled { cursor: wait; }
.acc-signup-loading {
text-align: center;
color: #6366f1;
font-weight: 600;
margin-top: 12px;
}
.acc-signup-error {
background: #fee2e2;
border-left: 4px solid #ef4444;
color: #7f1d1d;
padding: 12px 16px;
border-radius: 8px;
margin-top: 12px;
font-size: 14px;
}
.acc-signup-summary {
background: #fff;
border-radius: 14px;
padding: 28px 24px;
box-shadow: 0 4px 16px rgba(15,23,42,0.08);
position: sticky;
top: 100px;
}
.acc-signup-summary h3 {
margin: 0 0 16px;
font-size: 18px;
color: #0f172a;
font-weight: 800;
}
.acc-signup-summary-plan {
display: flex;
justify-content: space-between;
padding: 16px;
background: #f8fafc;
border-radius: 10px;
margin-bottom: 16px;
}
.acc-signup-summary-plan strong { color: #0f172a; font-size: 16px; }
.acc-signup-summary-plan span { font-weight: 700; color: #6366f1; }
.acc-signup-summary-features {
list-style: none;
padding: 0;
margin: 0 0 20px;
}
.acc-signup-summary-features li {
padding: 6px 0;
color: #475569;
font-size: 14px;
line-height: 1.5;
}
.acc-signup-summary-total {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 0;
border-top: 2px solid #e2e8f0;
font-size: 18px;
}
.acc-signup-summary-total strong { font-size: 24px; color: #0f172a; font-weight: 900; }
.acc-signup-summary-note {
font-size: 12px;
color: #94a3b8;
margin: 8px 0 0;
}
.acc-signup-summary-secure {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #e2e8f0;
font-size: 13px;
color: #475569;
line-height: 1.5;
}
@media (max-width: 880px) {
.acc-signup-grid { grid-template-columns: 1fr; }
.acc-signup-summary { position: static; }
.acc-signup-field-row { grid-template-columns: 1fr; }
}
/* === THANK YOU === */
.acc-thankyou-section {
padding: 80px 16px;
background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
min-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
}
.acc-thankyou-container {
max-width: 700px;
text-align: center;
background: #fff;
border-radius: 20px;
padding: 56px 40px;
box-shadow: 0 8px 32px rgba(15,23,42,0.12);
}
.acc-thankyou-icon { font-size: 80px; line-height: 1; margin-bottom: 16px; }
.acc-thankyou-container h1 {
font-size: clamp(28px, 4vw, 42px);
font-weight: 900;
color: #0f172a;
letter-spacing: -0.02em;
margin: 0 0 16px;
}
.acc-thankyou-lead { font-size: 17px; color: #475569; margin: 0 0 32px; line-height: 1.6; }
.acc-thankyou-steps {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
margin: 32px 0;
text-align: left;
}
.acc-thankyou-step {
background: #f8fafc;
border-radius: 12px;
padding: 20px 16px;
}
.acc-thankyou-step-num {
display: inline-flex;
width: 28px;
height: 28px;
background: #6366f1;
color: #fff;
border-radius: 50%;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 13px;
margin-bottom: 8px;
}
.acc-thankyou-step strong { display: block; color: #0f172a; font-size: 15px; margin-bottom: 4px; }
.acc-thankyou-step p { font-size: 13px; color: #64748b; margin: 0; line-height: 1.5; }
.acc-thankyou-cta {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin: 24px 0;
}
.acc-thankyou-help { color: #94a3b8; font-size: 14px; margin: 16px 0 0; }
.acc-thankyou-help a { color: #6366f1; }
@media (max-width: 700px) {
.acc-thankyou-steps { grid-template-columns: 1fr; }
.acc-thankyou-container { padding: 40px 20px; }
}
/* ============================================================
v1.2.2 — Reviews & Photos UX
============================================================ */
.acc-reviews-ui, .acc-photos-ui {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 28px 32px;
margin: 24px 0;
}
.acc-reviews-title, .acc-photos-title {
font-size: 22px;
font-weight: 800;
color: #0f172a;
margin: 0 0 20px;
}
.acc-reviews-empty, .acc-photos-empty {
text-align: center;
color: #64748b;
padding: 24px;
font-style: italic;
}
.acc-reviews-summary {
background: #f8fafc;
border-radius: 10px;
padding: 16px 20px;
margin-bottom: 20px;
}
.acc-reviews-avg {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.acc-reviews-avg-num { font-size: 28px; font-weight: 900; color: #f59e0b; }
.acc-reviews-avg-stars { font-size: 20px; }
.acc-reviews-avg-count { color: #64748b; font-size: 14px; }
.acc-stars { color: #f59e0b; letter-spacing: 2px; }
.acc-stars .acc-star { color: #e2e8f0; }
.acc-stars .acc-star.is-on { color: #f59e0b; }
.acc-stars .acc-star.is-half { background: linear-gradient(90deg, #f59e0b 50%, #e2e8f0 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.acc-reviews-list {
list-style: none;
padding: 0;
margin: 0 0 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.acc-review-item {
background: #f8fafc;
border-radius: 10px;
padding: 16px 20px;
}
.acc-review-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
flex-wrap: wrap;
font-size: 14px;
}
.acc-review-stars { font-size: 16px; }
.acc-review-author { font-weight: 700; color: #0f172a; }
.acc-review-date { color: #64748b; font-size: 13px; margin-left: auto; }
.acc-review-text { color: #334155; line-height: 1.6; margin: 0; font-size: 15px; }
.acc-review-form {
background: #f8fafc;
border: 2px dashed #cbd5e1;
border-radius: 12px;
padding: 20px 24px;
margin-top: 16px;
}
.acc-review-form h3 { margin: 0 0 16px; font-size: 17px; color: #0f172a; }
.acc-review-form-rating { margin-bottom: 16px; }
.acc-review-form-rating label { display: block; font-weight: 700; margin-bottom: 6px; color: #475569; font-size: 14px; }
.acc-review-stars-input { display: flex; gap: 4px; }
.acc-review-star-label {
cursor: pointer;
font-size: 32px;
color: #e2e8f0;
transition: color 0.15s;
}
.acc-review-star-label input { display: none; }
.acc-review-star-label .acc-review-star-icon { color: inherit; }
.acc-review-star-label:hover,
.acc-review-star-label:hover ~ .acc-review-star-label,
.acc-review-stars-input:has(input:checked) .acc-review-star-label { color: #f59e0b; }
/* Trick : étoiles à droite de l'étoile cochée gardent gris (RTL trick) */
.acc-review-stars-input { direction: rtl; justify-content: flex-end; }
.acc-review-star-label input:checked ~ .acc-review-star-icon,
.acc-review-star-label input:checked + .acc-review-star-icon { color: #f59e0b; }
.acc-review-stars-input .acc-review-star-label:hover ~ .acc-review-star-label .acc-review-star-icon { color: #e2e8f0; }
.acc-review-form-text textarea {
width: 100%;
padding: 12px;
border: 1px solid #cbd5e1;
border-radius: 8px;
font-family: inherit;
font-size: 14px;
resize: vertical;
}
.acc-review-form-text label { display: block; font-weight: 700; color: #475569; margin-bottom: 6px; font-size: 14px; }
.acc-review-submit-btn {
margin-top: 12px;
background: #6366f1;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 8px;
font-weight: 700;
cursor: pointer;
font-size: 14px;
}
.acc-review-submit-btn:hover { background: #4f46e5; }
.acc-review-submit-btn:disabled { opacity: 0.6; cursor: wait; }
.acc-review-form-feedback {
margin: 12px 0 0;
padding: 10px 14px;
background: #f0f9ff;
border-radius: 8px;
font-size: 14px;
}
.acc-review-form-note { font-size: 12px; color: #94a3b8; margin: 8px 0 0; }
.acc-reviews-login {
background: #eef2ff;
border-left: 4px solid #6366f1;
padding: 14px 18px;
border-radius: 8px;
color: #3730a3;
font-size: 14px;
}
.acc-reviews-login a { color: #6366f1; font-weight: 700; }
/* Photos */
.acc-photos-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.acc-photo-thumb {
display: block;
aspect-ratio: 1;
overflow: hidden;
border-radius: 10px;
background: #f1f5f9;
}
.acc-photo-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.2s;
}
.acc-photo-thumb:hover img { transform: scale(1.05); }
.acc-photo-upload-form {
background: #f8fafc;
border: 2px dashed #cbd5e1;
border-radius: 12px;
padding: 24px;
text-align: center;
}
.acc-photo-upload-label {
display: inline-block;
background: #6366f1;
color: #fff;
padding: 12px 24px;
border-radius: 10px;
cursor: pointer;
font-weight: 700;
transition: background 0.15s;
}
.acc-photo-upload-label:hover { background: #4f46e5; }
.acc-photo-upload-label input { display: none; }
.acc-photo-form-feedback {
margin: 12px 0 0;
padding: 10px 14px;
border-radius: 8px;
font-size: 14px;
}
.acc-photo-form-note { font-size: 12px; color: #94a3b8; margin: 8px 0 0; }