/*
 * Raccord WooCommerce.
 *
 * Tout ce que WooCommerce produit lui-même et qu'aucune maquette n'a dessiné :
 * les notices, le formulaire de variations, le champ de quantité, select2, les
 * avis, la force du mot de passe. On habille son balisage aux tokens du thème
 * plutôt que de le réécrire — c'est lui qui porte la logique.
 *
 * Chargé sur les pages WooCommerce uniquement (voir inc/assets.php).
 */

/* ---------- 1. Boutons WooCommerce ---------- */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .9rem 1.5rem; border: 0; border-radius: var(--r-btn);
  background: var(--azur); color: #fff;
  font: inherit; font-weight: 700; font-size: .98rem; font-variation-settings: 'wdth' 106;
  cursor: pointer; text-align: center;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover { background: var(--azur-2); color: #fff }

.woocommerce .button.alt,
.woocommerce button.button.alt { background: var(--azur) }
.woocommerce .button:disabled,
.woocommerce .button.disabled,
.woocommerce button.button:disabled[disabled] { opacity: .45; cursor: not-allowed }

/* La ligne de stock est déjà affichée par le thème, au-dessus du bloc
   d'achat : celle de WooCommerce ferait doublon. */
.fiche-produit p.stock { display: none }

/* Compteur à gauche, bouton qui prend le reste : la ligne d'achat de la maquette.
   WooCommerce rend un <form class="cart"> nu, c'est donc lui qu'on met en ligne. */
.fiche-produit form.cart:not(.variations_form),
.fiche-produit .woocommerce-variation-add-to-cart {
  display: flex; flex-wrap: wrap; gap: .7rem; align-items: stretch;
}
.fiche-produit form.cart .quantity { flex: none; align-self: stretch }
.fiche-produit .single_add_to_cart_button { flex: 1 1 12rem; padding: 1.05rem 1.6rem; font-size: 1.05rem }

/* ---------- 2. Notices ---------- */
/*
 * Les trois gabarits de notice sont surchargés dans woocommerce/notices/ :
 * ils rendent .note, déjà stylée dans style.css. Ce qui suit ne rattrape que
 * les notices produites ailleurs — par une extension, ou par un bloc Gutenberg
 * WooCommerce — et qui n'ont pas la classe .note.
 */
.woocommerce-notices-wrapper:empty { display: none }
.woocommerce-message:not(.note),
.woocommerce-info:not(.note),
.woocommerce-error:not(.note),
.woocommerce-noreviews {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  border-radius: var(--r-tuile); padding: .95rem 1.1rem;
  font-size: .88rem; line-height: 1.5; margin-bottom: 1.25rem;
  list-style: none;
}
.woocommerce-message:not(.note) { background: #E6F4EC; color: #0F5C31 }
.woocommerce-info:not(.note),
.woocommerce-noreviews { background: var(--azur-pale); color: var(--court) }
.woocommerce-error:not(.note) { background: #FDECEA; color: #8C1F17; display: grid; gap: .4rem }
.woocommerce-error li { list-style: none }

/* Une erreur de tunnel liste plusieurs champs : la puce reste utile. */
.note.woocommerce-error ul { display: grid; gap: .35rem }
.note.woocommerce-error li + li { padding-top: .35rem; border-top: 1px solid rgba(140,31,23,.15) }

/* Le lien d'action d'un message suit la phrase, sur la même ligne. */
.note .btn { display: inline-flex; margin-left: .5rem; vertical-align: baseline }
.woocommerce-message:not(.note) .button,
.woocommerce-info:not(.note) .button { margin-left: auto; padding: .55rem 1rem; font-size: .85rem }

/* Les messages du tunnel, à la largeur du contenu. */
.tunnel-notes { margin-bottom: 1.4rem }
.tunnel-notes .note + .note { margin-top: .6rem }

/* ---------- 3. Quantité ---------- */
.quantity { display: inline-flex; align-items: center }
.quantity .qty {
  width: 4.5rem; padding: .7rem .5rem; text-align: center;
  border: 2px solid var(--ligne); border-radius: var(--r-btn);
  background: var(--blanc); color: var(--encre); font: inherit; font-weight: 700;
  -moz-appearance: textfield;
}
.quantity .qty:focus { outline: none; border-color: var(--azur) }
.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }

/* Le compteur dessiné du thème, quand il enveloppe le champ de WooCommerce. */
.compteur { display: inline-flex; align-items: center; border: 2px solid var(--ligne); border-radius: var(--r-btn); overflow: hidden }
.compteur button { width: 2.6rem; min-height: 2.9rem; align-self: stretch; font-size: 1.1rem; font-weight: 700; color: var(--gris) }
.compteur button:hover { background: var(--chaux); color: var(--encre) }
.compteur .qty { width: 3rem; border: 0; border-radius: 0 }

/* ---------- 4. Variations ---------- */
.variations { width: 100%; margin-bottom: 1rem; border-collapse: collapse }
.variations th,
.variations td { display: block; text-align: left; padding: 0 }
.variations th.label { font-size: .82rem; font-weight: 700; padding-bottom: .35rem }
.variations td.value { padding-bottom: .9rem }
.variations select {
  width: 100%; padding: .8rem .95rem; border: 2px solid var(--ligne); border-radius: var(--r-btn);
  background: var(--blanc); color: var(--encre); font: inherit;
}
.variations select:focus { outline: none; border-color: var(--azur) }
.reset_variations { display: inline-block; margin-top: .3rem; font-size: .8rem; color: var(--gris); text-decoration: underline }
.woocommerce-variation-price { margin-bottom: .9rem; font-size: 1.25rem; font-weight: 900; font-variation-settings: 'wdth' 112 }
.woocommerce-variation-availability { margin-bottom: .7rem; font-size: .85rem; color: var(--gris) }

/* ---------- 5. Étoiles ---------- */
.star-rating {
  position: relative; display: inline-block; overflow: hidden;
  width: 5.4em; height: 1.2em; line-height: 1.2; font-size: .9rem;
  font-family: inherit;
}
.star-rating::before,
.star-rating span::before { content: '\2605\2605\2605\2605\2605'; position: absolute; left: 0; top: 0; letter-spacing: .08em }
.star-rating::before { color: var(--ligne) }
.star-rating span { position: absolute; left: 0; top: 0; overflow: hidden; padding-top: 1.2em }
.star-rating span::before { color: #E8B21F }
.woocommerce-product-rating { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--gris) }

/* ---------- 6. Avis ---------- */
#reviews .commentlist { display: grid; gap: 1rem; list-style: none }
#reviews .comment_container { display: grid; grid-template-columns: auto 1fr; gap: 1rem; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-carte); padding: 1.1rem 1.25rem }
#reviews .comment_container img.avatar { width: 44px; height: 44px; border-radius: 50% }
#reviews .meta { font-size: .82rem; color: var(--gris); margin-bottom: .4rem }
#reviews .meta strong { color: var(--encre); font-size: .9rem }
#reviews .description p { color: #243B52; line-height: 1.6 }
#review_form .comment-form { display: grid; gap: .9rem; max-width: 60ch }
#review_form .comment-form-rating { display: flex; align-items: center; gap: .6rem }
#review_form label { font-size: .82rem; font-weight: 700 }
#review_form textarea,
#review_form input[type="text"],
#review_form input[type="email"] {
  width: 100%; padding: .8rem .95rem; border: 2px solid var(--ligne); border-radius: var(--r-btn);
  background: var(--blanc); color: var(--encre); font: inherit;
}
#review_form textarea { min-height: 130px; resize: vertical; line-height: 1.55 }
#review_form textarea:focus,
#review_form input:focus { outline: none; border-color: var(--azur) }
.stars a { color: var(--ligne); font-size: 1.15rem; padding-right: .15rem }
.stars a::before { content: '\2605' }
.stars a.active,
.stars a:hover { color: #E8B21F }

/* ---------- 7. select2, utilisé par les champs pays et gouvernorat ---------- */
.select2-container--default .select2-selection--single {
  height: auto; padding: .8rem .95rem; border: 2px solid var(--ligne); border-radius: var(--r-btn); background: var(--blanc);
}
.select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; line-height: 1.4; color: var(--encre) }
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; right: .7rem; transform: translateY(-50%) }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--azur) }
.select2-dropdown { border: 2px solid var(--azur); border-radius: var(--r-btn); overflow: hidden }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--azur); color: #fff }
.select2-search--dropdown .select2-search__field { padding: .55rem .7rem; border: 2px solid var(--ligne); border-radius: var(--r-tuile) }

/* ---------- 8. Champs du tunnel générés par WooCommerce ---------- */
.woocommerce form .form-row { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 1rem }
.woocommerce form .form-row label { font-size: .82rem; font-weight: 700 }
.woocommerce form .form-row label .optional { font-weight: 500; color: var(--gris) }
.woocommerce form .form-row .required { color: var(--brique); text-decoration: none }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  width: 100%; padding: .8rem .95rem; border: 2px solid var(--ligne); border-radius: var(--r-btn);
  background: var(--blanc); color: var(--encre); font: inherit; outline: none; transition: border-color .16s;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { border-color: var(--azur) }
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select { border-color: var(--brique); background: #FFF8F7 }
.woocommerce form .form-row.woocommerce-validated input.input-text { border-color: var(--vert) }
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 100% }
.woocommerce form .form-row.woocommerce-validate-required label.checkbox,
.woocommerce form .checkbox { flex-direction: row; align-items: flex-start; gap: .6rem; font-size: .86rem; font-weight: 500 }
.woocommerce-password-strength { font-size: .78rem; font-weight: 700; padding: .35rem 0 }
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad { color: var(--brique) }
.woocommerce-password-strength.good { color: #B77800 }
.woocommerce-password-strength.strong { color: var(--vert) }
.woocommerce-password-hint { font-size: .76rem; color: var(--gris) }

@media (min-width: 641px) {
  .woocommerce form .form-row-first { width: calc(50% - .5rem); float: left }
  .woocommerce form .form-row-last { width: calc(50% - .5rem); float: right }
  .woocommerce form .clear { clear: both }
}

/* ---------- 9. Divers ---------- */
/*
 * Le voile de chargement de WooCommerce : sans lui, une mise à jour du panier
 * ne se voit pas et le client clique deux fois.
 */
.woocommerce .blockUI.blockOverlay { position: relative }
.woocommerce .blockUI.blockOverlay::before { content: ''; position: absolute; inset: 0; background: rgba(242,245,248,.66) }


/* ---------- 10. Livraison dans le récapitulatif ---------- */
.livraison-choix { display: grid; gap: .25rem; justify-items: end; text-align: right }
.livraison-choix ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem }
.livraison-choix li { display: flex; gap: .45rem; align-items: baseline; justify-content: flex-end }
.livraison-choix label { cursor: pointer }
.livraison-choix .amount { font-weight: 700 }

/* ---------- 11. Champs WooCommerce dans la grille du thème ---------- */
/*
 * Les champs du tunnel portent la classe « champ » (voir inc/checkout.php) :
 * ils héritent donc de la mise en forme du thème. Il reste à neutraliser les
 * largeurs et les flottements que WooCommerce met sur .form-row.
 */
.champs .form-row { width: auto; float: none; margin: 0 }
.champs .form-row-wide,
.champs .create-account,
.champs .champ-large { grid-column: 1 / -1 }
.champs .form-row .woocommerce-input-wrapper { display: block }
.champs .form-row .description { font-size: .76rem; color: var(--gris) }
.champs .form-row .select2-container { width: 100% !important }

/* Corps d'un bloc du tunnel */
.bloc-corps { display: grid; gap: 1rem }
.bloc-tete p { font-size: .84rem; color: var(--gris); margin-top: .2rem }
.tunnel-titre { margin-bottom: 1.5rem }

/* Case à cocher « livrer ailleurs », adresse secondaire, note de commande */
#ship-to-different-address { margin-bottom: .2rem }
.shipping_address { margin-top: 1rem }
.woocommerce-additional-fields { margin-top: 1.2rem }
.champs .form-row textarea { min-height: 110px; resize: vertical; line-height: 1.55 }

/* Rappel des zones de livraison */
.zones { border-top: 1px solid var(--ligne); margin-top: 1.3rem; padding-top: 1rem }
.zones summary {
  display: flex; align-items: center; gap: .45rem; cursor: pointer;
  font-size: .86rem; font-weight: 700; list-style: none;
}
.zones summary::-webkit-details-marker { display: none }
.zones summary svg { transform: rotate(90deg); transition: transform .18s; color: var(--gris) }
.zones[open] summary svg { transform: rotate(-90deg) }
.zones .tableau { margin-top: .9rem }

/* Prix unitaire rappelé sous le sous-total d'une ligne */
.prix-unitaire { display: block; font-size: .72rem; font-weight: 500; color: var(--gris); margin-top: .15rem }

/* ---------- 12. Panier : bouton de passage en commande ---------- */
/* WooCommerce l'enveloppe dans .wc-proceed-to-checkout ; dans notre carte de
   récapitulatif il doit tenir toute la largeur, comme dans la maquette. */
.wc-proceed-to-checkout { display: grid; margin-top: 1rem }
.checkout-button { width: 100%; padding: 1rem 1.4rem; font-size: 1rem }

/* ---------- 13. Bas du tunnel : mentions et bouton de validation ---------- */
/* La phrase de confidentialité accompagne le bouton, elle ne le concurrence pas. */
.woocommerce-privacy-policy-text p { font-size: .8rem; color: var(--gris); line-height: 1.55 }
.woocommerce-privacy-policy-text a { color: var(--azur); text-decoration: underline }
.woocommerce-terms-and-conditions-wrapper { margin-bottom: 1.1rem }
.form-row.place-order { margin-top: 1.4rem }
#place_order { width: 100%; padding: 1.05rem 1.6rem; font-size: 1.05rem }
/* Champ conservé dans le formulaire mais retiré de l'écran (pays unique). */
.champ-masque { display: none !important }
/* Filet de sécurité : WooCommerce imprime parfois un message hors de tout
   gabarit (garde de la page de confirmation, par exemple). On le ramène à la
   largeur du contenu plutôt que de le laisser filer bord à bord. */
.site-contenu > .note,
.site-contenu > .woocommerce-notices-wrapper,
.site-contenu > .woocommerce-message,
.site-contenu > .woocommerce-info,
.site-contenu > .woocommerce-error,
.site-contenu > .woocommerce > .note,
.site-contenu > .woocommerce > .woocommerce-notices-wrapper,
.site-contenu > .woocommerce > .woocommerce-message,
.site-contenu > .woocommerce > .woocommerce-info,
.site-contenu > .woocommerce > .woocommerce-error {
  width: min(100% - 2 * var(--gouttiere), var(--max));
  margin: 1.5rem auto 0;
}

/* Prix barre de WooCommerce : <del> pour l'ancien prix, <ins> pour le nouveau.
   Le soulignement par defaut de <ins> se lit comme un lien. */
del, .woocommerce-Price-amount del { color: var(--gris); font-weight: 600 }
ins, .woocommerce-Price-amount ins { text-decoration: none; background: none; color: inherit }