/* Base styles */
.histoire-comme-container body {
    font-family: 'Verdana', Arial, sans-serif;
    background-color: #f9fafb;
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

/* Utility classes */
.histoire-comme-container .font-sans {
font-family: 'Verdana', Arial, sans-serif;
}
.histoire-comme-container .bg-gray-50 { background-color: #f9fafb; }
.histoire-comme-container .bg-green-50 { background-color: #f0fdf4; }
.histoire-comme-container .bg-yellow-50 { background-color: #fefce8; }
.histoire-comme-container .bg-blue-50 { background-color: #eff6ff; }
.histoire-comme-container .bg-white { background-color: white; }
.histoire-comme-container .bg-green-800 { background-color: #166534; }

.histoire-comme-container .text-white { color: white; }
.histoire-comme-container  { 
font-size: 14px;
color: #374151; 
}



.text-gray-700 {
    font-family: 'Verdana', Arial, sans-serif;
    font-size: 14px;
    color: #374151;
    text-align: justify;
    text-justify: inter-word;
}

.histoire-comme-container .text-green-800 { color: #166534; }
.histoire-comme-container .text-yellow-700 { color: #ca8a04; }
.histoire-comme-container .text-purple-700 { color: #7e22ce; }
.histoire-comme-container .text-blue-700 { color: #1d4ed8; }
.histoire-comme-container .text-green-700 { color: #15803d; }
.histoire-comme-container .text-yellow-500 { color: #eab308; }
.histoire-comme-container .text-green-900 { color: #14532d; }

.histoire-comme-container .bg-yellow-500 { background-color: #eab308; }
.histoire-comme-container .bg-yellow-600 { background-color: #ca8a04; }
.histoire-comme-container .bg-green-100 { background-color: #dcfce7; }
.histoire-comme-container .bg-yellow-100 { background-color: #fef9c3; }
.histoire-comme-container .bg-purple-100 { background-color: #f3e8ff; }
.histoire-comme-container .bg-blue-100 { background-color: #dbeafe; }

/* Layout */
.histoire-comme-container .container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1rem;
    padding-left: 1rem;
}

@media (min-width: 640px) { 
    .histoire-comme-container .container { max-width: 640px; } 
}
@media (min-width: 768px) { 
    .histoire-comme-container .container { max-width: 768px; } 
}
@media (min-width: 1024px) { 
    .histoire-comme-container .container { max-width: 1024px; } 
}
@media (min-width: 1280px) { 
    .histoire-comme-container .container { max-width: 1280px; } 
}

/* Flex */
.histoire-comme-container .flex { display: flex; }
.histoire-comme-container .flex-col { flex-direction: column; }
.histoire-comme-container .flex-row { flex-direction: row; }
.histoire-comme-container .items-center { align-items: center; }
.histoire-comme-container .justify-center { justify-content: center; }
.histoire-comme-container .gap-8 { gap: 2rem; }
.histoire-comme-container .gap-6 { gap: 1.5rem; }
.histoire-comme-container .gap-4 { gap: 1rem; }

/* Grid */
.histoire-comme-container .grid { display: grid; }
.histoire-comme-container .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.histoire-comme-container .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Spacing */
.histoire-comme-container .px-4 { padding-left: 1rem; padding-right: 1rem; }
.histoire-comme-container .py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.histoire-comme-container .p-8 { padding: 2rem; }
.histoire-comme-container .p-6 { padding: 1.5rem; }
.histoire-comme-container .p-4 { padding: 1rem; }
.histoire-comme-container .p-3 { padding: 0.75rem; }
.histoire-comme-container .p-2 { padding: 0.5rem; }
.histoire-comme-container .mb-8 { margin-bottom: 2rem; }
.histoire-comme-container .mb-6 { margin-bottom: 1.5rem; }
.histoire-comme-container .mb-4 { margin-bottom: 1rem; }
.histoire-comme-container .mb-2 { margin-bottom: 0.5rem; }
.histoire-comme-container .mr-4 { margin-right: 1rem; }
.histoire-comme-container .mt-1 { margin-top: 0.25rem; }

/* Sizing */
.histoire-comme-container .w-full { width: 100%; }
.histoire-comme-container .w-1/2 { width: 50%; }
.histoire-comme-container .h-96 { height: 24rem; }
.histoire-comme-container .h-48 { height: 12rem; }

/* Typography */
.histoire-comme-container .text-center { text-align: center; }
.histoire-comme-container .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.histoire-comme-container .text-6xl { font-size: 3.75rem; line-height: 1; }
.histoire-comme-container .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.histoire-comme-container .text-2xl { font-size: 1.5rem; line-height: 2rem; }
.histoire-comme-container .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.histoire-comme-container .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.histoire-comme-container .font-bold { font-weight: 700; }
.histoire-comme-container .font-semibold { font-weight: 600; }
.histoire-comme-container .font-medium { font-weight: 500; }
.histoire-comme-container .leading-relaxed { line-height: 1.625; }

/* Borders */
.histoire-comme-container .rounded-full { border-radius: 9999px; }
.histoire-comme-container .rounded-lg { border-radius: 0.5rem; }
.histoire-comme-container .rounded-xl { border-radius: 0.75rem; }

/* Shadows */
.histoire-comme-container .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.histoire-comme-container .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.histoire-comme-container .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
.histoire-comme-container .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }

/* Transitions */
.histoire-comme-container .transition { transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform; }
.histoire-comme-container .duration-300 { transition-duration: 300ms; }

/* Hover states */
.histoire-comme-container .hover\:bg-yellow-600:hover { background-color: #ca8a04; }
.histoire-comme-container .hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }

/* Responsive */
@media (min-width: 768px) {
    .histoire-comme-container .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .histoire-comme-container .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .histoire-comme-container .md\:w-1/2 { width: 50%; }
    .histoire-comme-container .md\:flex-row { flex-direction: row; }
}

@media (min-width: 1024px) {
    .histoire-comme-container .lg\:flex-row { flex-direction: row; }
    .histoire-comme-container .lg\:w-1/2 { width: 50%; }
    .histoire-comme-container .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Custom styles */
.histoire-comme-container .hero-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1544197150-bc4f0d122672?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.histoire-comme-container .culture-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.histoire-comme-container .map-container {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}

.histoire-comme-container .map-container iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

/* Object fit */
.histoire-comme-container .object-cover { object-fit: cover; }

/* Space between */
.histoire-comme-container .space-y-4 > * + * { margin-top: 1rem; }

/* Font Awesome Icons */
.histoire-comme-container .fas {
    font-family: 'Verdana', Arial, sans-serif;
    font-weight: 900;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
}

.histoire-comme-container .fa-landmark:before { content: "\f66f"; }
.histoire-comme-container .fa-users:before { content: "\f0c0"; }
.histoire-comme-container .fa-mask:before { content: "\f6fa"; }
.histoire-comme-container .fa-torii-gate:before { content: "\f6a1"; }
.histoire-comme-container .fa-futbol:before { content: "\f1e3"; }
.histoire-comme-container .fa-check:before { content: "\f00c"; }
.histoire-comme-container .fa-utensils:before { content: "\f2e7"; }