/* =======================================================================
   Duracell — Défi Puzzle : styles scopés sous #dp-puzzle
   (évite tout conflit avec le thème WordPress)
   ======================================================================= */
#dp-puzzle{
  --bg:#0b0b0c; --bg-soft:#161518; --copper:#c7782e; --copper-dp:#8a4f1c;
  --gold:#efb24c; --paper:#f5f1ea; --ink:#000; --radius:14px; --board-max:600px;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  color:var(--paper); line-height:1.5;
  background:radial-gradient(130% 90% at 50% -10%, #1a1614 0%, var(--bg-soft) 45%, var(--bg) 100%);
  border-radius:20px; padding:30px 20px 40px; max-width:760px; margin:0 auto;
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:22px;
}
#dp-puzzle *{box-sizing:border-box}
#dp-puzzle::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:20px;
  background:
    radial-gradient(60% 40% at 50% 14%, rgba(199,120,46,.18), transparent 70%),
    repeating-linear-gradient(90deg, rgba(199,120,46,.04) 0 1px, transparent 1px 64px);
}
#dp-puzzle > *{position:relative; z-index:1}

#dp-puzzle header{text-align:center}
#dp-puzzle h1{font-family:"Anton",sans-serif; font-weight:400; font-size:clamp(2.1rem,8vw,3.4rem);
  line-height:.92; text-transform:uppercase; margin:12px 0 0; text-shadow:0 3px 0 rgba(0,0,0,.4); color:var(--paper)}
#dp-puzzle h1 .dp-pop{color:var(--copper)}
#dp-puzzle h2{font-family:"Anton",sans-serif; font-weight:400; font-size:2rem; margin:12px 0 4px; text-transform:uppercase; color:var(--paper)}
#dp-puzzle p{margin:0}
#dp-puzzle .dp-brand{font-family:"Anton",sans-serif; letter-spacing:.32em; text-transform:uppercase; font-size:.95rem; color:var(--copper); padding-left:.32em}
#dp-puzzle .dp-eyebrow{display:inline-block; margin-top:10px; font-size:.7rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink); background:var(--gold); padding:6px 12px; border-radius:999px; transform:rotate(-1.5deg)}
#dp-puzzle .dp-tagline{margin-top:8px; font-size:1rem; color:rgba(245,241,234,.78); font-weight:500}

#dp-puzzle .dp-hud{width:100%; max-width:var(--board-max); display:grid; grid-template-columns:1fr 1fr; gap:10px}
#dp-puzzle .dp-stat{background:rgba(0,0,0,.5); border:1px solid rgba(199,120,46,.3); border-radius:var(--radius);
  padding:10px 14px; display:flex; flex-direction:column; align-items:center; gap:2px}
#dp-puzzle .dp-label{font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(245,241,234,.5); font-weight:700}
#dp-puzzle .dp-value{font-family:"Anton",sans-serif; font-size:1.9rem; line-height:1; font-variant-numeric:tabular-nums}
#dp-puzzle #dp-chrono .dp-value{color:var(--gold)}

#dp-puzzle .dp-controls{width:100%; display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
#dp-puzzle .dp-btn{font-family:inherit; font-weight:700; font-size:.92rem; border:none; border-radius:999px;
  cursor:pointer; padding:11px 20px; transition:transform .12s, filter .12s; line-height:1}
#dp-puzzle .dp-btn:active{transform:translateY(1px) scale(.98)}
#dp-puzzle .dp-btn-primary{background:var(--copper); color:#fff; box-shadow:0 6px 0 var(--copper-dp)}
#dp-puzzle .dp-btn-primary:hover{filter:brightness(1.08)}
#dp-puzzle .dp-btn-ghost{background:transparent; color:var(--paper); border:1.5px solid rgba(245,241,234,.28)}
#dp-puzzle .dp-btn-ghost:hover{background:rgba(245,241,234,.08)}
#dp-puzzle .dp-btn-ghost[aria-pressed="true"]{background:var(--paper); color:var(--ink); border-color:var(--paper)}

#dp-puzzle .dp-board-wrap{width:100%; max-width:var(--board-max); aspect-ratio:1/1; position:relative;
  border-radius:18px; padding:10px; background:linear-gradient(135deg,#1c1a18 0%, #0d0c0c 100%);
  border:2px solid var(--copper); box-shadow:0 22px 50px -16px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.4)}
#dp-puzzle #dp-board{position:relative; width:100%; height:100%; border-radius:10px; overflow:hidden}
#dp-puzzle .dp-tile{position:absolute; top:0; left:0; background-repeat:no-repeat; border-radius:8px;
  cursor:pointer; padding:0; border:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.4); will-change:transform}
#dp-puzzle .dp-tile:focus-visible{outline:3px solid var(--gold); outline-offset:-3px; z-index:5}
#dp-puzzle .dp-tile.sel{outline:3px solid var(--gold); outline-offset:-3px; z-index:6; filter:brightness(1.08);
  box-shadow:0 0 0 2px rgba(239,178,76,.45), 0 6px 18px rgba(0,0,0,.55)}
#dp-puzzle .dp-tile .dp-num{position:absolute; top:0; left:0; font-family:"Anton",sans-serif; color:#fff; font-size:1.1rem;
  line-height:1; background:rgba(0,0,0,.65); border-radius:0 0 8px 0; padding:5px 9px; opacity:0; transition:opacity .18s ease}
#dp-puzzle #dp-board.show-numbers .dp-tile .dp-num{opacity:1}

/* ---- Modale ---- */
#dp-puzzle .dp-overlay{position:fixed; inset:0; z-index:99990; background:rgba(0,0,0,.78);
  display:none; align-items:center; justify-content:center; padding:20px; overflow-y:auto;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
#dp-puzzle .dp-overlay.open{display:flex}
#dp-puzzle .dp-modal{width:100%; max-width:430px; margin:auto; text-align:center;
  background:linear-gradient(160deg,#1a1714 0%, #0c0b0b 100%); border:1.5px solid var(--copper);
  border-radius:20px; padding:26px 24px 24px; box-shadow:0 30px 70px -20px rgba(0,0,0,.9)}
#dp-puzzle .dp-badge{font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
  background:var(--gold); display:inline-block; padding:5px 12px; border-radius:999px}
#dp-puzzle .dp-final-time{font-family:"Anton",sans-serif; font-size:3.1rem; color:var(--gold); line-height:1;
  margin:6px 0 2px; font-variant-numeric:tabular-nums}
#dp-puzzle .dp-final-sub{color:rgba(245,241,234,.65); font-size:.9rem; margin-bottom:18px}
#dp-puzzle .dp-share-row{display:flex; gap:10px; margin-bottom:8px}
#dp-puzzle .dp-share-row .dp-btn{flex:1}
#dp-puzzle .dp-share-hint{font-size:.78rem; color:var(--gold); margin:6px 0 18px; min-height:1em}

#dp-puzzle #dp-form{display:flex; flex-direction:column; gap:10px; text-align:left}
#dp-puzzle .dp-intro{font-size:.82rem; color:rgba(245,241,234,.8)}
#dp-puzzle #dp-form input[type=text],
#dp-puzzle #dp-form input[type=email]{width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid rgba(245,241,234,.18);
  background:rgba(0,0,0,.45); color:var(--paper); font-family:inherit; font-size:.95rem}
#dp-puzzle #dp-form input::placeholder{color:rgba(245,241,234,.38)}
#dp-puzzle #dp-form input:focus{outline:none; border-color:var(--copper)}
#dp-puzzle .dp-hp{position:absolute; left:-9999px; height:0; overflow:hidden}

#dp-puzzle .dp-upload{border:1.5px dashed var(--copper); border-radius:12px; background:rgba(199,120,46,.06);
  padding:14px; display:flex; flex-direction:column; gap:6px; cursor:pointer; transition:background .15s, border-color .15s}
#dp-puzzle .dp-upload:hover{background:rgba(199,120,46,.12)}
#dp-puzzle .dp-upload.has-file{border-style:solid; background:rgba(239,178,76,.1)}
#dp-puzzle .dp-u-head{display:flex; align-items:center; gap:10px; font-weight:700; font-size:.9rem}
#dp-puzzle .dp-u-icon{font-size:1.3rem}
#dp-puzzle .dp-u-sub{font-size:.74rem; color:rgba(245,241,234,.55)}
#dp-puzzle .dp-u-file{font-size:.82rem; color:var(--gold); font-weight:600; word-break:break-all; display:none}
#dp-puzzle .dp-upload.has-file .dp-u-file{display:block}
#dp-puzzle .dp-upload input[type=file]{display:none}
#dp-puzzle .dp-err{color:#ff8a6e; font-size:.78rem; min-height:1em; margin:0}

#dp-puzzle .dp-consent{display:flex; gap:9px; align-items:flex-start; font-size:.76rem; color:rgba(245,241,234,.72)}
#dp-puzzle .dp-consent input{margin-top:2px; accent-color:var(--copper)}
#dp-puzzle .dp-consent a, #dp-puzzle .dp-share-hint a{color:var(--gold)}
#dp-puzzle .dp-form-done{text-align:center; color:var(--gold); font-weight:700; padding:14px 0; display:none}

#dp-puzzle .dp-legal{font-size:.7rem; color:rgba(245,241,234,.42); text-align:center; max-width:460px; line-height:1.5}
#dp-puzzle .dp-legal a{color:rgba(245,241,234,.62)}
#dp-puzzle #dp-confetti{position:fixed; inset:0; pointer-events:none; z-index:99991}

@media (max-width:380px){ #dp-puzzle .dp-value{font-size:1.6rem} }
@media (prefers-reduced-motion:reduce){ #dp-puzzle *{animation-duration:.001ms !important} }

/* =======================================================================
   Modale + confettis déplacés dans <body> (JS) : styles 100% autonomes
   pour s'afficher au premier plan quel que soit le thème.
   ======================================================================= */
.dp-overlay{
  --copper:#c7782e; --copper-dp:#8a4f1c; --gold:#efb24c; --paper:#f5f1ea; --ink:#000;
  position:fixed; inset:0; z-index:2147483600; display:none;
  align-items:center; justify-content:center; padding:20px; overflow-y:auto;
  background:rgba(0,0,0,.80); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif; color:var(--paper); line-height:1.5;
}
.dp-overlay.open{display:flex}
.dp-overlay *{box-sizing:border-box}
.dp-overlay p{margin:0}
.dp-overlay a{color:var(--gold)}
.dp-overlay .dp-modal{width:100%; max-width:430px; margin:auto; text-align:center;
  background:linear-gradient(160deg,#1a1714 0%,#0c0b0b 100%); border:1.5px solid var(--copper);
  border-radius:20px; padding:26px 24px 24px; box-shadow:0 30px 70px -20px rgba(0,0,0,.9)}
.dp-overlay h2{font-family:"Anton",sans-serif; font-weight:400; font-size:2rem; margin:12px 0 4px;
  text-transform:uppercase; color:var(--paper)}
.dp-overlay .dp-badge{font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); background:var(--gold); display:inline-block; padding:5px 12px; border-radius:999px}
.dp-overlay .dp-final-time{font-family:"Anton",sans-serif; font-size:3.1rem; color:var(--gold); line-height:1;
  margin:6px 0 2px; font-variant-numeric:tabular-nums}
.dp-overlay .dp-final-sub{color:rgba(245,241,234,.65); font-size:.9rem; margin-bottom:18px}
.dp-overlay .dp-btn{font-family:inherit; font-weight:700; font-size:.92rem; border:none; border-radius:999px;
  cursor:pointer; padding:11px 20px; transition:transform .12s, filter .12s; line-height:1}
.dp-overlay .dp-btn:active{transform:translateY(1px) scale(.98)}
.dp-overlay .dp-btn-primary{background:var(--copper); color:#fff; box-shadow:0 6px 0 var(--copper-dp)}
.dp-overlay .dp-btn-primary:hover{filter:brightness(1.08)}
.dp-overlay .dp-btn-ghost{background:transparent; color:var(--paper); border:1.5px solid rgba(245,241,234,.28)}
.dp-overlay .dp-btn-ghost:hover{background:rgba(245,241,234,.08)}
.dp-overlay .dp-share-row{display:flex; gap:10px; margin-bottom:8px}
.dp-overlay .dp-share-row .dp-btn{flex:1}
.dp-overlay .dp-share-hint{font-size:.78rem; color:var(--gold); margin:6px 0 18px; min-height:1em}
.dp-overlay #dp-form{display:flex; flex-direction:column; gap:10px; text-align:left}
.dp-overlay .dp-intro{font-size:.82rem; color:rgba(245,241,234,.8)}
.dp-overlay #dp-form input[type=text],
.dp-overlay #dp-form input[type=tel],
.dp-overlay #dp-form input[type=email],
.dp-overlay #dp-form input[type=date]{width:100%; padding:12px 14px; border-radius:10px;
  border:1.5px solid rgba(245,241,234,.18); background:rgba(0,0,0,.45); color:var(--paper);
  font-family:inherit; font-size:.95rem}
.dp-overlay #dp-form input::placeholder{color:rgba(245,241,234,.38)}
.dp-overlay #dp-form input:focus{outline:none; border-color:var(--copper)}
.dp-overlay .dp-hp{position:absolute; left:-9999px; height:0; overflow:hidden}
.dp-overlay .dp-upload{border:1.5px dashed var(--copper); border-radius:12px; background:rgba(199,120,46,.06);
  padding:14px; display:flex; flex-direction:column; gap:6px; cursor:pointer; transition:background .15s, border-color .15s}
.dp-overlay .dp-upload:hover{background:rgba(199,120,46,.12)}
.dp-overlay .dp-upload.has-file{border-style:solid; background:rgba(239,178,76,.1)}
.dp-overlay .dp-u-head{display:flex; align-items:center; gap:10px; font-weight:700; font-size:.9rem}
.dp-overlay .dp-u-icon{font-size:1.3rem}
.dp-overlay .dp-u-sub{font-size:.74rem; color:rgba(245,241,234,.55)}
.dp-overlay .dp-u-file{font-size:.82rem; color:var(--gold); font-weight:600; word-break:break-all; display:none}
.dp-overlay .dp-upload.has-file .dp-u-file{display:block}
.dp-overlay .dp-upload input[type=file]{display:none}
.dp-overlay .dp-err{color:#ff8a6e; font-size:.78rem; min-height:1em; margin:0}
.dp-overlay .dp-consent{display:flex; gap:9px; align-items:flex-start; font-size:.76rem; color:rgba(245,241,234,.72)}
.dp-overlay .dp-consent input{margin-top:2px; accent-color:var(--copper)}
.dp-overlay .dp-form-done{text-align:center; color:var(--gold); font-weight:700; padding:14px 0; display:none}
#dp-confetti{position:fixed; inset:0; pointer-events:none; z-index:2147483601}
@media (prefers-reduced-motion:reduce){ .dp-overlay *{animation-duration:.001ms !important} }

/* ---- Confort mobile : marges réduites sur petits écrans ---- */
@media (max-width:600px){
  #dp-puzzle{ padding:18px 12px 28px; gap:16px; border-radius:16px; }
  #dp-puzzle::before{ border-radius:16px; }
  #dp-puzzle .dp-controls{ gap:8px; }
  #dp-puzzle .dp-btn{ padding:10px 16px; font-size:.86rem; }
}

/* Champ date (date de naissance) + petit label */
.dp-overlay #dp-form input[type=date]{color:var(--paper); -webkit-appearance:none; appearance:none}
.dp-overlay #dp-form input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1); opacity:.7; cursor:pointer}
.dp-overlay .dp-field{display:flex; flex-direction:column; gap:4px}
.dp-overlay .dp-field span{font-size:.74rem; color:rgba(245,241,234,.6); font-weight:600}