/* Minimal styles for Drivcook demo */
:root { --fg:#222; --bg:#fff; --primary:#1f7a8c; }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; color:var(--fg); background:var(--bg); font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; }
a{ color:var(--primary); }
.container{ background:#fff; }
input,button{ border:1px solid #ccc; border-radius:6px; }
button{ background:#f6f6f6; }
header.container{ border-bottom:1px solid #eee; }
pre{ background:#f9f9f9; padding:10px; border-radius:6px; overflow:auto; }

/* ====== NAVBAR ====== */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');

:root{
  --brand:#E6D9D9;         
  --accent:#FF8FD4;        
  --radius:999px;          
  --h-pad: 2rem;           
  --gap:   3rem;           
  --bg: #fff;
  --ink: #2b2b2b;
  --muted:#6b6b6b;
  --pill:#ffd6ef;
  --shadow: 0 6px 28px rgba(0,0,0,.08);
  --max: 1200px;
}

*{
  box-sizing:border-box;
}

html,body{
  margin:0;
  font-family: 'Oswald', sans-serif;
  background: var(--bg);
}

/* Navbar container */
.app-bar{
  position: sticky;
  top: 10px; /* espace au-dessus */
  z-index: 1000;
  padding-inline: 12px;
  background: var(--bg);
}

.navbar{
  margin-inline: auto;
  width: clamp(960px, 96vw, 1800px);
  background: var(--brand);
  color: var(--accent);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0.4rem var(--h-pad);
}

.logo img{
  height: 80px;
  display: block;
}

.nav-links{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--gap);
}

.nav-links a{
  color: var(--accent);
  text-decoration: none;
  font-weight: 500; 
  font-size: 1.25rem;
  line-height: 1;
  padding: 8px 12px; /* pour le fond arrondi */
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.nav-links a:hover{
  background-color: #FFD6F0;
}

.nav-btn{
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  font-size: 1.1rem;
  padding: 0.6rem 1.1rem;
  border:2px solid var(--accent);
  border-radius: 12px;
  background: transparent;
  transition: background .2s, color .2s;
}

.nav-btn:hover{
  background: var(--accent);
  color: #fff;
}

/* ====== GLOBAL ====== */
a{color:inherit; text-decoration:none}
.container{width:100%; max-width:var(--max); margin:0 auto; padding:0 24px}

/* ===== HERO ===== */
.hero{
  display:grid; grid-template-columns:1fr; gap:40px;
  align-items:center;
  padding:60px 0 30px;
}
.hero .content h1{
  font-size: clamp(28px, 4vw, 48px);
  line-height:1.1;
  margin:0 0 20px;
}
.hero .content p{
  color:var(--muted);
  margin:0 0 25px;
  font-size:clamp(16px, 1.8vw, 18px);
}
.actions{display:flex; gap:12px; flex-wrap:wrap}
.cta{
  background:#ff77c8;
  color:#fff;
  padding:12px 18px;
  border-radius:12px;
  font-weight:800;
  border:none;
  cursor:pointer;
}
.ghost{
  background:transparent;
  border:2px solid #ff77c8;
  color:#ff77c8;
  padding:10px 16px;
  border-radius:12px;
  font-weight:800;
}

.hero-card{
  background:#fff;
  border:1px solid #f0e8eb;
  border-radius:18px;
  padding:18px;
  box-shadow: var(--shadow);
  display:grid;
  gap:12px;
}
.search{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  background:#faf6f7;
  padding:10px;
  border-radius:12px;
}
.search input{
  flex:1;
  min-width:220px;
  border:0;
  outline:0;
  background:transparent;
  padding:10px 8px;
}
.search button{white-space:nowrap}

.badges{display:flex; gap:8px; flex-wrap:wrap}
.badge{
  background:#fff0fa;
  color:#a3005c;
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  border:1px solid #ffd6ef;
}

/* ===== SECTIONS ===== */
section{
  padding:60px 0; /* plus aéré */
}
.sec-title{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:16px;
}
.sec-title h2{
  margin:0;
  font-size: clamp(22px, 2.6vw, 28px);
}
.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px; /* plus d’espace entre cartes */
}
@media(min-width:680px){ .grid{grid-template-columns:repeat(2, 1fr)} }
@media(min-width:1024px){ .grid{grid-template-columns:repeat(3, 1fr)} }

.card{
  background:#fff;
  border:1px solid #f0e8eb;
  border-radius:16px;
  overflow:hidden;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
}
.thumb{
  aspect-ratio: 16/9;
  background:#ffe3f2;
  display:grid;
  place-items:center;
  color:#a3005c;
  font-weight:800;
}
.card-body{padding:14px}
.card h3{margin:0 0 6px; font-size:18px}
.card .meta{color:var(--muted); font-size:14px}

/* ===== CTA FRANCHISÉ ===== */
.cta-fr{
  background:linear-gradient(120deg, #ffe3f2, #fff);
  border:1px solid #ffd6ef;
  border-radius:18px;
  padding:20px;
  box-shadow: var(--shadow);
  display:grid;
  gap:10px;
}

/* ===== NEWSLETTER ===== */
.newsletter{
  background:#faf6f7;
  border:1px solid #f0e8eb;
  border-radius:18px;
  padding:18px;
  box-shadow: var(--shadow);
  display:grid;
  gap:12px;
}
.newsletter form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.newsletter input{
  flex:1;
  min-width:240px;
  padding:12px;
  border-radius:12px;
  border:1px solid #e8dbe0;
  outline:0;
}

/* ===== FOOTER ===== */
footer{
  padding:30px 0 48px;
  color:var(--muted);
}
.foot{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:space-between;
  align-items:center;
  border-top:1px dashed #eadfe3;
  padding-top:16px;
}
.foot a{color:var(--muted)}