/* ================================================================
   KOOKIYA FLAVORS — book.css
   Styles spécifiques de la page /book.
   Structure : 4 blocs · Hero · Pièce maîtresse Incarnat ·
   Études créatives · Invitation.
   ================================================================ */


/* ================================================================
   BLOC 1 — HERO · Ivoire · 80 vh
   Typographique pur · note discrète sur les études créatives.
   ================================================================ */

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

.book-hero__inner{
  text-align:center;
  max-width:900px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
}

.book-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:840px;
}

.book-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:700px;
  text-align:center;
  text-align-last:center;
  hyphens:none;
  -webkit-hyphens:none;
}

/* Note discrète sur les études créatives — italique 13 px opacity 0.7 */
.book-hero__note{
  font-family:var(--font-corps);
  font-style:italic;
  font-weight:300;
  font-size:13px;
  line-height:1.6;
  color:var(--encre);
  opacity:0.7;
  max-width:640px;
  margin-top:16px;
  text-align:center;
  text-align-last:center;
  hyphens:none;
  -webkit-hyphens:none;
}


/* ================================================================
   BLOC 2 — PIÈCE MAÎTRESSE INCARNAT · Encre
   Entête centrée · 4 mini-sections (grid 2×2) · 4 visuels 1:1 ·
   CTA primaire Safran + lien secondaire.
   ================================================================ */

.book-incarnat{ }

.book-incarnat__entete{
  max-width:820px;
  margin:0 auto clamp(56px, 7vh, 80px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  text-align:center;
}

.book-incarnat__titre{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:clamp(40px, 5vw, 56px);
  line-height:1.02;
  color:var(--safran);
  margin:0;
}

.book-incarnat__soustitre{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:20px;
  line-height:1.4;
  color:var(--ivoire);
  max-width:700px;
  margin:0;
  text-align:center;
  text-align-last:center;
  hyphens:none;
  -webkit-hyphens:none;
}

/* Grille des 4 mini-sections — 2×2 desktop, empilées mobile */
.book-incarnat__sections{
  max-width:900px;
  margin:0 auto clamp(64px, 8vh, 96px);
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
}

@media (min-width:768px){
  .book-incarnat__sections{
    grid-template-columns:1fr 1fr;
    gap:40px clamp(40px, 5vw, 64px);
  }
}

.book-incarnat-section{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.book-incarnat-section__texte{
  font-family:var(--font-corps);
  font-weight:300;
  font-size:15px;
  line-height:1.7;
  color:var(--ivoire);
  opacity:0.92;
  margin:0;
  text-align:justify;
  text-align-last:start;
  hyphens:none;
}

/* Grille des 4 visuels Incarnat — 4×1 desktop, empilés mobile */
.book-incarnat__visuels{
  max-width:var(--max-content);
  margin:0 auto clamp(40px, 5vh, 56px);
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

@media (min-width:640px){
  .book-incarnat__visuels{
    grid-template-columns:1fr 1fr;
    gap:16px;
  }
}

@media (min-width:1024px){
  .book-incarnat__visuels{
    grid-template-columns:repeat(4, 1fr);
  }
}

/* Figure = cadre 1:1 + légende centrée (titre + couleur) — structure verticale */
.book-incarnat-visuel{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:0;
}

/* Cadre 1:1 · Encre éclairci + filet Turquoise (reçoit l'image finale) */
.book-incarnat-visuel__cadre{
  aspect-ratio:1/1;
  position:relative;
  overflow:hidden;
}
.book-incarnat-visuel__cadre img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Légende sous le cadre · titre italique Ivoire + sous-label UPPERCASE Turquoise */
.book-incarnat-visuel__legende{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
}
.book-incarnat-visuel__titre{
  font-family:var(--font-corps);
  font-style:italic;
  font-weight:300;
  font-size:14px;
  line-height:1.4;
  color:var(--ivoire);
}
.book-incarnat-visuel__couleur{
  font-family:var(--font-corps);
  font-weight:500;
  font-size:10px;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--turquoise);
}

/* Actions — CTA primaire + lien secondaire centrés */
.book-incarnat__actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  margin-top:clamp(32px, 4vh, 48px);
}


/* ================================================================
   BLOC 3 — ÉTUDES CRÉATIVES · Ivoire
   Grille 3 cartes desktop · chaque carte avec visuel 4:5 +
   eyebrow + titre + filet 40 px + paragraphe + mentions livrables.
   ================================================================ */

.book-etudes{ }

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

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

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

.book-etudes__grille{
  max-width:var(--max-content);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(48px, 6vw, 64px);
}

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

/* Carte étude — sans cadre, structure verticale */
.book-etude{
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* Placeholder visuel 4:5 · Ivoire saturé + filet Turquoise */
.book-etude__visuel{
  aspect-ratio:4/5;
  width:100%;
  position:relative;
  overflow:hidden;
}
.book-etude__visuel img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.book-etude__titre{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:28px;
  line-height:1.15;
  color:var(--encre);
  margin:0;
}

/* Filet 40 px Turquoise sous le titre */
.book-etude__filet{
  display:block;
  width:40px;
  height:0.5px;
  background:var(--turquoise);
}

.book-etude__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;
}

/* Mentions livrables — italique 13 px opacity 0.7 */
.book-etude__livrables{
  font-family:var(--font-corps);
  font-style:italic;
  font-weight:300;
  font-size:13px;
  line-height:1.6;
  color:var(--encre);
  opacity:0.7;
  margin:0;
  text-align:justify;
  text-align-last:start;
  hyphens:none;
}


/* ================================================================
   BLOC 4 — INVITATION · Ivoire (dernier bloc avant footer Encre,
   rupture visuelle cf. bloc invitation d'index.html).
   Centré · min-height 420 · 2 CTA côte à côte.
   ================================================================ */

.book-invitation{
  min-height:420px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.book-invitation__inner{
  max-width:720px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:48px;
}

.book-invitation__titre{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:clamp(26px, 3vw, 32px);
  line-height:1.25;
  color:var(--encre);
  max-width:640px;
  margin:0;
}

.book-invitation__actions{
  display:flex;
  flex-wrap:wrap;
  gap:24px 32px;
  align-items:center;
  justify-content:center;
}