/* Idéal Web – Galerie six réalisations, cadres desktop/mobile, V1. */
#nos-exemples, #nos-exemples *{box-sizing:border-box}
#nos-exemples .ex2-grid{align-items:stretch}
#nos-exemples .ex2-card{min-width:0;overflow:hidden}
#nos-exemples .ex2-preview.ex3-preview{min-width:0;overflow:hidden;position:relative}
#nos-exemples .ex3-preview-shell.iw-live-devices{position:relative;display:block;width:100%;max-width:100%;min-height:326px;padding:20px 12px 36px;background:linear-gradient(155deg,#eff8f4 0%,#e6f1eb 58%,#d9e6e0 100%);isolation:isolate;overflow:hidden;border-radius:20px}
#nos-exemples .iw-live-desktop{position:relative;width:84%;max-width:480px;margin:6px auto 0 2%;background:#fff;border:1px solid #ccd9d3;border-radius:13px;box-shadow:0 15px 32px rgba(13,48,35,.17);overflow:hidden}
#nos-exemples .iw-live-browser{height:25px;background:#f7f9fa;border-bottom:1px solid #e0e8e4;display:flex;align-items:center;gap:10px;padding:0 9px;color:#39594b}
#nos-exemples .iw-live-lights{display:flex;gap:4px;flex:none}
#nos-exemples .iw-live-lights i{width:6px;height:6px;background:#95a9a0;border-radius:50%;display:block}
#nos-exemples .iw-live-lights i:first-child{background:#d98d84}
#nos-exemples .iw-live-url{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#nos-exemples .iw-live-desktop-screen{height:220px;overflow:hidden;background:#fff;position:relative}
#nos-exemples .iw-live-desktop-screen iframe{border:0;width:1100px;height:750px;transform:scale(.40);transform-origin:top left;pointer-events:none;background:white}
#nos-exemples .iw-live-phone{position:absolute;right:2.5%;bottom:39px;width:27%;max-width:138px;height:234px;border:5px solid #1b3029;border-radius:21px;background:#172a23;box-shadow:0 12px 23px rgba(12,32,23,.24);overflow:hidden;z-index:2}
#nos-exemples .iw-live-notch{position:absolute;top:3px;left:50%;transform:translateX(-50%);height:7px;width:35%;background:#1b3029;border-radius:0 0 8px 8px;z-index:3}
#nos-exemples .iw-live-phone-screen{position:absolute;inset:4px 2px;background:#fff;border-radius:14px;overflow:hidden}
#nos-exemples .iw-live-phone-screen iframe{border:0;width:390px;height:850px;transform:scale(.32);transform-origin:top left;pointer-events:none;background:white}
#nos-exemples .iw-live-hint{display:block;position:absolute;left:12px;right:12px;bottom:9px;text-align:center;font-size:10px;line-height:1.35;font-weight:650;color:#264d3b}
#nos-exemples .ex2-card-body{min-width:0}
#nos-exemples .ex2-card-body h3,#nos-exemples .ex2-card-body p{overflow-wrap:anywhere}
@media(max-width:700px){
  #nos-exemples .ex2-wrap,#nos-exemples .ex2-intro,#nos-exemples .ex2-grid,#nos-exemples .ex2-card{width:100%;max-width:100%;min-width:0;margin-left:auto;margin-right:auto}
  #nos-exemples .ex2-intro,#nos-exemples .ex2-card-body{text-align:center}
  #nos-exemples .ex2-card-body .ex2-visit{margin-left:auto;margin-right:auto}
  #nos-exemples .ex3-preview-shell.iw-live-devices{min-height:280px;padding:16px 12px 35px}
  #nos-exemples .iw-live-desktop{width:87%;margin-left:0}
  #nos-exemples .iw-live-desktop-screen{height:190px}
  #nos-exemples .iw-live-desktop-screen iframe{transform:scale(.31)}
  #nos-exemples .iw-live-phone{right:3%;bottom:38px;width:30%;height:200px}
  #nos-exemples .iw-live-phone-screen iframe{transform:scale(.27)}
}
@media(max-width:360px){#nos-exemples .ex3-preview-shell.iw-live-devices{min-height:260px}#nos-exemples .iw-live-desktop-screen{height:165px}#nos-exemples .iw-live-desktop-screen iframe{transform:scale(.26)}#nos-exemples .iw-live-phone{height:170px}#nos-exemples .iw-live-phone-screen iframe{transform:scale(.23)}}
@media(prefers-reduced-motion:reduce){#nos-exemples .iw-live-devices *{animation:none!important;transition:none!important}}
