/* Adeline Selfie : page visiteur. Couleurs = charte Adeline (variables fournies par Adeline Core, avec valeurs de secours). */
.adeline-selfie, .adeline-selfie * { box-sizing: border-box; }
.adeline-selfie {
  --as-bg: var(--adeline-bg, #210019);
  --as-card: var(--adeline-card, #471039);
  --as-pink: var(--adeline-pink, #F50087);
  --as-pink-b: var(--adeline-pink-bright, #FF3AA5);
  --as-pink-l: var(--adeline-pink-light, #FF8DCC);
  --as-white: var(--adeline-white, #FFFFFF);
  --as-text: var(--adeline-text, #F7EAF2);
  --as-muted: var(--adeline-muted, #C9A9BD);
  --as-border: var(--adeline-border, rgba(255,141,204,.22));
  --as-font: var(--adeline-font, 'Josefin Sans', sans-serif);
  font-family: var(--as-font);
  color: var(--as-text);
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px;
  line-height: 1.5;
}
.adeline-selfie [hidden] { display: none !important; }

.as-box {
  background: rgba(71,16,57,.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--as-border);
  border-radius: 24px;
  padding: 28px 24px 26px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.as-head { text-align: center; margin-bottom: 14px; }
.as-title { margin: 0 0 6px; font-size: clamp(26px, 5.4vw, 36px); font-weight: 700; color: var(--as-white); letter-spacing: .01em; line-height: 1.15; }
.as-intro { margin: 0; color: var(--as-text); font-size: 17px; }

/* Message du moment */
.as-notice { text-align: center; margin: 14px 0 20px; }
.as-notice p { margin: 0 auto; max-width: 560px; font-size: 16px; color: var(--as-text); background: rgba(71,16,57,.8); border: 1px solid var(--as-border); border-radius: 16px; padding: 12px 16px; }
.as-notice strong { color: var(--as-white); }
.as-cta { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; align-items: center; margin-top: 14px; }

/* Boutons */
.adeline-selfie .as-btn {
  appearance: none; -webkit-appearance: none; cursor: pointer; text-decoration: none; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 26px;
  font: 700 16px/1.2 var(--as-font); letter-spacing: .02em; border-radius: 999px; border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.adeline-selfie .as-btn:focus-visible, .adeline-selfie .as-pick:focus-visible, .adeline-selfie .as-shutter:focus-visible { outline: 3px solid var(--as-pink-l); outline-offset: 3px; }
.adeline-selfie .as-btn--primary { background: var(--as-pink); color: var(--as-white); box-shadow: 0 0 22px rgba(245,0,135,.35); }
.adeline-selfie .as-btn--primary:hover { background: var(--as-pink-b); transform: translateY(-1px); color: var(--as-white); }
.adeline-selfie .as-btn--ghost { background: rgba(71,16,57,.7); color: var(--as-white); border-color: var(--as-border); }
.adeline-selfie .as-btn--ghost:hover { background: rgba(71,16,57,1); color: var(--as-white); }
.adeline-selfie .as-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.adeline-selfie .as-link { color: var(--as-pink-l); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Choix du selfie */
.as-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 640px) { .as-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.adeline-selfie .as-pick {
  position: relative; padding: 0; border: 1px solid var(--as-border); border-radius: 20px; overflow: hidden;
  background: var(--as-card); cursor: pointer; display: block; aspect-ratio: 3 / 4; transition: transform .18s ease, box-shadow .18s ease;
}
.adeline-selfie .as-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adeline-selfie .as-pick:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 0 26px rgba(245,0,135,.35); }
.adeline-selfie .as-pick.is-locked { cursor: default; opacity: .85; }
.as-go {
  position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 8px 10px; border-radius: 999px; text-align: center;
  background: var(--as-pink); color: var(--as-white); font: 700 14px/1.2 var(--as-font);
}
.as-new { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(33,0,25,.82); color: var(--as-pink-l); border: 1px solid var(--as-border); font: 700 12px/1.2 var(--as-font); letter-spacing: .06em; text-transform: uppercase; }
.as-empty { text-align: center; color: var(--as-muted); margin: 10px 0 0; }

/* Prise de vue */
.as-stage {
  position: relative; width: 100%; margin: 0 auto; border-radius: 20px; overflow: hidden;
  background: var(--as-bg); border: 1px solid var(--as-border); box-shadow: 0 0 30px rgba(245,0,135,.18);
}
.as-canvas { display: block; width: 100%; height: 100%; }
.as-video { position: absolute; width: 2px; height: 2px; opacity: 0; pointer-events: none; left: 0; top: 0; }
.as-overlay { position: absolute; left: 0; right: 0; display: flex; justify-content: center; align-items: center; text-align: center; padding: 10px 16px; }
.as-hint { top: 12px; }
.as-hint { color: var(--as-white); font: 700 16px/1.2 var(--as-font); text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.as-load { inset: 0; flex-direction: column; gap: 14px; background: rgba(33,0,25,.78); color: var(--as-white); font: 700 17px/1.3 var(--as-font); }
.as-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,141,204,.3); border-top-color: var(--as-pink-b); animation: as-rot .9s linear infinite; }
@keyframes as-rot { to { transform: rotate(360deg); } }
.as-count { inset: 0; font: 700 min(34vw, 190px)/1 var(--as-font); color: var(--as-white); text-shadow: 0 6px 40px rgba(245,0,135,.7), 0 2px 8px rgba(0,0,0,.6); pointer-events: none; }
.as-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.as-flash.go { animation: as-flash .5s ease-out; }
@keyframes as-flash { 0% { opacity: .95; } 100% { opacity: 0; } }
.as-err { inset: 0; flex-direction: column; gap: 14px; background: rgba(33,0,25,.92); color: var(--as-text); font-size: 17px; }
.as-err p { margin: 0; max-width: 420px; }
.as-simple { text-align: center; color: var(--as-muted); font-size: 14px; margin: 8px 0 0; }
.as-actions { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 16px; gap: 12px; }
.as-actions .as-btn { justify-self: start; }
.adeline-selfie .as-shutter {
  width: 76px; height: 76px; border-radius: 50%; cursor: pointer; padding: 0; border: 4px solid var(--as-white);
  background: var(--as-pink); box-shadow: 0 0 0 4px rgba(255,141,204,.28), 0 0 26px rgba(245,0,135,.5); transition: transform .12s ease;
}
.adeline-selfie .as-shutter:hover:not(:disabled) { transform: scale(1.06); }
.adeline-selfie .as-shutter:active:not(:disabled) { transform: scale(.94); }
.adeline-selfie .as-shutter:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* Résultat */
.as-result { text-align: center; }
.as-result img { display: inline-block; max-width: 100%; max-height: 78vh; height: auto; border-radius: 18px; border: 1px solid var(--as-border); box-shadow: 0 10px 40px rgba(0,0,0,.45); }
.as-help { text-align: center; color: var(--as-text); font-size: 17px; margin: 16px 0 10px; }
.as-done { text-align: center; color: var(--as-white); font: 700 26px/1.2 var(--as-font); margin: 18px 0 6px; }
.as-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 10px 0; }
.as-warn { text-align: center; color: var(--as-pink-l); margin: 10px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .as-spin, .as-flash.go { animation: none; }
  .adeline-selfie .as-pick, .adeline-selfie .as-btn, .adeline-selfie .as-shutter { transition: none; }
}
@media (max-width: 480px) {
  .as-box { padding: 22px 14px 20px; border-radius: 20px; }
  .adeline-selfie .as-btn { width: 100%; }
  .as-row { flex-direction: column; }
  .as-actions .as-btn { width: auto; padding: 12px 18px; }
}

.as-off { position: absolute; top: 44px; left: 10px; right: 10px; text-align: center; padding: 4px 10px; border-radius: 999px; background: rgba(33,0,25,.88); color: var(--as-pink-l); border: 1px solid var(--as-border); font: 700 12px/1.2 var(--as-font); }
.as-diag { margin-top: 10px !important; color: var(--as-white) !important; }

/* Fond de la charte sur toute la page, du menu au pied de page, de gauche à droite */
body.adeline-selfie-on { background: linear-gradient(90deg, #50053F 0%, #3A062E 55%, #210019 100%) fixed !important; background-color: #3A062E !important; }
body.adeline-selfie-on :is(#page, #content, .site, .site-content, .ast-container, .ast-page-builder-template, #primary, #main, .site-main, .content-area, article, .entry-content, .page, .hentry, .ast-article-single, .elementor-location-single, .elementor-location-single .elementor, .elementor-section, .e-con, .e-con-inner, .elementor-container, .elementor-widget-wrap, .elementor-widget-shortcode):not(:is(header, footer, .elementor-location-header, .elementor-location-footer, .site-header, .site-footer, #masthead, #colophon) *) { background: transparent !important; box-shadow: none; }
/* Filet de sécurité : si le thème garde un conteneur blanc, la zone du plugin couvre quand même toute la largeur */
.adeline-selfie { position: relative; isolation: isolate; padding-top: 24px; padding-bottom: 32px; }
.adeline-selfie::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; background: linear-gradient(90deg, #50053F 0%, #3A062E 55%, #210019 100%); }
html, body.adeline-selfie-on { overflow-x: clip; }
.as-hint span { display: block; }
.as-hint { background: rgba(33,0,25,.55); padding: 8px 16px; border-radius: 999px; width: max-content; max-width: 92%; left: 50%; transform: translateX(-50%); right: auto; }