/* Aperçu d'un document de démonstration : carrousel de pages + visionneuse en pleine page.
   Réutilisable sur les pages agenda et synastrie. Sans JS, la piste défile au doigt et
   chaque page s'ouvre en grand dans un nouvel onglet. */
.apercu{margin:40px 0 8px}
.apercu-piste{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:6px 4px 22px;margin:0 -4px;scrollbar-width:thin;scrollbar-color:var(--filet) transparent;overscroll-behavior-x:contain}
.apercu-piste:focus-visible{outline:2px solid var(--or);outline-offset:4px}
.apercu-page{flex:0 0 auto;width:268px;scroll-snap-align:start;margin:0}
.apercu-ouvrir{display:block;cursor:zoom-in;border:1px solid var(--filet);background:var(--creme);
  box-shadow:0 18px 36px -24px rgba(7,29,41,.5);transition:transform .2s ease,box-shadow .2s ease}
.apercu-ouvrir:hover{transform:translateY(-3px);box-shadow:0 24px 40px -24px rgba(7,29,41,.55)}
.apercu-ouvrir:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.apercu-ouvrir img{display:block;width:100%;height:auto;aspect-ratio:620/876}
.apercu-page figcaption{font-family:Inter,system-ui,sans-serif;font-size:13.5px;color:var(--muted);margin-top:10px;line-height:1.4}
.apercu-page figcaption b{font-weight:500;color:var(--or-texte);margin-right:6px}
.apercu-barre{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:Inter,system-ui,sans-serif;font-size:14px}
.apercu-barre[hidden]{display:none}
.apercu-fleche{width:40px;height:40px;border-radius:50%;border:1px solid var(--filet);background:var(--creme);color:var(--navy);
  font-size:18px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.apercu-fleche:hover:not(:disabled){border-color:var(--or)}
.apercu-fleche:disabled{opacity:.35;cursor:default}
.apercu-fleche:focus-visible,.apercu-plein:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.apercu-compte{color:var(--muted);min-width:5.5em}
.apercu-plein{margin-left:auto;background:var(--navy);color:var(--creme);border:0;border-radius:4px;padding:10px 16px;
  font:500 14px Inter,system-ui,sans-serif;cursor:pointer}
.apercu-plein:hover{background:#0f2d3f}
.apercu-note{font-size:16px;color:var(--muted);margin-top:14px;max-width:40em}

/* visionneuse */
.visionneuse{position:fixed;inset:0;border:0;padding:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;
  background:#071D29;color:var(--creme)}
html:has(.visionneuse[open]){overflow:hidden}
.visionneuse::backdrop{background:rgba(7,29,41,.8)}
.visionneuse[open]{display:grid;grid-template-rows:auto 1fr auto}
.vis-haut{display:flex;align-items:center;gap:16px;padding:14px 18px;font-family:Inter,system-ui,sans-serif;font-size:14px}
.vis-titre{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vis-titre b{font-weight:500;color:var(--or-clair);margin-right:8px}
.vis-compte{color:rgba(250,247,240,.7)}
.vis-fermer,.vis-fleche{background:transparent;color:var(--creme);border:1px solid rgba(250,247,240,.35);border-radius:50%;
  width:44px;height:44px;font-size:20px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.vis-fermer:hover,.vis-fleche:hover:not(:disabled){border-color:var(--or-clair)}
.vis-fleche:disabled{opacity:.3;cursor:default}
.vis-fermer:focus-visible,.vis-fleche:focus-visible{outline:2px solid var(--or-clair);outline-offset:3px}
.vis-scene{position:relative;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(250,247,240,.25) transparent;display:flex;justify-content:center;align-items:flex-start;padding:0 70px 10px;touch-action:pan-y pinch-zoom}
.vis-scene img{display:block;width:auto;max-width:100%;height:auto;max-height:calc(100dvh - 175px);box-shadow:0 20px 50px rgba(0,0,0,.45);background:#FAF7F0}
.vis-scene.zoom img{max-height:none;width:min(1240px,100%)}
.vis-bas{display:flex;align-items:center;justify-content:center;gap:18px;padding:10px 18px 16px;font-family:Inter,system-ui,sans-serif;font-size:13px;color:rgba(250,247,240,.7)}
.vis-bas button.vis-lire{background:transparent;color:var(--creme);border:1px solid rgba(250,247,240,.35);border-radius:4px;padding:8px 14px;font:500 13px Inter,system-ui,sans-serif;cursor:pointer}
.vis-bas button.vis-lire:hover{border-color:var(--or-clair)}
.vis-flanc{position:absolute;top:50%;transform:translateY(-50%)}
.vis-flanc.g{left:14px}.vis-flanc.d{right:14px}
@media (max-width:860px){
  .apercu-page{width:72vw;max-width:300px}
  .apercu-plein{margin-left:0}
  .vis-scene{padding:0 8px 10px}
  .vis-flanc{display:none}
  .vis-scene img{max-height:none;width:100%}
}
@media (prefers-reduced-motion:reduce){.apercu-piste{scroll-behavior:auto}.apercu-ouvrir{transition:none}}

/* une image de démonstration isolée (capture de calendrier…) */
.apercu-figure{margin:22px 0 0}
.apercu-figure a{display:block;cursor:zoom-in}
.apercu-figure img{display:block;width:100%;height:auto}
.apercu-figure figcaption{font-family:Inter,system-ui,sans-serif;font-size:13.5px;color:var(--muted);margin-top:10px;line-height:1.45}

/* Carrousel de cartes de texte (témoignages), sans pleine page — 17/09/2026 */
.defile-piste{display:flex !important;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 4px 20px;margin:0 -4px;
  scrollbar-width:thin;scrollbar-color:var(--filet) transparent;overscroll-behavior-x:contain}
.defile-piste:focus-visible{outline:2px solid var(--or);outline-offset:4px}
.defile-piste > *{flex:0 0 auto;width:min(420px,78vw);scroll-snap-align:start;margin:0}
/* Retours de longueurs très différentes : chaque carte garde sa hauteur, sinon les courts flottent dans un cadre vide (18/09/2026). */
.defile-piste.temoins{align-items:flex-start}
@media (prefers-reduced-motion:reduce){.defile-piste{scroll-behavior:auto}}

/* Témoignages longs repliés (audit du 29/09/2026) : un retour de quatre paragraphes donnait sa hauteur à toute la rangée
   et laissait ~600 px de vide sous les autres. Le script replie le texte au-delà de 6 lignes environ, avec « Lire la suite » ;
   sans script, tout reste lisible comme avant. Au bureau, trois cartes entières par vue : plus de carte coupée au bord. */
.temoin.repliable .temoin-texte{max-height:10.5em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.temoin.repliable.deplie .temoin-texte{max-height:none;-webkit-mask-image:none;mask-image:none}
.temoin-suite{display:inline-block;margin:0 0 14px;padding:0;background:none;border:0;border-bottom:1px solid var(--or);
  font-family:Inter,system-ui,sans-serif;font-size:14px;color:var(--navy);cursor:pointer}
.temoin-suite:hover{color:var(--or-texte)}
.temoin-suite:focus-visible{outline:2px solid var(--or);outline-offset:3px}
@media (min-width:1000px){ .defile-piste.temoins > *{width:calc((100% - 44px) / 3)} }