/* DA meowan.fr (verre / bento / violet), copie du CSS inline de la prod du 02/09/2026, puis extensions multi-pages. */
:root {
  --blue: #5333c0;
  --blue-d: #43299a;
  --blue-soft: #efeafc;
  --grad: linear-gradient(110deg,#5333c0 0%,#5f43cf 34%,#6f4fe0 66%,#7f5af0 100%);
  --grad-h: linear-gradient(110deg,#43299a 0%,#4e37ad 34%,#5b41c4 66%,#6a4bd6 100%);
  --bg: #fff;
  --soft: #f6f8fc;
  --border: #e6e9f0;
  --text: #13182a;
  --muted: #586173;
  --dark: #0e1220;
  --violet:#5333c0;
  --glass:rgba(255,255,255,.55);
  --glass2:rgba(255,255,255,.72);
  --gline:rgba(255,255,255,.65);
  --gshadow:0 12px 40px rgba(83,51,192,.09);
  --gblur:blur(24px) saturate(1.35);
  --gradbg:radial-gradient(900px 600px at 8% -10%,#c7b6ff 0%,transparent 55%),
           radial-gradient(800px 600px at 105% 15%,#ffd6e8 0%,transparent 55%),
           radial-gradient(900px 700px at 50% 115%,#b6e3ff 0%,transparent 55%),
           linear-gradient(160deg,#f2effc,#eef3fb 60%,#f6f0fa);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--gradbg); background-attachment: fixed; color: var(--text);
  font-family: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.15; font-weight: 700; letter-spacing: -.025em; }
a { color: var(--blue); text-decoration: none; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* Utility bar */
.util { background: rgba(255,255,255,.92); border-bottom: 1px solid var(--gline); backdrop-filter: var(--gblur); -webkit-backdrop-filter: var(--gblur); font-size: 13px; }
.util .wrap { display: flex; justify-content: flex-end; align-items: center; gap: 22px; height: 44px; }
.util a { color: var(--muted); font-weight: 500; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.util a:hover { color: var(--text); }
.util a.on { color: var(--text); font-weight: 700; }
@media (max-width: 680px) {
  .util .wrap { justify-content: flex-start; overflow-x: auto; gap: 18px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .util a { white-space: nowrap; flex: 0 0 auto; }
}

/* Header */
header { position: sticky; top: 0; z-index: 50; background: var(--glass); border-bottom: 1px solid var(--gline); backdrop-filter: var(--gblur); -webkit-backdrop-filter: var(--gblur); }
.nav { display: flex; align-items: center; gap: 28px; height: 76px; }
.nav .logo { display: flex; align-items: center; min-height: 44px; margin-right: auto; gap: 10px; }
.nav .logo img { height: 36px; width: auto; display: block; }
.nav a.nl { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); font-size: 15.5px; font-weight: 600; padding: 8px 15px; border-radius: 999px; }
.nav a.nl:hover { color: var(--violet); background: rgba(83,51,192,.10); }
/* Titre lu par les lecteurs d'écran et les moteurs, sans surface à l'écran : la page mobile
   n'a plus d'en-tête depuis le 04/09 mais elle a toujours besoin d'un h1. */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
      clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  background: var(--violet); color: #fff;
  padding: 12px 22px; border-radius: 11px; font-weight: 600; font-size: 15px;
  border: none; cursor: pointer; transition: .15s; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(83,51,192,.28);
}
.btn:hover { background: #43299a; }
.btn.ghost { background: var(--glass); border: 1px solid var(--gline); color: var(--text); backdrop-filter: var(--gblur); -webkit-backdrop-filter: var(--gblur); box-shadow: none; }
.btn.ghost:hover { background: var(--glass2); border-color: rgba(83,51,192,.35); }
.btn.light { background: #fff; color: #5333c0; box-shadow: none; }
.btn.light:hover { background: #efeafc; }
@media (max-width: 860px) { .nav a.nl { display: none; } .nav { gap: 12px; }
  .nav .btn { padding: 10px 16px; font-size: 14px; }
  .nav .logo img { height: 30px; } }
@media (max-width: 380px) { .nav .btn { display: none; } }

/* Hero */
.hero { text-align: center; padding: 72px 0 40px; position: relative; overflow: hidden; }
.hero .wrap { position: relative; }
.hero .deco { position: absolute; top: 28px; width: 320px; height: 230px; pointer-events: none; }
.hero .deco.l { left: -30px; }
.hero .deco.r { right: -30px; }
@media (max-width: 1100px) { .hero .deco { display: none; } }
.hero .kicker, .eligcard .kicker {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 14px;
}
.hero h1 { font-size: clamp(32px, 5vw, 52px); letter-spacing: -.03em; }
.hero p.sub { color: var(--muted); font-size: 18px; max-width: 620px; margin: 18px auto 0; }

/* Bento */
.bento { padding: 40px 0 24px; }
.bgrid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(180px, auto);
}
.cell {
  background: var(--glass); border: 1px solid var(--gline); border-radius: 22px;
  backdrop-filter: var(--gblur); -webkit-backdrop-filter: var(--gblur); box-shadow: var(--gshadow);
  padding: 30px; display: flex; flex-direction: column; gap: 10px;
  position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.cell:hover { transform: translateY(-3px); background: var(--glass2); border-color: rgba(83,51,192,.35); box-shadow: 0 12px 32px rgba(83,51,192,.12); }
.cell h3 { font-size: 21px; }
.cell p { color: var(--muted); font-size: 14.5px; }
.cell .tag {
  align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--blue); background: var(--blue-soft);
  padding: 4px 10px; border-radius: 99px;
}
.cell .price { margin-top: auto; padding-top: 12px; font-weight: 700; font-size: 26px; letter-spacing: -.02em; }
.cell .price small { font-size: 13px; font-weight: 500; color: var(--muted); }
.cell .fine { font-size: 12.5px; line-height: 1.45; color: var(--muted); padding-top: 8px; }
.cell .link { display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; padding-top: 12px; font-weight: 700; font-size: 14.5px; }
.cell .link::after { content: " →"; }
.cell ul { list-style: none; margin-top: 4px; }
.cell ul li { font-size: 14.5px; color: var(--muted); padding: 3px 0 3px 22px; position: relative; }
.cell ul li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 7px;
  border-left: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue);
  transform: rotate(-45deg);
}

/* Illustrations */
.art { line-height: 0; }
.art svg { display: block; }
.art-top svg { height: 98px; width: auto; max-width: 100%; }
.art-fiber { margin-top: 8px; }
.art-fiber svg { width: 100%; height: auto; }
.rowcell { flex-direction: row; align-items: center; gap: 24px; }
.rowcell .txt { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.rowcell > .art svg { width: 158px; height: auto; }
@media (max-width: 620px) {
  .rowcell { flex-direction: column; align-items: flex-start; }
  .rowcell > .art { order: -1; }
  .rowcell > .art svg { width: auto; height: 98px; }
}

.c-ftto { grid-column: span 2; grid-row: span 2; background: var(--glass2); }
.c-ftto h3 { font-size: 28px; }
.c-ftto .big { font-size: clamp(44px, 6vw, 64px); font-weight: 700; letter-spacing: -.04em; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.c-voice { grid-column: span 2; }
.c-ws { grid-column: span 2; flex-direction: row; align-items: center; gap: 24px; }
.c-ws > div.txt { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.c-ws .txt .btn { align-self: flex-start; margin-top: 6px; }
.c-ws > .art svg { width: 158px; height: auto; }
.c-cta { grid-column: span 2; background: linear-gradient(135deg,rgba(83,51,192,.92),rgba(127,90,240,.88)); border: none; color: #fff; box-shadow: 0 18px 50px rgba(83,51,192,.35); }
.c-cta h3, .c-cta .price { color: #fff; }
.c-cta p { color: rgba(255,255,255,.9); max-width: 34ch; }
.c-cta .deco { position: absolute; right: -14px; bottom: -34px; width: 235px; height: 235px; }
@media (max-width: 620px) { .c-cta .deco { width: 180px; height: 180px; right: -30px; bottom: -46px; } }
.c-cta > *:not(.deco) { position: relative; z-index: 1; }
.c-dark { background: var(--dark); border-color: var(--dark); }
.c-dark h3 { color: #fff; }
.c-dark p { color: #98a0b3; }
.c-dark .stat { font-size: 34px; font-weight: 700; color: #fff; letter-spacing: -.03em; }
.c-dark .bgart { position: absolute; inset: 0; width: 100%; height: 100%; }
.c-dark > *:not(.bgart) { position: relative; z-index: 1; }

@media (max-width: 960px) {
  .bgrid { grid-template-columns: repeat(2, 1fr); }
  .c-ftto { grid-column: span 2; }
}
@media (max-width: 620px) {
  .bgrid { grid-template-columns: 1fr; }
  .c-ftto, .c-voice, .c-ws, .c-cta { grid-column: span 1; }
  .c-ws { flex-direction: column; align-items: flex-start; }
  .c-ws > .art svg { width: auto; height: 98px; }
}

/* Reassurance strip */
.strip { padding: 40px 0 64px; }
.strip .row { display: flex; gap: 16px; flex-wrap: wrap; }
.strip .item {
  flex: 1 1 220px; display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; border: 1px solid var(--gline); border-radius: 16px;
  background: var(--glass); backdrop-filter: var(--gblur); -webkit-backdrop-filter: var(--gblur); box-shadow: var(--gshadow);
}
.strip .item svg { width: 24px; height: 24px; stroke: var(--blue); fill: none; stroke-width: 2; stroke-linecap: round; flex: 0 0 auto; margin-top: 2px; }
.strip .item b { display: block; font-size: 15px; }
.strip .item span { font-size: 13.5px; color: var(--muted); }

/* Footer */
footer { border-top: 1px solid var(--gline); background: rgba(255,255,255,.45); backdrop-filter: var(--gblur); -webkit-backdrop-filter: var(--gblur); padding: 36px 0; font-size: 13.5px; color: var(--muted); }
footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
footer .links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
footer a { color: var(--muted); }
footer a:hover { color: var(--text); }
footer .links { display: flex; gap: 18px; flex-wrap: wrap; }

/* Burger mobile (le menu ne doit jamais disparaître) */
.burger{display:none;width:44px;height:44px;border:1.5px solid var(--gline);border-radius:11px;background:var(--glass);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0}
.burger span{width:19px;height:2px;background:var(--text);border-radius:2px;transition:.2s}
.mobnav{display:none;border-top:1px solid var(--gline);background:rgba(255,255,255,.88);backdrop-filter:var(--gblur);-webkit-backdrop-filter:var(--gblur);padding:4px 0 12px}
.mobnav a{display:block;padding:14px 24px;font-size:16px;font-weight:700;color:var(--text);border-bottom:1px solid rgba(120,110,180,.10)}
@media (max-width: 860px){
  .burger{display:flex}
  body.menu .mobnav{display:block}
  body.menu .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  body.menu .burger span:nth-child(2){opacity:0}
  body.menu .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}

/* Test d'éligibilité fibre (public) */
.elig{padding:8px 0 44px}
.eligcard{background:var(--glass);border:1px solid var(--gline);border-radius:22px;padding:34px 30px;backdrop-filter:var(--gblur);-webkit-backdrop-filter:var(--gblur);box-shadow:var(--gshadow)}
.eligcard h2{font-size:26px;margin-bottom:6px}
.eligcard>p{color:var(--muted);margin-bottom:18px;font-size:15px}
.eligform{display:flex;gap:10px;flex-wrap:wrap}
.eligform input{flex:1;min-width:240px;padding:13px 16px;border:1.5px solid rgba(120,110,180,.3);border-radius:11px;font:inherit;font-size:15px;background:rgba(255,255,255,.7);color:inherit}
.eligform input:focus{outline:none;border-color:#5333c0}
.eligres{margin-top:18px}
.eligres .st{font-weight:700;margin-bottom:10px}
.eligres .st.ok{color:#1a7f4e}
.eligres .st.err{color:#b3261e}
.eligres p{font-size:14.5px}
.eligres a{color:#5333c0;font-weight:600}
.eligres .prods{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:6px}
.eligres .prod{background:rgba(255,255,255,.6);border:1px solid var(--gline);border-radius:14px;padding:16px 18px}
.eligres .prod b{display:block;margin-bottom:6px;font-size:15.5px}
.eligres .prod div{font-size:14px;color:var(--muted);padding:2px 0}

/* ── Extensions multi-pages (préversion 02/09/2026 soir) ─────────────── */
.preview-band{background:var(--dark);color:#c9cfdd;font-size:12.5px;padding:7px 0}
.preview-band .wrap{display:flex;gap:18px;flex-wrap:wrap}
.nav a.nl[aria-current]{background:var(--violet);color:#fff;box-shadow:0 4px 14px rgba(83,51,192,.35)}
.nav a.nl[aria-current]:hover{background:var(--blue-d);color:#fff}
.mobnav a[aria-current]{color:var(--violet)}
.hero.page{padding:56px 0 28px}
.hero .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.hero .sub b{color:var(--text);font-weight:600}
.sec{padding:16px 0 24px}
.shead{margin:0 0 18px}
.shead .kicker{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.shead h2{font-size:clamp(24px,3vw,30px);letter-spacing:-.025em}
.shead p{color:var(--muted);margin-top:8px;max-width:64ch;font-size:15.5px}
.c-wide{grid-column:span 4}
.c-half{grid-column:span 2}
.c-3{grid-column:span 3}
.cell.tight{gap:8px}
.cell h3 small{font-size:14px;font-weight:500;color:var(--muted)}
.cell .big{font-size:clamp(40px,5vw,56px);font-weight:700;letter-spacing:-.04em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cell .note{font-size:13px;color:var(--muted);line-height:1.45}
.cell .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:12px}
.cell .acts .btn{align-self:flex-start}
.tw{overflow-x:auto;margin-top:4px}
.cell table{width:100%;border-collapse:collapse;font-size:14.5px}
.cell th{text-align:left;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:8px 14px 8px 0;border-bottom:1px solid rgba(120,110,180,.18);vertical-align:bottom}
.cell td{padding:9px 14px 9px 0;border-bottom:1px solid rgba(120,110,180,.12);vertical-align:top;color:var(--text)}
.cell tr>:last-child{padding-right:0}
.cell tbody tr:hover td{background:rgba(255,255,255,.38)}
.cell td b{font-weight:600}
.cell td.mut{color:var(--muted)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.c-dark table,.c-dark th,.c-dark td{color:#fff}
.c-dark th{color:#98a0b3;border-bottom-color:rgba(255,255,255,.18)}
.c-dark td{border-bottom-color:rgba(255,255,255,.10)}
.c-dark tbody tr:hover td{background:rgba(255,255,255,.06)}
.c-dark .note{color:#98a0b3}
.c-dark a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.c-dark .tag{background:rgba(127,90,240,.22);color:#cbbcff}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:8px 20px;font-size:14.5px;margin-top:4px}
.facts dt{color:var(--muted)}
.facts dd{font-weight:600;overflow-wrap:anywhere}
.c-dark .facts dt{color:#98a0b3}
.c-dark .facts dd{color:#fff}
.steps{list-style:none;counter-reset:s;margin-top:4px}
.steps li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:12px;padding:8px 0;font-size:14.5px;color:var(--muted);align-items:start}
.steps li::before{content:counter(s);width:26px;height:26px;border-radius:999px;background:var(--blue-soft);color:var(--blue);font-weight:700;font-size:13px;display:inline-flex;align-items:center;justify-content:center;margin-top:-2px}
.plans{grid-template-columns:repeat(3,1fr);grid-auto-rows:auto}
.plan .go{font-size:38px;font-weight:700;letter-spacing:-.035em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.plan .go small{font-size:16px;font-weight:600;letter-spacing:0;-webkit-text-fill-color:var(--text);color:var(--text)}
.plan p{font-size:14px}
.plan .price{font-size:28px}
.inc{grid-template-columns:repeat(4,1fr);grid-auto-rows:auto}
.inc .cell{padding:22px 24px;gap:6px}
.inc .cell h3{font-size:17px}
.inc .cell p{font-size:14px}
.eligcard.top{padding:30px 30px 26px}
.eligcard .eligform .btn{flex:0 0 auto}
.eligres .st.ok{color:#1a7f4e}
.eligres .prods{margin-top:10px}
.js .offer{display:none}
.js .offer.on{display:block}
.js .offer.on .bgrid{animation:none}
.diag{width:100%;max-width:820px;height:auto;display:block;margin:6px auto 0}
.diag text{font-size:11.5px;fill:#fff;font-family:inherit}
.diag .t{font-weight:700;font-size:12.5px}
.diag .s{fill:#98a0b3}
.diag rect,.diag line,.diag path{stroke:rgba(255,255,255,.55);fill:none;stroke-width:1.2}
.diag rect.hi{stroke:#7f5af0;stroke-width:1.6}
.diag .dash{stroke-dasharray:3 3}
.c-cta .acts .btn.light{background:#fff;color:#5333c0}
footer .wrap>div:first-child{max-width:70ch}
@media (max-width:960px){
  .c-wide,.c-3{grid-column:span 2}
  .plans{grid-template-columns:repeat(2,1fr)}
  .inc{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .c-wide,.c-half,.c-3{grid-column:span 1}
  .plans,.inc{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr;gap:2px 0}
  .facts dt{margin-top:8px}
  .hero.page{padding:44px 0 20px}
  .cell{padding:24px}
  .eligcard.top{padding:24px 20px}
}
.cell,.eligcard,.strip .item{min-width:0}
/* cartes entières cliquables (accueil) */
a.cell{color:var(--text)}
a.cell .link{color:var(--blue)}
a.cell.c-dark{color:#fff}
a.cell.c-dark p{color:#98a0b3}
/* ancres et blocs révélés : ne pas passer sous l'en-tête collant (util 44 + nav 76) */
.offer,.bento[id],.elig[id]{scroll-margin-top:132px}
/* ── Souscription en ligne (03/09/2026) ─────────────────────────────────── */
.sub{padding:8px 0 56px}
.subgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.sstep{background:var(--glass);border:1px solid var(--gline);border-radius:22px;backdrop-filter:var(--gblur);-webkit-backdrop-filter:var(--gblur);box-shadow:var(--gshadow);padding:22px 26px;margin-bottom:14px}
.sstep .sh{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sstep .sh .n{width:30px;height:30px;border-radius:999px;background:var(--blue-soft);color:var(--blue);font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex:none}
.sstep.open .sh .n,.sstep.done .sh .n{background:var(--violet);color:#fff}
.sstep .sh h2{font-size:20px;flex:1;letter-spacing:-.02em}
.sstep .sh .sum{font-size:14px;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sstep .sh a.edit{font-size:14px;font-weight:700;min-height:44px;display:inline-flex;align-items:center;padding:0 6px}
.sstep .sb{display:none;padding-top:16px}
.sstep.open .sb{display:block}
.sstep.locked{opacity:.55}
.sstep .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.f{margin-bottom:14px;min-width:0}
.f label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.f input,.f select,.f textarea{width:100%;padding:12px 14px;border:1.5px solid rgba(120,110,180,.3);border-radius:11px;font:inherit;font-size:15px;background:rgba(255,255,255,.7);color:inherit;min-height:44px}
.f select{appearance:auto}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:#5333c0}
.f .help,.sstep .help{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.45}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.seg{display:inline-flex;border:1.5px solid rgba(120,110,180,.3);border-radius:11px;overflow:hidden;background:rgba(255,255,255,.6)}
.seg button{min-height:44px;padding:0 18px;border:0;background:transparent;font:inherit;font-size:14.5px;font-weight:600;color:var(--text);cursor:pointer}
.seg button[aria-pressed=true]{background:var(--violet);color:#fff}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.opt{border:1.5px solid rgba(120,110,180,.3);border-radius:14px;padding:12px 14px;background:rgba(255,255,255,.6);cursor:pointer;text-align:left;font:inherit;color:inherit;min-height:44px;min-width:0}
.opt b{display:block;font-size:17px;letter-spacing:-.01em}
.opt span{font-size:13px;color:var(--muted)}
.opt[aria-pressed=true]{border-color:var(--violet);background:#fff;box-shadow:0 0 0 2px rgba(83,51,192,.18)}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;min-height:44px;padding:6px 0;cursor:pointer}
.chk input{width:18px;height:18px;margin-top:3px;flex:none;accent-color:#5333c0}
.chk a{font-weight:600}
.serr{color:#b3261e;font-size:14px;margin:4px 0 12px;font-weight:600;line-height:1.45}
.serr a{color:#5333c0}
.sok{color:#1a7f4e;font-weight:600}
.recap{position:sticky;top:132px;background:var(--glass2);border:1px solid var(--gline);border-radius:22px;padding:24px 26px;backdrop-filter:var(--gblur);-webkit-backdrop-filter:var(--gblur);box-shadow:var(--gshadow)}
.recap .kicker{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.recap h3{font-size:21px}
.recap .price{font-size:34px;font-weight:700;letter-spacing:-.03em;margin-top:6px;line-height:1.1}
.recap .price small{font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0}
.recap dl{margin-top:14px;border-top:1px solid rgba(120,110,180,.18)}
.recap dl div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid rgba(120,110,180,.12);font-size:14px}
.recap dt{color:var(--muted)}
.recap dd{font-weight:600;text-align:right}
.recap dd small{font-weight:500;color:var(--muted);font-size:12px}
.recap .tot dt,.recap .tot dd{font-weight:700;color:var(--text)}
.recap .fine{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.45}
@media (max-width:900px){.subgrid{grid-template-columns:1fr}.recap{position:static}}
@media (max-width:620px){.opts{grid-template-columns:1fr 1fr}.f2{grid-template-columns:1fr}.sstep{padding:20px 18px}.sstep .sh .sum{white-space:normal}}

/* Photos réelles (03/09/2026) : bandeaux plein cadre dans les cartes du bento */
.ph { line-height: 0; overflow: hidden; position: relative; }
.ph img { display: block; width: 100%; height: auto; }
.cell > .ph-top { margin: -30px -30px 12px; }
/* carte sombre : texte à gauche, photo collée au bord droit */
.c-side { flex-direction: row; align-items: stretch; gap: 22px; }
.c-side > .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.c-side > .ph-side { flex: none; width: 40%; align-self: stretch; margin: -30px -30px -30px 0; }
.c-side > .ph-side img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 620px) {
  .c-side { flex-direction: column; }
  .c-side > .ph-side { order: -1; width: auto; margin: -30px -30px 14px; aspect-ratio: 16 / 9; }
}

/* ---------------------------------------------------------------------------
   Bento d'accueil, agencement en tuiles inégales (03/09/2026)
   Une tuile phare, deux tuiles empilées à côté, une bande pleine largeur, puis
   trois cartes de service. La photo est une colonne plein bord, pas un bandeau,
   et le prix est l'élément dominant de chaque tuile d'offre.
   --------------------------------------------------------------------------- */
.offers { position: relative; padding: 34px 0 48px; }
.offers::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(83,51,192,0), rgba(83,51,192,.15) 14%, rgba(127,90,240,.06) 74%, rgba(127,90,240,0));
}
.offers > .wrap { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
.ogrid { display: grid; gap: 16px; grid-template-columns: 1.04fr 1fr; }

.tile {
  background: rgba(255,255,255,.72); border: 1px solid var(--gline); border-radius: 22px;
  backdrop-filter: var(--gblur); -webkit-backdrop-filter: var(--gblur); box-shadow: var(--gshadow);
  display: flex; flex-direction: row; align-items: stretch; overflow: hidden; position: relative;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.tile:hover { transform: translateY(-3px); background: rgba(255,255,255,.86); border-color: rgba(83,51,192,.35); box-shadow: 0 12px 32px rgba(83,51,192,.14); }
.tile > .ph-fill { flex: none; width: 38%; align-self: stretch; }
.tile > .ph-fill img { width: 100%; height: 100%; object-fit: cover; }
.tile > .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 22px 26px; }
.tile h3 { font-size: 21px; letter-spacing: -.02em; }
.tile p { color: var(--muted); font-size: 14.5px; }
.tile .tag {
  align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--blue); background: var(--blue-soft);
  padding: 4px 10px; border-radius: 99px;
}
.tile ul { list-style: none; margin-top: 2px; }
.tile ul li { font-size: 14.5px; color: var(--muted); padding: 3px 0 3px 22px; position: relative; }
.tile ul li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 7px;
  border-left: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue);
  transform: rotate(-45deg);
}
.tile .price { margin-top: auto; padding-top: 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tile .price b { font-weight: 700; font-size: 30px; letter-spacing: -.03em; line-height: 1; }
.tile .price small { font-size: 13px; font-weight: 500; color: var(--muted); }
.tile .link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 14.5px; }
.tile .link::after { content: " →"; }

.lead { grid-row: span 2; }
.lead > .ph-fill { width: 44%; }
.lead > .ph-fill img { object-position: 50% 42%; }
.lead > .txt { padding: 30px 32px; gap: 12px; }
.lead h3 { font-size: 28px; letter-spacing: -.03em; }
.lead .price { margin-top: 18px; padding-top: 0; }
.lead .price b { font-size: 42px; }
.lead .link { margin-top: 4px; }

/* bande pleine largeur : photo, texte, puis le chiffre isolé derrière un filet */
.band { background: var(--dark); border-color: var(--dark); }
.band:hover { background: #171a2b; border-color: rgba(156,125,255,.4); }
.band > .ph-fill { width: 25%; }
.band > .txt { padding: 30px 32px; }
.band > .aside {
  flex: none; width: 300px; display: flex; flex-direction: column; gap: 10px;
  margin: 26px 0; padding: 0 32px; border-left: 1px solid rgba(255,255,255,.16);
}
.band .stat { font-size: 34px; font-weight: 700; color: #fff; letter-spacing: -.03em; line-height: 1; }
.band h3 { color: #fff; }
.band p, .band ul li { color: #98a0b3; }
.band ul li::before { border-color: #9c7dff; }
.band .link { margin-top: auto; color: #cbbcff; }

/* trois cartes de service de même largeur : plus de rangée orpheline en bas du bento */
.sgrid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.sgrid .cell { grid-column: auto; }
.svc > .art-svc { line-height: 0; margin-bottom: 2px; }
.svc > .art-svc svg { width: auto; height: 92px; }
.svc .btn, .svc .link { align-self: flex-start; margin-top: auto; }
.svc .btn.ghost { background: rgba(255,255,255,.6); border-color: rgba(83,51,192,.24); }
.svc .link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 14.5px; }
.svc .link::after { content: " →"; }

@media (max-width: 960px) {
  .ogrid { grid-template-columns: 1fr; }
  .lead { grid-row: auto; }
  .band { flex-wrap: wrap; }
  .band > .ph-fill { width: 100%; aspect-ratio: 24 / 7; }
  .band > .txt { flex: 1 1 100%; }
  .band > .aside { flex: 1 1 100%; width: auto; margin: 0 32px 26px; padding: 22px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.16); }
  .sgrid { grid-template-columns: repeat(2, 1fr); }
  .sgrid .c-cta { grid-column: span 2; }
}
@media (max-width: 620px) {
  .offers { padding-top: 24px; }
  .tile { flex-direction: column; }
  .tile > .ph-fill, .lead > .ph-fill, .band > .ph-fill { width: 100%; aspect-ratio: 16 / 9; }
  .tile > .txt, .lead > .txt, .band > .txt { padding: 24px; }
  .band > .aside { margin: 0 24px 24px; }
  .lead h3 { font-size: 24px; }
  .lead .price b { font-size: 34px; }
  .sgrid { grid-template-columns: 1fr; }
  .sgrid .c-cta { grid-column: span 1; }
}

/* accueil : en-tête resserré pour que le bento entre dans le premier écran */
.hero.lead-hero { padding: 44px 0 22px; }
.hero.lead-hero h1 { font-size: clamp(30px, 4.4vw, 46px); }
.hero.lead-hero p.sub { margin-top: 14px; font-size: 17px; }
.hero.lead-hero .acts { margin-top: 22px; }
.tile .fine { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.lead .fine { margin-top: auto; padding-top: 16px; }

/* ---------------------------------------------------------------------------
   Carrousel de la page mobile (03/09/2026 au soir)
   Trois arguments, une photo par diapositive. Le ruban défile nativement avec
   accroche : sans script, on peut encore faire défiler à la main et tout lire.
   Les commandes sont SOUS le ruban, pas posées sur la photo : un rond de verre
   sur une image claire ne tient jamais son contraste.
   --------------------------------------------------------------------------- */
.carousel { padding: 8px 0 16px; }
.carou { position: relative; }
.ctrack {
  display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none;
  padding: 4px 2px 8px; margin: -4px -2px 0;
}
.ctrack::-webkit-scrollbar { display: none; }
.ctrack > .slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }

/* 04/09/2026 : la diapositive devient une AFFICHE : la photo occupe toute la carte et le
   texte est incrusté dessus (« tu peux mettre du texte sur les images, ça fait + vivant »).
   Le voile est surtout HORIZONTAL, parce que le texte est à gauche et que le sujet de chaque
   photo a été cadré à droite : un voile uniforme assombrirait la photo pour rien.
   La hauteur est un minimum, pas un rapport figé : si le texte est plus haut que la boîte
   (grande police du système, traduction), la carte grandit au lieu de couper le texte. */
.slide.poster {
  display: flex; align-items: flex-end; position: relative; overflow: hidden;
  min-height: 520px; border: 0; background: #0b0a14; border-radius: 22px;
}
.slide.poster:hover { transform: none; background: #0b0a14; border-color: transparent; box-shadow: var(--gshadow); }
.slide.poster > .ph-bg { position: absolute; inset: 0; margin: 0; line-height: 0; }
.slide.poster > .ph-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.slide.poster > .pveil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,7,18,.82) 0%, rgba(8,7,18,.76) 22%, rgba(8,7,18,.50) 42%, rgba(8,7,18,.13) 60%, rgba(8,7,18,0) 76%),
    linear-gradient(0deg, rgba(8,7,18,.60) 0%, rgba(8,7,18,.26) 30%, rgba(8,7,18,0) 60%);
}
.slide.poster > .ptxt {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px; padding: 56px 44px 38px; max-width: 620px;
  /* Le voile de la carte ne sait pas où le texte s'arrête : sur la première affiche, le titre
     mordait sur une façade en plein soleil et tombait à 2,56 de contraste. Le bloc porte donc
     son propre dégradé, qui s'éteint à sa droite (aucun bord net) et vers son haut. */
  background:
    linear-gradient(90deg, rgba(8,7,18,.60) 0%, rgba(8,7,18,.54) 54%, rgba(8,7,18,0) 100%),
    linear-gradient(0deg, rgba(8,7,18,.30) 0%, rgba(8,7,18,0) 100%);
}
/* Fond SOMBRE, pas un voile blanc : un badge blanc à 20 % sur une façade ensoleillée mesurait
   2,46 de contraste au pixel (même famille de bug que le bouton secondaire du 03/09). */
.slide.poster .tag { color: #fff; background: rgba(8,7,18,.68); border: 1px solid rgba(255,255,255,.34); }
.slide.poster h2 { color: #fff; font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -.035em; line-height: 1.08; max-width: 20ch; }
.slide.poster > .ptxt > p { color: rgba(255,255,255,.92); font-size: 16px; line-height: 1.5; max-width: 44ch; }
.slide.poster .pstat { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.slide.poster .pstat b { color: #fff; font-size: 42px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.slide.poster .pstat span { color: rgba(255,255,255,.92); font-size: 14px; max-width: 24ch; }
.slide.poster .fine { color: rgba(255,255,255,.80); font-size: 12.5px; line-height: 1.5; max-width: 52ch; }
.slide.poster .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
/* Le bouton secondaire ne prend PAS de voile blanc : du blanc à 16 % derrière du texte blanc
   tombe à 4,12 de contraste (leçon du 03/09). Il garde donc la photo assombrie pour fond. */
.slide.poster .acts .btn.light.ghost2 { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.78); }
.slide.poster .acts .btn.light.ghost2:hover { background: rgba(0,0,0,.22); color: #fff; border-color: #fff; }

@media (max-width: 1040px) {
  .slide.poster { min-height: 470px; }
  .slide.poster > .ptxt { padding: 32px 34px 30px; }
}
/* entre 620 et 860 px la carte n'est plus assez large pour rester en 21:10 : on abaisse la
   hauteur plutôt que de recadrer la photo d'un tiers */
@media (max-width: 860px) {
  .slide.poster { min-height: 410px; }
  .slide.poster h2 { font-size: 28px; }
  .slide.poster > .ptxt { padding: 26px 30px 26px; max-width: 78%; }
}

.cbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; }
.cdots { display: flex; align-items: center; }
.cdot {
  appearance: none; background: none; border: 0; cursor: pointer;
  min-width: 30px; min-height: 44px; padding: 0; display: inline-flex;
  align-items: center; justify-content: center;
}
.cdot > i { display: block; width: 9px; height: 9px; border-radius: 99px; background: rgba(19,24,42,.22); transition: background .18s ease, width .18s ease; }
.cdot:hover > i { background: rgba(83,51,192,.5); }
.cdot[aria-current="true"] > i { width: 28px; background: var(--blue); }
.cdot:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 12px; }
.cbtns { display: flex; gap: 10px; }
.cnav {
  appearance: none; cursor: pointer; width: 44px; height: 44px; border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text);
  background: var(--glass2); border: 1px solid var(--gline);
  backdrop-filter: var(--gblur); -webkit-backdrop-filter: var(--gblur);
  box-shadow: 0 6px 18px rgba(83,51,192,.10); transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.cnav:hover { background: #fff; color: var(--blue); border-color: rgba(83,51,192,.35); }
.cnav:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

@media (max-width: 620px) {
  /* Sur un téléphone la colonne est trop étroite pour un voile latéral : il passe à la
     verticale, texte en bas. La photo bascule au même seuil sur son cadrage 21:40, et la
     hauteur de la carte suit ce rapport : la photo n'est donc pas recadrée du tout. */
  /* Piège : la règle bento `.tile { flex-direction: column }` s'applique aussi ici sous 620 px.
     En colonne, `align-items: flex-end` ne pousse plus rien vers le bas, c'est
     `justify-content` qui commande l'axe principal, et le texte remontait en haut de l'affiche,
     là où le voile est le plus clair. */
  .slide.poster { min-height: min(700px, calc((100vw - 48px) * 1.905));
                  flex-direction: column; justify-content: flex-end; align-items: stretch; }
  .slide.poster > .pveil {
    background: linear-gradient(0deg, rgba(8,7,18,.92) 0%, rgba(8,7,18,.86) 36%, rgba(8,7,18,.60) 56%, rgba(8,7,18,.20) 74%, rgba(8,7,18,0) 92%);
  }
  /* Le voile de la carte ne connaît pas la hauteur du texte : sur un téléphone, deux lignes de
     plus et le titre se retrouvait sur du ciel bleu. Le dégradé est donc porté par le BLOC DE
     TEXTE lui-même : il monte exactement autant que lui, quel que soit le nombre de lignes. */
  .slide.poster > .ptxt {
    padding: 64px 22px 22px; max-width: none; gap: 8px;
    background: linear-gradient(0deg, rgba(8,7,18,.94) 0%, rgba(8,7,18,.90) 62%, rgba(8,7,18,.62) 84%, rgba(8,7,18,0) 100%);
  }
  .slide.poster h2 { font-size: 25px; max-width: 18ch; }
  .slide.poster > .ptxt > p { font-size: 14.5px; line-height: 1.45; max-width: none; }
  /* le libellé de l'argument reste À CÔTÉ du chiffre : sous lui, il coûtait une ligne de plus
     et le texte gagnait encore sur la photo */
  .slide.poster .pstat { flex-wrap: nowrap; gap: 10px; }
  .slide.poster .pstat span { flex: 1 1 auto; }
  .slide.poster .pstat b { font-size: 32px; }
  .slide.poster .pstat span { font-size: 13.5px; max-width: none; }
  .slide.poster .fine { font-size: 12px; }
  /* deux boutons côte à côte tant que leurs libellés tiennent, empilés en dessous : forcés sur
     une seule ligne, le texte débordait du bouton sur un écran de 320 px */
  .slide.poster .acts { width: 100%; }
  .slide.poster .acts .btn { flex: 0 1 auto; min-width: 0; justify-content: center; text-align: center;
                             padding: 12px 14px; font-size: 13.5px; white-space: nowrap; }
}

/* encart de bas de page sur toute la largeur, deux boutons */
.c-wide { grid-column: 1 / -1; }
.c-wide p { max-width: 46ch; }
.c-wide .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
/* Attention : la règle `.c-cta .acts .btn.light` plus haut est plus spécifique : sans le même
   préfixe, le second bouton ressort blanc lui aussi et les deux se confondent. */
/* Attention : un voile blanc derrière du texte blanc RUINE le contraste : mesuré 4,12 avec 16 % de
   blanc, 5,68 sans. Le bouton secondaire reste donc le violet du fond, cerné de blanc. */
.c-cta .acts .btn.light.ghost2 { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.75); }
.c-cta .acts .btn.light.ghost2:hover { background: rgba(0,0,0,.14); color: #fff; border-color: #fff; }