/*
 * Trevis — feuille de style principale.
 * Palette sombre, typographie forte, images en avant.
 */

:root {
    --color-bg: #0a0a0a;
    --color-bg-alt: #111;
    --color-text: #f4f1ec;
    --color-text-muted: #a8a29a;
    --color-accent: #c8102e;
    --color-accent-hover: #e01438;
    --color-border: #222;
    --font-heading: "Cormorant Garamond", "Playfair Display", Georgia, serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --container-max: 1280px;
    --radius: 4px;
    --transition: 200ms ease;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover,
a:focus {
    color: var(--color-accent);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 .5em;
    letter-spacing: .01em;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }

p { margin: 0 0 1em; }

/* Utilitaires */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--color-accent);
    color: #fff;
    padding: .75rem 1rem;
    z-index: 999;
}
.skip-link:focus { top: 0; }

/* Boutons */
.btn {
    display: inline-block;
    padding: .85rem 1.75rem;
    border-radius: var(--radius);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .85rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition);
    line-height: 1;
}
.btn--primary {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}
.btn--primary:hover,
.btn--primary:focus {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: #fff;
    transform: translateY(-2px);
}
.btn--ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-text);
}
.btn--ghost:hover,
.btn--ghost:focus {
    background: var(--color-text);
    color: var(--color-bg);
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    background: rgba(10,10,10,.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border);
    z-index: 100;
}
.site-header__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}
.site-branding img,
.site-branding .custom-logo {
    max-height: 60px;
    width: auto;
}
.site-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-text);
}

/* Navigation */
.primary-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2rem;
    align-items: center;
}
.primary-navigation a {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .85rem;
    font-weight: 500;
    color: var(--color-text);
    padding: .5rem 0;
    position: relative;
}
.primary-navigation a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: width var(--transition);
}
.primary-navigation a:hover::after,
.primary-navigation .current-menu-item a::after {
    width: 100%;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: .5rem;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}
.menu-toggle__bar {
    width: 28px;
    height: 2px;
    background: var(--color-text);
    transition: all var(--transition);
}

/* Hero */
.hero {
    min-height: 85vh;
    background-color: var(--color-bg-alt);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
}
.hero--fullscreen {
    min-height: 100vh;
    /* compense la hauteur du header sticky pour un vrai plein écran visible */
    margin-top: calc(-1 * (60px + 2rem));
    padding-top: calc(60px + 2rem);
    overflow: hidden;
    background-size: 110%;
    background-position: 50% 70%; /* garde le bas de l'image visible */
    animation: trevis-hero-zoom 12s ease-out forwards;
}

@keyframes trevis-hero-zoom {
    from {
        background-size: 110%;
        background-position: 50% 70%;
    }
    to {
        background-size: 120%;
        background-position: 50% 70%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero--fullscreen {
        animation: none;
        background-size: cover;
        background-position: 50% 70%;
    }
}
.hero__overlay {
    background: linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.7));
    width: 100%;
    min-height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.5rem;
}
.hero__content { max-width: 800px; }
.hero__title {
    font-size: clamp(3rem, 8vw, 6rem);
    margin-bottom: .5rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.hero__tagline {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--color-text-muted);
    margin-bottom: 2rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.hero__cta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Sections d'accueil */
.home-section {
    padding: 5rem 0;
    border-top: 1px solid var(--color-border);
}
.section-title {
    text-align: center;
    margin-bottom: 3rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    position: relative;
    padding-bottom: 1rem;
}
.section-title::after {
    content: "";
    position: absolute;
    bottom: 0; left: 50%;
    width: 60px; height: 3px;
    transform: translateX(-50%);
    background: var(--color-accent);
}
.section-more {
    text-align: center;
    margin-top: 2.5rem;
}

/* Galerie grid */
.galerie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}
.galerie-grid--large {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}
.galerie-item {
    display: block;
    background: var(--color-bg-alt);
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    position: relative;
}
.galerie-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease, filter var(--transition);
}
.galerie-item:hover img {
    transform: scale(1.05);
    filter: brightness(.7);
}
.galerie-item__title {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1rem;
    background: linear-gradient(0deg, rgba(0,0,0,.8), transparent);
    color: #fff;
    text-transform: uppercase;
    font-size: .85rem;
    letter-spacing: .05em;
    opacity: 0;
    transition: opacity var(--transition);
}
.galerie-item:hover .galerie-item__title { opacity: 1; }

/* Galerie filter */
.galerie-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin: 2rem 0 3rem;
}
.galerie-filter__item {
    padding: .5rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.galerie-filter__item.is-active,
.galerie-filter__item:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

/* Page header */
.page-header {
    padding: 3rem 0;
    text-align: center;
}
.page-title {
    text-transform: uppercase;
    letter-spacing: .05em;
}
.page-lead {
    max-width: 720px;
    margin: 1rem auto 0;
    color: var(--color-text-muted);
}

/* 404 — peau vierge / laser */
.error-404--laser {
    padding-top: 2rem;
    text-align: center;
}
.error-404--laser .page-header {
    padding-bottom: 0;
}
.error-404--laser .page-lead {
    margin-top: .5rem;
}

.laser-scene {
    position: relative;
    width: 200px;
    max-width: 60vw;
    margin: 0 auto;
    overflow: hidden;
}

.laser-scene__arm {
    display: block;
    width: 100%;
    height: auto;
}

.arm-outline {
    fill: none;
    stroke: var(--color-text-muted);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.arm-crease {
    fill: none;
    stroke: var(--color-text-muted);
    stroke-width: 1;
    stroke-linecap: round;
    opacity: .5;
}

.ghost-ink {
    fill: var(--color-text);
    stroke: none;
    animation: ghost-fade 4s ease-in-out infinite;
}

@keyframes ghost-fade {
    0%, 100% { opacity: .35; }
    45% { opacity: .35; }
    55% { opacity: 0; }
    95% { opacity: 0; }
}

.laser-scene__beam {
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    top: 0;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    box-shadow: 0 0 12px 2px var(--color-accent), 0 0 24px 4px var(--color-accent-hover);
    animation: laser-sweep 4s ease-in-out infinite;
}

@keyframes laser-sweep {
    0% { top: 0%; opacity: 0; }
    5% { opacity: 1; }
    50% { top: calc(100% - 6px); opacity: 1; }
    55% { opacity: 0; }
    100% { top: 0%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ghost-ink,
    .laser-scene__beam {
        animation: none;
    }
    .laser-scene__beam { display: none; }
    .ghost-ink { opacity: .2; }
}

/* Contact */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .contact-layout { grid-template-columns: 1fr; }
}

/* Formulaires */
.contact-form .form-row {
    margin-bottom: 1.25rem;
}
.contact-form label {
    display: block;
    margin-bottom: .35rem;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-text-muted);
}
.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    padding: .85rem 1rem;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color var(--transition);
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    outline: none;
    border-color: var(--color-accent);
}
.contact-form input[type="file"] {
    padding: .5rem;
}
.contact-form input[type="file"]::file-selector-button {
    padding: .55rem 1.1rem;
    margin-right: 1rem;
    border: none;
    border-radius: var(--radius);
    background: var(--color-accent);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: .05em;
    cursor: pointer;
    transition: background var(--transition);
}
.contact-form input[type="file"]::file-selector-button:hover {
    background: var(--color-accent-hover);
}
.form-hint {
    margin: .5rem 0 0;
    font-size: .8rem;
    color: var(--color-text-muted);
}
.form-notice {
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: var(--radius);
    border-left: 4px solid;
}
.form-notice--success { background: rgba(0,150,60,.15); border-color: #009e40; }
.form-notice--error   { background: rgba(200,16,46,.15); border-color: var(--color-accent); }

/* Posts */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
}
.post-card {
    background: var(--color-bg-alt);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform var(--transition);
}
.post-card:hover { transform: translateY(-4px); }
.post-card__thumb img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}
.post-card__body { padding: 1.5rem; }
.post-card__title { margin: 0 0 .5rem; font-size: 1.35rem; }
.post-card__meta { color: var(--color-text-muted); font-size: .85rem; margin-bottom: .75rem; }

/* Pagination */
.pagination,
.nav-links {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin: 3rem 0;
    flex-wrap: wrap;
}
.page-numbers {
    padding: .5rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
}
.page-numbers.current,
.page-numbers:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

/* Single */
.entry-thumbnail {
    max-width: 900px;
    margin: 2rem auto;
    border-radius: var(--radius);
    overflow: hidden;
}
.entry-header { text-align: center; padding: 2rem 0; }
.entry-title { text-transform: uppercase; }
.entry-content {
    max-width: 720px;
    margin: 0 auto;
}
.entry-content img { border-radius: var(--radius); }
.entry-terms { display: block; margin-top: .5rem; color: var(--color-text-muted); }
.tatouage-nav {
    display: flex;
    justify-content: space-between;
    max-width: 900px;
    margin: 3rem auto 1rem;
    padding: 2rem 0;
    border-top: 1px solid var(--color-border);
}
.tatouage-cta {
    text-align: center;
    padding: 2rem 0 4rem;
}

/* WooCommerce basique */
.woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}
.woocommerce-page ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    background: var(--color-bg-alt);
    padding: 1rem;
    border-radius: var(--radius);
    text-align: center;
}
.woocommerce-page ul.products li.product img { border-radius: var(--radius); }
.woocommerce-page .price { color: var(--color-accent); font-weight: 600; }

.cart-link { position: relative; }
.cart-count {
    background: var(--color-accent);
    color: #fff;
    border-radius: 999px;
    padding: 0 .5rem;
    font-size: .75rem;
    margin-left: .25rem;
    min-width: 20px;
    display: inline-block;
    text-align: center;
}

/* Footer */
.site-footer {
    background: var(--color-bg-alt);
    padding: 4rem 0 2rem;
    margin-top: 5rem;
    border-top: 1px solid var(--color-border);
}
.site-footer__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    text-align: center;
}
.site-footer__widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    width: 100%;
    text-align: left;
}
.footer-menu,
.social-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
}
.site-info {
    color: var(--color-text-muted);
    font-size: .85rem;
}

/* Responsive nav */
@media (max-width: 900px) {
    .menu-toggle { display: flex; }
    .primary-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-bg-alt);
        border-bottom: 1px solid var(--color-border);
    }
    .primary-navigation.is-open { display: block; }
    .primary-navigation ul {
        flex-direction: column;
        gap: 0;
        padding: 1rem 1.5rem;
    }
    .primary-navigation li {
        padding: .75rem 0;
        border-bottom: 1px solid var(--color-border);
    }
    .primary-navigation li:last-child { border-bottom: 0; }
}


/* ------------------------------------------------------------------
 * Styles issus de l’ancien thème enfant, fusionnés ici.
 * Typographie Playfair/Karla, surfaces Liquid Glass, bascule clair/sombre.
 * ------------------------------------------------------------------ */

:root {
    --font-heading: "Playfair Display", Georgia, serif;
    --font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Liquid Glass : surfaces translucides façon verre dépoli */
    --glass-bg: rgba(20, 20, 20, .5);
    --glass-bg-strong: rgba(20, 20, 20, .65);
    --glass-border: rgba(255, 255, 255, .16);
    --glass-highlight: rgba(255, 255, 255, .22);
    --glass-blur: blur(22px) saturate(180%);
    --glass-backdrop: rgba(10, 10, 10, .6);
    --glass-media-bg: rgba(0, 0, 0, .4);
    --radius-glass: 22px;
    --radius-glass-sm: 14px;

    color-scheme: dark;
}

/*
 * Footer collé en bas : body en colonne flex sur toute la hauteur viewport,
 * .site-main prend l'espace restant, le footer reste toujours en bas même
 * si le contenu est court.
 */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
/*
 * width:100% explicite nécessaire en plus du stretch flex par défaut :
 * avec une seule vignette dans la galerie (ex. filtre "Américain" à 1
 * tatouage), le CSS Grid à l'intérieur (repeat(auto-fill, ...)) fige le
 * calcul de son nombre de colonnes AVANT que le stretch flex ne donne une
 * largeur définitive à .site-main — le sous-arbre entier (main > région >
 * grille) se réduit alors à la largeur de l'unique image (une seule
 * colonne auto-fill "indéfinie") au lieu de rester sur les 4 colonnes
 * habituelles. Un width fixe casse cette ambiguïté.
 */
.site-main {
    flex: 1 0 auto;
    width: 100%;
}
.site-footer {
    flex-shrink: 0;
}

/*
 * Icônes réseaux sociaux (footer) : même couleur que les crédits
 * (.site-info, --color-text-muted) en clair comme en sombre. Les SVG
 * injectés par trevis_child_social_svg_icons() n'ont pas d'attribut
 * fill="currentColor" en dur, donc sans cette règle ils restent noirs
 * par défaut (fill SVG natif) au lieu de suivre le thème.
 */
.social-menu a {
    color: var(--color-text-muted);
}
.social-menu a svg {
    fill: currentColor;
}
.social-menu a:hover,
.social-menu a:focus {
    color: var(--color-accent);
}

/*
 * Page d'accueil uniquement : le menu du header et le bouton "Voir la
 * galerie" restent visuellement en mode sombre, quel que soit le thème
 * clair/sombre actif (data-theme). Valeurs codées en dur (palette sombre
 * par défaut du thème parent) au lieu des variables --color-* / --glass-*,
 * qui elles suivent le data-theme — donc immunisées contre le toggle.
 */
body.home .site-header {
    background: rgba(20, 20, 20, .5);
    border-bottom-color: rgba(255, 255, 255, .16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 30px rgba(0, 0, 0, .35);
}
body.home .site-title,
body.home .primary-navigation a,
body.home .menu-toggle__bar {
    color: #f4f1ec;
}
/*
 * Menu mobile (dropdown < 900px) sur la home : le fond du parent
 * (var(--color-bg-alt)) suit le thème clair/sombre et devient blanc en
 * clair, alors que le texte ci-dessus reste codé en dur en couleur claire
 * (#f4f1ec) → texte illisible sur fond blanc. On force aussi le fond du
 * dropdown en sombre pour rester cohérent avec le header glass.
 */
@media (max-width: 900px) {
    body.home .primary-navigation {
        background: rgba(20, 20, 20, .92);
        border-bottom-color: rgba(255, 255, 255, .16);
    }
    body.home .primary-navigation li {
        border-bottom-color: rgba(255, 255, 255, .16);
    }
}

/*
 * "Trevis Tattooer" en 1.5rem uppercase serif casse sur 2 lignes sous
 * ~480px (peu de place à côté du burger + toggle thème). Le header
 * devient alors bien plus haut que les 60px+2rem supposés par la
 * compensation de .hero--fullscreen (margin-top/padding-top négatifs,
 * thème parent), ce qui laisse un bandeau du fond de page visible entre
 * le header et l'image plein écran. On réduit la taille pour garder le
 * titre sur une ligne et le header à sa hauteur attendue.
 */
@media (max-width: 480px) {
    .site-title {
        font-size: 1.1rem;
        white-space: nowrap;
    }
}

body.home .hero .btn--ghost {
    background: rgba(20, 20, 20, .5);
    border-color: rgba(255, 255, 255, .16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
    color: #f4f1ec;
}
body.home .hero .btn--ghost:hover,
body.home .hero .btn--ghost:focus {
    background: #f4f1ec;
    color: #0a0a0a;
}

/*
 * Page Contact : sur bureau, .contact-layout__left regroupe intro+adresse
 * en un seul enfant de la grille (colonne 1) — comme dans la structure
 * d'origine avant sa séparation, donc son sommet reste aligné avec le
 * formulaire (colonne 2), peu importe la hauteur relative des deux blocs.
 * (Un essai précédent avec 3 enfants + grid-template-areas cassait cet
 * alignement : la 2e ligne de la grille, qui portait l'adresse,
 * démarrait après toute la hauteur de la 1re ligne au lieu de suivre
 * l'intro directement.)
 *
 * En colonne unique (max-width:768px, thème parent), `display: contents`
 * dissout ce wrapper : intro/adresse redeviennent des enfants directs de
 * la grille, ce qui permet de les réordonner individuellement avec
 * `order` pour placer l'adresse après le formulaire.
 */
@media (max-width: 768px) {
    .contact-layout__left { display: contents; }
    .contact-layout__intro { order: 1; }
    .contact-layout__form { order: 2; }
    .contact-layout__address { order: 3; }
}

/*
 * Page Biographie (page-id-11) : la photo est un bloc image Gutenberg
 * avec un CSS personnalisé posé depuis l'éditeur (`float:left; margin:
 * 0px 25px 0px 0px`), figé sur toutes les tailles d'écran — il n'y a
 * pas de réglage responsive pour ce CSS-là dans l'éditeur. Résultat sur
 * mobile : image collée à gauche (jamais centrée, le float ne centre
 * jamais) et quasi aucun espace avant le texte (marge basse à 0). On
 * neutralise le float sous 768px pour centrer l'image en bloc et lui
 * donner une vraie marge basse.
 */
@media (max-width: 768px) {
    .page-id-11 .wp-block-image.has-custom-css {
        float: none;
        margin: 0 auto 2rem;
    }
}

/* Page Fiche de soin : bouton de téléchargement du PDF (icône + texte) */
.page-fiche-soin .page-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}
.btn--pdf {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

/*
 * Crédit développeur : masqué par défaut (copyright seul, centré). Au
 * survol/focus, réapparaît sur la même ligne et toute la ligne se
 * recentre avec lui (display:none/inline-block, pas juste opacity, pour
 * que sa largeur n'existe pas du tout hors survol).
 */
.site-credit {
    display: none;
    margin-left: .5rem;
    color: var(--color-text-muted);
    text-decoration: underline;
}
.site-info:hover .site-credit,
.site-info:focus-within .site-credit {
    display: inline-block;
}
.site-credit:hover,
.site-credit:focus {
    color: var(--color-accent);
}

/*
 * Dark/light mode : la palette sombre ci-dessus (héritée du thème parent)
 * reste la valeur par défaut. Deux façons de passer en clair :
 * 1) préférence système, si l'utilisateur n'a jamais choisi manuellement
 *    (pas d'attribut data-theme posé par js/theme-toggle.js) ;
 * 2) choix manuel via le bouton du header, qui pose data-theme="light"
 *    sur <html> et le mémorise en localStorage (voir header.php pour le
 *    script anti-flash qui applique ce choix avant le premier rendu).
 */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --color-bg: #f4f1ec;
        --color-bg-alt: #ffffff;
        --color-text: #1a1816;
        --color-text-muted: #6b655c;
        --color-accent: #c8102e;
        --color-accent-hover: #a50d26;
        --color-border: #e2ddd3;

        --glass-bg: rgba(255, 255, 255, .55);
        --glass-bg-strong: rgba(255, 255, 255, .4);
        --glass-border: rgba(20, 20, 20, .1);
        --glass-highlight: rgba(255, 255, 255, .6);
        --glass-backdrop: rgba(244, 241, 236, .55);
        --glass-media-bg: rgba(255, 255, 255, .35);

        color-scheme: light;
    }
}

:root[data-theme="light"] {
    --color-bg: #f4f1ec;
    --color-bg-alt: #ffffff;
    --color-text: #1a1816;
    --color-text-muted: #6b655c;
    --color-accent: #c8102e;
    --color-accent-hover: #a50d26;
    --color-border: #e2ddd3;

    --glass-bg: rgba(255, 255, 255, .55);
    --glass-bg-strong: rgba(255, 255, 255, .4);
    --glass-border: rgba(20, 20, 20, .1);
    --glass-highlight: rgba(255, 255, 255, .6);
    --glass-backdrop: rgba(244, 241, 236, .55);
    --glass-media-bg: rgba(255, 255, 255, .35);

    color-scheme: light;
}

::selection {
    background: var(--color-accent);
    color: #fff;
}

/*
 * Le hero plein écran superpose toujours un dégradé sombre à la photo
 * (.hero__overlay, thème parent), quel que soit le thème clair/sombre
 * du site. Son texte doit donc rester clair en dur, sans dépendre de
 * --color-text — sinon il devient illisible en thème clair.
 */
.hero__title,
.hero__tagline {
    color: #f4f1ec;
}

/*
 * Page d'accueil, bureau uniquement : titre remonté légèrement et
 * agrandi (tablette/mobile inchangés, cf. clamp() du thème parent qui
 * suffit sur ces tailles).
 */
@media (min-width: 901px) {
    body.home .hero__content {
        transform: translateY(-3rem);
    }
    body.home .hero__title {
        font-size: clamp(3rem, 9vw, 7rem);
    }
}

/*
 * `100vh` (thème parent) se base sur la hauteur du viewport barre
 * d'adresse visible. Sur mobile (Safari/Chrome), cette barre se
 * rétracte/réapparaît au scroll sans que `vh` ne se recalcule aussitôt :
 * l'image de fond, dimensionnée sur le petit vh initial, laisse alors
 * apparaître le fond de page sous le hero au lieu de couvrir tout
 * l'écran réel. `dvh` (dynamic viewport height) suit la taille réelle
 * visible ; on le pose en second, après le fallback `vh` pour les
 * navigateurs qui ne le supportent pas.
 */
.hero--fullscreen {
    min-height: 100dvh;
}

/*
 * L'animation de zoom lent (thème parent, background-size 110%→120%)
 * recadre l'image en continu — sur petit écran ce recadrage mange une
 * bonne partie de la photo au lieu de la montrer en entier. On coupe
 * l'animation et on repasse en `cover` fixe pour afficher l'image
 * complète, comme sur bureau/tablette mais sans le zoom.
 */
@media (max-width: 768px) {
    .hero--fullscreen {
        animation: none;
        background-size: cover;
        background-position: 50% 70%;
    }
}

/*
 * Liquid Glass — surfaces clés du site (header, boutons secondaires,
 * cartes) passent en verre dépoli : fond translucide + backdrop-filter
 * + liseré clair en haut pour simuler un reflet. Le radius serré
 * (--radius, 4px) reste la signature "tattoo" du site ; le glass prend
 * un radius plus généreux (--radius-glass*), cohérent avec l'esthétique
 * de verre incurvé, sans toucher au thème parent.
 */
.site-header {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 var(--glass-highlight), 0 8px 30px rgba(0, 0, 0, .35);
}

/*
 * Regroupe nav + bouton clair/sombre pour garder site-header__inner à
 * 2 blocs visibles en desktop (branding / actions) avec justify-content:
 * space-between hérité du thème parent — sans ce wrapper, le bouton
 * deviendrait un 3e item flex et casserait cet espacement.
 */
.site-header__actions {
    display: flex;
    align-items: center;
    gap: 2rem;
}
@media (max-width: 900px) {
    .site-header__actions { gap: .75rem; }
}

.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    background: var(--glass-bg);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    box-shadow: inset 0 1px 0 var(--glass-highlight);
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--transition);
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
    background: var(--color-accent);
    color: #fff;
}
.theme-toggle__icon--moon { display: none; }
.theme-toggle[aria-pressed="true"] .theme-toggle__icon--sun { display: none; }
.theme-toggle[aria-pressed="true"] .theme-toggle__icon--moon { display: block; }

.btn--ghost {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-color: var(--glass-border);
    box-shadow: inset 0 1px 0 var(--glass-highlight);
}
.btn--ghost:hover,
.btn--ghost:focus {
    background: var(--color-text);
    color: var(--color-bg);
}

.galerie-item,
.post-card {
    border: 1px solid var(--glass-border);
}

/*
 * Réservation : le widget LatePoint reçoit sa couleur de marque (rouge
 * accent) et ses coins nets via ses propres réglages d'apparence
 * (trevis_sync_latepoint_appearance, inc/latepoint-bridge.php).
 *
 * Le panneau reste blanc/clair même en scheme "custom" côté plugin (codé
 * en dur dans OsStylesHelper) — le site étant sombre, ça jure. On
 * réécrit ici les mêmes variables CSS que le plugin s'injecte lui-même
 * en :root (voir la balise <style> générée par generate_css_variables) :
 * notre feuille de style charge après la sienne, donc gagne à
 * spécificité égale. Plus robuste qu'une chasse aux couleurs codées en
 * dur dans son front.css minifié (387 Ko).
 */
:root {
    --latepoint-body-color: var(--color-text);
    --latepoint-headings-color: var(--color-text);
    --latepoint-color-text-faded: var(--color-text-muted);
    --latepoint-calendar-weekday-label-bg: var(--color-border);
    --latepoint-side-panel-bg: var(--color-bg-alt);
    --latepoint-summary-panel-bg: var(--color-bg-alt);
}
.latepoint-book-form-wrapper {
    margin-top: 2rem;
    font-family: var(--font-body);
}
.latepoint-book-form-wrapper .latepoint-w {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}
/*
 * Ces quatre-là ont un fond blanc codé en dur (background-color:#fff),
 * pas piloté par variable CSS, via des sélecteurs à 2-3 classes chaînées
 * (ex. .latepoint-w .latepoint-booking-form-element .latepoint-form-w) —
 * plus spécifiques que le simple nom de classe ici, donc gagnants même
 * chargés avant nous. !important nécessaire pour les battre sans
 * dupliquer leurs chaînes de sélecteurs (fragile aux updates du plugin).
 * Les champs de saisie (inputs/selects) ont eux du blanc en !important
 * côté plugin : volontairement laissés blancs, lisibilité + zéro guerre
 * de spécificité supplémentaire.
 */
.latepoint-booking-form-element,
.latepoint-form-w,
.latepoint-form-w form,
.latepoint-w .os-form-w,
.latepoint-footer,
.latepoint-heading-w {
    background-color: var(--color-bg-alt) !important;
}
/*
 * .os-item-i : ligne sélectionnable générique (service, agent, créneau...),
 * réutilisée sur presque toutes les étapes du parcours de réservation.
 */
.os-item-i {
    background-color: var(--color-bg) !important;
    border-color: var(--color-border) !important;
}
/* Bouton secondaire ("Retour"...) : même esprit que .btn--ghost du site */
.latepoint-btn.latepoint-btn-white {
    background-color: transparent !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-text) !important;
}
/* Bandeau des jours de la semaine du calendrier (fond #f5f5f5 codé en dur) */
.os-weekdays .weekday {
    background-color: var(--color-border) !important;
    color: var(--color-text-muted) !important;
}
/* Chiffres du calendrier : couleur quasi noire codée en dur, illisible sur fond sombre */
.os-day-number {
    color: var(--color-text) !important;
}
/* Pastille "aujourd'hui" : fond pêche clair codé en dur + notre texte
   crème par-dessus = illisible. Reprend l'accent rouge du site. */
.os-today .os-day-number {
    background-color: var(--color-accent) !important;
    color: #fff !important;
}
/*
 * Formulaire "Vos informations" (nouveau client / connexion) : mêmes
 * sélecteurs à 4 classes que le plugin (textfield/select/phone groups),
 * copiés tels quels — une chaîne plus courte perd malgré !important
 * (même !important, la spécificité départage toujours).
 */
.latepoint-w .os-form-group.os-form-select-group .os-form-control,
.latepoint-w .os-form-group.os-form-select-group input.os-form-control,
.latepoint-w .os-form-group.os-form-textfield-group .os-form-control,
.latepoint-w .os-form-group.os-form-textfield-group input.os-form-control,
.latepoint-w .os-form-group.os-form-phonefield-group .os-form-control,
.latepoint-w .os-form-group.os-form-phonefield-group input.os-form-control,
.latepoint-w .os-form-group.os-form-group-simple.os-form-textfield-group .os-form-control,
.latepoint-w .os-form-group.os-form-group-simple.os-form-select-group .os-form-control {
    background-color: var(--color-bg-alt) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}
.latepoint-w .os-form-group.os-form-group-simple.os-form-textfield-group.os-form-phonefield-group .lp_iti {
    background-color: var(--color-bg-alt) !important;
    border-color: var(--color-border) !important;
}
.os-form-group .os-form-control::placeholder {
    color: var(--color-text-muted) !important;
}
.os-step-tab {
    color: var(--color-text-muted) !important;
}
.os-step-tab.active {
    color: var(--color-text) !important;
}

/* Fiche tatouage : informations techniques */
.tatouage-infos {
    list-style: none;
    max-width: 480px;
    margin: 2rem auto;
    padding: 0;
    border-top: 1px solid var(--color-border);
}
.tatouage-infos li {
    display: flex;
    justify-content: space-between;
    padding: .6rem 0;
    border-bottom: 1px solid var(--color-border);
}
.tatouage-infos__label { color: var(--color-text-muted); }
.tatouage-infos__value { font-weight: 600; }

/* Galerie : région filtrable (swap fetch, voir assets/js/galerie.js) */
.galerie-region {
    transition: opacity 150ms ease;
}
.galerie-region.is-loading {
    opacity: .4;
    pointer-events: none;
}

/* Galerie : grille modernisée + zoom léger au survol */
.galerie-grid--large {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
}

/*
 * Sous 900px, `minmax(200px|260px, 1fr)` en auto-fill (thème parent +
 * règle ci-dessus) ne laisse tenir qu'1 colonne : la largeur dispo
 * (viewport moins padding) est toujours < 2× le minimum. On fixe le
 * nombre de colonnes explicitement pour ne plus jamais retomber à 1 sur
 * mobile/tablette : 2 colonnes en dessous de 480px, 3 au-delà.
 */
@media (max-width: 480px) {
    .galerie-grid,
    .galerie-grid--large {
        grid-template-columns: repeat(2, 1fr);
        gap: .75rem;
    }
}
@media (min-width: 481px) and (max-width: 900px) {
    .galerie-grid,
    .galerie-grid--large {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}
.galerie-item {
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
    transition: box-shadow var(--transition), transform var(--transition);
}
.galerie-item:hover,
.galerie-item:focus-visible {
    box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
    transform: translateY(-3px);
}
.galerie-item__badge {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 2;
    padding: .25rem .6rem;
    border-radius: var(--radius-glass-sm);
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 var(--glass-highlight);
}
.galerie-item__badge--disponible {
    background: rgba(200, 16, 46, .55);
    color: #fff;
}
/*
 * Fond sombre fixe (photo dessous) quel que soit le thème : texte clair
 * en dur, --color-text-muted flipperait en gris foncé en thème clair et
 * deviendrait illisible.
 */
.galerie-item__badge--reserve {
    background: rgba(10, 10, 10, .45);
    color: #a8a29a;
}
.galerie-item__badge--realise {
    background: rgba(10, 10, 10, .35);
    color: #a8a29a;
}
.galerie-item img {
    transition: transform 500ms ease, filter var(--transition);
}
.galerie-item:hover img,
.galerie-item:focus-visible img {
    transform: scale(1.03);
    filter: brightness(.75);
}

/* Galerie : lightbox */
.galerie-lightbox-data { display: none; }
body.has-lightbox-open { overflow: hidden; }
.galerie-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.galerie-lightbox[hidden] { display: none; }
.galerie-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: var(--glass-backdrop);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.galerie-lightbox__panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr);
    gap: 0;
    max-width: 1100px;
    max-height: 90vh;
    width: 100%;
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-glass);
    overflow: hidden;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, .35),
        inset 0 1px 0 var(--glass-highlight);
    animation: galerie-lightbox-in 220ms ease;
}
/* Reflet spéculaire diagonal, signature du Liquid Glass */
.galerie-lightbox__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--glass-highlight) 0%, rgba(255, 255, 255, 0) 35%);
    pointer-events: none;
}
@keyframes galerie-lightbox-in {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}
.galerie-lightbox__media {
    background: var(--glass-media-bg);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 90vh;
}
.galerie-lightbox__media img {
    width: 100%;
    height: 100%;
    max-height: 90vh;
    object-fit: contain;
}
.galerie-lightbox__details {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    overflow: hidden;
}
.galerie-lightbox__details .tatouage-infos {
    max-width: none;
    margin: 1rem 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.galerie-lightbox__details .tatouage-cta {
    flex-shrink: 0;
}
.galerie-lightbox__title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin: 0;
}
.galerie-lightbox__close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 1;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    background: var(--glass-bg);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    box-shadow: inset 0 1px 0 var(--glass-highlight);
    color: var(--color-text);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition);
}
.galerie-lightbox__close:hover,
.galerie-lightbox__close:focus-visible {
    background: var(--color-accent);
    color: #fff;
}

.galerie-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    background: var(--glass-bg);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    box-shadow: inset 0 1px 0 var(--glass-highlight);
    color: var(--color-text);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.galerie-lightbox__nav:hover,
.galerie-lightbox__nav:focus-visible {
    background: var(--color-accent);
    color: #fff;
}
.galerie-lightbox__nav--prev { left: 1rem; }
.galerie-lightbox__nav--next { right: 1rem; }
.galerie-lightbox__nav[hidden] { display: none; }

@media (max-width: 768px) {
    .galerie-lightbox { padding: .75rem; }
    .galerie-lightbox__panel {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 26vh) minmax(0, 1fr);
        max-height: 92vh;
        height: auto;
        border-radius: var(--radius-glass);
    }
    .galerie-lightbox__media { max-height: 26vh; }
    .galerie-lightbox__media img { max-height: 26vh; }
    .galerie-lightbox__details { padding: 1rem 3.25rem; }
    .galerie-lightbox__title { font-size: 1.15rem; }
    .galerie-lightbox__details .tatouage-infos { margin: .35rem 0; font-size: .85rem; }
    .galerie-lightbox__details .tatouage-infos li {
        flex-direction: column;
        align-items: flex-start;
        gap: .1rem;
        padding: .3rem 0;
    }
    .galerie-lightbox__details .tatouage-infos__label { font-size: .7rem; }
    .galerie-lightbox__details .tatouage-cta {
        text-align: center;
        padding: 1rem 0 2rem;
    }
    .galerie-lightbox__nav {
        width: 2.25rem;
        height: 2.25rem;
    }
    .galerie-lightbox,
    .galerie-lightbox__media img {
        touch-action: pan-y;
    }
}

/*
 * Boutons WooCommerce (fiche produit, panier, checkout) : le plugin
 * n'a pas de style propre ici (aucune règle .woocommerce dans le thème
 * parent hormis la grille produits), donc ses boutons restent en CSS
 * par défaut du plugin — hors charte. On les fait suivre le même
 * design que .btn/.btn--primary du site (mêmes variables --color-*,
 * donc compatible clair/sombre automatiquement).
 * `a.add_to_cart_button` en plus de `.button` : la grille "Nouveau dans
 * la boutique" du panier vide (WooCommerce Blocks) rend ses boutons en
 * `.wp-block-button__link.add_to_cart_button`, sans classe `.button`, et
 * cette grille n'est jamais enveloppée dans un `<div class="woocommerce">`
 * (page basée sur le bloc Panier, pas le template classique) — d'où le
 * `.woocommerce-page` (classe posée sur `<body>`) plutôt que `.woocommerce`
 * comme sélecteur ancêtre. Sans ça, ils héritaient du bouton noir arrondi
 * par défaut du block-library au lieu du style du site.
 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce-page a.add_to_cart_button {
    display: inline-block;
    padding: .85rem 1.75rem;
    border-radius: var(--radius);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .85rem;
    border: 2px solid var(--color-accent);
    background: var(--color-accent);
    color: #fff;
    cursor: pointer;
    transition: all var(--transition);
    line-height: 1;
}
/* Un cran plus petit que les autres boutons WooCommerce (liste de produits compacte, pas une CTA principale) */
.woocommerce-page a.add_to_cart_button {
    padding: .55rem 1.1rem;
    font-size: .7rem;
}
.woocommerce a.button:hover,
.woocommerce a.button:focus,
.woocommerce button.button:hover,
.woocommerce button.button:focus,
.woocommerce input.button:hover,
.woocommerce input.button:focus,
.woocommerce #respond input#submit:hover,
.woocommerce #respond input#submit:focus,
.woocommerce-page a.add_to_cart_button:hover,
.woocommerce-page a.add_to_cart_button:focus {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: #fff;
    transform: translateY(-2px);
}
.woocommerce a.button.disabled,
.woocommerce a.button.disabled:hover,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.woocommerce input.button:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

/*
 * `.alt` (WooCommerce : "Ajouter au panier" fiche produit, "Passer la
 * commande"...) a un fond violet par défaut posé par une règle plugin
 * plus spécifique (.woocommerce button.button.alt, 3 classes) que la
 * règle générique ci-dessus (2 classes) — seul le fond passait au
 * travers, le reste (padding/radius/bordure) suivait déjà. On réaffirme
 * la couleur du site à specificité égale.
 */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}
.woocommerce a.button.alt:hover,
.woocommerce a.button.alt:focus,
.woocommerce button.button.alt:hover,
.woocommerce button.button.alt:focus,
.woocommerce input.button.alt:hover,
.woocommerce input.button.alt:focus {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: #fff;
}

/*
 * Actions secondaires ("Continuer mes achats" sur le panier, retour
 * boutique...) : variante ghost, comme .btn--ghost.
 */
.woocommerce .wc-backward {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-text);
}
.woocommerce .wc-backward:hover,
.woocommerce .wc-backward:focus {
    background: var(--color-text);
    color: var(--color-bg);
}

/*
 * Panier/checkout "bloc" (Gutenberg WooCommerce Blocks — /panier utilise
 * ce système ici, pas le panier classique) : markup et classes CSS
 * totalement différents des boutons WooCommerce classiques ci-dessus
 * (.wc-block-components-button au lieu de .button), donc aucune des
 * règles précédentes ne les touche. Le thème block-library fixe déjà
 * radius/couleur en inline via des custom properties assez fortes,
 * d'où les !important pour être sûr de gagner la cascade.
 */
.wc-block-components-button.wp-element-button {
    border-radius: var(--radius) !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    font-weight: 600 !important;
    background: var(--color-accent) !important;
    color: #fff !important;
    border: 2px solid var(--color-accent) !important;
}
.wc-block-components-button.wp-element-button:hover,
.wc-block-components-button.wp-element-button:focus {
    background: var(--color-accent-hover) !important;
    border-color: var(--color-accent-hover) !important;
    color: #fff !important;
}
.wc-block-components-button.wp-element-button.wc-block-components-button--outlined,
.wc-block-cart__submit-button.wc-block-components-button--outlined {
    background: transparent !important;
    color: var(--color-text) !important;
    border-color: var(--color-text) !important;
}

/*
 * Tri "Tri par défaut" de l'archive boutique : select natif du
 * navigateur, hors charte (fond blanc, bordure grise système). Même
 * recette que les champs de .contact-form (fond/bordure/radius du
 * thème) + flèche custom en SVG inline puisque `appearance:none`
 * retire celle du navigateur.
 */
.woocommerce-ordering select.orderby {
    appearance: none;
    -webkit-appearance: none;
    padding: .65rem 2.25rem .65rem 1rem;
    background-color: var(--color-bg-alt);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b655c' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .85rem center;
    background-size: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-family: inherit;
    font-size: .9rem;
    cursor: pointer;
    transition: border-color var(--transition);
}
.woocommerce-ordering select.orderby:focus {
    outline: none;
    border-color: var(--color-accent);
}

/*
 * Champs WooCommerce (fiche produit, panier, checkout) : deux systèmes
 * de markup cohabitent ici comme pour les boutons — le classique
 * (input.qty, input.input-text) et les blocs Gutenberg (checkout, dont
 * .wc-block-components-text-input pose la bordure sur l'input avec un
 * radius à 0 et un fond blanc pur). Ni l'un ni l'autre ne reprend le
 * fond/bordure/radius des champs du site (voir .contact-form input).
 */
.woocommerce input.qty,
.woocommerce input.input-text,
.woocommerce textarea,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-address-form input,
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input,
.wc-block-components-textarea,
#cc_montant {
    background-color: var(--color-bg-alt) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius) !important;
    color: var(--color-text) !important;
    font-family: inherit !important;
    transition: border-color var(--transition);
}
.woocommerce input.qty:focus,
.woocommerce input.input-text:focus,
.woocommerce textarea:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:focus,
.wc-block-components-textarea:focus,
#cc_montant:focus {
    outline: none;
    border-color: var(--color-accent) !important;
}
#cc_montant {
    padding: .5rem .75rem !important;
    font-size: 1rem;
}
.wc-block-components-quantity-selector {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.wc-block-components-quantity-selector__button {
    color: var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
    .galerie-lightbox__panel { animation: none; }
    .galerie-item img,
    .galerie-item { transition: none; }
}

/*
 * Bandeau événementiel / promotionnel (inc/customizer-bandeau.php).
 *
 * Les couleurs viennent des variables --bandeau-bg / --bandeau-text posées en
 * style inline par le rendu PHP : elles sont choisies par le tatoueur dans le
 * Customizer et ne doivent donc PAS suivre la bascule clair/sombre, contrairement
 * aux variables --color-*. Les valeurs de repli ici ne servent qu'au cas où le
 * style inline serait absent.
 */
.bandeau-promo {
    /*
     * z-index au-dessus du header sticky (z-index: 100) : sur la page
     * d'accueil, .hero--fullscreen remonte de calc(60px + 2rem), soit plus que
     * la hauteur réelle du header, et recouvrirait sinon le bas du bandeau.
     */
    position: relative;
    z-index: 101;
    background: var(--bandeau-bg, #c8102e);
    color: var(--bandeau-text, #fff);
    font-family: var(--bandeau-font, var(--font-body));
    line-height: 1.4;
    text-align: center;

    /* Taille du texte standard et hauteur correspondante (texte + paddings). */
    --bandeau-texte-base: .9rem;
    --bandeau-hauteur-base: 2.76rem;
    /*
     * Taille maximale : celle qui remplit toute la hauteur du bandeau à
     * l'épaisseur choisie, en ne gardant que .25rem de respiration en haut et
     * en bas (d'où le -.5rem, cohérent avec le padding réduit ci-dessous).
     */
    --bandeau-texte-max: calc((var(--bandeau-hauteur-base) * var(--bandeau-echelle, 1) - .5rem) / 1.4);
    /*
     * --bandeau-texte va de 0 (réglage « Taille du texte » à 100 %, rendu
     * standard) à 1 (300 %, le texte occupe toute la hauteur du bandeau).
     * Le maximum dépend de l'épaisseur : les deux réglages restent donc
     * cohérents entre eux, un bandeau plus épais autorisant un texte plus grand.
     */
    font-size: calc(
        var(--bandeau-texte-base)
        + var(--bandeau-texte, 0) * (var(--bandeau-texte-max) - var(--bandeau-texte-base))
    );
}
.bandeau-promo__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    /*
     * Le padding vertical se resserre à mesure que le texte grossit (.75rem à
     * taille standard, .25rem au maximum) : c'est ce qui permet au texte de
     * remplir le bandeau sans en augmenter la hauteur.
     */
    padding: calc(.75rem - var(--bandeau-texte, 0) * .5rem) 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem 1rem;
    /*
     * Épaisseur réglable : --bandeau-echelle vaut 1 (hauteur standard) à 3, et
     * multiplie la hauteur naturelle du bandeau (texte + paddings).
     * min-height plutôt que padding pour que le contenu reste centré et que
     * l'échelle 1 ne modifie rien du rendu d'origine.
     */
    min-height: calc(var(--bandeau-hauteur-base) * var(--bandeau-echelle, 1));
}
/* Place pour la croix de fermeture, qui chevauche sinon le texte long. */
.bandeau-promo--dismissible .bandeau-promo__inner {
    padding-right: 3rem;
    padding-left: 3rem;
}
.bandeau-promo__message {
    margin: 0;
    /*
     * Un texte agrandi finit par passer sur plusieurs lignes (le bandeau
     * s'étire alors au-delà de l'épaisseur choisie, min-height n'étant pas une
     * hauteur fixe) : balance répartit les lignes au lieu de laisser un mot
     * seul sur la dernière.
     */
    text-wrap: balance;
}
.bandeau-promo a {
    color: inherit;
}
.bandeau-promo__message a {
    text-decoration: underline;
    text-underline-offset: .2em;
}
.bandeau-promo__message a:hover,
.bandeau-promo__message a:focus {
    color: inherit;
    opacity: .8;
}
.bandeau-promo__cta {
    display: inline-block;
    flex-shrink: 0;
    padding: .3rem .9rem;
    border: 1px solid currentColor;
    border-radius: var(--radius);
    /*
     * Le bouton suit l'agrandissement du texte, mais de façon très atténuée :
     * à taille de texte maximale il resterait sinon minuscule à côté du
     * message, ou deviendrait plus large que le bandeau s'il suivait à
     * l'identique.
     */
    font-size: calc(.78rem + var(--bandeau-texte, 0) * .32rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    white-space: nowrap;
    transition: background-color var(--transition), color var(--transition);
}
.bandeau-promo__cta:hover,
.bandeau-promo__cta:focus {
    background: var(--bandeau-text, #fff);
    color: var(--bandeau-bg, #c8102e);
}
.bandeau-promo__close {
    position: absolute;
    top: 50%;
    right: .75rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .35rem;
    background: none;
    border: 0;
    border-radius: var(--radius);
    color: inherit;
    opacity: .75;
    cursor: pointer;
    transition: opacity var(--transition);
}
.bandeau-promo__close:hover,
.bandeau-promo__close:focus {
    opacity: 1;
}
.bandeau-promo :focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/*
 * Texte défilant (option « Faire défiler le texte »).
 *
 * La piste contient deux copies du message séparées par un gap de 3rem : la
 * translation d'une copie + un gap, soit calc(-50% - 1.5rem), ramène la
 * seconde copie exactement là où était la première, d'où une boucle sans
 * saut visible.
 */
/*
 * En mode défilant, la zone de défilement prend toute la largeur disponible :
 * sans nowrap, le bouton passerait systématiquement à la ligne sous le texte.
 */
.bandeau-promo--defilant .bandeau-promo__inner {
    flex-wrap: nowrap;
}
.bandeau-promo__defilement {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    /* Fondu sur les bords pour que le texte n'apparaisse pas net d'un coup. */
    mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
}
.bandeau-promo__piste {
    display: flex;
    width: max-content;
    gap: 3rem;
    animation: bandeau-defilement 25s linear infinite;
}
.bandeau-promo__defilement:hover .bandeau-promo__piste {
    animation-play-state: paused;
}
.bandeau-promo--defilant .bandeau-promo__message {
    white-space: nowrap;
}
@keyframes bandeau-defilement {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 1.5rem)); }
}
/*
 * Animation désactivée : le message redevient statique et centré, la copie
 * de bouclage n'a plus lieu d'être.
 */
@media (prefers-reduced-motion: reduce) {
    .bandeau-promo__piste {
        animation: none;
        width: auto;
        justify-content: center;
    }
    .bandeau-promo__piste .bandeau-promo__message[aria-hidden="true"] {
        display: none;
    }
    .bandeau-promo--defilant .bandeau-promo__message {
        white-space: normal;
    }
}

@media (max-width: 600px) {
    /*
     * Sur mobile, on abaisse la taille de référence et la hauteur de base
     * plutôt que font-size / min-height : la formule d'agrandissement du texte
     * reste valable, simplement calée sur un bandeau un peu plus compact.
     */
    .bandeau-promo {
        --bandeau-texte-base: .82rem;
        --bandeau-hauteur-base: 2.45rem;
    }
    /*
     * Seule la droite réserve la place de la croix de fermeture : 2.5rem de
     * chaque côté, c'était 80 px pris sur les ~390 px d'un écran de téléphone.
     */
    .bandeau-promo__inner,
    .bandeau-promo--dismissible .bandeau-promo__inner {
        padding: calc(.65rem - var(--bandeau-texte, 0) * .45rem) 2.2rem calc(.65rem - var(--bandeau-texte, 0) * .45rem) 1rem;
    }
    /*
     * Bouton nettement plus discret : à taille bureau il occupait presque la
     * moitié de la largeur, ne laissant qu'une fenêtre étroite au message.
     */
    .bandeau-promo__cta {
        padding: .22rem .6rem;
        font-size: calc(.68rem + var(--bandeau-texte, 0) * .16rem);
        letter-spacing: .04em;
    }
    /*
     * Sur téléphone, le bouton passe sous le message plutôt qu'à côté : le
     * texte récupère toute la largeur, ce qui compte surtout en mode défilant
     * où la fenêtre de lecture était très étroite. Le nowrap posé plus haut
     * pour le bureau est donc annulé ici, et la zone de défilement force le
     * retour à la ligne en occupant une ligne de flex entière.
     */
    .bandeau-promo--defilant .bandeau-promo__inner {
        flex-wrap: wrap;
    }
    .bandeau-promo__defilement,
    .bandeau-promo__inner > .bandeau-promo__message {
        flex: 1 0 100%;
    }
    /*
     * Le padding est asymétrique (droite plus large pour la croix), donc le
     * centrage flex placerait le bouton visiblement à gauche du milieu du
     * bandeau : on rattrape l'écart entre les deux côtés.
     */
    .bandeau-promo__cta {
        margin-left: 1.2rem;
    }
}

@media print {
    .bandeau-promo {
        display: none;
    }
}