/* =============================================================================
   NOS OFFRES — la page pivot.

   Trois blocs qui n'existent nulle part ailleurs : les cartes de formule, le
   tableau d'exemples à colonne variable, et la grille détaillée des garanties.
   Ils restent donc ici, et pas dans la couche composants.
   ========================================================================== */

/* ------------------------------------------------------------ pastilles --- */

.mpn-pastilles { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.7rem 0 0; padding: 0; list-style: none; }
.mpn-pastilles li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    border-radius: 99px;
    background: var(--mpn-surface);
    border: 1px solid var(--mpn-line);
    font-size: .88rem;
    font-weight: 600;
    color: var(--mpn-ink-body);
}
.mpn-pastilles li::before { content: '✓'; color: var(--mpn-bleu); font-weight: 800; }

.mpn-badge--blanc {
    background: var(--mpn-surface);
    border: 1px solid var(--mpn-line);
    color: var(--mpn-ink-body);
    box-shadow: 0 6px 18px -12px rgba(4, 18, 38, .5);
    text-transform: none;
    letter-spacing: 0;
    font-size: .8rem;
}
.mpn-souligne--bleu { color: var(--mpn-bleu); }
.mpn-souligne--bleu::after { background: linear-gradient(90deg, rgba(0, 91, 172, .28), rgba(225, 0, 15, .28)); }

/* -------------------------------------------------- les trois formules --- */

.off-cartes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}
.off-carte {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mpn-line);
    border-radius: var(--mpn-radius-lg);
    padding: 30px 26px 26px;
    background: var(--mpn-surface);
    transition: transform .3s, box-shadow .3s, border-color .3s;
}
.off-carte:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -28px rgba(4, 18, 38, .4); }
.off-carte--prelude { --off-teinte: var(--mpn-prelude); }
.off-carte--primum { --off-teinte: var(--mpn-bleu); border-color: var(--mpn-bleu); }
.off-carte--solidum_plus { --off-teinte: var(--mpn-bleu-clair); }
.off-carte:hover { border-color: var(--off-teinte); }

.off-carte__filet { width: 40px; height: 4px; border-radius: 99px; background: var(--off-teinte); }
.off-carte__sur {
    margin: 1rem 0 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--off-teinte);
}
.off-carte__resume { margin: .5rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--mpn-ink-soft); }
.off-carte__prix { display: flex; align-items: baseline; gap: 8px; margin: 1.1rem 0 0; flex-wrap: wrap; }
.off-carte__montant { font-size: 2.4rem; font-weight: 800; letter-spacing: -.035em; }
.off-carte__unite { font-size: .88rem; font-weight: 600; color: var(--mpn-ink-mute); }

.off-carte__args {
    display: grid;
    gap: 9px;
    margin: 1.25rem 0 1.6rem;
    padding: 1.1rem 0 0;
    border-top: 1px solid var(--mpn-line-soft);
    list-style: none;
}
.off-carte__args li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--mpn-ink-body);
}
.off-carte__args li::before { content: '✓'; flex: 0 0 auto; margin-top: 1px; color: var(--off-teinte); font-weight: 800; }

/* Le bouton est colle en bas : sans `margin-top:auto`, trois cartes de hauteurs
   differentes donnent trois boutons a trois hauteurs differentes. */
.off-carte__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    margin-top: auto;
    border-radius: 99px;
    border: 1px solid var(--mpn-line-strong);
    background: var(--mpn-surface);
    color: var(--mpn-ink);
    font-size: .95rem;
    font-weight: 600;
    transition: background .25s, border-color .25s, transform .25s;
}
.off-carte__cta:hover { background: var(--mpn-tint); border-color: var(--off-teinte); color: var(--mpn-ink); }
.off-carte--primum .off-carte__cta {
    background: var(--mpn-bleu-plein);
    border-color: transparent;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 12px 26px -12px rgba(0, 91, 172, .8);
}
.off-carte--primum .off-carte__cta:hover { background: var(--mpn-bleu-hover); color: #fff; transform: translateY(-2px); }

/* ---- la carte mise en avant ---- */
.off-carte--vedette {
    background: var(--mpn-bloc);
    border-color: var(--mpn-bloc-line);
    color: var(--mpn-bloc-ink);
    padding-top: 34px;
    box-shadow: 0 30px 60px -34px rgba(4, 18, 38, .7);
}
.off-carte--vedette:hover { transform: translateY(-8px); box-shadow: 0 40px 72px -34px rgba(4, 18, 38, .8); }
.off-carte--vedette .off-carte__resume { color: var(--mpn-bloc-ink-soft); }
.off-carte--vedette .off-carte__unite { color: var(--mpn-bloc-ink-mute); }
.off-carte--vedette .off-carte__args { border-top-color: var(--mpn-bloc-line); }
.off-carte--vedette .off-carte__args li { color: var(--mpn-bloc-ink-soft); }
/* Le bouton etait blanc sur navy. Sur un bloc clair il disparaitrait : il
   devient le bouton plein, ce qui va dans les deux themes. */
.off-carte--vedette .off-carte__cta { background: var(--mpn-bleu-plein); border-color: transparent; color: #fff; font-weight: 700; }
.off-carte--vedette .off-carte__cta:hover { transform: translateY(-2px); background: var(--mpn-bleu-hover); color: #fff; }

.off-carte__ruban {
    position: absolute;
    top: -12px;
    left: 26px;
    margin: 0;
    height: 24px;
    padding: 0 11px;
    border-radius: 99px;
    background: var(--mpn-rouge);
    color: #fff;
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    box-shadow: 0 8px 18px -10px rgba(225, 0, 15, .9);
}

.off-carte__lien-entraide { padding: 0; }
.off-carte__lien-entraide::before { content: none; }
.off-carte__lien-entraide a {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin-top: 4px;
    padding: 11px 13px;
    border-radius: 12px;
    background: var(--mpn-bloc-voile);
    border: 1px solid var(--mpn-bloc-line);
    font-size: .9rem;
    font-weight: 700;
    color: var(--mpn-bloc-accent);
    transition: background .25s;
}
.off-carte__lien-entraide a:hover { background: var(--mpn-bloc-voile-fort); color: var(--mpn-bloc-accent); }

/* ------------------------------------------------- avantage SOLIDUM PLUS --- */

.off-avantage {
    border-radius: 22px;
    padding: clamp(28px, 3.4vw, 44px);
    background: var(--mpn-surface);
    border: 1px solid var(--mpn-line);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    gap: clamp(24px, 3vw, 40px);
    align-items: center;
}
.off-btn-rouge {
    height: 54px;
    background: var(--mpn-rouge);
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 16px 32px -14px rgba(225, 0, 15, .7);
}
.off-btn-rouge:hover { color: #fff; background: #C4000D; }

/* --------------------------------------------------------------- onglets --- */

.off-onglets {
    display: inline-flex;
    gap: 4px;
    margin-top: 1.7rem;
    padding: 4px;
    border-radius: 99px;
    background: var(--mpn-track);
    border: 1px solid var(--mpn-line);
    max-width: 100%;
    overflow-x: auto;
}
.off-onglets--vues { margin-top: 0; background: var(--mpn-surface); }
.off-onglet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 20px;
    border: 0;
    border-radius: 99px;
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    color: var(--mpn-ink-nav);
    transition: background .25s, color .25s;
}
.off-onglet:hover { color: var(--mpn-ink); }
.off-onglet.est-actif { background: var(--mpn-bleu-plein); color: #fff; }

/* Sans script, les onglets ne servent a rien : on les efface plutot que de
   laisser des boutons morts. */
html:not(.js) .off-onglets { display: none; }

/* --------------------------------------------- exemples de remboursement --- */

.off-exemples { margin-top: 1.4rem; }
.off-table { min-width: 720px; }
.off-table th[scope='row'] { font-weight: inherit; }
.off-exemple__nom { display: block; font-size: .97rem; font-weight: 700; color: var(--mpn-ink); }
.off-exemple__detail { display: block; margin-top: 2px; font-size: .82rem; color: var(--mpn-ink-mute); }
.off-num { text-align: right; white-space: nowrap; }
.off-mpn { color: var(--mpn-bleu); font-weight: 700; }

/* Les trois valeurs sont dans le document ; seule celle de la formule choisie
   s'affiche. C'est ce qui permet a un moteur de recherche de voir les trois. */
.off-val { display: none; }
.off-exemples[data-formule-active='0'] .off-val[data-val='0'],
.off-exemples[data-formule-active='1'] .off-val[data-val='1'],
.off-exemples[data-formule-active='2'] .off-val[data-val='2'] { display: inline-flex; }

.off-rac {
    align-items: center;
    padding: 5px 11px;
    border-radius: 99px;
    font-size: .9rem;
    font-weight: 700;
    background: var(--mpn-alerte-fond);
    color: var(--mpn-alerte-texte);
}
.off-rac--nul { background: var(--mpn-succes-fond); color: var(--mpn-succes-texte); }

/* -------------------------------------------------------- fiches garantie --- */

.off-entete-vues {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.off-vue[hidden] { display: none; }
/* Sans script, les deux vues restent affichees : mieux vaut une page plus
   longue qu'un contenu qu'on ne peut pas atteindre. */
html:not(.js) .off-vue[hidden] { display: block; }

.off-fiches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 2rem; }
.off-fiche {
    display: flex;
    flex-direction: column;
    background: var(--mpn-surface);
    border: 1px solid var(--mpn-line);
    border-radius: var(--mpn-radius);
    padding: 24px;
    transition: transform .3s, box-shadow .3s, border-color .3s;
}
.off-fiche:hover { transform: translateY(-5px); box-shadow: 0 26px 46px -28px rgba(4, 18, 38, .4); border-color: var(--mpn-line-hover); }
.off-fiche h3 { margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -.015em; }
.off-fiche__desc { margin: .5rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--mpn-ink-soft); }

.off-niveaux { display: grid; gap: 1px; margin: 1.1rem 0 0; border-radius: 12px; overflow: hidden; background: var(--mpn-line-soft); }
.off-niveau {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 13px;
    background: var(--mpn-surface);
}
.off-niveau dt {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .66rem;
    letter-spacing: .12em;
    color: var(--mpn-ink-nav);
    white-space: nowrap;
}
.off-niveau dd { margin: 0; font-size: .84rem; font-weight: 700; text-align: right; }
.off-niveau--haut { background: var(--mpn-bloc); }
.off-niveau--haut dt { color: var(--mpn-bloc-accent); }
.off-niveau--haut dd { color: var(--mpn-bloc-ink); }

.off-fiche__exemple {
    margin: .9rem 0 0;
    padding-top: .9rem;
    border-top: 1px solid var(--mpn-line-soft);
    font-size: .84rem;
    line-height: 1.5;
    color: var(--mpn-ink-nav);
}

/* ----------------------------------------------------- tableau détaillé --- */

.off-detail {
    margin-top: 2rem;
    background: var(--mpn-surface);
    border: 1px solid var(--mpn-line);
    border-radius: var(--mpn-radius-lg);
    overflow: hidden;
}
.off-detail__entete {
    display: grid;
    grid-template-columns: 40% 12% 16% 16% 16%;
    background: var(--mpn-bloc);
    color: var(--mpn-bloc-ink);
    font-size: .78rem;
    font-weight: 700;
}
.off-detail__entete > div { padding: 16px 10px; }
.off-detail__entete > div:first-child { padding-left: 20px; }
.off-detail__formule { border-left: 1px solid var(--mpn-bloc-line); text-align: center; }
.off-detail__formule.est-milieu { background: var(--mpn-bloc-voile-fort); }
.off-detail__nom { display: block; font-size: .84rem; font-weight: 800; }
.off-detail__tarif { display: block; font-size: .68rem; font-weight: 600; color: var(--mpn-bloc-ink-mute); }

.off-cat { border-top: 1px solid var(--mpn-line-soft); }
.off-cat summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    cursor: pointer;
    background: var(--mpn-surface);
    transition: background .2s;
    list-style: none;
}
.off-cat summary::-webkit-details-marker { display: none; }
.off-cat[open] summary { background: var(--mpn-surface-blue); }
.off-cat summary:hover { background: var(--mpn-tint); }
.off-cat__fleche {
    display: inline-block;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--mpn-bleu);
    transition: transform .25s;
}
.off-cat[open] .off-cat__fleche { transform: rotate(90deg); }
.off-cat__nom { font-size: 1rem; font-weight: 700; }
.off-cat__compte { margin-left: auto; font-size: .82rem; color: var(--mpn-ink-mute); }

/* `table-layout:fixed` + colonnes en pourcentage : c'est ce qui aligne les six
   tables sous l'en-tete unique, alors que chacune vit dans son propre <details>. */
.off-detail__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.off-detail__table th[scope='row'] {
    padding: 13px 20px;
    font-size: .9rem;
    font-weight: 400;
    text-align: left;
    color: var(--mpn-ink-body);
}
.off-detail__table td { padding: 13px 10px; text-align: center; font-size: .9rem; font-weight: 600; color: var(--mpn-ink-body); border-left: 1px solid var(--mpn-line-soft); }
.off-detail__table tr { border-top: 1px solid var(--mpn-page); }
.off-detail__table tbody tr:nth-child(even) { background: var(--mpn-surface-alt); }
.off-ligne__ss { color: var(--mpn-ink-mute); font-weight: 400; border-left: 0; }
.off-detail__table td.est-milieu { font-weight: 700; color: var(--mpn-bleu); background: var(--mpn-colonne-avant); }
.off-detail__table tbody tr:nth-child(even) td.est-milieu { background: var(--mpn-colonne-avant-alt); }
.off-ligne__haut { color: var(--mpn-ink); }

/* ------------------------------------------------------------- responsive --- */

@media (max-width: 1000px) {
    .off-cartes { grid-template-columns: 1fr; }
    .off-carte--vedette { order: -1; }
    .off-fiches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .off-avantage { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .off-fiches { grid-template-columns: 1fr; }
    .off-entete-vues { align-items: flex-start; }
    /* Le tableau detaille defile dans son cadre : l'en-tete et les six tables
       partagent la meme largeur minimale, sinon elles se desalignent. */
    .off-detail { overflow-x: auto; }
    .off-detail__entete,
    .off-detail__table { min-width: 640px; }
}

@media (prefers-reduced-motion: reduce) {
    .off-carte:hover,
    .off-carte--vedette:hover,
    .off-fiche:hover,
    .off-carte__cta:hover { transform: none; }
    .off-cat__fleche { transition: none; }
}