/* Secret Santa varillon.fr : même structure que les autres applis (en-tête, largeur), habillage de fête (nuit d'hiver) */
:root {
  --largeur-page: 1760px;   /* largeur maximale de la page : fluide (pleine largeur) jusqu'à ce plafond, même valeur dans toutes les applis sauf la liseuse */
  --fond: #0f3d2e;
  --fond-haut: #0b2a3f;
  --surface: #fffaf2;
  --surface-2: #f4ead8;
  --texte-carte: #2b2118;
  --texte-carte-2: #7a6a58;
  --texte: #fdf6e9;
  --texte-2: #b9d6c9;
  --bord: #e4d5bb;
  --rouge: #c0392b;
  --rouge-fonce: #8e2a20;
  --vert: #1e8449;
  --vert-fonce: #145a32;
  --or: #f1c40f;
  --danger: #c0392b;
  --ombre: 0 10px 30px rgb(0 0 0 / .25);
  --rayon: 22px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: #0b2e22; }
body {
  margin: 0;
  background: radial-gradient(1200px 600px at 50% -10%, #1f5a8a55, transparent 70%), linear-gradient(180deg, var(--fond-haut), var(--fond) 55%, #0b2e22);
  background-attachment: fixed;
  color: var(--texte);
  font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
.neige { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.calque-effets { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }
.entete, .onglets, .vue { position: relative; z-index: 1; }
.lecteur-ecran { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* En-tête commun */
.entete {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: var(--largeur-page); margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 20px 8px;
}
.marque { display: inline-flex; align-items: center; font-weight: 650; font-size: 18px; letter-spacing: -.01em; text-decoration: none; }
.marque .logo { display: block; flex: none; margin-right: 10px; }
.marque span { color: var(--texte-2); font-weight: 450; }
.marques { display: flex; flex-direction: column; gap: 4px; }
.appli { display: inline-flex; align-items: center; gap: 8px; margin-left: 14px; font-weight: 600; font-size: 15px; text-decoration: none; }
.appli .coude { color: var(--texte-2); font-size: 18px; line-height: 1; }
.appli img { display: block; flex: none; border-radius: 5px; }
.nav { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.nav a { text-decoration: none; }
.qui { color: var(--texte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }
.discret { color: var(--texte-2); }
.lien-bouton { background: none; border: 0; box-shadow: none; padding: 0; cursor: pointer; font-weight: 400; }
.lien-bouton:hover, .nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.icone-bouton { background: none; border: 0; box-shadow: none; cursor: pointer; font-size: 18px; padding: 4px; line-height: 1; border-radius: 8px; }
.icone-bouton:hover { background: rgb(255 255 255 / .1); }
.engrenage { display: inline-flex; padding: 4px; border-radius: 8px; color: var(--texte-2); }
.engrenage.actif, .engrenage:hover { color: var(--texte); background: rgb(255 255 255 / .1); }

/* Onglets */
.onglets { display: flex; gap: 6px; flex-wrap: wrap; max-width: var(--largeur-page); margin: 4px auto 0; padding: 0 20px; }
.onglets a {
  text-decoration: none; padding: 8px 16px; border-radius: 999px; font-weight: 560; font-size: 15px;
  background: rgb(255 255 255 / .07); color: var(--texte-2); border: 1px solid rgb(255 255 255 / .08);
}
.onglets a:hover { color: var(--texte); background: rgb(255 255 255 / .12); }
.onglets a.actif { background: var(--rouge); color: #fff; border-color: transparent; box-shadow: 0 3px 0 var(--rouge-fonce); }

/* Contenu */
.vue { max-width: var(--largeur-page); margin: 0 auto; padding: 20px 20px 72px; }
.titre { margin: 12px 0 22px; }
h1 { font: 700 clamp(28px, 5vw, 44px)/1.1 Georgia, "Times New Roman", serif; letter-spacing: -.01em; margin: 0; }
.sous-titre { color: var(--texte-2); margin: 10px 0 0; max-width: 62ch; }
.petit { font-size: 14px; color: var(--texte-2); }
.message { min-height: 1.5em; margin: 10px 0 0; font-size: 14px; color: var(--texte-2); }
.message.erreur { color: #ff9b8f; }
.message.ok { color: #9ff0c0; }
.mot { font-style: italic; color: var(--texte-2); margin: 8px 0 0; }
.pastilles { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 14px 0 0; }
.pastilles li { padding: 6px 12px; border-radius: 999px; background: rgb(255 255 255 / .09); font-size: 14px; }

/* Boutons */
button {
  padding: 10px 18px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--vert); color: #fff; font-weight: 600; box-shadow: 0 3px 0 var(--vert-fonce);
}
button:hover { filter: brightness(1.08); }
button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--vert-fonce); }
button:disabled { opacity: .55; cursor: default; transform: none; }
.gros-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  padding: 15px 28px; border-radius: 999px; font-weight: 700; font-size: 17px; border: 0; cursor: pointer;
  background: linear-gradient(180deg, #e74c3c, var(--rouge)); color: #fff; box-shadow: 0 5px 0 var(--rouge-fonce), 0 10px 24px rgb(0 0 0 / .3);
  transition: transform .1s ease, box-shadow .1s ease;
}
.gros-bouton:hover { filter: brightness(1.06); transform: translateY(-1px); }
.gros-bouton:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--rouge-fonce); }
.gros-bouton.google { background: #fff; color: #1f1f1f; box-shadow: 0 5px 0 #c9c9c9, 0 10px 24px rgb(0 0 0 / .3); }
.bouton-secondaire {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding: 10px 18px; border-radius: 999px;
  background: rgb(255 255 255 / .1); color: inherit; border: 1px solid rgb(255 255 255 / .2); box-shadow: none; font-weight: 560; cursor: pointer;
}
.bloc .bouton-secondaire, .fenetre-apercu .bouton-secondaire { background: var(--surface-2); border-color: var(--bord); color: var(--texte-carte); }
.petit-bouton { padding: 6px 12px; font-size: 14px; }
.lien-danger, .lien-action { background: none; box-shadow: none; padding: 4px 0; font-weight: 560; font-size: 14px; }
.lien-danger { color: var(--danger); }
.lien-action { color: var(--vert); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }

/* Cartes (fond clair, style papier) */
.bloc {
  background: var(--surface); color: var(--texte-carte); border-radius: var(--rayon); padding: 22px; margin-bottom: 20px;
  box-shadow: var(--ombre); border: 1px solid var(--bord);
}
.bloc h2 { font: 700 21px/1.25 Georgia, serif; margin: 0 0 6px; }
.bloc h3 { font-size: 16px; margin: 22px 0 4px; }
.bloc .petit, .bloc .message { color: var(--texte-carte-2); }
.bloc .message.erreur { color: var(--danger); }
.bloc .message.ok { color: var(--vert); }
.ligne-titre { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ligne-titre .actions { margin-top: 0; }
.bloc input[type=text], .bloc input[type=email], .bloc input[type=url], .bloc input[type=number], .bloc input[type=date], .bloc input[type=time],
.bloc select, .bloc textarea, .ajout input {
  padding: 10px 14px; border-radius: 12px; border: 1px solid var(--bord); background: #fff; color: var(--texte-carte); min-width: 0;
}
.bloc input:focus, .bloc select:focus, .bloc textarea:focus, .ajout input:focus { outline: 2px solid var(--or); outline-offset: 1px; }
.ajout { display: flex; gap: 10px; flex-wrap: wrap; }
.ajout input { flex: 1 1 220px; }
.badge {
  display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; vertical-align: middle;
  background: color-mix(in srgb, var(--vert) 16%, transparent); color: var(--vert);
}
.badge.invite { background: color-mix(in srgb, var(--rouge) 14%, transparent); color: var(--rouge); }
.badge.admin { background: color-mix(in srgb, #b8860b 18%, transparent); color: #8a6508; }
.badge.cible { background: var(--rouge); color: #fff; margin-left: 0; }

/* Tableaux (administration) */
.tableau-defile { overflow-x: auto; margin-top: 12px; }
.tableau { border-collapse: collapse; width: 100%; font-size: 15px; }
.tableau th, .tableau td { text-align: left; padding: 9px 10px; border-top: 1px solid var(--bord); vertical-align: middle; }
.tableau thead th { border-top: 0; font-size: 13px; color: var(--texte-carte-2); font-weight: 600; }
.tableau tr.exclu { opacity: .55; }
.nom-edition { width: 100%; min-width: 120px; }

/* Réglages */
.reglages { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.reglages .actions { grid-column: 1 / -1; }
.reglage { display: flex; flex-direction: column; gap: 6px; }
.reglage.case { flex-direction: row; flex-wrap: wrap; align-items: center; }
.reglage.case .aide { flex-basis: 100%; }
.libelle { font-weight: 600; font-size: 15px; }
.grille-champs { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); margin-bottom: 14px; }
.formulaire-tirage textarea { width: 100%; resize: vertical; }
.formulaire-tirage > .libelle { margin: 18px 0 8px; }

/* Choix de la scène */
.scenes-choix { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.scene-carte {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 18px; cursor: pointer;
  border: 2px solid var(--bord); background: #fff; transition: border-color .15s, transform .15s;
}
.scene-carte:hover { transform: translateY(-2px); }
.scene-carte:has(input:checked) { border-color: var(--rouge); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rouge) 18%, transparent); }
.scene-carte input { position: absolute; top: 18px; left: 18px; width: 20px; height: 20px; accent-color: var(--rouge); z-index: 1; }
.scene-carte button { align-self: flex-start; margin-top: auto; }
.vignette { display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #123; }
.vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vignette-brut { display: grid; place-items: center; background: repeating-linear-gradient(45deg, #c0392b 0 18px, #d4483a 18px 36px); }
.vignette-texte { background: #fffaf2; color: #2b2118; padding: 10px 18px; border-radius: 12px; font: 700 22px/1 ui-monospace, monospace; box-shadow: 0 4px 0 #0003; }

/* Historique */
.historique { margin: 8px 0 0; padding-left: 18px; }
.historique li { margin: 6px 0; }

/* Connexion et pages vides */
.accueil-connexion, .vide-fete { text-align: center; max-width: 640px; margin: 4vh auto 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.accueil-connexion .sous-titre, .vide-fete .sous-titre { margin-bottom: 14px; }
.choix-connexion { display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: min(100%, 440px); }
.ou { color: var(--texte-2); font-size: 14px; display: flex; align-items: center; gap: 12px; }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: rgb(255 255 255 / .2); }
.accueil-connexion .ajout input { background: #fffaf2; color: #2b2118; border: 0; }
.grand-emoji { font-size: 72px; margin: 0; line-height: 1; }
.hotte { height: 170px; display: grid; place-items: end center; margin-bottom: 10px; }

/* ---------- Paquet cadeau (CSS) ---------- */
.cadeau {
  --l: calc(120px * var(--taille, 1));
  position: relative; display: block; width: var(--l); height: calc(var(--l) * 1.05); padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; cursor: pointer; transform-origin: 50% 100%;
}
.cadeau:hover { filter: brightness(1.08); }
.cadeau:active { transform: none; box-shadow: none; }
.cadeau:focus-visible { outline: 3px solid var(--or); outline-offset: 6px; border-radius: 8px; }
.cadeau.deco { cursor: default; }
.boite, .couvercle { position: absolute; left: 50%; translate: -50% 0; border-radius: calc(var(--l) * .05); }
.boite {
  bottom: 0; width: 100%; height: 66%;
  background:
    linear-gradient(90deg, transparent 43%, var(--ruban) 43% 57%, transparent 57%),
    radial-gradient(circle at 25% 30%, rgb(255 255 255 / .22) 0 5%, transparent 6%) 0 0 / 30% 33%,
    linear-gradient(180deg, rgb(0 0 0 / .18), transparent 20%),
    var(--papier);
  box-shadow: inset 0 -10px 0 rgb(0 0 0 / .12), 0 10px 18px rgb(0 0 0 / .35);
}
.couvercle {
  bottom: 62%; width: 112%; height: 22%; z-index: 2;
  background: linear-gradient(90deg, transparent 43.5%, var(--ruban) 43.5% 56.5%, transparent 56.5%), var(--papier);
  box-shadow: inset 0 -6px 0 rgb(0 0 0 / .18), 0 4px 6px rgb(0 0 0 / .2);
  transition: transform .9s cubic-bezier(.2, .9, .3, 1.2), opacity .9s ease;
}
.noeud { position: absolute; left: 50%; bottom: 82%; width: 0; height: 0; }
.noeud i {
  position: absolute; bottom: 0; width: calc(var(--l) * .34); height: calc(var(--l) * .24);
  border: calc(var(--l) * .055) solid var(--ruban); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
.noeud i:first-child { right: -2px; transform: rotate(-22deg); transform-origin: 100% 100%; }
.noeud i:last-child { left: -2px; transform: rotate(22deg); transform-origin: 0 100%; }
.etiquette {
  position: absolute; left: 50%; bottom: calc(66% * .35); translate: -50% 0; z-index: 3; max-width: 120%;
  padding: 3px 10px 3px 14px; border-radius: 4px 10px 10px 4px; font: 700 13px/1.2 Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: #fffaf2; color: #3b2a1e; box-shadow: 0 2px 4px rgb(0 0 0 / .35); rotate: -4deg;
}
.etiquette::before { content: ""; position: absolute; left: 5px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #c9b896; }

/* Animations des paquets */
.cadeau.attend { animation: attend 3.2s ease-in-out infinite; }
@keyframes attend { 0%, 70%, 100% { transform: rotate(0) } 75% { transform: rotate(-4deg) translateY(-6px) } 80% { transform: rotate(4deg) } 85% { transform: rotate(-3deg) translateY(-3px) } 90% { transform: rotate(2deg) } }
.cadeau.secoue { animation: secoue .14s linear infinite; }
@keyframes secoue { 0% { transform: rotate(-5deg) translateX(-3px) } 50% { transform: rotate(5deg) translateX(3px) } 100% { transform: rotate(-5deg) translateX(-3px) } }
.cadeau.ouvert { animation: none; cursor: default; }
.cadeau.ouvert .couvercle { transform: translate(40%, -260%) rotate(38deg); opacity: 0; }
.cadeau.non { animation: non .45s ease; }
@keyframes non { 0%, 100% { transform: rotate(0) } 20% { transform: rotate(-7deg) } 40% { transform: rotate(6deg) } 60% { transform: rotate(-4deg) } 80% { transform: rotate(2deg) } }
.cadeau.indice { animation: indice 1.2s ease-in-out infinite; }
@keyframes indice { 0%, 100% { filter: drop-shadow(0 0 0 #ffd84d) } 50% { filter: drop-shadow(0 0 18px #ffd84d) brightness(1.15) } }
.cadeau.efface { opacity: 0; transform: scale(.6) translateY(30px); transition: opacity .6s ease, transform .6s ease; pointer-events: none; }

/* ---------- Scènes ---------- */
.zone-scene { position: relative; }
.scene { position: relative; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
.scene-decor { aspect-ratio: 16 / 10; min-height: 420px; max-height: calc(100dvh - 40px); width: 100%; background: #0b1026; }
.decor { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bulle {
  position: absolute; top: 18px; left: 50%; translate: -50% 0; z-index: 5; margin: 0; padding: 10px 18px; border-radius: 999px;
  background: #fffaf2; color: #3b2a1e; font-weight: 700; box-shadow: 0 6px 16px rgb(0 0 0 / .35); white-space: nowrap;
  animation: flotte 2.6s ease-in-out infinite;
}
.bulle.erreur { color: var(--danger); animation: none; top: auto; bottom: 18px; white-space: normal; max-width: 90%; }
@keyframes flotte { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
.place-unique { position: absolute; left: 50%; bottom: 7%; translate: -50% 0; z-index: 2; }
.scene-cadeau .cadeau { --l: clamp(110px, 17vw, 190px); }
.place { position: absolute; translate: -50% 0; animation: tombe-place .7s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes tombe-place { from { transform: translateY(-60vh) } to { transform: translateY(0) } }
.scene-cadeaux .cadeau { --l: clamp(62px, calc(9vw * var(--taille)), calc(130px * var(--taille))); }
.place.au-centre { left: 50% !important; bottom: 10% !important; transition: left .7s ease, bottom .7s ease; z-index: 6 !important; }
.place.au-centre .cadeau { --l: clamp(110px, 16vw, 180px); transition: width .7s ease, height .7s ease; }
.bulle-rate {
  position: absolute; bottom: 100%; left: 50%; translate: -50% -8px; z-index: 8; padding: 6px 12px; border-radius: 12px;
  background: #fffaf2; color: #3b2a1e; font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: 0 4px 10px rgb(0 0 0 / .35);
  animation: rate 1.6s ease forwards;
}
@keyframes rate { 0% { opacity: 0; transform: translateY(8px) scale(.8) } 15% { opacity: 1; transform: translateY(0) scale(1) } 80% { opacity: 1 } 100% { opacity: 0; transform: translateY(-10px) } }

/* Révélation : rayons de lumière et carte avec le nom */
.revelation { position: absolute; inset: 0; display: grid; place-items: center; z-index: 7; pointer-events: none; }
.rayons {
  position: absolute; width: 160%; aspect-ratio: 1; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgb(255 236 150 / .32) 0 8deg, transparent 8deg 22deg);
  mask: radial-gradient(circle, #000 0 20%, transparent 62%);
  animation: rayons 14s linear infinite, apparait .8s ease both;
}
@keyframes rayons { to { rotate: 360deg } }
@keyframes apparait { from { opacity: 0 } to { opacity: 1 } }
.carte-nom {
  position: relative; text-align: center; padding: 22px 34px 20px; border-radius: 22px; max-width: 90%;
  background: #fffaf2; color: #2b2118; box-shadow: 0 20px 50px rgb(0 0 0 / .45), 0 0 0 6px var(--or);
  animation: carte 1s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes carte { from { transform: translateY(160px) scale(.3) rotate(-8deg); opacity: 0 } to { transform: none; opacity: 1 } }
.avant-nom { margin: 0; color: var(--texte-2); font-weight: 600; }
.carte-nom .avant-nom, .carte-nom .apres-nom { color: #7a6a58; }
.apres-nom { margin: 6px 0 0; font-size: 14px; }
.nom-tire {
  margin: 4px 0 0; font: 700 clamp(34px, 7vw, 64px)/1.1 Georgia, serif; overflow-wrap: anywhere;
  background: linear-gradient(90deg, #c0392b, #e67e22, #c0392b); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: brille 3s linear infinite;
}
@keyframes brille { to { background-position: 200% 0 } }
.suite { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }

/* Scène brute : formulaire officiel */
.scene-brut { display: grid; place-items: center; padding: 6vh 16px; background: repeating-linear-gradient(45deg, #b83227 0 26px, #c0392b 26px 52px); }
.carte-brut {
  width: min(100%, 520px); background: var(--surface); color: var(--texte-carte); border-radius: 18px; padding: 24px;
  box-shadow: 0 12px 0 #0002, var(--ombre); display: flex; flex-direction: column; gap: 14px; border: 2px dashed var(--bord);
}
.carte-brut h2 { margin: 0; font: 700 20px/1.3 Georgia, serif; }
.champ { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.champ input { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--bord); background: var(--surface-2); color: var(--texte-carte); }
.case { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.case input { width: 20px; height: 20px; accent-color: var(--rouge); flex: none; }
.fente {
  display: grid; place-items: center; height: 92px; border-radius: 14px; overflow: hidden;
  background: #1b1b1b; color: #ffd84d; box-shadow: inset 0 8px 16px #000a; border: 4px solid #3b3b3b;
}
.fente-nom { font: 700 clamp(26px, 6vw, 40px)/1 ui-monospace, "Courier New", monospace; letter-spacing: .02em; text-align: center; padding: 0 10px; }
.fente.gagne { background: radial-gradient(circle, #3b2f00, #1b1b1b); border-color: var(--or); animation: gagne .6s ease 3; }
@keyframes gagne { 50% { box-shadow: inset 0 8px 16px #000a, 0 0 30px #ffd84d } }
.resultat-brut { margin: 0; text-align: center; font-size: 20px; }
.resultat-brut strong { color: var(--rouge); }

/* Résultat déjà découvert */
.resultat {
  text-align: center; margin: 4vh auto 0; max-width: 820px; padding: 32px 20px; border-radius: 28px;
  background: radial-gradient(circle at 50% 0, rgb(255 216 77 / .18), transparent 60%), rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .1);
}
.resultat .pastilles, .resultat .actions { justify-content: center; }
.nom-tire.grand { font-size: clamp(42px, 9vw, 88px); }

/* Listes d'envies */
.idees-edition { list-style: none; counter-reset: idee; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.idee-ligne { display: flex; gap: 10px; align-items: flex-start; counter-increment: idee; }
.idee-ligne::before { content: counter(idee); flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-top: 6px; border-radius: 50%; background: var(--rouge); color: #fff; font-weight: 700; font-size: 14px; }
.idee-ligne .champs { flex: 1; display: grid; gap: 8px; grid-template-columns: 2fr 1.4fr 1.6fr; }
.retirer { background: none; box-shadow: none; color: var(--texte-carte-2); padding: 8px 10px; margin-top: 2px; }
.retirer:hover { color: var(--danger); }
.listes-grille { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.liste-carte {
  position: relative; background: var(--surface); color: var(--texte-carte); border-radius: var(--rayon); padding: 20px 20px 16px; box-shadow: var(--ombre);
  border-top: 8px solid var(--vert);
}
.liste-carte.cible { border-top-color: var(--rouge); box-shadow: var(--ombre), 0 0 0 3px var(--or); }
.liste-carte.la-mienne { border-top-color: var(--or); }
.liste-carte header { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.liste-carte h2 { font: 700 20px/1.2 Georgia, serif; margin: 0; }
.liste-carte .petit { color: var(--texte-carte-2); }
.idees { margin: 0; padding-left: 20px; }
.idees li { margin: 6px 0; }
.idees li::marker { content: "🎁 "; }
.idees a { color: var(--rouge); font-weight: 600; }
.idees .note { display: block; }
.maj { margin: 12px 0 0; font-size: 12px; }

/* Fenêtre d'aperçu (administration) */
.fenetre-apercu { width: min(1100px, 96vw); max-height: 94vh; border: 0; border-radius: var(--rayon); padding: 18px; background: var(--surface); color: var(--texte-carte); }
.fenetre-apercu::backdrop { background: rgb(0 0 0 / .65); }
.fenetre-apercu h2 { margin: 0 0 12px; font: 700 20px/1.2 Georgia, serif; }
.fenetre-apercu .avant-nom { color: #7a6a58; }

/* Petits messages */
.toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); translate: -50% 0; z-index: 60; max-width: 92vw;
  padding: 12px 20px; border-radius: 14px; background: #fffaf2; color: #2b2118; font-weight: 600; box-shadow: 0 10px 30px rgb(0 0 0 / .4);
  animation: toast .35s cubic-bezier(.2, 1.4, .4, 1); transition: opacity .5s ease, transform .5s ease;
}
.toast.erreur { background: #fde4e1; color: #8e2a20; }
.toast.part { opacity: 0; transform: translateY(20px); }
@keyframes toast { from { transform: translateY(40px); opacity: 0 } }

/* Téléphone */
@media (max-width: 720px) {
  .entete { flex-wrap: wrap; }
  .qui { display: none; }
  .scene-decor { aspect-ratio: auto; height: 72vh; min-height: 460px; }
  .idee-ligne .champs { grid-template-columns: 1fr; }
  .onglets a { padding: 7px 12px; font-size: 14px; }
  .bulle { white-space: normal; text-align: center; width: max-content; max-width: 86%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}