:root {
  --parchemin: #f6e9d2;
  --parchemin-clair: #fbf1de;
  --parchemin-fonce: #e9d6b4;
  --encre: #5b3a2e;
  --encre-douce: #7a5a48;
  --or: #be9247;
  --rose: #c16b82;
  --vin: #822641;
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --font-body: 'EB Garamond', Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--encre);
  background:
    radial-gradient(circle at 50% -10%, var(--parchemin-clair), var(--parchemin) 55%, var(--parchemin-fonce));
  height: 100vh;
  overflow: hidden;
}

/* ---------- En-tête (en surimpression sur la carte) ---------- */
#entete {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9;
  text-align: center; padding: 14px 16px 34px; pointer-events: none;
  background: linear-gradient(to bottom,
    var(--parchemin-clair) 0%, rgba(246,233,210,.82) 42%, rgba(246,233,210,0) 100%);
}
.eyebrow {
  margin: 0; font-size: .74rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--or); font-weight: 600;
}
.eyebrow::before, .eyebrow::after { content: "❦"; margin: 0 .5em; opacity: .8; letter-spacing: 0; }
#entete h1 {
  margin: 2px 0 0; font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: clamp(2.2rem, 9vw, 3.2rem); line-height: .95; color: var(--encre);
  text-shadow: 0 1px 3px rgba(246,233,210,.8);
}
.sous-titre {
  margin: 5px 0 0; font-family: var(--font-body); font-style: italic;
  font-size: 1rem; color: var(--encre-douce);
}

/* Besace = cinq cœurs qui se remplissent */
.besace-bloc { margin-top: 10px; }
.besace-label {
  display: block; font-size: .7rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--encre-douce); margin-bottom: 2px;
}
#besace { font-size: 1.6rem; line-height: 1; letter-spacing: .12em; }
#besace .coeur { color: rgba(130,38,65,.28); transition: transform .3s ease, color .3s ease; display: inline-block; }
#besace .coeur.pris { color: var(--vin); transform: scale(1.12); text-shadow: 0 1px 4px rgba(130,38,65,.35); }

/* ---------- Carte ---------- */
#carte {
  position: fixed; inset: 0; margin: 0; z-index: 0;
}
#fond-carte { display: block; width: 100%; height: 100%; object-fit: cover; }
#iles { position: absolute; inset: 0; }
/* cadre doré + vignette chaude plein écran, transparent aux clics */
#carte::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 8;
  box-shadow:
    inset 0 0 0 3px rgba(190,146,71,.8),
    inset 0 0 0 9px rgba(246,233,210,.35),
    inset 0 0 120px rgba(130,40,55,.32);
}

/* ---------- Îles ---------- */
.ile {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  background: none; border: none; cursor: pointer; padding: 4px;
  color: var(--encre); font-family: inherit;
}
.ile-illus { display: block; filter: drop-shadow(0 3px 3px rgba(50,30,20,.35)); }
.ile:hover .ile-illus { filter: drop-shadow(0 4px 5px rgba(50,30,20,.45)) brightness(1.05); }
.ile .nom {
  margin-top: 3px; font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  color: var(--encre);
  background: rgba(246,233,210,.9); padding: 1px 8px; border-radius: 10px;
  box-shadow: 0 1px 3px rgba(90,40,30,.2);
}
.ile:focus-visible { outline: 2px solid var(--vin); outline-offset: 3px; border-radius: 10px; }
.ile.visitee .nom { color: var(--vin); }
.ile.visitee .nom::after { content: " ♥"; }
.ile.active .ile-illus { animation: ile-battement 2s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes ile-battement {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12) translateY(-2px); }
}
.ile.active::after {
  content: ""; position: absolute; left: 50%; top: 46%; width: 74px; height: 74px;
  transform: translate(-50%, -50%); border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(197,107,130,.5), transparent 68%);
  animation: halo-ile 2s ease-in-out infinite;
}
@keyframes halo-ile { 0%, 100% { opacity: .5; transform: translate(-50%,-50%) scale(1); } 50% { opacity: .85; transform: translate(-50%,-50%) scale(1.18); } }

/* ---------- Couches décoratives de la carte ---------- */
#soleil, #eau, #nuages, #etincelles, #route { position: absolute; inset: 0; pointer-events: none; }
#soleil { z-index: 1; }
#eau { z-index: 1; }
#nuages { z-index: 2; overflow: hidden; }
#route { z-index: 2; width: 100%; height: 100%; }
#etincelles { z-index: 3; }

#soleil {
  background: radial-gradient(circle at 50% 14%, rgba(255,231,186,.6), rgba(255,231,186,.18) 34%, transparent 55%);
  animation: soleil-pulse 9s ease-in-out infinite;
}
@keyframes soleil-pulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

#eau {
  background:
    repeating-linear-gradient(114deg, rgba(255,255,255,.05) 0 10px, transparent 10px 30px),
    repeating-linear-gradient(66deg, rgba(90,40,55,.04) 0 14px, transparent 14px 40px);
  mix-blend-mode: soft-light;
  animation: eau-derive 16s linear infinite;
}
@keyframes eau-derive { from { background-position: 0 0, 0 0; } to { background-position: 140px 70px, -120px 60px; } }

.nuage {
  position: absolute; border-radius: 50%; filter: blur(10px);
  background: radial-gradient(ellipse at center, rgba(255,250,240,.55), transparent 70%);
}
.nuage.n1 { width: 180px; height: 60px; top: 18%; animation: nuage-derive 46s linear infinite; }
.nuage.n2 { width: 130px; height: 46px; top: 54%; opacity: .8; animation: nuage-derive 62s linear infinite; animation-delay: -20s; }
.nuage.n3 { width: 220px; height: 70px; top: 78%; opacity: .6; animation: nuage-derive 78s linear infinite; animation-delay: -40s; }
@keyframes nuage-derive { from { transform: translateX(-30%); } to { transform: translateX(130vw); } }

.etincelle {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 30%, #e6b96a 55%, transparent 70%);
  opacity: .2; animation: etincelle-twinkle 3.4s ease-in-out infinite;
}
@keyframes etincelle-twinkle {
  0%, 100% { opacity: .12; transform: scale(.5); }
  50% { opacity: .9; transform: scale(1); }
}

#route path {
  fill: none; stroke: var(--or); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 1 8; vector-effect: non-scaling-stroke; opacity: .55;
  filter: drop-shadow(0 0 3px rgba(197,107,130,.6));
  animation: route-flux 1.4s linear infinite;
}
@keyframes route-flux { to { stroke-dashoffset: -9; } }

/* Message d'attente entre deux jours */
#message {
  position: fixed; left: 12px; right: 168px; bottom: 20px; z-index: 9;
  margin: 0; text-align: center;
  font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--vin);
  background: rgba(246,233,210,.9); padding: 8px 18px; border-radius: 20px;
  box-shadow: 0 3px 12px rgba(90,40,30,.25);
}
#message[hidden] { display: none; }

/* ---------- Parchemin d'aide (bas à droite, au-dessus du gouvernail) ---------- */
#guide {
  position: fixed; right: 14px; bottom: 178px; z-index: 16;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  max-width: min(340px, 86vw); pointer-events: none;
}
#guide-toggle, #guide-panneau { pointer-events: auto; }
#guide-toggle {
  border: 2px solid var(--or); border-radius: 20px; background: rgba(246,233,210,.96); color: var(--vin);
  font-family: var(--font-display); font-style: italic; font-size: 1.05rem;
  padding: 8px 16px; cursor: pointer; box-shadow: 0 4px 12px rgba(90,40,30,.35); white-space: nowrap;
}
#guide-toggle:hover { background: #fff; }
#guide-panneau {
  width: min(340px, 86vw); max-height: 0; opacity: 0; overflow: hidden; padding: 0 18px;
  background: radial-gradient(circle at 50% 0%, var(--parchemin-clair), var(--parchemin) 80%);
  border-radius: 14px; color: var(--encre);
  box-shadow: 0 0 0 2px var(--or), 0 10px 26px rgba(40,18,10,.4);
  transition: max-height .45s ease, opacity .3s ease, padding .3s ease;
}
#guide-panneau.ouvert { max-height: 72vh; opacity: 1; overflow-y: auto; padding: 16px 18px; }
#guide-panneau h3 {
  font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: var(--vin);
  margin: 2px 0 6px; text-align: center;
}
.guide-intro { font-style: italic; color: var(--encre-douce); margin: 0 0 10px; }
#guide-panneau ul { list-style: none; padding: 0; margin: 0; }
#guide-panneau li { margin: 0 0 12px; line-height: 1.5; font-size: 1.02rem; }
#guide-panneau li b { color: var(--vin); }

/* ---------- Combat de Titan (déroulé en haut à gauche) ---------- */
#titan {
  position: fixed; top: 72px; left: 10px; z-index: 15; width: min(340px, 86vw);
  background: rgba(246,233,210,.97); border: 2px solid var(--vin); border-radius: 14px;
  padding: 16px 18px; box-shadow: 0 8px 22px rgba(90,40,30,.45);
  font-family: var(--font-body); font-size: 1.08rem; color: var(--encre);
  animation: titan-surgit .3s ease;
}
#titan[hidden] { display: none; }
@keyframes titan-surgit { from { transform: translateX(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
.titan-titre { font-family: var(--font-display); font-style: italic; font-size: 1.4rem; color: var(--vin); margin: 0 0 6px; }
.titan-regle { font-size: 1.08rem; line-height: 1.5; margin: 6px 0 12px; }
.titan-regle b { color: var(--vin); }
#titan p { margin: 6px 0; }
.titan-boutons { display: flex; gap: 6px; margin: 8px 0 4px; flex-wrap: wrap; }
#titan button {
  border: none; border-radius: 9px; background: var(--or); color: #fff;
  padding: 11px 14px; cursor: pointer; font-family: var(--font-body); font-size: 1.02rem;
}
#titan button:hover { background: var(--rose); }
#titan button:disabled { opacity: .5; cursor: default; }
.titan-fuir { background: transparent !important; color: var(--encre-douce) !important; text-decoration: underline; padding: 4px 0 !important; }
.titan-action, .titan-frappe { width: 100%; margin-top: 6px; }
.titan-frappe { font-size: 1.15rem !important; padding: 14px !important; background: var(--vin) !important; }
.titan-resultat { font-weight: 600; min-height: 1.2em; }
.titan-recompense { color: var(--vin); font-weight: 600; }
.titan-media { width: 100%; border-radius: 8px; margin-top: 6px; }
.titan-chrono { color: var(--vin); font-weight: 600; }
.titan-pret { background: var(--vin) !important; animation: titan-flash .4s ease infinite alternate; }
@keyframes titan-flash { from { filter: brightness(1); } to { filter: brightness(1.4); } }

/* ---------- Bateau ---------- */
#bateau {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 6; pointer-events: none;
  transition: left .12s linear, top .12s linear;
  filter: drop-shadow(0 3px 3px rgba(90,40,30,.35));
}
#bateau.voyage { transition: left 1.5s ease-in-out, top 1.5s ease-in-out; }
#bateau svg { display: block; transform-origin: 50% 92%; animation: tangue 3.6s ease-in-out infinite; }
#bateau.gauche svg { animation-name: tangue-g; }
@keyframes tangue {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-2px) rotate(3deg); }
}
@keyframes tangue-g {
  0%, 100% { transform: scaleX(-1) translateY(0) rotate(-3deg); }
  50%      { transform: scaleX(-1) translateY(-2px) rotate(3deg); }
}

/* ---------- Gouvernail ---------- */
#gouvernail {
  position: fixed; right: 16px; bottom: 16px;
  display: grid; grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(3, 46px);
  gap: 4px; z-index: 20;
}
.fleche {
  border: none; border-radius: 50%;
  background: rgba(190,146,71,.9); color: var(--parchemin-clair);
  font-size: 1rem; cursor: pointer; user-select: none;
  box-shadow: 0 2px 5px rgba(90,40,30,.35); transition: transform .1s ease, background .1s ease;
}
.fleche:hover { background: var(--rose); }
.fleche:active { transform: scale(.9); background: var(--vin); }
.fleche:focus-visible { outline: 2px solid var(--vin); outline-offset: 2px; }
.f-haut   { grid-column: 2; grid-row: 1; }
.f-gauche { grid-column: 1; grid-row: 2; }
.f-droite { grid-column: 3; grid-row: 2; }
.f-bas    { grid-column: 2; grid-row: 3; }

/* ---------- Overlays (panneau & final) ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(40,18,10,.55); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 10px; z-index: 30;
}
.overlay[hidden] { display: none; }
.panneau-boite {
  position: relative; background:
    radial-gradient(circle at 50% 0%, var(--parchemin-clair), var(--parchemin) 70%);
  border-radius: 16px; max-width: 520px; width: 100%; max-height: 95vh; overflow-y: auto;
  padding: 24px 22px; text-align: center;
  box-shadow: 0 0 0 2px var(--or), 0 0 0 8px rgba(246,233,210,.5), 0 18px 40px rgba(40,18,10,.4);
}
.panneau-boite.panneau-jeu { max-width: 680px; padding: 22px 18px; }
.victoire-photo {
  width: 100%; max-height: 46vh; object-fit: cover; border-radius: 12px;
  margin-bottom: 10px; box-shadow: 0 4px 14px rgba(90,40,30,.35);
}
.victoire-message {
  font-family: var(--font-display); font-style: italic; font-size: 1.5rem;
  color: var(--vin); margin: 0 0 6px;
}
#panneau-fermer, #final-fermer {
  position: absolute; top: 10px; right: 12px; border: none; background: none;
  font-size: 1.2rem; cursor: pointer; color: var(--encre-douce);
}
#panneau-fermer:focus-visible { outline: 2px solid var(--vin); outline-offset: 2px; border-radius: 6px; }
.panneau-boite h2 {
  margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: 2rem; color: var(--encre);
}
.fleuron { color: var(--or); font-size: 1.1rem; margin: 2px 0 12px; letter-spacing: .3em; }
.panneau-boite img {
  width: 100%; border-radius: 10px; margin-bottom: 14px;
  box-shadow: 0 3px 10px rgba(90,40,30,.25);
}
.connexion-intro { font-style: italic; color: var(--encre-douce); margin: 4px 0 14px; font-size: 1.05rem; }
.carte-texte { font-size: 1.16rem; line-height: 1.55; color: var(--encre); margin: 4px 4px 20px; }
.question-options { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.question-options .choix { width: 100%; background: rgba(190,146,71,.92); font-size: 1.05rem; padding: 13px 16px; }
.question-options .choix:hover { background: var(--rose); }
.epreuve-mot { font-style: italic; font-size: 1.1rem; color: var(--encre-douce); margin: 0 0 10px; }
.epreuve-enigme { font-size: 1.12rem; margin: 0 0 4px; }
.epreuve-form { display: flex; gap: 8px; margin-top: 14px; }
.epreuve-form input {
  flex: 1; padding: 11px 12px; font-size: 1rem; font-family: var(--font-body);
  border: 2px solid var(--or); border-radius: 10px; background: rgba(255,255,255,.5); color: var(--encre);
}
.epreuve-form input:focus-visible { outline: 2px solid var(--vin); outline-offset: 1px; }
.epreuve-form button, .btn {
  padding: 11px 18px; font-size: 1rem; font-family: var(--font-body); border: none; border-radius: 10px;
  background: var(--vin); color: var(--parchemin-clair); cursor: pointer; letter-spacing: .02em;
}
.epreuve-form button:hover, .btn:hover { background: var(--rose); }
.epreuve-erreur { color: var(--vin); margin-top: 10px; min-height: 1.2em; font-style: italic; }
.epreuve-succes { color: var(--vin); font-weight: 600; margin-top: 10px; font-size: 1.1rem; }
.galerie-titre {
  font-family: var(--font-display); font-style: italic; font-size: 1.3rem;
  color: var(--vin); margin: 14px 0 4px;
}
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 14px; }
.galerie-vignette {
  position: relative; width: 100%; aspect-ratio: 1; border: none; padding: 0; overflow: hidden;
  background-size: cover; background-position: center; background-color: #2a1a12;
  border-radius: 8px; cursor: pointer; box-shadow: 0 2px 6px rgba(90,40,30,.25); transition: transform .12s ease;
}
.galerie-vignette:hover { transform: scale(1.04); }
.galerie-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.galerie-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.7rem; text-shadow: 0 1px 6px rgba(0,0,0,.7); pointer-events: none;
}
.lightbox {
  position: fixed; inset: 0; z-index: 50; background: rgba(20,10,6,.92);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.lightbox img, .lightbox video { max-width: 100%; max-height: 90vh; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.lightbox-fermer {
  position: absolute; top: 14px; right: 18px; z-index: 1; border: none; background: rgba(0,0,0,.4);
  color: #fff; width: 40px; height: 40px; border-radius: 50%; font-size: 1.2rem; cursor: pointer;
}
.final-indices { text-align: left; font-size: 1.08rem; line-height: 1.5; color: var(--encre); }
.final-mot { font-style: italic; color: var(--encre-douce); }

/* ---------- Mini-jeu « Attrape-moi » ---------- */
.jeu-consigne { font-size: .98rem; color: var(--encre-douce); margin: 0 0 12px; }
#jeu-scene { display: flex; flex-direction: column; align-items: center; }
.pac-wrap { position: relative; width: 100%; margin: 6px 0 0; }
.pac-scene {
  position: relative;
  background: rgba(90,40,55,.06); border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(190,146,71,.6);
}
.pac-scene.finale { box-shadow: inset 0 0 0 2px var(--vin), 0 0 24px rgba(130,38,65,.4); }
.pac-mur { position: absolute; width: var(--cell); height: var(--cell); background: var(--encre); opacity: .82; border-radius: 6px; }
.pac-coeur {
  position: absolute; width: var(--cell); height: var(--cell); display: flex; align-items: center; justify-content: center;
  color: var(--vin); font-size: calc(var(--cell) * .5); pointer-events: none;
}
.pac-jeton {
  position: absolute; top: 0; left: 0; width: calc(var(--cell) - 6px); height: calc(var(--cell) - 6px); border-radius: 50%;
  background-size: cover; background-position: center;
  transition: transform .14s linear; box-shadow: 0 1px 3px rgba(90,40,30,.4); z-index: 2;
}
.pac-moi { border: 2px solid #5b7fa6; }
.pac-tania { border: 2px solid var(--vin); z-index: 3; }
.pac-bisou {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 3rem; z-index: 5; animation: pac-pop .5s ease; pointer-events: none;
}
@keyframes pac-pop { from { transform: scale(0); } 60% { transform: scale(1.3); } to { transform: scale(1); } }
.pac-statut { font-size: .9rem; color: var(--encre-douce); margin: 10px 0 0; font-style: italic; }

/* ---------- Jeu « clique » (Angers) ---------- */
.clic-jeu { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 8px 0 4px; }
.clic-hud { font-family: var(--font-display); font-size: 1.5rem; color: var(--encre); }
#clic-chrono { color: var(--vin); font-weight: 600; }
.clic-bouton {
  width: 200px; height: 200px; border-radius: 50%; border: none; cursor: pointer;
  background: radial-gradient(circle at 40% 34%, #d98ea0, var(--vin));
  color: #fff; font-size: 3.6rem; line-height: 1; user-select: none;
  -webkit-tap-highlight-color: transparent; box-shadow: 0 6px 18px rgba(130,40,55,.45);
}
.clic-bouton:disabled { opacity: .5; cursor: default; }
.clic-bouton.pulse { animation: clic-pulse .12s ease; }
@keyframes clic-pulse { 50% { transform: scale(.9); } }
.clic-message { min-height: 1.4em; font-size: 1.15rem; font-style: italic; margin: 0; }
.clic-message.gagne { color: green; font-weight: 600; }
.clic-message.perdu { color: var(--vin); }
.clic-message .btn { margin-left: 10px; }

/* ---------- Jeu « pendu / cœur brisé » (Sicile) ---------- */
.pendu-jeu { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 4px 0; }
.pendu-coeur { filter: drop-shadow(0 3px 6px rgba(130,40,55,.4)); }
.pendu-coeur.brise { animation: coeur-brise .55s ease; }
@keyframes coeur-brise {
  0%, 100% { transform: none; }
  25% { transform: translateX(-3px) rotate(-4deg); }
  60% { transform: translateX(3px) rotate(4deg); }
}
.pendu-crack { transition: stroke-dashoffset .35s ease; }
.pendu-coupes { color: var(--encre-douce); font-style: italic; margin: 0; }
.pendu-mot {
  font-family: var(--font-display); font-size: 2rem; letter-spacing: .3em;
  color: var(--encre); margin: 4px 0; min-height: 1.4em;
}
.pendu-clavier { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 340px; }
.pendu-lettre {
  width: 34px; height: 42px; border: none; border-radius: 8px;
  background: rgba(190,146,71,.92); color: #fff; font-size: 1rem; font-family: var(--font-body); cursor: pointer;
}
.pendu-lettre:disabled { opacity: .4; cursor: default; }
.pendu-lettre.bon { background: green; opacity: 1; }
.pendu-lettre.mauvais { background: var(--vin); opacity: 1; }
.pendu-message { min-height: 1.4em; font-style: italic; margin: 2px 0 0; }
.pendu-message.gagne { color: green; font-weight: 600; }
.pendu-message.perdu { color: var(--vin); }

/* ---------- Jeu « attrape-moi » (Sète) ---------- */
.sete-jeu { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 4px 0; }
.sete-hud { font-family: var(--font-display); font-size: 1.4rem; color: var(--encre); margin: 0; }
.sete-zone {
  position: relative; width: min(380px, 82vw); aspect-ratio: 300 / 330;
  background: rgba(90,40,55,.06); border-radius: 10px;
  box-shadow: inset 0 0 0 2px rgba(190,146,71,.5); overflow: hidden;
}
.sete-visage {
  position: absolute; width: 58px; height: 58px; border-radius: 50%; border: 3px solid;
  background-size: cover; background-position: center; cursor: pointer; padding: 0;
  box-shadow: 0 2px 6px rgba(90,40,30,.4); animation: sete-pop .16s ease;
}
.sete-visage.moi { border-color: #5b7fa6; }
.sete-visage.tania { border-color: var(--vin); }
.sete-visage.rate { animation: sete-rate .3s ease; }
@keyframes sete-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes sete-rate { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.sete-message { min-height: 1.4em; font-style: italic; color: green; font-weight: 600; margin: 2px 0 0; }

/* ---------- Jeu « remets dans l'ordre » (Ithaque) ---------- */
.ithaque-jeu { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 4px 0; }
.ithaque-grille {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  width: min(440px, 82vw); margin: 0 auto;
}
.ithaque-tuile {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 10px;
  border: 3px solid rgba(190,146,71,.6); background-size: cover; background-position: center;
  cursor: pointer; padding: 0; box-shadow: 0 2px 6px rgba(90,40,30,.3);
}
.ithaque-tuile.placee { border-color: var(--vin); box-shadow: 0 0 0 2px var(--vin); }
.ithaque-badge {
  position: absolute; top: -9px; left: -9px; min-width: 26px; height: 26px; border-radius: 50%;
  background: var(--vin); color: #fff; font-size: .95rem; display: flex; align-items: center; justify-content: center;
}
.ithaque-tuile:not(.placee) .ithaque-badge { display: none; }
.ithaque-message { min-height: 1.4em; font-style: italic; margin: 0; }
.ithaque-message.gagne { color: green; font-weight: 600; }
.ithaque-message.perdu { color: var(--vin); }
.pac-pad {
  display: grid; grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(3, 46px);
  gap: 4px; margin: 14px auto 0; justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  #bateau svg { animation: none !important; }
  #besace .coeur { transition: none; }
  .pac-jeton { transition: none; }
  .clic-bouton.pulse { animation: none; }
  .pendu-coeur.brise { animation: none; }
  .pendu-crack { transition: none; }
  .sete-visage { animation: none; }
  .ile.active .ile-illus, .ile.active::after,
  #soleil, #eau, .nuage, .etincelle, #route path { animation: none; }
  #titan, .titan-pret { animation: none; }
}