/* ============================================================
   CSS — Variables & Reset
   (base : conciergeries.css + styles spécifiques télécharger)
============================================================ */
:root {
  --gradient-start: #1a0f2e;
  --gradient-end:   #e65c25;
  --gradient-mid:   #c0390e;
  --primary-color:  #c0390e;
  --primary-dark:   #8a2208;
  --secondary-color:#4a1a00;
  --text-light:     #ffffff;
  --text-dark:      #333333;
  --spacing-sm:     0.5rem;
  --spacing-md:     1rem;
  --spacing-lg:     2rem;
  --border-radius:  8px;
  --transition:     all 0.3s ease;
  --white:          #ffffff;
  --orange:         #e65c25;
  --orange-deep:    #c0390e;
  --gold:           #e07a3a;
  --gold-light:     rgba(224,122,58,.12);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  color: var(--text-dark);
  background: #f5f5f5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
}

p { text-align: justify; }

/* =========================
   UTILITAIRES
========================= */
.sr-only { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; top:-40px; left:0; background:var(--primary-color); color:white; padding:8px 16px; font-size:.85rem; z-index:9999; transition:top .2s; }
.skip-link:focus { top:0; }
.hidden  { display: none !important; }

/* =========================
   HEADER
========================= */
.header {
  position: fixed; top: 0; width: 100%;
  background: white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 50;
}
.main-container {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 850px; margin: 0 auto; padding: 12px 24px;
}
.logo img { height: 48px; width: auto; }
.navMenu { display: none; cursor: pointer; padding: 8px; }
.navMenu svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; transition: transform .3s; }
.navMenu:hover svg { transform: scale(1.1); }
#navInput { display: none; }
.fullclose { display: none; position: fixed; }
.nav ul { display: flex; list-style: none; align-items: center; gap: 24px; margin: 0; padding: 0; }
.nav a { text-decoration: none; color: #374151; font-weight: 500; font-size: 14px; transition: color .3s; position: relative; }
.nav a:hover { color: var(--primary-color); }
.nav a::after { content:''; position:absolute; width:0; height:2px; bottom:-4px; left:50%; background:var(--primary-color); transition:all .3s; transform:translateX(-50%); }
.nav a:hover::after { width: 100%; }
.close-nav { display: none; }
.fullclose  { display: none; }

/* =========================
   CONTAINER
========================= */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* =========================
   HERO
========================= */
.hero {
  background: linear-gradient(135deg, #1a0f2e 0%, #e65c25 100%);
  color: white;
  padding: 120px 24px 72px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -40%; left: -20%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%);
  border-radius: 50%;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -30%; right: -10%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(230,92,37,.3) 0%, transparent 70%);
  border-radius: 50%;
}

.hero-content {
  position: relative; z-index: 2;
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: center;
}

.hero-text { text-align: left; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50px; padding: 6px 16px;
  font-size: .75rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.85); margin-bottom: 20px;
  backdrop-filter: blur(8px);
}

.hero-badge span.dot {
  width: 7px; height: 7px;
  background: #e65c25; border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity:1; transform:scale(1); }
  50%       { opacity:.5; transform:scale(1.3); }
}

.hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700; margin-bottom: 20px;
  line-height: 1.15; text-align: left;
}

.hero h1 em {
  font-style: normal;
  background: linear-gradient(90deg, #ff9a6c, #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-desc {
  font-size: 1rem; opacity: .85;
  margin-bottom: 32px; text-align: left; line-height: 1.75;
}

.hero-stats { display: flex; gap: 24px; flex-wrap: wrap; }

.hero-stat {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px; padding: 12px 20px;
  backdrop-filter: blur(8px);
  text-align: center; min-width: 100px;
}

.hero-stat strong {
  display: block; font-size: 1.5rem; font-weight: 700; color: white;
}

.hero-stat span {
  font-size: .72rem; color: rgba(255,255,255,.65);
  font-weight: 500; letter-spacing: .04em;
}

.hero-visual { display: flex; justify-content: center; align-items: center; }

.hero-app-img-wrapper { display: flex; justify-content: center; align-items: center; }

.hero-app-img {
  max-width: 280px; width: 100%; height: auto;
  filter: drop-shadow(0 32px 64px rgba(0,0,0,.45));
  animation: float 4s ease-in-out infinite;
  border-radius: 32px;
}

.phone-mockup {
  position: relative; width: 240px; height: 480px;
  background: linear-gradient(160deg, #2a1a40, #1a0f2e);
  border-radius: 36px; border: 3px solid rgba(255,255,255,.15);
  box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 24px;
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

.phone-mockup::before {
  content: ''; position: absolute; top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 5px;
  background: rgba(255,255,255,.15); border-radius: 10px;
}

.phone-logo {
  width: 80px; height: 80px; border-radius: 20px;
  background: linear-gradient(135deg, #e65c25, #1a0f2e);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; box-shadow: 0 8px 24px rgba(230,92,37,.4);
}
.phone-logo img { width: 60px; height: 60px; object-fit: contain; }
.phone-app-name { font-weight:700; color:white; font-size:1.1rem; margin-bottom:6px; text-align:center; }
.phone-app-sub  { font-size:.75rem; color:rgba(255,255,255,.55); text-align:center; margin-bottom:24px; }
.phone-rating   { display:flex; align-items:center; gap:6px; font-size:.8rem; color:rgba(255,255,255,.7); margin-bottom:20px; }
.stars { color: #f59e0b; }
.phone-btn {
  width:100%; padding:10px;
  background: linear-gradient(135deg, #e65c25, #c04a1a);
  border-radius:12px; text-align:center; font-size:.8rem;
  font-weight:600; color:white; margin-bottom:8px;
  box-shadow: 0 4px 12px rgba(230,92,37,.35);
}

/* =========================
   OS BANNER
========================= */
.os-banner { background: linear-gradient(90deg, #1a0f2e, #2d1a4e); color:white; padding:16px 24px; text-align:center; }
.os-banner-inner { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.os-detected-label { font-size:.85rem; color:rgba(255,255,255,.7); }
.os-detected-value { font-weight:700; font-size:.9rem; color:#ff9a6c; }
.os-arrow          { font-size:1rem; color:rgba(255,255,255,.4); }
.os-redirect-msg   { font-size:.85rem; color:rgba(255,255,255,.85); }

/* =========================
   MAIN / DOWNLOAD SECTION
========================= */
.download-section { max-width:1100px; margin:0 auto; padding:72px 24px; }
.steps-inner { padding-top:0; padding-bottom:0; }

.section-header { text-align:center; margin-bottom:8px; }
.section-header .section-eyebrow { justify-content:center; }

.section-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--primary-color); margin-bottom:12px;
}
.section-eyebrow::before {
  content:''; display:block; width:22px; height:2px;
  background:var(--gradient-end); border-radius:2px;
}

.section-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight:700; color:#111827; margin-bottom:12px; text-align:center;
}
.section-title em { font-style:italic; color:var(--primary-color); }

.section-subtitle {
  font-size:1rem; color:#6b7280; text-align:center;
  margin-bottom:56px; max-width:520px;
  margin-left:auto; margin-right:auto;
}

/* =========================
   QR CARDS
========================= */
.qr-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-bottom:64px; }

.qr-card {
  background:white; border-radius:20px; padding:40px;
  box-shadow:0 8px 32px rgba(0,0,0,.08);
  border:1px solid #e5e7eb; text-align:center;
  transition:all .3s ease; position:relative; overflow:hidden;
}
.qr-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; }
.qr-card.ios::before     { background: linear-gradient(90deg, #555, #aaa); }
.qr-card.android::before { background: linear-gradient(90deg, #3ddc84, #00897b); }
.qr-card:hover { box-shadow:0 20px 56px rgba(0,0,0,.14); transform:translateY(-6px); }
.qr-card.detected { border-color:var(--primary-color); box-shadow:0 8px 32px rgba(192,57,14,.12), 0 0 0 2px rgba(192,57,14,.1); }

.detected-badge {
  position:absolute; top:16px; right:16px;
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
  color:white; font-size:.65rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:4px 10px; border-radius:50px;
}

.store-icon { width:64px; height:64px; margin:0 auto 16px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:2rem; }
.store-icon.ios-icon     { background: linear-gradient(135deg, #1c1c1e, #3a3a3c); }
.store-icon.android-icon { background: linear-gradient(135deg, #3ddc84, #00897b); }

.qr-card h3 { font-size:1.3rem; font-weight:700; color:#111827; margin-bottom:6px; }
.qr-card .store-name { font-size:.82rem; color:#6b7280; margin-bottom:28px; }

.qr-container {
  background:white; border-radius:16px; padding:20px;
  border:1px solid #e5e7eb; margin-bottom:24px;
  display:flex; flex-direction:column; align-items:center;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.qr-img { display:block; width:180px; height:180px; border-radius:10px; border:3px solid #f3f4f6; }
.qr-label { font-size:.78rem; color:#9ca3af; margin-top:12px; }

/* Double QR */
.dual-qr-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:0; }
.dual-qr-item { display:flex; flex-direction:column; gap:12px; }
.dual-qr-item .qr-container { margin-bottom:0; }
.dual-qr-item .qr-code-wrapper { width:150px; height:150px; }
.qr-card .dual-qr-grid ~ * { margin-top:0; }

/* Card QR universel */
.qr-grid-single { grid-template-columns:1fr !important; max-width:480px; margin-left:auto; margin-right:auto; }
.qr-card-universal { text-align:center; border-top:4px solid transparent; border-image: linear-gradient(135deg, #1a0f2e, #e65c25) 1; }
.store-icons-row { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:12px; }
.store-icons-sep { font-size:1.2rem; font-weight:700; color:#9ca3af; }
.universal-store-btns { display:flex; flex-direction:column; gap:10px; margin-top:4px; }

/* =========================
   STORE BUTTONS
========================= */
.store-btn {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:14px 20px; border-radius:12px;
  text-decoration:none; font-weight:600; font-size:.92rem;
  transition:all .3s ease; color:white;
}
.store-btn.ios-btn { background: linear-gradient(135deg, #1c1c1e, #3a3a3c); }
.store-btn.ios-btn:hover { background: linear-gradient(135deg, #2c2c2e, #505052); transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.25); }
.store-btn.android-btn { background: linear-gradient(135deg, #3ddc84, #00897b); }
.store-btn.android-btn:hover { background: linear-gradient(135deg, #4ee894, #009a8c); transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,137,123,.35); color:white; }

.btn-store-logo { width:22px; height:22px; flex-shrink:0; }
.btn-text-block { text-align:left; line-height:1.2; }
.btn-small { font-size:.68rem; opacity:.75; font-weight:500; }
.btn-big   { font-size:.95rem; font-weight:700; }

.store-btn.ios-btn-outline     { background:transparent; border:2px solid rgba(255,255,255,.5); opacity:.75; }
.store-btn.ios-btn-outline:hover { background:rgba(255,255,255,.1); opacity:1; box-shadow:none; }
.store-btn.android-btn-outline   { background:transparent; border:2px solid rgba(255,255,255,.5); opacity:.75; }
.store-btn.android-btn-outline:hover { background:rgba(255,255,255,.1); opacity:1; box-shadow:none; }

/* =========================
   UNIVERSAL CARD
========================= */
.universal-card {
  background: linear-gradient(135deg, var(--gradient-start) 0%, #3d1a5e 50%, var(--gradient-end) 100%);
  border-radius:20px; padding:40px; color:white;
  text-align:center; margin-bottom:64px;
  position:relative; overflow:hidden;
}
.universal-card::before {
  content:''; position:absolute; top:-40%; left:-10%;
  width:300px; height:300px;
  background: radial-gradient(circle, rgba(255,255,255,.05), transparent 70%);
  border-radius:50%;
}
.universal-card h3 { font-size:1.4rem; margin-bottom:10px; position:relative; }
.universal-card p  { opacity:.8; margin-bottom:28px; font-size:.92rem; position:relative; }
.universal-btn-group { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; position:relative; }

/* =========================
   CTA BUTTON
========================= */
.cta-button {
  display:inline-flex; align-items:center; gap:8px;
  background:white; color:var(--gradient-start);
  padding:14px 28px; text-decoration:none;
  border-radius:var(--border-radius); font-weight:700;
  font-size:.92rem; transition:var(--transition);
}
.cta-button:hover { background:rgba(255,255,255,.88); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.25); }

/* =========================
   FEATURES
========================= */
.features-section { padding:0 0 64px; }
.features-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:2rem; padding:2rem 0; }

.feature-card {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:white; border-radius:16px; padding:2rem 1.5rem;
  box-shadow:0 4px 16px rgba(0,0,0,.06); border:1px solid #f3f4f6;
  transition:all .3s ease;
}
.feature-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,.1); }
.feature-icon { width:72px; height:72px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:2rem; margin-bottom:16px; background: linear-gradient(135deg, rgba(26,15,46,.08), rgba(230,92,37,.08)); }
.feature-card h3 { font-size:1rem; font-weight:700; color:#111827; margin-bottom:8px; }
.feature-card p  { font-size:.85rem; color:#6b7280; line-height:1.6; }

/* =========================
   HOW IT WORKS
========================= */
.steps-section { background:white; padding:64px 0; }
.steps-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:2rem; margin-top:40px; }
.step-card  { text-align:center; padding:2rem 1rem; }
.step-number {
  width:56px; height:56px; border-radius:50%;
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
  color:white; font-size:1.3rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px;
}
.step-card h3 { font-size:1rem; font-weight:700; color:#111827; margin-bottom:8px; }
.step-card p  { font-size:.85rem; color:#6b7280; }

/* =========================
   BREADCRUMB
========================= */
.breadcrumb-bar { background:#f9fafb; border-bottom:1px solid #e5e7eb; padding:80px 24px 0; }
.breadcrumb-inner { max-width:1200px; margin:0 auto; padding:10px 0; }
.breadcrumb-list { display:flex; align-items:center; gap:8px; list-style:none; font-size:.82rem; color:#6b7280; }
.breadcrumb-list a { color:var(--primary-color); text-decoration:none; }
.breadcrumb-list a:hover { text-decoration:underline; }

/* =========================
   FAQ
========================= */
.faq-section { background:#f9fafb; padding:64px 0; }
.faq-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:24px; margin-top:40px; }
.faq-item { background:white; border-radius:16px; padding:28px; box-shadow:0 4px 16px rgba(0,0,0,.06); border:1px solid #f3f4f6; border-left:4px solid var(--gradient-end); }
.faq-item h3 { font-size:.98rem; font-weight:700; color:#111827; margin-bottom:12px; text-align:left; }
.faq-item p  { font-size:.88rem; color:#6b7280; line-height:1.7; text-align:left; }

/* =========================
   SITE FOOTER
========================= */
.site-footer {
  background: linear-gradient(135deg, #1a0f2e 0%, #e65c25 100%);
  color: rgba(255,255,255,0.75);
  padding: 56px 24px 24px;
  font-size: 0.875rem;
}
.site-footer .footer-inner { max-width:1200px; margin:0 auto; }
.site-footer .footer-top {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:40px; padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,0.1); margin-bottom:24px;
}
.site-footer .footer-brand img { height:42px; width:auto; filter:brightness(0) invert(1); margin-bottom:16px; display:block; }
.site-footer .footer-brand p   { font-size:.82rem; line-height:1.6; color:rgba(255,255,255,.55); margin-bottom:16px; text-align:left; }
.site-footer .footer-contact a { display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.75); text-decoration:none; font-size:.88rem; margin-bottom:8px; transition:color .2s; }
.site-footer .footer-contact a:hover { color:#e65c25; }
.site-footer .footer-col h4    { font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:16px; }
.site-footer .footer-col ul    { list-style:none; padding:0; margin:0; }
.site-footer .footer-col ul li { margin-bottom:10px; }
.site-footer .footer-col a     { color:rgba(255,255,255,.65); text-decoration:none; font-size:.88rem; transition:color .2s; }
.site-footer .footer-col a:hover { color:white; }
.site-footer .footer-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.78rem; color:rgba(255,255,255,.35); }
.site-footer .footer-bottom strong { color:rgba(255,255,255,.55); }

/* =========================
   ANIMATIONS
========================= */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:translateY(0); }
}
.anim-fade-up { opacity:0; animation:fadeUp .7s ease forwards; }
.anim-delay-1 { animation-delay:.1s; }
.anim-delay-2 { animation-delay:.25s; }
.anim-delay-3 { animation-delay:.4s; }
.anim-delay-4 { animation-delay:.55s; }

/* =========================
   RESPONSIVE
========================= */
@media (min-width: 480px) {
  .universal-store-btns { flex-direction:row; justify-content:center; }
  .universal-store-btns .store-btn { flex:1; }
}

@media (max-width: 900px) {
  .navMenu { display:block; }

  /* Cache la nav par défaut en mobile */
  .nav { display: none; }

  /* Ouvre le menu quand la checkbox est cochée */
  #navInput:checked ~ .nav {
    display:block; position:fixed; top:0; right:0; bottom:0; width:280px;
    background:white; padding:2rem 1.5rem;
    box-shadow:-4px 0 20px rgba(0,0,0,.15); z-index:100; overflow-y:auto;
  }
  #navInput:checked ~ .nav ul {
    display:flex; flex-direction:column; align-items:center; gap:0;
  }
  #navInput:checked ~ .nav ul li {
    width:100%; border-bottom:1px solid #f0f0f0; text-align:center;
  }
  #navInput:checked ~ .nav ul li a {
    display:block; padding:.85rem 0; font-size:1rem;
  }
  #navInput:checked ~ .fullclose {
    display:block; position:fixed; inset:0; z-index:99; background:rgba(0,0,0,.4);
  }

  .close-nav { display:list-item; }
  .close { cursor:pointer; display:flex; align-items:center; gap:.5rem; color:var(--primary-color); font-weight:600; margin-bottom:1.5rem; }
  .close svg { width:18px; height:18px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
}

@media (max-width: 768px) {
  .hero-content { grid-template-columns:1fr; text-align:center; gap:32px; }
  .hero-text  { text-align:center; }
  .hero h1    { text-align:center; }
  .hero-desc  { text-align:center; }
  .hero-stats { justify-content:center; }
  .hero-visual  { order:-1; }
  .phone-mockup { width:180px; height:360px; }
  .hero-app-img { max-width:200px; }

  .qr-grid { grid-template-columns:1fr; max-width:400px; margin-left:auto; margin-right:auto; }

  .os-banner-inner { flex-direction:column; gap:4px; }

  .site-footer .footer-top { grid-template-columns:1fr 1fr; gap:32px; }
  .site-footer .footer-brand { grid-column:1 / -1; }
}

@media (max-width: 480px) {
  .download-section    { padding:48px 16px; }
  .universal-btn-group { flex-direction:column; align-items:center; }
  .dual-qr-grid        { grid-template-columns:1fr; }
  .dual-qr-item .qr-code-wrapper { width:180px; height:180px; }
  .site-footer .footer-top    { grid-template-columns:1fr; }
  .site-footer .footer-bottom { flex-direction:column; text-align:center; }
}