/* ============================================================
   OPTIVVIA — pages légales (mentions, confidentialité)
   Feuille autonome : ces pages ne passent pas par le canevas fixe de 1440 px de
   la vitrine. Elles sont fluides et lisibles sur téléphone, ce qui est le
   minimum attendu d'une page d'information légale.
   ============================================================ */

:root{
  --blue:#2f6bff;
  --blue-dark:#1f5486;
  --ink:#27292b;
  --gray:#5b6068;
  --line:#e6e6e6;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  color:var(--ink);background:#fff;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* Barre d'en-tête : la marque seule faisait office de retour, mais rien ne le
   signalait. Les deux boutons rendent la sortie explicite — retour au site, et
   passage direct à l'autre page légale. */
.legal-header{
  border-bottom:1px solid var(--line);
  padding:14px 24px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px 20px;
}
.legal-header__marque{
  display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;color:var(--blue-dark);
  font-size:18px;letter-spacing:3px;text-transform:uppercase;
}
/* Même marque qu'en page d'accueil, et non un point bleu : ces pages sont
   atteintes depuis le pied de page, la continuité visuelle est le seul repère
   qui dit qu'on est toujours chez Optivvia. La classe et la taille reprennent
   celles de styles.css, que ces pages ne chargent pas. */
.legal-header .wordmark__mark{
  width:26px;height:26px;flex:0 0 auto;
  display:block;object-fit:contain;
}

.legal-header__nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.legal-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:40px;padding:8px 16px;border-radius:10px;
  border:1px solid var(--line);background:#fff;
  font-size:15px;line-height:1.2;text-decoration:none;color:var(--blue-dark);
  transition:background .15s, border-color .15s, color .15s;
}
.legal-btn:hover{background:#f0f6ff;border-color:var(--blue);}
.legal-btn--retour{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600;}
.legal-btn--retour:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff;}
/* bascule de langue : deux lettres, elle ne doit pas s'etirer comme les autres */
.legal-btn--langue{flex:0 0 auto;font-weight:700;letter-spacing:.5px;padding:8px 14px;}

/* Sous 560 px, marque et boutons ne tiennent plus sur une ligne : les boutons
   passent en dessous et se partagent la largeur, en cibles tactiles pleines. */
@media (max-width:560px){
  .legal-header{padding:12px 16px;}
  .legal-header .wordmark__mark{width:22px;height:22px;}
  /* stretch : le libellé le plus long passe sur deux lignes, sans quoi les deux
     boutons n'auraient pas la même hauteur */
  .legal-header__nav{width:100%;gap:8px;align-items:stretch;}
  .legal-btn{flex:1;font-size:14px;padding:8px 10px;}
}

.legal{
  max-width:780px;margin:0 auto;padding:40px 24px 72px;
}
.legal h1{
  font-size:clamp(28px,5vw,40px);line-height:1.2;margin:0 0 8px;font-weight:700;
}
.legal .maj{color:var(--gray);font-size:14px;margin:0 0 40px;}

/* Avertissement de traduction de courtoisie. Seule la version francaise a
   valeur juridique : la mention doit se voir sans ecraser le texte, d'ou le
   filet lateral plutot qu'un encadre. */
.legal-avis{
  margin:0 0 36px;padding:12px 0 12px 16px;
  border-left:3px solid var(--blue);
  background:#f0f6ff;border-radius:0 8px 8px 0;
  font-size:15px;color:var(--gray);
}
.legal-avis a{color:var(--blue-dark);font-weight:600;}
.legal h2{
  font-size:clamp(19px,3vw,23px);line-height:1.3;margin:40px 0 12px;
  font-weight:700;color:var(--blue-dark);
}
.legal p,.legal li{font-size:16px;}
.legal ul{padding-left:22px;margin:12px 0;}
.legal li{margin-bottom:8px;}
.legal a{color:var(--blue);}
.legal dl{margin:12px 0;}
.legal dt{font-weight:600;margin-top:12px;}
.legal dd{margin:0 0 0 0;color:var(--gray);}

/* tableau des durées : défile horizontalement plutôt que de déborder la page */
.legal-table-wrap{overflow-x:auto;margin:16px 0;}
.legal table{border-collapse:collapse;width:100%;min-width:420px;font-size:15px;}
.legal th,.legal td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;}
.legal th{background:#f0f6ff;font-weight:600;}

.legal-footer{
  border-top:1px solid var(--line);
  max-width:780px;margin:0 auto;padding:24px;
  font-size:14px;color:var(--gray);
  display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;
}
.legal-footer a{color:var(--blue-dark);}