/*
Theme Name:   GYPA Child
Theme URI:    https://www.gypa-sport.com
Description:  Thème enfant Astra aux couleurs GYPA. Charte : PANTONE 296 C, 637 C, 656 C, 5025. Le GYPA, été comme hiver.
Author:       GYPA
Version:      1.0.0
Template:     astra
Text Domain:  gypa-child
*/

/* =========================================================
   1. VARIABLES DE MARQUE
   Les noms Pantone font foi pour l'impression.
   Les hex ci-dessous sont des aperçus écran uniquement.
   ========================================================= */
:root{
  --gypa-navy:#002E47;      /* PANTONE 296 C */
  --gypa-navy-dark:#001C2D;
  --gypa-navy-light:#0A4360;
  --gypa-ice:#60C2D0;       /* PANTONE 637 C - bleu 7 Laux */
  --gypa-ice-dark:#3FA6B6;
  --gypa-grey:#D6DBE0;      /* PANTONE 656 C */
  --gypa-clay:#E3B6B8;      /* PANTONE 5025 */
  --gypa-line:#DDE4EA;
  --gypa-bg-soft:#F3F6F8;
  --gypa-ink-soft:#5A7386;
  --gypa-radius:8px;
  --gypa-display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gypa-text:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* =========================================================
   2. TYPOGRAPHIE
   ========================================================= */
body,button,input,select,textarea{font-family:var(--gypa-text);color:var(--gypa-navy)}
h1,h2,h3,h4,h5,.site-title,.woocommerce-loop-product__title,
.entry-title,.widget-title{font-family:var(--gypa-display);font-weight:800;letter-spacing:-.02em;line-height:1.05}
h1{font-size:clamp(34px,5vw,64px)}
h2{font-size:clamp(26px,3.6vw,44px)}
h3{font-size:clamp(20px,2.4vw,28px)}
p{line-height:1.65}

/* Baseline de marque, à poser dans un bloc Paragraphe */
.gypa-baseline{
  font-family:var(--gypa-display);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;font-size:13px;color:var(--gypa-ice)
}
.gypa-claim{
  font-family:var(--gypa-display);font-weight:800;
  font-size:clamp(24px,3.4vw,40px);line-height:1.06
}
.gypa-claim em{font-style:normal;color:var(--gypa-ice);display:block}

/* =========================================================
   3. EN-TÊTE
   ========================================================= */
.ast-primary-header-bar,
.ast-below-header-bar,
.main-header-bar{background-color:var(--gypa-navy)!important;border-bottom:0}
.main-header-menu a,
.ast-header-break-point .main-header-menu a,
.ast-masthead-custom-menu-items a,
.main-header-bar .ast-site-identity .site-title a{color:#fff!important}
.main-header-menu>.current-menu-item>a,
.main-header-menu>li>a:hover{color:#fff!important}
.main-header-menu>.current-menu-item>a:after{
  content:"";display:block;height:3px;background:var(--gypa-ice);border-radius:2px;margin-top:4px
}
.ast-site-identity img{max-height:46px;width:auto}

/* Bandeau promo : Astra > En-tête > Barre supérieure */
.ast-above-header-bar{
  background:var(--gypa-navy-dark)!important;color:var(--gypa-grey);font-size:13px
}
.ast-above-header-bar a{color:var(--gypa-ice)!important}

/* Filet Arlequin sous l'en-tête */
.main-header-bar:after{
  content:"";display:block;height:4px;
  background:linear-gradient(90deg,var(--gypa-navy) 0%,var(--gypa-ice) 45%,var(--gypa-grey) 75%,var(--gypa-clay) 100%)
}

/* =========================================================
   4. BOUTONS
   ========================================================= */
.ast-button,.button,button,input[type="submit"],
.wp-block-button__link,
.woocommerce a.button,.woocommerce button.button,
.woocommerce .button.alt,.woocommerce #respond input#submit{
  background-color:var(--gypa-navy);color:#fff;border:1.5px solid var(--gypa-navy);
  border-radius:var(--gypa-radius);font-family:var(--gypa-text);font-weight:600;
  letter-spacing:0;padding:14px 26px;transition:background-color .15s,border-color .15s
}
.ast-button:hover,.button:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce .button.alt:hover,.woocommerce #respond input#submit:hover{
  background-color:var(--gypa-navy-light);border-color:var(--gypa-navy-light);color:#fff
}
.woocommerce .button.alt,
.woocommerce button.button.alt{background-color:var(--gypa-ice);color:var(--gypa-navy-dark);border-color:var(--gypa-ice)}
.woocommerce .button.alt:hover{background-color:var(--gypa-ice-dark);border-color:var(--gypa-ice-dark);color:var(--gypa-navy-dark)}
.is-style-outline .wp-block-button__link,
.gypa-btn-ghost{background:transparent!important;color:var(--gypa-navy)!important;border:1.5px solid var(--gypa-line)!important}

/* =========================================================
   5. BOUTIQUE
   ========================================================= */
.woocommerce ul.products li.product{
  background:#fff;border:1px solid var(--gypa-line);border-radius:var(--gypa-radius);
  overflow:hidden;padding:0;transition:border-color .15s,box-shadow .15s
}
.woocommerce ul.products li.product:hover{
  border-color:#C2CCD5;box-shadow:0 8px 24px rgba(0,46,71,.07)
}
.woocommerce ul.products li.product a img{
  margin:0;background:var(--gypa-bg-soft);aspect-ratio:1/1.05;object-fit:contain;padding:14px
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--gypa-text)!important;font-size:15.5px!important;font-weight:600;
  letter-spacing:0;line-height:1.35;padding:14px 16px 0
}
.woocommerce ul.products li.product .price{
  display:block;padding:6px 16px 0;color:var(--gypa-navy);font-weight:700;font-size:16.5px
}
.woocommerce ul.products li.product .button{margin:14px 16px 16px;display:block;text-align:center}
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale{
  background:var(--gypa-ice);color:var(--gypa-navy-dark);border-radius:4px;
  font-weight:700;font-size:11px;letter-spacing:.05em;min-height:auto;min-width:auto;
  padding:5px 9px;line-height:1;top:10px;left:10px;right:auto
}

/* Fiche produit */
.woocommerce div.product .product_title{font-size:clamp(24px,3vw,38px)}
.woocommerce div.product p.price{color:var(--gypa-navy);font-size:24px;font-weight:700}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{
  border-bottom-color:var(--gypa-ice);background:#fff
}
.woocommerce div.product form.cart .variations label{font-weight:600}
.woocommerce .quantity .qty{border:1.5px solid var(--gypa-line);border-radius:var(--gypa-radius)}
.woocommerce-message,.woocommerce-info{border-top-color:var(--gypa-ice)}
.woocommerce-message::before,.woocommerce-info::before{color:var(--gypa-ice-dark)}
.woocommerce-error{border-top-color:#D14343}

/* Panier et commande */
.woocommerce table.shop_table{border-radius:var(--gypa-radius);border-color:var(--gypa-line)}
.woocommerce-checkout #payment{background:var(--gypa-bg-soft);border-radius:var(--gypa-radius)}
.woocommerce-checkout #payment div.payment_box{background:#fff;border:1px solid var(--gypa-line)}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:#fff}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single{
  border:1.5px solid var(--gypa-line);border-radius:var(--gypa-radius);padding:12px 14px;min-height:48px
}
.woocommerce form .form-row input.input-text:focus{border-color:var(--gypa-ice);outline:none}

/* Badge précommande : cocher "Autoriser les commandes en attente" sur la variation */
.gypa-precommande{
  display:inline-block;background:var(--gypa-ice);color:var(--gypa-navy-dark);
  font-size:11px;font-weight:700;letter-spacing:.05em;padding:4px 9px;border-radius:4px;margin-bottom:8px
}

/* =========================================================
   6. BLOCS DE PAGE
   ========================================================= */
/* Section sombre avec le motif Arlequin en fond.
   Usage : bloc Groupe > Avancé > Classe CSS : gypa-dark */
.gypa-dark{
  position:relative;background-color:var(--gypa-navy);color:#fff;overflow:hidden;
  background-image:url('assets/arlequin.svg');background-size:cover;background-position:center
}
.gypa-dark::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,46,71,.25),rgba(0,28,45,.82));z-index:0
}
.gypa-dark>*{position:relative;z-index:1}
.gypa-dark h1,.gypa-dark h2,.gypa-dark h3,.gypa-dark strong{color:#fff}
.gypa-dark p{color:#C5D9E2}
.gypa-dark a:not(.button){color:var(--gypa-ice)}

/* Section claire alternée : classe gypa-soft */
.gypa-soft{background-color:var(--gypa-bg-soft)}

/* Carte univers : classe gypa-univers sur un bloc Colonne */
.gypa-univers{
  position:relative;border-radius:var(--gypa-radius);overflow:hidden;min-height:400px;
  display:flex;flex-direction:column;justify-content:flex-end;padding:34px;color:#fff;
  background-color:var(--gypa-navy);background-image:url('assets/arlequin.svg');background-size:cover
}
.gypa-univers h3{color:#fff;font-size:clamp(26px,3.4vw,42px)}
.gypa-univers p{color:#C9DCE4}

/* Dégradé identitaire, pour un séparateur ou un fond de bandeau */
.gypa-degrade{
  background:linear-gradient(180deg,var(--gypa-navy) 0%,var(--gypa-navy-light) 32%,
    var(--gypa-ice) 58%,var(--gypa-grey) 80%,#fff 100%)
}
.gypa-filet{height:4px;border:0;
  background:linear-gradient(90deg,var(--gypa-navy),var(--gypa-ice) 45%,var(--gypa-grey) 75%,var(--gypa-clay))}

/* =========================================================
   7. PIED DE PAGE
   ========================================================= */
.site-footer,.ast-small-footer,
footer.site-footer .footer-adv{background-color:var(--gypa-navy)!important;color:#B9CEDA}
.site-footer a,.ast-small-footer a{color:#B9CEDA}
.site-footer a:hover{color:#fff}
.site-footer h2,.site-footer h3,.site-footer .widget-title{color:#fff;font-size:13px;letter-spacing:.12em;text-transform:uppercase}

/* =========================================================
   8. ACCESSIBILITÉ ET MOBILE
   ========================================================= */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2.5px solid var(--gypa-ice);outline-offset:2px
}
@media (max-width:544px){
  .woocommerce ul.products[class*="columns-"] li.product{width:48%;margin-right:4%}
  .woocommerce ul.products[class*="columns-"] li.product:nth-child(2n){margin-right:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}