/* ==========================================================================
   SKYWAY TRAVELERS — page « Notre Réseaux »
   Source : NEW LIEN MAQUETTE.xd, plan « Liste services – 15 » (1920 × 3061)
   Origine de section = 242.
   ========================================================================== */

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

.reseau{
  position:relative;
  height:205.5rem;                                   /* 242 -> 2297 (haut du pied de page) */
}

/* ---------- bloc « Partenaires » ----------
   Le XD calait la colonne sur 345 px : la police du site y tenait vingt lignes
   qui débordaient sur les logos. On reprend la largeur de colonne de texte
   commune au site (63,5 rem) : longueur de ligne lisible, bord droit aligné
   sur le mur de logos, et le texte s'arrête au-dessus de celui-ci. */
.reseau__intro{ position:absolute; left:27.5rem; top:16.9rem; width:63.5rem; }
.reseau__intro .title{ margin:0; }
.reseau__intro p{
  margin:2.6rem 0 0;
  font-family:var(--font-title); font-size:2.3rem; line-height:3rem;
  color:var(--ink);
}

/* ---------- mur de logos ----------
   Le XD posait les quatre logos un à un, à des tailles très inégales : ils se
   recouvraient. On les remet dans une grille 2 × 2, chaque logo étant centré
   dans une cellule de gabarit identique — plus aucun chevauchement possible. */
.reseau__logos{
  position:absolute; left:27.5rem; top:55rem;
  width:63.5rem;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  grid-auto-rows:14rem;
  gap:4rem 3.5rem;
}
.reseau__logos > li{ display:flex; align-items:center; justify-content:center; }
.reseau__logo{
  width:auto; height:auto;
  max-width:100%; max-height:100%;
  object-fit:contain;
}
/* tailles relevées dans la maquette, ramenées dans le gabarit de cellule */
.reseau__logo--aicom      { width:28rem; }
.reseau__logo--ibsa       { height:14rem; }
.reseau__logo--abidjanaise{ width:24.1rem; }

/* Labogem : le fichier fourni contient le bandeau complet (bloc vert +
   « laboratoire de géotechnique » + certification). La maquette n'en montre
   que le bloc vert : le cadre rejoue ce masque par un simple recadrage. */
.reseau__logo-frame{ display:block; width:24rem; height:7rem; overflow:hidden; }
.reseau__logo--labogem{
  width:100%; height:100%;
  max-width:none; max-height:none;
  object-fit:cover; object-position:left center;
}

/* ---------- photos ---------- */
.reseau__photo{ position:absolute; max-width:none; object-fit:cover; border-radius:2rem; }
.reseau__photo--a{ left:99.9rem; top:15.4rem; width:31.1rem; height:38.8rem; }
.reseau__photo--b{ left:132.9rem; top:15.4rem; width:31.2rem; height:70.8rem; }
.reseau__photo--c{ left:99.9rem; top:56.3rem; width:31.1rem; height:29.9rem; }

/* ---------- carte du monde ---------- */
.reseau__map{
  position:absolute; left:-28.466rem; top:91.839rem; /* XD : (-284,66 ; 1160,39) */
  width:206.513rem; height:137.675rem;
  max-width:none; object-fit:contain; pointer-events:none;
}

/* ---------- panneau des implantations ---------- */
.reseau__panel{
  position:absolute; left:101.5rem; top:103.5rem;    /* XD : (1015, 1277) 748 x 1092 */
  width:74.8rem; height:109.2rem;
  background:#fff; border-radius:2rem;
  box-shadow:0 .6rem 2.8rem rgba(7,48,100,.08);
}
.reseau__list{ position:absolute; left:10.2rem; }
.reseau__list--a{ top:12.6rem; }                     /* 1re ligne de base 1430 */
.reseau__list--b{ top:49.2rem; }                     /* 1re ligne de base 1796 */
.reseau__list li{
  display:flex; align-items:center; gap:1.5rem;
  height:6rem;                                       /* XD : interligne 60 px */
  font-family:var(--font-title); font-weight:600; font-size:2.5rem;
  letter-spacing:-.01em; color:var(--ink);
}
.reseau__list .ico{ width:2rem; height:2.6rem; flex:none; }
.reseau__list--a .ico{ color:#2D9CDB; }
.reseau__list--b .ico{ color:var(--red); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1199px){
  .reseau{
    height:auto; padding:5rem 0 7rem;
    width:min(var(--wrap),92%); margin-inline:auto;
    display:grid; grid-template-columns:1fr 1fr; gap:4rem;
  }
  .reseau__intro,.reseau__photo,.reseau__panel,.reseau__map,
  .reseau__logos,.reseau__logo{
    position:static; width:auto;
  }
  .reseau__intro{ grid-column:1 / -1; }

  /* le mur de logos reprend toute la largeur et respire davantage */
  .reseau__logos{
    grid-column:1 / -1;
    grid-auto-rows:auto;
    gap:4rem 3rem;
  }
  /* hors maquette, Labogem s'affiche en entier : le recadrage est annulé */
  .reseau__logo-frame{ width:auto; height:auto; overflow:visible; }
  .reseau__logo{ height:auto; max-width:100%; max-height:8rem; object-fit:contain; }
  .reseau__logo--labogem{
    width:auto; height:auto; max-width:100%; object-fit:contain;
  }
  .reseau__photo{ height:26rem; }
  .reseau__map{ grid-column:1 / -1; height:auto; }
  .reseau__panel{ grid-column:1 / -1; height:auto; padding:4rem 3rem; }
  .reseau__list{ position:static; }
  .reseau__list li{ height:auto; padding:.8rem 0; }
}

@media (max-width:767px){
  .reseau{ grid-template-columns:1fr; }
  /* sur mobile les logos passent en colonne unique : chacun dispose de toute
     la largeur et reste lisible, y compris le bandeau Labogem très allongé */
  .reseau__logos{ grid-template-columns:1fr; gap:3.5rem; }
}