/* Variables harmonisées avec le système principal */
:root {
    /* Mapping vers les variables du système principal */
    --primary-color: var(--text-primary, #2c3e50);
    --secondary-color: var(--primary, #3498db);
    --background-color: var(--bg-primary, #f5f6fa);
    --card-background: var(--bg-secondary, #ffffff);
    --text-color: var(--text-primary, #2c3e50);
    --border-radius: var(--radius-md, 8px);
    --spacing: var(--space-md, 1.5rem);
    --accent-color: var(--danger, #e74c3c);
    --success-color: var(--success, #2ecc71);
    --warning-color: var(--warning, #f1c40f);
    --transition-speed: 0.3s;
    --font-size-h1: var(--font-3xl, 2.5rem);
    --font-size-h2: var(--font-2xl, 2rem); 
    --font-size-h3: var(--font-xl, 1.75rem);
    --font-size-base: var(--font-base, 1rem);
    --font-size-small: var(--font-sm, 0.875rem);
}

/* Mode sombre harmonisé avec le système principal */
[data-theme="dark"] {
    /* Variables harmonisées avec le système principal */
    --primary-color: var(--text-primary, #e5e7eb);
    --secondary-color: var(--primary, #3b82f6);
    --background-color: var(--bg-primary, #0f172a);
    --card-background: var(--bg-secondary, #111827);
    --text-color: var(--text-primary, #e5e7eb);
    --accent-color: var(--danger, #ef4444);
    --success-color: var(--success, #22c55e);
    --warning-color: var(--warning, #f59e0b);
    
    /* Mode sombre pour meta-info */
    .meta-info > div {
        background: var(--card-background) !important;
        color: var(--text-color) !important;
    }
    
    .meta-info__title {
        color: var(--primary-color) !important;
    }
    
    /* Mode sombre pour completion indicators */
    .completion-quick {
        background: linear-gradient(135deg, #1b5e20, #2e7d32) !important;
        color: #c8e6c9 !important;
    }
    
    .completion-normal {
        background: linear-gradient(135deg, #0d47a1, #1565c0) !important;
        color: #bbdefb !important;
    }
    
    .completion-medium {
        background: linear-gradient(135deg, #e65100, #ef6c00) !important;
        color: #ffe0b2 !important;
    }
    
    .completion-long {
        background: linear-gradient(135deg, #4a148c, #6a1b9a) !important;
        color: #e1bee7 !important;
    }
    
    /* Mode sombre pour info-flex */
    .info-flex__card {
        background: var(--card-background) !important;
        color: var(--text-color) !important;
    }
    
    .info-flex__title {
        color: var(--primary-color) !important;
    }
    
    .info-flex__text {
        color: var(--text-color) !important;
        opacity: 0.8;
    }
    
    /* Correction des titres sur fonds clairs en mode sombre */
    .steps__section-title {
        color: #2c3e50 !important;
    }
    
    .accordions__title {
        color: #2c3e50 !important;
    }
    
    /* Titres dans les accordéons society/formalist avec fonds clairs */
    .accordion__item--society .accordion__trigger h2,
    .accordion__item--society .accordion__trigger h3,
    .accordion__item--society .accordion__content h3,
    .accordion__item--society .accordion__content h4,
    .accordion__item--society .accordion__trigger .meta-info__title,
    .accordion__item--society .accordion__trigger .accordion__title {
        color: #1565c0 !important;
    }
    
    .accordion__item--formalist .accordion__trigger h2,
    .accordion__item--formalist .accordion__trigger h3,
    .accordion__item--formalist .accordion__content h3,
    .accordion__item--formalist .accordion__content h4,
    .accordion__item--formalist .accordion__trigger .meta-info__title,
    .accordion__item--formalist .accordion__trigger .accordion__title {
        color: #2e7d32 !important;
    }
    
    /* Navigation Menu - Corrections mode sombre */
    .navigation-menu {
        background: var(--card-background) !important;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .navigation-menu__title {
        color: var(--primary-color) !important;
    }
    
    .navigation-menu__features-item {
        color: var(--text-color) !important;
    }
    
    .navigation-menu__text {
        color: var(--text-color) !important;
    }
    
    .navigation-menu__link {
        background: var(--background-color) !important;
        color: var(--text-color) !important;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .navigation-menu__link:hover {
        background: var(--secondary-color) !important;
        color: white !important;
    }
}

/* Styles spécifiques mode sombre pour les formalités */

    [data-theme="dark"] .meta-info > div {
    background: var(--card-background) !important;
    color: var(--text-color) !important;
}

    [data-theme="dark"] .meta-info__title {
    color: var(--primary-color) !important;
}

    [data-theme="dark"] .completion-quick {
    background: linear-gradient(135deg, #1b5e20, #2e7d32) !important;
    color: #c8e6c9 !important;
}

    [data-theme="dark"] .completion-normal {
    background: linear-gradient(135deg, #0d47a1, #1565c0) !important;
    color: #bbdefb !important;
}

    [data-theme="dark"] .completion-medium {
    background: linear-gradient(135deg, #e65100, #ef6c00) !important;
    color: #ffe0b2 !important;
}

    [data-theme="dark"] .completion-long {
    background: linear-gradient(135deg, #4a148c, #6a1b9a) !important;
    color: #e1bee7 !important;
}

    [data-theme="dark"] .info-flex__card {
    background: var(--card-background) !important;
    color: var(--text-color) !important;
}

    [data-theme="dark"] .info-flex__title {
    color: var(--primary-color) !important;
}

    [data-theme="dark"] .info-flex__text {
    color: var(--text-color) !important;
    opacity: 0.8;
}

    [data-theme="dark"] .steps__section-title {
    color: #2c3e50 !important;
}

    [data-theme="dark"] .accordions__title {
    color: #2c3e50 !important;
}

    [data-theme="dark"] .accordion__item--society .accordion__trigger h2,
    [data-theme="dark"] .accordion__item--society .accordion__trigger h3,
    [data-theme="dark"] .accordion__item--society .accordion__content h3,
    [data-theme="dark"] .accordion__item--society .accordion__content h4,
    [data-theme="dark"] .accordion__item--society .accordion__trigger .meta-info__title,
    [data-theme="dark"] .accordion__item--society .accordion__trigger .accordion__title {
    color: #1565c0 !important;
}

    [data-theme="dark"] .accordion__item--formalist .accordion__trigger h2,
    [data-theme="dark"] .accordion__item--formalist .accordion__trigger h3,
    [data-theme="dark"] .accordion__item--formalist .accordion__content h3,
    [data-theme="dark"] .accordion__item--formalist .accordion__content h4,
    [data-theme="dark"] .accordion__item--formalist .accordion__trigger .meta-info__title,
    [data-theme="dark"] .accordion__item--formalist .accordion__trigger .accordion__title {
    color: #2e7d32 !important;
}

/* Navigation Menu - Mode sombre optimisé */
.navigation-menu {
    background: var(--card-background);
    padding: var(--spacing);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: var(--spacing);
}

.navigation-menu__title {
    color: var(--primary-color);
    font-size: var(--font-size-h3);
    margin-bottom: var(--spacing);
    font-weight: 600;
}

.navigation-menu__features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 var(--spacing) 0 !important;
}

.navigation-menu__features-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    color: var(--text-color);
}

.navigation-menu__links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.navigation-menu__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--background-color);
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--text-color);
    transition: all var(--transition-speed) ease;
    border: 1px solid transparent;
}

.navigation-menu__link:hover {
    background: var(--secondary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.navigation-menu__link .material-icons {
    color: var(--secondary-color);
    transition: color var(--transition-speed) ease;
}

.navigation-menu__link:hover .material-icons {
    color: white;
}

.navigation-menu__text {
    font-weight: 500;
    font-size: var(--font-size-base);
}

/* Navigation Menu - Support dark-mode class */
    [data-theme="dark"] .navigation-menu {
    background: var(--card-background) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

    [data-theme="dark"] .navigation-menu__title {
    color: var(--primary-color) !important;
}

    [data-theme="dark"] .navigation-menu__features-item {
    color: var(--text-color) !important;
}

    [data-theme="dark"] .navigation-menu__text {
    color: var(--text-color) !important;
}

    [data-theme="dark"] .navigation-menu__link {
    background: var(--background-color) !important;
    color: var(--text-color) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

    [data-theme="dark"] .navigation-menu__link:hover {
    background: var(--secondary-color) !important;
    color: white !important;
}



/* 
   Note: Styles de header, nav, dropdown et footer supprimés
   car ils sont maintenant gérés par /ui/styles/styles.css
   pour éviter les conflits et doublons.
*/

/* 
   Note: Styles #logo-container supprimés car maintenant gérés
   par le nouveau système header__brand dans styles.css
*/

.menu-header {
    padding: var(--spacing);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 768px) {
    .page-content-header {
        padding: calc(var(--spacing) * 0.75);
    }

    #logo-container {
        padding: 0 calc(var(--spacing) * 0.5);
    }

    #logo-container p {
        font-size: var(--font-size-small);
    }
}

body,
.fv-app {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    min-width: 320px;
    font-size: var(--font-size-base);
}



/* Header de contenu de page (différent du header de navigation sticky) */
.page-content-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: var(--spacing);
    padding: var(--spacing) 0;
    /* Pas de position sticky - c'est juste le header de contenu */
}

.page-content-header__title {
    color: var(--primary-color);
    font-size: var(--font-size-h1);
    margin: 0 0 0.5rem 0;
    font-weight: 700;
    line-height: 1.2;
}

.page-content-header__badge {
    margin-top: 0.5rem;
}

.badge {
    display: inline-block;
    background-color: var(--secondary-color);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    font-size: var(--font-size-small);
    margin-top: 1rem;
}

.info-grid, .doc-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .info-grid, .doc-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    
    :root {
        --font-size-h1: 3rem;
        --font-size-h2: 2.5rem;
        --font-size-h3: 2rem;
    }
}

@media (max-width: 767px) {
    :root {
        --font-size-h1: 2rem;
        --font-size-h2: 1.75rem;
        --font-size-h3: 1.5rem;
    }
}

.info-card, .doc-card {
    background-color: var(--card-background);
    padding: var(--spacing);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.tips-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
}

@media (min-width: 768px) {
    .tips-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

.tip {
    background-color: var(--card-background);
    padding: var(--spacing);
    border-radius: var(--border-radius);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

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

h1 {
    color: var(--primary-color);
    margin-top: 0;
    font-size: var(--font-size-h1);
}

h2 {
    color: var(--primary-color);
    margin-top: 0;
    font-size: var(--font-size-h2);
}

h3 {
    color: var(--primary-color);
    margin-top: 0;
    font-size: var(--font-size-h3);
}

/* Sélecteur spécifique aux contenus de formalités uniquement */
.formalite-content ul,
.meta-info ul,
.accordion ul,
.issues ul,
.documents__list,
.steps__list {
    list-style-type: none;
    padding-left: 0;
}

/* Sélecteurs spécifiques aux contenus de formalités */
.formalite-content li,
.info-grid li,
.doc-grid li,
.tips-container li,
.accordion li,
.technique-section li,
.legal-section li {
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
}

/* Pseudo-éléments spécifiques aux contenus de formalités */
.formalite-content li::before,
.info-grid li::before,
.doc-grid li::before,
.tips-container li::before,
.accordion li::before,
.technique-section li::before,
.legal-section li::before {
    color: var(--secondary-color);
    position: absolute;
    margin : 0;
    padding : 0;
    left: 0;
}

/* Nouvelles animations et effets */
.info-card, .doc-card, .tip {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.info-card::before, .doc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--secondary-color);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.info-card:hover::before, .doc-card:hover::before {
    transform: scaleY(1);
}

/* Animation de progression */
.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    background: var(--secondary-color);
    z-index: 1000;
    width: 0%;
    animation: progressLoad 1.5s ease-out forwards;
}

@keyframes progressLoad {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

/* Pour s'assurer que l'animation commence au chargement */
.progress-bar {
    animation: progressLoad 1.5s ease-out forwards;
}

/* Effet de focus */
.focused {
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
}

/* Animation pour les listes de formalités uniquement */
.formalite-content li,
.meta-info li,
.accordion li,
.issues li,
.documents__list li,
.steps__list li {
    transform: translateX(0);
    transition: transform 0.3s ease;
}

.formalite-content li:hover,
.meta-info li:hover,
.accordion li:hover,
.issues li:hover,
.documents__list li:hover,
.steps__list li:hover {
    transform: translateX(10px);
    color: var(--secondary-color);
}

/* Effet de pulse pour les badges */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.badge {
    animation: pulse 2s infinite;
}

/* Styles pour meta-info */
.meta-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.meta-info > div {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    min-height: 180px;
    display: flex;
    flex-direction: column;
}

.meta-info__title {
    margin-bottom: 15px;
    font-size: 1.5rem;
    color: #333;
}

.processing-validator {
    font-size: var(--font-size-small);
    color: #666;
    margin-top: 4px;
}

.difficulty-rating__stars {
    display: flex;
    gap: 0.25rem;
    margin: 1rem 0;
}

/* Styles pour issues */
.issues {
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .issues {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

.issues__bugs, .issues__rejections {
    background-color: var(--card-background);
    padding: var(--spacing);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Styles pour feedback */
.feedback {
    margin-top: 50px;
    padding: 30px;
    background: #f8f9fa;
    border-radius: 8px;
}

.feedback__report {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.feedback__title {
    color: #2c3e50;
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.feedback__text {
    color: #596677;
    line-height: 1.6;
    margin-bottom: 20px;
}

.feedback__button {
    display: inline-block;
    padding: 12px 24px;
    background: #3498db;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.3s ease;
}

.feedback__button:hover {
    background: #2980b9;
}

/* Styles pour accordéons */
.accordions {
    position: relative;
    margin-bottom: 2rem;
}

.accordion {
    margin-bottom: 2rem;
}

.accordion__item {
    border-radius: 0 50px 0 0;
    background-color: var(--card-background);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.accordion__trigger {
    width: 100%;
    padding: var(--spacing);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    border-radius: 0 50px 0 0;
}

.accordion__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    padding: 0 var(--spacing);
}

.accordion__content.active {
    display: block;
    transition: max-height 0.5s ease-in-out;
}

/* Style uniforme pour les sections internes */
.accordion__section {
    flex: 1;
    margin-bottom: var(--spacing);
}

.accordion__section:last-child {
    margin-bottom: 0;
}

/* Animation de l'icône */
.accordion__icon {
    transition: transform 0.3s ease;
}

.accordion__trigger[aria-expanded="true"] .accordion__icon {
    transform: rotate(45deg);
}

/* Variantes de style pour différents types d'accordéons */
.accordion__item--society .accordion__trigger,
.accordion__item--society .accordion__content {
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
}

.accordion__item--formalist .accordion__trigger,
.accordion__item--formalist .accordion__content {
    background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
}

/* Correction du padding pour les accordéons dirigeant et formaliste - Plus compact */
.accordion__item--society .accordion__content.active,
.accordion__item--formalist .accordion__content.active {
    padding: calc(var(--spacing) * 0.4) var(--spacing) calc(var(--spacing) * 0.6) var(--spacing);
}

/* 
   Note: Style .footer supprimé car conflit avec le footer du système principal
*/

.difficulty-bar-container {
    width: 100%;
    height: 20px;
    background-color: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
    position: relative;
}

.difficulty-bar {
    height: 100%;
    background: linear-gradient(to right, 
        #4CAF50 0%, 
        #FFA726 50%, 
        #F44336 100%
    );
    transition: width 2s ease-out;
    width: 0;
    position: relative;
}

.difficulty-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    flex-wrap: wrap;
}

.difficulty-level {
    display: flex;
    align-items: center;
    gap: 8px;
}

.difficulty-score {
    color: #666;
}

/* Animation au chargement */
@keyframes slideIn {
    from {
        width: 0;
    }
    to {
        width: var(--final-width);
    }
}

.difficulty-bar {
    animation: slideIn 1s ease-out forwards;
}

/* Styles pour le temps de réalisation */
.time-indicator {
    padding: 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    flex-wrap: wrap;
}

.time-emoji {
    font-size: 24px;
}

.time-value {
    font-weight: bold;
    font-size: var(--font-size-base);
}

.time-message {
    font-size: var(--font-size-small);
    opacity: 0.8;
}

/* Variantes de couleur selon le temps */
.time-quick {
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
    color: #1565C0;
}

.time-normal {
    background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
    color: #2E7D32;
}

.time-medium {
    background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
    color: #EF6C00;
}

.time-long {
    background: linear-gradient(135deg, #FFEBEE, #FFCDD2);
    color: #C62828;
}

/* Animation au survol */
.time-indicator:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.processing-time {
    padding: 15px;
    border-radius: 8px;
    background: linear-gradient(135deg, #E8EAF6, #C5CAE9);
    color: #3949AB;
}

.processing-time .time-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
}

.processing-time .time-emoji {
    font-size: 24px;
}

.processing-time__text {
    font-weight: bold;
    font-size: var(--font-size-base);
}

/* Styles pour le délai de traitement greffe */
.processing-indicator {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.processing-info {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.processing-emoji {
    font-size: 28px;
}

.processing-details {
    display: flex;
    flex-direction: column;
}

.processing-duration {
    font-size: var(--font-size-base);
    font-weight: bold;
}

.processing-label {
    font-size: var(--font-size-small);
    opacity: 0.8;
}

/* Variantes pour le délai de traitement */
.processing-fast {
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
    color: #1565C0;
}

.processing-normal {
    background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
    color: #2E7D32;
}

.processing-medium {
    background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
    color: #EF6C00;
}

.processing-slow {
    background: linear-gradient(135deg, #FFEBEE, #FFCDD2);
    color: #C62828;
}

/* Styles pour le temps de préparation */
.completion-indicator {
    padding: 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.completion-emoji {
    font-size: 28px;
}

.completion-details {
    display: flex;
    flex-direction: column;
}

.completion-time {
    font-size: var(--font-size-base);
    font-weight: bold;
}

.completion-message {
    font-size: var(--font-size-base);
    font-weight: 500;
}

.completion-label {
    font-size: var(--font-size-small);
    opacity: 0.8;
}

/* Variantes pour le temps de préparation */
.completion-quick {
    background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
    color: #2E7D32;
}

.completion-normal {
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
    color: #1565C0;
}

.completion-medium {
    background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
    color: #EF6C00;
}

.completion-long {
    background: linear-gradient(135deg, #F3E5F5, #E1BEE7);
    color: #6A1B9A;
}

.info-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
}

.info-flex__card {
    flex: 1;
    min-width: 300px; /* Force le passage à la ligne sur petits écrans */
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.info-flex__title {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 15px;
}

.info-flex__text {
    color: #666;
    line-height: 1.5;
}

/* Pour assurer que les cartes s'alignent correctement quand elles passent à la ligne */
@media (max-width: 968px) {
    .info-flex__card {
        flex-basis: calc(50% - 20px);
    }
}

@media (max-width: 668px) {
    .info-flex__card {
        flex-basis: 100%;
    }
}

/* Pour que le contenu s'étende correctement dans l'espace disponible */
#difficultyRating,
#processingTime,
#completionTime {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.accordions__header {
    margin-bottom: 30px;
    text-align: center;
}

.accordions__title {
    font-size: var(--font-size-h1);
    color: var(--primary-color);
    margin-bottom: 15px;
    font-weight: 700;
}

.accordions__subtitle {
    color: var(--text-color);
    font-size: var(--font-size-small);
}

/* Ajouter un peu d'espace avant la section */
.accordions {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

/* Ajouter ces styles pour la section technique */
.technique-section {
    margin-top: var(--spacing);
    padding: var(--spacing);
    background-color: var(--background-color);
    border-radius: var(--border-radius);
}

.technique-section__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing);
}

.technique-section__title {
    font-size: var(--font-size-h2);
    color: var(--primary-color);
    margin-bottom: calc(var(--spacing) * 1.5);
    text-align: center;
}

.technique-section__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: calc(var(--spacing) * 1.5);
}

.technique-section__item {
    background-color: var(--card-background);
    padding: calc(var(--spacing) * 1.2);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.technique-section__subtitle {
    font-size: var(--font-size-h3);
    color: var(--secondary-color);
    margin-bottom: var(--spacing);
    padding-bottom: calc(var(--spacing) / 2);
    border-bottom: 2px solid var(--background-color);
}

.technique-section__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.technique-section__list li {
    padding: calc(var(--spacing) / 2) 0;
    padding-left: calc(var(--spacing) * 1.5);
    border-bottom: 1px solid var(--background-color);
    position: relative;
    line-height: 1.6;
}

.technique-section__list li::before {
    content: "•";
    color: var(--secondary-color);
    position: absolute;
    left: var(--spacing);
    top: calc(var(--spacing) / 2);
}

.technique-section__list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Media queries pour la responsivité */
@media (max-width: 768px) {
    .technique-section__grid {
        grid-template-columns: 1fr;
    }
    
    .technique-section__item {
        margin-bottom: var(--spacing);
    }

    .technique-section__container {
        padding: calc(var(--spacing) / 2);
    }
}

/* Modification des styles des accordéons */
.accordion__item--society .accordion__trigger,
.accordion__item--society .accordion__content {
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);  /* Bleu clair */
}

.accordion__item--formalist .accordion__trigger,
.accordion__item--formalist .accordion__content {
    background: linear-gradient(135deg, #E8F5E9, #C8E6C9);  /* Vert clair */
}

.accordion__trigger {
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    padding: var(--spacing);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--card-background);
}

.accordion__icon {
    transition: transform 0.3s ease;
}

.accordion__trigger[aria-expanded="true"] .accordion__icon {
    transform: rotate(45deg);
}

/* Ajustement des titres pour meilleure lisibilité */
.documents__title,
.vigilance__title {
    color: var(--primary-color);
    margin-bottom: var(--spacing);
}

/* Style pour les sections à l'intérieur */
.accordion__section {
    flex: 1;
    margin-bottom: 0;
}

/* Media query pour le responsive */
@media (max-width: 768px) {
    .accordion__content {
        flex-direction: column;
    }
    
    .accordion__section {
        margin-bottom: var(--spacing);
    }
    
    .accordion__section:last-child {
        margin-bottom: 0;
    }
}

.legal-section {
    margin-top: var(--spacing);
    padding: var(--spacing);
    background-color: var(--background-color);
    border-radius: var(--border-radius);
}

.legal-section__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing);
}

.legal-section__title {
    font-size: var(--font-size-h2);
    color: var(--primary-color);
    margin-bottom: calc(var(--spacing) * 1.5);
    text-align: center;
}

.legal-section__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: calc(var(--spacing) * 1.5);
}

.legal-section__item {
    background-color: var(--card-background);
    padding: calc(var(--spacing) * 1.2);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.legal-section__subtitle {
    font-size: var(--font-size-h3);
    color: var(--secondary-color);
    margin-bottom: var(--spacing);
    padding-bottom: calc(var(--spacing) / 2);
    border-bottom: 2px solid var(--background-color);
}

.legal-section__list {
    list-style: none;
    padding: 0;
}

.legal-section__list li {
    margin-bottom: var(--spacing);
    padding-bottom: var(--spacing);
    border-bottom: 1px solid var(--background-color);
}

.legal-section__list li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.specific-case {
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: var(--card-background);
    border-radius: 4px;
    transition: all 0.3s ease-in-out;
}

.specific-case h5 {
    color: #2196F3;
    margin-bottom: 0.5rem;
}

/* Styles pour les titres des documents dirigeant et formaliste */
#society-documents h4,
#formalist-documents h4 {
    color: #333;
    border-bottom: 2px solid #2196F3;
    padding-bottom: 0.5rem;
}

/* Premier h4 - "Pièces à produire dans tous les cas" */
#society-documents h4:first-child,
#formalist-documents h4:first-child {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Liste ul après le premier h4 */
#society-documents ul:first-of-type,
#formalist-documents ul:first-of-type {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

/* Second h4 - Celui qui contient le bouton "Sélectionner vos cas spécifiques" */
#society-documents h4:nth-child(3),
#formalist-documents h4:nth-child(3) {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    border-bottom: none;
    padding-bottom: 0;
}

.material-icons {
    vertical-align: middle;
    margin-right: 8px;
    font-size: 24px;
}

.processing-indicator .material-icons,
.completion-indicator .material-icons {
    font-size: 32px;
}

/* Ajuster l'alignement des icônes dans les indicateurs */
.processing-info .material-icons,
.completion-indicator .material-icons {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Animation des icônes au survol */
.material-icons {
    transition: transform 0.3s ease;
}

.material-icons:hover {
    transform: scale(1.1);
}

/* Styles uniformes pour les contenus des accordéons */
.accordion__content {
    background-color: var(--card-background);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    padding: 0 var(--spacing);
}

.accordion__content.active {
    display: block;
    transition: max-height 0.5s ease-in-out;
}

/* Style uniforme pour les titres dans les accordéons */
.accordion__section h3,
.documents__title,
.vigilance__title {
    color: var(--primary-color);
    font-size: var(--font-size-h3);
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--secondary-color);
}

/* Style uniforme pour les listes dans les accordéons */
.documents__list,
.vigilance__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.documents__list li,
.vigilance__list li {
    padding: 0.15rem 0;
    padding-left: 2rem;
    position: relative;
}

.documents__list li:last-child,
.vigilance__list li:last-child {
    border-bottom: none;
}

/* Style uniforme pour les puces des listes */
.documents__list li::before,
.vigilance__list li::before {
    font-family: 'Material Icons';
    content: "description";
    color: var(--secondary-color);
    position: absolute;
    left: 0.75rem;
    top: 0.15rem;
    font-size: 1rem;
}

/* Style spécifique pour les pièces particulières */
.documents__list li.specific::before {
    content: "assignment_late";
    color: var(--accent-color);
}

/* Style uniforme pour les listes dans les accordéons */
.documents__list li,
.vigilance__list li,
.specific-case li {
    padding: 0.15rem 0;
    padding-left: 2.5rem;
    position: relative;
    line-height: 1.5;
}

/* Style pour les pièces standard */
.documents__list li {
    background-color: var(--card-background);
    border-left: 4px solid var(--secondary-color);
}

/* Style pour les pièces spécifiques */
.specific-case li {
    background-color: var(--card-background);
    border-left: 4px solid var(--secondary-color);
    opacity: 0.6;
}

/* Suppression du style orange précédent */
.specific-case {
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: var(--card-background);
    border-radius: 4px;
}

/* Style pour les situations spécifiques */
.documents__list li[data-type="specific"]::before {
    content: "assignment_late";
    color: var(--accent-color);
}

/* Style pour les titres des cas spécifiques */
.specific-case h5 {
    display: flex;
    align-items: center;
    color: #666;
    margin: 0.5rem 0 0.25rem 0;
    font-size: 0.95rem;
}

.specific-case h5::before {
    font-family: 'Material Icons';
    content: "info";
    color: #999;
    margin-right: 0.5rem;
    font-size: 1.1rem;
}

/* Ajustement de l'espacement pour les listes dans les cas spécifiques */
.specific-case ul {
    margin-left: 1.5rem;
}

.specific-case li {
    padding: 0.15rem 0;
    color: #666;
}

/* Style pour la section des étapes */
.steps__list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.steps__list .step {
    background-color: var(--card-background);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-left: 4px solid var(--secondary-color);
    transition: transform 0.3s ease;
}

.steps__list .step:hover {
    transform: translateX(5px);
}

.steps__list .step h4 {
    color: var(--secondary-color);
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.steps__list .step h4::before {
    content: "arrow_forward";
    font-family: 'Material Icons';
    font-size: 1.2rem;
    color: var(--secondary-color);
}

.steps__list .step ul {
    margin: 0;
    padding: 0;
}

.steps__list .step ul li {
    padding: 0.5rem 0 0.5rem 1.5rem;
    position: relative;
    color: var(--text-color);
    font-size: var(--font-size-base);
    border: none;
    background: none;
    margin-bottom: 0.25rem;
}

.steps__list .step ul li::before {
    content: "check";
    font-family: 'Material Icons';
    color: var(--success-color);
    position: absolute;
    left: 0;
    font-size: 1rem;
}

.steps__list .step ul li:last-child {
    margin-bottom: 0;
}

/* Animation au survol des étapes */
.steps__list .step ul li:hover {
    color: var(--secondary-color);
    transform: translateX(5px);
}

/* Responsive */
@media (max-width: 768px) {
    .steps__list .step {
        padding: 1rem;
    }
    
    .steps__list .step h4 {
        font-size: 1rem;
    }
}

/* Style pour les icônes Material */
.documents__list li::before,
.vigilance__list li::before,
.specific-case li::before {
    font-family: 'Material Icons';
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
}

/* Style spécifique pour les li de formalités */
.formalite-content li,
.meta-info li,
.accordion li,
.issues li,
.documents__list li,
.steps__list li {
    margin-bottom: initial;
    padding-left: initial;
    position: initial;
}

/* Suppression des pseudo-éléments pour les li de formalités */
.formalite-content li::before,
.meta-info li::before,
.accordion li::before,
.issues li::before,
.documents__list li::before,
.steps__list li::before {
    content: none;
}

/* Surcharge pour nos listes spécifiques */
.documents__list li,
.vigilance__list li,
.specific-case li {
    padding: 0.15rem 0;
    padding-left: 2.5rem !important; /* Force la surcharge */
    position: relative;
    line-height: 1.5;
}

/* Surcharge pour les icônes de nos listes spécifiques */
.documents__list li::before,
.vigilance__list li::before,
.specific-case li::before {
    content: "description" !important; /* Force la surcharge */
    font-family: 'Material Icons';
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
}

/* Styles pour les étapes de formalité */
.steps__section {
    margin-bottom: 2rem;
}

.steps__section-title {
    color: var(--primary-color);
    font-size: 1.2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--secondary-color);
}

.steps__subsection {
    margin: 1.5rem 0;
    padding: 1rem;
    background: var(--card-background);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.steps__subsection-title {
    color: var(--secondary-color);
    font-size: 1.1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

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

.steps__checkpoint {
    padding: 0.5rem 0 0.5rem 2rem;
    position: relative;
}

.steps__checkpoint::before {
    content: "check_circle";
    font-family: 'Material Icons';
    color: var(--success-color);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.compatibility-list {
    margin-top: 0.5rem;
    padding-left: 0;
}

.compatibility-item {
    margin-bottom: 0.25rem;
}

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

/* Style spécifique pour les liens de compatibilité */
.compatibility-item a {
    color: var(--secondary-color);
    text-decoration: none;
    position: relative;
    padding-bottom: 2px;
    transition: color 0.3s ease;
}

.compatibility-item a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--secondary-color);
    transition: width 0.3s ease;
}

.compatibility-item a:hover {
    color: var(--primary-color);
}

.compatibility-item a:hover::after {
    width: 100%;
}

/* 1. Ajouter un breakpoint intermédiaire */
@media (max-width: 1024px) {
    :root {
        --spacing: 1rem;
        /* Ajuster l'espacement pour les écrans moyens */
    }
    
    /* Container géré par le système principal */
}

/* 2. Améliorer la grille sur tablette */
@media (min-width: 768px) and (max-width: 1024px) {
    .info-grid, .doc-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Passage à 2 colonnes au lieu de auto-fit */
    }
}

/* 3. Optimiser pour les très petits écrans */
@media (max-width: 480px) {
    :root {
        --font-size-h1: 1.75rem;
        --font-size-h2: 1.5rem;
        --font-size-h3: 1.25rem;
        --spacing: 0.75rem;
    }
    
    .info-card, .doc-card, .tip {
        padding: calc(var(--spacing) * 0.75);
    }
}

/* 4. Améliorer la lisibilité des tableaux */
@media (max-width: 768px) {
    .meta-info {
        grid-template-columns: 1fr;
        /* Passage en une seule colonne */
    }
    
    .time-indicator,
    .processing-indicator,
    .completion-indicator {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

.specific-cases-selector {
    margin-bottom: 1rem;
}

.button--specific-cases {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
}

.specific-case-checkbox {
    padding: 0.5rem;
    border-bottom: 1px solid #eee;
}

.selected-cases {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.selected-case-tag {
    background-color: #e0e0e0;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.9rem;
}

.select-specific-cases {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--secondary-color), #2980b9);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

.select-specific-cases::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent 60%
    );
    transform: rotate(45deg);
    animation: shine-effect 3s infinite;
}

@keyframes shine-effect {
    0% {
        left: -50%;
    }
    100% {
        left: 100%;
    }
}

.select-specific-cases:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.select-specific-cases:active {
    transform: translateY(0);
}

.select-specific-cases .material-icons {
    transition: transform 0.3s ease;
}

.select-specific-cases:hover .material-icons {
    transform: rotate(90deg);
}

/* Style pour l'état désactivé */
.select-specific-cases:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    background: linear-gradient(135deg, #a0a0a0, #808080);
}

/* Media query pour les appareils mobiles */
@media (max-width: 768px) {
    .select-specific-cases {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        font-size: 1rem;
    }
}

/* Contrôles d'export PDF - centrage et style harmonisé */
.formalite-content .export-controls {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 0 0 var(--spacing) 0;
    flex-wrap: wrap;
}

.formalite-content .export-controls__options {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Style checkboxes export */
.formalite-content .export-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: var(--card-background);
    border: 1px solid #e5e7eb;
    border-radius: 999px;
}
.formalite-content .export-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--secondary-color);
}
.formalite-content .export-controls__hint {
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    color: #6b7280;
}

.formalite-content .export-controls .button--add-formalite {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.8rem;
    background: linear-gradient(135deg, var(--secondary-color), #2980b9);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.formalite-content .export-controls .button--add-formalite:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

@media print {
    /* Masquer les icônes et les contrôles d'export pendant l'impression */
    .material-icons,
    .export-controls { display: none !important; }
}

/* Modale d'options d'impression (BEM) */
.print-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; }
.print-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.print-modal__content { position: relative; background: var(--card-background); border-radius: 12px; width: min(720px, 96vw); max-height: 90vh; overflow: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.print-modal__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #eee; }
.print-modal__title { margin: 0; font-size: 1.1rem; color: var(--primary-color); }
.print-modal__close { background: none; border: 1px solid #e5e7eb; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; }
.print-modal__body { padding: 16px 20px; display: grid; gap: 16px; }
.print-modal__section { background: var(--background-color); border-radius: 8px; padding: 12px; }
.print-modal__subtitle { margin: 0 0 8px 0; font-size: .95rem; color: var(--text-color); }
.print-modal__footer { padding: 12px 20px; border-top: 1px solid #eee; display: flex; justify-content: flex-end; gap: 8px; }
.print-modal__footer .button--add-formalite { background: linear-gradient(135deg, var(--secondary-color), #2980b9); color: #fff; border: none; border-radius: 10px; padding: 10px 16px; }
.print-modal__footer .button--add-formalite:hover { transform: translateY(-1px); }
.export-checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--secondary-color); }

/* Titre imprimable dans le corps (BEM) */
.print-title {
    margin: calc(var(--spacing) * 1) 0;
    text-align: center;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--secondary-color);
}

.print-title__text {
    margin: 0;
    color: var(--primary-color);
    font-size: var(--font-size-h1);
    font-weight: 700;
}

.print-title__meta {
    margin-top: 0.25rem;
    color: var(--text-color);
    font-size: var(--font-size-small);
    opacity: 0.8;
}

[data-theme="dark"] .print-title {
    border-bottom-color: var(--secondary-color);
}

[data-theme="dark"] .print-title__text {
    color: var(--primary-color);
}

[data-theme="dark"] .print-title__meta {
    color: var(--text-color);
    opacity: 0.85;
}

/* Styles pour la modale de sélection des cas spécifiques */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    border-radius: 12px;
    max-width: 1600px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.formalite-content .modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.formalite-content .modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: #333;
}

.formalite-content .modal-body {
    padding: 24px;
    overflow-y: auto;
}

.specific-cases-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.specific-case-option {
    display: flex;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    background: #f8f9fa;
    transition: all 0.2s ease;
    cursor: pointer;
}

.specific-case-option:hover {
    background: #e9ecef;
}

.checkbox-wrapper {
    position: relative;
    width: 24px;
    height: 24px;
    margin-right: 16px;
}

.checkbox-wrapper input[type="checkbox"] {
    opacity: 0;
    position: absolute;
}

.checkbox-custom {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    border: 2px solid #cbd5e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.checkbox-wrapper input[type="checkbox"]:checked + .checkbox-custom {
    background: #2196F3;
    border-color: #2196F3;
}

.checkbox-wrapper input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '';
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
}

.option-content {
    flex: 1;
}

.option-title {
    display: block;
    font-weight: 500;
    color: #2d3748;
    margin-bottom: 4px;
}

.option-count {
    font-size: 0.875rem;
    color: #718096;
}

.formalite-content .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Styles génériques pour les modales injectées en dehors de .formalite-content */
.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: #333;
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.button-primary,
.button-secondary {
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.button-primary {
    background: #2196F3;
    color: white;
}

.button-primary:hover {
    background: #1976D2;
}

.button-secondary {
    background: #e9ecef;
    color: #495057;
}

.button-secondary:hover {
    background: #dee2e6;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #718096;
    padding: 4px;
    border-radius: 4px;
}

.modal-close:hover {
    background: #f8f9fa;
}

/* Styles pour les cas spécifiques sélectionnés */
.specific-cases-container {
    margin-top: 16px;
}

/* Responsive: modale plein écran sur petits écrans */
@media (max-width: 768px) {
    .modal-content {
        width: 100%;
        max-width: none;
        height: 100vh;
        border-radius: 0;
    }
    .modal-body {
        padding: 16px;
    }
}

.specific-case {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    border-left: 4px solid #2196F3;
    transition: all 0.3s ease-in-out;
}

.specific-case h5 {
    margin: 0 0 12px 0;
    color: #2d3748;
    font-size: 1rem;
}

.specific-case ul {
    margin: 0;
    padding-left: 20px;
}

.specific-case li {
    color: #4a5568;
    margin-bottom: 8px;
}
.specific-case-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.remove-case {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #718096;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.remove-case:hover {
    background: #e2e8f0;
    color: #e53e3e;
}

.remove-case .material-icons {
    font-size: 18px;
}

.no-cases {
    color: #718096;
    text-align: center;
    padding: 16px;
    font-style: italic;
}

/* Animation pour l'ajout/suppression */
.specific-case {
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/*FIN DES STYLES POUR LA MODALE DE SÉLECTION DES CAS SPÉCIFIQUES*/

/* Assurer une transition fluide */
.specific-case {
    transition: all 0.3s ease-in-out;
}

/* S'assurer que le contenu est visible pendant le calcul de la hauteur */
.accordion__content.calculating {
    display: block !important;
    visibility: hidden;
    position: absolute;
    z-index: -1;
}

/* Animation pour l'ajout/suppression des cas spécifiques */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.specific-case {
    animation: slideIn 0.3s ease;
}

.difficulty-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: shine 1.5s ease-in-out;
    animation-delay: 2s;
}

@keyframes shine {
    0% {
        left: -100%;
    }
    100% {
        left: 200%;
    }
}

/* Styles pour l'accordéon */
.accordion__content {
    background-color: var(--card-background);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    padding: 0 var(--spacing);
}

.accordion__content.active {
    display: block;
    transition: max-height 0.5s ease-in-out;
}

/* Style pour les cas spécifiques */
.specific-case {
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: var(--card-background);
    border-radius: 4px;
    transition: all 0.3s ease-in-out;
}

/* S'assurer que le contenu est visible pendant le calcul de la hauteur */
.accordion__content.calculating {
    display: block !important;
    visibility: hidden;
    position: absolute;
    z-index: -1;
}

/* Animation pour l'ajout/suppression */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.specific-case {
    animation: slideIn 0.3s ease;
}

/* Assurer une transition fluide pour tout le contenu */
.accordion__content * {
    transition: all 0.3s ease-in-out;
}

/* Optimiser la gestion du overflow */
.accordion__content.active {
    overflow-y: auto;
    padding: var(--spacing);
}

.declaration-support li {
    text-align: left !important; /* Aligne le texte à gauche */
    padding-left: 0 !important;  /* Supprime le padding gauche si nécessaire */
}

.compatibility-item {
    text-align: left !important; /* Aligne le texte à gauche */
    padding-left: 0 !important;  /* Supprime le padding gauche si nécessaire */
    margin-left: 0 !important;
    font-size: 0.77rem !important;
}

@media print {
    /* Reset de base */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Forcer l'affichage du titre imprimable en tête du contenu */
    .print-title {
        margin-top: 0;
        page-break-after: avoid;
    }

    .print-title__text { font-size: 1.9rem; }

    .page-content-header {
        display: none !important;
    }

    body {
        padding: 2cm;
        margin: 0;
        width: 210mm; /* Format A4 */
        background: white;
    }

    /* Container principal pour impression */
    .container {
        width: 100%;
        max-width: 180mm; /* Marge de sécurité */
        margin: 0 auto;
        padding: 0;
    }

    /* Gestion des accordéons */
    .accordion__content {
        display: none !important; /* Cache tous les accordéons par défaut */
    }

    /* Affiche uniquement les accordéons avec style.maxHeight défini et différent de 0 */
    .accordion__content[style*="max-height"]:not([style*="max-height: 0"]) {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        page-break-inside: avoid;
        margin: 1cm auto;
        width: 90%;
    }

    /* Ajustement des marges et espacements */
    .meta-info,
    .accordions,
    .issues {
        margin: 1cm 0;
        width: 100%;
        page-break-inside: avoid;
    }

    /* Listes et contenus */
    .documents__list,
    .steps__list,
    .issues__list {
        padding-left: 2cm; /* Augmenté pour éviter le collage à droite */
        padding-right: 2cm; /* Ajouté pour équilibrer */
        margin: 0.5cm auto;
        width: 90%;
        padding-left: 1cm;
        padding-right: 1cm;
    }

    li {
        page-break-inside: avoid;
        margin-bottom: 0.3cm;
        text-align: left;
        width: 100%;
    }

    /* Masquer les éléments non nécessaires */
    .accordion__trigger,
    .select-specific-cases,
    .feedback,
    #feedback-placeholder {
        display: none !important;
    }

    /* Ajustements supplémentaires pour l'alignement */
    .accordion__content > * {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 2cm;
        padding-right: 2cm;
    }

    /* Ajout des règles pour le centrage des divs dans les accordéons */
    .accordion__content.active {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        page-break-inside: avoid;
        margin: 1cm auto;
        width: 90%;
    }

    /* Centrage des sections dans l'accordéon */
    .accordion__section {
        width: 90%;
        margin: 0 auto;
        padding: 0;
    }

    /* Ajustement des listes pour qu'elles utilisent toute la largeur disponible */
    .documents__list,
    .steps__list,
    .issues__list {
        width: 90%;
        margin: 0.5cm auto;
        padding-left: 1cm;
        padding-right: 1cm;
    }

    /* S'assurer que le contenu des listes reste aligné à gauche */
    .documents__list li,
    .steps__list li,
    .issues__list li {
        text-align: left;
        width: 100%;
    }

    /* Rendre les contenus responsifs */
    .accordion__content[style*="max-height"]:not([style*="max-height: 0"]) {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        page-break-inside: avoid;
        margin: 1cm auto;
        width: 100%; /* Utilise toute la largeur disponible */
    }

    /* Ajustement des sections de documents et étapes */
    .documents, 
    .steps {
        width: 100%;
        margin: 0 auto;
        overflow: hidden; /* Empêche le débordement */
    }

    /* Ajustement des listes pour qu'elles soient responsives */
    .documents__list,
    .steps__list,
    .issues__list {
        width: 100%;
        padding: 0 1cm;
        margin: 0.5cm auto;
        box-sizing: border-box; /* Inclut padding dans la largeur */
        word-wrap: break-word; /* Permet le retour à la ligne des longs mots */
        overflow-wrap: break-word;
    }

    /* Ajustement des éléments de liste */
    .documents__list li,
    .steps__list li,
    .issues__list li {
        width: 100%;
        margin-bottom: 0.3cm;
        padding-right: 1cm;
        box-sizing: border-box;
        white-space: normal; /* Permet le retour à la ligne */
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* Ajustement des sous-sections */
    .steps__subsection,
    .documents__section {
        width: 100%;
        margin: 0.5cm auto;
        padding: 0 1cm;
        box-sizing: border-box;
    }

    /* Gestion du texte long */
    p, h1, h2, h3, h4, h5, h6 {
        width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}