/* ===========================================================
   CONSTRUCTEUR DE STACK COMMERCIALE
   Template : page-stack-builder.php
   =========================================================== */

.stack-page {
    --stack-ok: #2E9E6B;
    --stack-dup: #E0932F;
    --stack-no: #C2C9D4;
    --stack-panel-w: 340px;
}

body.theme-light .stack-page {
    --stack-no: #C2C9D4;
}

body.theme-dark .stack-page {
    --stack-ok: #5DD39E;
    --stack-dup: #FFB861;
    --stack-no: #384252;
}

/* ---------- Hero ---------- */

.stack-hero {
    /* La navbar est fixe (top: 32px, ~56px de haut) : il faut dégager 6rem comme .pillar-hero */
    padding: 6rem 0 var(--spacing-xl);
    text-align: center;
}

.stack-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: var(--color-bg-elevated);
    margin-bottom: var(--spacing-md);
}

.stack-badge svg {
    width: 14px;
    height: 14px;
}

.stack-hero h1 {
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.15;
    margin-bottom: var(--spacing-md);
}

.stack-hero-sub {
    max-width: 46rem;
    margin: 0 auto var(--spacing-xl);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.stack-builder {
    padding-bottom: var(--spacing-xxl);
}

.stack-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--stack-panel-w);
    gap: var(--spacing-xl);
    /* stretch, et non start : sans hauteur de rangée l'aside ne peut pas coller au scroll */
    align-items: stretch;
}

.stack-catalog {
    min-width: 0;
}

.stack-panel {
    align-self: stretch;
}

/* ---------- Sélecteur de sièges (en tête du panneau) ---------- */

.stack-seats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.55rem;
    margin-bottom: 0.55rem;
    border-bottom: 1px solid var(--color-border);
}

.stack-seats label {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
}

.stack-seats-control {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg);
    padding: 0.15rem;
}

.stack-seats-btn {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.stack-seats-btn:hover {
    background: var(--color-surface);
    color: var(--color-primary);
}

/* Caractères et non icônes : ce contrôle ne doit dépendre d'aucun script externe */
.stack-seats-btn span {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1;
    display: block;
    margin-top: -2px;
}

.stack-seats-btn svg {
    width: 14px;
    height: 14px;
}

#stack-seats-input {
    width: 2.6rem;
    border: none;
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    -moz-appearance: textfield;
}

#stack-seats-input::-webkit-outer-spin-button,
#stack-seats-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Option de la famille sales intelligence : sans numéros, pas d'enrichissement téléphone */
.stack-cat-option {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    flex: 0 0 auto;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg-elevated);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.stack-cat-option:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.stack-cat-option input {
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* ---------- Zone de recherche des outils ---------- */

/*
 * Hauteur bornée : on défile à l'intérieur au lieu d'allonger la page. Les titres
 * de famille sont collants en haut de la zone, ce qui donne le repère que la barre
 * d'onglets fournissait, sans widget de navigation à comprendre.
 */
.stack-scroll {
    /* Repli écran court ; sur écran classique la hauteur est alignée sur celle
       de la sidebar, voir la media query plus bas. */
    height: clamp(360px, 56vh, 620px);
    overflow-y: auto;
    padding: 0 var(--spacing-md) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    overscroll-behavior: contain;
}

/* ---------- Catégories ---------- */

.stack-cat {
    margin-bottom: var(--spacing-md);
}

.stack-cat:last-child {
    margin-bottom: 0;
}

/*
 * Collant en haut de la zone de défilement : indique en permanence dans quelle
 * famille on se trouve. Remplace la barre d'onglets, sans widget à comprendre.
 */
.stack-cat-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: var(--spacing-md) 0 0.7rem;
    margin-bottom: 0.8rem;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

.stack-cat-head svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 0.1rem;
    color: var(--color-primary);
}

.stack-cat-head h2 {
    font-size: 1.0625rem;
    margin-bottom: 0.1rem;
}

.stack-cat-head p {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
    margin: 0;
}

.stack-tools {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 0.6rem;
}

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

.stack-tool {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-primary);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.stack-tool:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.stack-tool.is-selected {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
    background: var(--color-bg-elevated);
}

.stack-tool-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.stack-tool-name {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.stack-tool-plan {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-top: 0.1rem;
}

.stack-tool-check {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.stack-tool-check svg {
    width: 13px;
    height: 13px;
}

.stack-tool.is-selected .stack-tool-check {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #FFFFFF;
}

/* Prix unitaire, figé côté serveur : c'est la base de facturation de l'éditeur.
   Le total pour l'effectif choisi est dans le panneau, pas répété sur chaque carte. */
.stack-tool-price {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.3;
}

.stack-tool-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.stack-tool-origin,
.stack-tool-flag {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--color-surface);
    color: var(--color-text-secondary);
}

.stack-origin-fr {
    background: rgba(93, 211, 158, 0.16);
    color: #1F7A54;
}

body.theme-dark .stack-origin-fr {
    color: #5DD39E;
}

.stack-flag-setup,
.stack-flag-min,
.stack-flag-quote {
    background: rgba(224, 147, 47, 0.15);
    color: #8A5A12;
}

body.theme-dark .stack-flag-setup,
body.theme-dark .stack-flag-min,
body.theme-dark .stack-flag-quote {
    color: #FFB861;
}

/* ---------- Panneau résultat ---------- */

.stack-panel-inner {
    position: sticky;
    top: 72px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-elevated);
    overflow: hidden;
}

.stack-panel-toggle {
    display: none;
}

.stack-panel-body {
    padding: 0.7rem;
}

/* ---------- Comparaison : deux cartes, dégradé Charik en bordure ---------- */

.stack-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.stack-compare-card {
    padding: 0.5rem 0.65rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}

/*
 * Bordure dégradée sans pseudo-élément : deux couches de fond, l'une bornée à
 * padding-box pour le fond plein, l'autre à border-box pour le dégradé.
 */
.stack-compare-card.is-charik {
    border-color: transparent;
    background:
        linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
        var(--gradient-primary) border-box;
}

.stack-compare-title {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-secondary);
    margin-bottom: 0.1rem;
}

.stack-compare-card.is-charik .stack-compare-title {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stack-compare-main {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.stack-compare-main small {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.stack-compare-sub {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* ---------- Indicateurs comparés ---------- */

.stack-metrics {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

.stack-metrics li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.1rem 3.1rem;
    gap: 0.3rem;
    align-items: baseline;
    padding: 0.2rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.8125rem;
}

.stack-metrics li:last-child {
    border-bottom: none;
}

.stack-metric-label {
    color: var(--color-text-secondary);
    line-height: 1.3;
}

.stack-metric-yours,
.stack-metric-charik {
    text-align: right;
    font-weight: 700;
    white-space: nowrap;
}

.stack-metric-charik {
    color: var(--color-primary);
}

/* ---------- Liste des outils retenus ---------- */

.stack-selected-wrap {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

.stack-selected-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-secondary);
    margin-bottom: 0.2rem;
}

.stack-clear {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-family: var(--font-primary);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: underline;
    cursor: pointer;
}

.stack-clear:hover {
    color: var(--stack-dup);
}

.stack-selected {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Repli fenêtre courte (< 600px de haut) : sinon la liste absorbe la hauteur libre */
    max-height: 9rem;
    overflow-y: auto;
}

.stack-selected li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.18rem 0;
    font-size: 0.8125rem;
}

.stack-selected-remove {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-secondary);
    font-family: var(--font-primary);
    font-size: 0.8125rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.stack-selected-remove:hover {
    border-color: var(--stack-dup);
    color: var(--stack-dup);
    background: rgba(224, 147, 47, 0.12);
}

.stack-selected-name {
    line-height: 1.3;
    font-weight: 600;
}

.stack-selected-plan {
    font-weight: 400;
    color: var(--color-text-secondary);
}

.stack-selected-flag {
    display: inline-block;
    padding: 0 0.3rem;
    border-radius: var(--radius-full);
    background: rgba(224, 147, 47, 0.15);
    color: #8A5A12;
    font-size: 0.625rem;
    font-weight: 600;
}

body.theme-dark .stack-selected-flag {
    color: #FFB861;
}

.stack-selected-cost {
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
}

.stack-selected-empty {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

/* ---------- Compléments Charik ---------- */

.stack-complements {
    margin: 0.5rem 0 0;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-md);
    border: 1px dashed var(--color-border);
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.stack-complements strong,
.stack-complements [data-out="complements-list"] {
    color: var(--color-text);
    font-weight: 600;
}

/* Fonction obtenue via une intégration, et non nativement */
.stack-cov-charik.is-extra .stack-cov-by {
    font-weight: 600;
    font-style: italic;
}

/* ---------- Verdicts appairés : prix et couverture au même niveau ---------- */

.stack-verdicts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.stack-verdict {
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    border-left: 3px solid var(--color-border);
}

.stack-verdict[hidden] {
    display: none;
}

.stack-verdict-label {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-secondary);
}

.stack-verdict-value {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    margin-top: 0.1rem;
    white-space: nowrap;
}

.stack-verdict-note {
    display: block;
    font-size: 0.6875rem;
    line-height: 1.35;
    color: var(--color-text-secondary);
}

/* Le prix : la couleur suit le sens réel de l'écart, sans supposer que Charik gagne */
.stack-verdict-price {
    border-left-color: var(--stack-dup);
}

.stack-verdict-price .stack-verdict-value {
    color: var(--stack-dup);
}

.stack-verdict-price.is-below {
    border-left-color: var(--color-primary);
}

.stack-verdict-price.is-below .stack-verdict-value {
    color: var(--color-primary);
}

/* La couverture : la couleur suit le gagnant, sans parti pris */
.stack-verdict-scope.is-charik {
    border-left-color: var(--color-primary);
}

.stack-verdict-scope.is-charik .stack-verdict-value {
    color: var(--color-primary);
}

.stack-verdict-scope.is-yours {
    border-left-color: var(--stack-dup);
}

.stack-verdict-scope.is-yours .stack-verdict-value {
    color: var(--stack-dup);
}

.stack-verdict-scope.is-tie .stack-verdict-value {
    color: var(--color-text);
}

/* Valeur gagnante dans le tableau d'indicateurs */
.stack-metric-yours.is-win,
.stack-metric-charik.is-win {
    position: relative;
}

.stack-metric-yours.is-win::after,
.stack-metric-charik.is-win::after {
    content: '';
    position: absolute;
    left: -0.25rem;
    right: -0.25rem;
    top: -0.1rem;
    bottom: -0.1rem;
    border-radius: var(--radius-sm);
    background: rgba(46, 158, 107, 0.16);
    z-index: -1;
}

.stack-metrics li[data-metric="coverage"] {
    isolation: isolate;
}

/* ---------- CTA panneau ---------- */

.stack-panel-cta {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

.stack-panel-cta .btn-cta-primary {
    display: block;
    width: 100%;
    padding: 0.6rem 1rem;
    font-size: 0.9375rem;
    text-align: center;
}

.stack-panel-microcopy {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin: 0.3rem 0 0;
}

.stack-panel-microcopy a {
    color: var(--color-text-secondary);
    text-decoration: underline;
}

.stack-panel-microcopy a:hover {
    color: var(--color-primary);
}

.stack-microcopy-sep {
    opacity: 0.5;
}

.stack-share {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-family: var(--font-primary);
    font-size: 0.75rem;
    text-decoration: underline;
    cursor: pointer;
}

.stack-share:hover {
    color: var(--color-primary);
}

/* ---------- Infobulle de survol ---------- */

/*
 * Positionnée en fixed par le JS : à l'intérieur de la zone de défilement elle
 * serait rognée par l'overflow. Un seul élément partagé pour toutes les cartes.
 */
.stack-tip {
    position: fixed;
    z-index: 200;
    max-width: 20rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
    box-shadow: var(--shadow-lg), 0 8px 30px rgba(15, 23, 42, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(3px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
    pointer-events: none;
}

.stack-tip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.stack-tip-title {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.stack-tip-body {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

/* ---------- Panneau pleine hauteur (écran classique uniquement) ---------- */

/*
 * Au-delà de 900px de large et 600px de haut, le panneau occupe toute la hauteur
 * utile : les blocs de chiffres restent en haut, le CTA en bas, et la liste des
 * outils retenus absorbe tout l'espace libre. Elle affiche donc d'autant plus
 * d'outils que l'écran est grand, sans jamais faire déborder le panneau.
 */
@media (min-width: 901px) and (min-height: 600px) {
    .stack-panel-inner {
        height: calc(100vh - 72px - 1.25rem);
        display: flex;
        flex-direction: column;
    }

    /* Même hauteur que la sidebar : les deux colonnes se terminent au même trait */
    .stack-scroll {
        height: calc(100vh - 72px - 1.25rem);
    }

    .stack-panel-body {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .stack-panel-body {
        overflow-y: auto;
    }

    .stack-panel-cta {
        flex: 0 0 auto;
    }
}

/*
 * Fenêtre large mais courte (moins de 600px de haut) : le panneau ne peut pas
 * tenir entièrement. On le borne avec défilement interne, sinon le CTA du bas
 * devient inatteignable, l'élément collant étant épinglé sous la navbar.
 */
@media (min-width: 901px) and (max-height: 599px) {
    .stack-panel-inner {
        max-height: calc(100vh - 72px - 1rem);
        overflow-y: auto;
    }
}

/* ---------- Couverture ---------- */

.stack-coverage {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-border);
    scroll-margin-top: 100px;
}

.stack-section-head {
    max-width: 44rem;
    margin-bottom: var(--spacing-lg);
}

.stack-section-head h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 0.6rem;
}

.stack-section-head p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0;
}

.stack-coverage-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.stack-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.stack-dot {
    flex: 0 0 auto;
    display: block;
    width: 9px;
    height: 9px;
    border-radius: var(--radius-full);
    background: var(--stack-no);
}

.stack-dot-ok {
    background: var(--stack-ok);
}

.stack-dot-dup {
    background: var(--stack-dup);
}

.stack-dot-no {
    background: var(--stack-no);
}

.stack-coverage-table {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    overflow: hidden;
}

.stack-cov-head,
.stack-cov-row {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--spacing-sm);
    padding: 0.85rem var(--spacing-md);
}

.stack-cov-head {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    background: var(--color-surface);
}

.stack-cov-group-title {
    padding: 0.6rem var(--spacing-md);
    background: var(--color-surface);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary);
}

.stack-cov-row {
    border-top: 1px solid var(--color-border);
    align-items: start;
}

.stack-cov-label {
    font-size: 0.9375rem;
    font-weight: 600;
}

.stack-cov-help {
    display: block;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin-top: 0.15rem;
}

.stack-cov-yours,
.stack-cov-charik {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    font-size: 0.875rem;
}

.stack-cov-yours .stack-dot,
.stack-cov-charik .stack-dot {
    position: relative;
    top: 0.35rem;
}

.stack-cov-by {
    line-height: 1.4;
}

.stack-cov-yours.is-no .stack-cov-by,
.stack-cov-charik.is-no .stack-cov-by {
    color: var(--color-text-secondary);
}

.stack-cov-yours.is-dup .stack-cov-by {
    color: var(--stack-dup);
    font-weight: 600;
}

.stack-cov-yours.is-ok .stack-cov-by,
.stack-cov-charik.is-ok .stack-cov-by {
    font-weight: 600;
}

/* Fonction écartée par l'option « Enrichir les numéros » : hors comparaison */
.stack-cov-row.is-out {
    opacity: 0.45;
}

.stack-cov-row.is-out .stack-cov-yours,
.stack-cov-row.is-out .stack-cov-charik {
    visibility: hidden;
}

/* ---------- Synthèse trous / doublons ---------- */

.stack-coverage-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.stack-summary-card {
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}

.stack-summary-card h3 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 1rem;
    margin-bottom: 0.6rem;
}

.stack-summary-card h3 svg {
    width: 17px;
    height: 17px;
    color: var(--color-text-secondary);
}

.stack-summary-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.stack-summary-card li {
    padding: 0.35rem 0;
    font-size: 0.875rem;
    border-top: 1px solid var(--color-border);
}

.stack-summary-card li:first-child {
    border-top: none;
}

.stack-summary-card li span {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* ===========================================================
   PAGE SEO : contenu statique
   =========================================================== */

/* ---------- Accès à l'outil ---------- */

.stack-launch {
    padding: 0 0 var(--spacing-xxl);
}

.stack-launch-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--spacing-xl);
    align-items: center;
}

.stack-launch-text h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 0.6rem;
}

.stack-launch-text p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

.stack-launch-note {
    font-size: 0.8125rem;
    margin: 0.6rem 0 0;
}

.stack-launch-shot {
    display: block;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl), 0 20px 60px rgba(15, 23, 42, 0.10);
    transition: transform 0.2s, box-shadow 0.2s;
}

.stack-launch-shot:hover {
    transform: translateY(-3px);
}

.stack-launch-shot img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- Stacks types chiffrées ---------- */

.stack-scenarios {
    padding: var(--spacing-xxl) 0;
    background: var(--color-bg-elevated);
}

.stack-scenario {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}

.stack-scenario:last-child {
    margin-bottom: 0;
}

.stack-scenario-head {
    margin-bottom: var(--spacing-md);
}

.stack-scenario-head h3 {
    font-size: 1.25rem;
    margin-bottom: 0.3rem;
}

.stack-scenario-head p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0;
}


.stack-scenario-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--spacing-lg);
    align-items: start;
}

.stack-scenario-tools table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.stack-scenario-tools th,
.stack-scenario-tools td {
    padding: 0.5rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.stack-scenario-tools thead th {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.stack-scenario-tools tbody th span {
    display: block;
    font-weight: 400;
    color: var(--color-text-secondary);
}

.stack-scenario-tools .is-num {
    text-align: right;
    font-weight: 700;
    white-space: nowrap;
}

.stack-scenario-tools tfoot th,
.stack-scenario-tools tfoot td {
    border-bottom: none;
    border-top: 2px solid var(--color-border);
    font-weight: 700;
}

.stack-scenario-tools tfoot .is-soft th,
.stack-scenario-tools tfoot .is-soft td {
    border-top: none;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.stack-scenario-verdict .stack-metrics {
    margin-top: 0.6rem;
}

.stack-scenario-verdict .stack-verdicts {
    margin-top: 0.5rem;
}

/* ---------- Catalogue statique ---------- */

.stack-catalogue {
    padding: var(--spacing-xxl) 0;
}

.stack-catalogue-cat {
    font-size: 1.125rem;
    margin: var(--spacing-lg) 0 0.6rem;
}

.stack-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.stack-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.stack-table th,
.stack-table td {
    padding: 0.6rem 0.85rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border);
}

.stack-table tbody tr:last-child th,
.stack-table tbody tr:last-child td {
    border-bottom: none;
}

.stack-table thead th {
    background: var(--color-surface);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.stack-table tbody th span {
    display: block;
    font-weight: 400;
    color: var(--color-text-secondary);
}

.stack-table .is-price {
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
}

.stack-table .is-note {
    color: var(--color-text-secondary);
    line-height: 1.5;
    min-width: 18rem;
}

/* ---------- Les fonctions ---------- */

.stack-functions {
    padding: var(--spacing-xxl) 0;
    background: var(--color-bg-elevated);
}

.stack-functions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
}

.stack-functions-group {
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}

.stack-functions-group h3 {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    margin-bottom: 0.6rem;
}

.stack-functions-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.stack-functions-group li {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 0.15rem 0.5rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--color-border);
    font-size: 0.875rem;
}

.stack-functions-group li:first-child {
    border-top: none;
}

.stack-functions-group li .stack-dot {
    margin-top: 0.4rem;
}

.stack-functions-group li strong {
    font-weight: 600;
}

.stack-functions-group li span:not(.stack-dot) {
    grid-column: 2;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.stack-functions-group li em {
    grid-column: 2;
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

@media (max-width: 900px) {
    .stack-launch-grid,
    .stack-scenario-body {
        grid-template-columns: 1fr;
    }

    .stack-scenario {
        padding: var(--spacing-md);
    }
}

/* ---------- Méthodologie ---------- */

.stack-method {
    padding: var(--spacing-xxl) 0;
}

.stack-method-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.stack-method-card {
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-elevated);
}

.stack-method-card h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.stack-method-card p {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--color-text-secondary);
    margin: 0;
}

.stack-sources summary {
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-primary);
    padding: 0.5rem 0;
}

.stack-sources-list {
    list-style: none;
    margin: var(--spacing-sm) 0 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.stack-sources-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.6rem var(--spacing-md);
    font-size: 0.875rem;
    border-top: 1px solid var(--color-border);
}

.stack-sources-list li:first-child {
    border-top: none;
}

.stack-source-confidence {
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--color-surface);
    color: var(--color-text-secondary);
}

.stack-conf-official {
    background: rgba(46, 158, 107, 0.14);
    color: #1F7A54;
}

body.theme-dark .stack-conf-official {
    color: #5DD39E;
}

.stack-conf-estimate {
    background: rgba(224, 147, 47, 0.15);
    color: #8A5A12;
}

body.theme-dark .stack-conf-estimate {
    color: #FFB861;
}

.stack-source-date {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

/* ---------- Editorial ---------- */

.stack-editorial {
    padding: 0 0 var(--spacing-xxl);
}

.stack-editorial-body {
    font-size: 1.0625rem;
    line-height: 1.85;
}

.stack-editorial-body h2 {
    margin: var(--spacing-lg) 0 var(--spacing-sm);
}

.stack-editorial-body p {
    margin-bottom: var(--spacing-sm);
}

/* ---------- FAQ ---------- */

.stack-faq {
    padding: var(--spacing-xxl) 0;
    background: var(--color-bg-elevated);
}

.stack-faq-item {
    border-bottom: 1px solid var(--color-border);
}

.stack-faq-item summary {
    cursor: pointer;
    padding: var(--spacing-sm) 0;
    font-size: 1.0625rem;
    font-weight: 600;
    list-style: none;
}

.stack-faq-item summary::-webkit-details-marker {
    display: none;
}

.stack-faq-item summary::after {
    content: '+';
    float: right;
    color: var(--color-primary);
    font-weight: 400;
}

.stack-faq-item[open] summary::after {
    content: '\2013';
}

.stack-faq-item p {
    padding: 0 0 var(--spacing-sm);
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
    margin: 0;
}

/* ---------- CTA final ---------- */

.stack-cta {
    padding: var(--spacing-xxl) 0;
    text-align: center;
}

.stack-cta h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: var(--spacing-sm);
}

.stack-cta p {
    max-width: 40rem;
    margin: 0 auto var(--spacing-lg);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.stack-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.stack-cta-microcopy {
    font-size: 0.8125rem;
    margin-top: var(--spacing-sm);
}

/* ===========================================================
   OUTIL PLEIN ÉCRAN (page-stack-app.php)
   Un seul défilement : celui de la liste d'outils. Le body ne bouge pas.
   =========================================================== */

body.stack-app-body {
    height: 100vh;
    overflow: hidden;
}

.stack-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.stack-app-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 0.55rem var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
}

.stack-app-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}

.stack-app-back:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.stack-app-back svg {
    width: 15px;
    height: 15px;
}

.stack-app-title {
    min-width: 0;
    line-height: 1.25;
}

.stack-app-title strong {
    display: block;
    font-size: 0.9375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stack-app-title span {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.stack-app-tabs {
    display: flex;
    gap: 0.3rem;
    margin-left: auto;
    flex: 0 0 auto;
    padding: 3px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg);
}

.stack-app-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-secondary);
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.stack-app-tab-num {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    font-weight: 800;
}

.stack-app-tab.is-active .stack-app-tab-num {
    background: rgba(255, 255, 255, 0.28);
    color: #FFFFFF;
}

.stack-app-tab-badge {
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    font-weight: 700;
}

.stack-app-tab.is-active .stack-app-tab-badge {
    background: rgba(255, 255, 255, 0.28);
    color: #FFFFFF;
}

.stack-app-tab:hover {
    color: var(--color-primary);
}

.stack-app-tab.is-active {
    background: var(--color-primary);
    color: #FFFFFF;
}

.stack-app-main {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--stack-panel-w);
    /*
     * minmax(0, 1fr) et non `auto` : une rangée `auto` se dimensionne sur son
     * contenu, donc le panneau grandissait avec la liste d'outils et poussait le
     * CTA hors de l'écran. La rangée doit être bornée à la hauteur disponible.
     */
    grid-template-rows: minmax(0, 1fr);
    gap: var(--spacing-md);
    padding: var(--spacing-md);
}

.stack-app-panes,
.stack-app-pane {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.stack-app-pane[hidden] {
    display: none;
}

/* Les blocs partagés s'étirent dans la hauteur disponible au lieu de la calculer */
.stack-app .stack-scroll {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

/*
 * Chaîne de contrainte du panneau, indispensable de bout en bout : chaque niveau
 * doit pouvoir rétrécir (min-height: 0) pour que la liste d'outils défile au lieu
 * de repousser le CTA. Un seul maillon manquant et le panneau déborde.
 */
.stack-app .stack-panel {
    min-height: 0;
}

.stack-app .stack-panel-inner {
    position: static;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/*
 * Un seul défilement dans le panneau, et le CTA en pied fixe hors de ce
 * défilement. Avec le CTA à l'intérieur, un panneau chargé le poussait hors de
 * l'écran quelle que soit la chaîne de contraintes.
 */
.stack-app .stack-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: block;
}

.stack-app .stack-selected {
    max-height: none;
    overflow-y: visible;
}

.stack-app .stack-panel-cta {
    flex: 0 0 auto;
    margin-top: 0;
    padding: 0.55rem 0.7rem 0.7rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
}

.stack-app .stack-coverage {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    padding: 0 0.15rem 0 0;
    border-top: none;
}

.stack-app .stack-section-head {
    margin-bottom: var(--spacing-md);
}

/* Bouton d'accès depuis la page SEO */
.stack-app-cta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
    margin: 0 0 var(--spacing-md);
}

.stack-app-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.15rem;
    border-radius: var(--radius-full);
    background: var(--gradient-primary);
    color: #FFFFFF;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}

.stack-app-link:hover {
    opacity: 0.92;
}

.stack-app-link svg {
    width: 16px;
    height: 16px;
}

.stack-app-cta span {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* ---------- Assistant mobile ---------- */

/*
 * Sous 901px, le configurateur devient un pas-à-pas : réglages, une famille
 * d'outils par écran, puis le verdict. Toute cette mécanique est neutralisée
 * au-dessus, où la mise en page à deux colonnes reste la bonne.
 */

.stack-mob-progress,
.stack-mob-settings,
.stack-mob-foot,
.stack-origin-short {
    display: none;
}

.stack-coverage-details > summary {
    display: none;
}

@media (max-width: 900px) {
    /* Sur petit écran, l'outil redevient une page qui défile normalement */
    body.stack-app-body,
    .stack-app {
        height: auto;
        overflow: visible;
    }

    .stack-app-bar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .stack-app-tabs {
        margin-left: 0;
        width: 100%;
    }

    .stack-app-tab {
        flex: 1 1 0;
    }

    .stack-app-main {
        grid-template-columns: 1fr;
        padding: var(--spacing-sm);
        padding-bottom: 5rem;
    }

    .stack-app .stack-coverage {
        overflow-y: visible;
    }

    /* Un seul écran à la fois */

    .stack-app[data-mob-step] .stack-app-tabs {
        display: none;
    }

    .stack-app[data-mob-step] .stack-mob-progress {
        display: flex;
    }

    .stack-app[data-mob-step] .stack-mob-foot {
        display: block;
    }

    .stack-app[data-mob-step] .stack-mob-settings,
    .stack-app[data-mob-step] .stack-cat,
    .stack-app[data-mob-step] .stack-panel {
        display: none;
    }

    .stack-app[data-mob-step] .is-mob-on {
        display: block;
    }

    /* Le pied fixe mesure environ 145px : la réserve doit le dépasser */
    .stack-app[data-mob-step] .stack-app-main {
        padding-bottom: 10.5rem;
    }

    .stack-mob-progress {
        align-items: center;
        gap: 0.75rem;
        padding: 0.6rem var(--spacing-sm) 0;
    }

    .stack-mob-step {
        flex: 0 0 auto;
        font-size: 0.8125rem;
        font-weight: 700;
        color: var(--color-text-secondary);
    }

    .stack-mob-track {
        flex: 1 1 auto;
        height: 4px;
        border-radius: var(--radius-full);
        background: var(--color-border);
        overflow: hidden;
    }

    .stack-mob-fill {
        display: block;
        height: 100%;
        width: 14%;
        border-radius: var(--radius-full);
        background: var(--gradient-primary);
        transition: width 0.2s;
    }

    .stack-mob-settings {
        margin: var(--spacing-sm) var(--spacing-sm) 0;
        padding: var(--spacing-md);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: var(--color-bg-elevated);
    }

    .stack-mob-settings h2 {
        font-size: 1.125rem;
        margin-bottom: 0.35rem;
    }

    .stack-mob-settings > p {
        font-size: 0.9375rem;
        color: var(--color-text-secondary);
        margin-bottom: var(--spacing-md);
    }

    /* Les deux réglages déplacés ici par le script */

    .stack-mob-settings .stack-seats {
        margin-bottom: var(--spacing-md);
    }

    /*
     * Sur grand écran la case est une pastille en `nowrap` dans l'en-tête de
     * famille. Ici elle occupe une ligne entière : sans lever le `nowrap` et
     * sans `min-width`, la question déborde de 42px à 360px de large.
     */
    .stack-mob-settings .stack-cat-option {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        white-space: normal;
        padding: 0.75rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        font-size: 0.9375rem;
        cursor: pointer;
    }

    /* Sans min-width, le libellé ne se rétrécit pas dans le flex et déborde */
    .stack-mob-settings .stack-cat-option span {
        flex: 1 1 auto;
        min-width: 0;
    }

    .stack-mob-settings .stack-cat-option input {
        flex: 0 0 auto;
    }

    /* Le duel de prix, visible à chaque étape */

    .stack-mob-foot {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        border-top: 1px solid var(--color-border);
        background: var(--color-bg-elevated);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
    }

    .stack-mob-duel {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        background: var(--color-border);
    }

    .stack-mob-duel span {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
        padding: 0.5rem var(--spacing-sm);
        background: var(--color-bg-elevated);
    }

    .stack-mob-duel small {
        font-size: 0.6875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--color-text-secondary);
    }

    .stack-mob-duel strong {
        font-size: 1.0625rem;
        font-weight: 800;
    }

    .stack-mob-duel .is-charik strong {
        color: var(--color-primary);
    }

    .stack-mob-nav {
        display: grid;
        grid-template-columns: 1fr 1.4fr;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
    }

    .stack-mob-nav button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        padding: 0.8rem 1rem;
        border-radius: var(--radius-full);
        border: 1px solid var(--color-border);
        background: transparent;
        color: var(--color-text);
        font-family: var(--font-primary);
        font-size: 0.9375rem;
        font-weight: 700;
        cursor: pointer;
    }

    .stack-mob-nav .stack-mob-next {
        border-color: transparent;
        background: var(--gradient-primary);
        color: #FFFFFF;
    }

    .stack-mob-nav button:disabled {
        opacity: 0.4;
        cursor: default;
    }

    /* Dernier écran : le panneau reprend sa place dans le flux */

    /*
     * Le verdict passe avant le tableau : le visiteur vient d'appuyer sur
     * « Voir le verdict », il doit tomber sur l'écart de prix, pas sur la
     * légende du comparatif.
     */
    .stack-app[data-mob-last] .stack-panel {
        display: block;
        position: static;
        order: -1;
    }

    .stack-app[data-mob-last] .stack-panel-inner {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: none;
    }

    .stack-app[data-mob-last] .stack-panel-toggle {
        display: none;
    }

    .stack-app[data-mob-last] .stack-panel-body,
    .stack-app[data-mob-last] .stack-panel-cta {
        display: block;
        max-height: none;
        overflow: visible;
    }

    /* Le duel est déjà dans le panneau, inutile de le répéter en pied */
    .stack-app[data-mob-last] .stack-mob-duel {
        display: none;
    }

    .stack-app[data-mob-last] .stack-mob-nav {
        grid-template-columns: 1fr;
    }

    .stack-app[data-mob-last] .stack-mob-next {
        display: none;
    }

    /*
     * Dans l'assistant, la carte empilée devient une ligne : la famille CRM
     * compte quinze outils et la version empilée demandait presque trois écrans.
     */

    /* Une colonne sur téléphone, deux sur tablette : la ligne reste lisible */
    .stack-app[data-mob-step] .stack-tools {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 0.4rem;
    }

    /*
     * Le nom occupe toute la largeur disponible, le prix descend sur la seconde
     * ligne à côté des badges : sinon la colonne du prix serre le nom et la
     * moitié des outils passent sur trois lignes.
     */
    .stack-app[data-mob-step] .stack-tool {
        display: grid;
        grid-template-columns: minmax(0, auto) minmax(0, 1fr) 22px;
        align-items: center;
        gap: 0.2rem 0.6rem;
        padding: 0.55rem 0.75rem;
    }

    /* Le conteneur s'efface pour que nom et coche deviennent des cases de la grille */
    .stack-app[data-mob-step] .stack-tool-top {
        display: contents;
    }

    .stack-app[data-mob-step] .stack-tool-name {
        grid-column: 1 / 3;
        grid-row: 1;
        font-size: 0.9375rem;
    }

    .stack-app[data-mob-step] .stack-tool-plan {
        display: inline;
        margin-left: 0.35rem;
        font-size: 0.8125rem;
    }

    .stack-app[data-mob-step] .stack-tool-price {
        grid-column: 1;
        grid-row: 2;
        font-size: 0.9375rem;
        min-width: 0;
    }

    .stack-app[data-mob-step] .stack-tool-check {
        grid-column: 3;
        grid-row: 1 / -1;
    }

    .stack-app[data-mob-step] .stack-tool-meta {
        grid-column: 2;
        grid-row: 2;
    }

    .stack-app[data-mob-step] .stack-origin-long {
        display: none;
    }

    .stack-app[data-mob-step] .stack-origin-short {
        display: inline;
    }

    /* Le survol reste collé après un appui sur écran tactile */
    .stack-app[data-mob-step] .stack-tool:hover {
        transform: none;
    }

    /* Le tableau des 18 fonctions ne s'ouvre qu'à la demande */

    .stack-coverage-details > summary {
        display: block;
        margin-bottom: var(--spacing-sm);
        padding: 0.75rem var(--spacing-md);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        background: var(--color-bg-elevated);
        font-size: 0.9375rem;
        font-weight: 700;
        color: var(--color-primary);
        cursor: pointer;
    }
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */

@media (max-width: 1024px) {
    .stack-page {
        --stack-panel-w: 300px;
    }
}

@media (max-width: 900px) {
    .stack-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Le panneau devient une barre basse dépliable */
    .stack-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
    }

    .stack-panel-inner {
        position: static;
        border: none;
        border-top: 1px solid var(--color-border);
        border-radius: 0;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
    }

    .stack-panel-toggle {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        width: 100%;
        padding: 0.85rem var(--spacing-md);
        border: none;
        background: var(--color-bg-elevated);
        color: var(--color-text);
        font-family: var(--font-primary);
        cursor: pointer;
    }

    .stack-panel-toggle-total {
        font-size: 1.125rem;
        font-weight: 800;
    }

    .stack-panel-toggle-label {
        font-size: 0.8125rem;
        color: var(--color-text-secondary);
    }

    .stack-panel-toggle svg {
        width: 18px;
        height: 18px;
        margin-left: auto;
        color: var(--color-text-secondary);
        transition: transform 0.2s;
    }

    .stack-panel.is-open .stack-panel-toggle svg {
        transform: rotate(180deg);
    }

    .stack-panel-body,
    .stack-panel-cta {
        display: none;
    }

    .stack-panel-body {
        max-height: 60vh;
        overflow-y: auto;
    }

    .stack-panel.is-open .stack-panel-body,
    .stack-panel.is-open .stack-panel-cta {
        display: block;
    }

    /* Place pour la barre basse */
    .stack-builder {
        padding-bottom: 5rem;
    }

    /*
     * Pas de défilement imbriqué sur mobile : il piège le geste et il n'y a plus
     * de panneau collant à garder aligné, le récapitulatif étant en barre basse.
     */
    .stack-scroll {
        height: auto;
        overflow-y: visible;
        border: none;
        border-radius: 0;
        padding: 0;
        background: transparent;
    }

    .stack-cat-head {
        position: static;
        padding-top: 0;
    }


    .stack-cov-head {
        display: none;
    }

    .stack-cov-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .stack-cov-yours::before {
        content: 'Votre stack : ';
        color: var(--color-text-secondary);
    }

    .stack-cov-charik::before {
        content: 'Charik : ';
        color: var(--color-text-secondary);
    }

    .stack-cov-yours .stack-dot,
    .stack-cov-charik .stack-dot {
        top: 0.3rem;
    }
}

@media (max-width: 600px) {
    .stack-tools {
        grid-template-columns: 1fr;
    }


    .stack-hero {
        text-align: left;
    }

    .stack-hero-sub {
        margin-left: 0;
    }

    .stack-cta-actions .btn-cta-primary,
    .stack-cta-actions .btn-cta-secondary {
        width: 100%;
        text-align: center;
    }
}