/* =============================================================================
   blocs/of-grid.css — LA GRILLE DE CARTES DE VOYAGES, partagée par le catalogue (bloc
   `catalogue`, page Nos offres) et par le bloc `voyages_type` (page Sur-mesure).
   =============================================================================
   Repris de la maquette (`style.css:2138-2196`) : la grille, sa variante LISTE (`.of-grid--liste`,
   la bascule « Liste » du catalogue) et les deux classes de l'animation de filtrage
   (`is-leaving`, `is-entering`, posées par `js/blocs/catalogue.js`).
   Sortie de `blocs/voyages-type.css` le 2026-10-07 au deuxième consommateur (règle d'or, D141).
   ============================================================================= */

/* style.css l. 2138 */
.of-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,34px); }
/* style.css l. 2139 */
.of-grid .trip{ flex:initial;
  transition:transform .2s var(--ease), border-color .2s var(--ease), opacity .32s var(--ease); }
/* style.css l. 2142 */
.of-grid .trip.is-leaving{ opacity:0; transform:scale(.94); pointer-events:none; }
/* style.css l. 2143 */
.of-grid .trip.is-entering{ opacity:0; transform:translateY(14px) scale(.97); }
/* style.css l. 2144 */
@media (prefers-reduced-motion: reduce){
  .of-grid .trip.is-leaving,
  .of-grid .trip.is-entering{ transition:none; transform:none; }
}
/* style.css l. 2154 */
.of-grid--liste{ grid-template-columns:1fr; gap:14px; }
/* style.css l. 2155 */
.of-grid--liste .trip{ flex-direction:row; align-items:stretch; overflow:hidden; }
/* style.css l. 2156 */
.of-grid--liste .trip__media{ width:min(34%,300px); flex:none; aspect-ratio:auto; border-radius:20px 0 0 20px; }
/* style.css l. 2157 */
.of-grid--liste .trip__media::after{ border-radius:20px 0 0 20px; }
/* style.css l. 2158 */
.of-grid--liste .trip__body{ flex:1; padding:22px 26px; justify-content:center; }
/* style.css l. 2159 */
.of-grid--liste .trip{ position:relative; }
/* style.css l. 2162 */
.of-grid--liste .trip__foot{ position:absolute; top:0; right:0; height:100%; margin:0; padding:0 26px 0 24px;
  display:flex; align-items:center; gap:24px; }
/* style.css l. 2164 */
.of-grid--liste .trip__body{ padding-right:340px; }
/* style.css l. 2169 */
.of-grid--liste .trip__infos > *{ position:static !important; inset:auto !important; transform:none !important;
  margin:0 !important; float:none !important; }
/* style.css l. 2172 */
.of-grid--liste .trip__infos .trip__tag,
.of-grid--liste .trip__infos .trip__mode,
.of-grid--liste .trip__infos .trip__diff{
  display:inline-flex; align-items:center; height:36px; padding:0 14px; border-radius:9px; }
/* style.css l. 2176 */
.of-grid--liste .trip__infos .trip__tag::after,
.of-grid--liste .trip__infos .trip__tag::before{ display:none; }
/* style.css l. 2179 */
.of-grid--liste .trip__infos .trip__tag{ font-size:11px; font-weight:700; }
/* style.css l. 2181 */
.of-grid--liste .trip__infos .trip__mode,
.of-grid--liste .trip__infos .trip__diff{ background:var(--creme-2); box-shadow:none; border:0; }
/* style.css l. 2183 */
.of-grid--liste .trip__infos .trip__diff svg{ width:16px; height:16px; fill:var(--jaune); }
/* style.css l. 2185 */
.of-grid--liste .trip__infos .trip__diff svg.is-off{ fill:var(--noir); opacity:.28; }
/* style.css l. 2186 */
@media (max-width:900px){
  .of-grid,
  .of-grid--liste{ grid-template-columns:1fr; }
  .of-grid--liste .trip{ flex-direction:column; }
  .of-grid--liste .trip__media{ width:auto; aspect-ratio:3/2; border-radius:20px 20px 0 0; }
  .of-grid--liste .trip__media::after{ border-radius:20px 20px 0 0; }
  .of-grid--liste .trip__body{ padding:22px 24px 20px; }
  .of-grid--liste .trip__foot{ position:static; height:auto; padding:16px 0 0; border-left:0;
    border-top:1px solid rgba(14,14,14,.08); justify-content:center; }
  .of-grid--liste .trip__body{ padding-right:24px; }
}

/* ⚠️ Hors maquette (2026-10-07) : le catalogue MASQUE des cartes rendues par le serveur, là où la
   maquette réécrivait la grille à chaque filtre. Or `.trip` est en `display:flex` — un `hidden`
   seul perdrait contre cette règle d'auteur et la carte resterait visible (même piège que
   `.voy-table tbody[hidden]` sur la fiche voyage). */
.of-grid .trip[hidden]{ display:none; }