/* Contivaro — hero clair sur grille technique, maquette sombre en contrepoint,
   titres en slab, cartes à liseré supérieur. Registre : infrastructure sûre. */

/* ── En-tête ─────────────────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.86); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); transition: box-shadow .2s }
.site-header.is-scrolled { box-shadow: 0 8px 26px -20px rgba(11,31,52,.4) }
.header__inner { display: flex; align-items: center; gap: 2rem; height: 72px }
.brand { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--font-heading); font-weight: 700; font-size: 1.22rem }
.brand img { border-radius: 9px; box-shadow: 0 4px 12px -4px rgba(27,95,163,.5) }
.nav { display: flex; align-items: center; gap: 1.4rem; margin-left: auto; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase }
.nav > a, .nav__groupLabel { display: inline-flex; align-items: center; padding: .4rem 0; border-bottom: 2px solid transparent; color: var(--ink-soft); transition: .15s; cursor: pointer }
.nav > a:hover, .nav__groupLabel:hover, .nav > a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent) }
.nav__group { position: relative }
.nav__menu { position: absolute; top: calc(100% + 12px); left: 0; min-width: 260px; background: var(--deep); border-radius: 10px; padding: .4rem; box-shadow: 0 20px 50px -20px rgba(11,31,52,.6); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s; display: grid; text-transform: none; letter-spacing: 0; font-size: .92rem; font-weight: 500 }
.nav__menu a { padding: .65rem .9rem; border-radius: 7px; color: rgba(255,255,255,.8) }
.nav__menu a:hover, .nav__menu a[aria-current="page"] { background: rgba(255,255,255,.1); color: #fff }
.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: var(--surface) }

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

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding: 84px 0 96px; background: var(--surface); isolation: isolate }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(27,95,163,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(27,95,163,.07) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(180deg, #000 60%, transparent) }
.hero__bg i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45 }
.hero__bg i:nth-child(1) { width: 600px; height: 600px; right: -120px; top: -200px; background: radial-gradient(circle, var(--accent2), transparent 65%) }
.hero__bg i:nth-child(2) { display: none }
.hero__bg i:nth-child(3) { display: none }
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center }
.hero h1 { font-size: clamp(2.3rem, 4.5vw, 3.6rem); line-height: 1.08; letter-spacing: -.025em; margin: 1.2rem 0 1.4rem; font-weight: 700 }
.hero .lead { max-width: 33rem }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem }
.hero__badges { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .9rem; margin-top: 2.2rem; max-width: 34rem }
.hero__badges li { display: flex; align-items: center; gap: .55rem; font-size: .84rem; font-weight: 600; color: var(--ink) }
.hero__badges .ico { width: 1.35em; height: 1.35em; stroke-width: 2.4; color: #fff; background: var(--accent); border-radius: 50%; padding: .2em; flex-shrink: 0 }

/* Maquette : tableau de bord sombre */
.mock { background: var(--deep); color: #fff; border-radius: 14px; box-shadow: 0 40px 90px -30px rgba(11,31,52,.7); overflow: hidden; border: 1px solid rgba(255,255,255,.08) }
.mock__bar { display: flex; align-items: center; gap: .4rem; padding: .75rem 1.1rem; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08) }
.mock__bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.15) }
.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: .1em; text-transform: uppercase; color: rgba(255,255,255,.55) }
.mock__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; padding: 1.1rem }
.mock__kpi { padding: .9rem 1rem; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08) }
.mock__kpi span { display: block; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: .35rem }
.mock__kpi strong { display: block; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--accent2); line-height: 1.1 }
.mock__kpi small { display: block; font-size: .7rem; color: rgba(255,255,255,.5); margin-top: .3rem }
.mock__checks { padding: 0 1.1rem 1.1rem; display: grid; gap: .45rem }
.mock__checks li { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; border-radius: 8px; background: rgba(255,255,255,.04); font-size: .82rem; color: rgba(255,255,255,.85) }
.mock__checks i { width: .6rem; height: .6rem; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(255,255,255,.06) }
.mock__checks .is-ok i { background: #4ade80 } .mock__checks .is-warn i { background: #fbbf24 }

/* ── Bandeau des étapes ──────────────────────────────────────────────────── */
.strip { background: var(--deep); color: #fff }
.strip__steps { display: grid; grid-template-columns: repeat(3, 1fr) }
.strip__steps li { display: flex; align-items: center; gap: 1rem; padding: 1.3rem 1.6rem }
.strip__steps li + li { border-left: 1px solid rgba(255,255,255,.1) }
.strip__steps span { font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; color: var(--accent2); flex-shrink: 0 }
.strip__steps p { font-size: .92rem; font-weight: 500; color: rgba(255,255,255,.88) }

/* ── Page de garde ───────────────────────────────────────────────────────── */
.pagehead { position: relative; padding: 72px 0 64px; background: var(--surface); overflow: hidden; border-bottom: 1px solid var(--line) }
.pagehead__bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(27,95,163,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(27,95,163,.07) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(90deg, transparent 40%, #000) }
.pagehead .shell { position: relative }
.pagehead h1 { font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: -.025em; margin: 1rem 0 1.2rem; max-width: 22ch; font-weight: 700 }
.pagehead .lead { max-width: 62ch }
.pagehead--small { padding: 52px 0 44px }

/* ── Bandeau cible ───────────────────────────────────────────────────────── */
.audience { background: #fff; border-bottom: 1px solid var(--line) }
.audience .shell { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 0; font-size: .95rem }
.audience .ico { color: var(--accent); width: 1.5em; height: 1.5em }
.audience strong { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent) }

/* ── Sections ────────────────────────────────────────────────────────────── */
.section { padding: 96px 0 }
.section--tight { padding: 32px 0 }
.section.band { background: var(--surface) }
.section h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.02em; font-weight: 700 }
.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: 96px; padding-left: 1.2rem; border-left: 4px solid var(--accent) }
.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.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-top: 4px solid var(--accent); border-radius: var(--radius); padding: 2rem; transition: transform .25s, box-shadow .25s }
.card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -30px rgba(11,31,52,.45) }
.card__icon, .metric__icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 8px; background: var(--surface); 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: .8rem; font-weight: 700; color: var(--accent) }
.card h3, .metric h3 { font-size: 1.12rem; margin-bottom: .6rem }
.card p, .metric p { color: var(--ink-soft); font-size: .95rem; line-height: 1.65 }
.metric { position: relative; padding: 2rem; 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; font-weight: 700; line-height: 1; color: var(--accent); opacity: .12 }

.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: 2rem }
.steps li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -1.4rem; width: 1.4rem; height: 2px; background: var(--accent2) }
.steps__badge { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.2rem; padding: .4rem .7rem .4rem .5rem; border-radius: 6px; background: var(--deep); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .1em }
.steps__badge .ico { width: 1.1rem; height: 1.1rem; color: var(--accent2) }
.steps h3 { font-size: 1.12rem; margin-bottom: .6rem }
.steps p { color: var(--ink-soft); font-size: .95rem; line-height: 1.65 }

/* Liste de contrôle et chiffres */
.checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem }
.checklist li { display: flex; gap: 1rem; padding: 1.4rem 1.5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius) }
.checklist .ico { flex-shrink: 0; width: 1.8rem; height: 1.8rem; padding: .35rem; border-radius: 50%; background: var(--accent); color: #fff; stroke-width: 2.6 }
.checklist strong { display: block; font-family: var(--font-heading); font-size: 1.04rem; margin-bottom: .35rem }
.checklist p { color: var(--ink-soft); font-size: .92rem; line-height: 1.6 }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem }
.stats article { padding: 2rem; border-radius: var(--radius); background: var(--deep); color: #fff; position: relative; overflow: hidden }
.stats article::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, var(--accent2), transparent 65%); opacity: .35 }
.stats__value { font-family: var(--font-heading); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--accent2); margin-bottom: 1rem }
.stats h3 { font-size: 1.08rem; margin-bottom: .5rem }
.stats article > p:last-child { color: rgba(255,255,255,.72); font-size: .92rem; line-height: 1.6 }

/* 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: 2px; background: var(--line) }
.phase { position: relative }
.phase__marker { position: absolute; left: -4.5rem; top: 1.4rem; width: 3.3rem; height: 3.3rem; border-radius: 8px; background: var(--deep); color: var(--accent2); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: .95rem; 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.5rem }
.phase__meta { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--accent); background: var(--surface); padding: .4rem .8rem; border-radius: 6px }
.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.7 }
.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-top: 4px solid var(--accent); 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-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft) }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0 }
tbody th { font-weight: 700; 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: #fff; border: 1px solid var(--line); border-left: 6px solid var(--accent) }
.notice__icon { flex-shrink: 0; width: 2.8rem; height: 2.8rem; border-radius: 8px; background: var(--deep); color: var(--accent2); display: inline-flex; align-items: center; justify-content: center }
.notice h2 { font-size: 1.15rem; margin-bottom: .5rem }
.notice p { color: var(--ink-soft); font-size: .95rem; line-height: 1.65 }

/* 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-top: 4px solid var(--line); border-radius: var(--radius); padding: 2rem }
.tier--featured { background: var(--deep); color: #fff; border-color: transparent; border-top-color: var(--accent2); box-shadow: 0 30px 60px -30px rgba(11,31,52,.8); transform: translateY(-8px) }
.tier__icon { width: 2.8rem; height: 2.8rem; border-radius: 8px; 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,.1); color: var(--accent2) }
.tier__step { font-family: var(--font-heading); font-size: .74rem; font-weight: 700; letter-spacing: .12em; color: var(--accent); margin-bottom: .3rem }
.tier--featured .tier__step { color: var(--accent2) }
.tier h3 { font-size: 1.2rem }
.tier__price { font-family: var(--font-heading); font-weight: 700; font-size: 1.6rem; 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: 96px; 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(--accent) }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; cursor: pointer; font-weight: 600; font-size: 1rem; font-family: var(--font-heading) }
.faq summary i { flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 6px; background: var(--surface); position: relative; transition: transform .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) }
.faq p { padding: 0 1.3rem 1.2rem; color: var(--ink-soft); font-size: .95rem; line-height: 1.7 }

/* 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: 16px; background: var(--deep); color: #fff; position: relative; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(11,31,52,.8) }
.contact__panel::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse at 0% 0%, #000, transparent 70%) }
.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: 3rem; height: 3rem; border-radius: 8px; background: var(--accent); 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% }

/* Pages légales */
.legal { max-width: 74ch; margin-inline: auto; display: grid; gap: 1rem }
.legal article { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--accent); 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(--deep); color: rgba(255,255,255,.72); padding: 64px 0 0; border-top: 4px solid var(--accent) }
.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-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; 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 }
  .prose, .faq-grid, .checklist { grid-template-columns: 1fr }
  .prose__head, .faq-grid .section__head { position: static }
  .grid--3, .steps, .tiers, .stats { grid-template-columns: 1fr }
  .steps li:not(:last-child)::after { display: none }
  .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: 64px; gap: 1rem }
  .nav { display: none }
  .header__actions .button--sm { display: none }
  .hero { padding: 56px 0 64px }
  .hero h1 { font-size: 2.1rem }
  .hero__badges { grid-template-columns: 1fr }
  .mock__kpis { grid-template-columns: 1fr }
  .strip__steps { grid-template-columns: 1fr }
  .strip__steps li + li { border-left: 0; border-top: 1px solid rgba(255,255,255,.1) }
  .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) }
}