/* OKŪMA — identité Furoshiki : ivoire cachemire dominant, olive en accent, sceau rouge en signature.
   Ne pas modifier : le contenu se change dans contenu.js */
:root{
  --ivoire:#F2EDE2; --papier:#E8E1D2; --blanc:#FBF8F2;
  --olive:#514F3C; --olive-fonce:#46442F; --encre:#2A2924; --gris:#5E594E;
  --sceau:#9C3B28; --ocre:#B08D57; --ligne:#D3C9B5; --motif:#DCD3BF;
  --grave:"Marcellus",Georgia,serif;
  --titre:"Shippori Mincho B1","Yu Mincho",Georgia,serif;
  --texte:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --gouttiere:max(20px,env(safe-area-inset-left,0px));
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{background:var(--ivoire);color:var(--encre);font-family:var(--texte);font-size:17.5px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--titre);font-weight:700;line-height:1.15;text-wrap:balance}
h2{font-size:clamp(32px,4vw,50px)}
h3{font-size:22px}
.cadre{max-width:1240px;margin:0 auto;padding-left:var(--gouttiere);padding-right:var(--gouttiere)}
@media(min-width:760px){:root{--gouttiere:max(5vw,env(safe-area-inset-left,0px))}}
section{position:relative;isolation:isolate}
.petit{font-family:var(--grave);font-size:14px;letter-spacing:.24em;text-transform:uppercase;color:var(--olive)}
.texte{font-size:19px;line-height:1.75;color:var(--gris);max-width:600px}
.a-completer{background:#F5E2C8;color:#7A4A12;padding:0 6px;font-size:.92em}
.manque{display:grid;place-items:center;min-height:240px;background:var(--papier);color:var(--gris);font-size:14px}

/* Motif de fond : beige sur beige, à peine visible */
.fond{position:absolute;inset:0;width:100%;height:100%;color:var(--motif);z-index:-1;pointer-events:none}
.dessin{color:var(--olive)}

/* Titres avec kanji vertical */
.titre-bloc{display:flex;gap:22px;align-items:flex-start;margin-bottom:26px}
.titre-bloc>div{display:flex;flex-direction:column;gap:12px;min-width:0}
.vk{writing-mode:vertical-rl;font-family:var(--titre);font-weight:700;font-size:20px;letter-spacing:.3em;color:var(--sceau);padding-top:4px;flex:none}

/* Boutons */
.bouton{display:inline-flex;align-items:center;gap:10px;font-family:var(--grave);font-size:15px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;padding:16px 30px;background:var(--olive);color:var(--ivoire);border:1px solid var(--olive);transition:background .25s,color .25s}
.bouton:hover{background:var(--olive-fonce)}
.bouton.clair{background:transparent;color:var(--olive)}
.bouton.clair:hover{background:var(--olive);color:var(--ivoire)}
.bouton svg{width:18px;height:18px}
.bouton:focus-visible,a:focus-visible{outline:2px solid var(--sceau);outline-offset:3px}
.lien-fleche{font-family:var(--grave);font-size:15px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--olive);border-bottom:1px solid currentColor;padding-bottom:3px}
.lien-fleche::after{content:" →"}

/* Bandeau + en-tête */
.bandeau{background:var(--olive);color:var(--ivoire);text-align:center;font-size:14px;letter-spacing:.08em;padding:10px var(--gouttiere)}
.entete{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:18px var(--gouttiere);background:rgba(242,237,226,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--ligne)}
.entete nav{display:flex;gap:30px}
.entete nav.droite{justify-content:flex-end}
.entete nav a{font-family:var(--grave);font-size:14.5px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.entete nav a:hover,.entete nav a.actif{border-color:var(--sceau)}
.logo{font-family:var(--grave);font-size:24px;letter-spacing:.42em;text-decoration:none;padding-left:.42em}
.mobile-seul{display:none}

/* Hero : aplat ivoire + vidéo */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:min(86vh,820px)}
.hero-panneau{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:26px;padding:64px var(--gouttiere);background:var(--ivoire)}
.sceau-grand{width:92px;height:92px}
.hero-marque{font-family:var(--grave);font-weight:400;font-size:clamp(52px,6.4vw,92px);letter-spacing:.3em;line-height:1;margin-right:-.3em}
.hero-accroche{font-family:var(--titre);font-weight:600;font-size:clamp(23px,2.3vw,31px);line-height:1.35;max-width:440px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px 30px;margin-top:6px}
.hero-video{position:relative;background:var(--papier);overflow:hidden}
.hero-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.legende{position:absolute;left:20px;bottom:18px;font-size:13px;letter-spacing:.1em;color:#F7F3EB;text-shadow:0 1px 6px rgba(0,0,0,.45)}

/* Intro */
.intro{padding:130px 0 110px}
.intro-grille{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:60px;align-items:center}
.intro .mention{margin-top:22px;font-size:15px;color:var(--gris);border-left:2px solid var(--sceau);padding-left:14px}
.intro-ill .dessin{width:100%;max-width:300px;margin-left:auto}

/* Régions + carte */
.regions{padding:120px 0;background:var(--papier);border-block:1px solid var(--ligne)}
.regions .fond{color:#D8CEB9}
.regions-grille{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;align-items:center}
.liste-regions{list-style:none;margin:34px 0 20px;display:flex;flex-direction:column}
.liste-regions li{display:flex;gap:20px;align-items:baseline;padding:16px 0;border-top:1px solid var(--ligne)}
.liste-regions li:last-child{border-bottom:1px solid var(--ligne)}
.liste-regions .num{font-family:var(--grave);font-size:17px;color:var(--sceau);min-width:22px}
.liste-regions h3{font-size:23px;transition:color .2s}
.liste-regions .pref{font-family:var(--texte);font-weight:400;font-size:15px;color:var(--gris);margin-left:8px;letter-spacing:.04em}
.liste-regions p{color:var(--gris);font-size:17px}
.liste-regions li.actif h3{color:var(--sceau)}
.assemblage{font-family:var(--titre);font-weight:600;font-size:20px;margin:6px 0 30px}
.regions-carte{background:var(--ivoire);border:1px solid var(--ligne);padding:20px}
.carte-japon{width:100%;height:auto;overflow:hidden}
.carte-japon .terre{fill:#E3DAC6;stroke:var(--olive);stroke-width:.9;stroke-linejoin:round}
.carte-japon .halo{fill:var(--sceau);opacity:0;transition:opacity .25s}
.carte-japon .pastille{fill:var(--sceau);stroke:var(--ivoire);stroke-width:2}
.carte-japon text{font-family:var(--titre);font-weight:700;font-size:22px;fill:var(--encre);paint-order:stroke;stroke:var(--ivoire);stroke-width:5px;stroke-linejoin:round}
.carte-japon .n{font-family:var(--grave);font-weight:400;fill:var(--sceau)}
.carte-japon .point.actif .halo{opacity:.22}
.carte-japon .kanji-carte{font-size:54px;fill:#D9CFBA;stroke:none}

/* Aperçu des coffrets */
.apercu{padding:120px 0}
.apercu-image{display:block;overflow:hidden;margin-bottom:34px}
.apercu-image img{width:100%;aspect-ratio:16/8;object-fit:cover;transition:transform .8s}
.apercu-image:hover img{transform:scale(1.02)}
.apercu-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:22px}
.mini{display:flex;flex-direction:column;gap:12px;padding:30px;background:var(--blanc);border:1px solid var(--ligne);text-decoration:none;transition:border-color .25s,transform .25s}
.mini:hover{border-color:var(--olive);transform:translateY(-2px)}
.mini h3{font-size:25px}
.mini p:not(.petit){color:var(--gris)}
.mini-bas{margin-top:auto;padding-top:10px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.prix{font-family:var(--titre);font-weight:700;font-size:26px}

/* Trois gestes */
.gestes{padding:120px 0;border-top:1px solid var(--ligne)}
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:44px;margin-top:20px}
.geste{position:relative;display:flex;flex-direction:column;gap:12px}
.geste .dessin{width:150px;height:150px;margin-bottom:8px}
.geste .petit-vk{position:absolute;top:0;right:0;font-size:16px;opacity:.85}
.geste .sous{font-family:var(--grave);letter-spacing:.16em;font-size:14px;color:var(--olive);text-transform:uppercase}
.geste p:last-child{color:var(--gris)}

/* Film */
.film{padding:110px 0;background:var(--papier);border-block:1px solid var(--ligne)}
.film-grille{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;align-items:center}
.film video{width:100%;aspect-ratio:16/9;background:var(--encre);object-fit:cover}

/* Communauté (accueil) */
.communaute{padding:120px 0}
.communaute-grille{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:60px;align-items:center}
.communaute .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.hashtags{margin-top:22px;font-size:15px;color:var(--gris);word-spacing:.5em;line-height:1.9}
.communaute-image img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ============ Page Les coffrets ============ */
.tete-coffrets{padding:100px 0 40px}
.tete-coffrets h1{font-size:clamp(42px,5.4vw,72px)}
.tete-coffrets .large{margin-top:44px}
.tete-coffrets .large img{width:100%;aspect-ratio:16/7;object-fit:cover}
.coffrets{padding:40px 0 60px}
.coffret{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;padding:70px 0;border-bottom:1px solid var(--ligne)}
.coffret:last-child{border-bottom:0}
.coffret.inverse .visuel{order:2}
.visuel{position:relative;isolation:isolate;padding:34px;background:var(--papier)}
.visuel img{width:100%;aspect-ratio:4/5;object-fit:cover;box-shadow:0 30px 50px -36px rgba(42,41,36,.55)}
.infos{display:flex;flex-direction:column;gap:16px}
.infos h2{font-size:clamp(34px,3.6vw,48px)}
.promesse{font-family:var(--titre);font-weight:600;font-size:22px;line-height:1.4}
.menu{margin:12px 0 4px;border-top:1px solid var(--ligne)}
.ligne{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:14px 0;border-bottom:1px solid var(--ligne)}
.ligne .nom{font-weight:500;font-size:18px}
.ligne .num{font-family:var(--grave);color:var(--sceau);letter-spacing:.12em}
.ligne .detail{grid-column:1/-1;color:var(--gris);font-size:16px}
.format{font-size:15px;color:var(--gris);letter-spacing:.06em}
.achat{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:8px}
.note{font-size:14.5px;color:var(--gris);line-height:1.6;max-width:460px}

.duo{padding:110px 0;background:var(--papier);border-block:1px solid var(--ligne)}
.duo-grille{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:48px;align-items:center}
.duo-ill{position:relative}
.duo-ill .dessin{width:100%;max-width:260px}
.sceau-petit{position:absolute;right:6%;bottom:0;width:46px;height:46px}
.duo-carte{display:flex;flex-direction:column;gap:16px;background:var(--ivoire);padding:40px;border:1px solid var(--ligne)}
.duo-photo img{width:100%;aspect-ratio:4/5;object-fit:cover}

.offrir{padding:120px 0}
.etapes{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:40px;margin-top:44px}
.etapes li{display:flex;flex-direction:column;gap:10px;padding-top:24px;border-top:1px solid var(--olive)}
.etape-ill{width:64px;height:64px;margin-bottom:6px}
.etapes p:last-child{color:var(--gris)}

.boite{padding:110px 0;border-top:1px solid var(--ligne)}
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:28px}
.carte{display:flex;flex-direction:column;gap:12px}
.carte img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:8px}
.carte p{color:var(--gris)}
.galerie{padding:0 0 120px}
.galerie-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px}
.galerie-grille img{width:100%;aspect-ratio:1;object-fit:cover}

/* ============ Pages légales et communauté ============ */
.legal{max-width:800px;margin:0 auto;padding:110px var(--gouttiere) 120px}
.legal h1{font-size:clamp(32px,4vw,46px);margin-bottom:30px}
.legal h2{font-size:23px;margin:34px 0 10px}
.legal p,.legal li{color:var(--gris);line-height:1.8;margin-bottom:8px}
.legal ul{padding-left:20px}
.page-communaute{max-width:980px;margin:0 auto;padding:110px var(--gouttiere) 120px;display:flex;flex-direction:column;gap:72px}
.tete-page{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.tete-page h1{font-size:clamp(38px,5vw,60px)}
.tete-page .texte{text-align:center}
.trait{width:44px;height:2px;background:var(--sceau)}
.bloc-com{display:flex;flex-direction:column;gap:24px;border-top:1px solid var(--ligne);padding-top:40px}
.bloc-com h2{font-size:clamp(26px,2.8vw,34px)}
.avis-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px}
.avis{background:var(--blanc);border:1px solid var(--ligne);padding:28px;display:flex;flex-direction:column;gap:12px;margin:0}
.avis .etoiles{color:var(--sceau);letter-spacing:.15em}
.avis blockquote{font-family:var(--titre);font-weight:600;font-size:20px;line-height:1.5}
.avis figcaption{font-size:14px;color:var(--gris)}
.avis-vide{color:var(--gris);line-height:1.8;max-width:620px}
.form-avis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px 24px;align-items:end}
.champ{display:flex;flex-direction:column;gap:8px;min-width:0}
.champ label{font-family:var(--grave);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--olive)}
.champ input,.champ select,.champ textarea{font:inherit;font-size:17px;color:var(--encre);background:var(--blanc);border:1px solid var(--ligne);padding:13px 14px;border-radius:0;width:100%}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:1px solid var(--olive)}
.large-champ{grid-column:1/-1}
.accord{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--gris);line-height:1.5}
.accord input{margin-top:4px;accent-color:var(--olive)}
.form-avis .bouton{justify-self:start}
.form-avis .note{grid-column:1/-1}
.reseaux{display:flex;flex-wrap:wrap;gap:12px}
.reseaux a{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border:1px solid var(--ligne);text-decoration:none;font-size:15px}
.reseaux a:hover{border-color:var(--olive);background:var(--olive);color:var(--ivoire)}
.reseaux svg{width:18px;height:18px}
.hashtags-clair{color:var(--gris);font-size:15px;line-height:1.9}

/* Pied de page : l'olive en aplat, une seule fois */
.pied{background:var(--olive);color:#E9E3D4;padding:56px var(--gouttiere);display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.pied .marque{font-family:var(--grave);font-size:22px;letter-spacing:.42em;padding-left:.42em;color:var(--ivoire)}
.pied nav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;font-size:15px}
.pied a{text-decoration:none;opacity:.85}
.pied a:hover{opacity:1;text-decoration:underline}

/* ============ Tablette et téléphone ============ */
@media(max-width:980px){
  .regions-grille,.communaute-grille,.film-grille,.intro-grille{grid-template-columns:1fr;gap:44px}
  .intro-ill .dessin{margin:0 auto;max-width:220px}
  .duo-grille{grid-template-columns:1fr 1fr}
  .duo-ill{display:none}
}
@media(max-width:820px){
  body{font-size:17px}
  .entete{grid-template-columns:auto 1fr;padding-block:14px}
  .entete nav:first-child{display:none}
  .logo{font-size:20px;padding-left:0}
  .entete nav.droite{gap:20px}
  .mobile-seul{display:inline}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-video{order:-1;aspect-ratio:4/5;max-height:70vh}
  .hero-panneau{padding-block:48px 56px;gap:20px}
  .sceau-grand{width:68px;height:68px}
  .intro,.regions,.apercu,.gestes,.film,.communaute,.duo,.offrir,.boite{padding:80px 0}
  .texte{font-size:18px}
  .coffret,.duo-grille{grid-template-columns:1fr;gap:34px}
  .coffret{padding:50px 0}
  .coffret.inverse .visuel{order:0}
  .visuel{padding:18px}
  .duo-carte{padding:28px}
  .tete-coffrets{padding-top:64px}
  .tete-coffrets .large img{aspect-ratio:4/3}
  .apercu-image img{aspect-ratio:4/3}
  .regions-carte{padding:10px}
  .titre-bloc{gap:14px}
  .vk{font-size:17px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.duo-carte h2{font-size:clamp(30px,2.8vw,40px)}
@media(max-width:980px){.regions-carte{order:-1}}

/* =====================================================================
   VERSION ORDINATEUR : plus large, plus d'images, plus de respiration
   ===================================================================== */
@media(min-width:1100px){
  :root{--gouttiere:max(4vw,env(safe-area-inset-left,0px))}
  body{font-size:18.5px}
  .cadre{max-width:1720px}
  .texte{font-size:20.5px;max-width:680px}
  h2{font-size:clamp(40px,3.8vw,62px)}
  .entete{padding-block:22px}
  .hero{min-height:calc(100vh - 110px);grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
  .hero-panneau{padding-left:max(4vw,40px);padding-right:3vw}
  .hero-marque{font-size:clamp(64px,6vw,104px)}
  .intro-grille{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .intro-ill .dessin{max-width:380px}
  .regions-grille{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:6vw}
  .regions-carte{padding:28px}
  .apercu-image img{aspect-ratio:16/7}
  .apercu-cartes{grid-template-columns:repeat(3,1fr)}
  .mini{padding:38px}
  .mini h3{font-size:29px}
  .trio{gap:5vw}
  .geste .dessin{width:180px;height:180px}
  .film-grille{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
  .communaute-grille{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .tete-coffrets .large img{aspect-ratio:16/6.5}
  .coffret{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:6vw;padding:90px 0}
  .coffret.inverse{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .visuel{padding:48px}
  .visuel img{aspect-ratio:5/4}
  .infos h2{font-size:clamp(40px,3.4vw,56px)}
  .duo-grille{grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,5fr)}
  .duo-photo img{aspect-ratio:5/4}
  .cartes{grid-template-columns:repeat(3,1fr);gap:3vw}
  .legal,.page-communaute{max-width:1040px}
}

/* =====================================================================
   VERSION TÉLÉPHONE : images bord à bord, cartes qui défilent au doigt,
   barre de navigation en bas de l'écran
   ===================================================================== */
.nav-mobile{display:none}
@media(max-width:820px){
  .entete nav.droite .mobile-seul{display:none}
  .entete{grid-template-columns:1fr auto;padding-block:12px}
  .nav-mobile{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(242,237,226,.97);backdrop-filter:blur(10px);border-top:1px solid var(--ligne);padding:6px 0 max(8px,env(safe-area-inset-bottom,0px))}
  .nav-mobile a{display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;font-family:var(--grave);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);padding:6px 0}
  .nav-mobile span{font-family:var(--titre);font-weight:700;font-size:19px;line-height:1.2;color:var(--olive)}
  .nav-mobile a.actif{color:var(--encre)}
  .nav-mobile a.actif span{color:var(--sceau)}
  body{padding-bottom:72px}
  .bandeau{font-size:12.5px;padding-block:8px}

  /* Hero : vidéo verticale plein écran, texte dessous */
  .hero-video{aspect-ratio:auto;height:62vh;max-height:none}
  .hero-panneau{align-items:center;text-align:center;padding:40px 20px 52px}
  .hero-marque{font-size:48px;letter-spacing:.26em;margin-right:-.26em}
  .hero-accroche{font-size:23px}
  .hero-actions{flex-direction:column;width:100%;gap:18px}
  .hero-actions .bouton{width:100%;justify-content:center}

  /* Images bord à bord */
  .apercu-image,.tete-coffrets .large,.communaute-image,.duo-photo{margin-left:calc(-1 * var(--gouttiere));margin-right:calc(-1 * var(--gouttiere))}
  .visuel{margin-left:calc(-1 * var(--gouttiere));margin-right:calc(-1 * var(--gouttiere));padding:16px}
  .regions-carte{margin-left:calc(-1 * var(--gouttiere));margin-right:calc(-1 * var(--gouttiere));border-left:0;border-right:0}
  .film video{margin-left:calc(-1 * var(--gouttiere));width:calc(100% + 2 * var(--gouttiere))}

  /* Cartes qui défilent horizontalement */
  .apercu-cartes,.trio,.cartes,.etapes,.galerie-grille{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-left:calc(-1 * var(--gouttiere));margin-right:calc(-1 * var(--gouttiere));padding:0 var(--gouttiere) 10px;scrollbar-width:none}
  .apercu-cartes::-webkit-scrollbar,.trio::-webkit-scrollbar,.cartes::-webkit-scrollbar,.etapes::-webkit-scrollbar,.galerie-grille::-webkit-scrollbar{display:none}
  .apercu-cartes>*,.trio>*,.cartes>*,.etapes>*,.galerie-grille>*{flex:0 0 82%;scroll-snap-align:start}
  .galerie-grille>*{flex-basis:88%}
  .geste{background:var(--blanc);border:1px solid var(--ligne);padding:26px}
  .geste .petit-vk{top:24px;right:20px}
  .geste .dessin{width:110px;height:110px}
  .etapes li{background:var(--blanc);border:1px solid var(--ligne);border-top:2px solid var(--olive);padding:24px}
  .glisser{display:block;font-family:var(--grave);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);margin:-8px 0 14px}

  /* Coffrets : prix et bouton bien visibles */
  .achat{width:100%;justify-content:space-between;gap:14px}
  .achat .bouton{flex:1;justify-content:center;padding-inline:18px}
  .infos h2{font-size:34px}
  .liste-regions h3{font-size:21px}
  .communaute .actions .bouton{flex:1;justify-content:center}
  .titre-bloc .vk{display:none}
  .petit{font-size:13px}
  h2{font-size:33px}
  .tete-coffrets h1{font-size:44px}
}
@media(min-width:821px){.glisser{display:none}}
.regions-carte{overflow:hidden}
@media(max-width:820px){.cadre.galerie-grille{margin:0;max-width:none}}
@media(min-width:1100px){
  .hero{grid-template-columns:minmax(0,5fr) minmax(0,8fr)}
  .hero-marque{font-size:clamp(56px,4.7vw,90px)}
}
@media(max-width:820px){
  .hero-video{height:50vh}
  .hero-panneau{padding-top:30px;gap:16px}
}

/* ================= Damier, pages Terroirs et Influences ================= */
.ordi-seul{}
.liste-regions.courte li{display:grid;grid-template-columns:auto auto 1fr;align-items:baseline;gap:16px;padding:13px 0}
.liste-regions.courte p{font-size:16px;text-align:right}
.duo-boutons{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
.hero-accroche{font-size:clamp(26px,2.6vw,38px)}

.bande-influences{display:block;position:relative;isolation:isolate;text-decoration:none;padding:100px 0;border-top:1px solid var(--ligne);transition:background .3s}
.bande-influences:hover .lien-fleche{color:var(--sceau)}
.bande-grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:60px;align-items:center}
.bande-ill{background:var(--ivoire);border:1px solid var(--ligne);padding:30px}
.bande-ill .dessin{width:100%;max-width:420px;margin:0 auto}
.bande-influences h2{margin:12px 0 18px}
.kanjis{font-family:var(--titre);font-weight:700;font-size:26px;color:var(--sceau);letter-spacing:.12em;margin-bottom:26px}

.tete-page-large,.tete-influences{padding:90px 0 70px;border-bottom:1px solid var(--ligne)}
.tete-page-large h1,.tete-influences h1{font-size:clamp(42px,5.4vw,76px)}
.terroirs{padding:80px 0 110px}
.terroirs-grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:6vw;align-items:start}
.terroirs-carte{position:sticky;top:100px}
.terroir{padding:34px 0;border-bottom:1px solid var(--ligne)}
.terroir:first-child{padding-top:0}
.terroir .num{color:var(--sceau)}
.terroir h2{font-size:clamp(36px,3.4vw,52px);margin:8px 0 6px}
.accroche-terroir{font-family:var(--titre);font-weight:600;font-size:21px;margin-bottom:18px}
.terroir dl{display:flex;flex-direction:column;gap:12px}
.terroir dl div{display:grid;grid-template-columns:110px 1fr;gap:16px}
.terroir dt{font-family:var(--grave);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--olive);padding-top:3px}
.terroir dd{color:var(--gris);font-size:17.5px;line-height:1.6}
.terroir.actif h2{color:var(--sceau)}
.terroirs .assemblage{margin:30px 0}

.influences-tete{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:60px;align-items:center}
.influences-ill{background:var(--ivoire);border:1px solid var(--ligne);padding:34px}
.influences-ill .dessin{width:100%;max-width:460px;margin:0 auto}
.influences{padding:40px 0 110px}
.influence{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:6vw;align-items:center;padding:70px 0;border-bottom:1px solid var(--ligne)}
.influence.inverse .influence-ill{order:2}
.influence-ill{position:relative;display:grid;place-items:center;aspect-ratio:1;background:var(--papier);overflow:hidden}
.influence-ill .dessin{width:46%;height:auto;position:relative}
.grand-kanji{position:absolute;inset:auto auto 6% 6%;font-family:var(--titre);font-weight:700;font-size:clamp(40px,5vw,84px);color:#DCD2BE;writing-mode:vertical-rl;letter-spacing:.1em;top:6%}
.influence-texte h2{margin:12px 0 16px}
.influences-fin{padding-top:60px;text-align:center}

@media(max-width:980px){
  .bande-grille,.terroirs-grille,.influences-tete,.influence{grid-template-columns:1fr;gap:34px}
  .terroirs-carte{position:static}
  .influence.inverse .influence-ill{order:0}
}
@media(max-width:820px){
  .ordi-seul{display:none}
  .bande-influences{padding:70px 0}
  .bande-ill,.influences-ill{margin-left:calc(-1 * var(--gouttiere));margin-right:calc(-1 * var(--gouttiere));border-inline:0}
  .tete-page-large,.tete-influences{padding:56px 0 44px}
  .tete-page-large h1,.tete-influences h1{font-size:42px}
  .terroirs{padding:0 0 80px}
  .terroirs-carte{margin-bottom:10px}
  .terroir dl div{grid-template-columns:1fr;gap:4px}
  .influence{padding:44px 0}
  .influence-ill{margin-left:calc(-1 * var(--gouttiere));margin-right:calc(-1 * var(--gouttiere));aspect-ratio:4/3}
  .liste-regions.courte p{display:none}
  .duo-boutons .bouton{width:100%;justify-content:center}
}
.hero-accroche{max-width:520px}
.influence-ill{aspect-ratio:4/3}
.influence-ill .dessin{width:40%}

/* ================= Pied de page façon grande maison ================= */
.pied{display:block;position:relative;background:var(--olive-fonce);color:#EDE7D9;padding:0;text-align:left;overflow:hidden}
.pied-cadre{max-width:1720px;margin:0 auto;padding:0 var(--gouttiere)}
.pied a{opacity:1;text-decoration:none;color:inherit}
.pied-haut{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;padding:64px 0 52px;border-bottom:1px solid rgba(237,231,217,.22)}
.pied-titre{font-family:var(--grave);font-size:15px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:22px}
.pied-inscrire{display:inline-flex;align-items:center;gap:12px;font-family:var(--grave);font-size:17px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:4px}
.pied-inscrire svg{width:22px;height:16px}
.pied-reseaux{display:flex;gap:28px}
.pied-reseaux a{display:grid;place-items:center;width:44px;height:44px;transition:opacity .2s}
.pied-reseaux svg{width:34px;height:34px}
.pied-reseaux a:hover,.pied-inscrire:hover{opacity:.7}
.pied-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;padding:64px 0}
.pied-col h2{font-family:var(--grave);font-weight:400;font-size:28px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:34px;color:var(--ivoire)}
.pied-col ul{list-style:none;display:flex;flex-direction:column;gap:22px}
.pied-col a{font-size:18px;letter-spacing:.02em;color:#E3DCCB;transition:color .2s}
.pied-col a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
.pied-bas{display:flex;justify-content:space-between;align-items:center;padding:26px 0;border-top:1px solid rgba(237,231,217,.22);font-size:14px;color:#CFC8B7}
.pied-sceau{width:40px;height:40px}
.pied-logo{font-family:var(--grave);font-size:clamp(90px,19vw,340px);letter-spacing:.14em;line-height:.74;text-align:center;color:var(--ivoire);margin:10px 0 0;white-space:nowrap;padding-left:.14em;transform:translateY(12%);user-select:none}
.haut-page{position:absolute;right:0;top:40%;display:grid;place-items:center;width:84px;height:84px;background:var(--ivoire);color:var(--encre)!important}
.haut-page svg{width:34px;height:34px}
@media(max-width:820px){
  .pied-haut{grid-template-columns:1fr;gap:34px;padding:48px 0 40px}
  .pied-cols{grid-template-columns:1fr 1fr;gap:44px 24px;padding:46px 0}
  .pied-col h2{font-size:21px;margin-bottom:20px}
  .pied-col ul{gap:16px}
  .pied-col a{font-size:16px}
  .pied-bas{font-size:12.5px}
  .pied-logo{font-size:23vw}
  .haut-page{width:56px;height:56px;top:auto;bottom:24%}
  .haut-page svg{width:24px;height:24px}
}
@media(max-width:820px){.pied-logo{font-size:19.5vw;letter-spacing:.1em;padding-left:.1em}}

/* ================= Transitions façon grande maison ================= */
/* En-tête : grand logo centré qui rétrécit en douceur au défilement */
.entete{transition:padding .5s cubic-bezier(.2,.7,.2,1),background .5s,box-shadow .5s}
.logo{transition:font-size .5s cubic-bezier(.2,.7,.2,1),letter-spacing .5s}
@media(min-width:821px){
  .entete{padding-block:30px}
  .logo{font-size:40px;letter-spacing:.38em}
  .entete.reduit{padding-block:16px;box-shadow:0 10px 30px -24px rgba(42,41,36,.5)}
  .entete.reduit .logo{font-size:23px;letter-spacing:.42em}
}
@media(max-width:820px){
  .logo{font-size:24px}
  .entete.reduit{padding-block:10px}
  .entete.reduit .logo{font-size:19px}
}
/* Pied de page : le contenu de la page glisse et découvre le pied, en décalé */
#contenu{position:relative;z-index:1;background:var(--ivoire);box-shadow:0 30px 40px -30px rgba(42,41,36,.35)}
.pied{position:relative;z-index:0;overflow:hidden;background:var(--olive-fonce)}
.pied-voile{will-change:transform,opacity}
/* Grand nom en vert olive sur bande ivoire, sous le pied de page */
.pied-signature{background:var(--ivoire);padding:70px var(--gouttiere) 46px;text-align:center;border-top:1px solid #3A3826}
.pied-logo{font-family:var(--grave);font-size:clamp(70px,15.5vw,300px);letter-spacing:.24em;padding-left:.24em;line-height:.9;color:var(--olive);margin:0;transform:none;white-space:nowrap}
.pied-devise{margin-top:26px;font-family:var(--grave);font-size:14px;letter-spacing:.32em;text-transform:uppercase;color:var(--gris)}
.pied-bas{border-top:1px solid rgba(237,231,217,.22)}
.haut-page{top:32%}
@media(max-width:820px){
  .pied-signature{padding:44px 12px 104px}
  .pied-logo{font-size:15vw;letter-spacing:.2em;padding-left:.2em}
  .pied-devise{font-size:11px;letter-spacing:.24em}
  body{padding-bottom:0}
}
@media(prefers-reduced-motion:reduce){.pied-voile{transform:none!important;opacity:1!important}}
.grand-kanji{inset:auto;top:7%;left:6%;bottom:auto;font-size:clamp(34px,4vw,70px)}

/* ================= Pages couleur forte : Exploration et Terroirs ================= */
:root{--marron:#4A2C1F;--marron-2:#5A3624;--marron-3:#6E4430;--creme:#EFE4D3;--creme-2:#CDB9A0}
/* Image plein écran, titre centré, liens soulignés (façon grande maison) */
.plein{position:relative;isolation:isolate;display:flex;align-items:flex-end;justify-content:center;background:var(--marron);color:var(--creme);overflow:hidden;margin-top:calc(-1 * var(--h-entete, 100px))}
.plein-ecran{min-height:100vh}
.plein-moyen{min-height:86vh}
.plein-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:sepia(.55) saturate(.85) brightness(.82) contrast(1.05);transform:scale(1.04);animation:respire 18s ease-in-out infinite alternate}
@keyframes respire{to{transform:scale(1.1)}}
.plein-voile{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(40,22,14,.45) 0%,rgba(40,22,14,0) 30%,rgba(40,22,14,.15) 55%,rgba(40,22,14,.82) 100%);mix-blend-mode:multiply}
.plein-texte{text-align:center;padding:0 var(--gouttiere) 9vh;display:flex;flex-direction:column;align-items:center;gap:18px}
.plein .petit{color:var(--creme);letter-spacing:.32em}
.plein h1{font-family:var(--grave);font-weight:400;font-size:clamp(40px,5.6vw,92px);letter-spacing:.06em;line-height:1.05;color:#F7EFE2;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.plein-liens{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 40px;margin-top:10px}
.plein-liens a{font-size:19px;color:#F7EFE2;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px;transition:opacity .2s}
.plein-liens a:hover{opacity:.75}
/* En-tête transparent au-dessus de l'image, puis ivoire au défilement */
body[data-page="exploration"] .entete:not(.reduit),body[data-page="terroirs"] .entete:not(.reduit){background:transparent;backdrop-filter:none;border-color:transparent;color:#F7EFE2;box-shadow:none}
body[data-page="exploration"] .entete:not(.reduit) a,body[data-page="terroirs"] .entete:not(.reduit) a{color:#F7EFE2}
/* Sections marron */
.brun{background:var(--marron);color:var(--creme);text-align:center;padding:120px var(--gouttiere)}
.brun .petit{color:var(--creme-2)}
.brun h2{color:#F7EFE2;font-size:clamp(36px,4vw,60px);margin:14px 0}
.brun-texte{font-family:var(--titre);font-weight:600;font-size:clamp(20px,1.8vw,26px);color:var(--creme-2);max-width:640px;margin:0 auto}
.brun-texte.grand{font-size:clamp(24px,2.6vw,38px);color:var(--creme);line-height:1.4;max-width:900px}
.terroirs-intro{padding:90px var(--gouttiere)}
/* Plaque en relief */
.empreinte-zone{background:radial-gradient(ellipse at 50% 40%,var(--marron-3) 0%,var(--marron) 70%);padding-top:110px}
.empreinte{width:min(420px,78vw);aspect-ratio:3/4;margin:0 auto 60px;background:linear-gradient(160deg,#7A4A34,#5E3826);border-radius:14px 26px 10px 30px/22px 12px 30px 14px;box-shadow:inset 3px 3px 6px rgba(255,220,190,.18),inset -6px -8px 14px rgba(0,0,0,.45),0 30px 50px -20px rgba(0,0,0,.6),0 0 0 10px rgba(122,74,52,.35);padding:30px;transform:rotate(-1.2deg)}
.empreinte-grille{display:grid;grid-template-columns:repeat(6,1fr);place-items:center;height:100%;font-family:var(--titre);font-weight:700;font-size:clamp(18px,2.2vw,30px);color:#6A3F2C;text-shadow:-1px -1px 0 rgba(0,0,0,.35),1px 1px 0 rgba(255,214,180,.22)}
.empreinte-grille span:nth-child(odd){font-size:.6em}
/* Chapitres alternés image / texte */
.chapitres{background:var(--marron-2)}
.chapitre{display:grid;grid-template-columns:1fr 1fr;min-height:80vh}
.chapitre.inverse .chapitre-img{order:2}
.chapitre-img{position:relative;overflow:hidden;background:var(--marron)}
.chapitre-img img{width:100%;height:100%;object-fit:cover;filter:sepia(.5) saturate(.85) brightness(.85)}
.chapitre-bol{display:grid;place-items:center;height:100%;background:radial-gradient(circle at 50% 45%,#F2E9DA,#D9C7AE);padding:10%}
.chapitre-bol .dessin{width:min(420px,80%);color:var(--marron)}
.chapitre-texte{position:relative;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:8vw;color:var(--creme)}
.chapitre-texte .petit{color:var(--creme-2)}
.chapitre-texte h2{color:#F7EFE2;font-size:clamp(38px,4vw,64px)}
.chapitre-texte p:last-child{font-size:20px;line-height:1.7;color:var(--creme-2);max-width:460px}
.chapitre-kanji{position:absolute;top:8%;right:8%;writing-mode:vertical-rl;font-family:var(--titre);font-weight:700;font-size:clamp(50px,6vw,110px);color:rgba(239,228,211,.09)}
.brun-film video{width:100%;max-width:1100px;margin:30px auto 0;aspect-ratio:16/9;background:#1d120c}
.brun-fin{background:var(--marron);text-align:center;padding:0 var(--gouttiere) 120px}
.bouton-creme{background:var(--creme);color:var(--marron);border-color:var(--creme)}
.bouton-creme:hover{background:#fff;color:var(--marron)}
/* Terroirs en marron */
.brun-zone{background:var(--marron-2);color:var(--creme)}
.brun-zone .regions-carte{background:var(--creme);border-color:transparent}
.brun-zone .terroir{border-color:rgba(239,228,211,.18)}
.brun-zone .terroir h2{color:#F7EFE2}
.brun-zone .terroir .petit,.brun-zone .terroir dt{color:var(--creme-2)}
.brun-zone .terroir .num{color:#E9A27F}
.brun-zone .accroche-terroir{color:var(--creme)}
.brun-zone .terroir dd{color:#DCCBB4}
.brun-zone .terroir.actif h2{color:#E9A27F}
.brun-zone .assemblage{color:var(--creme)}
.brun-zone .bouton{background:var(--creme);color:var(--marron);border-color:var(--creme)}
@media(max-width:820px){
  .nav-mobile{grid-template-columns:repeat(5,1fr)}
  .nav-mobile a{font-size:10.5px;letter-spacing:.08em}
  .plein-ecran{min-height:92vh}.plein-moyen{min-height:78vh}
  .plein h1{font-size:40px}
  .plein-liens{flex-direction:column;gap:14px}
  .plein-liens a{font-size:17px}
  .brun{padding:80px var(--gouttiere)}
  .chapitre{grid-template-columns:1fr;min-height:0}
  .chapitre.inverse .chapitre-img{order:0}
  .chapitre-img{aspect-ratio:4/5}
  .chapitre-texte{padding:48px var(--gouttiere) 64px}
  .chapitre-texte p:last-child{font-size:18px}
  .brun-film video{margin-left:calc(-1 * var(--gouttiere));width:calc(100% + 2 * var(--gouttiere))}
  .brun-zone .regions-carte{margin-top:0}
}
@media(prefers-reduced-motion:reduce){.plein-img{animation:none}}
.chapitre:nth-child(2) .chapitre-img img{object-position:88% 40%}
.empreinte-grille{color:#52301F;text-shadow:-1.5px -1.5px 1px rgba(0,0,0,.55),1.5px 1.5px 1px rgba(255,214,180,.35)}
@media(max-width:820px){.haut-page{display:none}}

/* ================= Affinage : trame fine, typo plus légère, carte discrète, -10 % ================= */
.fond{opacity:1}
.regions{background:#F5F1E8}
.regions-carte{background:#FBF9F4;border-color:#E6DED0}
h2,.titre-bloc h1,.titre-bloc h2{font-weight:500;letter-spacing:.005em}
.liste-regions h3,.mini h3,.geste h3,.carte h3,.etapes h3,.terroir h2,.infos h2{font-weight:500}
.liste-regions.courte li{padding:11px 0;border-color:#E3DACA}
.liste-regions h3{font-size:21px}
.liste-regions .num{font-size:15px}
.liste-regions.courte p{font-size:15px;color:#7A7468}
.texte{color:#6A6457}
.carte-japon .terre{fill:#ECE5D7;stroke:#8C8673;stroke-width:.6}
.carte-japon .pastille{fill:var(--sceau);stroke:#FBF9F4;stroke-width:1.4}
.carte-japon .halo{fill:none;stroke:var(--sceau);stroke-width:.8}
.carte-japon .point.actif .halo{opacity:.7}
.carte-japon text{font-weight:500;font-size:17px;fill:#3A3830;stroke-width:4px;letter-spacing:.02em}
.carte-japon .n{font-size:13px}
.carte-japon .kanji-carte{fill:#EEE7DA}
.liste-regions li{transition:color .3s}
.liste-regions li:hover h3{color:var(--sceau)}
/* Effets au survol, plus soignés */
.bouton{position:relative;overflow:hidden;isolation:isolate;transition:color .45s cubic-bezier(.2,.7,.2,1),border-color .45s}
.bouton::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--olive-fonce);transform:scaleX(0);transform-origin:right;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.bouton:hover::before{transform:scaleX(1);transform-origin:left}
.bouton.clair::before{background:var(--olive)}
.bouton-creme::before,.brun-zone .bouton::before{background:#fff}
.lien-fleche{background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;border-bottom-color:rgba(81,79,60,.35);transition:background-size .5s cubic-bezier(.2,.7,.2,1),color .3s}
.lien-fleche:hover{background-size:100% 1px;color:var(--encre)}
.lien-fleche::after{display:inline-block;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.lien-fleche:hover::after{transform:translateX(5px)}
.mini{transition:border-color .4s,transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.mini:hover{transform:translateY(-4px);box-shadow:0 22px 40px -30px rgba(42,41,36,.45)}
/* Lien discret vers « Nos influences » */
.sur-nous{text-align:center;padding:10px var(--gouttiere) 90px}
/* Site 10 % plus petit sur ordinateur */
@media(min-width:821px){
  html{zoom:.9}
  .plein-ecran{min-height:calc(100vh / .9)}
  .plein-moyen{min-height:calc(86vh / .9)}
  .hero{min-height:calc((100vh - 110px) / .9)}
}

/* ================= Bandeau d'en-tête fin + site plus compact ================= */
@media(min-width:821px){
  html{zoom:.85}
  .entete,.entete.reduit{padding-block:14px;box-shadow:none}
  .entete.reduit{padding-block:10px}
  .logo{font-size:25px;letter-spacing:.44em}
  .entete.reduit .logo{font-size:21px}
  .entete nav{gap:26px}
  .entete nav a{font-size:12.5px;letter-spacing:.22em}
  .hero{min-height:calc((92vh - 60px) / .85)}
  .plein-ecran{min-height:calc(100vh / .85)}
  .plein-moyen{min-height:calc(86vh / .85)}
  .sceau-grand{width:70px;height:70px}
  .hero-marque{font-size:clamp(50px,4.6vw,80px)}
  .hero-accroche{font-family:var(--grave);font-weight:400;font-size:clamp(17px,1.35vw,22px);letter-spacing:.24em;text-transform:uppercase;color:var(--gris)}
}
.hero-accroche{font-family:var(--grave);font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
@media(max-width:820px){.hero-accroche{font-size:16px}}

/* Menu ordinateur : caractère japonais au-dessus de chaque mot (comme le menu téléphone) */
@media(min-width:821px){
  .entete nav a{display:flex;flex-direction:column;align-items:center;gap:3px;border-bottom:0;padding:2px 0}
  .entete nav a span{font-family:var(--titre);font-weight:600;font-size:17px;letter-spacing:0;line-height:1.1;color:var(--olive);transition:color .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
  .entete nav a:hover span{color:var(--sceau);transform:translateY(-2px)}
  .entete nav a.actif span{color:var(--sceau)}
  .entete nav a.actif{color:var(--encre)}
  body[data-page="exploration"] .entete:not(.reduit) nav a span,body[data-page="terroirs"] .entete:not(.reduit) nav a span{color:#E8DCC8}
}
@media(max-width:820px){.entete nav a span{display:none}}
/* Page Coffrets : motif de vagues en fond */
.coffrets,.offrir,.boite{background:var(--ivoire)}
.visuel{background:rgba(232,225,210,.7)}
@media(min-width:821px){.entete nav a.mobile-seul{display:none}}
/* Scènes illustrées (Culture, Ouverture, Curiosité) */
.influence-ill:has(.scene){aspect-ratio:4/3;padding:0;background:#E8E1D2}
.influence-ill .dessin.scene{width:100%;height:100%;position:relative}
.influence-ill:has(.scene) .grand-kanji{display:none}
.influence-texte .petit::after{content:""}
/* Photos de la page Influences */
.influence-ill.photo{aspect-ratio:4/3;background:#2A2924}
.influence-ill.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.influence:hover .influence-ill.photo img{transform:scale(1.04)}
.kanji-photo{position:absolute;top:18px;left:18px;writing-mode:vertical-rl;font-family:var(--titre);font-weight:600;font-size:22px;letter-spacing:.12em;color:#F7F1E6;padding:12px 8px;background:rgba(42,41,36,.38);backdrop-filter:blur(4px)}
/* Bol kintsugi en photo */
.influences-ill.photo{padding:0;overflow:hidden;aspect-ratio:4/3;border:0;box-shadow:0 30px 60px -40px rgba(42,41,36,.6)}
.influences-ill.photo img{width:100%;height:100%;object-fit:cover;display:block}
.chapitre-img img.sans-filtre{filter:none}
/* Fin de la page Influences : « Tester le vrai goût du Japon » */
.gout-japon{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:5vw;align-items:center;padding:90px 0 20px}
.gout-photos{position:relative;display:grid;grid-template-columns:3fr 2fr;gap:18px;align-items:end}
.gout-photos figure{margin:0;overflow:hidden}
.gout-photos img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.gout-photos figure:hover img{transform:scale(1.04)}
.gout-grande{aspect-ratio:4/5}
.gout-petite{aspect-ratio:3/4;margin-bottom:-40px!important;box-shadow:0 30px 50px -30px rgba(42,41,36,.55)}
.gout-texte{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.gout-texte h2{font-size:clamp(34px,3.4vw,54px)}
@media(max-width:820px){
  .gout-japon{grid-template-columns:1fr;gap:56px;padding-top:60px}
  .gout-petite{margin-bottom:-24px!important}
  .gout-texte .bouton{width:100%;justify-content:center}
}
/* Exploration : texte + « Pourquoi » */
.chapitre-texte p.chapitre-desc{font-size:19px;line-height:1.7;color:#EFE4D3;max-width:480px}
.pourquoi{display:flex;flex-direction:column;gap:6px;margin-top:8px;padding:16px 0 0;border-top:1px solid rgba(239,228,211,.22);font-size:16.5px;line-height:1.65;color:var(--creme-2);max-width:480px}
.pourquoi span{font-family:var(--grave);font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:#E9A27F}
/* Terroirs : paysage par région */
.terroir-paysage{margin:0 0 22px;overflow:hidden;aspect-ratio:16/8}
.terroir-paysage img{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.18) saturate(.9);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.terroir:hover .terroir-paysage img{transform:scale(1.04)}
.terroir{padding:40px 0}
.credits{font-size:12.5px;color:#BFAE96;line-height:1.7;margin-top:30px}
.credits a{color:inherit}
.brun-fin .credits{max-width:900px;margin:40px auto 0;color:#BFAE96}

/* ===== Retours : intro plus discrète, prix sur une ligne, film vertical sur téléphone ===== */
.intro{padding:72px 0 56px}
.intro-grille{grid-template-columns:1fr;justify-items:center;text-align:center}
.intro-ill{display:none}
.intro .titre-bloc{justify-content:center}
.intro .titre-bloc .vk{display:none}
.intro .titre-bloc>div{align-items:center}
.intro h2{font-size:clamp(26px,2.4vw,38px)}
.intro .texte{margin:0 auto;font-size:17px}
.prix{white-space:nowrap}
.mini-bas{flex-wrap:wrap;gap:10px 16px}
.apercu-image img{aspect-ratio:auto;height:auto}
.tete-coffrets .large img{aspect-ratio:auto;height:auto}
@media(max-width:820px){
  .intro{padding:52px 0 40px}
  .intro h2{font-size:26px}
  .film video,.brun-film video{aspect-ratio:9/16;max-height:78vh;width:auto;max-width:100%;margin:24px auto 0;display:block;object-fit:cover}
  .apercu-image,.tete-coffrets .large{margin-left:0;margin-right:0}
}

/* Coffrets — version téléphone : deux boîtes sur deux étages, photos entières */
.mobile-bloc{display:none}
@media(max-width:820px){
  .tete-coffrets .large.ordi-seul{display:none}
  .mobile-bloc{display:grid}
  .duo-etages{gap:14px;margin-top:22px}
  .duo-etages img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;display:block;box-shadow:0 24px 40px -30px rgba(42,41,36,.5)}
  .coffret .visuel img{aspect-ratio:auto;height:auto;object-fit:contain}
}

/* ===== Mise à jour : sceau 奥真 en image, petit bol, carte dessinée, usages, nom OKUMA ===== */
.sceau-img{display:block;width:auto!important;object-fit:contain}
.sceau-grand.sceau-img{height:104px!important}
.sceau-petit.sceau-img{height:58px!important}
.pied-sceau.sceau-img{height:44px!important;opacity:.95}
@media(max-width:820px){.sceau-grand.sceau-img{height:78px!important}}

/* En-tête : OKŪMA + petit bol à droite */
.logo{display:inline-flex;align-items:center;gap:.38em}
.logo-bol{height:.62em;width:auto;display:block;opacity:.88;transform:translateY(-.04em)}

/* Intro : illustration au trait à côté du titre */
.intro-grille{grid-template-columns:minmax(0,1fr) auto;justify-items:start;text-align:left;gap:56px;max-width:980px;margin:0 auto}
.intro-ill{display:block}
.intro .titre-bloc{justify-content:flex-start}
.intro .titre-bloc>div{align-items:flex-start}
.intro .texte{margin:0}
.dessin-ceremonie{width:min(300px,30vw);height:auto;display:block}
@media(max-width:820px){
  .intro-grille{grid-template-columns:1fr;justify-items:center;text-align:center;gap:26px}
  .intro .titre-bloc{justify-content:center}.intro .titre-bloc>div{align-items:center}
  .intro .texte{margin:0 auto}
  .intro-ill{order:-1}
  .dessin-ceremonie{width:210px}
}

/* Carte : visuel dessiné + numéros des sachets */
.regions-carte{background:transparent!important;border:0!important;padding:0!important}
.carte-visuel{position:relative;margin:0}
.carte-visuel img{width:100%;height:auto;display:block}
.carte-num{position:absolute;transform:translate(calc(-100% - 6px),-50%);font-family:var(--grave);font-size:clamp(11px,1.15vw,16px);letter-spacing:.06em;color:var(--sceau);line-height:1;transition:transform .25s,color .25s}
.carte-num.actif{transform:translate(calc(-100% - 6px),-50%) scale(1.25)}
.brun-zone .carte-visuel{background:#F2EDE2;border-radius:2px}
.liste-regions .sixieme .num{color:var(--olive)}
.liste-regions .sixieme h3{font-style:italic}

/* Accueil : chaque matcha a son rôle */
.usages{padding:110px 0;border-top:1px solid var(--ligne)}
.usages-tete{max-width:720px}
.usages-tete .texte{margin-top:18px}
.usages-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin:64px 0 50px;align-items:end}
.usage{margin:0;text-align:center}
.usage-img{height:240px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:26px;position:relative}
.usage-img::after{content:"";position:absolute;bottom:-6px;left:22%;right:22%;height:14px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(60,50,30,.16),transparent 70%);z-index:-1}
.usage-img img{max-height:100%;max-width:80%;width:auto;height:auto;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.usage:hover .usage-img img{transform:translateY(-6px)}
.usage h3{font-family:var(--titre);font-size:26px;margin:6px 0 10px}
.usage figcaption>p:not(.petit){color:var(--gris);max-width:260px;margin:0 auto;line-height:1.7}
.usage .petit{color:var(--sceau)}
@media(max-width:820px){
  .usages{padding:70px 0}
  .usages-grille{grid-template-columns:1fr;gap:46px;margin:44px 0 36px}
  .usage-img{height:190px}
}

/* Photos des coffrets entières */
.apercu-image img{aspect-ratio:auto!important;height:auto!important;object-fit:contain!important}
.communaute-image img{aspect-ratio:auto!important;height:auto!important;object-fit:contain}

/* Film vertical (champs) : partout en format portrait */
.film-video{aspect-ratio:9/16;height:auto;width:auto;max-width:100%;max-height:82vh;display:block;margin:0 auto;object-fit:cover;background:#1d1c17}
.film-grille{align-items:center}

/* Exploration : visuel « la profondeur d'un instant » */
.instant-visuel{display:block;width:min(440px,80vw);height:auto;margin:0 auto 54px;box-shadow:0 30px 60px -28px rgba(0,0,0,.6)}

/* Pied de page : OKŪMA beaucoup plus petit */
.pied-logo{font-size:clamp(26px,3vw,44px)!important;letter-spacing:.42em!important;padding-left:.42em!important;line-height:1!important;transform:none!important}
.pied-signature{padding:34px 0 30px!important}
.pied-devise{margin-top:12px!important;font-size:11px!important}

/* Influences : le nom OKUMA */
.nom-okuma{position:relative;padding:110px 0 100px;text-align:center;border-bottom:1px solid var(--ligne)}
.nom-cadre{max-width:900px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.nom-sceau.sceau-img{height:86px!important;margin-bottom:26px}
.nom-titre{font-family:var(--grave);font-weight:400;font-size:clamp(46px,6vw,78px);letter-spacing:.32em;padding-left:.32em;color:var(--olive);margin:0;line-height:1}
.nom-trait{display:block;width:80px;height:1px;background:var(--olive);opacity:.5;margin:28px 0}
.nom-intro{font-family:var(--titre);font-size:18px;line-height:1.7;max-width:460px;color:var(--encre);margin:0}
.nom-grille{display:grid;grid-template-columns:1fr 110px 1fr;align-items:start;gap:30px;margin:60px 0 50px;width:100%}
.nom-col{display:flex;flex-direction:column;align-items:center}
.nom-mot{font-family:var(--titre);font-weight:600;font-size:clamp(30px,3.4vw,44px);letter-spacing:.14em;color:var(--olive);margin:0}
.nom-mot span{font-size:.5em;color:var(--sceau);letter-spacing:0;vertical-align:middle;margin-left:.3em}
.nom-sens{font-family:var(--titre);font-size:16px;letter-spacing:.06em;color:var(--encre);margin:6px 0 18px}
.nom-picto{width:80px;height:60px;fill:none;stroke:var(--olive);stroke-width:1.2;color:var(--olive);margin-bottom:18px}
.nom-col p:last-child{font-family:var(--titre);font-size:16px;line-height:1.8;max-width:260px;color:var(--encre);margin:0}
.nom-centre{align-self:center;display:flex;justify-content:center;position:relative;height:100%}
.nom-centre::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--ligne)}
.nom-centre svg{position:relative;width:76px;height:76px;fill:none;stroke:var(--olive);stroke-width:1.2;background:var(--fond,#F2EDE2);align-self:center}
.nom-fin{border-top:1px solid var(--olive);padding-top:28px;width:min(620px,100%);font-family:var(--titre);font-size:17px;letter-spacing:.14em;color:var(--encre);display:flex;flex-direction:column;gap:10px;margin:0}
.nom-fin strong{font-weight:600;font-size:20px;color:var(--olive)}
@media(max-width:820px){
  .nom-okuma{padding:70px 0}
  .nom-grille{grid-template-columns:1fr;gap:34px;margin:44px 0 40px}
  .nom-centre{order:0;height:auto}.nom-centre::before{display:none}
  .nom-fin{font-size:14px;letter-spacing:.08em}
}
.film video.film-video,.brun-film video.film-video{aspect-ratio:9/16;height:min(76vh,680px);width:auto;max-width:100%;margin:24px auto 0;display:block;object-fit:cover}
@media(max-width:820px){.film video.film-video,.brun-film video.film-video{height:auto;width:min(100%,420px);margin-left:auto;margin-right:auto}}
.logo-bol{height:.78em}
.carte-num.haut{transform:translate(0,-100%)}
.carte-num.haut.actif{transform:translate(0,-100%) scale(1.25)}
.influence:first-child .influence-ill img{object-position:center 78%}