/*
 * Photo à côté d'un texte (.ph) : bloc Texte et photo, section « Le besoin » des applications (gabarit commun
 * site/blocs/_photo_texte.html.twig). Correctif graphique 2 après le lot 8 : trois registres, choisis par la longueur
 * du texte (App\Service\Medias\PhotoEtTexte), et non plus par le rédacteur.
 * La rangée (.ph__rang) est une grille à lignes nommées alignée sur la grille de 1 280 px de .wrap :
 * [bord-debut] marge [site-debut] --pad [grille-debut] --a [milieu] --b [grille-fin] --pad [site-fin] marge [bord-fin].
 * Aucun 100vw ni marge négative calculée sur la fenêtre : une photo « au bord » s'étend jusqu'à une ligne site-debut ou
 * site-fin, le bord du site (1 280 px, --max), qui est aussi le bord de l'écran quand il est plus étroit (décision
 * d'Alexandre, 29/09/2026 : jamais une photo sur toute la largeur d'un grand écran).
 * - Registre 1 (.ph--r1) : la photo sur 62 % de la grille, en 4/3 ; le texte dans un panneau blanc (filet de 1 px, filet
 *   haut bleu ciel de 5 px, sans ombre) qui la chevauche de 80 px et descend de 48 px sous son bas ; légende sur bandeau
 *   navy dans l'angle bas, côté extérieur.
 * - Registre 2 (.ph--r2) : une colonne de lecture nue, sur le fond de la bande, et la photo collante dans l'autre
 *   colonne (50 % de la largeur, 45 % sous 1 140 px), jusqu'au bord du site (.ph--bord, source de 1 200 px au moins)
 *   ou jusqu'à la grille, de la hauteur du surtitre à la fin du texte, haute comme le texte dans la limite de la fenêtre
 *   (720 px au plus, 420 au moins) ; gouttière de 80 px ; légende dessous, en petit texte gris.
 * - Registre 3 (.ph--r3) : la rangée du registre 2 pour le premier temps, puis la suite (.ph__suite) sous la photo, dans
 *   une seule colonne de lecture décalée d'un sixième de la grille.
 * Collant : sous l'en-tête (--haut-entete) et le sommaire collant quand il existe (.ph--sous-sommaire), jamais plus haut
 * que la fenêtre. Point focal : classes pf-x* pf-y* de base.css. Sous 900 px : la photo au-dessus, bord à bord, en 16/9,
 * non collante, légende dessous, puis le texte sans cadre.
 */
.ph{--bande:clamp(56px,7vw,92px);--gout:80px;--part:.5;
  --g:min(calc(var(--max) - 2 * var(--pad)), calc(100% - 2 * var(--pad)));
  --haut-entete:81px;--haut-sommaire:0px;--ph-haut:calc(var(--haut-entete) + var(--haut-sommaire));
  --ph-h:min(720px, max(420px, calc(100vh - var(--ph-haut) - 32px)), calc(100vh - var(--ph-haut) - 16px))}
/* Sommaire collant de la fiche produit (produit/sommaire.css), sous l'en-tête */
.ph--sous-sommaire{--haut-sommaire:57px}
.ph__rang{display:grid;
  grid-template-columns:[bord-debut] minmax(0,1fr) [site-debut] var(--pad) [grille-debut] var(--a) [milieu] var(--b) [grille-fin] var(--pad) [site-fin] minmax(0,1fr) [bord-fin]}
.ph__t,.ph__p{grid-row:1;min-width:0}
.ph__p{margin:0}
.ph__cadre{position:relative;overflow:hidden;background:var(--navy)}
.ph__cadre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pf-x,50%) var(--pf-y,50%)}
.ph__p figcaption{font-size:.8rem;line-height:1.45;color:var(--body)}
/* Registre 3 : la suite, sous la photo, décalée d'un sixième de la grille */
.ph__suite{max-width:var(--max);margin-inline:auto;padding:44px var(--pad) var(--bande)}
.ph__suite > .lec{max-width:66ch;margin-left:16.667%}
.ph__suite > .lec > :first-child{margin-top:0}

@media (min-width:901px){
  /* Registre 1 : photo et panneau */
  .ph--r1.ph--d{--a:calc(var(--g) * .38);--b:calc(var(--g) * .62)}
  .ph--r1.ph--g{--a:calc(var(--g) * .62);--b:calc(var(--g) * .38)}
  .ph--r1{padding-bottom:calc(var(--bande) + 48px)}
  .ph--r1 .ph__t{position:relative;z-index:2;align-self:end;margin-bottom:-48px;background:#fff;
    border:1px solid var(--line);border-top:5px solid var(--sky);padding:clamp(24px,3vw,42px)}
  .ph--r1.ph--d .ph__t{grid-column:grille-debut / milieu;margin-right:-80px}
  .ph--r1.ph--d .ph__p{grid-column:milieu / grille-fin}
  .ph--r1.ph--g .ph__t{grid-column:milieu / grille-fin;margin-left:-80px}
  .ph--r1.ph--g .ph__p{grid-column:grille-debut / milieu}
  .ph--r1 .ph__p{position:relative;align-self:start}
  .ph--r1 .ph__cadre{aspect-ratio:4/3}
  .ph--r1 .ph__p figcaption{position:absolute;bottom:0;z-index:1;background:var(--navy);color:#fff;line-height:1.3;padding:10px 16px}
  .ph--r1.ph--d .ph__p figcaption{right:0}
  .ph--r1.ph--g .ph__p figcaption{left:0}

  /* Registres 2 et 3 : colonne de lecture nue et photo collante, séparées par le blanc de la gouttière */
  .ph--r2.ph--d,.ph--r3.ph--d{--a:calc(var(--g) * var(--part));--b:calc(var(--g) * (1 - var(--part)))}
  .ph--r2.ph--g,.ph--r3.ph--g{--a:calc(var(--g) * (1 - var(--part)));--b:calc(var(--g) * var(--part))}
  .ph--r2,.ph--r3{padding-block:0}
  .ph--r2 .ph__t,.ph--r3 .ph__t{align-self:start;padding-block:var(--bande);max-width:calc(66ch + var(--gout))}
  .ph--r3 .ph__t{padding-bottom:clamp(40px,5vw,64px)}
  .ph--r2.ph--d .ph__t,.ph--r3.ph--d .ph__t{grid-column:grille-debut / milieu;padding-right:var(--gout)}
  .ph--r2.ph--g .ph__t,.ph--r3.ph--g .ph__t{grid-column:milieu / grille-fin;padding-left:var(--gout)}
  /* La photo prend la hauteur du texte, dans la limite de la fenêtre (720 px au plus, 420 au moins) : collante quand le
     texte est plus long qu'elle */
  .ph--r2 .ph__p,.ph--r3 .ph__p{align-self:stretch;position:sticky;top:var(--ph-haut);max-height:var(--ph-h);
    min-height:min(420px, calc(100vh - var(--ph-haut) - 16px));display:flex;flex-direction:column}
  .ph--r2 .ph__cadre,.ph--r3 .ph__cadre{flex:1 1 auto;min-height:0}
  .ph--r2 .ph__p figcaption,.ph--r3 .ph__p figcaption{flex:none;padding:10px 0 0}
  .ph--r2.ph--d .ph__p,.ph--r3.ph--d .ph__p{grid-column:milieu / grille-fin}
  .ph--r2.ph--g .ph__p,.ph--r3.ph--g .ph__p{grid-column:grille-debut / milieu}
  .ph--r2.ph--d.ph--bord .ph__p,.ph--r3.ph--d.ph--bord .ph__p{grid-column:milieu / site-fin}
  .ph--r2.ph--g.ph--bord .ph__p,.ph--r3.ph--g.ph--bord .ph__p{grid-column:site-debut / milieu}
  .ph--r2.ph--g.ph--bord .ph__p figcaption,.ph--r3.ph--g.ph--bord .ph__p figcaption{padding-left:var(--pad)}
  /* La photo commence à la hauteur du surtitre et s'arrête avec la colonne de texte : elle ne touche pas la section voisine */
  .ph--r2 .ph__p,.ph--r3 .ph__p{margin-block:var(--bande)}
  .ph--r3 .ph__p{margin-bottom:clamp(40px,5vw,64px)}
}
@media (min-width:901px) and (max-width:1140px){
  .ph{--part:.55;--haut-entete:67px}
}
@media (max-width:900px){
  .ph{padding-block:0}
  .ph .ph__rang{grid-template-columns:[bord-debut] var(--pad) [grille-debut] minmax(0,1fr) [grille-fin] var(--pad) [bord-fin]}
  .ph__p{grid-column:bord-debut / bord-fin}
  .ph__cadre{aspect-ratio:16/9}
  .ph__p figcaption{padding:10px var(--pad) 0}
  .ph__t{grid-row:2;grid-column:grille-debut / grille-fin;padding:28px 0 var(--bande)}
  .ph--r3 .ph__t{padding-bottom:0}
  .ph__suite > .lec{max-width:none;margin-left:0}
}