/* Des cartes droites, une matière commune et un visuel propre à chaque étape. */
.approach{--approach-start:#1b2042;--approach-end:#11162f;--approach-edge:#090d20;--approach-shadow:#0203188c;--approach-border:#9590f063;--approach-ink:#e3e4fa;--approach-line:#a5a7e53b;--approach-tile:#20254b;--approach-tile-front:#393563;--approach-soft:#9293c53b;--approach-shine:#ffffff10}
body[data-theme=light] .approach{--approach-start:#fff;--approach-end:#f0effb;--approach-edge:#dcdaed;--approach-shadow:#34277c22;--approach-border:#8278d74a;--approach-ink:#3a3268;--approach-line:#756bc233;--approach-tile:#ebe9fb;--approach-tile-front:#fff;--approach-soft:#7c70b83b;--approach-shine:#fff}
.approach .approach-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:19px;margin:0}
.approach .steps>li.approach-card{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;padding:24px 22px 25px;border:1px solid transparent;border-radius:23px;background:linear-gradient(145deg,var(--approach-start),var(--approach-end)) padding-box,linear-gradient(145deg,var(--approach-border),var(--line)) border-box;box-shadow:inset 0 1px 0 var(--approach-shine),0 5px 0 -1px var(--approach-edge),0 23px 32px -18px var(--approach-shadow);transform:translateY(0);transition:transform .3s ease,box-shadow .3s ease,opacity .7s ease,translate .9s cubic-bezier(.16,1,.3,1)}
.approach-card::before{content:'';position:absolute;z-index:-1;inset:0;border-radius:inherit;background:radial-gradient(ellipse at 65% 0,#8c8cff21,transparent 67%);opacity:.65;pointer-events:none;transition:opacity .3s}
.approach .steps>li>.approach-number{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border:1px solid #8c8cff55;border-radius:50%;font-size:11px;font-family:Sora,var(--font);color:var(--brand);background:#8c8cff12;box-shadow:inset 0 1px var(--approach-shine)}
.approach .steps h3{font-size:19px;line-height:1.35;letter-spacing:-.04em;margin:0 0 11px}
.approach .steps p{font-size:12px;line-height:1.8;max-width:none;margin:0;min-height:65px}
.approach-visual{position:relative;height:132px;width:100%;margin:18px 0 23px;flex-shrink:0;pointer-events:none}
.approach-visual::before{content:'';position:absolute;inset:5px 0;background:radial-gradient(ellipse,#6a5cff26,transparent 68%);filter:blur(12px);pointer-events:none}
/* Concevoir : un parcours relié, lisible sans lancer d’animation. */
.approach-map{display:flex;align-items:center;justify-content:center;gap:13px}
.map-window{position:relative;display:flex;flex-direction:column;gap:8px;width:43px;height:79px;padding:12px 7px 8px;border-radius:10px;background:var(--approach-tile);border:1px solid var(--approach-line);box-shadow:0 8px 12px -6px var(--approach-shadow)}
.map-window::after{content:'';position:absolute;left:100%;top:62%;width:15px;height:1px;background:#8c8cff99}
.map-window:last-child::after{display:none}
.map-window i{height:4px;border-radius:3px;background:var(--approach-soft)}
.map-window i:nth-child(2){width:65%}
.map-window b{height:16px;border-radius:4px;background:#8c8cff35;margin-top:auto}
.map-window:nth-child(2){width:48px;height:98px;padding-top:16px;background:linear-gradient(145deg,#8c8cff,#5141d8);border-color:#b5acff70;box-shadow:0 9px 19px -5px #4031b87a}
.map-window:nth-child(2) i{background:#ffffff7d}
.map-window:nth-child(2) b{background:#f5f2ffdf}
.map-window:last-child b{align-self:center;width:14px;height:8px;border-left:2px solid #a69bff;border-bottom:2px solid #a69bff;border-radius:0;background:none;transform:rotate(-45deg);margin-bottom:10px}
/* Créer : le véritable monogramme, sa typographie et sa palette. */
.approach-identity{max-width:186px;align-self:center}
.identity-monogram{position:absolute;left:6px;top:10px;width:85px;height:65.36px;overflow:hidden;filter:drop-shadow(0 10px 9px #3d37d12b)}
.identity-monogram img{position:static;width:100%;height:100%;max-width:100%;object-fit:contain}
.identity-type{position:absolute;top:25px;right:2px;font-family:Sora,var(--font);font-size:38px;line-height:1;font-weight:600;letter-spacing:-.07em;color:var(--approach-ink)}
.identity-palette{position:absolute;left:7px;right:4px;bottom:13px;display:flex;gap:7px}
.identity-palette i{flex:1;height:21px;border-radius:6px;background:#8C8CFF;box-shadow:inset 0 1px #ffffff60,0 5px 8px -4px var(--approach-shadow)}
.identity-palette i:nth-child(2){background:#6A5CFF}
.identity-palette i:nth-child(3){background:#3D37D1}
/* Développer : des couches d’interface assemblées, sans jargon technique. */
.approach-build{max-width:178px;align-self:center}
.build-layer{position:absolute;width:122px;height:71px;left:8px;top:7px;border:1px solid var(--approach-line);border-radius:11px;background:linear-gradient(145deg,#8c8cff3d,#6a5cff12);box-shadow:0 7px 12px -7px var(--approach-shadow)}
.build-layer:nth-child(2){left:25px;top:27px;background:var(--approach-tile)}
.build-layer.build-front{left:42px;top:47px;display:grid;grid-template-columns:21px 1fr;grid-template-rows:repeat(3,7px);gap:7px 9px;padding:13px;background:linear-gradient(135deg,var(--approach-tile-front),var(--approach-tile));box-shadow:inset 0 1px var(--approach-shine),0 10px 15px -8px var(--approach-shadow)}
.build-front i{grid-row:1/4;background:linear-gradient(145deg,#a091ff,#6a5cff);border-radius:5px}
.build-front b{background:var(--approach-soft);border-radius:3px}
.build-front b:nth-last-child(2){width:70%}
.build-front b:last-child{width:85%}
/* Faire évoluer : une application entretenue, entourée d’un cycle de mises à jour. */
.approach-evolve{max-width:192px;align-self:center}
.evolve-illustration{display:block;width:100%;height:100%;overflow:visible}
.evolve-orbit-track{stroke:var(--approach-line);stroke-width:1;stroke-dasharray:2 6}
.evolve-orbit{transform-origin:96px 66px;transition:transform .65s cubic-bezier(.2,.7,.25,1)}
.evolve-app{filter:drop-shadow(0 8px 8px var(--approach-shadow));transition:transform .45s cubic-bezier(.2,.7,.25,1)}
.evolve-app-shadow{fill:#3d37d1;fill-opacity:.23}
.evolve-validation{fill:var(--approach-tile-front);stroke:var(--approach-line);stroke-width:1.3}
.evolve-validation-mark{stroke:var(--brand)}
@media(hover:hover) and (pointer:fine){.approach-card:hover .evolve-orbit{transform:rotate(14deg)}.approach-card:hover .evolve-app{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.evolve-orbit,.evolve-app{transform:none!important;transition:none!important}}
@media(hover:hover) and (pointer:fine){.approach .steps>li.approach-card:hover{transform:translateY(-5px);box-shadow:inset 0 1px var(--approach-shine),0 5px 0 -1px var(--approach-edge),0 29px 37px -18px var(--approach-shadow)}.approach-card:hover::before{opacity:1}}
@media(max-width:1000px){.approach .approach-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.approach .steps>li.approach-card{padding:24px}.approach .steps p{min-height:44px}.approach-visual{margin-top:15px;margin-bottom:24px}}
@media(max-width:480px){.approach .approach-cards{grid-template-columns:1fr;gap:22px}.approach .steps>li.approach-card{padding:23px}.approach .steps h3{font-size:21px}.approach .steps p{min-height:0;max-width:290px}.approach-visual{margin:7px 0 22px;height:132px}.approach .steps>li>.approach-number{width:35px;height:35px}}
@media(prefers-reduced-motion:reduce){.approach .steps>li.approach-card{transform:none!important;transition:none!important}.approach-card::before{transition:none}.approach .steps>[data-reveal]{opacity:1!important;translate:none!important}}