/* 12•Cinqcent — layout PC / aperçu mobile
   Modes (html + body) :
   - layout-pc      : expérience desktop large (uniquement sur grand écran)
   - layout-mobile  : coque smartphone (aperçu PC) ou plein écran (vrai téléphone)
   Le sélecteur .device-mode-switcher n’apparaît que sur PC (pointer fin + largeur ≥ 900). */
:root{
  --layout-pc-max:1120px;
  --layout-rail:92px;
  --phone-w:390px;
  --phone-h:844px;
  --phone-radius:44px;
  --phone-bezel:12px;
}

/* ---- Sélecteur de mode (PC uniquement) ---- */
.device-mode-switcher{
  position:fixed;top:14px;right:14px;z-index:10050;
  display:none;align-items:center;gap:4px;
  padding:4px;border-radius:999px;
  background:rgba(28,26,27,.92);color:#fff;
  box-shadow:0 12px 32px rgba(28,26,27,.28);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-family:inherit;
}
html.device-mode-capable .device-mode-switcher,
body.device-mode-capable .device-mode-switcher{display:flex}
.device-mode-switcher button{
  border:0;cursor:pointer;font:inherit;font-size:12px;font-weight:800;
  letter-spacing:.02em;padding:9px 14px;border-radius:999px;
  color:rgba(255,255,255,.72);background:transparent;
  min-height:36px;transition:background .15s,color .15s;
}
.device-mode-switcher button[aria-pressed="true"]{
  background:#fff;color:#1C1A1B;
}
.device-mode-switcher button:focus-visible{
  outline:2px solid #E30613;outline-offset:2px;
}
.device-mode-hint{
  position:fixed;top:58px;right:14px;z-index:10049;
  display:none;max-width:220px;padding:8px 12px;border-radius:12px;
  background:#fff;color:#57545A;font-size:11.5px;line-height:1.4;font-weight:600;
  box-shadow:0 8px 24px rgba(28,26,27,.12);border:1px solid rgba(28,26,27,.08);
}
html.device-mode-capable.layout-mobile .device-mode-hint,
body.device-mode-capable.layout-mobile .device-mode-hint{display:block}

/* ---- Cadre téléphone (aperçu PC) ---- */
.phone-frame{
  position:relative;z-index:1;
  display:flex;align-items:stretch;justify-content:center;
  width:100%;height:100%;max-width:100%;
}
html.device-mode-capable.layout-mobile .phone-frame,
body.device-mode-capable.layout-mobile .phone-frame{
  width:calc(var(--phone-w) + var(--phone-bezel) * 2);
  height:calc(var(--phone-h) + var(--phone-bezel) * 2);
  max-height:min(96dvh, calc(var(--phone-h) + var(--phone-bezel) * 2));
  padding:var(--phone-bezel);
  border-radius:calc(var(--phone-radius) + 4px);
  background:linear-gradient(145deg,#2a2a2c 0%,#111113 55%,#1c1c1e 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 28px 80px -20px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,0,0,.35);
  flex-shrink:0;
}
html.device-mode-capable.layout-mobile .phone-frame::before,
body.device-mode-capable.layout-mobile .phone-frame::before{
  content:'';position:absolute;top:18px;left:50%;transform:translateX(-50%);
  width:118px;height:28px;border-radius:20px;background:#0a0a0a;z-index:5;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
  pointer-events:none;
}
html.device-mode-capable.layout-mobile .phone-frame::after,
body.device-mode-capable.layout-mobile .phone-frame::after{
  content:'';position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  width:120px;height:4px;border-radius:4px;background:rgba(255,255,255,.35);z-index:5;
  pointer-events:none;
}
html.device-mode-capable.layout-mobile #app,
body.device-mode-capable.layout-mobile #app{
  width:100%!important;max-width:100%!important;
  height:100%!important;margin:0!important;
  border-radius:var(--phone-radius)!important;
  border:none!important;
  overflow:hidden;
  box-shadow:none;
}

/* Sur vrai téléphone / tablette étroite : plein écran, pas de cadre décoratif */
@media(max-width:899px){
  .device-mode-switcher,.device-mode-hint{display:none!important}
  .phone-frame{width:100%;height:100%;padding:0;background:transparent;box-shadow:none;border-radius:0}
  .phone-frame::before,.phone-frame::after{display:none}
  #app{max-width:100%!important;height:100dvh!important;border-radius:0!important;margin:0!important;border:none!important}
}

/* ---- Mode PC : expérience desktop ---- */
html.device-mode-capable.layout-pc .app-shell,
body.device-mode-capable.layout-pc .app-shell{
  align-items:stretch;padding:0;
}
html.device-mode-capable.layout-pc .app-shell::before,
body.device-mode-capable.layout-pc .app-shell::before{display:none}
html.device-mode-capable.layout-pc .phone-frame,
body.device-mode-capable.layout-pc .phone-frame{
  width:100%;height:100%;padding:0;background:transparent;box-shadow:none;border-radius:0;
  align-items:stretch;
}
html.device-mode-capable.layout-pc .phone-frame::before,
html.device-mode-capable.layout-pc .phone-frame::after,
body.device-mode-capable.layout-pc .phone-frame::before,
body.device-mode-capable.layout-pc .phone-frame::after{display:none}
html.device-mode-capable.layout-pc #app,
body.device-mode-capable.layout-pc #app{
  width:100%;
  max-width:var(--layout-pc-max)!important;
  height:100dvh!important;
  margin:0 auto!important;
  border-radius:0!important;
  border:none!important;
  box-shadow:none;
  background:var(--craie, var(--ds-surface-page, #FAF9F9));
}

/* Rail de navigation à gauche (PC, une fois connecté) */
body.device-mode-capable.layout-pc.in-app #app{
  padding-left:var(--layout-rail);
}
body.device-mode-capable.layout-pc.in-app .nav{
  position:absolute!important;
  left:0!important;right:auto!important;bottom:0!important;top:0!important;
  width:var(--layout-rail)!important;
  height:100%!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  align-items:stretch!important;
  gap:6px!important;
  padding:18px 10px calc(18px + env(safe-area-inset-bottom,0px))!important;
  border-radius:0!important;
  border-top:none!important;
  border-right:1px solid var(--ligne, var(--ds-border-hairline, rgba(28,26,27,.08)))!important;
  background:var(--carte, var(--ds-surface-glass, #fff))!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  box-shadow:none!important;
  z-index:12;
}
body.device-mode-capable.layout-pc.in-app .nav button{
  flex:0 0 auto!important;
  flex-direction:column!important;
  gap:6px!important;
  padding:10px 4px!important;
  min-height:64px!important;
  border-radius:16px!important;
  font-size:11px!important;
}
body.device-mode-capable.layout-pc.in-app .nav button.on{
  background:var(--braise-soft, rgba(227,6,19,.10))!important;
}
body.device-mode-capable.layout-pc.in-app .scroll{
  padding-bottom:28px!important;
}
body.device-mode-capable.layout-pc.in-app .fab{
  bottom:28px!important;
  right:28px!important;
}
body.device-mode-capable.layout-pc:not(.in-app) #app{
  padding-left:0;
}
body.device-mode-capable.layout-pc:not(.in-app) .scroll{
  display:flex;justify-content:center;
}
body.device-mode-capable.layout-pc:not(.in-app) #view{
  width:100%;max-width:440px;
}

/* Contenu multi-colonnes en mode PC */
html.device-mode-capable.layout-pc .ds-services,
body.device-mode-capable.layout-pc .ds-services{
  grid-template-columns:repeat(6,1fr)!important;
  gap:12px!important;
}
html.device-mode-capable.layout-pc .home-discover-grid,
body.device-mode-capable.layout-pc .home-discover-grid{
  grid-template-columns:repeat(4,1fr)!important;
  gap:14px!important;
}
html.device-mode-capable.layout-pc .tiles,
body.device-mode-capable.layout-pc .tiles{
  grid-template-columns:repeat(3,1fr)!important;
  gap:16px!important;
}
html.device-mode-capable.layout-pc .momo,
body.device-mode-capable.layout-pc .momo{
  grid-template-columns:repeat(4,1fr)!important;
}
html.device-mode-capable.layout-pc .screen.pad,
body.device-mode-capable.layout-pc .screen.pad{
  padding:28px 32px 40px!important;
  max-width:100%;
}
html.device-mode-capable.layout-pc .ds-hero,
body.device-mode-capable.layout-pc .ds-hero{
  padding:16px 36px 40px!important;
  border-radius:0 0 28px 28px!important;
}
html.device-mode-capable.layout-pc .ds-hero-top,
body.device-mode-capable.layout-pc .ds-hero-top{margin-bottom:32px}
html.device-mode-capable.layout-pc .top,
body.device-mode-capable.layout-pc .top{
  padding-left:28px;padding-right:28px;
}
html.device-mode-capable.layout-pc .grid2,
body.device-mode-capable.layout-pc .grid2{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
html.device-mode-capable.layout-pc .tbl,
body.device-mode-capable.layout-pc .tbl,
html.device-mode-capable.layout-pc table,
body.device-mode-capable.layout-pc table{
  font-size:14px;
}
html.device-mode-capable.layout-pc .field input,
body.device-mode-capable.layout-pc .field input,
html.device-mode-capable.layout-pc .field select,
body.device-mode-capable.layout-pc .field select,
html.device-mode-capable.layout-pc .field textarea,
body.device-mode-capable.layout-pc .field textarea{
  max-width:520px;
}

/* Feuilles modales : dialogue centré sur PC */
html.device-mode-capable.layout-pc .scrim,
body.device-mode-capable.layout-pc .scrim{
  background:rgba(20,21,25,.45);
}
html.device-mode-capable.layout-pc .sheet,
body.device-mode-capable.layout-pc .sheet{
  left:50%!important;right:auto!important;bottom:auto!important;
  top:50%!important;
  transform:translate(-50%,-46%) scale(.98);
  width:min(480px, calc(100% - 48px))!important;
  max-height:min(86dvh, 720px)!important;
  border-radius:24px!important;
  padding:12px 24px 24px!important;
  box-shadow:0 28px 64px -20px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .22s ease;
}
html.device-mode-capable.layout-pc .sheet.on,
body.device-mode-capable.layout-pc .sheet.on{
  transform:translate(-50%,-50%) scale(1)!important;
  opacity:1;pointer-events:auto;
}
html.device-mode-capable.layout-pc .sheet .grab,
body.device-mode-capable.layout-pc .sheet .grab{display:none}

/* Mode mobile : ergonomie tactile */
html.layout-mobile .nav button,
body.layout-mobile .nav button,
body:not(.device-mode-capable) .nav button{
  min-height:var(--tap-min, 44px);
}
html.layout-mobile .field input,
body.layout-mobile .field input,
html.layout-mobile .field select,
body.layout-mobile .field select,
body:not(.device-mode-capable) .field input,
body:not(.device-mode-capable) .field select{
  font-size:16px;
}

@media(min-width:900px) and (max-width:1099px){
  html.device-mode-capable.layout-pc .ds-services,
  body.device-mode-capable.layout-pc .ds-services{
    grid-template-columns:repeat(4,1fr)!important;
  }
  html.device-mode-capable.layout-pc .home-discover-grid,
  body.device-mode-capable.layout-pc .home-discover-grid{
    grid-template-columns:repeat(3,1fr)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .device-mode-switcher button,
  html.device-mode-capable.layout-pc .sheet,
  body.device-mode-capable.layout-pc .sheet{transition:none}
}