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

/* =========================================================
   HERO — cuisine
   ========================================================= */
.fr-hero{line-height:0}
.fr-hero img{
  width:100%;height:clamp(240px,51vw,720px);
  object-fit:cover;object-position:center 42%;
}

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

.intro--fr .intro__body{align-items:flex-end;gap:clamp(12px,1.6vw,22px)}
.intro--fr .intro__body p{max-width:540px;font-weight:500}

/* =========================================================
   DU CONCRET SANS BLA BLA
   ========================================================= */
.concret{
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  background:var(--cream-2);
}
/* bloc image (visuel non fourni dans l'archive — emplacement structuré) */
.concret__media{
  background:var(--orange);
  min-height:clamp(220px,32vw,460px);
  display:grid;place-items:center;
}
.concret__media img{width:clamp(70px,9vw,140px);opacity:.55}

.concret__body{
  display:flex;align-items:center;
  padding:clamp(28px,4vw,64px) max(var(--gut),calc((100vw - 1420px)/2))
          clamp(28px,4vw,64px) clamp(24px,4vw,72px);
}
.concret__inner{max-width:640px}
.concret__title{
  font-family:'Laroka',cursive;color:var(--orange);text-transform:uppercase;
  font-size:clamp(22px,2.9vw,42px);line-height:1.08;letter-spacing:.01em;
  display:flex;flex-direction:column;align-items:flex-start;gap:.12em;
  margin-bottom:clamp(14px,1.8vw,26px);
}
.concret__mark{
  background:var(--orange);color:var(--cream);
  padding:.06em .3em .12em;border-radius:.18em;
}
.concret__inner p{
  color:var(--brown);font-weight:500;text-align:justify;
  font-size:clamp(12.5px,1.02vw,15.5px);line-height:1.45;
}
.concret__inner p + p{margin-top:clamp(10px,1.3vw,20px)}

/* =========================================================
   S'ENGAGE À TES CÔTÉS
   ========================================================= */
.engage{padding-block:clamp(30px,4vw,66px) clamp(26px,3.4vw,54px)}
.engage__inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.engage__wordmark{width:clamp(150px,17vw,250px)}
.engage__title{
  font-family:'Laroka',cursive;color:var(--orange);text-transform:uppercase;
  font-size:clamp(21px,2.9vw,42px);line-height:1;letter-spacing:.01em;
  margin-top:clamp(2px,.4vw,6px);
}
.engage__text{
  margin-top:clamp(16px,2.2vw,34px);
  width:min(100%,780px);
  display:flex;flex-direction:column;gap:clamp(10px,1.3vw,20px);
}
.engage__text p{
  color:var(--brown);font-weight:500;
  font-size:clamp(12.5px,1.02vw,15.5px);line-height:1.45;
}
.engage .btn{margin-top:clamp(16px,2.2vw,32px)}

/* --- trois atouts --- */
.benefits{
  margin-top:clamp(26px,3.6vw,58px);width:100%;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.8vw,48px);text-align:left;
}
.benefit{display:flex;align-items:flex-start;gap:clamp(12px,1.5vw,24px)}
.benefit img{
  width:clamp(48px,5.4vw,80px);height:auto;flex:0 0 auto;
  transition:transform .4s var(--ease);
}
.benefit:hover img{transform:scale(1.07)}
.benefit h3{
  color:var(--orange);font-weight:700;
  font-size:clamp(12.5px,1.1vw,16px);line-height:1.2;
}
.benefit p{
  margin-top:3px;color:var(--brown);font-weight:500;text-align:justify;
  font-size:clamp(11.5px,.96vw,14.5px);line-height:1.4;
}

/* =========================================================
   CTA FINAL
   ========================================================= */
.fr-cta{background:var(--orange);padding-block:clamp(34px,4.6vw,78px)}
.fr-cta__inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.fr-cta__title{
  font-family:'Laroka',cursive;color:var(--cream);text-transform:uppercase;
  font-size:clamp(24px,3.4vw,50px);line-height:1;letter-spacing:.02em;
}
.fr-cta__inner p{
  margin-top:clamp(12px,1.6vw,24px);max-width:720px;
  color:var(--cream);font-weight:500;
  font-size:clamp(12.5px,1.05vw,16px);line-height:1.5;
}
.fr-cta .btn{margin-top:clamp(16px,2.2vw,34px)}

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

  .concret{grid-template-columns:1fr}
  .concret__media{min-height:min(46vw,320px)}
  .concret__body{padding:clamp(26px,5vw,44px) var(--gut)}
  .concret__inner{max-width:none}

  .benefits{grid-template-columns:1fr;gap:22px;max-width:620px;margin-inline:auto}
}

@media (max-width:720px){
  .fr-hero img{height:clamp(200px,54vw,360px)}

  .intro--fr .intro__kicker{white-space:normal;font-size:clamp(20px,6.4vw,30px)}
  .intro--fr .intro__arrow{right:10%;top:-8px;width:52px}

  .concret__title{font-size:clamp(20px,6.2vw,30px)}
  .concret__inner p,.benefit p{text-align:left}

  .engage__title{font-size:clamp(19px,6vw,28px)}
  .fr-cta__title{font-size:clamp(22px,7vw,34px)}
  .benefit img{width:46px}
}