/* ==========================================================================
   SKYWAY TRAVELERS — page « Trip tour »
   Source : NEW LIEN MAQUETTE.xd, plan « Liste services – 3 » (1920 × 2300)
   Origine de section = 242.

   Écart assumé par rapport au calage XD (demande client « aération ») :
   - gouttières de la grille élargies (32/21,5 -> 40/30) ;
   - rembourrage interne des cartes régularisé et symétrique ;
   - la section revient dans le flux : la pagination passait auparavant
     sous le pied de page et n'était plus visible.
   ========================================================================== */

.phero--trip{
  background:url("../images/hero-1.webp") center -53.5rem / 192rem auto no-repeat;
}

.trip-page{
  position:relative;
  padding:15rem 0 7rem;                              /* première carte à y=392 */
}

/* grille 3 colonnes : les bords restent calés sur le reste du site
   (275 -> 1641), seules les gouttières s'élargissent */
.trip-grid{
  width:136.6rem;
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  grid-auto-rows:1fr;                                /* toutes les rangées à la même hauteur */
  gap:4rem 3rem;
}

/* --------------------------------------------------------------------------
   Carte de séjour
   Montage en colonne flex : le bloc haut absorbe la place libre, le filet et
   le pied de carte restent alignés d'une carte à l'autre quelle que soit la
   longueur du titre.
   -------------------------------------------------------------------------- */
.tourcard{
  position:relative;
  display:flex; flex-direction:column;
  min-height:56.8rem;                                /* hauteur de la maquette */
  background:#fff;
  border-radius:1rem;
  box-shadow:var(--shadow-card);
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}

/* fenêtre photo 441 x 280 : la photo garde le cadrage de la maquette */
.tourcard__media{
  position:relative;
  height:28rem; flex:none;
  overflow:hidden;
  background:#F4EDE8;
}
.tourcard__photo{
  position:absolute; left:-5.4rem; top:-.9rem;
  width:67.3rem; height:35.1rem;
  max-width:none; object-fit:cover;
  transition:transform .25s ease;
}

.tourcard__body{
  display:flex; flex-direction:column; flex:1;
  padding:2.8rem 3.6rem 3.2rem;
}
.tourcard__head{
  flex:1;
  padding-bottom:2rem;                               /* respiration mini avant le filet */
}

.tourcard__place{
  display:flex; align-items:center; gap:.9rem;
  margin:0;
  font-family:var(--font-title); font-size:2.1rem; line-height:3.3rem; color:#696969;
}
.tourcard__place .ico{ width:1.8rem; height:2.2rem; color:var(--red); flex:none; }

.tourcard__name{
  margin:1rem 0 0;
  font-family:var(--font-title); font-weight:700;
  font-size:2.3rem; line-height:3rem; letter-spacing:-.01em; color:#151515;
}
.tourcard__name a{ transition:color .2s ease; }
/* lien étendu : toute la carte est cliquable, le focus reste sur le titre */
.tourcard__name a::after{ content:""; position:absolute; inset:0; }

.tourcard__rating{
  display:flex; align-items:center; gap:.8rem;
  margin-top:1.9rem;
  font-family:var(--font-title); font-size:1.9rem; line-height:3.3rem; color:#696969;
}
.tourcard__rating .ico{ width:2.2rem; height:2.2rem; color:#FFBA00; flex:none; }
.tourcard__rating b{ font-weight:700; font-size:2.2rem; color:#151515; }

.tourcard__rule{
  margin:0;
  border:0; border-top:.05rem solid #B9B9B9;
}

.tourcard__foot{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1.6rem;
  margin-top:1.4rem;
}
.tourcard__from{
  margin:0;
  font-family:var(--font-title); font-size:1.7rem; line-height:2.4rem; color:#696969;
}
.tourcard__price{
  margin:0;
  font-family:var(--font-title); font-size:1.9rem; line-height:2.4rem; color:#000;
}
.tourcard__days{
  display:flex; align-items:center; gap:.8rem;
  margin:0;
  font-family:var(--font-title); font-size:1.9rem; line-height:2.4rem; color:#696969;
  white-space:nowrap;
}
.tourcard__days .ico{ width:1.9rem; height:1.9rem; color:#696969; flex:none; }

/* ---------- animation locale : survol et focus clavier ----------
   Élévation courte de l'ombre, léger relevé de la carte et zoom très doux
   de la photo dans son cadre. :focus-within donne le même rendu au clavier. */
.tourcard:hover,
.tourcard:focus-within{
  transform:translateY(-.6rem);
  box-shadow:0 1.4rem 3.4rem rgba(7,48,100,.18);
}
.tourcard:hover .tourcard__photo,
.tourcard:focus-within .tourcard__photo{ transform:scale(1.05); }
.tourcard:hover .tourcard__name a,
.tourcard:focus-within .tourcard__name a{ color:var(--blue); }

/* pagination : pastilles de 40 px, pas de 50 (XD : y=1656) */
.pager{
  display:flex; justify-content:center; gap:1rem;
  margin-top:7rem;
}
.pager a{
  width:4rem; height:4rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-title); font-weight:700; font-size:2.3rem;
  color:var(--blue);
  box-shadow:inset 0 0 0 .2rem var(--blue);
  transition:background-color .2s ease, color .2s ease;
}
.pager a.is-current,
.pager a:hover,
.pager a:focus-visible{ background:var(--blue); color:#fff; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1199px){
  .trip-page{ padding:5rem 0 7rem; }

  /* responsive.css remet .trip-grid en statique et en largeur auto :
     on lui rend ses gouttières avec un sélecteur plus spécifique */
  .trip-page .trip-grid,
  .tdtrust .trip-grid{
    width:min(var(--wrap), 92%) !important;
    margin-inline:auto !important;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:3rem;
  }

  .tourcard{ min-height:0; }
  .tourcard__media{ height:24rem; }
  .tourcard__photo{ position:static; width:100%; height:100%; }
  .tourcard__body{ padding:2.4rem 2.8rem 2.8rem; }
  .tourcard__head{ padding-bottom:1.6rem; }
}

@media (max-width:767px){
  .trip-page .trip-grid,
  .tdtrust .trip-grid{ grid-template-columns:minmax(0, 1fr); }
}

/* ==========================================================================
   MOUVEMENT RÉDUIT
   Les transitions sont déjà neutralisées globalement ; on annule ici les
   déplacements eux-mêmes pour ne garder que le changement d'ombre.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .tourcard,
  .tourcard__photo,
  .tourcard__name a{ transition:none; }
  .tourcard:hover,
  .tourcard:focus-within{ transform:none; }
  .tourcard:hover .tourcard__photo,
  .tourcard:focus-within .tourcard__photo{ transform:none; }
}