/* ============================================================
   Gabarit Règles — /regles/
   Repris de maquettes/maquette-regles-byu-france.html (parties propres à la page).
   ============================================================ */
h2{font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:800;font-stretch:112%;line-height:1.05;letter-spacing:-.015em}
h3{font-size:1.08rem;font-weight:700}
.intro{color:var(--gris);font-size:1.04rem;margin-top:12px;max-width:82ch}

/* Tête de page */
.tete-page{background:var(--nuit);color:var(--papier);position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(38px,6vw,68px) 0 clamp(34px,5vw,56px)}
.tete-page::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--photo-hero);
  background-size:cover;background-position:center 38%;
  filter:grayscale(1) contrast(1.08);
  opacity:var(--opacite-hero,.8);
}
/* Voile bleu nuit : plus dense à gauche, là où se trouve le titre */
.tete-page::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(11,27,57,.94) 0%,
    rgba(11,27,57,.80) 40%,
    rgba(11,27,57,.52) 68%,
    rgba(11,27,57,.78) 100%);
}
.tete-page .wrap{position:relative;z-index:1}
.fil{font-size:.85rem;color:#9FB4E8;margin-bottom:20px}
.fil a{text-decoration:none}
.fil a:hover{color:#fff}
.fil span{margin:0 8px;opacity:.5}
.tete-page h1{font-weight:900;font-stretch:118%;line-height:.95;letter-spacing:-.03em;
  font-size:clamp(2.1rem,5.2vw,3.6rem);max-width:16ch}
.tete-page .chapeau{margin-top:18px;color:#C6CEE0;font-size:1.06rem;max-width:76ch}
.source{margin-top:26px;font-size:.88rem;color:#9FB4E8;border-left:3px solid var(--rouge);padding-left:16px;max-width:80ch}
.source a{color:#fff}

/* Bandeau règle unique */
.unique{background:var(--rouge);color:#fff}
.unique .wrap{padding:26px var(--gouttiere);display:flex;gap:18px;align-items:baseline;flex-wrap:wrap}
.unique p{font-weight:800;font-stretch:112%;font-size:clamp(1.1rem,2.6vw,1.7rem);max-width:none}
.unique span{font-size:.9rem;opacity:.88;font-weight:500}

section{padding:clamp(48px,6.5vw,84px) 0}
.tete{margin-bottom:34px}

/* L'esprit */
.esprit .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:start}
.esprit p + p{margin-top:14px}
.esprit .intro + p{margin-top:14px}
.encadre{background:#fff;border:1px solid var(--trait);border-left:4px solid var(--bleu);padding:24px}
.encadre h3{margin-bottom:10px}
.encadre p{font-size:.96rem;color:var(--gris)}
.encadre p + p{margin-top:12px}

/* Les règles */
.regles{background:#fff;border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.bloc-regle{border-top:2px solid var(--encre);padding:26px 0 30px;display:grid;
  grid-template-columns:56px 1fr;gap:24px;align-items:start}
.bloc-regle .num{font-style:italic;font-weight:900;font-stretch:118%;font-size:2.6rem;line-height:.9;
  color:var(--bleu)}
.bloc-regle h3{font-size:1.35rem;font-weight:800;font-stretch:110%;margin-bottom:12px}
.bloc-regle ul{list-style:none}
.bloc-regle li{padding:9px 0 9px 26px;position:relative;border-bottom:1px solid var(--trait);font-size:.98rem}
.bloc-regle li:last-child{border-bottom:none}
.bloc-regle li::before{content:"";position:absolute;left:4px;top:19px;width:8px;height:8px;
  background:var(--rouge);border-radius:50%}
.bloc-regle li b,.bloc-regle li strong{font-weight:700}
.precision{margin-top:12px;font-size:.88rem;color:var(--gris);padding-left:26px}

/* Backyard 24 */
.b24{background:var(--nuit);color:var(--papier)}
.b24 h2{color:var(--papier)}
.b24 .intro{color:#9FB4E8}
.b24 ul{list-style:none;margin-top:28px;border-top:1px solid rgba(159,180,232,.3)}
.b24 li{padding:14px 0 14px 26px;border-bottom:1px solid rgba(159,180,232,.16);position:relative;font-size:.98rem}
.b24 li::before{content:"";position:absolute;left:4px;top:23px;width:8px;height:8px;
  background:var(--rouge);border-radius:50%}

/* Glossaire */
.glossaire{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--trait);
  border:1px solid var(--trait);margin-top:8px}
.mot{background:var(--papier);padding:22px}
.mot b{display:block;font-weight:900;font-style:italic;font-stretch:112%;font-size:1.2rem;
  color:var(--bleu);margin-bottom:6px}
.mot p{font-size:.93rem;color:var(--gris)}

/* Appel */
.appel{background:#fff;border-top:1px solid var(--trait)}
.appel .wrap{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;
  padding:clamp(34px,5vw,54px) var(--gouttiere)}

@media (max-width:900px){
  .esprit .wrap,.appel .wrap{grid-template-columns:1fr}
  .glossaire{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .glossaire{grid-template-columns:1fr}
  .bloc-regle{grid-template-columns:1fr;gap:8px}
  .bloc-regle .num{font-size:2rem}
}