/* ================================================================
   KOOKIYA FLAVORS — services.css
   Styles spécifiques de la page /services.
   Structure : 5 blocs · Hero · Deux portes · Pour ta table (B2C) ·
   Pour ta marque (B2B) · Méthode.
   Densité éditoriale · sobriété typographique · aucun effet superflu.
   ================================================================ */


/* ================================================================
   Ancres #b2c et #b2b — décalage pour ne pas passer sous le header
   ================================================================ */

#b2c,
#b2b,
#capsules{
  scroll-margin-top:calc(var(--header-height) + 20px);
}


/* ================================================================
   BLOC 1 — HERO · Ivoire · 80 vh
   Typographique pur · pas de visuel · pas de CTA.
   ================================================================ */

.services-hero{
  min-height:80vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:var(--ivoire);
  padding-top:clamp(120px, 15vh, 180px);
}

.services-hero__inner{
  text-align:center;
  max-width:1000px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
}

.services-hero__titre{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  color:var(--encre);
  font-size:clamp(48px, 6.4vw, 72px);
  line-height:1;
  letter-spacing:-0.01em;
  max-width:900px;
}

.services-hero__soustitre{
  font-family:var(--font-corps);
  font-weight:300;
  font-size:clamp(15px, 1.2vw, 18px);
  line-height:1.6;
  color:var(--encre);
  max-width:640px;
  text-align:center;
  text-align-last:center;
  hyphens:none;
  -webkit-hyphens:none;
}


/* ================================================================
   BLOC 2 — CHOIX DE PORTE · Ivoire
   Transition douce depuis hero · 2 cartes avec filet vertical central.
   ================================================================ */

.services-portes{
    /* espace suffisant pour le folio (top 84px desktop) au-dessus du titre, sans retrouver l'excès du .block default */
}

.services-portes__titre{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:clamp(28px, 3vw, 32px);
  line-height:1.2;
  color:var(--encre);
  text-align:center;
  margin-bottom:clamp(40px, 5vh, 64px);
}

.services-portes__grille{
  max-width:var(--max-content);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:56px;
  position:relative;
}

@media (min-width:900px){
  .services-portes__grille{
    grid-template-columns:1fr 1fr;
    gap:0;
  }
  /* Filet vertical central Turquoise · desktop uniquement */
  .services-portes__grille::before{
    content:'';
    position:absolute;
    left:50%;
    top:8%;
    bottom:8%;
    width:0.5px;
    background:var(--turquoise);
    opacity:0.45;
    pointer-events:none;
  }
}

.services-porte{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:20px;
  padding:clamp(16px, 2vw, 32px) clamp(24px, 4vw, 56px);
}

.services-porte__titre{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:clamp(32px, 3.4vw, 40px);
  line-height:1.1;
  color:var(--encre);
}

.services-porte__texte{
  font-family:var(--font-corps);
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  color:var(--encre);
  max-width:400px;
  text-align:justify;
  text-align-last:start;
  hyphens:none;
}

.services-porte__lien{
  margin-top:12px;
}


/* ================================================================
   BLOC 3 — POUR TA TABLE (B2C) · Encre · ancre #b2c
   3 offres empilées · séparateur Turquoise entre chaque.
   Chaque offre : entête flex (eyebrow+titre · prix) + corps + CTA.
   ================================================================ */

.services-b2c{ }

.services-b2c__entete{
  max-width:720px;
  margin:0 auto clamp(56px, 7vh, 80px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  text-align:center;
}

.services-b2c__titre{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:clamp(40px, 5vw, 56px);
  line-height:1.05;
  color:var(--ivoire);
}

.services-b2c__soustitre{
  font-family:var(--font-corps);
  font-style:italic;
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  color:var(--ivoire);
  opacity:0.8;
  max-width:560px;
  text-align:center;
  text-align-last:center;
  hyphens:none;
  -webkit-hyphens:none;
}

.services-b2c__offres{
  max-width:860px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

/* Séparateur Turquoise 80 px entre offres · 64 px haut/bas */
.services-b2c__separateur{
  display:block;
  width:80px;
  height:0.5px;
  background:var(--turquoise);
  margin:clamp(48px, 6vh, 64px) auto;
  align-self:center;
}

/* Offre B2C — entête flex · corps pleine largeur · CTA à la fin */
.services-offre{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.services-offre__entete{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.services-offre__meta{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.services-offre__titre{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:clamp(32px, 3.6vw, 36px);
  line-height:1.1;
  color:var(--ivoire);
  margin:0;
}

.services-offre__prix{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:28px;
  color:var(--safran);
  line-height:1;
}

/* Desktop — entête en flex row · prix aligné à droite */
@media (min-width:900px){
  .services-offre__entete{
    flex-direction:row;
    justify-content:space-between;
    align-items:flex-start;
    gap:48px;
  }
  .services-offre__prix{
    text-align:right;
    flex-shrink:0;
    padding-top:4px;  /* alignement visuel avec titre */
  }
}

.services-offre__corps{
  font-family:var(--font-corps);
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  color:var(--ivoire);
  max-width:720px;
  opacity:0.92;
  text-align:justify;
  text-align-last:start;
  hyphens:none;
}

.services-offre__cta{
  align-self:flex-start;
  margin-top:8px;
}

/* Teasing capsules en préparation — sous l'offre La Capsule */
.services-capsules-teasing{
  margin-top:40px;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.services-capsules-teasing__eyebrow{
  font-size:10px;
}

.services-capsules-teasing__grille{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
/* Empilées en mobile (< 768 px · chaque carte 100 % largeur · gap 16 px)
   · 2 colonnes à partir de tablette (≥ 768 px). */
@media (min-width:768px){
  .services-capsules-teasing__grille{
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
}

/* Mini-carte capsule · Encre éclairci + filet Turquoise */
.services-capsule-mini{
  background:#212D4F;
  border:0.5px solid rgba(27, 122, 120, 0.4);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.services-capsule-mini__titre{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:20px;
  line-height:1.15;
  color:var(--ivoire);
  margin:0;
}

.services-capsule-mini__label{
  font-family:var(--font-corps);
  font-style:italic;
  font-weight:300;
  font-size:13px;
  line-height:1.4;
  color:var(--ivoire);
  opacity:0.7;
  margin:0 0 8px;
}

/* Form mini — input + bouton discret Turquoise */
.services-capsule-mini__form{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.services-capsule-mini__input{
  flex:1 1 150px;
  background:transparent;
  border:0.5px solid rgba(251, 243, 227, 0.3);
  color:var(--ivoire);
  padding:10px 12px;
  font-family:var(--font-corps);
  font-weight:300;
  font-size:12px;
  letter-spacing:0.02em;
  transition:border-color 0.3s var(--ease);
}
.services-capsule-mini__input:focus{
  outline:none;
  border-color:var(--turquoise);
}
.services-capsule-mini__input::placeholder{
  color:var(--ivoire);
  opacity:0.4;
}

.services-capsule-mini__submit{
  padding:10px 16px;
  background:var(--turquoise);
  color:var(--ivoire);
  font-family:var(--font-corps);
  font-weight:500;
  font-size:10px;
  letter-spacing:var(--tracking-cta);
  text-transform:uppercase;
  border:none;
  cursor:pointer;
  transition:background 0.3s var(--ease), opacity 0.3s var(--ease);
}
.services-capsule-mini__submit:hover:not(:disabled),
.services-capsule-mini__submit:focus-visible:not(:disabled){
  background:#155E5C;  /* Turquoise assombri */
}
.services-capsule-mini__submit:disabled{
  opacity:0.55;
  cursor:not-allowed;
}


/* ================================================================
   BLOC 4 — POUR TA MARQUE (B2B) · Ivoire · ancre #b2b
   4 offres en grille 2×2 · chacune précédée d'un filet 60 px.
   Pas de cadre rectangulaire · tarification sur devis.
   ================================================================ */

.services-b2b{ }

.services-b2b__entete{
  max-width:720px;
  margin:0 auto clamp(56px, 7vh, 80px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  text-align:center;
}

.services-b2b__titre{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:clamp(40px, 5vw, 56px);
  line-height:1.05;
  color:var(--encre);
}

.services-b2b__soustitre{
  font-family:var(--font-corps);
  font-style:italic;
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  color:var(--encre);
  max-width:640px;
  text-align:center;
  text-align-last:center;
  hyphens:none;
  -webkit-hyphens:none;
}

.services-b2b__grille{
  max-width:var(--max-content);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:64px;
}

@media (min-width:900px){
  .services-b2b__grille{
    grid-template-columns:1fr 1fr;
    gap:64px 48px;
  }
}

/* Offre B2B — filet 60 px haut + eyebrow + titre + texte + lien */
.services-b2b-offre{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.services-b2b-offre__filet{
  display:block;
  width:60px;
  height:0.5px;
  background:var(--turquoise);
  margin-bottom:4px;
}

.services-b2b-offre__titre{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:clamp(22px, 2.4vw, 28px);
  line-height:1.15;
  color:var(--encre);
  margin:0;
}

.services-b2b-offre__texte{
  font-family:var(--font-corps);
  font-weight:300;
  font-size:15px;
  line-height:1.7;
  color:var(--encre);
  margin:0;
  text-align:justify;
  text-align-last:start;
  hyphens:none;
}

.services-b2b-offre__lien{
  margin-top:8px;
  align-self:flex-start;
}

/* Encart « porte ouverte B2B » · fond Ivoire saturé + filet Turquoise */
.services-b2b-encart{
  max-width:720px;
  margin:clamp(64px, 8vh, 96px) auto 0;
  padding:clamp(32px, 4vw, 48px);
  background:#F4E9CE;
  border:0.5px solid var(--turquoise);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  text-align:center;
}

.services-b2b-encart__titre{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:24px;
  line-height:1.2;
  color:var(--encre);
  margin:0;
}

.services-b2b-encart__texte{
  font-family:var(--font-corps);
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  color:var(--encre);
  max-width:560px;
  margin:0;
  text-align:justify;
  text-align-last:start;
  hyphens:none;
}

.services-b2b-encart__cta{
  margin-top:8px;
}


/* ================================================================
   BLOC 5 — MÉTHODE · Ivoire (dernier bloc avant footer Encre,
   rupture visuelle cf. règle de design Kookiya Flavors :
   clôture toujours en Ivoire pour relâcher avant le footer).
   3 étapes en colonnes · numéros romains Cormorant Italic Safran.
   Transition finale : phrase + CTA primaire + lien secondaire.
   ================================================================ */

.services-methode{ text-align:center; }

.services-methode__entete{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  margin-bottom:clamp(56px, 7vh, 80px);
}

.services-methode__titre{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:clamp(36px, 4vw, 48px);
  line-height:1.05;
  color:var(--encre);
}

.services-methode__etapes{
  max-width:var(--max-content);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:48px;
}

@media (min-width:860px){
  .services-methode__etapes{
    grid-template-columns:repeat(3, 1fr);
    gap:clamp(32px, 4vw, 56px);
  }
}

.services-methode-etape{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  text-align:center;
}

.services-methode-etape__numero{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:48px;
  line-height:1;
  color:var(--safran);
}

.services-methode-etape__titre{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:24px;
  line-height:1.15;
  color:var(--encre);
  margin:0;
}

.services-methode-etape__texte{
  font-family:var(--font-corps);
  font-weight:300;
  font-size:15px;
  line-height:1.7;
  color:var(--encre);
  opacity:0.92;
  max-width:280px;
  margin:0;
  text-align:justify;
  text-align-last:start;
  hyphens:none;
}

/* Transition finale · phrase + CTA + lien */
.services-methode__transition{
  margin-top:clamp(64px, 8vh, 96px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}

.services-methode__phrase{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:24px;
  line-height:1.3;
  color:var(--encre);
  max-width:520px;
  margin:0 0 12px;
  text-align:center;
  text-align-last:center;
  hyphens:none;
  -webkit-hyphens:none;
}