/* Feuille de style des pages légales (mentions légales, confidentialité, cookies) et de la page 404.
   Reprend les variables, la typo et le pied de page de index.html : deux couleurs de marque
   uniquement (navy, mint), Outfit seule. Toute évolution du pied de page de index.html est à
   reporter ici, dans les trois pages et dans 404.html. */

@font-face { font-family:"Outfit"; src:url("../fonts/Outfit-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Outfit"; src:url("../fonts/Outfit-Medium.ttf") format("truetype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Outfit"; src:url("../fonts/Outfit-SemiBold.ttf") format("truetype"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Outfit"; src:url("../fonts/Outfit-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Outfit"; src:url("../fonts/Outfit-ExtraBold.ttf") format("truetype"); font-weight:800; font-style:normal; font-display:swap; }

:root{
  --navy:#030732;
  --mint:#66FF99;
  --navy-deep:color-mix(in srgb, var(--navy) 80%, black 20%);
  --mint-deep:color-mix(in srgb, var(--mint) 78%, var(--navy) 22%);
  --white:#FFFFFF;
  --paper:#F6F7FA;
  --paper-2:#EEF0F6;
  --border:#E3E5EC;
  --border-dark:rgba(255,255,255,.14);
  --text-muted:#6B6F80;
  --text-muted-dark:rgba(255,255,255,.68);
  --text-body:color-mix(in srgb, var(--navy) 82%, white 18%);
  --ease:cubic-bezier(.16,.84,.44,1);
  --gap:clamp(1.25rem, 5vw, 3rem);
  --container-max:min(85rem, 90vw);
  --container-pad:clamp(1.25rem, 4vw, 3.5rem);
  --logo-h:clamp(4.5rem, 10vw, 6.5rem);
}
@media (max-width:899px){ :root{ --container-max:94vw; } }

/* Même échelle que index.html : 16px sous 900px, 14.4px sur PC portable, croissance douce au-delà. */
html{ font-size:16px; }
@media (min-width:900px){ html{ font-size:14.4px; } }
@media (min-width:1440px){
  html{ font-size:clamp(14.4px, calc(14.4px + (min(100vw, 1920px) - 1440px) * .0027 + (max(100vw, 1920px) - 1920px) * .005), 26px); }
}

*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0;
  font-family:"Outfit", system-ui, sans-serif;
  color:var(--navy);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p{ margin:0; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

.container{ max-width:var(--container-max); margin:0 auto; padding:0 var(--container-pad); }
.eyebrow{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-size:0.8125rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--navy);
}
.eyebrow::before{ content:""; width:0.375rem; height:0.375rem; border-radius:50%; background:var(--mint); flex:none; }

/* ============ En-tête simplifié : logo + retour au site ============ */
.legal-header{ padding:1rem 0; border-bottom:1px solid var(--border); }
.legal-header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.legal-logo{ display:inline-flex; padding:0.5rem 0; }
/* Marges négatives : rognent les marges internes du SVG, comme .navbar-logo img dans index.html. */
.legal-logo img{
  height:var(--logo-h); width:auto; max-width:none;
  margin:calc(var(--logo-h) * -.276) calc(var(--logo-h) * -.366) calc(var(--logo-h) * -.289) calc(var(--logo-h) * -.369);
}
.legal-back{
  display:inline-flex; align-items:center; gap:0.5rem; min-height:2.75rem;
  padding:0.625rem 1.25rem; border-radius:999px; border:1px solid var(--border); background:var(--white);
  font-size:0.875rem; font-weight:600; color:var(--navy); white-space:nowrap;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.legal-back:hover{ border-color:var(--navy); transform:translateX(-0.125rem); }
.legal-back svg{ flex:none; }

/* ============ Contenu ============ */
.legal{ padding:4rem 0 6rem; }
.legal-inner{ max-width:48rem; margin:0 auto; }
.legal h1{ margin-top:1rem; font-size:clamp(2rem, 4vw, 2.9rem); font-weight:800; line-height:1.12; letter-spacing:-.02em; }
.legal-updated{ margin-top:0.875rem; font-size:0.875rem; color:var(--text-muted); }
.legal h2{ margin-top:3rem; font-size:1.3rem; font-weight:700; line-height:1.3; letter-spacing:-.01em; }
.legal p, .legal li{ font-size:1rem; line-height:1.7; color:var(--text-body); }
.legal p{ margin-top:0.875rem; }
.legal h1 + .legal-updated + p{ margin-top:2rem; }
.legal ul{ margin:0.875rem 0 0; padding-left:1.25rem; }
.legal li{ margin-top:0.375rem; padding-left:0.25rem; }
.legal li::marker{ color:var(--mint-deep); }
.legal strong{ font-weight:600; color:var(--navy); }
.legal-inner a{
  color:var(--navy); text-decoration:underline; text-decoration-color:var(--mint-deep);
  text-decoration-thickness:2px; text-underline-offset:0.2em; overflow-wrap:anywhere;
}
.legal-inner a:hover{ text-decoration-color:var(--navy); }
.legal code{
  font-family:inherit; font-weight:600; font-size:0.9em; color:var(--navy);
  background:var(--paper-2); padding:0.0625rem 0.375rem; border-radius:0.25rem;
}

/* Les tableaux défilent horizontalement dans leur cadre sur petit écran, sans élargir la page. */
.legal-table-wrap{ margin-top:1.25rem; overflow-x:auto; border:1px solid var(--border); border-radius:0.875rem; background:var(--white); }
.legal table{ width:100%; min-width:36rem; border-collapse:collapse; font-size:0.9063rem; }
.legal th{ text-align:left; font-weight:600; color:var(--white); background:var(--navy); padding:0.75rem 1rem; }
.legal td{ padding:0.75rem 1rem; border-top:1px solid var(--border); vertical-align:top; line-height:1.55; color:var(--text-body); }

a:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; border-radius:0.25rem; }
.site-footer a:focus-visible{ outline-color:var(--mint); }

@media (max-width:560px){
  .legal{ padding:2.75rem 0 4rem; }
  .legal-back{ padding:0.625rem 1rem; }
}

/* ============ Page 404 ============ */
.legal--404{ padding:6rem 0 8rem; }
.legal-404-actions{ margin-top:2.25rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.75rem; }
.legal-inner a.legal-404-btn{
  display:inline-flex; align-items:center; min-height:3rem; padding:0.8125rem 1.75rem; border-radius:999px;
  background:var(--mint); color:var(--navy); font-size:0.9375rem; font-weight:600; text-decoration:none;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.legal-inner a.legal-404-btn:hover{ background:var(--mint-deep); transform:translateY(-2px); }
.legal-404-link{ font-size:0.9375rem; font-weight:600; }

/* ============ Pied de page (identique à index.html) ============ */
.site-footer{ background:var(--navy-deep); color:var(--text-muted-dark); padding:4.75rem 0 2rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:var(--gap); }
.footer-col h4{ margin-bottom:1rem; font-size:0.7813rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--white); }
.footer-col p, .footer-col a{ font-size:0.8438rem; line-height:1.85; color:var(--text-muted-dark); }
.footer-col a{ display:block; transition:color .3s; }
.footer-col a:hover{ color:var(--mint); }
.footer-logo img{ height:clamp(4rem, 8vw, 7.125rem); width:auto; margin-bottom:1rem; }
.footer-agency{ margin-bottom:1rem; }
.footer-agency:last-child{ margin-bottom:0; }
.footer-agency strong{ color:var(--white); font-weight:600; display:block; font-size:0.8438rem; }
.footer-agency span{ display:block; font-size:0.7813rem; line-height:1.6; }
.footer-legal{
  margin-top:3.5rem; padding-top:1.625rem; border-top:1px solid var(--border-dark);
  display:flex; flex-wrap:wrap; gap:0.625rem 1.5rem; align-items:center; justify-content:space-between;
  font-size:0.7188rem; color:var(--text-muted-dark);
}
.footer-legal-links{ display:flex; gap:1.125rem; flex-wrap:wrap; }
.footer-legal-links a{ color:var(--text-muted-dark); transition:color .3s; }
.footer-legal-links a:hover, .footer-legal-links a[aria-current="page"]{ color:var(--mint); }

@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:2.25rem; } }
@media (max-width:700px){ .footer-logo img{ height:8rem; } }
@media (max-width:640px){ .footer-grid{ grid-template-columns:1fr; } }