/* Fichier: 20-typographie.css - Role: Styles: typographie (polices, titres, hierarchie) */
/* =========================================================
   TYPOGRAPHIE — TITRES (global)
   ========================================================= */

/* TITRE DE PAGE — H1 global */
h1 {
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: #333;

  text-transform: none;
  letter-spacing: 0;
}

/* Pages menu — Titre du bloc Produits par catégorie */
h2.wp-block-heading.has-text-align-center {
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: #333;
  text-transform: none;
  letter-spacing: 0;
}
/* =========================================================
   LIENS SIMPLES — contenu principal uniquement
   (exclut lnk-stylise et les boutons Gutenberg)
   ========================================================= */

/* État normal */
#main a:link:not(.lnk-stylise):not(.wp-element-button):not(.wp-block-button__link),
#main a:visited:not(.lnk-stylise):not(.wp-element-button):not(.wp-block-button__link) {
  color: #FFC000 !important;
  font-weight: 550 !important;
  text-decoration: none !important;

  border-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* Survol / focus */
#main a:hover:not(.lnk-stylise):not(.wp-element-button):not(.wp-block-button__link),
#main a:focus:not(.lnk-stylise):not(.wp-element-button):not(.wp-block-button__link) {
  color: #000 !important;
  font-weight: 550 !important;
  text-decoration: none !important;

  border-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* lnk-stylise sur <label> (cas overlay checkbox hack) */
#main label.lnk-stylise{
  display: inline-block !important;
  background: transparent !important;
  color: #555 !important;

  border-style: solid !important;
  border-width: 1px !important;
  border-color: #FFC000 !important;
  border-radius: 4px !important;

  padding: 6px 12px !important;   /* proche du rendu <a> */
  line-height: 1.2 !important;
}

#main label.lnk-stylise:hover,
#main label.lnk-stylise:focus{
  border-color: #000 !important;
}


/* =========================================================
   BOUTON D’ACTION — action principale (btn-action)
   ========================================================= */

#main .wp-block-button.btn-action .wp-block-button__link,
#main .wp-block-button.btn-action .wp-element-button {
  background: #000 !important;
  color: #FFC000 !important;
  border: 1px solid transparent !important;

  border-radius: 4px !important;
  padding: 0 20px !important;
  line-height: 38px !important;

  font-size: 0.88em !important;
  letter-spacing: 0.085em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

/* Hover / focus : inversion franche */
#main .wp-block-button.btn-action .wp-block-button__link:hover,
#main .wp-block-button.btn-action .wp-block-button__link:focus,
#main .wp-block-button.btn-action .wp-element-button:hover,
#main .wp-block-button.btn-action .wp-element-button:focus {
  background: #FFC000 !important;
  color: #000 !important;
}
/* =========================================================
   EXTENSION btn-action — boutons des modales PG
   ========================================================= */

.pg-modal .btn-action{
  background: #000 !important;
  color: #FFC000 !important;
  border: 1px solid transparent !important;

  border-radius: 4px !important;
  padding: 0 20px !important;
  line-height: 38px !important;

  font-size: 0.88em !important;
  letter-spacing: 0.085em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

.pg-modal .btn-action:hover,
.pg-modal .btn-action:focus{
  background: #FFC000 !important;
  color: #000 !important;
}


/* =========================================================
   LIEN STYLISÉ — navigation secondaire (lnk-stylise)
   ========================================================= */

/* Base (Gutenberg + <a> shortcode) */
#main .wp-block-button.lnk-stylise .wp-block-button__link,
#main .wp-block-button.lnk-stylise .wp-element-button,
#main a.lnk-stylise {
  display: inline-block;
  box-sizing: border-box !important;

  background: transparent !important;
  color: #555 !important;
  border: 1px solid #FFC000 !important;

  border-radius: 4px !important;
  padding: 0 16px !important;
  line-height: 32px !important;

  font-size: 0.75em !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

/* Hover / focus : aucune variation de taille */
#main .wp-block-button.lnk-stylise .wp-block-button__link:hover,
#main .wp-block-button.lnk-stylise .wp-block-button__link:focus,
#main .wp-block-button.lnk-stylise .wp-element-button:hover,
#main .wp-block-button.lnk-stylise .wp-element-button:focus,
#main a.lnk-stylise:hover,
#main a.lnk-stylise:focus {
  background: transparent !important;
  color: #555 !important;
  border-color: #000 !important;
}

/* Forcer une bordure visible et stable sur les 4 côtés */
#main a.lnk-stylise {
  border-style: solid !important;
  border-width: 1px !important;      /* y compris bas */
  border-color: #FFC000 !important;
}

/* Verrouiller la couleur du texte (normal = hover) */
#main a.lnk-stylise,
#main a.lnk-stylise:hover,
#main a.lnk-stylise:focus {
  color: #555 !important;
}
/* =========================================================
   OVERRIDE DÉFINITIF — lnk-stylise contre style.css (#main a:link...)
   ========================================================= */

#main a.lnk-stylise:link,
#main a.lnk-stylise:visited {
  color: #555 !important;

  /* rétablit la bordure basse annulée par style.css */
  border-bottom: 1px solid #FFC000 !important;
  border-left: 1px solid #FFC000 !important;
  border-right: 1px solid #FFC000 !important;
  border-top: 1px solid #FFC000 !important;
}

#main a.lnk-stylise:hover,
#main a.lnk-stylise:focus {
  color: #555 !important;

  border-bottom-color: #000 !important;
  border-left-color: #000 !important;
  border-right-color: #000 !important;
  border-top-color: #000 !important;
}

/* =========================================================
   ACCESSIBILITÉ — repère clavier discret (site-wide)
   ========================================================= */

a:focus-visible,
button:focus-visible,
summary:focus-visible{
  outline: none !important;
  background: rgba(255, 235, 150, 0.4) !important;
  border-radius: 4px;
}

/* ==========================================================
   PG — titres de sections éditoriales 
   ========================================================== */
   
.pg-page-width h3{
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  margin: 28px 0 4px;
  padding-left: 24px;
  color: #FFC000;
}

/* ============================================
   Overlay plein écran pour popup <970
   composant commun réutilisable (checkbox hack)
   Bloquer le scroll arrière : classe sur body (php sans JS)
   Structure attendue (exemple) :
   <input class="pg-ov-toggle" type="checkbox" id="pg-ov-xxx">
   <div class="pg-ov">
     <div class="pg-ov-box">
       <label class="pg-ov-close" for="pg-ov-xxx">×</label>
       <div class="pg-ov-body">...</div>
     </div>
   </div>
*/

/* toggle caché */
.pg-ov-toggle{
  position: absolute !important;
  left: -9999px !important;
}

/* overlay masqué par défaut */
.pg-ov{
  display: none !important;
}

/* overlay affiché quand checkbox cochée */
.pg-ov-toggle:checked + .pg-ov{
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  background: rgba(0,0,0,0.35) !important;
}

/* boîte plein écran “type popup” */
.pg-ov-box{
  position: absolute !important;
  inset: 10px !important;              /* marge écran */
  border: 3px solid #FFC000 !important;
  border-radius: 8px !important;
  background: #fff !important;
  overflow: hidden !important;
}

/* croix */
.pg-ov-close{
  position: absolute !important;
  top: 6px !important;
  right: 10px !important;
  z-index: 5 !important;

  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  text-align: center !important;

  cursor: pointer !important;
  color: #000 !important;
  font-size: 26px !important;
}

/* corps scrollable */
.pg-ov-body{
  position: absolute !important;
  inset: 46px 10px 10px 10px !important;  /* laisse la place à la croix */
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}
/* Scrollbar invisible mais scroll OK */
.pg-ov-body{
  scrollbar-width: none;           /* Firefox */
}
.pg-ov-body::-webkit-scrollbar{
  width: 0;
  height: 0;
}

/* respect des sauts de paragraphe */
.pg-ov-body p{ margin: 0 0 0.9em 0 !important; }
.pg-ov-body p:last-child{ margin-bottom: 0 !important; }

/* ==========================================================
   Skin mobile (<970) pour popups JS existants (SPT + DEMO)
   Objectif : même rendu que le “popup-like” (.pg-ov-*)
   ========================================================== */

/* ==========================================================
   POPUPS JS — habillage mobile (<970) sans toucher à display
   IMPORTANT : display est piloté par le JS (MutationObserver)
   ========================================================== */

/* blocage du scroll derrière (piloté par JS) */
html.pg-ov-noscroll,
body.pg-ov-noscroll{ overflow: hidden !important; }

@media (max-width: 480px){

  /* overlay (SPT + DEMO) */
  #spt-popup-overlay,
  #pg-popup-demo-overlay{
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    background: rgba(0,0,0,0.35) !important;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  /* boîte plein écran (SPT + DEMO)
     NE PAS définir display ici */
  #spt-popup,
  #pg-popup-demo{
    position: fixed !important;
    inset: 10px !important;
    left: 10px !important;
    top: 10px !important;
    right: 10px !important;
    bottom: 10px !important;

    transform: none !important;
    margin: 0 !important;

    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;

    z-index: 1000000 !important;

    border: 3px solid #FFC000 !important;
    border-radius: 8px !important;
    background: #fff !important;

    overflow: hidden !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  /* croix */
  #spt-popup .spt-close,
  #pg-popup-demo .spt-close{
    position: absolute !important;
    top: 6px !important;
    right: 10px !important;
    z-index: 5 !important;

    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    text-align: center !important;

    font-size: 26px !important;
  }

  /* corps scrollable */
  #spt-popup .spt-body,
  #pg-popup-demo .spt-body{
    position: absolute !important;
    inset: 46px 10px 10px 10px !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
  }
  #spt-popup .spt-body::-webkit-scrollbar,
  #pg-popup-demo .spt-body::-webkit-scrollbar{
    width: 0;
    height: 0;
  }
  
  body #spt-popup,
  body #spt-popup.spt-fx-open{
    transform: none !important;
    left: 10px !important;
    top: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: calc(100vw - 20px) !important;
    height: calc(100vh - 20px) !important;
    max-width: none !important;
    max-height: none !important;
  }

  body #pg-popup-demo,
  body #pg-popup-demo.spt-fx-open{
    transform: none !important;
    left: 10px !important;
    top: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: calc(100vw - 20px) !important;
    height: calc(100vh - 20px) !important;
    max-width: none !important;
    max-height: none !important;
  }
}

/* =========================================================
   LAYOUT — réduire/supprimer l’espace bas avant footer
   Cible : #content-wrap (OceanWP) (au ieu de 50px par défaut)
   ========================================================= */

#content-wrap{
  padding-bottom: 24px !important;
}