/* Le dossier — styles propres à la page (site.css reste intact). À reporter dans site.css si la page est validée :
   .visionneuse (feuilleteur), .liste-filets, .lignes-pass, .trois-pages, .couverture-tete. */

/* --- Bloc 1 : en-tête sur bleu clair, la couverture à côté du texte --- */
.tete-dossier { padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.tete-dossier .grille { align-items: center; }
.nb { white-space: nowrap; }
.tete-dossier h1 { max-width: 19ch; }
.tete-dossier .chapo { max-width: 36rem; font-weight: 500; }
.tete-dossier .champ-aide { color: var(--color-encre); }
.tete-dossier .champ-aide.est-erreur { color: var(--color-erreur); }
.tete-dossier .champ-aide.est-maquette { color: var(--color-bleu-nuit); }
.tete-dossier .champ { padding: .4rem; background: var(--color-blanc); }
.couverture-tete { justify-self: center; width: min(19rem, 62%); display: grid; gap: .9rem; }
.couverture-tete img { width: 100%; height: auto; box-shadow: var(--shadow-page); rotate: 2deg; }
.couverture-tete figcaption { color: var(--color-encre); }
@media (min-width: 900px) { .tete-dossier .grille { grid-template-columns: 7fr 5fr; } .couverture-tete { width: min(24rem, 78%); } }

/* --- Bloc 2 : le feuilleteur --- */
.feuilleteur .grille { align-items: start; }
.pages-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.pages-liste img { width: 100%; height: auto; box-shadow: var(--shadow-papier); background: var(--color-blanc); }
.pages-liste figcaption { margin-top: .5rem; font-size: var(--text-petit); font-weight: 600; }
@media (min-width: 640px) { .pages-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .feuilleteur .grille { grid-template-columns: 4fr 8fr; }
  .tete-feuilleteur { position: sticky; top: 6.5rem; }
}
/* La visionneuse construite par dossier.js : la liste disparaît, la page en grand et les vignettes la remplacent. */
.visionneuse.est-active .pages-liste { display: none; }
.vis-ui { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "page page page" "prev pos next" "agr agr agr" "vign vign vign"; gap: .9rem; align-items: center; }
.vis-page { grid-area: page; justify-self: center; width: min(100%, 30rem, calc((calc(100 * var(--svh, 1svh)) - 12rem) * .7071)); aspect-ratio: 1240 / 1754; background: var(--color-blanc); box-shadow: var(--shadow-page); cursor: zoom-in; }
.vis-page img { width: 100%; height: 100%; object-fit: contain; }
.vis-prev { grid-area: prev; } .vis-next { grid-area: next; }
.vis-btn { display: grid; place-items: center; width: 3rem; height: 3rem; background: var(--color-encre); color: var(--color-blanc); transition: background-color var(--duree-courte); }
.vis-btn:hover { background: var(--color-bleu); }
.vis-btn:disabled { background: var(--color-galet-clair); color: var(--color-encre); cursor: default; }
.vis-btn svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vis-prev svg { transform: scaleX(-1); }
.vis-position { grid-area: pos; text-align: center; font-weight: 700; line-height: 1.3; }
.vis-position span { display: block; font-weight: 500; font-size: var(--text-petit); }
.vis-agrandir { grid-area: agr; justify-self: center; min-height: 2.75rem; }
.vis-vignettes { grid-area: vign; display: flex; gap: .6rem; margin-inline: calc(-1 * var(--spacing-gouttiere)); padding: .5rem var(--spacing-gouttiere) .9rem; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: thin; }
.vis-vignettes button { flex: none; width: 3.5rem; min-height: 2.75rem; background: var(--color-blanc); box-shadow: var(--shadow-papier); scroll-snap-align: center; transition: transform var(--duree-courte); }
.vis-vignettes button:hover { transform: translateY(-3px); }
.vis-vignettes button[aria-current="true"] { box-shadow: 0 0 0 3px var(--color-bleu); }
.vis-vignettes img { width: 100%; height: auto; }
@media (min-width: 768px) {
  .vis-ui { grid-template-areas: "prev page next" ". pos ." ". agr ." "vign vign vign"; column-gap: 1.2rem; }
  .vis-prev, .vis-next { align-self: center; }
  .vis-vignettes { flex-wrap: wrap; margin-inline: 0; padding-inline: .3rem; overflow: visible; justify-content: center; gap: .5rem; }
  .vis-vignettes button { width: calc((100% - 9 * .5rem) / 10); min-width: 2.5rem; }
}
@media (min-width: 768px) and (max-width: 899px) { .vis-ui { column-gap: .8rem; } }
/* La vue agrandie */
.vis-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: var(--color-encre); color: var(--color-blanc); overflow: hidden; }
.vis-dialog:not([open]) { display: none; }
.vis-dialog::backdrop { background: var(--color-encre); }
.vis-d-corps { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "fermer fermer fermer" "page page page" "prev pos next"; align-items: center; justify-items: center; gap: .8rem; height: 100%; padding: .8rem var(--spacing-gouttiere) calc(.8rem + env(safe-area-inset-bottom, 0px)); grid-template-rows: auto minmax(0, 1fr) auto; }
.vis-d-fermer { grid-area: fermer; justify-self: end; min-height: 2.75rem; min-width: 2.75rem; padding: 0 1.1rem; background: var(--color-jaune); color: var(--color-encre); font-weight: 700; }
.vis-d-fermer:hover { background: var(--color-blanc); }
.vis-d-page { grid-area: page; min-height: 0; height: 100%; display: grid; place-items: center; }
.vis-d-page img { max-height: calc(100dvh - 11.5rem); width: auto; max-width: 100%; height: auto; object-fit: contain; background: var(--color-blanc); }
.vis-dialog .vis-position { grid-area: pos; }
.vis-dialog .vis-btn { background: var(--color-jaune); color: var(--color-encre); }
.vis-dialog .vis-btn:hover { background: var(--color-blanc); }
.vis-dialog .vis-btn:disabled { background: var(--color-galet); }
.vis-dialog :focus-visible { outline-color: var(--color-jaune); }
@media (min-width: 768px) { .vis-d-corps { grid-template-areas: "fermer fermer fermer" "prev page next" ". pos ."; } }

/* --- Bloc 3 : les six chapitres --- */
.chapitres .grille { align-items: start; }
.chapitres .pile { max-width: 52rem; }
.chapitres .liste-chapitres { max-width: 52rem; }
.trois-pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; width: min(100%, 24rem); }
.trois-pages span { display: block; }
.trois-pages img { width: 100%; height: auto; box-shadow: var(--shadow-papier); }
.trois-pages span:nth-child(1) { rotate: -2deg; } .trois-pages span:nth-child(2) { translate: 0 .9rem; } .trois-pages span:nth-child(3) { rotate: 2deg; }
.liste-chapitres summary { grid-template-columns: auto minmax(0, 1fr) auto; font-size: var(--text-t3); font-weight: 700; letter-spacing: -0.02em; }
.liste-chapitres .num { min-width: 1.6rem; font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; color: var(--color-bleu); }
.liste-chapitres [data-accordion-body] { max-width: 42rem; padding-left: 3.1rem; }
.sous-question { max-width: 42rem; margin-top: 1rem; padding: 1.4rem 0 0 1.2rem; border-left: 4px solid var(--color-bleu); display: grid; gap: .8rem; }
.sous-question h3 { font-size: var(--text-chapo); }
@media (min-width: 900px) {
  .chapitres .grille { grid-template-columns: minmax(0, 1fr); }
  .chapitres .pile { max-width: none; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "titre pages" "chapo pages" "liste pages" "sous pages"; column-gap: clamp(2rem, 5vw, 5.5rem); align-items: start; }
  .chapitres h2 { grid-area: titre; } .chapitres .chapo { grid-area: chapo; }
  .chapitres .trois-pages { grid-area: pages; justify-self: end; width: min(100%, 26rem); position: sticky; top: 7rem; }
  .chapitres .liste-chapitres { grid-area: liste; width: 100%; } .chapitres .sous-question { grid-area: sous; }
  .liste-chapitres .plus { display: none; }
  .liste-chapitres summary { cursor: default; grid-template-columns: auto minmax(0, 1fr); padding-bottom: .4rem; }
  .liste-chapitres [data-accordion-body] { padding-bottom: 1.3rem; }
}

/* --- Bloc 4 : l'offre d'achat, sur jaune pâle --- */
.page-offre { position: relative; justify-self: center; width: min(100%, 24rem); }
.page-offre img { width: 100%; height: auto; box-shadow: var(--shadow-page); background: var(--color-blanc); }   /* droite : un aperçu ne penche pas */
/* La note se pose sous la page, jamais sur son texte. */
.page-offre { display: grid; gap: 1rem; justify-items: start; }
.page-offre > picture { justify-self: stretch; }   /* sinon l’image paresseuse vaut 0 px de haut avant son chargement, et la page saute quand elle arrive */
.page-offre .note { font-size: clamp(.875rem, 1.25vw, 1.125rem); }
.offre .chapo { max-width: 38rem; }
.intro-liste { font-size: var(--text-chapo); }
.liste-filets { width: 100%; max-width: 38rem; border-top: 2px solid currentColor; }
.liste-filets li { padding-block: .8rem; border-bottom: 2px solid currentColor; font-weight: 600; }
@media (min-width: 900px) { .offre .grille { grid-template-columns: 5fr 7fr; } .page-offre { width: min(100%, 28rem); } }

/* --- Bloc 5 : les limites, sur bleu stylo --- */
.limites-dossier .grille { align-items: start; }
@media (min-width: 900px) { .limites-dossier .grille { grid-template-columns: 6fr 5fr; } }

/* --- Bloc 6 : les Pass en trois lignes --- */
.lignes-pass { margin-block: clamp(2rem, 4vw, 3rem) 2rem; border-top: 2px solid var(--color-encre); }
.lignes-pass li { display: grid; gap: .5rem 2rem; align-items: baseline; padding-block: 1.4rem; border-bottom: 2px solid var(--color-encre); }
.lignes-pass .tarif { font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; font-size: clamp(2.6rem, 5vw, 4rem); letter-spacing: -0.05em; line-height: .95; }
.lignes-pass p:last-child { max-width: 36rem; }
@media (min-width: 900px) { .lignes-pass li { grid-template-columns: 3fr 2fr 6fr; } }

/* Bloc 3 bis : le calcul de l'offre. Une cascade : du prix affiché à la première offre, poste par poste.
   Chaque barre va de --bas à --haut sur l'axe --min → --max ; en lignes sur téléphone, en colonnes dès 900 px. */
.calcul .conteneur { display: grid; gap: var(--spacing-12); }
.calcul-tete h2 { max-width: 22ch; }
.cascade-fig { margin: 0; }
.cascade-fig figcaption { margin-top: var(--spacing-6); max-width: var(--container-texte); font-size: var(--text-petit); color: var(--p2); }
.cascade { --e: calc(var(--max) - var(--min)); list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-2); }
.cascade li { display: grid; grid-template-columns: 7.4rem minmax(0, 1fr); align-items: center; gap: var(--spacing-3); }
.c-nom { font-size: var(--text-petit); font-weight: 600; line-height: 1.2; }
.c-zone { position: relative; height: 2.25rem; }
.c-b { position: absolute; top: 0; bottom: 0; left: calc((var(--bas) - var(--min)) / var(--e) * 100%); width: calc((var(--haut) - var(--bas)) / var(--e) * 100%); background: var(--color-bleu-clair); transform-origin: 0 50%; }
.c-val { position: absolute; top: 50%; left: calc((var(--haut) - var(--min)) / var(--e) * 100% + .5rem); translate: 0 -50%; font-family: var(--font-titre); font-stretch: 112%; font-weight: 800; font-size: var(--text-petit); letter-spacing: -0.02em; white-space: nowrap; }
.c-total .c-b { background: var(--color-blanc); }
.c-plus .c-b { background: none; box-shadow: inset 0 0 0 2px var(--color-blanc); }
.c-offre .c-b { background: var(--color-jaune); }
.c-offre .c-nom { color: var(--color-jaune); font-weight: 800; }
.c-total .c-val, .c-dans .c-val { left: calc((var(--bas) - var(--min)) / var(--e) * 100% + .6rem); color: var(--color-encre); }
.c-offre .c-val { color: var(--color-jaune); }
.cascade.attend .c-b { transform: scaleX(0); }
.cascade.attend .c-val { opacity: 0; }
.cascade.attend.vu .c-b { transform: none; transition: transform var(--duree) var(--ease-entree) calc(var(--i) * 90ms); }
.cascade.attend.vu .c-val { opacity: 1; transition: opacity var(--duree-courte) linear calc(var(--i) * 90ms + 250ms); }
.calcul-chiffres { display: grid; gap: var(--spacing-6); margin: 0; padding: 0; list-style: none; }
.calcul-chiffres li { padding-top: var(--spacing-4); border-top: 2px solid var(--pt); font-weight: 500; }
.calcul-chiffres b { display: block; margin-bottom: var(--spacing-2); font-family: var(--font-titre); font-stretch: 112%; font-weight: 800; font-size: var(--text-t2); letter-spacing: var(--tracking-titre); line-height: 1; color: var(--pa); }
@media (min-width: 768px) { .calcul-chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-colonnes); } }
@media (min-width: 900px) {
  .cascade { grid-template-columns: repeat(11, minmax(0, 1fr)); gap: var(--spacing-2); }
  .cascade li { grid-template-columns: none; grid-template-rows: clamp(16rem, calc(44 * var(--svh, 1svh)), 24rem) auto; gap: 0; align-items: stretch; }
  .c-nom { order: 2; min-height: 3.6em; padding-top: var(--spacing-3); border-top: 2px solid var(--pt); font-size: var(--text-mini); hyphens: manual; }
  .c-zone { height: auto; }
  .c-b { top: auto; left: 0; width: 100%; bottom: calc((var(--bas) - var(--min)) / var(--e) * 100%); height: calc((var(--haut) - var(--bas)) / var(--e) * 100%); transform-origin: 50% 100%; }
  .c-val, .c-total .c-val, .c-dans .c-val { top: auto; left: 0; translate: none; bottom: calc((var(--haut) - var(--min)) / var(--e) * 100% + .45rem); color: inherit; font-size: var(--text-interface); }
  .c-moins .c-val { bottom: auto; top: calc(100% - (var(--bas) - var(--min)) / var(--e) * 100% + .45rem); }
  .c-offre .c-val { color: var(--color-jaune); font-size: var(--text-chapo); }
  .cascade.attend .c-b { transform: scaleY(0); }
}

/* Le dossier, aussi en ligne dans votre espace */
.espace-onglets { display: grid; gap: var(--spacing-4); margin: 0; padding: 0; list-style: none; }
.espace-onglets li { padding-top: var(--spacing-3); border-top: 2px solid var(--pt); font-weight: 500; line-height: 1.45; }
.espace-onglets b { display: block; margin-bottom: .2rem; font-family: var(--font-titre); font-stretch: 112%; font-weight: 800; font-size: var(--text-t3, 1.25rem); }
.espace-capture { margin: 0; }
.espace-capture img { display: block; width: 100%; height: auto; outline: 2px solid var(--color-encre); box-shadow: 0 1.2rem 2.4rem rgb(21 20 18 / .18); }
.espace-capture figcaption { margin-top: var(--spacing-3); font-size: var(--text-petit); font-weight: 600; }
@media (min-width: 900px) { .espace-ligne .grille { grid-template-columns: 5fr 7fr; } }