.elementor-1487 .elementor-element.elementor-element-5755224{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--margin-top:36px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-1487 .elementor-element.elementor-element-70a54cf{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--margin-top:0px;--margin-bottom:0px;--margin-left:21px;--margin-right:0px;}.elementor-1487 .elementor-element.elementor-element-8b6f499{width:var( --container-widget-width, 45.768% );max-width:45.768%;--container-widget-width:45.768%;--container-widget-flex-grow:0;}.elementor-1487 .elementor-element.elementor-element-8b6f499.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-1487 .elementor-element.elementor-element-182049d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1487 .elementor-element.elementor-element-7477716{width:auto;max-width:auto;}.elementor-1487 .elementor-element.elementor-element-7477716 img{max-width:70%;}.elementor-1487 .elementor-element.elementor-element-0f58b83.elementor-element{--align-self:center;}.elementor-1487 .elementor-element.elementor-element-0f58b83 .king-addons-creative-btn{font-size:20px;}.elementor-1487 .elementor-element.elementor-element-0f58b83 .king-addons-creative-btn-wrap .king-addons-creative-btn{--king-addons-creative-btn-bg-hover-color:var( --e-global-color-primary );}.elementor-1487 .elementor-element.elementor-element-1265104{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-1487 .elementor-element.elementor-element-1265104.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-1487 .elementor-element.elementor-element-bc5f360{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--margin-top:20px;--margin-bottom:20px;--margin-left:20px;--margin-right:20px;}.elementor-1487 .elementor-element.elementor-element-cfa1c2e{width:var( --container-widget-width, 54.866% );max-width:54.866%;margin:0px 20px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--container-widget-width:54.866%;--container-widget-flex-grow:0;}.elementor-1487 .elementor-element.elementor-element-cfa1c2e.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-1487 .elementor-element.elementor-element-cdf8e0c{--display:flex;}.elementor-1487 .elementor-element.elementor-element-004c0ed{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-1487 .elementor-element.elementor-element-6f141e8{width:var( --container-widget-width, 93.368% );max-width:93.368%;--container-widget-width:93.368%;--container-widget-flex-grow:0;}.elementor-1487 .elementor-element.elementor-element-6f141e8.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-1487 .elementor-element.elementor-element-e7ad55d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1487 .elementor-element.elementor-element-4124c45{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1487 .elementor-element.elementor-element-c5e9f73{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:26px;--padding-bottom:26px;--padding-left:26px;--padding-right:26px;}.elementor-1487 .elementor-element.elementor-element-78bc6ea{--display:flex;--padding-top:1px;--padding-bottom:1px;--padding-left:1px;--padding-right:1px;}.elementor-1487 .elementor-element.elementor-element-78bc6ea:not(.elementor-motion-effects-element-type-background), .elementor-1487 .elementor-element.elementor-element-78bc6ea > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.audi-son.fr/wp-content/uploads/2025/09/Group-164-1758719499.png");}.elementor-1487 .elementor-element.elementor-element-78bc6ea.e-con{--align-self:center;--flex-grow:0;--flex-shrink:1;}.elementor-1487 .elementor-element.elementor-element-81e8d0b{--display:flex;--padding-top:39px;--padding-bottom:39px;--padding-left:39px;--padding-right:39px;}.elementor-1487 .elementor-element.elementor-element-85947bf{width:var( --container-widget-width, 100% );max-width:100%;padding:0px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-1487 .elementor-element.elementor-element-85947bf.elementor-element{--align-self:center;--flex-grow:1;--flex-shrink:0;}.elementor-1487 .elementor-element.elementor-element-ab1dab5{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:28px;--padding-bottom:28px;--padding-left:28px;--padding-right:28px;}.elementor-1487 .elementor-element.elementor-element-ab1dab5:not(.elementor-motion-effects-element-type-background), .elementor-1487 .elementor-element.elementor-element-ab1dab5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F7F8EC;}.elementor-1487 .elementor-element.elementor-element-d661a9f{width:var( --container-widget-width, 80.843% );max-width:80.843%;--container-widget-width:80.843%;--container-widget-flex-grow:0;}.elementor-1487 .elementor-element.elementor-element-d661a9f.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-1487 .elementor-element.elementor-element-6ac9f9f{width:var( --container-widget-width, 20.921% );max-width:20.921%;--container-widget-width:20.921%;--container-widget-flex-grow:0;}.elementor-1487 .elementor-element.elementor-element-6ac9f9f:hover{--e-transform-rotateZ:4deg;}.elementor-1487 .elementor-element.elementor-element-6ac9f9f.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-1487 .elementor-element.elementor-element-6ac9f9f .elementor-icon-wrapper{text-align:center;}.elementor-1487 .elementor-element.elementor-element-6ac9f9f .elementor-icon{font-size:163px;}.elementor-1487 .elementor-element.elementor-element-6ac9f9f .elementor-icon svg{height:163px;}.elementor-1487 .elementor-element.elementor-element-474e25c{--display:flex;}.elementor-1487 .elementor-element.elementor-element-f120e10{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1487 .elementor-element.elementor-element-4e187f8{--display:flex;}.elementor-1487 .elementor-element.elementor-element-14699cb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1487 .elementor-element.elementor-element-3a48053{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1487 .elementor-element.elementor-element-d6f8df6{--display:flex;}.elementor-1487 .elementor-element.elementor-element-381ceda.elementor-element{--flex-grow:1;--flex-shrink:0;}.elementor-1487 .elementor-element.elementor-element-ac3f486{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1487 .elementor-element.elementor-element-77868e4{--display:flex;}.elementor-1487 .elementor-element.elementor-element-df19af3{--display:flex;}.elementor-1487 .elementor-element.elementor-element-6c8d62c{--display:flex;}body.elementor-page-1487:not(.elementor-motion-effects-element-type-background), body.elementor-page-1487 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}@media(min-width:768px){.elementor-1487 .elementor-element.elementor-element-5755224{--content-width:83%;}.elementor-1487 .elementor-element.elementor-element-70a54cf{--width:100%;}.elementor-1487 .elementor-element.elementor-element-1265104{--width:89.342%;}.elementor-1487 .elementor-element.elementor-element-bc5f360{--content-width:100%;}.elementor-1487 .elementor-element.elementor-element-e7ad55d{--content-width:83%;}.elementor-1487 .elementor-element.elementor-element-4124c45{--content-width:83%;}.elementor-1487 .elementor-element.elementor-element-ab1dab5{--width:100%;}.elementor-1487 .elementor-element.elementor-element-f120e10{--content-width:83%;}.elementor-1487 .elementor-element.elementor-element-14699cb{--content-width:83%;}.elementor-1487 .elementor-element.elementor-element-ac3f486{--content-width:83%;}}/* ===== RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.5;
}

/* ===== CONTENEUR PRINCIPAL ===== */
#classe-comparaison {
    max-width: 100%;
    margin: 0 auto;
    padding: 32px 16px;
}

/* ===== EN-TÊTE DE SECTION ===== */
.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.main-title {
    font-size: 36px;
    font-weight: bold;
    color: #664937;
    margin-bottom: 16px;
}

.main-subtitle {
    font-size: 20px;
    color: #445563;
    max-width: 100%;
    margin: 0 auto;
}

/* ===== CONTENEUR DES CARTES ===== */
.cards-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 40px;
}

@media (min-width: 768px) {
    .cards-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== CARTES ===== */
.card {
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    transform: scale(1);
    transition: transform 0.3s ease;
}

.card:hover {
    transform: scale(1.05);
}

.card-classe1 {
    background: linear-gradient(to bottom right, #ee0fdf4, #eefae5);
}

.card-classe2 {
    background: linear-gradient(to bottom right, #eef2ff, #e9d5ff);
}

/* ===== BADGES DES CARTES ===== */
.card-badge {
    padding: 12px 24px;
    text-align: center;
    color: white;
}

.badge-classe1 {
    background-color: #eea34a;
}

.badge-classe2 {
    background-color: #4fbfff;
}

.badge-title {
    font-size: 20px;
    font-weight: bold;
}

.badge-subtitle {
    font-size: 18px;
}

/* ===== CONTENU DES CARTES ===== */
.card-content {
    padding: 32px;
}

/* ===== BOÎTE PRIX ===== */
.price-box {
    background-color: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    text-align: center;
}

.price-label {
    font-size: 22px;
    color: #4b5563;
    margin-bottom: 8px;
}

.price-value {
    font-size: 36px;
    font-weight: bold;
}

.price-classe1 {
    color: #16a34a;
}

.price-classe2 {
    color: #4f46e5;
}

.price-info {
    font-size: 18px;
    color: #6b7280;
}

/* ===== BOÎTE RESTE À CHARGE ===== */
.charge-box {
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    text-align: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    color: white;
}

.charge-classe1 {
    background-color: #16a34a;
}

.charge-classe2 {
    background-color: #4f46e5;
}

.charge-label {
    font-size: 20px;
    margin-bottom: 8px;
    opacity: 0.9;
}

.charge-value {
    font-size: 48px;
    font-weight: bold;
}

.charge-value-medium {
    font-size: 36px;
}

.charge-info {
    font-size: 20px;
    margin-top: 8px;
    opacity: 0.9;
}

.charge-link {
    color: white;
    text-decoration: underline;
    display: inline-block;
    margin-top: 4px;
}

/* ===== LISTE DES CARACTÉRISTIQUES ===== */
.features-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.feature-icon {
    border-radius: 50%;
    padding: 4px;
    margin-top: 4px;
    flex-shrink: 0;
}

.icon-classe1 {
    background-color: #22c55e;
}

.icon-classe2 {
    background-color: #6366f1;
}

.icon-svg {
    width: 16px;
    height: 16px;
    color: white;
}

.feature-text {
    flex: 1;
}

.feature-title {
    font-weight: 600;
    color: #1f2937;
}

.feature-description {
    font-size: 14px;
    color: #008003;
}

/* ===== BADGE RECOMMANDATION ===== */
.recommendation-badge {
    margin-top: 24px;
    border-radius: 12px;
    padding: 16px;
    border-width: 2px;
    border-style: solid;
}

.recommendation-classe1 {
    background-color: #dcfce7;
    border-color: #22c55e;
}

.recommendation-classe2 {
    background-color: #e0e7ff;
    border-color: #6366f1;
}

.recommendation-text {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

.recommendation-classe1 .recommendation-text {
    color: #EE6534;
}

.recommendation-classe2 .recommendation-text {
    color: #3730a3;
}

/* ===== SECTION CONSEIL ===== */
.conseil-section {
    background: linear-gradient(to right, #fffbeb, #ffedd5);
    border-left: 4px solid #f59e0b;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
}

.conseil-container {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.conseil-icon {
    background-color: #f59e0b;
    border-radius: 50%;
    padding: 12px;
    flex-shrink: 0;
}

.icon-svg-large {
    width: 24px;
    height: 24px;
    color: white;
}

.conseil-content {
    flex: 1;
}

.conseil-title {
    font-size: 20px;
    font-weight: bold;
    color: #6b7280;
    margin-bottom: 8px;
}

.conseil-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #374151;
}

.conseil-question {
    font-weight: bold;
}

.conseil-question-spaced {
    margin-top: 12px;
}

.conseil-list {
    list-style-position: inside;
    list-style-type: disc;
    margin-left: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 18px;
}

.conseil-list-indented {
    margin-left: 16px;
}

.conseil-box {
    margin-top: 16px;
    background-color: white;
    border-radius: 8px;
    padding: 12px;
    border: 1px solid #fcd34d;
}

.conseil-box-text {
    font-size: 19px;
    color: #1f2937;
}

/* ===== TABLEAU DE COMPARAISON ===== */
.comparison-table-container {
    margin-top: 40px;
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.comparison-table-header {
    background: linear-gradient(to right, #374151, #111827);
    color: white;
    padding: 16px 24px;
}

.comparison-table-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

.table-wrapper {
    overflow-x: auto;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
}

.table-head {
    background-color: #f3f4f6;
}

.table-header-cell {
    padding: 16px 24px;
    font-size: 22px;
    font-weight: bold;
}

.table-header-left {
    text-align: left;
    color: #374151;
}

.table-header-center {
    text-align: center;
}

.table-header-classe1 {
    color: #15803d;
}

.table-header-classe2 {
    color: #4338ca;
}

.table-body {
    border-top: 1px solid #e5e7eb;
}

.table-row {
    transition: background-color 0.2s ease;
}

.table-row:hover {
    background-color: #f9fafb;
}

.table-row:not(:last-child) {
    border-bottom: 1px solid #e5e7eb;
}

.table-cell {
    padding: 16px 24px;
}

.table-cell-label {
    font-size: 22px;
    font-weight: 500;
    color: #1f2937;
}

.table-cell-center {
    text-align: center;
}

.table-cell-content {
    font-size: 20px;
    color: #374151;
}

.table-cell-sub {
    font-size: 18px;
    color: #6b7280;
}

/* ===== BADGES DU TABLEAU ===== */
.badge-table {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 18px;
    font-weight: 600;
}

.badge-table-classe1 {
    background-color: #dcfce7;
    color: #166534;
}

.badge-table-classe1-dark {
    background-color: #16a34a;
    color: white;
}

.badge-table-classe2 {
    background-color: #e0e7ff;
    color: #3730a3;
}

.badge-table-neutral {
    background-color: #f3f4f6;
    color: #1f2937;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 767px) {
    #classe-comparaison {
        padding: 16px 8px;
    }
    
    .main-title {
        font-size: 28px;
    }
    
    .main-subtitle {
        font-size: 16px;
    }
    
    .card-content {
        padding: 24px;
    }
    
    .conseil-container {
        flex-direction: column;
    }
    
    .table-header-cell,
    .table-cell {
        padding: 12px 16px;
        font-size: 12px;
    }
}
/* ===== RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.5;
}

/* ===== CONTENEUR PRINCIPAL ===== */
#demarches-timeline {
    max-width: 100%;
    margin: 0 auto;
    padding: 32px 16px;
}

/* ===== EN-TÊTE TIMELINE ===== */
.timeline-header {
    text-align: center;
    margin-bottom: 48px;
}

.timeline-title {
    font-size: 36px;
    font-weight: bold;
    color: #1f2937;
    margin-bottom: 16px;
}

.timeline-subtitle {
    font-size: 20px;
    color: #4b5563;
    max-width: 768px;
    margin: 0 auto;
}

/* ===== WRAPPER TIMELINE ===== */
.timeline-wrapper {
    position: relative;
}

/* ===== LIGNE VERTICALE CENTRALE ===== */
.timeline-line {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: 4px;
    background: linear-gradient(to bottom, #a5b4fc, #c4b5fd, #f9a8d4);
}

@media (min-width: 768px) {
    .timeline-line {
        display: block;
    }
}

/* ===== CONTENEUR DES ÉTAPES ===== */
.timeline-steps {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* ===== STEP CONTAINER ===== */
.step-container {
    position: relative;
}

.step-layout {
    display: flex;
    align-items: center;
}

@media (min-width: 768px) {
    .step-layout {
        position: relative;
    }
}

/* ===== WRAPPERS DE CONTENU ===== */
.step-content-wrapper {
    flex: 1;
}

@media (min-width: 768px) {
    .step-content-left {
        padding-right: 48px;
    }
    
    .step-content-right {
        padding-left: 48px;
    }
}

.step-content-wrapper:empty {
    display: none;
}

@media (min-width: 768px) {
    .step-content-wrapper:empty {
        display: block;
    }
}

/* ===== CARTES DES ÉTAPES ===== */
.step-card {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    padding: 24px;
    border-left: 4px solid;
    transition: box-shadow 0.3s ease;
}

.step-card:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.step-card-indigo {
    border-left-color: #6366f1;
}

.step-card-purple {
    border-left-color: #a855f7;
}

.step-card-pink {
    border-left-color: #ec4899;
}

.step-card-orange {
    border-left-color: #f97316;
}

.step-card-green {
    border-left-color: #22c55e;
}

/* ===== CONTENU INTERNE DES CARTES ===== */
.step-inner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

/* ===== ICÔNES DES ÉTAPES ===== */
.step-icon {
    border-radius: 50%;
    padding: 16px;
    flex-shrink: 0;
    color: white;
}

.step-icon-indigo {
    background-color: #6366f1;
}

.step-icon-purple {
    background-color: #a855f7;
}

.step-icon-pink {
    background-color: #ec4899;
}

.step-icon-orange {
    background-color: #f97316;
}

.step-icon-green {
    background-color: #22c55e;
}

.icon-large {
    width: 32px;
    height: 32px;
}

/* ===== TEXTE DES ÉTAPES ===== */
.step-text {
    flex: 1;
}

.step-heading {
    font-size: 24px;
    font-weight: bold;
    color: #1f2937;
    margin-bottom: 8px;
}

.step-description {
    color: #4b5563;
    margin-bottom: 12px;
}

/* ===== BOÎTES D'INFORMATION ===== */
.step-info {
    border-radius: 8px;
    padding: 12px;
}

.step-info-indigo {
    background-color: #eef2ff;
}

.step-info-purple {
    background-color: #faf5ff;
}

.step-info-pink {
    background-color: #fdf2f8;
}

.step-info-orange {
    background-color: #fff7ed;
}

.step-info-green {
    background-color: #f0fdf4;
}

.info-text {
    font-size: 18px;
}

.step-info-indigo .info-text {
    color: #3730a3;
}

.step-info-purple .info-text {
    color: #6b21a8;
}

.step-info-pink .info-text {
    color: #9f1239;
}

.step-info-orange .info-text {
    color: #9a3412;
}

.step-info-green .info-text {
    color: #166534;
}

/* ===== NUMÉROS CENTRAUX (DESKTOP) ===== */
.step-number-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: none;
}

@media (min-width: 768px) {
    .step-number-center-desktop {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.step-badge {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 4px solid white;
}

.step-badge-indigo {
    background-color: #6366f1;
}

.step-badge-purple {
    background-color: #a855f7;
}

.step-badge-pink {
    background-color: #ec4899;
}

.step-badge-orange {
    background-color: #f97316;
}

.step-badge-green {
    background-color: #22c55e;
}

.badge-number {
    font-size: 24px;
    font-weight: 900;
}

/* ===== NUMÉROS MOBILE ===== */
.step-number-mobile {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .step-number-mobile {
        display: none;
    }
}

.step-badge-mobile {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.badge-number-mobile {
    font-size: 20px;
    font-weight: 900;
}

.step-line-mobile {
    flex: 1;
    height: 4px;
}

.step-line-indigo {
    background-color: #c7d2fe;
}

.step-line-purple {
    background-color: #e9d5ff;
}

.step-line-pink {
    background-color: #fbcfe8;
}

.step-line-orange {
    background-color: #fed7aa;
}

.step-line-green {
    background-color: #bbf7d0;
}

/* ===== SECTION RÉCAPITULATIVE ===== */
.summary-section {
    margin-top: 64px;
    background: linear-gradient(to right, #e1a3e5, #4300);
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    padding: 32px;
    
}

.summary-title {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 24px;
    text-align: center;
}

.summary-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .summary-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.summary-card {
    background-color: #fed7aa;
    border-radius: 12px;
    padding: 24px;
    backdrop-filter: blur(8px);
    text-align: center;
}

.summary-number {
    font-size: 36px;
    font-weight: 900;
    margin-bottom: 8px;
}

.summary-unit {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 4px;
}

.summary-description {
    font-size: 18px;
    opacity: 0.9;
}

.summary-footer {
    margin-top: 24px;
    text-align: center;
}

.summary-total {
    font-size: 18px;
    font-weight: 600;
}

.summary-highlight {
    color: #ef3d05;
    font-weight: 900;
}

/* ===== SECTION CTA ===== */
.cta-section {
    margin-top: 48px;
    background: linear-gradient(to bottom right, #f0fdf4, #d1fae5);
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid #86efac;
}

.cta-title {
    font-size: 30px;
    font-weight: bold;
    color: #1f2937;
    margin-bottom: 16px;
}

.cta-subtitle {
    font-size: 18px;
    color: #4b5563;
    margin-bottom: 24px;
}

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
}

.cta-button {
    display: inline-block;
    font-weight: bold;
    padding: 16px 32px;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    transform: scale(1);
    text-decoration: none;
    
}

.cta-button:hover {
    transform: scale(1.05);
}

.cta-button-primary {
    background-color: #eaffaa;
    color: white;
}

.cta-button-primary:hover {
    background-color: #ee803d;
}

.cta-button-secondary {
    background-color: white;
    color: #16a34a;
    border: 2px solid #16a34a;
}

.cta-button-secondary:hover {
    background-color: #eefafb;
}

.cta-footer {
    font-size: 18px;
    color: #4b5563;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 767px) {
    #demarches-timeline {
        padding: 16px 8px;
    }
    
    .timeline-title {
        font-size: 28px;
    }
    
    .timeline-subtitle {
        font-size: 16px;
    }
    
    .step-card {
        padding: 20px;
    }
    
    .step-heading {
        font-size: 20px;
    }
    
    .step-description {
        font-size: 14px;
    }
    
    .summary-section {
        padding: 24px;
    }
    
    .summary-title {
        font-size: 24px;
    }
    
    .cta-section {
        padding: 24px;
    }
    
    .cta-title {
        font-size: 24px;
    }
    
    .cta-subtitle {
        font-size: 16px;
    }
    
    .cta-button {
        width: 100%;
        max-width: 300px;
    }
}
/* ===== RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.5;
}

/* ===== CONTENEUR PRINCIPAL ===== */
#cas-pratiques {
    max-width: 1152px;
    margin: 0 auto;
    padding: 32px 16px;
}

/* ===== EN-TÊTE SECTION ===== */
.pratiques-header {
    text-align: center;
    margin-bottom: 40px;
}

.pratiques-title {
    font-size: 36px;
    font-weight: bold;
    color: #1f2937;
    margin-bottom: 16px;
}

.pratiques-subtitle {
    font-size: 20px;
    color: #4b5563;
    max-width: 768px;
    margin: 0 auto;
}

/* ===== GRILLE DES CAS ===== */
.cases-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 32px;
}

@media (min-width: 768px) {
    .cases-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== CARTES CAS PRATIQUES ===== */
.case-card {
    background-color: white;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    border: 4px solid;
}

.case-card-green {
    border-color: #22c55e;
}

.case-card-indigo {
    border-color: #6366f1;
}

/* ===== EN-TÊTES DES CARTES ===== */
.case-header {
    padding: 24px;
    color: white;
}

.case-header-green {
    background: linear-gradient(to right, #22c55e, #10b981);
}

.case-header-indigo {
    background: linear-gradient(to right, #6366f1, #9333ea);
}

.case-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.case-title {
    font-size: 24px;
    font-weight: bold;
}

.case-badge {
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: bold;
    background-color: white;
}

.case-badge-green {
    color: #16a34a;
}

.case-badge-indigo {
    color: #4f46e5;
}

.case-subtitle {
    font-size: 18px;
    opacity: 0.9;
}

.case-header-green .case-subtitle {
    color: #d1fae5;
}

.case-header-indigo .case-subtitle {
    color: #e0e7ff;
}

.case-example {
    font-size: 14px;
    margin-top: 4px;
}

.case-header-indigo .case-example {
    color: #e0e7ff;
}

/* ===== CORPS DES CARTES ===== */
.case-body {
    padding: 24px;
}

/* ===== SECTION PRIX ===== */
.price-section {
    background-color: #f9fafb;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}

.price-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.price-text {
    flex: 1;
}

.price-label {
    font-size: 18px;
    color: #4b5563;
    margin-bottom: 4px;
}

.price-amount {
    font-size: 36px;
    font-weight: bold;
    color: #1f2937;
}

.price-unit {
    font-size: 16px;
    color: #6b7280;
    margin-top: 4px;
}

.price-icon {
    border-radius: 50%;
    padding: 16px;
    flex-shrink: 0;
}

.price-icon-green {
    background-color: #dcfce7;
    color: #16a34a;
}

.price-icon-indigo {
    background-color: #e0e7ff;
    color: #4f46e5;
}

.icon-xl {
    width: 40px;
    height: 40px;
}

/* ===== FLÈCHE ===== */
.arrow-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.arrow-circle {
    border-radius: 50%;
    padding: 8px;
}

.arrow-circle-green {
    background-color: #22c55e;
}

.arrow-circle-indigo {
    background-color: #6366f1;
}

.arrow-icon {
    width: 24px;
    height: 24px;
    color: white;
}

/* ===== LISTE REMBOURSEMENTS ===== */
.refunds-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.refund-item {
    border-radius: 8px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 4px solid;
}

.refund-item-blue {
    background-color: #eff6ff;
    border-left-color: #3b82f6;
}

.refund-item-purple {
    background-color: #faf5ff;
    border-left-color: #a855f7;
}

.refund-info {
    flex: 1;
}

.refund-label {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}

.refund-item-blue .refund-label {
    color: #2563eb;
}

.refund-item-purple .refund-label {
    color: #9333ea;
}

.refund-detail {
    font-size: 16px;
    color: #4b5563;
}

.refund-amount {
    font-size: 24px;
    font-weight: bold;
}

.refund-item-blue .refund-amount {
    color: #2563eb;
}

.refund-item-purple .refund-amount {
    color: #9333ea;
}

/* ===== CALCUL INTERMÉDIAIRE ===== */
.calculation-box {
    background-color: #f3f4f6;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
    text-align: center;
}

.calculation-label {
    font-size: 16px;
    color: #4b5563;
    margin-bottom: 4px;
}

.calculation-content {
    font-size: 18px;
    font-weight: bold;
    color: #1f2937;
}

.calculation-total {
    color: #16a34a;
}

/* ===== SÉPARATEUR ===== */
.divider {
    border-top: 2px dashed #d1d5db;
    margin: 20px 0;
}

/* ===== RÉSULTAT FINAL ===== */
.result-box {
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    color: white;
}

.result-box-green {
    background: linear-gradient(to right, #22c55e, #10b981);
}

.result-box-indigo {
    background: linear-gradient(to right, #6366f1, #9333ea);
}

.result-label {
    font-size: 22px;
    margin-bottom: 8px;
    opacity: 0.9;
}

.result-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.result-amount {
    font-size: 60px;
    font-weight: 900;
}

.result-icon {
    border-radius: 50%;
    padding: 8px;
    background-color: white;
}

.result-icon-green {
    color: #16a34a;
}

.result-icon-indigo {
    color: #4f46e5;
}

.icon-lg {
    width: 32px;
    height: 32px;
}

.result-message {
    font-size: 14px;
    margin-top: 12px;
    font-weight: 600;
}

.result-message-opacity {
    opacity: 0.9;
}

/* ===== MESSAGES INFO ===== */
.info-message {
    margin-top: 20px;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid;
}

.info-message-green {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
}

.info-message-indigo {
    background-color: #eef2ff;
    border-color: #c7d2fe;
}

.info-text {
    font-size: 18px;
    text-align: center;
}

.info-message-green .info-text {
    color: #166534;
}

.info-message-indigo .info-text {
    color: #3730a3;
}

/* ===== SECTION COMPARATIVE ===== */
.comparison-section {
    background: linear-gradient(to bottom right, #f9fafb, #f3f4f6);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.comparison-title {
    font-size: 24px;
    font-weight: bold;
    color: #1f2937;
    margin-bottom: 24px;
    text-align: center;
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

@media (min-width: 768px) {
    .comparison-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== CARTES RÉSUMÉ ===== */
.summary-card {
    background-color: white;
    border-radius: 12px;
    padding: 24px;
    border: 2px solid;
}

.summary-card-green {
    border-color: #22c55e;
}

.summary-card-indigo {
    border-color: #6366f1;
}

.summary-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.summary-icon {
    border-radius: 50%;
    padding: 8px;
}

.summary-icon-green {
    background-color: #22c55e;
    color: white;
}

.summary-icon-indigo {
    background-color: #6366f1;
    color: white;
}

.icon-md {
    width: 24px;
    height: 24px;
}

.summary-heading {
    font-size: 18px;
    font-weight: bold;
    color: #1f2937;
}

.summary-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 18px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
}

.summary-label {
    color: #4b5563;
}

.summary-value {
    font-weight: 600;
}

.summary-value-green {
    color: #16a34a;
}

.summary-row-final {
    border-top: 1px solid #e5e7eb;
    padding-top: 8px;
}

.summary-label-final {
    font-weight: bold;
    color: #1f2937;
}

.summary-result {
    font-size: 24px;
    font-weight: 900;
}

.summary-result-green {
    color: #16a34a;
}

.summary-result-indigo {
    color: #4f46e5;
}

/* ===== NOTE FINALE ===== */
.final-note {
    background-color: #fffbeb;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    padding: 16px;
}

.note-text {
    font-size: 18px;
    color: #374151;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 767px) {
    #cas-pratiques {
        padding: 16px 8px;
    }
    
    .pratiques-title {
        font-size: 28px;
    }
    
    .pratiques-subtitle {
        font-size: 16px;
    }
    
    .case-header {
        padding: 20px;
    }
    
    .case-title {
        font-size: 20px;
    }
    
    .case-body {
        padding: 20px;
    }
    
    .price-amount {
        font-size: 30px;
    }
    
    .result-amount {
        font-size: 48px;
    }
    
    .comparison-section {
        padding: 24px;
    }
    
    .comparison-title {
        font-size: 20px;
    }
}
/* ===== RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.5;
}

/* ===== CONTENEUR PRINCIPAL ===== */
#calculateur-audioprothese {
    padding: 20px 0px;
}

.calculator-container {
    max-width: 100%;
    margin: 0 auto;
}

/* ===== CARTE CALCULATEUR ===== */
.calculator-card {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

/* ===== EN-TÊTE ===== */
.calculator-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.header-icon {
    width: 32px;
    height: 32px;
    color: #4f46e5;
}

.calculator-title {
    font-size: 30px;
    font-weight: bold;
    color: #1f2937;
}

/* ===== CONTENU PRINCIPAL ===== */
.calculator-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 32px;
}

@media (min-width: 768px) {
    .calculator-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== COLONNE PARAMÈTRES ===== */
.parameters-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.parameter-group {
    display: block;
}

.parameter-group-hidden {
    display: none;
}

.parameter-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

/* ===== GROUPES DE BOUTONS ===== */
.button-group {
    display: flex;
    gap: 16px;
}

.button-group-small {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

/* ===== BOUTONS TOGGLE ===== */
.toggle-button {
    flex: 1;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.toggle-button-active {
    background-color: #4f46e5;
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.toggle-button-inactive {
    background-color: #f3f4f6;
    color: #374151;
}

.toggle-button-inactive:hover {
    background-color: #e5e7eb;
}

.button-subtext {
    font-size: 12px;
}

/* ===== BOUTONS TOGGLE PETITS ===== */
.toggle-button-small {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.toggle-button-small-active {
    background-color: #4f46e5;
    color: white;
}

.toggle-button-small-inactive {
    background-color: #f3f4f6;
    color: #374151;
}

.toggle-button-small-inactive:hover {
    background-color: #e5e7eb;
}

/* ===== INPUTS ===== */
.input-wrapper {
    display: block;
}

.input-wrapper-hidden {
    display: none;
}

.number-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 16px;
}

.number-input:focus {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 2px #4f46e5;
}

.number-input::-webkit-inner-spin-button,
.number-input::-webkit-outer-spin-button {
    opacity: 1;
}

.input-hint {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

/* ===== COLONNE RÉSULTATS ===== */
.results-column {
    background: linear-gradient(to bottom right, #eef2ff, #eff6ff);
    border-radius: 12px;
    padding: 24px;
}

.results-title {
    font-size: 20px;
    font-weight: bold;
    color: #1f2937;
    margin-bottom: 16px;
}

.results-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ===== LIGNES DE RÉSULTATS ===== */
.result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.result-row-border {
    border-bottom: 1px solid #c7d2fe;
}

.result-row-border-bottom {
    border-bottom: 1px solid #c7d2fe;
    padding-bottom: 12px;
}

.result-label {
    color: #374151;
}

.result-value {
    font-weight: 600;
    color: #111827;
}

.result-value-positive {
    color: #16a34a;
}

/* ===== RÉSULTAT FINAL ===== */
.final-result-box {
    background-color: white;
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.final-result-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.final-result-label {
    font-size: 18px;
    font-weight: bold;
    color: #1f2937;
}

.final-result-amount {
    font-size: 24px;
    font-weight: bold;
}

.final-result-zero {
    color: #16a34a;
}

.final-result-nonzero {
    color: #4f46e5;
}

.final-result-message {
    font-size: 12px;
    color: #16a34a;
    font-weight: 500;
    margin-top: 8px;
}

/* ===== BOÎTE INFO ===== */
.info-box {
    margin-top: 16px;
    padding: 12px;
    background-color: white;
    border-radius: 8px;
    font-size: 12px;
    color: #4b5563;
}

.info-line {
    margin-bottom: 4px;
}

.info-line:last-child {
    margin-bottom: 0;
}

/* ===== DISCLAIMER ===== */
.disclaimer-box {
    background-color: #eff6ff;
    border-left: 4px solid #3b82f6;
    padding: 16px;
    border-radius: 4px;
}

.disclaimer-text {
    font-size: 14px;
    color: #374151;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 767px) {
    .calculator-card {
        padding: 24px 16px;
    }
    
    .calculator-title {
        font-size: 24px;
    }
    
    .header-icon {
        width: 28px;
        height: 28px;
    }
    
    .results-column {
        padding: 20px;
    }
    
    .results-title {
        font-size: 18px;
    }
    
    .final-result-amount {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .calculator-title {
        font-size: 20px;
    }
    
    .button-group {
        flex-direction: column;
        gap: 8px;
    }
    
    .toggle-button {
        width: 100%;
    }
}