/* =========================================================
   LokoRiko — page « Le Concept »
   S'appuie sur style.css (design system) + carte.css (--brown, intro, panels)
   ========================================================= */

/* =========================================================
   HERO
   ========================================================= */
.concept-hero{line-height:0}
.concept-hero img{
  width:100%;height:clamp(280px,66vw,900px);
  object-fit:cover;object-position:center 46%;
}

/* =========================================================
   INTRO « LE CONCEPT »
   ========================================================= */
.intro--concept{padding-block:clamp(30px,4vw,64px) clamp(28px,3.6vw,58px)}
.intro--concept .intro__inner{grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr)}
.intro--concept .intro__body{align-items:flex-start;gap:0}
.intro--concept .intro__body .lead{
  font-weight:700;color:var(--brown);
  font-size:clamp(14px,1.3vw,19px);line-height:1.3;margin-bottom:.4em;
}
.intro--concept .intro__body p{font-weight:500}
.intro--concept .intro__arrow{top:-6px;left:min(72%,320px)}

/* =========================================================
   UNE NOUVELLE VISION
   ========================================================= */
.vision{
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  background:var(--cream-2);
}
.vision__text{
  position:relative;
  padding:clamp(30px,4.4vw,74px) clamp(20px,3vw,54px) clamp(120px,14vw,215px)
          max(var(--gut),calc((100vw - 1420px)/2));
  display:flex;flex-direction:column;justify-content:center;
}
.vision__inner{max-width:620px}
.vision__title{
  font-family:'Laroka',cursive;color:var(--orange);text-transform:uppercase;
  font-size:clamp(24px,3.1vw,46px);line-height:1.06;letter-spacing:.01em;
  margin-bottom:clamp(14px,1.8vw,28px);
}
.vision__inner p{
  color:var(--brown);font-weight:500;text-align:justify;
  font-size:clamp(12.5px,1.02vw,15.5px);line-height:1.45;
}
.vision__inner p + p,
.vision__inner h3{margin-top:clamp(12px,1.4vw,22px)}
.vision__inner h3{
  color:var(--orange);font-weight:700;
  font-size:clamp(13px,1.05vw,16px);line-height:1.2;margin-bottom:2px;
}
.vision__inner h3 + p{margin-top:0}

.vision__disc{
  position:absolute;left:0;bottom:clamp(20px,3vw,54px);
  transform:translateX(-38%);
  width:clamp(80px,9.5vw,140px);aspect-ratio:1;border-radius:50%;
  background:var(--orange);display:grid;place-items:center;
}
.vision__disc img{width:52%;margin-left:14%}

.vision__media{position:relative;min-height:clamp(300px,44vw,700px)}
.vision__media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 40%;
}

/* =========================================================
   BANDE STATISTIQUES
   ========================================================= */
.stats{background:var(--orange);padding-block:clamp(24px,3.2vw,52px)}
.stats__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2.4vw,40px);text-align:center;
}
.stat__num{
  font-family:'Laroka',cursive;color:var(--cream);
  font-size:clamp(30px,3.9vw,58px);line-height:1;
  -webkit-text-stroke:2px var(--cream);paint-order:stroke fill;
}
.stat__label{
  margin-top:.25em;color:var(--brown);font-weight:700;
  font-size:clamp(12px,1.05vw,16px);line-height:1.2;
}

/* =========================================================
   BIEN PLUS QU'UN RESTAURANT
   ========================================================= */
.spirit{position:relative;overflow:hidden;padding-block:clamp(30px,4vw,64px)}
.spirit__inner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(20px,3vw,56px);align-items:start;
  padding-right:clamp(0px,11vw,200px);
}
.spirit__head{position:relative}
.spirit__title{
  font-family:'Laroka',cursive;color:var(--orange);text-transform:uppercase;
  font-size:clamp(17px,1.95vw,29px);line-height:1.15;letter-spacing:.01em;
}
.spirit__arrow{
  position:absolute;right:clamp(4px,2vw,34px);bottom:clamp(-46px,-2.6vw,-22px);
  width:clamp(50px,4.4vw,70px);
}
.spirit__text{
  color:var(--brown);font-weight:500;text-align:justify;
  font-size:clamp(12.5px,1.05vw,16px);line-height:1.45;
}
.spirit__wordmark{
  position:absolute;right:0;top:50%;transform:translate(38%,-50%);
  width:clamp(140px,17vw,270px);pointer-events:none;user-select:none;
}

/* =========================================================
   IMAGE ÉQUIPE + CARTE FONDATEUR
   ========================================================= */
.founder{position:relative;padding-bottom:clamp(30px,4vw,64px)}
.founder__media{line-height:0}
.founder__media img{
  width:100%;height:clamp(260px,50vw,700px);
  object-fit:cover;object-position:center 55%;
}
.founder__card{
  position:relative;z-index:2;margin:0 auto;
  margin-top:clamp(-90px,-9vw,-40px);
  width:min(100% - var(--gut)*2,1200px);
  background:var(--orange);border-radius:clamp(18px,2.2vw,34px);
  box-shadow:0 18px 44px rgba(114,61,30,.22);
  padding:clamp(18px,2vw,30px) clamp(20px,2.6vw,42px);
  display:grid;grid-template-columns:auto minmax(0,.72fr) minmax(0,1.6fr);
  align-items:center;gap:clamp(16px,2.4vw,44px);
}
.founder__avatar{
  width:clamp(58px,6.2vw,96px);aspect-ratio:1;border-radius:50%;
  background:var(--cream);display:block;
}
.founder__who{display:flex;flex-direction:column;color:var(--cream);font-weight:700}
.founder__name{font-size:clamp(13px,1.15vw,17px);text-transform:uppercase;letter-spacing:.02em}
.founder__role{font-size:clamp(13px,1.15vw,17px)}
.founder__quote{
  margin:0;color:var(--cream);font-weight:700;
  font-size:clamp(12px,1.02vw,15.5px);line-height:1.42;
}

/* =========================================================
   NOS VALEURS
   ========================================================= */
.values-concept{padding-block:clamp(24px,3.2vw,56px) clamp(34px,4.6vw,80px)}
.values-concept__title{
  font-family:'Laroka',cursive;color:var(--orange);text-transform:uppercase;
  font-size:clamp(22px,2.6vw,38px);line-height:1;
  margin-bottom:clamp(20px,2.8vw,44px);
}
.values-concept__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.8vw,48px) clamp(20px,3.4vw,60px);
}
.value-c{display:flex;align-items:flex-start;gap:clamp(12px,1.5vw,24px)}
.value-c img{
  width:clamp(52px,5.9vw,88px);height:auto;flex:0 0 auto;
  transition:transform .4s var(--ease);
}
.value-c:hover img{transform:scale(1.07)}
.value-c h3{
  color:var(--orange);font-weight:700;
  font-size:clamp(13px,1.2vw,18px);line-height:1.2;
}
.value-c p{
  margin-top:2px;color:var(--brown);font-weight:500;text-align:justify;
  font-size:clamp(11.5px,.98vw,15px);line-height:1.4;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .vision{grid-template-columns:1fr}
  .vision__text{
    padding:clamp(28px,5vw,52px) var(--gut) clamp(110px,17vw,150px);
    order:2;
  }
  .vision__inner{max-width:none}
  .vision__media{order:1;min-height:min(72vw,520px)}
  .vision__disc{left:auto;right:var(--gut);transform:none;bottom:clamp(16px,3vw,32px)}

  .spirit__inner{grid-template-columns:1fr;padding-right:clamp(70px,13vw,130px);gap:34px}
  .spirit__arrow{right:auto;left:min(72%,340px);bottom:-34px}
  .spirit__wordmark{width:clamp(120px,15vw,180px);transform:translate(40%,-50%)}

  .founder__card{
    grid-template-columns:auto minmax(0,1fr);
    row-gap:14px;
  }
  .founder__quote{grid-column:1 / -1}

  .values-concept__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:720px){
  .concept-hero img{height:clamp(220px,58vw,400px)}

  .intro--concept .intro__inner{grid-template-columns:1fr}
  .intro--concept .intro__arrow{left:auto;right:16%;top:-8px}

  .vision__title{font-size:clamp(21px,6.6vw,32px)}
  .vision__inner p,.spirit__text,.value-c p{text-align:left}
  .vision__disc{width:72px}

  .stats__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
  .stat__num{font-size:clamp(28px,9vw,40px)}

  .spirit__title{font-size:clamp(18px,5.4vw,26px)}
  .spirit{padding-bottom:clamp(52px,13vw,80px)}
  .spirit__wordmark{width:clamp(96px,26vw,140px);top:auto;bottom:0;transform:translate(34%,14%)}

  .founder__media img{height:clamp(220px,66vw,340px)}
  .founder__card{
    margin-top:-46px;grid-template-columns:auto minmax(0,1fr);
    padding:16px 18px;gap:12px 14px;
  }
  .founder__avatar{width:48px}

  .values-concept__grid{grid-template-columns:1fr;gap:20px}
}

@media (max-width:420px){
  .founder__card{grid-template-columns:1fr;text-align:left}
  .founder__quote{grid-column:auto}
}