/* =============================================================
   KEMBYELA — feuille de style partagée des pages de contenu
   (À propos, Conditions, Confidentialité, Solutions, Contact)
   Reprend fidèlement les couleurs, la typographie et les
   composants de l'application (index.html).
   ============================================================= */

:root{
  --bg:#eef1f4; --panel:#ffffff; --ink:#1b1f24; --muted:#6b7280;
  --line:#d6dbe1; --accent:#2563eb; --accent-soft:#e8f0fe;
  --topbar-h:74px;
  --page-max:860px;
  --radius:12px;
}

body.dark{
  --bg:#191d21; --panel:#242a30; --ink:#e7eaee; --muted:#9aa1a9;
  --line:#3a424a; --accent:#3b82f6; --accent-soft:#1e2b3f;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; }

body{
  font-family:"Segoe UI",Roboto,system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-text-size-adjust:100%;
  padding-top:var(--topbar-h);
}

/* ---------- Accessibilité : lien d'évitement ---------- */
.skip-link{
  position:absolute; left:8px; top:-48px; z-index:200;
  background:var(--accent); color:#fff; padding:9px 14px;
  border-radius:8px; font-size:13px; font-weight:600; text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{ top:8px; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}

/* ---------- Bandeau supérieur (identique à l'application) ---------- */
.site-topbar{
  position:fixed; top:0; left:0; right:0; height:var(--topbar-h); z-index:70;
  display:flex; align-items:center; gap:16px; padding:0 24px;
  background:var(--panel); border-bottom:1px solid var(--line);
  box-shadow:0 1px 8px rgba(0,0,0,.06);
}
.site-topbar .brand{
  display:flex; align-items:center; gap:11px;
  text-decoration:none; color:inherit; flex:none;
}
.site-topbar .brand img{ height:44px; width:auto; max-width:300px; object-fit:contain; display:block; }
.site-topbar .brand span{
  font-family:"Calibri","Carlito","Segoe UI",sans-serif;
  font-size:23px; font-weight:700; letter-spacing:.05em; color:var(--ink);
}

.site-nav{
  display:flex; align-items:center; gap:3px; margin-right:auto; flex-wrap:wrap;
}
.site-nav a{
  font-size:13px; font-weight:600; color:var(--muted);
  text-decoration:none; padding:7px 9px; border-radius:8px;
  white-space:nowrap;
}
.site-nav a:hover,
.site-nav a:focus-visible{ color:var(--ink); background:var(--accent-soft); }
/* page courante : onglet « sélectionné » */
.site-nav a[aria-current="page"]{
  color:var(--accent);
  background:var(--accent-soft);
  font-weight:700;
}

.topbar-actions{ display:flex; align-items:center; gap:12px; flex:none; }

/* Bouton (identique à l'application) */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 14px; font-size:12.5px; font-weight:600; cursor:pointer;
  border:1px solid var(--line); background:#f6f7f9; border-radius:8px;
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.btn:hover{ border-color:var(--muted); }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover{ filter:brightness(1.05); border-color:var(--accent); }
.btn.wide{ width:100%; }
body.dark .btn:not(.primary){ background:#2f363d; }

/* Interrupteur clair / sombre (identique à l'application) */
.theme-toggle{
  position:relative; flex:none; width:58px; height:30px; padding:0;
  border:1px solid var(--line); border-radius:999px; cursor:pointer;
  background:var(--panel); box-shadow:0 2px 10px rgba(0,0,0,.14);
}
body.dark .theme-toggle{ background:#2f363d; }
.theme-toggle span{
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:13px; line-height:1; pointer-events:none;
}
.theme-toggle .tt-sun{ left:8px; color:#f5a623; }
.theme-toggle .tt-moon{ right:8px; color:#cbd2da; }
.theme-toggle .tt-knob{
  top:3px; left:3px; width:22px; height:22px; transform:none;
  border-radius:50%; background:var(--accent);
  box-shadow:0 1px 4px rgba(0,0,0,.35); transition:transform .2s ease;
}
body:not(.dark) .theme-toggle .tt-moon{ opacity:.35; }
body.dark .theme-toggle .tt-sun{ opacity:.35; }
body.dark .theme-toggle .tt-knob{ transform:translateX(28px); }

/* ---------- Contenu de page ---------- */
.page{
  max-width:var(--page-max);
  margin:0 auto;
  padding:34px 24px 72px;
}
.back-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:var(--accent);
  text-decoration:none; margin-bottom:18px;
}
.back-link:hover{ text-decoration:underline; }

.page h1{
  font-family:"Calibri","Carlito","Segoe UI",sans-serif;
  font-size:32px; line-height:1.2; font-weight:700; letter-spacing:.01em;
  margin:0 0 10px;
}
.page .lead{
  font-size:16px; color:var(--muted); margin:0 0 26px;
}
.page h2{
  font-family:"Calibri","Carlito","Segoe UI",sans-serif;
  font-size:20px; font-weight:700; margin:34px 0 10px;
  padding-top:8px;
}
.page h3{ font-size:15px; font-weight:700; margin:20px 0 6px; }
.page p{ margin:0 0 14px; }
.page ul,.page ol{ margin:0 0 16px; padding-left:22px; }
.page li{ margin:6px 0; }
.page a{ color:var(--accent); }
.page strong{ color:var(--ink); }
.page hr{ border:0; border-top:1px solid var(--line); margin:30px 0; }

.updated{ font-size:13px; color:var(--muted); margin-bottom:26px; }

/* Encadré (carte) réutilisable */
.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 20px; margin:0 0 18px;
}
.card h2,.card h3{ margin-top:0; }

/* Encadré d'avertissement / mise en garde */
.callout{
  background:var(--panel);
  border:1px solid var(--line);
  border-left:4px solid #d33;
  border-radius:var(--radius);
  padding:16px 20px; margin:22px 0;
  font-size:14px;
}
.callout strong{ color:#d33; }
body.dark .callout{ border-left-color:#ef6a5a; }
body.dark .callout strong{ color:#ef6a5a; }

/* Note « espace réservé » */
.placeholder-note{
  font-size:12.5px; color:var(--muted);
  border:1px dashed var(--line); border-radius:8px;
  padding:10px 14px; margin-top:30px;
}
.ph{
  background:var(--accent-soft); color:var(--accent);
  border-radius:4px; padding:0 4px; font-weight:600;
  font-size:.95em;
}
body.dark .ph{ color:#9cc0ff; }

/* Grille de fonctionnalités (Solutions d'entreprise) */
.feature-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:16px; margin:20px 0 8px;
}
.feature-grid .card{ margin:0; }
.feature-grid h3{ margin:0 0 6px; }
.feature-grid p{ margin:0; font-size:13.5px; color:var(--muted); }

/* Bloc d'appel à l'action */
.cta{
  background:var(--accent-soft);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px; margin:34px 0 0;
  text-align:center;
}
.cta h2{ margin:0 0 8px; padding:0; }
.cta p{ margin:0 0 16px; color:var(--muted); }

/* ---------- Formulaire de contact ---------- */
.form-field{ margin:0 0 16px; }
.form-field label{
  display:block; font-size:12.5px; font-weight:600;
  color:var(--muted); margin:0 0 5px;
}
.form-field input,
.form-field textarea{
  width:100%; padding:10px 12px; font-size:14px; font-family:inherit;
  border:1px solid var(--line); border-radius:8px;
  background:var(--panel); color:var(--ink);
}
.form-field textarea{ min-height:150px; resize:vertical; line-height:1.5; }
.form-field input:focus,
.form-field textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.form-field .req{ color:#d33; }

.form-status{
  margin:4px 0 16px; padding:12px 14px; border-radius:8px;
  font-size:13.5px; font-weight:600; display:none;
}
.form-status.is-visible{ display:block; }
.form-status.ok{ background:rgba(22,163,74,.12); color:#15803d; border:1px solid rgba(22,163,74,.35); }
.form-status.err{ background:rgba(211,51,51,.12); color:#b91c1c; border:1px solid rgba(211,51,51,.35); }
body.dark .form-status.ok{ color:#4ade80; }
body.dark .form-status.err{ color:#fca5a5; }

.contact-methods{
  display:flex; flex-wrap:wrap; gap:12px 28px;
  margin:0 0 24px; font-size:14px;
}
.contact-methods div{ display:flex; align-items:center; gap:8px; }

/* ---------- Pied de page (bandeau bas, style KEMBYELA) ---------- */
.site-footer{
  background:var(--panel);
  border-top:1px solid var(--line);
  color:var(--muted);
  padding:40px 24px 26px;
}
.site-footer .foot-inner{
  max-width:1080px; margin:0 auto;
  display:flex; gap:48px; flex-wrap:wrap; justify-content:space-between;
}
.site-footer .foot-about{ max-width:340px; }
.site-footer .foot-brand{
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
}
.site-footer .foot-brand img{ height:34px; width:auto; }
.site-footer .foot-brand span{
  font-family:"Calibri","Carlito","Segoe UI",sans-serif;
  font-size:19px; font-weight:700; letter-spacing:.05em; color:var(--ink);
}
.site-footer .foot-about p{ margin:0; font-size:12.5px; line-height:1.6; }
.site-footer .foot-links h2{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin:0 0 12px;
}
.site-footer .foot-links ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.site-footer .foot-links a{
  color:var(--ink); text-decoration:none; font-size:13px;
  border-bottom:1px solid transparent; padding-bottom:1px;
}
.site-footer .foot-links a:hover,
.site-footer .foot-links a:focus-visible{ color:var(--accent); border-bottom-color:var(--accent); }
.site-footer .foot-legal{
  max-width:1080px; margin:24px auto 0; padding-top:16px;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:8px 28px; align-items:center;
  justify-content:space-between; font-size:11.5px;
}

/* En dessous d'environ 1080 px, le bouton « Ouvrir l'application » (doublé par le
   logo et par le lien « Retour à l'application ») est masqué pour laisser la
   place aux 6 liens du menu sur une seule ligne. */
@media (max-width:1080px){
  .topbar-actions .btn{ display:none; }
}

/* En dessous d'environ 980 px, les 6 liens ne tiennent plus sur une ligne : la
   navigation du haut est masquée ; les mêmes liens restent accessibles dans le
   pied de page, présent sur chaque page. */
@media (max-width:980px){
  .site-nav{ display:none; }
}

@media (max-width:760px){
  .page h1{ font-size:26px; }
  .site-topbar{ gap:10px; padding:0 14px; }
  .site-topbar .brand span{ font-size:19px; }
  .site-topbar .brand img{ height:36px; }
  .site-nav{ display:none; }          /* navigation compacte : la marque + le pied de page suffisent */
  /* le bouton « Ouvrir l'application » est doublé par le logo (accueil) et le
     lien « Retour à l'application » : on l'enlève sur petit écran, on garde le thème */
  .topbar-actions .btn{ display:none; }
  .site-footer{ padding:30px 16px 22px; }
  .site-footer .foot-inner{ gap:26px; }
}

@media (max-width:420px){
  /* écran très étroit : marque resserrée (le bouton d'action est déjà masqué) */
  .site-topbar{ gap:8px; padding:0 10px; }
  .site-topbar .brand span{ font-size:15px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}