/* * Refonte « sobre premium » du simulateur — active uniquement quand la version porte `design: true` * (classe `design` posée sur ). Aucune règle ici ne s'applique aux autres versions. * * Couleurs des séries : validées par calcul (skill dataviz). Le vert et le rouge sont réservés au statut * (gain / perte) ; l'or n'est qu'un repère (l'aiguille de la boussole), jamais du texte sur fond blanc. */ body.design { --marine: #1b2559; --or: #c99a2e; --fond: #f6f7fb; --s-lld: #2649B2; --s-abnb: #7A5CE6; --s-bourse: #be185d; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; } /* ── Mode sombre : jeu de séries validé à part (le bleu et le violet ne s'y distinguent pas assez) ── */ body.design[data-mode="sombre"] { color-scheme: dark; --surface: #171b26; --surface-2: #1e2331; --fond: #0f1219; --ink: #f3f4f6; --ink-2: #d1d5db; --gris: #9ca3af; --trait: #2a3142; --marine: #dbe2ff; --c1: #7b97f7; --vert: #3fb97a; --rouge: #f0716a; --warn-bg: #2a2210; --err-bg: #2b1517; --info-bg: #14203a; --ok-bg: #12261c; --s-lld: #3987e5; --s-abnb: #d55181; --s-bourse: #9085e9; } body.design[data-mode="sombre"] .conseils, body.design[data-mode="sombre"] .bandeau-express { color: var(--ink-2); } body.design[data-mode="sombre"] .tuto-cadre { box-shadow: 0 0 0 3px rgba(245,158,11,.4); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ── En-tête ──────────────────────────────────────────────────────────── */ body.design header { min-height: 60px; } body.design header .logo { background: var(--marine); } body.design[data-mode="sombre"] header .logo { background: #2b3563; } body.design header .logo svg { display: block; } body.design header .logo::after { content: ""; } body.design header h1 { font-size: 16px; font-weight: 700; letter-spacing: -.3px; color: var(--ink); } body.design .menu-plus { position: relative; } body.design .menu-plus > summary { list-style: none; cursor: pointer; width: 34px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--trait); border-radius: 7px; background: var(--surface); color: var(--ink-2); font-size: 18px; line-height: 1; user-select: none; } body.design .menu-plus > summary::-webkit-details-marker { display: none; } body.design .menu-plus > summary:hover { background: var(--surface-2); } body.design .menu-liste { position: absolute; right: 0; top: calc(100% + 6px); min-width: 190px; padding: 6px; z-index: 60; background: var(--surface); border: 1px solid var(--trait); border-radius: 10px; box-shadow: 0 12px 30px rgba(15,23,42,.18); display: flex; flex-direction: column; gap: 2px; } body.design .menu-liste button { width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink); font-weight: 500; padding: 9px 10px; border-radius: 7px; } body.design .menu-liste button:hover { background: var(--surface-2); filter: none; } body.design .menu-liste .menu-titre { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--gris); padding: 8px 10px 4px; } body.design .menu-liste .theme-choix { display: flex; gap: 4px; padding: 2px 4px 6px; } body.design .menu-liste .theme-choix button { text-align: center; border: 1px solid var(--trait); padding: 6px 4px; font-size: 12px; } body.design .menu-liste .theme-choix button[aria-pressed="true"] { background: var(--c1); color: #fff; border-color: var(--c1); } /* ── Téléphone : pas de débordement, en-tête compact ────────────────────────────── */ /* Un élément de grille ne rétrécit pas sous son contenu (min-width: auto) : c'est ce qui faisait déborder le formulaire. */ body.design main > * { min-width: 0; } @media (max-width: 1100px) { body.design main { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 700px) { body.design header { position: static; gap: 6px 10px; padding: 0 14px; min-height: 0; } body.design header .sous { display: none; } body.design header .marque { padding: 10px 0 2px; } body.design header .actions { width: 100%; margin-left: 0; padding: 4px 0 10px; gap: 6px; } body.design header .separateur { display: none; } body.design header #etat { display: none; } body.design .champs-marque { flex-basis: 100%; } body.design .champs-marque input { flex: 1; min-width: 0; width: auto; } body.design main { padding: 10px; gap: 12px; } body.design .panneau { padding: 12px; } body.design .od-texte { padding: 16px; } } /* ── Formulaire : blocs numérotés, résumé quand ils sont repliés, exemples de départ ───────── */ body.design .bloc { border-radius: var(--r, 12px); box-shadow: 0 1px 2px rgba(15,23,42,.04); } body.design .bloc summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; list-style: none; padding: 12px 14px; } body.design .bloc summary::-webkit-details-marker { display: none; } body.design .bloc summary::after { content: "▾"; margin-left: auto; color: var(--gris); font-size: 12px; transition: transform .15s; } body.design .bloc:not([open]) summary::after { transform: rotate(-90deg); } body.design .bloc .icone { display: none; } body.design .bloc .num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--marine); color: var(--surface); font-size: 11.5px; font-weight: 700; flex: none; } body.design .bloc .resume { flex-basis: 100%; margin: -2px 0 0 30px; font-size: 12px; font-weight: 500; color: var(--gris); } body.design .bloc[open] .resume { display: none; } body.design .exemples { margin-bottom: 12px; } body.design .exemples-titre { font-size: 12px; font-weight: 700; color: var(--ink-2); margin: 0 0 6px; } body.design .exemples-liste { display: flex; flex-wrap: wrap; gap: 6px; } body.design .exemple { background: var(--surface); color: var(--ink); border: 1px solid var(--trait); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left; } body.design .exemple small { display: block; font-weight: 400; color: var(--gris); font-size: 11px; } body.design .exemple:hover { border-color: var(--c1); background: var(--surface-2); filter: none; } body.design .exemple[aria-pressed="true"] { border-color: var(--or); box-shadow: 0 0 0 2px rgba(201,154,46,.25); } /* ── Signets du formulaire : sauter à un bloc sans dérouler les autres ─────── */ body.design .signets { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 12px; } body.design .signet { display: inline-flex; align-items: center; gap: 4px; background: var(--surface); color: var(--ink-2); border: 1px solid var(--trait); border-radius: 999px; padding: 4px 9px 4px 5px; font-size: 14px; line-height: 1; cursor: pointer; } body.design .signet-num { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--marine); color: var(--surface); font-size: 9px; font-weight: 700; flex: none; } body.design .signet:hover { border-color: var(--c1); background: var(--surface-2); filter: none; } /* ── Verdict ──────────────────────────────────────────────────────────── */ body.design .panneau-verdict > h2 { display: none; } body.design #cartes { display: block; } body.design .panneau { border-radius: var(--r, 12px); box-shadow: 0 1px 2px rgba(15,23,42,.04); } .verdict-amorce { font-size: 15px; color: var(--ink-2); margin: 0 0 14px; } .verdict-amorce b { color: var(--ink); font-weight: 700; } .v-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .v-ligne { display: grid; grid-template-columns: minmax(118px, 176px) 1fr minmax(78px, auto); align-items: center; gap: 12px; } .v-nom { font-weight: 600; font-size: 14px; color: var(--ink); display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; } .v-etoile { color: var(--or); font-size: 15px; line-height: 1; } .v-piste { height: 16px; background: var(--surface-2); border-radius: 8px; overflow: hidden; } .v-barre { display: block; height: 100%; border-radius: 8px; transition: width .55s cubic-bezier(.2,.8,.2,1); } .v-ligne[data-option="lld"] .v-barre { background: var(--s-lld); } .v-ligne[data-option="abnb"] .v-barre { background: var(--s-abnb); } .v-ligne[data-option="bourse"] .v-barre { background: var(--s-bourse); } /* Valeur négative : la barre garde sa teinte mais prend une hachure, pour ne pas dépendre de la couleur seule. */ .v-barre.negatif { opacity: .6; background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgba(255,255,255,.45) 5px 10px); } .v-val { font-size: 21px; font-weight: 800; text-align: right; letter-spacing: -.4px; color: var(--ink); } .v-val.neg { color: var(--rouge); } .v-gagnante .v-nom { font-weight: 700; } .v-delta { font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; animation: fondu 5s ease-out forwards; } .v-delta.pos { color: var(--vert); background: var(--ok-bg); } .v-delta.neg { color: var(--rouge); background: var(--err-bg); } @keyframes fondu { 0%, 70% { opacity: 1; } 100% { opacity: 0; } } .v-phrase { margin: 16px 0 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--or); font-size: 17px; line-height: 1.45; font-weight: 700; color: var(--marine); letter-spacing: -.2px; } .v-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-top: 16px; } .v-kpi { background: var(--surface-2); border-radius: 10px; padding: 11px 13px; } .v-kpi .lib { font-size: 11.5px; color: var(--gris); display: flex; align-items: center; gap: 5px; } .v-kpi .val { font-size: 20px; font-weight: 800; letter-spacing: -.3px; margin-top: 2px; color: var(--ink); } .v-kpi .val small { font-size: 12px; font-weight: 600; color: var(--gris); } .v-kpi .lignes { margin-top: 3px; display: grid; gap: 1px; } .v-kpi .lignes div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; } .v-kpi .lignes span:first-child { color: var(--gris); } .v-kpi .lignes b { font-weight: 700; } .v-kpi .pos { color: var(--vert); } .v-kpi .neg { color: var(--rouge); } .aide-tri { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--trait); color: var(--ink-2); font-size: 10px; font-weight: 800; cursor: help; } @media (max-width: 560px) { .v-ligne { grid-template-columns: 1fr auto; } .v-piste { grid-column: 1 / -1; grid-row: 2; } .v-val { grid-column: 2; grid-row: 1; font-size: 19px; } } /* ── Points d'attention repliés ─────────────────────────────────────────── */ .attention { margin-top: 16px; border: 1px solid var(--trait); border-radius: 10px; background: var(--surface); } .attention > summary { padding: 10px 13px; cursor: pointer; font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 8px; list-style: none; } .attention > summary::-webkit-details-marker { display: none; } .attention > summary::after { content: "▾"; margin-left: auto; color: var(--gris); transition: transform .15s; } .attention:not([open]) > summary::after { transform: rotate(-90deg); } .att-pastille { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11.5px; font-weight: 800; } .att-pastille.attention-fort { background: #d97706; color: #fff; } .att-pastille.info { background: var(--info-bg); color: var(--c1); } .att-liste { list-style: none; margin: 0; padding: 0 13px 8px; } .att-item { border-top: 1px solid var(--trait); } .att-item > summary { padding: 9px 0; cursor: pointer; font-size: 13px; display: flex; gap: 8px; align-items: baseline; list-style: none; } .att-item > summary::-webkit-details-marker { display: none; } .att-item .ico { flex: none; width: 16px; text-align: center; } .att-item.niveau-attention .ico { color: #d97706; } .att-item.niveau-info .ico { color: var(--c1); } .att-item .plus { margin-left: auto; font-size: 11.5px; color: var(--c1); white-space: nowrap; } .att-item p { margin: 0 0 10px 24px; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); } /* ── Graphiques en onglets ──────────────────────────────────────────────── */ .onglets-graph { display: flex; gap: 2px; border-bottom: 1px solid var(--trait); margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; } .onglets-graph::-webkit-scrollbar { display: none; } .onglets-graph button { background: transparent; color: var(--gris); border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 10px 14px; font-weight: 600; font-size: 13.5px; white-space: nowrap; margin-bottom: -1px; min-height: 44px; } .onglets-graph button:hover { color: var(--ink); filter: none; } .onglets-graph button[aria-selected="true"] { color: var(--c1); border-bottom-color: var(--or); } .onglets-graph button:focus-visible { outline: 2px solid var(--c1); outline-offset: -2px; } /* Explications facultatives : fermées par défaut, discrètes, sans jamais s'interposer entre deux graphiques. */ .explication { margin: -6px 0 16px; border: 1px dashed var(--trait); border-radius: 9px; background: var(--surface); } .explication > summary { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 600; color: var(--ink-2); } .explication > summary::-webkit-details-marker { display: none; } .explication > summary::before { content: "ⓘ"; color: var(--c1); font-size: 14px; line-height: 1; } .explication > summary::after { content: "▾"; margin-left: auto; color: var(--gris); font-size: 11px; transition: transform .15s; } .explication:not([open]) > summary::after { transform: rotate(-90deg); } .explication > summary:hover { color: var(--ink); } .explication .facultatif { font-style: normal; font-weight: 600; font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase; color: var(--gris); border: 1px solid var(--trait); border-radius: 999px; padding: 1px 7px; } .explication-corps { padding: 0 14px 10px; } .explication-corps p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); } .explication-corps p:last-child { margin-bottom: 0; } .explication-corps b { color: var(--ink); } .multi-intro { background: var(--surface-2); border: 1px solid var(--trait); border-radius: 12px; padding: 18px 20px; } .multi-intro h3 { margin: 0 0 6px; font-size: 16px; color: var(--ink); border: 0; } .multi-intro p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); } .multi-note { margin: 10px 0 0; font-size: 12px; color: var(--gris); } .multi-comparatif { width: 100%; margin: 4px 0 14px; } .multi-comparatif th[scope="row"] { text-align: left; font-weight: 500; color: var(--ink-2); background: transparent; } .multi-comparatif td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .multi-comparatif td.meilleur { font-weight: 700; color: var(--ink); } .onglet-verrouille { background: var(--surface-2); border: 1px dashed var(--trait); border-radius: 10px; padding: 18px; text-align: center; color: var(--ink-2); } .onglet-verrouille b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 4px; } .onglet-verrouille .bouton { margin-top: 10px; } .grille-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; } /* ── Panneau d'offre : « Aller plus loin » ─────────────────────────────────── */ body.design .offre.offre-design { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r, 12px); padding: 0; overflow: hidden; margin-bottom: 14px; } .od { display: grid; grid-template-columns: 1.15fr .85fr; } .od-texte { padding: 22px 24px; } .od-sur { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--or); } .od h2 { margin: 0 0 10px; font-size: 21px; letter-spacing: -.4px; color: var(--ink); border: 0; padding: 0; } .od-benefices { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; } .od-benefices li { position: relative; padding-left: 24px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); } .od-benefices li::before { content: "✓"; position: absolute; left: 0; color: var(--vert); font-weight: 800; } .od-offres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; } .od-offre { position: relative; border: 1px solid var(--trait); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; background: var(--surface); } .od-offre.choisie, .od-offre.mise-en-avant { border-color: var(--c1); box-shadow: 0 0 0 1px var(--c1); } .od-offre .pastille { position: absolute; top: -9px; left: 10px; background: var(--or); color: #1a1a19; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; } .od-offre b { font-size: 13px; color: var(--ink); } .od-offre .prix { font-size: 24px; font-weight: 800; letter-spacing: -.5px; color: var(--ink); } .od-offre .prix small { font-size: 12px; font-weight: 600; color: var(--gris); } .od-offre p { margin: 0 0 6px; font-size: 11.5px; color: var(--gris); line-height: 1.4; flex: 1; } .od-offre .bouton { text-align: center; padding: 8px 10px; } .od-echelle { margin: 12px 0 0; font-size: 12px; color: var(--gris); } .od-confiance { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--trait); font-size: 12px; color: var(--gris); display: flex; flex-wrap: wrap; gap: 4px 14px; } .od-confiance span::before { content: "·"; margin-right: 6px; color: var(--or); font-weight: 800; } .od-confiance span:first-child::before { display: none; } .od-apercu { position: relative; background: var(--surface-2); border-left: 1px solid var(--trait); min-height: 320px; overflow: hidden; } .od-apercu iframe { /* left:50% puis un décalage égal à la MOITIÉ DE LA LARGEUR RÉDUITE : un translateX(-50%) se ferait sur la largeur d'origine. */ position: absolute; top: 18px; left: 50%; margin-left: calc(-397px * var(--echelle, .42)); width: 794px; height: 1123px; border: 0; background: #fff; pointer-events: none; transform-origin: top left; transform: scale(var(--echelle, .42)); box-shadow: 0 6px 24px rgba(15,23,42,.22); border-radius: 4px; } .od-apercu::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to bottom, transparent, var(--surface-2)); pointer-events: none; } .od-apercu-legende { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 2; font-size: 11.5px; color: var(--ink-2); text-align: center; } @media (max-width: 860px) { .od { grid-template-columns: 1fr; } .od-apercu { min-height: 250px; border-left: 0; border-top: 1px solid var(--trait); order: -1; } } /* ── Barre de résultat mobile ─────────────────────────────────────────────── */ #barre-mobile { display: none; } @media (max-width: 1100px) { body.design #barre-mobile.visible { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--trait); box-shadow: 0 -8px 24px rgba(15,23,42,.1); } body.design #barre-mobile .bm-texte { flex: 1; min-width: 0; font-size: 13px; line-height: 1.3; color: var(--ink-2); } body.design #barre-mobile .bm-texte b { display: block; font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.design #barre-mobile button { min-height: 44px; padding: 0 16px; white-space: nowrap; } body.design { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); } } /* ── Comparateur de deux scénarios ─────────────────────────────────────────── */ .ab-barre { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .ab-onglets { display: inline-flex; border: 1px solid var(--trait); border-radius: 9px; overflow: hidden; } .ab-onglets button { border: 0; border-radius: 0; background: var(--surface); color: var(--gris); font-weight: 600; padding: 7px 14px; } .ab-onglets button[aria-pressed="true"] { background: var(--marine); color: var(--surface); } .ab-onglets button:hover { filter: none; } .ab-lien { background: none; border: 0; color: var(--c1); padding: 0; font-weight: 600; font-size: 12.5px; text-decoration: underline; cursor: pointer; } .ab-lien:hover { filter: none; } .ab-verrou { font-size: 11.5px; color: var(--gris); } .ab-table { width: 100%; margin-top: 14px; font-size: 13px; } .ab-table th { background: var(--marine); color: var(--surface); } body.design[data-mode="sombre"] .ab-table th { background: #2b3563; color: var(--ink); } .ab-table td { text-align: right; } .ab-table td:first-child { text-align: left; font-weight: 600; } .ab-table .gagne { font-weight: 800; color: var(--vert); } @media (prefers-reduced-motion: reduce) { .v-barre, .bloc summary::after, .attention > summary::after { transition: none; } .v-delta { animation: none; } }