@charset "UTF-8";
/* ==========================================================================
   CONSTELLATION 50 — Espace public
   Signature : le « 50 » du hero n'est pas dessiné, il est constitué.
   Chaque vœu publié allume une étoile ; les étoiles éteintes restent
   visibles — c'est l'invitation à écrire.
   ========================================================================== */

/* ==========================================================================
   Barre de navigation
   ========================================================================== */
.barre {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  width: min(100% - 2.5rem, var(--largeur));
  margin-inline: auto;
  padding: var(--e-4) 0;
  transition: padding 0.4s var(--doux);
}
.barre::before {
  content: "";
  position: absolute;
  inset: 0 -50vw;
  background: linear-gradient(180deg, rgba(6,3,20,0.9), rgba(6,3,20,0));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.4s var(--doux);
  pointer-events: none;
}
.barre.est-collee::before { opacity: 1; }
.barre.est-collee { padding-block: var(--e-3); }

.marque {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-family: var(--f-data);
  font-size: var(--t-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brume);
}
.marque:hover { color: var(--or); }
.marque-sceau {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  border: 1px solid var(--trait-or);
  background: radial-gradient(circle at 35% 25%, rgba(245,201,120,0.35), transparent 62%);
  font-family: var(--f-titre);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--or-clair);
}
.barre-liens { position: relative; display: flex; align-items: center; gap: var(--e-2); }
.barre-lien {
  padding: 0.5rem 0.9rem;
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  color: var(--brume);
  transition: color 0.24s var(--doux), background 0.24s var(--doux);
}
.barre-lien:hover { color: var(--lin); background: var(--verre); }

/* ==========================================================================
   Scène d'ouverture
   ========================================================================== */
.scene {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-5);
  min-height: calc(100svh - 6rem);
  padding-block: var(--e-6) var(--e-7);
  text-align: center;
}

.scene-date {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  padding: 0.4rem 1.1rem;
  border: 1px solid var(--trait-or);
  border-radius: var(--r-full);
  background: rgba(245, 201, 120, 0.06);
  animation: monte 0.9s var(--ressort) both;
}
.scene-date::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--or);
  box-shadow: 0 0 12px var(--or);
  animation: pulsation 2.4s ease-in-out infinite;
}

@keyframes pulsation { 50% { opacity: 0.35; transform: scale(0.7); } }
@keyframes monte { from { opacity: 0; transform: translateY(22px); } }

/* --- La constellation : le signe « 50 » fait d'étoiles -------------------- */
.constellation {
  position: relative;
  width: min(100%, 780px);
  aspect-ratio: 16 / 7;
  animation: monte 1.1s 0.1s var(--ressort) both;
}
.constellation canvas { width: 100%; height: 100%; }
.constellation::after {
  content: "";
  position: absolute;
  inset: 12% 6%;
  background: radial-gradient(ellipse at center, rgba(139,92,246,0.30), transparent 68%);
  filter: blur(48px);
  z-index: -1;
}

.constellation-info {
  position: absolute;
  left: 50%;
  bottom: -0.5rem;
  transform: translateX(-50%);
  padding: 0.35rem 0.85rem;
  border-radius: var(--r-full);
  background: rgba(6,3,20,0.85);
  border: 1px solid var(--trait);
  font-size: var(--t-xs);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s var(--doux);
  pointer-events: none;
}
.constellation-info.visible { opacity: 1; }

/* --- Nom et promesse ------------------------------------------------------ */
.scene-nom {
  font-family: var(--f-titre);
  font-size: clamp(3.2rem, 1.5rem + 8vw, 7.5rem);
  font-weight: 300;
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 144;
  line-height: 0.9;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(168deg, #fff9ec 8%, var(--or-clair) 32%, var(--or) 56%, #c08a3c 88%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: monte 1.1s 0.2s var(--ressort) both;
}

.scene-promesse {
  max-width: 34ch;
  font-family: var(--f-titre);
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.45rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
  color: var(--brume);
  animation: monte 1.1s 0.3s var(--ressort) both;
}
.scene-promesse em { color: var(--or-clair); font-style: italic; }

/* --- Jauge des étoiles ---------------------------------------------------- */
.jauge {
  width: min(100%, 30rem);
  animation: monte 1.1s 0.4s var(--ressort) both;
}
.jauge-chiffres {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--e-2);
  font-family: var(--f-data);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brume-2);
}
.jauge-chiffres b {
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--or);
  letter-spacing: 0.04em;
}
.jauge-piste {
  height: 3px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.09);
  overflow: hidden;
}
.jauge-remplie {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--violet), var(--fuchsia) 45%, var(--or));
  box-shadow: 0 0 18px rgba(245,201,120,0.6);
  transition: width 1.8s 0.6s var(--doux);
}

.scene-actions {
  display: flex;
  gap: var(--e-3);
  flex-wrap: wrap;
  justify-content: center;
  animation: monte 1.1s 0.5s var(--ressort) both;
}

/* --- Compte à rebours + invitation à défiler ------------------------------ */
.scene-pied {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: auto;
  padding-top: var(--e-6);
  animation: monte 1.1s 0.6s var(--ressort) both;
}
.rebours { display: flex; gap: var(--e-4); }
.rebours-bloc { text-align: center; }
.rebours-bloc b {
  display: block;
  font-family: var(--f-data);
  font-size: var(--t-xl);
  font-weight: 500;
  color: var(--lin);
  font-variant-numeric: tabular-nums;
}
.rebours-bloc span {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brume-2);
}

.defiler {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brume-2);
}
.defiler::after {
  content: "";
  width: 1px; height: 2.4rem;
  background: linear-gradient(180deg, var(--or), transparent);
  animation: filer 2.2s ease-in-out infinite;
}
@keyframes filer { 0%,100% { transform: scaleY(0.35); transform-origin: top; opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ==========================================================================
   Le mur des vœux
   ========================================================================== */
.mur { padding-block: var(--e-8); }

.mur-tete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-5);
  flex-wrap: wrap;
  margin-bottom: var(--e-6);
}
.mur-titre {
  font-family: var(--f-titre);
  font-size: var(--t-2xl);
  font-weight: 400;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 72;
  line-height: 1.1;
}
.mur-titre em { font-style: italic; color: var(--or); }
.mur-sous { max-width: 46ch; margin-top: var(--e-2); color: var(--brume); font-size: var(--t-sm); }

.mur-outils { display: flex; gap: var(--e-3); align-items: center; flex-wrap: wrap; }

.filtres { display: flex; gap: var(--e-1); flex-wrap: wrap; }
.filtre {
  padding: 0.42rem 0.95rem;
  border: 1px solid var(--trait);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--brume);
  font-size: var(--t-xs);
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.24s var(--doux);
}
.filtre:hover { color: var(--lin); border-color: rgba(255,255,255,0.24); }
.filtre[aria-pressed="true"] {
  background: var(--or);
  border-color: var(--or);
  color: #2a1a02;
  font-weight: 600;
}

.recherche { position: relative; }
.recherche .saisie { padding-left: 2.5rem; width: 14rem; }
.recherche::before {
  content: "";
  position: absolute;
  left: 0.95rem; top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0a4d0' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events: none;
}

/* --- Grille en maçonnerie (colonnes calculées en JS) ---------------------- */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--e-5);
  align-items: start;
}
/* La maçonnerie n'est activée que si le JS a pu calculer les hauteurs :
   sans lui, on retombe sur une grille classique parfaitement lisible. */
.grille.est-maconnee { grid-auto-rows: 6px; row-gap: 0; }
.grille.est-maconnee > .mur-vide { grid-row: span 48; }

/* --- La carte-vœu --------------------------------------------------------- */
.voeu {
  --teinte: 42;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding: var(--e-5) var(--e-5) var(--e-4);
  border: 1px solid var(--trait);
  border-radius: var(--r-lg);
  background:
    linear-gradient(155deg, hsla(var(--teinte), 80%, 62%, 0.10), transparent 58%),
    rgba(255,255,255,0.035);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--ombre-douce);
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  transition: opacity 0.7s var(--doux), transform 0.7s var(--ressort),
              border-color 0.3s var(--doux), box-shadow 0.3s var(--doux);
}
.voeu.est-visible { opacity: 1; transform: none; }

.voeu::before { /* halo coloré qui s'allume au survol */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, hsla(var(--teinte), 90%, 70%, 0.7), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s var(--doux);
  pointer-events: none;
}
.voeu:hover::before, .voeu.est-pointee::before { opacity: 1; }
.voeu:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px -30px hsla(var(--teinte), 90%, 50%, 0.55), var(--ombre-douce);
}

.voeu.est-pointee {
  animation: coup-de-projecteur 1.6s var(--doux);
}
@keyframes coup-de-projecteur {
  0%, 100% { box-shadow: var(--ombre-douce); }
  25%      { box-shadow: 0 0 0 3px hsla(var(--teinte), 90%, 65%, 0.6), 0 30px 70px -26px hsla(var(--teinte), 90%, 50%, 0.7); }
}

.voeu-texte {
  font-family: var(--f-titre);
  font-size: 1.06rem;
  font-weight: 300;
  font-variation-settings: "SOFT" 40, "opsz" 24;
  line-height: 1.58;
  color: #efe9ff;
  white-space: pre-line;
  overflow-wrap: break-word;
}
.voeu-texte::before {
  content: "“";
  display: block;
  margin-bottom: -0.35em;
  font-size: 2.6rem;
  line-height: 1;
  color: hsla(var(--teinte), 85%, 68%, 0.55);
}

.voeu-pied {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px solid rgba(255,255,255,0.07);
}
.pastille {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.3rem; height: 2.3rem;
  border-radius: 50%;
  background: linear-gradient(140deg, hsl(var(--teinte), 85%, 68%), hsl(calc(var(--teinte) + 38), 80%, 52%));
  color: #100722;
  font-weight: 700;
  font-size: var(--t-sm);
}
.voeu-qui { flex: 1; min-width: 0; }
.voeu-auteur {
  display: block;
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--lin);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.voeu-meta { font-size: var(--t-xs); color: var(--brume-2); }
.voeu-index {
  flex: none;
  font-family: var(--f-data);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: hsla(var(--teinte), 80%, 70%, 0.9);
}

/* Vœu mis en avant : plus grand, ruban discret */
.voeu.est-en-avant {
  border-color: var(--trait-or);
  background:
    linear-gradient(155deg, rgba(245,201,120,0.16), transparent 55%),
    rgba(255,255,255,0.05);
}
.voeu.est-en-avant .voeu-texte { font-size: 1.2rem; }
.voeu.est-en-avant::after {
  content: "Coup de cœur";
  position: absolute;
  top: var(--e-4); right: calc(-1 * var(--e-2));
  padding: 0.2rem 0.7rem;
  border-radius: var(--r-full) 0 0 var(--r-full);
  background: var(--or);
  color: #2a1a02;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --- États vides / chargement -------------------------------------------- */
.mur-vide {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-8) var(--e-5);
  text-align: center;
  border: 1px dashed var(--trait);
  border-radius: var(--r-lg);
}
.mur-vide-titre { font-family: var(--f-titre); font-size: var(--t-xl); font-weight: 400; }
.mur-vide p { max-width: 40ch; color: var(--brume); font-size: var(--t-sm); }

.mur-suite { display: flex; justify-content: center; margin-top: var(--e-6); }

/* ==========================================================================
   Appel final
   ========================================================================== */
.appel {
  position: relative;
  margin-block: var(--e-8);
  padding: clamp(2.5rem, 1rem + 6vw, 5rem) var(--e-5);
  border: 1px solid var(--trait-or);
  border-radius: var(--r-xl);
  background:
    radial-gradient(80% 130% at 50% 0%, rgba(245,201,120,0.13), transparent 62%),
    rgba(255,255,255,0.03);
  text-align: center;
  overflow: hidden;
}
.appel-titre {
  font-family: var(--f-titre);
  font-size: var(--t-2xl);
  font-weight: 300;
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 72;
  line-height: 1.15;
}
.appel-titre em { font-style: italic; color: var(--or); }
.appel p { max-width: 48ch; margin: var(--e-4) auto var(--e-5); color: var(--brume); }

/* ==========================================================================
   Pied de page
   ========================================================================== */
.pied {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-4);
  flex-wrap: wrap;
  padding-block: var(--e-6);
  border-top: 1px solid var(--trait);
  font-size: var(--t-xs);
  color: var(--brume-2);
}
.pied a { color: var(--brume); }
.pied a:hover { color: var(--or); }

/* ==========================================================================
   Mode cinéma — projection plein écran pendant la soirée
   ========================================================================== */
.cinema {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 5rem);
  background: radial-gradient(90% 80% at 50% 40%, #150c3a 0%, #05020f 75%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s var(--doux), visibility 0.55s;
}
.cinema.est-ouvert { opacity: 1; visibility: visible; }

.cinema-scene {
  max-width: 60rem;
  text-align: center;
}
.cinema-texte {
  font-family: var(--f-titre);
  font-size: clamp(1.5rem, 0.9rem + 2.6vw, 3.4rem);
  font-weight: 300;
  font-variation-settings: "SOFT" 55, "WONK" 1, "opsz" 144;
  line-height: 1.34;
  color: #fdf9ff;
  white-space: pre-line;
}
.cinema-texte .mot {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em) rotate(1.5deg);
  animation: mot-parait 0.62s var(--ressort) forwards;
}
@keyframes mot-parait { to { opacity: 1; transform: none; } }

.cinema-signature {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  margin-top: clamp(1.5rem, 4vw, 3rem);
  padding: 0.6rem 1.2rem 0.6rem 0.6rem;
  border: 1px solid var(--trait);
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.05);
  opacity: 0;
  animation: monte 0.7s 0.35s var(--ressort) forwards;
}
.cinema-signature .pastille { width: 2.6rem; height: 2.6rem; font-size: var(--t-md); }
.cinema-nom { font-weight: 600; }
.cinema-relation { font-size: var(--t-xs); color: var(--brume-2); }

.cinema-barre {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: rgba(255,255,255,0.08);
}
.cinema-barre i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--fuchsia), var(--or));
}

.cinema-commandes {
  position: absolute;
  left: 50%; bottom: clamp(1.2rem, 4vw, 2.5rem);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--e-3);
}
.cinema-compteur {
  min-width: 5.5rem;
  text-align: center;
  font-family: var(--f-data);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  color: var(--brume);
}
.cinema-fermer { position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.cinema-aide {
  position: absolute;
  left: clamp(1rem, 3vw, 2rem); bottom: clamp(1.2rem, 4vw, 2.5rem);
  font-family: var(--f-data);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--brume-2);
}
@media (max-width: 720px) { .cinema-aide { display: none; } }

/* ==========================================================================
   Page « déposer un vœu »
   ========================================================================== */
.atelier {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  padding-block: var(--e-7) var(--e-8);
}
@media (max-width: 900px) { .atelier { grid-template-columns: 1fr; } }

.atelier-tete { margin-bottom: var(--e-6); }
.atelier-titre {
  font-family: var(--f-titre);
  font-size: var(--t-3xl);
  font-weight: 300;
  font-variation-settings: "SOFT" 55, "WONK" 1, "opsz" 144;
  line-height: 1.05;
}
.atelier-titre em { font-style: italic; color: var(--or); }
.atelier-tete p { max-width: 46ch; margin-top: var(--e-4); color: var(--brume); }

.formulaire { display: flex; flex-direction: column; gap: var(--e-5); }
.formulaire-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); }
@media (max-width: 560px) { .formulaire-duo { grid-template-columns: 1fr; } }

.compteur-signes {
  font-family: var(--f-data);
  font-size: var(--t-xs);
  color: var(--brume-2);
  font-variant-numeric: tabular-nums;
}
.compteur-signes.est-limite { color: var(--fuchsia); }

/* --- Nuancier ------------------------------------------------------------- */
.nuancier { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.nuancier input { position: absolute; opacity: 0; pointer-events: none; }
.nuancier label {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.24s var(--ressort), border-color 0.24s var(--doux);
}
.nuancier label span {
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: linear-gradient(140deg, hsl(var(--teinte), 85%, 68%), hsl(calc(var(--teinte) + 38), 80%, 52%));
}
.nuancier label:hover { transform: scale(1.12); }
.nuancier input:checked + label { border-color: var(--lin); transform: scale(1.12); }
.nuancier input:focus-visible + label { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* --- Aperçu vivant -------------------------------------------------------- */
.apercu { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: var(--e-4); }
.apercu-legende {
  font-family: var(--f-data);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brume-2);
}
.apercu .voeu { opacity: 1; transform: none; }
@media (max-width: 900px) { .apercu { position: static; order: -1; } }

/* --- Confirmation --------------------------------------------------------- */
.confirmation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-4);
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--e-5);
  text-align: center;
  border: 1px solid var(--trait-or);
  border-radius: var(--r-xl);
  background: radial-gradient(80% 120% at 50% 0%, rgba(245,201,120,0.14), transparent 60%);
  animation: monte 0.8s var(--ressort) both;
}
.confirmation-etoile {
  font-size: 3rem;
  line-height: 1;
  filter: drop-shadow(0 0 22px rgba(245,201,120,0.8));
  animation: scintille 2.6s ease-in-out infinite;
}
@keyframes scintille { 50% { transform: scale(1.14) rotate(8deg); } }
.confirmation-titre {
  font-family: var(--f-titre);
  font-size: var(--t-2xl);
  font-weight: 300;
  font-variation-settings: "SOFT" 50, "WONK" 1;
}
.confirmation p { max-width: 44ch; color: var(--brume); }

/* ==========================================================================
   Bouton « mode fête »
   ========================================================================== */
.interrupteur-fete {
  position: fixed;
  right: var(--e-5);
  bottom: var(--e-5);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--trait);
  border-radius: var(--r-full);
  background: rgba(19,11,51,0.9);
  backdrop-filter: blur(12px);
  color: var(--brume);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  cursor: pointer;
  box-shadow: var(--ombre-douce);
  transition: all 0.28s var(--doux);
}
.interrupteur-fete:hover { color: var(--lin); border-color: var(--trait-or); }
.interrupteur-fete[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--fuchsia), var(--violet));
  border-color: transparent;
  color: #fff;
}
@media (max-width: 640px) { .interrupteur-fete { right: var(--e-4); bottom: var(--e-4); } }

/* ==========================================================================
   « Vous êtes… » — cases à cocher, choix multiple
   ========================================================================== */
.champ-groupe { border: 0; margin: 0; padding: 0; min-width: 0; }
.champ-groupe legend {
  padding: 0;
  margin-bottom: var(--e-3);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--lin);
}
.champ-groupe legend .aide { margin-left: var(--e-2); }

.cases { display: flex; flex-wrap: wrap; gap: var(--e-2); }

.case {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  padding: 0.62rem 1.15rem 0.62rem 0.9rem;
  border: 1px solid var(--trait);
  border-radius: var(--r-full);
  background: rgba(6, 3, 20, 0.42);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.24s var(--doux), background 0.24s var(--doux),
              transform 0.24s var(--ressort);
}
.case:hover { border-color: rgba(255, 255, 255, 0.26); transform: translateY(-1px); }

.case input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.case-marque {
  position: relative;
  flex: none;
  width: 1.15rem; height: 1.15rem;
  border: 1.5px solid var(--brume-2);
  border-radius: 5px;
  transition: background 0.2s var(--doux), border-color 0.2s var(--doux);
}
.case-marque::after {
  content: "";
  position: absolute;
  left: 50%; top: 46%;
  width: 0.32rem; height: 0.6rem;
  margin: -0.34rem 0 0 -0.16rem;
  border: solid #2a1a02;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.22s var(--ressort);
}

.case-texte { font-size: var(--t-sm); font-weight: 500; color: var(--brume); transition: color 0.2s var(--doux); }

.case input:checked ~ .case-marque { background: var(--or); border-color: var(--or); }
.case input:checked ~ .case-marque::after { transform: rotate(45deg) scale(1); }
.case input:checked ~ .case-texte { color: var(--lin); }
.case input:focus-visible ~ .case-marque { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Pastille entière allumée — navigateurs récents */
.case:has(input:checked) {
  border-color: var(--trait-or);
  background: rgba(245, 201, 120, 0.09);
}

/* ==========================================================================
   Dépôt de fichier
   ========================================================================== */
.depot { position: relative; }

.depot-champ {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.depot-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  padding: var(--e-6) var(--e-5);
  border: 1.5px dashed var(--trait);
  border-radius: var(--r-md);
  background: rgba(6, 3, 20, 0.32);
  color: var(--brume);
  font-size: var(--t-sm);
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.24s var(--doux), background 0.24s var(--doux), color 0.24s var(--doux);
}
.depot-zone:hover,
.depot.est-survole .depot-zone {
  border-color: var(--or);
  background: rgba(245, 201, 120, 0.07);
  color: var(--lin);
}
.depot-champ:focus-visible + .depot-zone { outline: 2px solid var(--cyan); outline-offset: 3px; }
.depot-icone { font-size: 1.15rem; }

.depot.est-rempli .depot-zone { display: none; }

.depot-choisi {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-3);
  border: 1px solid var(--trait-or);
  border-radius: var(--r-md);
  background: rgba(245, 201, 120, 0.07);
  animation: monte 0.4s var(--ressort) both;
}
.depot-vignette {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.6rem; height: 3.6rem;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: rgba(6, 3, 20, 0.55);
  font-size: 1.35rem;
}
.depot-vignette img { width: 100%; height: 100%; object-fit: cover; }
.depot-infos { flex: 1; min-width: 0; }
.depot-infos b {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.depot-infos .donnee { font-size: var(--t-xs); color: var(--brume-2); }

/* ==========================================================================
   Médias dans les cartes du mur
   ========================================================================== */
.voeu-media {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin: calc(-1 * var(--e-5)) calc(-1 * var(--e-5)) 0;
}

.media-image,
.media-video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: rgba(6, 3, 20, 0.6);
}
.media-video { aspect-ratio: 16 / 9; object-fit: cover; }

.media-image {
  transition: transform 0.6s var(--doux);
}
.voeu:hover .media-image { transform: scale(1.02); }
/* Le débord du zoom est coupé par le conteneur */
.voeu-media { overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; }

.media-audio {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin: 0 var(--e-5);
  padding: var(--e-3) var(--e-4);
  border: 1px solid hsla(var(--teinte), 70%, 60%, 0.28);
  border-radius: var(--r-md);
  background: hsla(var(--teinte), 70%, 50%, 0.09);
}
.media-audio-etiquette {
  font-family: var(--f-data);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: hsl(var(--teinte), 80%, 76%);
}
.media-audio audio { width: 100%; height: 2.2rem; }

.media-lien {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin: 0 var(--e-5);
  padding: 0.55rem 1rem;
  border: 1px solid var(--trait);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.05);
  color: var(--lin);
  font-size: var(--t-sm);
  font-weight: 500;
  transition: border-color 0.24s var(--doux), background 0.24s var(--doux);
}
.media-lien:hover { border-color: var(--trait-or); background: rgba(245, 201, 120, 0.1); color: var(--or-clair); }
.media-lien-icone {
  display: grid;
  place-items: center;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: var(--fuchsia);
  color: #fff;
  font-size: 0.6rem;
  padding-left: 2px;
}
.media-lien-fleche { color: var(--brume-2); font-size: var(--t-xs); }

/* La citation perd son guillemet d'ouverture quand une photo la précède */
.voeu.a-media .voeu-texte::before { display: none; }
.voeu.a-media .voeu-texte { font-size: 1rem; }

/* ==========================================================================
   Médias en mode cinéma
   ========================================================================== */
.cinema-media {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(1rem, 3vw, 2rem);
}
.cinema-media:empty { display: none; }
.cinema-media img,
.cinema-media video {
  max-width: min(100%, 48rem);
  max-height: 42vh;
  width: auto;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9);
}
.cinema-media audio { width: min(100%, 30rem); }
.cinema-media .media-lien { margin: 0; }

/* La photo est obligatoire : sa zone de dépôt le montre */
.depot-photo .depot-zone {
  border-color: var(--trait-or);
  background: rgba(245, 201, 120, 0.05);
  color: var(--or-clair);
}
.depot-photo.est-rempli .depot-zone { display: none; }
.depot-photo .depot-choisi { border-color: var(--trait-or); }

/* Sur la carte, la photo passe en premier et occupe toute la largeur */
.voeu-media > .media-image:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.voeu-media > .media-video:not(:first-child) { border-radius: 0; margin: 0 var(--e-5); width: auto; }