/* ==================================================================
   DRAREK — ossature de page : bandeau collant, héros asymétrique,
   socle commun des sections, rejoindre, pied.
   Les blocs de contenu (système, monde, tables) sont dans blocs.css.
   Aucune media query : clamp(), flex-wrap et grid auto-fit (validé 380px).
   ================================================================== */

/* ---------------- 1. Bandeau (collant) ---------------- */
.bandeau{
  position:sticky; top:0; z-index:60;
  background:rgba(6,11,8,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(226,144,63,.18);
  transition:padding .3s ease, background .3s ease, box-shadow .3s ease;
}
/* Au-delà de 60px de défilement le bandeau se densifie (posé par mouvement.js). */
.bandeau.est-dense{
  background:rgba(6,11,8,.96);
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}
/* Barre de progression de lecture. */
.progres{
  position:absolute; left:0; top:0; height:2px; width:0;
  background:linear-gradient(90deg, rgba(226,144,63,.2), var(--braise));
  box-shadow:0 0 10px rgba(226,144,63,.6);
  transition:width .12s linear;
}
.bandeau__i{
  max-width:var(--max); margin:0 auto; padding:12px var(--gout);
  display:flex; align-items:center; gap:18px;
}
.sceau{ text-decoration:none; flex:0 0 auto; }
.sceau__nom{
  display:block;
  font-family:var(--titre); font-weight:900; font-size:18px;
  letter-spacing:.3em;
}
.sceau__baseline{
  display:block; margin-top:2px;
  font-family:var(--mono); font-weight:700; font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cendre);
}
.sceau:hover .sceau__baseline{ color:var(--braise); }
/* Nav en mono : le marqueur de cette direction. Pas de burger, elle wrap. */
.bandeau nav{
  margin-left:auto; display:flex; flex-wrap:wrap;
  justify-content:flex-end; gap:clamp(12px,2.2vw,28px);
}
.bandeau nav a{
  font-family:var(--mono); font-weight:700; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--cendre); text-decoration:none;
  transition:color .18s ease;
}
.bandeau nav a:hover{ color:var(--braise); }
.bandeau nav a.est-fort{ color:var(--braise); }
.bandeau nav a.est-fort:hover{ color:var(--braise-haut); }

/* ---------------- 2. Héros — asymétrique ----------------
   Trois calques de fond : halo vert à gauche, lueur de forge à droite,
   dégradé de nuit par dessous. */
.heros{
  position:relative; overflow:hidden;
  padding:clamp(28px,5vw,64px) var(--gout) clamp(52px,7vw,96px);
  background:
    radial-gradient(760px 520px at 12% 22%, var(--halo-foret) 0%, transparent 64%),
    radial-gradient(600px 400px at 88% 78%, rgba(124,58,22,.22) 0%, transparent 70%),
    linear-gradient(180deg, var(--foret), var(--nuit));
}
.heros::after{ opacity:.5; }  /* grain de pierre plus présent ici */
.heros__i{
  position:relative; max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
  gap:clamp(20px,4vw,64px); align-items:center;
}
/* Le JPEG du logo est fondu dans le fond par un masque radial.
   Au repos il flotte ; mouvement.js le décale à la souris (parallaxe). */
.heros__sceau{
  width:min(560px,92vw);
  animation:fg-float 11s ease-in-out infinite;
  will-change:transform;
  -webkit-mask-image:radial-gradient(closest-side ellipse at 50% 50%, #000 48%, transparent 94%);
          mask-image:radial-gradient(closest-side ellipse at 50% 50%, #000 48%, transparent 94%);
}
.heros__sur{
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-weight:700; font-size:11px;
  letter-spacing:.28em; text-transform:uppercase; color:var(--braise);
}
.heros__sur::before{
  content:""; width:26px; height:1px; background:var(--braise); flex:0 0 auto;
}
.heros__accroche{
  font-weight:900; font-size:clamp(34px,5.6vw,72px);
  line-height:.98; letter-spacing:-.01em;
  margin:18px 0 0; max-width:15ch; text-wrap:balance;
}
.heros__sous{
  max-width:46ch; margin:24px 0 32px;
  font-size:19px; line-height:1.7; color:rgba(226,218,203,.78); text-wrap:pretty;
}
.heros__actions{ display:flex; flex-wrap:wrap; gap:14px; }
.heros__compte{
  margin:30px 0 0; padding-top:18px;
  border-top:1px solid rgba(166,139,110,.2);
  display:flex; flex-wrap:wrap; gap:8px 20px;
  font-family:var(--mono); font-weight:700; font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cendre);
}
.heros__compte b{ color:var(--braise); font-weight:700; }

/* ---------------- Sections 4-7 : socle commun ---------------- */
.sec{ position:relative; padding:var(--pad-sec) var(--gout); }
.sec__i{ position:relative; max-width:var(--max); margin:0 auto; }
.sec--plate{ background:var(--section-plate); }
.sec--foret{
  background:linear-gradient(180deg, var(--nuit), var(--foret-monde) 50%, var(--nuit));
}
.sec__t{
  font-weight:900; font-size:clamp(32px,5.4vw,60px);
  line-height:1; max-width:16ch; margin:0 0 clamp(34px,5vw,56px);
}
.sec__t--large{ max-width:18ch; }
/* Quand un chapô suit le titre, le titre respire moins. */
.sec__t--chapo{ margin-bottom:18px; }
.sec__c{
  max-width:52ch; margin:0 0 clamp(30px,4vw,48px);
  font-size:18px; color:rgba(226,218,203,.72); text-wrap:pretty;
}

/* ---------------- 7. Rejoindre ---------------- */
.rejoindre{ background:linear-gradient(180deg, var(--nuit), var(--bas-rejoindre)); }
.rejoindre__i{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  gap:clamp(32px,5vw,72px);
}
.rejoindre .eti{ margin-bottom:12px; }
.rejoindre h2{
  font-weight:900; font-size:clamp(26px,3.6vw,40px);
  line-height:1.05; margin:0 0 14px;
}
.rejoindre__intro{ margin:0; color:rgba(226,218,203,.72); text-wrap:pretty; }
.note{ font-size:14.5px; margin-top:12px; color:var(--cendre); }
.note--ok{ color:var(--v-reussite); }

.canaux{ display:flex; flex-direction:column; gap:10px; margin-top:22px; }
.canal{
  display:flex; align-items:center; gap:18px;
  padding:18px 20px;
  background:rgba(255,255,255,.02);
  border-left:2px solid rgba(226,144,63,.5);
  color:var(--os); text-decoration:none;
  transition:background .2s ease, transform .2s ease;
}
.canal:hover{
  background:rgba(226,144,63,.1); transform:translateX(3px); color:var(--os);
}
.canal--calme{ border-left-color:rgba(166,139,110,.3); }
.canal--calme:hover{ background:rgba(166,139,110,.08); }
.canal b{ display:block; font-family:var(--titre); font-weight:700; font-size:19px; }
.canal span span{ font-size:15px; color:var(--cendre); }
.canal em{
  margin-left:auto; font-style:normal; white-space:nowrap;
  font-family:var(--mono); font-weight:700; font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--braise);
}
.canal--calme em{ color:var(--bronze); }

/* ---------------- Pied ---------------- */
.pied{
  background:var(--nuit); padding:42px var(--gout);
  border-top:1px solid rgba(166,139,110,.14);
}
.pied__i{
  max-width:var(--max); margin:0 auto;
  display:flex; flex-wrap:wrap; gap:16px 28px;
  justify-content:space-between; align-items:center;
  font-size:14.5px; color:var(--cendre);
}
.pied__liens{ display:flex; flex-wrap:wrap; gap:22px; }
.pied a{ color:var(--cendre); text-decoration:none; transition:color .18s ease; }
.pied a:hover{ color:var(--braise); }