/* ==========================================================================
   style-commun.css — Symbolinks · Géo-numérologie
   --------------------------------------------------------------------------
   Version : v2026-05-13b
   Changelog :
     v2026-05-13b — Adoucissement palette .stele (brun chaud moyen au lieu de
                    presque-noir) — réduit le contraste violent avec le parchemin
     v2026-05-13  — Ajout classe .stele (encadré sombre pour calculs/formules clés)
                    Variantes : .stele__eq (calculs) · .stele__text (équivalences)
     v2026-05-12e — Ajout .bridge__header (en-tête bandeau service externe)
                    + overflow:hidden sur .bridge (clip propre des coins)
                    + responsive mobile sur le header
     v2026-05-12d — Signalisation transfert externe sur .bridge :
                    .bridge__service-badge (pastille gold "Service personnel")
                    .bridge__cta-hint (sous-texte explicatif italique)
                    .bridge__author (mention auteur EEAT en pied)
     v2026-05-12c — figcaption Schema.org : font-display → font-serif italic
                    (Cinzel rendait en capitales) + ink-muted → ink-soft
                    (plus foncé, plus lisible)
     v2026-05-12b — Style figcaption pour figures Schema.org (itemscope)
                    centré, italique Cinzel, gris-muted, espace après
                    + margin-bottom + text-align harmonisés sur
                      .col-figure et .figure-full
     v2026-05-12  — Ajout des variantes de répartition .two-columns
                    (col-40-60, col-60-40, col-33-66, col-66-33,
                     col-30-70, col-70-30, col-25-75, col-75-25)
                    + bascule mobile unifiée pour toutes les variantes
     v2026-05-08  — Border opacité passerelle .35 → .60
                    + retrait .site-footer conflictuel
                    + fix margin-top neuf-nombres
   ========================================================================== */

    :root {
      --parchment: #f9f6f0;
      --ink: #2a1f15;
      --ink-soft: #5a4a2a;
      --ink-muted: #8b7355;
      --gold: #d4a574;
      --gold-rich: #b8925a;
      --mystical-blue: #4a5f7a;
      --whisper: rgba(42, 31, 21, 0.05);
      --veil: rgba(42, 31, 21, 0.1);
      --shadow: rgba(42, 31, 21, 0.15);
      
      --font-serif: 'EB Garamond', Georgia, serif;
      --font-display: 'Cinzel', serif;
      --font-mono: 'Source Code Pro', monospace;
      
      --border-radius: 8px;
      --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* ═══════════════════════════════════════════════════════════════════
       LOGO SYMBOLINKS — SOURCE UNIQUE DE VÉRITÉ (v2026-05-09b)
       Toutes les règles du logo sont ici. NE PAS dupliquer ailleurs.
       Sélecteurs sans qualifieur de wrapper (.site-header/.site-footer)
       pour s'appliquer partout où le markup .site-logo* est utilisé,
       y compris dans la home dont le wrapper peut différer.
       !important sur les 3 règles critiques (uppercase + couleurs)
       pour battre toute règle locale ou héritage de fond noir.
       ═══════════════════════════════════════════════════════════════════ */

    /* — Conteneur logo (lien <a>) — */
    .site-logo {
      display: flex;
      align-items: center;
      gap: .7rem;
      text-decoration: none;
      flex-shrink: 0;
      font-family: 'Cinzel', Georgia, serif;
      font-weight: 400;
      font-size: 1.55rem;
      color: #f9f6f0;
    }

    /* — SVG mark (étoile à 6 branches) — */
    .site-logo__mark {
      width: 42px;
      height: 42px;
      flex-shrink: 0;
    }

    /* — Texte "SYMBO" : majuscules, clair, normal — */
    .site-logo__name {
      text-transform: uppercase !important;
      letter-spacing: .05em;
      font-weight: 400 !important;
      color: #f9f6f0 !important;
    }

    /* — "LINKS" : doré italique majuscule — */
    .site-logo em,
    .site-logo__name em,
    .site-logo__gold {
      color: #d4a574 !important;
      font-style: italic !important;
      text-transform: uppercase !important;
      font-weight: 400 !important;
    }

    /* — Footer logo SVG agrandi — */
    .site-footer .site-logo__mark,
    footer .site-logo__mark {
      width: 56px;
      height: 56px;
    }

    /* — Header scrolled (fond clair) — texte sombre — */
    .site-header.scrolled .site-logo,
    .site-header.scrolled .site-logo__name {
      color: #2a1f15 !important;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: var(--font-serif);
      background: var(--parchment);
      color: var(--ink);
      line-height: 1.7;
      font-size: 18px;
      overflow-x: hidden;
    }

    .site-header {
      background: rgba(249, 246, 240, 0.95);
      backdrop-filter: blur(20px);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      border-bottom: 1px solid var(--veil);
    }
    
    .header-content {
      max-width: 1400px;
      margin: 0 auto;
      padding: 1rem 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .site-logo {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: 1.5rem;
      color: var(--ink);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    
    .logo-mark {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--gold), var(--gold-rich));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      color: var(--parchment);
      font-weight: 600;
    }

    .nav-breadcrumb {
      font-family: var(--font-mono);
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--ink-muted);
    }

    main {
      margin-top: 80px;
      min-height: calc(100vh - 80px);
    }

    .container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 2rem;
    }

    .page-layout {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 4rem;
      margin-bottom: 6rem;
      align-items: start;
    }

    .page-hero {
      background: linear-gradient(135deg, 
        rgba(212, 165, 116, 0.03) 0%, 
        rgba(122, 132, 113, 0.02) 50%, 
        rgba(74, 95, 122, 0.03) 100%);
      padding: 4rem 0 6rem;
      margin-bottom: 4rem;
      position: relative;
      overflow: hidden;
    }

    .hero-content {
      text-align: center;
      max-width: 900px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }

    .hero-eyebrow {
      font-family: var(--font-mono);
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--ink-muted);
      margin-bottom: 1rem;
    }

    .hero-title {
      font-family: var(--font-display);
      font-size: 3.5rem;
      font-weight: 300;
      color: var(--ink);
      margin-bottom: 1.5rem;
      line-height: 1.1;
    }

    .hero-title em {
      font-style: italic;
      color: var(--gold-rich);
    }

    .hero-lead {
      font-size: 1.3rem;
      color: var(--ink-soft);
      margin-bottom: 3rem;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
    }

    .hero-badges {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
    }

    .figure-badge {
      background: var(--mystical-blue);
      color: white;
      padding: 0.5rem;
      border-radius: 50%;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
    }

    .nsi-badge {
      background: var(--gold);
      color: white;
      padding: 0.5rem;
      border-radius: 50%;
      font-size: 1.1rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
    }

    .nf-icon {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1rem;
    }

    .category-badge {
      background: #fdfcf9;
      color: var(--ink-soft);
      font-family: var(--font-serif);
      font-weight: 500;
      padding: 0.5rem 1.25rem;
      border-radius: 2rem;
      font-size: 1rem;
      border: 1px solid var(--veil);
    }

    .symbol-showcase {
      background: #fdfcf9;
      border-radius: var(--border-radius);
      padding: 3rem;
      box-shadow: 0 8px 32px var(--whisper);
      border: 1px solid var(--veil);
      margin-bottom: 2rem;
    }

    .animation-container {
      text-align: center;
    }

    .sequence-header {
      font-family: var(--font-display);
      font-size: 1rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--ink-muted);
      margin-bottom: 2rem;
    }

    .triangular-sequence {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      flex-wrap: wrap;
    }

    .tri-cell {
      display: flex;
      flex-direction: column;
      align-items: center;
      opacity: 1;
    }

    .tri-cell svg {
      margin-bottom: 0.75rem;
    }

    .tri-number {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 500;
      color: var(--ink);
      margin-bottom: 0.25rem;
    }

    .tri-label {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--ink-muted);
    }

    .tri-separator {
      font-size: 1rem;
      color: var(--gold);
      margin: 0 0.75rem;
      opacity: 0.7;
    }

    .content-main {
      min-width: 0;
    }

    .article-body {
      font-size: 1.1rem;
      line-height: 1.8;
    }

    .section-title {
      font-family: var(--font-display);
      font-size: 2rem;
      font-weight: 400;
      color: var(--ink);
      margin: 3rem 0 1.5rem 0;
    }

    .section-title:first-of-type {
      margin-top: 1rem;
    }

    .body-text {
      color: var(--ink-soft);
      margin-bottom: 1.5rem;
    }

    .body-text strong {
      color: var(--ink);
      font-weight: 500;
    }

    .body-text em {
      color: var(--gold-rich);
      font-style: italic;
    }

    .two-columns {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      margin: 2rem 0;
      align-items: start;
    }

    /* Variantes de répartition des colonnes — ratios fixes (v2026-05-12) */
    .two-columns.col-40-60 { grid-template-columns: 2fr 3fr; }
    .two-columns.col-60-40 { grid-template-columns: 3fr 2fr; }
    .two-columns.col-33-66 { grid-template-columns: 1fr 2fr; }
    .two-columns.col-66-33 { grid-template-columns: 2fr 1fr; }
    .two-columns.col-30-70 { grid-template-columns: 3fr 7fr; }
    .two-columns.col-70-30 { grid-template-columns: 7fr 3fr; }
    .two-columns.col-25-75 { grid-template-columns: 1fr 3fr; }
    .two-columns.col-75-25 { grid-template-columns: 3fr 1fr; }

    .quick-facts {
      background: linear-gradient(135deg, var(--whisper), rgba(212, 165, 116, 0.05));
      border: 1px solid var(--veil);
      border-radius: var(--border-radius);
      padding: 2rem;
      margin: 2rem 0;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 1.5rem;
    }

    .fact-item {
      text-align: center;
    }

    .fact-label {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--ink-muted);
      margin-bottom: 0.5rem;
    }

    .fact-value {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 500;
      color: var(--ink);
    }

    .quote {
      background: rgba(212, 165, 116, 0.08);
      border-left: 4px solid var(--gold);
      padding: 1.5rem 2rem;
      margin: 2rem 0;
      border-radius: 0 var(--border-radius) var(--border-radius) 0;
      font-style: italic;
      color: var(--ink-soft);
      position: relative;
    }

    .quote::before {
      content: '"';
      position: absolute;
      top: -10px;
      left: 15px;
      font-size: 3rem;
      color: var(--gold);
      font-family: var(--font-display);
    }

    .quote-source {
      font-size: 1rem;
      color: var(--ink-muted);
      font-style: normal;
      margin-top: 0.5rem;
      text-align: right;
    }

    /* TRIANGLE DE PASCAL TABLEUR */
    .pascal-triangle {
      background: #fdfcf9;
      border: 1px solid var(--veil);
      border-radius: var(--border-radius);
      padding: 2rem;
      text-align: center;
      margin: 2rem 0;
      overflow-x: auto;
    }

    .pascal-grid {
      display: inline-block;
      border-collapse: collapse;
      margin: 0 auto;
      font-family: var(--font-mono);
      font-size: 1rem;
    }

    .pascal-grid td {
      width: 40px;
      height: 35px;
      text-align: center;
      vertical-align: middle;
      border: 1px solid var(--veil);
      background: #fdfcf9;
      position: relative;
    }

    .pascal-grid .triangular-row {
      background: rgba(212, 165, 116, 0.1);
      color: var(--gold-rich);
      font-weight: 600;
    }

    .pascal-grid .empty-cell {
      border: none;
      background: #fdfcf9;
    }

    /* TETRAKTYS VISUEL SVG */
    .tetraktys-visual {
      background: #fdfcf9;
      border: 1px solid var(--veil);
      border-radius: var(--border-radius);
      padding: 2rem;
      text-align: center;
      margin: 2rem 0;
    }

    /* GÉOMÉTRIE COMBINATOIRE SUPER AGRANDIE */
    .geometry-showcase {
      background: #fdfcf9;
      border: 1px solid var(--veil);
      border-radius: var(--border-radius);
      padding: 4rem;
      margin: 2rem 0;
      text-align: center;
      min-height: 700px;
    }

    .slide-container {
      position: relative;
      width: 100%;
      height: 600px;
      overflow: hidden;
    }

    .geometry-slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 1s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .geometry-slide.active {
      opacity: 1;
    }

    .slide-title {
      font-family: var(--font-display);
      font-size: 1.8rem;
      color: var(--ink);
      margin-bottom: 2rem;
    }

    .slide-formula {
      font-family: var(--font-mono);
      font-size: 1rem;
      color: var(--gold-rich);
      margin-top: 2rem;
      font-weight: 600;
    }

    /* SYMBOLES DIVINS */
    .divine-symbols {
      background: #fdfcf9;
      border: 1px solid var(--veil);
      border-radius: var(--border-radius);
      padding: 2rem;
      margin: 2rem 0;
    }

    .divine-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2rem;
      margin: 2rem 0;
    }

    .divine-cell {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .divine-num {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 400;
      color: var(--ink);
      margin-bottom: 0.5rem;
    }

    .divine-label {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--ink-muted);
      margin-top: 0.5rem;
    }

    .divine-sep {
      width: 30px;
      text-align: center;
      font-size: 16px;
      color: var(--gold);
      font-family: var(--font-serif);
    }

    .resonances-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 1rem;
      margin: 1.5rem 0;
    }

    .resonance-card {
      background: #fdfcf9;
      border: 1px solid var(--veil);
      border-radius: var(--border-radius);
      padding: 1.2rem;
      cursor: pointer;
      transition: var(--transition);
      text-align: center;
    }

    .resonance-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 32px var(--shadow);
    }

    .resonance-visual {
      width: 50px;
      height: 50px;
      background: #fdfcf9;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1rem;
      font-size: 1rem;
    }

    .resonance-title {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 500;
      color: var(--ink);
      margin-bottom: 0.5rem;
    }

    .resonance-nsi {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      color: var(--gold-rich);
      background: rgba(212, 165, 116, 0.1);
      padding: 0.2rem 0.5rem;
      border-radius: 1rem;
    }

    .personal-app {
      background: linear-gradient(135deg, var(--mystical-blue), rgba(74, 95, 122, 0.9));
      color: white;
      border-radius: var(--border-radius);
      padding: 2.5rem;
      text-align: center;
      margin: 3rem 0;
    }

    .cta-title {
      font-family: var(--font-display);
      font-size: 1.6rem;
      margin-bottom: 1rem;
    }

    .cta-text {
      font-size: 1.1rem;
      margin-bottom: 2rem;
      opacity: 0.9;
    }

    .cta-button {
      display: inline-block;
      background: #fdfcf9;
      color: var(--mystical-blue);
      padding: 0.8rem 2rem;
      border-radius: 2rem;
      font-family: var(--font-display);
      font-weight: 500;
      text-decoration: none;
      transition: var(--transition);
    }

    .cta-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    }

    .article-sidebar {
      position: sticky;
      top: 100px;
      height: fit-content;
    }

    .sidebar-card {
      background: white;
      border-radius: var(--border-radius);
      padding: 1.5rem;
      margin-bottom: 1.5rem;
      border: 1px solid var(--veil);
      box-shadow: 0 4px 16px var(--whisper);
    }

    .sidebar-title {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 500;
      color: var(--ink);
      margin-bottom: 1rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid var(--veil);
    }

    .sidebar-card a {
      display: block;
      color: var(--ink-soft);
      text-decoration: none;
      margin-bottom: 0.5rem;
      transition: var(--transition);
      font-size: 1rem;
    }

    .sidebar-card a:hover {
      color: var(--gold-rich);
      padding-left: 0.5rem;
    }

    /* ANIMATIONS */
    @keyframes draw-line {
      from {
        stroke-dashoffset: var(--len);
        opacity: 0;
      }
      to {
        stroke-dashoffset: 0;
        opacity: 1;
      }
    }

    .draw-line {
      stroke-dasharray: var(--len);
      stroke-dashoffset: var(--len);
      animation: draw-line 1.2s ease-out forwards;
    }

    .draw {
      stroke-dasharray: var(--len, 400);
      stroke-dashoffset: var(--len, 400);
    }

    .divine-cell.visible .draw {
      animation: drawLine 1.2s ease forwards;
    }

    @keyframes drawLine {
      to { stroke-dashoffset: 0; }
    }

    @keyframes pulse-dot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.7; transform: scale(1.2); }
    }

    .animated-dot {
      animation: pulse-dot 2s ease-in-out infinite;
    }

    .geo-line {
      opacity: 0;
    }

    /* Animation simple par opacity avec délais plus rapides */
    .geo-line-1 { animation: fade-in-line 0.5s ease-out 0.5s forwards; }
    .geo-line-1 { animation: fade-in-line 0.5s ease-out 0.5s forwards; }
    .geo-line-2 { animation: fade-in-line 0.5s ease-out 1.2s forwards; }
    .geo-line-3 { animation: fade-in-line 0.5s ease-out 1.9s forwards; }
    .geo-line-4 { animation: fade-in-line 0.5s ease-out 2.6s forwards; }
    .geo-line-5 { animation: fade-in-line 0.5s ease-out 3.3s forwards; }
    .geo-line-6 { animation: fade-in-line 0.5s ease-out 4.0s forwards; }
    .geo-line-7 { animation: fade-in-line 0.5s ease-out 4.7s forwards; }
    .geo-line-8 { animation: fade-in-line 0.5s ease-out 5.4s forwards; }
    .geo-line-9 { animation: fade-in-line 0.5s ease-out 6.1s forwards; }
    .geo-line-10 { animation: fade-in-line 0.5s ease-out 6.8s forwards; }
    .geo-line-11 { animation: fade-in-line 0.5s ease-out 7.5s forwards; }
    .geo-line-12 { animation: fade-in-line 0.5s ease-out 8.2s forwards; }
    .geo-line-13 { animation: fade-in-line 0.5s ease-out 8.9s forwards; }
    .geo-line-14 { animation: fade-in-line 0.5s ease-out 9.6s forwards; }
    .geo-line-15 { animation: fade-in-line 0.5s ease-out 10.3s forwards; }

    @keyframes fade-in-line {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes tetraktys-appear {
      from { opacity: 0; transform: scale(0.5); }
      to { opacity: 1; transform: scale(1); }
    }

    /* Tetraktys animations par niveau avec boucle */
    .tetraktys-level-1 { 
      opacity: 0; 
      animation: tetraktys-appear 0.4s ease-out 0.5s forwards,
                 tetraktys-appear 0.4s ease-out 4.5s forwards; 
    }
    .tetraktys-level-2 { 
      opacity: 0; 
      animation: tetraktys-appear 0.4s ease-out 1.0s forwards,
                 tetraktys-appear 0.4s ease-out 5.0s forwards; 
    }
    .tetraktys-level-3 { 
      opacity: 0; 
      animation: tetraktys-appear 0.4s ease-out 1.5s forwards,
                 tetraktys-appear 0.4s ease-out 5.5s forwards; 
    }
    .tetraktys-level-4 { 
      opacity: 0; 
      animation: tetraktys-appear 0.4s ease-out 2.0s forwards,
                 tetraktys-appear 0.4s ease-out 6.0s forwards; 
    }

    /* RESPONSIVE */
    @media (max-width: 768px) {
      .hero-title {
        font-size: 2.5rem;
      }
      
      .page-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
      
      .two-columns,
      .two-columns.col-40-60,
      .two-columns.col-60-40,
      .two-columns.col-33-66,
      .two-columns.col-66-33,
      .two-columns.col-30-70,
      .two-columns.col-70-30,
      .two-columns.col-25-75,
      .two-columns.col-75-25 {
        grid-template-columns: 1fr;
        gap: 1rem;
      }
      
      .container {
        padding: 0 1rem;
      }
      
      .symbol-showcase {
        padding: 1.5rem;
      }

      .divine-row {
        flex-direction: column;
        gap: 1rem;
      }

      .divine-sep {
        transform: rotate(90deg);
      }

      .geometry-showcase {
        padding: 2rem;
        min-height: 500px;
      }

      .slide-container {
        height: 450px;
      }
    }
/* ═══════════════════════════════════════════════════════════════════
   COMPOSANTS SYMBOLINKS · v2026-04-28
   Réorganisation complète en 13 sections numérotées.
   Tous les styles inline des pages symbolisme/* sont externalisés ici.
   
   Sommaire :
   01. VARIABLES — Couleurs rubriques
   02. RESPONSIVE — Layout sidebar & 2 colonnes
   03. CONTENU GÉNÉRAL — Blockquote, cite, body-text
   04. LAYOUT 2 COLONNES — .two-columns
   05. HERO BADGES — Pastille NSI bicolore + badges
   06. FIGURES — col-figure, image en colonne
   07. SÉPARATEURS DE SECTION — VOIR/COMPRENDRE/RELIER/S'ÉVEILLER
   08. CORRESPONDANCES RELIER — 6 rubriques par couleur
   09. RÉSONANCES — Cards bas de page teintées
   10. SIDEBAR — Sommaire, correspondances, sources
   11. FAQ — Questions/réponses
   12. UTILITAIRES — Helpers et ajustements
   13. BLINDAGE GRID — Empêcher débordement
═══════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────
   01. VARIABLES — Couleurs rubriques (ordre menu)
   ─────────────────────────────────────────────────────────────────── */

:root {
  --rubrique-ldn: #2471a3;   /* Langue des Nombres - bleu */
  --rubrique-nf:  #1e8449;   /* Nombres Figurés - vert */
  --rubrique-gs:  #b7950b;   /* Géométrie Sacrée - gold sombre */
  --rubrique-psy: #c94f7c;   /* Psychologie - fuchsia */
  --rubrique-spi: #7d3c98;   /* Spiritualité - violet */
  --rubrique-geo: var(--ink); /* Géo-numérologie - encre (synthèse) */
}


/* ───────────────────────────────────────────────────────────────────
   02. RESPONSIVE — Layout sidebar masquée & 2 colonnes empilées
   ─────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .article-sidebar,
  .sidebar,
  aside.article-sidebar { display: none !important; }

  .page-layout,
  .content-with-sidebar {
    display: block !important;
    grid-template-columns: 1fr !important;
  }
  .content-main {
    max-width: 100% !important;
    width: 100% !important;
  }

  .two-columns {
    grid-template-columns: 1fr !important;
  }
  .two-columns > div { margin-bottom: 1.2rem; }
  .two-columns > div:last-child { margin-bottom: 0; }

  .hero-badges-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

@media (max-width: 640px) {
  .hero-title { font-size: 2rem !important; }
  .hero-lead { font-size: 1rem !important; }
  .section-title { font-size: 1.3rem !important; }
  .container { padding: 0 1rem !important; }
}


/* ───────────────────────────────────────────────────────────────────
   03. CONTENU GÉNÉRAL — Blockquote canonique
   Format final : <blockquote>« texte »<cite>— Auteur, <em>Œuvre</em></cite></blockquote>
   ─────────────────────────────────────────────────────────────────── */

blockquote {
  border-left: 3px solid var(--gold);
  padding-left: 1rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--ink-soft);
}
blockquote cite {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-style: normal;
}
blockquote cite em {
  font-style: italic;
}


/* ───────────────────────────────────────────────────────────────────
   04. LAYOUT 2 COLONNES — .two-columns
   ─────────────────────────────────────────────────────────────────── */

.two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 1.5rem 0;
  align-items: start;
}


/* ───────────────────────────────────────────────────────────────────
   05. HERO BADGES — Pastille NSI bicolore + grille 3 colonnes
   ─────────────────────────────────────────────────────────────────── */

.hero-badges-frame {
  background: #f5f5f5;
  border: 1px solid var(--gold);
  border-radius: var(--border-radius);
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
}
.hero-badges-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.hero-badge {
  text-align: center;
}
.hero-badge__label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin-bottom: 0.5rem;
}
.hero-badge__value {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink);
  font-weight: 500;
}
.hero-badge__svg {
  display: block;
  margin: 0 auto;
}
.hero-badge__nsi-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.hero-badge__nsi {
  background: var(--gold-rich);
  color: white;
  padding: 0.4rem 0.8rem;
  border-radius: var(--border-radius);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
}
.hero-badge__caption {
  font-style: italic;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 0.5rem;
  font-size: 0.95rem;
}

/* Pastille NSI hero (utilisé dans header pages symbolisme) */
.nsi-pastille {
  display: inline-flex;
  align-items: center;
  padding: .55rem 1.1rem;
  background: var(--whisper);
  border: 1px solid var(--veil);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: .2em;
  font-weight: 500;
  text-decoration: none;
  transition: all .2s ease;
  line-height: 1;
}
.nsi-pastille:hover {
  border-color: rgba(212, 165, 116, .6);
  background: rgba(212, 165, 116, .08);
  transform: translateY(-2px);
}
.nsi-pastille .N { color: #d4a574; }
.nsi-pastille .S { color: #7ba89c; }
.nsi-pastille .I { color: #c94f7c; }
.nsi-pastille .sep { color: var(--ink-muted); margin: 0 .2em; }


/* ───────────────────────────────────────────────────────────────────
   06. FIGURES — Image en colonne (col-figure) + figure pleine largeur
   ─────────────────────────────────────────────────────────────────── */

.col-figure {
  margin: 1rem 0 0;
  text-align: center;
}
.col-figure img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.col-figure figcaption {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-muted);
  font-size: .85rem;
  text-align: center;
  margin-top: .5rem;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.figure-full {
  margin: 1.5rem 0;
  text-align: center;
}
.figure-full img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.figure-full figcaption {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-muted);
  font-size: 0.9rem;
  text-align: center;
  margin-top: 0.6rem;
  margin-bottom: 1.8rem;
  line-height: 1.5;
}

/* Figures Schema.org sans classe spéciale (v2026-05-12) ---------------- */
.content-main figure[itemscope] {
  margin: 1.5rem 0;
  text-align: center;
}
.content-main figure[itemscope] img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.content-main figure[itemscope] figcaption {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
  text-align: center;
  margin-top: 0.7rem;
  margin-bottom: 1.8rem;
  line-height: 1.5;
}


/* ───────────────────────────────────────────────────────────────────
   07. SÉPARATEURS DE SECTION — VOIR/COMPRENDRE/RELIER/S'ÉVEILLER
   Le SVG picto reste inline dans le HTML (différent par séparateur)
   ─────────────────────────────────────────────────────────────────── */

.section-separator {
  text-align: center;
  margin: 4rem 0 3rem;
  padding: 2rem 0;
}
.section-separator__icon {
  margin-bottom: 1rem;
  text-align: center;
}
.section-separator__icon svg {
  width: 80px;
  height: 80px;
  opacity: .8;
  display: inline-block;
}
.section-separator__title {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--mystical-blue);
  margin: 0;
  letter-spacing: .1em;
}
.section-separator__rule {
  width: 60px;
  height: 2px;
  background: var(--gold);
  margin: 1rem auto;
  border: none;
  display: block;
}
.section-separator__subtitle {
  font-style: italic;
  color: var(--ink-muted);
  margin-top: .5rem;
}


/* ───────────────────────────────────────────────────────────────────
   08. CORRESPONDANCES RELIER — 6 rubriques par couleur
   ─────────────────────────────────────────────────────────────────── */

.correspondances {
  background: #fdfcf9;
  border: 1px solid var(--veil);
  border-radius: var(--border-radius);
  padding: 1.8rem 2rem;
  margin: 1.5rem 0 3rem;
}
.correspondances__intro {
  margin-bottom: 1.4rem;
}
.correspondances__list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.correspondance-row {
  display: flex;
  gap: 1rem;
  padding-left: 1rem;
  border-left: 3px solid var(--rubrique, var(--gold));
}
.correspondance-row--ldn { --rubrique: var(--rubrique-ldn); }
.correspondance-row--nf  { --rubrique: var(--rubrique-nf);  }
.correspondance-row--gs  { --rubrique: var(--rubrique-gs);  }
.correspondance-row--psy { --rubrique: var(--rubrique-psy); }
.correspondance-row--spi { --rubrique: var(--rubrique-spi); }
.correspondance-row--geo {
  --rubrique: var(--rubrique-geo);
  margin-top: .4rem;
}

.correspondance-row__pastille-wrap {
  flex-shrink: 0;
  padding-top: .2rem;
}
.correspondance-row__pastille {
  background: var(--rubrique, var(--gold));
  color: white;
  font-size: .7rem;
  padding: .25rem .65rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  letter-spacing: .12em;
  display: inline-block;
  min-width: 38px;
  text-align: center;
}

.correspondance-row__content {
  flex: 1;
  min-width: 0;
}
.correspondance-row__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--rubrique, var(--ink));
  margin: 0 0 .35rem;
  font-weight: 500;
}
.correspondance-row__text {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.65;
  margin: 0;
}
.correspondance-row--geo .correspondance-row__title,
.correspondance-row--geo .correspondance-row__text {
  font-style: italic;
}


/* ───────────────────────────────────────────────────────────────────
   09. RÉSONANCES — Cards de navigation bas de page
   Variantes par rubrique cible : --ldn / --nf / --gs / --psy / --spi
   ─────────────────────────────────────────────────────────────────── */

.resonance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.resonance-card {
  background: rgba(212, 165, 116, .06);
  border-radius: var(--border-radius);
  padding: 1.2rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: var(--transition);
}
.resonance-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px var(--shadow);
}

.resonance-card--ldn { background: rgba(36, 113, 163, .06); }
.resonance-card--nf  { background: rgba(30, 132, 73,  .06); }
.resonance-card--gs  { background: rgba(183, 149, 11, .06); }
.resonance-card--psy { background: rgba(201, 79, 124, .06); }
.resonance-card--spi { background: rgba(125, 60, 152, .06); }

.resonance-visual {
  margin-bottom: 0.8rem;
}
.resonance-glyph {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: white;
  margin: 0 auto;
  background: var(--gold-rich);
}
.resonance-card--ldn .resonance-glyph { background: var(--rubrique-ldn); }
.resonance-card--nf  .resonance-glyph { background: var(--rubrique-nf);  }
.resonance-card--gs  .resonance-glyph { background: var(--rubrique-gs);  }
.resonance-card--psy .resonance-glyph { background: var(--rubrique-psy); }
.resonance-card--spi .resonance-glyph { background: var(--rubrique-spi); }

.resonance-eyebrow {
  font-family: var(--font-mono);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-align: center;
  margin-bottom: .2rem;
  color: var(--gold-rich);
}
.resonance-card--ldn .resonance-eyebrow { color: var(--rubrique-ldn); }
.resonance-card--nf  .resonance-eyebrow { color: var(--rubrique-nf);  }
.resonance-card--gs  .resonance-eyebrow { color: var(--rubrique-gs);  }
.resonance-card--psy .resonance-eyebrow { color: var(--rubrique-psy); }
.resonance-card--spi .resonance-eyebrow { color: var(--rubrique-spi); }

.resonance-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 .4rem;
  color: var(--gold-rich);
}
.resonance-card--ldn .resonance-title { color: var(--rubrique-ldn); }
.resonance-card--nf  .resonance-title { color: var(--rubrique-nf);  }
.resonance-card--gs  .resonance-title { color: var(--rubrique-gs);  }
.resonance-card--psy .resonance-title { color: var(--rubrique-psy); }
.resonance-card--spi .resonance-title { color: var(--rubrique-spi); }

.resonance-nsi {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .15em;
  padding: .2rem .55rem;
  border-radius: 999px;
  color: white;
  background: var(--gold-rich);
}
.resonance-card--ldn .resonance-nsi { background: var(--rubrique-ldn); }
.resonance-card--nf  .resonance-nsi { background: var(--rubrique-nf);  }
.resonance-card--gs  .resonance-nsi { background: var(--rubrique-gs);  }
.resonance-card--psy .resonance-nsi { background: var(--rubrique-psy); }
.resonance-card--spi .resonance-nsi { background: var(--rubrique-spi); }


/* ───────────────────────────────────────────────────────────────────
   10. SIDEBAR — Sommaire, correspondances, sources
   ─────────────────────────────────────────────────────────────────── */

/* Lien vers séparateur dans le sommaire (style mystical-blue, après chaque section) */
.sidebar-card a.sommaire-separator {
  font-family: var(--font-display);
  color: var(--mystical-blue);
  letter-spacing: .08em;
  font-size: .85rem;
  margin-top: .5rem;
}

/* Bloc "Correspondances" sidebar (Engendre, Relié à...) */
.sidebar-correspondance {
  margin-bottom: .6rem;
}
.sidebar-correspondance__label {
  font-family: var(--font-mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-muted);
  margin-bottom: .15rem;
}
.sidebar-correspondance a {
  margin: 0;
}


/* ───────────────────────────────────────────────────────────────────
   11. FAQ — Questions / réponses
   ─────────────────────────────────────────────────────────────────── */

.faq-question {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 1.5rem 0 .75rem;
  font-size: 1.2rem;
  font-weight: 500;
}
.faq-answer {
  margin-bottom: 1.5rem;
}


/* ───────────────────────────────────────────────────────────────────
   12. UTILITAIRES — Helpers
   ─────────────────────────────────────────────────────────────────── */

/* Liste body-text avec indentation */
ul.body-list {
  margin-left: 1.2rem;
  color: var(--ink-soft);
}
ul.body-list li {
  margin-bottom: 0.4rem;
}

/* Texte centré générique */
.text-center { text-align: center; }

/* Style "definition mono" (utilisé dans certaines pages : 1+2+3=6 etc.) */
.formula-line {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--ink-soft);
  margin: 1rem 0;
}
.formula-line--large {
  font-size: 1.4rem;
  color: var(--gold-rich);
  margin: 1rem 0;
}



/* ───────────────────────────────────────────────────────────────────
   13. BLINDAGE GRID — Empêcher débordement de la cellule contenu
   Cas classique : flex enfants ou contenu inline-block long
   ─────────────────────────────────────────────────────────────────── */

.content-main {
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.content-main img,
.content-main figure,
.content-main table,
.content-main pre {
  max-width: 100%;
  height: auto;
}





/* ═══════════════════════════════════════════════════════════════════
   PATCH CSS — v2026-04-28 (page pilote nombres-triangulaires v2)
   À ajouter à la fin de style-commun.css
   
   Ce patch externalise les styles inline de la page pilote v1
   selon le pattern STYLE-GUIDE.md v2.
═══════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────
   1. SÉPARATEURS SSI — VOIR / COMPRENDRE / RELIER / S'ÉVEILLER
   ─────────────────────────────────────────────────────────────────── */

.section-separator {
  text-align: center;
  margin: 4rem 0 3rem;
  padding: 2rem 0;
}
.section-separator__icon { margin-bottom: 1rem; }
.section-separator__title {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--mystical-blue);
  margin: 0;
  letter-spacing: 0.1em;
}
.section-separator__rule {
  width: 60px;
  height: 2px;
  background: var(--gold);
  margin: 1rem auto;
}
.section-separator__subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-soft);
  margin-top: 0.5rem;
  font-size: 0.95rem;
}
/* Variants : couleurs accent par section */
.section-separator--voir       .section-separator__title { color: var(--mystical-blue); }
.section-separator--comprendre .section-separator__title { color: var(--mystical-blue); }
.section-separator--relier     .section-separator__title { color: var(--mystical-blue); }
.section-separator--eveiller   .section-separator__title { color: var(--mystical-blue); }


/* ───────────────────────────────────────────────────────────────────
   2. HERO BADGES — Frame + Grid + Badge
   ─────────────────────────────────────────────────────────────────── */

.hero-badges-frame {
  background: #f5f5f5;
  border: 1px solid var(--gold);
  border-radius: var(--border-radius, 6px);
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
}
.hero-badges-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.hero-badge {
  text-align: center;
}
.hero-badge__label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin-bottom: 0.5rem;
}
.hero-badge__value {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink);
  font-weight: 500;
}
.hero-badge__pastille {
  background: var(--gold);
  color: white;
  padding: 0.4rem 0.8rem;
  border-radius: var(--border-radius, 6px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  display: inline-block;
}
.hero-badge__pastille--ldn { background: var(--rubrique-ldn); }
.hero-badge__pastille--nf  { background: var(--rubrique-nf);  }
.hero-badge__pastille--gs  { background: var(--rubrique-gs);  }
.hero-badge__pastille--psy { background: var(--rubrique-psy); }
.hero-badge__pastille--spi { background: var(--rubrique-spi); }
.hero-badge__caption {
  font-style: italic;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 0.5rem;
  font-size: 1rem;
}

/* Responsive : sur mobile, les 3 badges se stackent */
@media (max-width: 1024px) {
  .hero-badges-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}


/* ───────────────────────────────────────────────────────────────────
   3. RESONANCE CARDS — Variants par rubrique
   ─────────────────────────────────────────────────────────────────── */

.resonance-card {
  display: block;
  text-decoration: none;
  padding: 1.2rem;
  border-radius: var(--border-radius, 6px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.resonance-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(42, 31, 21, 0.1);
}
/* Backgrounds teintés selon variant */
.resonance-card--ldn { background: rgba(36, 113, 163, 0.06);  }
.resonance-card--nf  { background: rgba(30, 132, 73, 0.06);   }
.resonance-card--gs  { background: rgba(183, 149, 11, 0.08);  }
.resonance-card--psy { background: rgba(201, 79, 124, 0.06);  }
.resonance-card--spi { background: rgba(125, 60, 152, 0.06);  }

.resonance-visual {
  text-align: center;
  margin-bottom: 0.75rem;
}
.resonance-glyph {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.4rem;
  font-family: var(--font-display);
}
.resonance-glyph--ldn { background: var(--rubrique-ldn); }
.resonance-glyph--nf  { background: var(--rubrique-nf);  }
.resonance-glyph--gs  { background: var(--rubrique-gs);  }
.resonance-glyph--psy { background: var(--rubrique-psy); }
.resonance-glyph--spi { background: var(--rubrique-spi); }

.resonance-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  text-align: center;
  margin-bottom: 0.2rem;
}
.resonance-card--ldn .resonance-eyebrow { color: var(--rubrique-ldn); }
.resonance-card--nf  .resonance-eyebrow { color: var(--rubrique-nf);  }
.resonance-card--gs  .resonance-eyebrow { color: var(--rubrique-gs);  }
.resonance-card--psy .resonance-eyebrow { color: var(--rubrique-psy); }
.resonance-card--spi .resonance-eyebrow { color: var(--rubrique-spi); }

.resonance-title {
  font-family: var(--font-display);
  text-align: center;
  margin-bottom: 0.5rem;
}
.resonance-card--ldn .resonance-title { color: var(--rubrique-ldn); }
.resonance-card--nf  .resonance-title { color: var(--rubrique-nf);  }
.resonance-card--gs  .resonance-title { color: var(--rubrique-gs);  }
.resonance-card--psy .resonance-title { color: var(--rubrique-psy); }
.resonance-card--spi .resonance-title { color: var(--rubrique-spi); }

.resonance-nsi {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: white;
}
.resonance-nsi--ldn { background: var(--rubrique-ldn); }
.resonance-nsi--nf  { background: var(--rubrique-nf);  }
.resonance-nsi--gs  { background: var(--rubrique-gs);  }
.resonance-nsi--psy { background: var(--rubrique-psy); }
.resonance-nsi--spi { background: var(--rubrique-spi); }


/* ───────────────────────────────────────────────────────────────────
   4. SIDEBAR — TOC + Correspondance liens
   ─────────────────────────────────────────────────────────────────── */

.sidebar-toc-marker {
  font-family: var(--font-display);
  color: var(--mystical-blue);
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

.sidebar-link {
  margin-bottom: 0.6rem;
}
.sidebar-link__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin-bottom: 0.15rem;
}
.sidebar-link a {
  margin: 0 !important;
}


/* ───────────────────────────────────────────────────────────────────
   5. FAQ — Questions fréquentes
   ─────────────────────────────────────────────────────────────────── */

.faq-item {
  margin-bottom: 1.5rem;
}
.faq-question {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 1.5rem 0 0.75rem;
  font-size: 1.2rem;
}
.faq-answer {
  font-family: var(--font-serif);
  color: var(--ink);
  line-height: 1.65;
}


/* ───────────────────────────────────────────────────────────────────
   6. MATRICES COMBINATOIRES — Tables ab, abc, abcd
   ─────────────────────────────────────────────────────────────────── */

.combo-container {
  background: #fdfcf9;
  padding: 1.5rem;
  border-radius: 4px;
  border: 1px solid rgba(212, 165, 116, 0.2);
}
.combo-header {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
  text-align: center;
}
.combo-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}
.combo-block {
  text-align: center;
}
.combo-label {
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.combo-result {
  font-size: 0.9rem;
  color: var(--gold-rich);
  margin-top: 0.6rem;
  font-weight: 600;
}
.combo-table {
  border-collapse: collapse;
  margin: 0 auto;
}
.combo-cell {
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--gold);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  background: #fdfcf9;
}
.combo-cell--corner {
  background: #f0ede8;
  font-weight: bold;
}
.combo-cell--header {
  background: #fdfcf9;
  font-weight: bold;
}
.combo-cell--duplicate {
  background: #d4f4d4;
}
.combo-cell--selected {
  background: var(--gold);
  font-weight: bold;
  color: white;
}


/* ───────────────────────────────────────────────────────────────────
   7. UTILITAIRES — Classes génériques
   ─────────────────────────────────────────────────────────────────── */

.bg-transparent {
  background: transparent !important;
}
.centered-block {
  margin: 0 auto;
  display: block;
}
.figure-caption {
  font-family: var(--font-display);
  margin-top: 1rem;
  color: var(--ink-muted);
  text-align: center;
}
.figure-caption-italic {
  text-align: center;
  font-family: var(--font-display);
  margin-top: 0.8rem;
  color: var(--ink-muted);
  font-size: 0.95rem;
  font-style: italic;
}
.figure-medium {
  width: 100%;
  max-width: 440px;
  display: block;
  margin: 0 auto;
}


/* ═══════════════════════════════════════════════════════════════════
   Fin du patch v2026-04-28
═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   STYLES MUTUALISÉS — ajouté v2026-05-04
   Anciennement dans <style id="batch2-helpers-v1"> / <style id="local-helpers">
   / <style id="geonu-flash-v1"> / <style> .page-figure des pages
   ═══════════════════════════════════════════════════════════════════════ */

/* === LIENS DU CORPS — cyan saturé, soulignement doré au hover === */
.content-main a,
.body-text a,
.correspondance-row__text a,
.geonu-flash a,
.faq a,
.two-columns a {
  color: #0e7490;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.content-main a:hover,
.body-text a:hover,
.correspondance-row__text a:hover,
.geonu-flash a:hover,
.faq a:hover,
.two-columns a:hover {
  color: var(--gold-rich);
  border-bottom-color: var(--gold-rich);
}
.content-main a:visited,
.body-text a:visited,
.correspondance-row__text a:visited,
.faq a:visited,
.two-columns a:visited {
  color: #0e7490;
}
/* exceptions : conserver les styles spécifiques pour ces zones */
.content-main .resonance-card,
.content-main .resonance-card:visited,
.content-main .sidebar-card a,
.content-main .sidebar-card a:visited,
.content-main .geonu-flash__btn,
.content-main .geonu-flash__btn:visited {
  color: inherit;
  border-bottom: none;
}
.content-main .geonu-flash__btn--primary { color: #12100e; }
.content-main .geonu-flash__btn--ghost { color: #d4a574; }

/* === FIGURES INTÉGRÉES === */
.page-figure {
  margin: 1.8rem 0;
  text-align: center;
}
.page-figure img {
  max-width: 100%;
  height: auto;
  border: 1px solid rgba(212, 165, 116, 0.3);
  border-radius: 4px;
  background: #fefcf7;
  padding: 0.8rem;
}

/* === TRIADE CARDS (3 cartes ternaires) === */
.triade-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
}
.triade-card {
  background: #fafaf6;
  border: 1px solid rgba(42, 31, 21, .1);
  border-radius: var(--border-radius, 4px);
  padding: 1.5rem 1.2rem;
  text-align: center;
}
.triade-card__num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: .3rem;
}
.triade-card__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0 0 .4rem;
  font-weight: 500;
}
.triade-card__sub {
  font-family: var(--font-mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-muted);
  margin-bottom: .8rem;
}
.triade-card p {
  font-size: .9rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 640px) {
  .triade-cards {
    grid-template-columns: 1fr;
  }
}

/* === INFO TABLE (tableaux d'information) === */
.info-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-family: var(--font-body);
  font-size: .92rem;
  background: #fafaf6;
  border: 1px solid rgba(42, 31, 21, .1);
}
.info-table caption {
  font-family: var(--font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-muted);
  padding: .5rem 0 .8rem;
  text-align: left;
}
.info-table th,
.info-table td {
  padding: .6rem .9rem;
  border: 1px solid rgba(42, 31, 21, .08);
  vertical-align: top;
  text-align: left;
}
.info-table thead th {
  background: #f0ebe0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .85rem;
  color: #2a1f15;
}
.info-table tbody th {
  background: #f5f1e8;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .85rem;
  color: #2a1f15;
}
.info-table td {
  color: var(--ink-soft);
}

/* === FORMULA BOX (équations / formules mises en évidence) === */
.formula-box {
  background: #12100e;
  color: #f9f6f0;
  padding: 1.5rem 2rem;
  margin: 1.5rem 0;
  border-radius: var(--border-radius, 4px);
  font-family: var(--font-display);
  font-size: 1.4rem;
  text-align: center;
  letter-spacing: .04em;
  border: 1px solid rgba(212, 165, 116, .3);
}
.formula-box em {
  color: #d4a574;
  font-style: italic;
  font-size: .85rem;
  display: block;
  margin-top: .5rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: normal;
}

/* === GEONU-FLASH (encadré géo-numérologique) === */
.geonu-flash {
  background: #12100e;
  color: #f9f6f0;
  border: 1px solid rgba(212, 165, 116, .25);
  border-radius: var(--border-radius, 4px);
  padding: 3rem 2.5rem;
  margin: 3rem 0 2rem;
  position: relative;
}
.geonu-flash::before {
  content: "";
  position: absolute;
  top: 0;
  left: 2.5rem;
  right: 2.5rem;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d4a574, transparent);
}
.geonu-flash__eyebrow {
  font-family: var(--font-mono);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: #d4a574;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.geonu-flash__eyebrow::before {
  content: "\1F3AF";
  font-size: 1rem;
}
.geonu-flash__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.7rem;
  color: #f9f6f0;
  margin: 0 0 1.5rem;
  line-height: 1.25;
}
.geonu-flash__title em {
  color: #d4a574;
  font-style: italic;
  font-weight: inherit;
}
.geonu-flash p {
  font-family: var(--font-body);
  color: #e0d4b8;
  font-size: 1.08rem;
  line-height: 1.7;
  margin: 0 0 1.1rem;
}
.geonu-flash p strong {
  color: #f9f6f0;
  font-weight: 500;
}
.geonu-flash__cta {
  margin-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}
.geonu-flash__btn {
  display: inline-block;
  padding: .85rem 1.4rem;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  border-radius: var(--border-radius, 4px);
  transition: all .2s ease;
}
.geonu-flash__btn--primary {
  background: #d4a574;
  color: #12100e;
  border: 1px solid #d4a574;
}
.geonu-flash__btn--primary:hover {
  background: #b8925a;
  border-color: #b8925a;
}
.geonu-flash__btn--ghost {
  background: transparent;
  color: #d4a574;
  border: 1px solid rgba(212, 165, 116, .4);
}
.geonu-flash__btn--ghost:hover {
  border-color: #d4a574;
  background: rgba(212, 165, 116, .08);
}
@media (max-width: 640px) {
  .geonu-flash {
    padding: 2rem 1.5rem;
    margin: 2rem 0 1.5rem;
  }
  .geonu-flash::before {
    left: 1.5rem;
    right: 1.5rem;
  }
  .geonu-flash__title {
    font-size: 1.4rem;
  }
}

/* Variante locale info-table sur corps-univers : à conserver dans la page si nécessaire */


/* ═══════════════════════════════════════════════════════════════════════
   FOOTER — ajouté v2026-05-06-b
   Pied de page Symbolinks : 5 colonnes (brand + 4 colonnes) + bottom.
   Le logo réutilise les styles .site-logo / .site-logo__mark / .site-logo__name
   définis dans /_inc/header.html — pas d'override ici pour cohérence visuelle.
   ═══════════════════════════════════════════════════════════════════════ */

.site-footer {
  background: #12100e;
  color: #b8a989;
  padding: 4rem 0 2rem;
  /* v2026-05-08 : margin-top retiré pour éviter espace blanc avec section
     précédente à fond clair (ex: .neuf-nombres après inversion sections home) */
  margin-top: 0;
  border-top: 1px solid rgba(212, 165, 116, 0.2);
  font-family: var(--font-serif);
  font-size: 0.92rem;
  line-height: 1.6;
}
.site-footer .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Grille principale du footer */
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(212, 165, 116, 0.15);
}

/* Bloc Brand : on n'override PAS le .site-logo (déjà défini par /_inc/header.html) */
.footer-brand {
  padding-right: 1rem;
}
.footer-brand .site-logo {
  margin-bottom: 1rem;
}
.footer-brand__desc {
  color: #8b7355;
  font-size: 0.88rem;
  line-height: 1.65;
  margin: 0.8rem 0 1.2rem;
  font-family: var(--font-serif);
  font-style: italic;
}
.footer-brand__link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #d4a574;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color .15s ease;
}
.footer-brand__link:hover {
  border-bottom-color: #d4a574;
}

/* Colonnes de liens */
.footer-col__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  color: #f9f6f0;
  letter-spacing: 0.06em;
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(212, 165, 116, 0.15);
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col li {
  margin-bottom: 0.5rem;
}
.footer-col a {
  color: #b8a989;
  text-decoration: none;
  font-size: 0.88rem;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.footer-col a:hover {
  color: #d4a574;
  border-bottom-color: #d4a574;
}

/* Bottom du footer */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.8rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #6a5640;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-copy {
  margin: 0;
}
.footer-bottom a {
  color: #6a5640;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.footer-bottom a:hover {
  color: #d4a574;
  border-bottom-color: #d4a574;
}

/* Responsive */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .footer-brand {
    grid-column: 1 / -1;
    margin-bottom: 1rem;
    padding-right: 0;
  }
}
@media (max-width: 640px) {
  .site-footer {
    padding: 3rem 0 1.5rem;
  }
  .site-footer .container {
    padding: 0 1.2rem;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.8rem;
    padding-bottom: 2rem;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PASSERELLE GÉO-NUMÉROLOGIE — ajouté v2026-05-06-c
   Bloc bridge inséré entre RELIER et S'ÉVEILLER, 4 variantes par silo :
   matrice 3×3 (LN/NF), 3 figures mères (GS), cercle pointé+croix (PSY),
   étoile à 9 pointes (SPI). Conduit naturel vers la Géo-numérologie.
   ═══════════════════════════════════════════════════════════════════════ */

.bridge {
  margin: 3rem 0;
  padding: 3rem 2rem;
  text-align: center;
  border: 1px solid rgba(212, 165, 116, .60);
  border-radius: 10px;
  background: rgba(249, 246, 240, .7);
  overflow: hidden;
}

.bridge__symbol {
  margin: auto;
  margin-bottom: 1rem;
  color: var(--gold);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .4rem;
}

.bridge .matrix {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: .25rem .6rem;
  font-size: .9rem;
  font-family: var(--font-mono);
  letter-spacing: .1em;
  opacity: .9;
}

.bridge .figures {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.4rem;
}

.bridge .symbol-svg {
  width: 54px;
  height: 54px;
  display: block;
}
.bridge .symbol-svg .stroke {
  fill: none;
  stroke: var(--gold);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bridge .symbol-svg .fill {
  fill: var(--gold);
}
.bridge .symbol-svg--single {
  width: 68px;
  height: 68px;
}

.bridge__title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: var(--ink);
  font-weight: 400;
}

.bridge__text {
  max-width: 650px;
  margin: 0 auto 1.5rem;
  color: var(--ink-soft);
  font-family: var(--font-serif);
  line-height: 1.65;
}

.bridge__cta {
  display: inline-block;
  padding: .6rem 1.2rem;
  border: 1px solid var(--gold);
  color: #12100e;
  background: var(--gold);
  border-radius: 6px;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
}
.bridge__cta:hover,
.bridge__cta:focus-visible {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 6px 18px rgba(0, 0, 0, .10);
  transform: translateY(-1px);
  letter-spacing: .08em;
}
.bridge__cta::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 0%;
  height: 1px;
  background: var(--gold);
  transform: translateX(-50%);
  transition: width .25s ease;
  opacity: .7;
}
.bridge__cta:hover::after,
.bridge__cta:focus-visible::after {
  width: 70%;
}

/* ── Signalisation transfert externe (v2026-05-12d) ─────────────── */
.bridge__service-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: 0 auto .9rem;
  padding: .28rem .75rem;
  background: rgba(212, 165, 116, 0.12);
  border: 1px solid rgba(212, 165, 116, 0.45);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-rich, #b8925a);
}
.bridge__service-badge strong {
  font-weight: 500;
  color: var(--ink-soft, #5a4a2a);
  letter-spacing: .04em;
}

/* En-tête bandeau "Carte d'accès" — pour pages-hub (v2026-05-12e) */
.bridge__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: -3rem -2rem 1.8rem;
  padding: .75rem 1.5rem;
  background: linear-gradient(90deg, var(--ink-soft, #5a4a2a), #3d2e10);
  color: #f5f0e8;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 9px 9px 0 0;
}
.bridge__header-left {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.bridge__header-right {
  color: var(--gold, #d4a574);
  font-weight: 500;
}
@media (max-width: 640px) {
  .bridge__header {
    flex-direction: column;
    gap: .3rem;
    text-align: center;
    font-size: .65rem;
    padding: .65rem 1rem;
  }
}
.bridge__cta-hint {
  margin: .6rem auto 0;
  font-family: var(--font-serif);
  font-size: .85rem;
  font-style: italic;
  color: var(--ink-soft, #5a4a2a);
  max-width: 32rem;
}
.bridge__author {
  margin: 1.4rem auto 0;
  padding-top: 1rem;
  border-top: 1px dashed rgba(212, 165, 116, 0.35);
  font-family: var(--font-serif);
  font-size: .8rem;
  color: var(--ink-muted, #8b7355);
  max-width: 30rem;
  line-height: 1.5;
}
.bridge__author strong {
  font-weight: 500;
  color: var(--ink-soft, #5a4a2a);
}
.bridge__author a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: .5px;
  text-underline-offset: 2px;
}
.bridge__author a:hover { color: var(--gold-rich, #b8925a); }

/* ═══════════════════════════════════════════════════════════════════════
   STÈLE — Encadré sombre pour calcul / formule / équivalence clé
   (v2026-05-13) Inspiration : inscription gravée antique
   Usage : <div class="stele">
             <div class="stele__label">Label en capitales</div>
             <div class="stele__eq">10 = 1 + 0 = 1</div>     (pour calculs)
             OU
             <div class="stele__text">Texte ≡ Texte</div>    (pour équivalences)
           </div>
   ═══════════════════════════════════════════════════════════════════════ */
.stele {
  background: linear-gradient(145deg, #4a3a2a, #5a4530 50%, #4a3a2a);
  color: #f0d8a8;
  border: 1px solid rgba(212, 165, 116, .4);
  border-radius: 8px;
  padding: 1.6rem 2.2rem;
  text-align: center;
  margin: 1.8rem auto;
  max-width: 560px;
  position: relative;
  box-shadow: 0 4px 15px rgba(74, 58, 42, .2), inset 0 1px 0 rgba(212, 165, 116, .15);
}
.stele::before, .stele::after {
  content: '✦';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(212, 165, 116, .5);
  font-size: .9rem;
}
.stele::before { left: 1rem; }
.stele::after  { right: 1rem; }

.stele__label {
  font-family: var(--font-mono, 'Source Code Pro', monospace);
  font-size: .65rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(212, 165, 116, .75);
  margin-bottom: .9rem;
}

.stele__eq {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.9rem;
  letter-spacing: .04em;
  color: #f0d8a8;
  text-shadow: 0 1px 0 rgba(42, 31, 21, .6);
  line-height: 1.3;
}
.stele__eq .op { color: #d4a574; margin: 0 .3em; font-weight: 300; }

.stele__text {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.2rem;
  color: #f0d8a8;
  letter-spacing: .04em;
  line-height: 1.4;
}
.stele__text .equiv { color: #d4a574; margin: 0 .5em; }

@media (max-width: 640px) {
  .stele { padding: 1.3rem 2.4rem; }
  .stele__eq { font-size: 1.5rem; }
  .stele__text { font-size: 1.05rem; }
}

@media (max-width: 640px) {
  .bridge {
    padding: 2.2rem 1.2rem;
    margin: 2rem 0;
  }
  .bridge__title {
    font-size: 1.4rem;
  }
}

/* (Anciens blocs footer logo supprimés — règles désormais centralisées
   dans le bloc « LOGO SYMBOLINKS — SOURCE UNIQUE DE VÉRITÉ » en haut du fichier.) */

/* ═══════════════════════════════════════════════════════════════════
   CITATION MAISON « — Géo-numérologie » (v2026-05-10)
   Encart italique avec tiret cyan pour les formulations contemporaines
   signées par la maison (par opposition aux citations d'auteurs sources).
   ═══════════════════════════════════════════════════════════════════ */
blockquote.cite-meta {
  background: #fafcfd;
  border-left: 3px solid #4ec3d6;
  margin: 1.2rem 0;
  padding: 0.9rem 1.2rem;
  font-style: italic;
  font-family: 'EB Garamond', serif;
  color: #2a2a2a;
  line-height: 1.55;
}
blockquote.cite-meta cite {
  display: block;
  font-style: normal;
  font-family: 'Cinzel', serif;
  font-size: 0.78em;
  letter-spacing: 0.06em;
  color: #4ec3d6;
  margin-top: 0.5rem;
  text-transform: uppercase;
}