/*! La galerie en puzzle - Tisserin Promotion, modele programme v2.
 *
 * Reprise telle quelle de la maquette (mockup.html, section 3). Elle vit dans son
 * propre fichier parce que tp-programme-v2.css est GENEREE par
 * _php/extrait-css.py, dont la liste d'exclusion retirait le puzzle tant que le
 * modele PHP ne le rendait pas. Maintenant qu'il le rend, la bonne place de ces
 * regles est la feuille generee : a la prochaine regeneration, retirer `puzzle`,
 * `.piece`, `.p0` a `.p5` et `.colle` de la liste EXCLUS du script, et supprimer
 * ce fichier.
 *
 * Le principe : chaque morceau porte la MEME image, dimensionnee sur la grille
 * entiere et decalee de la position du morceau dans cette grille. Chacun montre
 * donc sa part de l'image, et quand l'ecart tombe a zero ils redeviennent
 * contigus : l'image est entiere. Le calage se fait en JS parce que CSS ne sait
 * pas donner a un enfant la position de son parent dans la grille. Sans JS, --p
 * vaut 1 et l'image est entiere, propre.
 *
 * Scope sur #tpv2 comme le reste : le plugin apsulis impose sa typographie en
 * !important, et un identifiant est le seul moyen de le battre.
 */

/* La section s'epingle : `.colle` est haute de 230vh et `.colle-vue` y reste
   collee sur la hauteur d'un ecran. Le defilement avance donc dans la section
   sans que le visuel bouge, et c'est cette avancee qui pilote --p : l'assemblage
   se joue sous les yeux, immobile. */
#tpv2 .colle{position:relative;height:230vh}
#tpv2 .colle-vue{position:sticky;top:56px;height:calc(100vh - 56px);display:flex;align-items:center}
#tpv2 .colle-vue>.wrap{width:100%}

/* Colonne de texte en largeur FIXE : en fraction elle se retrecissait quand
   l'ecart montait, le titre passait sur deux lignes et toute la grille sautait en
   pleine animation. Rangee du haut en `auto`, donc exactement la hauteur du
   texte, plus de blanc mort sous le paragraphe. */
#tpv2 .puzzle{--p:1;display:grid;grid-template-columns:340px repeat(8,1fr);
  grid-template-rows:auto 250px;gap:calc((1 - var(--p)) * 12px)}
#tpv2 .puzzle-txt{grid-area:1 / 1;z-index:2;background:var(--fond);
  border-bottom-right-radius:calc(var(--p) * var(--p) * var(--p) * var(--raccord));
  padding:22px 30px 22px 0;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;gap:14px}
#tpv2 .puzzle-txt .chapo{font-size:15.5px!important;max-width:none}

/* Le sixieme morceau, sous le bloc de texte : on ne voit que le quart de disque
   que le rayon du bloc decouvre, et rien du tout tant que --p est bas. C'est ce
   qui permet d'arrondir le coin rentrant de la morsure : on ne peut pas arrondir
   une pointe rentrante s'il n'y a rien derriere. */
#tpv2 .p0{grid-area:1 / 1}

#tpv2 .piece{position:relative;overflow:hidden;background:var(--filet-2);
  border-radius:calc((1 - var(--p)) * 20px)}
#tpv2 .piece img{position:absolute;max-width:none;object-fit:cover}

/* Les quatre coins exterieurs de l'assemblage gardent leur arrondi meme une fois
   assemble : sinon l'image entiere finit a angles vifs alors que tout le reste de
   la page est arrondi. Seuls les coins interieurs retombent a zero. */
#tpv2 .p1{grid-column:span 3;border-top-left-radius:20px}
#tpv2 .p2{grid-column:span 5;border-top-right-radius:20px}
#tpv2 .p3{grid-column:1 / span 4;border-top-left-radius:20px;border-bottom-left-radius:20px}
#tpv2 .p4{grid-column:span 2}
#tpv2 .p5{grid-column:span 3;border-bottom-right-radius:20px}

@media(prefers-reduced-motion:reduce){
  #tpv2 .colle{height:auto}
  #tpv2 .colle-vue{position:static;height:auto;padding:70px 0}
}

@media(max-width:1000px){
  /* Une colonne : plus de puzzle a assembler, le JS se met en retrait et un seul
     morceau reste, qui affiche l'image entiere. En garder six montrerait six fois
     la meme photo. */
  #tpv2 .puzzle{grid-template-columns:1fr;grid-template-rows:none;gap:12px}
  #tpv2 .piece{height:220px;border-radius:12px}
  /* Le JS efface ses styles en ligne sous 1000px : il faut redonner
     explicitement sa taille a l'image, sinon elle garde sa hauteur naturelle et
     laisse une bande de fond sous la photo. */
  #tpv2 .piece img{inset:0;width:100%;height:100%}
  #tpv2 .p0, #tpv2 .p1, #tpv2 .p2, #tpv2 .p3, #tpv2 .p4, #tpv2 .p5{grid-column:1;border-radius:12px}
  #tpv2 .p0, #tpv2 .p2, #tpv2 .p3, #tpv2 .p4, #tpv2 .p5{display:none}
  #tpv2 .puzzle-txt{grid-area:auto / 1;background:0;border-bottom-right-radius:0;padding:0 0 6px}
  /* Pas d'epinglage en une colonne : il n'y a plus de puzzle a assembler. */
  #tpv2 .colle{height:auto}
  #tpv2 .colle-vue{position:static;height:auto;padding:52px 0}
}