/* =========================================================================
   Photobooth Human Day 2026 - RH Performances
   Design system : Material Design 3 (tokens implementes a la main, sans
   dependance JS) applique a la charte graphique RH Performances.
   Mobile first, aucun framework, ~9 Ko.
   ========================================================================= */

:root{
  /* --- Palette officielle RH Performances --- */
  --bleu:#006AB3;
  --bleu-clair:#0095D8;
  --bleu-pale:#E6F1F8;
  --orange:#E7511E;
  --orange-pale:#FFF0EB;
  --vert:#97BF0D;
  --jaune:#FCC200;
  --blanc:#FFFFFF;
  --gris-texte:#555555;
  --gris-bordure:#CCCCCC;
  --noir-corps:#1A1A1A;

  /* --- Tokens M3 remappes sur la charte --- */
  --md-primary:var(--bleu);
  --md-on-primary:var(--blanc);
  --md-primary-container:var(--bleu-pale);
  --md-on-primary-container:var(--bleu);
  --md-secondary:var(--orange);
  --md-on-secondary:var(--blanc);
  --md-surface:var(--blanc);
  --md-on-surface:var(--noir-corps);
  --md-on-surface-variant:var(--gris-texte);
  --md-outline:var(--gris-bordure);

  /* --- Fond de page : bleu clair RH Performances --- */
  --page-bg:#0095D8;
  --on-page:#FFFFFF;

  /* --- Formes (charte : 8px sur les blocs, pill sur les boutons M3) --- */
  --radius:8px;
  --radius-lg:16px;
  --radius-pill:999px;

  /* --- Elevations M3 --- */
  --elev-1:0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --elev-2:0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --elev-3:0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.30);

  --font:'Poppins', Arial, Helvetica, sans-serif;
  --stage-ratio:1080/1440;
}

*,*::before,*::after{box-sizing:border-box}

/* Prioritaire sur les display:flex des composants */
[hidden]{display:none !important}

html,body{margin:0;padding:0}

body{
  font-family:var(--font);
  background:var(--page-bg);
  color:var(--on-page);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  overscroll-behavior-y:contain;
}

img{max-width:100%;display:block}
button{font-family:inherit}

/* ============================ EN-TETE ============================ */
.app-bar{
  padding:calc(env(safe-area-inset-top, 0px) + 18px) 16px 10px;
  text-align:center;
}
.app-bar__logo{
  width:58%;
  max-width:280px;
  height:auto;
  margin:0 auto;
}
.app-bar__tagline{
  margin:10px auto 0;
  max-width:22ch;
  color:var(--blanc);
  font-size:clamp(17px,5vw,21px);
  font-weight:700;
  line-height:1.25;
  text-wrap:balance;
}

.app{
  max-width:480px;
  margin:0 auto;
  padding:16px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
}

/* ============================ SCENE ============================ */
.stage-wrap{margin:0 0 16px}

.stage{
  position:relative;
  width:100%;
  aspect-ratio:var(--stage-ratio);
  background:#0E1B26;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 0 0 3px rgba(255,255,255,.9), var(--elev-3);
}

.stage__video,
.stage__canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.stage__video{
  /* seule la zone photo occupe le haut : le bas est masque par la legende */
  height:83.33%;              /* 1200 / 1440 */
  bottom:auto;
}
.stage__video.is-mirrored{transform:scaleX(-1)}
.stage__canvas[hidden]{display:none}

/* --- Habillage (preview live uniquement) --- */
.frame{position:absolute;inset:0;pointer-events:none}
.frame[hidden]{display:none}

/* Position calee sur celle du rendu final : CFG.LOGO_TOP et CFG.LOGO_WIDTH */
.frame__logo{
  position:absolute;
  top:3.9%;
  left:50%;
  transform:translateX(-50%);
  width:40%;
  height:auto;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.35));
}

.frame__strip{
  position:absolute;
  left:0;right:0;
  top:83.33%;
  height:.7%;
  display:flex;
}
.frame__strip span{flex:1}

.frame__caption{
  position:absolute;
  left:0;right:0;bottom:0;
  height:15.97%;
  background:var(--bleu);
  color:var(--blanc);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  text-align:center;
}
.frame__caption strong{
  font-size:clamp(15px,4.6vw,21px);
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.1;
}
.frame__event{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(8px,2.4vw,14px);
  margin-top:4px;
  font-size:clamp(12px,3.6vw,16px);
  font-weight:600;
  color:rgba(255,255,255,.95);
}
.frame__event img{
  width:auto;
  height:clamp(24px,7vw,32px);
}

/* --- Etats --- */
.stage__overlay{
  position:absolute;
  inset:0 0 16.7% 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:24px;
  background:rgba(14,27,38,.92);
  color:var(--blanc);
  text-align:center;
  font-size:14px;
  z-index:3;
}
.stage__overlay[hidden]{display:none}
.stage__overlay--error{background:rgba(14,27,38,.96)}
.stage__errTitle{margin:0;font-weight:700;font-size:16px}
.stage__errText{margin:0;color:rgba(255,255,255,.8);font-size:13px;max-width:26ch}

.spinner{
  width:32px;height:32px;
  border:3px solid rgba(255,255,255,.25);
  border-top-color:var(--blanc);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.countdown{
  position:absolute;
  inset:0 0 16.7% 0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,106,179,.35);
  z-index:4;
}
.countdown[hidden]{display:none}
.countdown span{
  font-size:clamp(64px,22vw,110px);
  font-weight:700;
  color:var(--blanc);
  text-shadow:0 4px 18px rgba(0,0,0,.4);
  animation:pop .9s ease-out;
}
@keyframes pop{0%{transform:scale(.4);opacity:0}30%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:.85}}

.flash{
  position:absolute;inset:0;
  background:var(--blanc);
  opacity:0;
  pointer-events:none;
  z-index:5;
}
.flash.is-on{animation:flash .45s ease-out}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}

.icon-btn{
  position:absolute;
  top:10px;right:10px;
  z-index:6;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border:0;
  border-radius:var(--radius-pill);
  background:rgba(0,0,0,.42);
  color:var(--blanc);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s ease;
}
.icon-btn:active{background:rgba(0,0,0,.62)}
.icon-btn[hidden]{display:none}

/* ============================ BOUTONS M3 ============================ */
.actions{display:flex;flex-direction:column;gap:12px}

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:56px;
  padding:0 24px;
  border:0;
  border-radius:var(--radius-pill);
  font-size:16px;
  font-weight:600;
  letter-spacing:.01em;
  cursor:pointer;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:box-shadow .18s ease, background-color .18s ease, opacity .18s ease;
  overflow:hidden;
}
.btn:disabled{opacity:.42;cursor:not-allowed}

/* etat "state layer" M3 */
.btn::after{
  content:'';
  position:absolute;inset:0;
  background:currentColor;
  opacity:0;
  transition:opacity .15s ease;
}
.btn:active::after{opacity:.12}

.btn--filled{
  background:var(--orange);   /* charte : orange = CTA */
  color:var(--blanc);
  box-shadow:var(--elev-1);
}
.btn--filled:active{box-shadow:var(--elev-2)}

/* Sur fond bleu pale, les boutons secondaires passent en blanc pour rester lisibles */
.btn--tonal{
  background:var(--blanc);
  color:var(--bleu);
  box-shadow:var(--elev-1);
  min-height:52px;
  font-size:15px;
}
.btn--outlined{
  background:var(--blanc);
  color:var(--bleu);
  box-shadow:inset 0 0 0 1px var(--bleu-clair);
  min-height:52px;
  font-size:15px;
}
.btn--text{
  background:transparent;
  color:var(--gris-texte);
  min-height:44px;
  padding:0 16px;
  font-size:15px;
}
.btn--sm{min-height:44px;font-size:15px;padding:0 24px}
.btn--inline{min-height:44px;font-size:14px;padding:0 20px;background:var(--blanc);color:var(--bleu)}
.btn--full{grid-column:1 / -1}

.actions__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.actions__grid[hidden]{display:none}

.hint{
  margin:2px auto 0;
  max-width:32ch;
  text-wrap:balance;
  text-align:center;
  font-size:14px;
  font-weight:600;
  color:var(--blanc);
  text-shadow:0 1px 2px rgba(0,60,100,.25);
}

/* ============================ PIED ============================ */
.app-foot{
  margin-top:22px;
  padding-top:12px;
  border-top:2px solid var(--orange);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  font-weight:600;
  color:var(--blanc);
}
.app-foot a{color:var(--blanc);text-decoration:underline}

/* ============================ FEUILLES MODALES ============================ */
.sheet-scrim{
  position:fixed;
  inset:0;
  background:rgba(26,26,26,.45);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  z-index:50;
  animation:fade .18s ease-out;
}
.sheet-scrim[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}

.sheet{
  width:100%;
  max-width:480px;
  background:var(--blanc);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:8px 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
  box-shadow:var(--elev-3);
  animation:slideUp .22s cubic-bezier(.2,0,0,1);
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

.sheet__handle{
  width:32px;height:4px;
  background:var(--gris-bordure);
  border-radius:var(--radius-pill);
  margin:4px auto 14px;
}
.sheet__title{
  margin:0 0 6px;
  font-size:20px;
  font-weight:700;
  color:var(--bleu);
}
.sheet__text{
  margin:0 0 16px;
  font-size:14px;
  color:var(--gris-texte);
}
.sheet__text a{color:var(--bleu)}
.sheet__actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin-top:16px;
}

.field{display:block;margin-bottom:14px}
.field__label{
  display:block;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--gris-texte);
  margin-bottom:6px;
}
.field input{
  width:100%;
  min-height:52px;
  padding:0 14px;
  font-size:16px;              /* >=16px : evite le zoom auto iOS */
  font-family:inherit;
  color:var(--noir-corps);
  background:var(--blanc);
  border:1px solid var(--gris-bordure);
  border-radius:var(--radius);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus{
  border-color:var(--bleu);
  box-shadow:0 0 0 2px rgba(0,106,179,.18);
}

.check{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:13px;
  color:var(--gris-texte);
  line-height:1.4;
}
.check input{
  width:20px;height:20px;
  margin:1px 0 0;
  accent-color:var(--bleu);
  flex:0 0 auto;
}

.form-msg{
  margin:12px 0 0;
  font-size:13px;
  min-height:18px;
}
.form-msg.is-ok{color:#4e7a00;font-weight:600}
.form-msg.is-err{color:var(--orange);font-weight:600}

/* ============================ SNACKBAR M3 ============================ */
.snackbar{
  position:fixed;
  left:50%;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 20px);
  transform:translateX(-50%);
  max-width:calc(100% - 32px);
  padding:14px 18px;
  background:#2B2B2B;
  color:var(--blanc);
  font-size:14px;
  border-radius:var(--radius);
  box-shadow:var(--elev-3);
  z-index:60;
  animation:snack .2s ease-out;
}
.snackbar[hidden]{display:none}
@keyframes snack{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}

/* ============================ ECRANS LARGES ============================ */
@media (min-width:768px){
  .app{padding-top:24px}
  .app-bar__logo{height:64px}
  .stage{border-radius:var(--radius)}
  .sheet-scrim{align-items:center}
  .sheet{border-radius:var(--radius-lg);padding-bottom:20px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}