/* ==========================================================================
   Bootstrap Theme — DSi Atlantic (v2.1 airy)
   - Typo plus légère (Inter), titres moins gras
   - Espacements verticaux renforcés
   - Pastilles/boutons adoucis
   ========================================================================== */

:root{
  /* Couleurs marque / base */
  --brand: #0b5bd3;
  --ink:   #0b3559;
  --muted: #64748b;
  --bg:    #f1f1f1;

  /* Palette Bootstrap */
  --bs-blue:    #0b5bd3;
  --bs-indigo:  #6610f2;
  --bs-purple:  #7c3aed;
  --bs-pink:    #d63384;
  --bs-red:     #dc3545;
  --bs-orange:  #fd7e14;
  --bs-yellow:  #f59e0b;
  --bs-green:   #16a34a;
  --bs-teal:    #20c997;
  --bs-cyan:    #0dcaf0;

  --bs-primary:        var(--brand);
  --bs-secondary:      #6c757d;
  --bs-success:        var(--bs-green);
  --bs-info:           var(--bs-cyan);
  --bs-warning:        var(--bs-yellow);
  --bs-danger:         var(--bs-red);
  --bs-light:          #f8f9fa;
  --bs-dark:           #0b2740;

  /* Corps de page */
  --bs-body-color:     var(--ink);
  --bs-body-bg:        var(--bg);

  /* Typo (Inter) + tailles légèrement plus aérées */
  --bs-font-sans-serif: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1.02rem;
  --bs-body-line-height: 1.65;

  /* Rayons / ombres */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --shadow-soft: 0 4px 14px rgba(0,0,0,.04);
  --shadow-soft-lg: 0 18px 40px rgba(0,0,0,.08);

  /* Largeur max */
  --container-max: 1000px;

  /* Liens Bootstrap */
  --bs-link-color: var(--brand);
  --bs-link-hover-color: #2b6be9;

  /* Bordures Bootstrap */
  --bs-border-color: #e8e8e8;
}

/* ================== Dark Mode via prefers-color-scheme ================== */
@media (prefers-color-scheme: dark){
  :root{
    /* Cohérence avec styles.css */
    --brand: #5da8ff;
    --ink:   #e7e9ee;
    --muted: #a1a1aa;
    --bg:    #0b0b0c;

    --bs-primary:        var(--brand);
    --bs-secondary:      #8b93a1;
    --bs-success:        #22c55e;
    --bs-info:           #38bdf8;
    --bs-warning:        #facc15;
    --bs-danger:         #f87171;
    --bs-light:          #202226;
    --bs-dark:           #0b0b0c;

    --bs-body-color:     var(--ink);
    --bs-body-bg:        var(--bg);

    --bs-link-color:     #9ec5ff;
    --bs-link-hover-color:#cfe1ff;

    --bs-border-color:   #2b2b2f;
  }
}

/* Conteneur homogène */
.container { max-width: var(--container-max); }

/* Titres : poids allégés + interlignage amélioré */
h1,h2,h3,h4,h5,h6 { color: var(--ink); line-height:1.25; }
h1 { font-weight: 350; letter-spacing: -.01em; margin-bottom: .5em; }
h2 { font-weight: 400; margin-bottom: .6rem; }
h3 { font-weight: 500; margin-bottom: .4rem; }

/* Paragraphe lead légèrement plus grand mais doux */
.lead { color: var(--muted); font-weight: 300; }

/* Liens */
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand); text-decoration: underline; }

/* Navbar (pastilles + hover/focus) */
.navbar { background:#fff; border-bottom:1px solid #eef2f7; }
.navbar-brand img { height:36px; width:auto }
.navbar-nav .nav-link {
  color: var(--ink);
  padding: .45rem .7rem;
  border-radius: .75rem;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
  font-weight: 500;
}
.navbar-nav .nav-link:hover { background: #f1f6ff; }
.navbar-nav .nav-link.active,
.navbar-nav .nav-link[aria-current="page"] {
  background: #eef5ff;
  box-shadow: 0 2px 8px rgba(11,91,211,.08) inset;
}

/* -------- Navbar override en dark ---------- */
@media (prefers-color-scheme: dark){
  .navbar{ background:#0b0b0c; border-bottom:1px solid #2b2b2f; }
  .navbar-nav .nav-link{ color: var(--bs-body-color); }
  .navbar-nav .nav-link:hover{ background: rgba(255,255,255,.04); }
  .navbar-nav .nav-link.active,
  .navbar-nav .nav-link[aria-current="page"]{
    background: rgba(255,255,255,.06);
    box-shadow: none;
  }
}

/* Boutons (densité, feedback, focus) */
.btn{
  border:1px solid #cfd7ff;
  border-radius:12px;
  padding:10px 16px;
  font-weight:600;
  transition: box-shadow .18s ease, filter .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn:focus-visible{
  outline:0;
  box-shadow: 0 0 0 .22rem rgba(11,91,211,.25);
}
.btn:hover{ background:#005cbf }

.btn-primary{
  --bs-btn-color:#fff;
  --bs-btn-bg:var(--brand);
  --bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:#2b6be9;
  --bs-btn-hover-border-color:#2b6be9;
  --bs-btn-active-bg:#1f54c0;
  --bs-btn-active-border-color:#1f54c0;
}
.btn-primary:hover{
  box-shadow:0 6px 16px rgba(11,91,211,.25);
  filter:brightness(1.02);
}

.btn-outline-primary{
  --bs-btn-color:var(--brand);
  --bs-btn-border-color:#cfd7ff;
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--brand);
  --bs-btn-hover-border-color:var(--brand);
}

/* Cards */
.card{
  border:1px solid #e8e8e8;
  border-radius:16px;
  box-shadow:var(--shadow-soft);
}
.card:hover{ box-shadow:0 10px 26px rgba(0,0,0,.08); }

/* Cards — dark */
@media (prefers-color-scheme: dark){
  .card{
    border-color: var(--bs-border-color);
    background: #121214;
    box-shadow: 0 12px 24px rgba(0,0,0,.35);
  }
}

/* Accordion (FAQ) */
.accordion{
  --bs-accordion-color: var(--ink);
  --bs-accordion-bg:#fff;
  --bs-accordion-border-color:#e8e8e8;
  --bs-accordion-border-radius:12px;
  --bs-accordion-inner-border-radius:12px;
  --bs-accordion-btn-padding-x:16px;
  --bs-accordion-btn-padding-y:14px;
  --bs-accordion-btn-focus-box-shadow:0 0 0 .22rem rgba(11,91,211,.2);
  --bs-accordion-active-bg:#eef5ff;
}
.accordion-item{ box-shadow:0 4px 12px rgba(0,0,0,.03); border-radius:12px; overflow:hidden; }
.accordion-item + .accordion-item{ margin-top:10px }
.accordion-button{ background:rgba(11,91,211,0.06); font-weight:600; }

/* Accordion — dark */
@media (prefers-color-scheme: dark){
  .accordion{
    --bs-accordion-bg:#0f0f11;
    --bs-accordion-border-color:#2b2b2f;
    --bs-accordion-active-bg: rgba(255,255,255,.06);
  }
}

/* Formulaires */
.form-control{ border-radius:12px; border-color:#dbe3f0; }
.form-control:focus{ border-color:var(--brand); box-shadow:0 0 0 .22rem rgba(11,91,211,.2); }

/* Formulaires — dark */
@media (prefers-color-scheme: dark){
  .form-control{
    background:#0f0f11;
    color:var(--bs-body-color);
    border-color:#2b2b2f;
  }
  .form-control::placeholder{ color:#8d8d95; }
}

/* Alerts */
.alert-primary  { background:#eef5ff; color:#0b3a78; border-color:#dbe7ff; }
.alert-success  { background:#ecfdf5; color:#065f46; border-color:#bbf7d0; }
.alert-warning  { background:#fffbeb; color:#92400e; border-color:#fde68a; }
.alert-danger   { background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.alert-info     { background:#eff6ff; color:#1e3a8a; border-color:#bfdbfe; }

/* Alerts — dark */
@media (prefers-color-scheme: dark){
  .alert-primary  { background:rgba(93,168,255,.12);  color:#dbe9ff; border-color:#20324a; }
  .alert-success  { background:rgba(34,197,94,.12);   color:#d7ffe7; border-color:#163a29; }
  .alert-warning  { background:rgba(250,204,21,.12);  color:#fff0b3; border-color:#3d3412; }
  .alert-danger   { background:rgba(248,113,113,.12); color:#ffd6d6; border-color:#3c1616; }
  .alert-info     { background:rgba(56,189,248,.12);  color:#d8f5ff; border-color:#183947; }
}

/* Modals / Offcanvas */
.modal-content, .offcanvas{ border-radius:var(--radius-md); box-shadow:var(--shadow-soft-lg); }

/* Tables */
.table{
  --bs-table-color:var(--ink);
  --bs-table-bg:#fff;
  --bs-table-border-color:#e8e8e8;
}
@media (prefers-color-scheme: dark){
  .table{
    --bs-table-color:var(--bs-body-color);
    --bs-table-bg:#0f0f11;
    --bs-table-border-color:#2b2b2f;
  }
}

/* Utilitaires */
.shadow-soft{ box-shadow:var(--shadow-soft) !important; }
.shadow-soft-lg{ box-shadow:var(--shadow-soft-lg) !important; }
.radius-md{ border-radius:var(--radius-md) !important; }
.radius-lg{ border-radius:var(--radius-lg) !important; }
.breadcrumb-item.active{ color:var(--muted); }

/* Rythme vertical plus aéré pour les sections principales */
.section{ padding-block: 40px; }
@media (min-width: 992px){
  .section{ padding-block: 56px; }
}