/* Crew Institut 2.33.76 — Poste de pilotage responsive universel
   Écran d'entrée après authentification. N'altère aucun module métier.
   Le panneau s'ancre désormais au viewport afin de ne jamais hériter d'une
   largeur maximale imposée par WordPress, Elementor ou le thème actif. */

.scp-root.is-launcher-open{min-height:100svh;overflow:hidden}

/* Le launcher sort volontairement du conteneur de page : il utilise tout le viewport. */
.scp-launcher{
  position:fixed;
  z-index:600;
  inset:0;
  width:100vw;
  height:100dvh;
  min-height:100svh;
  padding:
    max(clamp(10px,2.1vmin,30px),env(safe-area-inset-top))
    max(clamp(10px,2.1vmin,30px),env(safe-area-inset-right))
    max(clamp(12px,2.3vmin,34px),env(safe-area-inset-bottom))
    max(clamp(10px,2.1vmin,30px),env(safe-area-inset-left));
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 82% -8%,rgba(11,105,168,.24),transparent 30%),
    linear-gradient(135deg,#061522,#06111c 56%,#071c2a);
  color:var(--scp-text);
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* WordPress admin bar : ne jamais la recouvrir sur ordinateur/tablette. */
.admin-bar .scp-launcher{
  top:32px;
  height:calc(100dvh - 32px);
  min-height:calc(100svh - 32px);
}
@media (max-width:782px){
  .admin-bar .scp-launcher{
    top:46px;
    height:calc(100dvh - 46px);
    min-height:calc(100svh - 46px);
  }
}

.scp-launcher[hidden]{display:none!important}

.scp-switch-wrap{
  --rivet:rgba(255,255,255,.16);
  width:min(calc(100vw - clamp(20px,4vw,96px)),2200px);
  max-width:100%;
  max-height:100%;
  margin:auto;
  padding:clamp(16px,1.55vw,32px) clamp(16px,1.6vw,34px) clamp(18px,1.8vw,38px);
  border-radius:clamp(15px,1.15vw,24px);
  border:1px solid rgba(255,255,255,.07);
  background-image:
    radial-gradient(circle 2.6px at 18px 18px,var(--rivet),transparent 62%),
    radial-gradient(circle 2.6px at calc(100% - 18px) 18px,var(--rivet),transparent 62%),
    radial-gradient(circle 2.6px at 18px calc(100% - 18px),var(--rivet),transparent 62%),
    radial-gradient(circle 2.6px at calc(100% - 18px) calc(100% - 18px),var(--rivet),transparent 62%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.014) 0,rgba(255,255,255,.014) 1px,transparent 1px,transparent 5px),
    linear-gradient(160deg,#0e1f2c,#060f16 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 60px rgba(0,0,0,.4);
}

.scp-switch-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:clamp(12px,1.4vw,24px);
  padding-bottom:clamp(14px,1.25vw,24px);
  margin-bottom:clamp(14px,1.35vw,26px);
  border-bottom:1px solid rgba(255,255,255,.08)
}
.scp-switch-head-eyebrow{
  margin:0 0 clamp(6px,.55vw,10px);
  font:800 clamp(8px,.68vw,13px)/1.15 "SFMono-Regular",Consolas,"Roboto Mono",monospace;
  letter-spacing:.22em;
  color:var(--scp-cyan);
  text-transform:uppercase
}
.scp-switch-head-title{
  margin:0;
  font-size:clamp(19px,1.75vw,36px);
  font-weight:800;
  line-height:1.12;
  color:var(--scp-white);
  letter-spacing:-.02em
}
.scp-switch-head-clock{
  flex:none;
  text-align:right;
  font:800 clamp(18px,1.65vw,34px)/1 "SFMono-Regular",Consolas,"Roboto Mono",monospace;
  color:var(--scp-white);
  letter-spacing:.03em
}
.scp-switch-head-clock small{
  display:block;
  margin-top:clamp(4px,.45vw,8px);
  font:800 clamp(7px,.58vw,11px)/1 Inter,sans-serif;
  letter-spacing:.14em;
  color:var(--scp-muted);
  text-transform:uppercase;
  white-space:nowrap
}

.scp-switch-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(8px,1.05vw,20px)
}

.scp-switch{
  --led:#66c5ff;
  position:relative;
  min-width:0;
  min-height:clamp(118px,18dvh,215px);
  padding:clamp(12px,1.15vw,24px) clamp(12px,1.25vw,26px) clamp(11px,1.05vw,22px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-radius:clamp(10px,.8vw,16px);
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(160deg,rgba(28,50,68,.9),rgba(9,22,32,.95));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -10px 18px rgba(0,0,0,.35),0 10px 22px rgba(0,0,0,.35);
  text-align:left;
  cursor:pointer;
  font-family:inherit;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:transform .18s ease,box-shadow .24s ease,border-color .24s ease,background .24s ease,filter .24s ease
}
.scp-switch::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at 78% 16%,color-mix(in srgb,var(--led) 23%,transparent),transparent 42%);
  transition:opacity .26s ease
}
@media (hover:hover) and (pointer:fine){
  .scp-switch:hover{
    border-color:color-mix(in srgb,var(--led) 45%,rgba(255,255,255,.09));
    transform:translateY(-2px)
  }
}
.scp-switch:active,.scp-switch.is-pressed{
  transform:translateY(1px) scale(.992);
  border-color:color-mix(in srgb,var(--led) 58%,rgba(255,255,255,.12));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 6px 14px rgba(0,0,0,.34),0 0 24px color-mix(in srgb,var(--led) 18%,transparent),0 4px 10px rgba(0,0,0,.3);
  filter:brightness(1.075)
}
.scp-switch:active::after,.scp-switch.is-pressed::after{opacity:1}
.scp-switch[aria-disabled="true"]{cursor:default}
.scp-switch-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.scp-switch-icon{
  width:clamp(32px,2.55vw,52px);
  height:clamp(32px,2.55vw,52px);
  display:grid;
  place-items:center;
  border-radius:clamp(8px,.65vw,12px);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:var(--led);
  transition:box-shadow .24s ease,background .24s ease
}
.scp-switch.is-pressed .scp-switch-icon{
  background:color-mix(in srgb,var(--led) 12%,rgba(255,255,255,.04));
  box-shadow:0 0 18px color-mix(in srgb,var(--led) 18%,transparent)
}
.scp-switch-icon svg{width:clamp(17px,1.35vw,27px);height:clamp(17px,1.35vw,27px)}
.scp-switch-led{
  width:clamp(7px,.62vw,12px);
  height:clamp(7px,.62vw,12px);
  border-radius:50%;
  margin-top:4px;
  background:var(--led);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--led) 20%,transparent),0 0 9px 1px var(--led);
  animation:scpSwitchBlink 2.6s ease-in-out infinite;
  transition:transform .22s ease,box-shadow .22s ease
}
.scp-switch.is-pressed .scp-switch-led{
  transform:scale(1.28);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--led) 22%,transparent),0 0 18px 3px var(--led)
}
@keyframes scpSwitchBlink{0%,100%{opacity:1}50%{opacity:.52}}
.scp-switch-label{
  margin:clamp(8px,.75vw,15px) 0 0;
  font-size:clamp(11.2px,.96vw,20px);
  font-weight:800;
  line-height:1.2;
  color:var(--scp-white);
  letter-spacing:.01em;
  overflow-wrap:anywhere
}
.scp-switch-foot{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(5px,.55vw,10px);
  margin-top:clamp(3px,.32vw,6px);
  min-width:0
}
.scp-switch-sub{
  min-width:0;
  margin:0;
  font-size:clamp(8px,.68vw,14px);
  color:var(--scp-muted);
  line-height:1.35;
  overflow-wrap:anywhere
}
.scp-switch-code{
  flex:none;
  font:700 clamp(7px,.61vw,12px)/1 "SFMono-Regular",Consolas,"Roboto Mono",monospace;
  letter-spacing:.12em;
  color:color-mix(in srgb,var(--led) 70%,var(--scp-muted));
  opacity:.9
}
.scp-switch.is-caution{
  --led:#ffb642;
  background:linear-gradient(160deg,rgba(72,52,10,.55),rgba(9,22,32,.95));
  border-color:rgba(255,182,66,.28)
}
.scp-switch.is-caution .scp-switch-label{text-transform:uppercase;letter-spacing:.04em}

/* Bouton de retour commun dans les pages internes. */
.scp-launcher-return{display:inline-flex;align-items:center;gap:7px;border-color:rgba(112,207,244,.28);background:rgba(5,45,72,.42)}
.scp-launcher-return svg{width:16px;height:16px}
.scp-launcher-return:active{box-shadow:0 0 18px rgba(112,207,244,.16)}

/* Profil PNC accessible depuis le panneau. */
.scp-profile-panel{padding:20px}
.scp-profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:18px}
.scp-profile-item{padding:15px;border:1px solid var(--scp-line);border-radius:12px;background:rgba(255,255,255,.025)}
.scp-profile-item span{display:block;color:var(--scp-muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.scp-profile-item strong{display:block;margin-top:6px;color:var(--scp-white);font-size:14px;overflow-wrap:anywhere}

/* Très grands écrans / 2K / 4K : conserver une vraie présence visuelle sans étirer à l'infini. */
@media (min-width:1800px) and (min-height:900px){
  .scp-switch-wrap{width:min(calc(100vw - 7vw),2200px)}
  .scp-switch{min-height:clamp(165px,18.5dvh,230px)}
}

/* Ordinateurs portables et tablettes paysage. */
@media (orientation:landscape) and (min-width:768px) and (max-height:900px){
  .scp-launcher{
    align-items:center;
    padding:
      max(10px,env(safe-area-inset-top))
      max(14px,env(safe-area-inset-right))
      max(12px,env(safe-area-inset-bottom))
      max(14px,env(safe-area-inset-left))
  }
  .scp-switch-wrap{width:min(calc(100vw - 28px),1800px);padding:clamp(14px,1.4vw,24px)}
  .scp-switch-head{padding-bottom:clamp(11px,1vw,17px);margin-bottom:clamp(11px,1vw,17px)}
  .scp-switch{min-height:clamp(105px,17.2dvh,158px)}
}

/* Tablettes portrait : toujours 3 x 3, mais avec dimensions liées au viewport. */
@media (orientation:portrait) and (min-width:621px) and (max-width:1100px){
  .scp-launcher{
    padding:
      max(18px,env(safe-area-inset-top))
      max(20px,env(safe-area-inset-right))
      max(22px,env(safe-area-inset-bottom))
      max(20px,env(safe-area-inset-left))
  }
  .scp-switch-wrap{width:100%;padding:clamp(20px,2.5vw,28px) clamp(18px,2.4vw,26px) clamp(22px,2.8vw,30px)}
  .scp-switch-grid{gap:clamp(10px,1.6vw,15px)}
  .scp-switch{min-height:clamp(135px,16.5dvh,178px);padding:clamp(13px,1.8vw,18px)}
  .scp-switch-label{font-size:clamp(12.5px,1.65vw,16px)}
  .scp-switch-sub{font-size:clamp(8.8px,1.1vw,11px)}
  .scp-switch-code{font-size:clamp(7.4px,.95vw,9px)}
}

/* Téléphones paysage : deux colonnes lisibles et tactiles. */
@media (orientation:landscape) and (max-height:560px) and (max-width:1100px){
  .scp-launcher{
    align-items:flex-start;
    padding:
      max(7px,env(safe-area-inset-top))
      max(10px,env(safe-area-inset-right))
      max(8px,env(safe-area-inset-bottom))
      max(10px,env(safe-area-inset-left))
  }
  .scp-switch-wrap{width:100%;padding:10px 12px 11px;border-radius:14px}
  .scp-switch-head{padding-bottom:8px;margin-bottom:8px;gap:8px}
  .scp-switch-head-eyebrow{font-size:7.2px;margin-bottom:3px;letter-spacing:.17em}
  .scp-switch-head-title{font-size:clamp(14px,2.5vw,18px)}
  .scp-switch-head-clock{font-size:clamp(14px,2.45vw,18px)}
  .scp-switch-head-clock small{font-size:6.4px;margin-top:3px}
  .scp-switch-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .scp-switch{min-height:108px;padding:10px 11px;border-radius:9px}
  .scp-switch-icon{width:25px;height:25px;border-radius:6px}
  .scp-switch-icon svg{width:14px;height:14px}
  .scp-switch-led{width:6px;height:6px}
  .scp-switch-label{font-size:clamp(9.2px,1.55vw,11px);margin-top:4px}
  .scp-switch-foot{gap:3px;margin-top:2px}
  .scp-switch-sub{font-size:clamp(6.5px,1.1vw,7.8px);line-height:1.16}
  .scp-switch-code{font-size:clamp(6px,.95vw,7px)}
}

/* Téléphones portrait : deux colonnes pour éviter les cartes trop étroites. */
@media (orientation:portrait) and (max-width:620px){
  .scp-launcher{
    align-items:flex-start;
    padding:
      max(12px,env(safe-area-inset-top))
      max(10px,env(safe-area-inset-right))
      max(16px,env(safe-area-inset-bottom))
      max(10px,env(safe-area-inset-left))
  }
  .scp-switch-wrap{width:100%;padding:clamp(14px,4vw,19px) clamp(10px,3.5vw,15px) clamp(16px,4.3vw,21px);border-radius:16px}
  .scp-switch-head{padding-bottom:clamp(11px,3vw,15px);margin-bottom:clamp(11px,3vw,15px);gap:8px}
  .scp-switch-head-eyebrow{font-size:clamp(7.2px,2vw,8.3px);line-height:1.25;letter-spacing:.17em;max-width:62vw}
  .scp-switch-head-title{font-size:clamp(16px,4.8vw,20px)}
  .scp-switch-head-clock{font-size:clamp(16px,4.8vw,20px)}
  .scp-switch-head-clock small{font-size:clamp(6.3px,1.8vw,7.4px);margin-top:4px}
  .scp-switch-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,2.4vw,11px)}
  .scp-switch{min-height:clamp(118px,16dvh,145px);padding:clamp(10px,2.8vw,13px);border-radius:10px}
  .scp-switch-icon{width:clamp(29px,8.5vw,34px);height:clamp(29px,8.5vw,34px);border-radius:7px}
  .scp-switch-icon svg{width:clamp(15px,4.4vw,18px);height:clamp(15px,4.4vw,18px)}
  .scp-switch-led{width:7px;height:7px}
  .scp-switch-label{font-size:clamp(11px,3.4vw,13px);margin-top:8px;line-height:1.2}
  .scp-switch-foot{flex-direction:column;align-items:flex-start;gap:2px}
  .scp-switch-sub{font-size:clamp(8px,2.25vw,9.5px);line-height:1.25}
  .scp-switch-code{font-size:clamp(7px,2vw,8px)}
  .scp-profile-grid{grid-template-columns:1fr}
}

/* Très petits smartphones (320 px et moins) : empêcher tout débordement horizontal. */
@media (max-width:340px){
  .scp-switch-wrap{padding-inline:8px}
  .scp-switch-grid{gap:5px}
  .scp-switch{min-height:105px;padding:7px 6px}
  .scp-switch-label{font-size:9.2px}
  .scp-switch-sub{font-size:6.5px}
  .scp-switch-code{font-size:6.1px}
}

@media (max-width:420px){
  .scp-launcher-return{min-width:38px;padding-inline:10px}
  .scp-launcher-return .scp-btn-label{display:none}
}

@media (prefers-reduced-motion:reduce){
  .scp-switch,.scp-switch::after,.scp-switch-icon,.scp-switch-led{transition:none!important}
  .scp-switch-led{animation:none!important}
}