/* Pages légales — mentions légales et politique de confidentialité.
   Volontairement autonomes : elles ne chargent ni script.js ni le contenu du
   tableau de bord. Un document juridique doit rester lisible même quand le
   reste du site ne l'est pas, et son texte n'a pas à dépendre d'un magasin
   distant qui peut être indisponible. */

:root {
  --navy: #10166f;
  --navy-deep: #080c3e;
  --ivory: #f3efe6;
  --paper: #fbfaf7;
  --white: #fff;
  --gold: #b99d6a;
  --gold-encre: #7d6430;
  --text: #22232c;
  --muted: #6e6d73;
  --line: rgba(16, 22, 111, 0.16);
  --display: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------- en-tête */

.legal-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 32px;
  background: var(--navy-deep);
}

.legal-entete img {
  width: 132px;
  /* Le logotype est bleu marine : sans inversion il disparaît sur le fond
     sombre de l'en-tête. Même traitement que dans le pied de page du site. */
  filter: brightness(0) invert(1);
}

.legal-entete-droite {
  display: flex;
  align-items: center;
  gap: 22px;
}

.legal-retour {
  color: var(--white);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 3px;
}

.legal-retour:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* Bascule entre la version française et la version arabe du même document. */
.legal-langues {
  display: flex;
  gap: 4px;
}

.legal-langues a,
.legal-langues span {
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.6);
}

.legal-langues a:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
}

/* La langue affichée est marquée par un `span`, pas par un lien : un lien qui
   mène à la page courante n'a rien à proposer au lecteur. */
.legal-langues span {
  color: var(--navy-deep);
  background: var(--gold);
  font-weight: 600;
}

/* ------------------------------------------------------------------ corps */

.legal-corps {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 26px 88px;
}

.legal-surtitre {
  margin: 0 0 10px;
  color: var(--gold-encre);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: clamp(34px, 6vw, 52px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--navy);
  text-wrap: balance;
}

.legal-chapeau {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 20px;
  font-style: italic;
  color: var(--muted);
  max-width: 60ch;
}

.legal-maj {
  margin: 0 0 44px;
  font-size: 13px;
  color: var(--muted);
}

/* La numérotation porte une information : un document juridique se cite par
   ses articles, et le lecteur doit pouvoir renvoyer à l'un d'eux. */
.legal-corps section {
  counter-increment: article;
  margin-bottom: 38px;
}

.legal-corps {
  counter-reset: article;
}

h2 {
  display: flex;
  gap: 12px;
  margin: 0 0 12px;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.01em;
}

h2::before {
  content: counter(article, decimal-leading-zero);
  flex: none;
  color: var(--gold);
  font-size: 13px;
  font-weight: 500;
  padding-top: 3px;
  font-variant-numeric: tabular-nums;
}

.legal-corps p {
  margin: 0 0 12px;
  max-width: 68ch;
}

.legal-corps ul {
  margin: 0 0 12px;
  padding-left: 20px;
  max-width: 68ch;
}

.legal-corps li {
  margin-bottom: 6px;
}

.legal-corps a {
  color: var(--navy);
  text-underline-offset: 3px;
}

.legal-corps a:hover {
  color: var(--gold-encre);
}

dl.legal-fiche {
  display: grid;
  grid-template-columns: minmax(150px, 200px) 1fr;
  gap: 8px 22px;
  margin: 0 0 14px;
  padding: 20px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  max-width: 68ch;
}

dl.legal-fiche dt {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

dl.legal-fiche dd {
  margin: 0;
}

@media (max-width: 620px) {
  dl.legal-fiche {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  dl.legal-fiche dt {
    margin-top: 10px;
  }
}

/* Les valeurs que seul le cabinet peut fournir. Signalées de façon voyante
   pour qu'un oubli saute aux yeux en relecture plutôt que de partir en ligne. */
.a-completer {
  background: #fdf1c9;
  color: #6b4d05;
  border: 1px dashed #c9a227;
  border-radius: 3px;
  padding: 1px 7px;
  font-size: 14px;
  font-weight: 600;
}

/* ------------------------------------------------------------------- pied */

.legal-pied {
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding: 26px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
}

.legal-pied a {
  color: var(--navy);
}

/* ------------------------------------------------------------------ arabe */

/* Cormorant Garamond ne couvre pas l'arabe : sans cette bascule le navigateur
   choisirait seul un caractère de repli, différent d'une machine à l'autre.
   Tahoma est le même repli que celui retenu par le site public. */
html[dir="rtl"] body,
html[dir="rtl"] h1,
html[dir="rtl"] .legal-chapeau {
  font-family: Tahoma, Arial, sans-serif;
}

html[dir="rtl"] h1 {
  font-weight: 700;
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.35;
}

html[dir="rtl"] .legal-chapeau {
  font-style: normal;
  font-size: 17px;
}

html[dir="rtl"] .legal-corps ul {
  padding-left: 0;
  padding-right: 20px;
}

html[dir="rtl"] dl.legal-fiche {
  border-left: 1px solid var(--line);
  border-right: 3px solid var(--gold);
}

html[dir="rtl"] .legal-surtitre,
html[dir="rtl"] dl.legal-fiche dt,
html[dir="rtl"] .legal-langues a,
html[dir="rtl"] .legal-langues span,
html[dir="rtl"] .legal-retour {
  letter-spacing: normal;
}

/* Les numéros d'article restent lus de gauche à droite au sein d'une ligne
   arabe : sans cela « 01 » peut se retrouver collé au mauvais bout du titre. */
html[dir="rtl"] h2::before {
  direction: ltr;
  unicode-bidi: isolate;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}