/* ============================================================
   Nouvelle page d'accueil publique (index.php), AJOUT 16/10/2026. S'appuie sur les couleurs et les polices de bcba-2.css (chargé avant).
   Règle d'or : au-dessus de la ligne de flottaison, SANS faire défiler, le visiteur voit le titre, une phrase d'accroche, une image du jeu et le
   bouton. Tout le reste (essai, chiffres, piliers, texte long) passe en dessous.
   ============================================================ */

/* ---------- au-dessus de la ligne de flottaison ---------- */
.acc-hero {
    min-height: 100vh; min-height: 100svh; box-sizing: border-box; position: relative;
    display: grid; gap: 16px; align-content: center; justify-items: center; text-align: center;
    padding: 72px 20px 24px;
}
.acc-hero-texte { max-width: 600px; }
.acc-titre {
    margin: 0 0 12px; font-family: var(--font-display); font-weight: 700; color: var(--or); line-height: 1.06; letter-spacing: -.01em;
    font-size: clamp(1.9rem, 6.4vw, 3.7rem); text-shadow: 0 2px 24px var(--ombre);
}
.acc-accroche { margin: 0 0 18px; font-size: clamp(1.08rem, 2.8vw, 1.5rem); font-weight: 500; line-height: 1.35; color: var(--texte-scene); }
.acc-actions { display: flex; flex-wrap: wrap; gap: 12px 16px; justify-content: center; align-items: center; }
.acc-hero .acc-actions .bcba-btn-tampon { margin-bottom: 0; }
.acc-lien-secondaire {
    display: inline-flex; align-items: center; min-height: 48px; padding: 8px 18px; border-radius: 6px; text-decoration: none;
    font-family: var(--font-mono); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--or-clair); border: 2px solid color-mix(in srgb, var(--or) 55%, transparent);
}
.acc-lien-secondaire:hover { background: color-mix(in srgb, var(--or) 14%, transparent); }
.acc-defiler { display: inline-block; margin-top: 14px; color: var(--texte-att); font-size: .92rem; text-decoration: none; }
.acc-defiler:hover { color: var(--or-clair); text-decoration: underline; }
.acc-hero-image { margin: 0; }
.acc-hero-image img {
    display: block; height: min(34vh, 300px); width: auto; max-width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: 20px; border: 2px solid color-mix(in srgb, var(--or) 55%, transparent); box-shadow: 0 18px 40px var(--ombre);
}
.acc-bienvenue { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--or-clair); margin: 0 0 10px; }

/* Petits écrans en hauteur (téléphone de 640 px et moins) : on resserre pour que le titre, l'accroche, le bouton ET l'image tiennent sans défiler. */
@media (max-height: 700px) {
    .acc-hero { padding-top: 58px; padding-bottom: 16px; gap: 10px; }
    .acc-titre { margin-bottom: 8px; }
    .acc-accroche { margin-bottom: 12px; }
    .acc-defiler { margin-top: 8px; }
    .acc-hero-image img { height: min(26vh, 300px); }
}
@media (max-height: 580px) {
    .acc-hero-image img { height: min(22vh, 300px); }
}

@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
    .acc-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; justify-items: stretch; text-align: left; max-width: 1180px; margin: 0 auto; padding: 56px 32px 24px; }
    .acc-hero-texte { max-width: none; align-self: center; }
    .acc-actions { justify-content: flex-start; }
    .acc-hero-image { justify-self: center; }
    .acc-hero-image img { height: min(62vh, 440px); }
}

/* ---------- sections du dessous ---------- */
.acc-section { max-width: 1040px; margin: 0 auto; padding: 56px 20px; box-sizing: border-box; }
.acc-section > h2 {
    margin: 0 0 8px; text-align: center; font-family: var(--font-display); color: var(--or); font-size: clamp(1.6rem, 4.2vw, 2.4rem); line-height: 1.15;
}
.acc-intro { max-width: 620px; margin: 0 auto 26px; text-align: center; color: var(--texte-att); }
.acc-section + .acc-section { border-top: 1px solid var(--ligne-forte); }

/* ---------- lancer d'essai : le vrai lancer de dé ----------
   Le dé, les tuiles, le calendrier, les cartes qui se retournent et le quiz réutilisent les classes du jeu (bcba-2.css : .bcba-die-hero, .bcba-stat-tuile,
   .bcba-fond-carte, .bcba-calendrier-*, .bcba-carte-*). Seul l'habillage de la section vit ici. */
.essai {
    max-width: 640px; margin: 0 auto; padding: 24px 18px 20px; box-sizing: border-box; border-radius: 22px;
    background: var(--bg-carte); border: 2px solid var(--or); box-shadow: 0 16px 38px var(--ombre); text-align: center;
}
.essai .bcba-die-hero.essai-de {
    display: block; margin: 0 auto 12px; padding: 0; width: 96px; height: 96px; cursor: pointer; background: none; border: 0;
    transition: transform .2s ease;
}
.essai .bcba-die-hero.essai-de:hover { transform: rotate(4deg) scale(1.07); }
.essai .bcba-die-hero.essai-de:focus-visible { outline: 3px solid var(--or); outline-offset: 6px; }
.essai-faces { margin: 0 0 16px; text-align: center; }
.essai .essai-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 20px; text-align: center; }
.essai .bcba-stat-tuile { padding: 12px 6px 10px; }
.essai .bcba-stat-tuile-label { justify-content: center; flex-wrap: wrap; text-align: center; margin: 0 0 6px; font-size: .58rem; letter-spacing: .04em; }
.essai .bcba-stat-tuile-valeur { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.essai .bcba-btn-tampon { margin: 0; }
.essai-note { margin: 14px 0 0; font-size: .85rem; color: var(--texte-att); }
.essai-avis-appareil { display: flex; align-items: flex-start; gap: 8px; max-width: 460px; margin: 14px auto 0; padding: 10px 12px; text-align: left; cursor: pointer; border: 1px dashed var(--or); border-radius: 8px; font-size: .82rem; color: var(--texte-att); }
.essai-avis-appareil input { flex-shrink: 0; margin-top: 3px; }
.essai-croix {
    position: fixed; top: 14px; left: 14px; z-index: 130; /* à gauche : l'interrupteur de thème occupe le coin droit */ width: 46px; height: 46px; padding: 0; border-radius: 50%; cursor: pointer;
    border: 2px solid var(--or); background: var(--bg-carte); color: var(--or); font-size: 1.15rem; line-height: 1; box-shadow: 0 6px 18px var(--ombre);
}
.essai-croix:hover { background: var(--or); color: var(--bg-scene); }
@media (min-width: 520px) {
    .essai .bcba-stat-tuile { padding: 16px 10px 14px; }
    .essai .bcba-stat-tuile-label { font-size: .66rem; letter-spacing: .06em; }
    .essai .bcba-stat-tuile-valeur { font-size: 1.3rem; }
}

/* ---------- les chiffres qui comptent ---------- */
.acc-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.acc-chiffre {
    padding: 18px 12px; text-align: center; border-radius: 16px; background: var(--bg-carte); border: 1px solid var(--ligne-forte);
}
.acc-chiffre strong { display: block; font-family: var(--font-mono); font-weight: 800; font-size: clamp(1.8rem, 5.2vw, 2.7rem); color: var(--or-clair); line-height: 1.1; font-variant-numeric: tabular-nums; }
.acc-chiffre span { display: block; margin-top: 4px; font-size: .88rem; color: var(--texte-att); }

/* ---------- les 5 piliers ---------- */
.acc-piliers { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.acc-pilier-carte {
    display: block; padding: 18px 16px; border-radius: 16px; text-decoration: none; color: inherit; background: var(--bg-carte);
    border: 1px solid var(--ligne-forte); transition: transform .15s ease, border-color .15s ease;
}
.acc-pilier-carte:hover { transform: translateY(-3px); border-color: var(--or); }
.acc-pilier-icone { display: block; font-size: 2rem; line-height: 1; margin-bottom: 8px; }
.acc-pilier-carte strong { display: block; font-family: var(--font-display); font-size: 1.12rem; color: var(--or-clair); margin-bottom: 4px; }
.acc-pilier-carte span:last-child { display: block; font-size: .9rem; color: var(--texte-att); line-height: 1.4; }
.acc-centre { text-align: center; margin-top: 22px; }

/* ---------- texte long, plus bas ---------- */
.acc-texte-long { max-width: 720px; margin: 0 auto; font-size: 1.05rem; line-height: 1.7; }
.acc-texte-long p { margin: 0 0 14px; }

@media (prefers-reduced-motion: reduce) {
    .essai .bcba-die-hero.essai-de { transition: none; }
    .acc-pilier-carte { transition: none; }
}