/* ============================================================
   AKRAME — Pages légales (mentions + confidentialité)
   Ces deux pages partageaient jusqu'ici un bloc <style> identique,
   recopié dans chacune. Il vit désormais ici, en un seul endroit.
   S'ajoute la bascule français / anglais.
   ============================================================ */

.doc{ max-width:760px; margin:0 auto; padding:clamp(40px,7vw,90px) var(--pad); }
.doc h1{ font-family:var(--ff-serif); font-weight:500; font-size:clamp(30px,5vw,46px);
  color:var(--c-cream); margin:.5em 0 .2em; line-height:1.1; }
.doc h2{ font-family:var(--ff-serif); font-weight:500; color:var(--c-gold);
  font-size:1.5rem; margin:1.8em 0 .4em; }
.doc p{ color:var(--c-text); line-height:1.75; margin:.5em 0; }
.doc a{ color:var(--c-stone); }
.doc .muted{ color:var(--c-muted); font-size:.9rem; }
.doc hr{ border:0; border-top:1px solid var(--c-border); margin:2em 0; }

/* ---------- Barre haute : retour + bascule de langue ---------- */
.legalbar{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:760px; margin:0 auto; padding:clamp(18px,3.4vw,30px) var(--pad) 0; }
.back{ font-size:11px; letter-spacing:var(--ls-mid); text-transform:uppercase;
  color:var(--c-stone); }
.back:hover{ color:var(--c-cream); }

/* Reprise à l'identique de la bascule de la page d'accueil, pour que le
   visiteur retrouve le même objet au même endroit. */
.lang{ display:inline-flex; align-items:center; gap:2px;
  border:1px solid rgba(200,168,122,.32); border-radius:var(--radius); padding:4px;
  background:rgba(8,6,4,.28); }
.lang__btn{ font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--c-muted); padding:5px 11px; border-radius:var(--radius);
  transition:.25s var(--ease); }
.lang__btn[aria-pressed="true"]{ background:var(--c-gold); color:var(--c-noir); }
.lang__btn:hover{ color:var(--c-cream); }
.lang__btn[aria-pressed="true"]:hover{ color:var(--c-noir); }

/* ---------- Bascule de langue ----------
   Le français est servi par défaut : si le script ne s'exécute pas, la page
   reste lisible et complète, dans la langue qui fait foi. L'anglais n'apparaît
   que lorsque <html> porte la classe « en ». */
[data-en]{ display:none; }
html.en [data-fr]{ display:none; }
html.en [data-en]{ display:revert; }