/*
 Theme Name:   Apecolor Child
 Template:     kadence
 Description:  Thème enfant de Kadence pour Apecolor
 Version:      1.2.0
*/

/* ==========================================================================
   Règle du projet : réglages NATIFS d'abord (voir CLAUDE.md). Ce fichier ne
   contient que ce que les réglages de Kadence/WooCommerce ne peuvent pas
   faire : l'apparence des cartes produit personnalisées, les pastilles de
   catégories et le filtre par créateur (markup du plugin apecolor-roles).
   Polices, palette, en-tête, menu, titres : réglages du Personnalisateur,
   appliqués par setup-storefront.php.
   ========================================================================== */

/* ==========================================================================
   Fichiers de polices, hébergés par le thème (aucune requête vers Google
   depuis le navigateur du visiteur : Loi 25). Les FAMILLES (Figtree pour le
   texte, Outfit pour les titres) sont choisies dans le Personnalisateur de
   Kadence ; ce bloc ne fait que fournir les fichiers. Pourquoi pas l'option
   native « Charger les polices localement » de Kadence : elle plante en
   erreur 500 côté visiteur (bogue de Kadence 1.5.2) et, même corrigée, ne
   produisait pas de fichiers locaux ici. Licence : assets/fonts/LICENSE-FONTS.txt.
   ========================================================================== */
@font-face {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("assets/fonts/outfit-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("assets/fonts/outfit-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("assets/fonts/figtree-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("assets/fonts/figtree-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html:root {
    --apc-line: #E6E1DA;
    --apc-shadow: 0 10px 28px rgba(27, 33, 72, .12);
    --apc-display: var(--global-heading-font-family);
}

/* Couleur d'étiquette (--apc-fg) et de fond doux (--apc-bg) par catégorie.
   Appliquées aux cartes (classe WooCommerce product_cat-*) et aux pastilles
   de filtre (classe apc-cat-*). Une catégorie ajoutée plus tard sans règle
   ici retombe sur le gris neutre défini plus bas. */
.product_cat-animaux,            .apc-cat-animaux            { --apc-fg: #B85A05; --apc-bg: #FDE7D0; }
.product_cat-fleurs-et-plantes,  .apc-cat-fleurs-et-plantes  { --apc-fg: #B8306E; --apc-bg: #FBDFEB; }
.product_cat-nature-et-paysages, .apc-cat-nature-et-paysages { --apc-fg: #26794C; --apc-bg: #DAF0E2; }
.product_cat-fantaisie,          .apc-cat-fantaisie          { --apc-fg: #5F44BC; --apc-bg: #E6E0FA; }
.product_cat-mandalas-et-motifs, .apc-cat-mandalas-et-motifs { --apc-fg: #8F6606; --apc-bg: #F7EAC2; }
.product_cat-saisons-et-fetes,   .apc-cat-saisons-et-fetes   { --apc-fg: #1F6FB2; --apc-bg: #D9E9F8; }

/* ==========================================================================
   Filtres de la boutique (markup : includes/catalog-filters.php du plugin)
   ========================================================================== */
.apecolor-catalog-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin: 0 0 18px;
}
.apecolor-cat-pills {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 auto;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.apecolor-cat-pills li {
    margin: 0;
}
.apc-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    color: var(--global-palette3);
    background: #fff;
    border: 1px solid var(--apc-line);
    border-radius: 999px;
    text-decoration: none;
}
.apc-pill .apc-dot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--apc-fg, var(--global-palette6));
}
.apc-pill .apc-pill-count {
    font-size: 12.5px;
    color: var(--global-palette5);
}
.apc-pill:hover {
    border-color: var(--apc-fg, var(--global-palette3));
    color: var(--global-palette3);
}
.apc-pill.is-active {
    background: var(--apc-bg, var(--global-palette7));
    border-color: var(--apc-fg, var(--global-palette3));
    color: var(--apc-fg, var(--global-palette3));
}
.apc-pill.is-active .apc-pill-count {
    color: inherit;
    opacity: .75;
}
.apc-pill-all.is-active {
    background: var(--global-palette3);
    border-color: var(--global-palette3);
    color: #fff;
}
/* Menu « Créateur » : dans la ligne native « N résultats / tri » de Kadence,
   entre le compteur (à gauche) et le tri (à droite). Le menu prend le style
   natif du tri via sa classe `orderby`. */
.apecolor-creator-filter {
    order: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 20px 0 0;
    font-size: 90%;
    line-height: 30px;
    color: var(--global-palette5);
}
.apecolor-creator-filter label {
    margin: 0;
}
.kadence-woo-ordering {
    order: 2;
}
@media (min-width: 768px) {
    .kadence-woo-results-count {
        margin-right: auto;
    }
}

/* ==========================================================================
   Cartes produit (boutique, accueil, produits liés)
   Ordre dans la carte : image (format fixe, teintée), catégorie, titre,
   créateur + prix. Markup ajouté par includes/catalog-filters.php ; la
   police du titre et du prix est réglée dans le Personnalisateur
   (« Archives de produits »), le bouton « Ajouter au panier » au survol est
   celui, natif, de Kadence.
   ========================================================================== */
body ul.products li.product {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--apc-line);
    border-radius: 12px;
    box-shadow: none;
    transition: transform .18s ease, box-shadow .18s ease;
    --apc-fg: var(--global-palette5);
    --apc-bg: var(--global-palette7);
}
body ul.products li.product:hover {
    transform: translateY(-2px);
    box-shadow: var(--apc-shadow);
}
body ul.products li.product .woocommerce-loop-image-link {
    display: block;
    aspect-ratio: 8 / 5;
    background: var(--apc-bg);
    overflow: hidden;
}
body ul.products li.product .woocommerce-loop-image-link img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
}
body ul.products li.product .product-details.entry-content-wrap {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 13px 15px 15px;
}
.apc-chip,
body ul.products li.product .apc-chip {
    align-self: flex-start;
    padding: 2px 9px;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.5;
    color: var(--apc-fg);
    background: var(--apc-bg);
    border-radius: 999px;
}
.apc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* Pastille « Avec l'aide de l'IA » : fiche produit seulement. */
.apc-chip--ia {
    --apc-fg: #4A4F6A;
    --apc-bg: #E9EAF2;
}
/* Cartes : icône « IA » en coin de l'image (ai-declaration.php du plugin),
   en bas à droite pour ne pas croiser la pastille « Promo » de WooCommerce. */
body ul.products li.product .woocommerce-loop-image-link {
    position: relative;
}
body ul.products li.product .apc-ia-mark {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #4A4F6A;
    background: rgba(255, 255, 255, .88);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(27, 33, 72, .18);
}
.apc-single-ia {
    margin: 0 0 10px;
}
body ul.products li.product .woocommerce-loop-product__title {
    margin: 0;
    text-wrap: balance;
}
body ul.products li.product .apc-card-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 4px;
}
body ul.products li.product .apc-by {
    font-size: 13px;
    color: var(--global-palette5);
}
body ul.products li.product .apc-card-foot .price {
    margin: 0 0 0 auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    body ul.products li.product {
        transition: none;
    }
    body ul.products li.product:hover {
        transform: none;
    }
}

/* ==========================================================================
   Page d'accueil — tuiles de catégories (blocs « Couverture » natifs).
   Seul ajout personnalisé : rendre TOUTE la tuile cliquable (le titre est un
   lien ; le bloc Couverture n'est pas cliquable en lui-même).
   ========================================================================== */
.wp-block-cover.apc-tile {
    transition: transform .18s ease, box-shadow .18s ease;
}
.wp-block-cover.apc-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--apc-shadow);
}
.wp-block-cover.apc-tile a {
    color: inherit;
    text-decoration: none;
}
/* Le conteneur de texte du bloc Couverture est lui-même positionné : sans ce
   qui suit, le lien étiré ne couvrait que la hauteur du titre (les clics sur
   le reste de la tuile ne faisaient rien — constaté le 2026-09-19). On le
   fait donc occuper toute la tuile, texte aligné en bas à gauche, et le lien
   s'étire sur ce conteneur. */
.wp-block-cover.apc-tile .wp-block-cover__inner-container {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
    padding: 1em;
}
.wp-block-cover.apc-tile .wp-block-cover__inner-container > * {
    margin: 0;
}
.wp-block-cover.apc-tile a::after {
    content: "";
    position: absolute;
    inset: 0;
}
@media (prefers-reduced-motion: reduce) {
    .wp-block-cover.apc-tile { transition: none; }
    .wp-block-cover.apc-tile:hover { transform: none; }
}

/* ==========================================================================
   Créateurs en vedette (markup : [apecolor_createurs] du plugin)
   ========================================================================== */
.apecolor-createurs-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 1.5em 0 0;
}
.apecolor-createur-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px 16px 16px;
    background: #fff;
    border: 1px solid var(--apc-line);
    border-radius: 14px;
}
.apecolor-createur-card img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
}
.apecolor-createur-card strong {
    display: block;
    color: var(--global-palette3);
}
.apecolor-createur-card .apecolor-createur-count {
    font-size: 13px;
    color: var(--global-palette5);
}
/* La carte mène à la page du créateur (1.28.0). */
a.apecolor-createur-card {
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease;
}
a.apecolor-createur-card:hover,
a.apecolor-createur-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--apc-shadow);
}
.apecolor-createur-logo img {
    object-fit: cover;
    background: #fff;
}

/* ==========================================================================
   Page publique d'un créateur (/createur/<nom>/, code court
   [apecolor_page_createur] du plugin) — format « lien en bio » : une colonne
   centrée, puis les créations en vedette (cartes natives de la boutique).
   ========================================================================== */
.apc-creator-page {
    --apc-plum: #A03E95;
    --apc-plum-dark: #88327F;
    padding-block: 8px 24px;
}
.apc-creator-head {
    max-width: 560px;
    margin: 0 auto;
    display: grid;
    justify-items: center;
    gap: 14px;
    text-align: center;
}
.apc-creator-logo {
    width: 148px;
    height: 148px;
    border-radius: 28px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--apc-line);
    box-shadow: 0 6px 20px rgba(27, 33, 72, .07);
    display: grid;
    place-items: center;
}
.apc-creator-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.apc-creator-initial {
    font-family: var(--apc-display);
    font-weight: 700;
    font-size: 56px;
    color: var(--global-palette1);
}
.apc-creator-name {
    margin: 4px 0 0;
    font-size: clamp(26px, 5vw, 34px);
    line-height: 1.15;
    text-wrap: balance;
}
.apc-creator-meta {
    margin: -6px 0 0;
    font-size: 14px;
    color: var(--global-palette5);
}
.apc-creator-hidden-note {
    margin: 0;
    padding: 8px 14px;
    border-radius: 10px;
    background: #FBE3E4;
    color: #9B1C24;
    font-size: 14px;
}
.apc-creator-bio {
    width: 100%;
    text-align: left;
    overflow-wrap: anywhere;
}
.apc-creator-bio > :last-child {
    margin-bottom: 0;
}
.apc-creator-links {
    width: 100%;
    max-width: 380px;
    display: grid;
    gap: 10px;
    margin-top: 4px;
}
.apc-creator-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 20px;
    border: 2px solid var(--apc-plum);
    border-radius: 999px;
    background: #fff;
    color: var(--apc-plum);
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.apc-creator-btn:hover,
.apc-creator-btn:focus-visible {
    background: var(--apc-plum);
    color: #fff;
}
.apc-creator-btn svg {
    width: 18px;
    height: 18px;
    flex: none;
}
.apc-creator-ext {
    opacity: .7;
    font-weight: 400;
}
.apc-creator-btn--main {
    border-color: var(--global-palette1);
    background: var(--global-palette1);
    color: #fff;
}
.apc-creator-btn--main:hover,
.apc-creator-btn--main:focus-visible {
    border-color: var(--global-palette2);
    background: var(--global-palette2);
}
.apc-creator-share {
    padding: 0;
    border: 0;
    background: none;
    color: var(--global-palette5);
    font-size: 13.5px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.apc-creator-share:hover {
    background: none;
    color: var(--global-palette1);
}
.apc-creator-featured {
    margin-top: 44px;
    padding-top: 26px;
    border-top: 1px solid var(--apc-line);
}
.apc-creator-featured-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    margin-bottom: 18px;
}
.apc-creator-featured-head h2 {
    margin: 0;
    font-size: 22px;
}
.apc-creator-featured-head a {
    font-weight: 600;
    text-decoration: none;
}
.apc-creator-more {
    margin: 22px 0 0;
    text-align: center;
}
@media (max-width: 640px) {
    .apc-creator-logo {
        width: 120px;
        height: 120px;
        border-radius: 24px;
    }
}

/* Boutique filtrée : retour vers la page du créateur. */
.apc-creator-back {
    margin: 0 0 12px;
    font-size: 14px;
}
.apc-creator-back a {
    font-weight: 600;
    text-decoration: none;
}

/* ==========================================================================
   Mon compte → Ma page (formulaire du créateur)
   ========================================================================== */
.apc-profile-form {
    display: grid;
    gap: 28px;
}
.apc-profile-form fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    gap: 10px;
}
.apc-profile-form legend {
    padding: 0;
    margin-bottom: 6px;
    font-family: var(--apc-display);
    font-weight: 600;
    font-size: 19px;
    color: var(--global-palette3);
}
.apc-profile-form .form-row {
    margin: 0;
}
.apc-profile-help {
    display: block;
    font-size: 13px;
    color: var(--global-palette5);
}
.apc-profile-live {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #E3F4EA;
    color: #1E6B3E;
}
.apc-profile-live code {
    overflow-wrap: anywhere;
}
.apc-profile-live-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.apc-profile-logo-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}
.apc-creator-logo--small {
    width: 92px;
    height: 92px;
    border-radius: 18px;
    box-shadow: none;
}
.apc-creator-logo--small .apc-creator-initial {
    font-size: 36px;
}
.apc-profile-check {
    display: block;
    margin-top: 6px;
    font-size: 14px;
}
.apc-profile-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}
.apc-profile-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--apc-line);
    border-radius: 10px;
    background: #fff;
}
.apc-profile-item.is-dragging {
    opacity: .45;
}
.apc-profile-link input[type="text"] {
    flex: 1 1 0;
    min-width: 0;
}
.apc-profile-link input[name="apecolor_link_url[]"] {
    flex-grow: 1.4;
}
.apc-profile-handle {
    color: var(--global-palette6);
    cursor: grab;
    user-select: none;
}
.apc-profile-thumb img {
    display: block;
    width: 64px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
}
.apc-profile-work {
    flex: 1;
    min-width: 0;
    display: grid;
    font-size: 13px;
    color: var(--global-palette5);
}
.apc-profile-work strong {
    font-size: 14px;
    color: var(--global-palette3);
    overflow-wrap: anywhere;
}
.apc-profile-moves {
    display: inline-flex;
    gap: 4px;
    margin-left: auto;
}
.apc-profile-mv {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--apc-line);
    border-radius: 8px;
    background: #fff;
    color: var(--global-palette3);
}
.apc-profile-mv:hover {
    background: var(--global-palette7);
    color: var(--global-palette3);
}
.apc-profile-mv:disabled {
    opacity: .3;
    cursor: default;
}
.apc-profile-del {
    color: #9B1C24;
}
.apc-profile-others .apc-profile-item {
    background: var(--global-palette8);
}
.apc-profile-others.is-full .apc-profile-add {
    opacity: .4;
}
.apc-profile-subtitle {
    margin: 8px 0 0;
    font-weight: 600;
    color: var(--global-palette3);
}
.apc-profile-add-link {
    justify-self: start;
}
.apc-profile-form:not(.apc-has-js) .apc-js-only {
    display: none;
}
@media (max-width: 640px) {
    .apc-profile-link {
        flex-wrap: wrap;
    }
    .apc-profile-link input[type="text"] {
        flex-basis: calc(100% - 40px);
    }
}

/* ==========================================================================
   Page d'accueil — hauteurs et alignements réguliers
   ========================================================================== */
/* Colonnes dont les boîtes (étapes, « Pourquoi le grayscale ») ont toutes la
   hauteur de la plus haute — le bloc Colonnes étire les colonnes mais pas le
   groupe qu'elles contiennent. */
.wp-block-columns.apc-equal > .wp-block-column > .wp-block-group {
    height: 100%;
}
/* Grille d'images : le thème ajoute une marge sous chaque figure, ce qui
   donnait un espacement vertical plus grand que l'horizontal. */
.wp-block-group.apc-grid > .wp-block-image {
    margin: 0;
}
/* « Coloriage du jour » : le code court WooCommerce affiche la carte dans une
   grille de 4 colonnes — ici, une seule carte, de largeur raisonnable. */
.apc-day ul.products {
    display: block;
    max-width: 320px;
    margin-inline: auto;
}
.apc-day ul.products li.product {
    width: 100%;
    margin: 0;
}

/* ==========================================================================
   Fiche produit (éléments natifs de Kadence : catégorie, titre, prix, bouton,
   onglets, produits similaires — ici seulement les retouches de forme)
   ========================================================================== */
.single-product .single-product-category {
    margin: 0 0 6px;
}
.single-product a.product-single-category {
    display: inline-block;
    padding: 2px 9px;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.5;
    text-decoration: none;
    color: var(--apc-fg, var(--global-palette5));
    background: var(--apc-bg, var(--global-palette7));
    border-radius: 999px;
}
.single-product div.product .woocommerce-product-gallery {
    overflow: hidden;
    background: transparent;
    border: none;
    border-radius: 14px;
}
.apc-single-by {
    margin: 4px 0 10px;
    font-size: 14px;
    color: var(--global-palette5);
}
.apc-single-by a {
    color: var(--global-palette2);
}
.single-product .summary .price {
    font-family: var(--apc-display);
    font-weight: 600;
    font-size: 30px;
    color: var(--global-palette2);
}

/* Cadres d'information du modèle « on imprime, on ne télécharge pas » (fiche
   produit et page de remerciement — leur style était auparavant en ligne dans
   le plugin, et absent de la page de remerciement). */
.apecolor-print-only-notice,
.apecolor-thankyou-print-reminder {
    margin: 1em 0;
    padding: 14px 16px;
    font-size: 14px;
    background: #DCF1EF;
    border-radius: 12px;
}
.apecolor-print-only-notice p,
.apecolor-thankyou-print-reminder p {
    margin: 0;
}
.apecolor-print-only-notice strong,
.apecolor-thankyou-print-reminder strong {
    color: var(--global-palette2);
}

/* Mon compte → Mes revenus (markup : creator-earnings.php du plugin). */
.apc-earnings-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin: 0 0 24px;
}
.apc-earnings-stats > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #E3DED5;
    border-radius: 12px;
}
.apc-earnings-stats span,
.apc-earnings-stats small {
    font-size: 13px;
    color: #5A5F7A;
}
.apc-earnings-stats strong {
    font-size: 1.4rem;
    font-variant-numeric: tabular-nums;
}
.apc-statement {
    background: #fff;
    border: 1px solid #E3DED5;
    border-radius: 8px;
    padding: 20px;
    overflow-x: auto;
}

/* Formulaires de création (Mon compte → Nouvelle création / Modifier ; markup :
   creator-dashboard.php, pricing.php et ai-declaration.php du plugin).
   Retour de l'utilisateur (2026-10-13) : espacements inégaux, questions à choix
   collées à leur cadre, consignes aussi grosses que les champs. */
.apecolor-creation-form .form-row {
    margin: 0 0 1.4em;
    padding: 0;
}
.apecolor-creation-form .description {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.5;
    color: #5A5F7A;
}
/* Questions à choix (format, déclaration IA) : même titre que les autres
   champs, choix aérés dans un cadre léger. */
.apecolor-creation-form fieldset.apecolor-type-choice {
    margin: 0 0 1.4em;
    padding: 4px 16px 14px;
    border: 1px solid var(--apc-line);
    border-radius: 8px;
    background: #fff;
}
.apecolor-creation-form fieldset.apecolor-type-choice legend {
    padding: 0 6px;
    margin-left: -6px;
    line-height: 2.4;
    font-size: 90%;
    font-weight: bold;
    color: var(--global-palette5);
}
.apecolor-creation-form fieldset.apecolor-type-choice label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 6px 0;
    line-height: 1.4;
    font-size: 15px;
    font-weight: 400;
    color: var(--global-palette3);
    cursor: pointer;
}
.apecolor-creation-form fieldset.apecolor-type-choice input[type="radio"] {
    margin: 0;
    flex: none;
    accent-color: #0B8A84;
}
.apecolor-creation-form fieldset.apecolor-type-choice .description {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--apc-line);
}
/* Champ fichier : sur sa propre ligne, consignes en dessous. */
.apecolor-creation-form input[type="file"] {
    display: block;
    width: 100%;
    margin-bottom: 4px;
    padding: 10px;
    border: 1px dashed #C9C2B6;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
}
.apecolor-creation-form .apecolor-submit-row {
    margin-top: 2em;
}

/* Message « envoi en cours » / erreur sous le bouton (markup :
   apecolor_render_submit_feedback() du plugin). */
.apecolor-submitting {
    display: block;
    margin-top: 10px;
    padding: 10px 14px;
    font-size: 14px;
    background: #DCF1EF;
    border-left: 4px solid #0B8A84;
    border-radius: 8px;
}
.apecolor-submitting[hidden] {
    display: none;
}
/* PDF refusé avant l'envoi (nombre de pages compté dans le navigateur). */
.apecolor-file-error {
    display: block;
    margin: 6px 0 8px;
    padding: 10px 14px;
    font-size: 14px;
    background: #FBE9E7;
    border-left: 4px solid #B3261E;
    border-radius: 8px;
    color: #5F1410;
}
.apecolor-file-error[hidden] {
    display: none;
}
.apecolor-creation-form button[disabled] {
    opacity: .7;
    cursor: progress;
}

/* Fenêtre d'envoi par-dessus la page (<dialog> natif ouvert en modal : le
   reste de la page est inerte tant qu'elle est ouverte). */
.apecolor-upload-overlay {
    width: min(440px, calc(100vw - 32px));
    padding: 28px 28px 24px;
    border: 0;
    border-radius: 16px;
    background: #fff;
    color: var(--global-palette3);
    box-shadow: var(--apc-shadow);
    text-align: center;
}
.apecolor-upload-overlay::backdrop {
    background: rgba(27, 33, 72, .55);
    backdrop-filter: blur(2px);
}
.apecolor-upload-overlay p {
    margin: 0;
}
.apecolor-upload-overlay__title {
    font-family: var(--apc-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: #1B2148;
}
.apecolor-upload-overlay__step {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px !important;
    font-size: 15px;
    text-align: left;
}
.apecolor-upload-overlay__percent {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #087069;
}
.apecolor-upload-overlay progress {
    display: block;
    width: 100%;
    height: 10px;
    margin-top: 8px;
    border: 0;
    border-radius: 999px;
    background: #E6F3F2;
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
    accent-color: #0B8A84;
}
.apecolor-upload-overlay progress::-webkit-progress-bar {
    background: #E6F3F2;
    border-radius: 999px;
}
.apecolor-upload-overlay progress::-webkit-progress-value {
    background: #0B8A84;
    border-radius: 999px;
    transition: width .2s;
}
.apecolor-upload-overlay progress::-moz-progress-bar {
    background: #0B8A84;
    border-radius: 999px;
}
/* Préparation (durée inconnue) : barre « indéterminée » animée. */
.apecolor-upload-overlay progress:not([value]) {
    background: linear-gradient(90deg, #E6F3F2 0 35%, #0B8A84 35% 65%, #E6F3F2 65%) 0 0 / 300% 100%;
    animation: apc-indeterminate 1.4s linear infinite;
}
.apecolor-upload-overlay progress:not([value])::-webkit-progress-bar {
    background: transparent;
}
.apecolor-upload-overlay progress:not([value])::-moz-progress-bar {
    background: transparent;
}
@keyframes apc-indeterminate {
    from { background-position: 100% 0; }
    to   { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .apecolor-upload-overlay progress:not([value]) {
        animation: none;
        background: #0B8A84;
        opacity: .5;
    }
}
.apecolor-upload-overlay__warn {
    margin-top: 20px !important;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    background: #FDF1E3;
    border-left: 4px solid #F0851A;
    border-radius: 8px;
}
.apecolor-upload-overlay__warn strong {
    display: block;
    margin-bottom: 2px;
}

/* Formulaire de création refusé : le fichier doit être choisi à nouveau
   (le navigateur ne pré-remplit jamais un champ fichier). */
.apecolor-reselect-file {
    margin: 0 0 8px;
    padding: 10px 14px;
    font-size: 14px;
    background: #FDF1E3;
    border-left: 4px solid #F0851A;
    border-radius: 8px;
}

/* ==========================================================================
   Mon compte → Mes impressions (markup : print-delivery.php du plugin)
   ========================================================================== */
.apc-prints {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 1em;
}
.apc-print-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--apc-line);
    border-radius: 12px;
    --apc-fg: var(--global-palette5);
    --apc-bg: var(--global-palette7);
}
.apc-print-thumb {
    aspect-ratio: 8 / 5;
    background: var(--apc-bg);
}
.apc-print-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
}
.apc-print-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 13px 15px 15px;
}
.apc-print-body h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.25;
}
.apc-print-body .button {
    align-self: flex-start;
    margin-top: auto;
}

/* Album : grille des pages en miniatures (print-thumbnails.php du plugin) ;
   un clic ouvre la page, prête à imprimer. */
.apc-album-grid,
.woocommerce-MyAccount-content .apc-album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 16px;
    margin: 1em 0 0;
    padding: 0;
    list-style: none;
}
.woocommerce-MyAccount-content .apc-album-grid li {
    margin: 0;
}
.apc-album-grid a,
.apc-album-wait {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}
.apc-album-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 17 / 22; /* feuille Lettre */
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--apc-line);
    border-radius: 8px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.apc-album-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
    -webkit-user-drag: none;
    user-select: none;
}
.apc-album-grid a:hover .apc-album-thumb,
.apc-album-grid a:focus-visible .apc-album-thumb {
    border-color: var(--global-palette1);
    box-shadow: var(--apc-shadow);
    transform: translateY(-2px);
}
.apc-album-num {
    font-size: 14px;
    text-align: center;
}
.apc-album-wait {
    opacity: .5;
}
.apc-album-wait .apc-album-thumb {
    font-size: 13px;
    background: var(--global-palette7);
}
@media (prefers-reduced-motion: reduce) {
    .apc-album-thumb { transition: none; }
    .apc-album-grid a:hover .apc-album-thumb { transform: none; }
}

/* Coloriage déjà acheté : bloc « Imprimer » de la fiche produit (même famille
   que le cadre « Comment ça marche »). */
.apc-owned {
    margin: 1em 0;
    padding: 14px 16px;
    font-size: 14px;
    background: #DCF1EF;
    border-radius: 12px;
}
.apc-owned p {
    margin: 0 0 10px;
}
.apc-owned strong {
    color: var(--global-palette2);
}

/* ==========================================================================
   Boutons et champs : rétablir le style de Kadence sur GoDaddy Managed
   (constaté sur le staging le 2026-09-21).

   L'hébergeur injecte, dans <head>, un bloc <style id="wp-site-designer-
   contrast-fallback"> (mu-plugin « Site Designer », hors de notre contrôle)
   qui applique à TOUS les `button[type=submit]`, `input` et `textarea`/`select`
   sous `.wp-site-blocks` — classe que Kadence porte sur son conteneur — des
   couleurs d'un thème à blocs (`--wp--preset--color--accent-2`, `base`,
   `contrast`). Kadence ne définit pas ces variables : fond transparent,
   bordure absente, texte sombre. Absent en local, donc invisible en dev.

   On redonne à ces éléments les valeurs de Kadence (mêmes variables de palette
   que global.css), avec une spécificité juste au-dessus de celle du bloc de
   l'hébergeur. Sans effet là où ce bloc n'existe pas (rendu identique au
   natif). Les boutons `.wp-element-button` (blocs Panier/Paiement) sont exclus
   par l'hébergeur lui-même : rien à faire pour eux. */
body .wp-site-blocks :is(button, input)[type="submit"]:not(.wp-element-button) {
    background-color: var(--global-palette-btn-bg);
    color: var(--global-palette-btn);
    border-width: 0;
    padding: .4em 1em;
    font-size: 1.125rem;
    line-height: 1.6;
}
/* Kadence donne ce padding aux boutons des formulaires WooCommerce (woocommerce.css). */
body .wp-site-blocks .woocommerce form .form-row :is(button, input)[type="submit"]:not(.wp-element-button) {
    padding: calc(.4em + 1px) 1em;
}
body .wp-site-blocks :is(button, input)[type="submit"]:not(.wp-element-button):is(:hover, :focus, :active) {
    background-color: var(--global-palette-btn-bg-hover);
    color: var(--global-palette-btn-hover);
}
/* Même chaîne de :not() que le bloc de l'hébergeur (sinon sa spécificité l'emporte).
   Les champs des blocs Panier/Paiement de WooCommerce sont exclus : ils ont leur
   propre style, que cette règle ne doit pas écraser. */
html body .wp-site-blocks input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="image"]):not([type="hidden"]):not(:is(.wp-block-woocommerce-checkout, .wp-block-woocommerce-cart) *),
html body .wp-site-blocks textarea:not(:is(.wp-block-woocommerce-checkout, .wp-block-woocommerce-cart) *) {
    background-color: var(--global-palette9);
    color: var(--global-palette5);
    border: 1px solid var(--global-gray-400);
}
/* Les <select> : couleur de texte du corps (palette4), comme chez Kadence ; la
   flèche est une image de fond que le bloc de l'hébergeur ne touche pas. */
html body .wp-site-blocks select:not(:is(.wp-block-woocommerce-checkout, .wp-block-woocommerce-cart) *) {
    background-color: var(--global-palette9);
    color: var(--global-palette4);
    border: 1px solid var(--global-gray-400);
}
/* Tri de la boutique : Kadence le veut sans fond et souligné seulement (woocommerce.css). */
html body .wp-site-blocks select.orderby {
    background-color: transparent;
    border-width: 0 0 1px;
    border-style: none none solid;
}

/* « Mes créations » : boutons d'action d'une ligne (Modifier / Supprimer) espacés,
   sur une ou deux lignes selon la largeur, au lieu d'être collés. */
.apecolor-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* « Mes créations » : titre + bouton « Ajouter » sur la même ligne (le
   formulaire de soumission a sa propre page depuis le 2026-09-23 — voir
   « Nouvelle création » — d'où ce bouton en haut plutôt qu'un formulaire en
   bas de liste). */
.apecolor-creator-dashboard-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.apecolor-creator-dashboard-head h2 {
    margin: 0;
}

/* Convention de créateur : résumé dépliable et case d'acceptation
   (creator-terms.php du plugin). */
.apecolor-convention-summary {
    margin: 10px 0;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #E4E0D8;
    border-radius: 10px;
}
.apecolor-convention-summary summary {
    font-weight: 600;
    cursor: pointer;
}
.apecolor-convention-summary ul {
    margin: 8px 0 0 1.2em;
}
.apecolor-convention-required form > p,
.apecolor-convention-row {
    margin-top: 10px;
}
.apecolor-convention-status {
    margin-top: 1.5em;
    color: var(--global-palette5);
}
.apecolor-ai-missing {
    color: #B85A05;
}