/* Atelier du vin, 6e série : offrir, ouvrir, livre de cave, grand quiz.
   Après atelier-2.css (et outils-4.css pour le quiz). */

/* ---------- En-têtes ---------- */
body.nsa-page .offrir-tete,
body.nsa-page .ouvrir-tete,
body.nsa-page .livre-tete { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); text-align: center; }
body.nsa-page .offrir-tete__contenu,
body.nsa-page .ouvrir-tete__contenu,
body.nsa-page .livre-tete__contenu { max-width: 46rem; }
body.nsa-page .offrir-tete .fleur,
body.nsa-page .ouvrir-tete .fleur,
body.nsa-page .livre-tete .fleur { margin-inline: auto; }
body.nsa-page .offrir-tete .titre,
body.nsa-page .ouvrir-tete .titre,
body.nsa-page .livre-tete .titre { margin-top: .75rem; text-wrap: balance; }
body.nsa-page .offrir-tete__intro,
body.nsa-page .ouvrir-tete__intro,
body.nsa-page .livre-tete__intro { margin-top: 1.25rem; font-size: 1.0625rem; line-height: 1.75; text-wrap: pretty; }
body.nsa-page .surtitre a { color: inherit; text-decoration: none; }

/* ---------- Grand quiz : lien vers l'outil ---------- */
body.nsa-page .qn__outil { display: inline-block; margin-left: .35rem; font-family: var(--sans); font-size: .8125rem; font-weight: 500; color: var(--rouge); text-decoration: none; }
body.nsa-page .qn__outil:hover { text-decoration: underline; }

/* ---------- Offrir du vin ---------- */
body.nsa-page .offrir { padding-top: 0; }
body.nsa-page .offrir__questions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 64rem; margin: 0 auto clamp(1.75rem, 3vw, 2.5rem); }
body.nsa-page .offrir__questions[hidden] { display: none; }
body.nsa-page .offrir__questions fieldset { margin: 0; padding: 1.25rem 1.5rem; background: var(--blanc); border: 1px solid var(--filet); }
body.nsa-page .offrir__questions legend { float: left; width: 100%; margin-bottom: .85rem; padding: 0; font-family: var(--titre); font-size: 1.25rem; color: var(--encre); }
body.nsa-page .offrir__puces { clear: both; display: flex; flex-wrap: wrap; gap: .5rem; }
body.nsa-page .offrir__puces label[hidden] { display: none; }
body.nsa-page .offrir__puces input { position: absolute; opacity: 0; pointer-events: none; }
body.nsa-page .offrir__puces span { display: inline-block; padding: .6rem 1.1rem; font-family: var(--sans); font-size: .875rem; color: var(--encre); background: var(--fond); border: 1px solid var(--filet); border-radius: 999px; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
body.nsa-page .offrir__puces label:hover span { border-color: var(--rouge); }
body.nsa-page .offrir__puces input:checked + span { color: var(--blanc); background: var(--rouge); border-color: var(--rouge); }
body.nsa-page .offrir__puces input:focus-visible + span { outline: 2px solid var(--cuivre); outline-offset: 2px; }
body.nsa-page .offrir__au-dessus { max-width: 64rem; margin: 0 auto 1rem; padding: .75rem 1rem; font-family: var(--sans); font-size: .875rem; color: var(--cuivre-texte); background: var(--fond-2); }
body.nsa-page .offrir__au-dessus[hidden] { display: none; }
body.nsa-page .offrir__vins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
body.nsa-page .cadeau { display: flex; flex-direction: column; background: var(--blanc); border: 1px solid var(--filet); border-top: 3px solid var(--rouge); }
body.nsa-page .cadeau[hidden] { display: none; }
body.nsa-page .cadeau__visuel { display: block; padding: 1.25rem 1.25rem 0; background: var(--fond-2); }
body.nsa-page .cadeau__visuel img { display: block; width: 100%; height: 15rem; object-fit: contain; mix-blend-mode: multiply; }
body.nsa-page .cadeau__texte { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.5rem 1.5rem; }
body.nsa-page .cadeau__type { margin: 0; font-family: var(--sans); font-size: .6875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--cuivre-texte); }
body.nsa-page .cadeau__medaille { display: inline-block; margin-left: .35rem; padding: .1rem .5rem; letter-spacing: .04em; text-transform: none; color: #6b4e12; background: #f6e9c4; border-radius: 999px; }
body.nsa-page .cadeau__nom { margin: .5rem 0 0; font-family: var(--titre); font-size: 1.25rem; font-weight: 400; line-height: 1.3; }
body.nsa-page .cadeau__nom a { color: var(--encre); text-decoration: none; }
body.nsa-page .cadeau__nom a:hover { color: var(--rouge); }
body.nsa-page .cadeau__prix { flex: 1; margin: .5rem 0 0; font-family: var(--titre); font-size: 1.375rem; color: var(--rouge); }
body.nsa-page .cadeau__prix del { opacity: .55; margin-right: .4em; font-size: .875em; }
body.nsa-page .cadeau__prix ins { text-decoration: none; }
body.nsa-page .cadeau__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: 1rem 0 0; }
body.nsa-page .cadeau__fiche { font-family: var(--sans); font-size: .8125rem; color: var(--rouge); }
body.nsa-page .offrir__suite { margin: 1.75rem 0 0; text-align: center; }
body.nsa-page .offrir__suite a { color: var(--rouge); font-weight: 500; }

/* ---------- Ouvrir une bouteille ---------- */
body.nsa-page .gestes-ouvrir { padding-top: 0; }
body.nsa-page .gestes-ouvrir__choix { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
body.nsa-page .gestes-ouvrir__choix[hidden] { display: none; }
body.nsa-page .gestes-ouvrir__choix button { padding: .75rem 1.35rem; font-family: var(--sans); font-size: .875rem; color: var(--encre); background: var(--blanc); border: 1px solid var(--filet); border-radius: 999px; cursor: pointer; }
body.nsa-page .gestes-ouvrir__choix button:hover { border-color: var(--rouge); }
body.nsa-page .gestes-ouvrir__choix button[aria-pressed="true"] { color: var(--blanc); background: var(--rouge); border-color: var(--rouge); }
body.nsa-page .geste { max-width: 52rem; margin: 0 auto; padding: clamp(1.5rem, 3.5vw, 2.5rem); background: var(--blanc); border: 1px solid var(--filet); border-top: 3px solid var(--rouge); }
body.nsa-page .geste + .geste { margin-top: 1.5rem; }
body.nsa-page .geste[hidden] { display: none; }
body.nsa-page .geste.is-fini { border-top-color: #4e6b35; }
body.nsa-page .geste__titre { margin: 0; font-family: var(--titre); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 400; color: var(--encre); }
body.nsa-page .geste__tete > p { margin: .5rem 0 0; color: var(--texte-doux); }
body.nsa-page .geste__barre { height: 4px; margin-top: 1.25rem; background: var(--fond-2); border-radius: 2px; overflow: hidden; }
body.nsa-page .geste__barre span { display: block; width: 0; height: 100%; background: var(--cuivre); transition: width .35s var(--ease); }
body.nsa-page .geste.is-fini .geste__barre span { background: #4e6b35; }
body.nsa-page .geste__etapes { display: grid; gap: .5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
body.nsa-page .geste__etapes label { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: .85rem; align-items: start; padding: .85rem 1rem; border: 1px solid var(--filet); cursor: pointer; line-height: 1.6; transition: background .2s; }
body.nsa-page .geste__etapes input { width: 1.15rem; height: 1.15rem; margin-top: .25rem; accent-color: var(--rouge); }
body.nsa-page .geste__num { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--fond-2); font-family: var(--sans); font-size: .75rem; font-weight: 600; color: var(--rouge); }
body.nsa-page .geste__etapes input:checked ~ .geste__texte { color: var(--texte-doux); text-decoration: line-through; text-decoration-color: var(--cuivre); }
body.nsa-page .geste__etapes input:checked ~ .geste__num { color: var(--blanc); background: #4e6b35; }
body.nsa-page .geste__conseil { margin: 1.25rem 0 0; padding: 1rem 1.25rem; background: var(--fond-2); border-left: 3px solid var(--cuivre); line-height: 1.65; }
body.nsa-page .geste__conseil strong { display: block; margin-bottom: .25rem; font-family: var(--sans); font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cuivre-texte); }

/* ---------- Mon livre de cave ---------- */
body.nsa-page .livre { padding-top: 0; }
body.nsa-page .livre__grille { display: grid; grid-template-columns: 22rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
body.nsa-page .livre__ajout { position: sticky; top: 6rem; display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; padding: 1.5rem; background: var(--blanc); border: 1px solid var(--filet); border-top: 3px solid var(--rouge); }
body.nsa-page .livre__titre { grid-column: 1 / -1; margin: 0; font-family: var(--titre); font-size: 1.5rem; font-weight: 400; }
body.nsa-page .livre__sansjs { grid-column: 1 / -1; margin: 0; color: var(--rouge); }
body.nsa-page .livre__champ { display: grid; gap: .3rem; }
body.nsa-page .livre__champ--large { grid-column: 1 / -1; }
body.nsa-page .livre__champ span { font-family: var(--sans); font-size: .75rem; font-weight: 500; color: var(--texte-doux); }
body.nsa-page .livre__champ input { width: 100%; min-height: 2.6rem; padding: .5rem .75rem; font-family: var(--sans); font-size: .9375rem; color: var(--encre); background: var(--fond); border: 1px solid var(--filet); }
body.nsa-page .livre__champ input:focus { outline: 2px solid var(--cuivre); outline-offset: 0; }
body.nsa-page .livre__ajouter { grid-column: 1 / -1; justify-content: center; }
body.nsa-page .livre__aide { grid-column: 1 / -1; margin: 0; font-family: var(--sans); font-size: .75rem; line-height: 1.55; color: var(--texte-doux); }
body.nsa-page .livre__bilan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
body.nsa-page .livre__bilan p { margin: 0; padding: 1rem 1.25rem; background: var(--blanc); border: 1px solid var(--filet); }
body.nsa-page .livre__bilan strong { display: block; font-family: var(--titre); font-size: 2rem; font-weight: 400; line-height: 1.1; color: var(--rouge); }
body.nsa-page .livre__bilan span { font-family: var(--sans); font-size: .8125rem; color: var(--texte-doux); }
body.nsa-page .livre__filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; }
body.nsa-page .livre__filtres button { padding: .55rem 1.1rem; font-family: var(--sans); font-size: .8125rem; color: var(--encre); background: var(--blanc); border: 1px solid var(--filet); border-radius: 999px; cursor: pointer; }
body.nsa-page .livre__filtres button[aria-pressed="true"] { color: var(--blanc); background: var(--rouge); border-color: var(--rouge); }
body.nsa-page .livre__vide { margin: 1.5rem 0 0; padding: 2rem; text-align: center; color: var(--texte-doux); background: var(--fond-2); }
body.nsa-page .livre__vide[hidden], body.nsa-page .livre__actions[hidden] { display: none; }
body.nsa-page .livre__liste { margin: 1rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--filet); }
body.nsa-page .bouteille { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: .5rem 1rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--filet); }
body.nsa-page .bouteille__nom { margin: 0; font-family: var(--titre); font-size: 1.125rem; color: var(--encre); }
body.nsa-page .bouteille__details { margin: .15rem 0 0; font-family: var(--sans); font-size: .8125rem; color: var(--texte-doux); }
body.nsa-page .bouteille__details:empty { display: none; }
body.nsa-page .bouteille__etat { padding: .2rem .65rem; font-family: var(--sans); font-size: .6875rem; font-weight: 500; border-radius: 999px; white-space: nowrap; }
body.nsa-page .bouteille--maintenant .bouteille__etat { color: #3d5a2a; background: #e8efdf; }
body.nsa-page .bouteille--garder .bouteille__etat { color: #5a4a20; background: #f4ecd2; }
body.nsa-page .bouteille--passe .bouteille__etat { color: var(--rouge); background: #f7e6e1; }
body.nsa-page .bouteille__qte { display: inline-flex; align-items: center; border: 1px solid var(--filet); }
body.nsa-page .bouteille__qte button { width: 2.25rem; height: 2.25rem; font-size: 1.1rem; color: var(--rouge); background: none; border: 0; cursor: pointer; }
body.nsa-page .bouteille__qte output { min-width: 2rem; text-align: center; font-family: var(--titre); font-size: 1.125rem; }
body.nsa-page .bouteille__suppr { width: 2.25rem; height: 2.25rem; font-size: 1.25rem; color: var(--texte-doux); background: none; border: 0; cursor: pointer; }
body.nsa-page .bouteille__suppr:hover { color: var(--rouge); }
body.nsa-page .livre__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; }

@media (max-width: 1100px) {
  body.nsa-page .offrir__vins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  body.nsa-page .offrir__questions, body.nsa-page .livre__grille { grid-template-columns: minmax(0, 1fr); }
  body.nsa-page .livre__ajout { position: static; }
}
@media (max-width: 640px) {
  body.nsa-page .offrir__vins { grid-template-columns: minmax(0, 1fr); }
  body.nsa-page .livre__bilan { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  body.nsa-page .livre__bilan p { padding: .75rem; }
  body.nsa-page .livre__bilan strong { font-size: 1.5rem; }
  body.nsa-page .bouteille { grid-template-columns: minmax(0, 1fr) auto; }
  body.nsa-page .bouteille__etat { justify-self: start; }
  body.nsa-page .geste__etapes label { grid-template-columns: auto minmax(0, 1fr); }
  body.nsa-page .geste__num { display: none; }
}

@media print {
  body.nsa-page .livre__ajout, body.nsa-page .livre__filtres, body.nsa-page .livre__actions, body.nsa-page .bouteille__qte button, body.nsa-page .bouteille__suppr { display: none !important; }
  body.nsa-page .livre__grille { grid-template-columns: 1fr; }
}