/* Notice d’une vitrine : le cartel déplié. Un grand papier os vissé sur le mur bleu de Prusse ;
   à gauche le récit « Comment ça marche », à droite la fiche « Prendre en main » épinglée. */

.notice { --papier-ombre: #E4DAC6; --filet: rgb(27 26 23 / .16); }

/* ——— En-tête sur le mur ——— */

.n-tete {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.5rem, 4vw, 3rem) var(--marge) clamp(2.5rem, 5vw, 4rem);
  overflow-x: clip;
}

.n-retour {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 650; font-stretch: 110%; letter-spacing: .06em; text-transform: uppercase; font-size: .82rem;
  text-decoration: none; color: var(--laiton-clair);
  padding-block: .4rem;
  border-bottom: 1px solid currentColor;
}
.n-retour svg { transition: transform .5s var(--sortie); }
.n-retour:hover svg { transform: translateX(-3px); }

.n-titre {
  margin: 0 0 1rem;
  font-weight: 600;
  font-stretch: 125%;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--laiton);
  text-shadow: 0 1px 0 rgb(0 0 0 / .3);
  text-wrap: balance;
}

.n-chapeau {
  margin: 0 0 1.75rem;
  max-width: 34ch;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.32;
  font-weight: 500;
  font-stretch: 96%;
  text-wrap: pretty;
}

/* Plaque de laiton : l’action principale, entrer dans la maquette. */
.n-ouvrir {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 48px;
  padding: .8rem 1.25rem .85rem;
  border-radius: 2px;
  background: var(--laiton);
  color: var(--encre);
  font-weight: 700; font-stretch: 108%; letter-spacing: .03em;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 var(--laiton-clair),
    inset 0 -2px 0 var(--laiton-sombre),
    0 10px 20px -10px rgb(0 0 0 / .6);
  transition: background-color .4s var(--sortie);
}
.n-ouvrir:hover { background: var(--laiton-clair); }
.n-ouvrir svg { transition: transform .5s var(--sortie); }
.n-ouvrir:hover svg { transform: translateX(4px); }

.n-tete .piece { width: min(100%, 28rem); justify-self: end; }

/* ——— Le cartel déplié ——— */

.n-feuille {
  position: relative;
  z-index: 1;
  margin: 0 var(--marge) clamp(3rem, 6vw, 5rem);
  padding: clamp(1.75rem, 4.5vw, 4rem) clamp(1.25rem, 4.5vw, 4rem);
  background-color: var(--os);
  background-image:
    radial-gradient(circle at 14px 14px, var(--laiton) 0 3px, var(--laiton-sombre) 3.2px 4px, transparent 4.2px),
    radial-gradient(circle at calc(100% - 14px) 14px, var(--laiton) 0 3px, var(--laiton-sombre) 3.2px 4px, transparent 4.2px),
    radial-gradient(circle at 14px calc(100% - 14px), var(--laiton) 0 3px, var(--laiton-sombre) 3.2px 4px, transparent 4.2px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), var(--laiton) 0 3px, var(--laiton-sombre) 3.2px 4px, transparent 4.2px);
  color: var(--encre);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .55),
    0 2px 4px rgb(0 0 0 / .25),
    0 30px 60px -30px rgb(0 0 0 / .7);
}
.n-feuille ::selection { background: var(--laiton-sombre); color: var(--os); }
.n-feuille a { color: var(--encre); text-decoration-color: var(--laiton-sombre); }
.n-feuille a:focus-visible { outline-color: var(--laiton-sombre); }

.n-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(17rem, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* Titres de la feuille : capitales de plaque, laiton terni sur papier. */
.n-feuille h2 {
  margin: 0 0 1.25rem;
  font-weight: 650;
  font-stretch: 125%;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--laiton-sombre);
}

.n-principes > p, .n-chap p, .n-chap li { font-size: 1.0625rem; line-height: 1.65; }
.n-principes > p { margin: 0 0 2rem; max-width: 62ch; }

.n-chap { padding-top: 1.75rem; margin-top: 1.75rem; border-top: 1px solid var(--filet); }
.n-chap:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.n-chap h3 {
  margin: 0 0 .5rem;
  font-size: 1.28rem; line-height: 1.3;
  font-weight: 720; font-stretch: 102%;
  letter-spacing: -.005em;
  text-wrap: balance;
}
.n-chap > p { margin: 0 0 .8rem; max-width: 62ch; }

/* « Pour aller plus loin » : un volet de papier plus soutenu qui se déplie. */
.n-plus {
  margin-top: .9rem;
  max-width: 62ch;
  background: var(--papier-ombre);
  border-radius: 2px;
}
.n-plus summary {
  display: flex; align-items: center; gap: .6rem;
  min-height: 44px;
  padding: .55rem .95rem;
  cursor: pointer;
  list-style: none;
  font-weight: 650; font-stretch: 106%; letter-spacing: .02em; font-size: .9rem;
}
.n-plus summary::-webkit-details-marker { display: none; }
.n-plus summary::before {
  content: ""; flex: none;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--laiton);
  box-shadow: inset 0 0 0 1.5px var(--laiton-sombre);
}
.n-plus summary > span { flex: 1; }
.n-terme { font-weight: 450; letter-spacing: 0; white-space: nowrap; }
.n-plus summary svg { margin-left: auto; transition: transform .45s var(--sortie); }
.n-plus[open] summary svg { transform: rotate(180deg); }
.n-plus summary:focus-visible { outline: 2px solid var(--laiton-sombre); outline-offset: 2px; }
.n-plus > div { padding: .35rem .95rem 1rem; }
.n-plus p, .n-plus li { font-size: .9rem; line-height: 1.6; }
.n-plus p { margin: 0 0 .7rem; }
.n-plus ul { margin: 0 0 .7rem; padding-left: 1.15rem; }
.n-plus li { margin-bottom: .3rem; }
.n-plus li::marker { color: var(--laiton-sombre); }

.formule { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }

.n-principes > .n-reserve {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--filet);
  font-size: .9rem;
  color: var(--encre);
}

.n-credits { margin-top: 1.75rem; }
.n-credits h3 { margin: 0 0 .5rem; font-size: 1.06rem; font-weight: 720; }
.n-credits p, .n-credits li { font-size: .9rem; line-height: 1.5; }
.n-credits p { margin: 0 0 .6rem; max-width: 62ch; }
.n-credits ul { margin: 0 0 .6rem; padding-left: 1.1rem; }
.n-credits li::marker { color: var(--laiton-sombre); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Les volets se déplient au lieu de s’ouvrir d’un coup, là où le navigateur le permet. */
@supports selector(::details-content) {
  .notice { interpolate-size: allow-keywords; }
  .n-plus::details-content, .n-groupe::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size .55s var(--sortie), content-visibility .55s allow-discrete;
  }
  .n-plus[open]::details-content, .n-groupe[open]::details-content { block-size: auto; }
}

/* ——— La fiche « Prendre en main », épinglée à côté du récit ——— */

.n-commandes {
  position: sticky;
  top: var(--colle, 1.25rem);
  padding: 0 0 0 clamp(1.25rem, 3vw, 2.5rem);
  border-left: 1px solid var(--filet);
}
.n-commandes h2 { margin-bottom: 1rem; }
.n-commandes h3 {
  margin: 1.5rem 0 .55rem;
  font-size: 1.12rem; font-weight: 720; font-stretch: 102%;
}
.n-commandes h3:first-of-type { margin-top: 0; }
.n-commandes p, .n-commandes li, .n-commandes dd, .n-commandes td, .n-commandes th { font-size: .9rem; line-height: 1.5; }
.n-commandes p { margin: 0 0 .7rem; }
.n-commandes ul { margin: 0 0 .7rem; padding-left: 1.1rem; }
.n-commandes li { margin-bottom: .3rem; }
.n-commandes li::marker { color: var(--laiton-sombre); }

.n-groupe summary {
  display: flex; align-items: center; gap: .5rem;
  min-height: 44px;
  margin-top: .6rem;
  cursor: pointer; list-style: none;
}
.n-groupe summary::-webkit-details-marker { display: none; }
.n-groupe summary h3 { margin: 0; }
.n-groupe summary svg { margin-left: auto; transition: transform .45s var(--sortie); }
.n-groupe[open] summary svg { transform: rotate(180deg); }
.n-groupe summary:focus-visible { outline: 2px solid var(--laiton-sombre); outline-offset: 2px; }
.n-groupe > div { padding-bottom: .4rem; }

.n-gestes { width: 100%; border-collapse: collapse; margin-bottom: .4rem; }
.n-gestes th, .n-gestes td { text-align: left; padding: .4rem .5rem .4rem 0; vertical-align: top; border-top: 1px solid var(--filet); }
.n-gestes thead th { border-top: 0; font-weight: 650; font-stretch: 106%; padding-top: 0; }
.n-gestes tbody th { font-weight: 650; }

.n-cmd { margin: 0; }
.n-cmd > div { padding: .5rem 0; border-top: 1px solid var(--filet); }
.n-cmd > div:first-child { border-top: 0; padding-top: 0; }
.n-cmd dt { font-weight: 680; font-size: .9rem; line-height: 1.35; display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.n-cmd dd { margin: .15rem 0 0; }

kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.55em; padding: .08em .38em;
  border-radius: 3px;
  background: var(--encre); color: var(--os);
  font: 650 .76em/1.3 "Archivo", system-ui, sans-serif; font-stretch: 92%;
}

.n-commandes .n-ouvrir { margin-top: 1.1rem; width: 100%; justify-content: center; }

/* ——— Les autres notices ——— */

.n-autres { padding: 0 var(--marge) clamp(3rem, 6vw, 5rem); }
.n-autres h2 {
  margin: 0 0 1rem;
  font-weight: 580; font-stretch: 125%; text-transform: uppercase; letter-spacing: .085em;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem); color: var(--laiton);
}
.n-autres ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem 2rem; }
.n-autres a { color: var(--os); font-weight: 600; text-decoration-color: var(--laiton); }
.n-autres a:hover { color: var(--laiton-clair); }

/* Barre fixe du téléphone : la maquette reste à un pouce. */
.n-barre { display: none; }

/* ——— Tablette et téléphone ——— */

@media (max-width: 900px) {
  .n-tete { grid-template-columns: 1fr; gap: 1.75rem; }
  .n-tete .piece { justify-self: stretch; width: 100%; }
  .n-retour { margin-bottom: 1.25rem; }

  .n-feuille { margin-inline: .5rem; }
  .n-grille { grid-template-columns: 1fr; }
  /* La prise en main d’abord : on la lit avant d’ouvrir la maquette. */
  .n-commandes { order: -1; position: static;
    padding: 0 0 2rem; border-left: 0; border-bottom: 1px solid var(--filet); }
  .n-commandes .n-ouvrir { display: none; }

  .notice { padding-bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
  .n-barre {
    display: flex; justify-content: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background: rgb(15 35 56 / .94);
    box-shadow: 0 -1px 0 rgb(199 154 59 / .35), 0 -12px 24px -12px rgb(0 0 0 / .6);
    transform: translateY(110%);
    opacity: 0;
    transition: transform .5s var(--sortie), opacity .3s var(--sortie);
  }
  .n-barre.visible { transform: none; opacity: 1; }
  .n-barre .n-ouvrir { width: min(100%, 26rem); justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .n-plus summary svg, .n-groupe summary svg, .n-ouvrir, .n-ouvrir svg, .n-retour svg, .n-barre { transition: none; }
  .n-plus::details-content, .n-groupe::details-content { transition: none; }
}