/*
Theme Name: Alpha Aquila — Modern Alchemist
Theme URI: https://alphaquila.com
Description: Thème enfant de Flatsome. Porte la direction artistique de la V3 React sur la boutique WooCommerce : mêmes variables de couleur, mêmes polices, même langage de bouton. Le visiteur qui passe du site à l'achat ne doit pas sentir qu'il a changé de maison.
Author: Alpha Aquila
Template: flatsome
Version: 1.1.0
Text Domain: flatsome-child
*/

/* ══════════════════════════════════════════════════════════════════════════════════════
   1. LES JETONS — copiés du thème « soleil » de la V3 (src/index.css)
   ⚠️ Recopiés à nouveau le 21/09 : la V3 avait éclairci ses fonds le 08/09 (bd633d8) et
   cette feuille gardait l'ancien marron. Toute retouche de « soleil » se reporte ICI.
   ══════════════════════════════════════════════════════════════════════════════════════
   « soleil » est le thème par défaut du site : c'est celui que voit un visiteur qui n'a
   jamais rien choisi (Navbar.tsx et WelcomePortal.tsx, repli de `localStorage`).

   La V3 en propose quatre et laisse le visiteur basculer. La boutique aussi depuis le
   13/10/2026 : les trois autres palettes sont en 1 bis, et le choix du visiteur voyage dans
   le cookie `aa-theme` posé sur `.alphaquila.com` (voir « LES QUATRE THÈMES » dans
   functions.php). Sans cookie, c'est « soleil » : rien ne change pour qui n'a rien choisi.

   ⚠️ Aucune couleur en dur ailleurs dans ce fichier. Une valeur recopiée à la main est une
   divergence qui attend son heure. Les teintes qui servent à plusieurs opacités (voiles de
   l'en-tête, du pied, des bandeaux) sont données en triplets `--rgb-…` : chaque thème n'en
   redéfinit que trois, et `rgba(var(--rgb-…), .x)` fait le reste.
   ══════════════════════════════════════════════════════════════════════════════════════ */

:root {
  --color-bg: #3D280D;
  --color-bg-secondary: #483214;
  --color-accent: #C9A84C;
  --color-accent-secondary: #B08E3A;
  --color-text: #EDE5D5;
  --color-text-muted: #C0AD90;
  --color-card-bg: rgba(69, 48, 20, 0.52);
  --color-card-border: rgba(196, 146, 42, 0.22);
  --color-header-bg: rgba(53, 33, 11, 0.86);
  --color-shadow: rgba(196, 146, 42, 0.15);
  --color-shadow-strong: rgba(196, 146, 42, 0.30);
  --color-footer-bg: rgba(53, 33, 11, 0.72);
  --color-gold: #C4922A;
  --color-gold-soft: rgba(196, 146, 42, 0.18);
  --color-gold-glow: rgba(201, 168, 76, 0.6);
  --color-section-bg: rgba(69, 48, 20, 0.38);

  /* Le signal « promotion » — vert émeraude assourdi, celui du cœur du logo (choix de Seb,
     27/09/2026 ; c'était un cinabre). Même valeur que la V3 (src/index.css). Blanc dessus :
     6,30:1 (AA). Les signaux d'erreur gardent le cinabre, sous --color-erreur. */
  --color-promo: #2E6B4F;
  --color-erreur: #B4472F;

  /* Les triplets du thème : le fond de page, le fond d'en-tête (celui de --color-header-bg),
     le fond de page assombri (bandeau de titre), l'ombre la plus profonde et le filet. */
  --rgb-bg: 61, 40, 13;
  --rgb-header: 53, 33, 11;
  --rgb-bg-sombre: 38, 24, 8;
  --rgb-ombre: 20, 12, 4;
  --rgb-filet: 196, 146, 42;

  /* Une saisie n'est pas une carte : elle doit se lire comme un creux, pas comme un relief. */
  --color-champ-bg: rgba(var(--rgb-ombre), 0.55);
  --color-champ-border: rgba(var(--rgb-filet), 0.34);

  /* Ombre portée derrière un texte clair posé sur une image claire (bandeaux de titre). */
  --color-voile-texte: rgba(var(--rgb-ombre), 0.85);
  /* Voiles du bandeau de l'espace client (11.5) — dans le BRUN du site (--color-bg, #3D280D) et
     non un quasi-noir : c'est ce brun qui teinte le reste de la page (image à 30 % sur lui).
     Premier essai en rgba(20,12,4) : Seb l'a vu noir, « pas l'effet marron du reste ». */
  --color-voile-bandeau: rgba(var(--rgb-bg), 0.65);
  --color-voile-titre: rgba(var(--rgb-bg), 0.60);
  --color-voile-titre-nul: rgba(var(--rgb-bg), 0);
  /* Fond OPAQUE d'un champ rempli par le navigateur : --color-champ-bg est translucide, et
     l'ombre intérieure qui masque le fond clair de l'autoremplissage doit être opaque. Valeur
     choisie pour se confondre avec un champ vide posé sur sa carte, vérifiée côte à côte le 27/09. */
  --color-champ-autofill: #21160A;
  /* …et sa bordure : --color-champ-border est translucide, le fond clair de Chrome se voyait à
     travers. Même teinte rendue opaque : or à 34 % sur #21160A = #584015 (calcul). */
  --color-champ-border-autofill: #584015;

  --font-titre: 'Cinzel', Georgia, 'Times New Roman', serif;
  --font-editorial: 'Cormorant Garamond', Georgia, serif;
  --font-ui: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   1 bis. LES TROIS AUTRES THÈMES — copiés de src/index.css le 13/10/2026
   ══════════════════════════════════════════════════════════════════════════════════════
   Mêmes valeurs que les blocs [data-theme="…"] de la V3 : toute retouche là-bas se reporte
   ici. `--color-gold`, `--color-promo` et `--color-erreur` ne changent pas d'un thème à
   l'autre, comme sur la V3 : ils restent ceux de :root.

   Ce qui est propre à cette feuille est DÉDUIT de la palette, pas choisi à l'œil :
     · --rgb-bg, --rgb-header : les triplets de --color-bg et de --color-header-bg ;
     · --rgb-filet : celui de --color-card-border ;
     · --rgb-bg-sombre, --rgb-ombre : le fond × 0,62 et × 0,33, les rapports de « soleil » ;
     · --color-champ-autofill : le champ posé sur le fond, × 0,86 (rapport de « soleil ») ;
     · --color-champ-border-autofill : le filet à 34 % sur ce fond, rendu opaque.
   ══════════════════════════════════════════════════════════════════════════════════════ */

html[data-theme="mystere"] {
  --color-bg: #36143D;
  --color-bg-secondary: #411A4F;
  --color-accent: #C9A0B8;
  --color-accent-secondary: #A87D98;
  --color-text: #F0E4EC;
  --color-text-muted: #CDB0C4;
  --color-card-bg: rgba(68, 33, 88, 0.52);
  --color-card-border: rgba(201, 160, 184, 0.22);
  --color-header-bg: rgba(47, 18, 58, 0.86);
  --color-shadow: rgba(201, 160, 184, 0.15);
  --color-shadow-strong: rgba(201, 160, 184, 0.30);
  --color-footer-bg: rgba(47, 18, 58, 0.72);
  --color-gold-soft: rgba(201, 160, 184, 0.18);
  --color-gold-glow: rgba(201, 160, 184, 0.6);
  --color-section-bg: rgba(68, 33, 88, 0.38);

  --rgb-bg: 54, 20, 61;
  --rgb-header: 47, 18, 58;
  --rgb-bg-sombre: 33, 12, 38;
  --rgb-ombre: 18, 7, 20;
  --rgb-filet: 201, 160, 184;
  --color-champ-autofill: #1D0B21;
  --color-champ-border-autofill: #583E54;
}

html[data-theme="cosmos"] {
  --color-bg: #181858;
  --color-bg-secondary: #1E1E6A;
  --color-accent: #A8C8DC;
  --color-accent-secondary: #8AB0C8;
  --color-text: #D8E2EE;
  --color-text-muted: #A8BCCE;
  --color-card-bg: rgba(30, 30, 93, 0.52);
  --color-card-border: rgba(168, 200, 220, 0.22);
  --color-header-bg: rgba(22, 22, 74, 0.86);
  --color-shadow: rgba(168, 200, 220, 0.15);
  --color-shadow-strong: rgba(168, 200, 220, 0.30);
  --color-footer-bg: rgba(22, 22, 74, 0.72);
  --color-gold-soft: rgba(168, 200, 220, 0.18);
  --color-gold-glow: rgba(168, 200, 220, 0.6);
  --color-section-bg: rgba(30, 30, 93, 0.38);

  --rgb-bg: 24, 24, 88;
  --rgb-header: 22, 22, 74;
  --rgb-bg-sombre: 15, 15, 55;
  --rgb-ombre: 8, 8, 29;
  --rgb-filet: 168, 200, 220;
  --color-champ-autofill: #0D0D30;
  --color-champ-border-autofill: #424D6A;
}

html[data-theme="terre"] {
  --color-bg: #1E3524;
  --color-bg-secondary: #253F2C;
  --color-accent: #8CB8A0;
  --color-accent-secondary: #72A088;
  --color-text: #D5E8DC;
  --color-text-muted: #B0D0BC;
  --color-card-bg: rgba(34, 64, 42, 0.52);
  --color-card-border: rgba(140, 184, 160, 0.22);
  --color-header-bg: rgba(27, 45, 32, 0.86);
  --color-shadow: rgba(140, 184, 160, 0.15);
  --color-shadow-strong: rgba(140, 184, 160, 0.30);
  --color-footer-bg: rgba(27, 45, 32, 0.72);
  --color-gold-soft: rgba(140, 184, 160, 0.18);
  --color-gold-glow: rgba(140, 184, 160, 0.6);
  --color-section-bg: rgba(34, 64, 42, 0.38);

  --rgb-bg: 30, 53, 36;
  --rgb-header: 27, 45, 32;
  --rgb-bg-sombre: 19, 33, 22;
  --rgb-ombre: 10, 17, 12;
  --rgb-filet: 140, 184, 160;
  --color-champ-autofill: #101D14;
  --color-champ-border-autofill: #3A5244;
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   2. REPRENDRE LA MAIN SUR LE PERSONNALISATEUR DE FLATSOME
   ══════════════════════════════════════════════════════════════════════════════════════
   ⚠️ CECI EXPLIQUE LE GRIS DOMINANT DE LA PREMIÈRE PRÉVISUALISATION.

   Flatsome imprime les réglages du personnalisateur dans un <style id="custom-css">, dans
   le <head>, APRÈS notre feuille. Relevé sur la page en ligne :

       #wrapper, #main, #main.dark  { background-color: #806c51 }   ← le taupe grisé
       h1…h6, .heading-font         { color: #c4c4c4 }              ← les titres gris
       .footer-1                    { background-color: #ffffff }
       :root { --primary-color: #ad9c84; --fs-color-primary: #ad9c84; … }

   Deux raisons cumulées faisaient perdre nos règles : `#wrapper` et `#main` sont des
   sélecteurs d'ID (spécificité 1-0-0), et le bloc est injecté plus tard. À spécificité
   égale, le dernier gagne — et il arrivait après nous.

   On ne recourt pas à `!important` : on préfixe par `html`, ce qui donne une spécificité
   strictement supérieure (1-0-1 contre 1-0-0) tout en restant surchargeable ensuite. Un
   `!important` posé ici serait une dette : le prochain ajustement devrait en poser un aussi.

   Les VARIABLES de Flatsome sont redéfinies plutôt que combattues sélecteur par sélecteur :
   elles irriguent ses boutons, ses liens et ses accents. Une seule règle en repeint des
   dizaines.
   ══════════════════════════════════════════════════════════════════════════════════════ */

html:root {
  --primary-color: var(--color-accent);
  --fs-color-primary: var(--color-accent);
  --fs-color-secondary: var(--color-accent-secondary);
  --fs-color-base: var(--color-text);
  --fs-experimental-link-color: var(--color-accent);
  --fs-experimental-link-color-hover: var(--color-accent-secondary);
  /* --fs-color-success et --fs-color-alert restent ceux de Flatsome : un message d'erreur
     doit rester rouge et une confirmation verte, quelle que soit la charte. */
}

html body,
html .page-wrapper,
html #wrapper,
html #main,
html #main.dark,
html .blog-wrapper {
  background-color: transparent;
  color: var(--color-text);
  font-family: var(--font-ui);
}

/* Le pied de page était réglé en blanc pur dans Flatsome : sur une page obsidienne, il
   coupait le bas de l'écran net. */
html .footer-1,
html .footer-2 { background-color: var(--color-footer-bg); }

/* La visionneuse d'image plein écran reprenait elle aussi le taupe. */
html .pswp__bg,
html .mfp-bg.mfp-ready { background-color: rgba(var(--rgb-ombre), 0.94); }

html h1, html h2, html h3, html h4, html h5, html h6,
html .heading-font,
.entry-title,
.product-title,
.product-page-title,
.product-section-title,
.widget-title,
.uppercase {
  font-family: var(--font-titre);
  color: var(--color-text);
  letter-spacing: 0.01em;
}

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

/* Le corps éditorial — la description longue du produit, qui porte la réécriture. C'est le
   seul endroit de la boutique où l'on lit vraiment, et le seul qui prend le Cormorant. */
.woocommerce-Tabs-panel,
.product-short-description,
.entry-content {
  font-family: var(--font-editorial);
  font-size: 1.06rem;
  line-height: 1.62;
  color: var(--color-text-muted);
}

.woocommerce-Tabs-panel h2,
.woocommerce-Tabs-panel h3,
.entry-content h2,
.entry-content h3 {
  color: var(--color-accent);
  font-size: 1.02rem;
  letter-spacing: 0.03em;
  margin-top: 1.6em;
}

.entry-content strong,
.woocommerce-Tabs-panel strong { color: var(--color-text); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   3. LES BOUTONS
   ══════════════════════════════════════════════════════════════════════════════════════
   Un seul langage : fond doré, texte sombre, pas d'ombre portée. Flatsome empile ses
   propres règles avec une spécificité élevée — d'où les `!important`, limités à ce bloc
   et assumés. Les mettre partout ailleurs rendrait le thème impossible à ajuster ensuite.
   ══════════════════════════════════════════════════════════════════════════════════════ */

.button,
button,
input[type="submit"],
.button.primary,
.single_add_to_cart_button,
.checkout-button {
  font-family: var(--font-titre) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 6px !important;
  border: 1px solid var(--color-accent) !important;
  background-color: var(--color-accent) !important;
  color: var(--color-bg) !important;
  box-shadow: none !important;
  transition: background-color .25s ease, border-color .25s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover {
  background-color: var(--color-accent-secondary) !important;
  border-color: var(--color-accent-secondary) !important;
  color: var(--color-bg) !important;
}

/* Les boutons secondaires restent en creux : un écran ne peut pas avoir deux actions
   principales, et le tunnel en contient toujours au moins deux (« continuer » / « retour »). */
.button.is-outline,
.button.secondary.is-outline,
.wc-backward,
.continue-shopping,
button[name="update_cart"],
input[name="update_cart"] {
  background-color: transparent !important;
  color: var(--color-accent) !important;
}

/* Sur la capture du panier, « Poursuivre les achats » et « Mettre à jour le panier »
   étaient aussi pleins et aussi dorés que « Valider la commande ». Trois actions de même
   poids, c'est aucune action mise en avant : le regard n'a plus de point d'entrée. */
button[name="update_cart"]:disabled,
input[name="update_cart"]:disabled {
  opacity: .45;
  border-color: var(--color-card-border) !important;
  color: var(--color-text-muted) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   4. LES PRIX ET LA PROMOTION
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* ⚠️ LE DÉFAUT LE PLUS GRAVE DE LA PREMIÈRE VERSION ÉTAIT ICI.
   La règle ne visait que `.price-wrapper .amount`. Or au panier et à la commande, les
   montants sont des `.amount` NUS, dans des cellules de tableau : ils n'ont jamais reçu
   la couleur et gardaient celle, sombre, que Flatsome destine à son fond clair. Sur le
   fond obsidienne, l'acheteur ne voyait plus ce qu'il payait.
   Le doré n'était pas en cause : mesuré à 7,03 sur le fond de page et 6,68 sur les cartes,
   très au-dessus du seuil AA de 4,5. Il n'était simplement jamais appliqué.
   On vise donc la classe que WooCommerce pose PARTOUT, et le <bdi> qu'elle contient. */
.price,
.amount,
.woocommerce-Price-amount,
.woocommerce-Price-amount bdi,
.woocommerce-Price-currencySymbol,
.product-page-price,
.cart-price,
.cart_totals .amount,
.order-total .amount,
.woocommerce-checkout-review-order-table .amount,
.shop_table .amount,
.shipping .amount,
.woocommerce-shipping-methods label {
  font-family: var(--font-titre);
  color: var(--color-accent);
  font-weight: 600;
}

/* Le total est ce que l'acheteur cherche en premier : il passe en clair, pas en doré. */
.order-total .amount,
.order-total th,
.cart_totals .order-total .amount {
  color: var(--color-text);
  font-size: 1.06em;
}

/* Les mentions accessoires — TVA incluse, adresse de livraison, frais de port — restent
   lisibles sans concurrencer les montants. */
.includes_tax,
.tax_label,
.woocommerce-shipping-destination,
.shop_table small,
.cart_totals small {
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-weight: 400;
}

/* Le fil d'étapes du tunnel (Panier › Détails › Terminée) : il dit où l'on en est, il doit
   se lire. Flatsome le rend en gris clair, invisible sur obsidienne. */
.checkout-breadcrumb,
.checkout-breadcrumb a,
.woocommerce-breadcrumb {
  color: var(--color-text-muted);
  font-family: var(--font-ui);
}
.checkout-breadcrumb .current,
.checkout-breadcrumb a:hover { color: var(--color-accent); }

/* Le prix barré doit rester lisible : c'est un argument, pas un détail à cacher. */
.price del,
.price del .amount { color: var(--color-text-muted); opacity: .85; }
.price ins { text-decoration: none; }

/* Les pastilles produit sont elles aussi peintes par le personnalisateur, chacune de sa
   couleur : vert pour la promo, turquoise et jaune pour les « nouveautés ». D'où le badge
   « Pièce unique » bleu-gris sur la capture, hors charte. On les ramène à deux signaux
   seulement — la remise en vert émeraude, tout le reste en doré discret — et on préfixe par
   `html` pour passer devant le bloc de Flatsome. */
html .onsale,
html .badge-inner.on-sale {
  background-color: var(--color-promo);
  color: #fff;
  font-family: var(--font-titre);
  border-radius: 6px;
}

html .badge-inner,
html .badge-inner.new-bubble,
html .badge-inner.new-bubble-auto {
  background-color: var(--color-header-bg);
  color: var(--color-accent);
  font-family: var(--font-titre);
  border: 1px solid var(--color-card-border);
  border-radius: 6px;
}

/* La barre du haut porte un !important dans le personnalisateur : c'est le seul endroit
   où il faut lui répondre en nature. */
html .header-top { background-color: var(--color-header-bg) !important; }

.price-not-in-stock,
.stock.out-of-stock {
  color: var(--color-text-muted);
  font-family: var(--font-ui);
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   5. LES CARTES PRODUIT ET LA GRILLE
   ══════════════════════════════════════════════════════════════════════════════════════ */

.product-small,
.product-small .box,
.col-inner {
  background-color: transparent;
}

.box-image img { border-radius: 8px; }

.product-title,
.product-title a {
  font-family: var(--font-titre);
  color: var(--color-text);
  font-size: 0.98rem;
}
.product-title a:hover { color: var(--color-accent); }

.product-cat { color: var(--color-text-muted); font-family: var(--font-ui); font-size: .78rem; }

.product-main,
.product-container,
.product-section {
  background-color: transparent;
  border-color: var(--color-card-border);
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   6. LE TUNNEL — panier, commande, compte
   ══════════════════════════════════════════════════════════════════════════════════════
   C'est ici que le fond sombre coûte le plus cher : un champ de formulaire non stylé garde
   son fond blanc et son texte noir de navigateur, et l'écran devient un patchwork. Chaque
   type de saisie est donc traité, y compris ceux que WooCommerce insère lui-même.
   ══════════════════════════════════════════════════════════════════════════════════════ */

.shop_table,
.cart_totals,
.woocommerce-checkout-review-order-table,
.woocommerce-info,
.woocommerce-message,
.cart-sidebar,
.order_details {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: 10px;
  color: var(--color-text);
}

.shop_table th,
.cart_totals th,
.woocommerce-checkout-review-order-table th {
  font-family: var(--font-titre);
  color: var(--color-accent);
  letter-spacing: 0.04em;
  border-bottom-color: var(--color-card-border);
}

.shop_table td,
.woocommerce-checkout-review-order-table td { border-bottom-color: var(--color-card-border); }

.woocommerce-info,
.woocommerce-message { border-left: 3px solid var(--color-accent); }

/* Flatsome ramène la marge intérieure des encadrés à 0 (`.message-wrapper` : 0 0 8px) :
   avec notre fond et notre bordure, le texte collait au cadre (relevé le 27/09 sur
   /mon-compte/commandes/, « Confirmez votre adresse e-mail… »). `html` pour passer devant. */
html .woocommerce-info.message-wrapper,
html .woocommerce-message.message-wrapper { padding: .85rem 1.1rem; }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea,
.select2-container .select2-selection {
  background-color: var(--color-champ-bg) !important;
  border: 1px solid var(--color-champ-border) !important;
  border-radius: 6px !important;
  color: var(--color-text) !important;
  font-family: var(--font-ui);
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder { color: var(--color-text-muted); opacity: .75; }

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-accent) !important;
  outline: 2px solid var(--color-gold-soft);
  outline-offset: 1px;
}

label,
.form-row label { color: var(--color-text-muted); font-family: var(--font-ui); }

/* La liste déroulante native rend ses options avec les couleurs du système : sans cette
   règle, un menu « Pays » s'ouvre en texte clair sur fond clair chez certains visiteurs. */
select option { background-color: var(--color-bg-secondary); color: var(--color-text); }

/* ⚠️ Le champ de carte bancaire de Stripe est un IFRAME. Aucune règle d'ici ne l'atteint —
   son apparence se règle dans les réglages de la passerelle, et les possibilités y sont
   maigres. Ne pas chercher à le styler ici : c'est du temps perdu. */

/* ══════════════════════════════════════════════════════════════════════════════════════
   7. L'EN-TÊTE, LE FIL D'ARIANE ET LE PIED DE PAGE
   ══════════════════════════════════════════════════════════════════════════════════════ */

.header-main,
.header-bottom,
.header-wrapper {
  background-color: var(--color-header-bg) !important;
  border-bottom: 1px solid var(--color-card-border);
}

/* L'image de fond de l'en-tête doit COUVRIR sa zone.

   Le personnalisateur Flatsome ne pose que l'URL et `background-repeat: no-repeat`, sans
   aucun `background-size` — donc la valeur par défaut, `auto`, s'applique et l'image est
   peinte à sa taille naturelle. Mesuré sur alphaquila.com en 1920 de large : la zone fait
   1920x294 et l'image 1200x667, il restait 720 px de fond nu, 360 de chaque côté. Le
   réflexe serait de régénérer une image plus large ; ça ne réglerait rien, puisqu'en
   `auto` une image de 3000 px déborderait au lieu de se centrer.

   ⚠️ Le préfixe `html` est obligatoire : la règle d'origine vient du CSS en ligne du
   personnalisateur, qui bat la feuille de l'enfant à spécificité égale. Sans lui, cette
   déclaration est simplement ignorée.

   ⚠️ Ceci remplit la largeur, ça ne rend pas l'image adaptée pour autant : la zone est au
   ratio 6,53 et l'image à 1,80, donc `cover` n'en montre qu'une bande de 27 % de hauteur.
   Une bannière composée pour ce format reste à produire. */
html .header-bg-image {
  background-size: cover;
  background-position: center;
}

.nav > li > a { font-family: var(--font-titre); color: var(--color-text); letter-spacing: .04em; }
.nav > li > a:hover { color: var(--color-accent); }

.breadcrumbs { font-family: var(--font-ui); color: var(--color-text-muted); font-size: .8rem; }
.breadcrumbs a { color: var(--color-text-muted); }
.breadcrumbs a:hover { color: var(--color-accent); }

.footer-wrapper,
.footer,
.absolute-footer {
  background-color: var(--color-footer-bg) !important;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-card-border);
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   8. ACCESSIBILITÉ
   ══════════════════════════════════════════════════════════════════════════════════════ */

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media only screen and (max-width: 48em) {
  /* Le tableau du panier déborde sur un écran de téléphone : il défile dans son cadre
     plutôt que de pousser la page entière de côté. */
  .shop_table,
  .woocommerce-checkout-review-order-table { display: block; overflow-x: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   9. LE COMPTE CLIENT, LA LISTE DE SOUHAITS ET LE SUIVI DE COMMANDE
   ══════════════════════════════════════════════════════════════════════════════════════
   Ajouté le 15/09/2026. Le README annonçait ces trois écrans comme non traités, « ils
   viendront après les quatre écrans du tunnel ». Les voici.

   ── CE QUI A ÉTÉ MESURÉ, ET CE QUI NE POUVAIT PAS L'ÊTRE ─────────────────────────────

   Les sélecteurs ci-dessous ne sont pas devinés : le HTML en ligne de
   www.alphaquila.com/mon-compte/ et /mon-compte/wishlist/ a été relevé le 15/09.
   Trois choses en sont ressorties, et chacune a changé ce bloc :

   1. LA LISTE DE SOUHAITS EST YITH, PAS CELLE DE FLATSOME. Le réflexe aurait été de viser
      les classes natives du thème. Mesuré : `yith-woocommerce-wishlist/assets/css/style.css`
      en 4.18.1 est chargé, et la liste vit à /mon-compte/wishlist/ — un ENDPOINT du compte,
      pas une page autonome. /wishlist/ y renvoie en 301.
      ⚠️ Flatsome charge EN PLUS sa propre feuille d'intégration YITH (`yith-wishlist/
      wishlist.css` en 3.20.4). Deux feuilles pour un même écran : si un réglage résiste
      ici, c'est l'une des deux qu'il faut aller lire, pas une spécificité à monter.

   2. LE TABLEAU DE LA LISTE PORTE DÉJÀ `.shop_table`. Sa classe complète est
      `shop_table cart wishlist_table wishlist_view traditional responsive`. Le cadre, le
      fond de carte et les en-têtes dorés de la section 6 s'y appliquent DONC DÉJÀ.
      Ne sont traités ci-dessous que les morceaux qui n'existent nulle part ailleurs —
      le titre, la ligne « liste vide », la colonne d'état du stock. Redéclarer le reste
      aurait créé deux sources pour une même règle.

   3. IL N'Y A AUCUNE PAGE DE SUIVI DE COMMANDE. Six adresses plausibles testées
      (/suivi-de-commande/, /order-tracking/, …) : toutes en 404. Le « suivi » de cette
      boutique, c'est donc la liste des commandes du compte, le détail d'une commande, et
      la page de remerciement. C'est ce qui est stylé ici.
      📌 Si un vrai formulaire de suivi est voulu un jour, c'est une page à créer avec le
      shortcode [woocommerce_order_tracking] — les règles de `.track_order` plus bas
      l'attendent déjà, et resteront inertes tant que la page n'existe pas.

   ⚠️ CE QUI N'A PAS PU ÊTRE VU : tout l'intérieur du compte CONNECTÉ. Sans compte client,
   /mon-compte/ ne rend que le formulaire de connexion. Les sélecteurs de la navigation, du
   tableau des commandes et des adresses viennent donc des gabarits de WooCommerce, pas du
   HTML de ce site. Ils sont stables depuis des années, mais ils n'ont pas été CONSTATÉS
   ici — c'est la même réserve que le README pose pour le reste de la feuille, et elle vaut
   doublement pour ce bloc. Premier écran à ouvrir après la commande de test.
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* ── 9.1 Connexion et inscription — les seuls écrans réellement constatés ────────────── */

/* Mesuré sur la page en ligne : .account-container enveloppe les deux colonnes. Sans fond
   ni cadre, les deux formulaires flottent côte à côte sans qu'on voie où l'un s'arrête. */
.account-container .woocommerce-form-login,
.account-container .woocommerce-form-register {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: 10px;
  padding: 1.5rem 1.4rem;
}

.account-container .woocommerce-form-login h3,
.account-container .woocommerce-form-register h3,
.account-login-inner h3 {
  font-family: var(--font-titre);
  color: var(--color-accent);
  letter-spacing: 0.04em;
}

/* « Mot de passe oublié » est un recours, pas une action concurrente : il se lit, il
   n'attire pas. */
.woocommerce-LostPassword a { color: var(--color-text-muted); }
.woocommerce-LostPassword a:hover { color: var(--color-accent); }

/* La mention de politique de confidentialité est imposée par le RGPD et contient un lien.
   Flatsome la rend dans un gris destiné à son fond clair : illisible sur obsidienne. */
.woocommerce-privacy-policy-text,
.woocommerce-privacy-policy-text p {
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: .82rem;
}
.woocommerce-privacy-policy-link { color: var(--color-accent); }

/* « Se souvenir de moi » : la case est native, le libellé doit suivre le reste. */
.woocommerce-form__label-for-checkbox,
.woocommerce-form__label-for-checkbox span { color: var(--color-text-muted); font-family: var(--font-ui); }

/* ── 9.2 Le compte connecté — sélecteurs de gabarit, NON constatés ───────────────────── */

/* La navigation latérale est une liste de liens sans aucun style propre : il faut que
   l'onglet courant se distingue, sinon on ne sait pas où l'on est. */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }

.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: .62rem .9rem;
  font-family: var(--font-titre);
  font-size: .86rem;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.woocommerce-MyAccount-navigation li a:hover {
  color: var(--color-accent);
  background-color: var(--color-gold-soft);
}

/* L'onglet courant : un filet doré à gauche. Pas un fond plein — la colonne compterait
   alors deux blocs de même poids que le contenu qu'elle sert à atteindre. */
.woocommerce-MyAccount-navigation li.is-active a {
  color: var(--color-accent);
  background-color: var(--color-gold-soft);
  border-left-color: var(--color-accent);
}

/* « Déconnexion » est une sortie, pas une rubrique : elle se détache du groupe. */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
  color: var(--color-text-muted);
  margin-top: .5rem;
  border-top: 1px solid var(--color-card-border);
  padding-top: .8rem;
}

.woocommerce-MyAccount-content { color: var(--color-text); font-family: var(--font-ui); }
.woocommerce-MyAccount-content p { color: var(--color-text-muted); }
.woocommerce-MyAccount-content mark {
  background-color: transparent;
  color: var(--color-accent);
  font-weight: 600;
}

/* ── 9.3 Les commandes : liste, détail, remerciement ─────────────────────────────────── */

/* Ces tableaux portent `.shop_table` comme ceux du panier : le cadre vient de la section 6.
   Ne restent ici que l'en-tête de colonne et le statut. */
.woocommerce-orders-table__header,
.woocommerce-table--order-details th,
.woocommerce-table--order-downloads th {
  font-family: var(--font-titre);
  color: var(--color-accent);
  letter-spacing: .04em;
}

/* Le statut est l'information que le client vient chercher. En texte nu il se perd dans la
   ligne ; en pastille il se voit d'un coup d'œil. Une seule couleur, pas un feu tricolore :
   inventer un vert « terminée » et un rouge « annulée » ferait entrer deux teintes hors
   charte pour une information que le mot porte déjà. */
.woocommerce-orders-table__cell-order-status {
  font-family: var(--font-titre);
  font-size: .78rem;
  letter-spacing: .05em;
  color: var(--color-accent);
  background-color: var(--color-gold-soft);
  border: 1px solid var(--color-card-border);
  border-radius: 999px;
  padding: .2rem .7rem;
  display: inline-block;
  white-space: nowrap;
}

/* Le récapitulatif de la page de remerciement : quatre à cinq valeurs alignées. C'est le
   premier écran que voit un acheteur après avoir payé — il doit inspirer la même tenue que
   le reste, pas ressembler à une sortie de débogage. */
.woocommerce-order-overview,
ul.order_details {
  list-style: none;
  margin: 1.2rem 0;
  padding: 1.1rem 1.2rem;
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}

.woocommerce-order-overview li,
ul.order_details li {
  border: 0;
  padding: 0;
  margin: 0;
  font-family: var(--font-ui);
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* La valeur, elle, n'est ni en capitales ni en gris : c'est elle qu'on lit. */
.woocommerce-order-overview li strong,
ul.order_details li strong {
  display: block;
  margin-top: .22rem;
  font-family: var(--font-titre);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-accent);
}

.woocommerce-thankyou-order-received {
  font-family: var(--font-titre);
  color: var(--color-accent);
  font-size: 1.12rem;
}

/* Les deux colonnes d'adresse du bas de commande. */
.woocommerce-customer-details .woocommerce-column__title,
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
  font-family: var(--font-titre);
  color: var(--color-accent);
  font-size: .96rem;
  letter-spacing: .03em;
}

.woocommerce-Address address,
.woocommerce-customer-details address {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-style: normal;
  line-height: 1.7;
}

/* Le lien « Modifier » d'une adresse est posé DANS le titre par WooCommerce : sans cette
   règle il prend la taille et la police du titre, et se lit comme une seconde rubrique. */
.woocommerce-Address-title .edit {
  font-family: var(--font-ui);
  font-size: .76rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.woocommerce-Address-title .edit:hover { color: var(--color-accent); }

/* Le formulaire de suivi, INERTE tant qu'aucune page ne porte le shortcode (mesuré le
   15/09 : les six adresses candidates répondent 404). Posé maintenant pour que le jour où
   la page est créée, elle naisse déjà à la charte. */
.track_order .form-row { margin-bottom: .9rem; }
.track_order p { color: var(--color-text-muted); font-family: var(--font-ui); }

/* ── 9.4 La liste de souhaits — YITH 4.18.1, endpoint /mon-compte/wishlist/ ──────────── */

/* Le tableau hérite de `.shop_table` : rien à refaire sur le cadre. */
.wishlist-title h2 {
  font-family: var(--font-titre);
  color: var(--color-text);
  font-size: 1.15rem;
  letter-spacing: .02em;
}

/* L'état par défaut d'une liste de souhaits est d'être VIDE — c'est la cellule que le
   client verra le plus souvent, et YITH la rend sans aucun style. Elle est centrée et
   respire, pour ne pas ressembler à une ligne de tableau tronquée. */
td.wishlist-empty {
  text-align: center;
  padding: 2.2rem 1rem;
  color: var(--color-text-muted);
  font-family: var(--font-editorial);
  font-size: 1.06rem;
}

/* Colonne « État du stock » : sur un catalogue de pièces uniques, c'est l'information
   décisive de cet écran — une pièce mise de côté peut être partie entre-temps. */
.wishlist_table td.product-stock-status .wishlist-in-stock { color: var(--color-accent); }
.wishlist_table td.product-stock-status .wishlist-out-of-stock { color: var(--color-text-muted); }

.wishlist_table td.product-name a {
  font-family: var(--font-titre);
  color: var(--color-text);
}
.wishlist_table td.product-name a:hover { color: var(--color-accent); }

.wishlist_table .product-thumbnail img { border-radius: 8px; }

/* Le bouton de retrait est une croix dans une pastille : discret par défaut, franc au
   survol. Un retrait ne se déclenche pas par erreur. */
.wishlist_table a.remove_from_wishlist {
  color: var(--color-text-muted);
  background-color: transparent;
  transition: color .2s ease;
}
.wishlist_table a.remove_from_wishlist:hover { color: var(--color-erreur); }

.yith_wcwl_wishlist_footer { color: var(--color-text-muted); font-family: var(--font-ui); }

/* Le cœur posé sur les fiches et les cartes produit de toute la boutique. */
.yith-wcwl-add-to-wishlist a,
.yith-wcwl-add-button a,
.yith-wcwl-wishlistaddedbrowse a,
.yith-wcwl-wishlistexistsbrowse a {
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: .82rem;
}
.yith-wcwl-add-to-wishlist a:hover,
.yith-wcwl-add-button a:hover { color: var(--color-accent); }

/* Déjà dans la liste : le cœur reste doré, c'est un état, pas un survol. */
.yith-wcwl-wishlistaddedbrowse a,
.yith-wcwl-wishlistexistsbrowse a { color: var(--color-accent); }

/* ── 9.5 Téléphone ──────────────────────────────────────────────────────────────────── */

@media only screen and (max-width: 48em) {
  /* Même traitement que le panier : le tableau défile dans son cadre au lieu de pousser
     la page. `.wishlist_table` porte déjà `.shop_table`, mais YITH lui ajoute sa propre
     mise en page « responsive » — la règle est redite ici pour passer après elle. */
  .wishlist_table,
  .woocommerce-orders-table { display: block; overflow-x: auto; }

  /* Sur téléphone la navigation du compte passe au-dessus du contenu : en colonne, ses
     onglets deviennent une pile de liens pleine hauteur avant d'arriver à ce qu'on
     cherche. En ligne, ils défilent. */
  .woocommerce-MyAccount-navigation ul {
    display: flex;
    overflow-x: auto;
    gap: .25rem;
    border-bottom: 1px solid var(--color-card-border);
  }
  .woocommerce-MyAccount-navigation li a {
    white-space: nowrap;
    border-left: 0;
    border-bottom: 2px solid transparent;
    border-radius: 6px 6px 0 0;
  }
  .woocommerce-MyAccount-navigation li.is-active a {
    border-left-color: transparent;
    border-bottom-color: var(--color-accent);
  }
  .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
    margin-top: 0;
    border-top: 0;
    padding-top: .62rem;
  }

  /* Le récapitulatif de commande passe en colonne : cinq valeurs côte à côte sur 360 px
     se coupent en plein milieu. */
  .woocommerce-order-overview,
  ul.order_details { flex-direction: column; gap: .9rem; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   10. ALIGNEMENT SUR LA V3 — ajouté le 21/09/2026
   ══════════════════════════════════════════════════════════════════════════════════════
   Demande de Seb : le visiteur ne doit pas sentir qu'il quitte le site React. Relevé sur
   les pages en ligne avant d'écrire, et la cause de chaque écart est nommée à côté de sa
   règle.
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* ── 10.1 Le fond : une image fixe voilée, comme chaque page de la V3 ─────────────────
   Même motif que `.aa-boutique-bg` (Boutique.tsx) : image en `cover`, fixe, sous tout le
   contenu. Le fond de couleur passe au <html> ; si le <body> gardait le sien, il ne se
   propagerait plus au canevas et recouvrirait l'image posée en z-index négatif. */
html { background-color: var(--color-bg); }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('assets/bg/alpha-aquila-bg-contact.webp') center / cover no-repeat;
  opacity: .30;
}

/* La vitrine, les catégories, les fiches, les étiquettes et la recherche : l'échoppe, à
   l'opacité de la Boutique React (0,42 — la seule page de la V3 à ce niveau). */
body.woocommerce-shop::before,
body.tax-product_cat::before,
body.tax-product_tag::before,
body.single-product::before,
body.search::before {
  background-image: url('assets/bg/alpha-aquila-bg-boutique.webp');
  opacity: .42;
}

/* La Bibliothèque : ses catégories, et les fiches rangées dans l'une d'elles. Une fiche ne
   porte pas de classe de catégorie sur le <body>, seulement sur son bloc produit. */
body.term-bibliotheque::before,
body.term-livres::before,
body.term-carnets::before,
body.term-coffrets::before,
body.term-programmes::before,
body.term-grilles::before,
body.single-product:has(.product.product_cat-bibliotheque, .product.product_cat-livres,
  .product.product_cat-carnets, .product.product_cat-coffrets,
  .product.product_cat-programmes, .product.product_cat-grilles)::before {
  background-image: url('assets/bg/alpha-aquila-bg-bibliotheque.webp');
  opacity: .30;
}

/* En portrait, `cover` ne garde qu'un tiers de la largeur : l'échoppe a sa variante. */
@media (max-width: 768px) {
  body.woocommerce-shop::before,
  body.tax-product_cat:not(.term-bibliotheque):not(.term-livres):not(.term-carnets):not(.term-coffrets):not(.term-programmes):not(.term-grilles)::before,
  body.tax-product_tag::before,
  body.single-product:not(:has(.product.product_cat-bibliotheque, .product.product_cat-livres,
    .product.product_cat-carnets, .product.product_cat-coffrets,
    .product.product_cat-programmes, .product.product_cat-grilles))::before,
  body.search::before {
    background-image: url('assets/bg/alpha-aquila-bg-boutique-mobile.webp');
  }
}

/* ── 10.2 L'en-tête : un seul visage sur toutes les pages ──────────────────────────────
   Il en avait trois. La vitrine utilisait l'en-tête « transparent » de Flatsome, réglé à
   30 px : le logo y tombait à 30 px, presque invisible. Les fiches l'avaient à 220 px avec
   le fond Maya. Un seul en-tête désormais, à la même hauteur partout ; son image est
   réglée en 10.6. */

html #header.transparent,
html #header.transparent .header-wrapper { position: relative; }

html .header-main,
html .transparent .header-main { height: 92px; }

html #logo { width: auto; }
html #logo img,
html .transparent #logo img { max-height: 84px; padding: 4px 0; }

html .header-main .nav > li > a { line-height: normal; }
html .header-wrapper:not(.stuck) .header-main .header-nav { margin-top: 0; }

/* L'en-tête transparent réservait 110 px de marge au titre qu'il recouvrait. Il ne
   recouvre plus rien. */
html .has-transparent + .page-title:first-of-type,
html .has-transparent + #main > .page-title,
html .has-transparent + #main > div > .page-title,
html .has-transparent + #main .page-header-wrapper:first-of-type .page-title { padding-top: 0; }

/* Le menu : Cinzel en capitales fines, comme la Navbar de la V3 (0,7 rem, 1 px). En gras
   et en casse normale, il débordait sur deux lignes. */
html .header-bottom .nav > li > a,
html .header-main .nav > li > a {
  font-family: var(--font-titre);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--color-text);
}
/* Mesuré au premier déploiement : même en capitales fines, « Bibliothèque » et « Le site »
   passaient à la ligne — la recherche centrale réserve sa colonne. On resserre l'écart
   entre entrées, pas la lettre. */
html .header-bottom .nav-divided > li,
html .header-bottom .nav > li { margin: 0 .42em; }
html .header-bottom .nav-divided > li + li > a:after { left: -.42em; }

html .header-bottom .nav > li.active > a,
html .header-bottom .nav > li > a:hover { color: var(--color-accent); }

html .header-top,
html .header-top .nav > li > a { font-family: var(--font-ui); color: var(--color-text-muted); }

/* Les icônes sociales gardaient le bleu de Facebook et d'Instagram. */
html .header-top .social-icons .button.icon {
  background-color: transparent !important;
  border-color: var(--color-card-border) !important;
  color: var(--color-accent) !important;
}

/* Le bandeau « Livraison offerte » était noir, hors de toute la charte. */
html .woocommerce-store-notice,
html p.demo_store {
  background-color: var(--color-header-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  border-bottom: 1px solid var(--color-card-border);
}
html .woocommerce-store-notice a { color: var(--color-accent); }

/* ── 10.3 Le bandeau de titre : le fil d'Ariane doit se lire ───────────────────────────
   Le personnalisateur voile la bannière d'un orangé à 32 % : le texte clair se perdait
   dans l'or de la géométrie. Voile brun, comme les cartes texte-sur-image de la V3. */
html .shop-page-title.featured-title .title-overlay,
html .page-title.featured-title .title-overlay { background-color: rgba(var(--rgb-bg-sombre), .64); }

html .featured-title .breadcrumbs,
html .featured-title .breadcrumbs a,
html .featured-title .woocommerce-breadcrumb,
html .featured-title .woocommerce-breadcrumb a { color: var(--color-text); }
html .featured-title .breadcrumbs a:hover { color: var(--color-accent); }

/* ── 10.4 Les cartes produit : brunes et filetées d'or, plus grises ────────────────────
   Le gris venait de Flatsome : `.dark .has-shadow .box { background-color: #333 }`. */
html .has-shadow > .col > .col-inner,
html .has-shadow .box:not(.box-overlay):not(.box-shade),
html .dark .has-shadow .box:not(.box-overlay):not(.box-shade) { background-color: var(--color-card-bg); }

html .products .product-small > .col-inner {
  border: 1px solid var(--color-card-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  transition: border-color .3s ease, box-shadow .3s ease;
}
html .products .product-small > .col-inner:hover {
  border-color: var(--color-accent);
  box-shadow: 0 10px 28px var(--color-shadow-strong);
}

/* Les widgets de la colonne latérale reprennent le même cadre. */
html .sidebar-wrapper .widget { color: var(--color-text); }

/* ── 10.5 Ce qui n'a rien à faire à l'écran ────────────────────────────────────────────
   « Uncategorized » : la catégorie par défaut de WooCommerce, vide, qu'on ne peut pas
   supprimer. La barre `absolute-footer` : un second copyright, un second « Connexion » et
   des logos de cartes sous notre pied de page. */
html .widget_product_categories .cat-item-15 { display: none; }
html .absolute-footer { display: none; }

/* ── 10.6 L'image d'en-tête, et le bouton de retour au site ────────────────────────────
   L'image est celle du personnalisateur (`alpha-aquila-bg-maya.webp`, les deux sages sous
   les masques) — choix explicite de Seb le 21/09, sur TOUTES les pages. On ne la redéclare
   pas ici : on lui donne seulement sa taille, et on allège les barres qui la recouvraient.
   La barre de menu garde le voile le plus dense : c'est elle qui porte du texte sur toute
   sa largeur. (La bannière « géométrie » reste celle du bandeau de titre, en dessous.) */
html .header-bg-image {
  background-size: cover;
  background-position: center 38%;
}
html .header-top    { background-color: rgba(var(--rgb-header), .55) !important; }
html .header-main   { background-color: rgba(var(--rgb-header), .30) !important; }
html .header-bottom { background-color: rgba(var(--rgb-header), .72) !important; }

/* « ← Retour au site » : la seule entrée du menu dessinée en bouton, comme les boutons
   « verre fumé » de la V3 — contour doré, sans fond plein, pour ne pas concurrencer
   « Panier ». */
html .header-bottom .nav > li.aa-retour-site > a,
html .header-main .nav > li.aa-retour-site > a {
  border: 1px solid var(--color-accent);
  border-radius: 6px;
  padding: .35rem .8rem;
  color: var(--color-accent);
  line-height: 1.4;
}
html .header-bottom .nav > li.aa-retour-site > a:hover {
  background-color: var(--color-gold-soft);
  color: var(--color-text);
}
html .header-bottom .nav-divided > li.aa-retour-site + li > a:after { display: none; }

/* ── 10.7 Le menu tient sur une ligne ──────────────────────────────────────────────────
   Mesuré après le premier envoi : la barre de menu est en trois colonnes (menu, recherche
   centrée, colonne droite VIDE). Pour centrer la recherche, Flatsome donne aux deux
   colonnes latérales la même largeur : le menu n'avait que la moitié de la place restante,
   et « Géométrie sacrée » passait à la ligne. La colonne de menu prend désormais toute la
   place, la recherche se range à sa droite. */
html .header-bottom .flex-left { flex: 1 1 auto; }
html .header-bottom .flex-center,
html .header-bottom .flex-right { flex: 0 0 auto; }
html .header-bottom .header-nav { flex-wrap: nowrap; white-space: nowrap; }

/* Le logo à la taille de la Navbar de la V3 (64 px), un peu plus pour son détail gravé. */
html #logo img,
html .transparent #logo img { height: 80px; max-height: none; width: auto; }

/* ── 10.8 L'en-tête « transparent » de la vitrine ──────────────────────────────────────
   Flatsome efface l'image et le fond de TOUT l'en-tête quand il est transparent :
   `.header.transparent .header-bg-image { background-image: none !important }`. La vitrine
   est la seule page réglée ainsi — d'où un en-tête sans l'image Maya là seulement. On
   répond en nature, et l'adresse est redite ici parce que la règle de Flatsome efface celle
   du personnalisateur. */
html .header.transparent .header-bg-image {
  background-image: url('/wp-content/uploads/2026/09/alpha-aquila-bg-maya.webp') !important;
}
html .header.transparent .header-bottom { background-color: rgba(var(--rgb-header), .72) !important; }

/* La flèche des sous-menus tombait sous le libellé une fois le menu interdit de retour à
   la ligne : le lien doit être une ligne à lui seul. */
html .header-bottom .nav > li > a { display: inline-flex; align-items: center; gap: .25em; white-space: nowrap; }

/* ── 10.9 Le pied de page : la bannière « minéraux » ───────────────────────────────────
   Choix de Seb le 21/09. Composée pour un bandeau très large et bas (2560×392), ses
   côtés sont presque noirs : les trois colonnes de texte restent lisibles, et les pierres
   (améthyste, pyrite, labradorite, obsidienne) affleurent au bas de la page. Le voile brun
   est posé DANS le fond, au-dessus de l'image, pour ne rien changer au contraste du texte
   mesuré en S104. */
/* ⚠️ Posée d'abord sur `.footer-wrapper`, elle restait invisible (vu par Seb le 21/09) :
   le pied est un widget dont le style embarqué peint `.aa-footer { background: #3D280D }`,
   opaque, par-dessus. L'image va donc sur `.aa-footer` lui-même — `html` en tête pour
   passer devant la règle du widget. */
html .aa-footer {
  background:
    linear-gradient(rgba(var(--rgb-header), .70), rgba(var(--rgb-header), .70)),
    url('assets/bg/banniere-header-mineraux.webp') center bottom / cover no-repeat,
    var(--color-bg);
}

/* Le widget écrit aussi ses couleurs de TEXTE en dur, dans son propre <style> (généré par
   scripts/generer-footer-wordpress.mjs avec la palette « soleil »). Redites ici en
   variables pour qu'elles suivent le thème — `html` en tête, même raison que ci-dessus. */
html .aa-footer,
html .aa-footer a { color: var(--color-text-muted); }
html .aa-footer h4,
html .aa-footer .aa-marque,
html .aa-footer .aa-signature,
html .aa-footer a:hover { color: var(--color-accent); }
html .aa-footer .aa-filet { background: linear-gradient(90deg, transparent, var(--color-accent), transparent); }

/* ── 10.10 Le logo affiché est la variante « sombre » ─────────────────────────────────
   Mesuré le 21/09 : sur un en-tête `nav-dark`, Flatsome masque `.header_logo` et montre
   `.header-logo-dark` — plafonnée à 72 px par une règle plus spécifique que les nôtres
   (rendu 60×72). Les deux variantes reçoivent la même taille, en `!important` : c'est la
   réponse en nature aux `display … !important` de Flatsome sur ces mêmes images. */
html #logo img.header_logo,
html #logo img.header-logo-dark {
  height: 84px !important;
  max-height: 84px !important;
  width: auto !important;
}

/* ── 10.11 La fenêtre « Aperçu » et les autres modales de Flatsome ─────────────────────
   Vu par Seb le 23/09 : Flatsome peint `.lightbox-content { background-color: #fff }`,
   alors que tout le texte de ce thème est crème. Crème sur blanc : illisible. Le même
   fond que les pages, le même filet et la même ombre que les cartes produits.
   Contrastes sur --color-bg : texte 11,1:1 · atténué 6,4 · « en stock » 6,7 · or 5,0.
   La règle vaut pour toutes les modales, dont « Se connecter / S'inscrire ». */
html .lightbox-content {
  background-color: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-card-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}

/* ── 10.12 Les panneaux latéraux, les menus déroulants et les derniers filets clairs ───
   Vu par Seb le 24/09 sur iPhone : le menu mobile (hamburger) s'ouvrait sur du NOIR.
   Relevé à cette occasion sur toute la boutique, en mobile et au bureau :
     · `.off-canvas.dark .mfp-content`  rgba(0,0,0,.95)       — le menu mobile
     · `.off-canvas .mfp-content`       rgba(255,255,255,.95) — le panneau « Filtrer »
     · `.nav .nav-dropdown` et sa flèche rgba(128,108,81,.89) — l'ancien taupe #806c51 du
       personnalisateur, sur les sous-menus ET le mini-panier
     · `.sticky-add-to-cart--active`    #806c51               — la barre collante d'une fiche
     · filets #ececec / #ddd sous « Code promo », sur la facturation et entre les paiements
     · boutons radio et cases dans le bleu natif du navigateur
   Référence : le menu mobile de la V3 (Navbar.tsx) — fond d'en-tête, capitales Cinzel
   espacées, filets à peine visibles, un simple chevron doré au lieu d'un pavé plein. */

/* Les deux panneaux latéraux : le fond des pages, un filet d'or sur le bord intérieur.
   `.mfp-wrap` en plus : Flatsome vise `.off-canvas-left.dark .mfp-content` (trois classes). */
html .mfp-wrap.off-canvas .mfp-content {
  background-color: var(--color-bg);
  color: var(--color-text);
}
html .off-canvas-left .mfp-content  { border-right: 1px solid var(--color-card-border); }
html .off-canvas-right .mfp-content { border-left: 1px solid var(--color-card-border); }

/* Entrées du menu mobile, comme celles de la V3 */
html .off-canvas .nav-vertical > li > a {
  font-family: var(--font-titre);
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--color-text);
}
html .off-canvas .nav-vertical > li > a:hover,
html .off-canvas .nav-vertical > li.active > a { color: var(--color-accent); }
html .off-canvas .nav-vertical li li > a {
  font-family: var(--font-editorial);
  font-size: 1.05em;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-muted);
}
html .off-canvas .nav-vertical li,
html .off-canvas .nav-sidebar.nav-vertical > li + li,
html .off-canvas .nav-sidebar.nav-vertical > li.html + li,
html .off-canvas .widget li + li { border-color: rgba(255, 255, 255, 0.06); }

/* Le bouton qui déplie un sous-menu : un chevron doré, plus un pavé d'or plein.
   Le pavé venait de NOTRE règle de boutons (section 3), posée en !important sur tout
   <button> : seul un !important sur ce bouton précis peut la contredire. */
html .off-canvas .toggle,
html .off-canvas .toggle:hover,
html .off-canvas .toggle:focus {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--color-accent) !important;
}
html .off-canvas .toggle i { color: var(--color-accent); opacity: 1; }

/* Le filtre : curseur de prix et petits traits sous les titres, dans l'or */
html .is-divider { background-color: var(--color-shadow-strong); }
html .price_slider_wrapper .ui-slider { background-color: var(--color-card-border); }
html .price_slider_wrapper .ui-slider .ui-slider-range,
html .price_slider_wrapper .ui-slider .ui-slider-handle { background-color: var(--color-accent); }

/* La recherche en fenêtre : le voile laissait la page trop visible derrière le champ */
html .mfp-bg.mfp-ready:has(+ .mfp-wrap #search-lightbox) { opacity: 0.92; }

/* Sous-menus et mini-panier du bureau : le fond des modales (10.11), avec sa flèche */
html .nav .nav-dropdown {
  background-color: var(--color-bg);
  border-color: var(--color-card-border);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}
html .nav-dropdown-has-arrow li.has-dropdown:after { border-bottom-color: var(--color-bg); }
html .nav-dropdown-has-arrow li.has-dropdown:before { border-bottom-color: var(--color-card-border); }
html .nav-dropdown .nav-dropdown-col > a,
html .nav-dropdown li a { color: var(--color-text); }
html .nav-dropdown li a:hover { color: var(--color-accent); }

/* La barre « Ajouter au panier » qui colle en bas d'une fiche pendant le défilement */
html .sticky-add-to-cart--active {
  background-color: var(--color-header-bg);
  border-top: 1px solid var(--color-card-border);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Filets gris clair du panier et du paiement */
html .widget-title,
html .shop_table thead th,
html .woocommerce-billing-fields,
html .woocommerce-shipping-fields,
html .wc_payment_method,
html .wc_payment_methods li + li { border-color: var(--color-card-border); }

/* Cases et boutons radio : l'or du thème au lieu du bleu du navigateur */
html input[type="radio"],
html input[type="checkbox"] { accent-color: var(--color-accent); }

/* ── 10.13 Les libellés flottants des formulaires ────────────────────────────────────────
   Vu par Seb le 24/09 : « Pays/région » était illisible sur la page de paiement. Mesuré :
   Flatsome peint `.fl-label` en NOIR (opacité .8, 12 px) — invisible sur un champ sombre.
   Le libellé remonte au-dessus de la saisie, dans le crème atténué du thème. L'opacité .8
   de Flatsome est conservée (elle gagne, et le contraste calculé reste à 5,5:1, au-dessus du seuil AA de 4,5). */
html .form-row label.fl-label,
html .fl-wrap .fl-label { color: var(--color-text-muted); }

/* ── Avis produits : la mention de contrôle (D111-10 1° du code de la consommation) et la
      mention d'achat de chaque avis — voir « AVIS PRODUITS » dans functions.php. ── */
.aa-avis-controle {
  margin: 0 0 1.4rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--color-accent);
  background: var(--color-section-bg);
  color: var(--color-text-muted);
  font-size: 0.92em;
  line-height: 1.6;
}
.aa-avis-controle strong { color: var(--color-text); }
.aa-avis-controle a { color: var(--color-accent); text-decoration: underline; }
.commentlist .aa-avis-achat { font-style: normal; color: var(--color-text-muted); }
.aa-avis-connexion {
  margin: 0 0 1.4rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--color-accent);
  background: var(--color-section-bg);
}


/* ══════════════════════════════════════════════════════════════════════════════════════
   11. FINITIONS DE L'ESPACE CLIENT — relevées dans le Chrome de Seb le 27/09/2026
   ══════════════════════════════════════════════════════════════════════════════════════
   Depuis que la page « Mon compte » (#11) a le gabarit Flatsome `page-my-account.php`,
   chaque section a son bandeau et son menu latéral. Restaient quatre défauts. */

/* 11.1 Le bandeau : titre et sous-titre en blanc sur un ciel clair, illisibles par endroits
   (surtout sur mobile, où le texte est centré sur la partie la plus claire de l'image). */
.my-account-header .page-title-inner h1,
.my-account-header .page-title-inner small {
  text-shadow: 0 1px 3px var(--color-voile-texte), 0 0 18px var(--color-voile-texte);
}

/* 11.2 « Suivre une commande » : un bouton posé dans le contenu de la page #11 (bloc UX
   Builder), donc répété sous CHAQUE section. Pour un client connecté, il double « Commandes » :
   on retire SA colonne. Pour un visiteur (commande passée sans compte), il reste — sur une
   seule ligne. `:has()` : Safari 15.4+, Chrome 105+.
   ⚠️ Viser la colonne DIRECTE du bouton (`> .col-inner > a`), jamais « la rangée qui le
   contient » : le bouton est imbriqué dans la rangée principale de la page, et la première
   version de cette règle a masqué TOUT l'espace client (constaté le 27/09, corrigé aussitôt). */
.woocommerce-account.logged-in .col:has(> .col-inner > a.button[href$="/suivi-commande/"]) { display: none; }
.woocommerce-account a.button[href$="/suivi-commande/"] { white-space: nowrap; }

/* 11.3 Le bouton de téléchargement porte le NOM DU FICHIER (« Carnet 6 — Créativité (A5
   imprimable) ») : en capitales espacées de Flatsome, il s'étalait sur trois lignes. */
.woocommerce-table--order-downloads td.download-file a.button {
  font-size: .78rem;
  letter-spacing: .02em;
  line-height: 1.35;
  padding: .55rem .9rem;
  text-transform: none;
}

/* 11.4 Mobile : les tableaux « responsive » de WooCommerce (commandes, téléchargements)
   débordaient — la colonne « Voir » était coupée à droite. WooCommerce les empile avec
   `woocommerce-smallscreen.css`, que Flatsome ne charge pas. Même principe ici : une carte
   par ligne, une information par ligne, son libellé lu dans `data-title` (fourni par Woo). */
@media (max-width: 549px) {
  .woocommerce-account table.shop_table_responsive thead { display: none; }
  .woocommerce-account table.shop_table_responsive,
  .woocommerce-account table.shop_table_responsive tbody,
  .woocommerce-account table.shop_table_responsive tr,
  .woocommerce-account table.shop_table_responsive td,
  .woocommerce-account table.shop_table_responsive tbody th { display: block; width: 100%; }
  .woocommerce-account table.shop_table_responsive tr {
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--color-card-border);
  }
  .woocommerce-account table.shop_table_responsive tr:last-child { border-bottom: 0; }
  /* Bloc + libellé flottant, et non flex : une cellule « Total » contient plusieurs nœuds
     (le montant, puis « pour 1 article »), qu'un flex écartait aux deux bouts de la ligne ;
     et l'étiquette d'état s'y étirait en bandeau. */
  .woocommerce-account table.shop_table_responsive td,
  .woocommerce-account table.shop_table_responsive tbody th {
    padding: .3rem 0;
    border: 0;
    text-align: right;
  }
  .woocommerce-account table.shop_table_responsive td::after,
  .woocommerce-account table.shop_table_responsive tbody th::after { content: ""; display: block; clear: both; }
  .woocommerce-account table.shop_table_responsive td[data-title]::before,
  .woocommerce-account table.shop_table_responsive tbody th[data-title]::before {
    float: left;
    margin-right: 1rem;
    content: attr(data-title);
    font-family: var(--font-titre);
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-align: left;
  }
  /* L'état est peint en pastille SUR la cellule elle-même (section 9) : en bloc pleine largeur,
     la pastille devenait un bandeau. On la retire ici — le mot « Terminée » suffit. */
  .woocommerce-account table.shop_table_responsive td.woocommerce-orders-table__cell-order-status {
    background: none;
    border: 0;
    border-radius: 0;
  }
  /* Le détail d'une commande n'est pas un tableau « responsive » : Flatsome le passe en
     `display: block` sur petit écran, et ses lignes ne remplissaient plus le cadre. */
  .woocommerce-account table.order_details:not(.shop_table_responsive) { display: table; width: 100%; }
}

/* 11.5 Le bandeau de l'espace client et de la liste de souhaits (27/09/2026). Il portait une
   image de 2021 (`Sans-titre-6.png`), un triptyque froid aux coutures visibles, coincé entre
   l'en-tête chaud et le fond brun. Remplacé par une frise générée À PARTIR de l'image de
   l'en-tête (`scripts/generate-bandeau-compte.js --frise`, retenue par Seb) : Fleur de Vie
   exactement au centre — sous les mains jointes des deux sages de l'en-tête — et rosaces et
   losanges d'émeraude en miroir. SANS YEUX : la variante « sym » en portait six, et avec la
   douzaine de l'en-tête, « je me sens observé » (Seb). L'image vit dans le thème, hors de la médiathèque (le plugin
   d'optimisation y reconvertit tout).
   La lisibilité du titre est portée par un VOILE, pas par un vide dans l'image : à gauche sur
   ordinateur (titre aligné à gauche), au centre sur mobile (titre centré). */
.my-account-header .page-title-bg {
  background-image: url('assets/bg/bandeau-compte-frise.webp') !important;
  background-size: cover !important;
  background-position: 50% 50% !important;
}
/* Un voile général (le bandeau ressortait trop, 27/09) + un voile plus dense derrière le
   titre, qui suit SA position : à gauche une fois connecté, centré pour un visiteur (Flatsome
   centre le titre de la page de connexion) et toujours centré sur mobile. */
.my-account-header .page-title-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 34% 90% at 50% 50%, var(--color-voile-titre), var(--color-voile-titre-nul) 100%),
    linear-gradient(var(--color-voile-bandeau), var(--color-voile-bandeau));
}
.logged-in .my-account-header .page-title-bg::after {
  background:
    linear-gradient(90deg, var(--color-voile-titre) 0, var(--color-voile-titre-nul) 40%),
    linear-gradient(var(--color-voile-bandeau), var(--color-voile-bandeau));
}
@media (max-width: 549px) {
  .logged-in .my-account-header .page-title-bg::after {
    background:
      radial-gradient(ellipse 62% 70% at 50% 50%, var(--color-voile-titre), var(--color-voile-titre-nul) 100%),
      linear-gradient(var(--color-voile-bandeau), var(--color-voile-bandeau));
  }
}

/* 11.6 Les champs remplis par le navigateur (identifiant et mot de passe enregistrés) passaient
   en fond blanc-bleu de Chrome au milieu des champs sombres (relevé le 27/09 sur la page de
   connexion). Le fond d'autoremplissage ne se repeint pas : on le recouvre d'une ombre
   intérieure OPAQUE, et on force la couleur du texte. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--color-champ-autofill) inset !important;
  box-shadow: 0 0 0 1000px var(--color-champ-autofill) inset !important;
  -webkit-text-fill-color: var(--color-text) !important;
  caret-color: var(--color-text);
  border-color: var(--color-champ-border-autofill) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   12. LE SÉLECTEUR DE THÈME — ajouté le 13/10/2026
   ══════════════════════════════════════════════════════════════════════════════════════
   Les quatre pastilles de la Navbar de la V3 (Navbar.tsx : 30 px, icône de 16 px, filet
   doré sur le thème actif), construites par le script de « LES QUATRE THÈMES » dans
   functions.php. Sur téléphone, un seul bouton de 36 px qui passe au thème suivant.
   ⚠️ Les `!important` répondent à NOTRE règle de boutons (section 3), posée en !important
   sur tout <button> — même cas que le chevron du menu mobile (10.12). */
.aa-themes-groupe { display: flex; align-items: center; gap: 4px; }

html .aa-theme-btn,
html .aa-theme-btn:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-height: 0;
  margin: 0;
  padding: 4px;
  line-height: 1;
  background-color: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  color: var(--color-text-muted) !important;
  cursor: pointer;
  transition: color .2s, border-color .2s, background-color .2s;
}
html .aa-theme-btn svg { width: 16px; height: 16px; display: block; }
html .aa-theme-btn:hover {
  color: var(--color-accent) !important;
  border-color: var(--color-card-border) !important;
  background-color: var(--color-card-bg) !important;
}
html .aa-theme-btn.active {
  color: var(--color-accent) !important;
  border-color: var(--color-gold) !important;
  background-color: var(--color-card-bg) !important;
}
html .aa-theme-btn--suivant,
html .aa-theme-btn--suivant:hover {
  width: 36px;
  height: 36px;
  border-radius: 8px !important;
  color: var(--color-accent) !important;
  border-color: var(--color-card-border) !important;
  background-color: var(--color-card-bg) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   13. L'INVITATION À CHOISIR SON THÈME — ajoutée le 14/10/2026
   ══════════════════════════════════════════════════════════════════════════════════════
   Reprise de l'invitation de la Navbar du site (src/index.css, « L'INVITATION À CHOISIR SON
   THÈME ») : même main, même phrase, même rythme — cinq battements, puis un fondu à 14 s.
   Construite par le script de « LES QUATRE THÈMES » (functions.php), pour un visiteur sans
   cookie `aa-theme` seulement. Accrochée à droite sous le sélecteur : centrée, elle sortirait
   de l'écran sur téléphone. `pointer-events: none` : la recherche qu'elle survole un instant
   reste cliquable. */
html .aa-themes,
html .aa-theme-suivant { position: relative; }

.aa-invite {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 30;
  display: flex; flex-direction: column; align-items: flex-end; gap: .35rem;
  width: max-content; max-width: min(17rem, calc(100vw - 2rem));
  pointer-events: none; text-align: center;
  opacity: 0; animation: aa-invite-passage 14s ease-out .8s forwards;
}
@keyframes aa-invite-passage { 0% { opacity: 0; } 6%, 90% { opacity: 1; } 100% { opacity: 0; } }

/* La main sous le milieu du bouton (36 px) ou des quatre pastilles (4 × 30 px + 3 × 4 px). */
.aa-invite-main {
  display: block; margin-right: 7px; color: var(--color-accent);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .7));
  animation: aa-invite-main 2.2s ease-in-out 1.4s 5;
}
.aa-themes .aa-invite-main { margin-right: 55px; }
.aa-invite-main svg { display: block; }
@keyframes aa-invite-main { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.aa-invite-bulle {
  display: flex; flex-direction: column; gap: .1rem; margin: 0;
  padding: .5rem 1rem .55rem;
  background: var(--color-header-bg);
  border: 1px solid var(--color-card-border);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  line-height: 1.35;
}
.aa-invite-titre {
  font-family: var(--font-editorial); font-style: italic; font-size: 1.15rem;
  color: var(--color-text); text-transform: none; letter-spacing: 0;
}
.aa-invite-aide {
  font-family: var(--font-ui); font-size: .72rem;
  color: var(--color-text-muted); text-transform: none; letter-spacing: 0;
}

/* Le bouton unique : deux ondes partent de son cadre (sa lueur, elle, est impossible : la
   section 3 pose `box-shadow: none !important` sur tout <button>, et une animation ne passe
   pas devant un !important). Les pastilles : le groupe s'éclaire. */
html .aa-theme-btn--suivant { position: relative; overflow: visible; }
.aa-invite-onde {
  position: absolute; inset: -1px; border-radius: inherit;
  border: 1px solid var(--color-accent);
  opacity: 0; pointer-events: none;
  animation: aa-invite-onde 2.2s ease-out 1.4s 5;
}
.aa-invite-onde--2 { animation-delay: 2.1s; }
@keyframes aa-invite-onde { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(2.1); opacity: 0; } }
.aa-invite-groupe { animation: aa-invite-halo 2.2s ease-in-out 1.4s 5; }
.aa-invite-groupe { border-radius: 8px; }
@keyframes aa-invite-halo {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50%      { box-shadow: 0 0 18px 2px var(--color-gold-glow); }
}
@media (prefers-reduced-motion: reduce) {
  .aa-invite-main, .aa-invite-onde, .aa-invite-groupe { animation: none; }
  .aa-invite { animation: none; opacity: 1; }
}

/* ── 14. « Vous avez un code promo ? » sous les boutons de paiement express (14/10/2026) ──
   Voir la fin de functions.php : les boutons PayPal / Apple Pay / Google Pay de la fiche
   sautent le panier, donc le champ du code promo. Une ligne discrète, pas un avertissement. */
.aa-code-promo-panier {
  margin: .6rem 0 1rem;
  font-family: var(--font-ui);
  font-size: .8rem;
  color: var(--color-text-muted);
}