/* ============================================================
   FlowChatAI - pages legales (mentions legales, confidentialite)
   Charte juillet 2026 : Night Blue / Signal Blue / Mint / Ivory
   Remplace l'ancien styles.css supprime lors de la refonte du site.
   ============================================================ */

/* ============================================================
   POLICES AUTO-HEBERGEES
   Memes fichiers que l'accueil : deja en cache quand le visiteur
   arrive ici depuis la page principale, donc zero requete.
   ============================================================ */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700 800;font-display:swap;src:url(/fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700 800;font-display:swap;src:url(/fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Lien d'evitement, identique a celui de l'accueil */
.skip{position:absolute;left:8px;top:-60px;z-index:200;background:#0B1F33;color:#FFFFFF;text-decoration:none;font-family:Manrope,sans-serif;font-weight:700;font-size:15px;padding:12px 18px;border-radius:0 0 10px 10px;transition:top .15s ease}
.skip:focus{top:0;color:#FFFFFF}
main:focus{outline:none}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #FFFFFF;
  color: #52606D;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: #0B5FD9; }
a:hover { color: #0949A8; }
:focus-visible { outline: 3px solid #1677FF; outline-offset: 2px; border-radius: 4px; }
img { max-width: 100%; height: auto; }

.container {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- En-tete ---------- */
.legal-header {
  background: #FFFFFF;
  border-bottom: 1px solid #E5E9EF;
}
.legal-header .container {
  /* 1188 et non 1140 : l'accueil met ses conteneurs en content-box, donc son
     max-width de 1140 s'ajoute a 2x24 de padding, soit 1188 au total. Ici tout
     est en border-box. A 1140, le logo demarrait 24px trop a droite. */
  max-width: 1188px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.legal-header img { height: 34px; width: auto; display: block; }
.back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #0B5FD9;
  text-decoration: none;
  font-family: Manrope, sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  white-space: nowrap;
}

/* ---------- Contenu ---------- */
.legal { padding: 48px 0 72px; }

.legal h1 {
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #0B1F33;
  margin: 0 0 10px;
}

.legal .updated {
  font-size: 14.5px;
  /* #8B97A5 sur blanc ne mesurait que 2,97:1, sous le minimum de 4,5:1.
     #52606D, la couleur de texte courant du site, monte a 6,46:1. */
  color: #52606D;
  margin: 0 0 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid #E5E9EF;
}

.legal h2 {
  font-family: Manrope, sans-serif;
  font-weight: 700;
  font-size: clamp(19px, 3vw, 22px);
  line-height: 1.3;
  color: #0B1F33;
  margin: 40px 0 12px;
}

.legal p { margin: 0 0 16px; }
.legal strong { color: #0B1F33; font-weight: 600; }

.legal h3 {
  font-family: Manrope, sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #0B1F33;
  margin: 28px 0 10px;
}

.legal ul {
  margin: 0 0 20px;
  padding: 0 0 0 22px;
}
.legal li { margin-bottom: 9px; }

/* Tableaux (registre des sous-traitants). Larges par nature : ils defilent
   dans leur propre conteneur plutot que de faire deborder la page. */
.legal table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-size: 14.5px;
  line-height: 1.55;
}
.legal table thead { background: #F7F8FA; }
.legal table th,
.legal table td {
  border: 1px solid #E5E9EF;
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  min-width: 140px;
}
.legal table th {
  font-family: Manrope, sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  color: #0B1F33;
  white-space: nowrap;
}
.legal table td strong { color: #0B1F33; }

/* casse les longues chaines (emails, URLs) au lieu de deborder */
.legal a { overflow-wrap: anywhere; }

/* ---------- Pied de page ---------- */
.site-footer {
  background: #081827;
  color: #8B97A5;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-inner {
  /* Aligne sur l'accueil, meme calcul content-box / border-box que l'en-tete. */
  max-width: 1188px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 40px;
  padding-bottom: 32px;
}
.footer-inner p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; }
/* Lien LinkedIn du pied de page. rel="me" cote HTML : il corrobore le
   sameAs declare dans le JSON-LD de l'accueil. */
.li-lien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  color: #FFFFFF;
  text-decoration: none;
  font-size: 14px;
}
.li-lien:hover { color: #3D8DFF; }
.li-lien svg { flex-shrink: 0; }
.brand-name {
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.footer-links a {
  color: #FFFFFF;
  text-decoration: none;
  font-size: 14.5px;
}
.footer-links a:hover { color: #3D8DFF; }
.copyright { font-size: 13px; margin: 0; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .container { padding: 0 20px; }
  .legal { padding: 32px 0 56px; }
  .legal .updated { margin-bottom: 28px; padding-bottom: 20px; }
  .legal h2 { margin-top: 32px; }
  .legal ul { padding-left: 20px; }
  .legal-header img { height: 26px; }
  .back { font-size: 13.5px; }
  .footer-inner { flex-direction: column; gap: 24px; }
}

@media (max-width: 380px) {
  .container { padding: 0 16px; }
  .back span { display: none; }
}