/* ---------- raccordement : bande pleine largeur ---------- */
.raccord{padding-top:clamp(56px,7vw,92px)}
.gal{display:flex;gap:2px;background:var(--line);
  height:clamp(360px,31vw,470px)}
.gal__i{position:relative;display:block;flex:1 1 0;min-width:0;overflow:hidden;
  background:var(--navy);
  transition:flex-grow .55s cubic-bezier(.22,.72,.28,1),filter .45s ease}
.gal__i:hover{text-decoration:none}
.gal__i picture{display:contents}
.gal__i img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* au survol d'une planche, elle s'élargit et les autres se resserrent */
.gal:hover .gal__i,.gal:focus-within .gal__i{flex-grow:.84;filter:saturate(.82) brightness(.92)}
.gal .gal__i:hover,.gal .gal__i:focus-visible{flex-grow:1.64;filter:none}
.gal__c{position:absolute;left:0;right:0;bottom:0;display:block;
  padding:74px 22px 20px;
  background:linear-gradient(transparent 0%,rgba(14,28,39,.34) 34%,
    rgba(14,28,39,.80) 72%,rgba(14,28,39,.95) 100%)}
/* filet de titre : il s'allonge quand la planche s'ouvre */
.gal__r{display:block;width:26px;height:2px;background:#38ACDE;margin-bottom:14px;
  transition:width .5s cubic-bezier(.22,.72,.28,1)}
.gal__t{display:block;font-family:var(--ui);font-weight:700;font-size:1.05rem;
  letter-spacing:-.016em;line-height:1.22;color:#fff;
  text-shadow:0 1px 12px rgba(9,18,26,.5)}
/* la précision n'apparaît qu'à l'ouverture : la place gagnée sert à quelque chose */
.gal__s{display:block;font-family:var(--tx);font-weight:400;font-size:.81rem;
  line-height:1.42;color:#CFE6F4;max-height:0;opacity:0;overflow:hidden;
  transform:translateY(7px);
  transition:max-height .5s cubic-bezier(.22,.72,.28,1),
    opacity .38s ease .08s,transform .5s cubic-bezier(.22,.72,.28,1) .08s,
    margin-top .5s cubic-bezier(.22,.72,.28,1)}
.gal .gal__i:hover .gal__r,.gal .gal__i:focus-visible .gal__r{width:54px}
.gal .gal__i:hover .gal__s,.gal .gal__i:focus-visible .gal__s{
  max-height:4.5em;opacity:1;transform:none;margin-top:6px}
@media (max-width:900px){
  .gal{flex-wrap:wrap;height:auto}
  .gal__i{flex:1 1 calc(50% - 1px);aspect-ratio:4/5}
  .gal:hover .gal__i,.gal:focus-within .gal__i,
  .gal .gal__i:hover,.gal .gal__i:focus-visible{flex-grow:1;filter:none}
  .gal__c{padding-top:60px}
  .gal__s{max-height:4.5em;opacity:1;transform:none;margin-top:6px}
}
@media (max-width:560px){.gal__i{flex:1 1 100%;aspect-ratio:5/4}}

/* En-tête d'une bande photographique hors de l'accueil (application, bloc Bande des pages) */
.gal-h{margin-bottom:clamp(26px,3vw,40px)}