/* fiche-produit.css — la fiche d'un produit de la boutiK, ouverte par-dessus
   la page (fiche-produit.js, 26 oct. 2026). Mise en page de la piste A
   choisie par Julien sur le canevas « Fiche KodeX » : la photo au centre,
   puis tout aligné à gauche, bouton framboise (comme « Payer par carte »).
   Feuille qui monte du bas sur le téléphone, carte centrée sur l'ordinateur. */
.fiche { position: fixed; inset: 0; z-index: 1000; background: rgba(40, 30, 20, 0.5); display: flex; align-items: flex-end; justify-content: center; }
.fiche[hidden] { display: none; }
body.fiche-ouverte { overflow: hidden; }
.fiche-feuille {
    position: relative; background: #fff; color: #2f261d; width: 100%; max-width: 480px; max-height: 94vh; max-height: 94dvh;
    overflow-y: auto; border-radius: 26px 26px 0 0; padding: 10px 22px calc(26px + env(safe-area-inset-bottom)); box-sizing: border-box;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2); animation: fiche-monte 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes fiche-monte { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 700px) {
    .fiche { align-items: center; padding: 1rem; }
    .fiche-feuille { border-radius: 26px; padding: 18px 28px 28px; }
    .fiche-poignee { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fiche-feuille { animation: none; } }
.fiche-poignee { display: block; width: 40px; height: 5px; border-radius: 3px; background: #e2dbcf; margin: 0 auto; }
.fiche-fermer { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: none; background: #f3efe7; font-size: 1.4rem; line-height: 1; cursor: pointer; color: #3f362b; z-index: 1; }
.fiche-fermer:hover { background: #e9e2d5; }
.fiche-attente { margin: 2.5rem 0 1rem; text-align: center; color: #8b7d6f; }
.fiche-corps { display: flex; flex-direction: column; gap: 14px; }

/* La photo, en carré pour voir le produit entier, et ses vignettes. */
.fiche-photos { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 18px; }
.fiche-visuel { display: grid; place-items: center; width: min(270px, 100%); aspect-ratio: 1 / 1; border-radius: 18px; background: #f6f1e7; overflow: hidden; }
.fiche-visuel img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fiche-mot { font-size: 1.6rem; font-weight: 900; color: #7b4b2a; padding: 0 1rem; text-align: center; }
.fiche-vignettes { display: flex; justify-content: center; gap: 8px; }
.fiche-vignettes button { width: 44px; height: 44px; border-radius: 10px; border: 2px solid transparent; padding: 0; background: #f3efe7; overflow: hidden; cursor: pointer; opacity: 0.75; transition: opacity 0.15s; }
.fiche-vignettes button.on { border-color: #2f261d; opacity: 1; }
.fiche-vignettes img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Le nom, et la phrase qui le présente juste dessous. */
.fiche-titres { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
/* Le h2 de style.css est centré, avec une marge intérieure : la fiche aligne tout à gauche, au même bord. */
.fiche-nom { text-align: left; padding: 0; margin: 0; font-size: 1.5rem; font-weight: 900; line-height: 1.15; letter-spacing: -0.3px; color: #2f261d; }
.fiche-titres .fd-chapo { margin: 0; font-size: 0.95rem; line-height: 1.45; color: #6b5f52; }

/* Le prix, et la remise des abonnés quand le produit est remisable. */
.fiche-prix { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fiche-montant { font-size: 1.75rem; font-weight: 900; letter-spacing: -0.5px; color: #2f261d; }
.fiche-remise { font-size: 0.75rem; font-weight: 800; color: #0a6fa8; background: #e6f3fb; padding: 5px 10px; border-radius: 50px; white-space: nowrap; }
.fiche-precommande { margin: -6px 0 0; font-size: 0.82rem; font-weight: 700; color: #C2185B; }

/* L'action : le bouton framboise, puis « − n + » et « Voir le panier → ». */
.fiche-action { display: grid; gap: 0.5rem; }
.fiche-btn {
    display: block; text-align: center; text-decoration: none; border: none; cursor: pointer; font: inherit;
    background: #C8267D; color: #fff; font-weight: 800; font-size: 1.05rem; min-height: 52px; padding: 0.8rem 1rem; border-radius: 14px;
    box-shadow: 0 6px 16px rgba(200, 38, 125, 0.28); transition: background 0.2s;
}
.fiche-btn:hover { background: #a91f69; color: #fff; }
.fiche-btn-attente { background: #b9ada0; box-shadow: none; cursor: default; }
.fiche-pas { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; border: 2px solid #C8267D; border-radius: 14px; padding: 4px; background: #fff; }
.fiche-pas button { width: 44px; height: 44px; flex: none; border-radius: 10px; border: none; background: #C8267D; color: #fff; font: inherit; font-size: 1.5rem; font-weight: 900; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.fiche-pas button:hover { background: #a91f69; }
.fiche-pas-n { flex: 1; text-align: center; font-size: 0.95rem; font-weight: 700; color: #6b5f52; white-space: nowrap; }
.fiche-pas-n b { font-size: 1.25rem; font-weight: 900; color: #2f261d; font-variant-numeric: tabular-nums; }
.fiche-voir { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; color: #0089D4; font-weight: 700; text-decoration: none; }
.fiche-voir:hover { text-decoration: underline; }
.fiche-rassure { margin: -4px 0 0; text-align: center; font-size: 0.75rem; color: #8b7d6f; }

/* Le reste de la description, s'il y en a. */
.fiche-desc { font-size: 0.92rem; line-height: 1.5; color: #4a3f33; border-top: 1px solid #efe9de; padding-top: 12px; }
.fiche-desc p { margin: 0 0 0.6rem; }
.fiche-desc ul { margin: 0 0 0.6rem; padding-left: 1.2rem; }
.fiche-desc li { margin: 0.15rem 0; }

/* La ligne qui mène à la fiche, sous la carte de préparation d'un jeu
   (arithmétiK, Apprendre le spiKto®) : « Le KodeX … · Le découvrir → ». */
.fiche-ligne { text-align: center; font-size: 0.875rem; color: #8b7d6f; margin: 0.5rem 0 0; }
.fiche-ligne a { color: #0089D4; font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }