/* Rail de cartes à photo (.og) - les autres gammes de la famille, les autres applications, le bloc Liens et les pages
   sœurs d'une rubrique. Sans photo, une tuile marine porte l'icône du contenu. Cartes séparées, comme les tuiles et les
   actualités (décision d'Alexandre, 22/09/2026 : plus de grille collée à filets de 1 px) : même écart, même filet, même
   survol. */
.og{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;list-style:none;margin:0;padding:0}
.og--1{grid-template-columns:repeat(1,minmax(0,1fr));max-width:340px}
.og--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:708px}
.og--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.og--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.og li{display:grid}
.og a{display:grid;grid-template-rows:auto 1fr;background:#fff;border:1px solid var(--line);color:var(--navy);
  transition:border-color .18s,box-shadow .18s}
.og a:hover{border-color:var(--blue);box-shadow:var(--sh-2);text-decoration:none}
.og__p{aspect-ratio:4/3;overflow:hidden;background:var(--navy)}
.og__p img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.og a:hover img{transform:scale(1.05)}
.og__t{padding:18px 20px 20px;display:grid;gap:4px;align-content:start}
.og__t b{font-family:var(--ui);font-weight:800;font-size:1.04rem}
.og__t span{font-size:.84rem;color:var(--mute)}
.og__t .ic{color:var(--blue)}
.og__p--t{display:grid;place-items:center;
  background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.1) 1px,transparent 0) 0 0/16px 16px,var(--navy)}
.og__p--t .ic{font-size:2rem;color:#5CC1EC}

/* Page Implantations sans image de tête : la carte des implantations, sur le fond de sa bande de tête (aplat navy et
   camouflage en trame de points ; décision d'Alexandre, 22/09/2026) */
.og__p--carte{position:relative;background:var(--navy)}
.og__p--carte::before{content:"";position:absolute;inset:0;background:url("../../../images/site/trame-camouflage-1-fifnXe7.svg") center/cover no-repeat;
  opacity:.13;pointer-events:none}
.og__p--carte img{position:relative}

@media (max-width:1000px){
  .og{gap:22px}
  .og,.og--3,.og--5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .og--5 li:last-child:nth-child(odd){grid-column:1/-1}
  .og--5 li:last-child:nth-child(odd) .og__p{aspect-ratio:16/7}
}
/* Sous 460 px, tous les rails passent sur une colonne : deux cartes séparées par leur écart n'y laissent plus la place
   d'un mot long (« Accommodation, » à 320 px) */
@media (max-width:460px){
  .og,.og--5{grid-template-columns:minmax(0,1fr)}
  .og--5 li:last-child:nth-child(odd) .og__p{aspect-ratio:4/3}
  .og--1{max-width:none}
}