/* =========================================================================
   PAGES LÉGALES — VizoraMail
   Feuille de style des pages publiques « Politique de confidentialité »
   (confidentialite.html, FR) et « Privacy Policy » (privacy.html, EN).
   Reprend l'identité visuelle de la landing : marine + teal, Inter/Josefin.
   ========================================================================= */
:root {
  --navy:        #1f3a5f;
  --navy-fonce:  #16293f;
  --navy-nuit:   #0e1c2e;
  --navy-clair:  #2c4f7c;
  --teal:        #2dd4bf;
  --teal-fonce:  #14b8a6;
  --texte:       #1f2937;
  --texte-doux:  #5b6675;
  --fond:        #f7f9fb;
  --carte:       #ffffff;
  --bordure:     #e3e8ee;
  --rayon:       16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body.legale {
  font-family: "Inter", system-ui, "Segoe UI", Arial, sans-serif;
  background: var(--fond);
  color: var(--texte);
  line-height: 1.7;
}

.conteneur {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

/* =========================================================================
   BARRE DE NAVIGATION (fond marine permanent, version simplifiée)
   ========================================================================= */
.nav-legale {
  background: var(--navy-nuit);
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 2px 14px rgba(14, 28, 46, .25);
}

.nav-legale .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo-landing {
  font-family: "Josefin Sans", system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
  color: #fff;
}
.logo-landing .v     { font-size: 30px; color: var(--teal); margin-right: 1px; }
.logo-landing .reste { font-size: 20px; font-weight: 300; color: #fff; }
.logo-landing .mail  { font-size: 20px; font-weight: 400; color: var(--teal); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.lien-retour {
  color: rgba(255, 255, 255, .8);
  text-decoration: none;
  font-size: 14px;
}
.lien-retour:hover { color: #fff; }

.pilule-langue {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(45, 212, 191, .55);
  color: var(--teal);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.pilule-langue:hover { background: var(--teal); color: var(--navy-nuit); }

/* =========================================================================
   CORPS DU DOCUMENT
   ========================================================================= */
.page-legale { padding: 56px 24px 80px; }

.fil-ariane {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--teal-fonce);
  margin-bottom: 10px;
}

.page-legale h1 {
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1.15;
  color: var(--navy-fonce);
  margin-bottom: 8px;
}

.maj {
  color: var(--texte-doux);
  font-size: 14px;
  margin-bottom: 34px;
}

/* --- Encadré « l'essentiel en bref » --- */
.resume {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--teal);
  border-radius: var(--rayon);
  padding: 24px 28px;
  margin-bottom: 36px;
}
.resume h2 {
  font-size: 17px;
  color: var(--navy-fonce);
  margin-bottom: 12px;
}
.resume ul { padding-left: 20px; }
.resume li { margin-bottom: 7px; }

/* --- Sommaire --- */
.sommaire {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 24px 28px;
  margin-bottom: 44px;
}
.sommaire h2 {
  font-size: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-bottom: 12px;
}
.sommaire ol {
  padding-left: 22px;
  columns: 2;
  column-gap: 40px;
}
.sommaire li { margin-bottom: 6px; break-inside: avoid; }
.sommaire a { color: var(--navy-clair); text-decoration: none; }
.sommaire a:hover { color: var(--teal-fonce); text-decoration: underline; }

/* --- Sections --- */
.page-legale section { margin-bottom: 42px; }

.page-legale section h2 {
  font-size: 22px;
  color: var(--navy-fonce);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--bordure);
  margin-bottom: 16px;
  scroll-margin-top: 90px;   /* la barre sticky ne masque pas le titre ciblé */
}
.page-legale section h2 .num { color: var(--teal-fonce); margin-right: 8px; }

.page-legale section h3 {
  font-size: 16px;
  color: var(--navy);
  margin: 20px 0 8px;
}

.page-legale p { margin-bottom: 12px; }
.page-legale ul, .page-legale ol { padding-left: 24px; margin-bottom: 14px; }
.page-legale li { margin-bottom: 7px; }
.page-legale a { color: var(--teal-fonce); }
.page-legale strong { color: var(--navy-fonce); }

/* --- Tableau des catégories de données --- */
.tableau-donnees {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 18px;
  font-size: 14.5px;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 10px;
  overflow: hidden;
}
.tableau-donnees th {
  background: var(--navy);
  color: #fff;
  text-align: left;
  padding: 10px 14px;
  font-weight: 600;
}
.tableau-donnees td {
  padding: 10px 14px;
  border-top: 1px solid var(--bordure);
  vertical-align: top;
}

/* --- Encadré Limited Use (déclaration exigée par Google) --- */
.encart-important {
  background: #eefcf9;
  border: 1px solid rgba(20, 184, 166, .35);
  border-left: 4px solid var(--teal-fonce);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 18px 0;
}
.encart-important p { margin-bottom: 10px; }
.encart-important p:last-child { margin-bottom: 0; }
.encart-important .vo {
  font-style: italic;
  color: var(--texte-doux);
  font-size: 14px;
}

/* =========================================================================
   PIED DE PAGE
   ========================================================================= */
.pied-legale {
  background: var(--navy-nuit);
  color: rgba(255, 255, 255, .75);
  padding: 26px 0;
  font-size: 14px;
}
.pied-legale .pied-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.pied-legale a { color: var(--teal); text-decoration: none; }
.pied-legale a:hover { text-decoration: underline; }

/* =========================================================================
   RESPONSIVE + IMPRESSION
   ========================================================================= */
@media (max-width: 640px) {
  .sommaire ol { columns: 1; }
  .page-legale { padding: 40px 16px 60px; }
  .tableau-donnees { display: block; overflow-x: auto; }
}

@media print {
  .nav-legale, .pied-legale, .sommaire { display: none; }
  body.legale { background: #fff; }
  .page-legale { padding: 0; }
}

/* =========================================================================
   SÉLECTEUR DE LANGUE (FR / EN / AR)
   ========================================================================= */
.selecteur-langue {
  display: inline-flex;
  gap: 3px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  padding: 4px;
}
.selecteur-langue a {
  color: #cfe0f5;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  transition: background .15s, color .15s;
  line-height: 1.4;
}
.selecteur-langue a:hover { color: #fff; }
.selecteur-langue a.actif {
  background: var(--teal);
  color: var(--navy-nuit);
}

/* =========================================================================
   VERSION ARABE — ajustements droite-à-gauche (dir="rtl" sur <html>)
   ========================================================================= */
[dir="rtl"] body.legale,
html[dir="rtl"] .page-legale {
  font-family: "Tajawal", "Inter", system-ui, "Segoe UI", Arial, sans-serif;
}

/* L'arabe ne supporte pas l'interlettrage (les lettres sont liées). */
[dir="rtl"] .fil-ariane,
[dir="rtl"] .sommaire h2 { letter-spacing: 0; }

/* Bordures d'accent : côté droit en RTL. */
[dir="rtl"] .resume,
[dir="rtl"] .encart-important {
  border-left-width: 1px;
  border-right: 4px solid var(--teal-fonce);
}
[dir="rtl"] .resume { border-right-color: var(--teal); }

/* Retraits de listes : miroir des padding physiques déclarés plus haut. */
[dir="rtl"] .resume ul { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .sommaire ol { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .page-legale ul,
[dir="rtl"] .page-legale ol { padding-left: 0; padding-right: 24px; }

/* Tableau et numérotation des titres. */
[dir="rtl"] .tableau-donnees th { text-align: right; }
[dir="rtl"] .page-legale section h2 .num { margin-right: 0; margin-left: 8px; }