/* BabyGenderReveal — style « shabby chic » d'après design/DESIGN-GUIDE.md (jetons littéraux, pas de framework). */
:root { color-scheme: light; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: #f2ebe1; color: #4a3f36;
  font-family: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  font-size: 18px; line-height: 1.5;
  transition: background-color 1.2s ease;
}
body.revele-fille { background: #f4dde0; }
body.revele-garcon { background: #dde8f1; }
a { color: #7b6b5d; }
a:hover { color: #4a3f36; }
button, input { font-family: inherit; }
input::placeholder { color: #b9a898; font-style: italic; }
.grain { position: fixed; inset: 0; width: 100%; height: 100%; opacity: 0.045; pointer-events: none; z-index: 0; }
.coin { position: fixed; width: 64px; height: 64px; opacity: 0.7; pointer-events: none; z-index: 0; }
.coin.haut { top: 8px; left: 8px; }
.coin.bas { bottom: 8px; right: 8px; transform: rotate(180deg); }
.page { position: relative; z-index: 1; width: 100%; max-width: 430px; margin: 0 auto; padding: 30px 22px 44px; display: flex; flex-direction: column; gap: 22px; }
[hidden] { display: none !important; }

/* Drapeaux de langue (en haut à droite) */
.langues { position: fixed; top: 10px; right: 12px; z-index: 20; display: flex; gap: 6px; }
.langues button { width: 34px; height: 26px; padding: 3px; background: #fbf8f2; border: 1px solid #d9cdbe; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 0.75; transition: opacity 0.2s, box-shadow 0.2s; }
.langues button svg { width: 22px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(74,63,54,0.18); }
.langues button:hover, .langues button.actif { opacity: 1; }
.langues button.actif { border-color: #c9a96f; box-shadow: 0 0 0 2px rgba(201,169,111,0.45); }
.langues button:focus-visible { outline: 2px dashed #c9a96f; outline-offset: 2px; }

/* En-tête */
.entete { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding-top: 6px; }
.script { font-family: 'Parisienne', 'Marck Script', 'Snell Roundhand', cursive; font-size: 38px; line-height: 1.1; color: #7b6b5d; }
html[lang="ru"] .script { font-family: 'Marck Script', 'Parisienne', cursive; }
.reponse { font-family: 'Parisienne', 'Marck Script', 'Snell Roundhand', cursive; }
html[lang="ru"] .reponse { font-family: 'Marck Script', cursive; }
.script.grand { font-size: 46px; color: #4a3f36; }
h1 { margin: 0; font-size: 30px; font-weight: 500; line-height: 1.2; letter-spacing: 0.02em; overflow-wrap: anywhere; }
h2 { margin: 0; font-size: 26px; font-weight: 500; line-height: 1.2; }
.etiquette { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #7b6b5d; }
.etiquette.haut { margin-top: 8px; }
.note { font-size: 15px; font-style: italic; color: #7b6b5d; text-align: center; }
.texte { font-size: 18px; }
.centre { text-align: center; }

/* Cartes */
.carte { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px; background: #faf6ef; border: 1px solid #d9cdbe; outline: 1px solid #e7ddd0; outline-offset: -6px; border-radius: 6px; box-shadow: 0 1px 0 #fff inset, 0 8px 22px rgba(74,63,54,0.08); }
.carte.dentelle { padding-top: 26px; }
.carte.dentelle::before { content: ""; position: absolute; top: 0; left: 6px; right: 6px; height: 12px; background-image: radial-gradient(circle at 10px 0, transparent 8px, #e7ddd0 8.5px, #e7ddd0 10px, transparent 10.5px); background-size: 20px 12px; }
body.revele-fille .carte { background: #fbf3f4; }
body.revele-garcon .carte { background: #f4f7fa; }
.carte-titre { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.separateur { display: flex; align-items: center; gap: 10px; }
.separateur::before, .separateur::after { content: ""; flex: 1 1 0; height: 1px; background: #d9cdbe; }

/* Champs et boutons */
label.libelle { display: block; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #7b6b5d; margin-bottom: 6px; }
.champ { width: 100%; height: 48px; padding: 0 14px; background: #fbf8f2; border: 1px solid #b9a898; border-radius: 4px; font-size: 18px; color: #4a3f36; outline: none; }
.champ:focus { border-color: #8f9a86; box-shadow: 0 0 0 2px rgba(169,180,160,0.35); }
.champ.lien { font-size: 15px; color: #7b6b5d; overflow-wrap: anywhere; height: auto; min-height: 48px; padding: 12px 14px; line-height: 1.4; word-break: break-all; }
.ligne { display: flex; gap: 12px; }
.ligne > * { flex: 1 1 0; min-width: 0; }
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 20px; background: #fbf8f2; border: 1px solid #b9a898; border-radius: 4px; font-size: 15px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #4a3f36; cursor: pointer; transition: background-color 0.2s; }
.bouton:hover { background: #f4eee3; }
.bouton.principal { background: #a9b4a0; border-color: #8f9a86; }
.bouton.principal:hover { background: #9daa93; }
.bouton.pari { height: 56px; }
.bouton.pari.choisi { background: #a9b4a0; border-color: #8f9a86; }
.bouton.grand { height: 64px; }
.bouton.texte { background: none; border: none; height: 44px; text-decoration: underline dotted; color: #7b6b5d; }
.bouton:disabled { opacity: 0.55; cursor: default; }
.bouton svg { flex: 0 0 auto; }
.pleine { width: 100%; }

/* Chrono */
.chrono { display: flex; gap: 10px; justify-content: center; }
.tuile { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 76px; padding: 12px 0 10px; background: #faf6ef; border: 1px solid #d9cdbe; outline: 1px solid #e7ddd0; outline-offset: -4px; border-radius: 6px; box-shadow: 0 1px 0 #fff inset, 0 8px 22px rgba(74,63,54,0.08); }
.tuile .valeur { font-size: 44px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.tuile .unite { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #7b6b5d; }
@media (max-width: 360px) { .tuile { width: 68px; } .tuile .valeur { font-size: 38px; } }

/* Œuf */
.oeuf-bloc { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.oeuf { display: block; width: 220px; height: 290px; cursor: default; user-select: none; -webkit-tap-highlight-color: transparent; overflow: visible; outline: none; }
.oeuf:focus-visible { outline: 2px dashed #c9a96f; outline-offset: 8px; border-radius: 50%; }
.oeuf.cliquable { cursor: pointer; animation: oeuf-attente 2.4s ease-in-out infinite; }
.oeuf.cliquable:hover { animation-duration: 1.2s; }
@keyframes oeuf-attente { 0%, 100% { transform: rotate(0) translateY(0); } 25% { transform: rotate(-2.5deg) translateY(-2px); } 75% { transform: rotate(2.5deg) translateY(-2px); } }
.oeuf.eclate { animation: none; }
.oeuf .haut, .oeuf .bas, .oeuf .ruban, .oeuf .noeud, .oeuf .fissure { transform-box: fill-box; transform-origin: center; transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease; }
.oeuf .fissure { opacity: 0; }
.oeuf.fissure .fissure { opacity: 1; }
.oeuf.fissure { animation: oeuf-secoue 0.5s ease-in-out 3; }
@keyframes oeuf-secoue { 0%, 100% { transform: translateX(0) rotate(0); } 20% { transform: translateX(-4px) rotate(-3deg); } 60% { transform: translateX(4px) rotate(3deg); } }
.oeuf.eclate .haut { transform: translate(84px, -62px) rotate(28deg); opacity: 0.96; }
.oeuf.eclate .noeud { transform: translate(-40px, -160px) rotate(38deg); opacity: 0; }
.oeuf.eclate .ruban { opacity: 0; }
.oeuf.eclate .fissure { opacity: 0; }
.oeuf.eclate .contenu { opacity: 1; transform: translateY(-40px) scale(1); }
.oeuf .contenu { opacity: 0; transform: translateY(0) scale(0.6); transform-box: fill-box; transform-origin: center; transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s, opacity 0.5s ease 0.2s; }
.confettis { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.reponse { font-family: 'Parisienne', 'Snell Roundhand', cursive; font-size: 46px; line-height: 1.1; text-align: center; color: #4a3f36; }

/* Stats et liste des paris */
.barre-bloc { display: flex; flex-direction: column; gap: 6px; }
.barre-titre { display: flex; justify-content: space-between; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; }
.barre-titre .chiffre { color: #7b6b5d; }
.barre { height: 14px; background: #e7ddd0; border: 1px solid #d9cdbe; border-radius: 7px; overflow: hidden; }
.barre > i { display: block; height: 100%; width: 0; background: #b9a898; border-right: 2px solid #c9a96f; transition: width 0.8s ease; }
.barre.fille > i { background: #cbbca9; }
body.revele-fille .barre.fille > i { background: #e8bfc5; border-right-color: #cf9ba2; }
body.revele-garcon .barre.garcon > i { background: #b8cddf; border-right-color: #8fa9c2; }
.liste { display: flex; flex-direction: column; gap: 9px; list-style: none; margin: 0; padding: 0; }
.liste li { display: flex; align-items: baseline; gap: 8px; }
.liste .prenom { display: inline-flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.liste .points { flex: 1 1 0; border-bottom: 1px dotted #b9a898; transform: translateY(-5px); min-width: 12px; }
.liste .pari { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #7b6b5d; white-space: nowrap; }
.liste li.moi .prenom { font-weight: 600; }
.liste .laurier { display: none; width: 18px; height: 18px; flex: 0 0 auto; }
.liste li.gagnant .laurier { display: inline-block; }

/* Bandeau, fenêtre du médecin */
.bandeau { display: flex; align-items: flex-start; gap: 10px; padding: 12px; background: #f1e6d3; border: 1px solid #c9a96f; border-radius: 4px; font-size: 16px; }
.bandeau svg { flex: 0 0 auto; margin-top: 2px; }
.voile { position: fixed; inset: 0; background: rgba(74,63,54,0.55); display: flex; align-items: center; justify-content: center; padding: 22px; z-index: 10; }
.fenetre { width: 100%; max-width: 330px; }
.fenetre .pile { display: flex; flex-direction: column; gap: 12px; }
.coche { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #c9a96f; background: #fbf8f2; flex: 0 0 auto; }
.etat-sexe { display: flex; align-items: center; gap: 10px; }
.message { min-height: 22px; font-size: 15px; font-style: italic; color: #7b6b5d; text-align: center; }
.message.erreur { color: #a8503f; }
.pied { display: flex; justify-content: center; }
.etapes { display: flex; flex-direction: column; gap: 14px; }
.etape { display: flex; align-items: flex-start; gap: 14px; }
.etape .numero { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #c9a96f; font-size: 20px; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .oeuf.cliquable, .oeuf.fissure { animation: none; } * { transition-duration: 0.01s !important; } }
/* Aura de l'œuf (candidat B retenu le 16/09/2026, aura renforcée) */
.oeuf .aura { transform-box: fill-box; transform-origin: center; opacity: 0.9; animation: aura-pulse 3.6s ease-in-out infinite; }
@keyframes aura-pulse { 0%, 100% { opacity: 0.72; transform: scale(0.98); } 50% { opacity: 1; transform: scale(1.05); } }
.oeuf.cliquable .aura { animation-duration: 2.4s; }
.oeuf.eclate .aura { opacity: 1; }
.oeuf .aura-stop { stop-color: #efd58f; transition: stop-color 0.9s ease; }
body.revele-fille .oeuf .aura-stop { stop-color: #e9a9b6; }
body.revele-garcon .oeuf .aura-stop { stop-color: #a9c4dd; }
.oeuf .coeur { fill: #d9cdbe; transition: fill 0.6s ease; }
body.revele-fille .oeuf .coeur { fill: #e8bfc5; }
body.revele-garcon .oeuf .coeur { fill: #b8cddf; }
@media (prefers-reduced-motion: reduce) { .oeuf .aura { animation: none; } }
.coche.vide { opacity: 0.35; }