/* Soirée Quizz — pages du site : accueil, compte, espace personnel, page d'une partie.
   Couleurs, polices, boutons et champs viennent de style.css. */

.site body { min-height: 100vh; display: flex; flex-direction: column; line-height: 1.5; font-size: 17px;
  background: radial-gradient(120% 60% at 50% -10%, var(--enseigne) 0%, var(--nuit) 60%) no-repeat var(--nuit); }
.site a { color: inherit; }
.site :focus-visible { outline: 3px solid var(--mayo); outline-offset: 3px; }
.site h2, .site h3 { font-family: var(--titre); font-weight: 400; letter-spacing: .01em; line-height: 1.08; }
.site code { font: 600 .92em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.doux { color: #e9dcf7; }
.note { color: #bda9d6; font-size: .92rem; }
[hidden] { display: none !important; }

/* En-tête et pied */
.site-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; width: 100%; max-width: 1120px; margin: 0 auto; padding: 18px 20px; }
.site-marque { font-size: 1.7rem; text-decoration: none; }
.site-nav { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; min-height: 36px; }
.site-lien { background: none; border: 0; padding: 6px 4px; font-weight: 600; font-size: 1rem; color: var(--sel); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--enseigne-claire); cursor: pointer; }
.site-lien:hover, .site-lien.actif { text-decoration-color: var(--mayo); }
.site-nav a.btn { display: inline-block; }
.site-page { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 12px 20px 64px; }
.site-page.etroite { max-width: 480px; }
.site-page.lecture { max-width: 760px; }
.site-pied { border-top: 2px solid var(--enseigne); padding: 26px 20px 34px; text-align: center; font-size: .95rem; color: #d7c6ee; }
.site-pied p + p { margin-top: 8px; }
.site-signature { color: #bda9d6; }

/* Titres de page */
.page-titre { font-size: clamp(2.2rem, 7vw, 3.4rem); margin: 18px 0 10px; }
.page-chapo { font-size: 1.1rem; color: #e9dcf7; max-width: 38em; }
.section-titre { margin: clamp(48px, 8vw, 80px) 0 20px; font-size: clamp(1.6rem, 4.4vw, 2.3rem); color: var(--mayo); }

/* Boutons en ligne, liens d'action */
.site .btn { display: inline-block; text-decoration: none; text-align: center; }
.site .btn.large { display: block; width: 100%; }
.rangee { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lien-action { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--mayo); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- Accueil ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(16px, 4vw, 48px) 0 8px; }
.hero h1 { font-size: clamp(3rem, 9.5vw, 6rem); }
.hero-accroche { margin: 22px 0 28px; font-size: clamp(1.15rem, 2.6vw, 1.4rem); color: #f1e6fb; max-width: 24em; text-wrap: balance; }
.hero .btn { font-size: 1.1rem; padding: 16px 22px; }
.hero-note { margin-top: 14px; }
.rejoindre { margin-top: 30px; padding-top: 22px; border-top: 2px dashed var(--enseigne-claire); max-width: 30em; }
.rejoindre form { display: flex; gap: 10px; margin-top: 8px; }
.rejoindre input { flex: 1; min-width: 0; text-transform: lowercase; letter-spacing: .12em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.rejoindre label { font-weight: 600; }

/* Scène dessinée : l'écran projeté et un téléphone */
.scene-demo { position: relative; padding: 0 clamp(36px, 6vw, 70px) 150px 0; }
.demo-ecran { background: var(--nuit); border: 4px solid var(--enseigne-claire); border-radius: 22px; padding: clamp(16px, 2.6vw, 26px); box-shadow: 0 10px 0 rgba(0, 0, 0, .3); transform: rotate(-1.5deg); }
.demo-manche { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pain); }
.demo-question { margin: 8px 0 16px; font-family: var(--titre); font-size: clamp(1.15rem, 2.4vw, 1.6rem); line-height: 1.15; }
.demo-reponses { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.demo-reponses span { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--enseigne); font-weight: 600; font-size: .95rem; }
.demo-reponses span b { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--mayo); color: var(--mayo-fonce); font-family: var(--titre); font-weight: 400; }
.demo-reponses .bonne { background: var(--cornichon); color: var(--cornichon-fonce); }
.demo-scores { display: flex; gap: 8px; margin-top: 16px; }
.demo-scores span { flex: 1; text-align: center; padding: 6px 4px; border-radius: 10px; font-weight: 700; font-size: clamp(.68rem, 2.6vw, .85rem); white-space: nowrap; color: #fff; }
.demo-scores .r { background: #e3261b; } .demo-scores .j { background: #f6a921; color: var(--nuit); } .demo-scores .b { background: #2f7de1; } .demo-scores .p { background: #e0559a; }
.demo-tel { position: absolute; right: 0; bottom: 0; width: clamp(128px, 32%, 160px); aspect-ratio: 9 / 16; background: var(--enseigne); border: 4px solid var(--sel); border-radius: 24px; padding: 14px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: 0 10px 0 rgba(0, 0, 0, .35); transform: rotate(6deg); }
.demo-tel small { font-weight: 700; font-size: .72rem; color: var(--mayo); text-align: center; }
.demo-buzz { flex: none; width: 92%; display: grid; place-items: center; border-radius: 50%; aspect-ratio: 1; margin: auto 0; background: var(--ketchup); box-shadow: 0 8px 0 var(--ketchup-fonce); font-family: var(--titre); font-size: clamp(1rem, 2.4vw, 1.4rem); color: #fff; }

/* Étapes numérotées */
.etapes { margin: 0; padding: 0; list-style: none; counter-reset: etape; display: grid; gap: 16px; }
.etapes.en-ligne { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px; }
.etapes li { counter-increment: etape; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.etapes li::before { content: counter(etape); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pain); color: var(--nuit); font-family: var(--titre); font-size: 1.2rem; }
.etapes strong { display: block; font-size: 1.08rem; }
.etapes span { color: #e9dcf7; }

/* Cartes */
.cartes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 760px) { .cartes.par-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cartes.par-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.carte { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 22px; background: var(--enseigne); border: 2px solid var(--enseigne-claire); box-shadow: 0 6px 0 rgba(0, 0, 0, .28); }
.carte h3 { font-size: 1.5rem; }
.carte .role { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pain); }
.carte .ou { font-weight: 600; color: var(--mayo); }
.carte p { color: #e9dcf7; }
.carte .bas { margin-top: auto; padding-top: 6px; display: grid; gap: 12px; }
.carte-haut { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; }
.carte-haut > div:first-child { display: grid; gap: 6px; }
.qr-garde { flex: none; width: 104px; padding: 8px; border-radius: 12px; background: #fff; line-height: 0; }
.qr-garde svg { display: block; width: 100%; height: auto; }
.pastille { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.pastille.libre { background: var(--cornichon); color: var(--cornichon-fonce); }
.pastille.code { background: var(--mayo); color: var(--mayo-fonce); }
.acces { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.adresse { font: 600 .9rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--sel) !important; overflow-wrap: anywhere; }
.types { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px 28px; }
.types li { padding-left: 16px; border-left: 4px solid var(--pain); }
.types strong { display: block; }
.types span { color: #e9dcf7; font-size: .97rem; }
.liste-coches { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.liste-coches li { padding-left: 28px; position: relative; color: #e9dcf7; }
.liste-coches li::before { content: ""; position: absolute; left: 4px; top: .42em; width: 12px; height: 7px; border-left: 3px solid var(--cornichon); border-bottom: 3px solid var(--cornichon); transform: rotate(-45deg); }

/* Encadrés et messages */
.encadre { padding: 20px 22px; border-radius: 18px; border: 2px dashed var(--enseigne-claire); }
.encadre h3 { margin-bottom: 8px; font-family: var(--texte); font-size: 1.1rem; font-weight: 700; color: var(--mayo); letter-spacing: 0; }
.encadre p + p { margin-top: 10px; }
.encadre p { color: #e9dcf7; }
.avis-essai { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; padding: 16px 20px; margin: 0 0 22px; border-radius: 16px; background: var(--mayo); color: var(--mayo-fonce); font-weight: 600; }
.avis-essai p { flex: 1 1 260px; }
.avis-essai .btn { background: var(--nuit); color: var(--sel); box-shadow: 0 4px 0 rgba(0, 0, 0, .25); }
.message { padding: 14px 18px; border-radius: 14px; background: var(--enseigne); border: 2px solid var(--enseigne-claire); margin: 0 0 18px; }
.message.bon { border-color: var(--cornichon); }
.message.alerte { border-color: var(--pain); }
.code-animateurs { display: inline-block; margin: 6px 0; padding: 6px 16px; border-radius: 12px; background: var(--nuit); border: 2px solid var(--pain); font: 700 1.7rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .14em; color: var(--mayo); user-select: all; }
.deux-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px 40px; align-items: start; }

/* Formulaires */
.formulaire { display: grid; gap: 16px; margin-top: 22px; }
.site .champ input[type=email], .site .champ input[type=text], .site .champ input[type=password] { width: 100%; background: var(--nuit); border: 2px solid var(--enseigne-claire); border-radius: 10px; padding: 12px 12px; font-size: 16px; color: var(--sel); }
.site .champ.en-erreur input { border-color: #ff8f86; }
.champ-erreur { color: #ffb3ad !important; opacity: 1 !important; font-weight: 600; }
.champ-erreur:empty { display: none; }
.case { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: .97rem; color: #e9dcf7; }
.case input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--pain); }
.sous-formulaire { margin-top: 20px; color: #e9dcf7; }
.erreur:empty { display: none; }

/* Espace personnel */
.espace-tete { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }
.quizz { display: grid; gap: 14px; }
.quizz-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; align-items: center; padding: 18px 20px; border-radius: 18px; background: var(--enseigne); border: 2px solid var(--enseigne-claire); }
.quizz-ligne h3 { font-size: 1.35rem; overflow-wrap: anywhere; }
.quizz-ligne h3 a { text-decoration: none; }
.quizz-ligne h3 a:hover { text-decoration: underline; }
.quizz-infos { margin-top: 4px; color: #d7c6ee; font-size: .93rem; }
.quizz-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@media (max-width: 640px) { .quizz-ligne { grid-template-columns: minmax(0, 1fr); } .quizz-actions { justify-content: flex-start; } }
.vide { padding: 28px 22px; border-radius: 18px; border: 2px dashed var(--enseigne-claire); text-align: center; color: #e9dcf7; }
.reglages-compte { margin-top: 56px; display: grid; gap: 18px; }
.reglages-compte details { border-radius: 16px; border: 2px solid var(--enseigne); padding: 4px 18px; }
.reglages-compte summary { cursor: pointer; padding: 12px 0; font-weight: 700; }
.reglages-compte details[open] { padding-bottom: 18px; }
.reglages-compte .formulaire { margin-top: 6px; max-width: 420px; }
.danger summary { color: #ffb3ad; }

/* Texte long (mentions légales) */
.texte h2 { margin: 40px 0 10px; font-size: 1.5rem; color: var(--mayo); }
.texte p, .texte li { color: #f1e6fb; }
.texte p + p, .texte ul + p, .texte p + ul { margin-top: 12px; }
.texte ul { margin: 0; padding-left: 22px; display: grid; gap: 6px; }

@media (max-width: 820px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .scene-demo { max-width: 480px; margin: 8px auto 0; width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .demo-buzz { animation: battre 1.6s ease-in-out infinite; }
  @keyframes battre { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
}