/* 8. PAGES ------------------------------------------------------------- */
main { display: block; min-height: 60vh; }
main:focus { outline: none; }

/* --- ACCUEIL ---------------------------------------------------------- */
.hero { position: relative; min-height: calc(100svh - var(--hdr) - 36px); display: flex; align-items: center; padding-block: 40px 64px; overflow: hidden; }
.hero-g { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero h1 .ln:has(.pas-word) { padding-bottom: .3em; margin-bottom: -.12em; }
.hero h1 .ln > span { display: inline-block; }
.js .hero h1 .ln > span { transform: translateY(105%); transition: transform var(--t3) var(--ease); }
.hero.is-in h1 .ln > span { transform: none; }
.hero.is-in h1 .ln:nth-child(2) > span { transition-delay: .08s; }
.hero.is-in h1 .ln:nth-child(3) > span { transition-delay: .16s; }
.hero .pas-word { position: relative; display: inline-block; color: var(--action); font-weight: 800; }
.hero .pas-word svg { position: absolute; left: -4%; top: 100%; margin-top: -.12em; width: 108%; height: auto; overflow: visible; }
.js .hero .pas-word svg path { stroke-dasharray: 130; stroke-dashoffset: 130; transition: stroke-dashoffset var(--t3) var(--ease) var(--t2); }
.hero.is-in .pas-word svg path { stroke-dashoffset: 0; }
.hero-lead { margin-top: 28px; }
.who { margin-top: 36px; }
.who .lb { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tx2); margin-bottom: 12px; }
.who .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.who-cta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; min-height: 52px; }
.who-cta .btn { transition: background var(--t1), transform var(--t2) var(--ease); }

/* façade : quatre fenêtres, quatre pôles */
.facade { position: relative; aspect-ratio: 5 / 6.3; max-height: 80vh; margin-inline: auto; width: 100%; max-width: 540px; background: var(--ocre); border-radius: 6px 40px 6px 6px; padding: 9% 11% 13%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr 1fr; gap: 15% 16%; box-shadow: var(--shadow-2); transform-style: preserve-3d; isolation: isolate; transition: transform var(--t2) var(--ease); }
.facade::before { /* enduit : grain très léger */ content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: .5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .35 0 0 0 0 .1 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.facade .cornice { grid-column: 1 / -1; height: 14px; margin: 0 -11% -4%; border-top: 6px solid #D8963A; border-bottom: 2px solid #D8963A; }
.facade .sign { position: absolute; left: 50%; top: 3.2%; transform: translateX(-50%); font-size: clamp(10px, 1vw, 12px); letter-spacing: .4em; font-weight: 800; color: #5C3A0E; white-space: nowrap; }
.win { position: relative; display: block; text-decoration: none; color: var(--pin); perspective: 700px; }
.win:hover, .win:focus-visible { text-decoration: none; }
.win .frame { position: absolute; inset: 0; border-radius: 4px 12px 4px 4px; background: var(--pin); box-shadow: 0 0 0 6px #F3C982, 0 0 0 8px #D8963A; overflow: hidden; }
.win .scene { position: absolute; inset: 0; transition: transform var(--t3) var(--ease); }
.win .scene svg { width: 100%; height: 100%; }
.win .lbl { position: absolute; left: -6%; right: -6%; top: calc(100% + 18px); z-index: 3; display: flex; align-items: baseline; gap: 8px; color: var(--pin); line-height: 1.1; }
.win .lbl small { font-size: clamp(10px, .85vw, 12px); font-weight: 800; letter-spacing: .1em; color: #6B4613; }
.win .lbl strong { font-size: clamp(14px, 1.35vw, 19px); font-weight: 800; letter-spacing: -.015em; white-space: nowrap; }
.win .lbl strong::after { content: ""; display: block; height: 3px; margin-top: 4px; background: var(--action); transform: scaleX(0); transform-origin: left; transition: transform var(--t2) var(--ease); }
.win:hover .lbl strong::after, .win:focus-visible .lbl strong::after, .win.open .lbl strong::after { transform: none; }
.win .sill { position: absolute; left: -10%; right: -10%; bottom: -14px; height: 9px; background: #D8963A; border-radius: 2px; z-index: 4; }
.win .rail { position: absolute; left: -4%; right: -4%; bottom: -4px; height: 24%; z-index: 4; pointer-events: none; }
.win .rail svg { width: 100%; height: 100%; }
/* volets persiennés */
.vol { position: absolute; top: -2px; bottom: -2px; width: 51%; z-index: 5; background: var(--vert) repeating-linear-gradient(180deg, transparent 0 7px, rgba(0, 0, 0, .22) 7px 8px, rgba(255, 255, 255, .08) 8px 9px); box-shadow: inset 0 0 0 3px var(--vert-d); transition: transform var(--t3) var(--ease); }
.vol.l { left: -1%; transform-origin: 0 50%; border-radius: 3px 0 0 3px; }
.vol.r { right: -1%; transform-origin: 100% 50%; border-radius: 0 10px 3px 0; }
.vol::after { content: ""; position: absolute; top: 48%; width: 4px; height: 12px; background: #0B3328; border-radius: 2px; }
.vol.l::after { right: 6px; } .vol.r::after { left: 6px; }
.win .vol.l { transform: rotateY(var(--ol, -58deg)); }
.win .vol.r { transform: rotateY(var(--or, 58deg)); }
.js .facade.closed .win .vol.l { --ol: 0deg; } .js .facade.closed .win .vol.r { --or: 0deg; }
.win:hover .vol.l, .win:focus-visible .vol.l, .win.open .vol.l { --ol: -108deg; }
.win:hover .vol.r, .win:focus-visible .vol.r, .win.open .vol.r { --or: 108deg; }
.win:hover .scene, .win.open .scene { transform: scale(1.07); }
.facade.focus .win:not(.open) .vol.l { --ol: -24deg; } .facade.focus .win:not(.open) .vol.r { --or: 24deg; }
.facade.focus .win:not(.open):hover .vol.l { --ol: -108deg; } .facade.focus .win:not(.open):hover .vol.r { --or: 108deg; }
.facade .plant { position: absolute; z-index: 6; bottom: 2%; left: 50%; width: 11%; transform: translateX(-50%); pointer-events: none; }
.facade-cap { margin-top: 18px; text-align: center; font-size: 13px; color: var(--tx2); }

/* bandeau défilant */
.ticker { overflow: hidden; border-block: 1px solid var(--ln); background: var(--creme); }
.ticker-t { display: flex; gap: 0; width: max-content; animation: tick 48s linear infinite; }
.ticker:hover .ticker-t { animation-play-state: paused; }
.ticker-t a { display: inline-flex; align-items: center; gap: 22px; padding: 22px 22px; font-size: clamp(20px, 2.4vw, 30px); font-weight: 300; letter-spacing: -.02em; color: var(--pin); text-decoration: none; white-space: nowrap; }
.ticker-t a:hover { color: var(--action); }
.ticker-t a::after { content: ""; width: 14px; height: 14px; border-radius: 2px 6px 2px 2px; background: var(--orange); }
.ticker-t a.ex::after { background: var(--ocre); }
@keyframes tick { to { transform: translateX(-50%); } }

/* escalier narratif (section collante) */
.stair { position: relative; height: 420vh; }
.stair-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: center; overflow: hidden; transition: background-color var(--t3) ease; }
.stair-g { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 48px; align-items: center; }
.stair-txt { position: relative; min-height: 300px; }
.stair-step { position: absolute; inset: 0 0 auto; opacity: 0; transform: translateY(24px); transition: opacity var(--t2), transform var(--t2) var(--ease); pointer-events: none; }
.stair-step.on { opacity: 1; transform: none; pointer-events: auto; }
.stair-step .n { font-size: clamp(72px, 10vw, 150px); line-height: .8; font-weight: 200; letter-spacing: -.06em; color: var(--mk); font-variant-numeric: tabular-nums; }
.stair-step h3 { margin-top: 18px; }
.stair-step p { margin-top: 14px; max-width: 42ch; }
.stair-art { position: relative; aspect-ratio: 16 / 11; }
.stair-art svg { width: 100%; height: 100%; overflow: visible; }
.stair-art .flight { fill: none; stroke: var(--mk); stroke-width: 10; stroke-linecap: butt; }
.stair-art .ghost { fill: none; stroke: var(--ln); stroke-width: 2; }
.stair-art .lab { font: 800 13px var(--f); letter-spacing: .12em; text-transform: uppercase; fill: var(--tx2); transition: fill var(--t2); }
.stair-art .lab.on { fill: var(--fg); }
.stair-art .dot { fill: var(--bg); stroke: var(--mk); stroke-width: 4; transition: r var(--t2) var(--ease); }
.stair-art .walker { transition: transform var(--t1) linear; }
.stair-prog { position: absolute; left: var(--gut); bottom: 32px; display: flex; gap: 6px; }
.stair-prog i { width: 28px; height: 4px; background: var(--ln); transition: background var(--t2); }
.stair-prog i.on { background: var(--mk); }

/* chiffres */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ln); }
.fact { padding: 32px 24px 8px 0; border-right: 1px solid var(--ln); }
.fact:last-child { border-right: 0; }
.fact + .fact { padding-left: 24px; }
.fact .v { font-size: clamp(56px, 7vw, 110px); line-height: .9; font-weight: 200; letter-spacing: -.05em; color: var(--fg); font-variant-numeric: tabular-nums; }
.fact .v small { font-size: .36em; font-weight: 700; letter-spacing: 0; margin-left: 4px; color: var(--kw); }
.fact p { margin-top: 12px; font-size: 15px; color: var(--tx2); max-width: 24ch; }

/* volets horizontaux (formats) */
.formats { display: flex; gap: 10px; height: clamp(420px, 56vh, 560px); }
.fmt { position: relative; flex: 1; min-width: 0; border-radius: var(--corner-xl); overflow: hidden; background: var(--c); color: #fff; transition: flex var(--t3) var(--ease); cursor: pointer; text-align: left; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; }
.fmt[aria-expanded="true"] { flex: 3.2; }
.fmt[aria-expanded="false"] .t { font-size: clamp(18px, 1.6vw, 22px); white-space: normal; }
.fmt .t { font-size: clamp(22px, 2.4vw, 34px); font-weight: 300; letter-spacing: -.03em; line-height: 1.05; white-space: nowrap; }
.fmt .t b { font-weight: 800; }
.fmt .k { position: absolute; top: 24px; left: 28px; font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--kc, var(--ocre-l)); }
.fmt .desc { max-width: 44ch; font-size: 15.5px; line-height: 1.55; opacity: 0; transform: translateY(12px); transition: opacity var(--t2), transform var(--t2) var(--ease); margin-top: 12px; max-height: 0; }
.fmt[aria-expanded="true"] .desc { opacity: 1; transform: none; transition-delay: .25s; max-height: 300px; }
.fmt .art { position: absolute; right: -6%; top: 10%; width: 60%; opacity: .9; transition: transform var(--t3) var(--ease); }
.fmt[aria-expanded="true"] .art { transform: translateX(-8%) rotate(-3deg); }
@media (max-width: 860px) { .formats { flex-direction: column; height: auto; } .fmt { min-height: 96px; } .fmt[aria-expanded="true"] { min-height: 320px; } .fmt .t { white-space: normal; } .fmt .art { width: 40%; } }

/* rail de produits (accueil) */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 340px); gap: 20px; overflow-x: auto; padding: 8px var(--gut) 24px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--sauge) transparent; cursor: grab; }
.rail > * { scroll-snap-align: start; }
.rail.drag { cursor: grabbing; scroll-snap-type: none; }
.rail.drag a { pointer-events: none; }

/* split entreprises */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 520px; }
.split > div { padding: clamp(40px, 6vw, 88px) var(--gut); }
.svc-mini { display: grid; gap: 2px; margin-top: 32px; }
.svc-mini a { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--ln); color: var(--fg); text-decoration: none; font-size: clamp(18px, 1.6vw, 22px); font-weight: 650; transition: padding var(--t2) var(--ease), color var(--t1); }
.svc-mini a span { font-size: 12px; font-weight: 800; color: var(--kw); letter-spacing: .1em; }
.svc-mini a svg { margin-left: auto; }
.svc-mini a:hover { padding-left: 12px; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* --- CATALOGUE ------------------------------------------------------- */
.cat-hero { padding-block: clamp(48px, 7vw, 96px) 40px; position: relative; overflow: hidden; }
.cat-search { position: relative; margin-top: 32px; max-width: 760px; }
.cat-search .in { min-height: 68px; padding-left: 60px; font-size: 19px; border-radius: 6px 20px 6px 6px; box-shadow: var(--shadow-1); border-color: transparent; }
.cat-search .icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; color: var(--pin); pointer-events: none; }
.cat-search .clr { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
.suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; font-size: 14px; color: var(--tx2); }
.suggest button { font-weight: 700; color: var(--lk); text-decoration: underline; text-underline-offset: 3px; }
.cat-poles { display: flex; gap: 8px; margin-top: 32px; flex-wrap: wrap; }
.cat-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: start; padding-bottom: var(--sec); }
.filters { position: sticky; top: calc(var(--hdr) + 16px); display: grid; gap: 28px; max-height: calc(100vh - var(--hdr) - 32px); overflow: auto; padding-right: 8px; scrollbar-width: thin; }
.filters fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.filters legend { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tx2); margin-bottom: 10px; padding: 0; }
.filters .cb { font-size: 15px; justify-content: space-between; }
.filters .cb span.l { flex: 1; }
.filters .cb .ct { font-size: 12.5px; color: var(--tx2); font-weight: 700; }
.range-l { display: flex; justify-content: space-between; font-size: 13px; color: var(--tx2); font-weight: 700; }
input[type="range"] { width: 100%; accent-color: var(--action); }
.res-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--ln); margin-bottom: 28px; }
.res-bar .count { font-size: 15px; font-weight: 700; color: var(--fg); }
.res-bar .count b { font-size: 28px; font-weight: 300; letter-spacing: -.03em; margin-right: 6px; }
.active-f { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.active-f button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 16px; background: var(--pin); color: #fff; font-size: 13.5px; font-weight: 700; }
.active-f button::after { content: "×"; font-size: 17px; line-height: 1; opacity: .7; }
.results { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.results.list { grid-template-columns: minmax(0, 1fr); }
.results.list .fcard { flex-direction: row; }
.results.list .fcard .top { width: 220px; height: auto; min-height: 150px; flex: none; border-radius: 6px 0 0 6px; }
.results.list .fcard .go { top: 18px; }
.results.list .fcard .body { padding-right: 72px; }
.empty { grid-column: 1 / -1; text-align: center; padding: 64px 16px; }
.empty .pas { width: 220px; margin: 0 auto 24px; }
.filt-btn { display: none; }
.quiz { background: var(--pin); color: #DDF1E7; border-radius: var(--corner-xl); padding: 28px; position: relative; overflow: hidden; }
.quiz h3 { color: #fff; }
.quiz .q { display: none; }
.quiz .q.on { display: block; animation: qIn var(--t2) var(--ease); }
@keyframes qIn { from { opacity: 0; transform: translateX(20px); } }
.quiz .opts { display: grid; gap: 8px; margin-top: 16px; }
.quiz .opts button { text-align: left; padding: 14px 16px; border-radius: var(--r-s); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); color: #fff; font-weight: 650; font-size: 15px; transition: background var(--t1), box-shadow var(--t1); }
.quiz .opts button:hover { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 2px var(--ocre); }
.quiz .qprog { display: flex; gap: 4px; margin-bottom: 18px; }
.quiz .qprog i { flex: 1; height: 4px; background: rgba(255, 255, 255, .18); }
.quiz .qprog i.on { background: var(--ocre); }
@media (max-width: 960px) {
  .cat-layout { grid-template-columns: minmax(0, 1fr); }
  .filters { position: fixed; z-index: 190; left: 0; right: 0; bottom: 0; top: auto; max-height: 82vh; background: var(--creme); padding: 24px var(--gut) 100px; border-radius: 20px 20px 0 0; box-shadow: var(--shadow-2); transform: translateY(105%); transition: transform var(--t2) var(--ease); visibility: hidden; }
  .filters.on { transform: none; visibility: visible; }
  .filters .sheet-h { display: flex !important; }
  .filt-btn { display: inline-flex; }
  .results.list .fcard { flex-direction: column; } .results.list .fcard .top { width: auto; height: 120px; border-radius: 6px 28px 0 0; }
}
.sheet-h { display: none; align-items: center; justify-content: space-between; }
.sheet-f { display: none; }
@media (max-width: 960px) { .sheet-f { display: flex; position: sticky; bottom: -100px; gap: 8px; padding-top: 12px; background: var(--creme); } }

/* --- FICHE FORMATION ------------------------------------------------- */
.fiche-hero { position: relative; overflow: hidden; padding-block: clamp(40px, 6vw, 80px) 0; }
.fiche-hero .g { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.fiche-hero h1 { margin-top: 18px; }
.fiche-hero .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.keyfacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--ln); }
.keyfacts > div { padding: 24px 20px 28px 0; border-right: 1px solid var(--ln); }
.keyfacts > div + div { padding-left: 20px; }
.keyfacts > div:last-child { border-right: 0; }
.keyfacts .v { font-size: clamp(34px, 4vw, 56px); font-weight: 200; letter-spacing: -.04em; line-height: 1; color: var(--fg); }
.keyfacts .v small { font-size: .4em; font-weight: 800; letter-spacing: 0; color: var(--kw); margin-left: 2px; }
.keyfacts .l { font-size: 14px; color: var(--tx2); margin-top: 8px; }
@media (max-width: 760px) { .keyfacts { grid-template-columns: 1fr 1fr; } .keyfacts > div:nth-child(2) { border-right: 0; } .keyfacts > div:nth-child(3) { padding-left: 0; border-top: 1px solid var(--ln); } .keyfacts > div:nth-child(4) { border-top: 1px solid var(--ln); } }
.fiche-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr) 340px; gap: 48px; align-items: start; padding-block: 56px var(--sec); }
.toc { position: sticky; top: calc(var(--hdr) + 24px); display: grid; gap: 2px; }
.toc .eb { margin-bottom: 12px; }
.toc a { position: relative; display: block; padding: 8px 0 8px 18px; font-size: 15px; font-weight: 650; color: var(--tx2); text-decoration: none; transition: color var(--t1); }
.toc a::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 1px; background: var(--bd); transition: width var(--t2) var(--ease), height var(--t2), background var(--t2); transform: translateY(-50%); }
.toc a.on { color: var(--fg); }
.toc a.on::before { width: 10px; height: 4px; background: var(--mk); }
.fiche-main > section { padding-block: 8px 72px; scroll-margin-top: calc(var(--hdr) + 24px); }
.fiche-main h2 { margin-bottom: 24px; }
.aside-card { position: sticky; top: calc(var(--hdr) + 24px); }
.aside-card .panel { box-shadow: var(--shadow-1); }
.aside-card .row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ln); font-size: 15px; }
.aside-card .row span:first-child { color: var(--tx2); }
.aside-card .row b { color: var(--fg); text-align: right; }
@media (max-width: 1180px) { .fiche-layout { grid-template-columns: minmax(0, 1fr) 320px; } .toc { display: none; } }
@media (max-width: 900px) { .fiche-layout { grid-template-columns: minmax(0, 1fr); } .aside-card { position: static; } .fiche-hero .g { grid-template-columns: minmax(0, 1fr); } }

/* composeur de parcours */
.composer { border-radius: var(--corner-xl); padding: clamp(20px, 3vw, 36px); }
.composer .seg { margin-bottom: 28px; }
.timeline { position: relative; display: flex; height: 96px; border-radius: 6px; overflow: hidden; gap: 3px; }
.timeline .blk { position: relative; flex: var(--h) 0 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 10px 12px; color: #fff; transition: flex var(--t3) var(--ease), background var(--t2); overflow: hidden; }
.timeline .blk b { font-size: clamp(18px, 2vw, 26px); font-weight: 300; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.timeline .blk span { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; opacity: .9; overflow: hidden; text-overflow: ellipsis; }
.timeline .blk.off { flex-grow: 0; flex-basis: 0; padding-inline: 0; }
.timeline-scale { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12.5px; color: var(--tx2); font-weight: 700; }
.composer-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.composer-out > div { padding-top: 14px; border-top: 4px solid var(--mk); }
.composer-out b { display: block; color: var(--fg); font-size: 16px; }
.composer-out p { font-size: 14.5px; color: var(--tx2); margin-top: 4px; }
@media (max-width: 700px) { .composer-out { grid-template-columns: minmax(0, 1fr); } .timeline { height: auto; flex-direction: column; } .timeline .blk { flex: none !important; min-height: 56px; } .timeline .blk.off { display: none; } }

/* programme en marches */
.prog { display: grid; gap: 12px; }
.marche { position: relative; border-radius: var(--corner-xl); background: var(--card); border: 1px solid var(--cardb); margin-left: calc(var(--i) * clamp(0px, 3vw, 40px)); transition: box-shadow var(--t2); }
.marche:hover { box-shadow: var(--shadow-1); }
.marche > button { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; text-align: left; padding: 22px 24px; }
.marche .n { width: 56px; height: 56px; border-radius: 4px 14px 4px 4px; background: var(--pin); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; letter-spacing: .06em; line-height: 1.1; text-align: center; }
.marche .mt { display: block; color: var(--fg); font-size: clamp(17px, 1.6vw, 21px); font-weight: 750; line-height: 1.25; }
.marche .hrs { font-size: 13px; color: var(--tx2); font-weight: 700; margin-top: 4px; }
.marche .pm { width: 36px; height: 36px; }
.marche ul { display: grid; gap: 10px; padding: 0 24px 24px 100px; }
.marche li { display: flex; gap: 12px; font-size: 15.5px; }
.marche li::before { content: ""; flex: none; margin-top: 10px; width: 14px; height: 4px; background: var(--mk); }
@media (max-width: 640px) { .marche ul { padding-left: 24px; } .marche > button { grid-template-columns: auto 1fr; } .marche .pm { display: none; } }

.fund { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fund .card { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.fund .card h3 { font-size: 18px; font-weight: 750; }
.fund .card p { font-size: 15px; color: var(--tx2); }
.fund .card .ext { margin-top: auto; padding-top: 8px; font-weight: 750; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.fund .card .ext svg { width: 14px; height: 14px; }
@media (max-width: 640px) { .fund { grid-template-columns: minmax(0, 1fr); } }
.mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom)); background: rgba(251, 247, 237, .94); backdrop-filter: blur(10px); border-top: 1px solid var(--n200); display: none; gap: 8px; transform: translateY(100%); transition: transform var(--t2) var(--ease); }
.mobile-cta.on { transform: none; }
@media (max-width: 900px) { .mobile-cta { display: flex; } .mobile-cta .btn { flex: 1; } }

/* --- ACADÉMIE -------------------------------------------------------- */
.aca-hero { position: relative; overflow: hidden; padding-block: clamp(56px, 8vw, 120px) clamp(56px, 7vw, 96px); }
.aca-hero .g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.screen { position: relative; aspect-ratio: 16 / 11; border-radius: 10px 28px 10px 10px; background: var(--pin-2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), var(--shadow-2); overflow: hidden; }
.screen svg { width: 100%; height: 100%; }
.aca-tabs { position: sticky; top: var(--hdr); z-index: 40; background: rgba(251, 247, 237, .92); backdrop-filter: blur(10px); padding-top: 18px; }
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.pcard { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--corner-xl); border: 1px solid var(--n200); overflow: hidden; transition: transform var(--t2) var(--ease), box-shadow var(--t2); }
.pcard:hover, .pcard:focus-within { box-shadow: var(--shadow-2); transform: translateY(calc(var(--a1) * -1)); }
.pcard .cov { position: relative; aspect-ratio: 16 / 10; background: var(--tone); overflow: hidden; }
.pcard .cov svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform var(--t3) var(--ease); }
.pcard:hover .cov svg { transform: scale(1.05); }
.pcard .cov .demo { position: absolute; left: 12px; top: 12px; }
.pcard .bd { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pcard h3 { font-size: 19px; font-weight: 750; line-height: 1.2; }
.pcard h3 a { color: var(--pin); text-decoration: none; }
.pcard h3 a::after { content: ""; position: absolute; inset: 0; }
.pcard .sub { font-size: 14.5px; color: var(--n600); }
.pcard .meta { display: flex; gap: 14px; font-size: 13px; font-weight: 700; color: var(--n800); margin-top: 4px; }
.pcard .ft { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--n200); }
.price { font-size: 24px; font-weight: 300; letter-spacing: -.03em; color: var(--pin); }
.price small { font-size: 12px; font-weight: 700; color: var(--n600); letter-spacing: 0; margin-left: 4px; }
.add { position: relative; z-index: 2; }
.add.ok { --b: var(--ok); --bh: var(--ok); }
.bundles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.bundle { padding: 32px; border-radius: var(--corner-xl); position: relative; overflow: hidden; }
.bundle ul { display: grid; gap: 8px; margin: 18px 0 24px; }
.bundle li { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--ln); font-size: 15px; }
.bundle .old { text-decoration: line-through; color: var(--tx2); font-size: 15px; margin-right: 8px; }
@media (max-width: 760px) { .bundles { grid-template-columns: minmax(0, 1fr); } .aca-hero .g { grid-template-columns: minmax(0, 1fr); } }
.seats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.seats .out { font-size: clamp(48px, 6vw, 88px); font-weight: 200; letter-spacing: -.05em; color: #fff; line-height: 1; }
@media (max-width: 760px) { .seats { grid-template-columns: minmax(0, 1fr); } }

/* fiche produit */
.prod-g { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; padding-block: 40px var(--sec); }
.buy { position: sticky; top: calc(var(--hdr) + 24px); }
.buy .panel { box-shadow: var(--shadow-1); display: grid; gap: 16px; }
.buy .price { font-size: 48px; }
.buy ul li { display: flex; gap: 10px; font-size: 15px; padding: 4px 0; }
.buy ul li svg { width: 20px; height: 20px; stroke: var(--ok); }
.preview { position: relative; aspect-ratio: 16 / 9; border-radius: 10px 28px 10px 10px; overflow: hidden; background: var(--pin); cursor: pointer; }
.preview svg { width: 100%; height: 100%; }
.preview .play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: var(--action); display: grid; place-items: center; color: #fff; transition: transform var(--t2) var(--ease); box-shadow: 0 0 0 12px rgba(241, 80, 37, .25); }
.preview:hover .play { transform: scale(1.08); }
.lesson { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--ln); font-size: 15px; }
.lesson .i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--bd); flex: none; }
.lesson .i svg { width: 14px; height: 14px; }
.lesson .d { margin-left: auto; font-size: 13px; color: var(--tx2); font-weight: 700; white-space: nowrap; }
@media (max-width: 960px) { .prod-g { grid-template-columns: minmax(0, 1fr); } .buy { position: static; } }

/* panier */
.cart-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--n200); animation: qIn var(--t2) var(--ease); }
.cart-item .th { width: 64px; height: 48px; border-radius: 4px 10px 4px 4px; background: var(--tone); overflow: hidden; }
.cart-item .th svg { width: 100%; height: 100%; }
.cart-item b { display: block; font-size: 15px; color: var(--pin); line-height: 1.25; }
.cart-item small { font-size: 13px; color: var(--n600); }
.cart-item .rm { font-size: 13px; color: var(--err); font-weight: 700; text-decoration: underline; }
.tot { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; padding: 6px 0; }
.tot.big { font-size: 18px; font-weight: 800; color: var(--pin); }
.tot.big span:last-child { font-size: 28px; font-weight: 300; letter-spacing: -.03em; }

/* commande */
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; padding-block: 40px var(--sec); }
.co-step { display: none; }
.co-step.on { display: grid; gap: 20px; animation: qIn var(--t2) var(--ease); }
.paycard { position: relative; aspect-ratio: 1.6; max-width: 360px; border-radius: 14px 32px 14px 14px; padding: 22px; background: linear-gradient(135deg, var(--vert), var(--pin)); color: #fff; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow-2); overflow: hidden; }
.paycard .no { font-size: 20px; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.confirm { text-align: center; padding: 40px 0; }
.confirm .pas { width: 260px; margin: 0 auto 28px; }
@media (max-width: 960px) { .checkout { grid-template-columns: minmax(0, 1fr); } }

/* espace apprenant */
.lms { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: calc(100vh - var(--hdr)); }
.lms-side { background: var(--pin); color: #DDF1E7; padding: 28px 20px; display: flex; flex-direction: column; gap: 4px; }
.lms-side a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 6px; color: #DDF1E7; text-decoration: none; font-weight: 650; font-size: 15px; }
.lms-side a.on, .lms-side a:hover { background: var(--pin-2); color: #fff; }
.lms-side a.on { box-shadow: inset 4px 0 0 var(--ocre); }
.lms-main { padding: clamp(24px, 4vw, 48px); display: grid; gap: 28px; align-content: start; }
.lms-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lms-cards .card { padding: 22px; display: flex; gap: 16px; align-items: center; }
.lms-course { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 18px; }
.lms-course .th { height: 80px; border-radius: 4px 14px 4px 4px; background: var(--tone); overflow: hidden; }
.lms-course .th svg { width: 100%; height: 100%; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 120px; }
.week i { display: block; background: var(--vert); border-radius: 2px 6px 2px 2px; height: var(--h); transform-origin: bottom; animation: grow var(--t3) var(--ease) both; }
.week i:nth-child(odd) { background: var(--sauge); }
@keyframes grow { from { transform: scaleY(0); } }
@media (max-width: 900px) { .lms { grid-template-columns: minmax(0, 1fr); } .lms-side { flex-direction: row; overflow-x: auto; padding: 12px; } .lms-side a { white-space: nowrap; } .lms-cards { grid-template-columns: minmax(0, 1fr); } .lms-course { grid-template-columns: 80px 1fr; } .lms-course .btn { grid-column: 1 / -1; } }

/* --- ENTREPRISES ----------------------------------------------------- */
.b2b-hero { position: relative; overflow: hidden; padding-block: clamp(56px, 8vw, 120px); }
.b2b-hero .g { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.b2b-hero .blocks { position: relative; aspect-ratio: 1; }
.b2b-hero .blocks svg { width: 100%; height: 100%; overflow: visible; }
.diag { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.needs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.needs .chip { min-height: 46px; font-size: 15px; }
.reco { display: grid; gap: 10px; }
.reco a { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; border-radius: var(--corner); background: var(--card); border: 1px solid var(--cardb); text-decoration: none; color: var(--fg); transition: transform var(--t2) var(--ease), box-shadow var(--t2), opacity var(--t2); }
.reco a .sc { font-size: 12px; font-weight: 800; color: var(--tx2); }
.reco a .meter { width: 52px; height: 52px; border-radius: 4px 14px 4px 4px; background: var(--c); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.reco a.dim { opacity: .45; }
.reco a.top { box-shadow: var(--shadow-1); transform: translateX(8px); }
.reco a b { font-size: 17px; }
@media (max-width: 860px) { .diag, .b2b-hero .g { grid-template-columns: minmax(0, 1fr); } }
.svc { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 56px; align-items: start; }
.svc-nav { position: sticky; top: calc(var(--hdr) + 32px); display: grid; gap: 4px; }
.svc-nav button { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; text-align: left; padding: 14px 12px; border-radius: var(--corner); font-weight: 700; color: var(--tx2); transition: background var(--t1), color var(--t1); }
.svc-nav button span { font-size: 13px; font-weight: 800; color: var(--tx2); }
.svc-nav button[aria-selected="true"] { background: var(--card); color: var(--fg); box-shadow: inset 4px 0 0 var(--mk); }
.svc-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; scroll-margin-top: calc(var(--hdr) + 32px); }
.svc-panel + .svc-panel { margin-top: 96px; padding-top: 72px; border-top: 1px solid var(--ln); }
.svc-panel .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.svc-panel .cols h4 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--tx2); font-weight: 800; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 4px solid var(--c); }
.svc-panel .cols li { padding: 8px 0; border-bottom: 1px solid var(--ln); font-size: 15.5px; color: var(--tx); }
.svc-panel .art { aspect-ratio: 21 / 8; border-radius: var(--corner-xl); overflow: hidden; background: var(--c); }
.svc-panel .art svg { width: 100%; height: 100%; }
@media (max-width: 960px) { .svc { grid-template-columns: minmax(0, 1fr); } .svc-nav { position: static; grid-auto-flow: column; overflow-x: auto; } .svc-nav button { white-space: nowrap; } .svc-panel .cols { grid-template-columns: minmax(0, 1fr); } }
/* méthode : défilement horizontal piloté par le défilement vertical */
.method { position: relative; height: 320vh; }
.method-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.method-track { display: flex; gap: 24px; padding-inline: var(--gut); will-change: transform; }
.mstep { flex: none; width: min(420px, 80vw); min-height: 360px; padding: 32px; border-radius: var(--corner-xl); background: var(--card); border: 1px solid var(--cardb); display: flex; flex-direction: column; gap: 14px; position: relative; }
.mstep .n { font-size: 96px; font-weight: 200; line-height: .8; letter-spacing: -.06em; color: var(--mk); }
.mstep h3 { color: var(--fg); }
.mstep .del { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--ln); font-size: 14px; color: var(--tx2); }
.mstep .del b { color: var(--fg); }
.method-line { margin: 40px var(--gut) 0; height: 4px; background: var(--ln); position: relative; }
.method-line i { position: absolute; left: 0; top: 0; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--mk); }
@media (max-width: 760px) { .method { height: auto; } .method-pin { position: static; height: auto; padding-block: 64px; } .method-track { flex-direction: column; transform: none !important; } .mstep { width: auto; min-height: 0; } .method-line { display: none; } }
/* devis multi-étapes */
.quote { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 56px; align-items: start; }
.quote-form { background: var(--creme); color: var(--n800); border-radius: var(--corner-xl); padding: clamp(24px, 3vw, 40px); --bg: var(--creme); --fg: var(--pin); --tx: var(--n800); --tx2: var(--n600); --ln: var(--n200); --bd: var(--n500); --card: #fff; --mk: var(--orange); --act: var(--action); --act-h: var(--action-h); --on-act: #fff; --lk: var(--vert); --hl: var(--rose); --kw: var(--vert); --on-fg: #fff; }
.q-step { display: none; gap: 20px; }
.q-step.on { display: grid; animation: qIn var(--t2) var(--ease); }
.q-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.brief { display: grid; gap: 8px; padding: 18px; background: #fff; border-radius: var(--corner); font-size: 14.5px; }
.brief b { color: var(--pin); }
@media (max-width: 860px) { .quote { grid-template-columns: minmax(0, 1fr); } }

/* --- CANDIDATURE ----------------------------------------------------- */
.apply { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; align-items: start; padding-block: 48px var(--sec); }
.apply .steps { margin-bottom: 40px; }
.apply-aside { position: sticky; top: calc(var(--hdr) + 24px); }
.upload { border: 1.5px dashed var(--bd); border-radius: var(--corner); padding: 28px; text-align: center; font-size: 15px; color: var(--tx2); transition: background var(--t1), border-color var(--t1); }
.upload.drag { background: var(--rose); border-color: var(--action); }
@media (max-width: 960px) { .apply { grid-template-columns: minmax(0, 1fr); } .apply-aside { position: static; } }

/* --- SYSTÈME --------------------------------------------------------- */
.sw { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.sw div { border-radius: var(--corner); min-height: 120px; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; font-size: 13px; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.sys-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; padding-block: 40px; border-top: 1px solid var(--ln); }
@media (max-width: 760px) { .sys-row { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* --- utilitaires de mise en page ------------------------------------- */
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.stack > * + * { margin-top: var(--s, 16px); }
.head-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
@media (max-width: 860px) { .head-g { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.deco { position: absolute; pointer-events: none; }

/* --- RESPONSIVE GLOBAL ----------------------------------------------- */
@media (max-width: 1100px) {
  .nav, .search-btn .t, .search-btn kbd, .hdr-act .btn.cand { display: none; }
  .burger { display: block; }
  .search-btn { width: 44px; padding: 0; justify-content: center; box-shadow: none; }
}
@media (max-width: 960px) {
  .hero-g { grid-template-columns: minmax(0, 1fr); }
  .hero { min-height: 0; padding-top: 24px; }
  .facade { max-width: 440px; }
  .stair-g { grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: center; }
  .stair-art { order: -1; aspect-ratio: 16 / 9; }
  .stair-txt { min-height: 260px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .fact:nth-child(2) { border-right: 0; }
  .fact:nth-child(3) { padding-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid var(--ln); }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .brand .logo-svg { height: 34px; }
  .facade { aspect-ratio: auto; max-height: none; grid-template-rows: auto 156px 156px; gap: 72px 14%; padding: 40px 10% 76px; }
  .win .lbl { top: calc(100% + 20px); }
  .fact { padding-right: 12px; } .fact + .fact { padding-left: 12px; } .fact:nth-child(3) { padding-left: 0; }
  .btn.lg { min-height: 56px; padding: 0 22px; }
  .demo-bar { font-size: 12px; }
  .h1, .h2, .d1, .d2 { overflow-wrap: break-word; hyphens: auto; }
}


/* index des pôles (accueil) : lignes typographiques, remplissage au survol */
.pidx { border-top: 1px solid var(--ln); }
.pidx li { border-bottom: 1px solid var(--ln); }
.pidx a { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1.1fr) minmax(0, 1.3fr) 150px 72px 48px; gap: 24px; align-items: center; padding: clamp(24px, 3vw, 40px) 16px; color: var(--fg); text-decoration: none; isolation: isolate; overflow: hidden; transition: color var(--t2) var(--ease); }
.pidx a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c); transform: scaleY(0); transform-origin: 50% 100%; transition: transform var(--t2) var(--ease); }
.pidx a:hover::before, .pidx a:focus-visible::before { transform: none; }
.pidx a:hover, .pidx a:focus-visible { color: var(--on, #fff); }
.pidx a:focus-visible { outline-offset: -3px; }
.pidx .k { font-size: 13px; font-weight: 800; letter-spacing: .12em; color: inherit; opacity: .7; }
.pidx .t { font-size: clamp(26px, 3.2vw, 46px); line-height: 1.05; font-weight: 300; letter-spacing: -.03em; transition: transform var(--t2) var(--ease); }
.pidx a:hover .t, .pidx a:focus-visible .t { transform: translateX(var(--a2)); }
.pidx .d { font-size: 15.5px; line-height: 1.5; color: var(--tx); transition: color var(--t2); }
.pidx a:hover .d, .pidx a:focus-visible .d { color: inherit; }
.pidx .m { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
/* vignette : une fenêtre de la façade, dans sa propre colonne (jamais sur le texte) */
.pidx .th { width: 72px; height: 88px; border-radius: 4px 12px 4px 4px; background: var(--hl); box-shadow: inset 0 0 0 1px var(--ln); overflow: hidden; transition: box-shadow var(--t2); }
.pidx .th > span { display: block; width: 100%; height: 100%; clip-path: inset(100% 0 0 0); transition: clip-path var(--t2) var(--ease); }
.pidx .th svg { display: block; width: 100%; height: 100%; }
.pidx a:hover .th, .pidx a:focus-visible .th { box-shadow: 0 0 0 3px var(--on); }
.pidx a:hover .th > span, .pidx a:focus-visible .th > span { clip-path: inset(0); }
.pidx .arr { width: 48px; height: 48px; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; display: grid; place-items: center; transition: background var(--t2), color var(--t2), box-shadow var(--t2); }
.pidx .arr svg { width: 20px; }
.pidx a:hover .arr, .pidx a:focus-visible .arr { background: var(--on); color: var(--c); box-shadow: none; }
@media (max-width: 1100px) { .pidx a { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.2fr) 72px 48px; } .pidx .m { display: none; } }
@media (max-width: 860px) { .pidx a { grid-template-columns: 40px minmax(0, 1fr) 44px; gap: 8px 16px; } .pidx .d { grid-column: 2 / 3; } .pidx .m, .pidx .th { display: none; } .pidx .arr { grid-row: 1; grid-column: 3; width: 40px; height: 40px; } }
.js .b2b-blocks .blk { transform: translateY(-60px); opacity: 0; transition: transform var(--t3) var(--ease), opacity var(--t2); transition-delay: calc(var(--d) * 140ms + 200ms); }
.b2b-blocks.is-in .blk { transform: none; opacity: 1; }
.js .b2b-blocks .blk-line { stroke-dasharray: 800; stroke-dashoffset: 800; transition: stroke-dashoffset var(--t4) var(--ease) var(--t3); }
.b2b-blocks.is-in .blk-line { stroke-dashoffset: 0; }
.stair-pin { transition: background-color var(--t3) ease, color var(--t3) ease; }
.aside-card .kv { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--ln); font-size: 14.5px; flex-wrap: nowrap; }
.aside-card .kv span { color: var(--tx2); }
.aside-card .kv b { color: var(--fg); text-align: right; }
@media (prefers-reduced-motion: reduce) { .b2b-blocks .blk { transform: none; opacity: 1; } .b2b-blocks .blk-line { stroke-dashoffset: 0; } }


/* étapes « Comment ça marche » : quatre marches montantes */
.steps-big { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: end; }
.steps-big li { padding: 24px 0 0; border-top: 4px solid var(--mk); margin-bottom: calc(var(--i) * 28px); }
.steps-big .n { display: block; font-size: 56px; font-weight: 200; letter-spacing: -.05em; line-height: 1; color: var(--fg); }
.steps-big b { display: block; margin-top: 10px; font-size: 19px; color: var(--fg); }
.steps-big p { margin-top: 6px; font-size: 15px; color: var(--tx2); }
@media (max-width: 760px) { .steps-big { grid-template-columns: 1fr 1fr; } .steps-big li { margin-bottom: 0; } }
.apply-pas { margin-top: 28px; width: 100%; }
.reco a .sc { white-space: nowrap; }
.mega-feat .pas { opacity: .9; }

/* 11. PHASE B — gabarits et pages ajoutés ------------------------------ */
/* emplacements à compléter : pointillé, jamais confondu avec une donnée */
.todo { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 4px 10px 4px 8px; border-radius: 4px; background: color-mix(in srgb, var(--ocre) 18%, transparent); color: var(--tx); font-size: 13px; font-weight: 700; line-height: 1.3; }
.todo .icon { width: 16px; height: 16px; color: var(--ocre-d); }
.s-pin .todo .icon, .s-vert .todo .icon { color: var(--ocre); }
.slot { border: 1.5px dashed var(--bd) !important; background: transparent !important; }
.vis-slot { display: grid; place-items: center; width: 100%; border: 1.5px dashed var(--bd); border-radius: var(--corner-xl); color: var(--tx2); font-size: 14px; font-weight: 700; text-align: center; padding: 16px; background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--fg) 4%, transparent) 14px 15px); }
.lb { display: block; font-size: 14px; font-weight: 750; color: var(--fg); }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--ln); font-size: 14.5px; }
.kv span { color: var(--tx2); } .kv b { color: var(--fg); text-align: right; }
.ticks { display: grid; gap: 10px; margin-top: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; color: var(--tx); }
.ticks .icon { width: 20px; height: 20px; color: var(--kw); margin-top: 1px; }
.ext { display: inline-flex; align-items: center; gap: 6px; font-weight: 750; color: var(--lk); }
.ext svg { width: 14px; height: 14px; }

/* fiches */
.fiche-main > section + section { margin-top: clamp(64px, 8vw, 104px); }
.fs-cards .card { padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.fs-cards h3, .eval h3, .fmt-grid h3, .info-grid h3 { font-size: 18px; font-weight: 750; color: var(--fg); }
.fs-cards p, .eval p, .fmt-grid p, .info-grid p { font-size: 15px; color: var(--tx2); }
.fs-v { font-size: clamp(20px, 2.2vw, 30px) !important; font-weight: 300; }
.obj { display: grid; gap: 14px; margin-top: 24px; counter-reset: o; }
.obj li { position: relative; padding: 18px 20px 18px 64px; background: var(--card); border: 1px solid var(--cardb); border-radius: var(--corner); font-size: 16.5px; color: var(--fg); font-weight: 650; counter-increment: o; }
.obj li::before { content: counter(o, decimal-leading-zero); position: absolute; left: 20px; top: 18px; font-size: 13px; font-weight: 800; color: var(--kw); letter-spacing: .06em; }
.adm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; }
.adm li { padding: 18px 16px; border-radius: var(--corner); background: var(--hl); margin-bottom: calc(var(--i) * 14px); }
.adm .n { font-size: 32px; font-weight: 200; letter-spacing: -.04em; color: var(--fg); line-height: 1; }
.adm b { display: block; margin-top: 8px; color: var(--fg); }
.adm p { font-size: 14px; color: var(--tx2); margin-top: 4px; }
.eval, .fmt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fmt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.eval .card, .fmt-grid .card { padding: 24px; display: grid; gap: 8px; align-content: start; }
.eval .n, .fmt-grid .n { font-size: 13px; font-weight: 800; letter-spacing: .1em; color: var(--kw); }
.ind { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.ind .slot { display: grid; gap: 6px; align-content: start; padding: 20px; border-radius: var(--corner); }
.ind .v { font-size: 40px; font-weight: 200; line-height: 1; color: var(--tx2); }
.ind b { font-size: 15px; color: var(--fg); line-height: 1.3; }
.docs { display: grid; gap: 6px; width: 100%; margin-top: 4px; }
.docs button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--ln); font-weight: 650; font-size: 14.5px; color: var(--fg); transition: box-shadow var(--t1), background var(--t1); }
.docs button:hover { box-shadow: inset 0 0 0 1px var(--fg); background: var(--hl); }
.docs .icon { width: 18px; height: 18px; }
@media (max-width: 1100px) { .fmt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .adm, .eval, .fmt-grid { grid-template-columns: minmax(0, 1fr); } .adm li { margin-bottom: 0; margin-left: calc(var(--i) * 12px); } }

/* catalogue : portes d’entrée */
.doors-w { background: var(--creme); border-bottom: 1px solid var(--ln); }
.doors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding-block: 24px; }
.door { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; gap: 2px 12px; text-align: left; padding: 16px 16px 40px; min-height: 124px; border-radius: 4px 18px 4px 4px; background: #fff; box-shadow: inset 0 0 0 1px var(--n200); overflow: hidden; transition: box-shadow var(--t2), background var(--t2) var(--ease), color var(--t2), transform var(--t2) var(--ease); }
.door .ic { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 4px 12px 4px 4px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); transition: background var(--t2), color var(--t2); }
.door .ic .icon { width: 20px; height: 20px; }
.door .t { font-weight: 800; color: var(--pin); font-size: 15.5px; line-height: 1.2; }
.door .s { grid-column: 2; font-size: 13px; color: var(--n600); line-height: 1.35; }
.door .ct { grid-row: 1; grid-column: 3; font-size: 13px; font-weight: 800; color: var(--n600); }
.door .st { position: absolute; left: 16px; right: 16px; bottom: 10px; height: 18px; }
.door .st svg { width: 100%; height: 100%; overflow: visible; }
.door .st path { fill: none; stroke: var(--c); stroke-width: 3; stroke-dasharray: 160; stroke-dashoffset: 160; transition: stroke-dashoffset var(--t3) var(--ease); }
.door:hover { box-shadow: inset 0 0 0 1px var(--c), var(--shadow-1); transform: translateY(calc(var(--a1) * -1)); }
.door:hover .st path, .door:focus-visible .st path, .door[aria-pressed="true"] .st path { stroke-dashoffset: 0; }
.door[aria-pressed="true"] { background: var(--c); box-shadow: none; }
.door[aria-pressed="true"] .t, .door[aria-pressed="true"] .s, .door[aria-pressed="true"] .ct { color: #fff; }
.door[aria-pressed="true"] .ic { background: rgba(255, 255, 255, .16); color: #fff; }
.door[aria-pressed="true"] .st path { stroke: #fff; }
.door-band { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 20px; margin-bottom: 16px; border-radius: var(--corner); background: var(--card); border: 1px solid var(--cardb); box-shadow: inset 4px 0 0 var(--mk); animation: qIn var(--t2) var(--ease); }
.door-band .ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; }
.door-band .ic .icon { width: 20px; height: 20px; }
.door-band b { color: var(--fg); }
.door-band p { font-size: 15px; color: var(--tx); }
@media (max-width: 1100px) { .doors { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 20px; scrollbar-width: thin; } .door { flex: 0 0 min(260px, 72vw); scroll-snap-align: start; } }

/* académie : parcours, panier, lecteur */
.pk-stairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.pk-stairs > div { display: grid; gap: 6px; align-content: start; min-height: calc(150px + var(--i) * 70px); padding: 18px 16px; border-radius: 4px 16px 4px 4px; background: var(--vert); color: #fff; }
.pk-stairs > div:nth-child(2) { background: var(--ocre); color: var(--pin); } .pk-stairs > div:nth-child(3) { background: var(--orange); color: var(--pin); }
.pk-stairs .n { font-size: 13px; font-weight: 800; letter-spacing: .1em; }
.pk-stairs b { font-size: 17px; line-height: 1.2; }
.pk-g { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; }
.pk-list { display: grid; gap: 12px; margin-top: 28px; }
.pk-it { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto auto; gap: 18px; align-items: center; padding: 14px 18px 14px 14px; border-radius: var(--corner); background: #fff; border: 1px solid var(--n200); text-decoration: none; color: var(--pin); transition: box-shadow var(--t2), transform var(--t2) var(--ease); }
.pk-it:hover { box-shadow: var(--shadow-1); text-decoration: none; }
.pk-it .th, .cart-line .th { aspect-ratio: 16 / 10; border-radius: 4px 12px 4px 4px; overflow: hidden; }
.pk-it .th svg, .cart-line .th svg { width: 100%; height: 100%; display: block; }
.pk-it .tx, .cart-line .tx { display: grid; gap: 4px; min-width: 0; }
.pk-it .tx b, .cart-line .tx b { font-size: 17px; line-height: 1.25; }
.pk-it .pr, .cart-line .pr { font-size: 18px; font-weight: 300; }
.pk-buy { position: sticky; top: calc(var(--hdr) + 24px); display: grid; gap: 14px; background: #fff; }
.incl { display: grid; gap: 8px; }
.incl li { display: flex; gap: 10px; font-size: 14.5px; } .incl .icon { width: 18px; height: 18px; color: var(--vert); }
.cart-g { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; margin-top: 40px; }
.cart-lines { display: grid; gap: 12px; }
.cart-line { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto auto auto; gap: 18px; align-items: center; padding: 14px; border-radius: var(--corner); background: #fff; border: 1px solid var(--n200); }
.qty { display: inline-flex; align-items: center; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--bd); }
.qty button { width: 36px; height: 36px; font-size: 18px; font-weight: 700; color: var(--pin); }
.qty button:hover { background: var(--hl); }
.qty span { min-width: 40px; text-align: center; font-weight: 800; }
.cart-sum { position: sticky; top: calc(var(--hdr) + 24px); display: grid; gap: 10px; background: #fff; }
.promo { display: grid; gap: 6px; padding: 14px 0; border-block: 1px solid var(--n200); }
.promo label { font-size: 14px; font-weight: 750; color: var(--pin); }
.promo .in { min-height: 40px; padding-block: 6px; }
.player { display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: calc(100vh - var(--hdr)); }
.pl-side { background: var(--pin); color: #fff; padding: 28px 20px; overflow: auto; max-height: calc(100vh - var(--hdr)); position: sticky; top: var(--hdr); --tx2: #9CC4B1; --fg: #fff; --ln: rgba(255,255,255,.12); --mk: var(--ocre); }
.pl-side .h4 { color: #fff; }
.pl-mods { display: grid; gap: 22px; margin-top: 28px; }
.pl-mod > b { display: block; margin: 4px 0 8px; color: #fff; }
.pl-mod p { color: var(--sauge); }
.pl-mod ul { display: grid; gap: 2px; }
.pl-mod button { width: 100%; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 4px; text-align: left; font-size: 14.5px; color: #DDF1E7; transition: background var(--t1); }
.pl-mod button:hover { background: rgba(255, 255, 255, .06); }
.pl-mod button[aria-current="step"] { background: var(--pin-2); box-shadow: inset 3px 0 0 var(--ocre); color: #fff; font-weight: 750; }
.pl-mod .st { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--sauge); }
.pl-mod button.ok .st { background: var(--ocre); box-shadow: none; }
.pl-mod .d { font-size: 12.5px; color: var(--sauge); }
.pl-main { padding: clamp(24px, 4vw, 56px); min-width: 0; }
.pl-stage { margin-top: 24px; }
.pl-video { position: relative; aspect-ratio: 16 / 9; border-radius: 10px 28px 10px 10px; overflow: hidden; background: var(--pin); }
.pl-video svg { width: 100%; height: 100%; display: block; }
.pl-video .play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: var(--action); display: grid; place-items: center; color: #fff; transition: transform var(--t2) var(--ease); }
.pl-video .play:hover { transform: scale(1.06); }
.pl-video .play .icon { width: 32px; height: 32px; fill: currentColor; }
.pl-nav { margin-top: 24px; justify-content: space-between; }
.quiz-card { padding: 28px; border-radius: var(--corner-xl); background: #fff; border: 1px solid var(--n200); }
.quiz-card .opts { display: grid; gap: 10px; margin-top: 18px; }
.quiz-card .cb { padding: 12px 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--n200); }
.quiz-card .cb:has(input:checked) { box-shadow: inset 0 0 0 2px var(--action); }
@media (max-width: 960px) { .pk-g, .cart-g { grid-template-columns: minmax(0, 1fr); } .player { grid-template-columns: minmax(0, 1fr); } .pl-side { position: static; max-height: none; order: 2; } .pl-mods { max-height: 340px; overflow: auto; padding-right: 6px; } }
@media (max-width: 640px) { .pk-it { grid-template-columns: 84px minmax(0, 1fr); } .pk-it .pr, .pk-it > .ar { display: none; } .cart-line { grid-template-columns: 84px minmax(0, 1fr) auto; } .cart-line .qty, .cart-line .pr { grid-column: 2; } .cart-line .x { grid-row: 1; grid-column: 3; } .pk-stairs b { font-size: 14px; } .pl-nav { flex-wrap: wrap; gap: 10px; } .pl-nav .btn { flex: 1 1 40%; justify-content: center; } .pl-nav [data-done] { order: -1; flex-basis: 100%; } }

/* pages de gamme */
.svc-hero { position: relative; overflow: hidden; padding-bottom: clamp(56px, 7vw, 96px); }
.svc-hero .g { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 36px; }
.svc-art { aspect-ratio: 21 / 8; border-radius: var(--corner-xl); overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.svc-art svg { width: 100%; height: 100%; display: block; }
.svc-tabs { display: flex; gap: 6px; margin-top: 24px; overflow-x: auto; padding-bottom: 4px; }
.svc-tabs a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 40px; box-shadow: inset 0 0 0 1px var(--ln); color: var(--fg); font-size: 14.5px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: box-shadow var(--t1), background var(--t2); }
.svc-tabs a .num { font-size: 12px; opacity: .7; }
.svc-tabs a:hover { box-shadow: inset 0 0 0 1px var(--fg); text-decoration: none; }
.svc-tabs a[aria-current="page"] { background: var(--fg); color: var(--bg); box-shadow: none; }
.s-brand .svc-tabs a[aria-current="page"] { color: var(--action); }
.disc { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 32px; align-items: start; }
.disc-l { display: grid; gap: 8px; }
.disc-l button { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: center; text-align: left; padding: 18px 18px; border-radius: var(--corner); background: #fff; box-shadow: inset 0 0 0 1px var(--n200); font-weight: 750; color: var(--pin); font-size: 16px; transition: box-shadow var(--t2), background var(--t2), color var(--t2), transform var(--t2) var(--ease); }
.disc-l button .num { font-size: 12px; font-weight: 800; color: var(--n600); }
.disc-l button:hover { box-shadow: inset 0 0 0 1px var(--pin); }
.disc-l button[aria-selected="true"] { background: var(--pin); color: #fff; box-shadow: none; transform: translateX(var(--a2)); }
.disc-l button[aria-selected="true"] .num { color: var(--ocre); }
.disc-p { padding: clamp(24px, 3vw, 36px); border-radius: var(--corner-xl); background: var(--rose); }
.svc-next { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--fg); font-size: 20px; font-weight: 650; }
.svc-next small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tx2); }
.svc-next.r { text-align: right; margin-left: auto; }
.svc-next:hover { text-decoration: none; color: var(--action); }
@media (max-width: 960px) { .svc-hero .g, .disc { grid-template-columns: minmax(0, 1fr); } .disc-l button[aria-selected="true"] { transform: none; } }

/* pages institutionnelles */
.inst-hero { position: relative; overflow: hidden; padding-block: clamp(40px, 6vw, 80px) clamp(64px, 8vw, 112px); }
.inst-pas { position: absolute; right: -40px; bottom: 24px; width: min(520px, 46vw); opacity: .9; pointer-events: none; }
.inst-pas .pas path.st { stroke: var(--rose-2); }
.inst-hero .wrap { position: relative; }
.inst-hero .wrap > *:not(.inst-pas) { position: relative; z-index: 1; }
.inst-poles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.inst-poles a { display: grid; gap: 8px; align-content: start; padding: 16px 16px 22px; border-radius: var(--corner-xl); background: #fff; border: 1px solid var(--n200); text-decoration: none; color: var(--pin); transition: box-shadow var(--t2), transform var(--t2) var(--ease); }
.inst-poles a:hover { box-shadow: var(--shadow-2); transform: translateY(calc(var(--a1) * -1)); text-decoration: none; }
.inst-poles .win-th { display: block; aspect-ratio: 5 / 4; border-radius: 4px 14px 4px 4px; overflow: hidden; margin-bottom: 8px; }
.inst-poles .win-th svg { width: 100%; height: 100%; display: block; }
.inst-poles .num { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--n600); }
.inst-poles b { font-size: 19px; line-height: 1.2; }
.journey { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 40px; align-items: start; }
.jr-steps { display: grid; gap: 8px; }
.jr-steps button { display: grid; gap: 2px; text-align: left; padding: 14px 18px; border-radius: var(--corner); background: var(--hl); margin-left: calc(var(--i) * 18px); transition: background var(--t2), color var(--t2), box-shadow var(--t2); }
.jr-steps button .small { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 11.5px; }
.jr-steps button b { font-size: 18px; color: var(--fg); }
.jr-steps button:hover { box-shadow: inset 0 0 0 1px var(--fg); }
.jr-steps button[aria-selected="true"] { background: var(--action); color: #fff; }
.jr-steps button[aria-selected="true"] b, .jr-steps button[aria-selected="true"] .small { color: #fff; }
.jr-panels > div { padding: clamp(24px, 3vw, 40px); border-radius: var(--corner-xl); background: #fff; border: 1px solid var(--n200); }
.who { border: 0; padding: 0; margin: 0; }
.fin-res { margin-top: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.contact-g { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.cand-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: end; }
.cand-steps li { padding: 22px 18px; border-radius: var(--corner); background: #fff; border: 1px solid var(--n200); border-top: 4px solid var(--mk); margin-bottom: calc(var(--i) * 22px); }
.cand-steps .n { font-size: 44px; font-weight: 200; letter-spacing: -.05em; line-height: 1; color: var(--fg); }
.cand-steps b { display: block; margin-top: 8px; font-size: 18px; color: var(--fg); }
.cand-steps p { margin-top: 4px; font-size: 14.5px; color: var(--tx2); }
.info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.info-grid .card { padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.info-grid .ic { width: 44px; height: 44px; border-radius: 4px 14px 4px 4px; display: grid; place-items: center; background: var(--rose); color: var(--action); margin-bottom: 6px; }
@media (max-width: 1100px) { .inst-poles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cand-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .journey, .contact-g { grid-template-columns: minmax(0, 1fr); } .cand-steps, .info-grid, .inst-poles { grid-template-columns: minmax(0, 1fr); } .cand-steps li { margin-bottom: 0; } .jr-steps button { margin-left: 0; } .inst-pas { bottom: 0; width: 70vw; opacity: .35; } .inst-hero { padding-bottom: 72px; } }
@media (prefers-reduced-motion: reduce) { .door .st path { stroke-dashoffset: 0; } }
/* dans la colonne étroite des fiches : grilles fluides */
.fiche-main .eval { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.fiche-main .adm { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.fiche-main .adm li { margin-bottom: 0; margin-top: calc((1 - var(--i) % 2) * 0px + var(--i) * 10px); }
@media (max-width: 760px) { .fiche-main .adm { grid-template-columns: minmax(0, 1fr); } .fiche-main .adm li { margin-top: 0; } }
/* message d’erreur d’une case à cocher : affiché sous le libellé, jamais par-dessus */
.cb-err { margin-top: -6px; pointer-events: none; }
.cb-err:not(.bad) { display: none; }

@media (max-width: 560px) { .steps li.cur span::before { content: ""; } .steps li.cur { color: var(--action); } }