/* La version retenue : le ruban Milan Labs, le titre court, sans téléphones. */
.site-home .hero{min-height:680px;padding-top:135px}
.site-home .hero-inner{display:block;min-height:465px}
.site-home .hero-copy{max-width:750px;padding-bottom:25px}
.site-home h1{font-size:clamp(58px,6.1vw,92px);line-height:1.05}
.site-home .hero-description{font-size:15px}
.site-home .hero::after{opacity:.25}
.site-home .hero-ribbon img{object-position:65% center}
.site-home .applications{background:var(--bg)}
.site-home .section-heading{align-items:end}

/* Une enveloppe stable conserve les stores accessibles pendant la rotation. */
.turn-products{gap:30px}
.turn-card{min-width:0;--card-ink:#fffdf8;--card-muted:#d5e2ff}
.turn-stage{position:relative;perspective:1500px}
.turn-inner{position:relative;height:390px;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.4,0,.12,1);transform:rotateY(0deg)}
.turn-card.is-flipped .turn-inner{transform:rotateY(180deg)}
.turn-face{position:absolute;inset:0;border-radius:23px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;padding:29px 31px;color:var(--card-ink);border:1px solid #ffffff30;box-shadow:inset 0 1px #ffffff50,0 8px 12px #0002,0 20px 45px -15px #02031b55}
.turn-front{background:radial-gradient(ellipse at 95% 0%,#5b9dff80,transparent 55%),linear-gradient(140deg,#184ce7,#071A9A)}
.turn-kicker{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:9px;line-height:1.6;letter-spacing:.14em;text-transform:uppercase;color:#e4ebff;font-weight:550}

.turn-logo{width:112px;height:112px;border-radius:24px;object-fit:contain;margin:35px 0 25px;box-shadow:0 9px 20px #0003}
.turn-front h3{font-family:Sora,var(--font);font-size:29px;letter-spacing:-.045em;line-height:1.2;margin:0 0 12px}
.turn-slogan{font-size:13px;line-height:1.6;margin:0;color:var(--card-muted)}
.turn-format{position:absolute;bottom:29px;left:31px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#c7d9ff}
.turn-toggle{position:absolute;bottom:22px;right:24px;width:39px;height:39px;border-radius:50%;display:grid;place-items:center;border:1px solid #ffffff6b;background:#ffffff13;color:#fffdf8;font-family:Inter,sans-serif;font-size:25px;line-height:1;backdrop-filter:blur(8px);transition:background .2s,scale .2s;z-index:2}
.turn-toggle:hover{background:#ffffff2b;scale:1.06}
.turn-toggle:focus-visible{outline:3px solid #fff;outline-offset:4px}
.turn-back{transform:rotateY(180deg);background:radial-gradient(ellipse at 100% 0%,#1647e844,transparent 68%),#07182D;color:#fffdf8}
.turn-back-heading{display:flex;align-items:center;gap:11px;font-size:12px;font-weight:550;color:#d6e2ff}
.turn-back-heading img{width:38px;height:38px;border-radius:9px}
.turn-back h4{font-family:Sora,var(--font);font-size:20px;line-height:1.3;letter-spacing:-.035em;margin:22px 0 20px;max-width:310px}
.turn-back ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.turn-back li{border-left:2px solid #4f86ff99;padding-left:11px}
.turn-back li strong{display:block;font-size:11px;font-weight:600;line-height:1.4}
.turn-back li p{font-size:10px;line-height:1.6;margin:3px 0 0;color:#b9c9e5}
.turn-visit{display:inline-flex;align-items:center;gap:28px;margin-top:24px;font-size:11px;font-weight:550;color:#fffdf8;padding:5px 0;border-bottom:1px solid #b6cbff60}
.turn-visit span{transition:translate .2s}
.turn-visit:hover span{translate:3px -2px}
.turn-grid{--card-ink:#191a20;--card-muted:#482717}
.turn-grid .turn-front{background:radial-gradient(ellipse at 95% 0%,#ffbc7280,transparent 60%),linear-gradient(135deg,#ff943f,#FF6500);border-color:#ffbc6f}
.turn-grid .turn-kicker{color:#46230e}
.turn-grid .turn-format{color:#49230d}
.turn-grid .turn-logo{box-shadow:0 10px 24px #81310040}
.turn-grid .turn-toggle{background:#1b1b240c;border-color:#49230d6b;color:#2d1c14}
.turn-grid .turn-toggle:focus-visible{outline-color:#101418}
.turn-grid.is-flipped .turn-toggle{background:#ffffff0f;border-color:#ffb57470;color:#ffe9d5}
.turn-grid .turn-back{background:radial-gradient(ellipse at 100% 0%,#ff65002d,transparent 67%),#101418;color:#fffdf8;border-color:#ffb57445}
.turn-grid .turn-back-heading{color:#ffdabd}
.turn-grid .turn-back li{border-color:#ff8b3e99}
.turn-grid .turn-back li p{color:#c9c0b8}
.turn-grid .turn-visit{border-color:#ffb57470}
.turn-stores{display:flex;flex-wrap:wrap;align-items:center;gap:11px;padding:19px 3px 0}
.turn-stores a{display:block;border-radius:7px;transition:translate .22s,filter .22s}
.turn-stores a:hover{translate:0 -2px;filter:brightness(1.15)}
.turn-stores img{height:39px;width:auto;max-width:100%;object-fit:contain}
.turn-stores a:focus-visible{outline-color:var(--brand)}

@media(max-width:1100px){.turn-face{padding:27px}.turn-logo{margin-top:32px}.turn-front h3{font-size:25px}.turn-back h4{font-size:19px}.turn-slogan{font-size:12px}.turn-format{left:27px}.turn-back li p{font-size:10px}.turn-visit{font-size:10px}}
@media(max-width:760px){
 .site-home .hero{min-height:0;padding-top:117px}.site-home .hero-inner{min-height:465px}.site-home h1{font-size:clamp(54px,13vw,77px)}.site-home .hero-description{font-size:13px}.site-home .hero-baseline{margin-top:10px}.site-home .hero-ribbon img{object-position:57% center}.site-home .hero::after{opacity:.5}.site-home .section-heading{align-items:start}.turn-products{gap:31px}.turn-inner{height:382px}.turn-face{padding:26px}.turn-front h3{font-size:28px}.turn-logo{margin-top:35px;width:105px;height:105px;border-radius:23px}.turn-slogan{font-size:12px}.turn-format{left:26px;font-size:9px}.turn-toggle{width:42px;height:42px;right:22px;bottom:20px}.turn-back h4{font-size:22px;max-width:260px}.turn-back li strong{font-size:12px}.turn-back li p{font-size:11px}.turn-back ul{gap:12px}.turn-back h4{margin:20px 0 18px}.turn-visit{font-size:11px;margin-top:23px}.turn-stores{justify-content:start;padding-top:17px;gap:12px}.turn-stores img{height:40px}
}
@media(max-width:365px){.turn-face{padding:23px}.turn-front h3{font-size:24px}.turn-kicker{font-size:8px}.turn-format{left:23px}.turn-back h4{font-size:19px}.turn-back li p{font-size:10px}.turn-stores{gap:8px}.turn-stores img{height:37px}.turn-logo{margin-top:39px}}
@media(prefers-reduced-motion:reduce){.turn-inner{transition:none}.turn-stores a:hover{translate:none}.turn-toggle:hover{scale:1}}

/* Les deux faces partagent la hauteur du contenu, même avec les six arguments. */
.turn-card{display:flex;flex-direction:column}
.turn-stage{flex:1;display:grid}
.turn-inner{display:grid;height:auto;min-height:360px}
.turn-face{position:relative;grid-area:1/1;min-width:0;--face-pad:31px}
.turn-front{display:flex;flex-direction:column;justify-content:center}
.turn-front .turn-kicker{position:absolute;left:var(--face-pad);right:var(--face-pad);top:29px}
.turn-front .turn-logo{margin:0 0 24px}
.turn-back{padding-bottom:34px}
.turn-back h4{margin:18px 0 19px}
.turn-back ul{gap:10px}
.turn-back li{padding-left:12px}
.feature-copy{display:block;font-size:12px;line-height:1.6;color:#e1e9f7}
.turn-grid .feature-copy{color:#e4dfd9}
.turn-back .turn-visit{margin-top:23px}
.lang-flags{display:flex;flex-wrap:wrap;gap:5px 7px;margin-top:9px;min-height:22px}
.lang-flags>span{display:inline-block;font-size:19px;line-height:1.2}
.turn-stores{flex-shrink:0}
@media(max-width:1100px){.turn-face{--face-pad:27px}.feature-copy{font-size:12px}}
@media(max-width:760px){.turn-face{--face-pad:26px}.turn-inner{min-height:360px}.turn-back{padding-bottom:34px}.turn-back h4{font-size:21px;max-width:none;margin:18px 0 20px}.feature-copy{font-size:12px;line-height:1.6}.turn-back ul{gap:10px}.lang-flags{gap:5px 7px}.lang-flags>span{font-size:20px}}
@media(max-width:365px){.turn-face{--face-pad:23px}.feature-copy{font-size:12px}.lang-flags{gap:5px}.lang-flags>span{font-size:19px}}

/* La tranche a sa géométrie propre et reste visible au milieu du retournement. */
.turn-card{--card-depth:22px;--edge-color:#102a88}
.turn-grid{--edge-color:#bd4709}
.turn-inner{overflow:visible;transform:rotateY(0deg)}
.turn-card.is-flipped .turn-inner{transform:rotateY(180deg)}
.turn-front{transform:translateZ(calc(var(--card-depth) / 2))}
.turn-back{transform:rotateY(180deg) translateZ(calc(var(--card-depth) / 2))}
.turn-edge-shell{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.turn-edge{position:absolute;display:block;background:var(--edge-color);backface-visibility:visible;transform-origin:center}
.turn-edge--left,.turn-edge--right{top:23px;width:var(--card-depth);height:calc(100% - 46px);transform:translateX(-50%) rotateY(90deg)}
.turn-edge--left{left:0;background:linear-gradient(90deg,var(--edge-color),color-mix(in srgb,var(--edge-color),white 12%))}
.turn-edge--right{left:100%;background:linear-gradient(90deg,var(--edge-color),color-mix(in srgb,var(--edge-color),black 20%))}
.turn-edge--top,.turn-edge--bottom{left:23px;width:calc(100% - 46px);height:var(--card-depth);transform:translateY(-50%) rotateX(90deg)}
.turn-edge--top{top:0;background:color-mix(in srgb,var(--edge-color),white 20%)}
.turn-edge--bottom{top:100%;background:color-mix(in srgb,var(--edge-color),black 15%)}
.turn-edge--corner{height:var(--card-depth)}
@media(max-width:760px){.turn-card{--card-depth:18px}.turn-grid{--rest-y:3deg}}
@media(prefers-reduced-motion:reduce){.turn-inner{transform:rotateY(0deg)}.turn-card.is-flipped .turn-inner{transform:rotateY(180deg)}}

/* Recto et verso droits au repos ; le volume n’apparaît qu’en rotation. */
.turn-face{padding-top:24px;padding-left:26px;padding-right:26px;--face-pad:26px}
.turn-front .turn-kicker{top:24px}
.turn-front .turn-logo{width:96px;height:96px;border-radius:21px;margin-bottom:20px}
.turn-back-heading img{width:30px;height:30px;border-radius:8px}
.turn-back ul{margin-top:18px}
.turn-back .turn-visit{margin-top:18px;font-size:11px}
.lang-flags{margin-top:7px;min-height:20px}
.lang-flags>span{font-size:18px}
@media(max-width:365px){.turn-face{padding-left:23px;padding-right:23px;--face-pad:23px}}

/* Les stores font partie de chaque face et tournent avec la carte. */
.turn-card>.turn-stores{display:none}
.turn-front{justify-content:space-between;gap:20px;padding-bottom:24px}
.turn-front .turn-kicker{position:relative;inset:auto;min-height:35px;padding-right:45px}
.turn-front-content{flex:1;display:flex;flex-direction:column;justify-content:center;padding:5px 0}
.turn-front .turn-format{position:static;margin-top:16px;font-size:9px;color:var(--card-muted)}
.turn-front .turn-stores,.turn-back .turn-stores{padding:0;gap:10px;margin-top:0}
.turn-stores img{height:35px}
.turn-back{display:flex;flex-direction:column;padding-bottom:24px}
.turn-back-heading{min-height:35px;padding-right:39px}
.turn-back-heading>a{font-size:12px;line-height:1.4;color:inherit}
.turn-back-heading>a>span{font-size:11px;opacity:.6;margin-left:4px}
.turn-back .turn-stores{margin-top:auto;padding-top:22px}
.turn-toggle{top:22px;bottom:auto;right:22px;width:35px;height:35px;font-size:23px}
.turn-stores a{max-width:100%}
@media(min-width:1101px){.turn-stores img{height:38px}}
@media(max-width:760px){.turn-toggle{top:20px;right:20px;width:39px;height:39px}.turn-front,.turn-back{padding-bottom:24px}.turn-front-content{padding:4px 0}.turn-back-heading{padding-right:42px}.turn-front .turn-kicker{padding-right:45px;min-height:35px}.turn-stores img{height:35px}}
@media(max-width:365px){.turn-front .turn-stores,.turn-back .turn-stores{gap:8px}.turn-stores img{height:33px}.turn-toggle{right:18px}.turn-front{gap:17px}}

/* Le mockup fourni conserve sa transparence et ses proportions. */
.studio{align-items:center;gap:7vw}
/* Un fondu progressif efface les quatre bords du visuel sur les deux thèmes. */
.studio-visual{width:clamp(260px,25vw,360px);max-width:100%;margin:28px auto 0 0;position:relative;isolation:isolate;
  --studio-fondu-vertical:linear-gradient(to bottom,transparent 0%,#000 10%,#000 72%,transparent 100%);
  --studio-fondu-horizontal:linear-gradient(to right,transparent 0%,#000 12%,#000 87%,transparent 100%);
  -webkit-mask-image:var(--studio-fondu-vertical),var(--studio-fondu-horizontal);
  -webkit-mask-composite:source-in;
  mask-image:var(--studio-fondu-vertical),var(--studio-fondu-horizontal);
  mask-composite:intersect;
}
.studio-visual::before{content:'';position:absolute;z-index:-1;inset:12% 3% 20%;background:radial-gradient(ellipse,#6a5cff24,transparent 68%);filter:blur(22px);pointer-events:none}
.studio-visual img{width:100%;height:auto;filter:drop-shadow(0 18px 24px var(--shadow))}
.studio-text{padding-top:0}
.studio-text>p:last-child{margin-bottom:0}
@media(max-width:760px){.studio{gap:30px}.studio-visual{width:min(74%,280px);margin:24px auto 0}.studio-text{padding-top:0}}

/* Le M vectoriel officiel est orienté dans le plan de l’écran, sans recadrage. */
.studio-screen-logo{position:absolute;left:56.13%;top:39.94%;width:28%;aspect-ratio:1000/770;transform:translate(-50%,-50%);pointer-events:none}
.studio-screen-brand{position:relative;display:block;width:100%;height:100%;overflow:hidden;transform:matrix(.993,.117,-.368,.930,0,0);transform-origin:center}
.studio-screen-brand img{position:static;width:100%;height:100%;max-width:100%;object-fit:contain;filter:none}

/* Six étapes lisibles d’un regard, sans contenu à ouvrir. */
.studio-text>.studio-lead{margin-bottom:12px}
.studio-text>.studio-intro{margin-bottom:26px}
.studio-services{list-style:none;padding:0;margin:0;display:grid;gap:18px}
.studio-services>li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:15px;align-items:start}
.studio-step-number{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-family:Sora,var(--font);font-size:13px;line-height:1;color:#fff;background:linear-gradient(145deg,#8C8CFF,#6A5CFF 60%,#3D37D1);border:1px solid #b7b0ff70;box-shadow:inset 0 1px 1px #ffffff50,0 4px 12px #3d37d12b}
.studio-services h3{font-size:14px;line-height:1.45;letter-spacing:-.025em;margin:0;color:var(--text)}
.studio-services p{font-size:12px;line-height:1.7;margin:5px 0 0;color:var(--muted)}
@media(max-width:760px){.studio-services{gap:20px}.studio-services>li{gap:14px}.studio-services h3{font-size:14px}.studio-services p{font-size:12px}}
