/*
Theme Name: Parabellum Combat Club 2026 – Refonte
Template: parabellum-2026
Description: Thème enfant de Parabellum Combat Club 2026 : menu en fondu sur la photo d'accueil, logo bélier centré, retraits de texte demandés et espacements optimisés pour le mobile. Tout le reste vient du thème parent.
Author: Parabellum Combat Club
Version: 1.0.2
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: parabellum-2026-refonte
*/

/* ================================================================
   AJUSTEMENTS DEMANDÉS (refonte v2) — tout le reste est la base en ligne
   ================================================================ */
:root{--util-h:39px;--hdr-h:79px}
.wrap{padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}

/* 1. Logo : tête de bélier seule (fond transparent, lisible sur la photo comme sur le noir) */
.logo img{height:46px;filter:none;mix-blend-mode:normal}
#hdr.shrink .logo img{height:38px}
@media (max-width:1120px){.logo img{height:40px}#hdr.shrink .logo img{height:36px}}

/* 2. Ordinateur : logo centré entre « Planning » et « Tarifs et inscription » */
@media (min-width:1121px){
  .nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(10px,1.6vw,32px)}
  .menu{margin-left:0}
  .menu-l{justify-content:flex-end}
  .menu>a,.dd>a,.nav-r .btn{white-space:nowrap}
  .nav-r{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
}
@media (min-width:1121px) and (max-width:1340px){
  .menu>a,.dd>a{padding-inline:8px;font-size:.8rem;letter-spacing:.06em}
  .nav-r .btn.sm{padding:12px;font-size:.74rem;gap:10px}
}
@media (max-width:1120px){.nav-r{display:none}}

/* 3. Accueil : barre utilitaire et menu en fondu sur la photo, pleins au défilement */
body[data-view="accueil"] .util{position:relative;z-index:51;background:transparent;border-bottom-color:rgba(255,255,255,.14);color:rgba(255,255,255,.72)}
body[data-view="accueil"] #hdr{transition:background .3s,border-color .3s}
body[data-view="accueil"] #hdr:not(.shrink){background:transparent;border-bottom-color:transparent}
body[data-view="accueil"] #hdr:not(.shrink) .menu>a,body[data-view="accueil"] #hdr:not(.shrink) .dd>a{color:#efe9df}
body[data-view="accueil"] #hdr:not(.shrink) .burger{border-color:rgba(255,255,255,.3)}
body.mopen #hdr{background:var(--ink)!important}
body[data-view="accueil"] .hero{margin-top:calc(-1 * (var(--util-h) + var(--hdr-h)));min-height:calc(min(80vh,760px) + var(--util-h) + var(--hdr-h))}
body[data-view="accueil"] .hero .wrap{padding-top:calc(clamp(72px,9vw,120px) + var(--util-h) + var(--hdr-h))}
.hero-bg::after{background:linear-gradient(180deg,rgba(11,9,9,.78) 0,rgba(11,9,9,.35) 120px,rgba(11,9,9,0) 240px),linear-gradient(90deg,rgba(11,9,9,.95) 10%,rgba(11,9,9,.55) 52%,rgba(61,10,46,.4) 100%),linear-gradient(0deg,rgba(11,9,9,.9) 0%,transparent 40%)}
@media (max-width:900px){
  body[data-view="accueil"] .hero{margin-top:calc(-1 * var(--hdr-h));min-height:calc(min(80vh,760px) + var(--hdr-h))}
  body[data-view="accueil"] .hero .wrap{padding-top:calc(64px + var(--hdr-h))}
}

/* 4. Bélier seul en filigrane sur les sections à fond uni */
.cta::before,.ram::after{background-image:url("photos-optimisees/marque/belier-tete.png");aspect-ratio:292/180;width:min(46vw,540px);right:-3%;filter:grayscale(1) brightness(1.8);mix-blend-mode:normal;opacity:.06}
.ph-head .wrap,.cta .wrap{z-index:1}
@media (max-width:760px){.cta::before,.ram::after{width:76vw;right:-20%;opacity:.05}}

/* 5. Espacements : plus serrés et réguliers, surtout sur mobile */
.sec{padding-block:clamp(56px,7vw,104px)}
.head{margin-bottom:clamp(24px,3.6vw,48px)}
.cta .wrap{padding-block:clamp(48px,6.5vw,92px)}
.ph-head .wrap{padding-block:clamp(48px,6.5vw,96px) clamp(32px,4vw,52px)}
@media (max-width:760px){
  .sec{padding-block:48px}
  .head{gap:12px;margin-bottom:24px}
  .head.row{gap:12px 24px}
  .hero .wrap{padding-bottom:32px;gap:20px}
  .hero-tx,.hero h1.hx{gap:16px}
  .intro{gap:28px}
  .intro-l{gap:14px}
  .feat{padding:16px 0}
  .sb-in{padding-block:36px;gap:20px}
  .sb-logo img{max-width:168px}
  .stat{padding:18px 14px;gap:6px}
  .stat b{font-size:2.9rem}
  .card .tx{padding:18px 18px 20px;gap:8px}
  .rev{padding:22px;gap:12px}
  .rev .score b{font-size:3.6rem}
  .life{gap:24px}
  .cta .wrap{padding-block:44px;gap:20px}
  .cta .wrap>div{gap:12px}
  .ph-head .wrap{padding-block:40px 32px;gap:14px}
  .two{gap:28px}
  .tli{grid-template-columns:84px minmax(0,1fr);gap:16px;padding:18px 0}
  .motto .tx{padding:36px var(--gut);gap:16px}
  .esprit{gap:28px}
  .fight .tx{padding:22px 20px}
  .coach{padding-block:36px;gap:20px}
  .dblock{padding-bottom:40px;margin-bottom:40px}
  .price{padding:24px 20px}
  .ptabs{margin-bottom:20px}
  .step{padding:22px 20px}
  .faqg{padding-block:20px}
  .socials{margin-top:28px}
}
@media (max-width:560px){
  .hero .row-btns{display:grid;gap:10px}
  .hero .row-btns .btn{width:100%}
  .next{justify-self:stretch;min-width:0;padding:14px 16px;gap:6px}
  .next b{font-size:1.3rem}
}

/* 7. Survol des boutons secondaires à couleur imposée (« Découvrir les disciplines », « S'inscrire ») :
   le fond devient clair au survol, le texte passe en noir pour rester lisible */
.btn:not(.pri):not(.inv)[style*="color"]:hover,.btn:not(.pri):not(.inv)[style*="color"]:focus-visible{color:var(--ink)!important}

/* 6. Pied de page mobile : deux colonnes compactes */
@media (max-width:760px){
  .foot{grid-template-columns:1fr 1fr;gap:28px 16px;padding-block:44px 28px}
  .foot>div:first-child{grid-column:1/-1;display:flex;gap:16px;align-items:center}
  .foot>div:first-child img{height:64px;margin:0;flex-shrink:0}
  .foot>div:first-child p{font-size:.9rem;line-height:1.5}
  .foot h4{margin-bottom:8px}
  .foot ul{gap:0;font-size:.95rem}
  .foot a{padding-block:7px}
  .foot li:not(:has(a)){padding-block:4px}
  .legal{flex-direction:column;gap:0;padding-block:12px 20px}
  .legal>span:first-child{padding-block:8px}
}