/* ============================================================
   style-pages.css - regles communes extraites des pages v9
   Chargee APRES style-commun.css (meme cascade qu'avant :
   ces regles etaient embarquees dans chaque page).
   ============================================================ */

/* === CONTENEUR === */
  .site-header{
    background:#12100e;
    border-bottom:1px solid rgba(212,165,116,.15);
    position:fixed; top:0; left:0; right:0;
    z-index:100;
  }
  .site-header .container{
    max-width:1400px;
    margin:0 auto;
    padding:0 2rem;
  }
  .site-header .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2rem;
    padding:.9rem 0;
  }

  /* === LOGO === */
  /* Toutes les règles .site-logo* sont centralisées dans style-commun.css */

  /* === NAV DESKTOP === */
  .site-header .main-nav{
    display:flex;
    align-items:center;
    gap:2.2rem;
    flex:1;
    justify-content:center;
  }
  .site-header .nav-item{ position:relative; }
  .site-header .main-nav .nav-link{
    color:#e0d4b8;
    text-decoration:none;
    font-family:var(--font-display, 'Cinzel', serif);
    font-weight:400;
    font-size:.92rem;
    letter-spacing:.07em;
    text-transform:uppercase !important;
    padding:1.6rem 0;
    transition:color .2s ease;
    white-space:nowrap;
    display:inline-block;
  }
  .site-header .main-nav .nav-link:hover,
  .site-header .main-nav .nav-link:focus-visible,
  .site-header .nav-item:hover .nav-link{ color:#d4a574; }

  /* === SOUS-MENU DESKTOP (hover 200ms) === */
  .site-header .sub-nav{
    position:absolute;
    top:100%;
    left:50%;
    min-width:520px;
    max-width:680px;
    background:#f9f6f0;
    border:1px solid rgba(42,31,21,.12);
    box-shadow:0 14px 40px rgba(18,16,14,.28);
    border-radius:6px;
    padding:1.4rem 1.8rem 1.6rem;
    opacity:0;
    visibility:hidden;
    transform:translate(-50%, 8px);
    transition:opacity .15s ease, transform .15s ease, visibility .15s;
    z-index:101;
  }
  /* Largeur des panneaux par silo (v2026-08-08) */
  .site-header .nav-item[data-silo="ldn"] .sub-nav{ min-width:340px; }
  .site-header .nav-item[data-silo="gs"]  .sub-nav{ min-width:380px; }
  .site-header .nav-item[data-silo="spi"] .sub-nav{ min-width:380px; }
  .site-header .nav-item[data-silo="psy"] .sub-nav{ min-width:360px; }

  .site-header .nav-item:hover .sub-nav,
  .site-header .nav-item:focus-within .sub-nav{
    opacity:1;
    visibility:visible;
    transform:translate(-50%, 0);
    transition-delay:.2s;
  }
  .site-header .sub-nav .group-title{
    display:block;
    font-family:var(--font-mono, 'Source Code Pro', monospace);
    font-size:.65rem;
    text-transform:uppercase;
    letter-spacing:.18em;
    color:#8b7355;
    padding:.75rem 0 .35rem;
  }
  .site-header .sub-nav .group-title:first-child{ padding-top:0; }
  /* Sous-séparateur Deus/Homo/Natura (citations Sagesse Primordiale) */
  .site-header .sub-nav .group-subtitle{
    display:block;
    font-family:var(--font-serif, 'EB Garamond', Georgia, serif);
    font-style:italic;
    font-size:.88rem;
    color:#5a4a2a;
    padding:.55rem 0 .15rem .25rem;
    letter-spacing:.01em;
  }
  .site-header .sub-nav ul{
    list-style:none;
    margin:0;
    padding:0 0 .3rem;
  }
  .site-header .sub-nav li{ margin:0; }
  .site-header .sub-nav a{
    display:block;
    color:#2a1f15;
    text-decoration:none;
    padding:.32rem 0 .32rem .8rem;
    font-size:.92rem;
    font-family:var(--font-serif, 'EB Garamond', Georgia, serif);
    border-left:2px solid transparent;
    margin-left:-.8rem;
    transition:color .15s ease, border-color .15s ease;
  }
  .site-header .sub-nav a:hover{
    color:#b8925a;
    border-left-color:#d4a574;
  }
  .site-header .sub-nav ul.sub-list{
    padding-left:.9rem;
    margin-bottom:.4rem;
  }
  .site-header .sub-nav ul.sub-list a{
    font-size:.85rem;
    color:#5a4a2a;
    padding:.22rem 0 .22rem .8rem;
  }
  .site-header .sub-nav ul.sub-list a::before{
    content:"→ ";
    color:#d4a574;
    margin-right:.2em;
  }
  .site-header .nav-item::after{
    content:"";
    position:absolute;
    top:100%;
    left:0; right:0;
    height:14px;
    pointer-events:none;
  }
  .site-header .nav-item:hover::after{ pointer-events:auto; }

  /* === ACTIONS === */
  .site-header .header-actions{
    display:flex;
    align-items:center;
    gap:.75rem;
    flex-shrink:0;
  }
  .site-header .btn-header{
    background:#d4a574;
    color:#12100e;
    border:1px solid #d4a574;
    padding:.5rem 1rem;
    border-radius:6px;
    font-family:var(--font-mono, 'Source Code Pro', monospace);
    font-size:.78rem;
    font-weight:500;
    letter-spacing:.08em;
    text-transform:uppercase;
    text-decoration:none;
    transition:all .2s ease;
    white-space:nowrap;
  }
  .site-header .btn-header:hover{
    background:#b8925a;
    border-color:#b8925a;
  }

  /* === BURGER === */
  .site-header .burger{
    display:none;
    background:none;
    border:none;
    cursor:pointer;
    padding:.5rem;
    width:40px; height:40px;
    flex-direction:column;
    justify-content:center;
    gap:5px;
  }
  .site-header .burger span{
    display:block;
    width:22px; height:1.5px;
    background:#f9f6f0;
    border-radius:1px;
    transition:transform .25s ease, opacity .2s ease;
  }
  .site-header .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .site-header .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .site-header .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

  /* === DRAWER === */
  .site-header .drawer{
    position:fixed;
    top:64px;
    left:0; right:0;
    bottom:0;
    background:#12100e;
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    visibility:hidden;
  }
  .site-header .drawer[aria-hidden="false"]{
    transform:translateX(0);
    visibility:visible;
  }
  .site-header .drawer-inner{ padding:1.5rem 2rem 4rem; }
  .site-header .drawer-silo{ border-bottom:1px solid rgba(212,165,116,.15); }
  .site-header .drawer-silo__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1.1rem 0;
    gap:1rem;
  }
  .site-header .drawer-silo__title{
    color:#f9f6f0;
    text-decoration:none;
    font-family:var(--font-display, 'Cinzel', serif);
    font-size:1.1rem;
    font-weight:400;
    letter-spacing:.03em;
    flex:1;
    padding:.4rem 0;
  }
  .site-header .drawer-silo__title:hover{ color:#d4a574; }
  .site-header .drawer-silo__toggle{
    background:none;
    border:1px solid rgba(212,165,116,.3);
    color:#d4a574;
    width:44px; height:44px;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:all .2s ease;
  }
  .site-header .drawer-silo__toggle:hover{
    background:rgba(212,165,116,.1);
    border-color:#d4a574;
  }
  .site-header .drawer-silo__toggle svg{
    width:14px; height:14px;
    transition:transform .25s ease;
  }
  .site-header .drawer-silo[data-open="true"] .drawer-silo__toggle svg{ transform:rotate(180deg); }
  .site-header .drawer-silo__panel{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s cubic-bezier(.4,0,.2,1);
  }
  .site-header .drawer-silo[data-open="true"] .drawer-silo__panel{ max-height:2000px; }
  .site-header .drawer-silo__panel ul{
    list-style:none;
    padding:0 0 1.2rem;
    margin:0;
  }
  .site-header .drawer-silo__panel li{ margin:0; }
  .site-header .drawer-silo__panel a{
    display:block;
    color:#e0d4b8;
    text-decoration:none;
    padding:.55rem 0 .55rem 1.2rem;
    font-size:.95rem;
    font-family:var(--font-serif, 'EB Garamond', Georgia, serif);
    border-left:1px solid rgba(212,165,116,.2);
    margin-left:.4rem;
    transition:color .15s ease, border-color .15s ease, padding-left .15s ease;
  }
  .site-header .drawer-silo__panel a:hover{
    color:#d4a574;
    border-left-color:#d4a574;
    padding-left:1.4rem;
  }
  .site-header .drawer-silo__panel .group-title{
    display:block;
    font-family:var(--font-mono, 'Source Code Pro', monospace);
    font-size:.65rem;
    text-transform:uppercase;
    letter-spacing:.18em;
    color:#8b7355;
    padding:1rem 0 .4rem 1.2rem;
    margin-left:.4rem;
  }
  /* Sous-séparateur Deus/Homo/Natura (citations Sagesse Primordiale, version mobile) */
  .site-header .drawer-silo__panel .group-subtitle{
    display:block;
    font-family:var(--font-serif, 'EB Garamond', Georgia, serif);
    font-style:italic;
    font-size:.92rem;
    color:#b5a47e;
    padding:.7rem 0 .25rem 1.2rem;
    margin-left:.4rem;
    letter-spacing:.01em;
  }
  .site-header .drawer-silo__panel ul.sub-list{ padding-left:1rem; }
  .site-header .drawer-silo__panel ul.sub-list a{
    font-size:.88rem;
    color:#b5a47e;
  }
  .site-header .drawer-silo__panel ul.sub-list a::before{
    content:"→ ";
    color:#d4a574;
  }

  /* === RESPONSIVE - détection tactile === */
  @media (hover: none), (pointer: coarse), (max-width:980px){
    .site-header .main-nav{ display:none; }
    .site-header .burger{ display:flex; }
    .site-header .btn-header{ display:none; }
    .site-header .container{ padding:0 1.2rem; }
  }
  @media (hover: hover) and (pointer: fine) and (min-width:981px){
    .site-header .drawer{ display:none !important; }
  }
  body.drawer-open{ overflow:hidden; }

  /* ════════════════════════════════════════════════════
     1ère ligne narrative non-cliquable (GS · Psy · Spi)
     ════════════════════════════════════════════════════ */
  .site-header .sub-nav li.menu-narrative,
  .site-header .drawer-silo__panel li.menu-narrative {
    list-style:none;
    padding:0;
    margin:0;
  }
  .site-header .menu-narrative-line {
    display:block;
    font-family:'EB Garamond', Georgia, serif;
    font-style:italic;
    font-size:.92em;
    color:rgba(212, 165, 116, .85);
    padding:.4rem .9rem;
    margin:0 0 .25rem 0;
    border-left:2px solid rgba(212, 165, 116, .35);
    user-select:none;
    cursor:default;
    letter-spacing:.02em;
    text-decoration:none;
    pointer-events:none;
  }

/* --- Grille geometrie (pages chiffre-3 a chiffre-9) --- */

.geometrie-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
   }
   .geometrie-card {
    background: #fefcf7;
    border: 1px solid rgba(212, 165, 116, 0.5);
    border-radius: 4px;
    padding: 1.1rem 1rem;
    text-align: center;
   }
   .geometrie-card img {
    max-width: 120px;
    height: auto;
    display: block;
    margin: 0 auto 0.6rem auto;
   }
   .geometrie-card h3 {
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    letter-spacing: 0.05em;
    margin: 0 0 0.4rem 0;
   }
   .geometrie-card p {
    font-family: 'EB Garamond', serif;
    font-size: 0.9em;
    line-height: 1.45;
    margin: 0;
   }
   @media (max-width: 700px) {
    .geometrie-grid { grid-template-columns: 1fr; }
   }
   .fiche-proprietes {
    background: #fefcf7;
    border: 1px solid rgba(212, 165, 116, 0.5);
    border-radius: 4px;
    padding: 1rem 1.3rem;
    margin: 1.2rem 0;
    font-family: 'EB Garamond', serif;
   }
   .fiche-proprietes p { margin: 0.4rem 0; }
   .fiche-proprietes .etiquette {
    font-family: 'Cinzel', serif;
    font-size: 0.78em;
    letter-spacing: 0.05em;
    color: #5a4a2a;
    margin-right: 0.4rem;
   }
   .regards-liste {
    font-family: 'EB Garamond', serif;
    line-height: 1.6;
   }
   .regards-liste p { margin: 0.35rem 0; }
   .regards-liste .regard {
    font-family: 'Cinzel', serif;
    font-size: 0.8em;
    letter-spacing: 0.04em;
    color: #5a4a2a;
    margin-right: 0.4rem;
   }

/* ============================================================
   COMPACTAGE HERO - regle commune (18/07/2026)
   Le contenu doit demarrer au meme endroit sur toutes les pages,
   visible sans scroll. Ecrase .page-hero et .hero-lead de
   style-commun.css (cascade: cette feuille est chargee apres).
   Avant: page-hero 4/6rem + margin 4rem, hero-lead 3rem chacun.
   ============================================================ */
.page-hero{ padding:2.5rem 0 2rem; margin-bottom:1.5rem; }
.hero-lead{ margin-bottom:1rem; }
.hero-badges{ margin-top:1.5rem; }
@media (max-width:1024px){
  .page-hero{ padding:2rem 0 1.5rem; margin-bottom:1.25rem; }
}

/* ============================================================
   TEST GLOBAL LISIBILITE (21/07/2026) - corps augmente site entier
   16px -> 18px : tout le texte en rem grandit de 12,5%.
   Pour annuler le test : supprimer ce bloc.
   ============================================================ */
html{ font-size:20px; }                       /* base rem : titres, menus, composants +25% */
body{ font-size:22px !important; }            /* corps de lecture : 18 -> 22px (+22%, visible) */
p, li{ font-size:1.1rem !important; line-height:1.75; }   /* 22px, prime sur toute regle locale */


/* ============================================================
   RESPIRATIONS & ANCRES (21/07/2026)
   ============================================================ */
.page-hero{ padding-top:3.8rem; }                          /* air entre header fixe et breadcrumb/eyebrow */
h1[id], h2[id], h3[id], section[id], div[id]{ scroll-margin-top:110px; }  /* ancres: atterrissage sous le header */

/* Secours vidéo pour navigateurs sans aspect-ratio (vieux Safari) */
@supports not (aspect-ratio: 16 / 9){
  .video-embed{ padding-top:56.25%; height:0; }
}

/* ═══ Barre des 9 nombres — bas des pages chiffre-N (v2026-07-25, autonome) ═══ */
.nav-nombres-bas { margin: 3.5rem 0 1rem; }
.nav-nombres-bas .nombres-strip {
  display: flex;
  min-width: max-content;
  border-top: 1px solid rgba(185, 146, 91, 0.35);
  border-bottom: 1px solid rgba(185, 146, 91, 0.35);
}
.nav-nombres-bas .nombre-item {
  display: flex; flex-direction: column; align-items: center;
  gap: .5rem; padding: 1.3rem 1rem;
  border-right: 1px solid rgba(185, 146, 91, 0.25);
  text-decoration: none; flex: 1;
  transition: background .3s ease;
}
.nav-nombres-bas .nombre-item:first-child { border-left: 1px solid rgba(185, 146, 91, 0.25); }
.nav-nombres-bas .nombre-item:hover { background: rgba(212, 165, 116, 0.12); }
.nav-nombres-bas .pastille-n {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.45rem; color: #5d5349;
  background: #faf6ec;
  border: 1px solid #8a6d3f;
}
.nav-nombres-bas .pastille-n.actif { background: #d4a574; color: #2a1f15; border-color: #8a6d3f; }

/* ── Menu bas précédente/suivante (cartouches) ── */
.pagenav { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:2.4rem 0 0.5rem; }
.pagenav a { display:block; text-decoration:none; color:inherit; background:#fefcf7; border:1px solid rgba(212,165,116,.5); border-radius:4px; padding:1rem 1.2rem; transition:box-shadow .2s ease, transform .2s ease; }
.pagenav a:hover { box-shadow:0 3px 12px rgba(93,83,73,.15); transform:translateY(-2px); }
.pagenav .pn-dir { font-family:'Cinzel',serif; font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:#b8925a; display:block; margin-bottom:.4rem; }
.pagenav .pn-title { font-family:'Cinzel',serif; font-size:1.02rem; letter-spacing:.04em; }
.pagenav .pn-sub { font-family:'EB Garamond',serif; font-style:italic; font-size:.88rem; color:#5d5349; margin-top:.3rem; display:block; }
.pagenav .pn-prev { grid-column:1; }
.pagenav .pn-next { grid-column:2; text-align:right; }
@media(max-width:600px){ .pagenav { grid-template-columns:1fr; } .pagenav .pn-prev, .pagenav .pn-next { grid-column:1; text-align:left; } }

/* ── Nav basse des familles de nombres figurés (variante avec libellé) ── */
.nav-nombres-bas .pastille-label { font-family:'Cinzel',serif; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:#5a4a2a; text-align:center; white-space:nowrap; }
.nav-nombres-bas--familles .nombre-item { padding:1.2rem 1rem; }

/* ── Pastilles des Instruments de la Volonté ── */
.instruments-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin:2rem 0 1rem; text-align:center; }
.instruments-grid figure { margin:0; }
.instruments-grid img { width:150px; height:150px; border-radius:50%; object-fit:cover; border:2px solid rgba(184,146,90,.55); box-shadow:0 2px 10px rgba(93,83,73,.15); }
.instruments-grid .instr-title { font-family:'Cinzel',serif; font-size:1rem; letter-spacing:.06em; margin-top:.8rem; color:var(--ink); }
.instruments-grid .instr-chain { font-family:'EB Garamond',serif; font-size:.92rem; font-style:italic; color:var(--ink-soft); margin-top:.4rem; line-height:1.55; }
@media(max-width:640px){ .instruments-grid { grid-template-columns:1fr !important; } }