/* L'Atelier / The Studio (recette Alain 2026-10-08 ; textes : docs/recette/atelier-textes-v2.md, contenu : PC43).
   En-tête comme La Boutique et Contact ; puis cinq sections image et texte alternées (blocs « Média et texte » de
   l'éditeur, classe kh-atelier-section), le texte d'Alain à filet or (groupe kh-atelier-voice : l'or de la charte est
   réservé aux citations), la signature de marque et un seul bouton. Sur mobile : l'image au-dessus du texte. */

/* ---- En-tête ---- */
.kh-atelier-page .entry-hero .entry-header { min-height: 0; padding: clamp(2rem, 4vw, 3rem) 0 0; }
.kh-atelier-page .entry-hero h1 { margin: 0; font: italic 400 clamp(2.6rem, 4.6vw, 3.8rem)/1.05 var(--kh-font-display); }
.kh-atelier-page .entry-hero h1::after { content: ""; display: block; width: min(12rem, 60%); height: 1rem; margin: .8rem auto 0; background: url('../images/trait-pinceau-vermillon.webp') center / contain no-repeat; }
.kh-atelier-page .content-area { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.kh-atelier-page .content-container { max-width: 1200px; }
.kh-atelier-page .entry { background: transparent; box-shadow: none; }

/* ---- Sections image et texte ---- */
.kh-atelier-page .kh-atelier-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); margin: 0 0 clamp(3.5rem, 7vw, 6rem); }
/* Placement explicite : le CSS du bloc « Média et texte » (WordPress) fixe lui-même colonnes et rangées. */
.kh-atelier-page .kh-atelier-section .wp-block-media-text__media { grid-column: 1; grid-row: 1; }
.kh-atelier-page .kh-atelier-section .wp-block-media-text__content { grid-column: 2; grid-row: 1; }
.kh-atelier-page .kh-atelier-section.has-media-on-the-right .wp-block-media-text__media { grid-column: 2; }
.kh-atelier-page .kh-atelier-section.has-media-on-the-right .wp-block-media-text__content { grid-column: 1; }
.kh-atelier-page .kh-atelier-section .wp-block-media-text__media { margin: 0; }
.kh-atelier-page .kh-atelier-section .wp-block-media-text__media img { display: block; width: 100%; height: auto; }
.kh-atelier-page .kh-atelier-section .wp-block-media-text__content { padding: 0; max-width: 34rem; }
/* 2.3rem (au lieu de 2.4) : « The art of bringing colour to the wind » tient sur une ligne, comme le français (Alain, 2026-10-09). */
.kh-atelier-page .kh-atelier-section h2 { margin: 0 0 1rem; font: italic 400 clamp(1.8rem, 3vw, 2.3rem)/1.15 var(--kh-font-display); text-wrap: balance; }
/* Pas de trait vermillon sous les titres de section (Alain, 2026-10-08) : le seul trait de la page est sous son titre. */
.kh-atelier-page .kh-atelier-section p { margin: 0 0 1rem; line-height: 1.75; }
.kh-atelier-page .kh-atelier-lead { font: italic 400 clamp(1.3rem, 2vw, 1.55rem)/1.4 var(--kh-font-display); color: var(--kh-sumi); }
.kh-atelier-page .kh-atelier-lead strong { font-weight: 400; }
/* Le koi de la section 1 (photo d'un produit, fond transparent) flotte sur le papier, sans cadre. */
.kh-atelier-page .kh-atelier-section--koi .wp-block-media-text__media { position: relative; }
.kh-atelier-page .kh-atelier-section--koi .wp-block-media-text__media :is(img, canvas) { filter: drop-shadow(0 18px 22px rgb(26 20 16 / .12)); }
/* Au vent (kh-atelier.js, comme le koi du hero de l'accueil) : le film se pose sur la photo, qui garde la place et
   reste visible jusqu'à la première image du film ; la vidéo source, invisible, reste dans la page (iPhone). */
.kh-atelier-page .kh-atelier-koi-film { position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; opacity: 0; transition: opacity 400ms ease; pointer-events: none; }
.kh-atelier-page .wp-block-media-text__media.is-playing .kh-atelier-koi-film { opacity: 1; }
.kh-atelier-page .wp-block-media-text__media.is-playing img { opacity: 0; transition: opacity 0s linear 400ms; }
.kh-atelier-page .wp-block-media-text__media video.kh-koi-film-src { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
/* Son nom, lien vers le produit, et le bouton pause / lecture : comme sous le koi du hero. */
.kh-atelier-page .kh-atelier-koi-name { display: flex; align-items: center; gap: .9rem; margin: .6rem 0 0 6%; font: 400 .75rem/1.4 var(--kh-font-ui); letter-spacing: .12em; text-align: left; text-transform: uppercase; }
.kh-atelier-page .kh-atelier-koi-name a { color: var(--kh-sumi-70); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.kh-atelier-page .kh-atelier-koi-name a::after { content: " \2192"; }
.kh-atelier-page .kh-atelier-koi-name a:is(:hover, :focus-visible) { color: var(--kh-vermillon); }
.kh-atelier-page .kh-atelier-koi-toggle { position: relative; flex: none; width: 1.7rem; height: 1.7rem; padding: 0; border: 1px solid rgb(26 20 16 / .6); background: none; color: var(--kh-sumi); cursor: pointer; opacity: .9; transition: opacity 200ms ease; }
.kh-atelier-page .kh-atelier-koi-toggle:is(:hover, :focus, :active) { background: none; color: var(--kh-sumi); opacity: 1; }
.kh-atelier-page .kh-atelier-koi-toggle::before { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 10px; border-inline: 2.5px solid currentColor; box-sizing: border-box; }
.kh-atelier-page .kh-atelier-koi-toggle[data-state="paused"]::before { width: 0; height: 0; border-inline: 0; border-block: 6px solid transparent; border-left: 9px solid currentColor; margin-left: calc(50% - 3px); }

/* ---- Le texte d'Alain (« Le Japon, depuis l'enfance ») : sa voix, filet or, signé ---- */
.kh-atelier-page .kh-atelier-voice { padding-left: 1.4rem; border-left: 2px solid var(--kh-or); } /* --kh-or : l'or v2 (#B8860B) */
/* Sans :not(), cette règle écrasait la taille de la signature « Alain » (1.13.13). */
.kh-atelier-page .kh-atelier-voice p:not(.kh-atelier-signature) { font-size: 1.02rem; }
/* Signatures (« Alain », « Catherine et Alain ») : en italique, à la plume de la charte, sans fausse calligraphie. */
.kh-atelier-page .kh-atelier-signature { margin-top: 1.2rem; font: italic 400 1.35rem/1.2 var(--kh-font-display); color: var(--kh-sumi); }
.kh-atelier-page .kh-atelier-signature strong { font-weight: 400; }
/* En clôture, au-dessus du bouton, la calligraphie d'Alain (2026-10-09 : 鯉の滝登り・七転び八起き, encre noire, PC60),
   sa traduction et « Calligraphie d'Alain » en légende. La signature de marque est passée en titre de la section 1.
   kh-atelier-closing : l'ancienne phrase de clôture, gardée pour une page qui l'aurait encore. */
.kh-atelier-page .kh-atelier-closing { margin: 0 0 1.5rem; font: italic 400 clamp(1.6rem, 3vw, 2.2rem)/1.2 var(--kh-font-display); text-align: center; }
.kh-atelier-page .kh-atelier-calligraphy { max-width: min(38rem, 90%); margin: clamp(1rem, 3vw, 2rem) auto 1.75rem; text-align: center; }
.kh-atelier-page .kh-atelier-calligraphy img { display: block; width: 100%; height: auto; margin: 0 auto; }
.kh-atelier-page .kh-atelier-calligraphy figcaption { margin-top: 1rem; color: var(--kh-sumi-70); font: 400 .72rem/1.6 var(--kh-font-ui); letter-spacing: .14em; text-transform: uppercase; }
.kh-atelier-page .kh-atelier-calligraphy figcaption em { display: block; margin-bottom: .35rem; color: var(--kh-sumi); font: italic 400 clamp(1.15rem, 2vw, 1.4rem)/1.35 var(--kh-font-display); letter-spacing: 0; text-transform: none; }

/* ---- Le bouton de fin ---- */
.kh-atelier-page .kh-atelier-cta { display: flex; justify-content: center; margin: 0 0 clamp(3rem, 6vw, 5rem); }

@media (max-width: 781px) {
  .kh-atelier-page .kh-atelier-section { grid-template-columns: 1fr; gap: 1.25rem; }
  .kh-atelier-page .kh-atelier-section .wp-block-media-text__media, .kh-atelier-page .kh-atelier-section.has-media-on-the-right .wp-block-media-text__media { grid-column: 1; grid-row: 1; }
  .kh-atelier-page .kh-atelier-section .wp-block-media-text__content, .kh-atelier-page .kh-atelier-section.has-media-on-the-right .wp-block-media-text__content { grid-column: 1; grid-row: 2; }
  .kh-atelier-page .kh-atelier-section .wp-block-media-text__content { max-width: none; }
}