/*
Theme Name: ATELIER75
Theme URI: https://atelier-75.fr
Author: ATELIER75
Description: Thème bloc de la boutique ATELIER75 — présentation seulement, aucune logique métier.
Version: 0.3.3
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: atelier75
Tags: e-commerce, block-theme
*/

/* ---------------------------------------------------------------------------
   Règle de composition : un seul rythme vertical (--r), une seule colonne
   d'alignement à gauche. Tout écart doit être une décision, pas un défaut.
   --------------------------------------------------------------------------- */

.atelier-fiche {
  --r: 22px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.atelier-fiche > * { margin-block: 0; }
.atelier-fiche > * + * { margin-top: var(--r); }

/* --- En-tête --- */
.wp-block-site-title a { text-decoration: none; letter-spacing: 0.18em; text-transform: uppercase; }
.wp-block-navigation-item__content { letter-spacing: 0.08em; text-transform: uppercase;
  font-size: 0.78rem; }
.wp-block-woocommerce-breadcrumbs { font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--wp--preset--color--pierre); }

/* --- Visuel : cadre 4:5, vignettes qui occupent toute la largeur --- */
.woocommerce-product-gallery .flex-viewport { height: auto !important; }
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery .flex-viewport img {
  display: block; width: 100% !important; height: auto !important;
  aspect-ratio: 4 / 5; object-fit: cover;
}
ol.flex-control-nav.flex-control-thumbs {
  display: grid !important; grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important; width: 100% !important; margin: 12px 0 0 !important;
  padding: 0 !important; float: none !important; list-style: none !important;
}
ol.flex-control-nav.flex-control-thumbs li {
  width: auto !important; height: auto !important; margin: 0 !important;
  opacity: 0.5; transition: opacity 200ms ease-out;
}
ol.flex-control-nav.flex-control-thumbs li:hover,
ol.flex-control-nav.flex-control-thumbs li.flex-active { opacity: 1; }
ol.flex-control-nav.flex-control-thumbs img {
  width: 100% !important; height: auto !important; aspect-ratio: 1 / 1;
  object-fit: cover; display: block;
}

/* --- Titre --- */
h1.wp-block-post-title {
  font-size: clamp(1.9rem, 3.4vw, 2.45rem);
  letter-spacing: 0.03em; line-height: 1.02; text-transform: uppercase;
}

/* --- Prix --- */
.wp-block-woocommerce-product-price .price {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 1.15rem; letter-spacing: 0.05em; color: var(--wp--preset--color--noir);
}

/* --- Accroche --- */
.wp-block-post-excerpt__excerpt {
  color: var(--wp--preset--color--pierre); font-size: 0.95rem; line-height: 1.65; max-width: 46ch;
}

/* --- Sélecteur de taille : libellé au-dessus, aligné sur la colonne --- */
.variations, .variations tbody, .variations tr { display: block; width: 100%; }
.variations th.label, .variations td.value {
  display: block; width: 100%; padding: 0; text-align: left;
}
.variations th.label { margin-bottom: 8px; }
.variations th.label label {
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wp--preset--color--pierre);
}
.variations select {
  width: 100%; appearance: none; -webkit-appearance: none; border-radius: 0;
  background-color: var(--wp--preset--color--blanc);
  border: 1px solid var(--wp--preset--color--taupe);
  padding: 15px 40px 15px 16px; font-size: 0.92rem; letter-spacing: 0.06em;
  background-image: linear-gradient(45deg, transparent 50%, #1B1A18 50%),
                    linear-gradient(135deg, #1B1A18 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.variations select:focus { outline: 2px solid var(--wp--preset--color--laiton); outline-offset: 2px; }

/* --- Quantité + bouton, sur une seule ligne, même hauteur --- */
.woocommerce-variation, .single_variation, .woocommerce-variation-price { margin: 0; padding: 0; }
.reset_variations { display: none; }
.woocommerce-variation-add-to-cart { display: flex; gap: 10px; align-items: stretch; margin: 0; }
.quantity { margin: 0; flex: 0 0 auto; }
.quantity input {
  width: 58px; height: 100%; min-height: 52px; text-align: center; border-radius: 0;
  border: 1px solid var(--wp--preset--color--taupe); background: var(--wp--preset--color--blanc);
}
.single_add_to_cart_button, .wp-block-woocommerce-add-to-cart-form .single_add_to_cart_button {
  flex: 1 1 auto; width: auto; min-height: 52px; border: 0; border-radius: 0;
  background: var(--wp--preset--color--noir); color: #fff;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  transition: background 200ms ease-out;
}
.single_add_to_cart_button:hover { background: var(--wp--preset--color--laiton); }
.single_add_to_cart_button:disabled, .single_add_to_cart_button.wc-variation-selection-needed {
  background: #d8d0c2; cursor: not-allowed;
}

/* --- Réassurance : trois lignes, un filet au-dessus, pas de badges --- */
.atelier-reassurance { border-top: 1px solid #e2d9c9; padding-top: var(--r); }
.atelier-reassurance p {
  font-size: 0.85rem; line-height: 1.5; color: var(--wp--preset--color--pierre);
  margin: 0 0 12px;
}
.atelier-reassurance p:last-child { margin-bottom: 0; }
.atelier-reassurance__titre {
  display: block; color: var(--wp--preset--color--noir);
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 2px;
}
.atelier-reassurance a { color: var(--wp--preset--color--laiton); text-underline-offset: 3px; }

/* --- Grille des tailles, dans la colonne de décision --- */
.atelier-tailles { border-top: 1px solid #e2d9c9; padding-top: var(--r); }
.atelier-tailles__titre {
  font-family: var(--wp--preset--font-family--serif); font-size: 1.05rem; font-weight: 400;
  letter-spacing: 0.02em; margin: 0 0 6px;
}
.atelier-tailles__note { font-size: 0.82rem; line-height: 1.5; color: var(--wp--preset--color--pierre);
  margin: 0 0 12px; }
.atelier-tailles table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums;
  font-size: 0.82rem; }
.atelier-tailles td { padding: 7px 0; border-bottom: 1px solid #e8e0d4; }
.atelier-tailles td:last-child { text-align: right; color: var(--wp--preset--color--noir); }
.atelier-tailles td:first-child { width: 42px; color: var(--wp--preset--color--pierre); }
.atelier-tailles__legende { font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--wp--preset--color--pierre); margin: 8px 0 0; }

/* --- Onglets WooCommerce --- */
.woocommerce-tabs .tabs.wc-tabs {
  display: flex; gap: 32px; list-style: none; padding: 0;
  margin: 0 0 24px; border-bottom: 1px solid #e2d9c9;
}
.woocommerce-tabs .tabs.wc-tabs li { margin: 0; border: 0 !important; background: none !important; }
.woocommerce-tabs .tabs.wc-tabs li a {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wp--preset--color--pierre); text-decoration: none; padding: 12px 0; display: block;
  border: 0 !important; background: none !important;
}
.woocommerce-tabs .tabs.wc-tabs li.active a {
  color: var(--wp--preset--color--noir); border-bottom: 1px solid var(--wp--preset--color--noir) !important;
  margin-bottom: -1px;
}
li.reviews_tab { display: none !important; }

/* --- Mobile : une colonne, le même rythme --- */
@media (max-width: 781px) {
  .wp-block-columns.alignwide { display: block; }
  .wp-block-columns.alignwide > .wp-block-column + .wp-block-column { margin-top: 28px; }
  .woocommerce-product-gallery__image img { aspect-ratio: 1 / 1; }
  h1.wp-block-post-title { font-size: 1.75rem; }
}