/* Les aventures de PO (page + bloc « Où est passé PO ? » de l'accueil), 2026-11-11.
   Mise en page seulement : toutes les couleurs viennent de theme.css (var(--…)).
   .photo-attente = cadre PROVISOIRE, à remplacer par les photos de Laurent (<picture> WebP). */

.photo-attente{
  margin:26px auto 0;max-width:760px;aspect-ratio:3/2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  border:3px dashed var(--or);border-radius:8px;background:var(--noir-2);
  text-align:center;padding:18px;
}
.photo-attente-icone{font-size:40px;line-height:1;}
.photo-attente-texte{font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:14px;color:var(--or);}
.photo-attente figcaption{font-size:13.5px;color:var(--gris);max-width:440px;}

.po-etape h3 .emoji{font-size:1.1em;}
.po-citation{
  margin:22px auto 22px;max-width:640px;padding:22px 26px;
  border-left:4px solid var(--or);border-radius:6px;background:var(--noir-2);
}
.po-citation p{font-family:'Marcellus',serif;font-size:19px;line-height:1.6;font-style:italic;color:var(--blanc);margin:0;}
.po-appel{list-style:none;padding:0;margin:8px 0 26px;display:grid;gap:14px;}
.po-appel li{display:flex;gap:14px;align-items:flex-start;background:var(--noir-2);border-radius:6px;padding:14px 16px;color:var(--gris);font-size:14.5px;line-height:1.7;}
.po-appel li .emoji{font-size:22px;line-height:1.3;}
.po-appel a{color:var(--or-clair);font-weight:700;}
.po-kenavo{font-family:'Marcellus',serif;font-size:20px;}

/* Accueil : bloc « Où est passé PO ? » (aussi compact qu'une section normale), titre comme le bloc Actualités */
.po-accueil{padding-top:80px;padding-bottom:80px;}
.po-accueil .sec-head{text-align:center;max-width:880px;margin:0 auto 22px;}
.po-accueil .sec-head h2{font-size:clamp(26px,3.8vw,42px);margin:16px 0 0;color:var(--blanc);}
.po-accueil .po-accueil-texte{max-width:620px;margin:0 auto 26px;text-align:center;color:var(--gris);font-size:15px;line-height:1.8;}
/* Galerie d'une étape : 2 colonnes « mosaïque », chaque photo garde ses proportions */
/* Rangées justifiées : chaque photo grandit selon sa proportion (--r), donc même hauteur sur une ligne */
.po-galerie{display:flex;flex-wrap:wrap;gap:12px;max-width:760px;margin:26px auto 0;}
.po-photo{margin:0;flex-grow:var(--r,1.333);flex-shrink:1;flex-basis:calc(var(--r,1.333) * 180px);min-width:0;}
.po-photo img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 6px 18px rgba(var(--voile-rgb),.25);}
.po-photo figcaption{font-size:13px;color:var(--gris);font-style:italic;text-align:center;margin-top:6px;}
/* Image seule : plus petite et centrée */
.po-galerie:has(> .po-photo:only-child){max-width:460px;}
.po-galerie:has(> .po-photo:only-child img[height="1200"]){max-width:340px;}

.po-accueil-photos{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:980px;margin:0 auto;}
.po-tuile{margin:0;min-width:0;aspect-ratio:4/3;border-radius:6px;overflow:hidden;box-shadow:0 6px 18px rgba(var(--voile-rgb),.25);}
.po-tuile picture,.po-tuile img{display:block;width:100%;height:100%;}
.po-tuile img{object-fit:cover;}
.po-accueil-photos .photo-attente{margin:0;max-width:none;min-width:0;aspect-ratio:4/3;padding:10px;}
.po-accueil-photos .photo-attente-icone{font-size:28px;}
.po-accueil-photos .photo-attente-texte{font-size:12px;}
.po-accueil-photos .photo-attente figcaption{font-size:12.5px;}
.po-accueil-lien{text-align:center;margin-top:28px;}

@media(max-width:900px){
  .po-accueil{padding:56px 22px 60px;}
  .photo-attente{aspect-ratio:4/3;}
  .po-citation{padding:18px;}
  .po-citation p{font-size:17px;}
  .po-accueil-photos{grid-template-columns:repeat(2,1fr);gap:10px;max-width:520px;}
  /* Téléphone : grille 2 × 2 (vignettes 4:3) ; une dernière photo seule prend toute la largeur */
  .po-galerie:has(> .po-photo:nth-child(2)){display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .po-galerie:has(> .po-photo:nth-child(2)) .po-photo img{aspect-ratio:4/3;object-fit:cover;height:auto;}
  .po-galerie:has(> .po-photo:nth-child(2)) .po-photo:last-child:nth-child(odd){grid-column:1/-1;}
  .po-galerie:has(> .po-photo:nth-child(2)) .po-photo:last-child:nth-child(odd) img{aspect-ratio:2/1;}
  .po-photo figcaption{font-size:12px;}
  .po-accueil-photos .photo-attente figcaption{display:none;}
  .po-accueil-photos .photo-attente{padding:6px;border-width:2px;aspect-ratio:1/1;}
  .po-accueil-photos .photo-attente-texte{letter-spacing:.02em;}
  .po-accueil-photos .photo-attente-icone{font-size:22px;}
}

/* Illustration PO seule dans une étape : centrée, largeur moyenne */