/* Styles propres à la page /technologies/ */
a:focus-visible,button:focus-visible{outline:2px solid #2A63B5;outline-offset:3px;border-radius:8px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.kicker{font-size:15px;font-weight:500;color:#6F6E69;margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;box-sizing:border-box}
.btn-dark{background:#2F2E2B;color:#FFFFFF}
.btn-dark:hover{background:#1E1D1B;color:#FFFFFF}
.btn-light{background:#FFFFFF;color:#2F2E2B}
.btn-light:hover{color:#2F2E2B}
.sable{background:#ECE8DF}
.ciel{background:#DCE6F2}
.vert{background:#3B7A4E;color:#FFFFFF}
.encre{background:#2F2E2B;color:#FFFFFF}
.tech{position:relative;overflow:hidden;border-radius:28px;padding:36px;display:flex;flex-direction:column;gap:26px;box-sizing:border-box}
.tech h3{margin:0;font-size:32px;line-height:1.08}
.stage{position:relative;border-radius:18px;min-height:250px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:15.5px;line-height:1.5}
.facts li{display:flex;gap:12px;align-items:flex-start}
.tick{flex:none;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:1px}
.tile{background:#FFFFFF;border:1px solid #ECEBE8;border-radius:18px;padding:22px 14px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:132px;box-sizing:border-box;text-align:center;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}
.tile:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(47,46,43,.10)}
.mark{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-family:'Newsreader',Georgia,serif;font-weight:600;font-size:19px;letter-spacing:-0.02em}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.07);opacity:1}}
@keyframes travel{0%{left:6%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:94%;opacity:0}}
@keyframes pop{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes type{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@keyframes cursor{50%{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(127,176,142,.0)}50%{box-shadow:0 0 0 10px rgba(127,176,142,.18)}}
@keyframes open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.breathe{animation:breathe 5.5s ease-in-out infinite}
.travel{animation:travel 4.5s cubic-bezier(.45,0,.55,1) infinite}
.pop1{animation:pop 4.5s ease-in-out .3s infinite}
.pop2{animation:pop 4.5s ease-in-out 1.3s infinite}
.pop3{animation:pop 4.5s ease-in-out 2.3s infinite}
.pop4{animation:pop 4.5s ease-in-out 3.3s infinite}
.l1{animation:type .4s ease both .2s}
.l2{animation:type .4s ease both .7s}
.l3{animation:type .4s ease both 1.2s}
.l4{animation:type .4s ease both 1.7s}
.l5{animation:type .4s ease both 2.2s}
.l6{animation:type .4s ease both 2.8s}
.cursor{animation:cursor 1s steps(1) infinite}
.spin{animation:spin 30s linear infinite}
.glow{animation:glow 3s ease-in-out infinite}
.open{animation:open .35s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ===== ANIMATIONS ===== */
@keyframes wordIn{from{opacity:0;translate:0 .38em;filter:blur(8px)}to{opacity:1;translate:0 0;filter:blur(0)}}
:is(section:has(h1) :has(> h1),section:has(> h1)) > :not(h1){animation:riseIn .9s cubic-bezier(.2,.7,.2,1) .5s both}
:is(section:has(h1) :has(> h1),section:has(> h1)) > :not(h1):nth-child(1){animation-delay:.05s}
:is(section:has(h1) :has(> h1),section:has(> h1)) > :not(h1):nth-child(3){animation-delay:.6s}
:is(section:has(h1) :has(> h1),section:has(> h1)) > :not(h1):nth-child(4){animation-delay:.72s}
:is(section:has(h1) :has(> h1),section:has(> h1)) > :not(h1):nth-child(n+5){animation-delay:.84s}
section:has(h1) .wrap:not(:has(> h1)) > :not(:has(h1)){animation:tileIn 1.1s cubic-bezier(.2,.7,.2,1) .35s both}
.anim-on [data-r]{transition:opacity .8s ease var(--d,0ms),translate .95s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .25s ease,box-shadow .25s ease,background-color .2s ease,color .2s ease,border-color .2s ease}
.tnum{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.w,section:has(h1) *{animation:none!important}}
/* Bouton « Autres » et son panneau */
.autres-btn{cursor:pointer;font:inherit;color:#2F2E2B;border:1px dashed #C9C8C2;background:#FBFAF8}
.autres-btn.is-on{border:1px solid #3B7A4E;background:#EDF3EC}
.autres-mark{background:#FFFFFF;color:#2F2E2B;border:1px solid #E3E2DF;transition:background .25s ease,color .25s ease}
.autres-btn.is-on .autres-mark{background:#3B7A4E;color:#FFFFFF;border-color:#3B7A4E}
.autres-ico{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.autres-btn.is-on .autres-ico{transform:rotate(45deg)}