/* Negozimo — La méthode (maquette). Styles propres à la page ; site.css reste intact. */

/* Bloc 1 : titre à gauche, la page « ventes » du dossier à droite */
#hero .grille { align-items: end; }
#hero .l { display: block; }
.page-vente { display: grid; gap: .7rem; justify-items: start; max-width: 22rem; }
.page-vente img { display: block; width: 100%; height: auto; box-shadow: var(--shadow-page); background: var(--color-blanc); }
.page-vente .exemple { color: var(--p2); }
@media (min-width: 900px) {
  #hero .grille { grid-template-columns: 7fr 5fr; }
  .page-vente { justify-self: end; max-width: 21rem; }
}

/* En-tête de section de lecture : titre, puis phrase à ~65 caractères */
.tete-lecture { display: grid; gap: clamp(1rem, 2.4vw, 1.5rem); max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.tete-lecture .chapo { max-width: 42rem; }

/* Bloc 2 : tableau des sources */
.tableau table { width: 100%; border-collapse: collapse; font-size: var(--text-texte); text-align: left; }
.tableau thead th { padding: .8rem 1rem .8rem 0; font-size: var(--text-petit); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--p2); border-bottom: 3px solid var(--pt); }
.tableau tbody th, .tableau tbody td { padding: 1.2rem 1rem 1.2rem 0; vertical-align: top; border-bottom: 1px solid var(--color-trait); line-height: 1.45; }
.tableau tbody th { font-weight: 700; width: 24%; }
.tableau .pub { font-weight: 700; white-space: nowrap; }
.tableau .pub.oui { color: var(--pa); }
.tableau .pub.non { text-decoration: underline wavy var(--color-galet) 1.5px; text-underline-offset: .3em; }
@media (max-width: 767px) {
  .tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tableau table, .tableau tbody, .tableau tr, .tableau th, .tableau td { display: block; width: auto; }
  .tableau tbody { display: grid; gap: 1rem; }
  .tableau tr { padding: 1.1rem 1.1rem .4rem; border: 2px solid var(--pt); background: var(--pf); }
  .tableau tbody th, .tableau tbody td { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: .8rem; padding: .55rem 0; border-bottom: 1px solid var(--color-trait); width: auto; }
  .tableau tbody th { font-size: 1.125rem; }
  .tableau tbody tr > :last-child { border-bottom: 0; }
  .tableau tbody th::before, .tableau tbody td::before { content: attr(data-label); font-size: var(--text-petit); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--p2); padding-top: .2em; }
}

/* Bloc 3 : quatre cases, une par étape */
.cases { display: grid; gap: 1rem; counter-reset: none; }
.cases li { display: grid; align-content: start; gap: .7rem; padding: 1.5rem 1.4rem 1.6rem; background: var(--pf); border-top: 4px solid var(--pt); }
.cases .num { font-family: var(--font-titre); font-weight: 800; font-stretch: 125%; font-size: 3rem; line-height: 1; color: var(--pa); }
.cases h3 { font-size: var(--text-t3); }
.cases p { font-size: var(--text-texte); line-height: 1.5; }
@media (min-width: 640px) { .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cases { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.suite-calcul { display: grid; gap: .8rem; max-width: 42rem; margin-top: clamp(2rem, 4vw, 3rem); line-height: 1.5; }

/* Bloc 4 */
.rue .grille { align-items: center; }
.rue .extrait { display: grid; gap: .7rem; }
.rue .extrait img { display: block; width: 100%; height: auto; box-shadow: var(--shadow-page); }
@media (min-width: 900px) { .rue .grille { grid-template-columns: 5fr 7fr; } }

/* Bloc 5 */
.angles-liste { display: grid; gap: 1.6rem; }
.angles-liste li { display: grid; align-content: start; gap: .6rem; padding-top: 1.1rem; border-top: 4px solid var(--pt); }
.angles-liste h3 { font-size: var(--text-t3); }
.angles-liste p { line-height: 1.5; max-width: 30rem; }
@media (min-width: 800px) { .angles-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.6rem, 4vw, 3.5rem); } }

/* Bloc 6 */
.sources-liens { display: grid; gap: 2rem; }
.sources-liens li { display: grid; align-content: start; justify-items: start; gap: .7rem; padding-top: 1.1rem; border-top: 4px solid var(--pt); }
.sources-liens h3 { font-size: var(--text-t3); }
.sources-liens p { color: var(--p2); line-height: 1.5; }
@media (min-width: 800px) { .sources-liens { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.6rem, 4vw, 3.5rem); } }

/* Le bouton du bloc 4 a un libellé long : il passe à la ligne sur téléphone */
.rue .bouton { white-space: normal; text-align: left; justify-content: flex-start; }