/* ============================================================
   KOOKIYA FLAVORS — PAGE D'ACCUEIL
   Film piloté par le scroll, agenda, sensoriel, privatisation,
   devis, fondatrice, FAQ, clôture.
   ============================================================ */

/* === FILM — le scroll pilote l'image === */
.film{position:relative;height:260vh;background:var(--surface-base)}
.film__stage{position:sticky;top:0;height:100vh;overflow:hidden}
.film__frame{position:absolute;inset:0;will-change:clip-path;background:var(--surface-deep)}
.film__frame canvas{width:100%;height:100%;display:block}
.film__veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(26,39,68,.82),rgba(26,39,68,0) 58%);opacity:0;pointer-events:none}
.film__copy{
  position:absolute;left:var(--margin);top:0;bottom:0;
  width:min(44%,560px);
  display:flex;flex-direction:column;justify-content:center;
  padding-top:80px;will-change:opacity,transform;
}
.film__copy h1{font-size:var(--text-display-xl);margin:20px 0 28px}
.film__copy p{font-size:var(--text-body-lg);font-weight:300;line-height:var(--leading-snug);max-width:32ch;margin-bottom:40px}
.film__copy .eyebrow{color:var(--accent-signature)}
.film__hint{margin-top:48px;font-size:11px;letter-spacing:var(--tracking-caps);text-transform:uppercase;font-weight:500;opacity:.6}

.chapters{position:absolute;left:var(--margin);bottom:clamp(40px,9vh,88px);width:min(560px,calc(100% - 2*var(--margin)));color:var(--text-on-deep)}
.chapter{position:absolute;left:0;bottom:0;opacity:0;transform:translateY(12px);transition:opacity var(--transition-slow),transform var(--transition-slow)}
.chapter.is-on{opacity:1;transform:none}
.chapter .eyebrow{color:var(--accent-prestige);display:block;margin-bottom:14px}
.chapter h2{font-size:var(--text-display-md);margin-bottom:12px}
.chapter p{font-weight:400;max-width:42ch}

.film__progress{position:absolute;right:var(--margin);bottom:clamp(40px,9vh,88px);display:flex;gap:10px;opacity:0}
.film__progress i{width:28px;height:1px;background:rgba(251,243,227,.35)}
.film__progress i.is-on{background:var(--color-ivoire-chaud)}

@media (max-width:767px){
  .film__copy{width:auto;right:var(--margin);justify-content:flex-start;padding-top:108px}
  .film__copy p{margin-bottom:28px}
  .film__hint{display:none}
  .film__progress{display:none}
}
@media (prefers-reduced-motion:reduce){.chapter{transition:none}}

/* === AGENDA — prochaine édition, ou texte permanent === */
.agenda{margin-bottom:96px}

/* Repli permanent — affiché tant qu'aucune édition n'est à venir */
.agenda__repli{
  border:1px solid var(--line-deep);border-radius:var(--radius-subtle);
  padding:clamp(48px,7vw,80px) clamp(24px,5vw,56px);
  text-align:center;
}
.agenda__repli h3{font-size:var(--text-display-md);margin-bottom:16px}
.agenda__repli p{font-weight:400;max-width:46ch;margin:0 auto 40px}

.vedette{
  display:grid;grid-template-columns:minmax(180px,.9fr) 2fr 1.3fr;
  border:1px solid var(--accent-prestige);border-radius:var(--radius-subtle);
  overflow:hidden;
}
.vedette__date{border-right:1px solid var(--line-deep);padding:48px 40px;display:flex;flex-direction:column;justify-content:center}
.vedette__date .eyebrow{margin-bottom:24px}
.vedette__date .jour{font-family:var(--font-display);font-size:clamp(88px,10vw,150px);line-height:.9;letter-spacing:-.02em}
.vedette__date .mois{font-family:var(--font-display);font-style:italic;font-size:var(--text-display-sm);line-height:1.2;margin-top:8px}
.vedette__date small{font-size:11px;letter-spacing:var(--tracking-caps);text-transform:uppercase;font-weight:500;opacity:.65;margin-top:8px}
.vedette__corps{padding:56px clamp(24px,5vw,72px)}
.vedette__corps h3{font-size:var(--text-display-lg)}
.vedette__corps .sous{font-family:var(--font-display);font-style:italic;font-size:var(--text-display-sm);color:var(--accent-cta);line-height:var(--leading-snug);margin:4px 0 24px}
.vedette__corps>p:not(.sous){font-weight:400;max-width:56ch}
.vedette__infos{list-style:none;display:grid;grid-template-columns:auto auto 1fr;gap:40px;margin:40px 0;padding-block:24px;border-block:1px solid var(--line-deep)}
.vedette__infos .eyebrow{display:block;margin-bottom:6px}
.vedette__infos strong{font-family:var(--font-display);font-weight:400;font-size:var(--text-display-sm);line-height:1.2}
.vedette__infos .lieu-info strong{font-family:var(--font-body);font-size:15px;line-height:1.5;display:block;padding-top:6px}
.vedette__img{margin:0;min-height:100%;border-left:1px solid var(--line-deep)}
.vedette__img img{width:100%;height:100%;object-fit:cover}
/* Titre et image mènent à la page de l'édition, sans changer leur allure */
.vedette__corps h3 a{text-decoration:none}
.vedette__corps h3 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.vedette__img a{display:block;height:100%}
.vedette .btn{padding:18px 48px;white-space:nowrap}

@media (max-width:1100px){
  .vedette{grid-template-columns:minmax(160px,.8fr) 2fr}
  .vedette__img{grid-column:1/-1;grid-row:1;aspect-ratio:3/2;border-left:0;border-bottom:1px solid var(--line-deep)}
}
@media (max-width:900px){
  .vedette{grid-template-columns:minmax(0,1fr)}  /* minmax(0,…) : la colonne ne s'élargit pas au contenu */
  .vedette__date{border-right:0;border-bottom:1px solid var(--line-deep);padding:32px 24px;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
  .vedette__date .eyebrow{width:100%;margin-bottom:8px}
  .vedette__date .jour{font-size:88px}
  .vedette__corps{padding:32px 24px}
  .vedette__infos{grid-template-columns:1fr 1fr;gap:20px}
  .vedette__infos li:last-child{grid-column:1/-1}
  .vedette .btn{width:100%;text-align:center}
}

/* === DÉROULÉ DE L'ATELIER === */
.offre{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.offre__intro{grid-column:1/6}
.offre__intro h3{font-size:var(--text-display-sm);margin-bottom:16px}
.offre__intro p{font-weight:400}
.deroule{grid-column:7/13;list-style:none;border-top:1px solid var(--line-deep)}
.deroule li{display:grid;grid-template-columns:48px 1fr;gap:16px;padding-block:18px;border-bottom:1px solid var(--line-deep)}
.deroule .n{font-family:var(--font-display);font-style:italic;font-size:22px;color:var(--accent-prestige);line-height:1.2}
.deroule strong{font-weight:500;display:block}
.deroule span{font-weight:400;font-size:15px}
@media (max-width:900px){.offre{grid-template-columns:1fr;gap:48px}.offre__intro,.deroule{grid-column:1}}

/* === SENSORIEL === */
/* Emplacement du visuel, masqué tant qu'il est vide */
.sens__visuel[hidden]{display:none}
.sens__visuel{margin:0 0 64px;max-width:960px;aspect-ratio:3/2;overflow:hidden;border-radius:var(--radius-subtle)}
.sens__visuel img{width:100%;height:100%;object-fit:cover}
.sens{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.sens li{border-top:1px solid var(--line);padding-top:24px}
.sens h3{font-size:var(--text-display-sm);margin-bottom:10px}
.sens p{font-size:15px;font-weight:300}
.decouverte{margin-top:64px;display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.decouverte p{grid-column:3/11;text-align:center;font-family:var(--font-display);font-style:italic;font-size:var(--text-display-sm);line-height:var(--leading-snug)}
/* Lien discret vers /univers — même traitement que « Son parcours » */
.decouverte__lien{grid-column:1/-1;text-align:center}
.decouverte__lien .duo__lien{margin-top:0}
@media (max-width:1024px){.sens{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.sens{grid-template-columns:1fr}.decouverte p{grid-column:1/-1}}

/* === PRIVATISER — occasions et formats === */
.pourqui{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:-24px 0 48px}
.pourqui li{border:1px solid var(--line-deep);border-radius:9999px;padding:6px 14px;font-size:13px}

.formats{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.format{border:1px solid var(--line-deep);border-radius:var(--radius-subtle);padding:40px;display:flex;flex-direction:column}
.format .eyebrow{color:var(--accent-prestige);margin-bottom:20px}
.format h3{font-size:var(--text-display-md);margin-bottom:6px}
.format .pour{font-family:var(--font-display);font-style:italic;font-size:22px;line-height:var(--leading-snug);color:var(--accent-cta);margin-bottom:24px}
.format ul{list-style:none;margin-bottom:40px;flex:1}
.format li{padding-block:10px;border-top:1px solid var(--line-deep);font-size:15px;font-weight:400}
.format .ctas{display:flex;gap:8px;flex-wrap:wrap}
.format .ctas .btn{flex:1;white-space:nowrap;text-align:center}
/* Pied de card : rangée du bouton, puis rangée du recours à hauteur minimale
   réservée par la grille. Dans la card sans recours, cette rangée reste vide —
   aucun élément, rien à lire — et les deux boutons s'alignent. */
.format__pied{display:grid;grid-template-rows:auto minmax(calc(16px + 15px * 1.7),auto)}
/* Recours sous le bouton de la card : lien texte, jamais un second bouton */
.format__echange{padding-top:16px;text-align:center;font-size:15px;line-height:1.7}
/* Cartes empilées : plus rien à aligner, on ne réserve plus de place */
@media (max-width:900px){.format__pied{grid-template-rows:auto}}
/* Emplacement du visuel de carte, masqué tant qu'il est vide.
   Pleine largeur de la carte (charte §6.2) : il déborde du padding. */
.format__visuel[hidden]{display:none}
.format__visuel{margin:-40px -40px 32px;aspect-ratio:3/2;overflow:hidden}
.format__visuel img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.formats{grid-template-columns:minmax(0,1fr)}.format{padding:24px}.format__visuel{margin:-24px -24px 24px}}
/* Sous 370 px : boutons des cartes et de l'ouverture compacts, comme celui du header — une ligne, jamais coupés */
@media (max-width:369px){.format .ctas .btn,.film__copy .btn{font-size:12px;letter-spacing:.1em;padding-left:12px;padding-right:12px}}

/* === DEVIS === */
.devis-bloc{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:96px;padding-top:96px;border-top:1px solid var(--line-deep)}
.devis-bloc__intro{grid-column:1/5}
.devis-bloc__intro h3{font-size:var(--text-display-md);margin-bottom:16px}
.devis-bloc__intro p{font-weight:400}
.devis-bloc .devis{grid-column:6/13}
@media (max-width:900px){.devis-bloc{grid-template-columns:minmax(0,1fr);margin-top:64px;padding-top:64px}.devis-bloc__intro,.devis-bloc .devis{grid-column:1}}

.devis{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.field{display:flex;flex-direction:column}
.field--full{grid-column:1/-1}
.field label{font-size:var(--text-caps);text-transform:uppercase;letter-spacing:var(--tracking-caps);font-weight:500;margin-bottom:8px}
.field input,.field select,.field textarea{
  min-height:52px;padding:16px;
  border:1px solid rgba(251,243,227,.3);border-radius:var(--radius-subtle);
  font:400 16px var(--font-body);
  background:transparent;color:var(--text-on-deep);color-scheme:dark;
}
.field select option{color:var(--color-encre-tropicale);background:var(--color-ivoire-chaud)}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent-cta);box-shadow:0 0 0 3px rgba(232,146,42,.15)}
.devis__foot{grid-column:1/-1;display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:8px}
.devis__foot p{font-size:var(--text-body-sm)}
.devis__rgpd{grid-column:1/-1;font-size:var(--text-body-sm);opacity:.7}
.devis__rgpd a{color:inherit;text-underline-offset:4px}
/* Recours après l'envoi et la mention : la question en corps, le lien seul porte l'action */
.devis__echange{grid-column:1/-1;margin-top:8px;font-weight:400}
.devis__echange .lien-texte{white-space:nowrap}  /* le lien passe à la ligne d'un bloc, jamais coupé */
/* Pot de miel — invisible à l'écran, ignoré par les lecteurs d'écran */
.leurre{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:700px){.devis{grid-template-columns:minmax(0,1fr)}}

/* === GALERIE D'ÉVÉNEMENTS ===
   Bande pleine largeur, sans fond propre : elle fait transition
   entre l'encre de Privatiser et l'ivoire de La Fondatrice sans
   rompre l'alternance du §4.5. Reste masquée tant qu'il n'y a
   pas de photographies réelles. */
.galerie[hidden]{display:none}
.galerie{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,1fr);gap:2px;background:var(--surface-deep)}
.galerie figure{margin:0;aspect-ratio:4/5;overflow:hidden}
.galerie img{width:100%;height:100%;object-fit:cover}
@media (max-width:767px){.galerie{grid-auto-flow:row;grid-auto-columns:auto}}

/* === FONDATRICE === */
.duo{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.duo__img{grid-column:1/6;aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius-subtle);position:sticky;top:calc(var(--header-h) + 32px)}
.duo__img img{width:100%;height:100%;object-fit:cover}
.duo__text{grid-column:7/12}
.duo__text h2{font-size:var(--text-display-md);margin:20px 0 16px}
.duo__text .appui{font-family:var(--font-display);font-style:italic;font-size:var(--text-display-sm);line-height:var(--leading-snug);margin-bottom:32px}
.duo__text .body{font-weight:300;max-width:50ch}
.duo__text p+p{margin-top:16px}
.duo__lien{margin-top:24px;display:inline-block;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.15em;color:var(--accent-signature);text-underline-offset:6px;text-decoration-thickness:1px}
.duo__geste{margin:48px 0 0;aspect-ratio:3/2;overflow:hidden;border-radius:var(--radius-subtle)}
.duo__geste img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.duo{grid-template-columns:1fr;gap:40px}.duo__img,.duo__text{grid-column:1}.duo__img{position:static}}

/* === FAQ === */
.faq{max-width:880px;border-top:1px solid var(--line-deep)}
.faq details{border-bottom:1px solid var(--line-deep)}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding-block:24px;
  font-family:var(--font-display);font-size:var(--text-display-sm);line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:14px;height:14px;
  background:linear-gradient(currentColor,currentColor) center/14px 1px no-repeat,
             linear-gradient(currentColor,currentColor) center/1px 14px no-repeat;
  transition:transform var(--transition-default);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:28px;max-width:64ch;font-weight:400}
.faq a{color:var(--accent-cta);text-underline-offset:4px}
/* Déclencheur Cal.com de la question entreprise : bouton secondaire de la charte */
.faq__action{padding-bottom:28px;margin-top:-8px}
.faq .btn{color:var(--text-on-deep)}

/* === CLÔTURE === */
.closing{text-align:center;padding-block:clamp(120px,16vh,180px)}
.closing h2{font-size:var(--text-display-lg);max-width:16ch;margin:20px auto 24px}
.closing .lead{font-weight:300;font-size:var(--text-body-lg);line-height:var(--leading-snug);max-width:44ch;margin:0 auto}
.closing .eyebrow{color:var(--accent-signature)}
/* Le formulaire Brevo est mis en forme par css/lettre.css */
.closing .devise{font-family:var(--font-display);font-style:italic;font-size:var(--text-display-sm);line-height:var(--leading-snug);margin-top:96px}
.closing .signature{margin-top:16px;color:var(--accent-signature)}
