/* BEC — page Produit. S'appuie sur site.css (système validé de l'accueil) sans le modifier :
   mêmes jetons, mêmes fragments, même mouvement. Seules les compositions propres à la page sont ici.
   Ordre : héros, questionnaire, dossier probatoire, le dossier en chiffres (bleu), la descente
   (du dossier entier à la source), ce que vous recevez. Mouvement : produit.js et reveal de site.js. */

/* ----------------------------------------------------- Éléments communs de la page */
.p-shot { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-frame); background: #F7F8FA; }
.p-shot img { width: 100%; height: auto; }
.p-tour__main figcaption {
  margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--ink-faint);
}

/* panneaux superposés : la hauteur reste celle du plus grand, aucun saut de page au changement */
.p-stack { display: grid; }
.p-stack > .p-pane { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0s linear 220ms, visibility 0s linear 220ms; }
.p-stack > .p-pane.is-active { z-index: 1; opacity: 1; visibility: visible; transition: opacity 200ms var(--ease), visibility 0s; }
.p-pane:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 4px; border-radius: var(--r-md); }

.p-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.p-tab {
  display: inline-grid; gap: 1px; padding: 9px 16px; border-radius: 999px; text-align: left;
  background: var(--white); color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.3;
  box-shadow: inset 0 0 0 1px var(--border-strong), 0 2px 6px -3px rgba(17, 19, 24, 0.12);
  transition: background-color 180ms var(--ease), color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.p-tab[aria-selected="true"] { background: var(--cobalt); color: var(--white); box-shadow: 0 8px 18px -10px rgba(49, 87, 229, 0.75); }
.p-tab:not([aria-selected="true"]):hover { color: var(--cobalt); box-shadow: inset 0 0 0 1px var(--cobalt-line), 0 6px 14px -8px rgba(49, 87, 229, 0.45); }

/* identifiants : jamais coupés en deux */
.frag__head .mono { white-space: nowrap; }

/* repères numérotés posés sur une capture */
.p-marker {
  position: absolute; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; translate: -50% -50%;
  border-radius: 50%; background: var(--cobalt); color: var(--white); font-size: 12.5px; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 4px rgba(49, 87, 229, 0.2), 0 4px 10px -4px rgba(17, 19, 24, 0.4);
}
.p-marker--static { position: static; translate: none; flex-shrink: 0; width: 22px; height: 22px; font-size: 11.5px; box-shadow: none; }

/* le panneau : même fond que la scène de l'accueil et la séquence de Méthode */
.p-panel, .pd-stage, .pd-fig {
  border-radius: 22px; background: #E8EDF5 url("/assets/img/accueil/fond-scene@2x.webp") center 30% / cover no-repeat;
  background-image: image-set(url("/assets/img/accueil/fond-scene.webp") 1x, url("/assets/img/accueil/fond-scene@2x.webp") 2x);
  box-shadow: 0 1px 2px rgba(17, 19, 24, 0.06), 0 40px 80px -48px rgba(17, 19, 24, 0.45);
}
.p-panel { position: relative; padding: clamp(18px, 2.2vw, 30px); }
.p-panel .p-crop--view { border: 0; box-shadow: 0 0 0 1px rgba(17, 19, 24, 0.06), 0 28px 60px -28px rgba(17, 19, 24, 0.5); }

/* détail d'une capture réelle (même image, recadrée) */
.p-crop { position: relative; aspect-ratio: var(--cw) / var(--ch); overflow: hidden; border-radius: 12px; background: var(--white); border: 1px solid var(--border); box-shadow: var(--shadow-frag); }
.p-crop img { position: absolute; max-width: none; height: auto; width: calc(var(--iw) / var(--cw) * 100%); left: calc(var(--x) / var(--cw) * -100%); top: calc(var(--y) / var(--ch) * -100%); }
.p-crop--view { border-radius: var(--r-lg); box-shadow: var(--shadow-frame); background: #F5F6F8; }

/* ---------------------------------------------------------------- 1. Hero */
.p-hero .display.p-hero__title { font-size: clamp(2.45rem, 1rem + 3.2vw, 3.9rem); max-width: 11em; }
/* Le livrable : la vue exécutive réelle, puis un domaine et un constat posés dessous
   (vue d'ensemble → domaine → point, comme dans la cartographie). Tout part du haut ;
   la colonne du livrable prend plus de place que sur l'accueil. */
.p-hero__grid { align-items: start; }
/* le texte prend la moitié ; la vue réelle, recadrée plus haute que large, l'autre moitié */
@media (min-width: 1101px) { .p-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.p-hero .hero__copy { padding-top: clamp(8px, 2vw, 32px); }
.p-result { position: relative; width: 100%; justify-self: end; }
/* fragments du héros un peu plus grands que dans le reste de la page */
.p-result .frag { font-size: 15px; }
.p-result .frag__head { padding: 15px 20px 0; font-size: 11px; }
.p-result .frag__head .mono { font-size: 11.5px; }
.p-result .frag__body { padding: 12px 20px 20px; }
.p-result .t-domain__label { font-size: 15px; margin-bottom: 14px; }
.p-result .t-domain__counts li { font-size: 13.5px; }
.p-result .t-domain__foot { font-size: 11.5px; }
.p-result .domain-line { font-size: 12px; }
.p-result .t-finding__title { font-size: 18.5px; }
.p-result .state { font-size: 14px; }
.p-result .state-note { font-size: 13px; }
.p-result__frags { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr); gap: 28px; align-items: start; margin-top: 36px; padding-left: 6%; }
/* chaque encadré garde son espace : aucun ne recouvre la vue, le constat est simplement décalé */
.p-result__finding { margin-top: 64px; }
.p-result__law { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 14px; line-height: 1.45; font-weight: 550; }
.p-result__law .small-label { display: block; margin-bottom: 3px; }

/* ------------------------------------------------------------ 2. Questionnaire */
.p-phases { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-soft); }
.p-phases .mono { margin-right: 6px; color: var(--p-accent); }
.p-tour { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: clamp(28px, 3.5vw, 48px); margin-top: 56px; align-items: start; }
.p-tour__side { display: grid; gap: 14px; }
.p-tour__intro { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.p-attach { display: grid; gap: 16px; }
.p-attach > li { display: grid; gap: 8px; }
.p-attach__label { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.p-record__q { font-size: 13.5px; line-height: 1.45; font-style: italic; color: var(--ink-soft); margin-bottom: 10px; }
.p-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.p-cells div { display: grid; gap: 1px; }
.p-cells dt { font-size: 11.5px; color: var(--ink-faint); }
.p-cells dd { font-size: 13.5px; font-weight: 550; overflow-wrap: anywhere; }
.p-cells dd.mono { font-size: 12px; }
.p-record .frag__head .mono { font-size: 10.5px; }
.p-tour__note { font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); max-width: 62em; }
.p-tour__main .p-tour__note { margin-top: 6px; }

/* ------------------------------------------------------ 3. Le dossier probatoire */
/* Les pièces du dossier, puis un point et ce qui permet de le lire, reliés par de simples filets. */
.p-dossier { margin-top: 56px; }
.p-catalog { display: grid; gap: 10px; }
.p-catalog__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
/* chaque pièce est un onglet : elle ouvre le point qu'elle étaye */
.p-cat { position: relative; display: grid; gap: 2px; align-content: start; padding: 11px 14px 12px; border-radius: 12px; text-align: left; background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 1px var(--border); transition: background-color 180ms var(--ease), box-shadow 180ms var(--ease); }
.p-cat:not([aria-selected="true"]):hover { background: var(--white); box-shadow: inset 0 0 0 1px var(--cobalt-line), 0 8px 18px -12px rgba(49, 87, 229, 0.45); }
.p-cat:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.p-cat__kind { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 650; color: var(--ink-faint); }
.p-cat__title { font-size: 13.5px; line-height: 1.3; font-weight: 600; }
.p-cat .mono, .p-cat__links { font-size: 10.5px; line-height: 1.4; color: var(--ink-faint); white-space: nowrap; }
.p-cat .mono { margin-top: 4px; }
/* le point que la pièce étaye, en clair (son identifiant reste consultable) */
.p-cat__links { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12px; line-height: 1.4; white-space: normal; }
.p-cat[aria-selected="true"] { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--cobalt), 0 10px 22px -16px rgba(49, 87, 229, 0.6); }
.p-cat[aria-selected="true"] .p-cat__kind, .p-cat[aria-selected="true"] .mono, .p-cat[aria-selected="true"] .p-cat__links { color: var(--cobalt); }
.p-dossier__stack { margin-top: 30px; }
.p-dossier__stack > .p-pane { transition: opacity 0s linear 220ms, visibility 0s linear 220ms; }
.p-dossier__stack > .p-pane.is-active { transition: opacity 260ms var(--ease), visibility 0s; }

.p-hub { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr) minmax(0, 1fr); column-gap: 44px; align-items: center; }
.p-hub__side { display: grid; gap: 16px; }
.p-hub__card { position: relative; }
/* filets vers le point, au milieu de chaque encadré */
.p-hub__side--in .p-hub__card::before, .p-hub__side--out .p-hub__card::before { content: ""; position: absolute; top: 50%; width: 44px; height: 1.5px; background: var(--cobalt-line); }
.p-hub__side--in .p-hub__card::before { left: 100%; }
.p-hub__side--out .p-hub__card::before { right: 100%; }
.p-hub__point { align-self: stretch; display: flex; flex-direction: column; }
.p-hub__point .frag__head { padding: 16px 22px 0; }
.p-hub__point .frag__body { flex: 1; padding: 12px 22px 20px; }
.p-hub__point .t-finding__title { font-size: 20px; }
.p-hub__point .state { font-size: 14px; }
.p-hub__rows { display: grid; gap: 12px; margin-top: 18px; }
.p-hub__rows dt { font-size: 11.5px; color: var(--ink-faint); }
.p-hub__rows dd { margin-top: 2px; font-size: 14px; line-height: 1.5; }
.p-hub__limit { display: grid; gap: 3px; padding: 12px 22px 14px; border-top: 1px solid #ECE2CC; border-radius: 0 0 var(--r-lg) var(--r-lg); background: #FFFDF8; font-size: 13.5px; line-height: 1.5; }
.p-hub__limit .small-label { color: var(--p-partial-text); }
.p-hub__kind { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 650; color: var(--cobalt); margin-bottom: 2px; }
.p-hub__card .quote { margin-top: 10px; font-size: 13px; line-height: 1.5; }
.p-hub__also { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-left: auto; }
.p-hub__also .mono { font-size: 10.5px; color: var(--ink-soft); }
.p-proof { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--p-positive); }
.p-proof::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.p-hub__decl + .p-hub__decl { margin-top: 12px; }
.p-hub__q { font-size: 13.5px; line-height: 1.45; font-style: italic; color: var(--ink-soft); }
.p-hub__q .mono { display: block; margin-bottom: 1px; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--p-accent); letter-spacing: 0; }
.p-hub__a { margin-top: 3px; font-size: 13px; font-weight: 550; }
.p-hub__a .mono { font-size: 11px; font-weight: 500; }
.p-hub__card--law .t-legal__cite { font-size: 18px; }
.p-hub__nature { margin-top: 8px; font-size: 12px; color: var(--ink-faint); }
.p-hub__card--law .t-legal__links { margin-top: 10px; }
.p-hub__ref { display: grid; gap: 2px; font-size: 13.5px; line-height: 1.45; font-weight: 550; }
.p-hub__ref .mono { font-size: 10.5px; font-weight: 600; color: var(--p-accent); }
.p-hub__ref small { font-size: 12px; font-weight: 400; color: var(--ink-faint); }
.p-hub__more { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }

/* ------------------------------------------------ 4. Le dossier en chiffres (cobalt) */
.p-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; margin-top: 56px; }
.p-figures li { display: grid; gap: 8px; align-content: start; }
.p-figures b { font-size: clamp(2.5rem, 1.7rem + 2vw, 3.5rem); line-height: 1; font-weight: 560; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.p-figures span { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; line-height: 1.35; color: #E1E7FD; }
.p-figures li[data-s] span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex-shrink: 0; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9); }
.p-figures li[data-s="demonstrated"] { --c: var(--p-positive); }
.p-figures li[data-s="partially_demonstrated"] { --c: var(--p-partial); }
.p-figures li[data-s="not_demonstrated"] { --c: var(--p-negative); }
.p-figures li[data-s="uncorroborated"] { --c: var(--p-uncorroborated); }
.p-figures li[data-s="pending_review"] { --c: var(--p-pending); }
/* l'encart bleu s'ouvre depuis des bords arrondis, comme sur l'accueil (produit.js pose --q) */
.js .p-carto.is-flow { clip-path: inset(0 calc((1 - var(--q, 1)) * 5%) round calc((1 - var(--q, 1)) * 36px)); }

/* ------------------------------------------------------------- 5. La descente */
.p-desc { padding-block: clamp(72px, 8vw, 128px) clamp(56px, 6vw, 96px); }
.pd__grid { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: clamp(40px, 5vw, 64px); }
.pd__scene { display: none; }
.pd-step { display: grid; gap: 14px; align-content: start; max-width: 36em; }
.pd-step + .pd-step { margin-top: 80px; }
.pd-step__title { display: grid; gap: 14px; font-size: clamp(1.75rem, 1.2rem + 1.2vw, 2.375rem); line-height: 1.08; letter-spacing: -0.032em; font-weight: 560; }
.pd-step__title .mono { display: flex; align-items: center; gap: 10px; font-size: 12.5px; line-height: 1.3; letter-spacing: 0.02em; font-weight: 600; color: var(--cobalt); }
.pd-step__title .mono::before { content: ""; width: 18px; height: 1.5px; border-radius: 2px; background: currentColor; }
.pd-step__text { font-size: 1.0625rem; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }
.pd-step__where { font-size: 13px; line-height: 1.45; color: var(--ink-faint); }
.pd-step .link-arrow--quiet { justify-self: start; }
.pd-caption { margin-top: 32px; max-width: 64em; font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); }

/* les vues : fenêtres blanches posées sur le panneau */
.pd-win { position: relative; margin: 0; overflow: hidden; border-radius: 12px; background: var(--white); box-shadow: 0 0 0 1px rgba(17, 19, 24, 0.07), 0 28px 60px -26px rgba(17, 19, 24, 0.5); }
.pd-win--low { align-self: flex-end; width: 80%; margin-top: -16px; z-index: 2; }
.pd-win--wide { width: 94%; }
.pd-crop { position: relative; aspect-ratio: var(--cw) / var(--ch); overflow: hidden; }
.pd-crop img { position: absolute; max-width: none; height: auto; width: calc(var(--iw) / var(--cw) * 100%); left: calc(var(--x) / var(--cw) * -100%); top: calc(var(--y) / var(--ch) * -100%); }
/* ce qui compte dans la capture, entouré */
.pd-hl { position: absolute; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--cobalt), 0 0 0 5px rgba(49, 87, 229, 0.14); background: rgba(49, 87, 229, 0.06); }

/* le dossier entier : un carré par point ; le domaine du point suivi s'éclaire */
.pd-win--grid { padding: 16px 18px 14px; }
.pd-grid__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.pd-grid__head .mono { font-size: 11px; color: var(--ink-faint); }
.pd-grid__cols { display: grid; grid-template-columns: repeat(17, minmax(0, 1fr)); column-gap: clamp(3px, 0.5vw, 7px); margin-top: 14px; }
.pd-grid__col { position: relative; display: grid; gap: clamp(3px, 0.35vw, 5px); justify-items: center; transition: opacity 500ms var(--ease); }
.pd-grid__col i { display: block; width: 100%; aspect-ratio: 1; border-radius: 3px; background: var(--c, var(--border)); }
.pd-grid__col i[data-s="demonstrated"] { --c: var(--p-positive); }
.pd-grid__col i[data-s="partially_demonstrated"] { --c: var(--p-partial); }
.pd-grid__col i[data-s="not_demonstrated"] { --c: var(--p-negative); }
.pd-grid__col i[data-s="uncorroborated"] { --c: var(--p-uncorroborated); }
.pd-grid__col i[data-s="pending_review"] { --c: var(--p-pending); }
.pd-grid__col .mono { margin-top: 3px; font-size: clamp(7.5px, 0.7vw, 10px); color: var(--ink-faint); }
.pd-grid__col.is-focus::after { content: ""; position: absolute; inset: -5px -4px; pointer-events: none; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--cobalt), 0 0 0 5px rgba(49, 87, 229, 0.14); transition: opacity 400ms var(--ease); }
.pd-grid__col.is-focus .mono { color: var(--cobalt); font-weight: 600; }
.pd-grid__col:not(.is-focus) { opacity: 0.3; }
.pd-grid__focus { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 14px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); transition: opacity 400ms var(--ease); }

/* figures fixes (écran étroit ou bas, sans script) : les fenêtres du niveau, l'une sous l'autre */
.pd-fig { display: flex; flex-direction: column; margin-top: 10px; padding: clamp(14px, 2vw, 22px); }

/* ---- Descente animée : écran large, script actif (produit.js pose .is-live) */
.p-desc.is-live .pd__grid { grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr); column-gap: clamp(36px, 4vw, 64px); }
.p-desc.is-live .pd-step { position: relative; min-height: calc(88vh - var(--header-h)); align-content: center; padding-block: 40px; opacity: 0.28; transition: opacity 600ms var(--ease); }
.p-desc.is-live .pd-step + .pd-step { margin-top: 0; }
.p-desc.is-live .pd-step.is-current { opacity: 1; }
.p-desc.is-live .pd__text { padding-bottom: 14vh; }
/* la figure fixe reste lisible par les lecteurs d'écran ; la scène (aria-hidden) la montre aux autres */
.p-desc.is-live .pd-fig { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.p-desc.is-live .pd__scene {
  position: sticky; top: calc(var(--header-h) + 16px); align-self: start;
  display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: clamp(18px, 2vw, 28px);
  height: calc(100vh - var(--header-h) - 32px); height: calc(100svh - var(--header-h) - 32px);
}

/* frise de profondeur : le niveau actif devient bleu, le trait descend d'un niveau à l'autre */
.pd-frise { position: relative; align-self: center; }
.pd-frise ol { position: relative; display: grid; gap: 2px; }
.pd-frise ol::before { content: ""; position: absolute; left: 4px; top: 18px; bottom: 18px; width: 1px; background: var(--border-strong); }
.pd-frise__fill { position: absolute; left: 4px; top: 18px; bottom: 18px; width: 1.5px; margin-left: -0.25px; background: var(--cobalt); transform-origin: top; transform: scaleY(var(--p, 0)); transition: transform 900ms var(--ease); }
.pd-frise a { position: relative; display: flex; align-items: baseline; gap: 8px; min-height: 36px; padding: 8px 0 8px 22px; font-size: 13.5px; line-height: 1.3; font-weight: 550; color: var(--ink-faint); transition: color 400ms var(--ease); }
.pd-frise a::before { content: ""; position: absolute; z-index: 1; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--border-strong); transition: background-color 400ms var(--ease), box-shadow 400ms var(--ease); }
.pd-frise a .mono { font-size: 11px; color: inherit; }
.pd-frise a.is-done { color: var(--ink-soft); }
.pd-frise a.is-done::before { box-shadow: inset 0 0 0 1.5px var(--cobalt); }
.pd-frise a[aria-current="step"] { color: var(--ink); font-weight: 650; }
.pd-frise a[aria-current="step"] .mono { color: var(--cobalt); }
.pd-frise a[aria-current="step"]::before { background: var(--cobalt); box-shadow: 0 0 0 4px var(--cobalt-soft); }
.pd-frise a:hover { color: var(--cobalt); }
@media (max-width: 1240px) {
  .p-desc.is-live .pd__scene { grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; }
  .p-desc.is-live .pd-frise a { font-size: 0; }
  .p-desc.is-live .pd-frise a .mono { font-size: 11px; }
}

/* le panneau : une diapositive par niveau, ses fenêtres centrées dans la hauteur disponible */
.pd-stage { position: relative; overflow: hidden; }
/* dans la scène fixe : pas plus haut que nécessaire, centré dans la hauteur de la fenêtre */
.p-desc.is-live .pd-stage { align-self: center; width: 100%; aspect-ratio: 1 / 1.12; max-height: 100%; }
.pd-stage__head { position: absolute; z-index: 5; top: 14px; left: 16px; right: 16px; display: flex; pointer-events: none; }
.pd-show { display: none; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 650; color: var(--ink); box-shadow: 0 1px 2px rgba(17, 19, 24, 0.08); }
.pd-show.is-shown { display: inline-flex; align-items: center; animation: pd-pop 360ms var(--ease) both; }
.pd-show.is-shown::before { content: ""; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--cobalt); }
.pd-slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: safe center; padding: 58px 4% 4%; pointer-events: none; }
.pd-slide .pd-win { opacity: 0; transform: translateY(28px) scale(0.98); transition: opacity 360ms var(--ease), transform 480ms var(--ease); }
.pd-slide.is-in .pd-win { opacity: 1; transform: none; transition: opacity 520ms var(--ease) 200ms, transform 680ms var(--ease) 200ms; }
.pd-slide.is-in .pd-win--low { transition-delay: 700ms; }
/* la matrice affichée se lit au survol, comme celle de la page */
.pd-slide.is-in .pd-win--grid { pointer-events: auto; }
.p-desc.is-live .pd-slide.is-in .pd-hl { animation: pd-hl 640ms var(--ease) 1100ms both; }
.p-desc.is-live .pd-slide.is-in .pd-win--low .pd-hl { animation-delay: 1500ms; }
/* le dossier entier : les carrés se posent colonne après colonne, puis le domaine du point suivi s'éclaire */
.pd-stage .pd-grid__col i { opacity: 0; transform: scale(0.5); transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
.pd-stage .pd-slide.is-in .pd-grid__col i { opacity: 1; transform: none; transition: opacity 420ms var(--ease) calc(300ms + var(--c) * 40ms), transform 420ms var(--ease) calc(300ms + var(--c) * 40ms); }
.pd-stage .pd-grid__col:not(.is-focus) { opacity: 1; }
.pd-stage .pd-slide.is-in .pd-grid__col:not(.is-focus) { opacity: 0.3; transition: opacity 500ms var(--ease) 1500ms; }
.pd-stage .pd-grid__col.is-focus::after, .pd-stage .pd-grid__focus { opacity: 0; }
.pd-stage .pd-slide.is-in .pd-grid__col.is-focus::after { opacity: 1; transition-delay: 1500ms; }
.pd-stage .pd-slide.is-in .pd-grid__focus { opacity: 1; transition-delay: 1750ms; }
/* fenêtres basses : vues secondaires plus étroites ; la trace glisse davantage sous les références */
@media (max-height: 820px) {
  .pd-slide { padding-top: 54px; }
  .pd-stage .pd-win--low { width: 72%; }
  .pd-stage .pd-win--tuck { margin-top: -56px; }
  .pd-stage .pd-win--wide { width: 90%; }
}
@keyframes pd-pop { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: none; } }
@keyframes pd-hl { from { opacity: 0; scale: 1.06; } to { opacity: 1; scale: 1; } }

/* premier affichage et changement de mode : pas de transition */
.p-desc.is-settling .pd-stage *, .p-desc.is-settling .pd-stage *::before, .p-desc.is-settling .pd-stage *::after,
.p-desc.is-settling .pd-step, .p-desc.is-settling .pd-frise * { transition: none !important; }

/* ------------------------------------------------------ 7. Ce que vous recevez */
.p-today-section { padding-block: clamp(64px, 7vw, 112px); }
.p-today__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; }
.p-today__head .h2 { margin-top: 22px; }
.p-today__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-bottom: 8px; font-size: 14px; color: var(--ink-soft); }
.p-today { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.p-today li { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 18px; overflow: hidden; }
/* une vignette de la vue réelle, en tête de chaque élément */
.p-today__thumb { margin: -18px -18px 6px; border-bottom: 1px solid var(--border); }
.p-crop--thumb { border: 0; border-radius: 0; box-shadow: none; background: #F7F8FA; }
.p-today .mono { font-size: 11.5px; color: var(--cobalt); }
.p-today h3 { font-size: 17px; line-height: 1.25; font-weight: 650; letter-spacing: -0.012em; }
.p-today p { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.p-today p.p-today__real { margin-top: auto; padding-top: 6px; font-size: 12px; color: var(--ink-faint); }

/* --------------------------------------------------------- 8. Frontière produit */
.p-boundary { padding-block: clamp(56px, 6vw, 96px); }
.p-boundary__inner { display: grid; grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr); gap: 16px 48px; align-items: baseline; }
.p-boundary__label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 650; color: var(--ink-faint); }
.p-boundary__text { max-width: 40em; font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); line-height: 1.6; font-weight: 500; color: var(--ink); text-wrap: pretty; }

/* ------------------------------------------------------------------ Mouvement
   Entrées en fondu et translation seulement (translate, opacity, et scale hors des encadrés qui
   grandissent au survol) ; elles ne gardent aucun état une fois jouées (animation-fill-mode: backwards). */
@keyframes p-rise { from { opacity: 0; translate: 0 26px; } }
@keyframes p-from-l { from { opacity: 0; translate: -26px 0; } }
@keyframes p-from-r { from { opacity: 0; translate: 26px 0; } }
@keyframes p-fade { from { opacity: 0; } }
@keyframes p-grow { from { transform: scaleX(0); } }
@keyframes p-pop { from { opacity: 0; scale: 0.4; } }
@keyframes p-ring { 0% { box-shadow: 0 0 0 0 rgba(49, 87, 229, 0.45), 0 4px 10px -4px rgba(17, 19, 24, 0.4); } 100% { box-shadow: 0 0 0 14px rgba(49, 87, 229, 0), 0 4px 10px -4px rgba(17, 19, 24, 0.4); } }

/* 1. Héros : la vue, puis le domaine (sa barre se remplit), puis le constat et son état */
.js .p-result__screen { animation: p-rise 800ms var(--ease) 150ms backwards; }
.js .p-result__domain { animation: p-rise 700ms var(--ease) 650ms backwards; }
.js .p-result__domain .segbar { transform-origin: left center; animation: p-grow 800ms var(--ease) 1050ms backwards; }
.js .p-result__finding { animation: p-rise 700ms var(--ease) 950ms backwards; }
.js .p-result__finding .t-finding__state { animation: p-fade 500ms var(--ease) 1550ms backwards; }
.js .p-result__finding .p-result__law { animation: p-fade 500ms var(--ease) 1850ms backwards; }

/* 2. Questionnaire : les repères s'allument un à un, chaque détail arrive avec son trait, puis la
   réponse enregistrée se remplit ligne par ligne */
.p-attach .p-marker--static { position: relative; }
@media (min-width: 1101px) {
  .p-attach .p-marker--static::before { content: ""; position: absolute; right: 100%; top: 50%; width: clamp(28px, 3.5vw, 48px); height: 1.5px; background: var(--cobalt-line); transform-origin: right center; }
}
.js .p-tour:not(.is-in) .p-panel .p-marker, .js .p-tour:not(.is-in) .p-attach > li, .js .p-tour:not(.is-in) .p-record .p-cells > div { opacity: 0; }
.js .p-tour.is-in .p-panel .p-marker { animation: p-pop 460ms var(--ease) calc(400ms + var(--i) * 700ms) backwards, p-ring 1100ms var(--ease) calc(860ms + var(--i) * 700ms) 1; }
.js .p-tour.is-in .p-attach > li { animation: p-rise 600ms var(--ease) calc(600ms + var(--i) * 700ms) backwards; }
.js .p-tour.is-in .p-attach .p-marker--static::before { animation: p-grow 520ms var(--ease) calc(900ms + var(--i) * 700ms) backwards; }
.js .p-tour.is-in .p-record .p-cells > div { animation: p-rise 420ms var(--ease) calc(2300ms + var(--r, 0) * 160ms) backwards; }
.p-record .p-cells > div:nth-child(2) { --r: 1; }
.p-record .p-cells > div:nth-child(3) { --r: 2; }
.p-record .p-cells > div:nth-child(4) { --r: 3; }

/* 3. Dossier probatoire : les pièces, puis le point s'assemble — le point, la pièce et les
   déclarations, les filets, le fondement ; chaque changement de pièce rejoue l'assemblage, plus vite */
.p-dossier { --t: 1; }
.p-dossier.is-quick { --t: 0.45; }
.p-hub__side > :nth-child(2) { --j: 1; }
.js .p-dossier:not(.is-in) .p-cat, .js .p-dossier:not(.is-in) .p-hub__point, .js .p-dossier:not(.is-in) .p-hub__card { opacity: 0; }
.js .p-dossier.is-in .p-cat { animation: p-rise 500ms var(--ease) calc(var(--i) * 70ms) backwards; }
.js .p-dossier.is-in .p-pane.is-active .p-hub__point { animation: p-rise calc(600ms * var(--t)) var(--ease) calc(300ms * var(--t)) backwards; }
.js .p-dossier.is-in .p-pane.is-active .p-hub__side--in .p-hub__card { animation: p-from-l calc(600ms * var(--t)) var(--ease) calc((650ms + var(--j, 0) * 160ms) * var(--t)) backwards; }
.js .p-dossier.is-in .p-pane.is-active .p-hub__side--in .p-hub__card::before { transform-origin: left center; animation: p-grow calc(460ms * var(--t)) var(--ease) calc((1050ms + var(--j, 0) * 160ms) * var(--t)) backwards; }
.js .p-dossier.is-in .p-pane.is-active .p-hub__side--out .p-hub__card::before { transform-origin: left center; animation: p-grow calc(460ms * var(--t)) var(--ease) calc((1300ms + var(--j, 0) * 160ms) * var(--t)) backwards; }
.js .p-dossier.is-in .p-pane.is-active .p-hub__side--out .p-hub__card { animation: p-from-r calc(600ms * var(--t)) var(--ease) calc((1500ms + var(--j, 0) * 160ms) * var(--t)) backwards; }
.js .p-dossier.is-in .p-pane.is-active .p-hub__limit { animation: p-fade calc(500ms * var(--t)) var(--ease) calc(1900ms * var(--t)) backwards; }

/* 7. Ce que vous recevez : les quatre éléments arrivent l'un après l'autre */
.js .p-today:not(.is-in) li { opacity: 0; }
.js .p-today.is-in li { animation: p-rise 600ms var(--ease) calc(var(--i) * 140ms) backwards; }

/* les sections suivantes montent en place au fil du défilement (produit.js pose --r) */
.js [data-rise].is-flow { transform: translateY(calc((1 - var(--r, 1)) * 56px)); opacity: calc(0.2 + 0.8 * var(--r, 1)); }

/* ------------------------------------------------------------------ Survol */
/* la matrice de la descente : chaque carré se lit au survol (infobulle : point, intitulé, état) et grandit */
@media (hover: hover) and (pointer: fine) {
  .pd-grid__col i { transition: scale 160ms var(--ease), box-shadow 160ms var(--ease); }
  .pd-stage .pd-grid__col i { transition: opacity 300ms var(--ease), transform 300ms var(--ease), scale 160ms var(--ease), box-shadow 160ms var(--ease); }
  .pd-stage .pd-slide.is-in .pd-grid__col i { transition: opacity 420ms var(--ease) calc(300ms + var(--c) * 40ms), transform 420ms var(--ease) calc(300ms + var(--c) * 40ms), scale 160ms var(--ease), box-shadow 160ms var(--ease); }
  .pd-grid__col i:hover { position: relative; z-index: 2; scale: 1.35; box-shadow: 0 0 0 2px var(--white), 0 6px 14px -6px rgba(17, 19, 24, 0.45); }
  .pd-grid__col:hover { opacity: 1 !important; }
  .pd-grid__col .mono { cursor: default; }
}

/* ----------------------------------------------------------- Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  .p-result *, .p-result, .p-tour *, .p-dossier *, .p-today *, .pd-stage *, .pd-stage *::before, .pd-stage *::after { animation: none !important; transition: none !important; }
  .js .p-tour .p-panel .p-marker, .js .p-tour .p-attach > li, .js .p-tour .p-record .p-cells > div,
  .js .p-dossier .p-cat, .js .p-dossier .p-hub__point, .js .p-dossier .p-hub__card, .js .p-today li { opacity: 1; }
}

/* -------------------------------------------------------------- Responsive */
@media (max-width: 1240px) {
  .p-catalog__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-hub { column-gap: 32px; }
  .p-hub__side--in .p-hub__card::before, .p-hub__side--out .p-hub__card::before { width: 32px; }
  .p-today { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .p-result { justify-self: center; max-width: 760px; margin-top: 16px; }
  .p-hero .hero__copy { padding-top: 0; }
  .p-tour { grid-template-columns: minmax(0, 1fr); }
  .p-tour__side { max-width: 760px; }
  /* le point d'abord, puis ce qui permet de le lire, deux par deux, sans filets */
  .p-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .p-hub__side { display: contents; }
  .p-hub__point { grid-column: 1 / -1; order: -1; }
  .p-hub__card::before { display: none; }
  /* en une ou deux colonnes, les encadrés montent au lieu d'arriver par les côtés (pas de débordement) */
  .js .p-dossier.is-in .p-pane.is-active .p-hub__side--in .p-hub__card, .js .p-dossier.is-in .p-pane.is-active .p-hub__side--out .p-hub__card { animation-name: p-rise; }
  .p-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .pd-step { max-width: 720px; }
}

@media (max-width: 720px) {
  .p-result { margin-top: 36px; }
  .p-result__frags { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 22px; padding-left: 0; }
  /* ordre du livrable (domaine puis point), sans les décalages du héros de l'accueil */
  .p-result .t-domain { order: 0; margin: 0 22px 0 0; }
  .p-result .t-finding { order: 0; margin: 0 0 0 22px; }
  .p-panel { padding: 14px; border-radius: 16px; }
  .p-catalog__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-hub { grid-template-columns: minmax(0, 1fr); }
  .p-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-today { grid-template-columns: minmax(0, 1fr); }
  .p-boundary__inner { grid-template-columns: minmax(0, 1fr); }
  .pd-step + .pd-step { margin-top: 64px; }
  .pd-fig { padding: 12px; margin-inline: -6px; border-radius: 16px; }
  .pd-win--low { width: 90%; margin-top: -20px; }
  .pd-win--grid { padding: 12px 12px 10px; }
  .pd-grid__cols { column-gap: 2px; }
  .pd-grid__col { gap: 2px; }
  .pd-grid__col i { border-radius: 2px; }
}

/* ce que l'on reçoit, en langage courant */
.p-hero__plain { margin-top: 14px; max-width: 32em; font-size: 15.5px; line-height: 1.55; font-weight: 500; color: var(--ink); text-wrap: pretty; }

.p-hero .lede { max-width: 32em; }
.p-hero .hero__caption { max-width: 36em; }

/* Repositionnement du 29 septembre : cinq vues d'un seul livrable ; dossier BEC et travaux du cabinet. */
.p-today--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.p-today__own { margin-top: 18px; max-width: 46em; font-size: 16px; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }
@media (max-width: 1100px) { .p-today--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .p-today--5 { grid-template-columns: minmax(0, 1fr); } }