:root{
  --accent:#1E6AFF;                 /* bleu de marque */
  --ink:#14171f; --muted:#6b7280;    /* textes (mode clair) */
  --stroke:#e1e5ee; --soft:#f6f7fb; --bg:#f3f4f7;
}

/* Base */
body.capsule-theme{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--ink); line-height:1.6; position:relative; isolation:isolate;
  background:var(--bg); margin:0;
}
.container{max-width:1100px;margin:0 auto;padding:28px}

/* Fond quadrillé doux */
body.capsule-theme::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(rgba(17,24,39,.14) 1px, transparent 1.6px),
    repeating-linear-gradient(90deg, rgba(17,24,39,.22) 0 2px, transparent 2px 12px),
    repeating-linear-gradient(0deg,  rgba(17,24,39,.22) 0 2px, transparent 2px 12px);
  background-size: 24px 24px, 2px 100%, 100% 2px;
  background-position: center center, min(14vw,160px) 0, 0 min(22vh,180px);
  background-repeat: repeat, no-repeat, no-repeat;
  opacity:.16;
  mask: radial-gradient(150% 130% at 50% -10%, #000 52%, transparent 82%);
}
.capsule-theme .container, .capsule-theme .hero, .capsule-theme main{position:relative; z-index:1}

/* Composants */
.brandbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.navpill{display:inline-flex;gap:18px;align-items:center;background:#fff;border:1px solid var(--stroke);border-radius:16px;padding:10px 14px;box-shadow:0 6px 24px -10px rgba(15,23,42,.1)}
.navpill a{color:#444;text-decoration:none;font-weight:600;font-size:14px}
.pillbtn{display:inline-flex;align-items:center;gap:8px;background:#111;color:#fff;border-radius:999px;padding:10px 16px;text-decoration:none;font-weight:700;border:2px solid #fff;box-shadow:0 10px 24px -12px rgba(0,0,0,.35)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;text-decoration:none;font-weight:700;border:1px solid var(--stroke);background:#fff;color:#111}
.btn.primary{background:var(--accent);color:#fff;border-color:transparent}
.btn.ghost{background:#fff}
.lead{color:#4b5563;max-width:860px}

/* Logos EN COULEUR (pas de filtre ni opacité globale) */
.logos{display:flex;flex-wrap:wrap;gap:24px;margin:18px 0;align-items:center;filter:none;opacity:1}
.logos img{height:26px;width:auto;display:block;filter:none !important;opacity:1 !important}
.logos img:hover{transform:translateY(-1px)}
.logos span{background:#fff;border:1px dashed var(--stroke);padding:10px 14px;border-radius:12px;font-weight:700}

.card{background:#fff;border:1px solid var(--stroke);border-radius:20px;padding:18px;box-shadow:0 16px 40px -24px rgba(2,6,23,.12)}
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}

.showcase{background:#fff;border:1px solid var(--stroke);border-radius:24px;padding:16px;box-shadow:0 24px 64px -32px rgba(2,6,23,.15)}
.showcase .hero-shot{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 40px 80px -30px rgba(30,106,255,.45)}

.hero{padding:60px 0 20px}
h1{font-size:clamp(32px,4.6vw,56px);letter-spacing:-.02em;line-height:1.08;margin:10px 0 8px}
h2{font-size:clamp(22px,3vw,28px);margin:26px 0 8px}
h3{font-size:18px;margin:12px 0 6px;color:var(--muted)}

/* Opaque cards (contraste fort) */
.card, .toc, .showcase, .navpill{background:#fff !important;border:1px solid #E1E5EE !important;opacity:1 !important;backdrop-filter:none !important;box-shadow:0 18px 44px -24px rgba(2,6,23,.14)}

/* Footer */
footer{margin-top:40px;padding:16px 0;color:#6b7280}

/* Responsive global */
@media (max-width:900px){.grid.cols-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .grid.cols-3,.grid.cols-2{grid-template-columns:1fr}
  .container{padding:18px}
  .showcase .hero-shot{border-radius:16px}
}

/* Anti-overflow mobile + nav wrap */
*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
@media (max-width:640px){
  .brandbar{display:flex;flex-wrap:wrap;gap:10px}
  .navpill{flex:1 1 100%;max-width:100%;flex-wrap:wrap;justify-content:center}
  .navpill a{white-space:nowrap}
  .pillbtn{margin-left:auto}
}

/* Logo brand à gauche */
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:28px;width:auto;display:block}
@media (max-width:640px){ .brand img{height:24px} }

/* ====== Planning RDV (30 min, 18–20h) ====== */
.planning { margin-top:8px }
.planning-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px }
.planning-col { background:#fff; border:1px solid var(--stroke); border-radius:12px; padding:10px }
.planning-head { font-weight:700; margin-bottom:8px }

.slot-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 10px; margin:6px 6px 0 0;
  border-radius:10px; border:1px solid var(--stroke); background:#fff;
  cursor:pointer; font-weight:700; transition:transform .06s ease, box-shadow .12s ease;
}
.slot-btn:hover{ box-shadow:0 6px 18px -8px rgba(2,6,23,.15) }
.slot-btn:active{ transform:translateY(1px) }
.slot-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.slot-btn.selected{ background:var(--accent); color:#fff; border-color:transparent }
.slot-btn.disabled{ opacity:.45; cursor:not-allowed }

.booking .muted, .muted { color: var(--muted); }

@media (max-width:900px){ .planning-grid{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:640px){
  .planning-grid{ grid-template-columns:repeat(2,1fr) }
  .booking .muted{ display:block; margin-bottom:6px }
}

/* Sélecteur jour + rangée créneaux */
.rdv-row{display:flex;gap:10px;align-items:center;margin-top:8px}
.day-select{padding:10px;border:1px solid var(--stroke);border-radius:10px;background:#fff}
.slot-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

/* Bouton désactivé visible */
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ======================= Dark Mode ======================= */
@media (prefers-color-scheme: dark){
  :root{
    --ink:#fff; --muted:#fff;                /* tout texte = blanc */
    --stroke:#1F2737; --soft:#0F1424; --bg:#0B1020;
  }
  body.capsule-theme{background:var(--bg); color:#fff}
  body.capsule-theme::before{
    background-image:
      radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.6px),
      repeating-linear-gradient(90deg, rgba(255,255,255,.20) 0 2px, transparent 2px 12px),
      repeating-linear-gradient(0deg,  rgba(255,255,255,.20) 0 2px, transparent 2px 12px);
    opacity:.14;
    mask: radial-gradient(150% 130% at 50% -10%, #000 50%, transparent 82%);
  }

  .navpill, .card, .toc, .showcase{
    background:#0E1426 !important; border-color:#1F2737 !important;
    box-shadow:0 18px 44px -28px rgba(0,0,0,.5);
    color:#fff !important;
  }

  /* Liens / boutons / formulaires */
  .navpill a{color:#fff}
  a{color:#fff}
  .btn{background:#0E1426;color:#fff;border-color:#1F2737}
  .btn.primary{background:var(--accent);color:#fff;border-color:transparent}
  .pillbtn{background:#111827;color:#fff;border-color:#0B1020}
  input,textarea,select{color:#fff;background:#0E1426;border:1px solid #1F2737}
  input::placeholder,textarea::placeholder{color:rgba(255,255,255,.8)}

  /* Logos toujours en couleur */
  .logos, .logos img{filter:none !important;opacity:1 !important}

  /* Planning en dark */
  .planning-col{background:#0E1426;border-color:#1F2737}
  .slot-btn{background:#0E1426;border-color:#1F2737;color:#fff}
  .slot-btn:hover{box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}
  .day-select{background:#0E1426;color:#fff;border-color:#1F2737}

  footer{color:#fff}
}

/* ===== Derniers overrides de sécurité ===== */
/* Si une ancienne règle remet du gris, on neutralise ici */
.logos{filter:none !important;opacity:1 !important}
.logos img{filter:none !important;opacity:1 !important}


/* Logos en COULEUR, répartis sur toute la largeur */
.logos{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* occupe toute la largeur */
  align-items:center;
  justify-items:center;
  gap:24px;
  margin:18px 0;
  filter:none !important;      /* annule N&B éventuel sur le conteneur */
  opacity:1 !important;        /* annule tout fade hérité */
}
.logos img{
  height:28px;
  max-width:160px;
  width:auto;
  display:block;
  filter:none !important;      /* couleur */
  opacity:1 !important;        /* couleur */
  mix-blend-mode:normal;       /* évite interactions bizarres sur fond sombre */
}
@media (max-width:640px){
  .logos{ gap:18px; }
  .logos img{ height:22px; max-width:120px; }
}
/* Dark: rien à désaturer */
@media (prefers-color-scheme: dark){
  .logos, .logos img{ filter:none !important; opacity:1 !important; }
}