/* ============================================================
   FOPIRO LANDING V4 — 19/09/2026
   - accueil fidèle à la maquette noire fournie
   - téléphone, wordmark et trait-coeur restent des fichiers remplaçables
   - écrans login / inscription / vérification conservent le style Fopiro
   ============================================================ */

/* ---------- ACCUEIL EXACT / DESKTOP ---------- */
.fopiro-home {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
  isolation: isolate;
  background:
    radial-gradient(circle at 26% 92%, rgba(130,66,27,.16), transparent 24%),
    radial-gradient(circle at 40% 55%, rgba(255,122,74,.035), transparent 30%),
    #020202 !important;
  color: #fff !important;
}

.fopiro-home::before,
.fopiro-home::after { content: none !important; }

.fopiro-home-scene {
  position: absolute;
  inset: 0 43% 0 0;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

.fopiro-home-phone {
  position: absolute;
  left: clamp(112px, 13.7vw, 190px);
  top: clamp(74px, 10.5vh, 108px);
  width: clamp(260px, 25.2vw, 355px);
  height: auto;
  z-index: 5;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 22px 34px rgba(0,0,0,.62));
}

.fopiro-heart-line {
  position: absolute;
  left: clamp(326px, 31.5vw, 452px);
  top: clamp(220px, 31vh, 258px);
  width: clamp(300px, 31vw, 430px);
  height: auto;
  z-index: 3;
  opacity: .98;
  filter: drop-shadow(0 0 8px rgba(255,154,113,.42));
}

.fopiro-rock-ground {
  position: absolute;
  left: -9vw;
  right: -5vw;
  bottom: 4.5vh;
  height: 30vh;
  z-index: 2;
  transform: skewX(-3deg);
  background:
    radial-gradient(ellipse at 15% 48%, #2c251f 0 7%, #13110f 8% 14%, transparent 15%),
    radial-gradient(ellipse at 28% 35%, #211d19 0 9%, #0c0b0a 10% 17%, transparent 18%),
    radial-gradient(ellipse at 41% 56%, #2c241d 0 10%, #11100e 11% 19%, transparent 20%),
    radial-gradient(ellipse at 56% 42%, #241e19 0 8%, #0f0e0d 9% 18%, transparent 19%),
    radial-gradient(ellipse at 67% 62%, #191614 0 10%, #080808 11% 22%, transparent 23%),
    linear-gradient(180deg, transparent 0 35%, rgba(38,29,23,.72) 57%, #070707 100%);
  filter: contrast(1.15) brightness(.76);
  opacity: .94;
}

.fopiro-love-note {
  position: absolute;
  z-index: 2;
  color: rgba(255,255,255,.105);
  font-family: "Segoe Script", "Bradley Hand", cursive;
  font-style: italic;
  white-space: nowrap;
  letter-spacing: .02em;
  text-shadow: 0 0 10px rgba(255,255,255,.025);
}
.note-fr { left: 3vw; top: 20vh; font-size: 24px; transform: rotate(-7deg); }
.note-en { left: 35vw; top: 20vh; font-size: 24px; transform: rotate(-8deg); }
.note-es { left: 4vw; top: 38vh; font-size: 25px; transform: rotate(-8deg); }
.note-de { left: 86vw; top: 18vh; font-size: 22px; transform: rotate(-9deg); }
.note-cn { left: 89vw; top: 32vh; font-size: 28px; transform: rotate(-5deg); }
.note-it { left: 89vw; top: 50vh; font-size: 25px; transform: rotate(-8deg); }
.note-pt { left: 88vw; top: 69vh; font-size: 22px; transform: rotate(-7deg); }

.fopiro-home-panel {
  position: absolute;
  z-index: 10;
  left: 52.2%;
  top: 50%;
  width: min(31.8vw, 405px);
  min-width: 350px;
  transform: translateY(-49%);
}

.fopiro-home-wordmark {
  display: block;
  width: min(100%, 280px);
  height: auto;
  margin: 0 auto 42px;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.fopiro-home-actions { display: grid; gap: 12px; }
.fopiro-home-action {
  width: 100%;
  min-height: 62px;
  padding: 0 22px;
  border: 1px solid rgba(255,255,255,.27);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(12,12,14,.84), rgba(5,5,6,.91));
  color: #fff;
  display: grid;
  grid-template-columns: 34px 1fr 26px;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 7px 28px rgba(0,0,0,.18);
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.fopiro-home-action:hover { border-color: rgba(255,255,255,.5); background: rgba(15,15,17,.96); transform: translateY(-1px); }
.fopiro-home-action:active { transform: scale(.992); }
.fopiro-home-action .material-symbols-rounded { font-size: 29px; font-weight: 300; }
.fopiro-action-chevron { justify-self: end; font-size: 26px !important; color: rgba(255,255,255,.88); }

.fopiro-google-g {
  font-size: 29px;
  line-height: 1;
  font-weight: 950;
  font-family: Arial, sans-serif;
  background: conic-gradient(from -45deg, #4285f4 0 25%, #34a853 0 45%, #fbbc05 0 68%, #ea4335 0 84%, #4285f4 0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-align: center;
}

.fopiro-home-downloads { margin-top: 31px; }
.fopiro-home-download-title {
  margin-bottom: 12px;
  color: rgba(255,255,255,.58);
  font-size: 13px;
  text-align: center;
}
.fopiro-home-store-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fopiro-home-store {
  min-height: 58px;
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,.27);
  border-radius: 14px;
  background: rgba(8,8,10,.76);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
}
.fopiro-home-store .material-symbols-rounded { font-size: 28px; }
.fopiro-home-store:disabled { opacity: 1; cursor: default; }
.fopiro-home-store small { display: block; font-size: 11px; font-weight: 500; color: rgba(255,255,255,.66); margin-top: 1px; }
.fopiro-apple-mark {
  width: 27px; height: 30px; display: inline-grid; place-items:center; color:#fff; font-size:0;
  position:relative;
}
.fopiro-apple-mark::before { content:""; width:21px; height:23px; border-radius:45% 45% 50% 50%; background:#fff; transform:rotate(-8deg); }
.fopiro-apple-mark::after { content:""; position:absolute; width:8px; height:5px; border-radius:8px 0 8px 0; background:#fff; top:0; left:15px; transform:rotate(-35deg); }

.fopiro-home-footer {
  position: absolute;
  z-index: 12;
  left: 50%;
  bottom: 5.2vh;
  transform: translateX(-50%);
  color: rgba(255,255,255,.56);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.fopiro-home .lang-switch {
  top: 24px !important;
  right: 51px !important;
  min-width: 157px;
  height: 46px;
  padding: 0 12px !important;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.26) !important;
  border-radius: 999px !important;
  background: rgba(8,8,10,.70) !important;
  backdrop-filter: blur(14px);
  color: #fff !important;
}
.fopiro-home .lang-switch .material-symbols-rounded { font-size: 22px; color:#fff; }
.fopiro-home .lang-switch select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  color: #fff;
  background: transparent;
  border: 0;
  outline: 0;
  font-weight: 650;
  font-size: 14px;
  cursor: pointer;
  padding: 0 22px 0 0;
  background-image: linear-gradient(45deg, transparent 50%, #aaa 50%), linear-gradient(135deg, #aaa 50%, transparent 50%);
  background-position: calc(100% - 9px) 50%, calc(100% - 4px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.fopiro-home .lang-switch select option { color:#111; background:#fff; }

/* ---------- AUTH (login / inscription / vérification) ---------- */
.brand-page:not(.fopiro-home),
.brand-page.has-admin-cover:not(.fopiro-home) {
  --fopiro-panel: rgba(3, 3, 4, .86);
  --fopiro-border: rgba(255,255,255,.13);
  min-height: 100vh !important;
  min-height: 100dvh !important;
  background: #000 !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: max(24px, var(--safe-top)) clamp(24px, 6vw, 112px) max(24px, var(--safe-bottom)) !important;
  overflow: hidden !important;
  isolation: isolate;
}
.brand-page:not(.fopiro-home)::before {
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:url('/assets/img/fopiro-hero-match.png?v=20260919-v4') 15% 50% / auto 118vh no-repeat !important;
  opacity:.96 !important;
  z-index:-3 !important;
}
.brand-page:not(.fopiro-home)::after {
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:linear-gradient(90deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.1) 35%,rgba(0,0,0,.55) 55%,#000 82%) !important;
  z-index:-2 !important;
}
.fopiro-corner-mark { position:absolute; top:max(18px,var(--safe-top)); left:20px; z-index:12; width:48px; height:66px; border-radius:14px; overflow:hidden; background:#000; box-shadow:0 12px 34px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.08); }
.fopiro-corner-mark img { width:100%; height:100%; object-fit:cover; }
.brand-page:not(.fopiro-home) .auth-shell { width:min(100%,430px) !important; position:relative !important; z-index:5 !important; margin:0 !important; }
.brand-page:not(.fopiro-home) .brand-hero { margin:0 0 14px !important; min-height:104px; display:grid; place-items:center; overflow:hidden; }
.fopiro-wordmark-frame { width:min(100%,342px); height:112px; overflow:hidden; border-radius:18px; background:#000; }
.fopiro-wordmark-image { width:100%; height:100%; display:block; object-fit:cover; object-position:center 67%; }
.brand-page:not(.fopiro-home) .auth-card { background:var(--fopiro-panel) !important; color:#fff !important; border:1px solid var(--fopiro-border) !important; border-radius:24px !important; padding:20px !important; box-shadow:0 24px 80px rgba(0,0,0,.56) !important; backdrop-filter:blur(22px) saturate(118%); }
.brand-page:not(.fopiro-home) .auth-title { color:#fff !important; }
.brand-page:not(.fopiro-home) .auth-subtitle,
.brand-page:not(.fopiro-home) .auth-card .field small { color:rgba(255,255,255,.64) !important; }
.brand-page:not(.fopiro-home) .auth-card .input,
.brand-page:not(.fopiro-home) .auth-card .select,
.brand-page:not(.fopiro-home) .auth-card .textarea { background:rgba(20,20,22,.96) !important; color:#fff !important; border-color:rgba(255,255,255,.11) !important; }
.brand-page:not(.fopiro-home) .auth-card .input::placeholder { color:rgba(255,255,255,.42); }
.brand-page:not(.fopiro-home) .auth-card .btn-light { color:#111 !important; background:#fff !important; }
.brand-page:not(.fopiro-home) .auth-card .btn-dark { color:#fff !important; background:#0d0d0f !important; border-color:rgba(255,255,255,.15) !important; }
.brand-page:not(.fopiro-home) .auth-back { top:max(94px,calc(var(--safe-top) + 82px)) !important; left:20px !important; color:#fff !important; background:rgba(8,8,9,.78) !important; border:1px solid rgba(255,255,255,.12) !important; }
.brand-page:not(.fopiro-home) .lang-switch { top:max(18px,var(--safe-top)) !important; right:20px !important; background:rgba(8,8,9,.72) !important; border:1px solid rgba(255,255,255,.11); }
.brand-page:not(.fopiro-home) .brand-footer { margin-top:14px !important; color:rgba(255,255,255,.72) !important; opacity:1 !important; font-size:12px !important; font-weight:800 !important; }
.fopiro-adult-check { display:flex; gap:10px; align-items:flex-start; line-height:1.45; font-size:12px; color:rgba(255,255,255,.78); cursor:pointer; }
.fopiro-adult-check input { margin-top:3px; accent-color:#ff4d6d; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1050px) {
  .fopiro-home-panel { left:auto; right:5vw; width:min(40vw,405px); min-width:330px; }
  .fopiro-home-phone { left:4vw; width:32vw; }
  .fopiro-heart-line { left:29vw; width:34vw; }
}

@media (max-width: 760px) {
  .fopiro-home { overflow:auto !important; padding:88px 15px 26px !important; min-height:100dvh !important; }
  .fopiro-home-scene { position:relative; inset:auto; width:100%; height:44vh; min-height:330px; margin-bottom:-22px; }
  .fopiro-home-phone { left:50%; top:-14px; width:min(64vw,300px); transform:translateX(-50%); }
  .fopiro-heart-line { left:50%; top:36%; width:min(80vw,380px); transform:translateX(-4%); opacity:.78; }
  .fopiro-rock-ground { left:-20vw; right:-20vw; bottom:0; height:19vh; }
  .fopiro-love-note { display:none; }
  .fopiro-home-panel { position:relative; inset:auto; transform:none; width:100%; min-width:0; max-width:430px; margin:0 auto; }
  .fopiro-home-wordmark { width:235px; margin-bottom:26px; }
  .fopiro-home-action { min-height:56px; font-size:16px; }
  .fopiro-home-downloads { margin-top:22px; }
  .fopiro-home-store-row { gap:10px; }
  .fopiro-home-store { min-height:54px; padding:8px; font-size:12px; }
  .fopiro-home-footer { position:relative; left:auto; bottom:auto; transform:none; text-align:center; margin:38px auto 4px; white-space:normal; line-height:1.55; }
  .fopiro-home .lang-switch { top:18px !important; right:14px !important; min-width:145px; }

  .brand-page:not(.fopiro-home),
  .brand-page.has-admin-cover:not(.fopiro-home) {
    align-items:flex-end !important;
    justify-content:center !important;
    padding:max(16px,var(--safe-top)) 14px max(14px,var(--safe-bottom)) !important;
  }
  .brand-page:not(.fopiro-home)::before { background-position:50% -2vh !important; background-size:auto 82vh !important; }
  .brand-page:not(.fopiro-home)::after { background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.15) 30%,rgba(0,0,0,.9) 62%,#000 100%) !important; }
  .brand-page:not(.fopiro-home) .auth-shell { width:min(100%,520px) !important; }
  .brand-page:not(.fopiro-home) .brand-hero { display:none !important; }
  .fopiro-corner-mark { width:42px; height:58px; left:12px; }
  .brand-page:not(.fopiro-home) .auth-back { top:max(82px,calc(var(--safe-top) + 70px)) !important; left:12px !important; }
}

.fopiro-store-logo{width:27px;height:30px;object-fit:contain;display:block;filter:none}.fopiro-home-store strong{font-weight:800}.fopiro-home-store span{line-height:1.05}