/* ==========================================================================
   ATRÉVETE — habillage des extensions
   Chargé uniquement sur les pages qui en ont besoin (voir functions.php).

   Pourquoi ce fichier : WooCommerce et Amelia injectent leur propre design —
   boutons bleus, coins moyennement arrondis, ombres portées, dégradés. Sans
   cette feuille, le tunnel de commande et le module de réservation cassent la
   charte au moment précis où le visiteur décide de payer.

   LA RÈGLE DE LA VARIANTE CLIENT, appliquée partout ici :
     · commandes cliquables (boutons, filtres, onglets) → pilule --rayon-cta
     · champs de saisie, cartes, tableaux, notices      → angles vifs, 0 radius
     · toujours 0 ombre, 0 dégradé
   C'est la distinction du CSS principal : « la structure du site tient au
   filet, seul l'appel à l'action s'adoucit ». Ne pas arrondir les champs :
   ce serait cohérent avec WooCommerce, pas avec la maquette.

   Ordre de priorité : règle d'abord les couleurs dans l'interface d'Amelia
   (Réglages → Personnalisation) et de WooCommerce. Ce fichier ne rattrape
   que ce que ces interfaces ne permettent pas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. WOOCOMMERCE — boutons (pilule)
   -------------------------------------------------------------------------- */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;
  padding:15px 32px;
  background:var(--dorado);
  color:var(--noche);
  font-family:var(--font-sans);
  font-size:.75rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  border:1.5px solid var(--dorado);
  border-radius:var(--rayon-cta);
  box-shadow:none;
  text-shadow:none;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover{
  background:var(--noche);
  color:var(--dorado);
  border-color:var(--noche);
}
/* Boutons secondaires : contour, comme .btn--secondaire */
.woocommerce a.button.wc-backward,
.woocommerce button.button[name="update_cart"]{
  background:transparent;
  color:var(--texte-fort);
  border-color:var(--texte-fort);
}
.woocommerce a.button.wc-backward:hover,
.woocommerce button.button[name="update_cart"]:hover{
  background:var(--noche);color:var(--papier);border-color:var(--noche);
}
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled]{
  background:var(--ligne);color:var(--texte-doux);border-color:transparent;opacity:1;
}
.woocommerce #place_order{min-height:56px;padding:19px 44px;font-size:.8125rem;letter-spacing:.12em;}

/* --------------------------------------------------------------------------
   2. WOOCOMMERCE — champs de saisie (angles vifs)
   Alignés sur .champ input de la feuille principale.
   Le border-radius:0 est explicite : WooCommerce en pose un par défaut.
   -------------------------------------------------------------------------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single,
.woocommerce-page form .form-row input.input-text{
  width:100%;
  min-height:48px;
  padding:13px 15px;
  font-family:var(--font-sans);
  font-size:.9375rem;
  color:var(--texte-fort);
  background:transparent;
  border:1px solid var(--ligne);
  border-radius:0;
  box-shadow:none;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{
  border-color:var(--dorado-texte);
  outline:none;
}
.woocommerce form .form-row label,
.woocommerce-page form .form-row label{
  display:block;
  font-size:.625rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--dorado-texte);
  margin-bottom:8px;
}
.woocommerce form .form-row .required{color:var(--dorado-texte);text-decoration:none;}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:46px;color:var(--texte-fort);
}
.woocommerce .select2-dropdown{border-radius:0;border-color:var(--ligne);}
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register{
  border:1px solid var(--ligne);
  border-radius:0;
  padding:26px 24px;
}
.woocommerce .quantity .qty{
  min-height:48px;
  border:1px solid var(--ligne);
  border-radius:0;
  font-family:var(--font-sans);
  background:transparent;
  color:var(--texte-fort);
}

/* --------------------------------------------------------------------------
   3. WOOCOMMERCE — messages et notices (angles vifs)
   -------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  border-radius:0;
  border:1px solid var(--ligne);
  border-top:3px solid var(--dorado);
  background:rgba(235,168,32,.06);
  color:var(--texte-fort);
  font-size:.875rem;
  padding:18px 22px;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{display:none;}
.woocommerce-error{
  border-top-color:#A8182E;
  background:rgba(168,24,46,.05);
}
.woocommerce-message .button,
.woocommerce-info .button{min-height:40px;padding:11px 22px;}

/* --------------------------------------------------------------------------
   4. WOOCOMMERCE — tableaux (panier, commande, compte)
   Repris de .tableau de la feuille principale, angles vifs.
   -------------------------------------------------------------------------- */
.woocommerce table.shop_table,
.woocommerce table.shop_attributes{
  border-collapse:collapse;
  border:1px solid var(--ligne);
  border-radius:0;
}
.woocommerce table.shop_table th{
  font-size:.6563rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--dorado-texte);
  padding:12px 14px;
  border-bottom:1px solid var(--ligne);
}
.woocommerce table.shop_table td{
  padding:14px;
  border-bottom:1px solid var(--ligne);
  font-size:.875rem;
  color:var(--texte-doux);
}
.woocommerce table.shop_table .product-name a{color:var(--texte-fort);font-weight:700;}
.woocommerce table.shop_table .amount{
  font-family:var(--font-display);
  font-size:1.125rem;
  color:var(--dorado-texte);
  letter-spacing:.02em;
}
.woocommerce .cart_totals h2,
.woocommerce-checkout h3{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:var(--t-h3);
  margin-bottom:18px;
}

/* --------------------------------------------------------------------------
   5. WOOCOMMERCE — « Mon compte » (Espace Membre)
   Navigation en liste, angles vifs : c'est de la navigation, pas un CTA —
   même traitement que .menu-mobile a dans la feuille principale.
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  display:flex;flex-direction:column;gap:0;
  border:1px solid var(--ligne);
  padding:0;margin:0;list-style:none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block;
  padding:15px 18px;
  font-size:.6875rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--texte-fort);
  border-bottom:1px solid var(--ligne);
  transition:background-color .18s ease,color .18s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child a{border-bottom:0;}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
  background:var(--noche);color:var(--dorado);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  background:var(--dorado);color:var(--noche);
}
@media (min-width:900px){
  .woocommerce-account .woocommerce-MyAccount-navigation{width:26%;float:left;}
  .woocommerce-account .woocommerce-MyAccount-content{width:70%;float:right;}
}

/* --------------------------------------------------------------------------
   6. WOOCOMMERCE — grille produits (Boutique)
   Reprend le rendu .grille-trait / .carte : cartes à angles vifs,
   séparées par le filet de 2px.
   -------------------------------------------------------------------------- */
/* Les filets sont portés par les produits eux-mêmes, pas par le fond de la
   grille : une rangée incomplète laissait voir ce fond, sous la forme de
   bandes grises à côté des produits. */
.woocommerce ul.products{
  display:grid;
  gap:0;
  grid-template-columns:1fr;
  border-top:1px solid var(--ligne);
  border-left:1px solid var(--ligne);
  margin:0;padding:0;
}
/* Les colonnes s'adaptent au nombre de produits. Quatre colonnes fixes
   laissaient une case vide au bout de la rangée, et cette case montrait le
   fond de la grille : un rectangle gris à côté des produits. */
@media (min-width:600px){ .woocommerce ul.products{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));} }
/* WooCommerce pose un clearfix hérité des mises en page flottantes. Dans une
   grille, ce pseudo-élément devient une case à part entière : il occupait la
   première, et décalait tous les produits d'un cran. */
.woocommerce ul.products::before,
.woocommerce ul.products::after{display:none;}

.woocommerce ul.products li.product{
  background:var(--papier);
  border-right:1px solid var(--ligne);
  border-bottom:1px solid var(--ligne);
  margin:0!important;width:auto!important;float:none!important;
  padding:clamp(24px,3vw,34px);
  display:flex;flex-direction:column;gap:14px;
}
.woocommerce ul.products li.product a img{margin-bottom:0;border-radius:0;box-shadow:none;}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:1.25rem;
  line-height:1.1;
  color:var(--texte-fort);
  padding:0;
}
.woocommerce ul.products li.product .price{
  font-family:var(--font-display);
  font-size:1.75rem;
  color:var(--dorado-texte);
  line-height:1;
}
.woocommerce ul.products li.product .price del{opacity:.5;font-size:.7em;}
/* Pastille promo : reprend .etiq — angles vifs */
.woocommerce span.onsale{
  border-radius:0;
  background:var(--dorado);
  color:var(--noche);
  font-family:var(--font-sans);
  font-size:.625rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
  min-height:0;line-height:1;
  padding:8px 12px;
  top:0;left:0;margin:0;
}
.woocommerce div.product .product_title{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:var(--t-h2);
  line-height:1.02;
}
.woocommerce div.product p.price{
  font-family:var(--font-display);
  font-size:2.5rem;
  color:var(--dorado-texte);
}
/* Onglets de la fiche produit : ce sont des commandes → pilule, comme .filtre */
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;border-bottom:1px solid var(--ligne);display:flex;gap:10px;flex-wrap:wrap;}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none;}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  border-radius:var(--rayon-cta);
  border:1px solid var(--ligne);
  background:transparent;
  margin:0;padding:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none;}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--dorado);border-color:var(--dorado);}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display:block;padding:12px 24px;
  font-size:.6875rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--texte-fort);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--noche);}

/* --------------------------------------------------------------------------
   7. WOOCOMMERCE — étape de paiement
   -------------------------------------------------------------------------- */
.woocommerce-checkout #payment{
  background:transparent;
  border:1px solid var(--ligne);
  border-radius:0;
}
.woocommerce-checkout #payment ul.payment_methods{
  border-bottom:1px solid var(--ligne);
  padding:22px;
}
.woocommerce-checkout #payment div.payment_box{
  background:rgba(235,168,32,.06);
  border-radius:0;
  font-size:.8125rem;
  color:var(--texte-doux);
}
.woocommerce-checkout #payment div.payment_box::before{display:none;}
.woocommerce-checkout #payment div.form-row{padding:22px;}
.woocommerce ul.order_details{
  display:grid;gap:2px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  background:var(--ligne);border:1px solid var(--ligne);
  margin:0 0 32px;padding:0;
}
.woocommerce ul.order_details li{
  background:var(--papier);
  padding:18px 20px;
  margin:0;border:0;float:none;
  font-size:.625rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--texte-doux);
}
.woocommerce ul.order_details li strong{
  display:block;margin-top:8px;
  font-family:var(--font-display);
  font-size:1.25rem;
  letter-spacing:.02em;
  text-transform:none;
  color:var(--texte-fort);
}

/* --------------------------------------------------------------------------
   9. FLUENT FORMS
   -------------------------------------------------------------------------- */
.fluentform .ff-el-input--label label{
  font-size:.625rem!important;font-weight:800!important;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--dorado-texte);
}
/* Champs → angles vifs */
.fluentform .ff-el-form-control{
  min-height:48px;
  padding:13px 15px;
  font-family:var(--font-sans);
  font-size:.9375rem;
  color:var(--texte-fort);
  background:transparent;
  border:1px solid var(--ligne);
  border-radius:0;
  box-shadow:none;
}
.fluentform .ff-el-form-control:focus{
  border-color:var(--dorado-texte);
  box-shadow:none;
}
/* Bouton → pilule */
.fluentform .ff-btn-submit{
  min-height:48px;
  padding:15px 32px;
  background:var(--dorado);
  color:var(--noche);
  font-family:var(--font-sans);
  font-size:.75rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  border:1.5px solid var(--dorado);
  border-radius:var(--rayon-cta);
  box-shadow:none;
}
.fluentform .ff-btn-submit:hover{
  background:var(--noche);color:var(--dorado);border-color:var(--noche);
}

/* --------------------------------------------------------------------------
   10. SECTIONS SOMBRES
   Si un bloc d'extension est posé dans une section .s-noche, le texte doit
   basculer — sinon on obtient du noir sur noir.
   -------------------------------------------------------------------------- */
.s-noche .woocommerce table.shop_table td,
.s-sec .woocommerce table.shop_table td{color:var(--texte-doux-inv);border-bottom-color:var(--ligne-inv);}
.s-noche .woocommerce table.shop_table,
.s-sec .woocommerce table.shop_table{border-color:var(--ligne-inv);}
.s-noche .woocommerce form .form-row label,
.s-sec .woocommerce form .form-row label{color:var(--dorado);}
.s-noche .woocommerce form .form-row input.input-text,
.s-sec .woocommerce form .form-row input.input-text{
  color:var(--texte-fort-inv);border-color:var(--ligne-inv);
}
.s-noche .woocommerce ul.products li.product{background:var(--noche);}
.s-sec .woocommerce ul.products li.product{background:var(--noche-2);}

/* --------------------------------------------------------------------------
   11. IMPRESSION
   -------------------------------------------------------------------------- */
@media print{
  .woocommerce .button,
  .amelia-app-booking .el-button,
  .fluentform .ff-btn-submit{display:none!important;}
}

/* --------------------------------------------------------------------------
   9. PANIER DANS L'EN-TÊTE
   La maquette n'en prévoyait pas : elle a été dessinée avant le commerce.
   Le lien reprend la pilule des commandes, avec le pictogramme dessiné en
   CSS plutôt qu'en emoji — un emoji ne se colore pas et rend différemment
   d'un système à l'autre.
   -------------------------------------------------------------------------- */
.panier-zone{display:inline-flex;}

.panier-lien{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:11px 18px;
}

/* Anse et corps du panier, tracés au trait comme le reste de la maquette. */
.panier-lien__pictogramme{
  position:relative;
  width:15px;
  height:15px;
  border:1.5px solid currentColor;
  border-top:0;
  border-radius:0 0 3px 3px;
  flex:none;
}
.panier-lien__pictogramme::before{
  content:"";
  position:absolute;
  left:50%;
  top:-7px;
  width:9px;
  height:9px;
  margin-left:-4.5px;
  border:1.5px solid currentColor;
  border-bottom:0;
  border-radius:5px 5px 0 0;
}

.panier-lien__compte{
  font-weight:800;
  font-size:.8125rem;
  font-variant-numeric:tabular-nums;
  line-height:1;
}

@media (max-width:900px){
  .panier-lien{padding:11px 14px;}
}

/* --------------------------------------------------------------------------
   10. APPELS À L'ACTION DES FORMULES
   La maquette n'en prévoyait pas : les cartes de tarifs étaient purement
   informatives. Le bouton se place en bas de carte, aligné sur les autres
   quelle que soit la longueur du texte au-dessus.
   -------------------------------------------------------------------------- */
.formule__cta{
  margin-top:18px;
  width:100%;
  justify-content:center;
  min-height:48px;          /* cible tactile de la maquette */
}

/* Les cartes sont sur fond sombre : le bouton secondaire doit rester lisible. */
.formule .btn--secondaire.formule__cta{
  border-color:var(--texte-doux-inv);
  color:var(--texte-fort-inv);
}
.formule .btn--secondaire.formule__cta:hover,
.formule .btn--secondaire.formule__cta:focus-visible{
  border-color:var(--dorado);
  color:var(--dorado);
}