/* LEGAL.CSS - DESIGN COMPLET OTAKU V6.0 ULTRA SAFE */

/* ========================================
   VARIABLES CSS POUR COHÉRENCE (Préfixées)
   ======================================== */
:root {
    --otaku-legal-primary-blue: #1e40af;
    --otaku-legal-primary-blue-light: #3b82f6;
    --otaku-legal-secondary-orange: #f59e0b;
    --otaku-legal-secondary-orange-light: #fbbf24;
    --otaku-legal-success-green: #10b981;
    --otaku-legal-warning-red: #ef4444;
    --otaku-legal-neutral-100: #f8fafc;
    --otaku-legal-neutral-200: #e2e8f0;
    --otaku-legal-neutral-300: #cbd5e1;
    --otaku-legal-neutral-400: #94a3b8;
    --otaku-legal-neutral-500: #64748b;
    --otaku-legal-neutral-600: #475569;
    --otaku-legal-neutral-700: #334155;
    --otaku-legal-neutral-800: #1e293b;
    --otaku-legal-neutral-900: #0f172a;
    --otaku-legal-white: #ffffff;
    --otaku-legal-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --otaku-legal-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --otaku-legal-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --otaku-legal-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --otaku-legal-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --otaku-legal-border-radius-sm: 0.375rem;
    --otaku-legal-border-radius-md: 0.5rem;
    --otaku-legal-border-radius-lg: 0.75rem;
    --otaku-legal-border-radius-xl: 1rem;
    --otaku-legal-border-radius-2xl: 1.5rem;
    --otaku-legal-transition-fast: 0.15s ease;
    --otaku-legal-transition-normal: 0.3s ease;
    --otaku-legal-transition-slow: 0.5s ease;
}
p{color: black;}
/* ========================================
   LAYOUT CONTAINERS SPÉCIFIQUES LÉGAUX
   ======================================== */
.otaku-legal-main,
.otaku-legal-container,
.otaku-legal-wrapper,
.otaku-contact-main,
.otaku-faq-container {
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}

.otaku-legal-container,
.otaku-legal-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.otaku-contact-main {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--otaku-legal-neutral-100) 0%, var(--otaku-legal-neutral-200) 100%);
}

.otaku-faq-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, var(--otaku-legal-neutral-100) 0%, var(--otaku-legal-neutral-200) 100%);
    min-height: 100vh;
}

/* Classes existantes dans les pages */
.legal-main {
    padding-top: 40px;
    color:black;
}

.legal-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
    margin-top:50px;
    color:black;
}

.legal-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.contact-main {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--otaku-legal-neutral-100) 0%, var(--otaku-legal-neutral-200) 100%);
}

.faq-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, var(--otaku-legal-neutral-100) 0%, var(--otaku-legal-neutral-200) 100%);
    min-height: 100vh;
}

.content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ========================================
   HEADERS ET TITRES LÉGAUX
   ======================================== */
.otaku-legal-hero,
.legal-hero,
.legal-header,
.legal-header-section,
.hero-legal,
.contact-hero,
.faq-hero {
    text-align: center;
    margin-bottom: 3rem;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, var(--otaku-legal-primary-blue) 0%, var(--otaku-legal-primary-blue-light) 100%);
    border-radius: var(--otaku-legal-border-radius-2xl);
    color: var(--otaku-legal-white);
    box-shadow: var(--otaku-legal-shadow-2xl);
    position: relative;
    overflow: hidden;
}

.legal-hero::before,
.contact-hero::before,
.faq-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
    animation: otaku-legal-float 6s ease-in-out infinite;
}

.legal-title,
.hero-title,
.faq-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    position: relative;
}

.title-icon,
.otaku-accent {
    display: inline-block;
    font-size: 1.2em;
    margin-right: 0.5rem;
    animation: otaku-legal-bounce 2s infinite;
}

.legal-subtitle,
.hero-description {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.legal-meta,
.update-badge,
.update-info,
.last-update {
    margin-top: 1rem;
}

.update-badge,
.legal-status,
.hero-badge {
    background: rgba(245, 158, 11, 0.2);
    color: var(--otaku-legal-secondary-orange);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 2px solid rgba(245, 158, 11, 0.3);
    backdrop-filter: blur(10px);
    display: inline-block;
}

.badge-text {
    font-weight: 600;
}

.update-label {
    font-weight: 500;
    opacity: 0.9;
}

.update-date {
    font-weight: 600;
    color: var(--otaku-legal-secondary-orange);
}

.legal-date {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.update-icon {
    margin-right: 0.5rem;
}

/* ========================================
   NAVIGATION LÉGALE SPÉCIFIQUE
   ======================================== */
.otaku-legal-nav,
.legal-nav,
.legal-navigation,
.faq-navigation {
    background: var(--otaku-legal-white);
    padding: 2rem;
    border-radius: var(--otaku-legal-border-radius-xl);
    margin-bottom: 2rem;
    box-shadow: var(--otaku-legal-shadow-lg);
    border-left: 4px solid var(--otaku-legal-primary-blue);
    transition: all var(--otaku-legal-transition-normal);
    position: relative;
}

.legal-nav.sticky-nav {
    position: fixed;
    top: 100px;
    right: 2rem;
    width: 320px;
    z-index: 100;
    transform: scale(0.95);
}

.legal-nav h2,
.legal-nav h3,
.nav-title,
.legal-nav-title {
    color: var(--otaku-legal-primary-blue);
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
    font-weight: 700;
    display: flex;
    align-items: center;
}

.legal-nav h3:before {
    content: '🎯';
    margin-right: 0.5rem;
    font-size: 1.1rem;
}

.legal-nav ul,
.legal-nav-list,
.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.legal-nav li {
    margin-bottom: 0.5rem;
}

.legal-nav a,
.nav-link {
    color: var(--otaku-legal-neutral-500);
    text-decoration: none;
    padding: 0.75rem 1rem;
    border-radius: var(--otaku-legal-border-radius-md);
    display: block;
    transition: all var(--otaku-legal-transition-normal);
    font-weight: 500;
    position: relative;
    border-left: 3px solid transparent;
}

.legal-nav a:hover,
.nav-link:hover,
.legal-nav a.active,
.nav-link.active {
    background: linear-gradient(135deg, var(--otaku-legal-primary-blue) 0%, var(--otaku-legal-primary-blue-light) 100%);
    color: var(--otaku-legal-white);
    transform: translateX(5px);
    border-left-color: var(--otaku-legal-secondary-orange);
}

.legal-nav a:before,
.nav-link:before {
    content: '▶';
    opacity: 0;
    margin-right: 0.5rem;
    transition: all var(--otaku-legal-transition-normal);
    color: var(--otaku-legal-secondary-orange);
}

.legal-nav a:hover:before,
.nav-link:hover:before,
.legal-nav a.active:before,
.nav-link.active:before {
    opacity: 1;
}

/* Navigation en grille pour FAQ et autres */
.nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.nav-item {
    background: var(--otaku-legal-white);
    padding: 1rem;
    border-radius: var(--otaku-legal-border-radius-lg);
    text-decoration: none;
    color: var(--otaku-legal-neutral-600);
    display: flex;
    align-items: center;
    transition: all var(--otaku-legal-transition-normal);
    box-shadow: var(--otaku-legal-shadow-md);
    border: 2px solid transparent;
}

.nav-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--otaku-legal-shadow-xl);
    border-color: var(--otaku-legal-primary-blue);
    background: linear-gradient(135deg, var(--otaku-legal-neutral-100) 0%, var(--otaku-legal-white) 100%);
}

.nav-icon {
    font-size: 1.5rem;
    margin-right: 0.75rem;
}

.nav-text {
    font-weight: 600;
}

.nav-summary {
    background: var(--otaku-legal-white);
    border-radius: var(--otaku-legal-border-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--otaku-legal-shadow-md);
    margin-bottom: 2rem;
}

.nav-summary h3 {
    color: var(--otaku-legal-primary-blue);
    margin-bottom: 1rem;
    font-weight: 700;
    text-align: center;
}

/* ========================================
   SECTIONS LÉGALES SPÉCIFIQUES
   ======================================== */
.otaku-legal-sections,
.legal-sections {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.otaku-legal-section,
.legal-section {
    background: var(--otaku-legal-white);
    border-radius: var(--otaku-legal-border-radius-xl);
    overflow: hidden;
    box-shadow: var(--otaku-legal-shadow-lg);
    transition: all var(--otaku-legal-transition-normal);
    border: 1px solid var(--otaku-legal-neutral-200);
    position: relative;
}

.legal-section:hover {
    transform: translateY(-5px);
    box-shadow: var(--otaku-legal-shadow-2xl);
}

.legal-section.section-highlight {
    animation: otaku-legal-highlightPulse 2s ease;
}

.legal-section.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.legal-section.visible {
    opacity: 1;
    transform: translateY(0);
}

.legal-section.final-section {
    margin-top: 3rem;
}

.section-header {
    background: linear-gradient(135deg, var(--otaku-legal-neutral-100) 0%, var(--otaku-legal-neutral-200) 100%);
    padding: 2rem;
    border-bottom: 3px solid var(--otaku-legal-primary-blue);
    position: relative;
}

.section-header::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 2rem;
    width: 60px;
    height: 3px;
    background: var(--otaku-legal-secondary-orange);
}

.section-title,
.section-header h2 {
    color: var(--otaku-legal-primary-blue);
    margin: 0;
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 800;
    display: flex;
    align-items: center;
}

.section-icon {
    margin-right: 1rem;
    font-size: 1.3em;
    background: linear-gradient(135deg, var(--otaku-legal-primary-blue) 0%, var(--otaku-legal-primary-blue-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.section-number {
    position: absolute;
    top: -10px;
    right: 20px;
    background: var(--otaku-legal-secondary-orange);
    color: var(--otaku-legal-white);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
}

.section-content {
    padding: 2rem;
}

.content-block {
    background: var(--otaku-legal-white);
    border-radius: var(--otaku-legal-border-radius-lg);
    padding: 2rem;
    margin: 1rem 0;
    box-shadow: var(--otaku-legal-shadow-md);
    border-left: 4px solid var(--otaku-legal-primary-blue-light);
}

.section-content p {
    color: var(--otaku-legal-neutral-600);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.section-content h3,
.subsection-title {
    color: var(--otaku-legal-primary-blue);
    font-weight: 700;
    margin: 2rem 0 1rem 0;
    font-size: 1.2rem;
}

.section-content h4 {
    color: var(--otaku-legal-neutral-700);
    font-weight: 600;
    margin: 1.5rem 0 0.75rem 0;
}

.section-content ul,
.section-content ol {
    margin: 1rem 0;
    padding-left: 2rem;
}

.section-content li {
    color: var(--otaku-legal-neutral-600);
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.intro-text {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--otaku-legal-neutral-700);
    line-height: 1.7;
    margin-bottom: 2rem;
}

/* ========================================
   GRILLES D'INFORMATIONS LÉGALES
   ======================================== */
.info-grid,
.data-protection-grid,
.responsibility-grid,
.jurisdiction-info,
.data-grid,
.purpose-grid,
.rights-grid,
.security-grid,
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.info-card,
.protection-card,
.resp-item,
.jurisdiction-card,
.data-card,
.purpose-card,
.right-card,
.security-card,
.contact-card {
    background: linear-gradient(135deg, var(--otaku-legal-neutral-100) 0%, var(--otaku-legal-white) 100%);
    padding: 1.5rem;
    border-radius: var(--otaku-legal-border-radius-lg);
    border-left: 4px solid var(--otaku-legal-primary-blue-light);
    transition: all var(--otaku-legal-transition-normal);
    position: relative;
    overflow: hidden;
    box-shadow: var(--otaku-legal-shadow-md);
}

.info-card::before,
.protection-card::before,
.data-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent 49%, rgba(245, 158, 11, 0.05) 50%, transparent 51%);
    transition: all var(--otaku-legal-transition-normal);
}

.info-card:hover,
.protection-card:hover,
.resp-item:hover,
.jurisdiction-card:hover,
.data-card:hover,
.purpose-card:hover,
.right-card:hover,
.security-card:hover,
.contact-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--otaku-legal-shadow-xl);
    border-left-color: var(--otaku-legal-secondary-orange);
}

.info-card h4,
.protection-card h4,
.resp-item h4,
.jurisdiction-card h4,
.data-card h4,
.purpose-card h4,
.right-card h4,
.security-card h4,
.contact-card h4 {
    color: var(--otaku-legal-primary-blue);
    font-weight: 700;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
}

.info-card h4:before,
.protection-card h4:before,
.resp-item h4:before {
    content: '🛡️';
    margin-right: 0.5rem;
}

.info-card p,
.protection-card p,
.resp-item p,
.jurisdiction-card p {
    margin: 0;
    color: var(--otaku-legal-neutral-600);
    font-weight: 500;
    line-height: 1.6;
}

.info-card a,
.protection-card a {
    color: var(--otaku-legal-primary-blue-light);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--otaku-legal-transition-normal);
}

.info-card a:hover,
.protection-card a:hover {
    color: var(--otaku-legal-primary-blue);
}

/* Variantes de couleurs pour différents types de cartes */
.purpose-card.primary {
    border-left-color: var(--otaku-legal-primary-blue);
}

.purpose-card.secondary {
    border-left-color: var(--otaku-legal-success-green);
}

.purpose-card.tertiary {
    border-left-color: var(--otaku-legal-secondary-orange);
}

.purpose-card.quaternary {
    border-left-color: var(--otaku-legal-warning-red);
}

.right-card.access {
    border-left-color: var(--otaku-legal-primary-blue);
}

.right-card.rectification {
    border-left-color: var(--otaku-legal-success-green);
}

.right-card.deletion {
    border-left-color: var(--otaku-legal-warning-red);
}

.right-card.portability {
    border-left-color: var(--otaku-legal-secondary-orange);
}

.right-card.limitation {
    border-left-color: var(--otaku-legal-neutral-400);
}

.right-card.opposition {
    border-left-color: var(--otaku-legal-warning-red);
}

.contact-card.primary {
    border-left-color: var(--otaku-legal-primary-blue);
}

.contact-card.secondary {
    border-left-color: var(--otaku-legal-success-green);
}

.contact-card.tertiary {
    border-left-color: var(--otaku-legal-secondary-orange);
}

/* ========================================
   BOÎTES DE MISE EN ÉVIDENCE LÉGALES
   ======================================== */
.highlight-box,
.warning-box,
.legal-highlight,
.legal-warning,
.legal-note {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid var(--otaku-legal-secondary-orange);
    border-radius: var(--otaku-legal-border-radius-lg);
    padding: 1.5rem;
    margin: 2rem 0;
    position: relative;
}

.highlight-box.manga-style {
    border-style: dashed;
    border-width: 3px;
}

.highlight-box::before,
.legal-highlight::before {
    content: '⭐';
    position: absolute;
    top: -12px;
    left: 20px;
    background: var(--otaku-legal-secondary-orange);
    color: var(--otaku-legal-white);
    padding: 5px 10px;
    border-radius: 50px;
    font-size: 1rem;
}

.warning-box,
.legal-warning {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: var(--otaku-legal-warning-red);
}

.warning-box::before,
.legal-warning::before {
    content: '⚠️';
    background: var(--otaku-legal-warning-red);
}

.highlight-box h4,
.warning-box h4,
.legal-highlight h4,
.legal-warning h4 {
    color: #92400e;
    margin-bottom: 1rem;
    font-weight: 700;
}

.warning-box h4,
.legal-warning h4 {
    color: #dc2626;
}

.highlight-box p,
.warning-box p,
.legal-highlight p,
.legal-warning p,
.legal-note p {
    color: #92400e;
    margin: 0;
    font-weight: 500;
    line-height: 1.6;
}

.warning-box p,
.legal-warning p {
    color: #dc2626;
}

.highlight-box.commitment {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: var(--otaku-legal-primary-blue);
}

.highlight-box.commitment h3,
.highlight-box.commitment p {
    color: var(--otaku-legal-primary-blue);
}

.highlight-box.success {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: var(--otaku-legal-success-green);
}

.highlight-box.success strong,
.highlight-box.success p {
    color: #065f46;
}

.security-notice {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 2px solid var(--otaku-legal-primary-blue);
    border-radius: var(--otaku-legal-border-radius-lg);
    padding: 1.5rem;
    margin: 2rem 0;
}

.security-notice h4 {
    color: var(--otaku-legal-primary-blue);
    margin-bottom: 1rem;
    font-weight: 700;
}

.security-notice p {
    color: var(--otaku-legal-primary-blue);
    margin: 0;
    font-weight: 500;
    line-height: 1.6;
}

/* ========================================
   COOKIES ET TYPES SPÉCIAUX
   ======================================== */
.cookie-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.cookie-type {
    background: var(--otaku-legal-white);
    border: 2px solid var(--otaku-legal-primary-blue-light);
    border-radius: var(--otaku-legal-border-radius-lg);
    padding: 1.5rem;
    transition: all var(--otaku-legal-transition-normal);
    position: relative;
    overflow: hidden;
}

.cookie-type::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--otaku-legal-primary-blue) 0%, var(--otaku-legal-primary-blue-light) 50%, var(--otaku-legal-secondary-orange) 100%);
}

.cookie-type:hover {
    transform: translateY(-5px);
    border-color: var(--otaku-legal-primary-blue);
    box-shadow: var(--otaku-legal-shadow-xl);
}

.cookie-type h4 {
    color: var(--otaku-legal-primary-blue);
    margin-bottom: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cookie-type.essential {
    border-color: var(--otaku-legal-success-green);
}

.cookie-type.analytics {
    border-color: var(--otaku-legal-primary-blue-light);
}

.cookie-type.marketing {
    border-color: var(--otaku-legal-secondary-orange);
}

.cookie-type.preferences {
    border-color: var(--otaku-legal-neutral-400);
}

.type-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.type-icon {
    font-size: 1.2rem;
    margin-right: 0.5rem;
}

.type-title {
    color: var(--otaku-legal-primary-blue);
    font-weight: 700;
    margin: 0;
}

.type-description {
    color: var(--otaku-legal-neutral-600);
    line-height: 1.6;
    margin: 0;
}

.type-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.type-badge.required {
    background: var(--otaku-legal-warning-red);
    color: var(--otaku-legal-white);
}

.type-badge.optional {
    background: var(--otaku-legal-neutral-300);
    color: var(--otaku-legal-neutral-600);
}

.cookie-control {
    background: var(--otaku-legal-neutral-100);
    border-left: 4px solid var(--otaku-legal-secondary-orange);
    padding: 1rem 1.5rem;
    border-radius: var(--otaku-legal-border-radius-md);
    margin-top: 2rem;
    font-style: italic;
    color: var(--otaku-legal-neutral-600);
}

.cookie-intro {
    margin-bottom: 2rem;
}

.cookie-intro p {
    font-size: 1.1rem;
    color: var(--otaku-legal-neutral-600);
    line-height: 1.7;
}

.cookie-management {
    background: var(--otaku-legal-neutral-100);
    border-radius: var(--otaku-legal-border-radius-lg);
    padding: 2rem;
    margin: 2rem 0;
}
.management-options {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   margin-top: 1rem;
}

.option-item {
   background: var(--otaku-legal-white);
   padding: 1rem;
   border-radius: var(--otaku-legal-border-radius-md);
   border-left: 3px solid var(--otaku-legal-primary-blue);
}

.option-item strong {
   color: var(--otaku-legal-primary-blue);
   font-weight: 700;
}

/* ========================================
  TABLEAUX ET LISTES LÉGAUX
  ======================================== */
.delivery-table,
.retention-table {
   margin: 2rem 0;
   overflow-x: auto;
}

.delivery-grid,
.table-responsive table {
   width: 100%;
   border-collapse: collapse;
   background: var(--otaku-legal-white);
   border-radius: var(--otaku-legal-border-radius-lg);
   overflow: hidden;
   box-shadow: var(--otaku-legal-shadow-lg);
}

.delivery-grid th,
.delivery-grid td,
.table-responsive th,
.table-responsive td {
   padding: 1rem;
   text-align: left;
   border-bottom: 1px solid var(--otaku-legal-neutral-200);
}

.delivery-grid th,
.table-responsive th {
   background: var(--otaku-legal-primary-blue);
   color: var(--otaku-legal-white);
   font-weight: 600;
}

.delivery-grid tr:hover,
.table-responsive tr:hover {
   background: var(--otaku-legal-neutral-100);
}

.table-row {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 1rem;
   padding: 1rem;
   border-bottom: 1px solid var(--otaku-legal-neutral-200);
}

.table-row.header {
   background: var(--otaku-legal-primary-blue);
   color: var(--otaku-legal-white);
   font-weight: 600;
}

.table-cell {
   padding: 0.5rem;
}

.legal-list,
.data-list {
   list-style: none;
   padding: 0;
   margin: 1rem 0;
}

.legal-list li,
.data-list li {
   position: relative;
   padding-left: 2rem;
   margin-bottom: 0.75rem;
   color: var(--otaku-legal-neutral-600);
   line-height: 1.6;
}

.legal-list li:before,
.data-list li:before {
   content: '✅';
   position: absolute;
   left: 0;
   top: 0;
   color: var(--otaku-legal-success-green);
}

/* ========================================
  PROCESSUS ET TIMELINES LÉGAUX
  ======================================== */
.process-steps,
.timeline-container,
.steps-container {
   margin: 2rem 0;
}

.process-timeline {
   margin: 2rem 0;
}

.step,
.step-item,
.timeline-item,
.proc-step {
   display: flex;
   align-items: flex-start;
   margin-bottom: 2rem;
   position: relative;
}

.step-number,
.step-num,
.timeline-marker {
   width: 3rem;
   height: 3rem;
   background: var(--otaku-legal-primary-blue);
   color: var(--otaku-legal-white);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   margin-right: 1.5rem;
   flex-shrink: 0;
   position: relative;
   z-index: 2;
}

.step-content,
.step-desc,
.timeline-content {
   flex: 1;
   background: var(--otaku-legal-white);
   padding: 1.5rem;
   border-radius: var(--otaku-legal-border-radius-lg);
   box-shadow: var(--otaku-legal-shadow-md);
   border-left: 4px solid var(--otaku-legal-primary-blue-light);
   transition: all var(--otaku-legal-transition-normal);
}

.step-content:hover,
.step-desc:hover,
.timeline-content:hover {
   transform: translateX(5px);
   box-shadow: var(--otaku-legal-shadow-lg);
}

.step-content h4,
.step-desc strong,
.timeline-content h4 {
   color: var(--otaku-legal-primary-blue);
   margin-bottom: 0.5rem;
   font-weight: 700;
}

.step-content p,
.step-desc p,
.timeline-content p {
   margin: 0;
   color: var(--otaku-legal-neutral-600);
   line-height: 1.6;
}

/* Ligne de connexion pour timeline */
.timeline-item:not(:last-child)::after {
   content: '';
   position: absolute;
   left: 1.4rem;
   top: 3rem;
   width: 2px;
   height: calc(100% + 1rem);
   background: var(--otaku-legal-neutral-300);
   z-index: 1;
}

.timeline-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 1rem;
   margin: 1rem 0;
}

.timeline-item {
   background: var(--otaku-legal-white);
   padding: 1rem;
   border-radius: var(--otaku-legal-border-radius-md);
   box-shadow: var(--otaku-legal-shadow-sm);
   border-left: 3px solid var(--otaku-legal-primary-blue);
}

/* ========================================
  FORMULAIRES DE CONTACT SPÉCIFIQUES
  ======================================== */
.contact-form-section {
   flex: 1;
}

.form-card {
   background: var(--otaku-legal-white);
   border-radius: var(--otaku-legal-border-radius-xl);
   padding: 2rem;
   box-shadow: var(--otaku-legal-shadow-xl);
   border: 1px solid var(--otaku-legal-neutral-200);
}

.form-header {
   text-align: center;
   margin-bottom: 2rem;
}

.form-header h2 {
   color: var(--otaku-legal-primary-blue);
   font-size: 1.8rem;
   font-weight: 700;
   margin-bottom: 0.5rem;
}

.form-header p {
   color: var(--otaku-legal-neutral-500);
   font-size: 1rem;
}

.contact-form {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
}

.form-row {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 1rem;
}

.form-group {
   position: relative;
}

.form-label {
   display: block;
   color: var(--otaku-legal-neutral-700);
   font-weight: 600;
   margin-bottom: 0.5rem;
   font-size: 0.9rem;
}

.form-input,
.form-select,
.form-textarea {
   width: 100%;
   padding: 0.75rem 1rem;
   border: 2px solid var(--otaku-legal-neutral-300);
   border-radius: var(--otaku-legal-border-radius-md);
   font-size: 1rem;
   transition: all var(--otaku-legal-transition-normal);
   background: var(--otaku-legal-white);
   color: var(--otaku-legal-neutral-700);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
   outline: none;
   border-color: var(--otaku-legal-primary-blue);
   box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.form-group.focused .form-input,
.form-group.focused .form-select,
.form-group.focused .form-textarea {
   border-color: var(--otaku-legal-primary-blue);
}

.form-group.error .form-input,
.form-group.error .form-select,
.form-group.error .form-textarea {
   border-color: var(--otaku-legal-warning-red);
}

.form-border {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 0;
   height: 2px;
   background: var(--otaku-legal-primary-blue);
   transition: width var(--otaku-legal-transition-normal);
}

.form-group.focused .form-border {
   width: 100%;
}

.char-counter {
   text-align: right;
   font-size: 0.8rem;
   color: var(--otaku-legal-neutral-400);
   margin-top: 0.25rem;
}

.submit-btn {
   background: linear-gradient(135deg, var(--otaku-legal-primary-blue) 0%, var(--otaku-legal-primary-blue-light) 100%);
   color: var(--otaku-legal-white);
   border: none;
   padding: 1rem 2rem;
   border-radius: var(--otaku-legal-border-radius-lg);
   font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
   transition: all var(--otaku-legal-transition-normal);
   position: relative;
   overflow: hidden;
   align-self: flex-start;
}

.submit-btn:hover {
   transform: translateY(-2px);
   box-shadow: var(--otaku-legal-shadow-xl);
}

.submit-btn:active {
   transform: translateY(0);
}

.btn-effect {
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
   transition: left var(--otaku-legal-transition-slow);
}

.submit-btn:hover .btn-effect {
   left: 100%;
}

.btn-text {
   position: relative;
   z-index: 2;
}

/* ========================================
  ALERTES ET NOTIFICATIONS
  ======================================== */
.alert {
   padding: 1rem 1.5rem;
   border-radius: var(--otaku-legal-border-radius-lg);
   margin-bottom: 1.5rem;
   display: flex;
   align-items: flex-start;
   gap: 1rem;
   border-left: 4px solid;
}

.alert-success {
   background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
   border-left-color: var(--otaku-legal-success-green);
   color: #065f46;
}

.alert-error {
   background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
   border-left-color: var(--otaku-legal-warning-red);
   color: #dc2626;
}

.alert-icon {
   width: 1.5rem;
   height: 1.5rem;
   flex-shrink: 0;
   margin-top: 0.125rem;
}

.success-icon::before {
   content: '✅';
   font-size: 1.5rem;
}

.error-icon::before {
   content: '❌';
   font-size: 1.5rem;
}

.alert-content h3 {
   margin: 0 0 0.5rem 0;
   font-weight: 700;
   font-size: 1rem;
}

.alert-content p {
   margin: 0;
   line-height: 1.5;
}

/* ========================================
  SECTIONS SPÉCIALISÉES
  ======================================== */

/* FAQ Spécifique */
.faq-content {
   max-width: 900px;
   margin: 0 auto;
}

.faq-section {
   margin-bottom: 3rem;
}

.faq-item {
   background: var(--otaku-legal-white);
   border-radius: var(--otaku-legal-border-radius-lg);
   margin-bottom: 1rem;
   box-shadow: var(--otaku-legal-shadow-md);
   border: 1px solid var(--otaku-legal-neutral-200);
   overflow: hidden;
   transition: all var(--otaku-legal-transition-normal);
}

.faq-item:hover {
   box-shadow: var(--otaku-legal-shadow-lg);
   transform: translateY(-2px);
}

.faq-question {
   padding: 1.5rem;
   margin: 0;
   color: var(--otaku-legal-primary-blue);
   font-weight: 600;
   font-size: 1.1rem;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: linear-gradient(135deg, var(--otaku-legal-neutral-100) 0%, var(--otaku-legal-white) 100%);
   border-bottom: 1px solid var(--otaku-legal-neutral-200);
}

.faq-question:hover {
   color: var(--otaku-legal-primary-blue-light);
}

.faq-answer {
   padding: 1.5rem;
   color: var(--otaku-legal-neutral-600);
   line-height: 1.7;
}

.faq-answer p {
   margin-bottom: 1rem;
}

.faq-answer ul {
   margin: 1rem 0;
   padding-left: 2rem;
}

.faq-answer li {
   margin-bottom: 0.5rem;
}

.faq-contact {
   background: var(--otaku-legal-white);
   border-radius: var(--otaku-legal-border-radius-xl);
   padding: 2rem;
   margin-top: 3rem;
   box-shadow: var(--otaku-legal-shadow-lg);
   text-align: center;
}

.contact-box h2 {
   color: var(--otaku-legal-primary-blue);
   margin-bottom: 1rem;
}

.contact-methods {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 1.5rem;
   margin-top: 2rem;
}

.contact-item {
   display: flex;
   align-items: center;
   gap: 1rem;
   text-align: left;
}

.contact-icon {
   font-size: 1.5rem;
}

.faq-updated {
   text-align: center;
   margin-top: 2rem;
   color: var(--otaku-legal-neutral-500);
   font-size: 0.9rem;
}

/* Contact Hero */
.hero-content {
   position: relative;
   z-index: 2;
}

.hero-decoration {
   position: absolute;
   top: 0;
   right: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
}

.floating-element {
   position: absolute;
   width: 20px;
   height: 20px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 50%;
   animation: otaku-legal-float 6s ease-in-out infinite;
}

.floating-element.element-1 {
   top: 20%;
   right: 10%;
   animation-delay: 0s;
}

.floating-element.element-2 {
   top: 60%;
   right: 20%;
   animation-delay: 2s;
}

.floating-element.element-3 {
   top: 40%;
   right: 5%;
   animation-delay: 4s;
}

.response-time {
   background: var(--otaku-legal-white);
   border-radius: var(--otaku-legal-border-radius-lg);
   padding: 1.5rem;
   margin-top: 2rem;
   box-shadow: var(--otaku-legal-shadow-md);
   border-left: 4px solid var(--otaku-legal-success-green);
}

.response-time h3 {
   color: var(--otaku-legal-success-green);
   margin-bottom: 1rem;
   font-weight: 700;
}

.time-indicator {
   width: 100%;
   height: 6px;
   background: var(--otaku-legal-neutral-200);
   border-radius: 3px;
   overflow: hidden;
   margin-top: 1rem;
}

.time-bar {
   width: 85%;
   height: 100%;
   background: linear-gradient(90deg, var(--otaku-legal-success-green) 0%, var(--otaku-legal-primary-blue) 100%);
   border-radius: 3px;
   animation: otaku-legal-loading 2s ease-in-out infinite;
}

/* Contact Info Cards */
.contact-info {
   flex: 1;
   margin-right: 2rem;
   color:black;
}

.contact-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2rem;
   max-width: 1200px;
   margin: 0 auto;
}

.info-items {
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.info-item {
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 1rem;
   background: rgba(255, 255, 255, 0.1);
   border-radius: var(--otaku-legal-border-radius-md);
   backdrop-filter: blur(10px);
   transition: all var(--otaku-legal-transition-normal);
}

.info-item:hover {
   background: rgba(255, 255, 255, 0.2);
   transform: translateX(5px);
}

.info-icon {
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
}

.company-icon {
   background: var(--otaku-legal-secondary-orange);
}

.location-icon {
   background: var(--otaku-legal-success-green);
}

.phone-icon {
   background: var(--otaku-legal-primary-blue-light);
}

.email-icon {
   background: var(--otaku-legal-warning-red);
}

.web-icon {
   background: var(--otaku-legal-neutral-400);
}

.siret-icon {
   background: var(--otaku-legal-neutral-600);
}

.info-details h3 {
   margin: 0 0 0.25rem 0;
   font-size: 0.9rem;
   font-weight: 600;
   opacity: 0.9;
}

.info-details p {
   margin: 0;
   font-size: 1rem;
   font-weight: 500;
}

/* ========================================
  PRICING ET CARTES SPÉCIALISÉES
  ======================================== */
.pricing-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 1.5rem;
   margin: 2rem 0;
}

.pricing-card {
   background: var(--otaku-legal-white);
   border-radius: var(--otaku-legal-border-radius-xl);
   padding: 2rem;
   text-align: center;
   box-shadow: var(--otaku-legal-shadow-lg);
   border: 2px solid var(--otaku-legal-neutral-200);
   transition: all var(--otaku-legal-transition-normal);
   position: relative;
   overflow: hidden;
}

.pricing-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--otaku-legal-shadow-2xl);
}

.pricing-card.standard {
   border-color: var(--otaku-legal-primary-blue-light);
}

.pricing-card.express {
   border-color: var(--otaku-legal-secondary-orange);
}

.pricing-card.gratuite {
   border-color: var(--otaku-legal-success-green);
}

.pricing-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 4px;
   background: linear-gradient(90deg, var(--otaku-legal-primary-blue) 0%, var(--otaku-legal-secondary-orange) 100%);
}

.pricing-card h4 {
   color: var(--otaku-legal-primary-blue);
   margin-bottom: 1rem;
   font-weight: 700;
}

.price {
   font-size: 2rem;
   font-weight: 900;
   color: var(--otaku-legal-secondary-orange);
   margin-bottom: 1rem;
}

.pricing-card ul {
   list-style: none;
   padding: 0;
   margin: 0;
   text-align: left;
}

.pricing-card li {
   padding: 0.5rem 0;
   color: var(--otaku-legal-neutral-600);
   border-bottom: 1px solid var(--otaku-legal-neutral-200);
}

.pricing-card li:last-child {
   border-bottom: none;
}

.pricing-card li:before {
   content: '✅';
   margin-right: 0.5rem;
   color: var(--otaku-legal-success-green);
}

.pricing-info {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 1rem;
   margin: 2rem 0;
}

.pricing-item {
   background: var(--otaku-legal-white);
   padding: 1.5rem;
   border-radius: var(--otaku-legal-border-radius-lg);
   box-shadow: var(--otaku-legal-shadow-md);
   text-align: center;
   border-top: 4px solid var(--otaku-legal-primary-blue);
}

.pricing-item h4 {
   color: var(--otaku-legal-primary-blue);
   margin-bottom: 0.75rem;
   font-weight: 700;
}

/* ========================================
  SECTIONS DE POLITIQUE SPÉCIALISÉES
  ======================================== */

/* CGV Spécifique */
.product-categories {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 1.5rem;
   margin: 2rem 0;
}

.category-item {
   background: var(--otaku-legal-white);
   padding: 1.5rem;
   border-radius: var(--otaku-legal-border-radius-lg);
   box-shadow: var(--otaku-legal-shadow-md);
   border-left: 4px solid var(--otaku-legal-primary-blue);
   transition: all var(--otaku-legal-transition-normal);
}

.category-item:hover {
   transform: translateY(-3px);
   box-shadow: var(--otaku-legal-shadow-lg);
}

.category-item h4 {
   color: var(--otaku-legal-primary-blue);
   margin-bottom: 0.75rem;
   font-weight: 700;
   font-size: 1.1rem;
}

.payment-methods {
   margin: 2rem 0;
}

.payment-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 1rem;
}

.payment-option {
   background: var(--otaku-legal-white);
   padding: 1.5rem;
   border-radius: var(--otaku-legal-border-radius-lg);
   text-align: center;
   box-shadow: var(--otaku-legal-shadow-md);
   border: 2px solid var(--otaku-legal-neutral-200);
   transition: all var(--otaku-legal-transition-normal);
}

.payment-option:hover {
   border-color: var(--otaku-legal-primary-blue);
   transform: translateY(-2px);
}

.payment-option h4 {
   color: var(--otaku-legal-primary-blue);
   margin-bottom: 0.5rem;
   font-weight: 700;
}

.shipping-zones {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 1.5rem;
   margin: 2rem 0;
}

.zone-item {
   background: linear-gradient(135deg, var(--otaku-legal-neutral-100) 0%, var(--otaku-legal-white) 100%);
   padding: 1.5rem;
   border-radius: var(--otaku-legal-border-radius-lg);
   border-left: 4px solid var(--otaku-legal-primary-blue);
   box-shadow: var(--otaku-legal-shadow-md);
}

.zone-item h4 {
   color: var(--otaku-legal-primary-blue);
   margin-bottom: 1rem;
   font-weight: 700;
}

.special-products {
   background: var(--otaku-legal-neutral-100);
   padding: 1.5rem;
   border-radius: var(--otaku-legal-border-radius-lg);
   margin: 2rem 0;
   border-left: 4px solid var(--otaku-legal-secondary-orange);
}

.special-products h4 {
   color: var(--otaku-legal-secondary-orange);
   margin-bottom: 1rem;
   font-weight: 700;
}

/* Politique de retour spécifique */
.conditions-list {
   display: grid;
   gap: 2rem;
   margin: 2rem 0;
}

.condition-item {
   background: var(--otaku-legal-white);
   border-radius: var(--otaku-legal-border-radius-lg);
   padding: 1.5rem;
   box-shadow: var(--otaku-legal-shadow-md);
   border-left: 4px solid;
}

.condition-item.accepted {
   border-left-color: var(--otaku-legal-success-green);
}

.condition-item.rejected {
   border-left-color: var(--otaku-legal-warning-red);
}

.condition-item h3 {
   margin-bottom: 1rem;
   font-weight: 700;
}

.condition-item.accepted h3 {
   color: var(--otaku-legal-success-green);
}

.condition-item.rejected h3 {
   color: var(--otaku-legal-warning-red);
}

.quality-requirements {
   background: var(--otaku-legal-neutral-100);
   padding: 2rem;
   border-radius: var(--otaku-legal-border-radius-lg);
   margin: 2rem 0;
}

.requirement-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 1rem;
   margin-top: 1rem;
}

.requirement {
   background: var(--otaku-legal-white);
   padding: 1rem;
   border-radius: var(--otaku-legal-border-radius-md);
   font-size: 0.9rem;
   border-left: 3px solid var(--otaku-legal-primary-blue);
}

.retraction-process {
   background: var(--otaku-legal-neutral-100);
   border-radius: var(--otaku-legal-border-radius-lg);
   padding: 2rem;
   margin: 2rem 0;
}

.process-header {
   margin-bottom: 2rem;
}

.process-header h4 {
   color: var(--otaku-legal-primary-blue);
   font-weight: 700;
   margin-bottom: 0.5rem;
}

.retraction-steps {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
}

.retraction-step {
   display: flex;
   align-items: flex-start;
   gap: 1rem;
   background: var(--otaku-legal-white);
   padding: 1.5rem;
   border-radius: var(--otaku-legal-border-radius-lg);
   box-shadow: var(--otaku-legal-shadow-sm);
}

.step-icon {
   font-size: 1.5rem;
   flex-shrink: 0;
}

.retraction-step h5 {
   color: var(--otaku-legal-primary-blue);
   font-weight: 700;
   margin: 0 0 0.5rem 0;
}

.retraction-step p {
   margin: 0;
   color: var(--otaku-legal-neutral-600);
   line-height: 1.6;
}

.exceptions-box {
   background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
   border: 2px solid var(--otaku-legal-warning-red);
   border-radius: var(--otaku-legal-border-radius-lg);
   padding: 1.5rem;
   margin: 2rem 0;
}

.exceptions-box h4 {
   color: var(--otaku-legal-warning-red);
   margin-bottom: 1rem;
   font-weight: 700;
}

.exceptions-box ul {
   margin: 0;
   padding-left: 1.5rem;
}

.exceptions-box li {
   color: var(--otaku-legal-warning-red);
   margin-bottom: 0.5rem;
}

/* ========================================
  ÉCHANGES ET GARANTIES
  ======================================== */
.exchange-options {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
   margin: 2rem 0;
}

.exchange-type {
   background: var(--otaku-legal-white);
border-radius: var(--otaku-legal-border-radius-lg);
   padding: 1.5rem;
   box-shadow: var(--otaku-legal-shadow-md);
   border-left: 4px solid var(--otaku-legal-primary-blue);
   transition: all var(--otaku-legal-transition-normal);
}

.exchange-type:hover {
   transform: translateX(5px);
   box-shadow: var(--otaku-legal-shadow-lg);
}

.exchange-type h3 {
   color: var(--otaku-legal-primary-blue);
   font-weight: 700;
   margin-bottom: 1rem;
}

.exchange-limitations {
   background: var(--otaku-legal-neutral-100);
   border-radius: var(--otaku-legal-border-radius-lg);
   padding: 2rem;
   margin: 2rem 0;
   border-left: 4px solid var(--otaku-legal-secondary-orange);
}

.exchange-limitations h3 {
   color: var(--otaku-legal-secondary-orange);
   margin-bottom: 1rem;
   font-weight: 700;
}

.refund-timeline {
   margin: 2rem 0;
}

.refund-timeline h3 {
   color: var(--otaku-legal-primary-blue);
   margin-bottom: 1.5rem;
   font-weight: 700;
}

.refund-methods {
   margin: 2rem 0;
}

.method-list {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
}

.method-item {
   background: var(--otaku-legal-white);
   border-radius: var(--otaku-legal-border-radius-lg);
   padding: 1.5rem;
   box-shadow: var(--otaku-legal-shadow-md);
   border-left: 4px solid var(--otaku-legal-primary-blue);
}

.method-item.priority {
   border-left-color: var(--otaku-legal-success-green);
}

.method-item.alternative {
   border-left-color: var(--otaku-legal-secondary-orange);
}

.method-item.special {
   border-left-color: var(--otaku-legal-neutral-400);
}

.method-item h4 {
   color: var(--otaku-legal-primary-blue);
   font-weight: 700;
   margin-bottom: 0.75rem;
}

.refund-amount {
   margin: 2rem 0;
}

.amount-breakdown {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 1.5rem;
   margin-top: 1rem;
}

.included,
.excluded {
   background: var(--otaku-legal-white);
   border-radius: var(--otaku-legal-border-radius-lg);
   padding: 1.5rem;
   box-shadow: var(--otaku-legal-shadow-md);
}

.included {
   border-left: 4px solid var(--otaku-legal-success-green);
}

.excluded {
   border-left: 4px solid var(--otaku-legal-warning-red);
}

.included h4 {
   color: var(--otaku-legal-success-green);
   font-weight: 700;
   margin-bottom: 1rem;
}

.excluded h4 {
   color: var(--otaku-legal-warning-red);
   font-weight: 700;
   margin-bottom: 1rem;
}

.warranty-info {
   background: var(--otaku-legal-neutral-100);
   border-radius: var(--otaku-legal-border-radius-lg);
   padding: 2rem;
   margin: 2rem 0;
}

.warranty-coverage {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 1.5rem;
   margin: 2rem 0;
}

.coverage-item {
   background: var(--otaku-legal-white);
   padding: 1.5rem;
   border-radius: var(--otaku-legal-border-radius-lg);
   box-shadow: var(--otaku-legal-shadow-md);
   border-top: 4px solid var(--otaku-legal-primary-blue);
}

.coverage-item h4 {
   color: var(--otaku-legal-primary-blue);
   margin-bottom: 1rem;
   font-weight: 700;
}

.defect-procedure {
   margin: 2rem 0;
}

.procedure-steps {
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.proc-step {
   display: flex;
   align-items: flex-start;
   gap: 1rem;
   background: var(--otaku-legal-white);
   padding: 1.5rem;
   border-radius: var(--otaku-legal-border-radius-lg);
   box-shadow: var(--otaku-legal-shadow-md);
   border-left: 4px solid var(--otaku-legal-primary-blue);
}

.step-num {
   width: 2.5rem;
   height: 2.5rem;
   background: var(--otaku-legal-primary-blue);
   color: var(--otaku-legal-white);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   flex-shrink: 0;
}

.step-desc {
   flex: 1;
}

.step-desc strong {
   color: var(--otaku-legal-primary-blue);
   font-weight: 700;
   display: block;
   margin-bottom: 0.5rem;
}

/* ========================================
  TRANSPORTEURS ET SERVICES
  ======================================== */
.transporters-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 1.5rem;
   margin: 2rem 0;
}

.transporter-card {
   background: var(--otaku-legal-white);
   padding: 2rem;
   border-radius: var(--otaku-legal-border-radius-lg);
   box-shadow: var(--otaku-legal-shadow-lg);
   border: 2px solid var(--otaku-legal-neutral-200);
   transition: all var(--otaku-legal-transition-normal);
}

.transporter-card:hover {
   transform: translateY(-3px);
   box-shadow: var(--otaku-legal-shadow-xl);
   border-color: var(--otaku-legal-primary-blue);
}

.transporter-card h4 {
   color: var(--otaku-legal-primary-blue);
   margin-bottom: 1rem;
   font-weight: 700;
   font-size: 1.2rem;
}

.features {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   margin-top: 1rem;
}

.feature {
   background: var(--otaku-legal-neutral-100);
   padding: 0.25rem 0.5rem;
   border-radius: 20px;
   font-size: 0.8rem;
   color: var(--otaku-legal-neutral-600);
}

.shipping-info {
   background: var(--otaku-legal-neutral-100);
   border-radius: var(--otaku-legal-border-radius-lg);
   padding: 2rem;
   margin: 2rem 0;
}

.shipping-details {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 1.5rem;
   margin-top: 1rem;
}

.shipping-cost,
.shipping-method {
   background: var(--otaku-legal-white);
   padding: 1.5rem;
   border-radius: var(--otaku-legal-border-radius-lg);
   box-shadow: var(--otaku-legal-shadow-sm);
   border-left: 4px solid var(--otaku-legal-primary-blue);
}

.shipping-cost h4,
.shipping-method h4 {
   color: var(--otaku-legal-primary-blue);
   margin-bottom: 1rem;
   font-weight: 700;
}

/* ========================================
  PROBLÈMES ET SOLUTIONS
  ======================================== */
.problem-solutions {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 1.5rem;
   margin: 2rem 0;
}

.solution-item {
   background: var(--otaku-legal-white);
   border-radius: var(--otaku-legal-border-radius-lg);
   padding: 1.5rem;
   box-shadow: var(--otaku-legal-shadow-md);
   border-top: 4px solid var(--otaku-legal-primary-blue);
}

.solution-item h4 {
   color: var(--otaku-legal-primary-blue);
   margin-bottom: 1rem;
   font-weight: 700;
}

.solution-steps {
   list-style: none;
   padding: 0;
   margin: 0;
}

.solution-steps p {
   margin-bottom: 0.75rem;
   padding-left: 1rem;
   position: relative;
   color: var(--otaku-legal-neutral-600);
}

.address-warning {
   background: #fef3c7;
   border: 1px solid var(--otaku-legal-secondary-orange);
   border-radius: var(--otaku-legal-border-radius-lg);
   padding: 1.5rem;
   margin: 2rem 0;
}

.contact-urgent {
   background: var(--otaku-legal-white);
   border-radius: var(--otaku-legal-border-radius-lg);
   padding: 2rem;
   box-shadow: var(--otaku-legal-shadow-lg);
   border-left: 4px solid var(--otaku-legal-warning-red);
}

.contact-methods {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   margin-top: 1rem;
}

.contact-method {
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 0.75rem;
   background: var(--otaku-legal-neutral-100);
   border-radius: var(--otaku-legal-border-radius-md);
}

/* ========================================
  STATUT DE COMMANDE SPÉCIALISÉ
  ======================================== */
.status-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 1rem;
   margin: 2rem 0;
}

.status-item {
   background: var(--otaku-legal-white);
   padding: 1.5rem;
   border-radius: var(--otaku-legal-border-radius-lg);
   box-shadow: var(--otaku-legal-shadow-md);
   border-left: 4px solid var(--otaku-legal-primary-blue);
   transition: all var(--otaku-legal-transition-normal);
   text-align: center;
}

.status-item:hover {
   transform: translateY(-3px);
   box-shadow: var(--otaku-legal-shadow-lg);
}

.status-item h4 {
   color: var(--otaku-legal-primary-blue);
   margin-bottom: 0.75rem;
   font-weight: 700;
   font-size: 1rem;
}

.status-item p {
   color: var(--otaku-legal-neutral-600);
   font-size: 0.9rem;
   line-height: 1.5;
   margin: 0;
}

.tracking-features {
   margin: 2rem 0;
}

.feature-row {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 1.5rem;
   margin-bottom: 1.5rem;
}

.feature {
   background: var(--otaku-legal-white);
   padding: 1.5rem;
   border-radius: var(--otaku-legal-border-radius-lg);
   box-shadow: var(--otaku-legal-shadow-md);
   border-top: 4px solid var(--otaku-legal-primary-blue);
}

.feature h4 {
   color: var(--otaku-legal-primary-blue);
   margin-bottom: 0.75rem;
   font-weight: 700;
}

.feature p {
   color: var(--otaku-legal-neutral-600);
   line-height: 1.6;
   margin: 0;
}

/* ========================================
  DÉFINITIONS ET TERMES LÉGAUX
  ======================================== */
.legal-definitions {
   background: var(--otaku-legal-neutral-100);
   border-radius: var(--otaku-legal-border-radius-lg);
   padding: 2rem;
   margin: 2rem 0;
}

.definition-item {
   padding: 1rem;
   margin-bottom: 1rem;
   background: var(--otaku-legal-white);
   border-radius: var(--otaku-legal-border-radius-md);
   border-left: 4px solid var(--otaku-legal-primary-blue);
   box-shadow: var(--otaku-legal-shadow-sm);
}

.definition-item:last-child {
   margin-bottom: 0;
}

.definition-item strong {
   color: var(--otaku-legal-primary-blue);
   font-weight: 700;
}

.legal-article-number {
   background: var(--otaku-legal-primary-blue);
   color: var(--otaku-legal-white);
   padding: 0.5rem 1rem;
   border-radius: var(--otaku-legal-border-radius-lg);
   font-weight: 700;
   margin-right: 1rem;
   font-size: 0.9rem;
}

.legal-content-block {
   background: var(--otaku-legal-white);
   border-radius: var(--otaku-legal-border-radius-lg);
   padding: 2rem;
   margin: 1rem 0;
   box-shadow: var(--otaku-legal-shadow-md);
   border-left: 4px solid var(--otaku-legal-primary-blue-light);
}

/* ========================================
  BARRES D'ACCENTUATION
  ======================================== */
.otaku-accent-bar,
.section-accent {
   width: 60px;
   height: 4px;
   background: linear-gradient(90deg, var(--otaku-legal-primary-blue) 0%, var(--otaku-legal-secondary-orange) 100%);
   margin: 0 auto 1rem auto;
   border-radius: 2px;
}

/* ========================================
  CAS SPÉCIAUX ET PARTAGE
  ======================================== */
.special-cases {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
   margin: 2rem 0;
}

.case-item {
   background: var(--otaku-legal-white);
   border-radius: var(--otaku-legal-border-radius-lg);
   padding: 1.5rem;
   box-shadow: var(--otaku-legal-shadow-md);
   border-left: 4px solid var(--otaku-legal-primary-blue);
   transition: all var(--otaku-legal-transition-normal);
}

.case-item:hover {
   transform: translateX(5px);
   box-shadow: var(--otaku-legal-shadow-lg);
}

.case-details {
   margin-top: 1rem;
}

.case-details ul {
   margin: 1rem 0;
   padding-left: 1.5rem;
}

.case-details li {
   margin-bottom: 0.5rem;
   color: var(--otaku-legal-neutral-600);
}

.sharing-cases {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
   margin: 2rem 0;
}

.case-item.authorized {
   border-left-color: var(--otaku-legal-success-green);
}

.case-item.service {
   border-left-color: var(--otaku-legal-primary-blue);
}

.case-item.legal {
   border-left-color: var(--otaku-legal-warning-red);
}

.case-header {
   display: flex;
   align-items: center;
   margin-bottom: 1rem;
}

.case-icon {
   font-size: 1.2rem;
   margin-right: 0.5rem;
}

.case-title {
   color: var(--otaku-legal-primary-blue);
   font-weight: 700;
   margin: 0;
}

.case-description {
   color: var(--otaku-legal-neutral-600);
   line-height: 1.6;
   margin: 0;
}

.sharing-policy {
   background: var(--otaku-legal-neutral-100);
   border-radius: var(--otaku-legal-border-radius-lg);
   padding: 2rem;
   margin: 2rem 0;
}

.policy-intro {
   font-size: 1.1rem;
   color: var(--otaku-legal-neutral-700);
   margin-bottom: 1.5rem;
   line-height: 1.7;
}

/* ========================================
  PROTECTION ET MESURES
  ======================================== */
.protection-measures {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 1.5rem;
   margin: 2rem 0;
}

.measure {
   background: var(--otaku-legal-white);
   padding: 1.5rem;
   border-radius: var(--otaku-legal-border-radius-lg);
   box-shadow: var(--otaku-legal-shadow-md);
   border-top: 4px solid var(--otaku-legal-primary-blue);
}

.measure h4 {
   color: var(--otaku-legal-primary-blue);
   margin-bottom: 1rem;
   font-weight: 700;
}

.measure ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

.measure li {
   padding: 0.5rem 0;
   color: var(--otaku-legal-neutral-600);
   border-bottom: 1px solid var(--otaku-legal-neutral-200);
   position: relative;
   padding-left: 1.5rem;
}

.measure li:before {
   content: '✓';
   position: absolute;
   left: 0;
   color: var(--otaku-legal-success-green);
   font-weight: 700;
}

.measure li:last-child {
   border-bottom: none;
}

.data-retention {
   background: var(--otaku-legal-neutral-100);
   border-radius: var(--otaku-legal-border-radius-lg);
   padding: 2rem;
   margin: 2rem 0;
   border-left: 4px solid var(--otaku-legal-secondary-orange);
}

.data-retention h4 {
   color: var(--otaku-legal-secondary-orange);
   margin-bottom: 1rem;
   font-weight: 700;
}

/* ========================================
  DROITS ET EXERCICE
  ======================================== */
.rights-intro {
   font-size: 1.1rem;
   color: var(--otaku-legal-neutral-700);
   margin-bottom: 2rem;
   line-height: 1.7;
}

.right-icon {
   font-size: 1.5rem;
   margin-bottom: 1rem;
   display: block;
}

.right-title {
   color: var(--otaku-legal-primary-blue);
   font-weight: 700;
   margin-bottom: 0.75rem;
}

.right-description {
   color: var(--otaku-legal-neutral-600);
   line-height: 1.6;
   margin-bottom: 1rem;
}

.right-action {
   background: var(--otaku-legal-neutral-100);
   padding: 0.75rem;
   border-radius: var(--otaku-legal-border-radius-md);
   font-size: 0.9rem;
   border-left: 3px solid var(--otaku-legal-primary-blue);
}

.right-action strong {
   color: var(--otaku-legal-primary-blue);
   font-weight: 700;
}

.rights-exercise {
   background: var(--otaku-legal-neutral-100);
   border-radius: var(--otaku-legal-border-radius-lg);
   padding: 2rem;
   margin: 2rem 0;
}

.exercise-steps {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 1.5rem;
   margin-top: 1.5rem;
}

.step {
   display: flex;
   align-items: flex-start;
   gap: 1rem;
   background: var(--otaku-legal-white);
   padding: 1.5rem;
   border-radius: var(--otaku-legal-border-radius-lg);
   box-shadow: var(--otaku-legal-shadow-sm);
}

/* ========================================
  BASES LÉGALES ET INFORMATIONS
  ======================================== */
.legal-basis {
   background: var(--otaku-legal-neutral-100);
   border-radius: var(--otaku-legal-border-radius-lg);
   padding: 2rem;
   margin: 2rem 0;
}

.basis-list {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   margin-top: 1rem;
}

.basis-item {
   background: var(--otaku-legal-white);
   padding: 1rem;
   border-radius: var(--otaku-legal-border-radius-md);
   border-left: 3px solid var(--otaku-legal-primary-blue);
}

.basis-item strong {
   color: var(--otaku-legal-primary-blue);
   font-weight: 700;
}

/* ========================================
  INFORMATIONS RÉGLEMENTAIRES
  ======================================== */
.regulatory-info {
   background: var(--otaku-legal-neutral-100);
   border-radius: var(--otaku-legal-border-radius-lg);
   padding: 2rem;
   margin: 2rem 0;
   border: 2px solid var(--otaku-legal-neutral-300);
}

.cnil-info {
   background: var(--otaku-legal-white);
   padding: 1rem;
   border-radius: var(--otaku-legal-border-radius-md);
   margin-top: 1rem;
   border-left: 4px solid var(--otaku-legal-primary-blue);
}

.hosting-info {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 1rem;
   margin: 1rem 0;
}

.hosting-item {
   padding: 0.75rem;
   background: var(--otaku-legal-white);
   border-radius: var(--otaku-legal-border-radius-md);
   border-left: 3px solid var(--otaku-legal-primary-blue);
}

.hosting-item strong {
   color: var(--otaku-legal-primary-blue);
   font-weight: 600;
}

/* ========================================
  FOOTER LÉGAL
  ======================================== */
.legal-footer,
.legal-footer-section,
.legal-footer-info,
.legal-footer-note {
   background: linear-gradient(135deg, var(--otaku-legal-neutral-800) 0%, var(--otaku-legal-neutral-700) 100%);
   color: var(--otaku-legal-white);
   padding: 2rem;
   border-radius: var(--otaku-legal-border-radius-xl);
   margin-top: 3rem;
   text-align: center;
}

.legal-footer-note {
   background: var(--otaku-legal-neutral-100);
   color: var(--otaku-legal-neutral-600);
   border: 1px solid var(--otaku-legal-neutral-300);
   font-style: italic;
}

.update-info {
   margin-bottom: 1rem;
}

.update-info p {
   margin: 0.5rem 0;
   color: var(--otaku-legal-neutral-300);
}

.update-info strong {
   color: var(--otaku-legal-secondary-orange);
}

.footer-actions {
   display: flex;
   justify-content: center;
   gap: 1rem;
   margin-top: 1rem;
}

.action-btn {
   background: var(--otaku-legal-primary-blue);
   color: var(--otaku-legal-white);
   border: none;
   padding: 0.75rem 1.5rem;
   border-radius: var(--otaku-legal-border-radius-lg);
   cursor: pointer;
   transition: all var(--otaku-legal-transition-normal);
   display: flex;
   align-items: center;
   gap: 0.5rem;
   text-decoration: none;
}

.action-btn:hover {
   background: var(--otaku-legal-primary-blue-light);
   transform: translateY(-2px);
}

.print-btn:hover {
   background: var(--otaku-legal-secondary-orange);
}

.top-btn:hover {
   background: var(--otaku-legal-success-green);
}

.footer-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
}

.footer-meta {
   display: flex;
   align-items: center;
   gap: 1rem;
   font-size: 0.9rem;
   color: var(--otaku-legal-neutral-400);
}

.separator {
   color: var(--otaku-legal-neutral-500);
}

.version {
   background: rgba(245, 158, 11, 0.2);
   padding: 0.25rem 0.5rem;
   border-radius: 20px;
   font-size: 0.8rem;
}

.contact-footer-info,
.footer-info-content {
   background: var(--otaku-legal-white);
   border-radius: var(--otaku-legal-border-radius-lg);
   padding: 2rem;
   margin: 2rem 0;
   box-shadow: var(--otaku-legal-shadow-md);
   border-top: 4px solid var(--otaku-legal-primary-blue);
}

.footer-info-content h3 {
   color: var(--otaku-legal-primary-blue);
   margin-bottom: 1rem;
   font-weight: 700;
   text-align: center;
}

.legal-navigation-footer {
   text-align: center;
   margin-top: 2rem;
}

.back-to-top {
   display: inline-block;
   color: var(--otaku-legal-primary-blue);
   text-decoration: none;
   font-weight: 600;
   padding: 0.5rem 1rem;
   border-radius: var(--otaku-legal-border-radius-md);
   transition: all var(--otaku-legal-transition-normal);
}

.back-to-top:hover {
   background: var(--otaku-legal-primary-blue);
   color: var(--otaku-legal-white);
}

/* ========================================
  ÉLÉMENTS INTERACTIFS
  ======================================== */
.reading-progress {
   position: fixed;
   top: 0;
   left: 0;
   width: 0%;
   height: 4px;
   background: linear-gradient(90deg, var(--otaku-legal-primary-blue) 0%, var(--otaku-legal-secondary-orange) 100%);
   z-index: 9999;
   transition: width 0.1s ease;
}

/* ========================================
  ANIMATIONS LÉGALES
  ======================================== */
@keyframes otaku-legal-float {
   0%, 100% { 
       transform: translateY(0px) rotate(0deg); 
   }
   33% { 
       transform: translateY(-10px) rotate(1deg); 
   }
   66% { 
       transform: translateY(-5px) rotate(-1deg); 
   }
}

@keyframes otaku-legal-bounce {
   0%, 20%, 50%, 80%, 100% { 
       transform: translateY(0); 
   }
   40% { 
       transform: translateY(-10px); 
   }
   60% { 
       transform: translateY(-5px); 
   }
}

@keyframes otaku-legal-highlightPulse {
   0% { 
       box-shadow: var(--otaku-legal-shadow-lg); 
   }
   50% { 
       box-shadow: 0 20px 50px rgba(30, 64, 175, 0.3); 
       transform: scale(1.02); 
   }
   100% { 
       box-shadow: var(--otaku-legal-shadow-lg); 
   }
}

@keyframes otaku-legal-loading {
   0% { 
       width: 0%; 
   }
   50% { 
       width: 100%; 
   }
   100% { 
       width: 85%; 
   }
}

@keyframes otaku-legal-slideInUp {
   from {
       opacity: 0;
       transform: translateY(30px);
   }
   to {
       opacity: 1;
       transform: translateY(0);
   }
}

@keyframes otaku-legal-fadeInScale {
   from {
       opacity: 0;
       transform: scale(0.9);
   }
   to {
       opacity: 1;
       transform: scale(1);
   }
}

/* Classes d'animation */
.animate-slide-up {
   animation: otaku-legal-slideInUp 0.6s ease;
}

.animate-fade-scale {
   animation: otaku-legal-fadeInScale 0.4s ease;
}

.animate-in {
   animation: otaku-legal-slideInUp 0.6s ease;
}

.highlight-section {
   background: rgba(30, 64, 175, 0.05) !important;
   transform: scale(1.01) !important;
   transition: all 0.3s ease !important;
}

/* ========================================
  RESPONSIVE DESIGN LÉGAL
  ======================================== */
@media (max-width: 1024px) {
   .legal-nav.sticky-nav {
       position: relative;
       top: auto;
       right: auto;
       width: auto;
       transform: none;
   }
   
   .contact-grid {
       grid-template-columns: 1fr;
       gap: 2rem;
   }
   
   .contact-info {
       margin-right: 0;
       margin-bottom: 2rem;
   }
   
   .nav-grid {
       grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 768px) {
   .legal-container,
   .legal-wrapper,
   .otaku-legal-container,
   .otaku-legal-wrapper {
       padding: 1rem 0.5rem;
   }
   
   .legal-hero,
   .contact-hero,
   .faq-hero {
       padding: 2rem 1rem;
       margin-bottom: 2rem;
   }
   
   .legal-title,
   .hero-title,
   .faq-title {
       font-size: 2rem;
   }
   
   .section-content,
   .content-block {
       padding: 1.5rem;
   }
   
   .info-grid,
   .data-protection-grid,
   .responsibility-grid,
   .jurisdiction-info,
   .data-grid,
   .purpose-grid,
   .rights-grid,
   .security-grid,
   .contact-grid,
   .pricing-grid,
   .transporters-grid,
   .problem-solutions,
   .product-categories,
   .shipping-zones,
   .exchange-options,
   .protection-measures,
   .warranty-coverage {
       grid-template-columns: 1fr;
       gap: 1rem;
   }
   
   .nav-grid {
       grid-template-columns: 1fr;
       gap: 0.75rem;
   }
   
   .form-row {
       grid-template-columns: 1fr;
   }
   
   .section-header {
       padding: 1rem 1.5rem;
   }
   
   .section-header h2,
   .section-title {
       font-size: 1.3rem;
   }
   
   .section-header::after {
       left: 1.5rem;
   }
   
   .step,
   .step-item,
   .timeline-item,
   .proc-step,
   .retraction-step {
       flex-direction: column;
       text-align: center;
   }
   
   .step-number,
   .step-num,
   .timeline-marker {
       margin-right: 0;
       margin-bottom: 1rem;
   }
   
   .timeline-item:not(:last-child)::after {
       display: none;
   }
   
   .footer-actions {
       flex-direction: column;
       align-items: center;
   }
   
   .delivery-grid,
   .table-responsive table {
       font-size: 0.8rem;
   }
   
   .delivery-grid th,
   .delivery-grid td {
       padding: 0.5rem;
   }
   
   .amount-breakdown,
   .shipping-details,
   .timeline-grid,
   .exercise-steps {
       grid-template-columns: 1fr;
   }
   
   .feature-row {
       grid-template-columns: 1fr;
   }
}

@media (max-width: 480px) {
   .legal-hero,
   .contact-hero,
   .faq-hero {
       padding: 1.5rem 1rem;
   }
   
   .legal-title,
   .hero-title,
   .faq-title {
       font-size: 1.8rem;
   }
   
   .title-icon,
   .otaku-accent {
       font-size: 2rem;
       display: block;
       margin: 0 0 0.5rem 0;
   }
   
   .section-content,
   .content-block {
       padding: 1rem;
   }
   
   .info-card,
   .protection-card,
   .resp-item,
   .jurisdiction-card,
   .data-card,
   .purpose-card,
   .right-card,
   .security-card,
   .contact-card {
       padding: 1rem;
   }
   
   .nav-item {
       padding: 0.75rem;
       font-size: 0.9rem;
   }
   
   .footer-meta {
       flex-direction: column;
       gap: 0.5rem;
   }
   
   .contact-methods {
       grid-template-columns: 1fr;
   }
   
   .pricing-card,
   .transporter-card,
   .solution-item {
       padding: 1.5rem 1rem;
   }
   
   .form-card {
       padding: 1.5rem;
   }
   
   .legal-nav {
       padding: 1.5rem;
   }
}

/* ========================================
  ACCESSIBILITÉ ET CONTRASTE
  ======================================== */
@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
       animation-duration: 0.01ms !important;
       animation-iteration-count: 1 !important;
       transition-duration: 0.01ms !important;
   }
}

@media (prefers-contrast: high) {
   :root {
       --otaku-legal-primary-blue: #000080;
       --otaku-legal-primary-blue-light: #0066cc;
       --otaku-legal-neutral-600: #000000;
       --otaku-legal-neutral-500: #333333;
   }
   
   .legal-section,
   .info-card,
   .protection-card {
       border: 2px solid var(--otaku-legal-neutral-700);
   }
}

/* Focus et accessibilité pour navigation clavier */
.legal-nav a:focus,
.nav-link:focus,
.nav-item:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.submit-btn:focus,
.action-btn:focus {
   outline: 2px solid var(--otaku-legal-primary-blue);
   outline-offset: 2px;
}

.skip-link {
   position: absolute;
   top: -40px;
   left: 6px;
   background: var(--otaku-legal-primary-blue);
   color: var(--otaku-legal-white);
   padding: 8px;
   text-decoration: none;
   border-radius: var(--otaku-legal-border-radius-md);
   z-index: 10000;
}

.skip-link:focus {
   top: 6px;
}

/* ========================================
  IMPRESSION
  ======================================== */
@media print {
   .legal-nav,
   .legal-hero,
   .legal-footer-section,
   .contact-hero,
   .faq-hero,
   .reading-progress,
   .floating-element,
   .hero-decoration,
   .footer-actions {
       display: none !important;
   }
   
   .legal-section {
       break-inside: avoid;
       box-shadow: none;
       border: 1px solid #ccc;
       margin-bottom: 2rem;
       page-break-inside: avoid;
   }
   
   .section-content,
   .content-block {
       padding: 1rem;
   }
   
   .legal-title,
   .section-title {
       color: #000 !important;
   }
   
   .highlight-box,
   .warning-box {
       border: 2px solid #000;
       background: #f5f5f5 !important;
   }
   
   body {
       font-size: 12pt;
       line-height: 1.4;
   }
   
   .legal-container,
   .legal-wrapper {
       max-width: none;
       margin: 0;
       padding: 0;
   }
   
   .info-card,
   .protection-card,
   .pricing-card {
       border: 1px solid #ccc;
       break-inside: avoid;
   }
}

/* ========================================
  DARK MODE (Optionnel)
  ======================================== */
@media (prefers-color-scheme: dark) {
   :root {
       --otaku-legal-white: #0f172a;
       --otaku-legal-neutral-100: #1e293b;
       --otaku-legal-neutral-200: #334155;
       --otaku-legal-neutral-300: #475569;
       --otaku-legal-neutral-400: #64748b;
       --otaku-legal-neutral-500: #94a3b8;
       --otaku-legal-neutral-600: #cbd5e1;
       --otaku-legal-neutral-700: #e2e8f0;
       --otaku-legal-neutral-800: #f1f5f9;
       --otaku-legal-neutral-900: #f8fafc;
   }
   
   body {
       background-color: var(--otaku-legal-neutral-100);
       color: var(--otaku-legal-neutral-600);
   }
   
   .legal-section,
   .info-card,
   .protection-card,
   .form-card,
   .faq-item {
       background-color: var(--otaku-legal-white);
       border-color: var(--otaku-legal-neutral-300);
   }
   
   .legal-hero,
   .contact-hero,
   .faq-hero {
       background: linear-gradient(135deg, var(--otaku-legal-primary-blue) 0%, var(--otaku-legal-primary-blue-light) 100%);
   }
   
   .form-input,
   .form-select,
   .form-textarea {
       background-color: var(--otaku-legal-neutral-200);
       border-color: var(--otaku-legal-neutral-400);
       color: var(--otaku-legal-neutral-700);
   }
   
   .highlight-box {
       background: linear-gradient(135deg, #451a03 0%, #78350f 100%);
       border-color: var(--otaku-legal-secondary-orange);
   }
   
   .warning-box {
       background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%);
       border-color: var(--otaku-legal-warning-red);
   }
}

/* ========================================
  UTILITAIRES ET HELPERS LÉGAUX
  ======================================== */
.otaku-legal-sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

.otaku-legal-text-center {
   text-align: center;
}

.otaku-legal-text-left {
   text-align: left;
}

.otaku-legal-text-right {
   text-align: right;
}

.otaku-legal-mb-0 { margin-bottom: 0 !important; }
.otaku-legal-mb-1 { margin-bottom: 0.5rem !important; }
.otaku-legal-mb-2 { margin-bottom: 1rem !important; }
.otaku-legal-mb-3 { margin-bottom: 1.5rem !important; }
.otaku-legal-mb-4 { margin-bottom: 2rem !important; }

.otaku-legal-mt-0 { margin-top: 0 !important; }
.otaku-legal-mt-1 { margin-top: 0.5rem !important; }
.otaku-legal-mt-2 { margin-top: 1rem !important; }
.otaku-legal-mt-3 { margin-top: 1.5rem !important; }
.otaku-legal-mt-4 { margin-top: 2rem !important; }

.otaku-legal-p-0 { padding: 0 !important; }
.otaku-legal-p-1 { padding: 0.5rem !important; }
.otaku-legal-p-2 { padding: 1rem !important; }
.otaku-legal-p-3 { padding: 1.5rem !important; }
.otaku-legal-p-4 { padding: 2rem !important; }

.otaku-legal-font-bold {
   font-weight: 700;
}

.otaku-legal-font-semibold {
   font-weight: 600;
}

.otaku-legal-font-normal {
   font-weight: 400;
}

.otaku-legal-text-sm {
   font-size: 0.875rem;
}

.otaku-legal-text-base {
   font-size: 1rem;
}

.otaku-legal-text-lg {
   font-size: 1.125rem;
}

.otaku-legal-text-xl {
   font-size: 1.25rem;
}

.otaku-legal-text-2xl {
   font-size: 1.5rem;
}

.otaku-legal-text-primary {
   color: var(--otaku-legal-primary-blue);
}

.otaku-legal-text-secondary {
   color: var(--otaku-legal-secondary-orange);
}

.otaku-legal-text-success {
   color: var(--otaku-legal-success-green);
}

.otaku-legal-text-warning {
   color: var(--otaku-legal-warning-red);
}

.otaku-legal-text-muted {
   color: var(--otaku-legal-neutral-500);
}

.otaku-legal-bg-primary {
   background-color: var(--otaku-legal-primary-blue);
}

.otaku-legal-bg-secondary {
   background-color: var(--otaku-legal-secondary-orange);
}

.otaku-legal-bg-success {
   background-color: var(--otaku-legal-success-green);
}

.otaku-legal-bg-warning {
   background-color: var(--otaku-legal-warning-red);
}

.otaku-legal-bg-light {
   background-color: var(--otaku-legal-neutral-100);
}

.otaku-legal-bg-white {
   background-color: var(--otaku-legal-white);
}

.otaku-legal-border-0 {
   border: none !important;
}

.otaku-legal-border {
   border: 1px solid var(--otaku-legal-neutral-300);
}

.otaku-legal-border-primary {
   border-color: var(--otaku-legal-primary-blue);
}

.otaku-legal-border-secondary {
   border-color: var(--otaku-legal-secondary-orange);
}

.otaku-legal-rounded-none {
   border-radius: 0;
}

.otaku-legal-rounded-sm {
   border-radius: var(--otaku-legal-border-radius-sm);
}

.otaku-legal-rounded {
   border-radius: var(--otaku-legal-border-radius-md);
}

.otaku-legal-rounded-lg {
   border-radius: var(--otaku-legal-border-radius-lg);
}

.otaku-legal-rounded-xl {
   border-radius: var(--otaku-legal-border-radius-xl);
}

.otaku-legal-rounded-2xl {
   border-radius: var(--otaku-legal-border-radius-2xl);
}

.otaku-legal-shadow-none {
   box-shadow: none;
}

.otaku-legal-shadow-sm {
   box-shadow: var(--otaku-legal-shadow-sm);
}

.otaku-legal-shadow {
   box-shadow: var(--otaku-legal-shadow-md);
}

.otaku-legal-shadow-lg {
   box-shadow: var(--otaku-legal-shadow-lg);
}

.otaku-legal-shadow-xl {
   box-shadow: var(--otaku-legal-shadow-xl);
}

.otaku-legal-shadow-2xl {
   box-shadow: var(--otaku-legal-shadow-2xl);
}

.otaku-legal-d-none {
   display: none !important;
}

.otaku-legal-d-block {
   display: block !important;
}

.otaku-legal-d-flex {
   display: flex !important;
}

.otaku-legal-d-grid {
   display: grid !important;
}

.otaku-legal-justify-center {
   justify-content: center;
}

.otaku-legal-justify-between {
   justify-content: space-between;
}

.otaku-legal-align-center {
   align-items: center;
}

.otaku-legal-flex-column {
   flex-direction: column;
}

.otaku-legal-flex-wrap {
   flex-wrap: wrap;
}

.otaku-legal-w-100 {
   width: 100%;
}

.otaku-legal-h-100 {
   height: 100%;
}

.otaku-legal-overflow-hidden {
   overflow: hidden;
}

.otaku-legal-overflow-auto {
   overflow: auto;
}

.otaku-legal-position-relative {
   position: relative;
}

.otaku-legal-position-absolute {
   position: absolute;
}

.otaku-legal-position-fixed {
   position: fixed;
}

.otaku-legal-cursor-pointer {
   cursor: pointer;
}

.otaku-legal-transition-all {
   transition: all var(--otaku-legal-transition-normal);
}

.otaku-legal-transition-fast {
   transition: all var(--otaku-legal-transition-fast);
}

.otaku-legal-transition-slow {
   transition: all var(--otaku-legal-transition-slow);
}

/* ========================================
  CORRECTIONS FINALES ET OPTIMISATIONS
  ======================================== */

/* Assurer la cohérence des espacements */
.legal-section + .legal-section {
   margin-top: 2rem;
}

.section-content > *:first-child {
   margin-top: 0;
}

.section-content > *:last-child {
   margin-bottom: 0;
}

/* Améliorer la lisibilité des listes */
.section-content ul li,
.section-content ol li {
   padding-left: 0.5rem;
}

/* Assurer la cohérence des boutons */
button,
.btn,
.action-btn {
   font-family: inherit;
   font-size: inherit;
}

/* Performance et optimisation */
.legal-section,
.info-card,
.contact-card {
   will-change: transform;
}

/* Correction des débordements */
.legal-container,
.legal-wrapper,
.contact-main,
.faq-container {
   overflow-x: hidden;
}

/* Assurer la hauteur minimale */
.legal-main,
.contact-main,
.faq-container {
   min-height: calc(100vh - 160px);
}

/* Classes utilitaires finales */
.visually-hidden {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;
   padding: 0 !important;
   margin: -1px !important;
   overflow: hidden !important;
   clip: rect(0, 0, 0, 0) !important;
   white-space: nowrap !important;
   border: 0 !important;
}

.clearfix::after {
   content: "";
   display: table;
   clear: both;
}

/* Éviter les conflits avec les icônes existantes */
.legal-section .icon-contract {
   font-size: 4rem;
   color: var(--otaku-legal-secondary-orange);
   animation: otaku-legal-bounce 2s infinite;
   display: block;
   text-align: center;
   margin-bottom: 1rem;
}

.legal-header-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 2rem;
}

/* Corrections spécifiques pour éviter les conflits */
.legal-main .container,
.contact-main .container,
.faq-container .container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 1rem;
}

/* Fin du fichier legal.css - Version ultra sécurisée */