/**
 * Aquiles Frontend Styles
 * Location: /styles/styles.css
 * Usage: Single Jewelry, Collection Archive, Global Theme
 */
 /* --- POLICES --- */

 /* --- MASQUER PROPREMENT LE HEADER KADENCE --- */
body.aquiles #main-header,
body.aquiles .site-header-wrap {
    display: block !important;       /* GARDEZ BLOCK ! Ne jamais mettre none */
    visibility: hidden !important;   /* Rend invisible mais garde la place dans le DOM */
    position: absolute !important;   /* Sort du flux normal pour ne pas pousser le contenu */
    top: -1000px !important;         /* Envoie très loin en haut */
    left: 0;
    width: 100%;
    height: 0 !important;            /* Force la hauteur à 0 */
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;     /* Cache tout débordement */
    z-index: -1 !important;          /* Met derrière tout le reste */
    pointer-events: none !important; /* Empêche tout clic accidentel */
}
/* ==========================================
   FORCE AFFICHAGE MENU MOBILE PARTOUT
   ========================================== */
/* --- 1. LE HEADER FIXE --- */
/* Conteneur principal */
.custom-header-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    /* Par défaut, on espace les éléments s'ils sont deux */
    justify-content: space-between; 
    padding: 0 30px;
    box-sizing: border-box;
    z-index: 9999;
    background: rgba(255,255,255,0.0); /* Transparent */
    transition: background 0.3s;
}

/* Le Logo */
.custom-site-logo {
    display: block;
    height: 50px;
    width: auto;
    z-index: 10002;
}
.custom-site-logo img {
    height: 100%;
    width: auto;
    display: block;
}

/* Le Bouton Hamburger */
.custom-toggle-btn {
    /* On garde position relative ou static pour qu'il respecte le flexbox */
    position: relative; 
    z-index: 10002;
    background: transparent !important;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    outline: none;
}

/* Si le logo est absent (page d'accueil), le bouton doit quand même être à droite.
   Grâce à 'justify-content: space-between' du parent et au fait que le logo n'existe pas,
   le bouton se retrouvera automatiquement à droite si c'est le seul enfant.
   MAIS, pour être sûr qu'il ne se colle pas à gauche si le flex bugue : */
   
body.home .custom-header-wrap {
    justify-content: flex-end; /* Force le contenu restant (le bouton) à droite */
}

body:not(.home) .custom-header-wrap {
    justify-content: space-between; /* Logo à gauche, Bouton à droite */
}

/* Animation du hamburger (inchangée) */
.hamburger-line {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #FC0D1B;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center center;
}
.home .hamburger-line {
    background-color: rgba(0,0,0,1);
}

body.menu-is-open .line-1 { transform: translateY(9.5px) rotate(45deg); background-color: #FC0D1B !important; }
body.menu-is-open .line-2 { opacity: 0; transform: translateX(-5px); }
body.menu-is-open .line-3 { transform: translateY(-9.5px) rotate(-45deg); background-color: #FC0D1B !important; }

/* --- 3. LE MENU PLEIN ÉCRAN (OVERLAY) --- */
.custom-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #000000; /* Fond noir */
    z-index: 10000; /* Juste en dessous du bouton */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* État OUVERT */
body.menu-is-open .custom-menu-overlay {
    opacity: 1;
    visibility: visible;
}

/* Contenu du menu */
.custom-menu-content {
    text-align: center;
    transform: translateY(30px);
    transition: transform 0.4s ease-in-out;
}

body.menu-is-open .custom-menu-content {
    transform: translateY(0);
}

/* 1. Le conteneur de la liste (UL) */
.custom-menu-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; 
    gap: 20px;   
}

/* 2. Les éléments de liste (LI) */
.custom-menu-list li {
    display: block !important;        
    width: 100% !important;           
    text-align: center !important;    
    margin: 15px 0 !important;        
    padding: 0 !important;       
    overflow: visible !important;    
}

/* 3. Les liens (A) */
.custom-menu-list a {
    display: inline-block !important; 
    text-decoration: none !important;
    color: #ffffff !important;
    font-size: 32px !important;
    font-weight: 300 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    transition: color 0.3s ease, transform 0.3s ease !important;
}

/* 4. Effet Hover et Page Active (Rouge Aquiles) */
.custom-menu-list a:hover,
.custom-menu-list li.current-menu-item a {
    color: #FC0D1B !important; /* Votre couleur primaire Aquiles */
    transform: scale(1.05);
}



body.aquiles .entry-content-wrap {
    padding: 0;
}
/* --- CORRECTION AFFICHAGE 3 IMAGES AQUILES --- */

/* 1. Force le conteneur principal en LIGNE (Row) */
.aquiles-grid-wrapper {
    display: flex !important;
    flex-direction: row !important; /* Horizontal */
    flex-wrap: nowrap !important;   /* Interdit de passer à la ligne */
    width: 100% !important;
    gap: 0 !important;
}

/* 2. Force chaque enfant (Item ou Lien) à prendre sa part équitable */
/* Le sélecteur > a gère le cas où l'item est enveloppé d'un lien */
.aquiles-grid-wrapper > div,
.aquiles-grid-wrapper > a {
    flex: 1 1 0 !important; /* La règle magique : 0 force le recalcul égalitaire */
    width: auto !important;
    min-width: 0 !important; /* Empêche l'image de faire exploser la boîte */
    height: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. S'assure que l'image remplit son parent */
.aquiles-grid-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* 4. Correction spécifique Kadence si le conteneur parent limite la largeur */
.wp-block-aqyu-image-grid {
    max-width: 100% !important;
    width: 100% !important;
}
/* --- Single Jewelry Page --- */
.aqyu-single-wrapper { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 40px 20px; 
    font-family: var(--aqyu-font-family-base); 
}

.aqyu-grid { 
    display: grid; 
    grid-template-columns: 1.2fr 1fr; 
    gap: var(--aqyu-spacing-grid); 
    align-items: start; 
}

.aqyu-image-container img { 
    width: 100%; 
    height: auto; 
    border-radius: 2px; 
    display: block; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.aqyu-info h1 { 
    font-size: 2.5rem; 
    margin: 0 0 15px; 
    line-height: 1.2; 
    color: var(--aqyu-color-text-dark); 
}

.aqyu-badges { margin-bottom: 20px; }

.aqyu-badge { 
    display: inline-block; 
    padding: 6px 12px; 
    font-size: 0.75rem; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    margin-right: 10px; 
    color: #fff; 
    border-radius: 2px;
}

.aqyu-badge-sold { background: #333; }
.aqyu-badge-unique { background: var(--aqyu-color-primary); }

.aqyu-meta-list { 
    list-style: none; 
    padding: 0; 
    margin: 25px 0; 
    font-size: 1.1rem; 
    color: var(--aqyu-color-text-med); 
}

.aqyu-meta-list li { 
    margin-bottom: 10px; 
    border-bottom: 1px solid var(--aqyu-color-border); 
    padding-bottom: 10px; 
}

.aqyu-meta-list strong { 
    color: var(--aqyu-color-text-dark); 
    font-weight: 600; 
}

.aqyu-meta-list a {
    color: var(--aqyu-color-primary);
    text-decoration: none;
    border-bottom: 1px solid rgba(252, 13, 27, 0.3);
    transition: border-color 0.2s;
}
.aqyu-meta-list a:hover {
    border-bottom-color: var(--aqyu-color-primary);
}

.aqyu-price-display { 
    font-size: 1.8rem; 
    font-weight: 700; 
    color: var(--aqyu-color-text-dark); 
    margin: 30px 0; 
}

.aqyu-price-display.sold { 
    text-decoration: line-through; 
    color: #999; 
}

.aqyu-desc { 
    margin-top: 40px; 
    padding-top: 30px; 
    border-top: 1px solid var(--aqyu-color-border); 
    line-height: 1.6; 
    color: #444; 
}

.aqyu-back-link { 
    display: inline-block; 
    margin-bottom: 30px; 
    text-decoration: none; 
    color: var(--aqyu-color-text-light); 
    font-weight: 600; 
    transition: color 0.3s; 
}

.aqyu-back-link:hover { 
    color: var(--aqyu-color-primary); 
}

/* Responsive Single */
@media (max-width: 768px) {
    .aqyu-grid { grid-template-columns: 1fr; gap: 30px; }
    .aqyu-info h1 { font-size: 2rem; }
}

/* --- Collection Archive --- */
.aqyu-collection-header { 
    text-align: center; 
    padding: 80px 20px 40px; 
    background: var(--aqyu-color-bg-light); 
}

.aqyu-collection-header h1 { 
    font-size: 2.5rem; 
    margin-bottom: 15px; 
    color: var(--aqyu-color-text-dark); 
}

.aqyu-collection-desc { 
    max-width: 600px; 
    margin: 0 auto; 
    color: var(--aqyu-color-text-light); 
    line-height: 1.6; 
}

.aqyu-grid-container { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
    gap: 40px; 
    max-width: 1200px; 
    margin: 60px auto; 
    padding: 0 20px; 
}

.aqyu-card { 
    text-decoration: none; 
    color: inherit; 
    display: block; 
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; 
    border: 1px solid var(--aqyu-color-border);
    background: #fff;
    overflow: hidden;
    border-radius: 4px;
}

.aqyu-card:hover { 
    transform: translateY(-8px); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.08); 
    border-color: var(--aqyu-color-primary);
}

.aqyu-card-img { 
    width: 100%; 
    height: 350px; 
    object-fit: cover; 
    display: block; 
    transition: transform 0.5s ease; 
}

.aqyu-card:hover .aqyu-card-img { 
    transform: scale(1.05); 
}

.aqyu-card-body { 
    padding: 25px; 
    text-align: center; 
}

.aqyu-card-title { 
    font-size: 1.2rem; 
    font-weight: 600; 
    margin: 0 0 10px; 
    color: var(--aqyu-color-text-dark); 
}

.aqyu-card-meta { 
    font-size: 0.9rem; 
    color: #777; 
    margin-bottom: 15px; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
}

.aqyu-card-price { 
    font-size: 1.1rem; 
    font-weight: 700; 
    color: var(--aqyu-color-primary); 
}

.aqyu-sold-tag { 
    color: #999; 
    font-weight: 600; 
    text-transform: uppercase; 
    font-size: 0.85rem; 
    border: 1px solid #ddd; 
    padding: 4px 8px; 
    display: inline-block; 
    border-radius: 2px;
}

.aqyu-no-items { 
    text-align: center; 
    grid-column: 1 / -1; 
    padding: 50px; 
    color: #999; 
}

.aqyu-badge-unique { 
    background: var(--aqyu-color-primary); 
}

.aqyu-meta-list a {
    color: var(--aqyu-color-primary);
    /* ... */
}

.aqyu-back-link:hover { 
    color: var(--aqyu-color-primary); 
}

/* --- Collection Archive --- */
.aqyu-card:hover { 
    border-color: var(--aqyu-color-primary);
}

.aqyu-card-price { 
    color: var(--aqyu-color-primary); 
}
/* Conteneur du bloc SVG */
.aqyu-svg-render {
    display: inline-block;
    line-height: 0;
}

/* On force le SVG à prendre 100% de son conteneur piloté par les attributs JS */
.aqyu-svg-render svg {
    width: 100% !important;
    height: 100% !important;
    fill: currentColor; /* Permet d'utiliser la couleur définie dans le style du div */
}

/* Sécurité pour forcer la couleur sur tous les éléments internes du SVG */
.aqyu-svg-render svg path,
.aqyu-svg-render svg circle,
.aqyu-svg-render svg rect,
.aqyu-svg-render svg polygon {
    fill: inherit;
}

/* --- BLOC GUTENBERG --- */
/* Aquiles Grid Block - Styles Globaux */
.aquiles-grid-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 0 !important;
    background: #f0f0f0;
}

.aquiles-grid-wrapper > .aquiles-item {
    flex: 1 1 0 !important;
    height: 100% !important;
    position: relative;
    overflow: hidden !important;
    min-width: 0 !important;
}

.aquiles-grid-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.6s ease !important;
    transform: scale(1);
}

/* Gestion du zoom via variable CSS inline définie dans le JS */
.aquiles-grid-wrapper:hover img {
    transform: scale(var(--zoom-scale, 1.1));
}

.aquiles-grid-wrapper .aquiles-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
    pointer-events: none !important;
    margin: 0 !important;
}

.aquiles-grid-wrapper .aquiles-overlay h2,
.aquiles-grid-wrapper .aquiles-overlay p {
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    display: block !important;
    position: relative !important;
    z-index: 11 !important;
}

.aquiles-grid-wrapper .aquiles-global-link {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 20 !important;
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
}

/* Conteneur principal */
.aqyu-jewelry-list-wrapper {
    margin: 40px 0;
    font-family: inherit;
}

.aqyu-list-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 1.8rem;
}

.aqyu-icon-gem {
    color: #d4af37; /* Couleur Or */
}

/* Tableau */
.aqyu-table-responsive {
    overflow-x: auto;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.aqyu-jewelry-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    min-width: 800px; /* Force le scroll sur mobile */
}

.aqyu-jewelry-table th, 
.aqyu-jewelry-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.aqyu-jewelry-table th {
    background-color: #f9f9f9;
    font-weight: 600;
    cursor: pointer; /* Indique que c'est triable */
    user-select: none;
    transition: background 0.2s;
}

.aqyu-jewelry-table th:hover {
    background-color: #f0f0f0;
}

/* Icônes de tri */
.aqyu-sort-icon {
    font-size: 0.8em;
    margin-left: 5px;
    opacity: 0.3;
}
.aqyu-sort-header.aqyu-sort-asc .aqyu-sort-icon,
.aqyu-sort-header.aqyu-sort-desc .aqyu-sort-icon {
    opacity: 1;
    color: #d4af37;
}

/* Lignes */
.aqyu-jewelry-row:hover {
    background-color: #fffcf5; /* Très léger doré au survol */
}

.aqyu-sold-row {
    opacity: 0.7;
    background-color: #fafafa;
}

.aqyu-sold-row .aqyu-col-title a {
    text-decoration: line-through;
    color: #999;
}

/* Images */
.aqyu-col-img img {
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid #eee;
}

/* Badges */
.aqyu-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}
.aqyu-badge-sold { background: #ffebee; color: #c62828; }
.aqyu-badge-unique { background: #e3f2fd; color: #1565c0; }
.aqyu-status-available { color: #2e7d32; font-weight: 600; }

/* Mobile */
@media (max-width: 768px) {
    .aqyu-col-img, .aqyu-action-col {
        /* On garde ces colonnes, on pourrait cacher métal/pierre sur très petits écrans si besoin */
    }
}