/* Feuille de style commune aux pages légales — Zabel Groupe Sàrl */

:root{
  --ink-950:#06101f;
  --ink-900:#0a1628;
  --ink-800:#0f1e35;
  --titane-50:#f3f5f7;
  --titane-100:#e4e8ee;
  --titane-200:#c8d0db;
  --titane-300:#a3aebd;
  --titane-400:#7d8a9c;
  --titane-500:#5f6c7e;
  --accent-300:#8eb5e0;
  --accent-400:#5a8dcc;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  background:var(--ink-950);
  color:var(--titane-100);
  font-family:'Manrope', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--accent-400); color:var(--ink-950); }

a{ color:var(--accent-300); text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{ max-width:900px; margin:0 auto; padding:0 24px; }

/* En-tête */
.topbar{
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(6,16,31,.85);
  backdrop-filter:blur(12px);
  position:sticky; top:0; z-index:10;
}
.topbar-inner{
  max-width:900px; margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
/* -----------------------------------------------------------------
   Logo officiel — le fichier fourni est affiché SANS retouche.
   Son fond blanc est assumé par une plaque blanche.
   Ne pas détourer, recolorer ni recadrer.
   ----------------------------------------------------------------- */
.logo-plate{
  display:inline-flex; align-items:center; justify-content:center;
  background:#ffffff;
  padding:8px 14px;
  box-shadow:0 4px 20px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.12);
  transition:box-shadow .4s ease;
  flex-shrink:0;
}
a:hover > .logo-plate{
  box-shadow:0 6px 26px rgba(90,141,204,.45), 0 0 0 1px rgba(142,181,224,.5);
}
.logo-plate img{ display:block; height:44px; width:auto; }
.logo-plate.logo-lg img{ height:70px; }
@media (max-width:640px){
  .logo-plate{ padding:6px 10px; }
  .logo-plate img{ height:36px; }
}

/* Repli si le fichier du logo n'a pas encore été installé :
   un mot-symbole texte, jamais un autre logo. */
.brand{ display:inline-flex; align-items:center; text-decoration:none; }
.brand-text{ display:none; }
.brand-text b{
  display:block; font-size:15px; font-weight:700;
  letter-spacing:.12em; color:var(--titane-50);
}
.brand-text i{
  display:block; font-style:normal; font-size:9px; font-weight:600;
  letter-spacing:.34em; color:var(--accent-300); margin-top:3px;
}
.brand.logo-missing .logo-plate{ display:none; }
.brand.logo-missing .brand-text{ display:block; }
.back{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  color:var(--titane-200); border:1px solid rgba(255,255,255,.12);
  padding:10px 16px; white-space:nowrap;
}
.back:hover{ border-color:var(--accent-400); color:var(--accent-300); text-decoration:none; }

/* Titre de page */
.hero{ padding:72px 0 40px; border-bottom:1px solid rgba(255,255,255,.07); }
.eyebrow{
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  font-weight:600; color:var(--accent-400);
  display:flex; align-items:center; gap:14px;
}
.eyebrow::after{ content:""; flex:1; height:1px; background:rgba(255,255,255,.1); }
h1{
  font-weight:300; font-size:clamp(34px, 6vw, 56px);
  line-height:1.05; letter-spacing:-.02em; margin:24px 0 0;
  color:var(--titane-50);
}
h1 em{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-style:italic; font-weight:500; color:var(--accent-300);
}
.updated{
  margin-top:20px; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--titane-500);
}

/* Contenu */
main{ padding:56px 0 96px; }
section{ margin-bottom:48px; }
h2{
  font-size:13px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:700; color:var(--accent-400);
  margin:0 0 18px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex; gap:14px; align-items:baseline;
}
h2 .num{ color:var(--titane-500); font-variant-numeric:tabular-nums; }
h3{
  font-size:16px; font-weight:600; color:var(--titane-50);
  margin:28px 0 10px;
}
p, li{ font-size:15px; line-height:1.75; color:var(--titane-200); }
p{ margin:0 0 14px; }
ul{ margin:0 0 16px; padding-left:20px; }
li{ margin-bottom:8px; }
strong{ color:var(--titane-50); font-weight:600; }

.card{
  background:var(--ink-900);
  border:1px solid rgba(255,255,255,.1);
  padding:28px;
  margin:20px 0;
}
.card p:last-child{ margin-bottom:0; }

/* Fiche d'identité */
dl.identity{ margin:0; display:grid; gap:0; }
dl.identity > div{
  display:grid; grid-template-columns:200px 1fr; gap:16px;
  padding:14px 0; border-top:1px solid rgba(255,255,255,.08);
}
dl.identity > div:first-child{ border-top:none; }
dl.identity dt{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--titane-400); font-weight:600;
}
dl.identity dd{ margin:0; font-size:15px; color:var(--titane-100); line-height:1.6; }

@media (max-width:640px){
  dl.identity > div{ grid-template-columns:1fr; gap:4px; }
}

/* Tableau de données */
table{
  width:100%; border-collapse:collapse; margin:20px 0;
  font-size:14px;
}
th, td{
  text-align:left; padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:top;
}
th{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-400); font-weight:700;
  border-bottom-color:rgba(255,255,255,.16);
}
td{ color:var(--titane-200); }

/* À compléter */
.todo{
  display:inline-block;
  background:rgba(90,141,204,.14);
  border:1px dashed var(--accent-400);
  color:var(--accent-300);
  padding:2px 8px; font-size:13px; font-weight:600;
}

/* Accessibilité : focus visible au clavier */
:focus-visible{
  outline:2px solid var(--accent-300);
  outline-offset:3px;
  border-radius:1px;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* Impression */
@media print{
  html, body{ background:#fff !important; color:#111 !important; font-size:11pt; }
  .topbar, .back, footer nav{ display:none !important; }
  .hero{ padding:0 0 20px; border-bottom:1px solid #ccc; }
  h1{ color:#111 !important; font-size:24pt; }
  h1 em{ color:#333 !important; }
  h2{ color:#111 !important; border-top-color:#ccc !important; page-break-after:avoid; }
  h3{ color:#111 !important; page-break-after:avoid; }
  p, li, td, dd{ color:#222 !important; }
  dl.identity dt, th{ color:#444 !important; }
  a{ color:#111 !important; text-decoration:underline; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#555; }
  .card{ background:#f7f7f7 !important; border-color:#ccc !important; break-inside:avoid; }
  section{ break-inside:avoid; }
  .todo{ background:none !important; border:1px solid #999 !important; color:#111 !important; }
  th, td, dl.identity > div{ border-color:#ddd !important; }
  footer{ border-top-color:#ccc !important; }
  footer p{ color:#555 !important; }
}

/* Pied de page */
footer{
  border-top:1px solid rgba(255,255,255,.08);
  padding:32px 0 48px;
}
footer .wrap{
  display:flex; flex-wrap:wrap; gap:16px;
  justify-content:space-between; align-items:center;
}
footer p{
  margin:0; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--titane-500);
}
footer nav{ display:flex; gap:20px; flex-wrap:wrap; }
footer nav a{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--titane-300);
}