:root {
  --sapin: #1f3a2b;
  --sapin-fonce: #142a1e;
  --or: #f3d48a;
  --or-ruban: #e9c46a;
  --rouge: #c1121f;
  --rouge-fonce: #9b2226;
  --creme: #fbf3e4;
  --kraft: #c8a27a;
  --kraft-texte: #5b3a1e;
  --vert-pale: #cfe3d5;
  --rebond: cubic-bezier(.2, 1.5, .4, 1);
  /* Relief des paquets : lumière qui vient d'en haut, ombre en bas */
  --relief: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .22));
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  background: radial-gradient(ellipse at top, #2a4d39, var(--sapin) 55%, var(--sapin-fonce));
  background-attachment: fixed;
  color: var(--or);
  font-family: Georgia, 'Times New Roman', serif;
  overflow-x: hidden;
}

/* Emojis 3D (images de images/emojis/, voir js/emoji.js) : ils suivent la taille du texte */
.emoji3d {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  object-fit: contain;
  vertical-align: -0.25em;
  -webkit-user-select: none;
  user-select: none;
}
.sapin {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35));
}

/* Neige : un canvas plein écran derrière tout (dessiné par neige.js) */
.neige {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

main {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 16px 48px;
}

/* Titre : un reflet doré qui passe lentement sur le texte */
h1 {
  margin: 0;
  text-align: center;
  font-weight: normal;
  font-size: clamp(20px, 6.4vw, 38px);
  white-space: nowrap; /* les deux sapins restent sur la même ligne que le titre */
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.titre {
  background: linear-gradient(110deg, var(--or) 42%, #fffbe9 50%, var(--or) 58%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
  animation: reflet 7s ease-in-out infinite;
}
@keyframes reflet {
  0%, 30% { background-position: 100% 0; }
  70%, 100% { background-position: 0 0; }
}

/* Guirlande lumineuse sous le titre (ampoules posées par app.js) */
.guirlande {
  position: relative;
  width: min(92%, 380px);
  height: 18px;
  margin: 4px auto 22px;
  border-bottom: 2px solid #0c1a12;
  border-radius: 0 0 50% 50%;
}
.ampoule {
  position: absolute;
  width: 9px;
  height: 13px;
  margin-left: -4.5px;
  border-radius: 50% 50% 45% 45%;
  background: var(--couleur);
  box-shadow: 0 0 10px 2px var(--couleur);
  animation: clignote 2.4s ease-in-out infinite;
  animation-delay: var(--retard);
}
.ampoule::before {
  content: '';
  position: absolute;
  left: 2px;
  top: -3px;
  width: 5px;
  height: 4px;
  border-radius: 1px;
  background: #3a4a3f;
}
@keyframes clignote {
  50% { opacity: .35; box-shadow: 0 0 2px 0 var(--couleur); }
}

.message {
  min-height: 1.4em;
  margin: 0 0 20px;
  text-align: center;
  color: var(--vert-pale);
  font-style: italic;
  transition: opacity .3s;
}

/* Bouton principal : ouvrir la case du jour */
.appel {
  display: block;
  margin: 0 auto 14px;
  padding: 12px 26px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #f8e2a6, var(--or-ruban));
  color: #3d1d0c;
  font: inherit;
  font-size: 17px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15), 0 4px 14px rgba(0, 0, 0, .3);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .15s;
}
.appel[hidden] { display: none; }
.appel:active { transform: scale(.96); }
.appel:focus-visible { outline: 3px solid var(--creme); outline-offset: 3px; }

/* Grille : 4 colonnes sur téléphone, 6 sur ordinateur */
.grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 12px; /* plus d'espace en hauteur : les nœuds dépassent au-dessus */
}
@media (min-width: 700px) {
  .grille { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 16px; }
}

/* Un paquet cadeau */
.case {
  position: relative;
  aspect-ratio: 1;
  border: 0;
  border-radius: 8px;
  padding: 0;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* pas de zoom double-tap sur iPhone */
  transition: transform .15s;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), inset 0 2px 0 rgba(255, 255, 255, .15), 0 4px 10px rgba(0, 0, 0, .3);
}
.case:active { transform: scale(.95); }
.case:focus-visible { outline: 3px solid var(--creme); outline-offset: 3px; }

.case--rouge {
  background-color: var(--rouge-fonce);
  background-image:
    var(--relief),
    linear-gradient(90deg, transparent 44%, var(--or-ruban) 44% 56%, transparent 56%),
    linear-gradient(transparent 44%, var(--or-ruban) 44% 56%, transparent 56%);
}
.case--kraft {
  background-color: var(--kraft);
  background-image:
    var(--relief),
    linear-gradient(90deg, transparent 44%, var(--rouge) 44% 56%, transparent 56%),
    linear-gradient(transparent 44%, var(--rouge) 44% 56%, transparent 56%);
}

.case__pastille {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--creme);
  color: var(--rouge-fonce);
  font-size: clamp(13px, 4vw, 18px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3), inset 0 -2px 0 rgba(0, 0, 0, .08);
}
.case--kraft .case__pastille { color: var(--kraft-texte); }

.case__couvercle,
.case__emoji { display: none; }

/* Un nœud sur chaque paquet encore fermé */
.case__noeud {
  position: absolute;
  left: 50%;
  top: -16px;
  transform: translateX(-50%);
  font-size: clamp(19px, 5vw, 26px);
  line-height: 0;
  z-index: 2;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3));
  pointer-events: none;
}
.case.est-ouverte .case__noeud { display: none; }

/* Case qu'on peut ouvrir : rayures sucre d'orge, halo doré, petites étincelles,
   et de temps en temps le paquet frétille pour attirer l'œil */
.case.est-ouvrable {
  background-image: var(--relief), repeating-linear-gradient(45deg, var(--rouge) 0 9px, var(--creme) 9px 18px);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 0 0 3px var(--or), 0 0 18px var(--or);
  animation: halo 1.8s ease-in-out infinite, fretille 5s ease-in-out infinite 1s;
  z-index: 1;
}
.case.est-ouvrable .case__pastille {
  color: var(--rouge-fonce);
  font-weight: bold;
  width: 50%;
}
.case.est-ouvrable .case__noeud {
  top: -19px;
  font-size: clamp(21px, 5.6vw, 30px);
  animation: noeud 5s ease-in-out infinite 1s;
}
.case.est-ouvrable .case__couvercle {
  display: block;
  position: absolute;
  left: -5px;
  right: -5px;
  top: 0;
  height: 22%;
  border-radius: 6px;
  background-color: var(--rouge-fonce);
  background-image: linear-gradient(90deg, transparent 44%, var(--or-ruban) 44% 56%, transparent 56%);
  box-shadow: 0 0 0 2px var(--or);
}
.case.est-ouvrable::before,
.case.est-ouvrable::after {
  content: '';
  position: absolute;
  z-index: 3;
  width: clamp(14px, 4vw, 20px);
  height: clamp(14px, 4vw, 20px);
  background: url(/images/emojis/2728.webp) center / contain no-repeat;
  pointer-events: none;
  animation: scintille 2.6s ease-in-out infinite;
}
.case.est-ouvrable::before { left: 5%; bottom: 6%; }
.case.est-ouvrable::after { right: 5%; top: 26%; animation-delay: 1.3s; }

@keyframes halo {
  50% { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 0 0 3px var(--or), 0 0 34px var(--or); }
}
@keyframes fretille {
  0%, 82%, 100% { transform: none; }
  85% { transform: rotate(-5deg) scale(1.04); }
  88% { transform: rotate(5deg) scale(1.04); }
  91% { transform: rotate(-3deg) scale(1.02); }
  94% { transform: rotate(2deg); }
}
@keyframes noeud {
  0%, 80%, 100% { transform: translateX(-50%); }
  86% { transform: translateX(-50%) translateY(-7px) rotate(-8deg); }
  92% { transform: translateX(-50%) translateY(0) rotate(5deg); }
}
@keyframes scintille {
  0%, 100% { opacity: 0; transform: scale(.3) rotate(0); }
  50% { opacity: 1; transform: scale(1) rotate(90deg); }
}

/* Case déjà ouverte : cadre crème bordé d'or avec l'emoji */
.case.est-ouverte {
  background: var(--creme);
  box-shadow: inset 0 0 0 2px var(--or), 0 2px 8px rgba(0, 0, 0, .25);
}
.case.est-ouverte .case__pastille { display: none; }
.case.est-ouverte .case__emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: clamp(30px, 10vw, 50px);
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .25));
}
/* Juste après le déballage, l'emoji jaillit dans la case */
.case.revele .case__emoji { animation: jaillit .7s var(--rebond); }
@keyframes jaillit {
  from { transform: scale(0) rotate(-30deg); }
}

/* Arrivée de la page : les paquets tombent en cascade, un par un */
.case.apparait {
  animation: apparait .55s var(--rebond) backwards;
  animation-delay: calc(var(--i) * 35ms);
}
@keyframes apparait {
  from { opacity: 0; transform: translateY(-24px) scale(.6) rotate(-8deg); }
}

/* Case verrouillée qu'on touche : petit tremblement + un cadenas qui s'envole */
.case.tremble { animation: tremble .45s; }
@keyframes tremble {
  20% { transform: rotate(-7deg); }
  40% { transform: rotate(6deg); }
  60% { transform: rotate(-4deg); }
  80% { transform: rotate(2deg); }
}
.cadenas {
  position: fixed;
  z-index: 5;
  font-size: 24px;
  line-height: 0;
  pointer-events: none;
  translate: -50% -50%;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35));
}

/* Déballage, étape 1 : le paquet tremble de plus en plus (pendant qu'on vérifie l'heure) */
.case.secoue { animation: secoue .6s ease-in-out infinite; z-index: 3; }
.case.secoue .case__noeud { animation: none; }
@keyframes secoue {
  0%, 100% { transform: rotate(0) scale(1.06); }
  15% { transform: rotate(-6deg) scale(1.08); }
  30% { transform: rotate(6deg) scale(1.06); }
  45% { transform: rotate(-8deg) scale(1.1); }
  60% { transform: rotate(8deg) scale(1.08); }
  75% { transform: rotate(-4deg) translateY(-3px) scale(1.12); }
}

/* Déballage, étape 2 : le nœud s'envole, le couvercle saute, le paquet s'efface */
.case.deballe { animation: none; z-index: 3; }
.case.deballe::before,
.case.deballe::after { display: none; }
.case.deballe .case__noeud {
  animation: none;
  transition: transform .5s, opacity .5s;
  transform: translate(-50%, -70px) rotate(-60deg);
  opacity: 0;
}
.case.deballe .case__couvercle {
  transition: transform .7s cubic-bezier(.3, 1.6, .5, 1), opacity .7s;
  transform: translateY(-100px) rotate(-30deg);
  opacity: 0;
}

/* Éclat de lumière à l'ouverture */
.eclat {
  position: fixed;
  z-index: 4;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbe9 0%, rgba(243, 212, 138, .8) 35%, transparent 70%);
  pointer-events: none;
}

.confetti {
  position: fixed;
  z-index: 5;
  pointer-events: none;
  line-height: 1;
}

/* Carte plein écran du cadeau */
.carte {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 32, 22, .9);
  touch-action: manipulation;
  opacity: 0;
  transition: opacity .5s;
}
.carte[hidden] { display: none; }
.carte.visible { opacity: 1; }

.carte__contenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 360px;
  text-align: center;
}
.carte__date {
  margin: 0 0 14px;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--vert-pale);
}

/* La scène : des rayons de lumière tournent derrière le cadeau */
.carte__scene {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carte__rayons {
  position: absolute;
  width: 170%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(243, 212, 138, .22) 0 9deg, transparent 9deg 22.5deg);
  -webkit-mask: radial-gradient(closest-side, #000 35%, transparent);
  mask: radial-gradient(closest-side, #000 35%, transparent);
  opacity: 0;
  transform: scale(.5);
  transition: opacity .8s .15s, transform 1s .15s;
  animation: tourne 28s linear infinite;
  pointer-events: none;
}
.carte.visible .carte__rayons { opacity: 1; transform: scale(1); }
@keyframes tourne {
  to { rotate: 360deg; }
}

.carte__emoji {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(70vw, 280px);
  aspect-ratio: 1;
  border-radius: 14px;
  background: var(--creme);
  border: 6px solid var(--or);
  box-shadow: 0 0 40px rgba(243, 212, 138, .45);
  font-size: min(36vw, 150px);
  transform: scale(.3) rotate(-14deg);
  transition: transform .8s var(--rebond);
}
.carte__emoji .emoji3d { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .25)); }
.carte.visible .carte__emoji {
  transform: none;
  animation: flotte 3.5s ease-in-out infinite 1s;
}
@keyframes flotte {
  50% { translate: 0 -8px; }
}

/* Date, texte puis bouton arrivent l'un après l'autre */
.carte__date,
.carte__texte,
.carte__fermer {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s, transform .5s;
}
.carte.visible .carte__date { opacity: 1; transform: none; transition-delay: .1s; }
.carte.visible .carte__texte { opacity: 1; transform: none; transition-delay: .5s; }
.carte.visible .carte__fermer { opacity: 1; transform: none; transition-delay: .9s; }

.carte__texte {
  margin: 22px 0 0;
  font-size: 21px;
  font-style: italic;
  line-height: 1.35;
}
.carte__fermer {
  margin-top: 26px;
  padding: 9px 22px;
  border: 1px solid var(--or);
  border-radius: 20px;
  background: none;
  color: var(--or);
  font: inherit;
  cursor: pointer;
}

/* Pied de page : liens légaux */
.pied {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
  padding: 0 16px 28px;
  font-size: 14px;
}
.pied a,
.pied__lien {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--vert-pale);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.pied a:focus-visible,
.pied__lien:focus-visible { outline: 2px solid var(--creme); outline-offset: 2px; }

/* Bandeau de consentement : discret, en bas, sous la carte du cadeau */
.consentement {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 9;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  max-width: 620px;
  margin: 0 auto;
  padding: 14px 16px;
  border: 1px solid rgba(243, 212, 138, .45);
  border-radius: 14px;
  background: #13281d;
  color: var(--creme);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  font-size: 14px;
  line-height: 1.45;
}
.consentement__texte { flex: 1 1 260px; margin: 0; }
.consentement__texte a { color: var(--or); }
.consentement__boutons { display: flex; gap: 8px; margin-left: auto; }
.consentement button {
  padding: 8px 16px;
  border: 1px solid var(--or);
  border-radius: 999px;
  background: none;
  color: var(--or);
  font: inherit;
  cursor: pointer;
}
.consentement .consentement__oui { background: var(--or); color: #3d1d0c; }
.consentement button:focus-visible { outline: 2px solid var(--creme); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .titre,
  .ampoule,
  .case.est-ouvrable,
  .case.est-ouvrable .case__noeud,
  .case.est-ouvrable::before,
  .case.est-ouvrable::after,
  .case.tremble,
  .case.apparait,
  .case.revele .case__emoji,
  .carte__rayons,
  .carte.visible .carte__emoji { animation: none; }
  .case.est-ouvrable::before,
  .case.est-ouvrable::after { opacity: 1; }
  .carte,
  .carte__emoji,
  .carte__rayons,
  .carte__date,
  .carte__texte,
  .carte__fermer { transition: none; }
}