/* ==========================================================================
HEXOS · main.css
Six Tableaux, six Mondes.
========================================================================== */
/* --- 1. Variables (charte graphique) ------------------------------------- */
:root {
/* Palette principale */
--sumi: #0E0E0E; /* noir profond */
--washi: #F2EDE4; /* écru */
--yuki: #FFFFFF; /* blanc */
--sumi-60: #5A5A5A; /* gris */
/* Accent */
--hinomaru: #B91D1D; /* rouge japonais */
/* Couleurs de Monde */
--aizome: #1E3A5F; /* indigo Edo Era */
/* Typos */
--font-title: 'Saira Condensed', 'Arial Narrow', sans-serif;
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
--font-jp: 'Noto Sans JP', 'Yu Gothic', sans-serif;
/* Échelles */
--max-width: 1280px;
--gutter: clamp(1rem, 4vw, 2.5rem);
/* Transitions */
--ease: cubic-bezier(.2, .7, .2, 1);
}
/* --- 2. Reset minimal ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
/* --- 3. Base ------------------------------------------------------------- */
body {
font-family: var(--font-body);
font-weight: 400;
font-size: 16px;
line-height: 1.6;
color: var(--sumi);
background: var(--washi);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 {
font-family: var(--font-title);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.01em;
text-transform: uppercase;
}
h1 { font-size: clamp(2.5rem, 7vw, 5.5rem); font-weight: 900; }
h2 { font-size: clamp(2rem, 5vw, 3.5rem); }
h3 { font-size: clamp(1.4rem, 3vw, 2rem); }
.lang-jp { font-family: var(--font-jp); font-weight: 500; }
/* --- 4. Layout helpers --------------------------------------------------- */
.container {
width: 100%;
max-width: var(--max-width);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section { padding-block: clamp(4rem, 10vw, 8rem); }
/* --- 5. Header ----------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--washi);
border-bottom: 1px solid rgba(14, 14, 14, .08);
backdrop-filter: saturate(180%) blur(8px);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
padding-block: 1.1rem;
}
.site-logo {
font-family: var(--font-title);
font-weight: 900;
font-size: 1.6rem;
letter-spacing: 0.02em;
text-transform: uppercase;
display: flex;
align-items: center;
}
/* Logo (SVG par défaut, PNG en fallback, custom logo WP en priorité).
Le SVG est vectoriel : transparent natif, infiniment scalable.
Ratio ~4.75:1 → on contraint la hauteur, la largeur suit. */
.site-logo img,
.site-logo__img,
.custom-logo {
height: 36px;
width: auto;
max-width: none;
display: block;
}
@media (max-width: 600px) {
.site-logo img,
.site-logo__img,
.custom-logo { height: 28px; }
}
.primary-nav ul {
display: flex;
gap: clamp(1rem, 3vw, 2.5rem);
align-items: center;
}
.primary-nav a {
font-family: var(--font-title);
font-weight: 500;
font-size: .95rem;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: opacity .2s var(--ease);
}
.primary-nav a:hover { opacity: .55; }
/* --- Icône Mon compte dans le header ----------------------------------- */
.site-account {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
color: var(--sumi);
text-decoration: none;
border: 1px solid transparent;
border-radius: 50%;
transition: border-color .2s var(--ease), color .2s var(--ease);
flex-shrink: 0;
margin-right: 4px;
}
.site-account:hover {
color: var(--hinomaru);
border-color: rgba(185, 29, 29, .25);
}
.site-account__icon {
width: 22px;
height: 22px;
display: block;
}
/* Petit point rouge pour signaler que l'utilisateur est connecté */
.site-account__dot {
position: absolute;
top: 8px;
right: 8px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--hinomaru);
}
/* --- Icône panier dans le header --------------------------------------- */
.site-cart {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
color: var(--sumi);
text-decoration: none;
border: 1px solid transparent;
border-radius: 50%;
transition: border-color .2s var(--ease), color .2s var(--ease);
flex-shrink: 0;
}
.site-cart:hover {
color: var(--hinomaru);
border-color: rgba(185, 29, 29, .25);
}
.site-cart__icon {
width: 22px;
height: 22px;
display: block;
}
/* Badge compteur · cercle rouge en haut-droite */
.site-cart__count {
position: absolute;
top: -2px;
right: -2px;
min-width: 20px;
height: 20px;
padding: 0 5px;
border-radius: 999px;
background: var(--hinomaru);
color: var(--washi);
font-family: var(--font-title);
font-weight: 700;
font-size: .7rem;
line-height: 20px;
text-align: center;
letter-spacing: 0;
/* Petite anim douce quand le badge apparaît / change (pop subtil) */
animation: site-cart-pop .35s var(--ease);
}
@keyframes site-cart-pop {
0% { transform: scale(.4); opacity: 0; }
60% { transform: scale(1.15); opacity: 1; }
100% { transform: scale(1); }
}
/* --- 6. Hero ------------------------------------------------------------- */
.hero {
min-height: 90vh;
display: grid;
place-items: center;
text-align: center;
background: var(--washi);
position: relative;
overflow: hidden;
}
/* Mode vidéo · texte clair sur fond sombre */
.hero--has-video {
color: var(--washi);
}
.hero--has-video .hero__eyebrow,
.hero--has-video .hero__lead {
color: rgba(242, 237, 228, .85);
}
.hero--has-video .hero__title em {
color: var(--washi);
}
.hero--has-video .btn {
background: var(--hinomaru);
color: var(--washi);
border-color: var(--hinomaru);
}
.hero--has-video .btn:hover {
background: var(--washi);
color: var(--sumi);
border-color: var(--washi);
}
/* Vidéo de fond · couvre tout l'espace, dessous le contenu */
.hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}
.hero__video-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
to bottom,
rgba(14, 14, 14, .5) 0%,
rgba(14, 14, 14, .35) 50%,
rgba(14, 14, 14, .65) 100%
);
}
.hero--has-video .hero__inner {
position: relative;
z-index: 2;
}
/* Sur mobile : la vidéo peut consommer beaucoup de bande passante.
On peut ajouter une media query pour la cacher si besoin :
@media (max-width: 600px) { .hero__video { display: none; } } */
.hero__inner { max-width: 880px; }
.hero__eyebrow {
font-family: var(--font-title);
font-size: .9rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--sumi-60);
margin-bottom: 1.5rem;
}
.hero__title {
margin-bottom: 1.5rem;
}
.hero__title em {
font-style: italic;
color: var(--hinomaru);
}
.hero__lead {
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
color: var(--sumi-60);
max-width: 560px;
margin: 0 auto 2.5rem;
}
/* --- 7. Boutons ---------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: 1rem 2rem;
font-family: var(--font-title);
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.08em;
border: 2px solid var(--sumi);
background: var(--sumi);
color: var(--yuki);
transition: all .25s var(--ease);
}
.btn:hover { background: transparent; color: var(--sumi); }
.btn--ghost { background: transparent; color: var(--sumi); }
.btn--ghost:hover { background: var(--sumi); color: var(--yuki); }
.btn--accent { background: var(--hinomaru); border-color: var(--hinomaru); }
.btn--accent:hover { background: transparent; color: var(--hinomaru); }
/* --- 8. Sections lore ---------------------------------------------------- */
.manifesto {
background: var(--sumi);
color: var(--washi);
}
.manifesto__title {
color: var(--washi);
margin-bottom: 3rem;
text-align: center;
}
.manifesto__text {
max-width: 720px;
margin: 0 auto;
font-size: clamp(1.05rem, 1.5vw, 1.2rem);
line-height: 1.75;
}
.manifesto__text p + p { margin-top: 1.5rem; }
.manifesto__text strong { color: var(--yuki); font-weight: 500; }
/* --- 9. Grille des Mondes ------------------------------------------------ */
.worlds {
background: var(--washi);
}
.worlds__eyebrow {
text-align: center;
font-family: var(--font-title);
font-size: .85rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--hinomaru);
margin-bottom: 1rem;
}
.worlds__title { text-align: center; margin-bottom: 4rem; }
.worlds__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem;
}
.world-card {
aspect-ratio: 3 / 4;
background: var(--sumi);
color: var(--washi);
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform .3s var(--ease);
cursor: pointer;
position: relative;
overflow: hidden;
text-decoration: none;
}
.world-card:hover { transform: translateY(-4px); }
.world-card:focus { outline: 2px solid var(--hinomaru); outline-offset: 2px; }
.world-card--active { background-color: var(--aizome); }
.world-card--coming { background-color: var(--sumi); }
.world-card--locked {
background-color: rgba(14,14,14,.08);
color: var(--sumi-60);
cursor: default;
}
.world-card--locked:hover { transform: none; }
/* Cards qui ont une image de fond · l'image couvre, et un overlay
sombre garantit la lisibilité du numéro et du nom par-dessus. */
.world-card--has-img {
background-size: cover;
background-position: center;
}
.world-card--has-img::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(14, 14, 14, .85) 0%,
rgba(14, 14, 14, .35) 50%,
rgba(14, 14, 14, .15) 100%
);
transition: background .3s var(--ease);
z-index: 0;
}
.world-card--has-img:hover::before {
background: linear-gradient(
to top,
rgba(14, 14, 14, .75) 0%,
rgba(14, 14, 14, .25) 50%,
rgba(14, 14, 14, .05) 100%
);
}
/* Pour que numéro et texte passent par-dessus l'overlay */
.world-card--has-img > * {
position: relative;
z-index: 1;
}
/* Cards "coming" (designs prêts mais pas encore en vente) · indication subtile */
.world-card--coming.world-card--has-img::after {
content: "BIENTÔT";
position: absolute;
top: 1rem;
right: 1rem;
z-index: 2;
background: var(--hinomaru);
color: var(--washi);
font-family: var(--font-title);
font-size: .65rem;
font-weight: 700;
letter-spacing: 0.2em;
padding: .35rem .6rem;
}
/* ----- Cartes "scellées" sur l'accueil · Tableaux 03 à 06 ----- */
.world-card--sealed {
background-color: var(--sumi);
color: var(--washi);
cursor: default;
overflow: hidden;
/* Texture pointillée subtile en arrière-plan (rivets de sceau) */
background-image:
radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0);
background-size: 16px 16px;
}
.world-card--sealed:hover { transform: none; }
.world-card--sealed::after {
content: "SCELLÉ";
position: absolute;
top: 1rem;
right: 1rem;
z-index: 3;
background: var(--hinomaru);
color: var(--washi);
font-family: var(--font-title);
font-size: .65rem;
font-weight: 700;
letter-spacing: 0.25em;
padding: .35rem .6rem;
}
.world-card--sealed > * {
position: relative;
z-index: 2;
}
/* Le bloc "sceau" centré (hexagone + numéro + kanji) */
.world-card__seal {
position: absolute;
inset: 0;
display: grid;
place-items: center;
z-index: 1;
}
.world-card__seal-hex {
position: absolute;
width: 70%;
max-width: 220px;
height: auto;
color: var(--washi);
opacity: 0.4;
}
.world-card__seal-num {
position: relative;
z-index: 2;
font-family: var(--font-title);
font-weight: 900;
font-size: clamp(3rem, 8vw, 5rem);
line-height: 1;
color: var(--washi);
text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.world-card__seal-kanji {
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
font-size: .9rem;
letter-spacing: 0.3em;
color: var(--hinomaru);
opacity: 0.85;
z-index: 2;
}
/* Sur les cartes scellées, on cache le numéro / nom legacy
(le numéro est déjà dans le sceau central) */
.world-card--sealed .world-card__number,
.world-card--sealed > div:not(.world-card__seal) {
display: none;
}
.world-card__number {
font-family: var(--font-title);
font-weight: 900;
font-size: 4rem;
line-height: 1;
letter-spacing: -0.02em;
}
.world-card__name {
font-family: var(--font-title);
font-size: 2rem;
text-transform: uppercase;
margin-bottom: .25rem;
}
.world-card__status {
font-size: .8rem;
letter-spacing: 0.2em;
text-transform: uppercase;
opacity: .7;
}
/* --- 10. Footer ---------------------------------------------------------- */
.site-footer {
background: var(--sumi);
color: var(--washi);
padding-block: 4rem 2rem;
}
.site-footer__inner {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
margin-bottom: 3rem;
}
@media (min-width: 768px) {
.site-footer__inner {
grid-template-columns: 2fr 1fr 1fr;
}
}
.site-footer h4 {
font-size: 1rem;
letter-spacing: 0.1em;
margin-bottom: 1rem;
color: var(--yuki);
}
.site-footer ul li { margin-bottom: .5rem; }
.site-footer a { transition: opacity .2s; }
.site-footer a:hover { opacity: .6; }
/* Liens légaux · ligne dédiée juste avant le copyright */
.site-footer__legal {
border-top: 1px solid rgba(255,255,255,.1);
padding-top: 2rem;
margin-bottom: 1rem;
display: flex;
justify-content: center;
gap: .9rem;
flex-wrap: wrap;
font-family: var(--font-title);
font-size: .8rem;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.site-footer__legal a {
color: rgba(242,237,228,.5);
transition: color .2s var(--ease);
}
.site-footer__legal a:hover {
color: var(--washi);
}
.site-footer__legal .dot { color: rgba(242,237,228,.3); }
.site-footer__bottom {
padding-top: 1rem;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
font-size: .85rem;
color: var(--sumi-60);
}
/* ==========================================================================
PAGES LÉGALES · Mentions, CGV, Confidentialité
Mise en page longue lecture, sobre, hiérarchique.
========================================================================== */
.legal-page {
padding-block: clamp(3rem, 6vw, 5rem);
}
.legal-page .container { max-width: 820px; }
.legal-page__title {
font-size: clamp(2.2rem, 5vw, 3.5rem);
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--sumi);
}
.legal-page .entry-content {
font-size: 1rem;
line-height: 1.75;
color: var(--sumi);
}
.legal-page .entry-content h2 {
font-size: clamp(1.4rem, 2.5vw, 1.75rem);
margin: 2.5rem 0 1rem;
padding-bottom: .5rem;
border-bottom: 1px solid rgba(14,14,14,.1);
}
.legal-page .entry-content h3 {
font-size: 1.2rem;
margin: 1.5rem 0 .75rem;
}
.legal-page .entry-content p { margin-bottom: 1.1rem; }
.legal-page .entry-content em { color: var(--sumi-60); font-style: italic; }
.legal-page .entry-content strong { font-weight: 600; }
.legal-page .entry-content ul,
.legal-page .entry-content ol {
margin: 0 0 1.25rem;
padding-left: 1.5rem;
}
.legal-page .entry-content li { margin-bottom: .5rem; }
.legal-page .entry-content a {
color: var(--hinomaru);
border-bottom: 1px solid rgba(185, 29, 29, .3);
padding-bottom: 1px;
transition: border-color .2s var(--ease);
}
.legal-page .entry-content a:hover {
border-color: var(--hinomaru);
}
/* --- 11. Mobile ---------------------------------------------------------- */
/* Bouton burger · masqué par défaut, visible sur mobile uniquement */
.site-header__right {
display: flex;
align-items: center;
gap: 1rem;
}
.mobile-menu-toggle {
display: none; /* Caché sur desktop */
background: transparent;
border: 0;
cursor: pointer;
padding: .4rem;
width: 44px; /* tap target accessible (Apple HIG / Material) */
height: 44px;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
}
.mobile-menu-toggle__bar {
display: block;
height: 2px;
width: 100%;
background: var(--sumi);
transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__bar:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
@media (max-width: 768px) {
.primary-nav {
display: none; /* Remplacé par le menu mobile en slide */
}
.mobile-menu-toggle {
display: flex; /* Affiche le burger uniquement sur mobile */
}
}
/* ----- Panneau menu mobile · slide depuis la droite ----- */
.mobile-menu {
position: fixed;
inset: 0;
z-index: 999;
opacity: 0;
pointer-events: none;
transition: opacity .25s var(--ease);
}
.mobile-menu.is-open {
opacity: 1;
pointer-events: auto;
}
.mobile-menu[hidden] {
display: none;
}
.mobile-menu__overlay {
position: absolute;
inset: 0;
background: rgba(14, 14, 14, .55);
backdrop-filter: blur(2px);
}
.mobile-menu__panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(380px, 88vw);
background: var(--washi);
box-shadow: -20px 0 60px rgba(0, 0, 0, .25);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform .35s var(--ease);
overflow-y: auto;
}
.mobile-menu.is-open .mobile-menu__panel {
transform: translateX(0);
}
.mobile-menu__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 1.5rem 1rem;
border-bottom: 1px solid rgba(14,14,14,.08);
}
.mobile-menu__eyebrow {
font-family: var(--font-jp);
font-size: .8rem;
letter-spacing: 0.25em;
color: var(--hinomaru);
}
.mobile-menu__close {
background: transparent;
border: 0;
font-size: 2rem;
line-height: 1;
color: var(--sumi);
cursor: pointer;
padding: 0;
width: 32px;
height: 32px;
transition: color .2s var(--ease);
}
.mobile-menu__close:hover {
color: var(--hinomaru);
}
.mobile-menu__nav {
flex: 1;
padding: 1.5rem;
}
.mobile-menu__list {
list-style: none;
padding: 0;
margin: 0;
}
.mobile-menu__list li {
border-bottom: 1px solid rgba(14,14,14,.06);
}
.mobile-menu__list li:last-child {
border-bottom: 0;
}
.mobile-menu__list a {
display: block;
padding: 1rem 0;
font-family: var(--font-title);
font-weight: 700;
font-size: 1.25rem;
color: var(--sumi);
letter-spacing: 0.02em;
text-decoration: none;
transition: color .2s var(--ease), padding-left .25s var(--ease);
}
.mobile-menu__list a:hover,
.mobile-menu__list a:focus {
color: var(--hinomaru);
padding-left: .35rem;
}
.mobile-menu__list .current-menu-item a,
.mobile-menu__list .current_page_item a {
color: var(--hinomaru);
}
.mobile-menu__footer {
padding: 1.5rem;
border-top: 1px solid rgba(14,14,14,.08);
font-size: .85rem;
color: var(--sumi-60);
}
.mobile-menu__tagline {
font-family: var(--font-title);
font-weight: 700;
color: var(--sumi);
margin-bottom: .75rem;
letter-spacing: 0.05em;
}
.mobile-menu__contact a,
.mobile-menu__social a {
color: var(--sumi-60);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color .2s var(--ease), color .2s var(--ease);
}
.mobile-menu__contact a:hover,
.mobile-menu__social a:hover {
color: var(--hinomaru);
border-bottom-color: var(--hinomaru);
}
.mobile-menu__contact {
margin-bottom: .35rem;
}
/* Body lock quand le menu mobile est ouvert */
body.mobile-menu-locked {
overflow: hidden;
}
/* ==========================================================================
PAGES WOOCOMMERCE · Panier, Validation, Mon compte
========================================================================== */
/* Wrapper commun aux 3 pages */
.woo-page {
padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 8vw, 6rem);
position: relative;
}
/* Texture washi · papier japonais subtil en fond.
On l'applique via ::before pour qu'elle soit "derrière" le contenu
sans interférer avec les pointer-events. Tile 240×240, opacité douce. */
.woo-page--washi::before {
content: "";
position: absolute;
inset: 0;
background-image: url("../img/washi-texture.png");
background-repeat: repeat;
background-size: 240px 240px;
opacity: .6;
pointer-events: none;
z-index: 0;
}
.woo-page > .container {
position: relative;
z-index: 1;
}
/* ==========================================================================
C1 · SCEAU HI-NO-MARU sur la page de confirmation
Soleil rouge qui apparaît en grand + hexagone blanc qui se trace dessus
+ caption japonaise. Effet "sceau qui s'imprime" pour célébrer la commande.
========================================================================== */
.woo-page--thankyou .woo-page__title {
color: var(--hinomaru);
}
.thankyou-seal {
position: relative;
width: 220px;
height: 220px;
margin: 2rem auto 1.5rem;
display: grid;
place-items: center;
}
/* Le grand soleil rouge · zoom + fade in (effet d'impression) */
.thankyou-seal__sun {
position: absolute;
inset: 0;
display: grid;
place-items: center;
transform: scale(.2);
opacity: 0;
animation: thankyou-sun-stamp 1s var(--ease) forwards;
animation-delay: .25s;
/* Petite lueur autour */
filter: drop-shadow(0 0 30px rgba(185, 29, 29, .35));
}
@keyframes thankyou-sun-stamp {
0% { transform: scale(.2); opacity: 0; }
60% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
/* L'hexagone qui se trace par-dessus le soleil */
.thankyou-seal__hex {
position: absolute;
inset: 0;
display: grid;
place-items: center;
z-index: 2;
}
.thankyou-seal__hex polygon {
stroke-dasharray: 480;
stroke-dashoffset: 480;
animation: thankyou-hex-draw 1.4s var(--ease) forwards;
animation-delay: 1.1s;
}
@keyframes thankyou-hex-draw {
0% { stroke-dashoffset: 480; }
99% { stroke-dashoffset: 0; stroke-dasharray: 480; }
100% { stroke-dashoffset: 0; stroke-dasharray: none; }
}
.thankyou-seal__caption {
position: relative;
z-index: 3;
color: var(--washi);
font-size: 1.4rem;
text-align: center;
opacity: 0;
animation: thankyou-caption-in .8s var(--ease) forwards;
animation-delay: 2.4s;
text-shadow: 0 1px 8px rgba(0,0,0,.3);
}
@keyframes thankyou-caption-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Message sous le sceau */
.thankyou-message {
text-align: center;
max-width: 540px;
margin: 0 auto clamp(2rem, 4vw, 3rem);
color: var(--sumi-60);
font-size: 1.05rem;
line-height: 1.7;
opacity: 0;
animation: thankyou-caption-in .8s var(--ease) forwards;
animation-delay: 2.6s;
}
/* CTA "Découvrir les autres Mondes" en bas */
.thankyou-cta {
text-align: center;
margin-top: 1rem;
}
.thankyou-cta__line {
font-family: var(--font-title);
font-size: 1.1rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--sumi-60);
margin-bottom: 1.25rem;
}
/* ==========================================================================
B5 · Animation hexagonale pendant la soumission de commande
On override le loader Woo (.blockUI overlay) avec un hexagone Hexos
qui se trace en boucle. Apparaît quand le form checkout est en cours
de soumission (Woo ajoute la classe `processing` automatiquement).
========================================================================== */
/* Cache l'image de loader par défaut Woo (gif spinner) */
.blockUI.blockOverlay::before,
.blockUI.blockOverlay {
background-image: none !important;
}
/* Notre overlay custom Hexos */
.blockUI.blockOverlay,
.wc-block-components-loading-mask::before {
background: rgba(242, 237, 228, .92) !important;
backdrop-filter: blur(2px);
}
/* Hexagone qui se trace, centré dans l'overlay */
.blockUI.blockOverlay::after,
.wc-block-components-loading-mask::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
margin: -40px 0 0 -40px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: contain;
/* Pulse léger en plus du tracé */
animation: hexos-loader-pulse 2.4s ease-in-out infinite;
}
@keyframes hexos-loader-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.08); opacity: .85; }
}
/* ==========================================================================
STEPPER HEXAGONAL · 3 étapes du tunnel d'achat (Panier · Commande · Confirmation)
========================================================================== */
.checkout-stepper {
margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.checkout-stepper__list {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0;
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 560px;
position: relative;
}
.checkout-stepper__step {
flex: 1;
text-align: center;
position: relative;
min-width: 0;
}
/* Lignes pointillées entre les hexagones */
.checkout-stepper__step:not(:last-child)::after {
content: "";
position: absolute;
top: 24px;
left: calc(50% + 28px);
right: calc(-50% + 28px);
height: 1px;
background: repeating-linear-gradient(
to right,
rgba(14,14,14,.25) 0 4px,
transparent 4px 8px
);
z-index: 1;
}
.checkout-stepper__step--done:not(:last-child)::after {
background: repeating-linear-gradient(
to right,
var(--sumi) 0 4px,
transparent 4px 8px
);
}
.checkout-stepper__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: .65rem;
text-decoration: none;
color: inherit;
}
a.checkout-stepper__inner:hover .checkout-stepper__hex polygon {
transform-origin: center;
transform: scale(1.05);
}
.checkout-stepper__hex {
position: relative;
width: 48px;
height: 48px;
z-index: 2;
}
.checkout-stepper__hex svg {
display: block;
width: 100%;
height: 100%;
}
.checkout-stepper__hex polygon {
fill: var(--washi);
stroke: rgba(14,14,14,.25);
stroke-width: 2;
transition: fill .35s var(--ease), stroke .35s var(--ease), transform .25s var(--ease);
}
.checkout-stepper__step--done .checkout-stepper__hex polygon {
fill: var(--sumi);
stroke: var(--sumi);
}
.checkout-stepper__step--current .checkout-stepper__hex polygon {
fill: var(--hinomaru);
stroke: var(--hinomaru);
/* Lueur douce autour de l'hexagone actif */
filter: drop-shadow(0 0 12px rgba(185, 29, 29, .35));
}
/* Pulse léger sur l'hexagone actif */
.checkout-stepper__step--current .checkout-stepper__hex {
animation: stepper-pulse 2.4s ease-in-out infinite;
}
@keyframes stepper-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.checkout-stepper__num {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--font-title);
font-weight: 700;
font-size: .95rem;
color: var(--sumi);
transition: color .35s var(--ease);
z-index: 1;
}
.checkout-stepper__step--done .checkout-stepper__num,
.checkout-stepper__step--current .checkout-stepper__num {
color: var(--washi);
}
.checkout-stepper__label {
font-family: var(--font-title);
font-size: .75rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--sumi-60);
transition: color .35s var(--ease);
}
.checkout-stepper__step--current .checkout-stepper__label {
color: var(--hinomaru);
font-weight: 700;
}
.checkout-stepper__step--done .checkout-stepper__label {
color: var(--sumi);
}
@media (max-width: 500px) {
.checkout-stepper__label {
font-size: .65rem;
letter-spacing: 0.15em;
}
.checkout-stepper__hex { width: 40px; height: 40px; }
.checkout-stepper__step:not(:last-child)::after { top: 20px; }
}
/* ==========================================================================
BARRE DE PROGRESSION DU MONDE · "X / 6 Tableaux d'Edo Era"
========================================================================== */
.world-progress {
text-align: center;
margin: 1rem auto 0;
max-width: 480px;
padding: 1.5rem 1.5rem 1.75rem;
background: var(--yuki);
border: 1px solid rgba(14,14,14,.06);
}
.world-progress__label {
font-family: var(--font-title);
font-size: .75rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--sumi-60);
margin-bottom: .5rem;
}
.world-progress__count {
font-family: var(--font-title);
font-size: clamp(1.4rem, 3vw, 1.9rem);
font-weight: 700;
color: var(--sumi);
margin-bottom: 1.25rem;
line-height: 1.15;
}
.world-progress__count .world-progress__world {
display: block;
font-size: .65em;
color: var(--hinomaru);
letter-spacing: 0.15em;
margin-top: .25rem;
}
.world-progress__bar {
height: 4px;
background: rgba(14,14,14,.08);
overflow: hidden;
margin: 0 auto 1rem;
position: relative;
}
.world-progress__fill {
height: 100%;
background: linear-gradient(to right, var(--hinomaru), #d33b3b);
transition: width 1s var(--ease);
/* Animation d'entrée à l'arrivée sur la page */
animation: world-progress-grow 1.2s var(--ease);
transform-origin: left;
}
@keyframes world-progress-grow {
from { width: 0 !important; }
}
.world-progress__caption {
font-size: .85rem;
color: var(--sumi-60);
font-style: italic;
}
/* ==========================================================================
A5 · « CONTINUER LE VOYAGE » · cross-sell sur la page panier
Liste les autres Tableaux du Monde qui ne sont pas encore dans le panier.
========================================================================== */
.continue-journey {
margin: 0 auto;
max-width: 880px;
text-align: center;
}
.continue-journey__eyebrow {
font-family: var(--font-title);
font-size: .8rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--hinomaru);
margin-bottom: .65rem;
}
.continue-journey__title {
font-size: clamp(1.4rem, 3vw, 2rem);
margin-bottom: 2rem;
}
.continue-journey__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
text-align: left;
}
@media (min-width: 600px) { .continue-journey__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .continue-journey__grid { grid-template-columns: repeat(3, 1fr); } }
.continue-journey__card {
position: relative;
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: var(--yuki);
border: 1px solid rgba(14,14,14,.08);
text-decoration: none;
color: inherit;
transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.continue-journey__card:hover {
transform: translateY(-3px);
border-color: var(--hinomaru);
}
.continue-journey__media {
flex-shrink: 0;
width: 80px;
height: 100px;
background-color: var(--aizome);
background-size: cover;
background-position: center;
}
.continue-journey__info {
flex: 1;
min-width: 0;
}
.continue-journey__tableau {
font-family: var(--font-title);
font-size: .7rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--hinomaru);
margin-bottom: .25rem;
}
.continue-journey__name {
font-family: var(--font-title);
font-size: 1.2rem;
font-weight: 700;
margin-bottom: .25rem;
color: var(--sumi);
}
.continue-journey__price {
font-family: var(--font-title);
font-weight: 700;
color: var(--sumi);
margin: 0;
font-size: .95rem;
}
.continue-journey__price del { color: var(--sumi-60); font-weight: 400; opacity: .6; margin-right: .35rem; }
.continue-journey__arrow {
position: absolute;
right: 1rem;
bottom: 1rem;
color: var(--sumi-60);
font-size: 1.2rem;
transition: transform .25s var(--ease), color .25s var(--ease);
}
.continue-journey__card:hover .continue-journey__arrow {
transform: translateX(4px);
color: var(--hinomaru);
}
/* ==========================================================================
SÉPARATEUR HEXAGONAL · à la place des
classiques
========================================================================== */
.hex-separator {
border: 0;
height: 1px;
background: linear-gradient(to right, transparent, rgba(14,14,14,.18) 30%, rgba(14,14,14,.18) 70%, transparent);
position: relative;
margin: clamp(2.5rem, 5vw, 4rem) auto;
max-width: 600px;
overflow: visible;
}
.hex-separator::after {
content: "⬡";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--washi);
color: var(--hinomaru);
padding: 0 .85rem;
font-size: 1.4rem;
line-height: 1;
}
/* Sur fond Yuki (blanc pur) plutôt que Washi (écru) */
.woo-page--washi .hex-separator::after {
background: var(--washi);
}
.woo-page__inner { max-width: 1200px; }
.woo-page__header {
margin-bottom: clamp(2rem, 4vw, 3rem);
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(14, 14, 14, .1);
}
.woo-page__eyebrow {
font-family: var(--font-title);
font-size: .85rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--hinomaru);
margin-bottom: .5rem;
}
.woo-page__title {
font-size: clamp(2rem, 5vw, 3.5rem);
margin-bottom: 0;
}
/* --- Notices Woo (success / error / info) ----------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper > * {
background: var(--yuki);
border-left: 3px solid var(--hinomaru);
color: var(--sumi);
padding: 1rem 1.25rem;
margin-bottom: 1.5rem;
list-style: none;
font-size: .95rem;
}
.woocommerce-message { border-left-color: #2d8c3d; }
.woocommerce-info { border-left-color: var(--aizome); }
.woocommerce-error { border-left-color: var(--hinomaru); }
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
color: var(--hinomaru);
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
margin-left: .25rem;
}
/* --- Boutons génériques Woo · couvre les 2 systèmes ------------------- */
/* Système legacy (shortcodes [woocommerce_cart]) : .button / .button.alt
Système moderne (Cart Blocks Gutenberg) : .wc-block-* / .wp-block-button__link
On cible les deux pour que la page reste cohérente quel que soit le système. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-page a.button,
.woocommerce-page button.button,
.wc-block-components-button,
button.wc-block-components-button,
a.wc-block-components-button,
.wp-block-button__link {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: 1rem 2rem;
background: var(--sumi);
color: var(--washi);
border: 2px solid var(--sumi);
font-family: var(--font-title);
font-weight: 700;
font-size: .95rem;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 0;
cursor: pointer;
transition: all .25s var(--ease);
text-decoration: none;
line-height: 1.2;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.wc-block-components-button:hover,
button.wc-block-components-button:hover,
a.wc-block-components-button:hover,
.wp-block-button__link:hover {
background: transparent;
color: var(--sumi);
}
/* Boutons primaires/principaux (validation, commande) : rouge Hi-no-maru.
Couvre les Cart Blocks (wc-block-cart__submit-button, etc.). */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.checkout-button,
.woocommerce-page #place_order,
.woocommerce-page .checkout-button,
.wc-block-cart__submit-button,
.wc-block-cart__submit-container .wc-block-components-button,
.wc-block-checkout-place-order-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.wc-block-components-checkout-place-order-button,
button.wc-block-components-button.contained,
.wc-block-components-button.contained {
background: var(--hinomaru);
color: var(--washi);
border-color: var(--hinomaru);
width: auto;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.button.checkout-button:hover,
.woocommerce-page #place_order:hover,
.woocommerce-page .checkout-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-container .wc-block-components-button:hover,
.wc-block-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button:hover,
button.wc-block-components-button.contained:hover,
.wc-block-components-button.contained:hover {
background: transparent;
color: var(--hinomaru);
}
/* Le span/label à l'intérieur du bouton block doit hériter de la couleur */
.wc-block-components-button .wc-block-components-button__text,
.wp-block-button__link .wp-block-button__text {
color: inherit;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
}
/* --- Tableau du panier ------------------------------------------------ */
.woocommerce-cart .shop_table,
.woocommerce-cart table.cart {
width: 100%;
border-collapse: collapse;
background: transparent;
margin-bottom: 2rem;
}
.woocommerce-cart .shop_table th {
font-family: var(--font-title);
font-size: .8rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--sumi-60);
padding: 1rem .75rem;
text-align: left;
border-bottom: 1px solid rgba(14,14,14,.15);
background: transparent;
}
.woocommerce-cart .shop_table td {
padding: 1.5rem .75rem;
border-bottom: 1px solid rgba(14,14,14,.08);
vertical-align: middle;
background: transparent;
}
.woocommerce-cart .shop_table .product-thumbnail img {
width: 80px;
height: 100px;
object-fit: cover;
}
.woocommerce-cart .shop_table .product-name a {
color: var(--sumi);
font-family: var(--font-title);
font-weight: 700;
font-size: 1.1rem;
text-decoration: none;
}
.woocommerce-cart .shop_table .product-name a:hover { color: var(--hinomaru); }
.woocommerce-cart .shop_table .variation {
font-size: .85rem;
color: var(--sumi-60);
margin-top: .35rem;
}
.woocommerce-cart .shop_table .variation dt,
.woocommerce-cart .shop_table .variation dd {
display: inline;
margin: 0;
padding: 0;
}
.woocommerce-cart .shop_table .variation dt { font-weight: 500; margin-right: .25rem; }
.woocommerce-cart .shop_table .variation dd::after { content: ""; display: block; }
.woocommerce-cart .shop_table .product-price,
.woocommerce-cart .shop_table .product-subtotal {
font-family: var(--font-title);
font-weight: 700;
font-size: 1rem;
}
/* Champ quantité dans le panier */
.woocommerce-cart .shop_table .quantity .qty,
.quantity input.qty {
width: 70px;
padding: .65rem;
border: 1px solid rgba(14,14,14,.2);
background: var(--yuki);
text-align: center;
font-family: var(--font-title);
font-weight: 700;
border-radius: 0;
}
/* Bouton "Supprimer" du panier (croix) */
.woocommerce-cart .shop_table a.remove {
display: inline-grid;
place-items: center;
width: 28px;
height: 28px;
background: transparent;
color: var(--sumi-60);
font-size: 1.2rem;
text-decoration: none;
border: 1px solid rgba(14,14,14,.15);
border-radius: 50%;
transition: all .2s var(--ease);
}
.woocommerce-cart .shop_table a.remove:hover {
background: var(--hinomaru);
color: var(--washi);
border-color: var(--hinomaru);
}
/* Bouton "Mettre à jour le panier" + champ coupon */
.woocommerce-cart .actions {
padding-top: 1.5rem;
}
.woocommerce-cart .coupon { display: inline-flex; gap: .5rem; }
.woocommerce-cart .coupon input[type="text"] {
padding: 1rem;
border: 2px solid rgba(14,14,14,.2);
background: var(--yuki);
font-family: var(--font-body);
border-radius: 0;
}
/* --- Totaux du panier (à droite) ------------------------------------- */
.woocommerce-cart .cart-collaterals {
display: grid;
gap: 2rem;
margin-top: 2rem;
}
@media (min-width: 800px) {
.woocommerce-cart .cart-collaterals {
grid-template-columns: 1fr 1fr;
}
}
.woocommerce-cart .cart_totals {
background: var(--yuki);
padding: 1.75rem;
border: 1px solid rgba(14,14,14,.08);
}
.woocommerce-cart .cart_totals h2 {
font-size: 1.4rem;
margin-bottom: 1.25rem;
padding-bottom: .75rem;
border-bottom: 1px solid rgba(14,14,14,.1);
}
.woocommerce-cart .cart_totals table { width: 100%; border-collapse: collapse; }
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
padding: .75rem 0;
border-bottom: 1px solid rgba(14,14,14,.06);
text-align: left;
}
.woocommerce-cart .cart_totals table th {
font-family: var(--font-title);
font-size: .8rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--sumi-60);
font-weight: 500;
}
.woocommerce-cart .cart_totals table td {
font-family: var(--font-title);
font-weight: 700;
text-align: right;
}
.woocommerce-cart .cart_totals .order-total td {
font-size: 1.3rem;
color: var(--sumi);
}
.woocommerce-cart .wc-proceed-to-checkout {
margin-top: 1.5rem;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
width: 100%;
justify-content: center;
}
/* --- Checkout (validation de commande) ------------------------------- */
.woocommerce-checkout form.checkout {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
}
@media (min-width: 1000px) {
.woocommerce-checkout form.checkout {
grid-template-columns: 1.5fr 1fr;
}
}
.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details {
display: grid;
gap: 2rem;
}
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
font-family: var(--font-title);
font-size: 1.4rem;
margin-bottom: 1.5rem;
padding-bottom: .75rem;
border-bottom: 1px solid rgba(14,14,14,.1);
}
/* Champs de formulaire (input, select, textarea) */
.woocommerce form .form-row {
display: flex;
flex-direction: column;
margin-bottom: 1.25rem;
}
.woocommerce form .form-row label {
font-family: var(--font-title);
font-size: .8rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--sumi-60);
margin-bottom: .5rem;
}
.woocommerce form .form-row .required { color: var(--hinomaru); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="tel"],
.woocommerce form input[type="password"],
.woocommerce form select,
.select2-container .select2-selection {
padding: .9rem 1rem;
border: 2px solid rgba(14,14,14,.15);
background: var(--yuki);
font-family: var(--font-body);
font-size: .95rem;
color: var(--sumi);
border-radius: 0;
transition: border-color .2s var(--ease);
width: 100%;
height: auto;
box-sizing: border-box;
}
.woocommerce form .form-row input:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce form input:focus,
.woocommerce form select:focus {
outline: 0;
border-color: var(--sumi);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text {
border-color: var(--hinomaru);
}
/* Adapte le wrapper Select2 (utilisé pour pays / état) */
.select2-container--default .select2-selection--single {
height: auto;
padding: .9rem 1rem;
border: 2px solid rgba(14,14,14,.15);
background: var(--yuki);
border-radius: 0;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
padding: 0;
line-height: 1.4;
color: var(--sumi);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 100%;
top: 0;
right: .75rem;
}
/* Récap commande à droite (table .shop_table) */
.woocommerce-checkout-review-order {
background: var(--yuki);
padding: 1.75rem;
border: 1px solid rgba(14,14,14,.08);
align-self: start;
}
.woocommerce-checkout-review-order table.shop_table {
width: 100%;
border-collapse: collapse;
background: transparent;
}
.woocommerce-checkout-review-order table th,
.woocommerce-checkout-review-order table td {
padding: .75rem 0;
border-bottom: 1px solid rgba(14,14,14,.06);
text-align: left;
background: transparent;
font-size: .95rem;
}
.woocommerce-checkout-review-order table th {
font-family: var(--font-title);
font-size: .8rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--sumi-60);
font-weight: 500;
}
.woocommerce-checkout-review-order table td { text-align: right; font-family: var(--font-title); font-weight: 700; }
.woocommerce-checkout-review-order .order-total .amount { font-size: 1.3rem; }
/* Méthodes de paiement */
.woocommerce-checkout-payment {
background: var(--yuki);
padding: 1.75rem;
border: 1px solid rgba(14,14,14,.08);
margin-top: 1.5rem;
}
.woocommerce-checkout-payment ul.payment_methods {
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
border: 0;
}
.woocommerce-checkout-payment ul.payment_methods li {
padding: 1rem 0;
border-bottom: 1px solid rgba(14,14,14,.06);
background: transparent;
}
.woocommerce-checkout-payment ul.payment_methods li label {
font-family: var(--font-title);
font-weight: 500;
color: var(--sumi);
margin-left: .5rem;
}
.woocommerce-checkout-payment .payment_box {
background: rgba(14,14,14,.03);
padding: 1rem;
margin-top: .75rem;
font-size: .9rem;
color: var(--sumi-60);
border-left: 2px solid var(--hinomaru);
}
.woocommerce-checkout-payment #place_order {
width: 100%;
margin-top: 1rem;
justify-content: center;
}
/* CGV checkbox */
.woocommerce-terms-and-conditions-wrapper {
margin-bottom: 1rem;
font-size: .9rem;
}
/* Login lien en haut du checkout */
.woocommerce-form-login-toggle .woocommerce-info {
background: rgba(14,14,14,.03);
border-left-color: var(--aizome);
}
.woocommerce-form-login {
background: var(--yuki);
padding: 1.5rem;
border: 1px solid rgba(14,14,14,.08);
margin-bottom: 1.5rem;
}
/* --- Mon compte / dashboard ------------------------------------------ */
.woocommerce-account .woocommerce {
display: grid;
gap: 2.5rem;
grid-template-columns: 1fr;
}
@media (min-width: 900px) {
.woocommerce-account .woocommerce {
grid-template-columns: 250px 1fr;
}
}
.woocommerce-MyAccount-navigation ul {
list-style: none;
padding: 0;
margin: 0;
}
.woocommerce-MyAccount-navigation li {
border-bottom: 1px solid rgba(14,14,14,.08);
}
.woocommerce-MyAccount-navigation li a {
display: block;
padding: 1rem 0;
font-family: var(--font-title);
font-size: .85rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--sumi-60);
text-decoration: none;
transition: color .2s var(--ease);
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
color: var(--hinomaru);
}
/* Tableau des commandes (orders) */
.woocommerce-orders-table {
width: 100%;
border-collapse: collapse;
}
.woocommerce-orders-table th,
.woocommerce-orders-table td {
padding: 1rem .5rem;
text-align: left;
border-bottom: 1px solid rgba(14,14,14,.08);
font-size: .9rem;
}
.woocommerce-orders-table th {
font-family: var(--font-title);
font-size: .8rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--sumi-60);
font-weight: 500;
}
/* Commande vide */
.cart-empty,
.woocommerce-info.cart-empty {
background: var(--yuki);
padding: 2.5rem;
text-align: center;
border-left: 0;
border: 1px solid rgba(14,14,14,.08);
font-size: 1.05rem;
}
.return-to-shop {
text-align: center;
margin-top: 1.5rem;
}
/* Page de confirmation de commande (thank you) */
.woocommerce-order h2 {
font-size: 1.4rem;
margin-bottom: 1.25rem;
padding-bottom: .75rem;
border-bottom: 1px solid rgba(14,14,14,.1);
margin-top: 2rem;
}
.woocommerce-order-overview {
list-style: none;
padding: 1.5rem;
margin: 0 0 2rem;
background: var(--yuki);
border: 1px solid rgba(14,14,14,.08);
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.woocommerce-order-overview li {
font-family: var(--font-title);
font-size: .8rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--sumi-60);
}
.woocommerce-order-overview li strong {
display: block;
color: var(--sumi);
font-size: 1rem;
letter-spacing: 0;
margin-top: .25rem;
}
/* ==========================================================================
PAGE MONDE · vue galaxie des 6 Mondes
========================================================================== */
.galaxy-section {
position: relative;
background: var(--sumi);
color: var(--washi);
overflow: hidden;
padding: clamp(3rem, 8vw, 6rem) 1rem;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
}
/* Fond étoilé · juste un radial gradient + petits points subtils */
.galaxy-stars {
position: absolute;
inset: 0;
background:
radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.3), transparent),
radial-gradient(1px 1px at 65% 18%, rgba(255,255,255,.25), transparent),
radial-gradient(1.5px 1.5px at 82% 70%, rgba(255,255,255,.3), transparent),
radial-gradient(1px 1px at 15% 85%, rgba(255,255,255,.2), transparent),
radial-gradient(1.5px 1.5px at 90% 40%, rgba(255,255,255,.25), transparent),
radial-gradient(1px 1px at 38% 92%, rgba(255,255,255,.2), transparent),
radial-gradient(2px 2px at 50% 50%, rgba(185,29,29,.05), transparent 70%);
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
}
/* Header de la page galaxie */
.galaxy-header {
position: relative;
z-index: 2;
text-align: center;
max-width: 640px;
}
.galaxy-header__eyebrow {
font-family: var(--font-jp);
font-size: clamp(.95rem, 1.3vw, 1.1rem);
color: var(--hinomaru);
letter-spacing: 0.4em;
margin-bottom: 1rem;
opacity: 0;
animation: galaxy-fade-in .8s var(--ease) forwards;
animation-delay: .2s;
}
.galaxy-header__title {
font-size: clamp(2.5rem, 6vw, 4.5rem);
color: var(--washi);
margin-bottom: 1rem;
opacity: 0;
animation: galaxy-fade-in .8s var(--ease) forwards;
animation-delay: .4s;
}
.galaxy-header__lead {
font-size: clamp(.95rem, 1.3vw, 1.1rem);
color: rgba(242, 237, 228, .6);
max-width: 560px;
margin: 0 auto;
opacity: 0;
animation: galaxy-fade-in .8s var(--ease) forwards;
animation-delay: .6s;
}
@keyframes galaxy-fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Conteneur galaxie · carré qui contient le centre + 6 orbites */
.galaxy {
--orbit-radius: clamp(160px, 32vw, 260px);
--world-size: clamp(70px, 12vw, 110px);
--center-size: clamp(110px, 17vw, 160px);
position: relative;
width: calc((var(--orbit-radius) + var(--world-size)) * 2.4);
height: calc((var(--orbit-radius) + var(--world-size)) * 2.4);
max-width: 100%;
z-index: 2;
}
/* Rayons en pur CSS · 6 segments pointillés qui partent du centre.
Utilisent les mêmes unités CSS que les disques pour un alignement parfait
indépendant du viewport (vs SVG qui dépend du ratio viewBox/conteneur). */
.galaxy__ray {
--angle: calc(60deg * var(--i, 0) - 90deg);
position: absolute;
top: 50%;
left: 50%;
/* Longueur = orbit_radius (centre à centre du disque).
Le disque a un fond opaque qui cachera le bout du rayon. */
width: var(--orbit-radius);
height: 1px;
background: repeating-linear-gradient(
to right,
rgba(242, 237, 228, .22) 0 4px,
transparent 4px 8px
);
transform-origin: 0% 50%;
transform: rotate(var(--angle)) scaleX(0);
pointer-events: none;
z-index: 1;
animation: galaxy-ray-grow 1s var(--ease) forwards;
animation-delay: calc(.6s + .1s * var(--i, 0));
}
@keyframes galaxy-ray-grow {
from { transform: rotate(var(--angle)) scaleX(0); }
to { transform: rotate(var(--angle)) scaleX(1); }
}
/* Centre · pictogramme Hexos.
On utilise un keyframe spécifique qui ne touche QUE à l'opacité,
pour préserver le translate(-50%, -50%) qui assure le centrage parfait
(sinon le keyframe galaxy-fade-in remplace le transform et décentre). */
.galaxy__center {
position: absolute;
top: 50%;
left: 50%;
width: var(--center-size);
height: var(--center-size);
/* Léger décalage vertical vers le haut pour compensation optique :
le pictogramme a plus de masse visuelle en bas, ce qui crée
l'illusion qu'il "tombe" sans cet ajustement. */
transform: translate(-50%, calc(-50% - 8px));
display: grid;
place-items: center;
z-index: 3;
opacity: 0;
animation: galaxy-center-in 1s var(--ease) forwards;
animation-delay: .8s;
}
@keyframes galaxy-center-in {
from { opacity: 0; }
to { opacity: 1; }
}
.galaxy__center-img {
width: 100%;
height: 100%;
object-fit: contain;
/* Le PNG est noir → on l'inverse pour avoir blanc sur fond noir */
filter: invert(1) brightness(2);
position: relative;
z-index: 2;
}
.galaxy__center-pulse {
position: absolute;
inset: -20%;
border-radius: 50%;
background: radial-gradient(circle, rgba(185, 29, 29, .25) 0%, transparent 70%);
animation: galaxy-pulse 4s ease-in-out infinite;
z-index: 1;
}
@keyframes galaxy-pulse {
0%, 100% { transform: scale(1); opacity: .7; }
50% { transform: scale(1.15); opacity: 1; }
}
/* Mondes en orbite · positions hardcodées via --tx, --ty (cos/sin précalculés)
pour garantir l'alignement parfait avec les rayons sur tous navigateurs. */
.galaxy__world {
position: absolute;
top: 50%;
left: 50%;
width: var(--world-size);
height: var(--world-size);
margin-top: calc(var(--world-size) / -2);
margin-left: calc(var(--world-size) / -2);
/* Orbite : on multiplie --tx et --ty (valeurs entre -1 et 1) par le rayon. */
transform: translate(
calc(var(--tx, 0) * var(--orbit-radius)),
calc(var(--ty, 0) * var(--orbit-radius))
);
text-decoration: none;
color: var(--washi);
cursor: pointer;
z-index: 2;
/* Apparition staggered · chaque monde apparaît à son tour */
opacity: 0;
animation: galaxy-world-pop .6s var(--ease) forwards;
animation-delay: calc(1.2s + .15s * var(--i, 0));
}
@keyframes galaxy-world-pop {
0% {
opacity: 0;
transform: translate(
calc(var(--tx, 0) * var(--orbit-radius)),
calc(var(--ty, 0) * var(--orbit-radius))
) scale(.4);
}
100% {
opacity: 1;
transform: translate(
calc(var(--tx, 0) * var(--orbit-radius)),
calc(var(--ty, 0) * var(--orbit-radius))
) scale(1);
}
}
.galaxy__world-disk {
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--img, var(--sumi));
background-size: cover;
background-position: center;
border: 2px solid rgba(242, 237, 228, .15);
transition: border-color .3s var(--ease), transform .3s var(--ease);
}
/* Pour Edo Era (active) : bordure rouge subtile */
.galaxy__world--active .galaxy__world-disk {
border-color: rgba(185, 29, 29, .6);
box-shadow: 0 0 30px rgba(185, 29, 29, .25);
}
/* Pour les verrouillés : fond noir + bordure pointillée */
.galaxy__world--locked .galaxy__world-disk {
background: rgba(255, 255, 255, .03);
border-style: dashed;
border-color: rgba(242, 237, 228, .25);
}
.galaxy__world--locked {
cursor: default;
}
/* Numéro romain au centre du disque */
.galaxy__world-label {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-family: var(--font-title);
font-size: clamp(1.4rem, 2.5vw, 2rem);
font-weight: 700;
letter-spacing: .05em;
color: var(--washi);
z-index: 1;
text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.galaxy__world--locked .galaxy__world-label {
color: rgba(242, 237, 228, .35);
text-shadow: none;
}
/* Hover · monde actif s'agrandit légèrement et brille */
.galaxy__world--active:hover .galaxy__world-disk {
transform: scale(1.08);
border-color: var(--hinomaru);
box-shadow: 0 0 40px rgba(185, 29, 29, .5);
}
/* Tooltip qui apparaît au survol (ou sur focus tactile) */
.galaxy__tooltip {
position: absolute;
bottom: calc(100% + 1rem);
left: 50%;
transform: translateX(-50%) translateY(8px);
background: var(--washi);
color: var(--sumi);
padding: .9rem 1.1rem;
min-width: 180px;
text-align: center;
opacity: 0;
pointer-events: none;
transition: opacity .25s var(--ease), transform .25s var(--ease);
z-index: 5;
}
/* Petite flèche en bas du tooltip */
.galaxy__tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: var(--washi);
}
.galaxy__world:hover .galaxy__tooltip,
.galaxy__world:focus .galaxy__tooltip {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.galaxy__tooltip-num {
display: block;
font-family: var(--font-title);
font-size: .7rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--hinomaru);
margin-bottom: .15rem;
}
.galaxy__tooltip-name {
display: block;
font-family: var(--font-title);
font-size: 1.1rem;
font-weight: 700;
color: var(--sumi);
margin-bottom: .2rem;
}
.galaxy__tooltip-desc {
display: block;
font-size: .8rem;
color: var(--sumi-60);
}
.galaxy__tooltip--locked .galaxy__tooltip-num { color: var(--sumi-60); }
/* Footnote sous la galaxie */
.galaxy-footnote {
position: relative;
z-index: 2;
margin-top: 2rem;
font-size: .85rem;
color: rgba(242, 237, 228, .4);
font-style: italic;
text-align: center;
}
/* Mobile · tooltip plus compact, position adaptée pour les nœuds du bas */
@media (max-width: 640px) {
.galaxy__tooltip {
min-width: 140px;
font-size: .85rem;
padding: .65rem .8rem;
}
/* Tooltip des nœuds du bas (i = 2, 3) doit s'afficher au-dessus */
.galaxy__world[style*="--i: 2"] .galaxy__tooltip,
.galaxy__world[style*="--i: 3"] .galaxy__tooltip {
bottom: auto;
top: calc(100% + 1rem);
}
.galaxy__world[style*="--i: 2"] .galaxy__tooltip::after,
.galaxy__world[style*="--i: 3"] .galaxy__tooltip::after {
top: auto;
bottom: 100%;
border-top-color: transparent;
border-bottom-color: var(--washi);
}
}
/* ==========================================================================
PAGE ATELIER · /atelier/
========================================================================== */
/* Hero atelier · même base que page-hero, juste fond Sumi */
.atelier-hero {
background: var(--sumi);
color: var(--washi);
border-bottom: 0;
}
.atelier-hero .page-hero__title { color: var(--washi); }
.atelier-hero .page-hero__lead { color: rgba(242,237,228,.7); max-width: 660px; }
.atelier-hero .page-hero__eyebrow {
color: var(--hinomaru);
font-family: var(--font-jp);
font-size: 1.2rem;
letter-spacing: 0.4em;
}
/* Bandeau 3 piliers · sur fond rouge Hi-no-maru pour casser le rythme */
.atelier-pillars {
background: var(--hinomaru);
color: var(--washi);
padding-block: clamp(3rem, 6vw, 4.5rem);
}
.atelier-pillars__inner {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
}
@media (min-width: 800px) {
.atelier-pillars__inner { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
}
.atelier-pillar {
text-align: center;
color: var(--washi);
}
.atelier-pillar__num {
font-family: var(--font-title);
font-size: 1rem;
letter-spacing: 0.3em;
color: rgba(255,255,255,.6);
margin-bottom: .75rem;
}
.atelier-pillar__title {
font-size: 1.6rem;
color: var(--washi);
margin-bottom: .75rem;
}
.atelier-pillar__text {
font-size: .95rem;
line-height: 1.65;
color: rgba(255,255,255,.85);
max-width: 320px;
margin: 0 auto;
}
/* Sections craft (broderie + sérigraphie) · alternance gauche/droite */
.atelier-craft {
padding-block: clamp(4rem, 8vw, 6rem);
background: var(--washi);
}
.atelier-craft--alt { background: var(--yuki); }
.atelier-craft__inner {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
align-items: center;
}
@media (min-width: 900px) {
.atelier-craft__inner { grid-template-columns: 1fr 1fr; gap: 4rem; }
/* Variante : texte à gauche, média à droite */
.atelier-craft__inner--reverse .atelier-craft__media { order: 2; }
.atelier-craft__inner--reverse .atelier-craft__text { order: 1; }
}
.atelier-craft__media {
aspect-ratio: 4 / 5;
background: var(--sumi);
overflow: hidden;
position: relative;
}
.atelier-craft__video,
.atelier-craft__photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.atelier-craft__media--placeholder {
background: var(--sumi);
display: grid;
place-items: center;
color: rgba(242,237,228,.4);
}
.atelier-craft__placeholder-text {
text-align: center;
padding: 2rem;
}
.atelier-craft__placeholder-text .lang-jp {
font-size: clamp(2rem, 5vw, 3rem);
margin-bottom: .75rem;
color: rgba(242,237,228,.45);
}
.atelier-craft__placeholder-text p:last-child {
font-family: var(--font-title);
font-size: .8rem;
letter-spacing: 0.25em;
text-transform: uppercase;
margin: 0;
}
.atelier-craft__step {
font-family: var(--font-title);
font-size: .8rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--hinomaru);
margin-bottom: .75rem;
}
.atelier-craft__title {
font-size: clamp(2rem, 4vw, 3rem);
margin-bottom: 1rem;
}
.atelier-craft__partner {
font-family: var(--font-title);
font-size: 1rem;
letter-spacing: 0.05em;
margin-bottom: 1.5rem;
color: var(--sumi);
}
.atelier-craft__partner-link {
color: var(--sumi);
border-bottom: 1px solid var(--sumi);
padding-bottom: 1px;
transition: color .2s var(--ease), border-color .2s var(--ease);
}
a.atelier-craft__partner-link:hover {
color: var(--hinomaru);
border-color: var(--hinomaru);
}
.atelier-craft__location {
color: var(--sumi-60);
margin-left: .35rem;
font-weight: 400;
}
.atelier-craft__lead {
font-size: 1rem;
line-height: 1.75;
color: var(--sumi);
margin-bottom: 1rem;
}
.atelier-craft__lead strong { color: var(--sumi); font-weight: 600; }
.atelier-craft__specs {
list-style: none;
padding: 0;
margin-top: 2rem;
display: grid;
gap: .6rem;
}
.atelier-craft__specs li {
display: grid;
grid-template-columns: 7rem 1fr;
gap: 1rem;
font-size: .9rem;
color: var(--sumi);
padding: .35rem 0;
border-bottom: 1px solid rgba(14,14,14,.06);
}
.atelier-craft__specs li:last-child { border-bottom: 0; }
.atelier-craft__specs li span {
font-family: var(--font-title);
font-size: .8rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--sumi-60);
}
/* Section tissu */
.atelier-fabric {
background: var(--sumi);
color: var(--washi);
padding-block: clamp(4rem, 7vw, 5.5rem);
text-align: center;
}
.atelier-fabric__eyebrow {
font-family: var(--font-title);
font-size: .85rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--hinomaru);
margin-bottom: .75rem;
}
.atelier-fabric__title {
color: var(--washi);
font-size: clamp(1.8rem, 3.5vw, 2.5rem);
margin-bottom: 2rem;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.atelier-fabric__text {
max-width: 620px;
margin: 0 auto 1.25rem;
color: rgba(242,237,228,.75);
line-height: 1.75;
font-size: 1rem;
}
/* CTA bas */
.atelier-cta {
padding-block: clamp(3rem, 6vw, 5rem);
text-align: center;
background: var(--washi);
}
.atelier-cta__eyebrow {
font-family: var(--font-title);
font-size: .8rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--hinomaru);
margin-bottom: .75rem;
}
.atelier-cta__title {
font-size: clamp(2rem, 4vw, 3rem);
margin-bottom: 2rem;
}
/* ==========================================================================
PAGE MONDE · DÉTAIL D'UN MONDE (ex. /monde/edo-era/)
========================================================================== */
.world-hero {
background: var(--sumi);
color: var(--washi);
padding-block: clamp(4rem, 9vw, 7rem);
text-align: center;
position: relative;
overflow: hidden;
}
.world-hero__inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.world-hero__breadcrumb {
font-family: var(--font-title);
font-size: .8rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: rgba(242,237,228,.55);
margin-bottom: 2rem;
display: inline-flex;
gap: .6rem;
align-items: center;
}
.world-hero__breadcrumb a { color: inherit; transition: color .2s var(--ease); }
.world-hero__breadcrumb a:hover { color: var(--hinomaru); }
.world-hero__breadcrumb .dot { opacity: .5; }
.world-hero__eyebrow {
font-family: var(--font-title);
font-size: .9rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--hinomaru);
margin-bottom: 1rem;
}
.world-hero__title {
font-size: clamp(3.5rem, 9vw, 6.5rem);
color: var(--washi);
margin-bottom: 1.5rem;
}
.world-hero__quote {
font-size: clamp(1.6rem, 3.5vw, 2.4rem);
color: var(--washi);
margin-bottom: .25rem;
}
.world-hero__quote-tr {
color: rgba(242,237,228,.6);
font-style: italic;
}
/* Story */
.world-story { padding-block: clamp(4rem, 8vw, 6rem); background: var(--washi); }
.world-story__inner {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
}
@media (min-width: 900px) {
.world-story__inner { grid-template-columns: 1.5fr 1fr; gap: 5rem; }
}
.world-story__text {
font-size: clamp(1rem, 1.3vw, 1.1rem);
line-height: 1.75;
color: var(--sumi);
}
.world-story__text p + p { margin-top: 1.25rem; }
.world-story__meta { list-style: none; padding: 0; display: grid; gap: .75rem; }
.world-story__meta li {
display: grid;
grid-template-columns: 8rem 1fr;
gap: 1rem;
padding: .65rem 0;
border-bottom: 1px solid rgba(14,14,14,.08);
}
.world-story__meta li:last-child { border-bottom: 0; }
.world-story__meta li span:first-child {
font-family: var(--font-title);
font-size: .8rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--sumi-60);
}
/* Grille des 6 Tableaux */
.world-tableaux { padding-block: clamp(3rem, 7vw, 5rem); background: var(--washi); border-top: 1px solid rgba(14,14,14,.08); }
.world-tableaux__title {
text-align: center;
margin-bottom: 3rem;
font-size: clamp(2rem, 5vw, 3rem);
}
.world-tableaux__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 700px) { .world-tableaux__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .world-tableaux__grid { grid-template-columns: repeat(3, 1fr); } }
.world-tableau {
background: var(--yuki);
text-decoration: none;
color: inherit;
transition: transform .25s var(--ease);
display: block;
}
.world-tableau:hover { transform: translateY(-3px); }
.world-tableau__media {
aspect-ratio: 4 / 5;
background-color: var(--aizome);
background-size: cover;
background-position: center;
position: relative;
}
.world-tableau__media--locked {
background-color: rgba(14,14,14,.05);
border: 1px dashed rgba(14,14,14,.25);
display: grid;
place-items: center;
}
.world-tableau__placeholder {
font-family: var(--font-title);
font-size: 4rem;
color: rgba(14,14,14,.2);
}
/* ----- Cartes "scellées" · Tableaux 03 à 06 (mystère par l'uniformité) ----- */
.world-tableau--sealed {
cursor: default;
}
.world-tableau__media--sealed {
background: var(--sumi);
color: var(--washi);
overflow: hidden;
/* Petite texture subtile en arrière-plan : grid de points faiblement visible
qui rappelle les rivets / la finition d'un sceau ancien */
background-image:
radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0);
background-size: 16px 16px;
}
.world-tableau__media--sealed::after {
content: "SCELLÉ";
position: absolute;
top: 1rem;
right: 1rem;
background: var(--hinomaru);
color: var(--washi);
font-family: var(--font-title);
font-size: .65rem;
font-weight: 700;
letter-spacing: 0.25em;
padding: .35rem .6rem;
z-index: 3;
}
/* Le bloc "sceau" centré dans le media · 3 couches superposées */
.tableau-seal {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: var(--washi);
}
.tableau-seal__hex {
position: absolute;
width: 60%;
max-width: 220px;
height: auto;
opacity: 0.4;
}
.tableau-seal__num {
position: relative;
z-index: 2;
font-family: var(--font-title);
font-weight: 900;
font-size: clamp(3.5rem, 9vw, 5.5rem);
line-height: 1;
letter-spacing: 0.05em;
color: var(--washi);
text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.tableau-seal__kanji {
position: absolute;
z-index: 1;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
font-size: .9rem;
letter-spacing: 0.3em;
color: var(--hinomaru);
opacity: 0.85;
}
/* Carte scellée sur fond noir : on ajuste le info en dessous */
.world-tableau--sealed .world-tableau__num { color: var(--hinomaru); }
.world-tableau--sealed .world-tableau__name { color: var(--sumi); }
.world-tableau--sealed .world-tableau__state { color: var(--sumi-60); font-style: italic; }
/* Badge "Bientôt" sur les Tableaux preview (legacy, plus utilisé sur edo-era) */
.world-tableau--coming .world-tableau__media::after {
content: "BIENTÔT";
position: absolute;
top: 1rem;
right: 1rem;
background: var(--hinomaru);
color: var(--washi);
font-family: var(--font-title);
font-size: .65rem;
font-weight: 700;
letter-spacing: 0.2em;
padding: .35rem .6rem;
}
.world-tableau__info { padding: 1.25rem 1rem; }
.world-tableau__num {
font-family: var(--font-title);
font-size: .75rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--hinomaru);
margin-bottom: .35rem;
}
.world-tableau__name {
font-family: var(--font-title);
font-size: 1.6rem;
margin-bottom: .25rem;
}
.world-tableau--locked .world-tableau__name { color: var(--sumi-60); }
.world-tableau__state {
font-size: .85rem;
color: var(--sumi-60);
}
/* CTA bas de page */
.world-cta {
background: var(--hinomaru);
color: var(--washi);
text-align: center;
padding-block: clamp(3rem, 6vw, 5rem);
}
.world-cta__inner h2 { color: var(--washi); margin-bottom: .5rem; }
.world-cta__inner p { color: rgba(255,255,255,.85); margin-bottom: 2rem; }
.world-cta .btn {
background: var(--washi);
color: var(--hinomaru);
border-color: var(--washi);
}
.world-cta .btn:hover {
background: transparent;
color: var(--washi);
}
/* ==========================================================================
PAGES INTÉRIEURES · Lore, Contact, Boutique
========================================================================== */
/* --- Page hero (titre de page) ------------------------------------------- */
.page-hero {
padding-block: clamp(5rem, 12vw, 9rem) clamp(3rem, 8vw, 5rem);
text-align: center;
border-bottom: 1px solid rgba(14, 14, 14, .08);
}
.page-hero__inner { max-width: 760px; margin: 0 auto; }
.page-hero__eyebrow {
font-family: var(--font-title);
font-size: .85rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--sumi-60);
margin-bottom: 1.25rem;
}
.page-hero__title {
font-size: clamp(3rem, 9vw, 6rem);
font-weight: 900;
margin-bottom: 1.25rem;
}
.page-hero__lead {
font-size: clamp(1.05rem, 1.5vw, 1.2rem);
color: var(--sumi-60);
max-width: 540px;
margin: 0 auto;
}
/* --- Lore : blocs numérotés ---------------------------------------------- */
.lore-block { padding-block: clamp(4rem, 10vw, 7rem); }
.lore-block--dark { background: var(--sumi); color: var(--washi); }
.lore-block--dark h2, .lore-block--dark strong { color: var(--yuki); }
.lore-block--dark .lore-block__num { color: var(--washi); opacity: .35; }
.lore-block__inner {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
}
@media (min-width: 900px) {
.lore-block__inner {
grid-template-columns: 1fr 1.6fr;
gap: 4rem;
}
}
.lore-block__title { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.lore-block__title--center { justify-content: center; text-align: center; margin-bottom: 3rem; }
.lore-block__num {
font-family: var(--font-title);
font-weight: 900;
font-size: clamp(2rem, 4vw, 3rem);
color: var(--hinomaru);
line-height: 1;
}
.lore-block__text {
font-size: clamp(1rem, 1.3vw, 1.1rem);
line-height: 1.75;
max-width: 640px;
}
.lore-block__text p + p { margin-top: 1.25rem; }
.lore-block__quote {
font-size: clamp(2rem, 5vw, 3rem);
text-align: center;
margin: 2.5rem 0 .5rem;
font-weight: 500;
}
.lore-block__quote-tr {
text-align: center;
font-style: italic;
color: var(--sumi-60);
margin-top: 0;
}
/* --- Lore : grille de valeurs -------------------------------------------- */
.lore-values { background: var(--washi); }
.values-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 600px) { .values-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .values-grid { grid-template-columns: repeat(4, 1fr); } }
.value-card {
padding: 2rem;
background: var(--yuki);
border: 1px solid rgba(14, 14, 14, .08);
transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.value-card:hover {
transform: translateY(-3px);
border-color: var(--hinomaru);
}
.value-card__num {
font-family: var(--font-title);
font-style: italic;
color: var(--hinomaru);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
.value-card h3 { margin-bottom: 1rem; }
.value-card p {
color: var(--sumi-60);
font-size: .95rem;
line-height: 1.65;
}
/* --- Lore CTA finale ----------------------------------------------------- */
.lore-cta {
background: var(--hinomaru);
color: var(--yuki);
text-align: center;
padding-block: clamp(4rem, 8vw, 6rem);
}
.lore-cta__inner h2 {
color: var(--yuki);
margin-bottom: 2rem;
}
.lore-cta .btn {
background: var(--yuki);
color: var(--hinomaru);
border-color: var(--yuki);
}
.lore-cta .btn:hover {
background: transparent;
color: var(--yuki);
}
/* --- Contact : grille de cartes ------------------------------------------ */
.contact-section { padding-block: clamp(3rem, 8vw, 6rem); }
.contact-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
max-width: 800px;
margin-inline: auto;
}
@media (min-width: 700px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } }
.contact-card {
padding: 2.5rem 2rem;
background: var(--yuki);
border: 1px solid rgba(14, 14, 14, .08);
text-align: center;
}
.contact-card__label {
font-family: var(--font-title);
font-size: .8rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--sumi-60);
margin-bottom: 1rem;
}
.contact-card__value {
display: block;
font-family: var(--font-title);
font-size: clamp(1.3rem, 2.2vw, 1.7rem);
font-weight: 700;
color: var(--sumi);
margin-bottom: .75rem;
word-break: break-word;
transition: color .2s var(--ease);
}
a.contact-card__value:hover { color: var(--hinomaru); }
.contact-card__hint {
font-size: .9rem;
color: var(--sumi-60);
}
/* Contact CTA */
.contact-cta { background: var(--sumi); color: var(--washi); text-align: center; }
.contact-cta__jp { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 1rem; }
.contact-cta__line {
font-family: var(--font-title);
font-size: clamp(1.2rem, 2vw, 1.5rem);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--washi);
}
/* --- Boutique : grille produits ------------------------------------------ */
.shop-collection-header { text-align: center; margin-bottom: 4rem; }
.shop-collection-header__label {
font-family: var(--font-title);
font-size: .85rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--hinomaru);
margin-bottom: .75rem;
}
.shop-collection-header__title {
font-size: clamp(2.5rem, 5vw, 4rem);
margin-bottom: 1.25rem;
}
.shop-collection-header__quote {
font-size: clamp(1.4rem, 2.5vw, 1.8rem);
margin-bottom: .25rem;
}
.shop-collection-header__translation {
color: var(--sumi-60);
font-style: italic;
}
.shop-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin-bottom: 4rem;
}
@media (min-width: 700px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
.product-tile {
background: var(--yuki);
transition: transform .25s var(--ease);
}
.product-tile:hover { transform: translateY(-3px); }
/* Lien qui wrap toute la tuile (produits Woo dynamiques) · texte neutre. */
.product-tile__link {
display: block;
color: inherit;
text-decoration: none;
}
.product-tile__link:hover { color: inherit; }
.product-tile__media {
aspect-ratio: 4 / 5;
background: var(--aizome);
color: var(--washi);
display: grid;
place-items: center;
overflow: hidden;
position: relative;
}
.product-tile__media--proto {
background: linear-gradient(135deg,
#FF6B6B 0%, #FFA94D 16%, #FFD93D 33%,
#6BCB77 50%, #4D96FF 66%, #9B5DE5 83%, #E63946 100%);
}
.product-tile__tableau {
font-family: var(--font-title);
font-weight: 900;
font-size: clamp(2rem, 4vw, 3rem);
letter-spacing: .05em;
text-transform: uppercase;
}
.product-tile--coming .product-tile__media {
background: rgba(14, 14, 14, .08);
color: var(--sumi-60);
border: 1px dashed var(--sumi-60);
}
.product-tile__info { padding: 1.5rem 1rem; }
.product-tile__title {
font-family: var(--font-title);
font-size: 1.5rem;
margin-bottom: .25rem;
}
.product-tile__meta {
font-size: .85rem;
color: var(--sumi-60);
margin-bottom: .75rem;
letter-spacing: .05em;
text-transform: uppercase;
}
.product-tile__price {
font-family: var(--font-title);
font-weight: 700;
font-size: 1.2rem;
display: flex;
gap: .75rem;
align-items: baseline;
}
.product-tile__price-old {
color: var(--sumi-60);
text-decoration: line-through;
font-weight: 400;
}
.product-tile__price-new { color: var(--hinomaru); }
.shop-cta { text-align: center; padding: 2rem; border-top: 1px solid rgba(14, 14, 14, .08); }
.shop-cta__hint { color: var(--sumi-60); font-size: .95rem; }
.shop-cta__hint a { color: var(--hinomaru); border-bottom: 1px solid currentColor; }
/* ==========================================================================
PAGE /insta/ · Linktree custom Hexos
Page standalone, fullscreen, mobile-first.
========================================================================== */
/* Reset · le body de la page Insta n'a pas de header/footer */
body.insta-body {
margin: 0;
background: var(--sumi);
color: var(--washi);
min-height: 100vh;
font-family: var(--font-body);
}
.insta-page {
position: relative;
min-height: 100vh;
overflow: hidden;
padding: 2rem 1.25rem 3rem;
display: flex;
align-items: flex-start;
justify-content: center;
}
/* Étoiles d'arrière-plan · même style que la galaxie /monde/ */
.insta-page__stars {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(2px 2px at 18% 22%, rgba(255,255,255,.25), transparent),
radial-gradient(1px 1px at 75% 12%, rgba(255,255,255,.18), transparent),
radial-gradient(1.5px 1.5px at 88% 60%, rgba(255,255,255,.22), transparent),
radial-gradient(1px 1px at 25% 80%, rgba(255,255,255,.15), transparent),
radial-gradient(1.5px 1.5px at 60% 90%, rgba(255,255,255,.2), transparent),
radial-gradient(2px 2px at 50% 50%, rgba(185,29,29,.04), transparent 70%);
background-repeat: no-repeat;
}
/* Glyphe Hexos en watermark très transparent */
.insta-page__watermark {
position: absolute;
bottom: -10%;
right: -15%;
width: 60vmin;
max-width: 500px;
opacity: .04;
pointer-events: none;
z-index: 0;
}
.insta-page__watermark img {
width: 100%;
height: auto;
display: block;
/* Le pictogramme est noir, on l'inverse pour qu'il apparaisse en blanc */
filter: invert(1);
}
.insta-page__inner {
position: relative;
z-index: 1;
width: 100%;
max-width: 460px;
margin: 0 auto;
text-align: center;
}
/* Logo en haut */
.insta-page__logo {
display: inline-block;
margin-bottom: 1.75rem;
opacity: 0;
animation: insta-fade-in .8s var(--ease) .1s forwards;
}
.insta-page__logo img {
height: 36px;
width: auto;
/* Le SVG du logo est noir → on l'inverse pour fond noir */
filter: invert(1);
}
@keyframes insta-fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Header · tagline */
.insta-page__header {
margin-bottom: 2.5rem;
opacity: 0;
animation: insta-fade-in .8s var(--ease) .25s forwards;
}
.insta-page__jp {
font-family: var(--font-jp);
font-size: 1rem;
letter-spacing: 0.4em;
color: var(--hinomaru);
margin: 0 0 .75rem;
}
.insta-page__title {
font-family: var(--font-title);
font-weight: 900;
font-size: clamp(2rem, 7vw, 2.6rem);
line-height: 1.05;
margin: 0 0 1rem;
color: var(--washi);
letter-spacing: -0.01em;
}
.insta-page__sub {
font-size: .95rem;
color: rgba(242, 237, 228, .7);
margin: 0;
}
/* Grille des liens */
.insta-links {
display: grid;
gap: .85rem;
margin-bottom: 2.5rem;
}
.insta-link {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.1rem;
background: var(--washi);
color: var(--sumi);
text-decoration: none;
border: 2px solid var(--washi);
transition: transform .25s var(--ease),
background .25s var(--ease),
border-color .25s var(--ease),
color .25s var(--ease);
position: relative;
/* Apparition staggered */
opacity: 0;
animation: insta-fade-in .55s var(--ease) calc(.4s + .08s * var(--i, 0)) forwards;
}
.insta-link:hover,
.insta-link:focus {
background: var(--hinomaru);
border-color: var(--hinomaru);
color: var(--washi);
transform: translateY(-2px);
}
/* Liens "primaires" (Edo Era + Boutique) · accent rouge subtil au repos */
.insta-link.is-primary {
border-color: rgba(185, 29, 29, .35);
}
.insta-link.is-primary:hover {
border-color: var(--hinomaru);
}
.insta-link__hex {
position: relative;
width: 44px;
height: 44px;
flex-shrink: 0;
}
.insta-link__hex svg { display: block; width: 100%; height: 100%; }
.insta-link__hex svg polygon { stroke: var(--sumi); transition: stroke .25s var(--ease); }
.insta-link:hover .insta-link__hex svg polygon { stroke: var(--washi); }
.insta-link__num {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-family: var(--font-title);
font-weight: 700;
font-size: .85rem;
color: inherit;
}
.insta-link__text {
flex: 1;
text-align: left;
min-width: 0;
}
.insta-link__label {
display: block;
font-family: var(--font-title);
font-weight: 700;
font-size: 1.05rem;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: .15rem;
}
.insta-link__desc {
display: block;
font-size: .8rem;
color: rgba(14, 14, 14, .55);
transition: color .25s var(--ease);
}
.insta-link:hover .insta-link__desc {
color: rgba(242, 237, 228, .8);
}
.insta-link__arrow {
flex-shrink: 0;
font-family: var(--font-title);
font-size: 1.3rem;
color: var(--sumi-60);
transition: transform .25s var(--ease), color .25s var(--ease);
}
.insta-link:hover .insta-link__arrow {
color: var(--washi);
transform: translateX(4px);
}
/* Footer · URL + caption japonaise */
.insta-page__footer {
text-align: center;
opacity: 0;
animation: insta-fade-in .8s var(--ease) 1s forwards;
}
.insta-page__url {
font-family: var(--font-title);
font-size: .85rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(242, 237, 228, .5);
margin: 0 0 .65rem;
}
.insta-page__credit {
font-family: var(--font-jp);
font-size: 1.1rem;
color: var(--hinomaru);
margin: 0;
letter-spacing: 0.15em;
}
/* ==========================================================================
BANDEAU COOKIES · RGPD-compliant, minimaliste
Apparaît en bas-droite (desktop) / pleine largeur en bas (mobile).
z-index < intro pour qu'il ne dépasse pas pendant l'animation d'ouverture.
========================================================================== */
.cookie-banner {
position: fixed;
bottom: 1.25rem;
right: 1.25rem;
left: 1.25rem;
max-width: 460px;
z-index: 200;
background: var(--sumi);
color: var(--washi);
padding: 1.25rem 1.4rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
animation: cookie-banner-in .45s var(--ease) .8s both;
}
@media (min-width: 700px) {
.cookie-banner { left: auto; }
}
.cookie-banner--hidden {
display: none;
}
.cookie-banner--out {
opacity: 0;
transform: translateY(20px);
transition: opacity .35s var(--ease), transform .35s var(--ease);
pointer-events: none;
}
@keyframes cookie-banner-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.cookie-banner__inner {
display: flex;
flex-direction: column;
gap: 1rem;
}
.cookie-banner__title {
font-family: var(--font-title);
font-size: .8rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--hinomaru);
margin: 0 0 .5rem;
font-weight: 700;
}
.cookie-banner__text p {
margin: 0;
font-size: .85rem;
line-height: 1.55;
color: rgba(242, 237, 228, .85);
}
.cookie-banner__text a {
color: var(--washi);
border-bottom: 1px solid rgba(242, 237, 228, .4);
padding-bottom: 1px;
transition: border-color .2s var(--ease);
}
.cookie-banner__text a:hover { border-color: var(--hinomaru); }
.cookie-banner__actions {
display: flex;
gap: .75rem;
justify-content: flex-end;
}
.cookie-banner__btn {
padding: .65rem 1.2rem;
font-family: var(--font-title);
font-weight: 700;
font-size: .8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
border-radius: 0;
cursor: pointer;
transition: all .2s var(--ease);
}
.cookie-banner__btn--refuse {
background: transparent;
color: rgba(242, 237, 228, .7);
border: 1px solid rgba(242, 237, 228, .25);
}
.cookie-banner__btn--refuse:hover {
color: var(--washi);
border-color: var(--washi);
}
.cookie-banner__btn--accept {
background: var(--hinomaru);
color: var(--washi);
border: 1px solid var(--hinomaru);
}
.cookie-banner__btn--accept:hover {
background: transparent;
color: var(--hinomaru);
}
/* ==========================================================================
INTRO · Hi-no-maru
Overlay plein écran : soleil rouge qui se lève + texte japonais.
Durée totale ~2.5s. Skip au clic. Bloque le scroll.
========================================================================== */
/* État de base : caché. JS retire .hexos-intro--hidden si à jouer. */
.hexos-intro {
position: fixed;
inset: 0;
z-index: 9999;
background: var(--sumi);
display: grid;
place-items: center;
cursor: pointer;
/* Forçage du compositing pour anim plus fluide */
will-change: opacity;
}
.hexos-intro--hidden {
display: none;
}
/* Quand JS ajoute --out, l'overlay disparaît en fondu. */
.hexos-intro--out {
opacity: 0;
transition: opacity .55s var(--ease);
pointer-events: none;
}
/* Pendant l'intro, on bloque le scroll de la page derrière. */
body.is-intro-active {
overflow: hidden;
}
.hexos-intro__inner {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 2.5rem;
}
/* Le soleil — disque rouge qui apparaît et grandit doucement.
On part très petit (scale 0) et opacité 0, on finit à scale 1, opacité 1. */
.hexos-intro__sun {
width: clamp(140px, 22vw, 240px);
height: clamp(140px, 22vw, 240px);
border-radius: 50%;
background: var(--hinomaru);
transform: scale(0);
opacity: 0;
/* Petite lueur autour pour que ce ne soit pas un disque "découpé" */
box-shadow:
0 0 0 0 rgba(185, 29, 29, 0),
0 0 60px 20px rgba(185, 29, 29, 0);
animation: hexos-sun-rise 1.4s var(--ease) forwards;
animation-delay: .15s;
}
@keyframes hexos-sun-rise {
0% {
transform: scale(0);
opacity: 0;
box-shadow:
0 0 0 0 rgba(185, 29, 29, 0),
0 0 60px 20px rgba(185, 29, 29, 0);
}
60% {
transform: scale(1.06);
opacity: 1;
box-shadow:
0 0 0 6px rgba(185, 29, 29, .12),
0 0 80px 30px rgba(185, 29, 29, .35);
}
100% {
transform: scale(1);
opacity: 1;
box-shadow:
0 0 0 4px rgba(185, 29, 29, .08),
0 0 60px 18px rgba(185, 29, 29, .25);
}
}
/* Le texte japonais — fade in après le soleil. */
.hexos-intro__caption {
color: var(--washi);
font-size: clamp(1.4rem, 3vw, 2rem);
letter-spacing: 0.3em;
opacity: 0;
transform: translateY(10px);
animation: hexos-caption-in .9s var(--ease) forwards;
animation-delay: 1.1s;
}
@keyframes hexos-caption-in {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Bouton Skip — discret en bas à droite. */
.hexos-intro__skip {
position: absolute;
bottom: -6rem;
right: 0;
color: rgba(242, 237, 228, .55);
font-family: var(--font-title);
font-size: .85rem;
letter-spacing: 0.25em;
text-transform: uppercase;
padding: .5rem 1rem;
transition: color .2s var(--ease);
opacity: 0;
animation: hexos-caption-in .5s var(--ease) forwards;
animation-delay: 1.6s;
}
.hexos-intro__skip:hover {
color: var(--washi);
}
@media (max-width: 600px) {
.hexos-intro__skip {
bottom: -4rem;
right: 50%;
transform: translateX(50%);
}
.hexos-intro__skip:hover { transform: translateX(50%); }
}
/* Accessibilité : si l'utilisateur préfère réduire les animations,
on saute toute l'intro. JS le détecte aussi mais le CSS double-protège. */
@media (prefers-reduced-motion: reduce) {
.hexos-intro {
display: none !important;
}
body.is-intro-active {
overflow: auto;
}
}
/* ==========================================================================
INTRO · Variante B · Hexagone qui se trace
Override du fond noir → Washi · 6 côtés animés · compteur · wordmark
========================================================================== */
.hexos-intro--variant-b {
background: var(--washi);
}
.hexos-intro--variant-b .hexos-intro__caption {
color: var(--sumi);
font-size: clamp(1.2rem, 2.5vw, 1.7rem);
letter-spacing: 0.3em;
/* Compense le letter-spacing qui s'applique aussi APRÈS le dernier
caractère et décale le centre optique vers la droite. */
text-indent: 0.3em;
text-align: center;
opacity: 0;
transform: translateY(8px);
animation: hexos-caption-in .8s var(--ease) forwards;
animation-delay: 2.0s;
}
.hexos-intro--variant-b .hexos-intro__skip {
color: rgba(14, 14, 14, .45);
}
.hexos-intro--variant-b .hexos-intro__skip:hover {
color: var(--sumi);
}
/* --- Wrap qui contient le SVG + compteur ------------------- */
.hexos-intro__hex-wrap {
position: relative;
display: grid;
place-items: center;
}
/* --- SVG hexagone : taille, traits, wordmark central ------- */
.hexos-intro__hex {
width: clamp(180px, 30vw, 280px);
height: clamp(180px, 30vw, 280px);
overflow: visible;
}
/* Tracé de l'hexagone · un seul path animé.
Approche fail-safe : on utilise une dasharray énorme (600) pour absorber
toute imprécision de calcul du périmètre, ET à la dernière frame on
retire complètement le pattern de dash (stroke-dasharray: none) pour
garantir un tracé continu sans aucun segment manquant.
stroke-linejoin: miter donne des coins nets sans bavure. */
.hexos-intro__hex .hex-path {
fill: none;
stroke: var(--sumi);
stroke-width: 3.5;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 10;
vector-effect: non-scaling-stroke;
stroke-dasharray: 600;
stroke-dashoffset: 600;
animation: hex-draw 2s linear forwards;
animation-delay: 0.20s;
}
@keyframes hex-draw {
/* À 99% l'offset est à 0 → tout le path est visible via le dash de 600. */
99% {
stroke-dashoffset: 0;
stroke-dasharray: 600;
}
/* À 100% on retire le pattern → stroke continu, tracé garanti complet. */
100% {
stroke-dashoffset: 0;
stroke-dasharray: none;
}
}
/* Logo central · apparaît une fois l'hexagone fermé.
transform-box: fill-box pour que le scale parte du centre de l'image
et non du coin haut-gauche du viewBox SVG. */
.hexos-intro__hex .hex-wordmark {
opacity: 0;
transform-box: fill-box;
transform-origin: center;
animation: hex-wordmark-in .6s var(--ease) forwards;
animation-delay: 2.15s;
}
@keyframes hex-wordmark-in {
0% { opacity: 0; transform: scale(.88); }
100% { opacity: 1; transform: scale(1); }
}
/* --- Compteur · 6 numéros qui s'enchaînent au même endroit - */
.hexos-intro__counter {
position: absolute;
bottom: -2.5rem;
left: 50%;
transform: translateX(-50%);
height: 1.4em;
font-family: var(--font-title);
font-weight: 900;
font-size: 1.1rem;
letter-spacing: 0.2em;
color: var(--hinomaru);
}
.hexos-intro__counter .counter-num {
position: absolute;
inset: 0;
text-align: center;
opacity: 0;
/* Chaque numéro apparaît brièvement pendant le tracé du côté correspondant */
animation: counter-flash .32s steps(1, end) forwards;
}
.hexos-intro__counter .counter-num--1 { animation-delay: 0.20s; }
.hexos-intro__counter .counter-num--2 { animation-delay: 0.50s; }
.hexos-intro__counter .counter-num--3 { animation-delay: 0.80s; }
.hexos-intro__counter .counter-num--4 { animation-delay: 1.10s; }
.hexos-intro__counter .counter-num--5 { animation-delay: 1.40s; }
.hexos-intro__counter .counter-num--6 {
animation: counter-flash-last .55s ease-out forwards;
animation-delay: 1.70s;
}
@keyframes counter-flash {
/* Visible pendant le tracé du côté, puis disparaît au suivant */
0% { opacity: 0; }
10% { opacity: 1; }
99% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes counter-flash-last {
/* Le 06 reste un peu plus longtemps puis fond avec la caption */
0% { opacity: 0; }
10% { opacity: 1; }
100% { opacity: 1; }
}
/* ==========================================================================
PAGE PRODUIT · single-product.php
========================================================================== */
.single-product { padding-block: clamp(2rem, 5vw, 4rem) 0; }
.single-product__inner { width: 100%; max-width: 1280px; margin: 0 auto; }
.single-product__breadcrumb {
font-family: var(--font-title);
font-size: .8rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--sumi-60);
margin-bottom: 2rem;
display: flex;
align-items: center;
gap: .6rem;
flex-wrap: wrap;
}
.single-product__breadcrumb a {
color: inherit;
transition: color .2s var(--ease);
}
.single-product__breadcrumb a:hover { color: var(--hinomaru); }
.single-product__breadcrumb .dot { opacity: .5; }
.single-product__layout {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
margin-bottom: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 900px) {
.single-product__layout {
grid-template-columns: 1.2fr 1fr;
gap: 4rem;
}
}
/* --- Galerie --- */
.product-gallery__main {
aspect-ratio: 4 / 5;
background: var(--yuki);
overflow: hidden;
margin-bottom: 1rem;
}
.product-gallery__main img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.product-gallery__thumbs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: .75rem;
}
.product-gallery__thumb {
padding: 0;
border: 2px solid transparent;
background: var(--yuki);
aspect-ratio: 1 / 1;
overflow: hidden;
transition: border-color .2s var(--ease);
cursor: pointer;
}
.product-gallery__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-gallery__thumb:hover { border-color: var(--sumi-60); }
.product-gallery__thumb.is-active { border-color: var(--sumi); }
/* --- Infos produit --- */
.product-meta-line {
font-family: var(--font-title);
font-size: .85rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--sumi-60);
margin-bottom: 1rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .6rem;
}
.product-meta-line .dot { opacity: .5; }
.product-title {
font-size: clamp(2.5rem, 6vw, 4.5rem);
line-height: 1;
margin-bottom: 1.25rem;
}
.product-japanese {
font-size: clamp(1.6rem, 3vw, 2.2rem);
color: var(--sumi);
margin-bottom: .25rem;
}
.product-japanese-tr {
font-style: italic;
color: var(--sumi-60);
margin-bottom: 2rem;
}
.product-short-description {
color: var(--sumi-60);
font-size: 1rem;
line-height: 1.7;
margin-bottom: 2rem;
}
.product-short-description em { color: var(--sumi); font-style: italic; }
/* Bloc prix prominent · avant le sélecteur de taille.
Premium streetwear style · gros chiffre Saira Black + mention TVA discrète. */
.product-price-block {
display: flex;
align-items: baseline;
gap: 1rem;
margin-bottom: 1.5rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid rgba(14,14,14,.08);
}
.product-price-block__amount {
font-family: var(--font-title);
font-weight: 900;
font-size: clamp(2rem, 5vw, 2.5rem);
line-height: 1;
color: var(--sumi);
letter-spacing: -0.01em;
}
/* Reset des styles Woo internes (span, ins, del, etc.) à l'intérieur du bloc */
.product-price-block__amount .woocommerce-Price-amount,
.product-price-block__amount bdi,
.product-price-block__amount ins,
.product-price-block__amount span {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
color: inherit;
text-decoration: none;
background: transparent;
}
.product-price-block__amount del {
color: var(--sumi-60);
font-size: 0.6em;
margin-right: .5rem;
text-decoration: line-through;
}
.product-price-block__amount .woocommerce-Price-currencySymbol {
margin-left: .15em;
}
.product-price-block__vat {
font-size: .75rem;
color: var(--sumi-60);
font-style: italic;
letter-spacing: 0.02em;
white-space: nowrap;
}
/* Mobile · le prix + VAT s'empilent verticalement */
@media (max-width: 500px) {
.product-price-block {
flex-direction: column;
align-items: flex-start;
gap: .35rem;
}
}
/* --- Form Woo (variations + qty + add to cart) --- */
.product-form {
border-top: 1px solid rgba(14,14,14,.12);
border-bottom: 1px solid rgba(14,14,14,.12);
padding-block: 1.75rem;
margin-bottom: 2rem;
}
/* Prix · Woo l'affiche dans le formulaire single-variation */
.product-form .price,
.product-form p.price {
font-family: var(--font-title);
font-weight: 700;
font-size: clamp(1.5rem, 3vw, 2rem);
color: var(--sumi);
margin-bottom: 1.5rem;
}
.product-form .price del { color: var(--sumi-60); font-weight: 400; opacity: .7; }
.product-form .price ins { text-decoration: none; color: var(--hinomaru); margin-left: .5rem; }
/* Tableau des variations (Woo génère un ) */
.product-form .variations { width: 100%; margin-bottom: 1.25rem; border-collapse: collapse; }
.product-form .variations tr { display: flex; flex-direction: column; gap: .5rem; }
.product-form .variations th,
.product-form .variations td {
padding: 0;
text-align: left;
background: transparent;
}
.product-form .variations th {
font-family: var(--font-title);
font-size: .8rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--sumi-60);
font-weight: 500;
}
.product-form .variations td.value { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.product-form .variations select {
font-family: var(--font-body);
font-size: 1rem;
padding: .8rem 1rem;
border: 1px solid rgba(14,14,14,.2);
background: var(--yuki);
color: var(--sumi);
cursor: pointer;
min-width: 160px;
border-radius: 0;
}
.product-form .variations select:focus {
outline: 0;
border-color: var(--sumi);
}
.product-form .reset_variations {
font-size: .85rem;
color: var(--sumi-60);
text-decoration: underline;
}
/* Bloc qui apparaît quand une variation est sélectionnée */
.product-form .single_variation_wrap { margin-top: 1rem; }
.product-form .woocommerce-variation-availability { margin-bottom: 1rem; color: var(--sumi-60); font-size: .9rem; }
.product-form .woocommerce-variation-description { margin-bottom: 1rem; color: var(--sumi-60); }
/* Rupture de stock · variation sans stock sélectionnée */
.product-form .woocommerce-variation-availability p.stock.out-of-stock {
color: var(--hinomaru) !important;
font-family: var(--font-title);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
font-size: .85rem;
padding: .65rem 1rem;
background: rgba(185, 29, 29, .08);
border-left: 3px solid var(--hinomaru);
margin: .5rem 0 1rem;
}
.product-form .woocommerce-variation-availability p.stock.out-of-stock::before {
content: "⊘ ";
font-weight: 900;
}
/* Options dans le