/* 
CMS Blocks Common Styles - Harmonisation des styles entre tous les blocs
=======================================================================
*/

/* === TITRES DE BLOCS === */
/* Hiérarchie des titres basée sur le style text-2xl font-bold text-red-900 p-2 */

/* H1 - Titres principaux (Hero, pages principales) */
.cms-block-title-h1 {
    @apply text-5xl md:text-6xl font-bold text-red-900 p-4 mb-8;
}

/* H2 - Titres de sections (style de référence utilisateur) */
.cms-block-title {
    @apply text-3xl font-bold text-red-900 p-3 mt-0 mb-3;
}

/* H3 - Sous-titres principaux */
.cms-block-subtitle {
    @apply text-2xl font-bold text-red-800 p-3 mb-4;
}

/* H4 - Sous-titres secondaires */  
.cms-block-small-title {
    @apply text-xl font-semibold text-red-700 p-2 mb-3;
}

/* H5 - Titres de détail */
.cms-block-micro-title {
    @apply text-lg font-semibold text-red-600 p-2 mb-3;
}

/* H6 - Titres minimaux */
.cms-block-mini-title {
    @apply text-base font-medium text-red-500 p-1 mb-2;
}

/* === STYLES SPÉCIALISÉS DE TITRES === */

/* Titres de cartes DaisyUI - maintenant h3 */
.card-title, h3.card-title {
    @apply text-xl font-bold text-red-800 p-1 mt-0;
    margin-bottom: 0.25rem !important;
}

/* Titres d'alertes */  
.alert .font-bold {
    @apply text-lg font-bold text-red-700 p-1;
}

/* Titres dans les galeries */
.font-semibold.text-lg {
    @apply text-lg font-semibold text-red-700 p-1;
}

/* === STYLES GÉNÉRIQUES DE TITRES HTML === */
/* Styles pour les titres HTML standards dans le contenu riche */

h1 {
    @apply text-5xl md:text-6xl font-bold text-white p-4 mb-8;
}

h2 {
    @apply text-3xl font-bold text-red-900 p-3 mt-0 mb-3;
}

h3 {
    @apply text-2xl font-bold text-red-900 p-3 mb-4;
}

h4 {
    @apply text-xl font-semibold text-red-900 p-2 mb-3;
}

h5 {
    @apply text-lg font-semibold text-red-900 p-2 mb-3;
}

h6 {
    @apply text-base font-medium text-red-900 p-1 mb-2;
}

/* === CONTENU TEXTE === */
.cms-block-content {
    @apply prose prose-slate max-w-none;
    
    /* Harmonisation des couleurs avec le thème */
    --tw-prose-body: theme('colors.base-content');
    --tw-prose-headings: theme('colors.base-content');
    --tw-prose-lead: theme('colors.base-content / 0.8');
    --tw-prose-links: theme('colors.primary');
    --tw-prose-bold: theme('colors.base-content');
    --tw-prose-counters: theme('colors.base-content / 0.6');
    --tw-prose-bullets: theme('colors.base-content / 0.4');
    --tw-prose-hr: theme('colors.base-300');
    --tw-prose-quotes: theme('colors.base-content / 0.8');
    --tw-prose-quote-borders: theme('colors.base-300');
    --tw-prose-captions: theme('colors.base-content / 0.6');
    --tw-prose-code: theme('colors.base-content');
    --tw-prose-pre-code: theme('colors.base-content');
    --tw-prose-pre-bg: theme('colors.base-200');
    --tw-prose-th-borders: theme('colors.base-300');
    --tw-prose-td-borders: theme('colors.base-300');
}

.cms-block-content-large {
    @apply prose prose-lg prose-slate max-w-none;
    
    /* Même harmonisation pour les contenus agrandis */
    --tw-prose-body: theme('colors.base-content');
    --tw-prose-headings: theme('colors.base-content');
    --tw-prose-lead: theme('colors.base-content / 0.8');
    --tw-prose-links: theme('colors.primary');
    --tw-prose-bold: theme('colors.base-content');
    --tw-prose-counters: theme('colors.base-content / 0.6');
    --tw-prose-bullets: theme('colors.base-content / 0.4');
    --tw-prose-hr: theme('colors.base-300');
    --tw-prose-quotes: theme('colors.base-content / 0.8');
    --tw-prose-quote-borders: theme('colors.base-300');
    --tw-prose-captions: theme('colors.base-content / 0.6');
    --tw-prose-code: theme('colors.base-content');
    --tw-prose-pre-code: theme('colors.base-content');
    --tw-prose-pre-bg: theme('colors.base-200');
    --tw-prose-th-borders: theme('colors.base-300');
    --tw-prose-td-borders: theme('colors.base-300');
}

/* Version inversée pour les fonds sombres */
.cms-block-content-inverted {
    @apply prose prose-slate max-w-none prose-invert;
}

/* === ESPACEMENTS HARMONISÉS === */
.cms-block {
    @apply px-4 mb-16;
    margin-top: 1.5rem;
}

/* Espacement spécifique pour certains blocs */
.cms-block[data-block-type="button"],
.cms-block[data-block-type="alert"] {
    @apply mt-4;
}

/* Alternative si l'attribut data-block-type n'est pas disponible */
/* Espacement pour les blocs bouton et alerte via classes */
.button-block,
.alert-block {
    @apply mt-4;
}

.cms-block-compact {
    @apply my-8;
}

.cms-block-spacious {
    @apply my-16;
}

/* === LÉGENDES ET TEXTES AUXILIAIRES === */
.cms-caption {
    @apply text-sm text-base-content/70 mt-2;
}

.cms-caption-center {
    @apply text-sm text-base-content/70 mt-2 text-center;
}

.cms-helper-text {
    @apply text-xs text-base-content/60 mt-1;
}

/* === CONTENEURS ET ARRIÈRE-PLANS === */
.cms-block-container {
    @apply rounded-lg overflow-hidden;
}

.cms-block-container-bordered {
    @apply rounded-lg border border-base-content/10 overflow-hidden;
}

.cms-block-container-shadowed {
    @apply rounded-lg shadow-sm overflow-hidden;
}

/* === HARMONISATION SPÉCIFIQUE MARKDOWN === */
.cms-markdown-content {
    @apply prose prose-slate max-w-none;
    
    /* Variables CSS personnalisées pour correspondre au thème */
    --tw-prose-body: theme('colors.base-content');
    --tw-prose-headings: theme('colors.base-content');
    --tw-prose-lead: theme('colors.base-content / 0.8');
    --tw-prose-links: theme('colors.primary');
    --tw-prose-bold: theme('colors.base-content');
    --tw-prose-counters: theme('colors.base-content / 0.6');
    --tw-prose-bullets: theme('colors.base-content / 0.4');
    --tw-prose-hr: theme('colors.base-300');
    --tw-prose-quotes: theme('colors.base-content / 0.8');
    --tw-prose-quote-borders: theme('colors.base-300');
    --tw-prose-captions: theme('colors.base-content / 0.6');
    --tw-prose-code: theme('colors.base-content');
    --tw-prose-pre-code: theme('colors.base-content');
    --tw-prose-pre-bg: theme('colors.base-200');
    --tw-prose-th-borders: theme('colors.base-300');
    --tw-prose-td-borders: theme('colors.base-300');
}

/* Titres dans le contenu markdown harmonisés */
.cms-markdown-content h1, 
.cms-markdown-content h2, 
.cms-markdown-content h3, 
.cms-markdown-content h4, 
.cms-markdown-content h5, 
.cms-markdown-content h6 {
    @apply text-base-content font-bold mt-0 mb-4;
}

.cms-markdown-content h1 { @apply text-3xl; }
.cms-markdown-content h2 { @apply text-2xl; }
.cms-markdown-content h3 { @apply text-xl; }
.cms-markdown-content h4 { @apply text-lg; }
.cms-markdown-content h5 { @apply text-base; }
.cms-markdown-content h6 { @apply text-sm; }

/* Tables dans markdown harmonisées */
.cms-markdown-content table {
    @apply table table-zebra w-full my-6 border-collapse;
    border-spacing: 0;
}

.cms-markdown-content table th {
    @apply bg-base-200 font-semibold text-base-content p-3 border border-base-300;
    font-size: 1rem;
}

.cms-markdown-content table td {
    @apply text-base-content p-3 border border-base-300;
    font-size: 1rem;
}

/* === BLOCS TABLEAUX WAGTAIL === */
/* Taille de police uniformisée pour les tableaux des blocs CMS */
.table-block table,
.cms-block table {
    font-size: 1rem !important; /* 16px uniforme */
    line-height: 1.6 !important;
}

.table-block table th,
.cms-block table th {
    font-size: 1rem !important; /* 16px uniforme */
    font-weight: 600 !important;
    line-height: 1.5 !important;
}

.table-block table td,
.cms-block table td {
    font-size: 1rem !important; /* 16px uniforme */
    line-height: 1.6 !important;
}

/* Code dans markdown harmonisé */
.cms-markdown-content code {
    @apply bg-base-200 text-base-content px-2 py-1 rounded text-sm font-mono;
}

.cms-markdown-content pre code {
    @apply bg-transparent p-0;
}

/* Blockquotes harmonisées */
.cms-markdown-content blockquote {
    @apply border-l-4 border-primary pl-4 italic bg-base-100 py-2 my-4 text-base-content/80;
}

/* Liens harmonisés */
.cms-markdown-content a {
    @apply text-primary hover:text-primary-focus underline;
}

/* === LIENS VERS DOCUMENTS DANS RICHTEXT === */
/* Liens vers des documents - style bouton automatique avec CSS pur */
/* Cible tous les liens documents dans le contenu principal, y compris RichText de Wagtail */
a[href*="/documents/"],
a[href$=".pdf"],
a[href$=".doc"],
a[href$=".docx"],
a[href$=".xls"],
a[href$=".xlsx"],
a[href$=".ppt"],
a[href$=".pptx"],
a[href$=".zip"],
a[href$=".rar"],
.cms-block-content a[href*="/documents/"],
.cms-block-content a[href$=".pdf"],
.cms-block-content a[href$=".doc"],
.cms-block-content a[href$=".docx"],
.cms-block-content a[href$=".xls"],
.cms-block-content a[href$=".xlsx"],
.cms-block-content a[href$=".ppt"],
.cms-block-content a[href$=".pptx"],
.cms-block-content a[href$=".zip"],
.cms-block-content a[href$=".rar"],
.richtext a[href*="/documents/"],
.richtext a[href$=".pdf"],
.richtext a[href$=".doc"],
.richtext a[href$=".docx"],
.richtext a[href$=".xls"],
.richtext a[href$=".xlsx"],
.richtext a[href$=".ppt"],
.richtext a[href$=".pptx"],
.richtext a[href$=".zip"],
.richtext a[href$=".rar"] {
    /* Style bouton avec CSS pur pour assurer la compatibilité */
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    background-color: #3b82f6 !important; /* btn-primary */
    color: white !important;
    border-radius: 0.5rem !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: 0.5rem 0 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Ajout automatique d'une icône de téléchargement via CSS */
a[href*="/documents/"]:before,
a[href$=".pdf"]:before,
a[href$=".doc"]:before,
a[href$=".docx"]:before,
a[href$=".xls"]:before,
a[href$=".xlsx"]:before,
a[href$=".ppt"]:before,
a[href$=".pptx"]:before,
a[href$=".zip"]:before,
a[href$=".rar"]:before,
.cms-block-content a[href*="/documents/"]:before,
.cms-block-content a[href$=".pdf"]:before,
.cms-block-content a[href$=".doc"]:before,
.cms-block-content a[href$=".docx"]:before,
.cms-block-content a[href$=".xls"]:before,
.cms-block-content a[href$=".xlsx"]:before,
.cms-block-content a[href$=".ppt"]:before,
.cms-block-content a[href$=".pptx"]:before,
.cms-block-content a[href$=".zip"]:before,
.cms-block-content a[href$=".rar"]:before,
.richtext a[href*="/documents/"]:before,
.richtext a[href$=".pdf"]:before,
.richtext a[href$=".doc"]:before,
.richtext a[href$=".docx"]:before,
.richtext a[href$=".xls"]:before,
.richtext a[href$=".xlsx"]:before,
.richtext a[href$=".ppt"]:before,
.richtext a[href$=".pptx"]:before,
.richtext a[href$=".zip"]:before,
.richtext a[href$=".rar"]:before {
    content: "⬇";
    font-size: 0.875rem;
    font-weight: bold;
}

/* Effets hover pour les boutons documents */
a[href*="/documents/"]:hover,
a[href$=".pdf"]:hover,
a[href$=".doc"]:hover,
a[href$=".docx"]:hover,
a[href$=".xls"]:hover,
a[href$=".xlsx"]:hover,
a[href$=".ppt"]:hover,
a[href$=".pptx"]:hover,
a[href$=".zip"]:hover,
a[href$=".rar"]:hover,
.cms-block-content a[href*="/documents/"]:hover,
.cms-block-content a[href$=".pdf"]:hover,
.cms-block-content a[href$=".doc"]:hover,
.cms-block-content a[href$=".docx"]:hover,
.cms-block-content a[href$=".xls"]:hover,
.cms-block-content a[href$=".xlsx"]:hover,
.cms-block-content a[href$=".ppt"]:hover,
.cms-block-content a[href$=".pptx"]:hover,
.cms-block-content a[href$=".zip"]:hover,
.cms-block-content a[href$=".rar"]:hover,
.richtext a[href*="/documents/"]:hover,
.richtext a[href$=".pdf"]:hover,
.richtext a[href$=".doc"]:hover,
.richtext a[href$=".docx"]:hover,
.richtext a[href$=".xls"]:hover,
.richtext a[href$=".xlsx"]:hover,
.richtext a[href$=".ppt"]:hover,
.richtext a[href$=".pptx"]:hover,
.richtext a[href$=".zip"]:hover,
.richtext a[href$=".rar"]:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12) !important;
    opacity: 0.9 !important;
}

/* Variantes de style selon le type de fichier avec CSS pur */
a[href$=".pdf"],
.cms-block-content a[href$=".pdf"],
.richtext a[href$=".pdf"] {
    background-color: #ef4444 !important; /* rouge pour PDF */
}

a[href$=".doc"],
a[href$=".docx"],
.cms-block-content a[href$=".doc"],
.cms-block-content a[href$=".docx"],
.richtext a[href$=".doc"],
.richtext a[href$=".docx"] {
    background-color: #3b82f6 !important; /* bleu pour Word */
}

a[href$=".xls"],
a[href$=".xlsx"],
.cms-block-content a[href$=".xls"],
.cms-block-content a[href$=".xlsx"],
.richtext a[href$=".xls"],
.richtext a[href$=".xlsx"] {
    background-color: #22c55e !important; /* vert pour Excel */
}

a[href$=".ppt"],
a[href$=".pptx"],
.cms-block-content a[href$=".ppt"],
.cms-block-content a[href$=".pptx"],
.richtext a[href$=".ppt"],
.richtext a[href$=".pptx"] {
    background-color: #f59e0b !important; /* jaune pour PowerPoint */
}

a[href$=".zip"],
a[href$=".rar"],
.cms-block-content a[href$=".zip"],
.cms-block-content a[href$=".rar"],
.richtext a[href$=".zip"],
.richtext a[href$=".rar"] {
    background-color: #6b7280 !important; /* gris pour archives */
}

/* Liens vers documents dans les cartes - version plus petite avec CSS pur */
.card a[href*="/documents/"],
.card a[href$=".pdf"],
.card a[href$=".doc"],
.card a[href$=".docx"],
.card a[href$=".xls"],
.card a[href$=".xlsx"],
.card a[href$=".ppt"],
.card a[href$=".pptx"],
.card a[href$=".zip"],
.card a[href$=".rar"],
.card .cms-block-content a[href*="/documents/"],
.card .cms-block-content a[href$=".pdf"],
.card .cms-block-content a[href$=".doc"],
.card .cms-block-content a[href$=".docx"],
.card .cms-block-content a[href$=".xls"],
.card .cms-block-content a[href$=".xlsx"],
.card .cms-block-content a[href$=".ppt"],
.card .cms-block-content a[href$=".pptx"],
.card .cms-block-content a[href$=".zip"],
.card .cms-block-content a[href$=".rar"] {
    /* Style bouton plus petit pour les cartes */
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    padding: 0.25rem 0.75rem !important;
    background-color: #3b82f6 !important;
    color: white !important;
    border-radius: 0.375rem !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: 0.25rem 0 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Images harmonisées */
.cms-markdown-content img {
    @apply max-w-full h-auto rounded-lg shadow-sm my-4;
}

/* Paragraphes avec marges améliorées */
.cms-markdown-content p {
    @apply mb-4 mt-0 first:mt-0 last:mb-0;
    font-size: 1rem;
    line-height: 1.6;
}

/* Paragraphes du texte enrichi */
.cms-block-content p {
    @apply mb-4 mt-0 first:mt-0 last:mb-0;
    font-size: 1rem;
    line-height: 1.6;
}

/* Amélioration des marges entre éléments de texte enrichi */
.cms-block-content > *:first-child {
    @apply mt-0;
}

.cms-block-content > *:last-child {
    @apply mb-0;
}

.cms-block-content ul, .cms-block-content ol {
    @apply mb-4 mt-0;
}

.cms-block-content li {
    @apply mb-1;
}

/* === AMÉLIORATION SPÉCIFIQUE RICHTEXT === */
/* Styles spécifiques pour le contenu RichText Wagtail */
.richtext {
    /* Variables CSS personnalisées pour correspondre au thème */
    --tw-prose-body: theme('colors.base-content');
    --tw-prose-headings: theme('colors.base-content');
    --tw-prose-lead: theme('colors.base-content / 0.8');
    --tw-prose-links: theme('colors.primary');
    --tw-prose-bold: theme('colors.base-content');
    --tw-prose-counters: theme('colors.base-content / 0.6');
    --tw-prose-bullets: theme('colors.base-content / 0.4');
    --tw-prose-hr: theme('colors.base-300');
    --tw-prose-quotes: theme('colors.base-content / 0.8');
    --tw-prose-quote-borders: theme('colors.base-300');
    --tw-prose-captions: theme('colors.base-content / 0.6');
    --tw-prose-code: theme('colors.base-content');
    --tw-prose-pre-code: theme('colors.base-content');
    --tw-prose-pre-bg: theme('colors.base-200');
    --tw-prose-th-borders: theme('colors.base-300');
    --tw-prose-td-borders: theme('colors.base-300');
}

/* Paragraphes dans RichText - espacement optimisé */
.richtext p {
    @apply mb-6 mt-0 first:mt-0 last:mb-0;
    font-size: 1rem;
    line-height: 1.7;
    text-align: justify;
    hyphens: auto;
}

/* Titres dans RichText - hiérarchie claire */
.richtext h1, .richtext h2, .richtext h3, .richtext h4, .richtext h5, .richtext h6 {
    @apply text-base-content font-bold mt-8 mb-4 first:mt-0;
}

.richtext h1 { @apply text-3xl mb-6; }
.richtext h2 { @apply text-2xl mb-5; margin-top: 0 !important; }
.richtext h3 { @apply text-xl mb-4; }
.richtext h4 { @apply text-lg mb-4; }
.richtext h5 { @apply text-base mb-3; }
.richtext h6 { @apply text-sm mb-3; }

/* Listes dans RichText - espacement et style améliorés */
.richtext ul, .richtext ol {
    @apply mb-6 mt-0 ml-8;
    line-height: 1.7;
}

.richtext ul {
    list-style-type: disc;
}

.richtext ol {
    list-style-type: decimal;
}

.richtext li {
    @apply mb-1;
    font-size: 1rem;
    line-height: 1.5;
}

.richtext li p {
    @apply mb-2 mt-0;
    margin-bottom: 0.5rem !important;
}

/* Listes imbriquées */
.richtext ul ul, .richtext ol ol, .richtext ul ol, .richtext ol ul {
    @apply mt-2 mb-2;
}

.richtext ul ul {
    list-style-type: circle;
}

.richtext ul ul ul {
    list-style-type: square;
}

/* Blockquotes dans RichText */
.richtext blockquote {
    @apply border-l-4 border-primary pl-6 pr-4 py-4 italic bg-base-100 my-6 text-base-content/90;
    font-size: 1rem;
    line-height: 1.7;
}

.richtext blockquote p {
    @apply mb-2 last:mb-0;
}

/* Liens dans RichText */
.richtext a {
    @apply text-primary hover:text-primary-focus underline;
    font-weight: 500;
    transition: color 0.2s ease;
}

/* Code dans RichText */
.richtext code {
    @apply bg-base-200 text-base-content px-2 py-1 rounded text-sm font-mono;
}

.richtext pre {
    @apply bg-base-200 text-base-content p-4 rounded-lg overflow-x-auto my-4;
}

.richtext pre code {
    @apply bg-transparent p-0;
}

/* Images dans RichText */
.richtext img {
    @apply max-w-full h-auto rounded-lg shadow-sm my-6;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Tables dans RichText */
.richtext table {
    @apply w-full my-6 border-collapse shadow-sm rounded-lg overflow-hidden;
}

.richtext table th {
    @apply bg-base-200 font-semibold text-base-content p-3 border-b border-base-300;
    font-size: 1rem;
}

.richtext table td {
    @apply text-base-content p-3 border-b border-base-300;
    font-size: 1rem;
    line-height: 1.6;
}

.richtext table tr:last-child td {
    @apply border-b-0;
}

/* Règles horizontales dans RichText */
.richtext hr {
    @apply border-t-2 border-base-300 my-8;
}

/* Amélioration de la lisibilité sur mobile */
@media (max-width: 768px) {
    .richtext p {
        font-size: 1rem;
        line-height: 1.6;
        text-align: left;
    }
    
    .richtext li {
        font-size: 1rem;
        line-height: 1.6;
    }
    
    .richtext blockquote {
        @apply pl-4 pr-2 py-3;
        font-size: 1rem;
    }
}

/* Suppression margin-top pour TOUS les titres h2 - règle très forte */
h2, 
.cms-block-title,
.richtext h2,
.cms-block-content h2,
.cms-markdown-content h2,
div h2,
section h2,
article h2,
main h2,
.prose h2 {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
    -webkit-margin-before: 0 !important;
}

/* Exception: h2 après un paragraphe dans les blocs CMS */
.cms-block p + h2,
.cms-block-content p + h2,
.richtext p + h2 {
    margin-top: 0.5rem !important;
}

/* Règle CSS universelle pour forcer l'absence de margin-top sur h2 */
* h2 {
    margin-top: 0 !important;
}

/* Règle nucléaire pour tous les h2 */
h2[class*=""], h2 {
    margin-top: 0 !important;
}

/* Titres dans les cartes - maintenant h3 */
.card h3, .card .card-title {
    margin-top: 0 !important;
    margin-bottom: 0.25rem !important;
}

/* Contenu des cartes - même taille que le texte enrichi */
.card .cms-block-content {
    @apply prose prose-slate max-w-none;
    font-size: 1rem;
    line-height: 1.6;
}

.card .cms-block-content p {
    @apply mb-6 mt-0;
    font-size: 1rem;
    line-height: 1.7;
}

/* Listes dans les cartes - petits cercles et compactes */
.card .cms-block-content ul {
    @apply mb-3 mt-0 ml-4;
    list-style-type: "- ";
    padding-left: 1rem;
}

.card .cms-block-content ol {
    @apply mb-3 mt-0 ml-4;
    list-style-type: decimal;
}

.card .cms-block-content li {
    @apply mb-1;
    font-size: 1rem;
    line-height: 1.5;
}

/* === ÉGALISATION HAUTEUR CARDS DANS COLONNES === */
/* Faire que les colonnes et les cards aient la même hauteur avec CSS Grid */
.columns-block {
    align-items: stretch !important;
}

.columns-block .column-block {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.columns-block .column-block .card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.columns-block .column-block .card .card-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.columns-block .column-block .card .cms-block-content {
    flex: 1 !important;
}

.columns-block .column-block .card .card-actions {
    margin-top: auto !important;
}

/* Égalisation pour toutes les grilles de cards */
.grid .card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.grid .card .card-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.grid .card .cms-block-content {
    flex: 1 !important;
}

.grid .card .card-actions {
    margin-top: auto !important;
}

/* Markers des listes dans les cards - petits cercles */
.card .cms-block-content ul li::marker {
    content: "•";
    font-size: 0.8em;
    color: currentColor;
}

.card .cms-block-content ol li::marker {
    font-size: 0.9em;
    color: currentColor;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .cms-block-title {
        @apply text-xl mb-4;
    }
    
    .cms-block-subtitle {
        @apply text-base mb-3;
    }
}