/* ============================================
   SAB Player Pro — accueil (16/10/2026)
   Fil conducteur : l'interface de l'appli sur TV. Vraies captures dans un cadre d'écran,
   touches de télécommande pour les étapes, guide des programmes pour « où l'installer »,
   contour blanc de sélection au survol et au clavier.
   Tout est préfixé par body.accueil : style.css et style-v2.css restent ceux des autres pages.
   ============================================ */

body.accueil {
    --fond: #050014;
    --surface: #0d0726;
    --surface-2: #1a0f3d;
    --ligne: rgba(184, 163, 200, 0.16);
    --doux: #b8a3c8;
    --rose: #ff6ec7;
    --marque: #c4177d;
    --titre: 'Barlow Semi Condensed', 'Inter', sans-serif;
    background-image: none;
}

/* ---------- socle ---------- */
body.accueil main section[id] { scroll-margin-top: 7.5rem; }
body.accueil main section { max-width: 1180px; margin: 0 auto; padding: 5.5rem 1.25rem; }
body.accueil main h1,
body.accueil main h2,
body.accueil main h3 { font-family: var(--titre); color: #fff; text-align: left; background: none; -webkit-text-fill-color: currentColor; letter-spacing: -0.01em; }
body.accueil main h2 { font-weight: 700; font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.04; margin: 0 0 0.8rem; }
body.accueil main h3 { font-weight: 600; margin: 0; }
body.accueil main section h2 + p { text-align: left; margin: 0; max-width: 40rem; font-size: 1.08rem; color: var(--doux); }
body.accueil .bloc-tete { margin-bottom: 2.4rem; }
body.accueil .bloc-tete p { color: var(--doux); font-size: 1.08rem; line-height: 1.6; margin: 0; max-width: 40rem; }

/* boutons du site (les badges des stores restent tels quels) */
body.accueil .bt { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.5rem; border-radius: 999px;
    font-weight: 600; font-size: 1rem; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, border-color 0.15s ease; }
body.accueil .bt-plein { background: var(--marque); color: #fff; border: 2px solid var(--marque); }
body.accueil .bt-plein:hover { background: #a8136a; border-color: #a8136a; }
body.accueil .bt-contour { color: #fff; border: 2px solid var(--rose); background: transparent; }
body.accueil .bt-contour:hover { background: rgba(255, 110, 199, 0.14); }
body.accueil .bt:focus-visible,
body.accueil summary:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* cadre d'écran autour des captures : bord noir fin, comme une TV vue de face */
body.accueil .tv-ecran { border: 8px solid #000; border-radius: 14px; overflow: hidden; background: #000;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10); }
body.accueil .tv-ecran img { display: block; width: 100%; height: auto; }

/* ---------- ouverture ---------- */
body.accueil main section.ouv { max-width: 1180px; padding-top: 8.5rem; padding-bottom: 4rem; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3rem; align-items: center; }
body.accueil .ouv h1 { font-weight: 700; font-size: clamp(2.6rem, 5.2vw, 4.5rem); line-height: 0.98; margin: 0 0 1.4rem; }
body.accueil .ouv-lead { color: #e9e0f2; font-size: 1.15rem; line-height: 1.6; margin: 0 0 2rem; max-width: 34rem; }
body.accueil .ouv-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1.6rem; }
body.accueil .ouv-note { color: var(--doux); font-size: 1.05rem; line-height: 1.5; margin: 0; max-width: 32rem; padding-left: 0.9rem; border-left: 3px solid var(--marque); }
body.accueil .ouv-tv { margin: 0; }
body.accueil .ouv-tv .tv-ecran { border-width: 12px; border-radius: 18px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 30px 60px -30px rgba(0, 0, 0, 0.7); }

/* ---------- captures ---------- */
body.accueil .ecrans-rang { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
body.accueil .ecran { margin: 0; }
body.accueil .ecran figcaption { margin-top: 1rem; color: var(--doux); font-size: 1rem; line-height: 1.5; }
body.accueil .ecran figcaption b { display: block; font-family: var(--titre); font-weight: 600; font-size: 1.3rem; color: #fff; margin-bottom: 0.15rem; }
body.accueil .details { margin-top: 3.2rem; }
body.accueil .details h3 { font-size: 1.45rem; margin-bottom: 0.6rem; }
body.accueil .details ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; }
body.accueil .details li { padding: 0.85rem 0; border-top: 1px solid var(--ligne); color: #e9e0f2; font-size: 1rem; line-height: 1.45; }

/* ---------- guide : où l'installer ---------- */
body.accueil .guide-list { list-style: none; margin: 0; padding: 0; border-radius: 18px; background: var(--surface); border: 1px solid var(--ligne); overflow: hidden; }
body.accueil .guide-row { position: relative; display: grid; grid-template-columns: minmax(15rem, 1.05fr) 13.5rem minmax(0, 1fr); align-items: center; gap: 0.6rem 2rem;
    padding: 1.05rem 1.6rem; border-top: 1px solid var(--ligne); transition: background-color 0.12s ease, box-shadow 0.12s ease; }
body.accueil .guide-row:first-child { border-top: 0; }
body.accueil .guide-row:hover,
body.accueil .guide-row:focus-within,
body.accueil .guide-row:focus { outline: none; background: var(--surface-2); box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px #fff; z-index: 1; border-radius: 12px; }
body.accueil .guide-row:hover + .guide-row,
body.accueil .guide-row:focus-within + .guide-row,
body.accueil .guide-row:focus + .guide-row { border-top-color: transparent; }
body.accueil .guide-dev h3 { font-size: 1.45rem; line-height: 1.15; }
body.accueil .guide-dev span { display: block; color: var(--doux); font-size: 1rem; line-height: 1.4; margin-top: 0.2rem; }
body.accueil .guide-get { display: flex; align-items: center; }
body.accueil .guide-get:empty { display: none; }
body.accueil .guide-get:empty + .guide-how { grid-column: 2 / -1; }
body.accueil .guide-get a { display: inline-flex; border-radius: 9px; }
body.accueil .guide-get a:not(.bt):focus-visible { outline: none; }
body.accueil .guide-get img { display: block; height: 48px; width: auto; }
body.accueil .guide-get img.gp-fr { height: 62.5px; margin: -7.25px 0; }   /* badge Google Play officiel, marge transparente comprise */
body.accueil .guide-get img.gp-en { height: 71.43px; margin: -11.71px; }
body.accueil .guide-get .bt { min-height: 44px; }
body.accueil .guide-row:focus-within .guide-get .bt:focus-visible { outline: none; background: rgba(255, 110, 199, 0.14); }
body.accueil .guide-how { color: var(--doux); font-size: 1rem; line-height: 1.5; margin: 0; }
body.accueil .guide-tv .guide-how { color: #fff; font-size: 1.05rem; }
body.accueil .guide-how b { color: #fff; font-weight: 700; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
body.accueil .guide-how a { color: var(--rose); text-underline-offset: 3px; }

/* ---------- étapes : touches de télécommande ---------- */
body.accueil .etapes-liste { list-style: none; margin: 0 0 2.4rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
body.accueil .etapes-liste li { display: flex; gap: 1.1rem; align-items: flex-start; }
body.accueil .touche { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
    font-family: var(--titre); font-weight: 700; font-size: 1.45rem; color: #fff;
    background: linear-gradient(180deg, #2c2150 0%, #160c31 100%); border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.45), 0 2px 0 rgba(255, 255, 255, 0.05); }
body.accueil .etapes-liste h3 { font-size: 1.35rem; line-height: 1.2; margin-bottom: 0.35rem; }
body.accueil .etapes-liste p { color: var(--doux); font-size: 1rem; line-height: 1.55; margin: 0; }

/* ---------- lecteur, pas fournisseur ---------- */
body.accueil main section.lecteur { padding-top: 3rem; padding-bottom: 3rem; }
body.accueil .lecteur { border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); }
body.accueil main .lecteur h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
body.accueil main section.lecteur h2 + p { color: #e9e0f2; font-size: 1.15rem; line-height: 1.65; max-width: 46rem; }

/* ---------- questions ---------- */
body.accueil .faq details { border-top: 1px solid var(--ligne); }
body.accueil .faq details:last-of-type { border-bottom: 1px solid var(--ligne); }
body.accueil .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1.5rem; align-items: center;
    padding: 1.15rem 0.2rem; font-family: var(--titre); font-weight: 600; font-size: 1.3rem; color: #fff; }
body.accueil .faq summary::-webkit-details-marker { display: none; }
body.accueil .faq summary::after { content: '+'; flex: none; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 1.6rem; color: var(--rose); line-height: 1; }
body.accueil .faq details[open] summary::after { content: '−'; }
body.accueil .faq details p { margin: 0 0 1.3rem; padding: 0 0.2rem; color: var(--doux); font-size: 1.02rem; line-height: 1.65; max-width: 46rem; }
body.accueil .faq details a { color: var(--rose); text-underline-offset: 3px; }

/* ---------- pied ---------- */
body.accueil footer { margin-top: 2rem; }
body.accueil .footer-marques { max-width: 60rem; margin: 0.8rem auto 0; font-size: 0.8rem; line-height: 1.5; color: var(--doux); }

/* ---------- contraste élevé ---------- */
@media (forced-colors: active) {
    body.accueil .guide-row:hover, body.accueil .guide-row:focus-within, body.accueil .guide-row:focus { outline: 3px solid Highlight; }
    body.accueil .guide-get a:focus-visible,
    body.accueil .guide-row:focus-within .guide-get .bt:focus-visible { outline: 3px solid Highlight; }
}

/* ---------- tablette et téléphone ---------- */
@media (max-width: 960px) {
    body.accueil main section.ouv { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 7rem; }
    body.accueil .ecrans-rang { grid-template-columns: 1fr; gap: 2.2rem; }
    body.accueil .details ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.accueil .etapes-liste { grid-template-columns: 1fr; gap: 1.6rem; }
}
@media (max-width: 768px) {
    /* barre du haut sur une seule ligne : logo à gauche, menu à droite (style.css l'empile sur deux lignes) */
    body.accueil .nav-container { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; }
    body.accueil .nav-menu { flex-basis: 100%; }
}
@media (max-width: 760px) {
    body.accueil main section { padding: 3.8rem 1rem; }
    body.accueil main section.ouv { padding-top: 6.5rem; }
    body.accueil .ouv-tv .tv-ecran { border-width: 7px; border-radius: 12px; }
    body.accueil .details ul { grid-template-columns: 1fr; }
    body.accueil .guide-row { grid-template-columns: 1fr; gap: 0.75rem; padding: 1.15rem 1.1rem 1.2rem; }
    body.accueil .guide-get:empty + .guide-how { grid-column: auto; }
}

/* ---------- 16/10/2026 : téléphone d'abord ---------- */
/* la ligne de l'appareil du visiteur (placée en tête par le script) */
body.accueil .guide-dev .guide-vous-marque { display: block; margin-bottom: 0.35rem; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: var(--rose); }
body.accueil .guide-vous { background: var(--surface-2); }
@media (max-width: 760px) {
    /* ordre au téléphone : ouverture, où l'installer, ajouter la liste, puis les captures */
    body.accueil main { display: flex; flex-direction: column; }
    body.accueil main > .ouv { order: 1; }
    body.accueil main > .guide { order: 2; }
    body.accueil main > .etapes { order: 3; }
    body.accueil main > .ecrans { order: 4; }
    body.accueil main > .lecteur { order: 5; }
    body.accueil main > .faq { order: 6; }
    body.accueil main > section { width: 100%; box-sizing: border-box; }
    /* captures en bande à faire glisser au doigt, au lieu de trois écrans empilés */
    body.accueil .ecrans-rang { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 1rem;
        overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin: 0 -1rem; padding: 0 1rem 0.5rem; scroll-padding: 0 1rem; }
    body.accueil .ecran { scroll-snap-align: start; }
}

/* ---------- 16/10/2026 : en-tête sobre (choix de l'utilisateur) : nom en blanc, bouton de langue à contour ---------- */
body.accueil .logo, body.accueil .logo-text { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: #fff; color: #fff; }
body.accueil .logo:hover { transform: none; filter: none; }
body.accueil .logo-text { font-family: var(--titre); font-weight: 700; letter-spacing: 0; }
body.accueil .lang-switch { background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.45); color: #fff; font-family: 'Inter', sans-serif; box-shadow: none; min-height: 44px; }
body.accueil .lang-switch:hover { transform: none; border-color: #fff; box-shadow: none; }