/* ==========================================================================
   Œuvra — Pour qui ? · feuille du gabarit (templates/page-pour-qui.php)
   Base : handoff/design/css/pages/pour-qui.css (animations, composition, responsive), recopiée telle quelle
   sauf : le !important de la règle Mobile .hp-gal (il ne battait que le gap inline des masters, devenu une
   classe), le pas de la boucle hp-gal, calé sur l'écart réel des photos (voir « Défilement infini »), et la
   règle .c-btn-soft, non reprise (voir « Bouton secondaire »).
   Styles inline du prototype convertis en classes, et ratio implicite des photos de la médiathèque ramené à
   celui du prototype : bloc « Production ».
   ========================================================================== */

/* ---------- Animations et états propres à la page (hérités des maquettes validées) ---------- */
/* Défilement infini (M14) : la rangée contient ses six photos puis leur copie ; un pas = la moitié de la
   rangée + la moitié de l'écart qui sépare les deux jeux. Handoff : « calc(-50% - 10px) », juste pour
   l'écart de 20 px, mais 4 px trop long en Mobile (écart 12 px) : saut visible à chaque tour. Le pas suit
   donc --pq-gap (20 → 12 px), rendu statique inchangé. */
@keyframes hp-gal { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--pq-gap, 20px) / 2)); } }
.hp-gal { animation: hp-gal var(--duree, 60s) linear infinite; }
.hp-gal--inv { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) { .hp-gal { animation: none; } }
@keyframes pq-shine { to { transform: rotate(1turn); } }
.pq-shine { position: absolute; left: -60%; top: -220%; width: 220%; height: 540%; background: conic-gradient(from 0deg, #e4dcf300 0deg, #b9a6de 70deg, #e8503a 130deg, #e4dcf300 200deg, #e4dcf300 360deg); filter: blur(6px); animation: pq-shine 6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .pq-shine { animation: none; } }

/* ---------- Composition et responsive ---------- */
/* Pour qui ? — galerie défilante + carte centrale */
.pq-head { max-width: 960px; }
.pq-gallery { position: relative; margin-top: 64px; display: flex; flex-direction: column; gap: 24px; }
.pq-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; box-sizing: border-box; width: 724px; max-width: calc(100% - 80px); padding: 2px; border-radius: var(--radius-xl); overflow: hidden; background: var(--brand-100); }
.pq-card__inner { position: relative; box-sizing: border-box; width: 100%; padding: 40px 44px; border-radius: 14px; background: var(--bg-surface); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.pq-card__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
/* Bouton secondaire de la carte. Handoff : « .c-btn-soft.oe-btn { background: var(--bg-surface); border-color:
   var(--border-100); color: var(--ink-900) } » = état de repos du .oe-btn--tertiary du DS, déjà donné par la classe :
   règle non reprise. Chargée après le DS, elle l'emportait aussi sur « .oe-btn--tertiary:hover » (effet de bord : pas
   de survol) et, sans portée, sur le bouton « Connexion » du menu plein écran (identiques.md §1). Survol du DS rétabli
   (motion-spec M09 : fond --bg-beige, filet --border-strong, 150 ms), comme les boutons secondaires de l'Accueil et le
   bouton « Connexion » du menu (fichiers partagés, clôture Phase D). Écart voulu vs prototype : survol seulement. */
.pq-row { position: relative; width: 100%; overflow: hidden; }
.pq-photo { flex: none; width: 368px; height: 300px; border-radius: var(--radius-lg); overflow: hidden; }
.pq-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Production : styles inline du prototype convertis en classes ---------- */
/* <section id="hero" style="overflow: hidden"> */
.pq-hero { overflow: hidden; }
/* <div class="hp-gal" style="--duree: 90s | 100s; display: flex; gap: 20px; width: max-content"> et ses deux
   jeux de photos <div style="display: flex; gap: 20px">. L'écart passe par --pq-gap (pas de la boucle). */
.hp-gal { --pq-gap: 20px; display: flex; gap: var(--pq-gap); width: max-content; }
.hp-gal > .pq-set { display: flex; gap: var(--pq-gap); }
.pq-row > .hp-gal { --duree: 90s; }
.pq-row > .hp-gal--inv { --duree: 100s; }
/* Fondus latéraux : <div aria-hidden style="position: absolute; inset: 0 auto 0 0 | 0 0 0 auto; width: 96px;
   background: linear-gradient(90deg | 270deg, var(--bg-page) 0%, #f3f2ef00 100%)"> */
.pq-fade { position: absolute; top: 0; bottom: 0; width: 96px; }
.pq-fade--start { right: auto; left: 0; background: linear-gradient(90deg, var(--bg-page) 0%, #f3f2ef00 100%); }
.pq-fade--end { right: 0; left: auto; background: linear-gradient(270deg, var(--bg-page) 0%, #f3f2ef00 100%); }
/* Surtitre de la carte : <p style="margin: 0; display: inline-flex; … height: 48px; padding: 0 18px 0 8px; …">
   (content-box : 50 px rendus avec le filet), pastille Œ 32 × 32 et monogramme 20 px. */
.pq-card__badge { margin: 0; display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 18px 0 8px; border-radius: var(--radius-md); border: 1px solid var(--border-100); background: var(--bg-surface); font-family: var(--font-sans); font-weight: 600; font-size: 15px; line-height: 20px; color: var(--ink-900); }
.pq-card__badge-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-xs); background: var(--brand-100); }
.pq-card__badge-img { display: block; }
/* Photos de la médiathèque : wp_get_attachment_image pose width/height, d'où un « aspect-ratio: auto W/H »
   implicite que le prototype n'a pas. Sans effet ici (img à 100 % × 100 % d'un cadre de taille fixe, dimensions
   toujours définies) : on revient à « auto », comme le prototype. Sans cette feuille, l'indice reste actif. */
.pq-photo img { aspect-ratio: auto; }
/* Boucles mises en pause hors écran (motion-spec §1.5 [Recommandé]) : classe posée par page-pour-qui.js. */
.pq-row.is-offscreen .hp-gal, .pq-card.is-offscreen .pq-shine { animation-play-state: paused; }

@media (max-width: 1023px) {
.pq-photo { width: 280px; height: 228px; }
.pq-card { width: 600px; }
.pq-card__inner { padding: 32px; }
}
@media (max-width: 767px) {
.pq-gallery { margin-top: 40px; gap: 16px; }
.pq-photo { width: 200px; height: 164px; }
/* Handoff : « .hp-gal, .hp-gal > div { gap: 12px !important; } » — même écart pour la rangée et ses deux jeux,
   sans !important (le gap inline est devenu la classe ci-dessus). */
.hp-gal { --pq-gap: 12px; }
/* D13 : la carte quitte la superposition et s'insère entre les deux rangées (chevauchement −48). */
.pq-card { position: relative; left: auto; top: auto; transform: none; order: 2; width: auto; max-width: none; margin: -48px 12px; }
/* :first-of-type / :last-of-type portent sur le type (div) : la 1re div de la galerie est la carte, la règle
   « first » ne s'applique donc pas (ordre 0, avant la carte) — recopiée telle quelle, rendu identique. */
.pq-row:first-of-type { order: 1; }
.pq-row:last-of-type { order: 3; }
.pq-card__inner { padding: 24px 20px; gap: 20px; }
.pq-card__btns { flex-direction: column; align-items: stretch; width: 100%; }
}