@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Caveat:wght@400&display=swap');

a{color:inherit}

:root{
--gold:#C9A227; /* doré doux */
--deep:#1E1B13; /* brun profond */
--paper:#faf3e0; /* parchemin */
--ink:#3b2f2f;
}

.wrapper {
  min-height: 100svh;
  background: linear-gradient(70deg,midnightblue 0%, black 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 45px;
  padding: 50px;
}

.scroll{
width:min(920px,95vw);background: url('/wishlist/bg.jpg');color:var(--ink);
padding:32px 22px;border-radius:18px;position:relative;
box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 80px rgba(201,162,39,.25);
border:3px solid rgba(201,162,39,.35);
display:grid;
}
.scroll:before,.scroll:after{
content:"";position:absolute;left:10px;right:10px;height:16px;border-radius:12px;
background:radial-gradient(circle at 20% 50%, rgba(0,0,0,.25), transparent 60%),
radial-gradient(circle at 80% 50%, rgba(0,0,0,.25), transparent 60%);
}
.scroll:before{top:-8px}
.scroll:after{bottom:-8px}

#ori4cher {display:inline-block;border:0;font-size:25px;margin:0 10px 0 0;}
#pseudo4cher,#mail4cher {margin: 10px 0;
  display: block;
  padding: 10px;
  border: 1px solid #d9c9a0;}
  
h2.h2wishlist, .sscms_content_post h1, .sscms_content_cat h1{font-family: 'Great Vibes', cursive;font-size: 60px;background:transparent;color:midnightblue;}
#plugin-form h4, #wl-email-capture h4{background:transparent;color:black;margin:20px 0 0;}


#plugin-form textarea {
  flex: 1;
  padding: 14px;
  border-radius: 14px;
  border: 2px solid gold; /* petit liseré doré */
  background: linear-gradient(145deg, #0b1d39, #122b52); /* bleu nuit profond */
  color: #f8ecd9; /* blanc chaud, type bougie */
  font-size: 17px;
  resize: none;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.25), 
              inset 0 0 8px rgba(255, 255, 255, 0.1); /* halo lumineux doré */
}

#plugin-form textarea::placeholder {
  color: rgba(255, 228, 196, 0.6); /* un beige doux pour le placeholder */
  font-style: italic;
}

.sponsor-flag{position: absolute; right: 16px;  white-space: nowrap;transform: rotate(270deg);}

.field{display:flex;gap:12px;align-items:center;margin:10px 0;flex-wrap:wrap}
.field input[type=text]{flex:1;min-width:180px;padding:12px;border-radius:12px;border:1px solid #d9c9a0}
.field .url{flex:2}

.actions{display:flex;gap:12px;flex-wrap:wrap;margin:16px}
.btn{cursor:pointer;border:none;border-radius:999px;padding:12px 18px;font-weight:600}
.btn-primary{background:var(--gold);color:#201a0f;box-shadow:0 6px 14px rgba(201,162,39,.35)}
.btn-ghost{background:transparent;border:1px solid var(--gold);color:var(--gold)}
.btn-warn{background:brown;color:white;}

.btn:hover{box-shadow: 0 0 4px black;}
.list{margin:16px 0}
.item{display:grid;grid-template-columns:1fr 1.6fr auto;gap:10px;align-items:center;margin-bottom:8px}
.item input{padding:10px;border-radius:10px;border:1px solid #d9c9a0}
.item button{white-space:nowrap}

ul.giftarea{list-style: none;
  background: linear-gradient(90deg,#f00 0%,#bf0000 100%);
  padding: 20px;
  border-radius: 20px;}
ul.giftarea li {margin: 10px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: midnightblue;
  padding: 20px;
  border-radius: 7px;
  color: white;}

.spoiler_select{background:midnightblue;border-radius:15px;}
.spoiler_select select{margin: 0 auto;  display: block;  font-size: 20px;}

.sharebar{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0;}
.socialbar{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0;}
.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--gold);color:var(--gold);padding:6px 10px;border-radius:999px}

.checked{opacity:.5;text-decoration:line-through}
.status-chip{font-size:12px;border:1px solid #d9c9a0;border-radius:999px;padding:4px 8px}

.print-note{margin-top:10px;font-size:13px;color:#6b5d3b}

.blabla { font-family: 'Great Vibes', cursive;
  
    margin:6px 0 18px;
    color:#374151;
	font-size:28px;
	line-height:32px;
}

.blabla:first-of-type::first-line {font-size:55px;line-height:60px;color:brown;}

/* toast */
.wl-toast{
  position:fixed; left:50%; top:16px; transform:translateX(-50%) translateY(-10px);
  background:#1f2937; color:#fff; padding:10px 14px; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.25); opacity:0; transition:.25s;
  z-index:9999; pointer-events:none
}
.wl-toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }

/* ===== Flash overlay ===== */
.wl-flash-overlay{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; opacity:0; transition:opacity .18s ease-out; z-index:9999;
}
.wl-flash-overlay.show{ opacity:1; }

.wl-flash{
  max-width:min(92vw,640px);
  padding:14px 18px; border-radius:14px; font-weight:600; text-align:center;
  box-shadow:0 12px 36px rgba(0,0,0,.35);
  transform:translateY(6px) scale(.98); opacity:0;
  animation:wl-in .18s ease-out forwards;
}
.wl-flash.leave{ animation:wl-out .22s ease-in forwards; }

.wl-flash-ok{
  background:#0b3; color:#fff;
  border:1px solid rgba(255,255,255,.4);
}
.wl-flash-warn{
  background:#b80; color:#fff;
  border:1px solid rgba(255,255,255,.4);
}

@keyframes wl-in   { to{opacity:1; transform:translateY(0) scale(1);} }
@keyframes wl-out  { to{opacity:0; transform:translateY(-6px) scale(.98);} }

/* bouton qui vient de copier */
.btn.copied{ position:relative; }
.btn.copied::after{
  content:"Lien copié ✨"; position:absolute; left:50%; top:-10px; transform:translate(-50%,-100%);
  background:#0b3; color:#fff; font-size:12px; padding:4px 8px; border-radius:999px;
  white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,.25);
}

.is-error{
  border-color:#b00020 !important;
  box-shadow:0 0 0 2px rgba(176,0,32,.12);
}
#items.is-error{
  border:1px dashed #b00020;
  padding:8px;
  border-radius:12px;
}
.item input.is-error { /* précision pour inputs items */
  border-color:#b00020 !important;
}

/* Overlay noir qui bloque tout */
.wl-flash-overlay.blackout{
  background: rgba(0,0,0,.5);
  pointer-events: auto; /* bloque les clics derrière */
}

/* Quand blackout, on veut un bloc simple, sombre, lisible */
.wl-flash-overlay.blackout .wl-flash{
  background:#111;
  color:#fff;
  border:0;
  box-shadow:0 12px 36px rgba(0,0,0,.6);
  max-width:min(92vw,640px);
  padding:18px 22px;
  border-radius:14px;
  text-align:center;
  font-weight:600;
  white-space:pre-line; 
}

.ctaPereNono{
  padding:.8rem 1.3rem;
  border-radius:999px;
  border:2px solid gold;
  font:600 1rem system-ui;
  color:#fff;
  background:linear-gradient(135deg,#c91a1a,#8d0f0f);
  cursor:pointer;
  transition:.2s;
}
.ctaPereNono:hover{ transform:translateY(-2px); box-shadow:0 6px 12px rgba(0,0,0,.3); }
.ctaPereNono:active{ transform:translateY(1px); }

.ctaPereNono.is-green{ background:linear-gradient(135deg,#1e7a2e,#0e4f1c); }
.ctaPereNono.is-snow { background:linear-gradient(135deg,#f7fafc,#e9eef5); color:#222; border-color:#c00; }

.signature{
	font-family: 'Great Vibes', cursive;
    font-size:40px;
	font-weight:bold;
	text-align:right;
	padding-right:50px;
	margin-bottom:50px!important;
 }
 
 /* Gestion Erreur */
.wl-noel-notice{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;margin:14px 0}
.wl-noel-notice__icon{font-size:20px}
.wl-noel-notice__text{font-weight:600}
.wl-noel-warn{background:#fff7e6;border:1px solid #f1d9a8;color:#6b5d3b}
.wl-noel-error{background:#ffecec;border:1px solid #f5b5b5;color:#7a2a2a}
.wl-noel-ok{background:#ecfff2;border:1px solid #b5f5c8;color:#1f7a46}

/* Jauge Magie */
.noel-gauge{margin:10px 0 16px}
.noel-gauge__header{font-weight:600;margin-bottom:6px}
.noel-gauge__hint{color:#6b5d3b;margin-top:6px}
.noel-meter{height:10px;border-radius:999px;background:#f2f2f2;overflow:hidden}
.noel-meter__bar{height:100%;background:linear-gradient(90deg,#e6cf7a,#d89c4b,#c56c3e)}

@media (max-width:768px){
	
	.wrapper {padding:13px;}
	.item{grid-template-columns:1fr;}
	#mail4cher,#ori4cher {display:block;margin: 0 0 10px;}
	.sscms_content_post h1, .sscms_content_cat h1 {font-size:40px;}
	h2.h2wishlist {
		font-size: 26px;
		background: linear-gradient(145deg, #0b1d39, #122b52);
		color: white;
		border-radius: 20px 50px 20px 0;
		padding: 20px;
	 }

	#plugin-form textarea {font-size:12px;min-height:65px;}
	.spoiler_select select{font-size: 12px;}
	.blabla:first-of-type::first-line {font-size:38px;line-height:60px;}
	.blabla {font-size:25px;}
	
	.wrapper {padding:0;background:transparent;border-radius:0;}
	.sscms_content_post{background: url('/wishlist/bg.jpg')!important;}
	.scroll{background:transparent;box-shadow:none;padding:0;border:0;}
	.scroll::before {display:none;}
}