/* ============================================================
   TOUITIGROUP — guide.css
   Guide des matériaux (/fr/materiaux/guide/…) — chargé UNIQUEMENT
   par les pages du guide, après service.css.
   Réutilise service.css : service-hero, breadcrumb, prose, callout,
   faq, service-cards, tg-btn, tg-section.
   Ajoute seulement : mise en page article + sommaire (sticky sur
   desktop), encadré « En bref », schéma SVG, catégories et cartes
   « à paraître » du hub, navigation précédent / suivant.
   Couleurs : variables de tokens.css uniquement.
   RTL : propriétés logiques uniquement (inline-start / inline-end).
   ============================================================ */

/* ============================================================
   1. MISE EN PAGE ARTICLE + SOMMAIRE
   <div class="container guide-layout">
     <nav class="guide-toc" aria-label="Sommaire">
       <p class="guide-toc__title">Sommaire</p>
       <ol><li><a href="#…">…</a></li></ol>
     </nav>
     <article class="guide-article">…</article>
   </div>
   Mobile : le sommaire précède l'article. Desktop (≥ 1024px) :
   sommaire en colonne, collé sous la navbar pendant la lecture.
   ============================================================ */
.guide-layout {
  display: grid;
  gap: var(--tg-space-xl);
  max-width: var(--tg-container-max);
}

.guide-toc {
  padding: var(--tg-space-lg);
  background: var(--tg-color-dark-2);
  border: 1px solid var(--tg-color-border);
  border-radius: var(--tg-radius-sm);
}
.guide-toc__title {
  margin: 0 0 var(--tg-space-sm);
  font-size: var(--tg-text-xs);
  font-weight: var(--tg-weight-semibold);
  letter-spacing: var(--tg-tracking-wider);
  text-transform: uppercase;
  color: var(--tg-color-gold);
}
.guide-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: guide-toc;
}
.guide-toc li { counter-increment: guide-toc; }
.guide-toc a {
  display: flex;
  gap: var(--tg-space-sm);
  padding-block: 0.4375rem;
  padding-inline-start: var(--tg-space-sm);
  border-inline-start: 2px solid transparent;
  font-size: var(--tg-text-sm);
  line-height: 1.5;
  color: var(--tg-color-text-muted);
  text-decoration: none;
  transition: color var(--tg-duration), border-color var(--tg-duration);
}
.guide-toc a::before {
  content: counter(guide-toc, decimal-leading-zero);
  flex-shrink: 0;
  padding-top: 0.125rem;
  font-size: var(--tg-text-xs);
  font-weight: var(--tg-weight-semibold);
  color: var(--tg-color-gold);
}
.guide-toc a:hover,
.guide-toc a:focus-visible {
  color: var(--tg-color-text);
  border-inline-start-color: var(--tg-color-gold);
}

.guide-article { min-width: 0; }

@media (min-width: 1024px) {
  .guide-layout {
    grid-template-columns: 15rem minmax(0, var(--tg-prose-max));
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  .guide-toc {
    position: sticky;
    top: calc(var(--tg-nav-h) + var(--tg-space-lg));
  }
}

/* ============================================================
   2. ENCADRÉ « EN BREF » (variante du callout de service.css)
   <div class="callout callout--highlight">
     <p class="callout__label">En bref</p>
     <p>Définition courte…</p>
   </div>
   ============================================================ */
.callout--highlight {
  margin-top: 0;
  background: var(--tg-color-dark-2);
  border: 1px solid var(--tg-color-border-strong);
  border-inline-start: 3px solid var(--tg-color-gold);
  border-radius: var(--tg-radius-sm);
}
.callout--highlight .callout__label {
  margin-bottom: var(--tg-space-xs);
  font-size: var(--tg-text-xs);
  font-weight: var(--tg-weight-semibold);
  letter-spacing: var(--tg-tracking-wider);
  text-transform: uppercase;
  color: var(--tg-color-gold);
}
.callout--highlight p:not(.callout__label) {
  font-size: var(--tg-text-base);
  line-height: 1.8;
  color: var(--tg-color-text);
}

/* ============================================================
   3. SCHÉMA SVG
   <figure class="guide-figure">  (un ou plusieurs <svg>, dans .guide-figure__panels)
     <svg role="img" aria-labelledby="…">…</svg>
     <figcaption>…</figcaption>
   </figure>
   Couleurs du dessin par classes (.guide-svg__*), jamais en dur.
   ============================================================ */
.guide-figure {
  margin: var(--tg-space-xl) 0 0;
  padding: var(--tg-space-lg);
  background: var(--tg-color-dark-2);
  border: 1px solid var(--tg-color-border);
  border-radius: var(--tg-radius-sm);
}
.guide-figure svg {
  display: block;
  width: 100%;
  height: auto;
}
/* Plusieurs schémas : empilés sur mobile (légendes lisibles), côte à côte dès 640px */
.guide-figure__panels {
  display: grid;
  gap: var(--tg-space-lg);
}
.guide-figure__panels svg { max-width: 22.5rem; margin-inline: auto; }
@media (min-width: 640px) {
  .guide-figure__panels { grid-template-columns: 1fr 1fr; }
}
.guide-figure figcaption {
  margin-top: var(--tg-space-md);
  font-size: var(--tg-text-xs);
  line-height: 1.6;
  text-align: center;
  color: var(--tg-color-text-subtle);
}

.guide-svg__wall { fill: var(--tg-color-dark); stroke: var(--tg-color-border-strong); }
.guide-svg__hatch { stroke: var(--tg-color-border-strong); }
.guide-svg__layer-1 { fill: var(--tg-color-gold); fill-opacity: 0.22; }
.guide-svg__layer-2 { fill: var(--tg-color-gold); fill-opacity: 0.42; }
.guide-svg__layer-3 { fill: var(--tg-color-gold); fill-opacity: 0.68; }
.guide-svg__mono { fill: var(--tg-color-gold); fill-opacity: 0.55; }
.guide-svg__texture { fill: none; stroke: var(--tg-color-gold); stroke-width: 1.5; }
.guide-svg__line { stroke: var(--tg-color-text-subtle); stroke-width: 1; }
.guide-svg__label { fill: var(--tg-color-text); font-family: var(--tg-font-body); font-size: 13px; }
.guide-svg__title {
  fill: var(--tg-color-gold);
  font-family: var(--tg-font-body);
  font-size: 12px;
  font-weight: var(--tg-weight-semibold);
  letter-spacing: 0.12em;
}

/* ============================================================
   4. HUB — catégories + cartes (réutilise .service-cards / .service-card)
   <div class="guide-cat" id="…">
     <h2 class="guide-cat__title"><span class="guide-cat__num">01</span>…</h2>
     <p class="guide-cat__text">…</p>
     <div class="service-cards">
       <a class="service-card guide-card" href="…">…</a>
       <div class="service-card guide-card guide-card--soon">…
         <span class="guide-card__status">À paraître</span></div>
     </div>
   </div>
   ============================================================ */
.guide-cat + .guide-cat {
  margin-top: var(--tg-space-2xl);
  padding-top: var(--tg-space-2xl);
  border-top: 1px solid var(--tg-color-border);
}
.guide-cat__title {
  display: flex;
  align-items: baseline;
  gap: var(--tg-space-md);
  margin-bottom: var(--tg-space-sm);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}
.guide-cat__num {
  font-size: var(--tg-text-sm);
  font-weight: var(--tg-weight-semibold);
  letter-spacing: 0.12em;
  color: var(--tg-color-gold);
}
.guide-cat__text {
  max-width: var(--tg-prose-max);
  margin-bottom: var(--tg-space-lg);
  color: var(--tg-color-text-muted);
}

.guide-card .service-card__title { font-size: 1.1875rem; }

.guide-card--soon { opacity: 0.62; }
.guide-card--soon:hover {
  transform: none;
  border-color: var(--service-border);
  box-shadow: none;
}
.guide-card__status {
  align-self: flex-start;
  margin-top: var(--tg-space-md);
  padding: 0.25rem 0.75rem;
  font-size: var(--tg-text-xs);
  font-weight: var(--tg-weight-medium);
  color: var(--tg-color-text-muted);
  border: 1px solid var(--tg-color-border-strong);
  border-radius: var(--tg-radius-full);
}

/* Liens « services associés » en bas de fiche */
.guide-related { margin-top: var(--tg-space-lg); }

/* ============================================================
   5. NAVIGATION PRÉCÉDENT / SUIVANT
   <nav class="guide-pager" aria-label="Autres fiches du guide">
     <a class="guide-pager__link guide-pager__link--prev" href="…">
       <span class="guide-pager__dir">Précédent</span>
       <span class="guide-pager__title">…</span></a>
     <span class="guide-pager__link guide-pager__link--next guide-pager__link--soon">…</span>
   </nav>
   Une fiche pas encore publiée = <span> (pas de lien vers une page inexistante).
   ============================================================ */
.guide-pager {
  display: grid;
  gap: var(--tg-space-md);
  margin-top: var(--tg-space-2xl);
  padding-top: var(--tg-space-xl);
  border-top: 1px solid var(--tg-color-border);
}
.guide-pager__link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--tg-space-md) var(--tg-space-lg);
  border: 1px solid var(--tg-color-border);
  border-radius: var(--tg-radius-sm);
  color: var(--tg-color-text);
  text-decoration: none;
  transition: border-color var(--tg-duration), background-color var(--tg-duration);
}
a.guide-pager__link:hover,
a.guide-pager__link:focus-visible {
  border-color: var(--tg-color-gold);
  background: var(--tg-color-gold-light);
}
.guide-pager__link--next { text-align: end; }
.guide-pager__link--soon { opacity: 0.55; }
.guide-pager__dir {
  font-size: var(--tg-text-xs);
  font-weight: var(--tg-weight-semibold);
  letter-spacing: var(--tg-tracking-wider);
  text-transform: uppercase;
  color: var(--tg-color-gold);
}
.guide-pager__title { font-weight: var(--tg-weight-semibold); }

@media (min-width: 640px) {
  .guide-pager { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   6. ARABE (pour la future version AR) : pas de capitales forcées
   ============================================================ */
:lang(ar) .guide-toc__title,
:lang(ar) .callout--highlight .callout__label,
:lang(ar) .guide-pager__dir { text-transform: none; letter-spacing: 0; font-size: var(--tg-text-sm); }