/* Dossivio — hero clair aux halos violets, formes très arrondies, ombres
   douces, navigation en pilule. Registre : logiciel accueillant et net. */

/* ── En-tête ─────────────────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.8); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); transition: box-shadow .2s }
.site-header.is-scrolled { box-shadow: 0 10px 30px -20px rgba(34,28,77,.35) }
.header__inner { display: flex; align-items: center; gap: 1.5rem; height: 76px }
.brand { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--font-heading); font-weight: 600; font-size: 1.35rem; letter-spacing: -.01em }
.brand img { border-radius: 12px; box-shadow: 0 6px 16px -6px rgba(86,70,209,.6) }
.nav { display: flex; align-items: center; gap: .2rem; margin-left: auto; font-size: .92rem; font-weight: 500; background: var(--surface); border-radius: 999px; padding: .3rem }
.nav > a, .nav__groupLabel { display: inline-flex; align-items: center; padding: .5rem .95rem; border-radius: 999px; color: var(--ink-soft); transition: .15s; cursor: pointer }
.nav > a:hover, .nav__groupLabel:hover { background: #fff; color: var(--ink) }
.nav > a[aria-current="page"] { background: var(--accent); color: #fff }
.nav__group { position: relative }
.nav__menu { position: absolute; top: calc(100% + 10px); left: 0; min-width: 250px; background: #fff; border-radius: 16px; padding: .5rem; box-shadow: 0 24px 60px -24px rgba(34,28,77,.4); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s; display: grid }
.nav__menu a { padding: .65rem .9rem; border-radius: 10px; color: var(--ink-soft) }
.nav__menu a:hover, .nav__menu a[aria-current="page"] { background: var(--surface); color: var(--accent) }
.nav__group:hover .nav__menu, .nav__group.is-open .nav__menu, .nav__group:focus-within .nav__menu { opacity: 1; visibility: visible; transform: none }
.header__actions { display: flex; align-items: center; gap: .9rem }
.langs { display: flex; gap: .15rem; font-size: .76rem; font-weight: 700; letter-spacing: .06em }
.langs a { padding: .35rem .5rem; border-radius: 8px; color: var(--ink-soft) }
.langs a[aria-current="true"] { color: var(--accent); background: var(--surface) }

/* ── Fil d'Ariane ────────────────────────────────────────────────────────── */
.crumbs { font-size: .8rem; color: var(--ink-soft) }
.crumbs .shell { display: flex; align-items: center; gap: .5rem; padding: .8rem 0 0 }
.crumbs a:hover { color: var(--accent) }
.crumbs .ico { opacity: .5 }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding: 84px 0 96px; background: linear-gradient(180deg, #fff, var(--surface)); isolation: isolate }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none }
.hero__bg i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5 }
.hero__bg i:nth-child(1) { width: 620px; height: 620px; right: -180px; top: -240px; background: radial-gradient(circle, var(--accent2), transparent 65%) }
.hero__bg i:nth-child(2) { width: 460px; height: 460px; left: -200px; bottom: -220px; background: radial-gradient(circle, #ffd1e8, transparent 65%) }
.hero__bg i:nth-child(3) { width: 320px; height: 320px; left: 40%; bottom: -160px; background: radial-gradient(circle, #c9e5ff, transparent 65%) }
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center }
.hero h1 { font-size: clamp(2.4rem, 4.8vw, 3.9rem); line-height: 1.06; letter-spacing: -.03em; margin: 1.2rem 0 1.4rem }
.hero .lead { max-width: 33rem }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem }
.hero .button { border-radius: 999px }
.hero__badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.2rem }
.hero__badges li { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border-radius: 999px; background: #fff; box-shadow: 0 4px 14px -6px rgba(34,28,77,.25); font-size: .8rem; font-weight: 600; color: var(--ink) }
.hero__badges .ico { width: 1.1em; height: 1.1em; stroke-width: 2.6; color: var(--accent) }

/* Maquette : file de traitement */
.mock { background: #fff; border-radius: 22px; box-shadow: 0 40px 90px -36px rgba(34,28,77,.45), 0 0 0 1px rgba(34,28,77,.06); overflow: hidden; transform: rotate(-1.5deg); transition: transform .5s }
.hero__visual:hover .mock { transform: rotate(0) }
.mock__bar { display: flex; align-items: center; gap: .4rem; padding: .75rem 1.1rem; background: var(--surface) }
.mock__bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--line) }
.mock__bar span:nth-child(1) { background: #f27069 } .mock__bar span:nth-child(2) { background: #f5bf4f } .mock__bar span:nth-child(3) { background: #62c554 }
.mock__bar em { margin-left: auto; font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft) }
.mock__cols { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .5rem; padding: 1.1rem; align-items: start }
.mock__colTitle { display: flex; align-items: center; gap: .4rem; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .6rem }
.mock__colTitle .ico { width: 1.1rem; height: 1.1rem; color: var(--accent) }
.mock__chip { font-size: .78rem; padding: .55rem .7rem; border-radius: 10px; background: var(--surface); margin-bottom: .45rem; line-height: 1.35; border: 1px solid transparent }
.mock__col:nth-child(3) .mock__chip { background: color-mix(in srgb, var(--accent) 8%, #fff); border-color: color-mix(in srgb, var(--accent) 25%, transparent) }
.mock__col:nth-child(5) .mock__chip { background: var(--accent); color: #fff; font-weight: 600 }
.mock__arrow { align-self: center; color: var(--accent2) }
.mock__foot { display: flex; align-items: center; gap: .5rem; padding: .8rem 1.1rem; border-top: 1px solid var(--line); font-size: .8rem; font-weight: 600; color: var(--accent) }

/* ── Bandeau des étapes ──────────────────────────────────────────────────── */
.strip { margin-top: -48px; position: relative; z-index: 1 }
.strip__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem }
.strip__steps li { display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.4rem; background: #fff; border-radius: var(--radius); box-shadow: 0 16px 40px -24px rgba(34,28,77,.35) }
.strip__steps span { display: inline-flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; font-weight: 700; font-size: .8rem; flex-shrink: 0 }
.strip__steps p { font-size: .93rem; font-weight: 600 }

/* ── Page de garde ───────────────────────────────────────────────────────── */
.pagehead { position: relative; padding: 56px 0 72px; overflow: hidden }
.pagehead__bg { position: absolute; inset: 0; background: radial-gradient(50% 100% at 100% 0%, color-mix(in srgb, var(--accent2) 22%, transparent), transparent 60%), radial-gradient(40% 80% at 0% 100%, #ffe1ee55, transparent 60%) }
.pagehead .shell { position: relative }
.pagehead h1 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); letter-spacing: -.03em; margin: 1rem 0 1.2rem; max-width: 22ch }
.pagehead .lead { max-width: 62ch }
.pagehead--small { padding: 40px 0 48px }

/* ── Bandeau cible ───────────────────────────────────────────────────────── */
.audience { padding: 2.4rem 0 0 }
.audience .shell { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.4rem; border-radius: var(--radius); background: var(--deep); color: #fff; font-size: .95rem }
.audience .ico { color: var(--accent2); width: 1.5em; height: 1.5em }
.audience strong { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55) }

/* ── Sections ────────────────────────────────────────────────────────────── */
.section { padding: 96px 0 }
.section--tight { padding: 28px 0 }
.section.band { background: var(--surface) }
.section h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); letter-spacing: -.025em }
.section__head { max-width: 46rem; margin-bottom: 2.8rem }
.section__head > p:not(.kicker) { color: var(--ink-soft); margin-top: 1rem; font-size: 1.05rem }
.section__head .kicker { margin-bottom: .9rem }
.section__head--center { margin-inline: auto; text-align: center }
.section__head--center .kicker { justify-content: center }

.prose { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(2rem, 6vw, 6rem); align-items: start }
.prose__head { position: sticky; top: 100px }
.prose__head h2 { background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent }
.prose__body p { color: var(--ink-soft); font-size: 1.06rem; line-height: 1.75 }
.prose__body p + p { margin-top: 1.2rem }
.prose__body p:first-child { color: var(--ink); font-size: 1.15rem }

.grid { display: grid; gap: 1.4rem }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.card { position: relative; background: #fff; border-radius: var(--radius); padding: 2.1rem; box-shadow: 0 10px 30px -22px rgba(34,28,77,.3); transition: transform .25s, box-shadow .25s }
.section.band .card { box-shadow: 0 14px 40px -26px rgba(34,28,77,.35) }
.card:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -30px rgba(34,28,77,.45) }
.card__icon, .metric__icon { display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; margin-bottom: 1.3rem; box-shadow: 0 10px 20px -10px var(--accent) }
.card__icon .ico, .metric__icon .ico { width: 1.4rem; height: 1.4rem }
.card__num { position: absolute; top: 1.6rem; right: 1.8rem; font-size: .74rem; font-weight: 700; letter-spacing: .1em; color: var(--accent); opacity: .5 }
.card h3, .metric h3 { font-size: 1.18rem; margin-bottom: .6rem }
.card p, .metric p { color: var(--ink-soft); font-size: .95rem; line-height: 1.65 }
.metric { position: relative; padding: 2.1rem; border-radius: var(--radius); background: var(--surface); overflow: hidden }
.metric__num { position: absolute; top: -.6rem; right: 1rem; font-family: var(--font-heading); font-size: 5rem; line-height: 1; color: var(--accent); opacity: .07 }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem }
.steps li { position: relative; background: #fff; border-radius: var(--radius); padding: 2.1rem; box-shadow: 0 14px 40px -26px rgba(34,28,77,.35) }
.steps__badge { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.2rem; padding: .4rem .8rem .4rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, #fff); color: var(--accent); font-size: .74rem; font-weight: 700; letter-spacing: .08em }
.steps__badge .ico { width: 1.1rem; height: 1.1rem }
.steps h3 { font-size: 1.14rem; margin-bottom: .6rem }
.steps p { color: var(--ink-soft); font-size: .95rem; line-height: 1.65 }

/* Comparaison */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem }
.compare__col { border-radius: var(--radius); padding: 2rem 2.1rem }
.compare__col--before { background: #fff; box-shadow: inset 0 0 0 1px var(--line) }
.compare__col--after { background: linear-gradient(160deg, var(--accent), var(--accent-ink)); color: #fff; box-shadow: 0 30px 60px -30px rgba(86,70,209,.6) }
.compare__label { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.2rem }
.compare__col--before .compare__label { background: var(--surface); color: var(--ink-soft) }
.compare__col--after .compare__label { background: rgba(255,255,255,.15); color: #fff }
.compare li { position: relative; padding: .6rem 0 .6rem 1.7rem; font-size: .95rem; line-height: 1.55 }
.compare__col--before li { color: var(--ink-soft) }
.compare__col--before li::before { content: ""; position: absolute; left: .2rem; top: 1.2rem; width: .7rem; height: 2px; background: var(--line) }
.compare__col--after li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 0 4px rgba(255,255,255,.15) }

/* Frise */
.timeline { position: relative; padding-left: 2.6rem; display: grid; gap: 1.2rem }
.timeline::before { content: ""; position: absolute; left: .55rem; top: 1rem; bottom: 1rem; width: 2px; background: linear-gradient(var(--accent2), var(--line)) }
.timeline li { position: relative }
.timeline li::before { content: ""; position: absolute; left: -2.6rem; top: 1.3rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px #fff, 0 0 0 6px var(--line) }
.timeline__time { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: .5rem }
.timeline__card { background: #fff; border-radius: var(--radius); padding: 1.6rem 1.8rem; box-shadow: 0 14px 40px -26px rgba(34,28,77,.35) }
.timeline h3 { font-size: 1.2rem; margin-bottom: .5rem }
.timeline__card p { color: var(--ink-soft); font-size: .95rem; line-height: 1.7 }

/* Tableau */
.table-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 14px 40px -26px rgba(34,28,77,.35) }
table { font-size: .93rem }
th, td { text-align: left; padding: 1rem 1.3rem; border-bottom: 1px solid var(--line); vertical-align: top }
thead th { background: var(--deep); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0 }
tbody th { font-weight: 600; width: 24% }
td { color: var(--ink-soft) }
td:nth-child(2) { color: var(--ink) }

/* Encadré */
.notice { display: flex; gap: 1.4rem; align-items: flex-start; padding: 1.8rem 2rem; border-radius: var(--radius); background: var(--deep); color: #fff; box-shadow: 0 24px 50px -30px rgba(34,28,77,.6) }
.notice__icon { flex-shrink: 0; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: rgba(255,255,255,.1); color: var(--accent2); display: inline-flex; align-items: center; justify-content: center }
.notice h2 { font-size: 1.18rem; margin-bottom: .5rem }
.notice p { color: rgba(255,255,255,.78); font-size: .95rem; line-height: 1.65 }

/* Tarifs */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; align-items: stretch }
.tier { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); padding: 2.1rem; box-shadow: 0 14px 40px -26px rgba(34,28,77,.35) }
.tier--featured { background: linear-gradient(160deg, var(--accent), var(--accent-ink)); color: #fff; box-shadow: 0 40px 70px -30px rgba(86,70,209,.7); transform: translateY(-10px) }
.tier__icon { width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--surface); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.2rem }
.tier--featured .tier__icon { background: rgba(255,255,255,.15); color: #fff }
.tier__step { font-size: .7rem; font-weight: 700; letter-spacing: .14em; color: var(--ink-soft); margin-bottom: .3rem }
.tier--featured .tier__step { color: rgba(255,255,255,.6) }
.tier h3 { font-size: 1.22rem }
.tier__price { font-family: var(--font-heading); font-size: 1.7rem; letter-spacing: -.02em; margin: .8rem 0 .2rem }
.tier__monthly { font-size: .86rem; color: rgba(255,255,255,.75); margin-bottom: .6rem }
.tier__monthly strong { color: #fff }
.tier__text { color: var(--ink-soft); font-size: .92rem; line-height: 1.6; margin: .6rem 0 1.6rem; flex: 1 }
.tier--featured .tier__text { color: rgba(255,255,255,.8) }
.tier .button { width: 100%; border-radius: 999px }
.tier--featured .button { background: #fff; color: var(--accent) }
.tier--featured .button:hover { background: var(--surface) }
.tiers__note { display: flex; gap: .7rem; align-items: flex-start; max-width: 56rem; margin: 2rem auto 0; font-size: .86rem; color: var(--ink-soft) }
.tiers__note .ico { color: var(--accent); flex-shrink: 0; margin-top: .1rem }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: 1fr 1.7fr; gap: clamp(2rem, 6vw, 6rem); align-items: start }
.faq-grid .section__head { position: sticky; top: 100px; margin: 0 }
.faq { display: grid; gap: .8rem }
.faq details { background: #fff; border-radius: 16px; box-shadow: 0 10px 30px -24px rgba(34,28,77,.35); transition: box-shadow .2s }
.faq details[open] { box-shadow: 0 24px 50px -28px rgba(34,28,77,.45) }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 1.4rem; cursor: pointer; font-weight: 600; font-size: 1rem }
.faq summary i { flex-shrink: 0; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--surface); position: relative; transition: transform .25s, background .25s }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: .7rem; height: 2px; background: var(--accent); transform: translate(-50%, -50%) }
.faq summary i::after { transform: translate(-50%, -50%) rotate(90deg) }
.faq details[open] summary i { transform: rotate(45deg); background: color-mix(in srgb, var(--accent) 14%, #fff) }
.faq p { padding: 0 1.4rem 1.3rem; color: var(--ink-soft); font-size: .95rem; line-height: 1.7 }

/* Contact */
.contact { padding: 40px 0 100px }
.contact__panel { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(2rem, 4vw, 3.5rem); border-radius: 28px; background: var(--deep); color: #fff; position: relative; overflow: hidden }
.contact__panel::before { content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -220px; border-radius: 50%; background: radial-gradient(circle, var(--accent), transparent 65%); opacity: .6; filter: blur(30px) }
.contact__text, .contact__card { position: relative }
.contact__text .kicker { color: var(--accent2) }
.contact__text h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: .8rem 0 1rem }
.contact__text > p { color: rgba(255,255,255,.78); line-height: 1.7 }
.contact__points { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.6rem; font-size: .88rem }
.contact__points li { display: inline-flex; align-items: center; gap: .5rem }
.contact__card { background: #fff; color: var(--ink); border-radius: 22px; padding: 2rem; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5) }
.contact__mail { width: 3.2rem; height: 3.2rem; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem }
.contact__card h3 { font-size: 1.3rem; margin-bottom: .5rem }
.contact__card > p { color: var(--ink-soft); font-size: .95rem; line-height: 1.6; margin-bottom: 1.4rem }
.contact__card .button { width: 100%; border-radius: 999px }

/* Pages légales */
.legal { max-width: 74ch; margin-inline: auto; display: grid; gap: 1rem }
.legal article { background: var(--surface); border-radius: var(--radius); padding: 1.6rem 1.9rem }
.legal h2 { display: flex; gap: .9rem; font-size: 1.1rem; margin-bottom: .7rem }
.legal h2 span { color: var(--accent); font-size: .78rem; font-weight: 700; padding-top: .3rem; letter-spacing: .08em }
.legal p { color: var(--ink-soft); font-size: .95rem; line-height: 1.75 }
.legal__back { margin-top: 1.5rem; text-align: center }

/* ── Pied de page ────────────────────────────────────────────────────────── */
.site-footer { background: var(--surface); color: var(--ink-soft); padding: 64px 0 0; border-top: 1px solid var(--line) }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem }
.footer__brand .brand { color: var(--ink) }
.footer__brand > p { margin-top: 1.1rem; max-width: 34ch; font-size: .95rem }
.footer__swiss { display: inline-flex; align-items: center; gap: .5rem; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase }
.footer__col { display: grid; gap: .55rem; align-content: start }
.footer__title { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-bottom: .5rem }
.footer__col a { font-size: .95rem; transition: color .15s }
.footer__col a:hover { color: var(--accent) }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.3rem 0; border-top: 1px solid var(--line); font-size: .84rem }

/* ── Adaptatif ───────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr }
  .hero__visual { max-width: 600px }
  .mock { transform: none }
  .mock__cols { grid-template-columns: 1fr }
  .mock__arrow { transform: rotate(90deg); justify-self: center }
  .prose, .faq-grid, .compare { grid-template-columns: 1fr }
  .prose__head, .faq-grid .section__head { position: static }
  .grid--3, .steps, .tiers { grid-template-columns: 1fr }
  .tier--featured { transform: none }
  .contact__panel { grid-template-columns: 1fr }
  .footer__grid { grid-template-columns: 1fr 1fr }
}
@media (max-width: 760px) {
  .header__inner { height: 66px; gap: 1rem }
  .nav { display: none }
  .header__actions .button--sm { display: none }
  .hero { padding: 56px 0 72px }
  .hero h1 { font-size: 2.2rem }
  .strip { margin-top: -30px }
  .strip__steps { grid-template-columns: 1fr }
  .section { padding: 64px 0 }
  .grid--2 { grid-template-columns: 1fr }
  .footer__grid { grid-template-columns: 1fr }
  .footer__bottom { flex-direction: column; align-items: flex-start }
}

/* ── Sélecteur de langue (drapeau) ───────────────────────────────────────── */
.lang { position: relative }
.lang__btn { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: calc(var(--radius) * .7); background: transparent; cursor: pointer; font-size: .76rem; font-weight: 700; letter-spacing: .06em; color: var(--ink-soft) }
.lang__btn:hover { background: var(--surface); color: var(--ink) }
.flag { width: 18px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); flex-shrink: 0 }
.lang__menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 170px; background: #fff; border: 1px solid var(--line); border-radius: calc(var(--radius) * .8); padding: .35rem; box-shadow: 0 20px 50px -20px rgba(0,0,0,.3); display: grid; opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s; z-index: 5 }
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: none }
.lang__menu a { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 6px; font-size: .9rem; color: var(--ink-soft) }
.lang__menu a:hover, .lang__menu a[aria-current="true"] { background: var(--surface); color: var(--ink) }
.footer__bottom .langs { display: flex; gap: .6rem; font-size: .84rem }
.footer__bottom .langs a[aria-current="true"] { font-weight: 700 }

/* ── En 30 secondes : schéma et bulles ───────────────────────────────────── */
.diagram { display: flex; align-items: stretch; gap: .9rem; margin-bottom: 2.4rem }
.diagram__node { flex: 1 1 0; min-width: 0 }
.diagram__arrow { flex: 0 0 auto }
.diagram__node { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1rem; text-align: center; position: relative }
.diagram__node--main { border-color: var(--accent); box-shadow: 0 20px 50px -30px var(--accent); background: linear-gradient(180deg, #fff, var(--surface)) }
.diagram__icon { display: inline-flex; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--surface); color: var(--accent); margin-bottom: 1rem }
.diagram__node--main .diagram__icon { background: var(--accent); color: #fff }
.diagram__icon .ico { width: 1.6rem; height: 1.6rem }
.diagram__node strong { display: block; font-family: var(--font-heading); font-size: 1.05rem; margin-bottom: .4rem; text-wrap: balance }
.diagram__node p { color: var(--ink-soft); font-size: .86rem; line-height: 1.5 }
.diagram__arrow { display: flex; align-items: center; color: var(--accent); opacity: .7 }
.diagram__arrow .ico { width: 1.8rem; height: 1.8rem }
.bubbles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem }
.bubble { position: relative; background: var(--surface); border-radius: var(--radius); padding: 1.2rem 1.3rem 1.2rem 1.5rem }
.bubble::before { content: ""; position: absolute; left: 0; top: 1.2rem; bottom: 1.2rem; width: 4px; border-radius: 4px; background: var(--accent2, var(--accent)) }
.bubble strong { display: block; font-size: .95rem; margin-bottom: .35rem; color: var(--accent) }
.bubble p { font-size: .88rem; color: var(--ink-soft); line-height: 1.6 }

/* ── Catalogue à trois étages ────────────────────────────────────────────── */
.offers__tier { margin-top: 2.4rem }
.offers__tierHead { display: flex; gap: 1.1rem; align-items: flex-start; margin-bottom: 1.2rem }
.offers__tierNum { flex-shrink: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; margin-top: .2rem }
.offers__tierHead h3 { font-size: 1.45rem }
.offers__tierHead p { color: var(--ink-soft); font-size: .95rem; margin-top: .3rem; max-width: 64ch }
.offers__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem }
.offer { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; transition: transform .25s, box-shadow .25s }
.offer:hover { transform: translateY(-3px); box-shadow: 0 22px 45px -30px rgba(0,0,0,.35) }
.offer--featured { border-color: var(--accent); box-shadow: 0 16px 40px -28px var(--accent) }
.offer__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem }
.offer__icon { width: 2.5rem; height: 2.5rem; border-radius: 8px; background: var(--surface); color: var(--accent); display: inline-flex; align-items: center; justify-content: center }
.offer__badge { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .55rem; border-radius: 999px; background: var(--accent); color: #fff }
.offer h4 { font-size: 1.06rem; margin-bottom: .45rem }
.offer > p { color: var(--ink-soft); font-size: .9rem; line-height: 1.6; flex: 1 }
.offer__price { font-family: var(--font-heading); font-size: 1.05rem; color: var(--ink); margin: .9rem 0 .6rem; font-variant-numeric: tabular-nums }
.offer__link { display: inline-flex; align-items: center; gap: .4rem; font-size: .86rem; font-weight: 600; color: var(--accent) }
.offer__link:hover { text-decoration: underline }

/* ── Calculateur ─────────────────────────────────────────────────────────── */
.calc__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start }
.calc__grid .section__head { margin: 0 }
.calc__disclaimer { display: flex; gap: .6rem; align-items: flex-start; font-size: .85rem !important; color: var(--ink-soft); margin-top: 1.4rem !important }
.calc__disclaimer .ico { flex-shrink: 0; color: var(--accent); margin-top: .15rem }
.calc__card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; box-shadow: 0 24px 50px -36px rgba(0,0,0,.4); display: grid; gap: 1rem }
.calc__field span { display: block; font-size: .86rem; font-weight: 600; margin-bottom: .4rem }
.calc__input { display: flex; align-items: center; border: 1px solid var(--line); border-radius: calc(var(--radius) * .6); overflow: hidden }
.calc__input input { flex: 1; border: 0; padding: .7rem .9rem; font-size: 1rem; font-variant-numeric: tabular-nums; min-width: 0 }
.calc__input input:focus { outline: none; background: var(--surface) }
.calc__input em { font-style: normal; font-size: .78rem; color: var(--ink-soft); padding: 0 .9rem; border-left: 1px solid var(--line); white-space: nowrap }
.calc__result { margin-top: .4rem; padding: 1.3rem 1.4rem; border-radius: calc(var(--radius) * .8); background: var(--deep); color: #fff }
.calc__resultLabel { display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6) }
.calc__resultValue { display: block; font-family: var(--font-heading); font-size: 2.2rem; line-height: 1.1; margin: .4rem 0 .5rem; font-variant-numeric: tabular-nums; color: var(--accent2, #fff) }
.calc__result small { display: block; font-size: .86rem; color: rgba(255,255,255,.8); line-height: 1.5 }
.calc__card .button { width: 100% }

@media (max-width: 1000px) {
  .diagram { flex-direction: column }
  .diagram__arrow { justify-content: center; transform: rotate(90deg) }
  .bubbles { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .offers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .calc__grid { grid-template-columns: 1fr }
}
@media (max-width: 700px) {
  .bubbles, .offers__grid { grid-template-columns: 1fr }
  .lang__btn span { display: none }
}

/* ── Bandeau de confiance ────────────────────────────────────────────────── */
.trustband { background: #fff; border-bottom: 1px solid var(--line) }
.trustband ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) }
.trustband li + li { border-left: 1px solid var(--line) }
.trustband a { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .95rem 1rem; font-size: .84rem; font-weight: 600; color: var(--ink); transition: background .15s, color .15s }
.trustband a:hover { background: var(--surface); color: var(--accent) }
.trustband .ico { color: var(--accent); width: 1.2em; height: 1.2em; flex-shrink: 0 }
.trustband .ico--swiss { width: 1.1em; height: 1.1em }

/* ── Grille tarifaire ────────────────────────────────────────────────────── */
.grid-table { min-width: 720px }
.grid-table thead th { position: sticky; top: 0 }
.grid-table th.grid-table__line { width: 26% }
.grid-table tbody th { font-family: var(--font-heading); font-size: 1rem }
.grid-table tbody th a { color: var(--accent) }
.grid-table tbody th a:hover { text-decoration: underline }
.grid-table tbody th small { display: block; font-family: var(--font-body); font-size: .78rem; font-weight: 400; color: var(--ink-soft); margin-top: .2rem }
.grid-table td { font-variant-numeric: tabular-nums; color: var(--ink) }
.grid-table__none { color: var(--line); font-weight: 400 }
.grid-table tbody tr:hover td, .grid-table tbody tr:hover th { background: var(--surface) }

/* ── Menu : lien « toute la gamme » ──────────────────────────────────────── */
.nav__all { display: flex !important; align-items: center; gap: .4rem; margin-top: .3rem; padding-top: .7rem !important; border-top: 1px solid var(--line); color: var(--accent) !important; font-weight: 600 }

/* ── Pied de page : mention du groupe ────────────────────────────────────── */
.footer__group { text-decoration: underline; text-underline-offset: 3px }
.footer__group:hover { color: #fff }

/* ── Tableau comparatif de la page Souveraineté ──────────────────────────── */
.table-card td:last-child { font-weight: 600; color: var(--ink) }

@media (max-width: 760px) {
  .trustband ul { grid-template-columns: 1fr 1fr }
  .trustband li:nth-child(3) { border-left: 0 }
  .trustband li:nth-child(n+3) { border-top: 1px solid var(--line) }
}