/* La Chasse aux Étoiles (le journal d'Etem) : bleu nuit et or par défaut, thème clair en option.
   Gros boutons, peu de texte, lisible d'une main. Toutes les couleurs passent par les variables ci-dessous. */

@font-face { font-family: 'Montserrat'; font-weight: 600; font-display: swap; src: url('/polices/montserrat-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 700; font-display: swap; src: url('/polices/montserrat-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 800; font-display: swap; src: url('/polices/montserrat-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 400; font-display: swap; src: url('/polices/open-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 600; font-display: swap; src: url('/polices/open-sans-latin-600-normal.woff2') format('woff2'); }

/* Thème sombre (par défaut) */
:root {
  --fond: #0b1020;
  --fond-ciel: radial-gradient(120% 80% at 50% 0%, #1a2550 0%, #0b1020 60%);
  --carte: #131b34;
  --carte-2: #1a2342;
  --texte: #f3f5fb;
  --doux: #a3acc4;
  --ligne: #26304f;
  --or: #f2b33d;
  --or-2: #ffd36e;
  --sur-or: #221503;
  --vert: #3dbe84;
  --vert-clair: rgba(61, 190, 132, .14);
  --orange: #f2994a;
  --orange-clair: rgba(242, 153, 74, .15);
  --rouge: #f06a5b;
  --rouge-clair: rgba(240, 106, 91, .14);
  --bleu: #7aa7ff;
  --bleu-clair: rgba(122, 167, 255, .12);
  --violet: #ae95f5;
  --violet-clair: rgba(174, 149, 245, .14);
  --verre: rgba(255, 255, 255, .06);
  --verre-bord: rgba(255, 255, 255, .14);
  --ombre: 0 10px 30px rgba(0, 0, 0, .35);
  --rayon: 18px;
  --titres: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --corps: 'Open Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}

/* Thème clair (bouton soleil) */
:root[data-theme="light"] {
  --fond: #f6f4ee;
  --fond-ciel: radial-gradient(120% 80% at 50% 0%, #fff7e2 0%, #f6f4ee 55%, #e9eefb 100%);
  --carte: #ffffff;
  --carte-2: #f7f6f2;
  --texte: #141a2e;
  --doux: #5c6580;
  --ligne: #e4e0d6;
  --or: #c98a12;
  --or-2: #f2b33d;
  --sur-or: #ffffff;
  --vert: #23885a;
  --vert-clair: #e3f4ea;
  --orange: #c76a12;
  --orange-clair: #fdf0e1;
  --rouge: #b3412f;
  --rouge-clair: #fbe9e5;
  --bleu: #2f63b5;
  --bleu-clair: #e8effc;
  --violet: #6d4bb0;
  --violet-clair: #f0eafb;
  --verre: rgba(20, 26, 46, .04);
  --verre-bord: rgba(20, 26, 46, .12);
  --ombre: 0 10px 30px rgba(20, 26, 46, .10);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--corps);
  background: var(--fond);
  color: var(--texte);
  font-size: 17px;
  line-height: 1.45;
  padding-bottom: 72px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .gros, .envie, .on-y-va, .bouton, .onglets button { font-family: var(--titres); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--or); }
.cache { display: none !important; }
.conteneur { max-width: 720px; margin: 0 auto; padding: 16px; }
.icone { display: inline-flex; line-height: 0; }
.picto { display: inline-flex; line-height: 0; color: var(--or); }

/* En-tête */
.entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: color-mix(in srgb, var(--fond) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ligne); position: sticky; top: 0; z-index: 5; }
.entete h1 { font-size: 17px; margin: 0; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.entete h1 .logo { width: 30px; height: 30px; }
.entete .qui { font-size: 13px; color: var(--doux); }
.entete .droite { display: flex; gap: 8px; align-items: center; }
.lien-discret { background: none; border: none; color: var(--doux); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; padding: 4px; }
.bouton-theme { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--verre-bord); background: var(--verre); color: var(--texte); display: inline-flex; align-items: center; justify-content: center; }

/* Cartes */
.carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 16px; margin-bottom: 14px; box-shadow: var(--ombre); }
.carte h2 { font-size: 13px; margin: 0 0 10px; color: var(--doux); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.bandeau { border-radius: var(--rayon); padding: 12px 16px; margin-bottom: 14px; background: var(--bleu-clair); border: 1px solid var(--ligne); }

/* Invitations */
.minuteur { text-align: center; padding: 18px 16px; border-radius: var(--rayon); margin-bottom: 14px; background: var(--vert-clair); border: 1px solid color-mix(in srgb, var(--vert) 55%, transparent); }
.minuteur.alerte { background: var(--orange-clair); border-color: color-mix(in srgb, var(--orange) 60%, transparent); }
.minuteur.absent { background: var(--carte); border-color: var(--ligne); }
.minuteur .grand { font-family: var(--titres); font-size: 32px; font-weight: 800; }
.minuteur .petit { color: var(--doux); font-size: 14px; }

/* Boutons */
.grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.gros {
  min-height: 96px; border-radius: var(--rayon); border: 1px solid var(--ligne); font-size: 18px; font-weight: 700;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px;
  background: var(--carte); color: var(--texte); box-shadow: var(--ombre); transition: transform .12s ease;
}
.gros:active, .moyen:active, .option:active { transform: scale(.97); }
.gros.passage .picto { color: var(--bleu); }
.gros.change .picto { color: var(--violet); }
.gros.etem { background: linear-gradient(135deg, var(--or-2), var(--or)); color: var(--sur-or); border: none; grid-column: span 2; min-height: 76px; flex-direction: row; gap: 12px; }
.gros.etem .picto { color: var(--sur-or); }
.secondaires { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.moyen { min-height: 70px; border-radius: 14px; border: 1px solid var(--ligne); background: var(--carte); font-size: 13px; font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; }
.bouton { border: none; border-radius: 999px; padding: 12px 20px; font-weight: 700; background: linear-gradient(135deg, var(--or-2), var(--or)); color: var(--sur-or); }
.bouton.secondaire { background: var(--verre); color: var(--texte); border: 1px solid var(--verre-bord); }
.bouton.danger { background: var(--rouge); color: #fff; }
.bouton.plein { width: 100%; }
.bouton:disabled { opacity: .5; }
.bouton-vert { background: var(--vert) !important; color: #fff !important; }

/* Formulaires */
label { display: block; font-weight: 600; margin: 12px 0 6px; }
input[type=text], input[type=password], input[type=email], input[type=tel], input[type=date], input[type=number], select, textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--ligne); border-radius: 12px; background: var(--carte-2); font-size: 17px; color: var(--texte);
}
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--or) 60%, transparent); outline-offset: 1px; }
textarea { min-height: 120px; }
.choix-postes { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { border: 1px solid var(--verre-bord); border-radius: 999px; padding: 10px 14px; background: var(--verre); color: var(--texte); }
.puce.choisi { background: var(--or); color: var(--sur-or); border-color: var(--or); }
.erreur { color: var(--rouge); font-weight: 600; min-height: 1.4em; }

/* Feuille d'options (bas d'écran) */
.voile { position: fixed; inset: 0; background: rgba(3, 6, 15, .55); backdrop-filter: blur(3px); z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.feuille { background: var(--carte); color: var(--texte); width: 100%; max-width: 720px; border-radius: 22px 22px 0 0; padding: 18px 16px 28px; max-height: 90vh; overflow: auto; border-top: 1px solid var(--verre-bord); }
.feuille h3 { margin: 0 0 12px; font-size: 20px; }
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.option { min-height: 78px; border-radius: 16px; border: 1px solid var(--ligne); background: var(--carte-2); color: var(--texte); font-size: 16px; font-weight: 600; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.option .picto { color: var(--or); }

/* Journée */
.journee { list-style: none; margin: 0; padding: 0; }
.journee li { display: flex; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--ligne); font-size: 15px; }
.journee li:last-child { border-bottom: none; }
.journee .heure { font-variant-numeric: tabular-nums; color: var(--doux); min-width: 46px; }
.journee .quoi { flex: 1; }
.journee .qui { color: var(--doux); font-size: 13px; }
.etiquette { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--or) 16%, transparent); color: var(--or); margin-left: 6px; font-weight: 600; }
.etiquette.episode { background: var(--rouge-clair); color: var(--rouge); }
.vide { color: var(--doux); font-style: italic; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); background: var(--texte); color: var(--fond); padding: 12px 16px; border-radius: 14px; z-index: 50; display: flex; gap: 14px; align-items: center; max-width: calc(100% - 32px); box-shadow: var(--ombre); font-weight: 600; }
.toast button { background: none; border: none; color: var(--or); font-weight: 700; text-decoration: underline; }

/* Pied de page contact */
.pied { position: fixed; left: 0; right: 0; bottom: 0; background: color-mix(in srgb, var(--fond) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--ligne); padding: 10px 16px; text-align: center; font-size: 14px; z-index: 6; color: var(--doux); }
.pied a { color: var(--or); font-weight: 700; text-decoration: none; }
.hors-ligne { background: var(--orange); color: #fff; text-align: center; padding: 6px; font-size: 14px; font-weight: 600; }

/* Tableau de bord parents */
.onglets { display: flex; gap: 6px; overflow-x: auto; padding: 8px 16px; background: var(--fond); border-bottom: 1px solid var(--ligne); }
.onglets button { border: 1px solid transparent; background: none; padding: 9px 14px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--doux); white-space: nowrap; }
.onglets button.actif { background: var(--verre); border-color: var(--verre-bord); color: var(--texte); }
.etat { display: flex; gap: 14px; align-items: center; }
.pastille { width: 16px; height: 16px; border-radius: 50%; background: var(--vert); flex: none; box-shadow: 0 0 0 6px var(--vert-clair); }
.pastille.alerte { background: var(--orange); box-shadow: 0 0 0 6px var(--orange-clair); }
.pastille.absent { background: var(--doux); box-shadow: none; }
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.chiffres strong { display: block; font-family: var(--titres); font-size: 28px; font-weight: 800; }
.chiffres span { font-size: 12px; color: var(--doux); }
.a-faire li { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ligne-form { display: flex; gap: 8px; }
.ligne-form input { flex: 1; }
table.semaine { width: 100%; border-collapse: collapse; font-size: 15px; }
table.semaine th, table.semaine td { padding: 8px 4px; border-bottom: 1px solid var(--ligne); text-align: center; }
table.semaine th:first-child, table.semaine td:first-child { text-align: left; }
.barre { height: 10px; border-radius: 5px; background: var(--or); display: inline-block; vertical-align: middle; }
.lieu-ligne { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.lieu-ligne img { width: 120px; height: 120px; border: 1px solid var(--ligne); border-radius: 10px; background: #fff; }
.lien-copie { word-break: break-all; font-size: 13px; color: var(--doux); }
.actions-ligne { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.consignes { white-space: pre-line; font-size: 18px; }

/* La chasse aux étoiles : plein écran, ciel de nuit, aucune lecture nécessaire */
.mode-etem { position: fixed; inset: 0; z-index: 30; background: var(--fond-ciel); color: var(--texte); display: flex; flex-direction: column; padding: 16px; overflow: auto; }
.mode-etem > canvas.ciel { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.mode-etem .haut { display: flex; justify-content: space-between; align-items: center; min-height: 48px; }
.mode-etem .etoiles { display: flex; gap: 4px; align-items: center; color: var(--or); flex-wrap: wrap;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.mode-etem .etoiles .vide-etoile { color: var(--doux); opacity: .6; }
.mode-etem .cadenas, .mode-etem .bouton-theme { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--verre-bord); background: var(--verre); color: var(--texte); display: inline-flex; align-items: center; justify-content: center; }
.mode-etem .centre { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; }
/* Accueil du jeu : plus d'air entre le titre, le buzzer et les boutons */
.mode-etem .centre > .entete-jeu { margin-bottom: 22px; }
.mode-etem .centre > .envie { margin-bottom: 22px; }
/* Titre du jeu : sur-titre en petites capitales espacées, titre en or, filet doré avec une étincelle */
.entete-jeu { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.titre-jeu { font-family: var(--titres); font-size: 27px; font-weight: 800; letter-spacing: -.012em; line-height: 1.1; background: linear-gradient(135deg, var(--or-2), var(--or) 60%, #d99a2e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ornement { display: flex; align-items: center; gap: 10px; color: var(--or); opacity: .85; margin-top: 2px; }
.ornement::before, .ornement::after { content: ''; width: 64px; height: 1px; background: linear-gradient(90deg, transparent, var(--or)); }
.ornement::after { background: linear-gradient(90deg, var(--or), transparent); }
/* La question posée à Etem, entre le titre et le grand bouton */
.question-jeu { font-family: var(--titres); font-size: 19px; font-weight: 700; color: var(--texte); opacity: .92; margin: -8px 0 18px; text-align: center; }
/* Le bouton « J'ai prévenu ! » : un peu plus petit qu'au départ, avec sa respiration lumineuse d'origine */
.envie { width: min(56vw, 230px); height: min(56vw, 230px); border-radius: 50%; border: none;
  background: radial-gradient(circle at 35% 30%, #ffe08a, #f2b33d 55%, #d98a1e);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--or) 14%, transparent), 0 0 60px color-mix(in srgb, var(--or) 45%, transparent), 0 18px 40px rgba(0,0,0,.35);
  font-size: 26px; font-weight: 800; color: #2a1a03; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  animation: pulse 3.2s ease-in-out infinite; transition: transform .12s ease; }
.envie:active { transform: scale(.96); }
.envie .picto { color: #2a1a03; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--or) 14%, transparent), 0 0 50px color-mix(in srgb, var(--or) 35%, transparent), 0 18px 40px rgba(0,0,0,.35); }
  50% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--or) 8%, transparent), 0 0 80px color-mix(in srgb, var(--or) 55%, transparent), 0 18px 40px rgba(0,0,0,.35); } }
.on-y-va { border: 1px solid var(--verre-bord); background: var(--verre); color: var(--texte); backdrop-filter: blur(6px); border-radius: 999px; padding: 13px 22px; font-size: 18px; font-weight: 700; display: inline-flex; align-items: center; gap: 10px; }
.on-y-va .picto { color: var(--or); }
.choix-etem { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: min(92vw, 520px); }
.choix-etem button { aspect-ratio: 1; border-radius: 26px; border: 1px solid var(--verre-bord); background: var(--verre); color: var(--texte); backdrop-filter: blur(6px); font-family: var(--titres); font-size: 20px; font-weight: 800; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; box-shadow: var(--ombre); }
.choix-etem svg { width: 58%; height: auto; }
.choix-etem .rien { border-color: color-mix(in srgb, var(--vert) 55%, transparent); color: var(--vert); }
.choix-etem .pipi { border-color: rgba(242, 201, 76, .55); color: #f2c94c; }
.choix-etem .popo { border-color: rgba(176, 120, 72, .6); color: #d7a074; }
.choix-etem .changer { border-color: color-mix(in srgb, var(--bleu) 55%, transparent); color: var(--bleu); }
.choix-etem .embete { border-color: color-mix(in srgb, var(--violet) 55%, transparent); color: var(--violet); grid-column: span 2; aspect-ratio: auto; min-height: 100px; flex-direction: row; gap: 14px; }
.choix-etem .embete svg { width: 60px; }
:root[data-theme="light"] .choix-etem .pipi { color: #9a7400; background: #fff6cf; }
:root[data-theme="light"] .choix-etem .popo { color: #7a4a22; background: #f6e9dc; }
.validation { background: var(--carte); color: var(--texte); border: 1px solid var(--verre-bord); border-radius: 24px; padding: 18px; width: min(92vw, 520px); text-align: left; box-shadow: var(--ombre); }
.validation .resume { font-family: var(--titres); font-size: 22px; font-weight: 800; display: flex; align-items: center; gap: 12px; }
.validation .resume svg { width: 56px; height: 56px; }
.validation .resume > span { display: inline-flex; }
.appui-long { position: relative; overflow: hidden; width: 100%; border: none; border-radius: 16px; padding: 18px; font-family: var(--titres); font-size: 18px; font-weight: 700; background: linear-gradient(135deg, var(--or-2), var(--or)); color: var(--sur-or); margin-top: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.cadenas .jauge { position: absolute; left: 0; bottom: 0; height: 100%; width: 0; background: color-mix(in srgb, var(--or) 45%, transparent); pointer-events: none; }
.appui-long .jauge { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255,255,255,.3); }
.bravo { color: var(--or); filter: drop-shadow(0 0 30px color-mix(in srgb, var(--or) 60%, transparent)); animation: saut .8s ease; line-height: 0; }
.bravo svg { width: 140px; height: 140px; }
@keyframes saut { 0% { transform: scale(.2) rotate(-20deg); opacity: 0; } 60% { transform: scale(1.15) rotate(6deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
.pave { display: grid; grid-template-columns: repeat(3, 72px); gap: 10px; justify-content: center; }
.pave button { height: 62px; border-radius: 16px; border: 1px solid var(--ligne); background: var(--carte-2); color: var(--texte); font-family: var(--titres); font-size: 24px; font-weight: 700; }
.pave button.ok { background: var(--vert); color: #fff; border-color: transparent; }
.points { font-size: 26px; letter-spacing: 10px; text-align: center; min-height: 40px; color: var(--or); }

/* Accueil du site = le jeu ; accès discrets aux espaces adultes en bas de page */
.liens-bas { text-align: center; padding: 14px 0 6px; font-size: 14px; color: var(--doux); }
.liens-bas a { color: var(--doux); font-weight: 600; text-underline-offset: 3px; }
.liens-bas a:hover { color: var(--or); }

/* Animation d'entrée */
/* Transparente : l'animation joue par-dessus le ciel vivant du jeu, qui reste le même fond du début à la fin */
.entree { position: fixed; inset: 0; z-index: 60; background: transparent; display: flex; align-items: center; justify-content: center; transition: opacity .35s ease-out; }
/* Entrée en scène de l'accueil du jeu, une fois l'animation terminée : titre, buzzer, boutons arrivent l'un après l'autre */
/* Pendant l'entrée, seul le ciel est visible ; puis chaque élément émerge du centre, l'un après l'autre */
.mode-etem.en-attente .centre > *, .mode-etem.en-attente .haut, .mode-etem.en-attente .liens-bas { opacity: 0; }
.mode-etem.revele .centre > .entete-jeu { animation: arrivee .7s cubic-bezier(.2, .7, .2, 1) 0s both; }
.mode-etem.revele .centre > .envie { animation: arrivee-buzzer .75s cubic-bezier(.2, .8, .2, 1.05) .12s both, pulse 3.2s ease-in-out .9s infinite; }
.mode-etem.revele .centre > div:not(.entete-jeu) { animation: arrivee .7s cubic-bezier(.2, .7, .2, 1) .28s both; }
.mode-etem.revele .haut, .mode-etem.revele .liens-bas { animation: apparait .6s ease .4s both; }
@keyframes arrivee { from { opacity: 0; transform: scale(.9) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes arrivee-buzzer { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes apparait { from { opacity: 0; } to { opacity: 1; } }
.entree canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.entree .passer { position: absolute; right: 16px; bottom: 20px; background: none; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.7); border-radius: 999px; padding: 8px 14px; font-size: 13px; }
.entree.fin { opacity: 0; pointer-events: none; }

@media (max-width: 420px) {
  .secondaires { grid-template-columns: repeat(2, 1fr); }
  .chiffres strong { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .envie { animation: none; }
  .bravo { animation: none; }
}

/* Flèche retour du jeu : pilule discrète au centre de la barre du haut */
.retour-jeu { border: 1px solid var(--verre-bord); background: var(--verre); color: var(--texte); border-radius: 999px; padding: 10px 16px 10px 10px; font-family: var(--titres); font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; gap: 4px; backdrop-filter: blur(6px); }
/* Confirmation affichée par-dessus l'animation d'entrée (fin du parcours adulte) */
.entree-message { position: absolute; top: 14%; left: 50%; transform: translateX(-50%); z-index: 1; background: rgba(255, 250, 240, .94); color: #141a2e; border-radius: 999px; padding: 12px 20px 12px 16px; font-family: var(--titres); font-weight: 700; font-size: 16px; white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(242,179,61,.35); opacity: 0; animation: message-entree .7s ease .5s forwards; }
.entree-message .icone { color: #2f9e6a; }
@keyframes message-entree { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }