@font-face { font-family: "Poppins"; src: url(../fonts/poppins-400-latin.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url(../fonts/poppins-500-latin.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url(../fonts/poppins-600-latin.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url(../fonts/poppins-700-latin.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JBM"; src: url(../fonts/jetbrains-mono-latin.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --navy: #00013F; --blue: #163ABC; --blue-2: #4C6BE0; --blue-l: #EEF2FF; --orange: #FF7A00; --orange-l: #FFF2E6; --cream: #FBF8F4;
  --text: #45475A; --line: #E4E6EF; --white: #fff; --hh: 78px; --mono: "JBM", ui-monospace, Consolas, monospace;
  --sec: clamp(46px, 5.4vw, 78px); --head: clamp(20px, 2.2vw, 30px); --grid: clamp(14px, 1.5vw, 20px); --card: 20px 22px;
  --ph-h: min(460px, calc(100svh - var(--hh) - 170px)); --ph-w: calc(var(--ph-h) * .54);
  --glass: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.54));
  --glass-b: blur(18px) saturate(1.8);
  --glass-s: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(0,1,63,.07), 0 18px 38px -24px rgba(0,1,63,.45);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: #fff; scroll-padding-top: calc(var(--hh) + 12px); }
body { margin: 0; background: #fff; color: var(--text); font: 400 16px/1.65 "Poppins", Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; }
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
h1, h2, h3 { color: var(--navy); font-weight: 600; }
img { display: block; max-width: 100%; height: auto; }
.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 clamp(16px, 2.6vw, 32px); }
.bl { color: var(--blue); }
.or { color: var(--orange); }
.sec { padding: var(--sec) 0; }
.h2 { font-size: clamp(27px, 2.9vw, 38px); line-height: 1.22; letter-spacing: -.012em; }
.h2.c { text-align: center; max-width: 1040px; margin: 0 auto; }
.sub { margin-top: 12px; font-size: 16.5px; }
.sub.c { text-align: center; max-width: 780px; margin-left: auto; margin-right: auto; }
.rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.rv.in { opacity: 1; transform: none; }

/* Boutons en verre liquide */
@property --gx { syntax: '<percentage>'; inherits: false; initial-value: 20%; }
@keyframes liq { 0%, 100% { --gx: 16%; } 50% { --gx: 84%; } }
.btn { --c: var(--blue); --tx: #fff; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border: 0; border-radius: 999px; font: 600 15px/1.2 "Poppins", Arial, sans-serif; color: var(--tx); text-decoration: none; white-space: nowrap; cursor: pointer;
  background:
    radial-gradient(45% 130% at var(--gx) 0%, rgba(255,255,255,.46), transparent 72%),
    radial-gradient(60% 90% at calc(100% - var(--gx)) 120%, rgba(255,255,255,.18), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0)), var(--c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62), inset 0 -1px 1px rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.16), 0 12px 22px -14px var(--c);
  transition: transform .2s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-2px); animation-duration: 2.4s !important; }
.btn-o { --c: var(--orange); --tx: var(--navy); }
.btn-n { --c: var(--navy); }
.btn-g { color: var(--navy); background: var(--glass); -webkit-backdrop-filter: var(--glass-b); backdrop-filter: var(--glass-b); box-shadow: var(--glass-s); }
.btn-s { padding: 10px 18px; font-size: 14px; }
@media (prefers-reduced-motion: no-preference) { .btn { animation: liq 5s ease-in-out infinite; } }

/* Bandeau du haut */
.top { background: var(--navy); color: #fff; font-size: 13.5px; height: 36px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.top a { text-decoration: none; }
.top .mq-t > span { padding-right: 34px; }
.top b { color: #FFB066; font-weight: 600; }

/* En-tête en verre liquide */
.hd { position: sticky; top: 0; z-index: 50; height: var(--hh); padding: 9px 0; }
.hd-b { position: relative; max-width: 1240px; height: 60px; margin: 0 auto; padding: 0 22px; display: flex; align-items: center; gap: 26px; isolation: isolate; }
.hd-b::before { content: ""; position: absolute; z-index: -1; inset: 0 10px; border-radius: 20px; background: var(--glass); -webkit-backdrop-filter: var(--glass-b); backdrop-filter: var(--glass-b); box-shadow: var(--glass-s); opacity: .0; transition: opacity .3s; pointer-events: none; }
.hd.is-s .hd-b::before, .hd.is-o .hd-b::before { opacity: 1; }
.logo { flex: none; width: 96px; aspect-ratio: 676 / 208; background: var(--blue); -webkit-mask: url(../logos/xvdata-blanc.png) center / contain no-repeat; mask: url(../logos/xvdata-blanc.png) center / contain no-repeat; }
.nav { display: flex; align-items: center; gap: 2px; height: 100%; }
.nav > li { display: flex; align-items: center; height: 100%; }
.nav-b { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-radius: 12px; background: none; font: 500 14.5px/1.2 "Poppins", Arial, sans-serif; color: var(--navy); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.nav-b svg { width: 12px; height: 12px; transition: transform .25s; }
.nav > li:hover .nav-b, .nav > li.open .nav-b { background: rgba(22,58,188,.08); color: var(--blue); }
.nav > li:hover .nav-b svg, .nav > li.open .nav-b svg { transform: rotate(180deg); }
.hd .btn { margin-left: auto; }
.burger { display: none; margin-left: auto; }

/* Listes déroulantes */
.mega { position: absolute; left: 10px; right: 10px; top: calc(100% + 8px); padding: 18px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88)); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(0,1,63,.07), 0 30px 60px -30px rgba(0,1,63,.5); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .22s, transform .28s cubic-bezier(.2,.8,.2,1), visibility .22s; }
.nav > li:hover .mega, .nav > li.open .mega, .nav > li:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.nav > li::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; display: none; }
.nav > li:hover::after { display: block; }
.mg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mg-w { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 16px; }
.mi { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; text-decoration: none; transition: background .18s; }
.mi:hover { background: rgba(22,58,188,.07); }
.mi b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--navy); }
.mi small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--text); }
.ic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--blue-l); color: var(--blue); }
.ic svg { width: 20px; height: 20px; }
.mi:hover .ic { background: var(--blue); color: #fff; }
.mp { position: relative; overflow: hidden; padding: 18px; border-radius: 16px; background: var(--blue); color: #fff; }
.mp b { display: block; font-size: 16px; line-height: 1.3; }
.mp p { margin: 6px 0 12px; font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.88); }
.mp .btn { position: relative; z-index: 1; }
.mp img { position: absolute; right: -44px; bottom: -40px; width: 170px; opacity: .22; }
.mb { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mb a { display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: center; padding: 14px; border-radius: 16px; text-decoration: none; transition: background .18s; }
.mb a:hover { background: rgba(22,58,188,.07); }
.mb span.pl { height: 58px; display: grid; place-items: center; padding: 8px 12px; background: #fff; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.mb span.pl img { max-height: 38px; }
.mb b { display: block; color: var(--navy); font-size: 15.5px; font-weight: 600; }
.mb small { display: block; font-size: 13px; line-height: 1.4; }

/* Menu mobile */
.sheet { position: fixed; z-index: 60; inset: 0; padding: 18px 16px 30px; overflow-y: auto; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.84)); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .25s, transform .3s, visibility .25s; }
.sheet.open { opacity: 1; visibility: visible; transform: none; }
.sheet-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.sheet details { border-bottom: 1px solid var(--line); }
.sheet summary { padding: 14px 2px; font-weight: 600; font-size: 17px; color: var(--navy); cursor: pointer; }
.sheet .mi { padding: 9px 4px; }
.sheet > a.plain { display: block; padding: 14px 2px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 17px; color: var(--navy); text-decoration: none; }

/* Héros */
.hero { position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; left: -210px; top: 20px; width: 520px; height: 560px; background: url(../images/pointilles.png) center / contain no-repeat; opacity: .5; pointer-events: none; }
.hero-g { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-top: clamp(14px, 2vw, 30px); padding-bottom: clamp(22px, 3vw, 44px); }
.h1 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.16; letter-spacing: -.018em; }
.hero p.l { margin-top: 16px; font-size: clamp(17px, 1.45vw, 19px); max-width: 33em; }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.proof { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 20px; font-size: 14.5px; }
.proof b { color: var(--navy); font-weight: 600; }
.hero-v { position: relative; justify-self: center; width: min(100%, 380px); }
.chip { position: absolute; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 14px; font-size: 13.5px; font-weight: 600; color: var(--navy); white-space: nowrap; background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.5)); -webkit-backdrop-filter: blur(14px) saturate(1.8); backdrop-filter: blur(14px) saturate(1.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.4), 0 14px 28px -16px rgba(0,1,63,.55); }
.chip i { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; font-style: normal; font-size: 11px; line-height: 1; }
.chip.o i { background: var(--orange); color: var(--navy); }
.c1 { left: -7%; top: 16%; }
.c2 { right: -5%; top: 38%; animation-delay: -2s !important; }
.c3 { left: -3%; top: 61%; animation-delay: -4s !important; }
.c4 { right: 0; bottom: 8%; animation-delay: -1s !important; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: no-preference) { .chip { animation: float 6s ease-in-out infinite; } }

/* Défilés */
.mq { overflow: hidden; white-space: nowrap; }
.mq-t { display: inline-flex; align-items: center; will-change: transform; }
.lg { background: var(--cream); padding: 10px 0; }
.lg .mq-t > span { flex: none; display: grid; place-items: center; width: 150px; height: 56px; padding: 0 22px; }
.lg img { max-height: 46px; width: auto; max-width: 100%; }
.sect { padding: 4px 0; }
.sect .mq-t > span { flex: none; margin-right: 12px; padding: 11px 20px; border-radius: 999px; background: var(--blue-l); color: var(--navy); font-weight: 500; font-size: 15.5px; }
.sect.alt .mq-t > span { background: var(--orange-l); }

/* Traitement de la donnée */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid); margin-top: var(--head); }
.mode { position: relative; overflow: hidden; padding: 18px 24px; border-radius: 18px; background: var(--blue); color: #fff; }
.mode.n { background: var(--navy); }
.mode h3 { color: #fff; font-size: 18px; }
.mode p { margin-top: 4px; color: rgba(255,255,255,.9); }
.mode::after { content: ""; position: absolute; right: -70px; top: -70px; width: 240px; height: 240px; background: url(../images/pointilles.png) center / contain no-repeat; opacity: .35; }
.fam { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid); margin-top: var(--head); }
.fc { display: flex; flex-direction: column; padding: var(--card); border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: transform .25s, box-shadow .25s; }
.fc:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--blue-2), 0 22px 40px -28px rgba(22,58,188,.6); }
.fc .ic { width: 36px; height: 36px; margin-bottom: 12px; }
.fc h3 { font-size: 19px; }
.fc p { margin: 6px 0 14px; font-size: 15px; line-height: 1.55; }
.fc .r { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14.5px; font-weight: 500; color: var(--blue); }

/* Fichier nettoyé */
.fxs { background: var(--cream); }
.two { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 60px); align-items: center; }
.ticks { margin-top: 16px; display: grid; gap: 8px; }
.ticks li { position: relative; padding-left: 28px; }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: 3px; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; font-size: 11px; line-height: 1; }
.fx { background: #fff; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line), 0 26px 50px -36px rgba(0,1,63,.5); overflow: hidden; font-size: 14px; }
.fx-t { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); font: 500 12.5px/1.4 var(--mono); color: var(--navy); }
.fx-t b { font-weight: 500; padding: 3px 10px; border-radius: 999px; background: var(--blue-l); color: var(--blue); transition: background .3s, color .3s; }
.fx.run .fx-t b { background: var(--orange); color: var(--navy); }
.fx-b { padding: 10px 14px 6px; min-height: 306px; }
.fx-h, .fx-r { display: grid; grid-template-columns: .85fr 1.6fr 1fr 1.5fr; gap: 10px; }
.fx-h { font: 500 11px/1.3 var(--mono); color: #72758a; padding: 0 8px 8px; }
.fx-r { font: 500 12px/1.4 var(--mono); color: var(--navy); padding: 8px; border-bottom: 1px solid var(--line); max-height: 80px; overflow: hidden; transition: max-height .5s, padding .5s, opacity .4s, background .3s; }
.fx-r > span { min-width: 0; overflow-wrap: break-word; }
.fx-r .bad { color: #C2410C; text-decoration: underline wavy #F0A77C; text-underline-offset: 3px; }
.fx-r .fix { background: var(--blue-l); color: var(--blue); border-radius: 4px; padding: 0 3px; margin: 0 -3px; }
.fx-r .dead { color: #9a9cac; text-decoration: line-through; }
.fx-r.scan { background: var(--blue-l); }
.fx-r.dup { background: var(--orange-l); }
.fx-r.gone { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; border-bottom-width: 0; }
.fx-log { margin-top: 14px; display: grid; gap: 6px; font-size: 13.5px; }
.fx-log div { display: flex; gap: 8px; align-items: baseline; animation: logIn .3s ease both; }
.fx-log b { width: 16px; text-align: center; color: var(--blue); }
.fx-log b.x { color: #C2410C; }
.fx-log em { font-style: normal; color: #72758a; }
.fx-f { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 11px 16px; border-top: 1px solid var(--line); font-weight: 600; color: var(--navy); min-height: 46px; }
@keyframes logIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Enrichissement */
.en-w { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: var(--head); }
.en-w::before { content: ""; position: absolute; right: -150px; top: -70px; width: 460px; height: 490px; background: url(../images/pointilles.png) center / contain no-repeat; opacity: .55; pointer-events: none; }
.card { position: relative; overflow: hidden; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.82)); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--line), 0 26px 46px -38px rgba(0,1,63,.6); }
.card-h { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.card-h > b { font-size: 17px; font-weight: 600; color: var(--navy); }
.card-h small { display: block; font-size: 12.5px; font-weight: 400; color: #72758a; }
.card-n { flex: none; font-size: 13.5px; color: var(--navy); }
.card-n b { font-size: 24px; font-weight: 600; color: var(--blue); font-variant-numeric: tabular-nums; }
.card-bar { height: 5px; background: var(--blue-l); }
.card-bar i { display: block; height: 100%; width: 20%; background: var(--blue); border-radius: 0 3px 3px 0; transition: width .35s; }
.card-g { display: grid; grid-template-columns: 1fr 1fr; }
.f { min-width: 0; padding: 6px 16px; border-bottom: 1px solid var(--line); }
.f:nth-child(odd) { border-right: 1px solid var(--line); }
.f small { display: block; font-size: 12px; line-height: 1.4; color: #72758a; }
.f span { display: block; min-height: 1.5em; font-size: 14.5px; font-weight: 500; line-height: 1.45; color: var(--navy); }
.f.en-f span { color: transparent; background: linear-gradient(var(--blue-l), var(--blue-l)) left center / 62% 10px no-repeat; transition: color .3s, background-size .3s; }
.f.en-f.on span { color: var(--navy); background-size: 0 10px; }
.f.en-f.on { animation: flash .7s ease; }
@keyframes flash { 0% { background: var(--blue-l); } 100% { background: transparent; } }
.card-f { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 16px; font-weight: 600; font-size: 14px; color: var(--navy); }
.card-f b { padding: 3px 12px; border-radius: 999px; background: var(--line); color: #72758a; font-size: 13px; font-weight: 600; transition: background .3s, color .3s; }
.card.full .card-f b { background: var(--orange); color: var(--navy); }

/* Bases */
.bd { background: var(--cream); }
.bd img, .pj img { mix-blend-mode: multiply; max-height: 330px; width: auto; margin: 0 auto; }
.bd .two { grid-template-columns: minmax(0, .42fr) minmax(0, 1.58fr); }
.bd-g { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid); margin-top: var(--head); }
.bd-c { padding: var(--card); border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.bd-c h3 { font-size: 17px; margin-bottom: 8px; }
.bd-c li { position: relative; padding: 4px 0 4px 18px; font-size: 14.5px; line-height: 1.45; }
.bd-c li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 8px; border-radius: 2px; background: var(--orange); transform: skewX(-14deg); }

/* Canaux */
.hs { position: relative; }
.hs-s { position: sticky; top: var(--hh); height: calc(100svh - var(--hh)); overflow: hidden; display: flex; flex-direction: column; }
.hs-h { flex: none; padding-top: 4px; padding-bottom: 8px; }
.hs-h .h2 { font-size: clamp(24px, 2.2vw, 30px); max-width: none; }
.hs-h .sub { margin-top: 2px; font-size: 15px; }
.hs-t { flex: 1; min-height: 0; display: flex; gap: 14px; will-change: transform; }
.hs-t::before, .hs-t::after { content: ""; flex: 0 0 max(16px, calc(50vw - 620px - 14px)); }
.hs-p { flex: 0 0 min(1240px, 92vw); display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr) minmax(0, .82fr); gap: clamp(12px, 1.8vw, 26px); align-items: center; padding: 10px clamp(16px, 2.2vw, 30px); border-radius: 22px; }
.t-a { background: var(--blue-l); }
.t-b { background: var(--cream); box-shadow: inset 0 0 0 1px #F1EADF; }
.p-t h3 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.15; }
.p-t p { margin-top: 12px; font-size: 16px; }
.p-t small { display: block; margin-top: 12px; font-size: 13.5px; color: #72758a; }
.p-d { position: relative; display: grid; place-items: center; min-width: 0; height: 100%; }
.p-f { display: grid; gap: 10px; }
.p-f li { display: flex; gap: 10px; align-items: center; font-weight: 500; font-size: 15.5px; color: var(--navy); opacity: .42; transition: opacity .3s; }
.p-f li::before { content: "✓"; flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--blue-2); color: transparent; font-size: 11px; line-height: 1; transition: background .25s, color .25s; }
.p-f li.done { opacity: 1; }
.p-f li.done::before { background: var(--blue); color: #fff; }
.p-f .ld { display: block; margin-top: 8px; padding: 12px 14px; border-radius: 16px; background: var(--blue); color: #fff; opacity: 0; transform: translateX(-30px) scale(.97); transition: opacity .35s, transform .5s cubic-bezier(.2,1.1,.3,1); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 16px 30px -18px var(--blue); }
.p-f .ld::before { display: none; }
.p-f .ld.done { opacity: 1; transform: none; }
.p-f .ld small { display: block; font-size: 12px; font-weight: 500; color: #FFC999; }
.p-f .ld b { display: block; font-size: 18px; font-weight: 600; line-height: 1.25; }
.p-f .ld span { display: block; font-weight: 400; font-size: 14px; line-height: 1.35; }
.hs-n { flex: none; align-self: center; margin: 8px 0 10px; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: var(--glass-b); backdrop-filter: var(--glass-b); box-shadow: var(--glass-s); max-width: calc(100vw - 24px); overflow-x: auto; }
.hs-n button { flex: none; padding: 8px 15px; border: 0; border-radius: 999px; background: none; font: 500 14px/1 "Poppins", Arial, sans-serif; color: var(--navy); cursor: pointer; transition: background .2s, color .2s; }
.hs-n button.on { background: var(--blue); color: #fff; }

.rs, .rs * { transition: none !important; animation: none !important; }
.ph { position: relative; width: var(--ph-w); height: var(--ph-h); background: #fff; color: var(--navy); border: 2px solid var(--navy); border-radius: 26px; overflow: hidden; box-shadow: 0 30px 50px -36px rgba(0,1,63,.7); }
.ph-h { height: 44px; display: flex; gap: 8px; align-items: center; padding: 0 12px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.ph-h i { width: 22px; height: 22px; border-radius: 50%; background: var(--blue); flex: none; }
.ph-b { position: absolute; inset: 44px 0 0; padding: 12px; font-size: 13px; line-height: 1.42; }
.tap { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: rgba(255,122,0,.42); opacity: 0; pointer-events: none; }
@keyframes tap { 0% { opacity: 0; transform: scale(1.6); } 40% { opacity: 1; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.3); } }
.ok { position: absolute; inset: 0; display: grid; place-content: center; padding: 16px; text-align: center; font-size: 15px; font-weight: 600; background: var(--blue); color: #fff; opacity: 0; transition: opacity .3s; }

.mw-w { position: relative; width: min(100%, 440px); }
.mw { position: relative; width: 100%; height: min(var(--ph-h), 430px); background: #fff; color: var(--navy); border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 2px var(--navy), 0 30px 50px -36px rgba(0,1,63,.7); }
.mw-h { display: flex; justify-content: space-between; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.mw-h span:last-child { color: var(--blue); opacity: 0; transition: opacity .3s; }
.st1 .mw-h span:last-child { opacity: 1; }
.mw-r { display: grid; gap: 1px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.35; }
.mw-r b { font-weight: 600; }
.mw-r span { color: var(--text); }
.mw-n { background: var(--blue-l); max-height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; opacity: 0; transition: max-height .4s, padding .4s, opacity .3s; }
.st1 .mw-n { max-height: 70px; padding-top: 10px; padding-bottom: 10px; opacity: 1; }
.st2 .mw-n { background: var(--blue); color: #fff; }
.st2 .mw-n span { color: #fff; }
.mw-o { position: absolute; inset: 42px 2px 2px; padding: 14px; background: #fff; transform: translateX(102%); transition: transform .5s cubic-bezier(.7,0,.2,1); }
.st3 .mw-o { transform: none; }
.mw-v { padding: 20px 16px; border-radius: 10px; background: var(--blue); color: #fff; font-size: 21px; line-height: 1.15; font-weight: 600; }
.mw-o p { margin: 12px 0; font-size: 14px; }
.mw-b { position: relative; display: inline-block; padding: 9px 18px; border-radius: 999px; background: var(--orange); color: var(--navy); font-weight: 600; font-size: 14px; }
.st5 .mw-b .tap { animation: tap .6s ease-out; }
.cur { position: absolute; left: 92%; top: 92%; width: 22px; height: 22px; color: var(--navy); opacity: 0; transition: left .7s cubic-bezier(.6,0,.2,1), top .7s cubic-bezier(.6,0,.2,1), opacity .2s; z-index: 3; }
.st2 .cur { opacity: 1; left: 40%; top: 21%; }
.st3 .cur { opacity: 1; left: 60%; top: 40%; }
.st4 .cur { left: 22%; top: 72%; }
.st6 .cur { opacity: 0; }
.envs { position: absolute; left: -8%; top: 58px; z-index: 4; pointer-events: none; }
.envs svg { position: absolute; left: 0; top: 0; width: 34px; height: 25px; color: var(--orange); opacity: 0; }
.st1 .envs svg { animation: fly .9s ease-in both; }
.envs svg:nth-child(2) { animation-delay: .16s !important; top: 34px; }
.envs svg:nth-child(3) { animation-delay: .32s !important; top: -30px; }
.envs svg:nth-child(4) { animation-delay: .48s !important; top: 66px; }
@keyframes fly { 0% { opacity: 0; transform: translateX(-150px); } 25% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(44px); } }

.old { position: absolute; left: 12px; right: 40px; top: 12px; padding: 10px 12px; border-radius: 14px 14px 14px 3px; background: #F1F2F6; color: var(--text); }
.typ { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--blue-l); opacity: 0; transition: opacity .2s; }
.typ i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-2); animation: blink 1s infinite; }
.typ i:nth-child(2) { animation-delay: .16s; }
.typ i:nth-child(3) { animation-delay: .32s; }
@keyframes blink { 50% { opacity: .25; } }
.st1 .typ { opacity: 1; }
.st2 .typ { opacity: 0; }
.msg { position: absolute; left: 12px; right: 24px; bottom: 12px; padding: 10px 12px; border-radius: 14px 14px 14px 3px; background: var(--blue-l); opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }
.st2 .msg { opacity: 1; transform: none; }
.msg u { position: relative; display: inline-block; margin-top: 6px; color: var(--blue); font-weight: 600; }
.st3 .msg .tap { animation: tap .6s ease-out; }
.frm { position: absolute; inset: 0; padding: 14px 12px; background: #fff; transform: translateY(102%); transition: transform .45s cubic-bezier(.7,0,.2,1); }
.st4 .frm { transform: none; }
.frm label { display: block; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 11.5px; color: #72758a; }
.frm label span { display: block; font-size: 14px; font-weight: 600; color: var(--navy); }
.snd { position: relative; display: block; padding: 10px; border-radius: 999px; background: var(--orange); color: var(--navy); text-align: center; font-weight: 600; }
.st5 .snd .tap { animation: tap .6s ease-out; }
.st6 .ok { opacity: 1; }

.rc-w { overflow: hidden; margin: 0 -12px; padding: 0 12px; }
.rc-t { display: flex; gap: 10px; transition: transform .7s cubic-bezier(.7,0,.2,1); opacity: 0; }
.st1 .rc-t { opacity: 1; }
.st2 .rc-t { transform: translateX(-78%); }
.st3 .rc-t { transform: translateX(-156%); }
.st4 .rc-t { transform: translateX(0); }
.rc { flex: 0 0 76%; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.rc > div { display: grid; align-items: end; height: calc(var(--ph-h) * .42); padding: 10px; color: #fff; font-size: 17px; line-height: 1.1; font-weight: 600; background: var(--blue); }
.rc:nth-child(2) > div { background: var(--orange); color: var(--navy); }
.rc:nth-child(3) > div { background: var(--navy); }
.rc p { padding: 8px 10px 4px; font-size: 12.5px; }
.rc u { position: relative; display: block; margin: 4px 10px 10px; padding: 6px; border-radius: 999px; text-align: center; text-decoration: none; box-shadow: inset 0 0 0 1px var(--blue); color: var(--blue); font-weight: 600; font-size: 12.5px; }
.st5 .rc:first-child u .tap { animation: tap .6s ease-out; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--blue); }
.chips span { padding: 4px 10px; box-shadow: inset 0 0 0 1px var(--blue); border-radius: 999px; }

.vm { padding: 12px; background: var(--blue-l); border-radius: 12px; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }
.st1 .vm { opacity: 1; transform: none; }
.vm b { font-weight: 600; }
.vm small { display: block; color: #72758a; }
.wv { display: flex; align-items: center; gap: 3px; height: 40px; margin: 8px 0 4px; }
.wv i { flex: 1; min-width: 2px; height: var(--h); border-radius: 2px; background: #a9b5e6; transition: background .1s; }
.st2 .wv i { background: var(--blue); animation: wv .7s ease-in-out infinite alternate; animation-delay: var(--d); }
.st3 .wv i { animation: none; }
@keyframes wv { to { transform: scaleY(.45); } }
.vm-t { margin-top: 10px; opacity: 0; transition: opacity .3s; }
.st3 .vm-t { opacity: 1; }
.vm-b { position: relative; display: block; margin-top: 10px; padding: 10px; border-radius: 999px; text-align: center; background: var(--orange); color: var(--navy); font-weight: 600; opacity: 0; transition: opacity .3s; }
.st3 .vm-b { opacity: 1; }
.st4 .vm-b .tap { animation: tap .6s ease-out; }
[data-sc="vocal"] .st5 .ok { opacity: 1; }

.pr { position: relative; width: min(100%, 410px); height: min(var(--ph-h), 430px); }
.pr-b, .pr-f { position: absolute; left: 0; right: 0; bottom: 4%; border-radius: 0 0 12px 12px; }
.pr-b { height: 50%; background: #D5DCF7; }
.pr-c { position: absolute; left: 8%; right: 8%; bottom: 8%; height: 58%; padding: 14px; border-radius: 10px; background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1px var(--line); display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; transition: transform .8s cubic-bezier(.7,0,.2,1); }
.pr-c b { display: block; font-size: 18px; line-height: 1.15; font-weight: 600; }
.pr-c span { display: block; margin-top: 6px; font-size: 13px; color: var(--text); }
.pr-c svg { width: 84px; height: 84px; display: block; }
.st2 .pr-c { transform: translateY(-46%); }
.pr-f { height: 38%; background: var(--blue); clip-path: polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%); }
.pr-s { position: absolute; right: -2%; top: -4%; width: 42%; aspect-ratio: .62; background: #fff; border: 2px solid var(--navy); border-radius: 16px; overflow: hidden; transform: translateX(130%); opacity: 0; transition: transform .6s cubic-bezier(.7,0,.2,1), opacity .3s; z-index: 2; }
.st3 .pr-s { transform: none; opacity: 1; }
.pr-s::before { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; aspect-ratio: 1; transform: translateY(-50%); border: 2px solid var(--orange); z-index: 1; }
.pr-s svg { position: absolute; left: 18%; top: 50%; width: 64%; height: auto; transform: translateY(-50%); }
.pr-s::after { content: ""; position: absolute; left: 12%; right: 12%; top: 28%; height: 2px; background: var(--orange); z-index: 1; }
.st4 .pr-s::after { animation: scan .8s ease-in-out 2 alternate; }
@keyframes scan { to { top: 70%; } }
.pr-s .ok { font-size: 12px; z-index: 2; }
.st5 .pr-s .ok { opacity: 1; }

.tl { width: min(100%, 440px); background: #fff; color: var(--navy); border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 2px var(--navy), 0 30px 50px -36px rgba(0,1,63,.7); }
.tl-h { display: flex; justify-content: space-between; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; font-weight: 600; }
.tl-h span:last-child { font-family: var(--mono); font-weight: 500; }
.tl-r { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 16px; border-bottom: 1px solid var(--line); font-size: 15.5px; font-weight: 600; transition: background .3s; }
.tl-r:last-child { border-bottom: 0; }
.tl-r span { font-size: 12.5px; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: var(--line); color: var(--text); transition: background .3s, color .3s; }
.st1 .tl-r.a { background: var(--blue-l); }
.st1 .tl-r.a span { background: var(--navy); color: #fff; }
.st4 .tl-r.a span { background: var(--orange); color: var(--navy); }

/* Chiffres */
.nums { position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 22px 30px; border-radius: 18px; background: var(--blue); color: #fff; }
.nums::after { content: ""; position: absolute; right: -90px; top: -120px; width: 380px; height: 420px; background: url(../images/pointilles.png) center / contain no-repeat; opacity: .3; pointer-events: none; }
.nums div { position: relative; z-index: 1; }
.nums b { display: block; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; }
.nums span { font-size: 15.5px; color: rgba(255,255,255,.92); }

/* Marques */
.brands { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid); margin-top: var(--head); }
.bc { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; padding: 16px 20px; border-radius: 18px; line-height: 1.5; background: #fff; box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: transform .25s, box-shadow .25s; }
.bc:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--blue-2), 0 24px 40px -30px rgba(22,58,188,.65); }
.bc .pl { display: grid; place-items: center; height: 60px; padding: 4px; }
.bc .pl img { max-height: 54px; }
.bc b { display: block; font-size: 19px; font-weight: 600; color: var(--navy); }
.bc em { display: inline-block; margin-top: 2px; font-style: normal; font-weight: 600; font-size: 14.5px; color: var(--blue); }

/* Projet */
.pj { background: var(--cream); }
.pj .two { grid-template-columns: minmax(0, 1.6fr) minmax(0, .4fr); }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.op { display: flex; gap: 12px; align-items: center; padding: 13px 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; font-weight: 500; line-height: 1.35; color: var(--navy); transition: transform .2s, box-shadow .2s; }
.op:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--blue); }

/* Pied */
.ft { background: var(--navy); color: rgba(255,255,255,.86); font-size: 15px; }
.ft-g { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 32px; padding-top: 44px; padding-bottom: 28px; }
.ft .logo { display: block; width: 132px; background: #fff; margin-bottom: 14px; }
.ft b { display: block; margin-bottom: 10px; color: #fff; font-weight: 600; }
.ft a { display: block; padding: 3px 0; text-decoration: none; }
.ft a:hover { color: #FFB066; }
.ft-b { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 0 24px; border-top: 1px solid rgba(255,255,255,.18); font-size: 14px; color: rgba(255,255,255,.7); }

/* Adaptations */
@media (max-width: 1120px) {
  .nav, .hd .btn.lg-only { display: none; }
  .burger { display: inline-flex; }
}
@media (max-width: 900px) {
  :root { --ph-h: 380px; --hh: 72px; }
  .hero::before { opacity: .22; }
  .hero-g, .two, .bd .two, .pj .two, .en-g { grid-template-columns: 1fr; }
  .hero-v { width: min(84%, 380px); margin-top: 6px; }
  .c1 { left: -8%; } .c2 { right: -9%; } .c3 { left: -9%; } .c4 { right: -6%; }
  .modes, .fam, .brands, .bd-g, .nums { grid-template-columns: 1fr; }
  .bc { grid-template-columns: 110px 1fr; }
  .bd .two, .pj .two { gap: 14px; }
  .fx-b { min-height: 470px; }
  .fx-h { display: none; }
  .fx-r { grid-template-columns: 1fr 1fr; }
  .en-w { grid-template-columns: 1fr; }
  .en-w::before { display: none; }
  .hs-s { position: static; height: auto; display: block; }
  .hs-t { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 4px 0 8px; }
  .hs-t::before, .hs-t::after { flex: 0 0 4px; }
  .hs-p { flex: 0 0 90vw; scroll-snap-align: center; grid-template-columns: 1fr; gap: 14px; padding: 20px 18px; align-items: start; }
  .p-d { height: auto; }
  .hs-n { margin: 6px 12px 0; }
  .opts { grid-template-columns: 1fr; }
  .ft-g { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .hs-s { position: static; height: auto; }
  .hs-t { overflow-x: auto; height: auto; }
}

.lnk-m { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--orange); text-decoration: none; }
.lnk-m:hover { color: var(--blue); }

/* Fil d'Ariane */
.crumb { margin-bottom: 12px; font-size: 13.5px; color: #72758a; }
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--blue); }

/* Page prestation : traitements */
.tt { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 16px; margin-top: var(--head); }
.tt-l { display: grid; gap: 6px; align-content: start; }
.tt-b { position: relative; overflow: hidden; display: flex; gap: 10px; align-items: center; padding: 10px 14px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 500 14.5px/1.3 "Poppins", Arial, sans-serif; color: var(--navy); text-align: left; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.tt-b:hover { box-shadow: inset 0 0 0 1.5px var(--blue-2); }
.tt-b span { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-l); color: var(--blue); font-size: 12.5px; font-weight: 600; }
.tt-b.on { background: var(--blue); color: #fff; box-shadow: 0 12px 22px -16px var(--blue); }
.tt-b.on span { background: #fff; }
.tt-b i { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--orange); }
.tt-b.on.auto i { animation: ttp 7s linear forwards; }
@keyframes ttp { to { width: 100%; } }
.tt-w { border-radius: 18px; background: var(--cream); overflow: hidden; }
.tt-p { display: none; padding: 26px 30px; height: 100%; }
.tt-p.on { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 30px; align-items: center; animation: ttIn .4s ease both; }
@keyframes ttIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tt-p h3 { font-size: 21px; line-height: 1.25; }
.tt-p p { margin-top: 10px; }
.ba { display: grid; gap: 10px; }
.ba-c { padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ba-c small { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 600; color: #72758a; }
.ba-v { display: block; font: 500 13px/1.45 var(--mono); color: var(--navy); overflow-wrap: anywhere; }
.ba-v.bad { color: #C2410C; }
.ba-v.dead { color: #72758a; text-decoration: line-through; }
.ba-c.aft { background: var(--blue); box-shadow: 0 16px 26px -20px var(--blue); }
.ba-c.aft small { color: #FFC999; }
.ba-c.aft .ba-v { color: #fff; }
.ba-c.aft .ba-v.dead { color: rgba(255,255,255,.72); }
.ba-a { text-align: center; line-height: 1; font-size: 20px; font-weight: 600; color: var(--orange); }
.tt-p.on .ba-a { animation: baDown 1s .25s ease both; }
.tt-p.on .ba-c.aft { animation: baIn .55s .75s cubic-bezier(.2,1.1,.3,1) both; }
@keyframes baDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes baIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

/* Méthode */
.mth { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: var(--head); }
.mth-l { position: absolute; left: 20px; right: 20px; top: 19px; height: 3px; border-radius: 3px; background: #E8E2D8; overflow: hidden; }
.mth-l i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), var(--orange)); }
.mth-s { position: relative; padding-top: 52px; }
.mth-n { position: absolute; left: 0; top: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #E8E2D8; font-weight: 600; color: #72758a; transition: background .3s, color .3s, box-shadow .3s, transform .3s; }
.mth-s.on .mth-n { background: var(--blue); color: #fff; box-shadow: 0 10px 20px -10px var(--blue); transform: scale(1.06); }
.mth-s h3 { font-size: 18px; }
.mth-s p { margin-top: 6px; font-size: 15px; line-height: 1.55; }

/* Deux modes */
.md2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid); margin-top: var(--head); }
.md-c { padding: 22px 24px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.md-c h3 { font-size: 19px; }
.md-c p { margin: 6px 0 16px; font-size: 15px; line-height: 1.55; }
.fl { display: grid; grid-template-columns: 1fr 44px 1fr 44px 1fr; align-items: center; min-height: 196px; }
.fl-n { display: grid; justify-items: center; gap: 6px; padding: 14px 6px; border-radius: 14px; background: var(--blue-l); text-align: center; }
.fl-n .ic { background: #fff; }
.fl-n.m { background: var(--blue); }
.fl-n.m b { color: #fff; }
.fl-n b { font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--navy); }
.fl-a { position: relative; height: 12px; overflow: hidden; }
.fl-a i { position: absolute; left: 0; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); animation: flw 1.5s linear infinite; }
.fl-a i:nth-child(2) { animation-delay: .5s; }
.fl-a i:nth-child(3) { animation-delay: 1s; }
@keyframes flw { 0% { transform: translateX(-6px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(44px); opacity: 0; } }
.lv { display: grid; gap: 8px; min-height: 196px; align-content: start; }
.lv-f { position: relative; }
.lv-f small { display: block; font-size: 12.5px; color: #72758a; margin-bottom: 2px; }
.lv-i { display: flex; justify-content: space-between; gap: 8px; align-items: center; min-height: 36px; padding: 6px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 14px; font-weight: 500; color: var(--navy); transition: box-shadow .2s; }
.lv-f.act .lv-i { box-shadow: inset 0 0 0 1.5px var(--blue); }
.lv-f.act .lv-i span::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--blue); animation: blink .9s infinite; }
.lv-i em { flex: none; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--blue); }
.lv-i em.warn { color: #C2410C; }
.lv-s { display: none; margin-top: 4px; border-radius: 10px; background: #fff; box-shadow: 0 16px 28px -18px rgba(0,1,63,.55), inset 0 0 0 1px var(--line); overflow: hidden; font-size: 13.5px; }
.lv-s.on { display: block; animation: ttIn .25s ease both; }
.lv-s div { padding: 6px 12px; }
.lv-s div.on { background: var(--blue-l); color: var(--blue); font-weight: 500; }

/* Rapport */
.rp { padding: 20px 24px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 26px 50px -36px rgba(0,1,63,.5); }
.rp-h { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; margin-bottom: 12px; }
.rp-h b { font-size: 17px; font-weight: 600; color: var(--navy); }
.rp-h span { font-size: 13px; color: #72758a; }
.rp-r { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 7px 0; font-size: 14.5px; color: var(--navy); }
.rp-r b { font-weight: 600; font-variant-numeric: tabular-nums; }
.rp-r i { grid-column: 1 / -1; display: block; height: 6px; width: 0; border-radius: 3px; background: var(--blue-2); transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.rp-r.t { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); font-weight: 600; }
.rp-r.t i { background: var(--orange); }

/* FAQ */
.faq { max-width: 900px; margin: var(--head) auto 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; padding: 15px 34px 15px 0; font-weight: 600; font-size: 16px; color: var(--navy); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 7px; font-size: 22px; font-weight: 400; color: var(--blue); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 0 16px; font-size: 15.5px; }

/* Suite */
.nx { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid); margin-top: var(--head); }
.nx-c { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: center; padding: 18px 20px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.nx-c .ic { grid-row: 1 / 3; }
.nx-c b { color: var(--navy); font-weight: 600; line-height: 1.3; }
.nx-c span:last-child { font-size: 14px; line-height: 1.35; }
.nx-c:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--blue); }
.pj .ctas { margin-top: 18px; }

/* Accueil : entrée du formulaire */
.fe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(18px, 3vw, 40px); align-items: center; }
.fe-s { display: grid; gap: 10px; margin-top: 18px; }
.fe-s li { display: flex; gap: 10px; align-items: center; font-weight: 500; color: var(--navy); }
.fe-s i { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-l); color: var(--blue); font-style: normal; font-size: 13px; font-weight: 600; }
.fe-c { padding: 24px; border-radius: 20px; background: #fff; box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--line), 0 30px 54px -40px rgba(0,1,63,.6); }
.fe-h { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 13.5px; font-weight: 600; color: var(--blue); }
.fe-b { height: 6px; margin: 8px 0 12px; border-radius: 3px; background: var(--blue-l); overflow: hidden; }
.fe-b i { display: block; width: 25%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--blue), var(--orange)); }
.fe-c h3 { font-size: 20px; margin-bottom: 10px; }
.fe-o { display: flex; gap: 12px; align-items: center; padding: 13px 15px; margin-bottom: 9px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 500; line-height: 1.3; color: var(--navy); text-decoration: none; transition: transform .18s, box-shadow .18s, background .18s; }
.fe-o::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--blue-2); background: #fff; transition: box-shadow .18s; }
.fe-o:hover { transform: translateX(3px); background: var(--blue-l); box-shadow: inset 0 0 0 1.5px var(--blue); }
.fe-o:hover::before { box-shadow: inset 0 0 0 6px var(--blue); }
.fe-c .btn { width: 100%; margin-top: 6px; }

/* Formulaire */
.sf-hero { padding: 4px 0 8px; }
.sf-h1 { font-size: clamp(28px, 3vw, 40px); line-height: 1.2; letter-spacing: -.012em; }
.sf-lead { margin-top: 4px; font-size: 16.5px; }
.sf-sec { padding-bottom: 56px; }
.sf-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; list-style: none; margin-top: 10px; }
.sf-steps li { display: flex; gap: 8px; align-items: center; font-weight: 500; font-size: 14.5px; color: #72758a; transition: color .3s; }
.sf-steps i { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--line); font-style: normal; font-size: 13px; font-weight: 600; transition: background .3s, color .3s, box-shadow .3s; }
.sf-steps li.on { color: var(--navy); font-weight: 600; }
.sf-steps li.on i { background: var(--blue); color: #fff; box-shadow: 0 8px 16px -8px var(--blue); }
.sf-steps li.done { color: var(--blue); }
.sf-steps li.done i { background: var(--blue-l); color: var(--blue); box-shadow: none; }
.sf-bar { position: relative; height: 8px; margin: 10px 0 14px; border-radius: 4px; background: var(--blue-l); overflow: hidden; }
.sf-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 4%; border-radius: 4px; background: linear-gradient(90deg, var(--blue), var(--blue-2) 60%, var(--orange)); box-shadow: inset 0 1px 0 rgba(255,255,255,.55); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.sf-g { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.sf-card { position: relative; min-height: 390px; padding: 28px 32px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86)); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--line), 0 30px 54px -42px rgba(0,1,63,.6); overflow: hidden; }
.sf-card::before { content: ""; position: absolute; right: -120px; top: -130px; width: 340px; height: 360px; background: url(../images/pointilles.png) center / contain no-repeat; opacity: .28; pointer-events: none; }
.sf-v { position: relative; animation: sfIn .42s cubic-bezier(.2,.8,.2,1) both; }
.sf-v.back { animation-name: sfBack; }
.sf-v.out { animation: sfOut .2s ease both; }
@keyframes sfIn { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes sfBack { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes sfOut { to { opacity: 0; transform: translateX(-20px); } }
.sf-c { font-size: 13.5px; font-weight: 600; color: var(--orange); }
.sf-v h2 { margin-top: 2px; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.22; }
.sf-v > p { margin-top: 2px; font-size: 15.5px; }
.sf-o { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.sf-o.one { grid-template-columns: 1fr; }
.opt { position: relative; display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); cursor: pointer; animation: optIn .36s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 45ms); transition: box-shadow .16s, background .16s, transform .16s; }
@keyframes optIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.opt:hover { box-shadow: inset 0 0 0 1.5px var(--blue-2); transform: translateY(-1px); }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt .mk { flex: none; width: 22px; height: 22px; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 2px var(--blue-2); border-radius: 50%; color: transparent; font-size: 12px; line-height: 1; transition: background .16s, box-shadow .16s, transform .22s cubic-bezier(.2,1.6,.4,1); }
.opt.m .mk { border-radius: 6px; }
.opt b { display: block; font-weight: 500; line-height: 1.3; color: var(--navy); }
.opt small { display: block; font-size: 13px; line-height: 1.35; color: var(--text); }
.opt input:focus-visible ~ .mk { outline: 2px solid var(--orange); outline-offset: 2px; }
.opt:has(input:checked) { background: var(--blue-l); box-shadow: inset 0 0 0 2px var(--blue); }
.opt input:checked ~ .mk { background: var(--blue); box-shadow: none; color: #fff; transform: scale(1.1); }
.sf-n { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 20px; }
.sf-back { padding: 8px 4px; border: 0; background: none; font: 500 14.5px/1 "Poppins", Arial, sans-serif; color: var(--text); cursor: pointer; }
.sf-back:hover { color: var(--blue); }
.btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; }
.sf-f { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.fd { position: relative; }
.fd.w { grid-column: 1 / -1; }
.fd input, .fd select, .fd textarea { width: 100%; padding: 20px 14px 7px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font: 500 15px/1.3 "Poppins", Arial, sans-serif; color: var(--navy); outline: 0; transition: box-shadow .16s; appearance: none; }
.fd textarea { min-height: 72px; resize: vertical; }
.fd label { position: absolute; left: 14px; top: 14px; font-size: 15px; color: #72758a; pointer-events: none; transition: top .16s, font-size .16s, color .16s; }
.fd input:focus, .fd select:focus, .fd textarea:focus { box-shadow: inset 0 0 0 2px var(--blue); }
.fd.has label, .fd input:focus + label, .fd textarea:focus + label, .fd select:focus + label { top: 5px; font-size: 12px; color: var(--blue); }
.fd.valid::after { content: "✓"; position: absolute; right: 12px; top: 14px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; font-size: 11px; line-height: 1; animation: pop .25s cubic-bezier(.2,1.6,.4,1) both; }
.fd.err input, .fd.err select { box-shadow: inset 0 0 0 2px #C2410C; }
.fd .e { display: none; margin-top: 2px; font-size: 12.5px; color: #C2410C; }
.fd.err .e { display: block; }
@keyframes pop { from { transform: scale(.4); } to { transform: none; } }
.cg { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; cursor: pointer; }
.cg input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blue); }
.cg.err { color: #C2410C; }
.rv-l { margin-top: 12px; border-top: 1px solid var(--line); }
.rv-r { display: grid; grid-template-columns: 170px 1fr auto; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.rv-r span { color: #72758a; }
.rv-r b { font-weight: 500; color: var(--navy); }
.rv-r button { border: 0; background: none; padding: 0; font: 500 13px/1 "Poppins", Arial, sans-serif; color: var(--blue); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.sf-d { display: grid; justify-items: center; align-content: center; min-height: 380px; text-align: center; animation: sfIn .4s ease both; }
.sf-d svg { width: 84px; height: 84px; }
.sf-d circle { fill: none; stroke: var(--blue); stroke-width: 5; stroke-dasharray: 239; stroke-dashoffset: 239; animation: draw .7s .1s ease forwards; transform: rotate(-90deg); transform-origin: center; }
.sf-d path { fill: none; stroke: var(--orange); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw .4s .7s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.sf-d h2 { margin-top: 10px; font-size: 26px; }
.sf-d p { margin: 4px 0 14px; max-width: 30em; }
.sf-sum { position: sticky; top: calc(var(--hh) + 8px); padding: 18px 20px; border-radius: 20px; background: var(--glass); -webkit-backdrop-filter: var(--glass-b); backdrop-filter: var(--glass-b); box-shadow: var(--glass-s); }
.sf-sum-h { display: flex; justify-content: space-between; align-items: baseline; }
.sf-sum-h b { font-size: 16.5px; font-weight: 600; color: var(--navy); }
.sf-sum-h span { font-weight: 600; font-size: 14px; color: var(--blue); font-variant-numeric: tabular-nums; }
.sf-sum-b { height: 5px; margin: 6px 0 8px; border-radius: 3px; background: var(--blue-l); overflow: hidden; }
.sf-sum-b i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .5s ease; }
.sf-empty { font-size: 14px; color: #72758a; }
.sf-sum dl { margin: 0; }
.sf-sum dl div { padding: 6px 0; border-top: 1px solid var(--line); animation: sumIn .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes sumIn { from { opacity: 0; transform: translateX(14px); background: var(--blue-l); } to { opacity: 1; transform: none; background: transparent; } }
.sf-sum dt { font-size: 12.5px; color: #72758a; }
.sf-sum dd { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--navy); }
.sf-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.sf-trust li { display: flex; gap: 10px; align-items: center; font-size: 14px; line-height: 1.35; color: var(--navy); }
.sf-trust .ic { width: 32px; height: 32px; }
.sf-trust .ic svg { width: 17px; height: 17px; }

@media (max-width: 900px) {
  .tt { grid-template-columns: 1fr; }
  .tt-l { display: flex; overflow-x: auto; padding-bottom: 4px; }
  .tt-b { flex: none; }
  .tt-p.on { grid-template-columns: 1fr; padding: 16px; }
  .mth { grid-template-columns: 1fr; gap: 10px; }
  .mth-l { display: none; }
  .mth-s { padding: 0 0 0 52px; min-height: 44px; }
  .md2, .nx, .fe { grid-template-columns: 1fr; }
  .fl { min-height: 150px; grid-template-columns: 1fr 28px 1fr 28px 1fr; }
  @keyframes flw { 0% { transform: translateX(-6px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(28px); opacity: 0; } }
  .sf-steps span { display: none; }
  .sf-steps li.on span { display: inline; }
  .sf-steps { grid-template-columns: auto auto auto auto; justify-content: start; gap: 8px 10px; }
  .sf-g { grid-template-columns: 1fr; }
  .sf-card { padding: 16px; min-height: 0; }
  .sf-sum { position: static; }
  .sf-o, .sf-f { grid-template-columns: 1fr; }
  .rv-r { grid-template-columns: 1fr auto; }
  .rv-r span { grid-column: 1 / -1; }
  .sf-trust { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-v, .sf-v.back, .opt, .sf-sum dl div, .tt-p.on, .tt-p.on .ba-a, .tt-p.on .ba-c.aft, .fl-a i { animation: none; }
  .sf-d circle, .sf-d path { animation: none; stroke-dashoffset: 0; }
}

/* Page Enrichissement : la fiche se remplit depuis les sources */
.two.en2 { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
.eng { position: relative; display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 12px; align-items: stretch; }
.eng-l { display: flex; flex-direction: column; gap: 6px; }
.eng-h { font-size: 13px; font-weight: 600; color: #72758a; }
.eng-ss { display: grid; gap: 6px; flex: 1; align-content: center; }
.eng-s { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 500; color: var(--navy); transition: background .2s, color .2s, transform .2s; }
.eng-s .ic { width: 28px; height: 28px; border-radius: 8px; }
.eng-s .ic svg { width: 16px; height: 16px; }
.eng-s.on { background: var(--blue); color: #fff; transform: translateX(4px); }
.eng-s.on .ic { background: #fff; }
.ef { position: relative; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 26px 46px -38px rgba(0,1,63,.6); transition: opacity .3s, transform .3s; }
.ef.sw { opacity: 0; transform: translateX(14px); }
.ef-h { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.ef-h > b { font-size: 17px; font-weight: 600; color: var(--navy); }
.ef-h small { display: block; font-size: 12.5px; font-weight: 400; color: #72758a; }
.fly { position: absolute; z-index: 5; padding: 4px 10px; border-radius: 999px; background: var(--orange); color: var(--navy); font-size: 12.5px; font-weight: 600; white-space: nowrap; pointer-events: none; box-shadow: 0 10px 18px -10px rgba(0,1,63,.6); }

/* Segmentation */
.seg { padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 26px 46px -38px rgba(0,1,63,.6); }
.seg-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.seg-h b { font-size: 16.5px; font-weight: 600; color: var(--navy); }
.seg-h span { font-size: 13px; color: #72758a; }
.seg-b { position: relative; height: 210px; margin-top: 8px; overflow: hidden; }
.seg-b i { position: absolute; left: 0; top: 0; width: 13px; height: 13px; border-radius: 50%; background: #C9CDDC; will-change: transform; transition: background .4s; }
.seg-b.on i.a { background: var(--blue); }
.seg-b.on i.b { background: var(--orange); }
.seg-b.on i.c { background: var(--navy); }
.seg-l { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.seg-l.on { opacity: 1; transform: none; }
.seg-l div { padding: 8px 10px; border-radius: 12px; background: var(--blue-l); font-size: 13px; line-height: 1.35; }
.seg-l div:nth-child(2) { background: var(--orange-l); }
.seg-l div:nth-child(3) { background: #ECECF4; }
.seg-l b { display: block; font-size: 14.5px; font-weight: 600; color: var(--navy); }

/* Enrichissement par API */
.lv-a { margin-top: 2px; }
.lv-a small { display: block; font-size: 12.5px; color: #72758a; margin-bottom: 4px; }
.lv-c { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; }
.lv-c span { padding: 5px 12px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 13.5px; font-weight: 600; opacity: 0; transform: scale(.7); transition: opacity .25s, transform .3s cubic-bezier(.2,1.6,.4,1); }
.lv-c span.on { opacity: 1; transform: none; }

/* Mention RGPD */
.rg { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--blue-l); font-size: 14.5px; line-height: 1.5; }
.rg .ic { background: #fff; }
.rg b { display: block; font-weight: 600; color: var(--navy); }

@media (max-width: 900px) {
  .two.en2 { grid-template-columns: 1fr; }
  .eng { grid-template-columns: 1fr; }
  .eng-ss { grid-template-columns: repeat(2, 1fr); }
  .seg-b { height: 180px; }
  .seg-l { grid-template-columns: 1fr; }
}
.ef.done .card-f b { background: var(--orange); color: var(--navy); }
.f span { overflow-wrap: anywhere; }

/* Page Bases de données : ciblage interactif */
.cib { padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 26px 46px -38px rgba(0,1,63,.6); }
.cib-t { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--blue-l); }
.cib-t button { padding: 7px 16px; border: 0; border-radius: 999px; background: none; font: 600 14.5px/1 "Poppins", Arial, sans-serif; color: var(--navy); cursor: pointer; transition: background .2s, color .2s; }
.cib-t button.on { background: var(--blue); color: #fff; }
.cib-g { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; margin-top: 14px; }
.cib-f { display: grid; gap: 6px; align-content: start; }
.cib-b { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font: 500 14.5px/1.25 "Poppins", Arial, sans-serif; color: var(--navy); text-align: left; cursor: pointer; transition: background .16s, box-shadow .16s, transform .16s; }
.cib-b::before { content: "✓"; flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--blue-2); color: transparent; font-size: 11px; line-height: 1; transition: background .16s, box-shadow .16s; }
.cib-b:hover { transform: translateX(2px); box-shadow: inset 0 0 0 1.5px var(--blue-2); }
.cib-b.on { background: var(--blue-l); box-shadow: inset 0 0 0 2px var(--blue); }
.cib-b.on::before { background: var(--blue); box-shadow: none; color: #fff; }
.cib-r { display: flex; flex-direction: column; min-width: 0; border-radius: 14px; background: var(--cream); overflow: hidden; }
.cib-d { position: relative; flex: 1; min-height: 262px; }
.cib-d i { position: absolute; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--blue-2); transition: transform .65s cubic-bezier(.3,.8,.2,1), opacity .4s, background .3s; }
.cib-d i.off { opacity: .1; background: #9aa0b8; }
.cib-o { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 8px 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); border-radius: 0 0 14px 14px; }
.cib-o b { font-weight: 600; color: var(--navy); }
.cib-o span { font-size: 12.5px; color: #72758a; }

/* Deux bases */
.bb { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid); margin-top: var(--head); }
.bb-c { padding: var(--card); border-radius: 18px; background: var(--blue-l); }
.bb-c.n { background: var(--orange-l); }
.bb-h { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.bb-h .ic { background: #fff; }
.bb-h h3 { font-size: 19px; line-height: 1.25; }
.bb-h span:not(.ic) { display: block; font-size: 14px; line-height: 1.3; }
.bb-c.n .ticks li::before { background: var(--orange); color: var(--navy); }
.bb .ticks { margin-top: 0; }
.bb .ticks li { font-size: 15px; line-height: 1.45; padding-top: 4px; padding-bottom: 4px; }

/* Atouts */
.adv { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid); margin-top: var(--head); }
.adv-c { padding: 18px 20px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: transform .2s, box-shadow .2s; }
.adv-c:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--blue-2), 0 20px 34px -28px rgba(22,58,188,.65); }
.adv-c b { display: block; font-size: 16.5px; font-weight: 600; color: var(--navy); }
.adv-c span { display: block; font-size: 14.5px; line-height: 1.45; }

/* Sélection vers les canaux */
.hub { --r: 142px; position: relative; height: 320px; }
.hub-c { position: absolute; left: 50%; top: 50%; z-index: 2; width: 118px; height: 118px; margin: -59px 0 0 -59px; display: grid; place-items: center; padding: 8px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 600; font-size: 15px; line-height: 1.2; text-align: center; box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 22px 36px -20px var(--blue); }
.hub-p { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(calc(var(--a) * 51.43deg - 90deg)); }
.hub-p i { position: absolute; left: 0; top: -1px; width: var(--r); height: 2px; background: #E2DCD0; overflow: hidden; }
.hub-p i::after { content: ""; position: absolute; left: 0; top: 0; width: 26px; height: 2px; background: var(--orange); animation: hubGo 2.4s linear infinite; animation-delay: calc(var(--a) * -.34s); }
@keyframes hubGo { from { transform: translateX(40px); } to { transform: translateX(var(--r)); } }
.hub-p b { position: absolute; left: var(--r); top: 0; padding: 6px 13px; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.7)); -webkit-backdrop-filter: var(--glass-b); backdrop-filter: var(--glass-b); box-shadow: var(--glass-s); color: var(--navy); font-size: 13.5px; font-weight: 600; white-space: nowrap; transform: translate(-50%, -50%) rotate(calc(90deg - var(--a) * 51.43deg)); }

@media (max-width: 900px) {
  .cib-g { grid-template-columns: 1fr; }
  .cib-f { grid-template-columns: 1fr 1fr; }
  .cib-d { min-height: 220px; }
  .bb, .adv { grid-template-columns: 1fr; }
  .hub { --r: 118px; height: 290px; }
  .hub-c { width: 96px; height: 96px; margin: -48px 0 0 -48px; font-size: 13.5px; }
  .hub-p b { font-size: 12.5px; padding: 5px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-p i::after { animation: none; }
}

/* Page Audit : diagnostic animé */
.dg { padding: 18px 22px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 26px 46px -38px rgba(0,1,63,.6); }
.dg-h { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.dg-h b { font-size: 17px; font-weight: 600; color: var(--navy); }
.dg-h span { font-size: 13px; color: #72758a; }
.dg-g { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 22px; align-items: center; margin-top: 14px; }
.dg-r { position: relative; width: 170px; height: 170px; }
.dg-r svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dg-r circle { fill: none; stroke-width: 9; }
.dg-r .t { stroke: var(--blue-l); }
.dg-r .v { stroke: var(--blue); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset .12s linear; }
.dg-r > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dg-r b { font-size: 26px; font-weight: 600; line-height: 1.1; color: var(--navy); font-variant-numeric: tabular-nums; }
.dg-r span { font-size: 12.5px; color: #72758a; }
.dg-l { display: grid; gap: 5px; }
.dg-b { display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; font-size: 14.5px; color: var(--navy); opacity: .38; transition: opacity .3s; }
.dg-b.on { opacity: 1; }
.dg-b b { font-weight: 600; font-variant-numeric: tabular-nums; }
.dg-b i { grid-column: 1 / -1; display: block; height: 7px; border-radius: 4px; background: var(--blue-l); position: relative; overflow: hidden; }
.dg-b i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); border-radius: 4px; background: linear-gradient(90deg, var(--blue-2), var(--orange)); transition: width .7s cubic-bezier(.2,.8,.2,1); }
.dg-f { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--blue-l); font-size: 14.5px; font-weight: 600; color: var(--blue); transition: background .3s, color .3s; }
.dg-f.ok-f { background: var(--orange); color: var(--navy); }

/* Du constat à l'action */
.ca { margin-top: var(--head); }
.ca-h, .ca-r { display: grid; grid-template-columns: 1fr 44px 1fr 44px 1fr; align-items: center; }
.ca-h { padding-bottom: 4px; font-size: 14px; font-weight: 600; color: #72758a; text-align: center; }
.ca-r { margin-bottom: 8px; opacity: 0; transform: translateX(-16px); transition: opacity .45s, transform .45s cubic-bezier(.2,.8,.2,1); }
.ca.in .ca-r { opacity: 1; transform: none; }
.ca.in .ca-r:nth-child(3) { transition-delay: .2s; }
.ca.in .ca-r:nth-child(4) { transition-delay: .4s; }
.ca.in .ca-r:nth-child(5) { transition-delay: .6s; }
.ca-c { display: block; padding: 14px 16px; border-radius: 13px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); text-align: center; font-weight: 500; line-height: 1.3; color: var(--navy); text-decoration: none; }
.ca-c.m { background: var(--blue); color: #fff; box-shadow: 0 14px 24px -18px var(--blue); font-weight: 600; transition: transform .18s; }
.ca-c.m:hover { transform: translateY(-2px); }

/* Bandeau */
.bnd { position: relative; overflow: hidden; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: var(--head); padding: 18px 28px; border-radius: 18px; background: var(--blue); color: #fff; }
.bnd::after { content: ""; position: absolute; right: 200px; top: -90px; width: 260px; height: 280px; background: url(../images/pointilles.png) center / contain no-repeat; opacity: .3; pointer-events: none; }
.bnd > * { position: relative; z-index: 1; }
.bnd b { display: block; font-size: 20px; font-weight: 600; line-height: 1.25; }
.bnd span { font-size: 15px; color: rgba(255,255,255,.92); }

@media (max-width: 900px) {
  .dg-g { grid-template-columns: 1fr; justify-items: center; }
  .dg-l { width: 100%; }
  .dg-r { width: 140px; height: 140px; }
  .ca-h { display: none; }
  .ca-r { grid-template-columns: 1fr; gap: 4px; margin-bottom: 14px; }
  .ca-r .fl-a { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ca-r { opacity: 1; transform: none; transition: none; }
}

/* Page Traitement de la donnée */
.hero-v.wide { width: min(100%, 560px); }
.hero-v.wide img { mix-blend-mode: multiply; }
.hero-v.wide .c1 { left: 0; top: 8%; }
.hero-v.wide .c2 { right: 0; top: 20%; }
.hero-v.wide .c4 { right: 6%; bottom: 8%; }
.mg-all { display: block; margin-top: 6px; padding: 9px 12px; border-radius: 12px; background: var(--blue-l); color: var(--blue); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: background .18s, color .18s; }
.mg-all:hover { background: var(--blue); color: #fff; }

/* Parcours de la donnée */
.jr { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: var(--head); }
.jr-t { position: absolute; left: 12.5%; right: 12.5%; top: 26px; height: 4px; border-radius: 2px; background: #E8E2D8; overflow: hidden; }
.jr-t i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), var(--orange)); transition: width .8s cubic-bezier(.3,.8,.2,1); }
.jr-s { position: relative; display: grid; justify-items: center; gap: 2px; padding: 4px 8px 10px; border-radius: 16px; text-align: center; text-decoration: none; transition: transform .2s; }
.jr-s .ic { width: 52px; height: 52px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #E8E2D8; color: #72758a; transition: background .3s, color .3s, box-shadow .3s, transform .3s; }
.jr-s .ic svg { width: 24px; height: 24px; }
.jr-s b { margin-top: 4px; font-size: 17px; font-weight: 600; color: var(--navy); }
.jr-s small { font-size: 13.5px; line-height: 1.3; color: var(--text); }
.jr-s:hover { transform: translateY(-2px); }
.jr-s.done .ic { background: var(--blue-l); color: var(--blue); box-shadow: none; }
.jr-s.on .ic { background: var(--blue); color: #fff; box-shadow: 0 14px 24px -12px var(--blue); transform: scale(1.08); }
.jr-g { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(18px, 3vw, 40px); align-items: center; margin-top: 14px; }
.jr-x h3 { font-size: 24px; line-height: 1.2; }
.jr-x p { margin: 4px 0 2px; min-height: 4.8em; }
.jr-x .lnk-m { display: inline-block; margin-top: 0; }
.jr-x.sw { animation: ttIn .35s ease both; }
.jf { padding: 16px 20px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 26px 46px -38px rgba(0,1,63,.6); }
.jf-h { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.jf-h b { font-size: 16.5px; font-weight: 600; color: var(--navy); }
.jf-h span { padding: 2px 11px; border-radius: 999px; background: var(--orange-l); color: #B5530A; font-size: 13px; font-weight: 600; transition: background .3s, color .3s; }
.jf-h span.ok-b { background: var(--blue); color: #fff; }
.jf-g { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.jf-f { min-width: 0; padding: 4px 8px; border-radius: 8px; transition: background .4s; }
.jf-f.fl { background: var(--blue-l); }
.jf-f small { display: block; font-size: 12px; color: #72758a; }
.jf-f span { display: block; min-height: 1.45em; font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--navy); overflow-wrap: anywhere; }
.jf-f span.bad { color: #C2410C; text-decoration: underline wavy #F0A77C; text-underline-offset: 3px; }
.jf-f span.none { color: transparent; background: linear-gradient(#EEF0F6, #EEF0F6) left center / 58% 10px no-repeat; }
.jf-n { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; max-height: 0; margin-top: 0; overflow: hidden; opacity: 0; font-size: 14px; font-weight: 500; color: var(--navy); transition: max-height .4s, opacity .4s, margin-top .4s; }
.jf-n.on { max-height: 60px; margin-top: 8px; opacity: 1; }
.jf-n div { display: flex; }
.jf-n i { width: 30px; height: 30px; display: grid; place-items: center; margin-left: -6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2px #fff; color: #fff; font-style: normal; font-size: 13px; font-weight: 600; }
.jf-n i:last-child { background: var(--orange); color: var(--navy); }

/* Symptômes */
.sym { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid); margin-top: var(--head); }
.sy { position: relative; display: block; padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s; }
.sy b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.3; color: var(--navy); transition: color .2s; }
.sy span { display: block; margin-top: 3px; font-size: 14px; font-weight: 500; color: var(--blue); transition: color .2s; }
.sy span::after { content: " →"; }
.sy:hover { transform: translateY(-3px); background: var(--blue); box-shadow: 0 20px 34px -24px var(--blue); }
.sy:hover b { color: #fff; }
.sy:hover span { color: #FFC999; }

/* Comparatif */
.cmp { max-width: 1040px; margin: var(--head) auto 0; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.cmp-r { display: grid; grid-template-columns: .8fr 1.1fr 1.1fr; border-top: 1px solid var(--line); }
.cmp-r:first-child { border-top: 0; }
.cmp-r > * { margin: 0; padding: 13px 18px; line-height: 1.4; }
.cmp-r span { font-weight: 600; color: var(--navy); }
.cmp-r.h b { font-size: 17px; font-weight: 600; color: #fff; background: var(--blue); }
.cmp-r.h b:last-child { background: var(--navy); }
.cmp-r p { font-size: 15px; border-left: 1px solid var(--line); }

.inc { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

@media (max-width: 900px) {
  .hero-v.wide { width: 100%; }
  .jr { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
  .jr-s { padding: 2px; }
  .jr-s .ic { width: 42px; height: 42px; }
  .jr-t { top: 21px; }
  .jr-s b { font-size: 13px; }
  .jr-s small { display: none; }
  .jr-g { grid-template-columns: 1fr; }
  .jr-x p { min-height: 0; }
  .jf-g { grid-template-columns: 1fr; gap: 2px; }
  .sym { grid-template-columns: 1fr 1fr; }
  .cmp-r { grid-template-columns: 1fr 1fr; }
  .cmp-r > span { grid-column: 1 / -1; padding-bottom: 0; }
  .cmp-r.h > span { display: none; }
  .cmp-r p { border-left: 0; }
  .inc { grid-template-columns: 1fr; }
}

/* Pages canal : formats en scène */
.fmt { --ph-h: 400px; --ph-w: 214px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr) minmax(0, .8fr); gap: clamp(12px, 2vw, 28px); align-items: center; margin-top: var(--head); padding: 20px clamp(16px, 2.2vw, 30px); border-radius: 22px; }
.t-w { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.fmt .p-t h3 { font-size: 24px; }
.fmt .p-t p { margin-top: 2px; font-size: 15.5px; }
.fmt .ticks { margin-top: 12px; gap: 6px; }
.fmt .ticks li { font-size: 14.5px; line-height: 1.45; }
.fmt .p-t small { margin-top: 8px; }
.fmt .p-d { height: auto; }
.lp-v { padding: 26px 12px; border-radius: 10px; background: var(--blue); color: #fff; font-size: 20px; line-height: 1.15; font-weight: 600; }
.lp-p { margin: 10px 0; font-size: 13.5px; }

/* Suivi en direct */
.dash { padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 26px 46px -38px rgba(0,1,63,.6); }
.dash-h { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.dash-h b { font-size: 17px; font-weight: 600; color: var(--navy); }
.dash-h span { font-size: 13px; color: #72758a; }
.dash-k { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.dash-k div { padding: 8px 12px; border-radius: 12px; background: var(--blue-l); }
.dash-k div:last-child { background: var(--orange-l); }
.dash-k small { display: block; font-size: 12.5px; color: var(--text); }
.dash-k b { font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--navy); font-variant-numeric: tabular-nums; }
.dash-g { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; margin-top: 14px; }
.dash-g small { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 500; color: var(--navy); }
.dash-b { display: flex; align-items: flex-end; gap: 4px; height: 118px; border-bottom: 2px solid var(--line); }
.dash-b i { flex: 1; height: var(--h, 0%); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--blue-2), var(--blue)); transition: height .7s cubic-bezier(.2,.8,.2,1); }
.dash-b i:nth-child(4) { background: linear-gradient(180deg, #FFA45C, var(--orange)); }
.dash-z { display: grid; gap: 7px; }
.dash-z div { font-size: 13.5px; color: var(--navy); }
.dash-z span { display: block; line-height: 1.2; }
.dash-z i { display: block; height: 8px; margin-top: 2px; width: var(--w, 0%); border-radius: 4px; background: var(--blue-2); transition: width .9s cubic-bezier(.2,.8,.2,1); }

/* Zone autour d'un point de vente */
.zn { position: relative; height: 300px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.zn i { position: absolute; width: 9px; height: 9px; margin: -4px 0 0 -4px; border-radius: 50%; background: #CDD2E2; transition: background .35s, transform .35s; }
.zn i.in { background: var(--blue); transform: scale(1.35); }
.zn-r { position: absolute; left: 50%; top: 50%; width: 250px; height: 250px; margin: -125px 0 0 -125px; border-radius: 50%; background: rgba(22,58,188,.06); box-shadow: inset 0 0 0 1.5px rgba(22,58,188,.3); animation: znP 3.6s ease-out infinite; }
.zn-r.b { animation-delay: 1.8s; }
@keyframes znP { from { transform: scale(.1); opacity: 1; } to { transform: scale(1); opacity: 0; } }
.zn-p { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); padding: 6px 13px; border-radius: 999px; background: var(--orange); color: var(--navy); font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 12px 20px -12px var(--orange); }

@media (max-width: 900px) {
  .fmt { grid-template-columns: 1fr; --ph-h: 380px; --ph-w: 204px; }
  .dash-g { grid-template-columns: 1fr; }
  .zn { height: 250px; }
}
@media (prefers-reduced-motion: reduce) {
  .zn-r { animation: none; opacity: .5; }
}

/* Page RCS */
.vs { --ph-h: 340px; --ph-w: 188px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; justify-items: center; }
.vs-c { display: grid; justify-items: center; gap: 6px; }
.vs-c > b { font-size: 16px; font-weight: 600; color: var(--navy); }
.vs-a { font-size: 26px; font-weight: 600; color: var(--orange); animation: vsA 1.6s ease-in-out infinite; }
@keyframes vsA { 50% { transform: translateX(6px); } }
.bub { max-width: 92%; padding: 9px 11px; border-radius: 14px 14px 14px 3px; background: var(--blue-l); font-size: 12.5px; line-height: 1.4; }
.rc.one { width: 100%; }
.rc.one u + u { margin-top: -5px; }
.mph { --ph-h: 320px; --ph-w: 180px; display: grid; place-items: center; }
.mph .rc-t { opacity: 1; }
.mph .rc-t.au { animation: rcAuto 7s cubic-bezier(.7,0,.2,1) infinite; }
@keyframes rcAuto { 0%, 26% { transform: none; } 33%, 59% { transform: translateX(-78%); } 66%, 92% { transform: translateX(-156%); } 100% { transform: none; } }
.mb-s { display: grid; gap: 5px; margin-top: 8px; }
.mb-s span { padding: 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--blue); color: var(--blue); text-align: center; font-size: 12.5px; font-weight: 600; }
.tt-p.on .mb-s span { animation: optIn .35s ease both; }
.tt-p.on .mb-s span:nth-child(2) { animation-delay: .15s; }
.tt-p.on .mb-s span:nth-child(3) { animation-delay: .3s; }
.rc > .map { position: relative; background: #DDE5FB linear-gradient(115deg, transparent 46%, #fff 46%, #fff 50%, transparent 50%), #DDE5FB; }
.rc > .map::before { content: ""; position: absolute; left: 0; right: 0; top: 56%; height: 5px; background: #fff; transform: rotate(-8deg); }
.rc > .map i { position: absolute; left: 50%; top: 42%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50% 50% 50% 0; background: var(--orange); transform: rotate(-45deg); box-shadow: 0 0 0 5px rgba(255,122,0,.2); animation: pinP 1.6s ease-in-out infinite; }
@keyframes pinP { 50% { box-shadow: 0 0 0 10px rgba(255,122,0,.08); } }
.cv { display: flex; flex-direction: column; gap: 6px; }
.cv .bub.me { align-self: flex-end; border-radius: 14px 14px 3px 14px; background: var(--blue); color: #fff; }
.tt-p.on .cv .bub { animation: optIn .35s ease both; }
.tt-p.on .cv .bub:nth-child(2) { animation-delay: .9s; }
.tt-p.on .cv .bub:nth-child(3) { animation-delay: 1.8s; }

@media (max-width: 900px) {
  .vs { --ph-h: 300px; --ph-w: 150px; gap: 4px; }
  .vs .bub { font-size: 11.5px; }
  .vs .rc p, .vs .rc u { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .vs-a, .mph .rc-t.au, .rc > .map i, .tt-p.on .cv .bub, .tt-p.on .mb-s span { animation: none; }
}

/* Page E-mail : anatomie d'un e-mail */
.an2 { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px; margin-top: var(--head); }
.an2-l { display: grid; gap: 6px; align-content: center; }
.an2-b { position: relative; padding: 10px 14px; border: 0; border-radius: 13px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font: 400 14.5px/1.35 "Poppins", Arial, sans-serif; color: var(--text); text-align: left; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s, transform .2s; }
.an2-b b { display: block; font-size: 16px; font-weight: 600; color: var(--navy); transition: color .2s; }
.an2-b:hover { box-shadow: inset 0 0 0 1.5px var(--blue-2); }
.an2-b.on { background: var(--blue); color: rgba(255,255,255,.92); box-shadow: 0 14px 24px -16px var(--blue); transform: translateX(4px); }
.an2-b.on b { color: #fff; }
.an2-r { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 12px; border-radius: 18px; background: var(--cream); }
.an2-t { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; font-weight: 600; color: var(--navy); }
.an2-t span { padding: 5px 13px; border-radius: 999px; transition: background .25s, color .25s; }
.an2-t span.on { background: var(--blue); color: #fff; }
.ml { width: 100%; max-width: 520px; padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 22px 40px -32px rgba(0,1,63,.7); transition: max-width .55s cubic-bezier(.7,0,.2,1); }
.ml.m { max-width: 250px; }
.ml-p { border-radius: 10px; outline: 2px solid transparent; outline-offset: 1px; transition: outline-color .25s, box-shadow .25s; }
.ml-p.hl { outline-color: var(--orange); box-shadow: 0 0 0 6px rgba(255,122,0,.14); }
.ml-o { padding: 7px 9px; font-size: 13px; line-height: 1.3; color: var(--navy); }
.ml-o b { display: block; font-weight: 600; }
.ml-v { display: grid; align-items: end; min-height: 104px; margin-top: 6px; padding: 12px; background: var(--blue); color: #fff; font-size: 20px; line-height: 1.15; font-weight: 600; }
.ml-t { margin-top: 6px; padding: 7px 9px; font-size: 13.5px; line-height: 1.45; }
.ml-c { margin-top: 6px; padding: 7px 9px; }
.ml-c span { display: inline-block; padding: 8px 18px; border-radius: 999px; background: var(--orange); color: var(--navy); font-weight: 600; font-size: 14px; }
.ml-f { margin-top: 6px; padding: 6px 9px; font-size: 12px; line-height: 1.35; color: #72758a; }

/* Personnalisation */
.pz { display: grid; gap: 10px; padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 26px 46px -38px rgba(0,1,63,.6); }
.pz-s { display: flex; flex-wrap: wrap; gap: 6px; }
.pz-s span { padding: 5px 13px; border-radius: 999px; background: var(--blue-l); color: var(--navy); font-size: 14px; font-weight: 600; transition: background .3s, color .3s; }
.pz-s span.on { background: var(--blue); color: #fff; }
.pz-m { padding: 10px; border-radius: 14px; background: var(--cream); }
.pz-v { height: 92px; border-radius: 10px; background: var(--blue); transition: background .4s; }
.pz-m p { margin: 8px 0; min-height: 3em; font-size: 15px; line-height: 1.45; }
.pz-m p b { font-weight: 600; color: var(--navy); }
.pz-m.sw p, .pz-m.sw .mw-b { animation: ttIn .35s ease both; }
.pz small { font-size: 12.5px; color: #72758a; }

@media (max-width: 900px) {
  .an2 { grid-template-columns: 1fr; }
  .an2-l { order: 2; }
  .ml.m { max-width: 220px; }
}

/* Page Message vocal */
.hero-v img.round { border-radius: 20px; }
.sat { position: relative; height: 290px; border-radius: 18px; background: var(--cream); overflow: hidden; }
.sat-l { display: grid; gap: 6px; padding: 10px 16px; animation: tk 16s linear infinite; }
.sat-l div { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; color: #9095A8; }
.sat-l i { width: 8px; height: 8px; border-radius: 50%; background: #D5D8E4; }
.sat-c { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); display: flex; gap: 12px; align-items: center; width: min(86%, 340px); padding: 13px 16px; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.72)); -webkit-backdrop-filter: blur(14px) saturate(1.8); backdrop-filter: blur(14px) saturate(1.8); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1.5px var(--orange), 0 26px 40px -22px rgba(0,1,63,.6); }
.sat-c > div { flex: 1; min-width: 0; }
.sat-c b { display: block; font-size: 15.5px; font-weight: 600; color: var(--navy); }
.vz-w { display: flex; align-items: center; gap: 3px; height: 34px; }
.vz-w i { flex: 1; min-width: 2px; height: var(--h, 40%); border-radius: 2px; background: var(--blue); animation: wv .7s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.vz { display: grid; gap: 8px; padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 26px 46px -38px rgba(0,1,63,.6); }
.vz-c { padding: 12px 14px; border-radius: 14px; background: var(--blue-l); }
.vz-c p { margin-top: 8px; min-height: 4.4em; font-size: 15.5px; line-height: 1.45; color: var(--navy); }
.vz-c.sw p { animation: ttIn .35s ease both; }
.vz small { font-size: 12.5px; color: #72758a; }
@media (prefers-reduced-motion: reduce) {
  .sat-l, .vz-w i { animation: none; }
}

/* Page Courrier */
.flps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: var(--head); }
.flp { display: grid; gap: 8px; text-align: center; perspective: 900px; }
.flp > span { font-weight: 500; font-size: 15px; line-height: 1.35; color: var(--navy); }
.flp-i { position: relative; height: 210px; transform-style: preserve-3d; animation: flpA 6s cubic-bezier(.7,0,.2,1) infinite; animation-delay: var(--d, 0s); }
.flp:hover .flp-i { animation-play-state: paused; }
@keyframes flpA { 0%, 38% { transform: rotateY(0); } 50%, 88% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
.flp-f, .flp-b { position: absolute; inset: 0; display: grid; align-content: center; padding: 18px 22px; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 22px 36px -26px rgba(0,1,63,.7); }
.flp-f { background: var(--blue); color: #fff; font-size: 26px; line-height: 1.12; font-weight: 600; }
.flp.o .flp-f { background: var(--orange); color: var(--navy); }
.flp.n .flp-f { background: var(--navy); }
.flp-b { background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 22px 36px -26px rgba(0,1,63,.7); transform: rotateY(180deg); font-size: 15.5px; line-height: 1.45; text-align: left; }
.flp-b b { display: block; font-weight: 600; color: var(--navy); }

/* Plis non distribués */
.ev { display: grid; gap: 10px; padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 26px 46px -38px rgba(0,1,63,.6); }
.ev-r small { display: block; margin-bottom: 4px; font-size: 13.5px; font-weight: 600; color: #C2410C; }
.ev-r.g small { color: var(--blue); }
.ev-t { position: relative; height: 92px; border-radius: 12px; background: var(--cream); overflow: hidden; }
.ev-t b { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 8px 10px; border-radius: 10px; background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.15; max-width: 92px; }
.ev-t svg { position: absolute; left: 0; top: 34px; width: 32px; height: 24px; color: var(--blue); opacity: 0; animation: evGo 3.2s linear infinite; animation-delay: var(--d); }
.ev-t svg.bk { color: #C2410C; animation-name: evBk; }
@keyframes evGo { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 70% { left: calc(100% - 130px); opacity: 1; } 78%, 100% { left: calc(100% - 100px); opacity: 0; } }
@keyframes evBk { 0% { left: 0; opacity: 0; transform: none; } 10% { opacity: 1; } 55% { left: calc(100% - 150px); opacity: 1; transform: none; } 62% { transform: translateY(-14px) rotate(-12deg); } 100% { left: 0; opacity: 0; transform: translateY(-14px) rotate(-12deg); } }

@media (max-width: 900px) {
  .flps { grid-template-columns: 1fr; }
  .flp-i { height: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  .flp-i, .ev-t svg { animation: none; opacity: 1; }
  .ev-t svg { position: static; }
}

/* Page Télémarketing */
.fl.f4 { grid-template-columns: 1fr 44px 1fr 44px 1fr 44px 1fr; min-height: 0; max-width: 980px; margin: var(--head) auto 0; }
#methode .rg { margin-top: 14px; }
.cl { border-radius: 18px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 26px 46px -38px rgba(0,1,63,.6); }
.cl-h { display: flex; gap: 8px; align-items: center; padding: 10px 14px; background: var(--navy); color: #fff; font-size: 14px; }
.cl-h b { font-weight: 600; }
.cl-t { margin-left: auto; font-family: var(--mono); font-size: 13px; }
.cl-d { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); animation: blink 1.2s infinite; }
.cl-g { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: 12px; padding: 12px 14px; min-height: 296px; }
.cl-m { display: flex; flex-direction: column; gap: 6px; }
.cl-m div { max-width: 92%; padding: 7px 11px; border-radius: 13px 13px 13px 3px; background: var(--blue-l); font-size: 13.5px; line-height: 1.38; color: var(--navy); animation: optIn .3s ease both; }
.cl-m div.c { align-self: flex-end; border-radius: 13px 13px 3px 13px; background: var(--blue); color: #fff; }
.cl-f { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--cream); }
.cl-f > b { font-size: 14.5px; font-weight: 600; color: var(--navy); }
.cl-f div small { display: block; font-size: 12px; color: #72758a; }
.cl-f div span { display: block; min-height: 1.45em; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--navy); }
.cl-f div span:empty { background: linear-gradient(#E9E4DA, #E9E4DA) left center / 70% 9px no-repeat; }
.cl-f div span.on { animation: ttIn .3s ease both; }
.cl-f em { margin-top: auto; padding: 4px 11px; border-radius: 999px; background: var(--orange); color: var(--navy); font-style: normal; font-size: 13px; font-weight: 600; text-align: center; opacity: 0; transform: scale(.85); transition: opacity .3s, transform .35s cubic-bezier(.2,1.6,.4,1); }
.cl-f em.on { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .fl.f4 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .fl.f4 .fl-a { display: none; }
  .cl-g { grid-template-columns: 1fr; }
  .cl-m { min-height: 260px; }
}

/* Page Services complémentaires : plan média */
.gt { padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 26px 46px -38px rgba(0,1,63,.6); }
.gt-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.gt-h b { font-size: 17px; font-weight: 600; color: var(--navy); }
.gt-h span { font-size: 13px; color: #72758a; }
.gt-w, .gt-r { display: grid; grid-template-columns: 92px 1fr; align-items: center; }
.gt-w { grid-template-columns: 92px repeat(6, 1fr); font-size: 12.5px; color: #72758a; text-align: center; padding-bottom: 4px; }
.gt-r { padding: 5px 0; border-top: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--navy); }
.gt-r > div { position: relative; height: 22px; border-radius: 6px; background: repeating-linear-gradient(90deg, #F4F5FA 0, #F4F5FA calc(16.66% - 1px), #fff calc(16.66% - 1px), #fff 16.66%); }
.gt-r i { position: absolute; top: 3px; bottom: 3px; left: calc(var(--l) * 1%); width: 0; border-radius: 5px; background: var(--blue); transition: width .9s cubic-bezier(.2,.8,.2,1); }
.gt-r i.o { background: var(--orange); }
.gt.in .gt-r i { width: calc(var(--w) * 1%); }
.gt.in .gt-r:nth-of-type(4) i { transition-delay: .2s; }
.gt.in .gt-r:nth-of-type(5) i { transition-delay: .4s; }
.gt.in .gt-r:nth-of-type(6) i { transition-delay: .6s; }
.gt.in .gt-r:nth-of-type(7) i { transition-delay: .8s; }

/* Annonces en ligne */
.tt-w.w { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ad { border-radius: 14px; background: var(--cream); padding: 12px; font-size: 14px; }
.ad-s { padding: 8px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; color: var(--navy); }
.tt-p.on .ad-s .ty { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; max-width: 100%; animation: tyW 1.2s steps(22) both; }
@keyframes tyW { from { width: 0; } to { width: 21ch; } }
.ad-r { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: #fff; line-height: 1.35; }
.ad-r small { display: block; font-size: 12px; color: #72758a; }
.ad-r b { display: block; color: var(--blue); font-weight: 600; font-size: 15.5px; }
.tt-p.on .ad-r:not(.g) { animation: baIn .5s 1.2s cubic-bezier(.2,1.1,.3,1) both; }
.ad-r.g { display: grid; gap: 6px; }
.ad-r.g i { display: block; height: 8px; border-radius: 4px; background: #E9EAF1; }
.ad-r.g i:last-child { width: 70%; }
.ad.m { padding: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); max-width: 300px; justify-self: center; width: 100%; }
.ad-p { display: grid; grid-template-columns: 30px 1fr; gap: 0 8px; align-items: center; }
.ad-p i { grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 50%; background: var(--blue); }
.ad-p b { font-size: 14px; font-weight: 600; color: var(--navy); line-height: 1.2; }
.ad-p small { font-size: 12px; color: #72758a; line-height: 1.2; }
.ad-i { display: grid; align-items: end; height: 140px; margin-top: 8px; padding: 12px; border-radius: 10px; background: var(--orange); color: var(--navy); font-size: 21px; line-height: 1.1; font-weight: 600; }
.ad-b { display: flex; justify-content: flex-end; margin-top: 8px; }
.ad-b span { padding: 6px 13px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 13px; font-weight: 600; }
.ad-l { display: grid; gap: 6px; }
.ad-l i { display: block; height: 9px; border-radius: 4px; background: #E9E4DA; }
.ad-l i:last-child { width: 62%; }
.ad-bn { display: grid; place-items: center; height: 110px; margin: 10px 0; border-radius: 10px; background: var(--blue); color: #fff; font-weight: 600; font-size: 18px; }
.tt-p.on .ad-bn { animation: baIn .55s .3s cubic-bezier(.2,1.1,.3,1) both; }
.ad.p small { display: block; margin-bottom: 8px; font-weight: 600; color: var(--navy); font-size: 14px; }
.ad-a { margin-bottom: 8px; font-size: 13.5px; color: var(--navy); }
.ad-a i { display: block; height: 8px; margin-top: 2px; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--blue-2), var(--orange)); }
.tt-p.on .ad-a i { animation: adW 1s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes adW { to { width: var(--w); } }

/* Création */
.flps.q { grid-template-columns: repeat(4, 1fr); }
.flps.q .flp-f { font-size: 21px; }
.flps.q .flp-i { height: 180px; }

@media (max-width: 900px) {
  .flps.q { grid-template-columns: 1fr 1fr; }
  .flps.q .flp-f { font-size: 17px; padding: 12px; }
  .flps.q .flp-b { padding: 10px 12px; font-size: 13.5px; }
  .gt-w, .gt-r { grid-template-columns: 74px 1fr; }
  .gt-w { grid-template-columns: 74px repeat(6, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .gt-r i { transition: none; width: calc(var(--w) * 1%); }
  .tt-p.on .ad-a i { animation: none; width: var(--w); }
}

/* Page Campagnes : choix du canal */
.pk { margin-top: var(--head); }
.pk-o { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pk-o button { padding: 9px 16px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font: 500 14.5px/1.2 "Poppins", Arial, sans-serif; color: var(--navy); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.pk-o button:hover { box-shadow: inset 0 0 0 1.5px var(--blue-2); }
.pk-o button.on { background: var(--blue); color: #fff; box-shadow: 0 12px 20px -14px var(--blue); }
.pk-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.pk-c { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: center; padding: 18px 20px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: opacity .3s, transform .3s, box-shadow .3s, background .3s; }
.pk-c .ic { grid-row: 1 / 3; transition: background .3s, color .3s; }
.pk-c b { color: var(--navy); font-weight: 600; font-size: 16.5px; line-height: 1.25; }
.pk-c small { font-size: 13.5px; line-height: 1.35; }
.pk-c.dim { opacity: .38; }
.pk-c.lit { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--blue), 0 18px 30px -24px var(--blue); }
.pk-c.lit .ic { background: var(--blue); color: #fff; }
.pk-c:hover { opacity: 1; }

/* Comparatif des canaux */
.cmp.c3 { margin-top: var(--head); }
.cmp-r > a { padding: 13px 18px; font-weight: 600; color: var(--blue); text-decoration: none; }
.cmp-r > a::after { content: " →"; }
.cmp-r > a:hover { color: var(--orange); }
.cmp.c3 .cmp-r.h b:last-child { background: var(--navy); }

@media (max-width: 900px) {
  .pk-g { grid-template-columns: 1fr; }
  .cmp-r > a { grid-column: 1 / -1; padding-bottom: 0; }
}

/* Page Secteurs */
.lg.sect { padding: 10px 0; }
.sc { padding: 18px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.sc small { display: block; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; color: #72758a; }
.sc-l { display: grid; gap: 6px; }
.sc-l a { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--blue-l); color: var(--navy); font-size: 14.5px; font-weight: 500; text-decoration: none; transition: background .18s, color .18s, transform .18s; }
.sc-l a::after { content: "→"; color: var(--blue); }
.sc-l a:hover { background: var(--blue); color: #fff; transform: translateX(3px); }
.sc-l a:hover::after { color: #fff; }
.tt-p.on .sc-l a { animation: optIn .32s ease both; }
.tt-p.on .sc-l a:nth-child(2) { animation-delay: .08s; }
.tt-p.on .sc-l a:nth-child(3) { animation-delay: .16s; }
.tt-p.on .sc-l a:nth-child(4) { animation-delay: .24s; }
.ma { display: grid; grid-template-columns: 200px 1fr auto; gap: 22px; align-items: center; padding: 16px 22px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ma .pl { display: grid; place-items: center; height: 58px; }
.ma .pl img { max-height: 46px; }
.ma b { display: block; font-size: 18px; font-weight: 600; color: var(--navy); }
.ma span:not(.pl) { font-size: 15px; }
@media (max-width: 900px) {
  .ma { grid-template-columns: 1fr; justify-items: start; gap: 10px; }
  .ma .pl { justify-items: start; }
}

/* Secteurs : onglets au-dessus, sans vide dans le panneau */
.tt.tops { grid-template-columns: 1fr; }
.tt.tops .tt-l { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; overflow: visible; padding-bottom: 0; }
.tt.tops .tt-b { min-height: 50px; }
.tt.tops .tt-p.on { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 32px; padding: 24px 30px; }

/* Secteurs : canaux adaptés à chaque secteur */
.mx { max-width: 1040px; margin: var(--head) auto 0; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.mx-r { display: grid; grid-template-columns: 210px repeat(6, minmax(0, 1fr)); align-items: center; min-height: 46px; padding: 0 12px; border-top: 1px solid var(--line); color: var(--navy); text-decoration: none; transition: background .18s; }
.mx-r.h { min-height: 42px; border-top: 0; background: var(--navy); color: #fff; }
.mx-r.h b { font-size: 13.5px; font-weight: 600; text-align: center; opacity: .72; transition: opacity .2s, color .2s; }
.mx-r.h b.lit { opacity: 1; color: #FFB066; }
.mx-r:not(.h):hover { background: var(--blue-l); }
.mx-r > span { font-size: 15px; font-weight: 500; }
.mx-r > span::after { content: " →"; color: var(--blue); opacity: 0; transition: opacity .18s; }
.mx-r:hover > span::after { opacity: 1; }
.mx-r i { justify-self: center; width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.mx-r i.y { width: 24px; height: 24px; display: grid; place-items: center; background: var(--blue-l); color: var(--blue); font-style: normal; font-size: 13px; font-weight: 700; transform: scale(.2); opacity: 0; transition: background .22s, color .22s, box-shadow .22s; }
.mx-r i.y::before { content: "✓"; }
.mx.in .mx-r i.y { animation: mxIn .34s var(--d, 0s) cubic-bezier(.2, 1.4, .4, 1) forwards; }
.mx-r i.y.lit { background: var(--orange); color: var(--navy); box-shadow: 0 0 0 5px var(--orange-l); }
@keyframes mxIn { to { transform: none; opacity: 1; } }
.mx-n { margin-top: 10px; text-align: center; font-size: 14px; color: #72758a; }
@media (max-width: 760px) {
  .tt.tops .tt-l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tt.tops .tt-b { flex: initial; min-height: 46px; padding: 6px 10px; font-size: 13.5px; }
  .tt.tops .tt-b span { display: none; }
  .tt.tops .tt-p.on { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .mx-r.h { display: none; }
  .mx-r { display: flex; flex-wrap: wrap; gap: 6px; padding: 11px 12px; }
  .mx-r:nth-child(2) { border-top: 0; }
  .mx-r > span { flex: 0 0 100%; }
  .mx-r i { display: none; }
  .mx-r i.y { display: inline-flex; align-items: center; width: auto; height: auto; padding: 4px 9px; border-radius: 99px; font-size: 13px; font-weight: 500; }
  .mx-r i.y::before { content: attr(data-c); }
}
@media (prefers-reduced-motion: reduce) {
  .mx-r i.y { transform: none; opacity: 1; }
  .mx.in .mx-r i.y { animation: none; }
}

/* À propos : qui sommes-nous */
.two.qu { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.nums.col { grid-template-columns: 1fr; gap: 16px; padding: 22px 28px; }

/* À propos : de la donnée au résultat */
.ch { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr); margin-top: var(--head); }
.ch-c { display: flex; flex-direction: column; gap: 3px; padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-decoration: none; transition: transform .2s, box-shadow .2s; }
a.ch-c:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--blue-2), 0 20px 34px -28px rgba(22,58,188,.65); }
.ch-c small { font-size: 13.5px; font-weight: 600; color: #72758a; }
.ch-c b { font-size: 19px; line-height: 1.25; font-weight: 600; color: var(--navy); }
.ch-c p { margin: 0; font-size: 15px; line-height: 1.5; }
.ch-c em { margin-top: 8px; font-style: normal; font-size: 14.5px; font-weight: 600; color: var(--blue); }
.ch-c:not(a) em { font-size: 13.5px; font-weight: 400; color: #72758a; }
.ch-v { height: 112px; margin-top: auto; padding: 10px 12px; border-radius: 12px; background: var(--cream); overflow: hidden; }
.ch-c p + .ch-v { margin-top: 10px; }
.ch-rows { display: grid; gap: 11px; align-content: center; }
.ch-rows i { position: relative; display: block; width: var(--w); height: 10px; border-radius: 99px; background: #F7DCC2; animation: chRow 5s var(--d) ease-in-out infinite; }
.ch-rows i::after { content: "✓"; position: absolute; left: calc(100% + 6px); top: -6px; font: 700 14px/22px "Poppins", Arial, sans-serif; font-style: normal; color: var(--blue); animation: chTick 5s var(--d) ease-in-out infinite; }
@keyframes chRow { 0%, 12% { background: #F7DCC2; } 28%, 88% { background: var(--blue); } 100% { background: #F7DCC2; } }
@keyframes chTick { 0%, 20% { opacity: 0; transform: scale(.4); } 32%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.ch-can { display: flex; flex-wrap: wrap; gap: 6px; align-content: center; }
.ch-can span { padding: 4px 11px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; font-weight: 500; color: var(--navy); animation: chCan 6s var(--d) linear infinite; }
@keyframes chCan { 0%, 13% { background: var(--blue); color: #fff; box-shadow: 0 10px 18px -12px var(--blue); } 19%, 100% { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1px var(--line); } }
.ch-bars { display: flex; align-items: flex-end; gap: 7px; padding-bottom: 0; }
.ch-bars i { flex: 1; height: var(--h); border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--blue-2), var(--blue)); transform-origin: bottom; animation: chBar 5s var(--d) ease-in-out infinite; }
.ch-bars i:last-child { background: linear-gradient(180deg, #FFA24D, var(--orange)); }
@keyframes chBar { 0% { transform: scaleY(.14); } 30%, 86% { transform: none; } 100% { transform: scaleY(.14); } }
.ch-f { position: relative; align-self: center; height: 2px; background: var(--line); }
.ch-f i { position: absolute; left: 0; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); opacity: 0; animation: chGo 2.4s linear infinite; }
.ch-f i:nth-child(2) { animation-delay: .8s; }
.ch-f i:nth-child(3) { animation-delay: 1.6s; }
@keyframes chGo { 0% { left: 0; opacity: 0; } 15%, 80% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
@keyframes chGoV { 0% { top: 0; opacity: 0; } 15%, 80% { opacity: 1; } 100% { top: calc(100% - 10px); opacity: 0; } }

/* À propos : nos marques */
.eco { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); align-items: center; margin-top: var(--head); }
.eco .bc { grid-template-columns: 124px 1fr; }
.eco-c { position: relative; display: grid; place-items: center; height: 112px; }
.eco-c::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--line); }
.eco-c span { position: relative; z-index: 2; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 7px var(--blue-l), 0 18px 30px -18px var(--blue); }
.eco-c img { width: 60px; }
.eco-c i { position: absolute; z-index: 1; left: 50%; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--orange); animation: ecoR 2.2s linear infinite; }
.eco-c i:last-child { animation-name: ecoL; }
@keyframes ecoR { from { left: 50%; opacity: 1; } to { left: calc(100% - 10px); opacity: .1; } }
@keyframes ecoL { from { left: 50%; opacity: 1; } to { left: 0; opacity: .1; } }

.ctc { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 16px; font-size: 15px; }
.ctc a { color: var(--blue); font-weight: 600; }

@media (max-width: 900px) {
  .two.qu { grid-template-columns: 1fr; }
  .ch { grid-template-columns: 1fr; }
  .ch-f { justify-self: center; width: 2px; height: 30px; }
  .ch-f i { left: -4px; top: 0; animation-name: chGoV; }
  .eco { grid-template-columns: 1fr; gap: 10px; }
  .eco-c { order: -1; height: 100px; }
  .eco-c::before, .eco-c i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-rows i, .ch-rows i::after, .ch-can span, .ch-bars i, .ch-f i, .eco-c i { animation: none; }
  .ch-rows i { background: var(--blue); }
  .ch-f i { opacity: 0; }
  .eco-c i { display: none; }
}

/* Pages légales */
.lh { position: relative; overflow: hidden; padding: 20px 0 24px; background: var(--cream); }
.lh::after { content: ""; position: absolute; right: -110px; top: -130px; width: 400px; height: 430px; background: url(../images/pointilles.png) center / contain no-repeat; opacity: .45; pointer-events: none; }
.lh .wrap { position: relative; z-index: 1; }
.lh p.l { max-width: 44em; margin-top: 10px; font-size: 17px; }
.lgl { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.toc { position: sticky; top: calc(var(--hh) + 12px); display: grid; gap: 2px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.toc b { padding: 2px 10px 6px; font-size: 13.5px; font-weight: 600; color: #72758a; }
.toc a { padding: 6px 10px; border-radius: 9px; color: var(--navy); font-size: 14.5px; line-height: 1.3; text-decoration: none; transition: background .18s, color .18s; }
.toc a:hover { background: var(--blue-l); }
.toc a.now { background: var(--blue); color: #fff; }
.lgc { max-width: 800px; }
.lgc section { padding: 20px 0 22px; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--hh) + 10px); }
.lgc section:first-child { padding-top: 0; }
.lgc h2 { margin-bottom: 8px; font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--navy); }
.lgc p { margin: 8px 0 0; }
.lgc .ticks { margin-top: 10px; }
.lgd { margin: 4px 0 0; }
.lgd div { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 12px; padding: 8px 0; }
.lgd div + div { border-top: 1px dashed var(--line); }
.lgd dt { color: #72758a; }
.lgd dd { margin: 0; color: var(--navy); font-weight: 500; overflow-wrap: anywhere; }
.lgt { margin-top: 10px; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.lgt > div { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1fr); gap: 14px; padding: 11px 14px; font-size: 15px; }
.lgt > div + div { border-top: 1px solid var(--line); }
.lgt > .h { background: var(--navy); color: #fff; font-size: 14px; font-weight: 600; }
.maj { padding-top: 14px; font-size: 14px; color: #72758a; }

/* Page d'erreur */
.e404 { padding-top: clamp(14px, 2.4vw, 30px); padding-bottom: clamp(16px, 2.4vw, 30px); }
.e404 .crumb { font-weight: 600; color: #C2410C; }

@media (max-width: 900px) {
  .lgl { grid-template-columns: 1fr; }
  .toc { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toc b { grid-column: 1 / -1; }
  .toc a.now { background: none; color: var(--navy); }
}
@media (max-width: 640px) {
  .lgd div { grid-template-columns: 1fr; gap: 0; }
  .lgt > .h { display: none; }
  .lgt > div { grid-template-columns: 1fr; gap: 2px; }
  .lgt > div span:first-child { font-weight: 600; color: var(--navy); }
}

/* Chiffres : quatre repères */
.nums.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nums.col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nums.col b { font-size: clamp(22px, 2.2vw, 26px); }

/* Pied de page : coordonnées */
.ft-c { margin-top: 10px; }
.ft-c a, .ft-c span { display: block; padding: 1px 0; }

/* Témoignages */
.tm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid); margin-top: var(--head); }
.tm-c { display: flex; flex-direction: column; margin: 0; padding: 20px 22px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); animation: tmOn 12s var(--d, 0s) linear infinite; }
.tm-c blockquote { flex: 1; margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--navy); }
.tm-c figcaption { display: grid; grid-template-columns: 38px 1fr; gap: 0 10px; align-items: center; margin-top: 14px; font-size: 14px; line-height: 1.35; color: #5F6276; }
.tm-c figcaption i { grid-row: 1 / 3; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; font-style: normal; font-weight: 600; }
.tm-c figcaption b { font-size: 15px; font-weight: 600; color: var(--navy); }
@keyframes tmOn { 0%, 30% { box-shadow: inset 0 0 0 1.5px var(--blue-2), 0 20px 34px -28px rgba(22,58,188,.65); } 36%, 100% { box-shadow: inset 0 0 0 1px var(--line); } }

/* Cas clients */
.cc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid); margin-top: var(--head); }
.cc-c { display: flex; flex-direction: column; padding: var(--card); border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.cc-c small { font-size: 13.5px; font-weight: 600; color: #72758a; }
.cc-c h3 { margin-top: 2px; font-size: 19px; line-height: 1.3; font-weight: 600; color: var(--navy); }
.cc-c p { flex: 1; margin: 8px 0 0; font-size: 15px; line-height: 1.55; }
.cc-f { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.cc-f li { position: relative; display: grid; place-items: center; min-height: 46px; padding: 6px 8px; border-radius: 10px; background: var(--cream); color: var(--navy); font-size: 14px; font-weight: 500; line-height: 1.25; text-align: center; animation: ccOn 4.8s var(--d) linear infinite; }
.cc-f li + li::before { content: "→"; position: absolute; left: -11px; top: 50%; z-index: 1; width: 14px; margin-top: -11px; font-size: 14px; line-height: 22px; color: var(--blue); }
@keyframes ccOn { 0%, 30% { background: var(--blue); color: #fff; } 36%, 100% { background: var(--cream); color: var(--navy); } }
.cc-t { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.cc-t span { padding: 3px 10px; border-radius: 99px; background: var(--blue-l); color: var(--blue); font-size: 13px; font-weight: 500; }

@media (max-width: 900px) {
  .nums.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm, .cc { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-c, .cc-f li { animation: none; }
}

/* Les décors qui débordent restent dans la page, sans gêner les éléments fixés au défilement */
main { overflow-x: clip; }

/* Formulaire : champ piège pour les robots et message d'erreur d'envoi */
.sf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sf-err { margin: 10px 0 0; font-size: 14.5px; color: #C2410C; }