/*

Theme Name: Le Parti

Theme URI: https://leparti.infy.uk

Author: X X

Author URI: https://leparti.infy.uk

Description: Thème personnalisé pour le site politique Le Parti

Version: 1.0

Text Domain: leparti

*/



/* ===== Base ===== */

body {

  margin: 0;

  padding: 0;

  background-color: var(--page-bg);

  color: var(--text-dark); /* texte lisible sur fond clair */

  font-family: "Helvetica Neue", sans-serif;

  font-size: 16px;

  line-height: 1.6;

}

a {

  color: var(--brand-accent);

  text-decoration: none;

}

a:hover {

  color: var(--brand-accent-dark);

}



/* ===== Global buttons ===== */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  padding: 10px 16px;

  border-radius: 10px;

  text-decoration: none;

  font-weight: 600;

  border: 1px solid transparent;

  transition: transform .15s ease, opacity .15s ease, background .2s ease, border-color .2s ease;

  cursor: pointer;

}

.btn-primary {

  background: linear-gradient(180deg, #1b2e4b, #13233b);

  color: var(--surface-text-strong);

  box-shadow: none;

}

.btn-primary:hover {

  background: linear-gradient(180deg, #2a3f5f, #1b2e4b);

  transform: translateY(-1px);

  opacity: .95;

  color: #000;

}

.btn-ghost {

  background: transparent;

  color: var(--ink);

  border-color: var(--panel-border);

}

.btn-ghost:hover {

  border-color: var(--border-light-4);

  transform: translateY(-1px);

}

.btn-sm {

  padding: 8px 14px;

  font-size: .9rem;

  border-radius: 20px;

}





/* Share dropdown */

.share-dropdown {

  position: relative;

  display: inline-flex;

  max-width: 100%;

}

.share-menu {

  position: absolute;

  right: 0;

  top: calc(100% + 8px);

  width: min(320px, calc(100vw - 24px));

  min-width: 0;

  max-width: calc(100vw - 24px);

  max-height: none;

  overflow: visible;

  background: var(--panel);

  border: 1px solid var(--panel-border);

  border-radius: 12px;

  box-shadow: var(--shadow);

  padding: 10px;

  z-index: 4000;

  box-sizing: border-box;

}

.share-menu[hidden] {

  display: none;

}

.share-dropdown.is-open .share-menu {

  display: block;

}

.share-group + .share-group {

  margin-top: 10px;

  padding-top: 10px;

  border-top: 1px solid var(--panel-border);

}

.share-title {

  font-size: 0.72rem;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: var(--muted);

  margin: 0 0 6px;

}



.share-more {

  margin-top: 6px;

}

.share-more summary {

  list-style: none;

  cursor: pointer;

  padding: 6px 8px;

  border-radius: 8px;

  color: var(--surface-text-strong);

  background: linear-gradient(180deg, #1b2e4b, #13233b);

  border: 1px solid transparent;

  font-size: 1rem;

  font-weight: 700;

  text-align: center;

}

.share-more[open] summary {

  background: linear-gradient(180deg, #2a3f5f, #1b2e4b);

}

.share-more summary::-webkit-details-marker {

  display: none;

}

.share-divider {

  margin-bottom: 6px;

}

.share-item,

.share-action {

  display: block;

  width: 100%;

  text-align: left;

  padding: 6px 8px;

  border-radius: 8px;

  color: var(--ink);

  text-decoration: none;

  background: transparent;

  border: 0;

  font-size: 0.92rem;

  cursor: pointer;

  white-space: normal;

  word-break: break-word;

  overflow-wrap: anywhere;

}

.share-item:hover,

.share-action:hover {

  background: rgba(255,255,255,0.06);

}

@media (max-width: 640px) {

  .share-menu {

    left: 0;

    right: auto;

    min-width: 220px;

  }

}



/* Article audio shortcode */

.article-audio {

  display: flex;

  flex-direction: column;

  gap: 10px;

  padding: 16px;

  border-radius: 14px;

  background: #fff;

  border: 1px solid var(--border-light-3);

  box-shadow: var(--shadow-soft);

  margin-bottom: 24px;

}

.article-audio .btn-audio {

  align-self: flex-start;

}

.article-audio audio {

  width: 100%;

}



@media (max-width: 768px){

  .article-audio .btn-audio {

    width: 100%;

  }

}



/* ===== Variables header ===== */

:root{

  --header-bg: #0b0e13e6;          /* translucide */

  --header-bg-solid:#0b0e13;       /* plein au scroll */

  --ink:#e8edf5;

  --muted:#9fb1c7;

  --brand:#0757c6;                 /* bleu plus foncé */

  --brand-dark:#0647a5;

  --brand-accent:#0a84ff;

  --brand-accent-dark:#086bd1;

  --brand-action:#005f99;

  --brand-action-dark:#004d80;

  --surface-dark:#1f1f1f;

  --surface-darker:#1a1a1a;

  --surface-deep:#111;

  --surface-text:#ddd;

  --surface-text-strong:#fff;

  --shadow-strong: 0 6px 24px rgba(0,0,0,0.4);

  --brand-rgb: 7, 87, 198;

  --brand-accent-rgb: 10, 132, 255;

  --page-bg:#f5f5f5;

  --text-dark:#0b0e13;

  --text-base:#222;

  --bg:#0f1115;

  --panel:#161a22;

  --panel-rgb: 22, 26, 34;

  --panel-border:#1d2330;

  --border-light:#e3e3e3;

  --border-subtle: rgba(255,255,255,.06);

  --accent:#18c29c;

  --card-shadow: 0 10px 30px rgba(0,0,0,0.35);

  --shadow-soft: 0 8px 20px rgba(0,0,0,.08);

  --card-bg:#12161d;

  --input-bg:#0f141b;

  --ring: rgba(var(--brand-accent-rgb), .25);

  --card-light:#ffffff;

  --surface-light:#f0f3f8;

  --surface-light-2:#f9fbff;

  --surface-light-3:#f6f9ff;

  --border-light-2:#e6eaf0;

  --border-light-3:#dfe4ec;

  --border-light-4:#cfd7e6;

  --border-light-5:#e5e7eb;





  --radius:14px;

  --shadow: 0 10px 30px rgba(0,0,0,.25);

  --header-height: 50px; /* ajuste à la vraie hauteur de ton header */

}



/* ===== Header ===== */

.site-header{

  position: sticky; top:0; z-index:1000;

  backdrop-filter: blur(8px);

  background: var(--header-bg);

  border-bottom: 1px solid rgba(255,255,255,.06);

  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;

}

.site-header.scrolled{

  background: var(--header-bg-solid);

  box-shadow: var(--shadow);

}



/* Container header */

.site-header .container{

  max-width: 1180px; 

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between; /* ✅ évite que le titre colle à gauche */

  gap: 16px;

  padding: 10px 20px;

}



/* Branding */

.brand-area { display:flex; align-items:center; gap:10px; }

.custom-logo-link img{ height:40px; width:auto; }

.site-title{ color:var(--ink); font-weight:700; font-size:1.05rem; }



/* ===== Nav ===== */

.main-nav{ margin-left: auto; } /* pousse la nav à droite */



#primary-menu {

  list-style: none;

  display: flex;

  gap: 22px;

  margin: 0;

  padding: 0;

}

#primary-menu li { margin: 0; padding: 0; }

#primary-menu a {

  color: var(--ink);

  text-decoration: none;

  font-weight: 500;

  padding: 8px 10px;

  border-radius: 10px;

}

#primary-menu a:hover{ background: rgba(255,255,255,.06); }



/* Lien actif */

#primary-menu .current-menu-item > a,

#primary-menu .current_page_item > a{

  background: rgba(255,255,255,.10);

}



/* Burger */

.nav-toggle{

  width:40px; height:40px;

  border:0; background:transparent; cursor:pointer;

  border-radius:10px; display:none; /* caché en desktop */

}

.nav-toggle .bar{

  display:block; height:2px; margin:6px 8px;

  background:var(--ink);

  transition:transform .2s ease, opacity .2s;

}



/* ===== Responsive ===== */

@media (max-width: 550px){

  .nav-toggle{ display:block; margin-left:auto; z-index:10001; }

  .main-nav{ position: relative; }



  #primary-menu{

    display:none;

    flex-direction: column;

    align-items: center;

    position: fixed;      /* ✅ occupe tout l’écran */

    top: 60px;            /* hauteur du header */

    left: 0;

    right: 0;

    background: rgba(11,14,19,0.97);

    padding: 20px 0;

    gap: 15px;

    box-shadow: 0 6px 12px rgba(0,0,0,.25);

    z-index: 10000;

    animation: fadeDown 0.3s ease;

  }

  .main-nav.open #primary-menu{ display:flex; }

                

  #primary-menu a{ 

    padding: 12px 20px; 

    font-size: 16px;

    font-weight: 500;

    color: #fff;

    border-radius: 8px;

    width: 90%;

    text-align: center;

    transition: background 0.3s;

  }

  #primary-menu a:hover{

    background: rgba(255,255,255,0.1);

  }

}



@keyframes fadeDown {

  from { opacity: 0; transform: translateY(-10px); }

  to   { opacity: 1; transform: translateY(0); }

}



/* Burger ouvert */

.nav-toggle.active .bar:nth-child(1){ transform: translateY(8px) rotate(45deg); }

.nav-toggle.active .bar:nth-child(2){ opacity:0; }

.nav-toggle.active .bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }



/* Défilement doux */

html { scroll-behavior: smooth; }

.hero, .home-section { scroll-margin-top: 90px; }



/* ===== MENU LATÉRAL (droite) ===== */

.side-menu{

  position: fixed;

  top: 50%;

  right: 20px;

  transform: translateY(-50%);

  background: #ffffff;

  border: 1px solid #e3e3e3;

  border-radius: 12px;

  box-shadow: 0 8px 20px rgba(0,0,0,.08);

  padding: 12px;

  z-index: 999;

}

.side-menu ul{

  list-style: none;

  margin: 0;

  padding: 0;

  display: flex; 

  flex-direction: column; 

  gap: 10px;

}

.side-menu a{

  display: block;

  font-size: 14px;

  color: #222;

  padding: 6px 10px;

  border-radius: 6px;

  border: 2px solid rgba(0,0,0,0.15); /* ✅ contour plus visible */

  transition: background .2s, color .2s, transform .15s, border-color .2s;

  text-decoration: none;

}

.side-menu a:hover{ 

  background: #0a84ff; 

  color: #fff; 

  transform: translateY(-1px);

  border-color: var(--brand-accent);

}

.side-menu a.active{

  background: #086bd1; 

  color: #fff;

  border-color: var(--brand-accent-dark);

}



/* Responsive : masquer sur mobile */

@media (max-width: 900px){

  .side-menu{ display: none; }

}