/* ============================================
   SIMULATEUR NIVEAU DE VIE — /particuliers/
   S'ajoute au style global du site (style.css).
   ============================================ */

/* Variables locales au simulateur */
:root {
    --sim-cat-rouge: #D32F2F;
    --sim-cat-orange: #EF6C00;
    --sim-cat-jaune: #F0B400;  /* or : jaune doré reconnaissable, texte sombre pour le contraste */
    --sim-cat-vert: #2E7D32;
}

/* ---------- CONTENEUR ---------- */
.sim-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.sim-hero {
    background-color: var(--bg-why, #F0F7FF);
    padding: 48px 0 32px;
    text-align: center;
}

.sim-title {
    color: var(--primary-color);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.sim-subtitle {
    max-width: 760px;
    margin: 0 auto;
    color: var(--dark-gray);
    font-size: 1.05rem;
}

/* ---------- LAYOUT 2 COLONNES (desktop) ---------- */
.sim-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 48px;
    padding-bottom: 48px;
}

.sim-card {
    background-color: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 32px 24px;
}

.sim-card-title {
    color: var(--primary-color);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 24px;
}

/* ---------- CHAMPS ---------- */
.sim-field {
    margin-bottom: 24px;
}

.sim-fieldset {
    border: none;
    margin: 0 0 8px;
    padding: 0;
}

.sim-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
}

.sim-required {
    color: var(--secondary-color);
}

.sim-select,
.sim-input {
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    color: var(--dark-gray);
    background-color: var(--white);
    border: 1px solid #cfd8dc;
    border-radius: 6px;
    padding: 10px 12px;
    transition: var(--transition);
}

/* Outline de focus visible uniquement au clavier (:focus-visible) :
   au clic souris, pas de contour bleu pleine largeur sur les boutons. */
.sim-select:focus-visible,
.sim-input:focus-visible,
.sim-slider:focus-visible,
.sim-compteur-btn:focus-visible,
.sim-segment:focus-visible,
.sim-accordion-bouton:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.sim-help {
    font-size: 0.85rem;
    color: #666;
    margin-top: 8px;
    line-height: 1.5;
}

/* Revenu : slider au-dessus du champ (côte à côte dès que la largeur le permet) */
.sim-revenu {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: center;
}

.sim-revenu-champ {
    display: flex;
    align-items: stretch;
}

.sim-input-revenu {
    text-align: right;
    border-right: none;
    border-radius: 6px 0 0 6px;
}

.sim-input-suffix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background-color: var(--light-gray);
    border: 1px solid #cfd8dc;
    border-left: none;
    border-radius: 0 6px 6px 0;
    color: #666;
    font-size: 0.9rem;
    white-space: nowrap;
}

.sim-slider {
    width: 100%;
    accent-color: var(--primary-color);
    height: 24px;
}

/* ---------- COMPTEURS ---------- */
.sim-compteur {
    margin-bottom: 20px;
}

.sim-compteur-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
}

.sim-compteur-controles {
    display: flex;
    align-items: stretch;
    max-width: 180px;
}

.sim-compteur-btn {
    flex: 0 0 44px;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--primary-color);
    background-color: var(--white);
    border: 1px solid #cfd8dc;
    cursor: pointer;
    transition: var(--transition);
}

.sim-compteur-btn:first-child {
    border-radius: 6px 0 0 6px;
}

.sim-compteur-btn:last-child {
    border-radius: 0 6px 6px 0;
}

.sim-compteur-btn:hover:not(:disabled) {
    background-color: var(--bg-why, #F0F7FF);
}

.sim-compteur-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.sim-compteur-input {
    flex: 1;
    width: 60px;
    text-align: center;
    border-left: none;
    border-right: none;
    border-radius: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}

.sim-uc-line {
    font-size: 0.9rem;
    color: #666;
    margin-top: 8px;
}

/* ---------- RÉSULTATS ---------- */
.sim-empty {
    text-align: center;
    padding: 48px 16px;
}

.sim-empty-icone {
    font-size: 3rem;
    margin-bottom: 16px;
}

.sim-empty-texte {
    color: #666;
    max-width: 400px;
    margin: 0 auto;
}

.sim-erreur {
    color: var(--sim-cat-rouge, #D32F2F);
    font-weight: 600;
    padding: 16px;
    background-color: #FDECEA;
    border-radius: 6px;
}

.sim-niveau-vie-valeur {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
    margin-bottom: 8px;
}

.sim-niveau-vie-note {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 32px;
}

/* Segmented button France / département */
.sim-position {
    margin-bottom: 24px;
}

.sim-segmented {
    display: flex;
    border: 1px solid #cfd8dc;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 16px;
}

.sim-segment {
    flex: 1;
    padding: 10px 8px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dark-gray);
    background-color: var(--white);
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.sim-segment + .sim-segment {
    border-left: 1px solid #cfd8dc;
}

.sim-segment[aria-selected="true"] {
    background-color: var(--primary-color);
    color: var(--white);
}

.sim-segment:disabled {
    color: #999;
    background-color: var(--light-gray);
    cursor: not-allowed;
}

.sim-percentile-label {
    font-weight: 600;
    margin-bottom: 16px;
}

/* ---------- JAUGE DE DISTRIBUTION ----------
   La jauge représente la population : 10 % de hauteur = 10 % de la
   population. Les bandes de couleurs marquent les catégories equiprix,
   les pointillés matérialisent D1, Q1, médiane, Q3 et D9 à leur hauteur
   exacte de percentile. */
.sim-jauge-wrap {
    position: relative;
}

.sim-jauge {
    position: relative;
    height: 260px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Bandes de catégories (positionnées en % de hauteur) */
.sim-jauge-bande {
    position: absolute;
    left: 0;
    right: 0;
}

.sim-jauge-rouge  { background-color: #F6C6C6; }
.sim-jauge-orange { background-color: #FBD9B0; }
.sim-jauge-jaune  { background-color: #FBE9A9; }
.sim-jauge-verte  { background-color: #C8E6C9; }

/* Pointillés des déciles / quartiles, horizontalement centrés */
.sim-jauge-repere {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 2px dashed rgba(0, 0, 0, 0.45);
    pointer-events: none;
    z-index: 2;
}

.sim-jauge-repere span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -10px;
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.75);
    background-color: rgba(255, 255, 255, 0.9);
    padding: 0 4px;
    border-radius: 3px;
    white-space: nowrap;
}

/* Curseur de l'utilisateur (animé via la transition posée en JS) */
.sim-jauge-marker {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 3px solid var(--dark-gray);
    pointer-events: none;
    z-index: 3;
}

.sim-jauge-marker::after {
    content: '▼';
    position: absolute;
    right: 8px;
    top: -13px;
    font-size: 0.75rem;
    color: var(--dark-gray);
}

/* Légende des catégories */
.sim-jauge-legendes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 10px;
    font-size: 0.78rem;
    color: #666;
}

.sim-legende::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 5px;
    vertical-align: baseline;
}

.sim-legende-rouge::before  { background-color: #F6C6C6; }
.sim-legende-orange::before { background-color: #FBD9B0; }
.sim-legende-jaune::before  { background-color: #FBE9A9; }
.sim-legende-verte::before  { background-color: #C8E6C9; }

/* ---------- BADGE CATÉGORIE ---------- */
.sim-categorie-label {
    font-weight: 600;
    margin-bottom: 8px;
}

.sim-categorie-badge {
    display: inline-block;
    position: relative;
    padding: 10px 16px;
    border-radius: 15px;
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--white);
    background-color: #999;
    transition: opacity 0.7s ease;
}

/* Conteneur du badge : point d'ancrage du fantôme pendant le fondu */
.sim-badge-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

/* Ancien badge cloné pendant le fondu enchaîné (part en transparence) */
.sim-badge-fantome {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    transition: opacity 0.7s ease;
    pointer-events: none;
}

.sim-badge-fantome.sim-badge-sortie { opacity: 0; }

.sim-categorie-badge.cat-rouge  { background-color: var(--sim-cat-rouge, #D32F2F); }
.sim-categorie-badge.cat-orange { background-color: var(--sim-cat-orange, #EF6C00); }
.sim-categorie-badge.cat-jaune  {
    background-color: var(--sim-cat-jaune, #F0B400);
    color: #212121;
}
.sim-categorie-badge.cat-vert   { background-color: var(--sim-cat-vert, #2E7D32); }

/* ---------- SECTION 3 : ACCORDÉON ---------- */
.sim-section {
    padding: 64px 0;
}

.sim-section-comprendre {
    background-color: var(--bg-commercants, #F8F9FA);
}

.sim-accordion-titre {
    margin: 0;
}

/* Les trois panneaux pédagogiques, espacés verticalement */
.sim-accordeons {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sim-accordion {
    background-color: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.sim-accordion-bouton {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-color);
    text-align: left;
    cursor: pointer;
    /* Évite la sélection de texte (surlignage bleu) lors du clic */
    user-select: none;
    -webkit-user-select: none;
}

.sim-accordion-fleche {
    transition: transform 0.3s ease;
    font-size: 0.9rem;
}

.sim-accordion-bouton[aria-expanded="false"] .sim-accordion-fleche {
    transform: rotate(-90deg);
}

/* Ouverture/fermeture fluide : la hauteur animée passe par une piste
   grid 0fr -> 1fr, le contenu est masqué par overflow: hidden. */
.sim-accordion-contenu {
    display: grid;
    grid-template-rows: 0fr;
    /* visibility retire aussi le contenu fermé des lecteurs d'écran */
    visibility: hidden;
    transition: grid-template-rows 0.35s ease, visibility 0.35s;
}

.sim-accordion-contenu.ouvert {
    grid-template-rows: 1fr;
    visibility: visible;
}

.sim-accordion-voile {
    overflow: hidden;
    min-height: 0;
    padding: 0 24px;
}

.sim-accordion-voile .sim-expli-bloc {
    padding-bottom: 24px;
}

.sim-expli-bloc {
    margin-bottom: 0;
}

.sim-expli-bloc h4 {
    color: var(--primary-color);
    margin-bottom: 8px;
    font-size: 1.05rem;
}

.sim-expli-bloc p {
    margin-bottom: 8px;
    line-height: 1.6;
}

.sim-expli-liste {
    margin: 0 0 8px 20px;
    line-height: 1.7;
}

.sim-expli-note {
    font-size: 0.85rem;
    color: #666;
}

.sim-source {
    font-size: 0.85rem;
    color: #666;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 16px;
}

.sim-source a {
    color: var(--primary-color);
    font-weight: 600;
}

/* ---------- SECTION 4 : equiprix ajuste les prix ---------- */
.sim-section-ajustement {
    background-color: var(--bg-why, #F0F7FF);
    text-align: left;
}

/* Colonne gauche : titre + texte ; colonne droite : maquette */
.sim-ajustement-cols {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.sim-ajustement-texte {
    max-width: 700px;
}

.sim-ajustement-cols .section-title {
    text-align: left;
}

.sim-ajustement-cols .section-intro {
    margin: 0;
    line-height: 1.7;
}

.sim-ajustement-img {
    width: 280px;
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
}

@media (min-width: 992px) {
    /* Grand écran : titre + texte à gauche (largeur plafonnée pour des
       lignes de lecture confortables), maquette à droite. La colonne
       texte occupe toute la hauteur de la rangée et centre son contenu
       verticalement. */
    .sim-ajustement-cols {
        flex-direction: row;
        gap: 48px;
    }

    /* Marge auto : la colonne texte se centre dans l'espace libre,
       c.-à-d. entre le bord gauche et la maquette. */
    .sim-ajustement-texte {
        flex: 0 1 auto;
        max-width: 585px;
        margin-left: auto;
        margin-right: auto;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .sim-ajustement-img {
        flex-shrink: 0;
        align-self: center;
    }
}

/* ---------- SECTION 5 : Vous pouvez participer ---------- */
.sim-section-participer {
    background-color: var(--white);
    text-align: center;
}

.sim-section-participer .section-intro {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}



/* ---------- RESPONSIVE ---------- */
/* Desktop : deux colonnes visibles simultanément */
@media (min-width: 992px) {
    .sim-layout {
        grid-template-columns: 45fr 55fr;
        align-items: start;
        gap: 40px;
    }

    .sim-card {
        padding: 32px;
    }
}

/* Revenu : slider à gauche du champ quand la largeur le permet */
@media (min-width: 480px) {
    .sim-revenu {
        grid-template-columns: 1fr 180px;
    }
}

/* Petits écrans : textes de la jauge réduits mais lisibles */
@media (max-width: 480px) {
    .sim-jauge {
        height: 220px;
    }

    .sim-jauge-repere span {
        font-size: 0.6rem;
    }

    .sim-niveau-vie-valeur {
        font-size: 1.9rem;
    }

    .sim-categorie-badge {
        font-size: 0.85rem;
    }
}