/* Jouet en Règle : atelier de création pour enfants. Crème, bois, pistache ; titres en serif, texte en sans. */
:root {
  --creme: #f6efe3;
  --papier: #fffdf8;
  --encre: #2d2620;
  --encre-douce: #5c524a;
  --bois: #b4683a;
  --bois-fonce: #8f4f27;
  --pistache: #6f8f5a;
  --pistache-pale: #e3ead8;
  --rose: #e8b4a6;
  --trait: #e0d4c2;
  --ombre: 0 10px 30px rgba(60, 40, 20, 0.12);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--creme); }
body { margin: 0; font-family: var(--sans); color: var(--encre); line-height: 1.55; font-size: 17px; background: var(--creme); }
a { color: var(--bois-fonce); }
h1, h2, h3 { font-family: var(--serif); line-height: 1.15; color: var(--encre); font-weight: 600; }
h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin: 0 0 0.6em; }
h2 { font-size: 1.5rem; margin: 2em 0 0.5em; }
h3 { font-size: 1.1rem; margin: 1.4em 0 0.3em; }
main { max-width: 1120px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: 0.95rem; background: var(--papier); }
th, td { border: 1px solid var(--trait); padding: 0.5em 0.7em; text-align: left; vertical-align: top; }
th { background: var(--pistache-pale); font-weight: 600; }
pre { white-space: pre-wrap; }

/* En-tête */
.entete { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--trait); background: var(--creme); }
.entete .marque { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; color: var(--encre); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; }
.sceau { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 0.6rem; background: var(--pistache); color: var(--creme); font-size: 0.9rem; letter-spacing: 0.02em; }
.entete nav { display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; margin-left: auto; font-size: 0.95rem; }
.entete nav a { color: var(--encre-douce); text-decoration: none; padding: 0.2rem 0; border-bottom: 2px solid transparent; }
.entete nav a:hover, .entete nav a[aria-current] { color: var(--encre); border-bottom-color: var(--bois); }

/* Héros : promesse à gauche, les vrais documents à droite */
.heros { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; padding: 2rem 0 1rem; }
.surtitre { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; color: var(--pistache); font-weight: 700; margin: 0 0 0.8rem; }
.promesse { font-size: 1.08rem; color: var(--encre-douce); }
.chapo { font-size: 1.1rem; color: var(--encre-douce); }
.reassurance { font-size: 0.9rem; color: var(--encre-douce); }
.vitrine { display: grid; gap: 1.25rem; }
.papier { background: var(--papier); border: 1px solid var(--trait); border-radius: 0.6rem; box-shadow: var(--ombre); padding: 1.2rem 1.4rem; margin: 0; overflow: auto; }
.papier figcaption { font-size: 0.8rem; color: var(--pistache); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-bottom: 0.6rem; }
.vitrine .declaration { font-size: 0.72rem; line-height: 1.35; }
.vitrine .declaration h3 { font-size: 0.78rem; margin: 0.6em 0 0.15em; }
.vitrine .declaration p { margin: 0.1em 0; }
.declaration header .surtitre { color: var(--bois); font-size: 0.9rem; }
.declaration .numero { font-family: var(--serif); font-size: 1.2rem; margin: 0 0 0.6rem; }
.declaration footer { border-top: 1px dashed var(--trait); margin-top: 0.8rem; padding-top: 0.6rem; }
.etiquette { display: inline-block; max-width: 24rem; border: 2px solid var(--encre); border-radius: 0.3rem; padding: 0.8rem 1rem; background: #fff; font-size: 0.82rem; line-height: 1.35; }
.etiquette p { margin: 0.15rem 0; }
.etiquette .ce { font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 1.6rem; letter-spacing: 0.1em; margin: 0.4rem 0; }
.etiquette-figure { background: var(--pistache-pale); }
mark.trou { background: var(--rose); color: var(--encre); padding: 0 0.3em; border-radius: 0.2em; font-style: italic; }

/* Dossier */
.dossier header .surtitre { color: var(--bois); }
.dossier h1 { font-size: 1.6rem; }
.dossier h2 { font-size: 1.2rem; margin-top: 1.5em; }
.dossier .date { color: var(--encre-douce); font-size: 0.9rem; }

/* Boutons, actions, notes */
.bouton { display: inline-block; background: var(--bois); color: #fff; text-decoration: none; padding: 0.75rem 1.3rem; border-radius: 0.5rem; font-weight: 600; border: 0; font-size: 1rem; cursor: pointer; font-family: var(--sans); }
.bouton:hover { background: var(--bois-fonce); }
.bouton.secondaire { background: transparent; color: var(--bois-fonce); border: 2px solid var(--bois); padding: calc(0.75rem - 2px) calc(1.3rem - 2px); }
.bouton.secondaire:hover { background: var(--pistache-pale); }
.actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.4rem 0; }
.note { font-size: 0.88rem; color: var(--encre-douce); }
.fil { font-size: 0.85rem; color: var(--encre-douce); margin: 0 0 1rem; }

/* Étapes, cartes, offres */
.etapes { counter-reset: etape; list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.etapes li { counter-increment: etape; background: var(--papier); border: 1px solid var(--trait); border-radius: 0.6rem; padding: 1.1rem 1.1rem 1.1rem 3.2rem; position: relative; }
.etapes li::before { content: counter(etape); position: absolute; left: 0.9rem; top: 0.95rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--pistache); color: #fff; display: grid; place-items: center; font-family: var(--serif); font-weight: 700; }
.cartes { list-style: none; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cartes a { display: block; background: var(--papier); border: 1px solid var(--trait); border-left: 5px solid var(--rose); border-radius: 0.5rem; padding: 0.9rem 1rem; text-decoration: none; color: var(--encre); height: 100%; }
.cartes a:hover { border-left-color: var(--pistache); box-shadow: var(--ombre); }
.cartes strong { display: block; font-family: var(--serif); font-size: 1.05rem; margin-bottom: 0.2rem; }
.cartes span { color: var(--encre-douce); font-size: 0.9rem; }
.offres { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.offre { background: var(--papier); border: 1px solid var(--trait); border-radius: 0.7rem; padding: 1.4rem; }
.offre.principale { border-color: var(--pistache); box-shadow: var(--ombre); }
.offre h2 { margin-top: 0; }
.prix { font-family: var(--serif); font-size: 2.2rem; margin: 0.2rem 0 0.6rem; }
.prix span { font-family: var(--sans); font-size: 0.9rem; color: var(--encre-douce); display: block; }

/* Questionnaire et résultat */
.questionnaire fieldset { min-width: 0; border: 1px solid var(--trait); border-radius: 0.6rem; background: var(--papier); padding: 1rem 1.2rem; margin: 1rem 0; }
.questionnaire legend { font-family: var(--serif); font-weight: 600; padding: 0 0.4rem; }
.choix { display: block; padding: 0.35rem 0; }
.choix span { color: var(--encre-douce); font-size: 0.9rem; }
.erreurs { background: #fbe9e4; border: 1px solid var(--rose); border-radius: 0.5rem; padding: 0.8rem 1rem; }
.statut { font-size: 1.15rem; padding: 0.7rem 1rem; border-radius: 0.5rem; background: var(--pistache-pale); display: inline-block; }
.statut-puericulture { background: #fbead6; }
.statut-hors-kit, .statut-a-trancher { background: #fbe9e4; }
.suite { background: var(--pistache-pale); border-radius: 0.7rem; padding: 1.2rem 1.4rem; margin-top: 2rem; }
.suite h2 { margin-top: 0; }
.qr h2 { font-size: 1.15rem; margin-top: 1.6em; }
input[type="email"], input[type="text"], input[type="date"], input[type="number"], select, textarea { font: inherit; padding: 0.5rem 0.7rem; border: 1px solid var(--trait); border-radius: 0.4rem; background: #fff; max-width: 100%; }
label { display: inline-block; margin: 0.2rem 0.4rem 0.2rem 0; }
textarea { width: 100%; box-sizing: border-box; }
td form { margin: 0; }

/* Pied */
.pied { border-top: 1px solid var(--trait); padding: 1.5rem 1.25rem 3rem; font-size: 0.85rem; color: var(--encre-douce); max-width: 1120px; margin: 0 auto; }

@media (max-width: 820px) {
  .heros { grid-template-columns: 1fr; gap: 1.5rem; }
  .entete nav { margin-left: 0; }
  main { padding: 1rem 1rem 3rem; }
  main table { display: block; overflow-x: auto; }
  label { max-width: 100%; }
}
@media print {
  .entete, .pied, .actions, nav, .fil, .suite { display: none; }
  body { background: #fff; font-size: 11pt; }
  .papier { box-shadow: none; border: 0; padding: 0; page-break-before: always; }
  .papier.document { page-break-before: auto; }
  .sans-impression { display: none; }
  mark.trou { background: #eee; }
}