/*
Theme Name:   Arkān (Astra Child)
Theme URI:    https://arkan-distillations.com
Description:  Thème enfant d'Astra pour Arkān Distillations Privées — habillage sombre / doré, reprenant la maquette validée.
Author:       Arkan
Template:     astra
Version:      1.45.0
Text Domain:  arkan-child
*/

/* =====================================================================
   1. VARIABLES DE DESIGN — reprises telles quelles de la maquette validée
   ===================================================================== */
:root{
  --ink:#090706; --panel:#1e0b0e; --panel-2:#280f14;
  --burgundy:#1f0b0e; --burgundy-deep:#120607; --burgundy-soft:#2a1316;
  --parchment:#eee5d4; --parchment-dim:#c8bca7;
  --brass:#b8905a; --brass-light:#dcb885; --brass-dim:#7c5c37;
  --line: rgba(184,144,90,.25); --line-soft: rgba(236,228,211,.10);
  --f-display:'Cinzel', serif; --f-body:'Newsreader', serif; --f-util:'Jost', sans-serif;
}

/* =====================================================================
   2. BASE — typographie et fond général du site
   Remarque : Astra applique déjà ses propres couleurs via le Customizer.
   Les règles ci-dessous priment volontairement pour garantir le rendu
   sombre/doré partout, y compris sur les pages générées par WooCommerce.
   ===================================================================== */
html, body{
  background: var(--ink) !important;
  color: var(--parchment-dim);
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.65;
}
#page, .site, .ast-separate-container, .ast-container{
  background: var(--ink);
}
a{ color: var(--brass-light); text-decoration: none; }
a:hover{ color: var(--parchment); }
h1, h2, h3, h4, h5, h6,
.entry-title, .woocommerce-loop-product__title, .product_title{
  font-family: var(--f-display) !important;
  font-weight: 500;
  color: var(--parchment) !important;
  letter-spacing: .02em;
}
.eyebrow, .ast-woocommerce-container .woocommerce-breadcrumb{
  font-family: var(--f-util);
  font-size: 12px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--brass-light);
}

/* Boutons génériques (formulaires, WooCommerce, Astra) */
.button, .wp-block-button__link, .woocommerce a.button,
.woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .single_add_to_cart_button,
.ast-button, a.ast-button{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--f-util) !important;
  font-size: 12.5px; letter-spacing:.22em; text-transform:uppercase;
  padding:15px 30px !important;
  border:1px solid var(--brass) !important;
  color: var(--parchment) !important;
  background: transparent !important;
  border-radius: 0 !important;
  cursor:pointer;
  transition: background .3s ease, color .3s ease;
}
.button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
.single_add_to_cart_button:hover, .ast-button:hover{
  background: var(--brass) !important;
  color: var(--ink) !important;
}
/* Variante pleine (équivalent .btn.solid de la maquette) */
.woocommerce a.button.alt, .woocommerce button.button.alt,
.checkout-button, .wc-proceed-to-checkout a.checkout-button{
  background: var(--brass) !important;
  color: var(--ink) !important;
}

/* =====================================================================
   3. EN-TÊTE (HEADER)
   ===================================================================== */
#masthead, .site-header, .main-header-bar, .ast-above-header,
.ast-below-header-bar{
  background: rgba(9,7,6,.95) !important;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.site-header .site-title,
.ast-site-identity .site-title a{
  font-family: var(--f-display);
  font-size: 19px;
  letter-spacing: .24em;
  color: var(--parchment) !important;
}
.site-header .custom-logo, .ast-site-identity img{
  height: 34px;
  width: auto;
}
.main-header-menu a, .main-navigation a, .ast-header-navigation-arrow{
  font-family: var(--f-util) !important;
  font-size: 11.5px !important;
  letter-spacing: .15em !important;
  text-transform: uppercase;
  color: var(--parchment-dim) !important;
}
.main-header-menu a:hover, .main-header-menu .current-menu-item > a{
  color: var(--parchment) !important;
}
.main-header-menu{ background: transparent !important; }
.main-header-menu .sub-menu{
  background: var(--panel) !important;
  border: 1px solid var(--line);
}

/* =====================================================================
   4. SECTIONS GÉNÉRIQUES DE PAGE (titres de section, blocs alternés)
   Ces classes utilitaires peuvent être utilisées dans les templates
   personnalisés (front-page.php, page builder, etc.) pour retrouver
   l'ambiance de la maquette d'origine.
   ===================================================================== */
.arkan-section{ padding: min(11vw, 110px) 0; }
.arkan-section--burgundy{ background: var(--burgundy); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.arkan-section--deep{ background: var(--burgundy-deep); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.arkan-section-head{ max-width:640px; margin-bottom:50px; }
.arkan-section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.arkan-section-head h2{ font-size:clamp(28px,4vw,42px); margin-top:14px; }

/* =====================================================================
   5. BOUTIQUE WOOCOMMERCE — grille produits
   ===================================================================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  background: var(--burgundy);
  border: 1px solid var(--line);
  padding: 0 0 28px;
  text-align: center;
  overflow: hidden;
  transition: border-color .4s ease;
}
.woocommerce ul.products li.product img{
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
  margin: 0 0 18px !important; display: block;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.woocommerce ul.products li.product:hover img{ transform: scale(1.05); }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button{ padding-left: 18px; padding-right: 18px; }
/* Centre le bouton "Ajouter au panier" de la grille : WooCommerce lui
   applique par défaut un style bloc/pleine-largeur qui ignore le
   text-align:center de la carte — on force ici un centrage fiable,
   quel que soit ce que WooCommerce tente d'imposer par ailleurs. */
.woocommerce ul.products li.product .button{
  display: table !important;
  width: auto !important;
  float: none !important;
  margin: 14px auto 0 !important;
}
.woocommerce ul.products li.product:hover{
  border-color: var(--brass);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size: 17px;
  margin: 14px 0 6px;
}
.woocommerce ul.products li.product .price{
  font-family: var(--f-display);
  color: var(--brass-light) !important;
  font-size: 15px;
}
.woocommerce ul.products li.product .price del{
  color: var(--parchment-dim);
  opacity: .6;
}
.woocommerce ul.products li.product .price ins{
  text-decoration: none;
}
.woocommerce span.onsale{
  background: var(--brass) !important;
  color: var(--ink) !important;
  font-family: var(--f-util);
  font-size: 11px;
  letter-spacing: .08em;
  border-radius: 0 !important;
}
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before{
  color: var(--brass-light);
}

/* Barre de tri / résultats au-dessus de la grille */
.woocommerce-result-count, .woocommerce-ordering select{
  color: var(--parchment-dim);
  font-family: var(--f-util);
}
.woocommerce-result-count{
  display: block !important;
  width: 100%;
  margin-bottom: 4px;
}
.woocommerce-ordering select{
  background: transparent;
  border: 1px solid var(--line);
  color: var(--parchment);
}

/* Widget natif de filtrage par attribut (Marque / Genre) —
   prêt à l'emploi dès que le widget "Filtrer les produits par attribut"
   est ajouté à la barre latérale de la boutique. */
.widget_layered_nav ul li{
  border-bottom: 1px solid var(--line-soft);
  padding: 8px 0;
}
.widget_layered_nav ul li a{
  font-family: var(--f-util);
  font-size: 12.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--parchment-dim);
}
.widget_layered_nav ul li.chosen a, .widget_layered_nav ul li a:hover{
  color: var(--brass-light);
}
.widget-title{
  font-family: var(--f-display);
  color: var(--parchment);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 15px;
  margin-bottom: 14px;
}

/* =====================================================================
   5bis. BARRE DE FILTRE MARQUE / GENRE (au-dessus de la grille boutique)
   ===================================================================== */
.arkan-filter-bar{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 28px;
  padding: 20px 0 28px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
  width: 100%;
  clear: both;
}
.arkan-filter-group{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.arkan-filter-label{
  font-family: var(--f-util);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass-light);
  margin-right: 4px;
}
.arkan-filter-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.arkan-filter-pill{
  display: inline-block;
  font-family: var(--f-util);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--parchment-dim);
  border: 1px solid var(--line);
  padding: 7px 14px;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.arkan-filter-pill:hover{
  border-color: var(--brass);
  color: var(--parchment);
}
.arkan-filter-pill.is-active{
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
}
.arkan-filter-reset{
  font-family: var(--f-util);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass-light);
  border-bottom: 1px solid var(--brass-dim);
  align-self: center;
  margin-left: auto;
}
.arkan-filter-reset:hover{
  color: var(--parchment);
  border-color: var(--brass-light);
}
@media (max-width: 600px){
  .arkan-filter-bar{ gap: 18px; }
  .arkan-filter-reset{ margin-left: 0; }
}

/* =====================================================================
   6. FICHE PRODUIT PREMIUM (single product)
   =====================================================================
   Refonte "grande maison" : fond bordeaux profond (même teinte que la
   section Édition Cadeau de l'accueil), grande image plein cadre sans
   fond ajouté, typographie aérée, filets fins dorés.
   ===================================================================== */

/* Fond bordeaux sur toute la page produit */
body.single-product,
body.single-product #page,
body.single-product .site,
body.single-product .ast-separate-container,
body.single-product #content,
body.single-product #main,
body.single-product .site-main,
body.single-product .ast-article-single,
body.single-product .entry-content,
body.single-product .site-content{
  background: var(--burgundy) !important;
}
body.single-product #primary,
body.single-product .ast-container,
body.single-product #main{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

/* Astra repeint ses conteneurs internes par-dessus le fond du body :
   on les rend transparents pour laisser passer le bordeaux. */
body.single-product .ast-separate-container .ast-article-single,
body.single-product .ast-article-single,
body.single-product .ast-woocommerce-container,
body.single-product .entry-content,
body.single-product article.product{
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* CORRECTIF IMPORTANT : WooCommerce impose nativement width:48% + float
   sur la galerie et sur la colonne résumé. Dans notre grille à deux
   colonnes, cela donnait 48% DE LA COLONNE — d'où la photo deux fois
   trop petite, le grand vide à droite et le titre compressé.
   On annule ces largeurs héritées. */
.woocommerce div.product div.images,
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.summary,
.woocommerce div.product .entry-summary{
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
}
body.single-product .site-content > .ast-container{
  max-width: 1240px;
  padding-left: clamp(20px, 5vw, 56px);
  padding-right: clamp(20px, 5vw, 56px);
}

/* Fil d'Ariane discret, au-dessus du produit */
body.single-product .woocommerce-breadcrumb{
  font-family: var(--f-util) !important;
  font-size: 10.5px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase;
  color: var(--brass-dim) !important;
  margin: 0 0 46px !important;
  padding: 34px 0 0 !important;
}
body.single-product .woocommerce-breadcrumb a{ color: var(--brass-dim); }
body.single-product .woocommerce-breadcrumb a:hover{ color: var(--brass-light); }

/* --- Structure : grande galerie à gauche, résumé à droite --- */
.woocommerce div.product{
  background: transparent;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
  margin-bottom: 20px;
}
@media (max-width: 900px){
  .woocommerce div.product{ grid-template-columns: 1fr; gap: 34px; }
}
/* CORRECTIF IMPORTANT : la galerie et le résumé occupent les 2 colonnes
   prévues (rangée 1). Tout ce qui vient après — onglets, récit
   éditorial, FAQ, produits similaires — doit s'étaler sur toute la
   largeur en dessous, jamais rester coincé dans l'une des 2 colonnes.
   Sans cette règle, la grille place automatiquement chaque section
   suivante dans une colonne étroite, provoquant un chevauchement. */
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .arkan-story,
.woocommerce div.product > .arkan-story-plain,
.woocommerce div.product > .arkan-faq,
.woocommerce div.product > .related.products,
.woocommerce div.product > .up-sells.products{
  grid-column: 1 / -1;
}

/* CORRECTIF : WooCommerce impose nativement width:48% + float sur la
   galerie et le résumé. Dans notre grille à deux colonnes, cela réduisait
   la photo à 48% de sa colonne (photo minuscule + grand vide à droite).
   On neutralise ces deux règles. */
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce div.product .entry-summary{
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* --- Galerie : la photo occupe tout le cadre --- */
.woocommerce div.product .woocommerce-product-gallery{
  background: var(--burgundy);
  border: 1px solid var(--line);
  padding: 0;
  overflow: hidden;
  position: relative;
}
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper{ margin: 0; }
.woocommerce div.product .woocommerce-product-gallery__image{ margin: 0 !important; }
.woocommerce div.product .woocommerce-product-gallery__image img{
  width: 100% !important;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  margin: 0 !important;
  max-height: none;
  min-height: 0;
  mix-blend-mode: normal;
  filter: none;
  transition: transform 1s cubic-bezier(.2,.7,.2,1);
}
.woocommerce div.product .woocommerce-product-gallery:hover .woocommerce-product-gallery__image img{
  transform: scale(1.03);
}
/* Loupe de zoom : discrète, dorée */
.woocommerce div.product .woocommerce-product-gallery__trigger{
  background: rgba(9,7,6,.75) !important;
  border: 1px solid var(--line);
  color: var(--brass-light) !important;
  border-radius: 0 !important;
  top: 16px !important; right: 16px !important;
  width: 42px; height: 42px;
  line-height: 42px; text-align: center;
  box-shadow: none !important;
}
.woocommerce div.product .woocommerce-product-gallery__trigger::before,
.woocommerce div.product .woocommerce-product-gallery__trigger::after{ display: none; }
/* Miniatures sous la grande photo */
.woocommerce div.product .flex-control-thumbs{
  margin: 0; padding: 14px;
  display: flex; gap: 10px; justify-content: flex-start;
  background: var(--burgundy);
  border-top: 1px solid var(--line-soft);
}
.woocommerce div.product .flex-control-thumbs li{ width: 68px; list-style: none; margin: 0; }
.woocommerce div.product .flex-control-thumbs img{
  border: 1px solid transparent; opacity: .55; cursor: pointer;
  transition: opacity .3s ease, border-color .3s ease;
}
.woocommerce div.product .flex-control-thumbs img:hover,
.woocommerce div.product .flex-control-thumbs img.flex-active{ opacity: 1; border-color: var(--brass); }
.woocommerce span.onsale{
  top: 16px !important; left: 16px !important;
  font-size: 10px !important; letter-spacing: .16em !important;
  padding: 7px 14px !important; border-radius: 0 !important;
}

/* --- Colonne résumé : très aérée --- */
.woocommerce div.product .summary.entry-summary{ padding-top: 4px; }

.arkan-pp-eyebrow{
  font-family: var(--f-util);
  font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--brass); margin: 0 0 18px;
}
.woocommerce div.product .product_title{
  font-size: clamp(30px, 3.6vw, 46px) !important;
  line-height: 1.1; margin: 0 0 6px !important;
  letter-spacing: .015em; font-weight: 400 !important;
}

/* Pastilles Marque / Genre — plus fines, sans cadre lourd */
.arkan-pp-tags{ display: flex; flex-wrap: wrap; gap: 22px; margin: 20px 0 26px; }
.arkan-pp-pill{
  font-family: var(--f-util); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--parchment-dim);
  border: none; border-bottom: 1px solid var(--brass-dim);
  padding: 0 0 5px; transition: color .3s ease, border-color .3s ease;
}
.arkan-pp-pill:hover{ color: var(--brass-light); border-color: var(--brass-light); }
.arkan-pp-pill--marque{ color: var(--brass-light); }

/* Note / avis */
.woocommerce div.product .woocommerce-product-rating{
  display: flex; align-items: center; gap: 12px; margin: 0 0 22px;
  font-family: var(--f-util); font-size: 11.5px; color: var(--parchment-dim);
}
.woocommerce div.product .woocommerce-product-rating .woocommerce-review-link{
  color: var(--parchment-dim); border-bottom: 1px solid var(--line);
}

/* Prix — grand, doré, isolé par un filet fin */
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family: var(--f-display) !important;
  color: var(--brass-light) !important;
  font-size: 26px !important;
  font-weight: 400;
  display: block; margin: 0 0 30px !important;
  padding: 0 0 30px; border-bottom: 1px solid var(--line-soft);
}
.woocommerce div.product p.price del{ color: var(--parchment-dim); opacity: .5; font-size: 17px; margin-right: 10px; }
.woocommerce div.product p.price ins{ text-decoration: none; }

/* Description courte */
.woocommerce div.product .woocommerce-product-details__short-description{
  font-family: var(--f-body); font-style: italic;
  font-size: 17.5px; line-height: 1.8; color: var(--parchment-dim);
  margin: 0 0 4px;
}
/* Correctif de sécurité : neutralise tout fond hérité (thème parent,
   plugin, ou style navigateur) qui ferait apparaître un surlignage
   blanc/gris derrière ce texte, quelle qu'en soit l'origine exacte. */
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-product-details__short-description *{
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Pyramide olfactive — barres graduées (même langage visuel que
   "Les Quatre Piliers" de l'accueil et que le bloc .arkan-story__notes) */
.arkan-pp-notes{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
  margin: 32px 0; padding: 34px 0;
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  text-align: center;
}
.arkan-pp-notes__col{ display: flex; flex-direction: column; align-items: center; }
.arkan-pp-notes__bar{
  width: 3px; border-radius: 1px; margin-bottom: 14px;
  background: linear-gradient(180deg, var(--brass-light), var(--brass-dim));
}
.arkan-pp-notes__bar--sm{ height: 22px; }
.arkan-pp-notes__bar--md{ height: 38px; }
.arkan-pp-notes__bar--lg{ height: 56px; }
.arkan-pp-notes__label{
  display: block; font-family: var(--f-display);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass-light); margin-bottom: 10px;
}
.arkan-pp-notes__col p{
  font-family: var(--f-body); font-style: italic; font-size: 14.5px;
  line-height: 1.65; color: var(--parchment-dim); margin: 0;
}
@media (max-width: 560px){ .arkan-pp-notes{ grid-template-columns: 1fr; gap: 22px; } }

/* Disponibilité */
.woocommerce div.product .stock{
  font-family: var(--f-util); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; margin: 0 0 24px;
}
.woocommerce div.product .stock.in-stock{ color: var(--brass-light); }
.woocommerce div.product .stock.out-of-stock{ color: #b8735f; }

/* Ajout au panier : bouton plein doré, pleine largeur */
.woocommerce div.product form.cart{
  display: flex; align-items: stretch; gap: 12px; margin: 0 0 34px;
}
.woocommerce div.product form.cart .quantity{ margin: 0; }
.woocommerce div.product form.cart .quantity input.qty{
  background: transparent; border: 1px solid var(--line); color: var(--parchment);
  min-height: 58px; width: 78px; text-align: center;
  font-family: var(--f-util); font-size: 14px;
}
.woocommerce div.product form.cart .single_add_to_cart_button{
  flex: 1; min-height: 58px; justify-content: center;
  background: var(--brass) !important; color: var(--ink) !important;
  border-color: var(--brass) !important;
  letter-spacing: .26em !important; font-size: 11.5px !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover{
  background: var(--brass-light) !important; border-color: var(--brass-light) !important;
}

/* Réassurance : trois colonnes fines */
.arkan-pp-badges{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin: 0 0 30px; padding: 28px 0 0; border-top: 1px solid var(--line-soft);
}
.arkan-pp-badge strong{
  font-family: var(--f-util); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brass-light);
  font-weight: 400; display: block; margin-bottom: 7px;
}
.arkan-pp-badge span{
  font-family: var(--f-util); font-size: 11px; line-height: 1.65; color: var(--parchment-dim);
}
@media (max-width: 560px){ .arkan-pp-badges{ grid-template-columns: 1fr; gap: 16px; } }

/* Métadonnées */
.woocommerce div.product .product_meta{
  font-family: var(--f-util); font-size: 10.5px; letter-spacing: .06em;
  color: var(--parchment-dim); opacity: .7;
  padding-top: 22px; border-top: 1px solid var(--line-soft);
}
.woocommerce div.product .product_meta a{ color: var(--brass-dim); }
.woocommerce div.product .product_meta > span{ display: block; margin-bottom: 5px; }

/* --- Onglets --- */
.woocommerce-tabs{ margin-top: 70px; padding-top: 0; }
.woocommerce-tabs ul.tabs{
  display: flex; gap: 0; list-style: none; margin: 0 0 40px !important; padding: 0 !important;
  border-bottom: 1px solid var(--line-soft) !important;
}
.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after{ display: none !important; }
.woocommerce-tabs ul.tabs li{
  background: transparent !important; border: none !important;
  border-radius: 0 !important; margin: 0 !important; padding: 0 !important;
  font-family: var(--f-util); text-transform: uppercase;
  letter-spacing: .2em; font-size: 10.5px;
}
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after{ display: none !important; }
.woocommerce-tabs ul.tabs li a{
  display: block; padding: 16px 26px 16px 0 !important;
  margin-right: 26px;
  color: var(--parchment-dim) !important;
  border-bottom: 2px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover{
  color: var(--brass-light) !important;
  border-bottom-color: var(--brass) !important;
}
.woocommerce-tabs .panel{
  max-width: 780px; font-family: var(--f-body);
  color: var(--parchment-dim); line-height: 1.9; font-size: 16.5px;
  background: transparent !important; border: none !important; padding: 0 !important;
}
.woocommerce-tabs .panel h2{ font-size: 23px; margin-bottom: 20px; }

/* Tableau "Informations complémentaires" */
.woocommerce table.shop_attributes{ border: none !important; margin-top: 0; }
.woocommerce table.shop_attributes tr{ border-bottom: 1px solid var(--line-soft); }
.woocommerce table.shop_attributes th{
  font-family: var(--f-util) !important; font-size: 10.5px !important;
  letter-spacing: .18em !important; text-transform: uppercase;
  color: var(--brass-light) !important; font-weight: 400 !important;
  background: transparent !important; border: none !important;
  padding: 16px 24px 16px 0 !important; width: 240px;
  text-align: left !important; font-style: normal !important;
}
.woocommerce table.shop_attributes td{
  font-family: var(--f-body) !important; font-style: normal !important;
  color: var(--parchment) !important; background: transparent !important;
  border: none !important; padding: 16px 0 !important;
}
.woocommerce table.shop_attributes td a{ color: var(--brass-light); }

/* Avis */
.woocommerce-Reviews .comment-form input,
.woocommerce-Reviews .comment-form textarea{
  background: transparent; border: 1px solid var(--line); color: var(--parchment);
}
.woocommerce #reviews #comments h2{ color: var(--parchment); }

/* --- Produits similaires --- */
.related.products, .up-sells.products{
  margin-top: 90px; padding-top: 70px;
  border-top: 1px solid var(--line-soft);
}
.related.products > h2, .up-sells.products > h2{
  font-size: clamp(22px, 2.6vw, 30px) !important;
  text-align: center; margin-bottom: 46px !important;
  letter-spacing: .06em;
}
/* Cartes produits similaires : photo pleine, fond bordeaux */
.related.products ul.products li.product,
.up-sells.products ul.products li.product{
  background: var(--burgundy) !important;
  border: 1px solid var(--line) !important;
  padding: 0 0 26px !important;
  overflow: hidden;
}
.related.products ul.products li.product img,
.up-sells.products ul.products li.product img{
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
  margin: 0 0 18px !important; display: block;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.related.products ul.products li.product:hover img,
.up-sells.products ul.products li.product:hover img{ transform: scale(1.05); }
.related.products ul.products li.product .woocommerce-loop-product__title,
.up-sells.products ul.products li.product .woocommerce-loop-product__title{
  padding: 0 18px; font-size: 15px !important;
}
.related.products ul.products li.product .price,
.up-sells.products ul.products li.product .price{ padding: 0 18px; }
.related.products ul.products li.product .button,
.up-sells.products ul.products li.product .button{ margin: 14px 18px 0; }

/* =====================================================================
   7. PANIER / CHECKOUT — champs de formulaire
   ===================================================================== */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-cart table.cart td.actions .coupon .input-text,
.select2-container--default .select2-selection--single{
  background: transparent !important;
  border: 1px solid var(--line) !important;
  color: var(--parchment) !important;
  font-family: var(--f-util);
}
.woocommerce table.shop_table{
  border: 1px solid var(--line-soft);
}
.woocommerce table.shop_table th{
  font-family: var(--f-util);
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--brass-light);
}
.woocommerce table.shop_table td{
  border-top: 1px solid var(--line-soft);
}

/* =====================================================================
   8. PIED DE PAGE (FOOTER)
   ===================================================================== */
#colophon, .site-footer, .ast-small-footer, .footer-widget-area{
  background: #0b0606 !important;
  border-top: 1px solid var(--line-soft);
}
#colophon, .site-footer *{
  color: var(--parchment-dim);
}
#colophon .widget-title{
  color: var(--parchment);
}
#colophon a{
  color: var(--brass-light);
}
.ast-small-footer .ast-footer-copyright,
.ast-small-footer p{
  font-family: var(--f-util);
  font-size: 12px;
}

/* =====================================================================
   9. PAGE BLOG — grille "1 grande carte + 12 petites cartes" (anneau complet)
   =====================================================================
   Exemple de calcul concret (mêmes proportions que le reste du site,
   conteneur de 1180px, espacement de 20px) :
     - grille de 4 colonnes égales : (1180 - 3×20) / 4 ≈ 280px / colonne
     - une petite carte occupe 1 colonne  → environ 280 × 280 px (carrée)
     - la grande carte occupe 2 colonnes  → environ 580 × 580 px
       (2 × 280 + 1 espacement de 20px pris entre les deux colonnes)
     → la grande carte fait bien le double, exactement comme demandé.
   Sur la 1ère page : article le plus récent en grand, au centre ;
   12 articles suivants forment un anneau complet tout autour (4 côtés
   + 4 coins), en cases de taille égale. Pages suivantes : grille
   simple, toutes cartes égales, avec pagination automatique si besoin.
   ===================================================================== */

/* --- Bandeau d'introduction bordeaux (même traitement que la page
       d'accueil : fond bordeaux profond, bordures fines dorées) --- */
.arkan-blog-intro{
  background: var(--burgundy-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 74px clamp(20px, 5vw, 56px);
  text-align: center;
}
.arkan-blog-intro__inner{ max-width: 700px; margin: 0 auto; }
.arkan-blog-intro h1{
  font-size: clamp(28px, 4vw, 42px);
  margin: 14px 0 20px;
}
.arkan-blog-intro p{
  font-family: var(--f-body);
  font-style: italic;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.75;
  color: var(--parchment-dim);
  margin: 0;
}

.arkan-blog-wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 60px clamp(20px, 5vw, 56px) 110px;
}
.arkan-blog-filters{ margin-bottom: 40px; }
.arkan-blog-viewall{
  display: flex; justify-content: center; margin-top: 60px;
}
.arkan-blog-pagination{
  display: flex; justify-content: center; gap: 10px; margin-top: 60px;
}
.arkan-blog-pagination .page-numbers{
  font-family: var(--f-util); font-size: 12px; letter-spacing: .05em;
  color: var(--parchment-dim); border: 1px solid var(--line);
  padding: 9px 15px; transition: border-color .3s ease, color .3s ease, background .3s ease;
}
.arkan-blog-pagination .page-numbers.current{
  background: var(--brass); color: var(--ink); border-color: var(--brass);
}
.arkan-blog-pagination .page-numbers:hover{ border-color: var(--brass); color: var(--parchment); }
.arkan-blog-empty{ text-align: center; font-family: var(--f-body); font-style: italic; padding: 60px 0; }

/* --- Carte : base commune (grille "featured" et grille "plain") --- */
.arkan-blog-card{
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: block;
  background: var(--panel);
  border: 1px solid var(--line);
  transition: border-color .45s ease, box-shadow .45s ease;
}
.arkan-blog-card:hover{
  border-color: var(--brass);
  box-shadow: 0 22px 46px -20px rgba(184, 144, 90, .5);
}
.arkan-blog-card__link{ display: block; position: relative; width: 100%; height: 100%; color: inherit; }
.arkan-blog-card__media{ position: absolute; inset: 0; }
.arkan-blog-card__media img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.85) brightness(.82);
  transform: scale(1.0);
  transition: transform 1.15s cubic-bezier(.2, .7, .2, 1), filter .6s ease;
}
.arkan-blog-card:hover .arkan-blog-card__media img{
  transform: scale(1.08);
  filter: saturate(1) brightness(.65);
}
.arkan-blog-card__content{
  position: absolute; inset: auto 0 0 0;
  padding: 20px;
  background: linear-gradient(180deg, transparent, rgba(9, 7, 6, .93) 75%);
  z-index: 2;
}
.arkan-blog-card__date{
  font-family: var(--f-util); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brass-light);
}
.arkan-blog-card__title{
  font-family: var(--f-display) !important; color: var(--parchment) !important;
  font-size: 16px; line-height: 1.32; margin: 6px 0 0;
  transition: color .35s ease;
}
.arkan-blog-card:hover .arkan-blog-card__title{ color: var(--brass-light) !important; }

/* --- Traitement renforcé pour la grande carte --- */
.arkan-blog-card--big .arkan-blog-card__content{ padding: 34px; }
.arkan-blog-card--big .arkan-blog-card__badge{
  display: inline-block;
  font-family: var(--f-util); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink); background: var(--brass);
  padding: 5px 13px; margin-bottom: 12px;
}
.arkan-blog-card--big .arkan-blog-card__title{
  font-size: clamp(22px, 2.6vw, 32px) !important;
  margin-top: 8px;
}
.arkan-blog-card--big .arkan-blog-card__excerpt{
  font-family: var(--f-body); font-style: italic; color: var(--parchment-dim);
  font-size: 15px; line-height: 1.65; margin: 14px 0 0; max-width: 92%;
}

/* --- Grille en anneau complet : 1 grande carte au centre + 12 petites
       autour (4 côtés de 2 cartes + 4 coins) --- */
.arkan-blog-grid--featured{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, auto);
  grid-template-areas:
    "corner1 top1    top2    corner2"
    "left1   big     big     right1 "
    "left2   big     big     right2 "
    "corner3 bot1    bot2    corner4";
  gap: 20px;
}
.arkan-blog-grid--featured > .arkan-blog-card:nth-child(1){  grid-area: big; }
.arkan-blog-grid--featured > .arkan-blog-card:nth-child(2){  grid-area: top1; }
.arkan-blog-grid--featured > .arkan-blog-card:nth-child(3){  grid-area: top2; }
.arkan-blog-grid--featured > .arkan-blog-card:nth-child(4){  grid-area: left1; }
.arkan-blog-grid--featured > .arkan-blog-card:nth-child(5){  grid-area: right1; }
.arkan-blog-grid--featured > .arkan-blog-card:nth-child(6){  grid-area: left2; }
.arkan-blog-grid--featured > .arkan-blog-card:nth-child(7){  grid-area: right2; }
.arkan-blog-grid--featured > .arkan-blog-card:nth-child(8){  grid-area: bot1; }
.arkan-blog-grid--featured > .arkan-blog-card:nth-child(9){  grid-area: bot2; }
.arkan-blog-grid--featured > .arkan-blog-card:nth-child(10){ grid-area: corner1; }
.arkan-blog-grid--featured > .arkan-blog-card:nth-child(11){ grid-area: corner2; }
.arkan-blog-grid--featured > .arkan-blog-card:nth-child(12){ grid-area: corner3; }
.arkan-blog-grid--featured > .arkan-blog-card:nth-child(13){ grid-area: corner4; }

@media (max-width: 900px){
  .arkan-blog-grid--featured{
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "big     big"
      "corner1 top1"
      "top2    corner2"
      "left1   right1"
      "left2   right2"
      "corner3 bot1"
      "bot2    corner4";
  }
  .arkan-blog-card--big{ aspect-ratio: 16 / 10; }
}
@media (max-width: 560px){
  .arkan-blog-grid--featured{
    grid-template-columns: 1fr;
    grid-template-areas:
      "big" "top1" "top2" "left1" "right1" "left2" "right2"
      "bot1" "bot2" "corner1" "corner2" "corner3" "corner4";
  }
}

/* --- Grille simple pour les pages suivantes (pagination) --- */
.arkan-blog-grid--plain{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 700px){ .arkan-blog-grid--plain{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px){ .arkan-blog-grid--plain{ grid-template-columns: 1fr; } }

/* =====================================================================
   10. SYSTÈME DE COFFRET — bandeau et bouton sur la page Panier
   ===================================================================== */
.arkan-pack-banner{
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 18px;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 22px 26px;
  margin-bottom: 30px;
}
.arkan-pack-banner__tiers{ display: flex; gap: 20px; flex-wrap: wrap; }
.arkan-pack-banner__tier{
  font-family: var(--f-util); font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--parchment-dim);
  opacity: .45; padding-bottom: 4px; border-bottom: 1px solid transparent;
  transition: opacity .3s ease, color .3s ease, border-color .3s ease;
}
.arkan-pack-banner__tier.is-reached{
  opacity: 1; color: var(--brass-light); border-color: var(--brass-dim);
}
.arkan-pack-banner__status{
  font-family: var(--f-body); font-style: italic; color: var(--parchment-dim); margin: 0;
}
.arkan-pack-banner__status.is-active{
  font-family: var(--f-util); font-style: normal; font-size: 12.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--brass-light);
}
.arkan-pack-banner__toggle{
  font-family: var(--f-util); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--parchment-dim);
  border-bottom: 1px solid var(--brass-dim); padding-bottom: 2px;
  transition: color .3s ease, border-color .3s ease;
}
.arkan-pack-banner__toggle:hover{ color: var(--parchment); border-color: var(--brass-light); }
.arkan-pack-banner__toggle--primary{
  color: var(--ink) !important; background: var(--brass);
  border: none; padding: 13px 24px; letter-spacing: .18em;
}
.arkan-pack-banner__toggle--primary:hover{ background: var(--brass-light); }

/* Ligne de remise dans le récapitulatif panier / commande */
.woocommerce-cart table.cart_totals tr.fee td,
.woocommerce-checkout table.cart_totals tr.fee td{
  color: var(--brass-light) !important;
  font-family: var(--f-display);
}

/* =====================================================================
   11. RESPONSIVE — ajustements mobiles de base
   ===================================================================== */
@media (max-width: 768px){
  .woocommerce ul.products li.product{ padding: 18px 14px 22px; }
  .arkan-section{ padding: 60px 0; }
}

/* =====================================================================
   12. PAGE D'ACCUEIL DYNAMIQUE (front-page.php)
   =====================================================================
   Port de la maquette validée. L'en-tête et le pied de page restent
   ceux d'Astra (déjà stylés plus haut) — cette section ne concerne que
   le contenu entre les deux : hero, manifeste, piliers, marques,
   boutique, coffrets, process, maison, cercle.
   ===================================================================== */

.arkan-fp-wrap{ max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }

/* Sécurité : ces deux templates sont conçus pleine largeur, sans barre
   latérale, et leurs sections doivent s'empiler verticalement en bloc
   classique (jamais en colonnes de journal, ni en ligne flex). On
   cible uniquement les pages concernées (page d'accueil et page Blog),
   jamais le site entier, pour ne pas perturber une éventuelle barre
   latérale ailleurs sur le site. */
.front-page #primary, .front-page .ast-container, .front-page .site-content, .front-page #main,
.blog #primary, .blog .ast-container, .blog .site-content, .blog #main{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  column-count: 1 !important;
  -webkit-column-count: 1 !important;
  -moz-column-count: 1 !important;
  columns: auto !important;
}
.arkan-fp-hero, .arkan-fp-manifesto, .arkan-fp-section, .arkan-fp-maison, .arkan-fp-cercle,
.arkan-blog-wrap, .arkan-blog-intro{
  break-inside: avoid;
  width: 100%;
}
.arkan-fp-section{ padding: min(11vw, 110px) 0; }
.arkan-fp-section--burgundy{ background: var(--burgundy); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.arkan-fp-section--deep{ background: var(--burgundy-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.arkan-fp-section-head{ max-width: 640px; margin-bottom: 50px; }
.arkan-fp-section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }
.arkan-fp-section-head h2{ font-size: clamp(28px, 4vw, 42px); margin-top: 14px; }
.button.alt{ background: var(--brass) !important; color: var(--ink) !important; }

/* --- HERO --- */
.arkan-fp-hero{
  position: relative; min-height: 82vh; display: flex; align-items: flex-start; justify-content: center;
  text-align: center; overflow: hidden;
  background: radial-gradient(ellipse at 50% 22%, rgba(56,16,21,.22), transparent 58%), var(--ink);
}
.arkan-fp-hero-cols{
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(184,144,90,.05) 0px, rgba(184,144,90,.05) 1px, transparent 1px, transparent 88px);
  mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,.9) 30%, rgba(0,0,0,.9) 75%, transparent);
}
.arkan-fp-hero-vignette{ position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, var(--ink) 92%); }
.arkan-fp-hero-inner{ position: relative; z-index: 2; padding: 14vh 24px 0; }
.arkan-fp-hero h1{ font-family: var(--f-display); font-weight: 500; color: var(--parchment); margin: 0; font-size: clamp(48px, 10vw, 104px); letter-spacing: .14em; line-height: 1; }
.arkan-fp-hero h1 em{ font-style: normal; color: var(--brass-light); }
.arkan-fp-hero-sub{ font-family: var(--f-body); font-style: italic; font-size: clamp(17px, 2.2vw, 22px); color: var(--parchment-dim); margin: 22px auto 36px; max-width: 480px; }
.arkan-fp-hero-ctas{ display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* Le bouton secondaire du hero reste invisible (aucun contour, aucun
   fond) tant qu'on ne le survole pas — pour ne jamais entrer en
   concurrence visuelle avec le flacon en arrière-plan. Même taille
   qu'avant, seule la visibilité du contour change. */
.arkan-fp-hero-ctas .button:not(.alt){
  border-color: transparent !important;
  background: transparent !important;
  transition: border-color .4s ease, background .4s ease, color .4s ease;
}
.arkan-fp-hero-ctas .button:not(.alt):hover{
  border-color: var(--brass) !important;
  background: rgba(184, 144, 90, .14) !important;
}
.arkan-fp-scroll-cue{ position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 2; }
.arkan-fp-scroll-cue .line{ width: 1px; height: 42px; background: linear-gradient(var(--brass), transparent); animation: arkan-fp-pulse 2.6s ease-in-out infinite; }
@keyframes arkan-fp-pulse{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
.arkan-fp-scroll-cue span{ font-family: var(--f-util); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--parchment-dim); }

/* --- MANIFESTO --- */
.arkan-fp-manifesto .arkan-fp-wrap{ display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; padding-top: min(11vw,110px); padding-bottom: min(11vw,110px); }
.arkan-fp-manifesto p.lead{ font-size: clamp(19px, 2.4vw, 23px); font-style: italic; color: var(--parchment); margin: 18px 0 18px; }
.arkan-fp-manifesto p.small{ font-family: var(--f-util); font-size: 15.5px; color: var(--parchment-dim); line-height: 1.85; }
.arkan-fp-stroke{ stroke: var(--brass); fill: none; stroke-width: 1.4; }
.arkan-fp-dot{ fill: var(--brass-light); }

/* --- ESSENCE --- */
.arkan-fp-essence{
  position: relative; min-height: 50vh; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(ellipse at 50% 85%, rgba(184,144,90,.07), transparent 55%), #080605;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.arkan-fp-essence-svg{ position: absolute; inset: 0; width: 100%; height: 100%; }
.arkan-fp-essence-svg path{ fill: none; stroke-linecap: round; filter: blur(1.4px); animation: arkan-fp-drift 22s ease-in-out infinite; transform-origin: 50% 100%; }
.arkan-fp-essence-svg .w1{ stroke: url(#arkanEssenceGrad); stroke-width: 2.2; animation-duration: 26s; }
.arkan-fp-essence-svg .w2{ stroke: url(#arkanEssenceGrad); stroke-width: 1.4; animation-duration: 19s; animation-delay: -4s; opacity: .75; }
.arkan-fp-essence-svg .w3{ stroke: url(#arkanEssenceGrad); stroke-width: 1.8; animation-duration: 31s; animation-delay: -11s; opacity: .55; }
.arkan-fp-essence-svg .w4{ stroke: url(#arkanEssenceGrad); stroke-width: 1.1; animation-duration: 24s; animation-delay: -7s; opacity: .4; }
@keyframes arkan-fp-drift{ 0%{ transform: translateX(0) scaleY(1); } 50%{ transform: translateX(14px) scaleY(1.015); } 100%{ transform: translateX(0) scaleY(1); } }
.arkan-fp-essence-inner{ position: relative; z-index: 2; max-width: 560px; padding: 0 24px; }
.arkan-fp-essence-inner .eyebrow{ display: block; margin-bottom: 20px; }
.arkan-fp-essence-inner p{ font-family: var(--f-body); font-style: italic; color: var(--parchment); font-size: clamp(22px, 3vw, 30px); line-height: 1.5; margin: 0; }

/* --- PILIERS --- */
.arkan-fp-piliers-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.arkan-fp-pilier-card{
  position: relative; height: 290px; overflow: hidden;
  background: var(--burgundy); border: 1px solid var(--line);
  padding: 34px 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: border-color .5s ease;
}
.arkan-fp-pilier-card:hover, .arkan-fp-pilier-card:focus-within{ border-color: var(--brass); }
.arkan-fp-pilier-glow{
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(110,32,43,.30), transparent 60%),
    radial-gradient(ellipse at 50% 42%, rgba(184,144,90,.18), transparent 70%);
  opacity: 0; transition: opacity .8s ease; pointer-events: none;
}
.arkan-fp-pilier-card:hover .arkan-fp-pilier-glow, .arkan-fp-pilier-card:focus-within .arkan-fp-pilier-glow{ opacity: 1; }
.arkan-fp-pillar-visual{
  width: 44px; height: 98px; margin-bottom: 20px; position: relative; border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(12,11,9,.35) 0 2px, transparent 2px 9px), linear-gradient(180deg, var(--brass-light), var(--brass-dim));
  transition: transform .7s cubic-bezier(.2,.6,.2,1), filter .7s ease;
}
.arkan-fp-pillar-visual::before{ content:''; position:absolute; top:-7px; left:-6px; right:-6px; height:7px; background:linear-gradient(180deg,var(--brass-light),var(--brass)); }
.arkan-fp-pillar-visual::after{ content:''; position:absolute; bottom:-7px; left:-8px; right:-8px; height:8px; background:linear-gradient(180deg,var(--brass),var(--brass-dim)); }
.arkan-fp-pilier-card:hover .arkan-fp-pillar-visual, .arkan-fp-pilier-card:focus-within .arkan-fp-pillar-visual{ transform: translateY(-8px) scale(1.04); filter: brightness(1.25) drop-shadow(0 6px 10px rgba(184,144,90,.35)); }
.arkan-fp-pilier-card .p-name{ position: relative; font-family: var(--f-display); font-size: 18px; letter-spacing: .12em; color: var(--parchment); transition: transform .6s ease; }
.arkan-fp-pilier-card:hover .p-name, .arkan-fp-pilier-card:focus-within .p-name{ transform: translateY(-6px); }
.arkan-fp-p-reveal{ position: relative; opacity: 0; transform: translateY(10px); transition: opacity .6s ease .08s, transform .6s ease .08s; }
.arkan-fp-pilier-card:hover .arkan-fp-p-reveal, .arkan-fp-pilier-card:focus-within .arkan-fp-p-reveal{ opacity: 1; transform: translateY(14px); }
.arkan-fp-p-reveal .p-desc{ font-family: var(--f-body); font-style: italic; font-size: 14px; color: var(--parchment); line-height: 1.55; margin: 0 0 8px; }
.arkan-fp-p-reveal .p-note{ font-family: var(--f-util); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-light); }

/* --- MARQUES (cartes flottantes) --- */
.arkan-fp-photo-card{ text-align: center; padding: 34px 20px 38px; }
/* La zone visuelle suit la largeur de la carte (carré) au lieu d'une
   hauteur fixe : plus de vide au-dessus du flacon, et le visuel grandit
   automatiquement quand la carte est plus large. */
.arkan-fp-photo-float{ position: relative; aspect-ratio: 1 / 1; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 26px; }
.arkan-fp-photo-float::after{
  content: ''; position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  width: 70%; height: 34px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(184,144,90,.35), rgba(184,144,90,0) 70%);
  filter: blur(2px);
}
.arkan-fp-photo-float img{ position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 22px 20px rgba(0,0,0,.6)); transition: transform .5s ease; }
.arkan-fp-photo-card:hover .arkan-fp-photo-float img{ transform: translateY(-6px) scale(1.02); }
/* 3 colonnes larges sur desktop, réduction automatique sur écrans plus
   petits — les flacons sont ainsi nettement plus grands qu'en 4 colonnes. */
.arkan-fp-marques-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; background: transparent; }
.arkan-fp-marque-card{ background: var(--burgundy); border: 1px solid var(--line); transition: border-color .4s ease; }
.arkan-fp-marque-card:hover{ border-color: var(--brass); }
.arkan-fp-marque-card h3{ font-family: var(--f-display); font-weight: 500; color: var(--parchment); font-size: 20px; letter-spacing: .16em; margin: 0; }
.arkan-fp-marque-card p{ font-family: var(--f-util); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--brass-light); margin: 6px 0 0; }

/* --- BOUTIQUE (cadre chaud, packshots bruts) --- */
.arkan-fp-frame-card{ text-align: center; padding: 0 0 30px; }
.arkan-fp-frame-box{
  position: relative; aspect-ratio: 1/1; margin-bottom: 22px; padding: 0;
  background: var(--burgundy);
  border: none; border-bottom: 1px solid var(--line);
  display: block; overflow: hidden;
  transition: box-shadow .3s ease;
}
/* La photo occupe tout l'espace du cadre : pas de fond ajouté, c'est le
   visuel du produit lui-même qui remplit la case. */
.arkan-fp-frame-box img{
  position: relative; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.arkan-fp-frame-card:hover .arkan-fp-frame-box img{ transform: scale(1.05); }
.arkan-fp-frame-card:hover .arkan-fp-frame-box{ box-shadow: 0 0 0 1px var(--brass) inset; }
.arkan-fp-products-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; background: transparent; }
.arkan-fp-product-card{ background: var(--burgundy); border: 1px solid var(--line); transition: border-color .4s ease; }
.arkan-fp-product-card:hover{ border-color: var(--brass); }
.arkan-fp-product-card h3{ font-family: var(--f-display); font-weight: 500; color: var(--parchment); font-size: 19px; margin: 0 0 6px; letter-spacing: .02em; }
.arkan-fp-product-card .p-notes{ font-family: var(--f-util); font-size: 12px; color: var(--parchment-dim); margin-bottom: 12px; letter-spacing: .03em; }
.arkan-fp-product-card .p-price{ font-family: var(--f-display); font-size: 16px; color: var(--brass-light); margin-bottom: 14px; }
.arkan-fp-product-card .p-price del{ opacity: .6; font-size: 13px; margin-right: 6px; }
.arkan-fp-product-card .p-link{ font-family: var(--f-util); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding-bottom: 3px; border-bottom: 1px solid var(--brass); color: var(--brass-light); }
.arkan-fp-section-more{ text-align: center; margin-top: 44px; }
.arkan-fp-empty-note{ text-align: center; font-family: var(--f-body); font-style: italic; color: var(--parchment-dim); padding: 20px 0; }

/* --- COFFRETS (fond uni) --- */
.arkan-fp-solid-card{ text-align: center; padding: 0 0 30px; }
.arkan-fp-solid-box{
  position: relative; aspect-ratio: 1/1; margin-bottom: 22px; padding: 0;
  background: var(--burgundy); border: none; border-bottom: 1px solid var(--line);
  display: block; overflow: hidden;
  transition: border-color .3s ease;
}
.arkan-fp-solid-box img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.arkan-fp-solid-card:hover .arkan-fp-solid-box img{ transform: scale(1.05); }
.arkan-fp-solid-card:hover .arkan-fp-solid-box{ border-color: var(--brass); }

/* --- PROCESS --- */
.arkan-fp-process-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); }
.arkan-fp-process-step{ background: var(--burgundy); padding: 32px 22px; }
.arkan-fp-process-step .num{ font-family: var(--f-display); font-size: 12.5px; color: var(--brass-light); letter-spacing: .14em; display: block; margin-bottom: 16px; }
.arkan-fp-process-step h3{ font-family: var(--f-display); font-weight: 500; color: var(--parchment); font-size: 17px; margin: 0 0 8px; }
.arkan-fp-process-step p{ font-family: var(--f-util); font-size: 12.5px; color: var(--parchment-dim); line-height: 1.8; margin: 0; }

/* --- MAISON --- */
.arkan-fp-maison .arkan-fp-wrap{ display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: center; }
.arkan-fp-maison-visual{ aspect-ratio: 4/5; border: 1px solid var(--line); background: linear-gradient(160deg, var(--panel), var(--ink) 70%); display: flex; align-items: center; justify-content: center; padding: 40px; }
.arkan-fp-maison-visual img{ max-width: 100%; max-height: 100%; object-fit: contain; }
.arkan-fp-maison p{ font-size: 17px; color: var(--parchment-dim); margin: 0 0 18px; }
.arkan-fp-facts{ margin-top: 28px; display: grid; gap: 12px; }
.arkan-fp-fact{ display: flex; gap: 12px; font-family: var(--f-util); font-size: 13.5px; color: var(--parchment-dim); }
.arkan-fp-fact::before{ content: '—'; color: var(--brass); }

/* --- CERCLE (newsletter) --- */
.arkan-fp-cercle{ text-align: center; }
.arkan-fp-cercle p{ color: var(--parchment-dim); max-width: 420px; margin: 0 auto 28px; }
.arkan-fp-cercle-form{
  display: flex; max-width: 420px; margin: 0 auto;
  border: 1px solid var(--line);
  background: rgba(9, 7, 6, .55);
  backdrop-filter: blur(3px);
}
.arkan-fp-cercle-form input{ flex: 1; background: transparent; border: none; padding: 15px 18px; font-family: var(--f-util); font-size: 13px; color: var(--parchment); }
.arkan-fp-cercle-form input:focus{ outline: none; }
.arkan-fp-cercle-form button{ border: none; border-left: 1px solid var(--line); background: var(--brass); color: var(--ink); font-family: var(--f-util); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; padding: 0 22px; cursor: pointer; }

/* --- Responsive --- */
@media (max-width: 980px){
  .arkan-fp-manifesto .arkan-fp-wrap, .arkan-fp-maison .arkan-fp-wrap{ grid-template-columns: 1fr; gap: 36px; }
  .arkan-fp-piliers-grid{ grid-template-columns: repeat(2, 1fr); }
  .arkan-fp-marques-grid{ grid-template-columns: repeat(2, 1fr); }
  .arkan-fp-photo-float{ height: 300px; }
  .arkan-fp-products-grid{ grid-template-columns: repeat(2, 1fr); }
  .arkan-fp-process-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .arkan-fp-piliers-grid{ grid-template-columns: 1fr 1fr; }
  .arkan-fp-products-grid{ grid-template-columns: 1fr; }
  .arkan-fp-process-grid{ grid-template-columns: 1fr; }
  .arkan-fp-marques-grid{ grid-template-columns: 1fr; }
  .arkan-fp-photo-float{ height: 320px; }
}

/* =====================================================================
   13. FICHE PRODUIT — SECTION ÉDITORIALE & FAQ
   ===================================================================== */

/* --- Récit du parfum, façon page de maison --- */
.arkan-story{
  margin: 90px 0 0;
  padding: clamp(50px, 7vw, 90px) clamp(20px, 4vw, 56px);
  background: var(--burgundy-deep);
  border: 1px solid var(--line-soft);
}
.arkan-story__inner{ max-width: 1040px; margin: 0 auto; }
.arkan-story__eyebrow{
  display: block; text-align: center;
  font-family: var(--f-util); font-size: 10.5px;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 36px;
}
.arkan-story__body{
  font-family: var(--f-body); font-size: 17.5px;
  line-height: 1.95; color: var(--parchment-dim);
}
/* Les paragraphes de lecture restent sur une colonne étroite et
   centrée (confort de lecture), tandis que les blocs image+texte,
   citations et figures ci-dessous utilisent toute la largeur du
   conteneur (920px) — c'est ce contraste de largeur qui crée l'effet
   "asymétrique". Cette approche n'a besoin d'aucun débordement au-delà
   du conteneur parent, donc rien ne peut la faire disparaître si un
   élément ancêtre limite le débordement ailleurs sur le site. */
.arkan-story__body > p{ max-width: 600px; margin-left: auto; margin-right: auto; margin-bottom: 22px; }
.arkan-story__body p:first-of-type{
  font-style: italic; font-size: 21px; line-height: 1.7;
  color: var(--parchment); text-align: center;
  max-width: 680px; margin-bottom: 40px;
}
.arkan-story__body h2,
.arkan-story__body h3{
  font-family: var(--f-display) !important; color: var(--parchment) !important;
  font-size: 22px !important; font-weight: 400 !important;
  letter-spacing: .04em; margin: 44px 0 18px !important;
}
.arkan-story__body ul{ max-width: 640px; margin: 0 auto 24px; padding-left: 0; list-style: none; }
.arkan-story__body li{
  position: relative; padding-left: 22px; margin-bottom: 10px;
}
.arkan-story__body li::before{
  content: '—'; position: absolute; left: 0; color: var(--brass);
}
.arkan-story__body strong{ color: var(--parchment); font-weight: 500; }

/* --- FAQ : accordéon natif, sans JavaScript --- */
.arkan-faq{ padding: clamp(60px, 8vw, 90px) 0 0; }
.arkan-faq__inner{ max-width: 820px; margin: 0 auto; }
.arkan-faq__eyebrow{
  display: block; text-align: center;
  font-family: var(--f-util); font-size: 10.5px;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 14px;
}
.arkan-faq__title{
  font-family: var(--f-display) !important; color: var(--parchment) !important;
  text-align: center; font-size: clamp(22px, 2.6vw, 30px) !important;
  font-weight: 400 !important; margin: 0 0 44px !important;
}
.arkan-faq__item{
  border-bottom: 1px solid var(--line-soft);
}
.arkan-faq__item summary{
  cursor: pointer; list-style: none;
  padding: 24px 40px 24px 0; position: relative;
  font-family: var(--f-display); font-size: 17px;
  color: var(--parchment); letter-spacing: .01em;
  transition: color .3s ease;
}
.arkan-faq__item summary::-webkit-details-marker{ display: none; }
.arkan-faq__item summary:hover{ color: var(--brass-light); }
/* Croix qui pivote en "moins" à l'ouverture */
.arkan-faq__item summary::after{
  content: '+'; position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-util); font-size: 20px; font-weight: 300;
  color: var(--brass); transition: transform .35s ease;
}
.arkan-faq__item[open] summary::after{
  content: '−'; transform: translateY(-50%) rotate(180deg);
}
.arkan-faq__item[open] summary{ color: var(--brass-light); }
.arkan-faq__answer{
  padding: 0 40px 28px 0;
  font-family: var(--f-body); font-size: 16px;
  line-height: 1.85; color: var(--parchment-dim);
}
.arkan-faq__answer p{ margin: 0 0 14px; }
.arkan-faq__answer p:last-child{ margin-bottom: 0; }

@media (max-width: 700px){
  .arkan-story{ padding-left: 22px; padding-right: 22px; }
  .arkan-faq__item summary{ font-size: 15.5px; padding-right: 34px; }
}

/* --- Images dans le récit produit (façon Dior / Guerlain) ---------------
   Deux usages possibles dans la description du produit :
   1. Une image seule insérée via l'éditeur WordPress → elle passe
      automatiquement en pleine largeur du récit, avec sa légende.
   2. Un bloc image + texte côte à côte, via le gabarit HTML
      .arkan-story__duo (voir le fichier de textes fourni).
   ---------------------------------------------------------------------- */

/* 1. Image simple insérée dans la description */
.arkan-story__body img{
  width: 100%; height: auto; display: block;
  margin: 0; border: 1px solid var(--line-soft);
}
.arkan-story__body figure,
.arkan-story__body .wp-block-image{
  margin: 46px 0; width: 100% !important; max-width: none !important;
}
.arkan-story__body figcaption,
.arkan-story__body .wp-caption-text{
  font-family: var(--f-util); font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass); text-align: center;
  margin-top: 14px;
}

/* 2. Bloc image + texte côte à côte */
.arkan-story__duo{
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: clamp(28px, 4vw, 50px); align-items: center;
  margin: 60px 0;
}
.arkan-story__duo--reverse{ grid-template-columns: 1fr 1.6fr; }
.arkan-story__duo--reverse .arkan-story__duo-media{ order: 2; }
.arkan-story__duo-media img{
  width: 100%; height: 100%; aspect-ratio: 5/6;
  object-fit: cover; display: block;
  border: 1px solid var(--line-soft);
}
.arkan-story__duo-text h2,
.arkan-story__duo-text h3{ margin-top: 0 !important; }
.arkan-story__duo-text p:last-child{ margin-bottom: 0; }
.arkan-story__duo-text p:first-of-type{
  font-style: normal; font-size: inherit; text-align: left;
  color: var(--parchment-dim); margin-bottom: 22px;
}

/* 3. Citation / phrase de respiration entre deux blocs */
.arkan-story__quote{
  font-family: var(--f-body); font-style: italic;
  font-size: clamp(20px, 2.6vw, 27px); line-height: 1.6;
  color: var(--parchment); text-align: center;
  max-width: 620px; margin: 56px auto;
  padding: 40px 0; border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

@media (max-width: 700px){
  .arkan-story__duo, .arkan-story__duo--reverse{
    grid-template-columns: 1fr; gap: 22px;
  }
  .arkan-story__duo--reverse .arkan-story__duo-media{ order: 0; }
  .arkan-story__duo-media img{ aspect-ratio: 16/10; }
}

/* =====================================================================
   14. CARTES DE LOT — 1 / 2 / 3 flacons (fiche produit)
   =====================================================================
   Compactes et alignées sur une seule ligne nette : pas de carte
   surélevée, pas d'étiquette flottante qui casse l'alignement — juste
   trois choix clairs, faciles à comparer d'un coup d'œil.
   ===================================================================== */
.arkan-pack-cards{
  margin: 6px 0 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}
/* Filet de sécurité : si le formulaire standard "quantité + Ajouter au
   panier" est malgré tout présent (le retrait PHP peut être contourné
   par un autre plugin/thème selon l'ordre d'exécution), on le masque
   ici en CSS pur dès que les cartes de lot sont là. Cette règle ne
   dépend d'aucun hook WordPress — elle fonctionne toujours. */
.summary.entry-summary:has(.arkan-pack-cards) > form.cart{
  display: none !important;
}
.arkan-pack-cards__eyebrow{
  display: block;
  font-family: var(--f-util); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--brass);
  margin-bottom: 8px;
}
.arkan-pack-cards__pitch{
  font-family: var(--f-body); font-style: italic;
  font-size: 14.5px; color: var(--parchment-dim);
  margin: 0 0 16px;
}
.arkan-pack-cards__grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}

.arkan-pack-card{
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--burgundy);
  border: 1px solid var(--brass-dim);
  padding: 14px 6px 12px;
  transition: border-color .3s ease, background .3s ease;
}
.arkan-pack-card:hover{
  border-color: var(--brass-light);
  background: var(--burgundy-deep);
}
.arkan-pack-card__badge{
  font-family: var(--f-util); font-size: 9px; letter-spacing: .06em;
  color: var(--ink); background: var(--brass);
  padding: 2px 7px; margin-bottom: 7px;
}
.arkan-pack-card__qty{
  font-family: var(--f-display); font-size: 20px; line-height: 1;
  color: var(--brass-light); margin-bottom: 3px;
}
.arkan-pack-card:first-child .arkan-pack-card__qty{ color: var(--parchment); }
.arkan-pack-card:first-child{ border-color: var(--line); }
.arkan-pack-card__label{
  font-family: var(--f-util); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--parchment-dim); margin-bottom: 8px;
}
.arkan-pack-card__price{
  font-family: var(--f-display); font-size: 12.5px; color: var(--parchment);
}
.arkan-pack-card__price del{
  display: block; font-size: 10px; color: var(--parchment-dim);
  opacity: .5; margin-top: 2px; font-family: var(--f-util);
}

@media (max-width: 560px){
  .arkan-pack-cards__grid{ grid-template-columns: 1fr; gap: 8px; }
  .arkan-pack-card{ flex-direction: row; justify-content: space-between; align-items: center; padding: 12px 16px; text-align: left; }
  .arkan-pack-card__qty, .arkan-pack-card__label{ margin-bottom: 0; }
}

/* =====================================================================
   15. PYRAMIDE OLFACTIVE VISUELLE + ENCART "COMMENT LE PORTER"
   (blocs optionnels à insérer dans la description du produit, en HTML,
   pour remplacer la liste à puces et le paragraphe plat)
   ===================================================================== */

/* --- Pyramide : trois colonnes avec barre graduée (tête courte,
   fond haute) — reprend le même langage visuel que "Les Quatre
   Piliers" de la page d'accueil, pour une cohérence de marque. --- */
.arkan-story__notes{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  margin: 56px 0; padding: 44px 0;
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  text-align: center;
}
.arkan-story__notes-col{ display: flex; flex-direction: column; align-items: center; }
.arkan-story__notes-bar{
  width: 3px; border-radius: 1px; margin-bottom: 18px;
  background: linear-gradient(180deg, var(--brass-light), var(--brass-dim));
}
.arkan-story__notes-col:nth-child(1) .arkan-story__notes-bar{ height: 26px; }
.arkan-story__notes-col:nth-child(2) .arkan-story__notes-bar{ height: 46px; }
.arkan-story__notes-col:nth-child(3) .arkan-story__notes-bar{ height: 68px; }
.arkan-story__notes-label{
  display: block;
  font-family: var(--f-display); font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brass-light); margin-bottom: 12px;
}
.arkan-story__notes-list{
  font-family: var(--f-body); font-style: italic; font-size: 14.5px;
  line-height: 1.8; color: var(--parchment-dim); margin: 0;
}
@media (max-width: 600px){
  .arkan-story__notes{ grid-template-columns: 1fr; gap: 26px; }
}

/* --- Encart "Comment le porter" : sort du flux de texte plat pour
   clore le récit sur un vrai bloc, façon fiche-conseil de maison. --- */
.arkan-story__tips{
  margin: 56px 0 10px;
  padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 40px);
  background: var(--panel);
  border: 1px solid var(--brass-dim);
}
.arkan-story__tips-label{
  display: block; text-align: center;
  font-family: var(--f-display); font-size: 15px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--parchment); margin-bottom: 30px;
}
.arkan-story__tips-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
}
/* Conteneur simple (sans bande bordeaux) pour l'encart "Comment le
   porter" quand il s'affiche seul, automatiquement, sans description
   longue au-dessus — évite une double bande bordeaux consécutive. */
.woocommerce div.product > .arkan-story-plain{
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 60px !important;
  padding: 0 clamp(20px, 5vw, 56px);
}
.arkan-story-plain .arkan-story__tips{ margin: 0; }
.arkan-story__tip strong{
  display: block;
  font-family: var(--f-util); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brass-light); margin-bottom: 9px;
}
.arkan-story__tip p{
  font-family: var(--f-body); font-size: 14px; line-height: 1.7;
  color: var(--parchment-dim); margin: 0;
}
@media (max-width: 600px){
  .arkan-story__tips-grid{ grid-template-columns: 1fr; gap: 20px; text-align: center; }
}

/* =====================================================================
   16. ORDRE FORCÉ DE LA COLONNE RÉSUMÉ (fiche produit)
   =====================================================================
   Plutôt que de dépendre de l'ordre exact dans lequel WooCommerce,
   Astra ou Rank Math déclenchent leurs hooks (imprévisible et sujet à
   surprises, comme observé), on transforme la colonne résumé en
   conteneur flex vertical et on fixe l'ordre RÉEL à l'affichage ici,
   en CSS pur. Indépendant de tout hook PHP.
   ===================================================================== */
.woocommerce div.product .summary.entry-summary{
  display: flex;
  flex-direction: column;
}
.woocommerce div.product .summary.entry-summary > *{ order: 10; }

.woocommerce div.product .summary.entry-summary .arkan-pp-eyebrow{ order: 1; }
.woocommerce div.product .summary.entry-summary .product_title{ order: 2; }
.woocommerce div.product .summary.entry-summary .arkan-pp-tags{ order: 3; }
.woocommerce div.product .summary.entry-summary .woocommerce-product-rating{ order: 4; }
.woocommerce div.product .summary.entry-summary p.price,
.woocommerce div.product .summary.entry-summary span.price{ order: 5; }
.woocommerce div.product .summary.entry-summary .woocommerce-product-details__short-description{ order: 6; }
.woocommerce div.product .summary.entry-summary .arkan-pp-notes{ order: 7; }
.woocommerce div.product .summary.entry-summary form.cart{ order: 8; }
.woocommerce div.product .summary.entry-summary .arkan-pack-cards{ order: 9; }
/* Disponibilité + UGS/Catégorie groupés juste après les cartes */
.woocommerce div.product .summary.entry-summary .stock{ order: 11; }
.woocommerce div.product .summary.entry-summary .product_meta{ order: 12; }
/* Le bandeau de réassurance ferme la colonne */
.woocommerce div.product .summary.entry-summary .arkan-pp-badges{ order: 13; }

/* Filet de sécurité : si "Avis" réapparaît malgré le retrait PHP (un
   plugin peut le rétablir selon l'ordre d'exécution), on le masque
   ici en CSS pur, qui ne dépend d'aucun hook WordPress. */
#reviews, #tab-reviews, .woocommerce-Reviews, .reviews_tab{
  display: none !important;
}

/* =====================================================================
   17. RÉCAPITULATIF DES NOTES — COFFRETS MULTI-PARFUMS
   =====================================================================
   Pour les coffrets (plusieurs parfums, pas de pyramide automatique
   possible) : un récapitulatif simple en fin de description, un bloc
   par parfum avec son nom et toutes ses notes à la suite. Volontai-
   rement plus sobre que les barres graduées, pour rester lisible même
   avec beaucoup de parfums dans un même coffret.
   ===================================================================== */
.arkan-story__recap{
  margin: 56px 0 0; padding: 36px 0 0;
  border-top: 1px solid var(--line-soft);
}
.arkan-story__recap-title{
  display: block; text-align: center;
  font-family: var(--f-util); font-size: 10.5px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--brass); margin-bottom: 28px;
}
.arkan-story__recap-item{
  padding: 14px 0; border-bottom: 1px solid var(--line-soft);
}
.arkan-story__recap-item:last-child{ border-bottom: none; }
.arkan-story__recap-item strong{
  font-family: var(--f-display); font-size: 14px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brass-light); margin-right: 12px;
}
.arkan-story__recap-item span{
  font-family: var(--f-body); font-style: italic; font-size: 15px;
  color: var(--parchment-dim);
}

/* =====================================================================
   18. PAGE DE LISTE DES ARTICLES — HERO + GRILLE INTERACTIVE
   ===================================================================== */

.arkan-blog__hero{
  min-height: 46vh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 40px 24px;
}
.arkan-blog__hero-inner{ max-width: 720px; }
.arkan-blog__hero .eyebrow{
  display: block; font-family: var(--f-util); font-size: 11px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--brass); margin-bottom: 14px;
}
.arkan-blog__hero-cat{
  display: block; font-family: var(--f-util); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--brass-light); margin-bottom: 18px;
}
.arkan-blog__hero h1{
  font-family: var(--f-display); font-weight: 500; color: var(--parchment);
  font-size: clamp(28px, 4.5vw, 46px); margin: 0 0 20px;
}
.arkan-blog__hero-hint{
  font-family: var(--f-util); font-size: 12px; color: var(--parchment-dim);
  letter-spacing: .02em; margin: 0;
}

.arkan-blog__wrap{
  max-width: 1180px; margin: 0 auto; padding: 50px 24px 80px;
  background: var(--burgundy);
}
.arkan-blog__row{ display: flex; gap: 20px; margin-bottom: 20px; }
@media (max-width: 720px){ .arkan-blog__row{ flex-direction: column; } }

.arkan-blog__panel{
  display: flex; align-items: flex-end; text-decoration: none;
  position: relative; overflow: hidden; min-height: 220px;
  background-color: var(--panel); background-size: cover; background-position: center;
  border: 1px solid var(--brass-dim);
  flex: 1 1 0;
  transition: flex-grow .5s cubic-bezier(.4,0,.2,1), border-color .35s ease;
}
.arkan-blog__panel:hover{ border-color: var(--brass); }
.arkan-blog__panel.is-wide{ flex-grow: 2.4; }

.arkan-blog__panel-inner{ position: relative; z-index: 2; padding: 24px; display: block; width: 100%; }
.arkan-blog__panel .cat{
  display: block; font-family: var(--f-util); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brass-light); margin-bottom: 8px;
}
.arkan-blog__panel h3{
  font-family: var(--f-display); color: var(--parchment); font-weight: 500;
  margin: 0; font-size: 15px; line-height: 1.35; transition: font-size .4s ease;
}
.arkan-blog__panel.is-wide h3{ font-size: 22px; }
.arkan-blog__panel .summary{
  display: block; font-family: var(--f-body); font-style: italic; color: var(--parchment-dim);
  font-size: 13.5px; line-height: 1.65; margin-top: 10px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .45s ease, opacity .35s ease .05s;
}
.arkan-blog__panel.is-wide .summary{ max-height: 90px; opacity: 1; }

.arkan-blog__panel .open-tag{
  position: absolute; top: 16px; right: 18px; z-index: 3;
  font-family: var(--f-util); font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass); opacity: 0; transition: opacity .3s ease;
}
.arkan-blog__panel.is-wide .open-tag{ opacity: 1; }

.arkan-blog__pagination{
  display: flex; justify-content: center; gap: 10px; margin-top: 50px; flex-wrap: wrap;
}
.arkan-blog__pagination .page-numbers{
  font-family: var(--f-util); font-size: 12px; letter-spacing: .05em; color: var(--parchment-dim);
  border: 1px solid var(--brass-dim); padding: 10px 16px; text-decoration: none; transition: all .25s ease;
}
.arkan-blog__pagination .page-numbers:hover,
.arkan-blog__pagination .page-numbers.current{
  border-color: var(--brass); color: var(--brass-light);
}
.arkan-blog__empty{
  text-align: center; color: var(--parchment-dim); font-family: var(--f-body);
  font-style: italic; padding: 60px 0;
}

/* =====================================================================
   19. PIED DE PAGE ARKĀN + ICÔNES NAV (panier / recherche)
   =====================================================================
   Le pied de page par défaut d'Astra est masqué ici plutôt que
   supprimé en PHP (structure HTML du thème parent non vérifiée,
   voir note dans functions.php). Plusieurs sélecteurs candidats pour
   couvrir les variations possibles selon la version d'Astra.
   ===================================================================== */
#colophon,
.site-footer,
.ast-footer,
footer.site-footer,
.ast-small-footer{
  display: none !important;
}

.arkan-footer{
  background: var(--ink);
  border-top: 1px solid var(--line);
  padding: 60px 24px 0;
}
.arkan-footer__wrap{
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px;
  padding-bottom: 50px;
}
@media (max-width: 720px){
  .arkan-footer__wrap{ grid-template-columns: 1fr; gap: 32px; }
}
.arkan-footer__logo{
  display: block; font-family: var(--f-display); color: var(--parchment);
  font-size: 20px; letter-spacing: .04em; margin-bottom: 14px;
}
.arkan-footer__tagline{
  font-family: var(--f-body); font-style: italic; color: var(--parchment-dim);
  font-size: 14px; line-height: 1.7; max-width: 320px; margin: 0;
}
.arkan-footer__col-title{
  display: block; font-family: var(--f-util); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brass); margin-bottom: 16px;
}
.arkan-footer__col ul{ list-style: none; margin: 0; padding: 0; }
.arkan-footer__col li{ margin-bottom: 10px; }
.arkan-footer__col a{
  font-family: var(--f-body); font-size: 14.5px; color: var(--parchment-dim);
  text-decoration: none; transition: color .25s ease;
}
.arkan-footer__col a:hover{ color: var(--brass-light); }
.arkan-footer__menu-hint{
  font-family: var(--f-util); font-size: 12px; color: var(--parchment-dim); opacity: .6;
}
.arkan-footer__bottom{
  border-top: 1px solid var(--line-soft); padding: 22px 24px;
  text-align: center;
}
.arkan-footer__bottom p{
  font-family: var(--f-util); font-size: 11.5px; letter-spacing: .03em;
  color: var(--parchment-dim); opacity: .7; margin: 0;
}

/* --- Icônes panier / recherche dans la nav principale --- */
.arkan-nav-icons{
  display: flex !important; align-items: center; gap: 16px; margin-left: 12px;
}
.arkan-nav-search-toggle{
  background: none; border: none; cursor: pointer; color: var(--parchment);
  padding: 4px; display: flex; transition: color .25s ease;
}
.arkan-nav-search-toggle:hover{ color: var(--brass-light); }
.arkan-nav-cart{
  position: relative; display: flex; color: var(--parchment);
  transition: color .25s ease;
}
.arkan-nav-cart:hover{ color: var(--brass-light); }
.arkan-nav-cart-count{
  position: absolute; top: -8px; right: -10px;
  background: var(--brass); color: var(--ink);
  font-family: var(--f-util); font-size: 10px; font-weight: 600;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.arkan-nav-search-panel{
  position: absolute; top: 100%; right: 0; left: 0;
  background: var(--ink); border-bottom: 1px solid var(--brass-dim);
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .35s ease, opacity .3s ease;
  list-style: none !important;
}
.arkan-nav-search-panel.is-open{ max-height: 90px; opacity: 1; }
.arkan-nav-search-panel form{ padding: 18px 24px; }
.arkan-nav-search-panel input{
  width: 100%; max-width: 500px; background: transparent;
  border: none; border-bottom: 1px solid var(--brass-dim);
  font-family: var(--f-body); font-style: italic; font-size: 15px;
  color: var(--parchment); padding: 8px 2px;
}
.arkan-nav-search-panel input:focus{ outline: none; border-color: var(--brass); }


/* =====================================================================
   20. PAGINATION BOUTIQUE — confirmé par test en direct : la bordure
   appartient au <li> parent, pas au <a>/<span> qu'il contient. C'est
   pour ça que les tentatives précédentes sur .page-numbers seul ne
   changeaient jamais la bordure, même avec !important.
   ===================================================================== */
.woocommerce nav.woocommerce-pagination ul.page-numbers li{
  border: 1px solid var(--brass) !important;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li a,
.woocommerce nav.woocommerce-pagination ul.page-numbers li span{
  background-color: var(--burgundy);
  color: var(--parchment);
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li span.current,
.woocommerce nav.woocommerce-pagination ul.page-numbers li a:hover{
  background-color: var(--brass);
  color: #ffffff;
}
.woocommerce-pagination{
  text-align: center;
}