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

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

.blog-page{
  position:relative; z-index:2;                      /* les cartes débordent sur le pied de page */
  height:142.3rem;                                   /* la maquette tenait sur 116.5rem avec des
                                                        textes nus ; les cartes, plus hautes,
                                                        demandent 26rem de plus pour ne pas
                                                        passer sous le pied de page */
}

/* La silhouette décorative de la maquette a été retirée : le plan XD la place
   à y=1776 pour une planche haute de 2166 px, donc rognée par le bord de la
   planche. Sur une page réelle rien ne la rogne — elle débordait sous le pied
   de page et seul son bras ressortait, ce qui se lisait comme un bogue. */
.deco--route7{
  /* descendu sous la colonne de droite : le bloc « Articles récents » occupe
     désormais l'espace que ce décor traversait dans la maquette */
  position:absolute; left:146.84rem; top:100rem;
  width:31.74rem; height:25.06rem; pointer-events:none;
}

/* ==========================================================================
   GRILLE D'ARTICLES
   La maquette posait chaque bloc en absolu, sans conteneur : les textes
   flottaient à même la page et le résumé était plus gros que le titre. Les
   articles sont désormais de vraies cartes, de hauteur égale, avec une
   hiérarchie typographique cohérente avec le reste du site.
   ========================================================================== */
.posts-grid{
  position:absolute; left:14rem; top:16.9rem;        /* première vignette a y=411 */
  width:109.7rem;                                    /* 2 x 52.8 + 4.1 de gouttière */
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  grid-auto-rows:1fr;                                /* toutes les cartes à la même hauteur */
  gap:4rem 4.1rem;
}

.post-card{
  display:flex; flex-direction:column;
  background:#fff;
  border:.1rem solid #E8EDF3;
  border-radius:2rem;
  overflow:hidden;
  box-shadow:0 .4rem 2.2rem rgba(7,48,100,.07);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.post-card:hover,
.post-card:focus-within{
  transform:translateY(-.6rem);
  border-color:#D9E2EE;
  box-shadow:0 1.4rem 3.6rem rgba(7,48,100,.16);
}

/* ---------- vignette ---------- */
.post-card__thumb{
  position:relative;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:#EDF1F4;
}
.post-card__thumb img{
  width:100%; height:100%; max-width:none;
  object-fit:cover;
  transition:transform .4s ease;
}
.post-card:hover .post-card__thumb img,
.post-card:focus-within .post-card__thumb img{ transform:scale(1.05); }

/* bouton de lecture : décoratif, seul le titre est cliquable */
.post-card__play{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:6.8rem; height:4.8rem; border-radius:1.2rem;
  background:#F00;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 .4rem 1.6rem rgba(0,0,0,.3);
  transition:transform .22s ease;
}
.post-card:hover .post-card__play{ transform:translate(-50%,-50%) scale(1.08); }
.post-card__play::before{
  content:""; width:1.8rem; height:1.8rem; background:#fff;
  -webkit-mask:var(--m-play) no-repeat center / contain;
  mask:var(--m-play) no-repeat center / contain;
  margin-left:.2rem;
}

/* bandeau « Regarder sur YouTube », posé dans le coin de la vignette */
.post-card__src{
  position:absolute; left:1.2rem; bottom:1.2rem;
  display:inline-flex; align-items:center; gap:.6rem;
  height:3.2rem; padding:0 1.2rem;
  border-radius:.8rem;
  background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(.4rem); backdrop-filter:blur(.4rem);
  font-family:var(--font-body); font-size:1.3rem; color:#fff;
}
.post-card__src b{ color:#fff; font-weight:600; }

/* ---------- corps ---------- */
.post-card__body{
  display:flex; flex-direction:column;
  flex:1;
  padding:2.4rem 2.6rem 2.4rem;
}

.post-card__tag{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:.7rem;
  height:2.8rem; padding:0 1.4rem;
  border-radius:2.8rem;
  background:#DFE7FC;
  font-family:var(--font-body); font-weight:500;
  font-size:1.3rem; line-height:1; color:#1F34DE;
}
.post-card__tag::before{
  content:""; width:.7rem; height:.7rem; border-radius:50%;
  background:currentColor; flex:none;
}
/* une couleur par famille de sujet, pour repérer les articles d'un coup d'œil */
.post-card__tag--vert { background:#DCF3E6; color:#0B7A43; }
.post-card__tag--rouge{ background:#FCE3DD; color:#C22C08; }
.post-card__tag--ambre{ background:#FBEEDA; color:#96601A; }

.post-card__title{
  margin:1.4rem 0 0;
  font-family:var(--font-title); font-weight:700;
  font-size:2.2rem; line-height:2.9rem; letter-spacing:-.01em;
  color:var(--ink-strong);
}
.post-card__title a{
  color:inherit;
  /* toute la carte est cliquable, mais seul le titre porte le lien */
  text-decoration:none;
}
.post-card__title a::after{
  content:""; position:absolute; inset:0; z-index:1;
}
.post-card{ position:relative; }
.post-card__title a:hover{ color:var(--red); }

.post-card__excerpt{
  flex:1;
  margin:1rem 0 0;
  font-family:var(--font-body); font-weight:300;
  font-size:1.7rem; line-height:2.6rem; color:#55606F;
}

.post-card__meta{
  display:flex; align-items:center; gap:1rem;
  margin:2rem 0 0; padding-top:1.6rem;
  border-top:.1rem solid #EDF1F4;
  font-family:var(--font-body); font-size:1.5rem; line-height:1.4;
  color:#55606F;
}
.post-card__meta img{ width:3.2rem; height:3.2rem; border-radius:50%; object-fit:cover; flex:none; }
.post-card__by{ font-weight:600; color:var(--ink); }
.post-card__dot{ width:.4rem; height:.4rem; border-radius:50%; background:#B7C0CC; flex:none; }

@media (prefers-reduced-motion:reduce){
  .post-card, .post-card__thumb img, .post-card__play{ transition:none; }
  .post-card:hover, .post-card:focus-within{ transform:none; }
  .post-card:hover .post-card__thumb img{ transform:none; }
  .post-card:hover .post-card__play{ transform:translate(-50%,-50%); }
}

/* ---------- colonne latérale ---------- */
.side{ position:absolute; left:139.3rem; top:16.9rem; width:38.7rem; }
/* liste compacte des derniers articles */
.side__recent{ display:grid; gap:1.6rem; margin-top:1.6rem; }
.side__recent a{
  display:grid; grid-template-columns:6.4rem 1fr; gap:1.4rem; align-items:center;
  color:var(--ink);
  border-radius:1.2rem;
  transition:background-color .2s ease;
}
.side__recent a:hover,
.side__recent a:focus-visible{ background:#E2E9EF; }
.side__recent img{
  width:6.4rem; height:6.4rem; border-radius:1rem; object-fit:cover; max-width:none;
}
.side__recent span{ display:block; min-width:0; }
.side__recent b{
  display:block;
  font-family:var(--font-title); font-weight:600;
  font-size:1.6rem; line-height:2.1rem; color:var(--ink-strong);
}
.side__recent time{
  display:block; margin-top:.4rem;
  font-family:var(--font-body); font-size:1.4rem; color:#6B7684;
}

.side__box{
  background:#EDF1F4; border-radius:2rem;
  padding:2.6rem 1.9rem 2.2rem;
}
.side__box:first-child{ height:13.4rem; }            /* XD : 387 x 134 */
.side__box:last-child { height:18.8rem; }            /* XD : 387 x 188 */
.side__box + .side__box{ margin-top:1.9rem; }        /* 564 - 411 - 134 = 19 */
.side__label{
  margin:0 0 1.4rem;
  font-family:var(--font-title); font-weight:600;
  font-size:1.7rem; line-height:1.6rem; color:#5A5959;
}
.side__search{
  position:relative;
  height:4.1rem; border-radius:2.9rem; background:#fff;
  display:flex; align-items:center;
}
.side__search input{
  flex:1; min-width:0;
  border:0; background:transparent;
  padding:0 4.6rem 0 1.6rem;
  font-family:var(--font-body); font-size:1.1rem; color:#333;
}
.side__search input::placeholder{ color:#969696; }
.side__search button{
  position:absolute; right:.5rem;
  width:3.1rem; height:3.1rem; border-radius:50%;
  background:var(--blue-dark); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.side__search .ico{ width:1.5rem; height:1.5rem; }

.side__tags{ display:flex; flex-wrap:wrap; gap:1.4rem 1.1rem; }
.side__tags li a{
  display:inline-flex; align-items:center; justify-content:center;
  height:3.4rem; padding:0 1.5rem;
  border-radius:1.7rem; background:#fff;
  font-family:var(--font-body); font-size:1.2rem; color:#333;
  transition:color .2s ease;
}
.side__tags li a:hover{ color:var(--red); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1199px){
  .blog-page{
    height:auto; padding:5rem 0 7rem;
    width:min(var(--wrap),92%); margin-inline:auto;
    display:grid; grid-template-columns:1fr 38.7rem; gap:4rem;
  }
  .blog-page__woman,.deco--route7{ display:none; }
  .posts-grid{ position:static; grid-template-columns:1fr 1fr; gap:5rem 3rem; }
  .post-card__thumb{ width:100%; height:22rem; }
  .side{ position:static; width:auto; }
}

@media (max-width:767px){
  .blog-page{ grid-template-columns:1fr; }
  .posts-grid{ grid-template-columns:1fr; }
}