/* Certenor — papier crème, or bruni, titres en serif, filets fins et ombres
   chaudes. Registre : cabinet de conseil, sérieux et soigné. */

body { background: #fff }

/* ── En-tête ─────────────────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(250,247,240,.86); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--line); transition: box-shadow .2s }
.site-header.is-scrolled { box-shadow: 0 10px 30px -22px rgba(36,29,20,.35) }
.header__inner { display: flex; align-items: center; gap: 2rem; height: 76px }
.brand { display: inline-flex; align-items: center; gap: .75rem; font-family: var(--font-heading); font-weight: 600; font-size: 1.36rem; letter-spacing: .01em }
.brand img { border-radius: 8px; box-shadow: 0 4px 12px -4px rgba(138,106,47,.5) }
.nav { display: flex; align-items: center; gap: 1.6rem; margin-left: auto; font-size: .82rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 500 }
.nav > a, .nav__groupLabel { display: inline-flex; align-items: center; padding: .4rem 0; color: var(--ink-soft); transition: .15s; cursor: pointer; position: relative }
.nav > a::after, .nav__groupLabel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transition: transform .2s }
.nav > a:hover::after, .nav__groupLabel:hover::after, .nav > a[aria-current="page"]::after { transform: scaleX(1) }
.nav > a:hover, .nav__groupLabel:hover, .nav > a[aria-current="page"] { color: var(--ink) }
.nav__group { position: relative }
.nav__menu { position: absolute; top: calc(100% + 12px); left: 0; min-width: 250px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .4rem; box-shadow: 0 20px 50px -20px rgba(36,29,20,.35); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s; display: grid; text-transform: none; letter-spacing: 0; font-size: .95rem }
.nav__menu a { padding: .65rem .9rem; border-radius: 7px; 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: 1rem }
.langs { display: flex; gap: .15rem; font-size: .74rem; font-weight: 700; letter-spacing: .08em }
.langs a { padding: .35rem .5rem; border-radius: 6px; color: var(--ink-soft) }
.langs a[aria-current="true"] { color: var(--accent); background: #fff }

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

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding: 88px 0 100px; background: 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(80px); opacity: .55 }
.hero__bg i:nth-child(1) { width: 640px; height: 640px; right: -200px; top: -260px; background: radial-gradient(circle, #f1dfb3, transparent 65%) }
.hero__bg i:nth-child(2) { width: 420px; height: 420px; left: -180px; bottom: -220px; background: radial-gradient(circle, #e8d8c0, transparent 65%) }
.hero__bg i:nth-child(3) { display: none }
.hero__bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent2), transparent) }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center }
.hero h1 { font-size: clamp(2.4rem, 4.8vw, 3.8rem); line-height: 1.08; letter-spacing: -.02em; margin: 1.2rem 0 1.4rem }
.hero .lead { max-width: 34rem }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem }
.hero__badges { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem; margin-top: 2.4rem; max-width: 36rem; padding-top: 1.6rem; border-top: 1px solid var(--line) }
.hero__badges li { display: flex; align-items: center; gap: .6rem; font-size: .86rem; color: var(--ink) }
.hero__badges .ico { width: 1.2em; height: 1.2em; stroke-width: 2.4; color: var(--accent); flex-shrink: 0 }

/* Maquette : questionnaire */
.mock { background: #fff; border-radius: 12px; box-shadow: 0 40px 90px -36px rgba(36,29,20,.45), 0 0 0 1px var(--line); overflow: hidden; transform: rotate(1.2deg); 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); border-bottom: 1px solid var(--line) }
.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: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft) }
.mock__rows { padding: .6rem 1.1rem }
.mock__rows li { display: flex; gap: .8rem; align-items: flex-start; padding: .8rem 0; border-bottom: 1px solid var(--line) }
.mock__rows li:last-child { border-bottom: 0 }
.mock__rows .ico { flex-shrink: 0; width: 1.6rem; height: 1.6rem; padding: .3rem; border-radius: 50%; stroke-width: 2.4; margin-top: .1rem }
.mock__rows .is-ok .ico { background: #e3f3e6; color: #1f7a3a }
.mock__rows .is-gap .ico { background: #fdf0d8; color: #9a6a12 }
.mock__rows strong { display: block; font-family: var(--font-heading); font-size: .95rem; margin-bottom: .15rem }
.mock__rows span { font-size: .78rem; color: var(--ink-soft) }
.mock__foot { display: flex; align-items: center; gap: .5rem; padding: .8rem 1.1rem; background: var(--surface); border-top: 1px solid var(--line); font-size: .8rem; font-weight: 600; color: var(--accent) }

/* ── Bandeau des étapes ──────────────────────────────────────────────────── */
.strip { background: #fff; border-bottom: 1px solid var(--line) }
.strip__steps { display: grid; grid-template-columns: repeat(3, 1fr) }
.strip__steps li { display: flex; align-items: center; gap: 1rem; padding: 1.4rem 1.6rem }
.strip__steps li + li { border-left: 1px solid var(--line) }
.strip__steps span { font-family: var(--font-heading); font-size: 1.5rem; color: var(--accent); flex-shrink: 0 }
.strip__steps p { font-size: .93rem }

/* ── Page de garde ───────────────────────────────────────────────────────── */
.pagehead { position: relative; padding: 76px 0 64px; background: var(--surface); overflow: hidden; text-align: center }
.pagehead__bg { position: absolute; inset: 0; background: radial-gradient(50% 90% at 50% 100%, #f1dfb366, transparent 70%) }
.pagehead .shell { position: relative; max-width: 54rem }
.pagehead .kicker { justify-content: center }
.pagehead h1 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); letter-spacing: -.02em; margin: 1rem auto 1.2rem; max-width: 22ch }
.pagehead .lead { max-width: 60ch; margin-inline: auto }
.pagehead--small { padding: 56px 0 44px }

/* ── Bandeau cible ───────────────────────────────────────────────────────── */
.audience { background: var(--deep); color: #fff }
.audience .shell { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1.1rem 0; font-size: .95rem; text-align: center }
.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: var(--accent2) }

/* ── Sections ────────────────────────────────────────────────────────────── */
.section { padding: 96px 0 }
.section--tight { padding: 32px 0 }
.section.band { background: var(--surface) }
.section h2 { font-size: clamp(1.8rem, 3.2vw, 2.55rem); letter-spacing: -.015em }
.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::after { content: ""; display: block; width: 3rem; height: 2px; background: var(--accent2); margin-top: 1.3rem }
.prose__body p { color: var(--ink-soft); font-size: 1.06rem; line-height: 1.8 }
.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.3rem }
.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: 1px solid var(--line); border-radius: var(--radius); padding: 2.1rem; transition: transform .25s, box-shadow .25s, border-color .25s }
.card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(36,29,20,.35); border-color: var(--accent2) }
.card__icon, .metric__icon { display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--accent); margin-bottom: 1.3rem }
.card__icon .ico, .metric__icon .ico { width: 1.4rem; height: 1.4rem }
.card__num { position: absolute; top: 1.6rem; right: 1.8rem; font-family: var(--font-heading); font-size: .95rem; color: var(--accent2) }
.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: #fff; border: 1px solid var(--line) }
.metric__num { position: absolute; top: 1.4rem; right: 1.6rem; font-family: var(--font-heading); font-size: 2.4rem; line-height: 1; color: var(--accent2); opacity: .35 }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem }
.steps li { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 2.1rem }
.steps__badge { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.2rem; padding: .4rem .8rem .4rem .5rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); 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 }

/* Questions et réponses */
.qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem }
.qa > div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem 2rem }
.qa dt { display: flex; gap: .7rem; align-items: flex-start; font-family: var(--font-heading); font-size: 1.14rem; margin-bottom: .8rem }
.qa dt .ico { flex-shrink: 0; color: var(--accent); margin-top: .2rem }
.qa dd { color: var(--ink-soft); font-size: .95rem; line-height: 1.7; padding-left: 1rem; border-left: 2px solid var(--accent2) }

/* Phases */
.phases { display: grid; gap: 1.5rem; position: relative; padding-left: 4.5rem }
.phases::before { content: ""; position: absolute; left: 1.6rem; top: 1.5rem; bottom: 1.5rem; width: 1px; background: var(--accent2) }
.phase { position: relative }
.phase__marker { position: absolute; left: -4.5rem; top: 1.4rem; width: 3.3rem; height: 3.3rem; border-radius: 50%; background: #fff; border: 1px solid var(--accent2); color: var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 1.05rem; box-shadow: 0 0 0 6px #fff }
.phase__card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 2.2rem; display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.2rem 2.5rem }
.phase__head { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid var(--line) }
.phase h2 { font-size: 1.55rem }
.phase__meta { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--accent); background: var(--surface); padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--line) }
.phase__meta i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5 }
.phase__text { color: var(--ink-soft); font-size: .98rem; line-height: 1.75 }
.phase__out { display: grid; gap: .55rem; align-content: start }
.phase__out li { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; padding: .6rem .8rem; border-radius: 6px; background: var(--surface) }
.phase__out .ico { color: var(--accent); margin-top: .15rem; stroke-width: 2.4; width: 1em; height: 1em }

/* Tableau */
.table-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden }
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(--surface); font-family: var(--font-heading); font-size: .84rem; color: var(--accent) }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0 }
tbody th { font-family: var(--font-heading); 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.9rem 2.1rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); position: relative }
.notice::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(var(--accent), var(--accent2)); border-radius: 4px 0 0 4px }
.notice__icon { flex-shrink: 0; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: var(--accent); display: inline-flex; align-items: center; justify-content: center }
.notice h2 { font-size: 1.2rem; margin-bottom: .5rem }
.notice p { color: var(--ink-soft); font-size: .95rem; line-height: 1.7 }

/* Tarifs */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; align-items: stretch }
.tier { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 2.1rem }
.tier--featured { background: var(--deep); color: #fff; border-color: transparent; box-shadow: 0 30px 60px -30px rgba(36,29,20,.7); transform: translateY(-8px) }
.tier__icon { width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); 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,.08); border-color: rgba(255,255,255,.15); color: var(--accent2) }
.tier__step { font-family: var(--font-heading); font-size: .8rem; color: var(--accent2); margin-bottom: .3rem }
.tier h3 { font-size: 1.24rem }
.tier__price { font-family: var(--font-heading); font-size: 1.7rem; letter-spacing: -.01em; margin: .8rem 0 .2rem }
.tier__monthly { font-size: .86rem; color: rgba(255,255,255,.7); 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,.75) }
.tier .button { width: 100% }
.tier--featured .button { background: var(--accent2); color: var(--deep) }
.tier--featured .button:hover { background: #fff }
.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: .7rem }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .2s }
.faq details[open] { border-color: var(--accent2) }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 1.4rem; cursor: pointer; font-family: var(--font-heading); font-size: 1.06rem }
.faq summary i { flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--line); position: relative; transition: transform .25s }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: .65rem; height: 1.5px; 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) }
.faq p { padding: 0 1.4rem 1.3rem; color: var(--ink-soft); font-size: .95rem; line-height: 1.75 }

/* Contact */
.contact { padding: 40px 0 100px; background: var(--surface) }
.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: 18px; background: var(--deep); color: #fff; position: relative; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(36,29,20,.8) }
.contact__panel::before { content: ""; position: absolute; width: 480px; height: 480px; right: -140px; top: -200px; border-radius: 50%; background: radial-gradient(circle, var(--accent), transparent 65%); opacity: .55; 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: 12px; padding: 2rem; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6) }
.contact__mail { width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--accent); 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% }

/* Pages légales */
.legal { max-width: 74ch; margin-inline: auto; display: grid; gap: 1rem }
.legal article { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.9rem }
.legal h2 { display: flex; gap: .9rem; font-size: 1.12rem; margin-bottom: .7rem }
.legal h2 span { color: var(--accent2); font-size: .9rem; padding-top: .15rem }
.legal p { color: var(--ink-soft); font-size: .95rem; line-height: 1.8 }
.legal__back { margin-top: 1.5rem; text-align: center }

/* ── Pied de page ────────────────────────────────────────────────────────── */
.site-footer { background: var(--deep); color: rgba(255,255,255,.72); padding: 64px 0 0 }
.site-footer::before { content: ""; display: block; height: 1px; background: linear-gradient(90deg, transparent, var(--accent2), transparent); margin-top: -64px; margin-bottom: 64px }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem }
.footer__brand .brand { color: #fff }
.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; color: rgba(255,255,255,.5) }
.footer__col { display: grid; gap: .55rem; align-content: start }
.footer__title { font-family: var(--font-heading); font-size: .95rem; color: var(--accent2); margin-bottom: .5rem }
.footer__col a { font-size: .95rem; transition: color .15s }
.footer__col a:hover { color: #fff }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.3rem 0; border-top: 1px solid rgba(255,255,255,.1); font-size: .84rem }
.footer__bottom .langs a { color: rgba(255,255,255,.6) }
.footer__bottom .langs a[aria-current="true"] { color: #fff; background: rgba(255,255,255,.1) }

/* ── Adaptatif ───────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr }
  .hero__visual { max-width: 580px }
  .mock { transform: none }
  .prose, .faq-grid, .qa { grid-template-columns: 1fr }
  .prose__head, .faq-grid .section__head { position: static }
  .grid--3, .steps, .tiers { grid-template-columns: 1fr }
  .tier--featured { transform: none }
  .phase__card { grid-template-columns: 1fr }
  .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 64px }
  .hero h1 { font-size: 2.2rem }
  .hero__badges { grid-template-columns: 1fr }
  .strip__steps { grid-template-columns: 1fr }
  .strip__steps li + li { border-left: 0; border-top: 1px solid var(--line) }
  .section { padding: 64px 0 }
  .grid--2 { grid-template-columns: 1fr }
  .phases { padding-left: 3.2rem }
  .phase__marker { left: -3.2rem; width: 2.5rem; height: 2.5rem }
  .phases::before { left: 1.2rem }
  .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) }
}