/* ==========================================================
   ODISSÉ DATAVIZ CHALLENGE 2026
   ========================================================== */


/* ==========================================================
   1. VARIABLES
   ========================================================== */

   :root {

    /* Charte Odissé - couleurs pincipales */
    --navy: #002B59;
    --blue: #114B8A;
    --raspberry: #CA1C60;

    /* Charte Odissé - couleurs secondaires pastel */
    --blue-light: #96BBFF;
    --purple-light: #E8BDF9;
    --pink-light: #FFC1D0;
    --orange-light: #FFD7B6;
    --yellow-light: #F9EECA;
    --green-light: #BAF4D5;

    /* Indicateurs de santé */
    --health-perceived: #4A84C2;
    --health-limitation: #CA1C60;
    --health-diabetes: #EC9955;

    /* Indicateurs territoriaux */
    --territorial-fdep: #8B6FC0;
    --territorial-fedi: #C392D8;
    --territorial-apl: #3EA36D;

    /* Dimensions sociales */
    --social-finance: #357F57;
    --social-diplome: #C9A426;
    --social-pcs: #BD7A44;

    /* Sexe */
    --sex-all: #7C8DA1;
    --sex-women: #C74E6C;
    --sex-men: #114B8A;

    /* Couleurs fonctionnelles */
    --background: #F8FAFD;
    --surface: #FFFFFF;

    --text: #17324A;
    --text-muted: #627487;

    --border: #E4EAF1;
    --border-strong: #D5DEE8;

    /* Ombres volontairement discrètes */
    --shadow-soft:
        0 5px 18px rgba(0, 43, 89, 0.045);

    --radius-small: 8px;
    --radius-medium: 13px;
    --radius-large: 18px;

    --transition: 180ms ease;

    --dashboard-height: 500px;
    --dashboard-gap: 10px;
}


/* ==========================================================
   2. BASE
   ========================================================== */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    background:
        radial-gradient(
            circle at 92% 7%,
            rgba(150, 187, 255, 0.14),
            transparent 24%
        ),
        radial-gradient(
            circle at 8% 28%,
            rgba(232, 189, 249, 0.08),
            transparent 22%
        ),
        var(--background);

    color: var(--text);

    font-family:
        "Outfit",
        Arial,
        Helvetica,
        sans-serif;

    line-height: 1.65;
}


/* ==========================================================
   3. CONTENEUR PRINCIPAL
   ========================================================== */

.app-container {
    min-height: 100vh;
}


.tab-content {
    width: min(1160px, calc(100% - 48px));

    margin: 0 auto;

    padding:
        70px
        0
        100px;
}


/* ==========================================================
   4. TYPOGRAPHIE & TITRES
   ========================================================== */

h1,
h2,
h3,
h4 {
    color: var(--navy);

    margin-top: 0;

    line-height: 1.18;
}


h1 {
    max-width: 920px;

    margin-bottom: 24px;

    font-size:
        clamp(
            2.35rem,
            4.5vw,
            4.4rem
        );

    font-weight: 700;

    letter-spacing: -0.04em;
}


h2 {
    margin-top: 68px;
    margin-bottom: 18px;

    font-size:
        clamp(
            1.55rem,
            2.4vw,
            2.1rem
        );

    font-weight: 650;

    letter-spacing: -0.022em;
}


h3 {
    font-size: 1.12rem;
}


h4 {
    margin-top: 28px;
    margin-bottom: 10px;
}


p {
    margin-top: 0;
}


.intro {
    max-width: 810px;

    margin-bottom: 48px;

    color: var(--text-muted);

    font-size: 1.17rem;

    line-height: 1.78;
}


.section-label,
.eyebrow {
    margin-bottom: 14px;

    color: var(--raspberry);

    font-size: 0.74rem;

    font-weight: 700;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}

.text-accent {
    color: var(--blue);
    font-weight: 700;
}

.text-accent-blue {
    color: var(--navy);
    font-weight: 700;
}

.text-highlight {
    color: var(--raspberry);
    font-weight: 700;
}

/* ==========================================================
   Titres de section
   ========================================================== */

.section-heading {
    margin-top: 0;
}

/* Trait signature Odissé */

.tab-content > h2,
.section-heading,
.dashboard-header h2 {
    position: relative;
}


.tab-content > h2::before,
.section-heading::before,
.dashboard-header h2::before {
    content: "";

    display: block;

    width: 34px;
    height: 3px;

    margin-bottom: 15px;

    background:
        linear-gradient(
            90deg,
            var(--raspberry),
            var(--blue-light)
        );

    border-radius: 3px;
}

.dashboard-eyebrow,
.method-flow-eyebrow,
.region-eyebrow {
    color:
        var(--raspberry);

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}

/* ==========================================================
   5. NAVIGATION
   ========================================================== */

.tabs-container {
    position: sticky;

    top: 0;

    z-index: 100;

    background:
        rgba(248, 250, 253, 0.94);

    backdrop-filter: blur(12px);

    border-bottom:
        1px solid var(--border);
}


.app-tab {
    padding:
        18px
        18px !important;

    background:
        transparent !important;

    border:
        none !important;

    border-bottom:
        2px solid transparent !important;

    color:
        var(--text-muted) !important;

    font-weight:
        500 !important;

    transition:
        color var(--transition),
        background var(--transition),
        border-color var(--transition);
}


.app-tab:hover {
    color:
        var(--navy) !important;

    background:
        rgba(150, 187, 255, 0.06) !important;
}


.app-tab--selected {
    color:
        var(--navy) !important;

    border-bottom:
        2px solid var(--raspberry) !important;

    font-weight:
        650 !important;
}

/* ==========================================================
   Navigation mobile
   ========================================================== */

   .mobile-nav {
    display: none;
}

/* ==========================================================
   6. BLOCS DE STORYTELLING
   ========================================================== */

/* ==========================================================
    Blocs de questionnement
   ========================================================== */

.question-block {
    position: relative;

    margin:
        58px
        0
        78px;

    padding:
        36px
        42px;

    background:
        linear-gradient(
            120deg,
            rgba(150, 187, 255, 0.17),
            rgba(232, 189, 249, 0.10)
        );

    border:
        1px solid rgba(17, 75, 138, 0.10);

    border-radius:
        var(--radius-large);
}


.question-block::before {
    content: "";

    position: absolute;

    left: 0;
    top: 30px;
    bottom: 30px;

    width: 4px;

    background:
        var(--raspberry);

    border-radius:
        4px;
}


.question-block h2 {
    max-width: 920px;

    margin: 0;

    font-size:
        clamp(
            1.45rem,
            2.5vw,
            2.3rem
        );

    line-height: 1.35;
}

/* ==========================================================
   Détails acceuil
   ========================================================== */

.home-details {
    margin-top: 40px;
    margin-bottom: 12px;
}

.home-details > summary {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    width: fit-content;
    padding: 11px 16px;

    background: #ffffff;
    border: 1px solid #d8e1ef;
    border-radius: 10px;

    color: var(--blue);
    font-weight: 600;
    cursor: pointer;

    transition: all 0.2s ease;
}

.home-details > summary:hover {
    border-color: var(--raspberry);
    color: var(--raspberry);
    transform: translateY(-1px);
}

.home-details > summary::marker {
    display: none;
}

.home-details > summary::-webkit-details-marker {
    display: none;
}

.home-details > summary::before {
    content: "＋";
    font-size: 1rem;
    font-weight: 600;
}

.home-details[open] > summary::before {
    content: "−";
}

.home-details[open] > summary {
    margin-bottom: 24px;
}

.home-project-note {
    margin: 0 0 12px;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-muted);
}


/* ==========================================================
   Blocs pédagogiques
   ========================================================== */

.learning-card,
.reading-guide {
    background:
        rgba(150, 187, 255, 0.085);

    border:
        1px solid rgba(17, 75, 138, 0.10);

    border-radius:
        var(--radius-medium);
}

.learning-card {
    margin:
        24px
        0
        34px;

    padding:
        24px
        28px;
}


.learning-card h3 {
    margin:
        0
        0
        8px;

    color:
        var(--navy);
}


.learning-card > p:not(.dashboard-eyebrow) {
    margin-bottom:
        16px;

    color:
        var(--text-muted);

    line-height:
        1.55;
}

.learning-subnote {
    margin-top: 20px;

    padding-top: 16px;

    border-top:
        1px solid rgba(17, 75, 138, 0.12);
}


.learning-subnote strong {
    display: block;

    margin-bottom: 5px;

    color: var(--navy);

    font-size: 0.86rem;
}


.learning-subnote p {
    margin: 0 !important;

    color: var(--text-muted);

    font-size: 0.82rem;

    line-height: 1.5;
}

/* Petits tags méthodologiques */

.context-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top:
        18px;
}


.context-tag {
    display: inline-flex;

    align-items: center;

    padding:
        6px
        10px;

    background:
        rgba(255, 255, 255, 0.75);

    border:
        1px solid var(--border);

    border-radius:
        999px;

    color:
        var(--text-muted);

    font-size:
        0.75rem;

    font-weight:
        600;
}

/* ==========================================================
    7. CARTES DU PARCOURS
    ========================================================== */

.steps {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;

    margin-top: 30px;
    margin-bottom: 76px;
}


.step-card {
    position: relative;

    min-height: 205px;

    padding: 28px;

    background:
        rgba(255, 255, 255, 0.86);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-medium);

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}


.step-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(17, 75, 138, 0.20);

    box-shadow:
        var(--shadow-soft);
}


.step-number {
    margin-bottom: 20px;

    color: var(--raspberry);

    font-size: 0.82rem;

    font-weight: 700;

    letter-spacing: 0.14em;
}


.step-card h3 {
    margin-bottom: 10px;

    font-size: 1.2rem;
}


.step-card p:last-child {
    margin-bottom: 0;

    color: var(--text-muted);
}


/* accent discret différent pour chaque étape */

.step-card:nth-child(1) {
    border-top:
        3px solid var(--pink-light);
}

.step-card:nth-child(2) {
    border-top:
        3px solid var(--blue-light);
}

.step-card:nth-child(3) {
    border-top:
        3px solid var(--purple-light);
}


/* ==========================================================
    8. CARTES INDICATEURS
   ========================================================== */

/* ==========================================================
    Base commune des cartes
   ========================================================== */

.indicator-card,
.method-step,
.dashboard-visual,
.dashboard-reading-block,
.dashboard-info-block,
.summary-card,
.profile-card,
.region-details,
.region-profile-card {
    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-medium);
}

.indicator-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;

    margin:
        26px
        0;
}


.indicator-card {
    position: relative;

    padding:
        24px;

    overflow: hidden;

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}


.indicator-card:hover {
    transform:
        translateY(-3px);

    border-color:
        var(--border-strong);

    box-shadow:
        var(--shadow-soft);
}


.indicator-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 4px;

    background:
        var(--health-perceived);
}


.indicator-card:nth-child(2)::before {
    background:
        var(--health-limitation);
}


.indicator-card:nth-child(3)::before {
    background:
        var(--health-diabetes);
}


.indicator-card strong {
    display: block;

    margin-bottom: 9px;

    color: var(--navy);
}


.indicator-card p {
    margin-bottom: 5px;

    color: var(--text-muted);
}


.indicator-direction {
    color:
        var(--blue) !important;

    font-size: 0.87rem;
}


/* ==========================================================
   9. MÉTHODES & GUIDES DE LECTURE
   ========================================================== */

.reading-guide {
    margin:
        32px
        0;

    padding:
        27px
        30px;
}

.method-note {
    margin:
        30px
        0;

    padding:
        24px
        28px;

    background:
        rgba(249, 238, 202, 0.72);

    border-left:
        3px solid #E4C968;

    border-radius:
        0 var(--radius-small) var(--radius-small) 0;
}


.method-note h3 {
    margin-bottom: 10px;
}


.method-note p:last-child {
    margin-bottom: 0;
}

.method-notes-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;

    margin-top: 30px;
}


.method-notes-grid .method-note {
    margin: 0;
}

.method-details {
    margin: 28px 0 48px;
}

.method-details > summary {
    width: fit-content;

    color: var(--blue);

    font-weight: 650;

    cursor: pointer;
}

.method-details > summary:hover {
    color: var(--raspberry);
}

.method-details[open] > summary {
    margin-bottom: 20px;
}


/* ==========================================================
   10. SÉLECTEURS
   ========================================================== */

.selector {
    display: inline-flex;

    flex-wrap: wrap;

    gap: 4px;

    margin:
        26px
        0
        16px;

    padding: 5px;

    background:
        #EEF3F8;

    border:
        1px solid var(--border);

    border-radius:
        999px;
}


.selector label {
    cursor: pointer;

    padding:
        9px
        14px;

    border-radius:
        999px;

    transition:
        background var(--transition),
        color var(--transition);
}


.selector label:hover {
    background:
        rgba(255, 255, 255, 0.9);
}


.selector input {
    margin-right: 6px;

    accent-color:
        var(--raspberry);
}


/* ==========================================================
   11. DASHBOARDS DE DATAVISUALISATION
   ========================================================== */

.dashboard-section {
    margin-top: 34px;
}


/* Séparation entre deux grandes analyses successives */

.dashboard-section + .dashboard-section {
    margin-top: 100px;
}


.dashboard-section > h2:first-child {
    margin-top: 0;
}

/* ----------------------------------------------------------
   En-tête d'exploration
   ---------------------------------------------------------- */

.dashboard-header {
    margin-top: 48px;
    margin-bottom: 18px;
}


.dashboard-header h2 {
    margin-top: 0;
    margin-bottom: 8px;
}

.dashboard-header > p {
    margin-bottom: 18px;
}


/* ----------------------------------------------------------
   Corps du dashboard
   ---------------------------------------------------------- */

   .dashboard-body {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        clamp(300px, 31%, 350px);

    gap: 18px;

    align-items: start;
}


/* ----------------------------------------------------------
   Visualisation
   ---------------------------------------------------------- */

.dashboard-visual {
    width: 100%;
    height: var(--dashboard-height);

    min-width: 0;

    overflow: hidden;
}


.dashboard-chart {
    width: 100%;
    height: var(--dashboard-height);

    min-width: 0;
}


/* ----------------------------------------------------------
   Colonne de lecture
   ---------------------------------------------------------- */

.dashboard-side {
    display: flex;
    flex-direction: column;

    gap: var(--dashboard-gap);

    width: 100%;

    min-width: 0;
    min-height: var(--dashboard-height);

    height: auto;
}

/* ----------------------------------------------------------
   Cartes latérales
   ---------------------------------------------------------- */

.dashboard-reading-block,
.dashboard-info-block {
    min-width: 0;

    padding:
        15px
        17px;
}


/*
   Lecture garde la hauteur naturelle.
*/

.dashboard-reading-block {
    flex:
        0
        0
        auto;
}


/*
   Repères occupe l'espace restant.
   */

.dashboard-info-block {
    flex:
        1
        1
        auto;

    min-height: 0;
}


/* ----------------------------------------------------------
   Contenu des cartes
   ---------------------------------------------------------- */

.dashboard-eyebrow {
    margin:
        0
        0
        8px;

    font-size: 0.68rem;
}


.dashboard-reading-title {
    margin:
        0
        0
        10px;

    color: var(--navy);

    font-size: 1rem;
    font-weight: 700;

    line-height: 1.35;
}


.dashboard-reading-text {
    margin: 0;

    color: var(--text-muted);

    font-size: 0.84rem;

    line-height: 1.48;
}


.dashboard-interpretation {
    color: var(--navy);

    font-size: 0.95rem;
    font-weight: 600;

    line-height: 1.55;
}


.dashboard-info-block p {
    margin:
        0
        0
        7px;

    color: var(--text-muted);

    font-size: 0.8rem;

    line-height: 1.4;
}


.dashboard-info-block p:last-child {
    margin-bottom: 0;
}


.dashboard-stat {
    margin:
        14px
        0
        0;

    padding-top: 12px;

    border-top:
        1px solid var(--border);

    color: var(--navy);

    font-size: 0.82rem;
    font-weight: 700;
}

/* ==========================================================
   12. SYNTHÈSE SOCIALE
   ========================================================== */

.social-summary {
    margin-top: 72px;
}

.summary-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;

    margin:
        24px
        0
        30px;
}

/* ----------------------------------------------------------
   Carte
   ---------------------------------------------------------- */

.summary-card {
    display: flex;
    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}


.summary-card:hover {
    transform:
        translateY(-2px);

    border-color:
        var(--border-strong);

    box-shadow:
        var(--shadow-soft);
}


/* ----------------------------------------------------------
   En-tête
   ---------------------------------------------------------- */

.summary-card-header {
    min-height: 100px;

    padding:
        18px
        20px
        14px;
}


.summary-card-title {
    margin:
        0
        0
        5px;

    color:
        var(--navy);

    font-size:
        1.05rem;

    font-weight:
        650;

    line-height:
        1.3;
}


.summary-card-subtitle {
    margin: 0;

    color:
        var(--text-muted);

    font-size:
        0.8rem;

    line-height:
        1.45;
}


/* ----------------------------------------------------------
   Zone des indicateurs
   ---------------------------------------------------------- */

.summary-indicators {
    display: flex;
    flex-direction: column;

    gap: 2px;

    padding:
        4px
        20px
        16px;
}


/* ----------------------------------------------------------
   Une ligne d'indicateur
   ---------------------------------------------------------- */

.summary-indicator {
    padding:
        12px
        0;

    border-top:
        1px solid var(--border);
}


.summary-indicator-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 3px;
}


.summary-indicator-name {
    color:
        var(--text-muted);

    font-size:
        0.78rem;

    font-weight:
        600;

    line-height:
        1.3;
}


.summary-value {
    flex-shrink: 0;

    color:
        var(--navy);

    font-size:
        1.22rem;

    font-weight:
        700;

    line-height:
        1.15;

    letter-spacing:
        -0.015em;
}


.summary-detail {
    display: block;

    color:
        var(--text-muted);

    font-size:
        0.76rem;

    line-height:
        1.4;
}


/* ----------------------------------------------------------
   Accent par dimension
   ---------------------------------------------------------- */

.summary-card-finance {
    border-top:
        4px solid var(--social-finance);
}


.summary-card-diplome {
    border-top:
        4px solid var(--social-diplome);
}


.summary-card-pcs {
    border-top:
        4px solid var(--social-pcs);
}

/* ==========================================================
   13. BLOCS DE SYNTHÈSE
   ========================================================== */

.takeaway {
    position: relative;

    margin:
        58px
        0;

    padding:
        34px
        38px;

    overflow: hidden;

    background:
        var(--navy);

    border-radius:
        var(--radius-medium);

    color:
        white;
}


.takeaway .section-label {
    color:
        var(--pink-light);
}


.takeaway p:last-child {
    max-width: 900px;

    margin-bottom: 0;

    font-size: 1.08rem;

    line-height: 1.75;
}


/* détail graphique plus éditorial */

.takeaway::before {
    content: "";

    position: absolute;

    right: -55px;
    top: -80px;

    width: 190px;
    height: 190px;

    border-radius: 50%;

    background:
        var(--blue-light);

    opacity: 0.10;
}


.takeaway::after {
    content: "";

    position: absolute;

    right: 45px;
    bottom: -90px;

    width: 145px;
    height: 145px;

    border-radius: 50%;

    background:
        var(--raspberry);

    opacity: 0.14;
}


/* ==========================================================
   14. PROFILS TERRITORIAUX
   ========================================================== */

/* ==========================================================
   Parcours méthodologique
   ========================================================== */

   .method-flow-block {
    margin:
        48px
        0;

    padding:
        28px
        30px;

    background:
        rgba(150, 187, 255, 0.07);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-large);
}


.method-flow-eyebrow {
    margin:
        0
        0
        6px;

    font-size:
        0.68rem;
}


.method-flow-header h2 {
    margin:
        0
        0
        8px;
}


.method-flow-intro {
    margin:
        0;

    max-width:
        850px;

    color:
        var(--text-muted);
}


.method-flow {
    display: grid;

    grid-template-columns:
        1.2fr
        auto
        1fr
        auto
        1fr
        auto
        1fr;

    gap: 12px;

    align-items:
        stretch;

    margin-top:
        24px;
}


.method-step {
    padding:
        18px;
}


.method-step-number {
    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--raspberry);

    font-size:
        0.66rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;
}


.method-step strong {
    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--navy);

    font-size:
        0.9rem;
}


.method-step p {
    margin: 0;

    color:
        var(--text-muted);

    font-size:
        0.78rem;

    line-height:
        1.45;
}


.method-dimensions {
    display: flex;

    flex-direction:
        column;

    gap:
        7px;
}


.method-arrow {
    display: flex;

    align-items: center;

    justify-content: center;

    color:
        var(--raspberry);

    font-size:
        1.3rem;

    opacity:
        0.65;
}


.method-step-result {
    background:
        linear-gradient(
            135deg,
            rgba(150, 187, 255, 0.12),
            rgba(232, 189, 249, 0.10)
        );
}


/* ==========================================================
   Synthèse des quatre profils
   ========================================================== */

.profiles-summary-section {
    margin-top: 72px;
}


.profiles-summary-section .section-heading {
    margin-bottom: 12px;
}


.profiles-summary-intro {
    max-width: 1100px;

    margin-bottom: 18px;

    font-size: 1rem;

    line-height: 1.55;
}


/* ----------------------------------------------------------
   Les 4 profils
   ---------------------------------------------------------- */

.profiles-summary-section .profiles-grid {

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin:
        0
        0
        14px;
}


.profiles-summary-section .profile-card {
    display: flex;

    flex-direction: column;

    padding:
        18px
        18px
        16px;
}


/* Haut */

.profiles-summary-section .profile-card-top {
    margin-bottom: 10px;
}


.profiles-summary-section .profile-number {
    font-size: 0.7rem;
}

/* Titre */

.profiles-summary-section .profile-title {
    margin-bottom: 8px;

    font-size: 1rem;

    line-height: 1.28;
}


/* Description */

.profiles-summary-section .profile-description {
    font-size: 0.82rem;

    line-height: 1.5;
}


/* Régions */

.profiles-summary-section .profile-regions-block {
    margin-top: auto;

    padding-top: 12px;
}


.profiles-summary-section .profile-regions-label {
    font-size: 0.66rem;
}


.profiles-summary-section .profile-regions {
    font-size: 0.77rem;

    line-height: 1.4;
}


/* Note finale */

.profiles-summary-note {
    margin:
        10px
        0
        0;

    font-size: 0.82rem;

    line-height: 1.5;
}

/* ==========================================================
   Cartes des profils
   ========================================================== */

   .profiles-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;

    margin:
        24px
        0
        48px;
}


.profile-card {
    position: relative;

    min-width: 0;

    padding:
        22px
        24px
        20px;

    border-top-width:
        4px;

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}


.profile-card:hover {
    transform:
        translateY(-2px);

    box-shadow:
        var(--shadow-soft);
}

/* Couleurs identiques à la carte */

.profile-card-1 {
    border-top-color:
        #3A75C4;
}

.profile-card-2 {
    border-top-color:
        #8B6FC0;
}

.profile-card-3 {
    border-top-color:
        #E58A2B;
}

.profile-card-4 {
    border-top-color:
        #C94F7C;
}


/* Haut */

.profile-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom:
        12px;
}


.profile-number {
    color:
        var(--text-muted);

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;
}


.profile-count {
    padding:
        4px
        9px;

    background:
        rgba(150, 187, 255, 0.11);

    border-radius:
        999px;

    color:
        var(--text-muted);

    font-size:
        0.72rem;

    font-weight:
        600;
}


/* Nom */

.profile-title {
    margin:
        0
        0
        10px;

    color:
        var(--navy);

    font-size:
        1.05rem;

    line-height:
        1.3;

    font-weight:
        700;
}


/* Description */

.profile-description {
    margin:
        0;

    color:
        var(--text);

    font-size:
        0.86rem;

    line-height:
        1.55;
}


/* Régions */

.profile-regions-block {
    margin-top:
        18px;

    padding-top:
        14px;

    border-top:
        1px solid var(--border);
}


.profile-regions-label {
    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--text-muted);

    font-size:
        0.65rem;

    font-weight:
        700;

    letter-spacing:
        0.10em;
}


.profile-regions {
    margin: 0;

    color:
        var(--navy);

    font-size:
        0.82rem;

    line-height:
        1.45;

    font-weight:
        600;
}


/* ==========================================================
   Explorateur régional
   ========================================================== */

   .profiles-explorer {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        clamp(360px, 36%, 420px);

    gap: 22px;

    height: auto;

    margin:
        26px
        0
        38px;

    align-items: start;
}

.profiles-explorer-map {
    min-width: 0;
    height: 570px;

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-medium);

    overflow: hidden;

    box-shadow:
        var(--shadow-soft);

    padding:
        6px;
}


.profiles-map {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.region-profile-chart {
    width: 100%;
    height: 300px;
    min-height: 300px;
}


.profiles-map .js-plotly-plot,
.profiles-map .plot-container,
.profiles-map .svg-container {
    width: 100% !important;
    height: 100% !important;
}

.region-profile-chart .js-plotly-plot,
.region-profile-chart .plot-container,
.region-profile-chart .svg-container {
    width: 100% !important;
    height: 300px !important;
}


/* ==========================================================
   Colonnes de détails
   ========================================================== */

.profiles-explorer-details {
    display: flex;

    flex-direction: column;

    gap: 14px;

    width: 100%;

    min-width: 0;
}

/* ==========================================================
   État initial : pas de région sélectionnée
   ========================================================== */

.region-placeholder {
    min-height: 150px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        22px
        26px;

    background:
        linear-gradient(
            120deg,
            rgba(150, 187, 255, 0.10),
            rgba(232, 189, 249, 0.08)
        );
}


/* Petit label "EXPLORATION" */

.region-placeholder .region-eyebrow {
    margin:
        0
        0
        6px;

    color:
        var(--raspberry);

    font-size:
        0.67rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


/* Titre */

.region-placeholder .region-title {
    margin:
        0
        0
        8px;

    color:
        var(--navy);

    font-size:
        1rem;

    font-weight:
        700;

    line-height:
        1.2;
}


/* Texte d'aide */

.region-placeholder .region-text {
    margin: 0;

    max-width:
        360px;

    color:
        var(--text-muted);

    font-size:
        0.82rem;

    line-height:
        1.5;
}

/* ==========================================================
   Fiche régionale
   ========================================================== */

.region-details {
    margin: 0;

    overflow: hidden;

    box-shadow:
        var(--shadow-soft);
}


.region-header {
    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap: 16px;

    padding:
        17px
        24px
        15px;

    background:
        linear-gradient(
            120deg,
            rgba(150, 187, 255, 0.10),
            rgba(232, 189, 249, 0.08)
        );

    border-bottom:
        1px solid var(--border);
}


.region-eyebrow {
    margin:
        0
        0
        5px;

    font-size:
        0.67rem;
}


.region-title {
    margin:
        0
        0
        5px;

    color:
        var(--navy);

    font-size:
        1.05rem;

    font-weight:
        700;

    line-height:
        1.15;
}


.region-profile-name {
    margin: 0;

    max-width: 290px;

    color:
        var(--blue);

    font-size:
        0.82rem;

    font-weight:
        600;

    line-height:
        1.25;
}


/* Population */

.region-population {
    min-width:
        115px;

    text-align:
        right;
}


.region-population-label {
    display:
        block;

    margin-bottom:
        3px;

    color:
        var(--text-muted);

    font-size:
        0.65rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.region-population-value {
    display:
        block;

    color:
        var(--navy);

    font-size:
        1rem;

    font-weight:
        700;

    line-height:
        1.1;
}


.region-population-unit {
    display:
        block;

    margin-top:
        2px;

    color:
        var(--text-muted);

    font-size:
        0.7rem;
}


/* ==========================================================
   Indicateurs
   ========================================================== */

.region-metrics-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        18px;

    padding:
        15px
        24px
        16px;
}


.region-metrics-group {
    min-width: 0;
}


.region-metrics-group
+ .region-metrics-group {
    padding-left:
        18px;

    border-left:
        1px solid var(--border);
}


.region-section-label {
    margin:
        0
        0
        7px;

    color:
        var(--text-muted);

    font-size:
        0.65rem;

    font-weight:
        700;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;
}


.region-metric {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        baseline;

    gap:
        10px;

    padding:
        7px
        0;
}


.region-metric + .region-metric {
    border-top:
        1px solid rgba(228, 234, 241, 0.9);
}


.region-metric-label {
    color:
        var(--text-muted);

    font-size:
        0.78rem;

    line-height:
        1.25;
}


.region-metric-value {
    flex-shrink:
        0;

    color:
        var(--navy);

    font-size:
        0.88rem;

    font-weight:
        700;
}


/* ==========================================================
   Position relative
   ========================================================== */

#region-profile-container {
    width: 100%;
    height: auto;
}


.region-profile-card {
    display: grid;

    grid-template-rows:
        auto
        auto
        300px;

    width: 100%;

    height: auto;

    overflow: hidden;

    box-shadow:
        var(--shadow-soft);
}


.region-profile-heading {
    padding:
        14px
        20px
        0;
}


.region-profile-heading
.region-section-label {
    margin-bottom:
        4px;
}


.region-profile-heading h3 {
    margin: 0;

    color:
        var(--navy);

    font-size:
        0.97rem;

    font-weight:
        650;
}


.region-profile-note {
    margin:
        6px
        20px
        0;

    color:
        var(--text-muted);

    font-size:
        0.72rem;

    line-height:
        1.4;
}


/* ==========================================================
   15. SOURCES, TRANSITIONS & NOTES
   ========================================================== */

.result-note {
    margin:
        20px
        0
        44px;

    padding:
        19px
        23px;

    background:
        rgba(186, 244, 213, 0.47);

    border-left:
        3px solid #72C49B;

    border-radius:
        0 var(--radius-small) var(--radius-small) 0;
}


.result-note p {
    margin: 0;
}


/* ==========================================================
   Sources
   ========================================================== */

.sources-block {
    margin:
        58px
        0
        30px;

    padding:
        28px 0;

    border-top:
        1px solid var(--border);

    border-bottom:
        1px solid var(--border);
}

.sources {
    margin-top:
        44px;

    padding-top:
        22px;

    border-top:
        1px solid var(--border);

    color:
        var(--text-muted);

    font-size:
        0.85rem;

    line-height:
        1.75;
}


.sources-list {
    padding-left:
        20px;
}


.sources-list li {
    margin-bottom:
        8px;
}


a {
    color:
        var(--blue);

    text-decoration:
        none;

    font-weight:
        500;

    transition:
        color var(--transition);
}


a:hover {
    color:
        var(--raspberry);

    text-decoration:
        underline;
}


/* ==========================================================
   Transitions
   ========================================================== */

   .transition {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 10px;

    position: relative;

    margin-top: 44px;

    padding:
        22px
        0
        22px
        28px;

    color: var(--navy);

    border-left:
        3px solid var(--purple-light);
}


.transition p {
    margin: 0;

    max-width: 1000px;

    color: var(--navy);

    font-weight: 500;
}


/* Lien vers l'étape suivante */

.transition-link {
    display: inline-flex;
    align-items: center;

    gap: 0.45rem;

    width: fit-content;

    padding: 0;

    background: transparent;

    border: 0;

    color: var(--blue);

    font: inherit;
    font-weight: 650;
    line-height: 1.4;

    cursor: pointer;
}


.transition-arrow {
    display: inline-block;

    width: 17px;
    height: 17px;

    flex-shrink: 0;

    background-color: currentColor;

    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / contain
        no-repeat;

    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / contain
        no-repeat;

    transition:
        transform var(--transition);
}


.transition-link:hover {
    color: var(--raspberry);
}


.transition-link:hover .transition-arrow {
    transform:
        translateX(3px);
}

.transition-section {
    margin-top: 58px;
}

.transition-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.transition-choice {
    height: 100%;
    margin-top: 0;
}


/* ==========================================================
   Notes
   ========================================================== */

.note {
    color:
        var(--text-muted);

    font-size:
        0.83rem;

    line-height:
        1.65;
}

.source-note {
    margin-top: -18px;
    margin-bottom: 44px;

    font-size: 0.82rem;
    color: var(--text-muted);
}

.source-note a {
    color: var(--blue);
}

/* ==========================================================
   16. RESPONSIVE
   ========================================================== */

/* ==========================================================
   Explorateur régional — affichage ordinateur
   ========================================================== */

   @media (min-width: 981px) {

    /*
       L'explorateur prend la hauteur nécessaire au contenu.
       La carte est centrée verticalement dans sa colonne.
    */

    .profiles-explorer {
        height: auto;

        align-items: center;
    }


    /*
       Carte volontairement un peu plus compacte.
    */

    .profiles-explorer-map {
        height: 550px;

        align-self: center;
    }


    /*
       La colonne droite suit la hauteur réelle
       de la fiche et du graphique.
    */

    .profiles-explorer-details {
        display: flex;

        flex-direction: column;

        gap: 14px;

        width: 100%;

        height: auto;

        min-width: 0;
    }


    #region-profile-container {
        width: 100%;

        height: auto;
    }


    /*
       Le graphique garde sa hauteur prévue.
       Il n'est plus autorisé à être compressé.
    */

    .region-profile-card {
        grid-template-rows:
            auto
            auto
            300px;

        width: 100%;

        height: auto;
    }


    .region-profile-chart {
        width: 100%;

        height: 300px;

        min-height: 300px;
    }


    .region-profile-chart .js-plotly-plot,
    .region-profile-chart .plot-container,
    .region-profile-chart .svg-container {
        width: 100% !important;

        height: 300px !important;
    }


    /*
       Mise en page légèrement compacte sur ordinateur.
    */

    .region-header {
        padding:
            14px
            20px
            12px;
    }


    .region-metrics-grid {
        padding:
            12px
            20px
            13px;
    }


    .region-metric {
        padding:
            6px
            0;
    }


    .region-profile-heading {
        padding:
            11px
            18px
            0;
    }


    .region-profile-note {
        margin:
            4px
            18px
            0;

        line-height: 1.35;
    }
}

/* ----------------------------------------------------------
   <= 1050 px
   ---------------------------------------------------------- */

   @media (max-width: 1050px) {

    .profiles-summary-section .profiles-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* ----------------------------------------------------------
   <= 950 px
   ---------------------------------------------------------- */

@media (max-width: 950px) {

    .method-flow {
        grid-template-columns:
            1fr;
    }


    .method-arrow {
        transform:
            rotate(90deg);

        min-height:
            18px;
    }
}

/* ----------------------------------------------------------
   <= 980 px
   Dashboard tablette / fenêtre réduite
   ---------------------------------------------------------- */

@media (max-width: 980px) {

    .dashboard-body {
        grid-template-columns: 1fr;
    }

    /*
        Le graphique conserve sa hauteur fixe.
    */

    .dashboard-visual,
    .dashboard-chart {
        height: var(--dashboard-height);
    }

    /*
        Lecture et repères passent sous le graphique,
        mais restent côte à côte tant qu'il y a assez de place.
    */

    .dashboard-side {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 14px;

        min-height: 0;
        height: auto;
    }

    .dashboard-reading-block,
    .dashboard-info-block {
        height: auto;
    }


    .profiles-explorer {
        grid-template-columns:
            1fr;

        height:
            auto;
    }


    .profiles-explorer-map {
        height:
            520px;
    }


    .profiles-explorer-details {
        display:
            flex;

        flex-direction:
            column;

        height:
            auto;
    }


    .region-profile-card {
        height:
            auto;
    }


    .region-profile-chart {
        width: 100%;
        height: 300px;
        min-height: 300px;
    }
}

/* ----------------------------------------------------------
   <= 900 px
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    .tab-content {
        width:
            min(
                100% - 32px,
                1160px
            );

        padding-top:
            48px;
    }

    .steps,
    .indicator-grid,
    .summary-cards,
    .profiles-grid {
        grid-template-columns:
            1fr;
    }


    .summary-card-header,
    .summary-indicator {
        min-height:
            auto;
    }


    .app-tab {
        padding:
            14px
            10px !important;

        font-size:
            0.85rem !important;
    }
}


/* ----------------------------------------------------------
   <= 850 px
   ---------------------------------------------------------- */

@media (max-width: 850px) {

    .method-notes-grid {
        grid-template-columns:
            1fr;
    }
}

/* ----------------------------------------------------------
   <= 768 px
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    .transition-choices {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------------
   <= 650 px
   ---------------------------------------------------------- */

@media (max-width: 650px) {

    .profiles-summary-section .profiles-grid {
        grid-template-columns:
            1fr;
    }
    
    .profiles-explorer-map {
        height: 460px;
    }
}


/* ----------------------------------------------------------
   <= 600 px
   ---------------------------------------------------------- */

@media (max-width: 600px) {

    .tab-content {
        width:
            min(
                100% - 24px,
                1160px
            );

        padding-top:
            36px;
    }


    h1 {
        font-size:
            2.05rem;
    }


    .question-block,
    .takeaway,
    .reading-guide {
        padding:
            22px;
    }

    .selector {
        display: flex;
    
        width: 100%;
    
        border-radius:
            var(--radius-medium);
    }
    
    .selector label {
        flex:
            1
            1
            100%;
    
        padding:
            10px
            12px;
    }

    .dashboard-visual {
        overflow-x: auto;
    
        -webkit-overflow-scrolling: touch;
    }
    
    .dashboard-chart {
        min-width: 520px;
    
        height: var(--dashboard-height);
    }

    .region-metrics-grid {
        grid-template-columns:
            1fr;
    
        gap: 0;
    
        padding:
            16px
            20px;
    }
    
    .region-metrics-group
    + .region-metrics-group {
        margin-top: 12px;
    
        padding-top: 14px;
        padding-left: 0;
    
        border-top:
            1px solid var(--border);
    
        border-left:
            0;
    }

    .region-header {
        flex-direction:
            column;
    
        gap: 12px;
    
        padding:
            17px
            20px;
    }
    
    .region-population {
        min-width: 0;
    
        text-align:
            left;
    }

    .profiles-explorer-map {
        height: 430px;
    }

    /* ==========================================================
    Navigation mobile
    ========================================================== */

    .mobile-nav {
        display: block;

        position: sticky;
        top: 0;

        z-index: 200;

        padding:
            8px
            12px;

        background:
            rgba(248, 250, 253, 0.96);

        backdrop-filter:
            blur(12px);

        border-bottom:
            1px solid var(--border);
    }


    /* ----------------------------------------------------------
    Bouton principal
    ---------------------------------------------------------- */

    .mobile-nav > summary {
        display: flex;

        align-items: center;

        gap: 10px;

        min-height: 46px;

        padding:
            9px
            12px;

        background:
            var(--surface);

        border:
            1px solid var(--border);

        border-radius:
            var(--radius-small);

        color:
            var(--navy);

        cursor: pointer;

        box-shadow:
            var(--shadow-soft);

        list-style: none;
    }


    .mobile-nav > summary::-webkit-details-marker {
        display: none;
    }


    .mobile-nav > summary::marker {
        display: none;
    }


    /* ----------------------------------------------------------
    Contenu du bouton
    ---------------------------------------------------------- */

    .mobile-nav-icon {
        color:
            var(--raspberry);

        font-size:
            1rem;

        line-height:
            1;
    }


    .mobile-nav-current {
        flex: 1;

        min-width: 0;

        font-size:
            0.88rem;

        font-weight:
            650;

        white-space:
            nowrap;

        overflow:
            hidden;

        text-overflow:
            ellipsis;
    }


    .mobile-nav-chevron {
        color:
            var(--text-muted);

        font-size:
            0.9rem;

        transition:
            transform var(--transition);
    }


    .mobile-nav[open] .mobile-nav-chevron {
        transform:
            rotate(180deg);
    }


    /* ----------------------------------------------------------
    Menu déroulant
    ---------------------------------------------------------- */

    .mobile-nav-menu {
        display: flex;

        flex-direction: column;

        gap: 4px;

        margin-top: 7px;

        padding:
            6px;

        background:
            var(--surface);

        border:
            1px solid var(--border);

        border-radius:
            var(--radius-medium);

        box-shadow:
            0 10px 30px rgba(0, 43, 89, 0.10);
    }


    /* ----------------------------------------------------------
    Liens du menu
    ---------------------------------------------------------- */

    .mobile-nav-item {
        width: 100%;

        padding:
            11px
            12px;

        background:
            transparent;

        border:
            0;

        border-radius:
            var(--radius-small);

        color:
            var(--text);

        font:
            inherit;

        font-size:
            0.86rem;

        font-weight:
            550;

        line-height:
            1.3;

        text-align:
            left;

        cursor:
            pointer;

        transition:
            background var(--transition),
            color var(--transition);
    }


    .mobile-nav-item:hover {
        background:
            rgba(150, 187, 255, 0.10);

        color:
            var(--navy);
    }

    /*
    Les onglets Dash restent fonctionnels,
    mais leur barre de navigation est masquée.
    */

    .tabs-container {
        display: none !important;
    }
}