/*
  Les pages « À propos », « Pour les apprenants », « Pour les parents » et
  « Pour les profs » (M34), clonées des maquettes docs/design/V5 des
  ressources. Les styles des maquettes restent en ligne dans les vues ; ici
  seulement ce qu'un style en ligne ne sait pas dire : les colonnes qui
  changent avec la largeur (900 px, 640 px et 520 px, comme les
  maquettes), les survols, l'état d'avant l'apparition et le sens arabe.
*/

.pdp { position: relative; overflow-x: clip; background: #FDFBF7; color: #1D1C1C; font-family: 'Nunito', sans-serif; text-align: start; padding-top: 112px; }
.pdp *, .pdp *::before, .pdp *::after { box-sizing: border-box; }
.pdp a { color: #FF6363; }
.pdp button { font: inherit; }
.pdp p, .pdp h1, .pdp h2 { color: inherit; }
.pdp [id] { scroll-margin-top: 120px; }
html:has(.pdp) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.pdp) { scroll-behavior: auto; } }

/* Apparition au défilement (public/js/pages-de-profil.js). Sans script,
   tout reste visible : la classe pdp-js n'est posée que par le script. */
.pdp-js [data-r]:not(.is-in) { opacity: 0; }
.pdp-js [data-r="up"]:not(.is-in) { transform: translateY(28px); }
.pdp-js [data-r="left"]:not(.is-in) { transform: translateX(-40px); }
[dir="rtl"] .pdp-js [data-r="left"]:not(.is-in) { transform: translateX(40px); }
.pdp-js [data-r="zoom"]:not(.is-in) { transform: scale(0.94); }
@media (prefers-reduced-motion: reduce) { .pdp-js [data-r] { opacity: 1 !important; transform: none !important; } }

/* Colonnes */
.pdp-g2 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.pdp-g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.pdp-g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.pdp-hero { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); }
.pdp-tools { grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr); }
.pdp-exp { grid-template-columns: minmax(0,1fr) clamp(80px,12vw,200px) minmax(0,0.9fr); }
.pdp-exp__mid { height: 100%; }
.pdp-exp__arrow { display: none; }
.pdp-story { flex-direction: row; }
.pdp-story--rev { flex-direction: row-reverse; }
.pdp-story--rev .pdp-story__txt { text-align: end; }
.pdp-compte { width: var(--cw); }

@media (max-width: 899.98px) {
  .pdp-g2, .pdp-g3, .pdp-hero, .pdp-tools, .pdp-exp { grid-template-columns: minmax(0,1fr); }
  .pdp-g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pdp-exp__mid { height: 50px; }
  .pdp-exp__mid svg { display: none; }
  .pdp-exp__arrow { display: block; }
  .pdp-story, .pdp-story--rev { flex-direction: column; }
  .pdp-story--rev .pdp-story__txt { text-align: start; }
  .pdp { padding-top: 96px; }
}
@media (max-width: 639.98px) {
  .pdp-g4 { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 519.98px) {
  .pdp-compte { width: var(--cw-s); }
}

/* Survols (les style-hover des maquettes) */
.pdp-door { transition: transform 350ms cubic-bezier(.2,.7,.2,1), box-shadow 350ms ease; }
.pdp-door:hover { transform: translateY(-8px); box-shadow: 0 22px 50px rgba(29,28,28,0.16) !important; }
.pdp-pill { transition: transform 250ms ease; }
.pdp-pill:hover { transform: translateY(-4px); }
.pdp a.pdp-door:hover, .pdp a.pdp-pill:hover { color: inherit; }

/* Sens arabe : les liens vers le profil partent de l'autre côté. */
[dir="rtl"] .pdp-mirror { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) { .pdp-points { display: none; } }