/* ═══════════════════════════════════════════════════════════════════════════
   bookyoo — Style partagé pour pages statiques (à propos, conditions,
   confidentialité). Reprend EXACTEMENT le nav + footer du landing
   (index.html) pour cohérence visuelle parfaite.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#f5f6f8;
  --ink:#0E1B2A; --ink-2:#1f2d3d;
  --muted:#5b6b7a; --muted-soft:#8a96a3;
  --line:#e5e8ec; --line-2:#eef0f3;
  --accent:#f45c11; --accent-deep:#d94a06; --accent-soft:#fff4ec;
  --card:#fff; --good:#1f7a44;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg);
  line-height:1.6; font-size:11pt;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* ═══════════════════════════════════════════════════════════════════════════
   NAV — identique au landing (sticky + blur + logo + menu + CTA)
   ═══════════════════════════════════════════════════════════════════════════ */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-2);
}
.nav .wrap{
  max-width:1180px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;
  height:64px;gap:24px;
}
.nav .logo{display:flex;align-items:center}
.nav .logo svg{height:24px;width:auto}
.nav .menu{display:flex;align-items:center;gap:28px}
.nav .menu a.link{color:var(--ink);font-size:10.5pt;font-weight:600}
.nav .menu a.link:hover{color:var(--accent);text-decoration:none}
.nav .cta{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--accent);color:#fff;font-weight:700;font-size:10pt;
  padding:9px 16px;border-radius:8px;
  transition:filter .12s,transform .04s;
}
.nav .cta:hover{filter:brightness(1.06);color:#fff;text-decoration:none}
.nav .cta:active{transform:translateY(1px)}
@media (max-width:760px){
  .nav .menu a.link{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANG SWITCHER — dropdown accessible, scale à N langues
   ═══════════════════════════════════════════════════════════════════════════ */
.lang-switcher{position:relative;display:inline-block}
.lang-trigger{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:6px 10px;
  font:inherit;font-size:10pt;font-weight:600;color:var(--ink);
  cursor:pointer;transition:border-color .12s,background .12s;
}
.lang-trigger:hover{border-color:#cfd5dc;background:#fafbfc}
.lang-trigger[aria-expanded="true"]{border-color:var(--accent);background:#fff}
.lang-trigger .lang-globe{flex:0 0 auto;color:var(--muted)}
.lang-trigger .lang-code{letter-spacing:.02em}
.lang-trigger .lang-chev{
  flex:0 0 auto;color:var(--muted);
  transition:transform .15s;
}
.lang-trigger[aria-expanded="true"] .lang-chev{transform:rotate(180deg)}

.lang-menu{
  position:absolute;top:calc(100% + 6px);right:0;
  min-width:180px;
  background:#fff;border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 12px 32px rgba(14,27,42,.10);
  list-style:none;padding:6px;margin:0;
  z-index:60;
  animation:langMenuIn .14s ease-out;
}
.lang-menu[hidden]{display:none}
@keyframes langMenuIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:none}
}
.lang-item{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:8px 12px;border-radius:6px;
  color:var(--ink);text-decoration:none;font-size:10.5pt;font-weight:500;
  cursor:pointer;transition:background .1s;
}
.lang-item:hover:not(.is-disabled){background:#f6f8fb;text-decoration:none}
.lang-item.is-active{background:rgba(244,92,17,.08);color:var(--accent);font-weight:700}
.lang-item-name{flex:1}
.lang-item-check{color:var(--accent);font-weight:800}
.lang-item.is-disabled{
  color:var(--muted-soft);cursor:not-allowed;opacity:.7;
}
.lang-item-soon{
  font-size:8.5pt;font-weight:600;
  color:var(--muted);background:var(--line-2);
  padding:2px 8px;border-radius:50px;letter-spacing:.03em;
  white-space:nowrap; /* « Soon » / « Bientôt » jamais cassé sur 2 lignes */
}
.lang-menu{min-width:200px} /* breathing room pour le badge */

/* ═══════════════════════════════════════════════════════════════════════════
   BANNER : « Would you prefer English? » au 1er visit hors-langue
   ═══════════════════════════════════════════════════════════════════════════ */
.lang-banner{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--ink);color:#fff;
  padding:11px 20px;font-size:10.5pt;
  display:flex;align-items:center;justify-content:center;gap:14px;
  flex-wrap:wrap;
  transform:translateY(-100%);transition:transform .25s ease-out;
}
.lang-banner.show{transform:translateY(0)}
.lang-banner .msg{font-weight:500;color:rgba(255,255,255,.92)}
.lang-banner .actions{display:flex;gap:8px}
.lang-banner button{
  background:transparent;border:1px solid rgba(255,255,255,.3);
  color:#fff;font:inherit;font-size:10pt;font-weight:600;
  padding:6px 14px;border-radius:7px;cursor:pointer;transition:background .12s;
}
.lang-banner button:hover{background:rgba(255,255,255,.10)}
.lang-banner button.primary{background:var(--accent);border-color:var(--accent);font-weight:700}
.lang-banner button.primary:hover{filter:brightness(1.06)}
.lang-banner .dismiss{
  background:transparent;border:none;color:rgba(255,255,255,.6);
  font-size:18px;cursor:pointer;padding:0 4px;line-height:1;
}
.lang-banner .dismiss:hover{color:#fff;background:transparent}
@media (max-width:600px){
  .lang-banner{font-size:9.5pt;padding:9px 14px}
  .lang-banner .msg{flex:1 1 100%;text-align:center;margin-bottom:6px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE — contenu central des pages légales / statiques
   ═══════════════════════════════════════════════════════════════════════════ */
.page{max-width:780px; margin:0 auto; padding:48px 24px 80px}
.page-header{margin-bottom:38px}
.page-eyebrow{
  display:inline-block; font-size:8.5pt; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); background:rgba(244,92,17,.1);
  padding:4px 11px; border-radius:50px; margin-bottom:14px;
}
.page-header h1{
  margin:0 0 10px; font-size:32pt; letter-spacing:-.02em; font-weight:800;
  line-height:1.1;
}
.page-header .sub{
  margin:0; color:var(--muted); font-size:12pt; line-height:1.5;
}
.page-meta{
  margin-top:12px; color:var(--muted); font-size:9.5pt;
}

/* Sections */
.section{margin-bottom:36px}
.section h2{margin:0 0 14px; font-size:16pt; letter-spacing:-.01em; font-weight:800}
.section h3{margin:24px 0 8px; font-size:12pt; font-weight:700}
.section p{margin:0 0 12px; color:var(--ink)}
.section ul, .section ol{margin:0 0 12px; padding-left:22px; color:var(--ink)}
.section li{margin-bottom:6px}
.section li strong{color:var(--ink)}

/* Callout boxes */
.callout{
  background:var(--card); border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:8px; padding:16px 18px; margin:18px 0;
  font-size:10.5pt;
}
.callout strong{color:var(--ink)}
.callout.success{border-left-color:var(--good); background:#f3faf6}
.callout.info{border-left-color:#1D6FE0; background:#f3f7fc}

/* Table de matières (TOC) */
.toc{
  background:var(--card); border:1px solid var(--line);
  border-radius:10px; padding:18px 22px; margin-bottom:32px;
  font-size:10.5pt;
}
.toc h4{margin:0 0 10px; font-size:10pt; color:var(--muted); font-weight:700;
        text-transform:uppercase; letter-spacing:.06em}
.toc ol{margin:0; padding-left:22px}
.toc li{margin-bottom:4px}
.toc a{color:var(--ink); font-weight:500}
.toc a:hover{color:var(--accent); text-decoration:none}

@media(max-width:600px){
  .page-header h1{font-size:24pt}
  .page-header .sub{font-size:11pt}
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER — identique au landing
   ═══════════════════════════════════════════════════════════════════════════ */
footer{background:var(--ink); color:rgba(255,255,255,.7); padding:50px 0 30px}
footer .wrap{max-width:1180px; margin:0 auto; padding:0 24px}
footer .grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; margin-bottom:36px}
footer .brand svg{height:22px; width:auto; margin-bottom:14px}
footer .brand p{margin:0 0 14px; font-size:10pt; line-height:1.55; max-width:280px}
footer .brand .maple{font-size:9pt; color:rgba(255,255,255,.55)}
footer h4{color:#fff; font-size:9pt; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin:0 0 14px}
footer ul{list-style:none; padding:0; margin:0}
footer ul li{margin-bottom:9px}
footer ul a{color:rgba(255,255,255,.7); font-size:10pt}
footer ul a:hover{color:#fff; text-decoration:none}
footer .bottom{
  border-top:1px solid rgba(255,255,255,.12); padding-top:24px;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:14px; font-size:9pt; color:rgba(255,255,255,.55);
}
@media (max-width:760px){footer .grid{grid-template-columns:1fr 1fr; gap:30px}}