/* Le site public d'Unileva. Valeurs reprises de docs/design/maquettes/site-accueil.html */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* repli aux memes metriques qu'Inter : le texte ne saute pas quand la police arrive */
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107.06%; ascent-override: 90.49%; descent-override: 22.56%; line-gap-override: 0%; }

:root {
  --accent: #2563EB; --accent-600: #1d4ed8; --accent-subtle: #eff6ff; --accent-20: rgba(37,99,235,.2);
  --ink: #0b1220; --text: #334155; --muted: #64748b; --faint: #9aa4b2;
  --line: #eceff3; --border: #e3e7ec; --soft: #f7f8fa;
  --ok: #047857; --ok-subtle: #ecfdf5;
  --fast: 140ms; --base: 280ms; --ease: cubic-bezier(.2,.8,.2,1);
  --g: clamp(20px, 5.5vw, 96px);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Inter", "Inter Fallback", system-ui, sans-serif; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01", "ss03"; }
a { color: inherit; text-decoration: none; }
.num { font-variant-numeric: tabular-nums; }
.wrap { padding: 0 var(--g); }

.btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 10px; font: 500 15px/1 "Inter", "Inter Fallback", sans-serif; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform var(--fast) var(--ease), background var(--fast), border-color var(--fast); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-600); }
.btn-quiet { background: var(--soft); color: var(--ink); }
.btn-quiet:hover { background: #eef1f5; }
.btn .arr { transition: transform var(--fast) var(--ease); } .btn:hover .arr { transform: translateX(3px); }

.js .fade { opacity: 0; transform: translateY(14px); transition: opacity var(--base) var(--ease), transform var(--base) var(--ease); transition-delay: var(--d, 0ms); }
.js .fade.in { opacity: 1; transform: none; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.rise { animation: rise var(--base) var(--ease) both; animation-delay: var(--d, 0ms); }

/* navigation (inspi 1) */
nav { height: 88px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 21px; letter-spacing: -.045em; }
.logo svg { width: 28px; height: 28px; }
.links { display: flex; gap: 40px; font-size: 16px; color: #1f2937; }
.links a { position: relative; padding: 6px 0; }
.links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--base) var(--ease); }
.links a:hover::after { transform: scaleX(1); }
.nav-r { display: flex; justify-content: flex-end; align-items: center; gap: 28px; font-size: 16px; }
footer.wrap { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding-top: 72px; padding-bottom: 48px; font-size: 15px; color: var(--muted); }
footer a { display: block; padding: 5px 0; transition: color var(--fast); } footer a:hover { color: var(--ink); }
.legal { grid-column: 1 / -1; display: flex; justify-content: space-between; padding-top: 28px; margin-top: 24px; border-top: 1px solid var(--line); font-size: 14px; }

footer .tag { max-width: 300px; line-height: 1.6; margin: 14px 0 0; }
footer .ft { margin: 0 0 16px; color: var(--ink); font-weight: 500; font-size: 15px; }
/* le contact, mis en avant dans le pied de page */
footer .ft-mail { margin: 32px 0 6px; font-weight: 400; color: var(--muted); }
footer a.mail-link { display: inline-flex; align-items: baseline; gap: 10px; padding: 0; font-size: clamp(24px, 2.2vw, 32px); font-weight: 400;
  letter-spacing: -.035em; color: var(--ink); background: linear-gradient(var(--accent), var(--accent)) left bottom / 0 2px no-repeat;
  transition: background-size var(--base) var(--ease), color var(--fast); }
footer a.mail-link:hover { color: var(--accent); background-size: 100% 2px; }
footer a.mail-link .arr { font-size: .7em; color: var(--accent); transition: transform var(--fast) var(--ease); }
footer a.mail-link:hover .arr { transform: translateX(4px); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: #fff; padding: 8px 12px; border-radius: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .js .fade { opacity: 1; transform: none; } }

/* héros C */
.hero { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: clamp(32px, 5vw, 96px); align-items: center; padding-top: 24px; padding-bottom: 48px; min-height: calc(100vh - 88px); }
.pill { display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px 0 6px; border: 1px solid var(--border); border-radius: 999px; font-size: 15px; color: #475569; transition: border-color var(--fast), background var(--fast); }
.pill:hover { border-color: #cfd6de; background: var(--soft); }
.pill .ph { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(160deg, #1e3a8a, #5b7fd6 45%, #f1b48a 75%, #e9855a); }
.pill b { color: var(--ink); font-weight: 500; }
h1 { font-weight: 400; font-size: clamp(48px, 5.4vw, 96px); letter-spacing: -.05em; line-height: .98; margin: 40px 0 0; text-wrap: balance; }
.hero p.lede { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--muted); margin: 28px 0 40px; max-width: 34em; }
.mail { display: flex; align-items: center; gap: 6px; max-width: 560px; height: 60px; padding: 6px; border: 1px solid var(--border); border-radius: 14px; transition: border-color var(--fast), box-shadow var(--fast); }
.mail:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-subtle); }
.mail input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; padding: 0 16px; font: 17px "Inter", "Inter Fallback", sans-serif; color: var(--ink); background: none; }
.mail input::placeholder { color: var(--faint); }
.mail .btn { height: 100%; }
.assure { margin-top: 28px; display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--muted); }
.assure i { width: 1px; height: 16px; background: var(--border); }
.assure b { color: var(--ink); font-weight: 500; }

.shot { position: relative; height: min(78vh, 820px); min-height: 560px; border-radius: 18px; overflow: hidden; }
.shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,20,40,.0) 40%, rgba(10,20,40,.18)); pointer-events: none; }

/* la fenêtre qui déborde du panneau, comme la fenêtre de courrier de l'inspi 1 */
.win { position: absolute; left: 13%; right: -2px; top: 17%; background: #fff; border-radius: 16px 0 0 16px; box-shadow: 0 30px 80px rgba(8,18,36,.28); font-size: 15px; z-index: 1; }
.win-h { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.win-h .ic { width: 34px; height: 34px; border-radius: 10px; background: var(--soft); border: 1px solid var(--line); display: grid; place-items: center; }
.win-h b { font-weight: 500; font-size: 17px; }
.win-h .st { margin-left: auto; font-size: 13px; color: var(--muted); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; white-space: nowrap; }
.rows { padding: 6px 22px 0; }
.row { display: grid; grid-template-columns: 1fr 64px 110px; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.row .q { color: var(--muted); text-align: right; } .row .p { text-align: right; }
.row.typing { border-bottom-color: transparent; }
.row.typing .t { color: var(--ink); }
.row.typing .t mark { background: #dbeafe; color: var(--ink); border-radius: 3px; padding: 1px 0; }
.caret { display: inline-block; width: 1.5px; height: 1.05em; background: var(--accent); vertical-align: -3px; margin-left: 1px; animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ghost { color: #c3cad3; }
.win-f { display: flex; justify-content: space-between; padding: 16px 22px 20px; color: var(--muted); }
.win-f b { color: var(--ink); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }

/* la suggestion du catalogue flotte, comme la barre de mise en forme de l'inspi */
.suggest { position: absolute; left: calc(13% + 22px); top: calc(17% + 214px); width: 360px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 18px 44px rgba(8,18,36,.18); padding: 6px; z-index: 2; font-size: 14px; }
.sg { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 8px; transition: background var(--fast); }
.sg small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.sg.on { background: var(--accent-subtle); }
.sg .kbd { font-size: 11px; color: var(--accent-600); border: 1px solid var(--accent-20); border-radius: 5px; padding: 1px 6px; background: #fff; }
.sg-h { font-size: 11px; color: var(--faint); padding: 6px 10px 4px; letter-spacing: .02em; }
.cursor { position: absolute; left: calc(13% + 250px); top: calc(17% + 266px); width: 22px; z-index: 3; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }

/* art au grain : remplit son parent */
.art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* héros animé */
.shot { background: #5b7fd6; }
.win-h .st { transition: background var(--base), color var(--base), border-color var(--base), transform var(--fast) var(--ease); }
.win-h .st.ready { background: var(--accent); color: #fff; border-color: var(--accent); }
.win-h .st.press { transform: scale(.94); }
.win-h .st.sent { background: var(--accent-subtle); color: var(--accent-600); border-color: var(--accent-20); }
.win-h .st.ok { background: var(--ok-subtle); color: var(--ok); border-color: #a7f3d0; }
.suggest { transition: opacity var(--base) var(--ease), transform var(--base) var(--ease); }
.suggest.gone { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.row .p, .row .q { transition: color var(--base); }
.row.typing.filled .t mark { background: none; }
.row.typing.filled .caret { display: none; }
.row.typing.filled { border-bottom-color: var(--line); }
.cursor { transition: left 700ms var(--ease), top 700ms var(--ease), transform var(--fast); }
.cursor.click { transform: scale(.85); }
.toast { position: absolute; z-index: 4; left: 6%; background: #fff; border-radius: 14px; padding: 12px 16px; display: flex; gap: 12px; align-items: center; font-size: 14px; box-shadow: 0 20px 50px rgba(8,18,36,.3);
  opacity: 0; transform: translateY(12px) scale(.97); transition: opacity var(--base) var(--ease), transform var(--base) var(--ease); }
.toast.in { opacity: 1; transform: none; }
.toast b { font-weight: 500; display: block; } .toast small { color: var(--muted); font-size: 12.5px; }
.toast .ti { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.t1 { bottom: 17%; } .t2 { bottom: 5%; left: auto; right: 6%; }
.t2 .sig { width: 104px; height: 32px; margin-left: 8px; }
.sig path { stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset 1.1s var(--ease) .2s; }
.t2.in .sig path { stroke-dashoffset: 0; }
.dotlive { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(37,99,235,.5); animation: ping 1.6s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(37,99,235,0); } 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); } }


/* titres fendus, repris des inspis : titre à gauche, texte et bouton à droite */
.sect { padding-top: clamp(96px, 10vw, 168px); }
.splith { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 120px); align-items: end; }
h2 { font-weight: 400; font-size: clamp(38px, 3.9vw, 68px); letter-spacing: -.045em; line-height: 1.02; margin: 0; text-wrap: balance; }
.splith p { font-size: 18px; line-height: 1.6; color: var(--muted); margin: 0 0 24px; }
.splith .side { padding-bottom: 6px; }

/* grand panneau photo avec deux cartes (NexusFlow) */
.scene { position: relative; margin-top: 64px; height: clamp(520px, 52vw, 820px); border-radius: 18px; overflow: hidden; background: #5d7fa6; }
.scene-cards { position: absolute; inset: 0; display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; align-items: center; padding: 0 9%; }
.note { background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-radius: 16px; padding: 30px 32px; box-shadow: 0 30px 70px rgba(8,18,36,.22); font-size: 16px; line-height: 1.6; }
.note .who { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.note .av { width: 36px; height: 36px; border-radius: 50%; background: #e0e7ff; color: #3730a3; display: grid; place-items: center; font-weight: 600; font-size: 13px; }
.note .who b { font-weight: 500; display: block; } .note .who small { color: var(--muted); font-size: 13px; }
.note p { margin: 0; color: #1f2937; }
.note .foot { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; font-size: 14px; }
.tagc { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; color: var(--text); background: #fff; }
.note .link { color: var(--accent); font-weight: 500; }
.rule { background: var(--accent-subtle); border: 1px solid rgba(255,255,255,.6); border-radius: 16px; padding: 26px 28px; box-shadow: 0 30px 70px rgba(8,18,36,.22); font-size: 15px; }
.rule .hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.rule .hd b { font-weight: 500; }
.sw { width: 38px; height: 22px; border-radius: 999px; background: var(--accent); position: relative; }
.sw::after { content: ""; position: absolute; right: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.rl { display: grid; grid-template-columns: 58px 1fr; gap: 10px; padding: 11px 0; border-top: 1px solid rgba(37,99,235,.14); color: #1e3a8a; }
.rl span { color: #6b83b8; font-size: 13px; padding-top: 1px; }

/* trois cartes hautes (fintech) */
.tall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 64px; }
.tc { border: 1px solid var(--border); border-radius: 18px; padding: 32px; min-height: 420px; display: flex; flex-direction: column; justify-content: space-between; transition: border-color var(--base); }
.tc:hover { border-color: #cfd6de; }
.tc .big { font-size: clamp(40px, 3.8vw, 64px); font-weight: 300; letter-spacing: -.05em; line-height: 1; color: #b4bcc7; transition: color var(--base); }
.tc:hover .big { color: var(--ink); }
.tc h3 { font-weight: 500; font-size: 18px; margin: 0 0 8px; letter-spacing: 0; }
.tc .big { margin: 0; max-width: none; }
.tc p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 16px; max-width: 26em; }

/* icônes de marque par masque, couleur propre à chaque outil */
.bi { width: 16px; height: 16px; background: var(--c); -webkit-mask: var(--u) center / contain no-repeat; mask: var(--u) center / contain no-repeat; }
.mono { width: 16px; height: 16px; border-radius: 4px; background: var(--c); color: #fff; font-size: 9px; font-weight: 700; display: grid; place-items: center; }
/* constat : chaque carte montre le problème */
.tc { min-height: 560px; gap: 24px; }
.viz { position: relative; flex: 1; min-height: 270px; border-radius: 14px; overflow: hidden; background: radial-gradient(#dde3ec 1px, transparent 1.2px) 0 0 / 16px 16px, var(--soft); }
.viz .bi { width: 14px; height: 14px; flex: none; }
/* 1. le formulaire rigide et le tableur qui dépasse */
.v1 .sheet { position: absolute; right: 8%; top: 12%; width: 62%; background: #fff; border-radius: 10px; box-shadow: 0 10px 24px rgba(15,23,42,.08); transform: rotate(3deg); transition: transform var(--base) var(--ease); }
.sh-h { display: flex; gap: 6px; align-items: center; padding: 8px 10px; font-size: 11.5px; color: var(--text); border-bottom: 1px solid var(--line); }
.cells { display: grid; grid-template-columns: repeat(4, 1fr); }
.cells i { height: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cells i:nth-child(5n+2) { background: #ecfdf3; } .cells i:nth-child(7n+3) { background: #fef9c3; }
.v1 .form { position: absolute; left: 6%; bottom: 9%; width: 86%; background: #fff; border-radius: 12px; box-shadow: 0 16px 36px rgba(15,23,42,.12); font-size: 12.5px; }
.fh { padding: 10px 14px; font-weight: 500; border-bottom: 1px solid var(--line); }
.fr { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 14px; }
.fr + .fr { border-top: 1px solid var(--line); }
.fr span { color: var(--muted); white-space: nowrap; } .fr em { white-space: nowrap; } .fr em { font-style: normal; display: inline-flex; align-items: center; gap: 5px; }
.fr .sel { border: 1px solid var(--border); border-radius: 6px; padding: 1px 8px; }
.fr.lock em { color: #b45309; background: #fffbeb; border-radius: 6px; padding: 2px 7px; font-size: 11.5px; }
.tc:hover .v1 .sheet { transform: translate(18px, -10px) rotate(7deg); }
.tc:hover .v1 .fr.lock em { animation: shake 360ms var(--ease); }
@keyframes shake { 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
/* 2. les bouts d'information éparpillés */
.threads { position: absolute; inset: 0; width: 100%; height: 100%; }
.threads path { fill: none; stroke: #cbd5e1; stroke-width: 1.4; stroke-dasharray: 4 6; }
.v2 .q { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: #fff; border: 1px dashed #94a3b8; display: grid; place-items: center; color: var(--muted); font-weight: 600; }
.v2 .bit { position: absolute; background: #fff; border-radius: 10px; padding: 8px 10px; font-size: 12px; box-shadow: 0 8px 20px rgba(15,23,42,.09); max-width: 58%; line-height: 1.35;
  animation: drift 6s ease-in-out infinite; transition: translate var(--base) var(--ease); }
.v2 .bit .t { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; margin-bottom: 3px; }
.v2 .postit { background: #fef9c3; font-family: "Bradley Hand", "Segoe Print", cursive; font-size: 14px; }
.b1 { left: 5%; top: 8%; rotate: -4deg; } .b2 { right: 5%; top: 12%; rotate: 3deg; animation-delay: -1.5s !important; }
.b3 { left: 4%; bottom: 10%; rotate: 2deg; animation-delay: -3s !important; } .b4 { right: 6%; bottom: 16%; rotate: -3deg; animation-delay: -4.5s !important; }
.b5 { left: 7%; top: 41%; rotate: 5deg; animation-delay: -2s !important; }
@keyframes drift { 50% { transform: translateY(-6px); } }
.tc:hover .b1 { translate: -10px -6px; } .tc:hover .b2 { translate: 10px -6px; } .tc:hover .b3 { translate: -10px 6px; } .tc:hover .b4 { translate: 10px 6px; } .tc:hover .b5 { translate: 0 -8px; }
/* 3. la note qui s'allonge */
.v3 .bill { position: absolute; left: 10%; right: 10%; top: 10%; background: #fff; border-radius: 10px 10px 0 0; box-shadow: 0 16px 36px rgba(15,23,42,.1); padding: 6px 16px 12px; font-size: 12.5px;
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 8px) no-repeat, radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) bottom / 12px 8px repeat-x;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - 8px) no-repeat, radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) bottom / 12px 8px repeat-x; }
.bl { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--border); color: var(--text); }
.bl.more { max-height: 0; padding: 0; overflow: hidden; opacity: 0; border-bottom-width: 0; color: #b91c1c; transition: max-height var(--base) var(--ease), padding var(--base), opacity var(--base); }
.tc:hover .bl.more { max-height: 40px; padding: 8px 0; opacity: 1; border-bottom-width: 1px; }
.bt { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; }
.bt span { color: var(--muted); } .bt b { font-size: 18px; font-weight: 600; color: var(--ink); }
.bt .t2 { display: none; color: #b91c1c; } .tc:hover .bt .t1 { display: none; } .tc:hover .bt .t2 { display: inline; }


.scene-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* liste à gauche, image à droite (fintech « All the tools ») */
.lister { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 120px); margin-top: 72px; align-items: center; }
.li { display: block; width: 100%; text-align: left; background: none; border: 0; font: inherit; padding: 18px 0; cursor: pointer; border-top: 1px solid var(--line); }
.li:last-child { border-bottom: 1px solid var(--line); }
.li b { font-weight: 500; font-size: 21px; letter-spacing: -.02em; color: #b4bcc7; transition: color var(--base); }
.li p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--base) var(--ease), opacity var(--base), margin var(--base); }
.li.on b, .li:hover b { color: var(--ink); }
.li.on p { max-height: 90px; opacity: 1; margin-top: 8px; }
.stagepic { position: relative; height: clamp(480px, 44vw, 700px); border-radius: 18px; overflow: hidden; background: #1c3558; }
.stagepic::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(12,24,48,.28); }
.pv { z-index: 2; position: absolute; left: 50%; top: 50%; width: min(520px, 80%); transform: translate(-50%, -46%); opacity: 0; transition: opacity var(--base) var(--ease), transform var(--base) var(--ease); pointer-events: none;
  background: #fff; border-radius: 16px; box-shadow: 0 30px 80px rgba(8,18,36,.35); font-size: 14px; overflow: hidden; }
.pv.on { opacity: 1; transform: translate(-50%, -50%); }
.pv-h { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.pv-h b { font-weight: 500; font-size: 15px; }
.pv-b { padding: 8px 20px 16px; }
.it { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 12px 0; align-items: center; }
.it + .it { border-top: 1px solid var(--line); }
.it small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.chip { font-size: 12px; border: 1px solid var(--border); border-radius: 7px; padding: 3px 8px; color: var(--text); white-space: nowrap; }
.chip.blue { background: var(--accent-subtle); border-color: var(--accent-20); color: var(--accent-600); }
.chip.green { background: var(--ok-subtle); border-color: #a7f3d0; color: var(--ok); }
.chip.red { border-color: #fecaca; color: #b91c1c; background: #fef2f2; }
.stg { display: flex; gap: 4px; margin-top: 8px; }
.stg i { flex: 1; height: 6px; border-radius: 3px; background: #e5e9ef; }
.stg i.on { background: var(--accent); }

html:not(.js) .stagepic { height: auto; padding: 32px; display: grid; gap: 16px; }
html:not(.js) .pv { position: relative; left: auto; top: auto; opacity: 1; transform: none; width: auto; }
html:not(.js) .li p { max-height: none; opacity: 1; margin-top: 8px; }

/* projetez-vous */
.proj { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; min-height: 760px; padding: 64px clamp(32px, 6vw, 112px); border-radius: 18px; overflow: hidden; color: #fff;
  background: radial-gradient(120% 90% at 0% 0%, #4f86f7 0%, #2563EB 45%, #1d4ed8 100%); }
.proj::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(90deg, #000, rgba(0,0,0,.35)); mask-image: linear-gradient(90deg, #000, rgba(0,0,0,.35)); }
.proj > * { position: relative; }
.proj-copy .proj-kicker { margin: 0; font-size: 15px; font-weight: 500; opacity: .85; }
.proj h2 { color: #fff; font-size: clamp(48px, 5vw, 88px); margin-top: 14px; }
.proj-copy p { font-size: 19px; line-height: 1.55; opacity: .88; margin: 24px 0 36px; max-width: 30em; }
.proj-actions { display: flex; align-items: center; gap: 18px; }
.btn-white { background: #fff; color: var(--ink); height: 52px; padding: 0 22px; font-size: 16px; border-radius: 12px; box-shadow: 0 10px 30px rgba(8,18,60,.25); }
.btn-white:hover { background: #f1f5ff; }
.dice { transition: transform 500ms cubic-bezier(.3,1.5,.5,1); }
.dice.spin { transform: rotate(360deg); }
.proj-hint { font-size: 15px; opacity: .75; transition: opacity var(--base); }
.proj-count { margin-top: 48px; font-size: 14px; opacity: .8; display: flex; gap: 6px; align-items: baseline; }
.proj-count b { font-weight: 600; font-size: 15px; }
.proj-count #projName { margin-left: 12px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.35); }

.deck { position: relative; height: 640px; }
.pc { position: absolute; left: 50%; top: 50%; width: 400px; margin: -280px 0 0 -200px; height: 560px; background: #fff; color: var(--ink); border-radius: 22px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(8,18,60,.35); transition: transform 420ms var(--ease), opacity 420ms var(--ease); cursor: grab; touch-action: none; user-select: none; font-size: 13px; }
.pc.drag { transition: none; cursor: grabbing; }
.pc .cover { position: relative; height: 128px; }
.pc .logo2 { position: absolute; left: 22px; bottom: -26px; width: 60px; height: 60px; border-radius: 16px; border: 4px solid #fff; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 22px; letter-spacing: -.02em; box-shadow: 0 6px 16px rgba(8,18,36,.18); }
.pc .cover .badge2 { position: absolute; right: 14px; top: 14px; font-size: 11.5px; font-weight: 500; color: #fff; background: rgba(8,18,36,.35); backdrop-filter: blur(6px); border-radius: 999px; padding: 4px 10px; }
.pc .id { padding: 36px 22px 0; }
.pc .id h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.pc .id small { color: var(--muted); font-size: 13px; }
.pc .blk { padding: 14px 22px 0; }
.pc .lbl { font-size: 11px; color: var(--faint); margin-bottom: 7px; letter-spacing: .02em; }
.stages { display: flex; gap: 4px; }
.stages span { flex: 1; min-width: 0; font-size: 10.5px; text-align: center; padding: 5px 2px; border-radius: 6px; background: var(--soft); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stages span.on { background: var(--accent-subtle); color: var(--accent-600); font-weight: 500; }
.deal { border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; }
.deal .top2 { display: flex; justify-content: space-between; gap: 8px; }
.deal .top2 b { font-weight: 500; } .deal .top2 span { font-variant-numeric: tabular-nums; font-weight: 500; }
.deal small { color: var(--muted); display: block; margin: 2px 0 8px; }
.fields { display: flex; flex-wrap: wrap; gap: 5px; }
.fields span { font-size: 11px; border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; color: var(--text); }
.fields span i { font-style: normal; color: var(--faint); margin-right: 4px; }
.mods { display: grid; gap: 5px; }
.mods div { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-radius: 9px; background: var(--soft); }
.mods em { font-style: normal; font-size: 11px; color: var(--accent-600); background: #fff; border: 1px solid var(--accent-20); border-radius: 6px; padding: 1px 7px; }
.auto { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--accent-subtle); color: #1e3a8a; line-height: 1.4; }
.auto .ico { width: 22px; height: 22px; flex: none; border-radius: 6px; background: #fff; display: grid; place-items: center; }
.icons { display: flex; gap: 6px; }
.icons .lg { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); display: grid; place-items: center; background: #fff; }
.pc .foot2 { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 12px 22px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); background: #fff; }
.pc .foot2 b { color: var(--ink); font-weight: 500; }

/* projetez-vous v2 : briques, boutons ronds, tampons, sélection */
.round { width: 60px; height: 60px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); transition: transform var(--fast) var(--ease), background var(--fast); }
.round:hover { background: rgba(255,255,255,.22); }
.round:active { transform: scale(.9); }
.round.keep { width: 72px; height: 72px; background: #fff; color: var(--accent); box-shadow: 0 12px 30px rgba(8,18,60,.3); }
.round.keep:hover { background: #f1f5ff; }
.round.pop { animation: pop 420ms cubic-bezier(.3,1.6,.5,1); }
@keyframes pop { 40% { transform: scale(1.15); } }
.tray { margin-top: 40px; max-width: 480px; border-radius: 16px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); padding: 16px 18px; backdrop-filter: blur(6px); }
.tray-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.tray-h span { opacity: .8; } .tray-h b { font-weight: 600; font-size: 15px; }
.tray-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; min-height: 30px; }
.tray-empty { font-size: 14px; opacity: .7; }
.tchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 500;
  animation: chipin var(--base) cubic-bezier(.3,1.5,.5,1) both; }
.tchip .x { width: 18px; height: 18px; margin-right: -4px; border: 0; border-radius: 5px; background: none; color: var(--faint); font-size: 15px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background var(--fast), color var(--fast); }
.tchip .x:hover { background: #fee2e2; color: #b91c1c; }
.tchip.out { transition: opacity 180ms, transform 180ms; opacity: 0; transform: scale(.8); }
.tchip em { font-style: normal; color: var(--accent-600); font-weight: 500; font-size: 12px; }
@keyframes chipin { from { opacity: 0; transform: scale(.6) translateY(6px); } }
.tray-cta { display: none; margin-top: 14px; font-size: 14px; font-weight: 500; color: #fff; }
.tray.has .tray-cta { display: inline-flex; gap: 6px; }

.pc .cover { height: 116px; }
.pc .kind { position: absolute; left: 22px; bottom: -24px; width: 56px; height: 56px; border-radius: 16px; border: 4px solid #fff; background: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(8,18,36,.18); }
.pc .kind svg { width: 26px; height: 26px; }
.pc .id h3 { font-size: 21px; }
.pc .id p { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.prev { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.prev .ph { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--soft); font-size: 12px; color: var(--muted); }
.prev .ph b { color: var(--ink); font-weight: 500; }
.prev .pr { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; font-size: 12.5px; }
.prev .pr + .pr { border-top: 1px solid var(--line); }
.prev .pr small { display: block; color: var(--muted); font-size: 11.5px; }
.ok2 { color: var(--ok); font-weight: 500; font-size: 12px; white-space: nowrap; }
.blue2 { color: var(--accent-600); font-weight: 500; font-size: 12px; white-space: nowrap; }
.hrs { display: grid; grid-template-columns: 88px repeat(5, 1fr); font-size: 11.5px; white-space: nowrap; }
.hrs > * { padding: 7px 6px; text-align: center; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.hrs .n { text-align: left; color: var(--text); padding-left: 12px; }
.hrs .hd { color: var(--faint); border-top: 0; background: var(--soft); }
.hrs .f { background: var(--accent-subtle); color: var(--accent-600); font-weight: 500; }
.bubble { margin: 10px 12px; padding: 9px 11px; border-radius: 12px 12px 12px 4px; background: #e7fbe9; font-size: 12.5px; line-height: 1.45; color: #14532d; }
.bubble small { display: block; text-align: right; color: #4d7c5a; font-size: 10.5px; margin-top: 3px; }
.flow { padding: 8px 12px; display: grid; gap: 6px; font-size: 12.5px; }
.flow div { display: flex; gap: 8px; align-items: center; padding: 7px 9px; border-radius: 8px; background: var(--soft); }
.flow span { font-size: 10.5px; color: var(--faint); width: 34px; flex: none; }
.pc .foot2 em { font-style: normal; color: var(--muted); }

.stamp { position: absolute; top: 40px; z-index: 5; font-size: 22px; font-weight: 700; letter-spacing: .04em; padding: 6px 14px; border-radius: 10px; border: 3px solid; opacity: 0; pointer-events: none; }
.stamp.yes { left: 22px; color: var(--ok); border-color: var(--ok); transform: rotate(-12deg); background: rgba(236,253,245,.9); }
.stamp.no { right: 22px; color: #64748b; border-color: #94a3b8; transform: rotate(12deg); background: rgba(248,250,252,.9); }


.deck { list-style: none; padding: 0; margin: 0; }
html:not(.js) .deck { height: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
html:not(.js) .pc { position: relative; left: auto; top: auto; margin: 0; width: auto; }
html:not(.js) .proj { grid-template-columns: 1fr; }
html:not(.js) .proj-actions, html:not(.js) .tray { display: none; }

/* plateforme de branchement */
.integ { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 120px); align-items: end; margin-top: 96px; }
.integ h2 { margin: 0; font-weight: 400; font-size: clamp(30px, 2.8vw, 46px); letter-spacing: -.04em; line-height: 1.05; }
.integ p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.hubwrap { position: relative; margin-top: 40px; height: 520px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(#dde3ec 1px, transparent 1.2px) 0 0 / 18px 18px, linear-gradient(180deg, #f8fafc, #f1f5fb); }
.lanes { position: absolute; inset: 0; display: grid; align-content: center; gap: 18px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.lane { display: flex; gap: 14px; width: max-content; animation: lane var(--t) linear infinite; }
.lane.rev { animation-direction: reverse; margin-left: -200px; }
.hubwrap:hover .lane { animation-play-state: paused; }
@keyframes lane { to { transform: translateX(-50%); } }
.mt { display: inline-flex; align-items: center; gap: 12px; height: 64px; padding: 0 22px 0 18px; border-radius: 16px; background: #fff; border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(15,23,42,.05); font-size: 15px; white-space: nowrap; transition: box-shadow var(--base), border-color var(--base), transform var(--base) var(--ease); }
.mt b { font-weight: 500; }
.mt .bi, .mt .mono { width: 24px; height: 24px; } .mt .mono { font-size: 11px; border-radius: 6px; }
.mt.on { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-subtle), 0 10px 26px rgba(37,99,235,.18); transform: translateY(-2px); }
.mt.mine { animation: chipin var(--base) cubic-bezier(.3,1.5,.5,1) both; }
.halo { position: absolute; left: 50%; top: 50%; width: 760px; height: 520px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(248,250,252,.96) 45%, rgba(248,250,252,0)); pointer-events: none; }
.hub { position: absolute; left: 50%; top: 50%; width: 440px; transform: translate(-50%, -50%); background: #fff; border-radius: 20px; box-shadow: 0 30px 80px rgba(15,23,42,.16), 0 0 0 1px var(--line); overflow: hidden; }
.hub-h { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.hub-logo { width: 40px; height: 40px; border-radius: 12px; background: var(--accent); display: grid; place-items: center; }
.hub-logo svg { width: 24px; height: 24px; }
@keyframes turn { to { transform: rotate(360deg); } }
.hub-h b { font-weight: 600; display: block; font-size: 16px; }
.hub-h small { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.live { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(4,120,87,.5); animation: ping 1.8s infinite; }
.feed { height: 186px; overflow: hidden; padding: 6px 12px; }
.ev2 { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 8px; border-radius: 12px; font-size: 13.5px; animation: evin var(--base) var(--ease) both; }
.ev2:first-child { background: var(--accent-subtle); }
.ev2 + .ev2 { opacity: .75; }
@keyframes evin { from { opacity: 0; transform: translateY(-10px); } }
.ev-ic { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; }
.ev-ic .bi, .ev-ic .mono { width: 18px; height: 18px; }
.ev2 b { font-weight: 500; display: block; } .ev2 small { color: var(--muted); font-size: 12.5px; }
.ev2 time { font-size: 11.5px; color: var(--faint); white-space: nowrap; }
.hub-add { display: flex; align-items: center; gap: 8px; margin: 0 12px 12px; padding: 6px 6px 6px 10px; border: 1px dashed #cbd5e1; border-radius: 12px; transition: border-color var(--fast), box-shadow var(--fast); }
.hub-add:focus-within { border: 1px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-subtle); }
.hub-add .plus { width: 22px; height: 22px; border-radius: 7px; background: var(--accent-subtle); color: var(--accent); display: grid; place-items: center; font-weight: 600; flex: none; }
.hub-add input { flex: 1; min-width: 0; border: 0; outline: 0; font: 14px Inter, sans-serif; background: none; color: var(--ink); }
.hub-add button { height: 34px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; font: 500 13px Inter, sans-serif; cursor: pointer; transition: background var(--fast), transform var(--fast); }
.hub-add button:hover { background: var(--accent-600); } .hub-add button:active { transform: scale(.96); }

html:not(.js) .lane { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
.hubwrap:focus-within .lane { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .lane { animation: none; } }

/* étapes */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 72px; border-top: 1px solid var(--ink); }
.step { padding: 24px 32px 0 0; }
.step .n { font-size: 14px; color: var(--muted); }
.step h3 { font-weight: 500; font-size: 22px; letter-spacing: -.02em; margin: 40px 0 12px; }
.step p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 16px; }
.step .inc { margin-top: 20px; font-size: 14px; color: var(--ink); }
.step .inc::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); margin-right: 8px; }

/* crédits : un vrai relevé */
.credits { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 120px); align-items: start; }
.credits p.lede2 { font-size: 18px; line-height: 1.6; color: var(--muted); margin: 28px 0 0; max-width: 30em; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 48px; font-size: 15px; }
.two h3 { margin: 0 0 12px; font-size: 15px; font-weight: 500; }
.two ul { margin: 0; padding: 0; list-style: none; color: var(--muted); display: grid; gap: 8px; }
.ledger { border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.ledger-h { padding: 24px 28px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; }
.ledger-h b { font-weight: 500; font-size: 17px; } .ledger-h span { color: var(--muted); font-size: 14px; }
.lr { display: grid; grid-template-columns: 1fr auto; padding: 18px 28px; font-size: 16px; border-bottom: 1px solid var(--line); transition: background var(--fast); }
.lr:hover { background: var(--soft); }
.lr .v { font-variant-numeric: tabular-nums; color: var(--muted); }
.lr.start .v { color: var(--ink); font-weight: 500; }
.lr.total { border-bottom: 0; background: var(--accent-subtle); }
.lr.total b { font-weight: 500; } .lr.total .v { color: var(--accent-600); font-weight: 600; font-size: 22px; }
.ledger-f { padding: 16px 28px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); }

/* métiers : cartes image (fintech « Solutions for… ») */
.trades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 64px; }
.trade { display: block; }
.trade .pic { position: relative; height: clamp(300px, 28vw, 440px); border-radius: 18px; overflow: hidden; }
.trade .pic .bg { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 600ms var(--ease); }
.trade:hover .pic .bg { transform: scale(1.03); }
.trade .snip { position: absolute; left: 20px; right: 20px; bottom: 20px; background: #fff; border-radius: 12px; padding: 12px 14px; font-size: 14px; box-shadow: 0 18px 44px rgba(8,18,36,.28); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.trade .snip small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.trade h3 { margin: 22px 0 6px; font-weight: 500; font-size: 20px; letter-spacing: -.02em; }
.trade p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.trade .go { display: inline-flex; gap: 6px; margin-top: 14px; font-size: 15px; font-weight: 500; }
.trade .go .arr { transition: transform var(--fast) var(--ease); } .trade:hover .go .arr { transform: translateX(3px); }

/* engagements */
.prom { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 64px; border-top: 1px solid var(--line); }
.pr { padding: 28px 32px 0 0; }
.pr h3 { font-weight: 500; font-size: 18px; margin: 0 0 10px; }
.pr p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 16px; }

/* appel final, sur le paysage de nuit */
.final { position: relative; margin-top: clamp(96px, 10vw, 168px); height: clamp(480px, 42vw, 640px); border-radius: 18px; overflow: hidden; background: #24326b; color: #fff; }
.final > div { position: absolute; left: 7%; top: 50%; transform: translateY(-50%); max-width: 640px; }
.final h2 { color: #fff; }
.final p { font-size: 19px; line-height: 1.55; opacity: .9; margin: 22px 0 34px; }
.btn-white { background: #fff; color: var(--ink); } .btn-white:hover { background: #eef2f7; }

/* ---------------------------------------------------------------------------
   Telephone et petites tablettes. Une mise en page pensee pour le pouce :
   carrousels qui s'aimantent au lieu de cartes empilees, onglets au-dessus des
   apercus, le paquet avant ses boutons. L'ordinateur n'est pas touche.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --g: 20px; }
  body { -webkit-text-size-adjust: 100%; }

  /* rythme et titres */
  .sect { padding-top: 72px; }
  h2 { font-size: clamp(30px, 8.4vw, 40px); letter-spacing: -.04em; line-height: 1.06; }
  .splith { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
  .splith p { font-size: 16px; margin-bottom: 20px; }
  .splith .side { padding-bottom: 0; }

  /* navigation */
  nav { grid-template-columns: 1fr auto; height: 64px; }
  .links, .nav-r > a:not(.btn) { display: none; }
  .nav-r .btn { height: 38px; padding: 0 14px; font-size: 14px; border-radius: 9px; }
  .logo { font-size: 19px; } .logo svg { width: 24px; height: 24px; }

  /* heros */
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 12px; padding-bottom: 8px; gap: 32px; }
  .pill { height: 36px; font-size: 13.5px; padding: 0 12px 0 4px; gap: 8px; }
  .pill .ph { width: 28px; height: 28px; }
  .pill b { display: none; }
  .pill::after { content: "→"; color: var(--ink); }
  h1 { font-size: clamp(40px, 11.6vw, 52px); margin-top: 22px; letter-spacing: -.045em; }
  .hero p.lede { font-size: 16.5px; margin: 18px 0 26px; }
  .mail { height: auto; flex-direction: column; align-items: stretch; padding: 6px; gap: 6px; }
  .mail input { flex: none; height: 48px; padding: 0 12px; font-size: 16px; }
  .mail .btn { height: 48px; justify-content: center; font-size: 15px; }
  .assure { flex-wrap: wrap; gap: 6px 12px; font-size: 14px; margin-top: 18px; }
  .assure i { display: none; }

  .shot { height: 430px; min-height: 0; border-radius: 16px; }
  .win { left: 14px; right: 14px; top: 18px; border-radius: 14px; font-size: 13px; }
  .win-h { padding: 12px 14px; gap: 10px; }
  .win-h .ic { width: 28px; height: 28px; }
  .win-h b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .win-h .st { font-size: 12px; padding: 4px 8px; }
  .rows { padding: 2px 14px 0; }
  .row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 9px 0; }
  .row .q { display: none; }
  .row > span:first-child, .row .t { overflow: hidden; text-overflow: ellipsis; }
  .win > div[style] { height: 4px !important; }
  .win-f { padding: 10px 14px 12px; font-size: 12.5px; }
  .win-f b { font-size: 16px; }
  .suggest { left: 26px; right: 26px; width: auto; top: 176px; font-size: 13px; }
  .sg:nth-child(n+4) { display: none; }
  .cursor { display: none; }
  .toast { left: 14px; right: 14px; font-size: 13px; padding: 10px 12px; }
  .toast .ti { width: 30px; height: 30px; }
  .toast > div { min-width: 0; }
  .toast small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .t1 { bottom: 84px; } .t2 { bottom: 14px; left: 14px; right: 14px; }
  .t2 .sig { width: 72px; height: 24px; margin-left: auto; }

  /* l'idee : une seule carte sur la photo */
  .scene { height: 420px; margin-top: 32px; border-radius: 16px; }
  .scene-cards { grid-template-columns: minmax(0, 1fr); padding: 0 14px 14px; align-content: end; }
  .rule { display: none; }
  .note { padding: 18px; font-size: 14.5px; line-height: 1.55; border-radius: 14px; }
  .note .who { margin-bottom: 10px; } .note .foot { margin-top: 14px; font-size: 13px; }

  /* carrousels : on fait glisser, les cartes s'aimantent */
  .tall, .trades { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; margin: 32px -20px 0; padding: 0 20px 6px; scrollbar-width: none; }
  .tall::-webkit-scrollbar, .trades::-webkit-scrollbar { display: none; }
  .tc, .trade { scroll-snap-align: start; }
  .tc { min-height: 0; padding: 20px; gap: 16px; border-radius: 16px; }
  .tc .big { font-size: 36px; }
  .viz { flex: none; height: 250px; min-height: 0; }
  .tc h3 { font-size: 17px; } .tc p { font-size: 15px; }
  .trade .pic { height: 300px; border-radius: 16px; }
  .trade h3 { font-size: 18px; margin-top: 16px; } .trade p { font-size: 15px; }

  /* l'outil : des onglets au-dessus de l'apercu */
  .lister { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 28px; }
  #list { display: flex; gap: 8px; overflow-x: auto; margin: 0 -20px; padding: 0 20px 4px; scrollbar-width: none; }
  #list::-webkit-scrollbar { display: none; }
  .li { flex: none; width: auto; padding: 9px 14px; border: 1px solid var(--border); border-radius: 999px; }
  .li:last-child { border-bottom: 1px solid var(--border); }
  .li b { font-size: 14.5px; color: var(--muted); letter-spacing: 0; }
  .li p { display: none; }
  .li.on { background: var(--accent); border-color: var(--accent); }
  .li.on b { color: #fff; }
  .stagepic { height: 400px; border-radius: 16px; }
  .pv { width: calc(100% - 28px); font-size: 13px; }

  /* projetez-vous : titre, paquet, puis les boutons sous le pouce */
  .proj { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 32px 20px 24px; border-radius: 16px; }
  .proj-copy { display: contents; }
  .proj h2 { font-size: 44px; margin-top: 8px; }
  .proj-copy > p:not(.proj-kicker) { font-size: 16px; margin: 14px 0 8px; }
  .deck { order: 1; height: 560px; margin: 8px -8px 0; }
  .pc { width: min(360px, calc(100vw - 72px)); height: 530px; margin: -265px 0 0 calc(min(360px, calc(100vw - 72px)) / -2); font-size: 12.5px; }
  .pc .cover { height: 96px; }
  .pc .id { padding-top: 32px; } .pc .id h3 { font-size: 19px; }
  .proj-actions { order: 2; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
  .round { flex: none; }
  .proj-hint { flex-basis: 100%; text-align: center; font-size: 14px; }
  .tray { order: 3; margin-top: 18px; max-width: none; }

  /* les logiciels */
  .integ { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 72px; }
  .integ h2 { font-size: clamp(28px, 7.6vw, 36px); }
  .integ p { font-size: 16px; }
  /* les rangees defilent en haut, la carte suit en dessous au lieu de les couvrir */
  .hubwrap { height: auto; margin-top: 28px; border-radius: 16px; padding-bottom: 14px; }
  .lanes { position: relative; inset: auto; gap: 10px; padding: 18px 0; }
  .lane { gap: 10px; }
  .lane:nth-child(n+4) { display: none; }
  .mt { height: 46px; padding: 0 14px 0 12px; font-size: 14px; border-radius: 12px; }
  .mt .bi, .mt .mono { width: 20px; height: 20px; }
  .halo { display: none; }
  .hub { position: relative; left: auto; top: auto; transform: none; width: auto; margin: 0 14px; border-radius: 16px; }
  .hub-h { padding: 14px 16px; }
  .feed { height: 156px; padding: 6px 8px; }
  .ev2 { grid-template-columns: 30px minmax(0, 1fr); font-size: 13px; padding: 8px; }
  .ev2 time { display: none; }
  .hub-add { margin: 0 10px 10px; }
  .hub-add input { font-size: 16px; }

  /* les etapes : une frise verticale */
  .steps { grid-template-columns: minmax(0, 1fr); margin-top: 32px; border-top: 0; position: relative; }
  .steps::before { content: ""; position: absolute; left: 17px; top: 8px; bottom: 8px; width: 1px; background: var(--border); }
  .step { position: relative; padding: 0 0 28px 56px; }
  .step .n { position: absolute; left: 0; top: 0; width: 35px; height: 35px; border-radius: 50%; background: #fff; border: 1px solid var(--ink);
    display: grid; place-items: center; font-size: 13px; color: var(--ink); }
  .step h3 { margin: 6px 0; font-size: 19px; }
  .step p { font-size: 15px; }
  .step .inc { margin-top: 10px; }

  /* les credits */
  .credits { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .credits p.lede2 { font-size: 16px; margin-top: 16px; }
  .two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 28px; font-size: 14px; }
  .ledger { border-radius: 16px; }
  .ledger-h, .lr { padding-left: 18px; padding-right: 18px; }
  .lr { padding-top: 13px; padding-bottom: 13px; font-size: 15px; }
  .ledger-f { padding: 14px 18px; }

  /* les engagements : deux par deux */
  .prom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; margin-top: 28px; }
  .pr { padding: 20px 0 0; }
  .pr h3 { font-size: 16px; } .pr p { font-size: 14px; }

  /* l'appel final */
  .final { height: auto; margin-top: 72px; border-radius: 16px; }
  .final > div { position: relative; left: auto; top: auto; transform: none; padding: 56px 22px 150px; }
  .final h2 { font-size: 34px; }
  .final p { font-size: 16px; margin: 16px 0 24px; }

  /* pied de page */
  footer.wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 16px; padding-top: 48px; padding-bottom: 32px; }
  footer.wrap > div:first-child { grid-column: 1 / -1; }
  .legal { flex-direction: column; gap: 6px; margin-top: 8px; }

  /* sans JavaScript, le paquet reste une liste lisible */
  html:not(.js) .deck { height: auto; display: grid; grid-template-columns: minmax(0, 1fr); margin: 8px 0 0; }
  html:not(.js) .pc { width: auto; height: auto; margin: 0; }

  /* la barre reste accessible en haut de l'ecran, le menu s'ouvre dessous */
  nav { position: sticky; top: 0; z-index: 50; grid-template-columns: 1fr auto auto; gap: 8px;
    background: rgba(255,255,255,.86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
  .menu { display: block; }
  /* un flou d'arriere-plan ferait du nav le repere du panneau fixe : on le coupe menu ouvert */
  nav:has(.menu[open]), html.menu-ouvert nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  section[id] { scroll-margin-top: 72px; }
}

/* ---------------------------------------------------------------------------
   Le menu du telephone
   --------------------------------------------------------------------------- */
@media (min-width: 901px) { .menu { display: none; } }
.menu summary { list-style: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; cursor: pointer;
  transition: background var(--fast); -webkit-tap-highlight-color: transparent; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:active { background: var(--soft); }
.burger { position: relative; width: 20px; height: 12px; }
.burger i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform var(--base) var(--ease), top var(--base) var(--ease); }
.burger i:first-child { top: 0; } .burger i:last-child { top: 10px; }
.menu[open] .burger i:first-child { top: 5px; transform: rotate(45deg); }
.menu[open] .burger i:last-child { top: 5px; transform: rotate(-45deg); }

.menu-panel { position: fixed; left: 0; right: 0; top: 64px; bottom: 0; z-index: 49; background: #fff; padding: 12px 20px 28px;
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
.menu[open] .menu-panel { animation: menu-in var(--base) var(--ease) both; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }
.menu-panel ul { list-style: none; margin: 0; padding: 0; }
.menu-panel li { border-bottom: 1px solid var(--line); }
.menu-panel li a { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font-size: 26px; letter-spacing: -.03em; color: var(--ink); }
.menu-panel li a::after { content: "→"; font-size: 18px; color: var(--faint); transition: transform var(--fast) var(--ease), color var(--fast); }
.menu-panel li a:active::after { transform: translateX(4px); color: var(--accent); }
.menu[open] .menu-panel li, .menu[open] .menu-actions { animation: menu-item var(--base) var(--ease) both; animation-delay: calc(40ms + var(--i) * 35ms); }
@keyframes menu-item { from { opacity: 0; transform: translateY(10px); } }
.menu-actions { margin-top: auto; padding-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.menu-actions .btn { height: 52px; justify-content: center; font-size: 16px; border-radius: 12px; }
html.menu-ouvert { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .menu[open] .menu-panel, .menu[open] .menu-panel li, .menu[open] .menu-actions { animation: none; } }

/* ===================== la page Formules =====================
   Valeurs reprises de docs/design/maquettes/site-formules.html */
.f { max-width: 1152px; margin: 0 auto; padding: 0 20px; }

/* ---------- en-tête ---------- */
.f-head { text-align: center; padding: clamp(40px, 5vw, 80px) 0 0; }
.f-head h1 { margin: 0; font-size: clamp(44px, 5vw, 72px); letter-spacing: -.05em; line-height: 1; }
.f-head p { margin: 20px auto 0; max-width: 34em; font-size: 18px; line-height: 1.5; color: var(--muted); }

/* ---------- les quatre cartes ---------- */
.cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 48px; }
.carte { position: relative; display: flex; flex-direction: column; padding: 22px 20px 20px; border: 1px solid var(--border); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(11,18,32,.04); transition: border-color var(--base), opacity var(--base); }
.carte.fort { border-color: #9db8f5; box-shadow: 0 0 0 3px var(--accent-subtle), 0 1px 2px rgba(11,18,32,.04); }
.c-nom { display: flex; align-items: center; gap: 8px; height: 26px; }
.c-nom h2 { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.pastille { height: 22px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--accent-600); background: var(--accent-subtle); border: 1px solid #c7d7fb; }
.c-prix { margin-top: 18px; font-size: 40px; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; height: 40px; }
.c-unite { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); min-height: 38px; }
.c-unite .plus { color: var(--ink); }
.c-pour { margin: 18px 0 0; font-size: 14px; font-weight: 500; line-height: 1.45; min-height: 40px; }
.c-liste { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; font-size: 14px; color: var(--text); }
.c-liste li { display: flex; gap: 8px; align-items: flex-start; }
.c-liste svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--accent); }

/* régler la formule, dans la carte */
.regle { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.regle > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; font-size: 14px; }
.regle span:first-child { color: var(--muted); }
.regle b { font-weight: 500; }
.pas { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; height: 30px; }
.pas button { width: 28px; height: 100%; border: 0; background: none; font: 400 16px/1 "Inter", "Inter Fallback", sans-serif; color: var(--ink); cursor: pointer; border-radius: 7px; }
.pas button:hover:not(:disabled) { background: var(--soft); }
.pas button:disabled { color: #cbd2da; cursor: default; }
.pas output { min-width: 34px; text-align: center; font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
html:not(.js) .pas button { display: none; }
.bump { animation: bump var(--base) var(--ease); }
@keyframes bump { 40% { transform: scale(1.15); color: var(--accent); } }

.carte .espace { flex: 1; min-height: 20px; }
.carte .btn { height: 38px; font-size: 14px; border-radius: 8px; justify-content: center; }
.btn-line { background: #fff; border-color: var(--border); color: var(--ink); }
.btn-line:hover { border-color: #cfd6de; background: var(--soft); }

/* la formule du dessus fait mieux : on le dit */
.passer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--base) var(--ease); }
.passer > div { overflow: hidden; }
.passer.on { grid-template-rows: 1fr; }
.passer p { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--accent-subtle); font-size: 13px; line-height: 1.45; color: #1e3a8a; }
.passer button { all: unset; cursor: pointer; color: var(--accent-600); font-weight: 500; }
.passer button:hover { text-decoration: underline; }
.passer button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.carte.depasse .c-prix, .carte.depasse .btn { opacity: .45; }
.carte.eclaire { animation: eclaire 1.1s var(--ease); }
@keyframes eclaire { 30% { box-shadow: 0 0 0 6px var(--accent-20); } }

/* ---------- le projet façon agence : une bande photo ---------- */
.agence { position: relative; margin-top: 12px; min-height: 220px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; padding: 36px clamp(24px, 4vw, 48px); border-radius: 14px; overflow: hidden; color: #fff; }
.agence img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.agence::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8,16,40,.84), rgba(8,16,40,.55) 55%, rgba(8,16,40,.2)); }
.agence > *:not(img) { position: relative; z-index: 2; }
.agence h2 { margin: 0; color: #fff; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.035em; }
.agence p { margin: 10px 0 0; max-width: 36em; font-size: 15.5px; line-height: 1.55; color: rgba(255,255,255,.86); }
.agence .etiq { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.agence .etiq span { height: 28px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: 999px; font-size: 13px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24); }
.agence .btn { height: 42px; font-size: 14.5px; border-radius: 10px; }
.mention { margin: 16px 0 0; text-align: center; font-size: 13px; color: var(--muted); }

/* ---------- l'outil complet ---------- */
.inclus-w { margin-top: clamp(96px, 9vw, 144px); }
.inclus-w h2 { font-size: clamp(32px, 3.4vw, 52px); }
.inclus-w .sous-t { margin: 16px 0 0; max-width: 34em; font-size: 17px; line-height: 1.55; color: var(--muted); }
.inclus { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 14px; overflow: hidden; background: var(--soft); }
.inclus figure { margin: 0; position: relative; min-height: 480px; }
.inclus figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.inclus .liste { padding: clamp(28px, 4vw, 56px); display: grid; grid-template-columns: 1fr 1fr; gap: 32px 28px; align-content: center; }
.inclus h3 { margin: 0; font-size: 16px; font-weight: 500; letter-spacing: -.02em; }
.inclus .liste p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }

/* ---------- comparer ---------- */
.comparer-w { margin-top: clamp(80px, 7vw, 112px); }
.comparer { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.comparer col.crit { width: 24%; }
.comparer thead th { position: sticky; top: 0; z-index: 2; background: #fff; text-align: left; vertical-align: bottom; padding: 20px 12px; border-bottom: 1px solid var(--border); font-weight: 400; }
.comparer thead th:first-child { padding-left: 0; }
.comparer thead .t-nom { display: flex; align-items: center; gap: 8px; font-size: 22px; letter-spacing: -.03em; color: var(--ink); }
.comparer thead small { display: block; margin: 6px 0 14px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.comparer thead .btn { width: 100%; height: 34px; font-size: 13.5px; border-radius: 8px; justify-content: center; }
.comparer thead .intro { display: block; font-size: 13px; line-height: 1.45; color: var(--muted); padding-bottom: 8px; }
.comparer tbody th, .comparer tbody td { padding: 17px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.comparer tbody th { text-align: left; font-weight: 400; color: var(--text); padding-left: 0; }
.comparer tbody td { text-align: center; color: var(--text); }
.comparer td.fort { background: #fafbfc; }
.comparer tr.cat th { padding: 64px 0 16px; font-size: 18px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); border-bottom: 1px solid var(--border); }
.comparer tbody tr.cat:first-child th { padding-top: 40px; }
.comparer tbody th small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--faint); }
.comparer tr.sous th { padding-left: 16px; font-size: 13px; color: var(--muted); }
.comparer tr.sous th, .comparer tr.sous td { padding-top: 12px; padding-bottom: 12px; }
.comparer td.b { color: var(--ink); font-weight: 500; }
.comparer td svg { width: 16px; height: 16px; vertical-align: middle; }
.comparer .non svg { color: #b6bec9; width: 12px; height: 12px; }

/* ---------- questions ---------- */
.faq-w { margin-top: clamp(96px, 9vw, 144px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; }
.faq-w h2 { font-size: clamp(32px, 3vw, 44px); }
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 20px 0; font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; flex: none; width: 12px; height: 12px; margin-top: 5px; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1.5px; background: var(--muted); transition: transform var(--base) var(--ease); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0); }
.faq details p { margin: -4px 0 22px; max-width: 42em; font-size: 15px; line-height: 1.65; color: var(--muted); }

/* ---------- appel final : le paysage de nuit de l'accueil ---------- */
.fin { margin-top: clamp(96px, 9vw, 144px); }
.fin .final { margin-top: 0; }

@media (max-width: 1080px) {
  .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comparer-w { overflow-x: auto; }
  .comparer { min-width: 900px; }
}
@media (max-width: 640px) {
  .cartes { grid-template-columns: 1fr; }
  .c-unite, .c-pour { min-height: 0; }
  .agence { grid-template-columns: 1fr; padding: 28px 22px; }
  .agence::before { background: linear-gradient(180deg, rgba(8,16,40,.78), rgba(8,16,40,.9)); }
  .inclus { grid-template-columns: 1fr; }
  .inclus figure { min-height: 240px; }
  .inclus .liste { grid-template-columns: 1fr; gap: 22px; }
  .faq-w { grid-template-columns: 1fr; gap: 20px; }
}