/* ============================================================ Borne #ET22 — styles communs à toutes les pages Charte : Quicksand, navy #1E1B3B, palette du logo (violet / orange / vert / bleu / jaune / corail), vagues colorées. Interface 100 % tactile (iPad paysage) ; la souris fait la même chose. ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --navy: #1E1B3B; --navy-2: #26224A; --navy-deep: #15132E; --violet: #7C4DD8; --violet-fonce: #5B36A8; --orange: #E8703A; --orange-fonce: #C4552A; --vert: #8DC63F; --vert-fonce: #6A9C2A; --bleu: #3AA4D8; --bleu-fonce: #2A7FAA; --jaune: #F4C531; --corail: #F26A5A; --rose: #F58FB0; --texte: #1E1B3B; --gris-texte: #5F5B80; --texte-doux: #C9C4E6; } @font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('quicksand-latin.woff2') format('woff2'); } html, body { width: 100%; height: 100%; overflow: hidden; font-family: 'Quicksand', 'Nunito', 'Avenir Next', 'Segoe UI', sans-serif; font-weight: 600; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; color: #fff; } /* Le fond navy est sur : le décor (body::before/after, z-index négatif) se glisse entre lui et le contenu. Un fond sur le masquerait. */ html { background: var(--navy); } body { background: transparent; } /* ---- Décor : vagues colorées ET22 fondues dans le navy ---- */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: url('fond-vagues.jpg') center / cover no-repeat; opacity: .42; animation: derive 40s ease-in-out infinite alternate; } @keyframes derive { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.12) translate(-2%, 1.5%); } } body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 64% 60% at 50% 50%, rgba(30,27,59,.88) 0%, rgba(30,27,59,.62) 55%, rgba(30,27,59,.28) 100%); } /* Bulles décoratives flottantes (équivalent des flocons) */ .bulle { position: fixed; bottom: -8vh; border-radius: 50%; opacity: 0; animation: monter linear infinite; z-index: -1; pointer-events: none; } @keyframes monter { 0% { transform: translateY(0) scale(.6); opacity: 0; } 10% { opacity: .5; } 90% { opacity: .3; } 100% { transform: translateY(-115vh) scale(1.1); opacity: 0; } } /* ---- Écrans ---- */ .screen { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 3vh; padding: 4vh 6vw 6vh; text-align: center; } .screen.active { display: flex; } /* Le logo #et22 est posé sur une bulle blanche, comme sur le site */ .logo-bulle { background: #fff; border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%; padding: 2vh 5vh; box-shadow: 0 1.5vh 4vh rgba(0,0,0,.35); line-height: 0; } .logo-bulle img { height: 14vh; width: auto; } .logo-bulle.petit { padding: 1vh 2.6vh; } .logo-bulle.petit img { height: 6.5vh; } /* ---- Titres ---- */ h1, .title { font-size: 5.6vh; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: #fff; max-width: 86vw; text-wrap: balance; } h1 .accent, .title .accent { color: var(--jaune); } h1::after, .title::after { content: ""; display: block; width: 14vh; height: .8vh; margin: 2vh auto 0; border-radius: .4vh; background: linear-gradient(90deg, var(--violet), var(--orange), var(--vert)); } .subtitle { font-size: 2.7vh; color: var(--texte-doux); line-height: 1.5; max-width: 74vw; font-weight: 600; } .subtitle b { color: #fff; } .question-titre { font-size: 4.6vh; font-weight: 700; letter-spacing: -.01em; max-width: 86vw; } /* ---- Écran d'accueil : tout bouge un peu pour attirer l'œil ---- */ #screen-home { overflow: hidden; } #screen-home .logo-bulle { animation: flotter 4s ease-in-out infinite; } @keyframes flotter { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-1.6vh) rotate(1.5deg); } } /* Le lot en surbrillance : jaune avec un reflet qui balaie */ h1 .lot-accent { display: inline-block; color: var(--jaune); background: linear-gradient(100deg, var(--jaune) 0%, var(--jaune) 40%, #fff 50%, var(--jaune) 60%, var(--jaune) 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: reflet 3.2s ease-in-out infinite; } @keyframes reflet { 0%, 35% { background-position: 100% 0; } 65%, 100% { background-position: 0 0; } } /* Petit sursaut du titre toutes les 6 s */ #screen-home h1 { animation: sursaut 6s ease-in-out infinite; } @keyframes sursaut { 0%, 88%, 100% { transform: scale(1); } 91% { transform: scale(1.04) rotate(-.6deg); } 94% { transform: scale(1) rotate(.4deg); } 97% { transform: scale(1.02); } } /* Messages qui tournent sous le titre */ #home-sous-titre { min-height: 4.2vh; transition: opacity .4s, transform .4s; } #home-sous-titre.sortie { opacity: 0; transform: translateY(1vh); } /* Bouton : ondes qui s'échappent + main qui invite */ .btn-appel { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 1.2vh; } .btn-appel .onde { position: absolute; left: 50%; top: 4.6vh; width: 30vh; height: 9.2vh; margin-left: -15vh; margin-top: -4.6vh; border-radius: 100vh; border: .5vh solid var(--vert); opacity: 0; pointer-events: none; animation: onde 2.4s ease-out infinite; } .btn-appel .onde:nth-child(2) { animation-delay: .8s; } .btn-appel .onde:nth-child(3) { animation-delay: 1.6s; } @keyframes onde { 0% { transform: scale(.9); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } } .btn-appel .btn-principal { position: relative; z-index: 1; } .main-invite { font-size: 4.2vh; line-height: 1; animation: taper 1.1s ease-in-out infinite; filter: drop-shadow(0 .6vh 1.2vh rgba(0,0,0,.4)); } @keyframes taper { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-1.4vh) scale(1.08); } 55% { transform: translateY(.2vh) scale(.96); } } /* Fromages qui flottent (accueil seulement) */ .fromage { position: absolute; bottom: -10vh; font-size: 5vh; line-height: 1; opacity: 0; pointer-events: none; animation: monter-fromage linear infinite; filter: drop-shadow(0 .5vh 1vh rgba(0,0,0,.35)); } @keyframes monter-fromage { 0% { transform: translateY(0) rotate(-20deg); opacity: 0; } 8% { opacity: .85; } 92% { opacity: .85; } 100% { transform: translateY(-125vh) rotate(25deg); opacity: 0; } } /* ---- Accroche du lot (accueil) ---- */ .lot-badge { display: inline-flex; align-items: center; gap: 1.6vh; background: linear-gradient(135deg, var(--orange), var(--corail)); color: #fff; border-radius: 100vh; padding: 1.8vh 4vh; font-size: 2.8vh; font-weight: 700; box-shadow: 0 1.5vh 4vh rgba(242,106,90,.35); } .lot-badge .emoji { font-size: 3.6vh; line-height: 1; } .press-start { font-size: 3vh; font-weight: 700; animation: blink 1.4s ease-in-out infinite alternate; cursor: pointer; } .press-start .dot { color: var(--vert); } @keyframes blink { from { opacity: .45; } to { opacity: 1; } } /* Gros bouton tactile principal */ .btn-principal { background: linear-gradient(180deg, var(--vert), var(--vert-fonce)); color: #fff; border-radius: 100vh; padding: 2.6vh 7vh; font-family: inherit; font-size: 3.6vh; font-weight: 700; border: 0; box-shadow: 0 1.5vh 4vh rgba(0,0,0,.4), inset 0 .5vh 0 rgba(255,255,255,.3); cursor: pointer; transition: transform .12s; animation: respire 1.8s ease-in-out infinite alternate; } .btn-principal:active { transform: scale(.96); } @keyframes respire { from { transform: scale(1); } to { transform: scale(1.05); } } .btn-secondaire { background: rgba(255,255,255,.12); color: #fff; border-radius: 100vh; padding: 1.4vh 3.4vh; font-family: inherit; font-size: 2.3vh; font-weight: 700; border: 0; cursor: pointer; } /* ---- Progression (quiz) ---- */ .progress { display: flex; gap: 1.6vh; align-items: center; } .pdot { width: 2.6vh; height: 2.6vh; border-radius: 50%; background: rgba(255,255,255,.14); border: .3vh solid rgba(255,255,255,.3); transition: transform .2s, background .2s; } .pdot.current { background: #fff; border-color: #fff; transform: scale(1.25); box-shadow: 0 0 1.5vh rgba(255,255,255,.7); } .pdot.good { background: var(--vert); border-color: var(--vert); } .pdot.bad { background: var(--corail); border-color: var(--corail); } .pdot.bonus { border-style: dashed; border-color: var(--jaune); } /* question bonus (sondage) */ .progress-label { font-size: 2.2vh; color: var(--texte-doux); font-weight: 700; letter-spacing: .06em; } /* ---- Carte question + réponses colorées ---- */ .question-card { background: #fff; color: var(--texte); border-radius: 3vh; padding: 4vh 6vh; font-size: 4vh; font-weight: 700; line-height: 1.25; max-width: 84vw; box-shadow: 0 2vh 6vh rgba(0,0,0,.45); text-wrap: balance; } .answers { display: flex; gap: 3vh; width: 88vw; } .answer { flex: 1; border-radius: 2.6vh; padding: 4vh 2vh; min-height: 18vh; display: flex; align-items: center; justify-content: center; font-size: 3vh; font-weight: 700; line-height: 1.25; color: #fff; position: relative; box-shadow: 0 1.5vh 4vh rgba(0,0,0,.4), inset 0 .5vh 0 rgba(255,255,255,.25); transition: transform .15s, filter .15s, opacity .3s; cursor: pointer; text-wrap: balance; } .answer:active { transform: scale(.97); } .answer.violet { background: linear-gradient(180deg, var(--violet), var(--violet-fonce)); } .answer.orange { background: linear-gradient(180deg, var(--orange), var(--orange-fonce)); } .answer.vert { background: linear-gradient(180deg, var(--vert), var(--vert-fonce)); } .answer.chosen { transform: scale(1.05); filter: brightness(1.12); } .answer.correct { outline: .8vh solid #fff; transform: scale(1.05); } .answer.faded { opacity: .28; } .feedback { font-size: 3.4vh; font-weight: 700; min-height: 4.5vh; max-width: 84vw; } .feedback.good { color: var(--vert); } .feedback.bad { color: var(--corail); } .feedback small { display: block; font-size: 2.3vh; color: var(--texte-doux); margin-top: .4vh; } /* ---- Résultat ---- */ .score-big { font-size: 13vh; font-weight: 700; line-height: 1; color: #fff; text-shadow: 0 0 4vh rgba(255,255,255,.25); } .score-big small { font-size: 4vh; color: var(--texte-doux); } .win-box { background: linear-gradient(135deg, var(--violet), var(--orange) 55%, var(--vert)); color: #fff; border-radius: 3vh; padding: 3.5vh 6vh; font-size: 4vh; font-weight: 700; box-shadow: 0 0 8vh rgba(124,77,216,.45), 0 2vh 5vh rgba(0,0,0,.45); animation: winpulse .9s ease-in-out infinite alternate; max-width: 84vw; } .win-box small { display: block; font-size: 2.5vh; font-weight: 700; margin-top: 1.2vh; opacity: .95; } @keyframes winpulse { from { transform: scale(1); } to { transform: scale(1.035); } } /* ---- Collecte d'email : champ natif (clavier iPad) + raccourcis ---- Le clavier de l'iPad occupe ~40 % de l'écran en paysage : la carte est calée en haut pour rester visible quand il sort. ---- */ #screen-email { justify-content: flex-start; padding-top: 4vh; } .email-card { width: min(92vw, 150vh); background: #fff; color: var(--texte); border-radius: 3vh; box-shadow: 0 3vh 8vh rgba(0,0,0,.55); padding: 3vh 3.5vh 2.4vh; display: flex; flex-direction: column; gap: 1.8vh; } .email-card .consigne { font-size: 3vh; font-weight: 700; } #email-form { display: flex; gap: 1.5vh; } .email-input { flex: 1; min-width: 0; font-family: 'Quicksand', 'Avenir Next', sans-serif; font-size: 3.4vh; font-weight: 700; color: var(--texte); background: #F3F1FB; border: .4vh solid var(--violet); border-radius: 1.6vh; padding: 1.4vh 2.2vh; outline: none; user-select: text; -webkit-user-select: text; -webkit-appearance: none; appearance: none; } .email-input::placeholder { color: #A9A4C8; font-weight: 600; } .email-input:focus { box-shadow: 0 0 0 .5vh rgba(124,77,216,.25); } .email-input.erreur { border-color: var(--corail); animation: secouer .35s; } @keyframes secouer { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-1.2vh); } 75% { transform: translateX(1.2vh); } } .btn-valider { background: linear-gradient(180deg, var(--vert), var(--vert-fonce)); color: #fff; border: 0; border-radius: 1.6vh; padding: 0 4vh; font-family: inherit; font-size: 3vh; font-weight: 700; cursor: pointer; box-shadow: 0 .5vh 0 var(--vert-fonce); white-space: nowrap; } .btn-valider:active { transform: translateY(.3vh); box-shadow: 0 .2vh 0 var(--vert-fonce); } .email-erreur { color: var(--corail); font-size: 2.2vh; font-weight: 700; min-height: 2.8vh; } .domaines { display: flex; flex-wrap: wrap; gap: 1.2vh; justify-content: center; } .chip-domaine { padding: 1.2vh 2.2vh; border-radius: 100vh; background: #EDE9FA; color: var(--violet-fonce); font-size: 2.2vh; font-weight: 700; cursor: pointer; transition: transform .06s, background .06s; } .chip-domaine:active { transform: scale(.95); background: #E0DAF5; } .email-pied { display: flex; align-items: center; justify-content: space-between; gap: 2vh; } .mention { font-size: 1.8vh; color: var(--gris-texte); font-weight: 600; text-align: left; line-height: 1.35; } .lien-passer { font-size: 2vh; color: var(--gris-texte); font-weight: 700; text-decoration: underline; cursor: pointer; white-space: nowrap; } /* ---- Bandeau d'erreur de données (validateur) ---- */ .data-erreurs { position: fixed; left: 50%; top: 2vh; transform: translateX(-50%); background: var(--corail); color: #fff; font-size: 2vh; font-weight: 700; padding: 1.2vh 3vh; border-radius: 1.2vh; z-index: 100; box-shadow: 0 1vh 3vh rgba(0,0,0,.5); } /* ---- Accessibilité mouvement ---- */ @media (prefers-reduced-motion: reduce) { .bulle, .fromage, .btn-appel .onde { display: none; } body::before, .press-start, .win-box, .btn-principal, #screen-home .logo-bulle, #screen-home h1, h1 .lot-accent, .main-invite { animation: none !important; } }