/* =========================================================
   LokoRiko — page « Locations / Où nous trouver ? »
   S'appuie sur style.css (design system) + carte.css (--brown, .intro)
   ========================================================= */

/* =========================================================
   HERO — salle du restaurant
   ========================================================= */
.loc-hero{line-height:0}
.loc-hero img{
  width:100%;height:clamp(240px,59vw,800px);
  object-fit:cover;object-position:center 52%;
}

/* =========================================================
   OÙ NOUS TROUVER ?
   ========================================================= */
.intro--loc{padding-block:clamp(30px,4vw,64px) clamp(26px,3.4vw,54px)}
.intro--loc .intro__inner{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
}
.intro--loc .intro__brand{
  padding-left:clamp(0px,3vw,60px);
  display:flex;flex-direction:column;align-items:flex-start;
}
.intro--loc .intro__kicker{white-space:nowrap}
.intro--loc .intro__arrow{
  top:clamp(-6px,.4vw,6px);left:auto;right:clamp(6px,4vw,70px);
}
.intro--loc .intro__wordmark{align-self:center;margin-top:2px}

.intro--loc .intro__body{align-items:flex-end;gap:clamp(12px,1.6vw,22px)}
.intro--loc .intro__body p{max-width:520px}

/* =========================================================
   CARTE / PLAN D'ACCÈS
   ========================================================= */
.loc-map{line-height:0;background:var(--cream-2)}
.loc-map a{display:block}
.loc-map img{
  width:100%;height:clamp(260px,45vw,620px);
  object-fit:cover;object-position:center center;
  transition:transform .8s var(--ease);
}
.loc-map a:hover img{transform:scale(1.015)}

/* =========================================================
   INFORMATIONS PRATIQUES
   ========================================================= */
.infos{padding-block:clamp(30px,4vw,66px)}
.infos__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,3.4vw,60px);
  width:min(100% - var(--gut)*2,1180px);
}
.info{display:flex;align-items:flex-start;gap:clamp(14px,1.8vw,28px)}
.info__icon{
  width:clamp(46px,4.8vw,72px);height:auto;flex:0 0 auto;margin-top:2px;
  transition:transform .4s var(--ease);
}
.info:hover .info__icon{transform:scale(1.06)}
.info__body h2{
  color:var(--brown);font-weight:700;
  font-size:clamp(13px,1.2vw,18px);line-height:1.2;
}
.info__body p{
  margin-top:.25em;color:var(--brown);font-weight:500;
  font-size:clamp(12px,1.05vw,16px);line-height:1.45;
}
.info__body p a{transition:color .25s var(--ease)}
.info__body p a:hover{color:var(--orange);text-decoration:underline}
.info__body .btn{margin-top:clamp(10px,1.2vw,18px)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .intro--loc .intro__inner{grid-template-columns:1fr;row-gap:26px}
  .intro--loc .intro__brand{padding-left:0}
  .intro--loc .intro__wordmark{align-self:flex-start;margin-left:clamp(0px,4vw,40px)}
  .intro--loc .intro__body{align-items:flex-start}

  .infos__grid{grid-template-columns:1fr;gap:26px;max-width:620px}
}

@media (max-width:720px){
  .loc-hero img{height:clamp(200px,54vw,360px)}
  .loc-map img{height:clamp(240px,62vw,380px)}

  .intro--loc .intro__kicker{white-space:normal;font-size:clamp(20px,6.4vw,30px)}
  .intro--loc .intro__arrow{right:8%;top:-6px;width:52px}
  .intro--loc .intro__wordmark{align-self:flex-start}

  .infos{padding-block:28px}
  .info__icon{width:44px}
}