/* Koenig requis */
.kg-width-wide{max-width:1200px;margin:0 auto}
.kg-width-full{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}

/* Drapeaux responsive */
.m-only { display: none !important; }
.d-only { display: block !important; }

@media (max-width: 767px) {
  .m-only { display: block !important; }
  .d-only { display: none !important; }

  /* Topbar mobile */
  .m-topbar{
    position: sticky; top: 0; z-index: 1000;
    display:flex; align-items:center; justify-content:space-between;
    padding:.5rem .75rem; background:#fff; border-bottom:1px solid #e7e3da;
  }
  .m-topbar .m-btn{ width:40px; height:40px; display:grid; place-items:center; border-radius:10px; background:transparent; border:0; }

  /* Logo circulaire mobile avec texte (Point B) */
  .m-logo-section {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: center;
  }

  .m-logo-circular {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #1E3985;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
  }

  .m-logo-circular img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .logo-fallback {
    font-weight: 800;
    color: #1E3985;
    font-size: 16px;
  }

  .m-site-info {
    display: flex;
    flex-direction: column;
  }

  .m-site-title {
    font-size: 14px;
    font-weight: 700;
    color: #1E3985;
    line-height: 1.2;
    text-align: right;
  }

  /* Augmentation taille police titre article mobile (Point A et C) */
  .post-full-title {
    font-size: 1.8rem !important;
    line-height: 1.3 !important;
    margin-bottom: 1rem !important;
  }

  /* Drawer flottant */
  .m-drawer{
    position: fixed; top:0; bottom:0; right:0;
    width:84vw; max-width:420px; background:#fff;
    box-shadow:-2px 0 16px rgba(0,0,0,.15);
    transform:translateX(100%); transition:transform .25s ease;
    z-index:1001; overflow:auto;
  }
  .m-drawer[aria-hidden="false"]{ transform:translateX(0); }
  .m-head{ position:sticky; top:0; background:#fff; border-bottom:1px solid #e7e3da; padding:.75rem 1rem; display:flex; align-items:center; justify-content:space-between; }
  .m-sec{ padding:1rem; }

  .m-overlay{
    position: fixed; inset:0; background:rgba(0,0,0,.25);
    opacity:0; pointer-events:none; transition:opacity .2s; z-index:1000;
  }
  .m-overlay.show{ opacity:1; pointer-events:auto; }

  /* Bottom bar mobile */
  .m-bottombar{
    position: fixed; left:0; right:0; bottom:0;
    z-index: 1000; background:#fff; border-top:1px solid #e7e3da;
    display:flex; justify-content:space-around; padding:.35rem .25rem;
  }
  .m-tab{ 
    text-align:center; text-decoration:none; color:inherit; 
    background:transparent; border:0; padding:.25rem .15rem;
    border-radius:8px; transition:all .2s ease;
    cursor:pointer; position:relative; overflow:hidden;
  }
  .m-tab i{ display:block; font-size:1.15rem; margin-bottom:.15rem; transition:transform .2s ease; }
  .m-tab span{ font-size:.7rem; line-height:1; }
  
  /* Effets de survol pour la bottom bar */
  .m-tab:hover,
  .m-tab:focus { 
    background:rgba(30,57,133,.08); 
    transform:translateY(-1px); 
  }
  .m-tab:hover i,
  .m-tab:focus i { 
    transform:scale(1.1); 
  }
  .m-tab:active { 
    transform:translateY(0); 
    background:rgba(30,57,133,.15); 
  }

  /* Bouton retour spécifique */
  .m-back-btn {
    color: #1E3985;
  }
  .m-back-btn:hover {
    background: rgba(30,57,133,.12);
    color: #1E3985;
  }

  /* Bouton dark mode dans la bottom bar */
  .m-tab.js-toggle-theme {
    position: relative;
  }
  .m-tab.js-toggle-theme .theme-text {
    transition: opacity .2s ease;
  }
  
  /* État actif du dark mode */
  [data-theme="dark"] .m-tab.js-toggle-theme i,
  body.m-dark .m-tab.js-toggle-theme i {
    color: #ffc107;
  }
  [data-theme="dark"] .m-tab.js-toggle-theme::after,
  body.m-dark .m-tab.js-toggle-theme::after {
    content: "🌙";
    position: absolute;
    top: 0;
    right: 0;
    font-size: .6rem;
    opacity: .7;
  }
}

/* Masquer bottom bar sur tablette/desktop */
@media (min-width: 768px){ .m-bottombar { display:none !important; } }

/* Mode sombre pour mobile */
@media (max-width: 767px) {
  [data-theme="dark"] .m-topbar,
  body.m-dark .m-topbar {
    background: #1c1e23;
    border-bottom-color: #333842;
  }

  [data-theme="dark"] .m-site-title,
  body.m-dark .m-site-title {
    color: #4ea99f;
  }

  [data-theme="dark"] .m-logo-circular,
  body.m-dark .m-logo-circular {
    border-color: #4ea99f;
    background: #1c1e23;
  }

  [data-theme="dark"] .logo-fallback,
  body.m-dark .logo-fallback {
    color: #4ea99f;
  }

  [data-theme="dark"] .m-drawer,
  body.m-dark .m-drawer {
    background: #1c1e23;
  }

  [data-theme="dark"] .m-head,
  body.m-dark .m-head {
    background: #1c1e23;
    border-bottom-color: #333842;
    color: #f2f2f2;
  }

  [data-theme="dark"] .m-bottombar,
  body.m-dark .m-bottombar {
    background: #1c1e23;
    border-top-color: #333842;
    color: #f2f2f2;
  }

  /* Effets de survol en mode sombre */
  [data-theme="dark"] .m-tab:hover,
  [data-theme="dark"] .m-tab:focus,
  body.m-dark .m-tab:hover,
  body.m-dark .m-tab:focus {
    background: rgba(78,169,159,.15);
    color: #4ea99f;
  }

  [data-theme="dark"] .m-tab:active,
  body.m-dark .m-tab:active {
    background: rgba(78,169,159,.25);
  }

  /* Bouton retour en mode sombre */
  [data-theme="dark"] .m-back-btn,
  body.m-dark .m-back-btn {
    color: #4ea99f;
  }
  [data-theme="dark"] .m-back-btn:hover,
  body.m-dark .m-back-btn:hover {
    background: rgba(78,169,159,.2);
    color: #4ea99f;
  }
}

.m-share-mini{display:flex;align-items:center;gap:.4rem}
.m-share-btn{display:inline-flex;align-items:center;gap:.35rem;
  padding:.35rem .6rem;border:1px solid #e7e3da;border-radius:10px;
  background:#fff;color:inherit;text-decoration:none;font-size:.9rem}
.m-share-btn i{font-size:1rem}