/* Photos du récit (variante M2, validée le 16/09) : « à côté » d'une section et « entre » deux sections.
   Mobile d'abord ; ordinateur dans @media (min-width:980px). Sert au socle live painting, et aux autres familles ensuite.
   Balisage : figure.pr-fig (img + figcaption)
     à côté : figure.pr-cote.pr-r23|pr-r45|pr-r43|pr-r11 posée entre le titre et le 1er paragraphe, parent .pr-card
     entre  : div.pr-entre > .container > figure.pr-large | div.pr-duo | div.pr-seq, placé entre </section> et <section> */

.pr-fig{margin:0}
.pr-fig img{display:block;width:100%;height:auto;object-fit:cover;border-radius:14px;background:#efe6da}
.pr-fig figcaption{margin-top:8px;font:400 .84rem/1.45 Inter,system-ui,sans-serif;color:#6b5d50;text-wrap:pretty}

/* à côté : sur téléphone, la photo vient après le 1er paragraphe de sa section, pleine largeur */
.pr-card{display:flex;flex-direction:column}
.pr-card > *{order:3}
.pr-card > :first-child{order:0}
.pr-card > .pr-cote + p{order:1}
/* familles (16/09) : dans une section de questions, la photo vient après la 1re question et sa réponse */
.pr-card > .pr-cote + h3,.pr-card > .pr-cote + h3 + p{order:1}
.pr-card > .pr-cote{order:2;margin:4px 0 22px}
.pr-cote img{aspect-ratio:4/5}
.pr-cote.pr-r43 img{aspect-ratio:4/3}
.pr-cote.pr-r11 img{aspect-ratio:1/1}

/* entre deux sections : la section qui suit garde l'air qu'elle a derrière une autre section */
.pr-entre{padding-block:0 18px}
body.mep-douce main > .pr-entre + section.section{padding-top:clamp(34px,5vw,72px)!important}
.pr-large img{aspect-ratio:4/3}
.pr-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pr-duo img{aspect-ratio:4/5}
.pr-duo figcaption,.pr-seq figcaption{font-size:.78rem}
/* séquence : une bande qu'on fait glisser du doigt */
.pr-seq{display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.pr-seq .pr-fig{scroll-snap-align:start}
.pr-seq img{aspect-ratio:3/4}

@media (min-width:980px){
  .pr-fig figcaption{font-size:.86rem}
  /* à côté : à droite du texte, alignée sur le haut du 1er paragraphe ; la colonne de lecture garde ses 690 px */
  body.mep-douce main > section.section .pr-card{display:flow-root}
  body.mep-douce main > section.section .info-card.pr-card{max-width:1066px}
  body.mep-douce main > section.section .info-card.pr-card > h2,
  body.mep-douce main > section.section .info-card.pr-card > p{max-width:690px!important}
  .pr-card > .pr-cote{float:right;clear:right;width:clamp(240px,calc(100% - 746px),320px);margin:4px 0 18px 56px}
  .container.pr-card > .pr-cote{margin-right:max(0px,calc(100% - 1066px))}
  /* familles (16/09) : section de questions, photo alignée sur la 1re question quel que soit l'air sous la carte du titre */
  body main .section .container.pr-card > .info-card.info-card:first-child:has(+ .pr-cote + h3){margin-bottom:22px!important}
  .container.pr-card > .pr-cote + h3{margin-top:0}
  .pr-cote img{aspect-ratio:4/5}
  .pr-cote.pr-r23 img{aspect-ratio:2/3}
  .pr-cote.pr-r43 img{aspect-ratio:4/3}
  .pr-cote.pr-r11 img{aspect-ratio:1/1}
  /* entre : sur la largeur texte + photo (1066 px), alignée sur la colonne de lecture */
  .pr-entre{padding-block:22px 0}
  .pr-entre > .container > *{max-width:1066px}
  .pr-large img{aspect-ratio:16/9}
  .pr-duo{gap:24px}
  .pr-duo img{aspect-ratio:1/1}
  .pr-duo figcaption,.pr-seq figcaption{font-size:.86rem}
  .pr-seq{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);grid-auto-columns:auto;overflow:visible;gap:20px;padding-bottom:0}
}

/* villes (16/09) : la carte du récit (local-note-card) est bridée à 690 px ; avec une photo à côté elle prend
   la largeur texte + photo, et ses titres, paragraphes et rangées de liens gardent la colonne de 690 px */
@media (min-width:980px){
  body.mep-douce main > section.section .local-note-card.pr-card{max-width:1066px}
  body.mep-douce main > section.section .local-note-card.pr-card > h2,
  body.mep-douce main > section.section .local-note-card.pr-card > p,
  body.mep-douce main > section.section .local-note-card.pr-card > div,
  body.mep-douce main > section.seo-block .container.pr-card > h2{max-width:690px!important}
}