/* dbTransitions – Feuille de style (version mixte)
   Auteur: ChatGPT — Alignée sur le logo fourni
   Palette: Vert #2E473A, Anthracite #2F3A43, Gris neutres sur fond blanc
   Typo conseillée: Lato (fallback sans-serif)
   Utilisation: <link rel="stylesheet" href="dbtransitions.css" />
*/

/* ------------------------------
   0) Variables & Design Tokens
--------------------------------*/
:root{
  /* Couleurs principales */
  --db-green: #2E473A;
  --db-green-700: #253b30;
  --db-green-50: #eef2f0;

  --anthracite: #2F3A43;
  --anthracite-700: #242c32;

  /* Neutres */
  --gray-900: #1f2937;
  --gray-800: #374151;
  --gray-700: #4b5563;
  --gray-600: #6b7280;
  --gray-500: #9ca3af;
  --gray-400: #cbd5e1;
  --gray-300: #e5e7eb;
  --gray-200: #eef2f7;
  --gray-100: #f5f7fa;
  --white: #ffffff;

  /* Typo */
  --font-sans: "Lato", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;

  /* Échelle de taille */
  --fs-hero: clamp(2rem, 1.6rem + 2vw, 3rem);
  --fs-h1: clamp(1.75rem, 1.4rem + 1.4vw, 2.4rem);
  --fs-h2: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
  --fs-h3: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.9375rem;

  /* Rythme vertical & conteneurs */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 10px 20px rgba(0,0,0,.08);
  --shadow-lg: 0 24px 32px rgba(0,0,0,.12);
  --max-w: 1120px;
}

/* ------------------------------
   1) Reset & Base
--------------------------------*/
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--anthracite);
  background: var(--white);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--db-green); text-decoration: none; }
a:hover{ text-decoration: underline; }
.container{
  width:min(100% - 2rem, var(--max-w));
  margin-inline:auto;
}
.section{
  padding-block: var(--space-16);
  background: var(--white);
}
.section.alt{
  background: var(--gray-100);
  border-top:1px solid var(--gray-300);
  border-bottom:1px solid var(--gray-300);
}
.section.narrow{ padding-block: var(--space-12); }

/* ------------------------------
   2) Titres & Texte
--------------------------------*/
h1,h2,h3{
  margin:0 0 var(--space-4);
  line-height:1.25;
  font-weight:600;
  color: var(--anthracite);
}
h1{ font-size: var(--fs-h1); }
h2{ font-size: var(--fs-h2); }
h3{ font-size: var(--fs-h3); }
.lead{
  font-size: clamp(1.05rem, 1rem + .5vw, 1.25rem);
  color: var(--gray-700);
  max-width: 68ch;
}
.small{ font-size: var(--fs-small); color: var(--gray-600); }

.tagline{
  font-weight:300;
  color: var(--gray-700);
  letter-spacing:.2px;
}

/* Mise en forme de la baseline du logo */
.baseline{
  font-weight:300;
  font-size: 1rem;
  color: var(--gray-700);
}
.baseline .sep{ color: var(--gray-500); margin-inline: .25ch; }

/* ------------------------------
   3) Barre de navigation
--------------------------------*/
.navbar{
  position:sticky; top:0; z-index:50;
  background: var(--white);
  border-bottom:1px solid var(--gray-300);
  box-shadow: var(--shadow-sm);
}
.navbar .inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--space-6); padding-block: .85rem;
}
.brand{
  display:flex; align-items:center; gap:.6rem;
  font-weight:700; letter-spacing:.2px;
  color: var(--anthracite);
}
.brand .mark-db{
  font-weight: 800;
  color: var(--db-green);
}
.nav-links{
  display:flex; align-items:center; gap: clamp(.5rem, 2vw, 1.25rem);
}
.nav-links a{
  color: var(--anthracite);
  font-weight:500;
  padding:.5rem .25rem;
  border-radius:8px;
}
.nav-links a:hover{ background: var(--gray-200); text-decoration:none; }

/* ------------------------------
   4) Boutons
--------------------------------*/
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding:.8rem 1.1rem;
  border-radius: var(--radius);
  font-weight:600;
  border:1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
  cursor:pointer;
  will-change: transform;
}
.btn:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--db-green) 50%, transparent);
  outline-offset: 2px;
}
.btn--primary{
  background: var(--db-green);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover{
  transform: translateY(-1px);
  background: var(--db-green-700);
  box-shadow: var(--shadow-md);
}
.btn--ghost{
  background: transparent;
  color: var(--db-green);
  border-color: var(--db-green);
}
.btn--ghost:hover{
  background: var(--db-green-50);
}

/* ------------------------------
   5) Héros (accueil)
--------------------------------*/
.hero{
  padding-block: clamp(3rem, 10vh, 6rem);
  background: linear-gradient(180deg, var(--white) 0%, var(--gray-100) 100%);
}
.hero .title{
  font-size: var(--fs-hero);
  font-weight: 700;
  letter-spacing:.2px;
}
.hero .subtitle{ margin-top: var(--space-4); }
.hero .cta{ margin-top: var(--space-8); display:flex; gap: .75rem; flex-wrap:wrap; }

/* ------------------------------
   6) Grilles & Cartes
--------------------------------*/
.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.col-4{ grid-column: span 4; }
.col-6{ grid-column: span 6; }
.col-12{ grid-column: span 12; }

.card{
  background: var(--white);
  border:1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: clamp(1rem, 1rem + 1vw, 1.5rem);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.card .card-title{
  font-weight: 600;
  margin-bottom: .5rem;
}
.card .card-text{
  color: var(--gray-700);
}

/* ------------------------------
   7) Listes de points forts
--------------------------------*/
.checklist{
  display:grid; gap:.5rem;
  color: var(--gray-800);
}
.checklist li{
  list-style:none; position:relative; padding-left: 1.5rem;
}
.checklist li::before{
  content:""; width:.7rem; height:.7rem; border-radius:50%;
  background: var(--db-green); position:absolute; left:0; top:.45rem;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--db-green) 20%, transparent);
}

/* ------------------------------
   8) Formulaires
--------------------------------*/
.input, .textarea, .select{
  width:100%;
  padding:.85rem 1rem;
  border-radius: 12px;
  border:1px solid var(--gray-300);
  background: var(--white);
  color: var(--anthracite);
  outline:none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.input:focus, .textarea:focus, .select:focus{
  border-color: var(--db-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--db-green) 25%, transparent);
}
.label{ display:block; font-weight:600; margin-bottom:.4rem; }

/* ------------------------------
   9) Tableaux (pricing / data)
--------------------------------*/
.table{
  width:100%; border-collapse: collapse; background: var(--white);
  border:1px solid var(--gray-300); border-radius: var(--radius); overflow:hidden;
  box-shadow: var(--shadow-sm);
}
.table th, .table td{
  padding: .9rem 1rem;
  text-align:left; border-bottom:1px solid var(--gray-300);
}
.table th{
  background: var(--gray-200); font-weight:700;
}

/* ------------------------------
   10) Sections “version mixte”
--------------------------------*/
/* Alternance simple: .section puis .section.alt */
.section .section-title{
  margin-bottom: var(--space-6);
}
.alt .card{ background: var(--white); }

/* Bandeau discret évoquant la “transition” (barre verte fine) */
.transition-accent{
  height:4px; width:64px; background: var(--db-green); border-radius:4px;
  margin-bottom: var(--space-4);
}

/* ------------------------------
   11) Footer
--------------------------------*/
.footer{
  background: var(--anthracite);
  color: var(--white);
  padding-block: var(--space-12);
}
.footer a{ color: #d2e3db; }
.footer .muted{ color: #c6d2cc; }

/* ------------------------------
   12) Utilitaires
--------------------------------*/
.mt-0{ margin-top:0!important; }
.mt-4{ margin-top:var(--space-4)!important; }
.mt-6{ margin-top:var(--space-6)!important; }
.mt-8{ margin-top:var(--space-8)!important; }
.mb-0{ margin-bottom:0!important; }
.mb-4{ margin-bottom:var(--space-4)!important; }
.mb-6{ margin-bottom:var(--space-6)!important; }
.mb-8{ margin-bottom:var(--space-8)!important; }
.center{ text-align:center!important; }
.max-w-70ch{ max-width:70ch; }
.round{ border-radius: var(--radius); }

/* ------------------------------
   13) Responsive
--------------------------------*/
@media (max-width: 1024px){
  .col-4{ grid-column: span 6; }
  .col-6{ grid-column: span 12; }
}
@media (max-width: 640px){
  .nav-links{ display:none; }
  .hero{ padding-block: 3rem; }
  .grid{ grid-template-columns: repeat(6, 1fr); }
  .col-4,.col-6{ grid-column: span 6; }
  .container{ width:min(100% - 1.25rem, var(--max-w)); }
}

/* ------------------------------
   14) Accessibilité & impressions
--------------------------------*/
:focus-visible{ outline-offset: 2px; }
@media print{
  .navbar,.btn,.hero{ display:none!important; }
  a{ text-decoration: none; }
}