:root{
  --og-font: "Raleway", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  --og-primary: #1b4887;
  --og-primary-dark: #153b70;
  --og-accent: #d32f2f;
  --og-text: #222;
  --og-muted: #6b7280;
  --og-border: #e5e7eb;
  --og-bg: #ffffff;
  --og-intro-bg: #f7f9fc;
  --og-hero-bg: #ffffff;
}
html{scroll-behavior:smooth}
body{font-family:var(--og-font);color:var(--og-text);line-height:1.55}

/* ===== HERO ===== */
.og-hero{background:var(--og-hero-bg);padding:24px 0 8px;text-align:center}
.og-hero-title{font-size:clamp(28px,4vw,40px);line-height:1.15;margin:0 0 6px;color:var(--og-primary);font-weight:800}
.og-hero-sub{font-size:clamp(16px,2.2vw,22px);color:var(--og-muted);margin:0 0 16px}
.og-hero-image img.og-hero-img{max-width:980px;width:100%;height:auto;display:inline-block}

/* ===== INTRO ===== */
.og-intro{background:var(--og-intro-bg);padding:24px 0}
.og-intro .og-wrap{max-width:1160px;margin:0 auto;padding:0 16px}
.og-intro .og-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:960px){ .og-intro .og-grid{grid-template-columns:420px 1fr} }
.og-intro-figure{margin:0 0 12px;text-align:center}
.og-intro-figure img{width:400px;max-width:100%;height:auto;display:inline-block}
.og-intro-figure figcaption{font-size:13px;color:var(--og-muted);margin-top:6px;text-align:center}

/* Specs entre image 1 et 2 */
.og-intro .og-intro-specs{display:block;margin:12px auto;text-align:center;text-decoration:none}
.og-intro .og-intro-specs img{width:120px;height:auto;display:inline-block}
.og-intro .og-intro-specs-label{display:block;margin-top:4px;font-size:12px;color:var(--og-muted)}

/* Rich text */
.og-intro .og-col-right .og-intro-rich h1,
.og-intro .og-col-right .og-intro-rich h2{color:var(--og-primary);font-weight:800;margin:0 0 .5rem}
.og-intro .og-col-right .og-intro-rich p{margin:0 0 .85rem}

/* ===== MOSAÏQUES ===== */
.og-mosaic{padding:24px 0}
.og-mosaic .og-wrap{max-width:1160px;margin:0 auto;padding:0 16px}
.og-mosaic-title{font-size:28px;margin:0 0 12px;color:var(--og-primary);font-weight:800;text-align:center}

/* 3 colonnes (1–2 empilées / 3 centrée / 4–5 empilées) */
.og-mosaic-grid{display:flex;gap:32px;justify-content:center;align-items:stretch;flex-wrap:wrap}
.og-mosaic-col{display:flex;flex-direction:column;gap:16px;align-items:center}
.og-mosaic-col.og-center-v{justify-content:center}
.og-mosaic-item{margin:0}
.og-mosaic-img{max-width:250px;width:100%;height:auto;display:block}
.og-mosaic-cap{font-size:12px;color:var(--og-muted);text-align:center;margin-top:6px}

/* Si 2 ou 3 images → pile verticale */
.og-layout-stack{flex-direction:column}
.og-layout-stack .og-mosaic-col{width:100%}

/* Responsive mosaics */
@media (max-width:1024px){ .og-mosaic-grid{gap:24px} }
@media (max-width:780px){ .og-mosaic-grid{flex-direction:column;align-items:center} }

/* === 2 images en mosaïque : 2 colonnes desktop, 1 colonne mobile === */
.og-layout-stack.og-count-2 {
  display: grid;                 /* override du flex par défaut */
  grid-template-columns: 1fr 1fr;
  gap: 32px;                     /* même écart que .og-mosaic-grid */
}

.og-layout-stack.og-count-2 .og-mosaic-item {
  width: 100%;
}

.og-layout-stack.og-count-2 .og-mosaic-img {
  max-width: none;               /* enlève la limite 250px */
  width: 100%;
  height: auto;
  display: block;
}

/* Mobile : empiler sur une colonne */
@media (max-width: 780px) {
  .og-layout-stack.og-count-2 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ===== HOW THEY WORK ===== */
.og-how-title {
  margin: 32px 0 16px;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.25;
  font-weight: 700;
}
/* ===== BODY / SECTIONS ===== */
.og-body{padding:24px 0}
.og-body .og-container{max-width:1160px;margin:0 auto;padding:0 16px;display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:start}
@media (max-width:900px){ .og-body .og-container{grid-template-columns:1fr} }

/* Side nav (skin conservée) */
.og-sidenav{position:sticky;top:calc(92px + 16px)}
.sidenav{list-style:none;margin:0;padding:0;border-left:4px solid var(--og-border)}
.sidenav li{margin:0}
.sidenav a{display:flex;justify-content:space-between;align-items:center;padding:12px 14px 12px 18px;text-decoration:none;border-left:4px solid transparent;line-height:1.25}
.sidenav li.is-active > a,
.sidenav li.ui-tabs-active > a{border-left-color:var(--og-primary);background:#eef5ff;font-weight:600}
.sidenav i{margin-left:8px}

/* Sections affichées comme des onglets (pas one-page) */
.og-sec{display:block}
.og-sec[hidden]{display:none}

/* Rangée de section :
   - avec image → 2 colonnes
   - sans image → 1 colonne plein large (classe .og-no-media posée par le PHP) */
.og-sec-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.og-sec-row.og-no-media{grid-template-columns:1fr}
.og-sec-row.og-left .og-sec-media{order:0}
.og-sec-row.og-left .og-sec-text{order:1}
.og-sec-row.og-right .og-sec-media{order:1}
.og-sec-row.og-right .og-sec-text{order:0}
@media (max-width:1024px){ .og-sec-row{grid-template-columns:1fr} }

.og-sec-media img{width:100%;height:auto;display:block}
.og-sec-cap{font-size:12px;color:var(--og-muted);margin-top:6px}
.og-sec-title{margin-top:0;font-size:clamp(22px,3vw,28px);color:var(--og-primary)}
.og-sec-rich p{margin:0 0 12px}

/* Gutenberg plein large dans la zone texte */
.og-main *[class*="wp-block"]{max-width:none}

/* Intro – colonnes gauche: img1 (400px), specs (120px), img2 (400px) */
.og-intro .og-col-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.og-intro .og-col-left .og-intro-img img {
  max-width: 400px;
  width: 100%;
  height: auto;
}

.og-intro .og-col-left .og-specs img {
  width: 120px;   /* largeur fixe */
  height: auto;
  display: block;
}

/* Optionnel: centrage des légendes */
.og-intro .og-intro-figure figcaption {
  text-align: center;
  font-size: 0.9rem;
  color: var(--og-muted);
}

/* ==== Video embed responsive 16:9 ==== */
.og-sec-video { margin-top: 16px; }
.og-video {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #000;
}
.og-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* Fallback anciens navigateurs sans aspect-ratio */
@supports not (aspect-ratio: 16/9) {
  .og-video { height: 0; padding-bottom: 56.25%; }
  .og-video iframe { position: absolute; left:0; top:0; width:100%; height:100%; }
}

/* Bouton mobile par défaut : caché sur desktop, stylé en blanc */
.og-sidenav-toggle {
  display: none; /* visible seulement en mobile, voir media query */
  width: 100%;
  padding: 9px 12px;
  border-radius: 6px;
  border: 1px solid var(--og-border);
  background: #fff;
  cursor: pointer;
  font: 600 14px/1.2 var(--og-font);
  
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.og-sidenav-toggle-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.og-sidenav-toggle-icon {
  font-size: 12px;
  transition: transform .2s ease;
}

.og-sidenav.is-open .og-sidenav-toggle-icon {
  transform: rotate(180deg);
}

@media (max-width: 900px) {
  .og-body .og-container{
    grid-template-columns: 1fr;
  }

  /* La colonne nav devient un bandeau sticky compact */
  .og-sidenav {
    position: sticky;
    top: 80px; /* ajuste si ton header est plus/moins haut */
    z-index: 20;
    background: #fff;
    padding: 8px 0;
  }

  /* Bouton visible en mobile */
  .og-sidenav-toggle {
    display: flex;
  }

  /* La liste des sections devient un petit menu déroulant */
  .og-sidenav .sidenav {
    display: none;
    margin-top: 6px;
    border-left: none;
    border-radius: 6px;
    border: 1px solid var(--og-border);
    box-shadow: 0 10px 25px rgba(15, 23, 42, .08);
    max-height: 60vh;
    overflow: auto;
    background: #fff;
  }

  /* Quand le wrapper a .is-open, on montre la liste */
  .og-sidenav.is-open .sidenav {
    display: block;
  }

  /* Style des liens dans le menu déroulant */
  .og-sidenav .sidenav a {
    padding: 10px 12px;
    border-left: 0;
    border-bottom: 1px solid var(--og-border);
  }

  .og-sidenav .sidenav li:last-child a {
    border-bottom: none;
  }

  .og-sidenav li.is-active > a,
  .og-sidenav li.ui-tabs-active > a,
  .og-sidenav li.ui-state-active > a {
    background: #eef5ff;
    font-weight: 600;
  }
}
@media (max-width: 900px) {
  .og-sidenav-toggle {
    display: flex;
  }
}
@media (min-width: 901px) {
  .og-sidenav-toggle {
    display: none !important;
  }
}
/* ===== TROUBLESHOOTING TABLE ===== */

.ogtr-table-wrap {
  margin-top: 24px;
  overflow-x: auto; /* au cas où sur petits écrans */
}

.ogtr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
  table-layout: fixed;          /* permet de contrôler les largeurs */
}

/* Répartition des colonnes : ~25% / 35% / 40% */
.ogtr-table thead th:nth-child(1),
.ogtr-table tbody td:nth-child(1) {
  width: 25%;
}

.ogtr-table thead th:nth-child(2),
.ogtr-table tbody td:nth-child(2) {
  width: 35%;
}

.ogtr-table thead th:nth-child(3),
.ogtr-table tbody td:nth-child(3) {
  width: 40%;
}

/* Forcer le retour à la ligne proprement dans les cellules longues */
.ogtr-table th,
.ogtr-table td {
  overflow-wrap: break-word;
}

/* En-têtes : pas de fond gris, juste une ligne plus marquée */
.ogtr-table thead th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 700;
  border-bottom: 2px solid var(--og-border);
  background: none;
}

/* Cellules */
.ogtr-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--og-border);
  vertical-align: top;
}

/* Dernière ligne plus légère */
.ogtr-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Liens éventuels dans le texte (Example) */
.ogtr-table a {
  color: var(--og-primary);
  text-decoration: underline;
}

/* ===== TROUBLESHOOTING TABLE – MOBILE STACK (v2) ===== */
@media (max-width: 720px) {

  .ogtr-table-wrap {
    overflow-x: visible;
  }

  /* Le tableau devient une pile de cartes */
  .ogtr-table,
  .ogtr-table thead,
  .ogtr-table tbody,
  .ogtr-table tr,
  .ogtr-table th,
  .ogtr-table td {
    display: block;
    width: 100%;
  }

  /* On cache l'en-tête (mais il reste présent pour l’accessibilité) */
  .ogtr-table thead {
    position: absolute;
    top: -9999px;
    left: -9999px;
    height: 1px;
    width: 1px;
    overflow: hidden;
  }

  /* Chaque ligne => une carte */
  .ogtr-table tbody tr {
    border: 1px solid var(--og-border);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: #fff;
  }

  .ogtr-table tbody td {
    border: 0;
    padding: 6px 0;
    /* plus de flex ici → le texte peut prendre toute la largeur */
    display: block;
    font-size: 14px;
  }

  /* Label au-dessus du texte, sur toute la largeur */
  .ogtr-table tbody td::before {
    display: block;
    margin-bottom: 2px;
    font-weight: 600;
    color: var(--og-muted);
    font-size: 13px;
    content: "";
  }

  /* Labels par colonne */
  .ogtr-table tbody td:nth-child(1)::before {
    content: "Potential problem";
  }
  .ogtr-table tbody td:nth-child(2)::before {
    content: "Possible reason";
  }
  .ogtr-table tbody td:nth-child(3)::before {
    content: "Solution";
  }

  /* Cas des lignes de continuité : cellule "problem" vide → on la masque */
  .ogtr-table tbody td:nth-child(1):empty {
    display: none;
  }
}

/* ===== RESPONSIVE TROUBLESHOOTING ===== */

/* Par défaut : on affiche le tableau, pas les cartes */
.ogtr-table-wrap--desktop {
  display: block;
}

.ogtr-cards {
  display: none;
}

/* Mobile : on masque le tableau et on affiche les cartes */
@media (max-width: 780px) {

  .ogtr-table-wrap--desktop {
    display: none;
  }

  .ogtr-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
  }

  .ogtr-card {
    border-radius: 10px;
    border: 1px solid var(--og-border);
    background: #fff;
    padding: 14px 16px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
  }

  .ogtr-card-label {
    margin: 0 0 3px;
    font-size: 13px;
    font-weight: 700;
    color: var(--og-muted);
  }

  .ogtr-card-text {
    margin: 0 0 10px;
    line-height: 1.6;
  }

  .ogtr-card-text:last-child {
    margin-bottom: 0;
  }
}