/* =======================================================
   Feuille de style nettoyée (règles effectives)
   — doublons supprimés, patches fusionnés —
   Dernière mise à jour : 2025‑09‑11
======================================================= */

/* =======================================================
   0) TOKENS + GLASS
======================================================= */
:root{
  /* base */
  --primary-color:#0A0A0A;
  --secondary-color:#6EEB83;
  --background-color:#0A0A0A;
  --surface-color:#121212;
  --card-color:#161616;
  --text-color:#F0F0F0;
  --muted:#cfcfcf;
  --border:#232323;
  --radius:12px;
  --tap:48px;
  --space-1:.25rem;  --space-2:.5rem;  --space-3:.75rem;  --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-7:2rem;
  --thumb-w: 200px;
  --sticky-offset: 72px;

  /* glass */
  --glass-bg: rgba(15,22,20,.55);
  --glass-solid: #121917;
  --glass-border: rgba(255,255,255,.06);
  --glass-shadow: 0 10px 30px rgba(0,0,0,.45);
  --glass-glow: 0 0 0 transparent, 0 0 18px rgba(0,255,136,.25), inset 0 0 0 1px rgba(0,255,136,.15);
  --glass-glow-hover: 0 0 26px rgba(0,255,136,.45), inset 0 0 0 1px rgba(0,255,136,.4);
}

/* =======================================================
   1) RESET + BASE + UTILITAIRES
======================================================= */
*{ box-sizing:border-box; }
html,body{ height:100%; max-width:100%; overflow-x:hidden; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
  font-size:16px; line-height:1.5; color:var(--text-color);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(0,255,136,.07), transparent 60%),
    radial-gradient(1000px 500px at 100% 0%, rgba(0,255,136,.08), transparent 55%),
    linear-gradient(180deg, #0b0f10 0%, #0a0d0e 100%);
  -webkit-tap-highlight-color:transparent;
}
img, video, canvas{ max-width:100%; height:auto; display:block; }
a, a:visited{ color:var(--secondary-color); text-decoration:none; transition:color .2s ease; }
a:hover, a:focus{ color:var(--text-color); }
:focus-visible{ outline:2px solid var(--secondary-color); outline-offset:2px; }
.hidden{ display:none !important; }
.row{ display:flex; gap:var(--space-2); align-items:center; }
.pill{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.2rem .5rem; border:1px solid var(--glass-border);
  border-radius:999px; font-size:.9rem; color:#ddd; background:rgba(20,20,20,.6);
  -webkit-backdrop-filter:saturate(140%) blur(8px); backdrop-filter:saturate(140%) blur(8px);
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* =======================================================
   2) HEADER (verre)
======================================================= */
header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:var(--space-3);
  padding:max(var(--space-3), env(safe-area-inset-top)) var(--space-4) var(--space-3);
  background:linear-gradient(0deg, rgba(17,17,17,.75), rgba(23,23,23,.85));
  border-bottom:1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(10px) saturate(130%); backdrop-filter: blur(10px) saturate(130%);
}
header img.logo{
  height:40px; width:auto; max-width:100%; object-fit:contain;
}
header h1{ margin:0; font-weight:800; letter-spacing:.3px; font-size:1.1rem; color:var(--secondary-color); text-transform:uppercase; }
header .spacer{ flex:1; }

/* =======================================================
   3) LAYOUT (grid mobile d’abord)
======================================================= */
.page{
  max-width:1200px;
  margin:var(--space-4) auto;
  padding:0 var(--space-4) var(--space-6);
  display:grid; gap:var(--space-4);
  grid-template-columns:1fr;
  overflow-x:clip;
}

aside, main, .right, #detailView{
  background:var(--glass-solid);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:var(--space-4);
  box-shadow:var(--glass-shadow);
}
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)){
  aside, main, .right, #detailView{
    background:var(--glass-bg);
    -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%);
  }
}

.shop h2,.events h2,.articles h2,.connect h2,.tools h2,.rooms h2{
  font-weight:800; text-transform:uppercase; font-size:1rem;
  padding-bottom:.35rem; border-bottom:2px solid var(--secondary-color); margin-bottom:.75rem;
}

#detailView{ grid-column:1; scroll-margin-top:var(--sticky-offset); background:#152017; }
main, .events, .articles, #detailView{ min-width:0; }
#shopSection, #eventsSection, #blogSection{ scroll-margin-top:var(--sticky-offset); }

/* Desktop : 3 colonnes + blog full row */
@media (min-width:1040px){
  .page{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows:auto;
    grid-template-areas:
      "shop  events right"
      "blog  blog   blog";
    align-items:stretch;
  }
  main{ display:contents; }
  #shopSection{ grid-area:shop; }
  #eventsSection{ grid-area:events; }
  .right{ grid-area:right; }
  #blogSection{ grid-area:blog; margin-top:0; }

  /* Colonnes rangée 1 : même hauteur visible, scroll interne */
  #shopSection, #eventsSection, .right{
    display:flex; flex-direction:column;
    min-height:0; overflow:hidden;           /* scroller à l’intérieur */
    max-height: var(--row1-max-h, 72vh);     /* hauteur harmonisée */
  }

  /* Colonne de droite : scroll vertical interne si contenu long */
  .right{ overflow:auto; }
}

/* Pleine largeur écran large pour la page principale */
@media (min-width:1040px){
  .page{
    max-width:100vw; padding-left:clamp(16px,3vw,40px); padding-right:clamp(16px,3vw,40px);
  }
}

/* =======================================================
   4) FOOTER
======================================================= */
footer{
  text-align:center; font-size:.75rem; color:var(--muted);
  padding:1rem 0 calc(1rem + env(safe-area-inset-bottom,0px));
  background:none; border:none;
}
footer a, footer a:visited { color:var(--muted); text-decoration:none; font-size:.7rem; }
footer a:hover, footer a:focus{ color:var(--secondary-color); }

/* =======================================================
   5) BOUTONS & ÉTATS
======================================================= */
.button-green, #authStatusBtn, .room-btn, .tool, .attachment{
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:var(--tap); padding:.55rem .9rem;
  border-radius:var(--radius); border:1px solid rgba(0,255,136,.35);
  background:linear-gradient(135deg, rgba(0,255,136,.18), rgba(0,0,0,0));
  color:var(--text-color); font-weight:700; cursor:pointer;
  box-shadow:var(--glass-glow);
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.button-green:hover{ transform:translateY(-1px); box-shadow:var(--glass-glow-hover); }
#authStatusBtn{ background:rgba(12,18,16,.6); border:1px solid var(--glass-border); }
.status-dot{ width:10px; height:10px; border-radius:50%; box-shadow:0 0 0 2px #000 inset; }
.status-online{ background:var(--secondary-color); } .status-offline{ background:#e74c3c; } .status-unknown{ background:#999; }
.tool, .attachment{ background:rgba(20,20,20,.6); border-color:var(--glass-border); }

/* =======================================================
   6) CARTES (Shop / Events / Blog — base)
======================================================= */
.product{
  display:flex; gap:.75rem; background:rgba(6,10,9,.6);
  border-radius:12px; padding:.75rem; border:1px solid var(--glass-border); margin-bottom:.75rem;
  align-items:flex-start; box-shadow:var(--glass-shadow);
}
.product > div:not(.thumb){ min-width:0; overflow-wrap:anywhere; word-break:break-word; }
.product .name{ font-weight:700; }
.product .price{ color:var(--muted); font-size:.95rem; }

@media (max-width:768px){ :root{ --thumb-w:min(38vw, 200px); } }
.thumb{ flex:0 0 var(--thumb-w); width:var(--thumb-w); max-width:var(--thumb-w); }
.articles .article .thumb, .events .article .thumb, .product .thumb{ flex:0 0 var(--thumb-w); width:var(--thumb-w); max-width:var(--thumb-w); }

/* Blog — carte image + overlay glass */
.articles .article{
  position: relative;
  display: block;
  min-height: clamp(220px, 36vw, 360px);
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: transparent;
  box-shadow: var(--glass-shadow);
}
.articles .article .thumb{ position:absolute; inset:0; width:100%; max-width:none; pointer-events:none; }
/* Règle finale effective pour l'image de couverture du blog */
.articles .article .thumb img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;            /* choix final (dézoomer légèrement) */
  object-position:right top;
  border-radius:12px;
  transform:scale(0.92);
  transition: transform .45s ease, filter .45s ease;
  filter:saturate(110%) contrast(1.05);
}
.articles .article::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 100% 0%, rgba(0,255,136,.14), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.55) 80%);
  -webkit-mask-image: radial-gradient(140% 120% at 50% 50%, #000 65%, rgba(0,0,0,.35) 85%, transparent 100%);
          mask-image: radial-gradient(140% 120% at 50% 50%, #000 65%, rgba(0,0,0,.35) 85%, transparent 100%);
}
.articles .article > div:not(.thumb){
  position: absolute;
  left: clamp(12px, 2vw, 20px);
  right: clamp(12px, 2vw, 20px);
  bottom: clamp(12px, 2vw, 20px);
  max-width: min(920px, 80%);
  padding: clamp(.8rem, 1.4vw, 1.1rem) clamp(.9rem, 1.6vw, 1.25rem);
  border-radius:14px;
  color:var(--text-color);
  border:1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(10,16,14,.55), rgba(10,16,14,.72));
  box-shadow: var(--glass-glow), 0 10px 26px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
          backdrop-filter: blur(14px) saturate(150%);
}
.articles .article h3{ margin:0 0 .25rem 0; font-size:clamp(1rem, 1.6vw, 1.15rem); line-height:1.25; text-shadow:0 2px 12px rgba(0,0,0,.45); }
.articles .article p{ margin:0; color:#e5f7ee; opacity:.9; }
.articles .article:hover .thumb img{ transform:scale(1.0); filter:saturate(115%) contrast(1.08); }

/* Cartes génériques (events + shop + blog list items) */
.articles .article,
.events .article{
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.6rem; border-radius:10px; border:1px solid var(--glass-border); margin-bottom:.6rem;
  background:rgba(21,21,21,.6); cursor:pointer; box-shadow:var(--glass-shadow);
}
.product:hover, .articles .article:hover, .events .article:hover{
  box-shadow:0 14px 34px rgba(0,0,0,.55); transform:translateY(-1px);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Desktop carrousels */
@media (min-width:1040px){
  #shopSection > h2{ margin-bottom:.75rem; }
  #shopList{
    display:flex; gap:.75rem; flex:1; min-height:0; overflow-x:auto; overflow-y:hidden; padding-bottom:.25rem;
    scroll-snap-type:x proximity; overscroll-behavior-inline:contain;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
            mask-image:linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  .shop .product{ flex-direction:column; min-width:340px; max-width:380px; margin:0; scroll-snap-align:start; }
  .shop .product .thumb{ width:100%; max-width:100%; }
  .shop .product .thumb img{ width:100%; height:200px; object-fit:contain; }

  #eventsList{ flex:1; min-height:0; overflow-x:auto; overflow-y:hidden; padding-bottom:.25rem; scroll-snap-type:x proximity; }
  #eventsList .article{ min-width:360px; scroll-snap-align:start; }
}

/* Blog grilles larges */
@media (min-width: 1200px){
  #blogList{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--space-5); align-items:stretch; }
  .articles .article{ min-height:clamp(280px, 32vw, 420px); }
  #blogMore{ grid-column:1 / -1; justify-self:stretch; }
}
@media (min-width:1600px){ #blogList{ gap:var(--space-6); } }

/* Masquer les résumés trop longs en très petit écran */
@media (max-width:640px){ .articles .article p{ display:none; } }

/* =======================================================
   7) ÉVÉNEMENTS (ticker désactivé)
======================================================= */
#eventsTicker{ display:none; }

/* =======================================================
   8) BARRE D’ONGLETS MOBILE (désactivée partout)
======================================================= */
#appTabbar{ display:none; }

/* =======================================================
   9) MODALES — Connexion + Chat (verre)
======================================================= */
/* Conteneurs */
#authModal, #chatModal{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; }
#authModal.hidden, #chatModal.hidden{ display:none !important; }

/* Overlays */
#authModal .overlay, #chatModal .overlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,.62);
  -webkit-backdrop-filter: blur(8px) saturate(130%); backdrop-filter: blur(8px) saturate(130%);
}

/* Fenêtres */
#authModal .content, #chatModal .chatbox{
  position:relative; z-index:1;
  border:1px solid var(--glass-border); border-radius:16px;
  background:linear-gradient(180deg, rgba(16,18,17,.62), rgba(14,16,15,.78));
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: var(--glass-shadow), var(--glass-glow);
  display:flex; flex-direction:column; overflow:hidden;
}

/* Auth : plein écran (patch final) */
#authModal{ place-items:stretch; }
#authModal .content{
  width:100vw; height:100svh; height:100dvh; max-width:none; max-height:none; margin:0;
  border-radius:0;
}
#authModal .content iframe#persoIframe{
  flex:1 1 auto; width:100%; height:100%; min-height:0; border:0; background:#0f0f0f;
}

/* Chat : taille confortable */
#chatModal .chatbox{ width:min(840px, 98vw); max-height:calc(100svh - 2rem); }

/* Header du chat */
.chat-header{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.6rem 1rem;
  background:rgba(26,26,26,.7); border-bottom:1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(8px) saturate(130%); backdrop-filter: blur(8px) saturate(130%);
}

/* Boutons de fermeture */
#authModal .content .close,
#chatModal .chatbox .close{
  position:absolute; top:.35rem; right:.5rem;
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:999px; border:1px solid var(--glass-border);
  background:rgba(20,20,20,.6); color:#ddd; font-size:1.2rem; cursor:pointer;
  touch-action:manipulation;
}
#authModal .content .close:hover,
#chatModal .chatbox .close:hover{ box-shadow:var(--glass-glow-hover); }

/* Corps du chat */
#chatModal .messages{
  flex:1; overflow-y:auto; padding:1rem; padding-bottom:max(1rem, env(safe-area-inset-bottom,0px));
  display:flex; flex-direction:column; gap:.5rem; -webkit-overflow-scrolling:touch;
}
.message{ padding:.55rem .75rem; border-radius:10px; max-width:85%; }
.message.me{ background:var(--secondary-color); color:#000; align-self:flex-end; }
.message.other{ background:#222; color:#fff; align-self:flex-start; }
.msg-header{ font-size:.8rem; opacity:.8; margin-bottom:.15rem; }
.msg-quote{ border-left:3px solid var(--secondary-color); background:rgba(20,20,20,.6); padding:.35rem .5rem; border-radius:6px; margin-bottom:.35rem; font-size:.9rem; color:#e6e6e6; }
.msg-actions{ display:flex; gap:.35rem; margin-top:.35rem; align-items:center; flex-wrap:wrap; }
.emoji-picker{ display:flex; gap:.25rem; background:rgba(18,18,18,.6); border:1px solid var(--glass-border); border-radius:999px; padding:.25rem .4rem; }
.reaction-chip{ background:rgba(31,31,31,.52); border:1px solid var(--glass-border); border-radius:999px; padding:.1rem .45rem; font-size:.85rem; cursor:pointer; }

/* Preview image avant envoi */
.preview-wrap{ display:flex; align-items:center; gap:.6rem; border-top:1px solid var(--glass-border); border-bottom:1px solid var(--glass-border); background:rgba(22,22,22,.55); padding:.45rem .6rem; }
.preview-img{ width:52px; height:52px; object-fit:cover; border-radius:8px; border:1px solid var(--glass-border); }
.preview-remove{ background:none; border:1px solid #2a2a2a; color:#bbb; border-radius:8px; padding:.25rem .6rem; cursor:pointer; }

/* Formulaire du chat */
.chat-form{ display:flex; gap:.25rem; border-top:1px solid var(--glass-border); background:rgba(20,20,20,.55); padding:.35rem; padding-bottom:calc(.35rem + env(safe-area-inset-bottom,0px)); }
.chat-form input[type="text"]{ flex:1; padding:.75rem .85rem; border:none; background:#1a1a1a; color:#fff; border-radius:10px; font-size:1rem; }
.chat-form button{ min-width:var(--tap); min-height:var(--tap); background:none; border:1px solid #2a2a2a; color:#2bd46f; border-radius:10px; font-size:1.1rem; padding:.25rem .6rem; cursor:pointer; }

/* État page quand modale ouverte */
body.has-modal { overflow:hidden; }

/* =======================================================
   10) HERO (section d’accueil)
======================================================= */
#heroSection{
  display:none; position:relative; overflow:hidden;
  border-radius:var(--radius); border:1px solid var(--glass-border);
  min-height:clamp(340px,60vh,700px);
  background:#0f0f0f;
}
#heroSection .bg{ position:absolute; inset:0; background-size:cover; background-position:center; filter:contrast(1.05) saturate(1.1) brightness(.9); transform:scale(1.04); }
#heroSection .veil{ position:absolute; inset:0; background: radial-gradient(1200px 600px at 100% 0%, rgba(0,255,136,.18), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.62) 85%); }
#heroSection .inner{ position:relative; z-index:1; max-width:1000px; padding:clamp(20px, 4vw, 48px); }
#heroSection h2{ margin:0 0 .35rem; font-size:clamp(1.6rem, 3.6vw, 2.4rem); letter-spacing:.3px; }
#heroSection p{ max-width:70ch; opacity:.9; font-size:clamp(1rem, 1.2vw, 1.1rem); }

/* Cartes héro */
.hero-card{ position:relative; overflow:hidden; border-radius:12px; min-height:320px; }
.hero-card .bg{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.02); }
.hero-card .veil{ position:absolute; inset:0; background:rgba(0,0,0,.35); }
.hero-card .inner{ position:relative; z-index:1; padding:1.25rem; color:#fff; display:grid; gap:.75rem; }

@media (min-width:1040px){
  /* Hero pleine largeur */
  #heroSection{ grid-column:1 / -1; width:100vw; margin-left:calc(-1 * var(--space-4)); margin-right:calc(-1 * var(--space-4)); border-radius:0; min-height:clamp(420px, 65vh, 720px); }
  #heroSection .inner{ max-width:1100px; margin:0 auto; text-align:center; }
}

/* Modes d’affichage (toutes largeurs) */
body.mode-hero   #heroSection{ display:grid; }
body.mode-hero   main, body.mode-hero aside.shop, body.mode-hero .right{ display:none !important; }

body.mode-blog   #blogSection{ display:block !important; }
body.mode-blog   #heroSection, body.mode-blog .events, body.mode-blog .shop, body.mode-blog .right{ display:none !important; }
body.mode-blog   .page{ grid-template-columns:1fr !important; }

body.mode-events #eventsSection{ display:block !important; }
body.mode-events #heroSection, body.mode-events #blogSection, body.mode-events .shop, body.mode-events .right{ display:none !important; }
body.mode-events .page{ grid-template-columns:1fr !important; }

body.mode-shop   .shop{ display:block !important; }
body.mode-shop   #heroSection, body.mode-shop   #eventsSection, body.mode-shop   #blogSection, body.mode-shop   .right{ display:none !important; }
body.mode-shop   .page{ grid-template-columns:1fr !important; }

body.mode-right  .right{ display:block !important; }
body.mode-right  #heroSection, body.mode-right main, body.mode-right .shop{ display:none !important; }

/* Lorsqu’un article est ouvert */
body.has-detail .page{
  grid-template-columns: 1fr minmax(320px, 420px);
  grid-template-areas: "detail right";
}
body.has-detail main,
body.has-detail #shopSection,
body.has-detail #eventsSection,
body.has-detail #blogSection{ display:none !important; }
body.has-detail #detailView{ display:block !important; grid-area:detail; margin:0; min-height:calc(100vh - var(--sticky-offset)); overflow:auto; }
body.has-detail .right{ grid-area:right; overflow:auto; }
body.has-detail #sectionSubnav{ display:none !important; }

/* Sous-navigation sticky (mobile & desktop) */
.subnav{
  position:sticky; top:calc(var(--sticky-offset, 56px)); z-index:9;
  display:flex; gap:.5rem; align-items:center;
  padding:.6rem clamp(12px, 4vw, 20px);
  background:rgba(16,16,16,.85);
  border-bottom:1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(8px) saturate(130%); backdrop-filter: blur(8px) saturate(130%);
}
.subnav .tab{
  display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .8rem;
  border-radius:999px; border:1px solid var(--glass-border);
  background:rgba(20,20,20,.6); color:#eaeaea; font-weight:700; cursor:pointer;
}
.subnav .tab.active{ color:#04150c; background:linear-gradient(135deg, var(--secondary-color), #baffdb); border-color:transparent; box-shadow:var(--glass-glow); }

/* Un peu d’air sous la sous-nav sur mobile */
@media (max-width:1039px){ .page{ margin-top:.5rem; } #sectionSubnav{ display:flex !important; } }

/* =======================================================
   11) ACCESSIBILITÉ / SÉCURITÉS MOBILE
======================================================= */
.page{ overflow-x:clip; }
@media (max-width:1039px){ #eventsList .article{ min-width:300px; } }

/* Empêche l’étirement des vignettes génériques en mobile */
@media (max-width:1040px){
  .events .article .thumb img,
  .product .thumb img,
  .product img{
    width:100%; height:auto; object-fit:contain; border-radius:8px;
  }
}

/* Liste d’événements en colonne sur petit écran (si .eventsList utilisée) */
@media (max-width:768px){ .eventsList{ flex-direction:column; overflow-x:visible; overflow-y:auto; } .eventsList > *{ min-width:100%; } }

/* Images dans le corps d’article */
.article-body{ overflow-x:hidden; }
.article-body img{ max-width:100%; width:100%; height:auto; object-fit:contain; display:block; }

/* Tableau d’info responsive dans article */
.article-body table{ width:100%; border-collapse:collapse; }
.article-body tr{ vertical-align:top; }
@media (max-width:600px){
  .article-body table, .article-body tbody, .article-body tr, .article-body td{ display:block; width:100%; }
  .article-body td{ padding:0 0 .75rem 0; box-sizing:border-box; overflow:hidden; }
  .article-body td:first-child{ margin:0 auto .75rem; max-width:260px; padding-right:0; text-align:center; }
  .article-body td:first-child img{ width:100%; max-width:100%; height:auto; object-fit:contain; object-position:center center; display:block; }
  .article-body td:last-child{ overflow-wrap:anywhere; word-break:break-word; }
}

/* =======================================================
   12) MISC
======================================================= */
/* Bouton d’installation (mini-FAB) */
.install-btn{
  display:none; position:fixed; right:1rem; bottom:calc(64px + env(safe-area-inset-bottom,0px) + 12px);
  width:52px; height:52px; border-radius:999px; border:1px solid rgba(0,255,136,.35);
  background:linear-gradient(135deg, rgba(0,255,136,.18), rgba(0,0,0,0)); color:#fff;
  font-size:22px; line-height:52px; text-align:center;
  box-shadow:0 10px 24px rgba(0,0,0,.45), 0 0 0 transparent, 0 0 18px rgba(0,255,136,.25), inset 0 0 0 1px rgba(0,255,136,.15);
  z-index:21;
}
@media (max-width:768px){ .install-btn{ display:block; } }
body.has-modal .install-btn, body.has-detail .install-btn{ display:none !important; }