/* ==========================================================================
   Le Jardin Chocolaté — habillage « charte officielle » (v2)
   Source : Canva « Identité visuelle » (DAHJh21_5Ko) et fichiers remis par la
   cliente le 9 octobre 2026. Chargée après maison.css et refinement.css.

   Principe : la retenue de leur papeterie. Fond crème, aquarelles en bord de
   page comme sur la carte de visite, logo doré, un seul motif par section.
   ========================================================================== */

@font-face { font-family: 'Bailenson'; src: url('fonts/bailenson.woff2?v=2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Native Stories'; src: url('fonts/native-stories.woff2?v=2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Gilda Display'; src: url('fonts/gilda-display.woff2?v=2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Native Stories'; font-style: italic; src: url('fonts/native-stories-italic.woff2?v=2') format('woff2'); font-display: swap; }

:root {
  --cream: #FEFAF1;
  --paper: #FFFDF8;
  --pink: #FAE1D8;
  --pink-deep: #EBC8BC;
  --chocolate: #5F301C;
  --ink: #4A2516;
  --text: #5E4034;
  --dark: #331309;
  --sage: #A9B285;
  --sage-soft: #C9CFAE;
  --sage-deep: #77804F;
  --gold: #C9971E;
  --line: rgba(95, 48, 28, .16);
  --serif: 'Gilda Display', 'Cormorant Garamond', Georgia, serif;
  --script: 'Bailenson', 'Pinyon Script', cursive;
  --label: 'Native Stories', 'Cormorant Garamond', Georgia, serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  background: var(--cream);
  color: var(--ink);
}

html, body { overflow-x: clip; }
body { background: var(--cream); }
::selection { background: var(--pink); color: var(--dark); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- Typographie ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; color: var(--ink); }
.collection-product h3, .audience h2, .salon-copy h2, .collection-head h2, .instagram-head h2, .visit-intro h2, .story-teaser h2, .reservation-heading h2, .faq h2, .inner-hero h1, .behind-copy h2 { font-weight: 400; }
.caption, .signature, .menu-teaser b, .booking-title h3 { font-weight: 400; }
h1 em, h2 em {
  font-family: var(--script);
  font-style: normal;
  font-weight: 400;
  font-size: 1.12em;
  letter-spacing: 0;
  line-height: .95;
  color: var(--chocolate);
}
.eyebrow {
  font-family: var(--label);
  font-size: 13px;
  letter-spacing: .14em;
  line-height: 1.4;
  color: var(--sage-deep);
  opacity: 1;
}
.signature { font-family: var(--script); font-style: normal; font-size: 38px; color: var(--chocolate); }

.salon-copy > p, .audience-content > p, .inner-hero p:not(.signature), .story-body p, .instagram-head p,
.collection-head > p, .visit-details p, .booking-explainer p, .faq details p, .behind-copy p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
}

.header nav a, .visit-link, .lang, .button, .text-link, .audience-nav a,
.collection-filters button, .booking-tabs button, .footer nav a {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.header nav a { font-size: 15px; }
.visit-link, .lang { font-size: 14px; }
.button, .text-link, .audience-nav a { font-size: 14px; }
.collection-filters button, .booking-tabs button { font-size: 13px; }

.button { border-radius: 999px; padding: 15px 26px 14px 28px; gap: 22px; background: var(--chocolate); border-color: var(--chocolate); transition: background .3s, transform .3s var(--ease), box-shadow .3s; }
.button:hover { background: var(--dark); transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(51, 19, 9, .7); }
.text-link { border-bottom-color: rgba(95, 48, 28, .45); }

/* ---------- Bandeau et en-tête ---------- */
.announcement { background: var(--dark); color: var(--pink); font-family: var(--label); font-size: 13px; letter-spacing: .16em; padding: 8px 20px 7px; }
.announcement > span:first-child { color: var(--gold); }
.header { background: var(--cream); border-bottom: 1px solid var(--line); padding-block: 16px; }
.brand { gap: 12px; }
.brand-mark, .small-mark {
  background: var(--chocolate);
  -webkit-mask: url('charte/logo-masque.svg') center / contain no-repeat;
  mask: url('charte/logo-masque.svg') center / contain no-repeat;
}
.brand-mark { width: 42px; height: 46px; }
.brand b { width: 146px; height: 28px; font-size: 0; color: transparent; background: url('charte/le-jardin.svg') left center / contain no-repeat; }
.brand-script { font-family: var(--script); font-size: 33px; line-height: .8; margin: 2px 0 0 20px; color: var(--chocolate); }

/* ---------- Accueil : la carte de visite ---------- */
.opening.jc-hero {
  position: relative;
  display: grid;
  place-items: center;
  grid-template-columns: 1fr;
  max-width: none;
  margin: 0;
  min-height: clamp(640px, 84vh, 860px);
  padding: 64px 0 120px;
  overflow: hidden;
  text-align: center;
  background: radial-gradient(60% 55% at 50% 42%, var(--paper) 0%, var(--cream) 70%);
}
.jc-col { position: absolute; top: 0; height: 100%; width: auto; max-width: none; pointer-events: none; user-select: none; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%); }
.jc-col-g { left: 0; }
.jc-col-d { right: 0; }
.jc-hero .jc-col { animation: jcColIn 1.6s var(--ease) both; }
.jc-hero .jc-col-d { animation-delay: .12s; }
.jc-garland { display: none; }

.jc-card { position: relative; z-index: 2; width: min(760px, 100% - 40px); }
.jc-sprig { display: block; position: relative; width: 104px; margin: 0 auto 4px; }
.jc-sprig img { display: block; width: 100%; height: auto; }
.jc-sprig::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 250, 225, .9) 50%, transparent 60%) -180% 0 / 280% 100% no-repeat;
  -webkit-mask: url('charte/sprig-or.webp') center / contain no-repeat;
  mask: url('charte/sprig-or.webp') center / contain no-repeat;
  animation: jcSheen 7s ease-in-out 1.8s infinite;
}
.jc-hero .jc-sprig { animation: jcSprig 1.2s var(--ease) .1s both; }
.jc-wordmark { margin: 0; line-height: 1; letter-spacing: 0; }
.jc-wordmark-top { display: block; width: min(540px, 78vw); height: auto; margin: 6px auto 0; animation: jcRise 1s var(--ease) .3s both; }
.jc-wordmark-script {
  display: block;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(66px, 8.6vw, 124px);
  line-height: .72;
  color: var(--chocolate);
  margin: -.02em 0 0 .9em;
  padding: .12em .2em .18em;
  animation: jcWrite 1.9s cubic-bezier(.6, .05, .3, 1) .7s both;
}
.jc-tagline {
  font-family: var(--label);
  font-size: 15px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--chocolate);
  margin: 26px 0 0;
  animation: jcRise .9s var(--ease) 1.3s both;
}
.jc-tagline i { font-style: normal; color: var(--gold); margin: 0 .7em; font-size: .8em; }
.jc-motto {
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.2;
  color: var(--ink);
  margin: 34px 0 0;
  animation: jcRise .9s var(--ease) 1.45s both;
}
.jc-motto em { font-family: var(--script); font-style: normal; font-size: 1.18em; color: var(--chocolate); }
.jc-lede { font-size: 15px; line-height: 1.8; color: var(--text); max-width: 500px; margin: 14px auto 0; animation: jcRise .9s var(--ease) 1.55s both; }
.jc-actions { display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: center; align-items: center; margin-top: 30px; animation: jcRise .9s var(--ease) 1.65s both; }
.jc-address { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; font-size: 12.5px; letter-spacing: .04em; color: var(--text); animation: jcRise .9s var(--ease) 1.75s both; }
.jc-address .small-mark { width: 20px; height: 22px; background: var(--sage-deep); }

/* Trio de photos en arches, à cheval sur la carte */
.jc-trio {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  align-items: end;
  gap: clamp(16px, 2.6vw, 40px);
  max-width: 1120px;
  margin: -84px auto 0;
  padding: 0 6vw 96px;
}
.jc-arch { margin: 0; text-align: center; }
.jc-arch img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 999px 999px 8px 8px;
  border: 8px solid var(--paper);
  box-shadow: 0 34px 60px -38px rgba(51, 19, 9, .55), 0 0 0 1px var(--line);
  transition: transform .8s var(--ease);
}
.jc-arch-2 img { aspect-ratio: 3 / 4.25; }
.jc-arch-1, .jc-arch-3 { padding-bottom: 34px; }
.jc-arch:hover img { transform: translateY(-6px); }
.jc-arch figcaption { font-family: var(--script); font-size: 27px; line-height: 1.1; color: var(--chocolate); margin-top: 14px; }

/* Bandeau de rubriques : remplacé par la ligne de la carte */
.ribbon { display: none; }

/* ---------- Collection ---------- */
.collection { background: var(--cream); padding-top: 70px; }
.collection-head h2 em { display: inline-block; margin-top: .06em; }
.collection-filters button { border-radius: 99px; background: transparent; }
.collection-image { border-radius: 8px; }
.collection-product h3 { color: var(--ink); }
.collection-product p { color: var(--text); font-size: 13px; }
.collection-foot { border-top-color: var(--line); color: var(--text); }

/* ---------- Salon de thé ---------- */
.salon { position: relative; overflow: hidden; background: var(--pink); border-top: 0; }
.salon-photo > img { border-radius: 999px 999px 8px 8px; border: 8px solid var(--paper); box-shadow: 0 34px 60px -38px rgba(51, 19, 9, .55); }
.photo-note { font-family: var(--script); font-style: normal; font-size: 30px; line-height: 1.1; color: var(--chocolate); background: var(--paper); border-radius: 6px; box-shadow: 0 14px 30px -18px rgba(51, 19, 9, .45); }
.jc-col-peek { top: 0; right: -70px; height: 100%; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 82%, transparent 100%); }
.menu-teaser b { color: var(--ink); }

/* ---------- Bandeau ateliers : rayures et médaillon ---------- */
.workshop-banner.jc-banner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  gap: 3vw;
  padding: 90px 6vw;
  color: var(--ink);
  background: repeating-linear-gradient(90deg, var(--sage-soft) 0 26px, var(--paper) 26px 52px);
}
.jc-banner-photo { margin: 0; width: min(440px, 100%); justify-self: end; }
.jc-banner-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px 8px 8px; border: 10px solid var(--paper); box-shadow: 0 40px 70px -40px rgba(51, 19, 9, .6); }
.jc-medallion {
  justify-self: start;
  width: min(500px, 100%);
  aspect-ratio: 600 / 760;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 13% 15%;
  background: url('charte/medaillon-feston.svg') center / contain no-repeat;
  filter: drop-shadow(0 30px 40px rgba(51, 19, 9, .22));
}
.jc-sprig--small { width: 64px; margin-bottom: 12px; }
.jc-medallion h2 { font-size: clamp(34px, 3.2vw, 46px); line-height: 1.05; margin: 14px 0 16px; }
.jc-medallion p { font-size: 15px; line-height: 1.75; color: var(--text); margin: 0 0 24px; max-width: 300px; }

/* ---------- Derrière le Jardin ---------- */
.story-teaser { background: var(--cream); }
.jc-sigle { display: block; width: 96px; height: auto; margin: 0 auto 22px; opacity: .9; }
.story-teaser h2 em { display: inline-block; }

/* ---------- Instagram ---------- */
.instagram-section { background: var(--pink); border-top: 0; }
.instagram-gallery img { border-radius: 8px; }
.instagram-gallery a > span { background: var(--paper); color: var(--chocolate); }

/* ---------- Nous trouver ---------- */
.visit { display: grid; grid-template-columns: 1fr auto 1fr; gap: 4vw; align-items: center; background: var(--cream); border-top: 0; }
.visit-address > span { color: var(--gold); }
.jc-couronne-wrap { margin: 0; }
.jc-couronne { display: block; width: clamp(240px, 24vw, 330px); height: auto; }
.visit-details { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 6px 30px; }

/* ---------- Pied de page ---------- */
.footer { background: var(--dark); border-top: 3px solid var(--gold); }
.footer .brand-mark { background: var(--gold); }
.footer .brand b { background-image: url('charte/le-jardin-creme.svg'); }
.footer .brand-script { color: var(--cream); }
.footer-top > p { font-family: var(--script); font-size: 30px; line-height: 1.25; color: var(--pink); }
.footer nav a { font-size: 13px; }

/* ---------- Ateliers ---------- */
.workshop-hero-art { position: relative; }
.workshop-hero-art img { border-radius: 999px 999px 8px 8px; border: 8px solid var(--paper); box-shadow: 0 34px 60px -38px rgba(51, 19, 9, .55); }
.jc-seal {
  position: absolute;
  left: -48px; bottom: -36px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: var(--chocolate);
  color: var(--pink);
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow: 0 0 0 5px var(--paper), 0 18px 34px -14px rgba(51, 19, 9, .6);
  z-index: 4;
}
.jc-seal svg { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); animation: jcSpin 36s linear infinite; }
.jc-seal text { font-family: var(--label); font-size: 12px; letter-spacing: 2.4px; fill: #E9C46A; }
.jc-seal b { font-family: var(--script); font-weight: 400; font-size: 27px; line-height: .95; color: var(--cream); display: block; padding-top: 4px; }
.jc-seal small { font-family: var(--label); font-size: 12px; letter-spacing: .08em; display: block; margin-top: 3px; }
.audience-number { font-family: var(--script); color: var(--sage-deep); }
.season-note {
  position: relative;
  border: 1px solid var(--pink-deep);
  border-radius: 8px;
  background: var(--paper);
  padding: 28px 30px 24px;
  box-shadow: 0 0 0 6px var(--pink);
  margin: 34px 6px;
}
.season-note::after {
  content: '';
  position: absolute;
  top: -22px; right: 18px;
  width: 52px; height: 56px;
  background: url('charte/sprig-or.webp') center / contain no-repeat;
  transform: rotate(14deg);
}
.season-note h3 { font-family: var(--script); font-size: 52px; line-height: 1; margin: 8px 0 4px; color: var(--chocolate); }
.season-note .season-dates { font-family: var(--label); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--sage-deep); margin-bottom: 10px; }
.season-note p { font-size: 14px; }

.reservation-section { background: var(--pink); }
.reservation-heading h2 em { display: inline-block; }
.booking-shell { border: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 40px 70px -44px rgba(51, 19, 9, .6); background: var(--paper); }
.booking-intro { background: var(--chocolate); }
.booking-intro h3 { font-family: var(--script); font-size: 46px; line-height: 1; color: var(--cream); }
.booking-intro .eyebrow { color: var(--pink); }
.booking-intro > img { border-radius: 999px 999px 6px 6px; }
.calendar-icon { font-family: var(--label); border-radius: 6px; border-top-color: var(--sage); }
.booking-slot { border-radius: 6px; }
.booking-slot[aria-pressed=true] { background: #EEF0E4; border-color: var(--sage-deep); box-shadow: inset 4px 0 var(--sage-deep); }
.booking-total strong { font-family: var(--label); font-size: 24px; }
.booking-pay { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; background: var(--pink); border-radius: 6px; font-size: 12.5px; line-height: 1.55; }
.booking-pay > span { color: var(--gold); }
.booking-pay b { font-family: var(--label); font-weight: 400; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; display: block; }
.booking-form { display: grid; gap: 12px; margin: 18px 0 6px; }
.booking-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.booking-form label { display: grid; gap: 5px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #6d5246; }
.booking-form input, .booking-form textarea { font: inherit; font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--dark); background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 11px 12px; min-height: 46px; width: 100%; }
.booking-form textarea { min-height: 76px; resize: vertical; }
.booking-form input:focus-visible, .booking-form textarea:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 1px; }
.booking-form .hint { font-size: 11px; text-transform: none; letter-spacing: 0; color: #7b6257; }
.booking-mail-note { font-size: 13px; line-height: 1.6; color: #6d5246; margin: 6px 0 14px; }
#booking-dialog { border: 0; border-radius: 10px; max-height: calc(100dvh - 32px); overflow: auto; background: var(--paper); }
#booking-dialog::backdrop { background: rgba(51, 19, 9, .55); }
#booking-summary h3 { font-family: var(--script); font-size: 44px; }
#booking-done { margin-top: 10px; }
#booking-preview { white-space: pre-wrap; font: 13px/1.6 var(--body); background: var(--cream); border: 1px solid var(--line); border-left: 4px solid var(--sage); border-radius: 6px; padding: 14px 16px; margin: 12px 0 0; color: var(--dark); max-height: 46vh; overflow: auto; }

/* ---------- Notre histoire ---------- */
.story-hero { position: relative; overflow: hidden; max-width: none; padding-inline: 18vw; }
.story-hero .jc-col { animation: jcColIn 1.6s var(--ease) both; }
.story-photo { border-radius: 8px; }
.story-photo .photo-note { font-size: 27px; }
.behind { position: relative; }

/* ---------- Mouvement ---------- */
@keyframes jcColIn { from { opacity: 0; transform: translateY(18px) scale(1.02); } }
@keyframes jcSprig { from { opacity: 0; transform: translateY(-10px) rotate(-10deg) scale(.9); } }
@keyframes jcRise { from { opacity: 0; transform: translateY(16px); } }
@keyframes jcWrite { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes jcSheen { 0%, 60% { background-position: -180% 0; } 88%, 100% { background-position: 180% 0; } }
@keyframes jcSpin { to { transform: rotate(360deg); } }
.js-motion .jc-reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.js-motion .jc-reveal.is-visible { opacity: 1; transform: none; }
.jc-col { translate: 0 var(--py, 0px); }

@media (prefers-reduced-motion: reduce) {
  .jc-hero .jc-col, .story-hero .jc-col, .jc-hero .jc-sprig, .jc-wordmark-top, .jc-wordmark-script, .jc-tagline, .jc-motto, .jc-lede, .jc-actions, .jc-address { animation: none; }
  .jc-sprig::after, .jc-seal svg { animation: none; }
  .js-motion .jc-reveal { opacity: 1; transform: none; transition: none; }
  .jc-col { translate: none; }
}

/* ---------- Tablette ---------- */
@media (max-width: 1100px) {
  .jc-col-g, .jc-col-d { height: 88%; top: 6%; }
  .visit { grid-template-columns: 1fr 1fr; }
  .jc-couronne-wrap { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .jc-couronne { width: 240px; }
  .jc-col-peek { right: -130px; opacity: .8; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 760px) {
  .brand b { width: 118px; height: 23px; }
  .brand-script { font-size: 27px; margin-left: 16px; }
  .brand-mark { width: 34px; height: 38px; }

  .opening.jc-hero { min-height: 0; padding: 150px 0 100px; }
  .jc-col-g, .jc-col-d { display: none; }
  .jc-garland { display: block; position: absolute; left: 50%; top: -34px; width: 500px; max-width: none; transform: translateX(-50%); pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 96%); mask-image: linear-gradient(180deg, #000 55%, transparent 96%); }
  .jc-sprig { width: 78px; }
  .jc-wordmark-script { margin-left: .6em; }
  .jc-tagline { font-size: 13px; letter-spacing: .12em; line-height: 1.9; }
  .jc-tagline i { margin: 0 .4em; }
  .jc-actions { flex-direction: column; gap: 16px; }

  .jc-trio { grid-template-columns: 1fr 1fr; margin-top: -60px; padding-bottom: 70px; gap: 14px; }
  .jc-arch-2 { grid-column: 1 / -1; grid-row: 1; width: 78%; justify-self: center; }
  .jc-arch-1, .jc-arch-3 { padding-bottom: 0; }
  .jc-arch img { border-width: 6px; }
  .jc-arch figcaption { font-size: 22px; }

  .jc-col-peek { display: none; }

  .workshop-banner.jc-banner { grid-template-columns: 1fr; padding: 60px 20px; gap: 0; }
  .jc-banner-photo { justify-self: center; width: 78%; position: relative; z-index: 1; }
  .jc-medallion { justify-self: center; aspect-ratio: auto; width: 100%; margin-top: -40px; position: relative; z-index: 2; background: var(--paper); border-radius: 46% 46% 12px 12px / 24% 24% 12px 12px; box-shadow: 0 0 0 8px var(--pink); padding: 52px 26px 34px; filter: none; }

  .visit { grid-template-columns: 1fr; }
  .jc-couronne-wrap { grid-column: auto; }
  .jc-couronne { width: 220px; }

  .story-hero { padding-inline: 7vw; }
  .jc-seal { width: 132px; height: 132px; left: -6px; bottom: -30px; }
  .jc-seal b { font-size: 22px; }
  .jc-seal text { font-size: 10px; letter-spacing: 1.6px; }
  .season-note h3 { font-size: 44px; }
  .booking-form .row { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .announcement { font-size: 11px; letter-spacing: .08em; padding-inline: 10px; }
  .jc-tagline { font-size: 12px; }
}

/* Gilda n'a pas d'italique : légendes en script, prix en romain */
.caption { font-family: var(--script); font-style: normal; font-size: 26px; color: var(--chocolate); }
.menu-teaser > div > span { font-style: normal; font-size: 22px; color: var(--chocolate); }
.handwritten { font-family: var(--script); }

/* ==========================================================================
   v3 — lisibilité, typographie unifiée, page Ateliers, responsive
   Échelle : titres Gilda Display, accents en Bailenson (quelques mots),
   repères en Native Stories (13–15 px, capitales), texte en Manrope 15–17 px.
   ========================================================================== */
:root { --label-ink: #5A6340; --muted: #6B4E42; }
body { font-size: 16px; }
.eyebrow { color: var(--label-ink); font-size: 13.5px; letter-spacing: .13em; }
h2 { font-size: clamp(38px, 4.2vw, 60px); line-height: 1.04; }
h1 em, h2 em { line-height: 1; }
.salon-copy > p, .audience-content > p, .story-body p, .instagram-head p, .collection-head > p,
.visit-details p, .faq details p, .behind-copy p, .jc-medallion p { font-size: 16px; line-height: 1.75; color: var(--text); }
.collection-product p, .menu-teaser p { font-size: 14px; color: var(--muted); }
.collection-foot, .gallery-note { font-size: 13px; color: var(--muted); }
address, .visit-address address { font-size: 15px; line-height: 1.6; }
.contact-row .eyebrow { font-size: 13px; }
.footer-top > p { font-family: var(--serif); font-size: 24px; line-height: 1.35; color: var(--pink); }
.footer-bottom { font-size: 12px; color: rgba(254, 250, 241, .72); }
.footer nav a { font-size: 14px; }
.photo-note { font-size: 28px; }
.text-link { gap: 18px; }

/* ---------- Ateliers : héros ---------- */
.jc-ws-hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 6vw;
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
  padding: 72px 7vw 96px;
}
.jc-ws-intro h1 { font-size: clamp(50px, 5.6vw, 86px); line-height: 1.02; margin: 20px 0 22px; }
.jc-ws-intro h1 em { font-size: 1.28em; }
.jc-ws-hero .jc-ws-lede { font-size: 17px; line-height: 1.75; color: var(--text); max-width: 520px; margin: 0; }
.jc-facts { list-style: none; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; margin: 30px 0 0; padding: 0; }
.jc-facts li { padding: 4px 26px; border-left: 1px solid var(--line); font-size: 14px; line-height: 1.45; color: var(--muted); }
.jc-facts li:first-child { padding-left: 0; border-left: 0; }
.jc-facts b { display: block; font-family: var(--label); font-weight: 400; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--chocolate); }
.jc-ws-actions { margin-top: 32px; }
.jc-ws-hero .workshop-hero-art { justify-self: end; width: min(100%, 460px); }
.jc-ws-hero .workshop-hero-art img { height: auto; aspect-ratio: 4 / 5; width: 100%; }

/* ---------- Ateliers : le thème du moment ---------- */
.jc-season { position: relative; overflow: hidden; background: var(--pink); padding: 96px 6vw; display: grid; place-items: center; }
.jc-season .jc-col { height: 115%; top: -7%; opacity: .95; }
.jc-season-card {
  position: relative;
  z-index: 2;
  width: min(720px, 100%);
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--pink-deep);
  border-radius: 12px;
  box-shadow: 0 0 0 10px var(--paper), 0 0 0 11px var(--pink-deep), 0 40px 70px -40px rgba(51, 19, 9, .5);
  padding: 54px 56px 48px;
}
.jc-season-card::before {
  content: '';
  display: block;
  width: 70px; height: 76px;
  margin: -6px auto 10px;
  background: url('charte/sprig-or.webp') center / contain no-repeat;
}
.jc-season-title { font-family: var(--script); font-size: clamp(64px, 8vw, 104px); line-height: 1; letter-spacing: 0; color: var(--chocolate); margin: 10px 0 14px; }
.jc-season-card .jc-season-text { font-size: 17px; line-height: 1.75; color: var(--text); max-width: 520px; margin: 0 auto; }
.jc-season-note { font-family: var(--label); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--label-ink); margin: 22px 0 26px; }

/* ---------- Ateliers : deux publics ---------- */
.jc-audiences { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 1200px; margin: 0 auto; padding: 96px 6vw; border-top: 0; }
.jc-aud { display: grid; gap: 22px; align-content: start; }
.jc-aud img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; box-shadow: 0 30px 50px -36px rgba(51, 19, 9, .55); }
.jc-aud h2 { font-size: clamp(32px, 3vw, 44px); margin: 12px 0 12px; }
.jc-aud p { font-size: 16px; line-height: 1.75; color: var(--text); max-width: 460px; }

/* ---------- Ateliers : réservation ---------- */
.jc-booking { background: var(--pink); padding: 96px 6vw; }
.jc-booking-head { text-align: center; margin: 0 auto 40px; }
.jc-booking-head h2 { margin-top: 12px; }
.jc-booking-shell { display: grid; grid-template-columns: .82fr 1.18fr; max-width: 1080px; margin: 0 auto; background: var(--paper); border-radius: 14px; overflow: hidden; box-shadow: 0 40px 80px -48px rgba(51, 19, 9, .6); border: 1px solid var(--pink-deep); }
.jc-steps { background: var(--cream); padding: 42px 38px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 22px; }
.jc-steps h3 { font-family: var(--serif); font-size: 30px; line-height: 1.1; color: var(--ink); }
.jc-steps ol { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 18px; }
.jc-steps li { counter-increment: step; display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; font-size: 15px; line-height: 1.55; color: var(--text); }
.jc-steps li::before { content: counter(step); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; background: var(--chocolate); color: var(--cream); display: grid; place-items: center; font-family: var(--label); font-size: 16px; line-height: 1; padding-top: 2px; }
.jc-steps li b { font-weight: 600; color: var(--ink); font-size: 16px; }
.jc-steps .text-link { margin-top: 6px; align-self: flex-start; }
.jc-booking .booking-ui { padding: 36px 40px 34px; }
.jc-booking .demo-notice { font-size: 14px; line-height: 1.5; letter-spacing: 0; background: #F2F3E8; color: #454C2B; border: 1px solid #D6DABF; border-radius: 8px; padding: 11px 14px; margin: 0 0 20px; }
.jc-booking .booking-tabs { display: inline-flex; gap: 6px; margin: 0; padding: 5px; border: 1px solid var(--line); border-radius: 99px; background: var(--cream); grid-template-columns: none; }
.jc-booking .booking-tabs button { border: 0; border-radius: 99px; padding: 10px 22px; min-height: 42px; font-family: var(--label); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--chocolate); font-weight: 400; }
.jc-booking .booking-tabs button[aria-pressed=true] { background: var(--chocolate); color: var(--cream); }
.jc-booking .booking-tabs button[hidden] { display: none; }
.jc-booking .booking-title { margin: 24px 0 6px; align-items: baseline; }
.jc-booking .booking-title h3 { font-family: var(--serif); font-size: 34px; line-height: 1.1; }
.jc-booking .booking-title > span { font-size: 15px; font-weight: 600; color: var(--ink); }
.jc-booking #booking-description { font-size: 15px; line-height: 1.6; color: var(--text); }
.jc-booking .slot-heading { font-family: var(--label); font-size: 14px; letter-spacing: .1em; color: var(--label-ink); margin: 26px 0 12px; }
.jc-booking .slot-heading #booking-month { font-family: var(--body); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--muted); }
.jc-booking .booking-slots { gap: 8px; }
.jc-booking .booking-slot { min-height: 56px; padding: 12px 16px; font-size: 15px; border-radius: 8px; background: #fff; gap: 16px; transition: border-color .2s, background .2s; }
.jc-booking .booking-slot:hover:not(:disabled) { border-color: var(--sage-deep); }
.jc-booking .booking-slot b { font-weight: 600; color: var(--ink); }
.jc-booking .booking-slot b::first-letter { text-transform: uppercase; }
.jc-booking .booking-slot em { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: #EEF0E4; color: #4D5531; min-width: 0; }
.jc-booking .booking-slot em.limited { background: #F6E0D6; color: #8A3B1D; }
.jc-booking .booking-slot:disabled em { background: transparent; color: #8e837b; }
.jc-booking .participants-line { font-family: var(--label); font-size: 14px; letter-spacing: .1em; color: var(--label-ink); margin: 26px 0 18px; }
.jc-booking .stepper { border-radius: 99px; overflow: hidden; background: #fff; }
.jc-booking .stepper button { width: 46px; height: 46px; font-size: 22px; color: var(--chocolate); }
.jc-booking .stepper output { min-width: 34px; font-size: 17px; font-weight: 600; color: var(--ink); }
.jc-booking .booking-total { font-size: 15px; color: var(--muted); padding-top: 18px; }
.jc-booking .booking-total strong { font-family: var(--serif); font-size: 28px; color: var(--ink); font-weight: 400; }
.jc-booking .booking-next { margin-top: 20px; min-height: 56px; justify-content: center; gap: 16px; }
.jc-booking .booking-next:disabled { opacity: .5; cursor: not-allowed; }
.jc-booking .demo-small { font-size: 13px; color: var(--muted); margin-top: 12px; }

/* ---------- Ateliers : questions ---------- */
.jc-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 6vw; max-width: 1200px; margin: 0 auto; padding: 96px 6vw; border-top: 0; }
.jc-faq-head h2 { margin-top: 12px; }
.jc-faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.jc-faq details:first-child { border-top: 1px solid var(--line); }
.jc-faq summary { font-size: 17px; font-weight: 600; color: var(--ink); padding: 18px 0; align-items: center; min-height: 56px; }
.jc-faq summary > span:last-child { font-size: 26px; color: var(--chocolate); transition: transform .3s var(--ease); }
.jc-faq details p { font-size: 16px; line-height: 1.75; margin: 0 0 20px; max-width: 620px; }

/* Fenêtre de demande */
#booking-dialog { width: min(620px, calc(100vw - 24px)); padding: 30px; }
#booking-dialog .dialog-head h2 { font-family: var(--serif); font-size: 32px; }
#booking-summary p { font-size: 15px; }
.booking-form label { font-size: 12.5px; color: var(--muted); }
#booking-dialog .demo-notice { font-size: 13.5px; letter-spacing: 0; border-radius: 8px; padding: 10px 12px; }

/* ---------- Tablette ---------- */
@media (max-width: 1100px) {
  .jc-ws-hero { gap: 4vw; padding: 60px 5vw 80px; }
  .jc-facts { grid-template-columns: 1fr 1fr 1fr; }
  .jc-facts li { padding: 4px 16px; }
  .jc-booking-shell { grid-template-columns: 1fr; }
  .jc-steps { border-right: 0; border-bottom: 1px solid var(--line); padding: 34px 36px; }
  .jc-steps ol { grid-template-columns: 1fr 1fr; gap: 18px 28px; }
  .jc-steps .text-link { margin-top: 4px; }
  .jc-faq { grid-template-columns: 1fr; gap: 26px; }
  .jc-season .jc-col { opacity: .55; }
  .opening.jc-hero { min-height: 0; padding-block: 56px 110px; }
  .jc-col-g, .jc-col-d { height: 100%; top: 0; }
  .jc-card { width: min(640px, 100% - 300px); }
}
@media (max-width: 900px) {
  .jc-ws-hero { grid-template-columns: 1fr; }
  .jc-ws-hero .workshop-hero-art { justify-self: center; width: min(100%, 440px); margin-top: 10px; }
  .jc-audiences { gap: 36px; }
  .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .instagram-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .instagram-gallery a:nth-child(n+4) { display: none; }
  .salon { grid-template-columns: 1fr 1fr; gap: 40px; }
  .jc-card { width: min(620px, 100% - 200px); }
  .jc-col-g, .jc-col-d { opacity: .9; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 760px) {
  body { font-size: 15px; }
  h2 { font-size: clamp(34px, 9vw, 44px); }
  .section, .jc-audiences, .jc-faq, .jc-booking, .jc-season { padding: 64px 22px; }
  .jc-card { width: calc(100% - 40px); }
  .jc-trio { padding-inline: 20px; }
  .jc-ws-hero { padding: 44px 22px 64px; gap: 30px; }
  .jc-ws-intro h1 { font-size: clamp(44px, 12vw, 58px); }
  .jc-ws-hero .jc-ws-lede { font-size: 16px; }
  .jc-facts { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
  .jc-facts li { padding: 0 0 0 14px; border-left: 2px solid var(--pink-deep); }
  .jc-facts li:first-child { padding-left: 14px; border-left: 2px solid var(--pink-deep); }
  .jc-facts b { display: inline; margin-right: 6px; font-size: 15px; }
  .jc-ws-actions .button { width: 100%; justify-content: center; }
  .jc-season .jc-col { display: none; }
  .jc-season-card { padding: 40px 22px 34px; box-shadow: 0 0 0 7px var(--paper), 0 0 0 8px var(--pink-deep), 0 30px 50px -36px rgba(51, 19, 9, .5); }
  .jc-season-card .jc-season-text { font-size: 16px; }
  .jc-season-note { font-size: 13px; line-height: 1.6; }
  .jc-audiences { grid-template-columns: 1fr; }
  .jc-booking-shell { border-radius: 12px; }
  .jc-steps { padding: 28px 22px; }
  .jc-steps ol { grid-template-columns: 1fr; gap: 14px; }
  .jc-booking .booking-ui { padding: 24px 18px 26px; }
  .jc-booking .booking-tabs { display: flex; width: 100%; }
  .jc-booking .booking-tabs button { flex: 1; padding-inline: 10px; }
  .jc-booking .booking-title { flex-direction: column; align-items: flex-start; gap: 4px; }
  .jc-booking .booking-title h3 { font-size: 30px; }
  .jc-booking .booking-slot { grid-template-columns: 1fr auto; row-gap: 2px; }
  .jc-booking .booking-slot > span { grid-row: 2; color: var(--muted); }
  .jc-booking .booking-slot em { grid-row: span 2; align-self: center; }
  .jc-faq summary { font-size: 16px; }
  #booking-dialog { padding: 22px 18px; }
  .collection-grid { gap: 26px 14px; }
  .collection-product h3 { font-size: 24px; }
  .salon { grid-template-columns: 1fr; }
  .salon-photo > img { height: auto; aspect-ratio: 4 / 5; }
  .instagram-head { grid-template-columns: 1fr; gap: 18px; }
  .visit-details { padding: 4px 20px; }
  .footer-top { grid-template-columns: 1fr; gap: 22px; text-align: left; }
  .footer nav { flex-direction: row; flex-wrap: wrap; gap: 10px 20px; }
  .footer-bottom { flex-direction: column; gap: 6px; }
  .story-body { grid-template-columns: 1fr; gap: 16px; padding-inline: 22px; }
  .behind { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .jc-booking .booking-tabs button { font-size: 14px; letter-spacing: .05em; }
  .collection-grid { grid-template-columns: 1fr 1fr; }
  .jc-season-title { font-size: 58px; }
}
@media (max-width: 760px) {
  .jc-booking .booking-slot b { grid-column: 1; grid-row: 1; }
  .jc-booking .booking-slot > span { grid-column: 1; grid-row: 2; }
  .jc-booking .booking-slot em { grid-column: 2; grid-row: 1 / span 2; }
}

/* Tablette étroite : les colonnes laissent la place à la guirlande, le médaillon devient une carte */
@media (max-width: 1000px) {
  .opening.jc-hero { padding: 170px 0 100px; }
  .opening.jc-hero .jc-col-g, .opening.jc-hero .jc-col-d { display: none; }
  .jc-garland { display: block; position: absolute; left: 50%; top: -40px; width: max(560px, 112vw); max-width: none; transform: translateX(-50%); pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 96%); mask-image: linear-gradient(180deg, #000 55%, transparent 96%); }
  .jc-card { width: min(640px, 100% - 48px); }
  .jc-medallion { aspect-ratio: auto; background: var(--paper); border-radius: 46% 46% 12px 12px / 22% 22% 12px 12px; box-shadow: 0 0 0 8px var(--pink), 0 30px 50px -36px rgba(51, 19, 9, .5); padding: 54px 30px 36px; filter: none; }
  .jc-medallion p { max-width: none; }
}
@media (max-width: 760px) {
  .opening.jc-hero { padding: 150px 0 100px; }
  .jc-garland { width: max(500px, 128vw); top: -34px; }
}

/* Repères lisibles partout */
.jc-seal small { font-size: 13px; }
.jc-steps .text-link { font-size: 13px; }
@media (max-width: 760px) { .jc-steps .text-link { white-space: normal; text-align: left; } }

/* ==========================================================================
   v4 — lisibilité renforcée + Ateliers accessibles
   Règle : la cursive (Bailenson) n'est utilisée qu'en grand (≥ 44 px) ;
   toutes les petites légendes passent en Gilda Display, droites et lisibles.
   ========================================================================== */
body { font-size: 17px; }
h2 { font-size: clamp(40px, 4.4vw, 64px); }
h1 em, h2 em { font-size: 1.34em; line-height: .95; letter-spacing: .005em; }
.jc-motto { font-size: clamp(28px, 2.8vw, 40px); }
.jc-motto em { font-size: 1.36em; }
.eyebrow { font-size: 15px; letter-spacing: .12em; }
.button, .text-link, .audience-nav a { font-size: 16px; }
.header nav a { font-size: 16px; }
.collection-filters button, .booking-tabs button { font-size: 15px; }
.salon-copy > p, .story-body p, .instagram-head p, .collection-head > p, .visit-details p,
.faq details p, .behind-copy p, .jc-medallion p, .jc-lede, .jc-aud p { font-size: 17px; line-height: 1.75; }
.collection-product h3 { font-size: 30px; }
.collection-product p, .menu-teaser p, .collection-foot, .gallery-note { font-size: 15.5px; }
.menu-teaser b { font-size: 26px; }
address, .visit-address address { font-size: 16.5px; }

/* Petites légendes : romain, plus grand, plus foncé */
.jc-arch figcaption, .caption, .photo-note, .story-photo .photo-note {
  font-family: var(--serif);
  font-style: normal;
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: 0;
}
.photo-note { padding: 14px 18px; }
.signature { font-size: 50px; line-height: 1.1; }
.story-teaser .signature { font-size: 52px; }
.jc-seal b { font-size: 30px; }
.season-note h3, #booking-summary h3 { font-size: 52px; }
.footer-top > p { font-size: 26px; }

/* ---------- Ateliers : héros ---------- */
.jc-ws-hero .jc-ws-lede { font-size: 19px; }
.jc-facts { gap: 0; }
.jc-facts li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; padding: 6px 26px; }
.jc-facts li svg, .jc-fiche svg, .jc-infos-grid svg { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--chocolate); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.jc-facts b { font-size: 17px; margin-bottom: 2px; }
.jc-ws-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; }

/* ---------- Fiche pratique ---------- */
.jc-fiche { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 28px 0 30px; border-block: 1px solid var(--pink-deep); text-align: left; }
.jc-fiche > div { padding: 16px 14px; border-left: 1px solid var(--pink-deep); }
.jc-fiche > div:first-child { border-left: 0; }
.jc-fiche dt { display: flex; align-items: center; gap: 8px; font-family: var(--label); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--label-ink); }
.jc-fiche dt svg { width: 20px; height: 20px; }
.jc-fiche dd { margin: 6px 0 0; font-size: 17px; line-height: 1.35; font-weight: 600; color: var(--ink); }
.jc-fiche dd.is-pending { font-weight: 400; color: var(--muted); font-style: normal; }
.jc-fiche-soon { margin: 22px 0 0; padding: 14px 18px; border-left: 3px solid var(--pink-deep); background: rgba(255, 241, 232, .7); border-radius: 0 10px 10px 0; font-size: 15.5px; line-height: 1.6; color: var(--text); }
.jc-aud .jc-fiche { grid-template-columns: 1fr 1fr; margin-bottom: 0; }
.jc-aud .jc-fiche > div:nth-child(3) { border-left: 0; }
.jc-aud .jc-fiche > div:nth-child(n+3) { border-top: 1px solid var(--pink-deep); }

/* ---------- Réservation ---------- */
.jc-booking-lede { font-size: 18px; color: var(--text); margin: 14px auto 0; max-width: 560px; }
.jc-steps h3 { font-size: 32px; }
.jc-steps li { font-size: 16.5px; }
.jc-steps li b { font-size: 17px; }
.jc-steps-alt { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); }
.jc-steps-alt > p:first-child { font-family: var(--serif); font-size: 22px; color: var(--ink); margin-bottom: 6px; }
.jc-steps-alt p { font-size: 16px; line-height: 1.6; color: var(--text); }
.jc-phone { display: inline-block; font-family: var(--serif); font-size: 30px; color: var(--chocolate); margin-top: 6px; }

.jc-field { border: 0; padding: 0; margin: 0 0 26px; min-width: 0; }
.jc-step-label { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--serif); font-size: 24px; line-height: 1.2; color: var(--ink); margin-bottom: 14px; padding: 0; }
.jc-step-label > span[aria-hidden] { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--chocolate); color: var(--cream); display: grid; place-items: center; font-family: var(--label); font-size: 17px; padding-top: 2px; }
.jc-step-label small { font-family: var(--body); font-size: 15px; color: var(--muted); margin-left: auto; }
.jc-booking .participants-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: inherit; letter-spacing: 0; margin: 0 0 22px; }
.jc-booking .participants-line .jc-step-label { margin: 0; }
.jc-booking .booking-tabs button { font-size: 16px; padding: 12px 26px; min-height: 48px; }
.jc-atelier { background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px 6px; margin: 0 0 26px; }
.jc-atelier h3 { font-family: var(--serif); font-size: 32px; line-height: 1.1; color: var(--ink); }
.jc-atelier p { font-size: 16.5px; line-height: 1.6; color: var(--text); margin-top: 6px; }
.jc-fiche--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 14px 0 10px; border: 0; }
.jc-fiche--compact > div { border: 0; padding: 8px 0; }
.jc-fiche--compact dt { font-size: 13px; }
.jc-fiche--compact dd { font-size: 16.5px; margin-top: 2px; }

.jc-booking .booking-slots { display: grid; gap: 10px; }
.jc-booking .booking-slot { position: relative; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; font-size: 17px; text-decoration: none; color: var(--ink); box-shadow: none; }
.jc-booking .booking-slot input { width: 22px; height: 22px; margin: 0; accent-color: var(--chocolate); cursor: pointer; }
.jc-booking .booking-slot .slot-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.jc-booking .booking-slot .slot-when b { font-weight: 600; font-size: 17px; }
.jc-booking .booking-slot .slot-when span { font-size: 17px; color: var(--text); }
.jc-booking .booking-slot em { font-style: normal; font-size: 14px; font-weight: 600; padding: 5px 12px; border-radius: 99px; background: #EEF0E4; color: #3F4724; white-space: nowrap; }
.jc-booking .booking-slot em.limited { background: #F6E0D6; color: #7E3315; }
.jc-booking .booking-slot em.full { background: #EDE6E1; color: #5B463D; }
.jc-booking .booking-slot.is-full .slot-when b, .jc-booking .booking-slot.is-full .slot-when span { color: var(--muted); }
.jc-booking .booking-slot:hover { border-color: var(--sage-deep); }
.jc-booking .booking-slot.is-selected { border-color: var(--chocolate); background: var(--paper); box-shadow: 0 0 0 3px rgba(95, 48, 28, .12); }
.jc-booking .booking-slot:focus-within { outline: 3px solid var(--sage-deep); outline-offset: 2px; }
.jc-booking .stepper button { width: 52px; height: 52px; font-size: 24px; }
.jc-booking .stepper output { font-size: 19px; min-width: 40px; }
.jc-booking .booking-total { font-size: 16px; }
.jc-waitlist-note { background: #F4EEEA; border-left: 4px solid var(--chocolate); border-radius: 6px; padding: 12px 14px; font-size: 16px; line-height: 1.55; color: var(--ink); margin-top: 16px; }
.jc-booking .booking-next { min-height: 60px; font-size: 16px; }
.jc-booking .demo-notice { font-size: 15.5px; }
.jc-booking .demo-small { font-size: 14px; }

/* Fenêtre de demande */
#booking-dialog { width: min(640px, calc(100vw - 20px)); }
#booking-summary { padding: 6px 0 18px; }
#booking-summary p { font-size: 17px; margin-top: 4px; }
.jc-summary-wait { color: #7E3315; font-weight: 600; }
.jc-form-intro { font-size: 15px; color: var(--muted); margin: 18px 0 4px; }
.booking-form { gap: 16px; }
.booking-form label { gap: 6px; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.jc-lab { font-weight: 600; font-size: 16px; color: var(--ink); }
.jc-req { color: #9A3B16; text-decoration: none; border: 0; }
.booking-form .hint { font-weight: 400; font-size: 14px; color: var(--muted); }
.booking-form input, .booking-form textarea { font-size: 17px; min-height: 52px; padding: 12px 14px; border: 1.5px solid #CDB9AE; border-radius: 8px; }
.booking-form input[aria-invalid=true] { border-color: #9A3B16; box-shadow: 0 0 0 3px rgba(154, 59, 22, .15); }
.booking-form input::placeholder { color: #A08C82; }
.jc-error { min-height: 0; font-size: 16px; font-weight: 600; color: #9A3B16; margin: 0; }
.jc-error:empty { display: none; }
#booking-send { width: 100%; justify-content: center; min-height: 58px; }
.jc-form-pay { font-size: 15px; color: var(--muted); text-align: center; }
#booking-done:focus { outline: none; }
.jc-done-title { font-family: var(--serif); font-size: 28px; line-height: 1.2; color: var(--ink); margin: 16px 0 14px; }
.jc-done-actions { display: grid; gap: 10px; }
.jc-done-actions .button { justify-content: center; min-height: 56px; width: 100%; }
.jc-done-actions .button.light { background: var(--paper); color: var(--chocolate); border: 1.5px solid var(--chocolate); }
.jc-done-actions .button.light:hover { background: var(--pink); }
#booking-done .booking-mail-note { font-size: 16px; line-height: 1.6; color: var(--text); margin: 16px 0 10px; }
#booking-preview { font-size: 15px; line-height: 1.6; }
#booking-edit { margin-top: 14px; background: none; border: 0; border-bottom: 1px solid rgba(95, 48, 28, .45); cursor: pointer; }

/* ---------- Infos pratiques ---------- */
.jc-infos { max-width: 1200px; margin: 0 auto; padding: 96px 6vw 30px; border-top: 0; }
.jc-infos-head { text-align: center; margin-bottom: 40px; }
.jc-infos-head h2 { margin-top: 12px; }
.jc-infos-grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; }
.jc-infos-grid li { background: var(--paper); border: 1px solid var(--pink-deep); border-radius: 12px; padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; }
.jc-infos-grid li svg { width: 34px; height: 34px; }
.jc-infos-grid h3 { font-family: var(--serif); font-size: 26px; line-height: 1.15; color: var(--ink); }
.jc-infos-grid p { font-size: 16.5px; line-height: 1.6; color: var(--text); }
.jc-infos-grid .text-link { margin-top: auto; align-self: flex-start; font-size: 14px; }
.jc-faq summary { font-size: 18px; }
.jc-faq details p { font-size: 17px; }

@media (max-width: 1100px) {
  .jc-infos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jc-fiche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jc-fiche > div:nth-child(3) { border-left: 0; }
  .jc-fiche > div:nth-child(n+3) { border-top: 1px solid var(--pink-deep); }
}
@media (max-width: 760px) {
  body { font-size: 16.5px; }
  h2 { font-size: clamp(36px, 9.6vw, 46px); }
  h1 em, h2 em { font-size: 1.3em; }
  .signature, .story-teaser .signature { font-size: 42px; }
  .salon-copy > p, .story-body p, .instagram-head p, .collection-head > p, .visit-details p,
  .faq details p, .behind-copy p, .jc-medallion p, .jc-lede, .jc-aud p { font-size: 16.5px; }
  .collection-product h3 { font-size: 24px; }
  .collection-product p { font-size: 14.5px; }
  .jc-arch figcaption { font-size: 17px; }
  .jc-ws-hero .jc-ws-lede { font-size: 17px; }
  .jc-facts li { padding: 4px 0 4px 14px; }
  .jc-ws-actions { flex-direction: column; align-items: stretch; }
  .jc-ws-actions .text-link { align-self: center; }
  .jc-fiche > div { padding: 12px 10px; }
  .jc-fiche dd { font-size: 16px; }
  .jc-step-label { font-size: 21px; }
  .jc-step-label small { margin-left: 46px; width: 100%; }
  .jc-atelier { padding: 16px 16px 4px; }
  .jc-atelier h3 { font-size: 28px; }
  .jc-booking .booking-slot { grid-template-columns: 22px 1fr; padding: 12px 14px; }
  .jc-booking .booking-slot em { grid-column: 2; justify-self: start; }
  .jc-booking .booking-slot .slot-when { flex-direction: column; gap: 0; }
  .jc-booking .participants-line { flex-direction: column; align-items: flex-start; }
  .jc-infos { padding: 64px 22px 20px; }
  .jc-infos-grid { grid-template-columns: 1fr; }
  #booking-dialog { padding: 20px 16px; }
  .jc-done-title { font-size: 24px; }
}
.jc-booking .booking-slot > input { grid-column: 1; grid-row: 1; }
.jc-booking .booking-slot > .slot-when { grid-column: 2; grid-row: 1; }
.jc-booking .booking-slot > em { grid-column: 3; grid-row: 1; }
@media (max-width: 760px) {
  .jc-booking .booking-slot > input { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .jc-booking .booking-slot > .slot-when { grid-column: 2; grid-row: 1; }
  .jc-booking .booking-slot > em { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 6px; }
}
/* v4 — ajustements */
.jc-facts { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
.jc-facts li, .jc-facts li:first-child { padding: 0; border: 0; align-items: center; }
.jc-facts li span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 16.5px; color: var(--text); }
.jc-facts b { display: inline; margin: 0; }
.jc-booking .participants-line { text-transform: none; }
.jc-steps-alt { margin-top: 28px; }
.jc-infos-grid .text-link { white-space: nowrap; gap: 12px; }
.jc-season-card .jc-fiche dt { white-space: nowrap; }

/* ==========================================================================
   v5 — finitions : annonce, menu mobile, pied de page, frise
   ========================================================================== */
/* Bandeau d'annonce */
.jc-announce { padding: 0; }
.jc-announce a, .jc-announce .jc-announce-later { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 10px 18px 9px; color: var(--pink); font-family: var(--label); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.jc-announce b { font-weight: 400; color: #F2CF6B; }
.jc-announce-cta { border-bottom: 1px solid rgba(250, 225, 216, .6); padding-bottom: 1px; }
.jc-announce a:hover .jc-announce-cta { border-color: #F2CF6B; color: #F2CF6B; }
.jc-dot { width: 8px; height: 8px; border-radius: 50%; background: #F2CF6B; box-shadow: 0 0 0 0 rgba(242, 207, 107, .7); animation: jcPulse 2.4s ease-out infinite; }
@keyframes jcPulse { 70% { box-shadow: 0 0 0 9px rgba(242, 207, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(242, 207, 107, 0); } }
@media (prefers-reduced-motion: reduce) { .jc-dot { animation: none; } }

/* Menu : éléments réservés au téléphone */
.nav-book, .nav-foot { display: none; }
@media (max-width: 800px) {
  html.jc-menu-open { overflow: hidden; }
  .header nav#navigation { top: 100%; height: calc(100dvh - 100%); min-height: 420px; overflow: auto; padding: 26px 7vw 34px; gap: 0; background: var(--cream) url('charte/guirlande.webp') center bottom -30px / 560px auto no-repeat; box-shadow: 0 30px 40px -30px rgba(51, 19, 9, .35); }
  .header nav#navigation.open { display: flex; }
  .header nav#navigation > a:not(.nav-book) { font-family: var(--serif); font-size: 34px; letter-spacing: -.01em; text-transform: none; padding: 14px 0; width: 100%; border-bottom: 1px solid var(--line); }
  .header nav#navigation > a:not(.nav-book)::after { display: none; }
  .header nav#navigation > a[aria-current] { color: var(--chocolate); }
  .header nav#navigation > a[aria-current]::before { content: '✦'; color: var(--gold); font-size: .55em; margin-right: 10px; vertical-align: .3em; }
  .header nav#navigation > a.nav-book { box-sizing: border-box; padding: 0 26px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; margin-top: 26px; width: 100%; min-height: 58px; border-radius: 99px; background: var(--chocolate); color: var(--cream) !important; font-family: var(--label); font-size: 17px; letter-spacing: .08em; text-transform: uppercase; }
  .nav-foot { display: block; margin-top: 22px; font-size: 16px; line-height: 1.7; color: var(--text); }
  .nav-foot a { color: var(--chocolate); border-bottom: 1px solid var(--line); }
  .menu-toggle { min-width: 44px; min-height: 44px; }
}

/* Pied de page */
.footer { padding: 70px 6vw 24px; }
.jc-foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; align-items: start; padding-bottom: 46px; }
.jc-foot-brand p { font-family: var(--serif); font-size: 21px; line-height: 1.4; color: var(--pink); margin-top: 18px; max-width: 300px; }
.jc-foot-col { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.jc-foot-col h2 { font-family: var(--label); font-weight: 400; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: #E9C46A; margin-bottom: 6px; }
.jc-foot-col address, .jc-foot-col p { font-style: normal; font-size: 16px; line-height: 1.6; color: rgba(254, 250, 241, .86); }
.jc-foot-col a { font-size: 16px; color: var(--cream); border-bottom: 1px solid rgba(254, 250, 241, .3); padding: 2px 0; font-family: var(--body); text-transform: none; letter-spacing: 0; }
.jc-foot-col a:hover { border-color: #E9C46A; color: #E9C46A; }
.footer nav.jc-foot-col { flex-direction: column; gap: 8px; font-size: 16px; }
.footer nav.jc-foot-col a[aria-current] { color: #E9C46A; }
.footer-bottom { font-size: 13px; }
@media (max-width: 1000px) { .jc-foot { grid-template-columns: 1fr 1fr; } .jc-foot-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .jc-foot { grid-template-columns: 1fr; gap: 30px; } .footer { padding: 56px 22px 24px; } }

/* Frise « Les grandes dates » */
.jc-timeline { max-width: 1100px; margin: 0 auto; padding: 90px 6vw; }
.jc-tl-head { text-align: center; margin-bottom: 44px; }
.jc-tl-head h2 { margin-top: 12px; }
.jc-tl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; position: relative; }
.jc-tl::before { content: ''; position: absolute; left: 6%; right: 6%; top: 15px; height: 2px; background: repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 14px); opacity: .6; }
.jc-tl li { position: relative; padding-top: 44px; text-align: center; }
.jc-tl li::before { content: ''; position: absolute; top: 4px; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--chocolate); box-shadow: 0 0 0 5px var(--cream); }
.jc-tl li:last-child::before { background: var(--chocolate); }
.jc-tl-date { display: block; font-family: var(--label); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--label-ink); }
.jc-tl h3 { font-family: var(--serif); font-size: 26px; line-height: 1.15; color: var(--ink); margin: 8px 0 8px; }
.jc-tl p { font-size: 16.5px; line-height: 1.6; color: var(--text); }
@media (max-width: 900px) {
  .jc-tl { grid-template-columns: 1fr; gap: 0; padding-left: 8px; }
  .jc-tl::before { left: 19px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--gold) 0 8px, transparent 8px 14px); }
  .jc-tl li { text-align: left; padding: 4px 0 28px 46px; }
  .jc-tl li::before { left: 0; top: 6px; margin-left: 0; }
}
@media (max-width: 600px) {
  .jc-announce a, .jc-announce .jc-announce-later { gap: 4px 12px; padding: 9px 14px 8px; font-size: 13px; letter-spacing: .08em; line-height: 1.35; }
  .jc-announce .jc-dot, .jc-hide-s { display: none; }
}
/* Enseigne en trois lignes sur téléphone, comme sur la devanture */
.jc-tagline > span > span { white-space: nowrap; }
@media (max-width: 600px) {
  .jc-tagline > span:not([hidden]) { display: grid; gap: 2px; justify-items: center; }
  .jc-tagline i { display: none; }
  .jc-tagline { font-size: 14px; letter-spacing: .16em; line-height: 1.8; }
}
.footer nav.jc-foot-col a { font-family: var(--body); font-size: 16px; text-transform: none; letter-spacing: 0; }
@media (max-width: 560px) {
  .footer nav.jc-foot-col { flex-direction: row; flex-wrap: wrap; gap: 8px 22px; }
  .footer nav.jc-foot-col h2 { flex-basis: 100%; }
  .jc-foot-brand p { font-size: 20px; }
}
.jc-tl-date sup { font-size: .62em; text-transform: none; letter-spacing: 0; vertical-align: .55em; margin-left: 1px; }

/* ==========================================================================
   v6 (12 octobre 2026) : la boutique en relief
   Festons du médaillon sur les sections roses, store rayé de la devanture,
   vague chocolat et fil d'or en pied de page, grain de papier.
   ========================================================================== */
:root {
  --feston: 13px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='3 0 0 0 -.6 3 0 0 0 -.7 3 0 0 0 -.8 0 0 0 0 .07'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width: 700px) { :root { --feston: 9px; } }

/* Grain de papier, très léger, sur toute la page */
body::after { content: ''; position: fixed; inset: 0; z-index: 200; pointer-events: none; background: var(--grain); }
@media print { body::after { display: none; } }

/* Festons : bords des sections roses */
.salon, .instagram-section, .jc-season, .reservation-section, .behind, .workshop-banner.jc-banner {
  --r: var(--feston);
  --dot: radial-gradient(circle at 50% 50%, #000 calc(var(--r) - .7px), #0000 var(--r));
}
.salon {
  -webkit-mask: var(--dot) 50% 0 / calc(2 * var(--r)) calc(2 * var(--r)) repeat-x, linear-gradient(#000 0 0) 0 var(--r) / 100% 100% no-repeat;
          mask: var(--dot) 50% 0 / calc(2 * var(--r)) calc(2 * var(--r)) repeat-x, linear-gradient(#000 0 0) 0 var(--r) / 100% 100% no-repeat;
}
.instagram-section, .jc-season, .reservation-section, .behind {
  -webkit-mask: var(--dot) 50% 0 / calc(2 * var(--r)) calc(2 * var(--r)) repeat-x, linear-gradient(#000 0 0) 0 50% / 100% calc(100% - 2 * var(--r)) no-repeat, var(--dot) 50% 100% / calc(2 * var(--r)) calc(2 * var(--r)) repeat-x;
          mask: var(--dot) 50% 0 / calc(2 * var(--r)) calc(2 * var(--r)) repeat-x, linear-gradient(#000 0 0) 0 50% / 100% calc(100% - 2 * var(--r)) no-repeat, var(--dot) 50% 100% / calc(2 * var(--r)) calc(2 * var(--r)) repeat-x;
}

/* Le bandeau Ateliers devient le store de la devanture : une languette par rayure */
.workshop-banner.jc-banner {
  --r: 13px;
  padding-bottom: calc(90px + var(--r));
  box-shadow: inset 0 7px 0 var(--sage-deep);
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--r)) no-repeat, var(--dot) 0 100% / calc(2 * var(--r)) calc(2 * var(--r)) repeat-x;
          mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--r)) no-repeat, var(--dot) 0 100% / calc(2 * var(--r)) calc(2 * var(--r)) repeat-x;
}

/* Pied de page : vague chocolat et fil d'or */
.footer {
  --w: 22px; --ww: 160px;
  position: relative;
  border-top: 0;
  padding-top: calc(45px + var(--w));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 22' preserveAspectRatio='none'%3E%3Cpath d='M0 20C40 20 40 2 80 2s40 18 80 18v2H0z'/%3E%3C/svg%3E") 50% 0 / var(--ww) var(--w) repeat-x, linear-gradient(#000 0 0) 0 calc(var(--w) - 1px) / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 22' preserveAspectRatio='none'%3E%3Cpath d='M0 20C40 20 40 2 80 2s40 18 80 18v2H0z'/%3E%3C/svg%3E") 50% 0 / var(--ww) var(--w) repeat-x, linear-gradient(#000 0 0) 0 calc(var(--w) - 1px) / 100% 100% no-repeat;
}
.footer::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 6px;
  height: var(--w);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 22' preserveAspectRatio='none'%3E%3Cpath d='M0 20C40 20 40 2 80 2s40 18 80 18' fill='none' stroke='%23C9971E' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 50% 0 / var(--ww) var(--w) repeat-x;
}
@media (max-width: 700px) { .footer { --w: 16px; --ww: 112px; } }

/* Accueil : arches posées comme des photos sur la table, liseré doré */
.jc-arch-1 { rotate: -2.2deg; }
.jc-arch-3 { rotate: 2.2deg; }
.jc-arch img { outline: 1px solid rgba(201, 151, 30, .7); outline-offset: -17px; }
.jc-arch figcaption { font-size: 22px; }

/* La vitrine : chaque douceur a son numéro, colonne du milieu décalée */
.collection-grid { counter-reset: jcN; }
.collection-product:not([hidden]) { counter-increment: jcN; }
.collection-product figcaption h3::before {
  content: 'N° ' counter(jcN, decimal-leading-zero);
  content: 'N° ' counter(jcN, decimal-leading-zero) / '';
  display: block;
  font-family: var(--label);
  font-size: 14px;
  letter-spacing: .18em;
  color: var(--gold);
  margin-bottom: 4px;
}
.collection-image { border-radius: 10px; }
.collection-image img { transition: transform 1.2s var(--ease); }
.collection-image:hover img, .collection-image:focus-visible img { transform: scale(1.05); }
@media (min-width: 901px) {
  .collection-product:nth-child(3n + 2 of :not([hidden])) { translate: 0 52px; }
  .collection-grid { padding-bottom: 52px; }
}

/* Derrière le Jardin : halo rose */
.story-teaser { background-image: radial-gradient(38% 62% at 50% 52%, rgba(250, 225, 216, .75), rgba(250, 225, 216, 0) 72%); }
.story-teaser .jc-sigle { width: 112px; }

/* Histoire : tampon du 61 rue Pasteur et lettrine */
.jc-story-side { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.jc-stamp { position: relative; width: 220px; aspect-ratio: 1; flex: none; }
.jc-stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: jcSpin 60s linear infinite; }
.jc-stamp text { font-family: var(--label); font-size: 15px; letter-spacing: 2px; fill: var(--chocolate); }
.jc-stamp-ring { fill: none; stroke: var(--gold); stroke-width: 1; }
.jc-stamp-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 66px; line-height: 1; color: var(--chocolate); padding-top: 6px; }
.jc-stamp-num small { font-family: var(--label); font-size: 17px; letter-spacing: .06em; color: var(--gold); transform: translateY(-16px); margin-right: 3px; }
.story-body > div > p[data-fr]:first-of-type::first-letter,
.story-body > div > p[data-en]:nth-of-type(2)::first-letter {
  float: left;
  font-family: var(--serif);
  font-size: 82px;
  line-height: .82;
  padding: 6px 12px 0 0;
  color: var(--chocolate);
}
@media (prefers-reduced-motion: reduce) { .jc-stamp svg { animation: none; } }

/* Histoire : la frise, plus lisible */
.jc-timeline { max-width: 1240px; }
.jc-tl::before { height: 2px; opacity: .8; }
.jc-tl li::before { width: 28px; height: 28px; margin-left: -14px; top: 2px; background: radial-gradient(circle, var(--gold) 0 3px, var(--paper) 3.5px); }
.jc-tl li:last-child::before { background: radial-gradient(circle, var(--gold) 0 4px, var(--chocolate) 4.5px); }
.jc-tl-date { font-size: 16px; }
.jc-tl h3 { font-size: 29px; }
.jc-tl p { font-size: 17px; }
.jc-tl-cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 16px; padding: 11px 20px 10px;
  border-radius: 99px;
  background: var(--chocolate); color: var(--cream);
  font-family: var(--label); font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
  transition: background .3s, transform .3s var(--ease);
}
.jc-tl-cta:hover { background: var(--dark); transform: translateY(-2px); }
@media (max-width: 900px) { .jc-tl::before { height: auto; } .jc-tl li::before { left: 0; margin-left: 0; top: 4px; } }

/* Ateliers : infos pratiques en pastilles, monogramme dans la colonne des étapes */
.jc-infos-grid li { transition: transform .45s var(--ease), box-shadow .45s; }
.jc-infos-grid li:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -32px rgba(51, 19, 9, .5); }
.jc-infos-grid li svg { width: 60px; height: 60px; padding: 14px; border-radius: 50%; background: var(--pink); }
.jc-steps::after { content: ''; order: 2; width: 92px; aspect-ratio: 1; margin: auto; background: url('charte/sigle-sauge.webp') center / contain no-repeat; opacity: .55; }
.jc-steps-alt { order: 3; margin-top: 0; }
@media (max-width: 900px) { .jc-steps::after { display: none; } }

@media (max-width: 700px) {
  .jc-story-side { flex-direction: row; align-items: center; justify-content: space-between; gap: 18px; }
  .jc-stamp { width: 132px; }
  .jc-stamp-num { font-size: 42px; }
  .jc-stamp-num small { font-size: 13px; transform: translateY(-10px); }
  .story-body > div > p[data-fr]:first-of-type::first-letter,
  .story-body > div > p[data-en]:nth-of-type(2)::first-letter { font-size: 64px; }
  .jc-arch-1, .jc-arch-3 { rotate: 0deg; }
  .jc-arch img { outline-offset: -13px; }
}

/* Ateliers : le ticket de la saison sous la carte enfants */
.jc-ticket {
  position: relative;
  display: grid;
  gap: 2px;
  justify-items: start;
  width: min(100%, 400px);
  margin-top: 24px;
  padding: 20px 34px 18px;
  border-radius: 10px;
  background: var(--pink);
  color: var(--ink);
  -webkit-mask: radial-gradient(circle 12px at 0 50%, #0000 97%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, #0000 97%, #000) 100% 0 / 51% 100% no-repeat;
          mask: radial-gradient(circle 12px at 0 50%, #0000 97%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, #0000 97%, #000) 100% 0 / 51% 100% no-repeat;
  transition: transform .4s var(--ease), background .3s;
}
.jc-ticket::before { content: ''; position: absolute; inset: 7px 18px; border: 1.5px dashed rgba(95, 48, 28, .28); border-radius: 6px; pointer-events: none; }
.jc-ticket:hover { transform: translateY(-3px); background: #F7D6CA; }
.jc-ticket-k { font-family: var(--label); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--label-ink, #5A6340); }
.jc-ticket b { font-family: var(--script); font-weight: 400; font-size: 44px; line-height: 1.05; color: var(--chocolate); }
.jc-ticket-d { font-family: var(--label); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--chocolate); }
.jc-ticket-d i { font-style: normal; color: var(--gold); margin: 0 6px; }

/* Salon : les deux cartes en vrais boutons sur téléphone */
.menu-actions .text-link { font-size: 14px; }
@media (max-width: 560px) {
  .menu-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .menu-actions .text-link { justify-content: space-between; width: 100%; font-size: 15px; padding: 15px 20px 14px; border: 1.5px solid rgba(95, 48, 28, .35); border-radius: 99px; background: var(--paper); }
}

/* ==========================================================================
   v7 (12 octobre 2026) : l'écriture à la main
   Les mots en script s'écrivent au défilement, les photos Instagram pendent
   à un fil d'or, la carte du salon a ses pointillés, poussière d'or dans
   l'accueil, transitions douces entre les pages.
   ========================================================================== */

/* Transitions entre les pages (navigateurs récents, sans JavaScript) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.header { view-transition-name: jc-header; }
.jc-announce { view-transition-name: jc-announce; }
::view-transition-old(root) { animation: jcPageOut .28s ease both; }
::view-transition-new(root) { animation: jcPageIn .5s var(--ease) both; }
@keyframes jcPageOut { to { opacity: 0; } }
@keyframes jcPageIn { from { opacity: 0; transform: translateY(14px); } }

/* Focus visible aussi sur fond chocolat */
.footer :focus-visible, .jc-announce :focus-visible, .booking-intro :focus-visible { outline-color: #E9C46A; }

/* Les mots en script s'écrivent au fil du défilement */
main h2 em, .story-teaser .signature { display: inline-block; }
.story-teaser .signature { width: fit-content; margin-inline: auto; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main h2 em, .story-teaser .signature {
      animation: jcInk linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }
  }
}
@keyframes jcInk {
  from { clip-path: inset(-30% 100% -40% -8%); }
  to { clip-path: inset(-30% -8% -40% -8%); }
}

/* Les arches se posent en tournant légèrement */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 701px) {
    .jc-arch-1, .jc-arch-3 { animation: jcSettle linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    .jc-arch-1 { --tilt: -2.2deg; }
    .jc-arch-3 { --tilt: 2.2deg; }
  }
}
@keyframes jcSettle { from { rotate: 0deg; translate: 0 26px; } to { rotate: var(--tilt); translate: 0 0; } }

/* Poussière d'or dans l'accueil */
.jc-dust { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.jc-dust i {
  position: absolute;
  bottom: 8%;
  left: var(--x);
  width: var(--s, 5px);
  height: var(--s, 5px);
  border-radius: 50%;
  background: radial-gradient(circle, #F6DE93 0 30%, rgba(201, 151, 30, .55) 55%, rgba(201, 151, 30, 0) 72%);
  opacity: 0;
  animation: jcDust var(--t, 14s) linear var(--d, 0s) infinite;
}
.jc-dust i:nth-child(1)  { --x: 24%; --s: 6px; --t: 15s; --d: -2s;  --dx: 30px; }
.jc-dust i:nth-child(2)  { --x: 31%; --s: 4px; --t: 12s; --d: -7s;  --dx: -20px; }
.jc-dust i:nth-child(3)  { --x: 38%; --s: 5px; --t: 17s; --d: -11s; --dx: 24px; }
.jc-dust i:nth-child(4)  { --x: 46%; --s: 3px; --t: 13s; --d: -4s;  --dx: -14px; }
.jc-dust i:nth-child(5)  { --x: 53%; --s: 6px; --t: 16s; --d: -9s;  --dx: 18px; }
.jc-dust i:nth-child(6)  { --x: 60%; --s: 4px; --t: 14s; --d: -1s;  --dx: -26px; }
.jc-dust i:nth-child(7)  { --x: 67%; --s: 5px; --t: 18s; --d: -13s; --dx: 20px; }
.jc-dust i:nth-child(8)  { --x: 74%; --s: 3px; --t: 12s; --d: -5s;  --dx: -16px; }
.jc-dust i:nth-child(9)  { --x: 42%; --s: 4px; --t: 19s; --d: -15s; --dx: 34px; }
.jc-dust i:nth-child(10) { --x: 57%; --s: 5px; --t: 15s; --d: -6s;  --dx: -30px; }
@keyframes jcDust {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  12% { opacity: .95; }
  50% { opacity: .5; transform: translate(calc(var(--dx) * .6), -32vh) scale(1); }
  62% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--dx), -64vh) scale(.7); }
}
@media (prefers-reduced-motion: reduce) { .jc-dust { display: none; } }
@media (max-width: 700px) { .jc-dust i:nth-child(n+7) { display: none; } }

/* La carte du salon : pointillés entre la boisson et le prix */
.menu-teaser > div { align-items: baseline; gap: 14px; }
.menu-teaser > div > b { display: flex; align-items: baseline; gap: 14px; flex: 1; min-width: 0; }
.menu-teaser > div > b::after { content: ''; flex: 1; min-width: 24px; border-bottom: 2px dotted rgba(95, 48, 28, .32); translate: 0 -6px; }
.menu-teaser > div > span { font-style: normal; color: var(--chocolate); }

/* « Au fil des jours » : les photos pendent à un fil d'or */
@media (min-width: 901px) {
  .instagram-gallery {
    --sag: 38px;
    position: relative;
    gap: 26px;
    align-items: start;
    padding: 4px 6px 30px;
  }
  .instagram-gallery::before {
    content: '';
    position: absolute;
    left: -3%; right: -3%; top: 0;
    height: 60px;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 60' preserveAspectRatio='none'%3E%3Cpath d='M0 4Q500 76 1000 4' fill='none' stroke='%23C9971E' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  }
  .instagram-gallery a { --y: 16px; --rot: -2.6deg; margin-top: calc(var(--y) + 8px); overflow: visible; background: var(--paper); padding: 8px 8px 30px; border-radius: 4px; box-shadow: 0 22px 34px -24px rgba(51, 19, 9, .55); rotate: var(--rot); transform-origin: 50% -8px; transition: rotate .7s var(--ease), translate .7s var(--ease), box-shadow .7s; }
  .instagram-gallery a:nth-child(2) { --y: 31px; --rot: 2deg; }
  .instagram-gallery a:nth-child(3) { --y: 36px; --rot: -1.2deg; }
  .instagram-gallery a:nth-child(4) { --y: 31px; --rot: 2.4deg; }
  .instagram-gallery a:nth-child(5) { --y: 16px; --rot: -2deg; }
  .instagram-gallery a::before {
    content: '';
    position: absolute;
    top: -15px; left: calc(50% - 5px);
    width: 10px; height: 26px;
    border-radius: 3px;
    background: linear-gradient(90deg, #8A5537, #5F301C 55%, #4A2516);
    box-shadow: 0 3px 4px rgba(51, 19, 9, .3);
    z-index: 2;
  }
  .instagram-gallery img { border-radius: 2px; aspect-ratio: .86; }
  .instagram-gallery a > span { right: 16px; bottom: 40px; }
  .instagram-gallery a:hover, .instagram-gallery a:focus-visible { rotate: 0deg; translate: 0 -4px; box-shadow: 0 30px 40px -24px rgba(51, 19, 9, .6); }
  .instagram-gallery a:hover img { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .instagram-gallery a { transition: none; } }

/* Ateliers sur téléphone : bouton de réservation qui suit la lecture */
.jc-float { display: none; }
@media (max-width: 800px) {
  .jc-float {
    position: fixed;
    left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 60;
    width: max-content; max-width: calc(100vw - 32px); white-space: nowrap;
    display: inline-flex; align-items: center; gap: 14px;
    padding: 16px 28px 15px;
    border-radius: 99px;
    background: var(--chocolate);
    color: var(--cream);
    font-family: var(--label); font-size: 16px; letter-spacing: .1em; text-transform: uppercase;
    box-shadow: 0 0 0 4px rgba(254, 250, 241, .9), 0 18px 34px -12px rgba(51, 19, 9, .6);
    translate: -50% 140%;
    visibility: hidden;
    transition: translate .5s var(--ease), visibility 0s .5s;
  }
  .jc-float.is-on { translate: -50% 0; visibility: visible; transition: translate .5s var(--ease), visibility 0s; }
  html.jc-menu-open .jc-float { visibility: hidden; }
}
/* Poussière d'or : un peu plus présente */
.jc-dust i { width: calc(var(--s, 5px) * 1.6); height: calc(var(--s, 5px) * 1.6); background: radial-gradient(circle, #FFF3C4 0 18%, #E2B13F 40%, rgba(201, 151, 30, .35) 62%, rgba(201, 151, 30, 0) 74%); filter: drop-shadow(0 0 3px rgba(233, 196, 106, .8)); }
/* overflow: clip plutôt que hidden : même rendu, mais la section ne devient pas
   un conteneur de défilement (sinon l'écriture au défilement ne démarre pas). */
.salon, .story-teaser { overflow: clip; }
@media (max-width: 560px) { .menu-teaser b { font-size: 23px; } .menu-teaser > div > span { font-size: 22px; } }

/* Liens utiles : adresse vers Google Maps, Instagram partout cliquable */
.jc-address a { display: inline-flex; align-items: center; gap: 10px; color: inherit; border-bottom: 1px solid rgba(95, 48, 28, .3); padding-bottom: 3px; transition: border-color .25s, color .25s; }
.jc-address a:hover { color: var(--chocolate); border-color: var(--chocolate); }
.jc-address-go { font-size: 1.1em; color: var(--gold); }
.jc-insta-eyebrow { display: inline-block; border-bottom: 1px solid rgba(90, 99, 64, .45); padding-bottom: 2px; }
.jc-insta-eyebrow:hover { color: var(--chocolate); border-color: var(--chocolate); }
.jc-foot-insta { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--cream); font-size: 16px; border-bottom: 1px solid rgba(254, 250, 241, .3); padding-bottom: 3px; }
.jc-foot-insta svg { width: 22px; height: 22px; fill: none; stroke: #E9C46A; stroke-width: 1.6; }
.jc-foot-insta svg .dot { fill: #E9C46A; stroke: none; }
.jc-foot-insta:hover { color: #E9C46A; border-color: #E9C46A; }
.jc-address { font-size: 14.5px; }

/* ==========================================================================
   Sceau Choco'Monstre (page Ateliers), refait le 12/10 : une médaille en
   chocolat. Le texte tourne dans sa propre bande, entre deux filets d'or ;
   le cœur en relief porte le nom sur deux lignes et des dates fixes, lisibles.
   ========================================================================== */
.jc-seal {
  --s: 200px;
  width: var(--s);
  height: var(--s);
  left: -58px;
  bottom: -46px;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 calc(var(--s) * .35), rgba(233, 196, 106, .85) calc(var(--s) * .35 + .5px), transparent calc(var(--s) * .35 + 1.5px)),
    radial-gradient(circle at 50% 50%, transparent 0 calc(var(--s) * .465), rgba(233, 196, 106, .75) calc(var(--s) * .465 + .5px), transparent calc(var(--s) * .465 + 1.5px)),
    radial-gradient(circle at 32% 26%, #7E4429 0%, #5F301C 46%, #3F1D0F 100%);
  box-shadow:
    inset 0 2px 1px rgba(255, 236, 200, .14),
    inset 0 -10px 18px rgba(30, 10, 3, .45),
    0 0 0 6px var(--paper),
    0 0 0 7px rgba(95, 48, 28, .14),
    0 22px 38px -16px rgba(51, 19, 9, .65);
}
.jc-seal svg { inset: 0; width: 100%; height: 100%; animation-duration: 48s; }
.jc-seal text { font-size: 11.5px; letter-spacing: 0; fill: #EED08A; }
.jc-seal-core {
  position: absolute;
  inset: 17%;
  border-radius: 50%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: calc(var(--s) * .035);
  text-align: center;
  background: radial-gradient(circle at 38% 30%, #7A4128 0%, #5A2C19 55%, #4A2414 100%);
  box-shadow: inset 0 3px 6px rgba(255, 230, 190, .12), inset 0 -6px 12px rgba(25, 8, 2, .45), 0 4px 10px rgba(25, 8, 2, .35);
}
.jc-seal .jc-seal-core b { padding: 0; font-size: calc(var(--s) * .155); line-height: .82; color: var(--cream); text-shadow: 0 1px 0 rgba(25, 8, 2, .5); }
.jc-seal .jc-seal-core small {
  margin: 0;
  padding: calc(var(--s) * .018) calc(var(--s) * .05) calc(var(--s) * .012);
  border-radius: 99px;
  background: #FBF1DF;
  color: var(--chocolate);
  font-family: var(--label);
  font-size: calc(var(--s) * .07);
  letter-spacing: .04em;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(25, 8, 2, .35);
}
@media (max-width: 900px) { .jc-seal { --s: 176px; left: -18px; bottom: -40px; } }
@media (max-width: 560px) { .jc-seal { --s: 152px; left: -8px; bottom: -34px; } }
.jc-seal .jc-apos { margin-left: -.2em; }
.jc-seal-core {
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 232, 196, .045) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 38% 30%, #7A4128 0%, #5A2C19 55%, #4A2414 100%);
}

/* Pied de page : le dégradé chocolat du sceau Choco'Monstre */
.footer {
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(255, 226, 190, .07), transparent 60%),
    radial-gradient(130% 170% at 15% 0%, #6E3A22 0%, #57291A 38%, #3B1A0D 78%, #2C1108 100%);
}
.footer-bottom { border-top-color: rgba(233, 196, 106, .22); }
[tabindex="-1"]:focus { outline: none; }

/* ==========================================================================
   v8 (12 octobre 2026) : finitions
   ========================================================================== */

/* Accueil · « Derrière le Jardin » : la signature ne touche plus le lien */
.story-teaser .signature { display: block; width: fit-content; margin: 18px auto 0; }
.story-teaser .text-link { margin-top: 26px; }

/* Accueil · la médaille chocolat « Fait maison » sur l'arche du milieu */
.jc-arch-2 { position: relative; }
.jc-seal.jc-seal--home { --s: 150px; left: auto; right: -64px; bottom: 74px; z-index: 4; }
.jc-seal--home svg { animation-duration: 60s; }
@media (max-width: 900px) { .jc-seal.jc-seal--home { --s: 124px; right: -26px; bottom: 60px; } }
@media (max-width: 560px) { .jc-seal.jc-seal--home { --s: 112px; right: -10px; bottom: 54px; } }

/* Histoire · la vidéo dans une arche, avec son bouton */
.behind { align-items: center; }
.jc-video { justify-self: center; width: min(380px, 100%); }
.jc-video-arch { position: relative; overflow: hidden; border-radius: 999px 999px 14px 14px; border: 9px solid var(--paper); box-shadow: 0 0 0 1px var(--line), 0 40px 70px -40px rgba(51, 19, 9, .6); background: var(--dark); }
.jc-video-arch video { display: block; width: 100%; aspect-ratio: 464 / 848; object-fit: cover; }
.jc-play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 14px; padding: 0 20px 34px; border: 0; cursor: pointer; color: var(--cream); background: linear-gradient(180deg, rgba(51, 19, 9, 0) 45%, rgba(51, 19, 9, .62) 100%); }
.jc-play-disc { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 34% 28%, #7E4429, #5F301C 50%, #3F1D0F); box-shadow: 0 0 0 5px rgba(254, 250, 241, .85), 0 14px 26px -10px rgba(25, 8, 2, .7); transition: transform .4s var(--ease); }
.jc-play-disc svg { width: 28px; height: 28px; margin-left: 4px; fill: #F2CF6B; }
.jc-play-label { font-family: var(--label); font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }
.jc-play:hover .jc-play-disc, .jc-play:focus-visible .jc-play-disc { transform: scale(1.07); }
.jc-play:focus-visible { outline: 3px solid #F2CF6B; outline-offset: -8px; }
.jc-video .caption { margin-top: 14px; text-align: center; }
.behind-copy img { border-radius: 14px; box-shadow: 0 30px 50px -36px rgba(51, 19, 9, .55); }

/* Mentions & confidentialité */
.lg { max-width: 1120px; margin: 0 auto; padding: 70px 6vw 110px; }
.lg-head { text-align: center; max-width: 680px; margin: 0 auto 50px; }
.lg-sprig { display: block; width: 64px; margin: 0 auto 14px; }
.lg-head h1 { font-size: clamp(44px, 5vw, 66px); line-height: 1.05; margin: 14px 0 16px; }
.lg-head p { font-size: 17.5px; line-height: 1.7; color: var(--text); }
.lg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.lg-card { position: relative; padding: 34px 34px 30px; background: var(--paper); border: 1px solid var(--pink-deep); border-radius: 16px; box-shadow: 0 30px 50px -44px rgba(51, 19, 9, .5); }
.lg-card--wide { grid-column: 1 / -1; }
.lg-num { font-family: var(--label); font-size: 14px; letter-spacing: .14em; color: #8A6510; }
.lg-card h2 { font-size: 30px; line-height: 1.1; margin: 4px 0 20px; }
.lg-card dl { display: grid; gap: 0; margin: 0; }
.lg-card dl > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 12px 0; border-top: 1px dashed rgba(95, 48, 28, .2); }
.lg-card dt { font-family: var(--label); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--label-ink, #5A6340); padding-top: 2px; }
.lg-card dd { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink); }
.lg-card a { color: var(--chocolate); border-bottom: 1px solid rgba(95, 48, 28, .35); }
.lg-card a:hover { border-color: var(--chocolate); }
.lg-card > p { margin-top: 16px; font-size: 15.5px; line-height: 1.65; color: var(--muted); }
.lg-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 30px; }
.lg-list li { position: relative; padding: 4px 0 4px 26px; font-size: 16.5px; line-height: 1.65; color: var(--text); }
.lg-list li::before { content: '✦'; position: absolute; left: 0; top: 5px; color: var(--gold); font-size: 14px; }
.lg-list b { color: var(--ink); font-weight: 600; }
.lg-card--wide > p { padding-top: 16px; border-top: 1px dashed rgba(95, 48, 28, .2); color: var(--text); }
@media (max-width: 860px) {
  .lg-grid, .lg-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lg { padding: 44px 16px 80px; }
  .lg-card { padding: 24px 20px 22px; }
  .lg-card dl > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ==========================================================================
   v9 (12 octobre 2026) : retours d'Adrien
   ========================================================================== */

/* Accueil · les colonnes fleuries ne se coupent plus net au défilement :
   elles descendent derrière les arches et finissent sur un arrondi. */
@media (min-width: 1001px) {
  .opening.jc-hero { overflow: clip visible; }
  .opening.jc-hero .jc-col { height: calc(100% + 140px); }
  .opening.jc-hero .jc-col-g {
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 300px) no-repeat, radial-gradient(farthest-side at 0 0, #000 calc(100% - 26px), transparent) bottom / 100% 300px no-repeat;
            mask: linear-gradient(#000 0 0) top / 100% calc(100% - 300px) no-repeat, radial-gradient(farthest-side at 0 0, #000 calc(100% - 26px), transparent) bottom / 100% 300px no-repeat;
  }
  .opening.jc-hero .jc-col-d {
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 300px) no-repeat, radial-gradient(farthest-side at 100% 0, #000 calc(100% - 26px), transparent) bottom / 100% 300px no-repeat;
            mask: linear-gradient(#000 0 0) top / 100% calc(100% - 300px) no-repeat, radial-gradient(farthest-side at 100% 0, #000 calc(100% - 26px), transparent) bottom / 100% 300px no-repeat;
  }
}

/* Accueil · la médaille reste au-dessus des arches, même pendant leur
   apparition, et « Fait maison » se lit mieux. */
.jc-arch-2 { z-index: 2; }
.jc-seal.jc-seal--home { --s: 164px; }
.jc-seal--home .jc-seal-core { inset: 16%; }
.jc-seal.jc-seal--home .jc-seal-core b { font-size: calc(var(--s) * .2); line-height: .78; }
.jc-seal.jc-seal--home .jc-seal-core small { font-size: calc(var(--s) * .072); }
@media (max-width: 900px) { .jc-seal.jc-seal--home { --s: 136px; } }
@media (max-width: 560px) { .jc-seal.jc-seal--home { --s: 124px; } }

/* Ateliers · le logo officiel fleuri dans la colonne « Comment ça marche » */
.jc-steps::after { width: 230px; aspect-ratio: 660 / 607; background: url('charte/couronne.webp') center / contain no-repeat; opacity: 1; margin: 18px auto; }

/* Adresses cliquables (itinéraire Google Maps) */
.visit-address address a, .jc-foot-col address a, .nav-foot a { color: inherit; border-bottom: 1px solid transparent; transition: border-color .25s, color .25s; }
.visit-address address a:hover { border-color: rgba(95, 48, 28, .4); color: var(--chocolate); }
.jc-foot-col address a { border-bottom-color: rgba(254, 250, 241, .25); }
.jc-foot-col address a:hover { border-color: #E9C46A; color: #E9C46A; }

/* Conditions de vente */
.lg-list.is-single { grid-template-columns: 1fr; }
.lg-card > p { color: var(--text); font-size: 16.5px; line-height: 1.7; }
.lg-card > p b, .lg-list b { color: var(--ink); }
.cg-toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.cg-toc a { padding: 8px 14px 7px; border-radius: 99px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); font-family: var(--label); font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--chocolate); }
.cg-toc a:hover { background: var(--pink); }
.lg-card { scroll-margin-top: 90px; }
.cg-todo { padding: 1px 6px; border-radius: 4px; background: #FFF1D2; color: #6F4E0B; font-weight: 600; }
.jc-consent { display: grid !important; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 14.5px; line-height: 1.5; color: var(--ink); cursor: pointer; }
.jc-consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--chocolate); }
.jc-consent small { color: var(--muted); }
.jc-consent-note { font-size: 13px; line-height: 1.5; color: var(--muted); }
.jc-consent-note a, .jc-foot-legal a { text-decoration: underline; text-underline-offset: 2px; }

/* En-tête qui reste à portée : il s'efface quand on descend pour lire,
   et revient dès qu'on remonte (ou en haut de page). */
.header { position: sticky; top: 0; z-index: 50; transition: transform .4s var(--ease), box-shadow .3s, background-color .3s; }
html.jc-scrolled .header { background: rgba(254, 250, 241, .97); box-shadow: 0 14px 30px -26px rgba(51, 19, 9, .55); }
html.jc-hdr-hide .header { transform: translateY(-105%); box-shadow: none; }
html.jc-menu-open .header { transform: none; }
@media (prefers-reduced-motion: reduce) { .header { transition: none; } }

/* ---------- Drago, le Choco'Monstre d'Halloween ---------- */
.jc-ws-hero .workshop-hero-art img.jc-drago-hero { object-fit: cover; background: #F7E6DE; }
.jc-drago { position: absolute; z-index: 3; right: -172px; top: 34px; width: 200px; margin: 0; padding: 10px 10px 8px; border-radius: 6px; background: var(--paper); box-shadow: 0 26px 40px -24px rgba(51, 19, 9, .55); transform: rotate(5deg); }
.jc-drago img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }
.jc-drago figcaption { margin-top: 2px; font-family: var(--script); font-size: 30px; line-height: 1.1; text-align: center; color: var(--chocolate); }
.jc-season-dates { max-width: 560px; margin: 18px auto 0; padding: 12px 16px; border-radius: 12px; background: #FFF1E8; box-shadow: inset 0 0 0 1px #F3CDC1; font-size: 15.5px; line-height: 1.65; color: var(--ink); }
.jc-season-dates b { color: var(--chocolate); }
.jc-halloween { display: block; margin-top: 4px; font-weight: 700; color: #A33A3F; }
/* Sous 1140 px, plus de place à côté de la carte : la photo passe au-dessus du titre */
@media (max-width: 1140px) {
  .jc-drago { position: relative; right: auto; top: auto; width: 168px; margin: -6px auto 14px; transform: rotate(-3deg); }
  .jc-drago figcaption { font-size: 26px; }
  .jc-season-card::before { display: none; }
}

/* Menu en burger jusqu'à 980 px : avec « Écoles & APE », les quatre liens ne
   tiennent plus sur une ligne sous ~960 px (ils passaient sur deux lignes).
   Mêmes règles que le bloc 800 px de maison.css et de ce fichier. */
@media (min-width: 801px) and (max-width: 980px) {
  .header { padding: 18px 5vw; }
  .header nav { display: none; position: absolute; top: 100%; left: 0; width: 100%; padding: 25px 6vw; background: var(--cream); border-bottom: 1px solid var(--line); box-shadow: 0 20px 35px #35221810; flex-direction: column; gap: 10px; }
  .header nav.open { display: flex; }
  .menu-toggle { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 12px 0 12px 10px; min-width: 44px; min-height: 44px; justify-content: center; }
  .menu-toggle span { height: 1px; width: 22px; background: var(--chocolate); }
  .menu-toggle[aria-expanded=true] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .visit-link { display: none; }
  html.jc-menu-open { overflow: hidden; }
  .header nav#navigation { top: 100%; height: calc(100dvh - 100%); min-height: 420px; overflow: auto; padding: 26px 7vw 34px; gap: 0; background: var(--cream) url('charte/guirlande.webp') center bottom -30px / 560px auto no-repeat; box-shadow: 0 30px 40px -30px rgba(51, 19, 9, .35); }
  .header nav#navigation.open { display: flex; }
  .header nav#navigation > a:not(.nav-book) { font-family: var(--serif); font-size: 34px; letter-spacing: -.01em; text-transform: none; padding: 14px 0; width: 100%; border-bottom: 1px solid var(--line); }
  .header nav#navigation > a:not(.nav-book)::after { display: none; }
  .header nav#navigation > a[aria-current] { color: var(--chocolate); }
  .header nav#navigation > a[aria-current]::before { content: '✦'; color: var(--gold); font-size: .55em; margin-right: 10px; vertical-align: .3em; }
  .header nav#navigation > a.nav-book { box-sizing: border-box; padding: 0 26px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; margin-top: 26px; width: 100%; max-width: 520px; min-height: 58px; border-radius: 99px; background: var(--chocolate); color: var(--cream) !important; font-family: var(--label); font-size: 17px; letter-spacing: .08em; text-transform: uppercase; }
  .nav-foot { display: block; margin-top: 22px; font-size: 16px; line-height: 1.7; color: var(--text); }
  .nav-foot a { color: var(--chocolate); border-bottom: 1px solid var(--line); }
}

/* Réservation : entre deux saisons d'ateliers (aucun créneau à venir) */
.jc-closed { padding: 28px 24px; border-radius: 18px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--pink-deep); text-align: center; }
.jc-closed h3 { margin: 0 0 10px; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.15; color: var(--ink); }
.jc-closed p { margin: 0 auto 20px; max-width: 460px; font-size: 16.5px; line-height: 1.65; color: var(--text); }
.jc-closed-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 22px; }

/* ==========================================================================
   v10 (16 octobre 2026) : téléphone plus compact
   Moins de vide entre les sections et plus de cartes par écran : créneaux
   deux par deux, infos pratiques en lignes, adresse et pied de page resserrés.
   Rien n'est retiré ni coupé ; l'ordinateur et la tablette ne changent pas.
   ========================================================================== */
@media (max-width: 760px) {
  /* Respiration entre les sections : 64 px → 48 px */
  .section, .jc-audiences, .jc-faq, .jc-booking, .jc-season { padding-block: 48px; }

  /* Accueil */
  .jc-trio { padding-bottom: 30px; gap: 12px; }
  .jc-arch-2 { width: 68%; }
  .collection-grid { gap: 20px 12px; }
  .collection-image img { aspect-ratio: 1; }
  .salon { gap: 24px; }
  .salon-photo > img { aspect-ratio: 1; }
  .workshop-banner.jc-banner { padding-top: 40px; padding-bottom: calc(44px + var(--r)); }
  .jc-banner-photo { width: 64%; }
  .jc-medallion { margin-top: -32px; padding: 40px 20px 28px; }

  /* « Le bonheur a une adresse », en bas de chaque page */
  .visit { gap: 20px; }
  .jc-couronne { width: 150px; }
  .visit-address { margin: 16px 0 6px; }
  .visit-details { padding: 0 18px; }
  .contact-row { padding: 14px 0; }

  /* Ateliers : en-tête, saison, publics */
  .jc-ws-hero { padding: 30px 22px 48px; gap: 24px; }
  .jc-ws-hero .workshop-hero-art { width: min(84%, 340px); }
  .jc-season-card { padding: 30px 18px 26px; }
  .jc-drago { width: 128px; margin-bottom: 10px; }
  .jc-drago figcaption { font-size: 22px; }
  .jc-audiences { gap: 30px; }
  .jc-aud { gap: 14px; }
  .jc-aud img { aspect-ratio: 16 / 9; }

  /* Ateliers : réservation, la carte prend presque toute la largeur */
  .jc-booking { padding-inline: 14px; }
  .jc-booking-head { margin-bottom: 22px; padding-inline: 8px; }
  .jc-steps { padding: 22px 18px; gap: 14px; }
  .jc-steps h3 { font-size: 27px; }
  .jc-steps ol { gap: 10px; }
  .jc-steps li { font-size: 15.5px; line-height: 1.45; }
  .jc-steps li b { font-size: 16px; }
  .jc-steps-alt { margin-top: 2px; padding-top: 14px; }
  .jc-phone { font-size: 26px; }
  .jc-booking .booking-ui { padding: 20px 14px 22px; }
  .jc-field { margin-bottom: 20px; }
  .jc-atelier { margin-bottom: 18px; }

  /* Les créneaux deux par deux : tous visibles d'un coup d'œil */
  .jc-booking .booking-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .jc-booking .booking-slot { grid-template-columns: 20px minmax(0, 1fr); align-items: start; column-gap: 9px; row-gap: 0; min-height: 0; padding: 12px 9px 12px 10px; }
  .jc-booking .booking-slot > input { grid-row: 1; align-self: start; width: 20px; height: 20px; margin-top: 2px; }
  .jc-booking .booking-slot .slot-when b { font-size: 16px; line-height: 1.3; text-wrap: balance; }
  .jc-booking .booking-slot .slot-when span { font-size: 15.5px; }
  .jc-booking .booking-slot > em { grid-column: 1 / -1; grid-row: 2; justify-self: start; margin-top: 8px; padding: 4px 8px; font-size: 12.5px; line-height: 1.3; text-align: left; white-space: normal; border-radius: 10px; }

  /* Infos pratiques : une ligne par info, pastille à gauche */
  .jc-infos { padding: 48px 22px 8px; }
  .jc-infos-head { margin-bottom: 24px; }
  .jc-infos-grid { gap: 10px; }
  .jc-infos-grid li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; padding: 16px 16px 16px 14px; }
  .jc-infos-grid li svg { grid-row: span 3; width: 44px; height: 44px; padding: 10px; }
  .jc-infos-grid h3 { font-size: 22px; }
  .jc-infos-grid p { font-size: 15.5px; line-height: 1.55; }
  .jc-infos-grid .text-link { margin-top: 4px; }
  .jc-faq { gap: 18px; }
  .jc-faq summary { padding: 14px 0; min-height: 48px; }

  /* Histoire */
  .story-photo { height: 320px; }
  .jc-timeline { padding: 48px 22px; }
  .jc-tl-head { margin-bottom: 24px; }
  .jc-tl li { padding-bottom: 20px; }
  .behind { gap: 28px; }

  /* Pied de page */
  .footer { padding-top: calc(34px + var(--w)); }
  .jc-foot-brand p { margin-top: 12px; }
  .jc-foot-insta { margin-top: 12px; }
}
/* Pied de page : « Nous trouver » et « Les ateliers » côte à côte */
@media (min-width: 360px) and (max-width: 560px) {
  .jc-foot { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 24px 16px; padding-bottom: 28px; }
  .jc-foot-brand, .footer nav.jc-foot-col { grid-column: 1 / -1; }
  .jc-foot-col address, .jc-foot-col p, .jc-foot-col a { font-size: 14.5px; }
  .jc-foot-col address { white-space: nowrap; }
}
/* Mentions et conditions de vente */
@media (max-width: 560px) {
  .lg { padding: 32px 16px 56px; }
  .lg-head { margin-bottom: 26px; }
  .lg-grid { gap: 14px; }
  .lg-card { padding: 20px 16px 18px; }
  .lg-card h2 { font-size: 26px; margin-bottom: 12px; }
  .lg-card dl > div { padding: 9px 0; }
  .lg-list { gap: 4px; }
  .lg-list li { padding-block: 2px; }
}