/* Dis-Moi : couleurs et typo du jeu, nav, pied de page, guides et précommande. Se charge après ../commun/hd.css. */
:root { --fond: #2a1747; --encre: #fbf8ff; --accent: #a28dd1; --accent-2: #d6c6f2; --violet: #6039a0; --lavande: #ece3fb;
  --vert: #2f9f69; --rouge: #a72b23; --titre: 'Fredoka', 'Space Grotesk', system-ui, sans-serif; }
/* La DA du jeu : titres ronds et épais, violets, avec contour blanc. */
.titre-xxl, .titre-xl { font-weight: 700; text-transform: uppercase; letter-spacing: 0; word-spacing: .12em; }
.titre-xxl { line-height: .9; }
.dm { color: var(--violet); -webkit-text-stroke: .06em #fff; paint-order: stroke fill; }
.nav__logo { font-weight: 700; }
.nav__logo span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--accent-2); color: var(--violet); font-size: 1.1rem; }
.nav__liens { align-items: center; }
.nav__cta { padding: .55em 1.1em; border-radius: 999px; background: var(--accent-2); color: var(--violet) !important; font-weight: 700; }

/* Pied de page en colonnes */
.pied__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 2rem; margin-bottom: 2.5rem; }
.pied__grille h2 { font: 700 1rem/1 var(--titre); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .8rem; color: var(--accent-2); }
.pied__grille ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }

/* Pages claires (guides, précommande) */
.page-claire { background: #fbf8ff; color: var(--fond); }
.page-claire .surtitre { color: var(--violet); }
.entete { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem); background: radial-gradient(circle at 85% 20%, #fff 0, var(--lavande) 45%, var(--accent-2) 100%); color: var(--fond); }
.entete h1 { font: 700 clamp(2.3rem, 6vw, 4.6rem)/.98 var(--titre); color: var(--violet); margin: 0 0 1rem; max-width: 22ch; }
.entete .chapo { max-width: 60ch; }
.ariane { font-size: .88rem; margin-bottom: 1.4rem; }
.ariane ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.ariane li + li::before { content: '›'; margin-right: .4rem; opacity: .6; }
.ariane a { color: var(--violet); }
.maj { font-size: .85rem; opacity: .75; margin-top: 1rem; }

/* Article */
.article { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: clamp(2rem, 5vw, 4rem); padding-block: clamp(2.5rem, 6vw, 4.5rem); }
@media (max-width: 900px) { .article { grid-template-columns: 1fr; } .article aside { order: -1; } }
.contenu { max-width: 70ch; font-size: 1.07rem; line-height: 1.75; }
.contenu h2 { font: 700 clamp(1.6rem, 3vw, 2.2rem)/1.1 var(--titre); color: var(--violet); margin: 2.6rem 0 .8rem; scroll-margin-top: 6rem; }
.contenu h3 { font: 700 1.25rem/1.2 var(--titre); color: var(--fond); margin: 1.8rem 0 .5rem; }
.contenu a { color: var(--violet); font-weight: 500; }
.contenu ul, .contenu ol { padding-left: 1.3rem; }
.contenu li { margin-bottom: .4rem; }
.contenu table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .95rem; }
.contenu th, .contenu td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--accent-2); vertical-align: top; }
.contenu th { font-family: var(--titre); color: var(--violet); }
.tableau { overflow-x: auto; }
.reponse { padding: 1.3rem 1.5rem; border-radius: 1.2rem; background: #fff; border-left: 6px solid var(--violet); font-size: 1.1rem; box-shadow: 0 10px 30px rgb(42 23 71 / .07); }
.retenir { margin: 2.4rem 0; padding: 1.5rem 1.7rem; border-radius: 1.4rem; background: var(--violet); color: #fff; }
.retenir h2 { color: #fff; margin-top: 0; font-size: 1.5rem; }
.retenir ul { margin: 0; }
.alerte { margin: 1.6rem 0; padding: 1.1rem 1.3rem; border-radius: 1rem; background: #fdeceb; border-left: 6px solid var(--rouge); }
.sources { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--accent-2); font-size: .92rem; }
.sources h2 { font-size: 1.2rem; margin-top: 0; }
.avertissement { font-size: .88rem; opacity: .8; }
aside .bloc { position: sticky; top: 6rem; display: grid; gap: 1rem; }
.sommaire { padding: 1.2rem 1.3rem; border-radius: 1.2rem; background: #fff; font-size: .93rem; }
.sommaire h2, .pub-jeu h2 { font: 700 1rem/1 var(--titre); text-transform: uppercase; color: var(--violet); margin: 0 0 .8rem; }
.sommaire ol { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; }
.sommaire a { color: inherit; text-decoration: none; } .sommaire a:hover { color: var(--violet); text-decoration: underline; }
.pub-jeu { padding: 1.3rem; border-radius: 1.2rem; background: var(--violet); color: #fff; }
.pub-jeu h2 { color: #fff; }
.pub-jeu img { width: 42%; margin: 0 auto 1rem; border-radius: 6%; transform: rotate(-3deg); box-shadow: 0 14px 24px rgb(0 0 0 / .3); }
.pub-jeu p { font-size: .93rem; margin: 0 0 1rem; }
.pub-jeu .cta { background: #fff; color: var(--violet); font-size: .85rem; }

/* Grilles de guides */
.guides { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
.guide-carte { display: flex; flex-direction: column; gap: .5rem; padding: 1.4rem; border-radius: 1.4rem; background: #fff; text-decoration: none; color: var(--fond);
  border-top: 6px solid var(--c, var(--violet)); transition: transform .2s, box-shadow .2s; }
.guide-carte:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgb(42 23 71 / .12); }
.guide-carte b { font: 700 1.3rem/1.15 var(--titre); color: var(--violet); }
.guide-carte span { font-size: .95rem; line-height: 1.5; }
.lies { padding-block: clamp(2.5rem, 6vw, 4rem); background: var(--lavande); }
.lies h2 { font: 700 1.6rem/1 var(--titre); text-transform: uppercase; color: var(--violet); margin: 0 0 1.4rem; }

/* FAQ */
.faq details { padding: 1.1rem 1.3rem; border-radius: 1rem; background: #fff; margin-bottom: .7rem; }
.faq summary { cursor: pointer; font: 700 1.1rem/1.3 var(--titre); color: var(--violet); }
.faq details p { margin: .8rem 0 0; }

/* Précommande */
.offres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.4rem; align-items: start; }
.offre { padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 1.8rem; background: #fff; box-shadow: 0 20px 50px rgb(42 23 71 / .08); }
.offre--principale { background: var(--violet); color: #fff; }
.offre h2 { font: 700 1.8rem/1.05 var(--titre); text-transform: uppercase; margin: 0 0 .4rem; }
.offre--principale h2 { color: #fff; } .offre:not(.offre--principale) h2 { color: var(--violet); }
.prix { font: 700 3.4rem/1 var(--titre); margin: .6rem 0 .2rem; }
.prix small { font-size: 1rem; font-weight: 500; opacity: .8; }
.offre ul { padding-left: 1.2rem; line-height: 1.6; }
.quantite { display: flex; align-items: center; gap: .8rem; margin: 1.2rem 0; }
.quantite button { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid currentColor; background: transparent; color: inherit; font: 700 1.3rem/1 var(--texte); cursor: pointer; }
.quantite output { font: 700 1.8rem/1 var(--titre); min-width: 2ch; text-align: center; }
.total { padding: 1rem 1.2rem; border-radius: 1rem; background: rgb(255 255 255 / .14); line-height: 1.7; }
.total div { display: flex; justify-content: space-between; gap: 1rem; }
.total .somme { font-weight: 700; font-size: 1.15rem; border-top: 1px solid rgb(255 255 255 / .3); margin-top: .3rem; padding-top: .3rem; }
.montants { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.montants button { padding: .7em 1.1em; border-radius: 999px; border: 2px solid var(--violet); background: #fff; color: var(--violet); font: 700 1rem/1 var(--texte); cursor: pointer; }
.montants button[aria-pressed="true"] { background: var(--violet); color: #fff; }
.champ { display: grid; gap: .3rem; margin: .8rem 0 1.2rem; font-weight: 500; }
.champ input { padding: .8rem 1rem; border-radius: .8rem; border: 2px solid var(--accent-2); font: 500 1.1rem/1 var(--texte); max-width: 12rem; }
.payer { width: 100%; justify-content: center; margin-top: 1.2rem; }
.offre--principale .payer { background: #fff; color: var(--violet); }
.offre:not(.offre--principale) .payer { background: var(--violet); color: #fff; }
.payer[disabled] { opacity: .6; cursor: wait; }
.message { min-height: 1.5em; margin: .8rem 0 0; font-size: .92rem; font-weight: 500; }
.garanties { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; margin-top: 2.5rem; }
.garanties div { padding: 1.1rem 1.2rem; border-radius: 1.1rem; background: #fff; font-size: .93rem; line-height: 1.5; }
.garanties b { display: block; font-family: var(--titre); color: var(--violet); text-transform: uppercase; margin-bottom: .2rem; }
.jauge { margin: 2rem 0 0; }
.guide-carte small { font: 700 .72rem/1 var(--texte); letter-spacing: .12em; text-transform: uppercase; color: var(--c, var(--violet)); }
.page-claire .nav, .page-claire .pied { color: var(--encre); }
.page-claire .pied { background: var(--fond); }
.nowrap { white-space: nowrap; }