/* ============================================================
   home.css — styles spécifiques à la page d'accueil
   (le design system commun vit dans main.css)
   ============================================================ */

.section{ padding:96px 0; }
.section-tinted{ background:var(--cream-2); }
.section-dark{ background:linear-gradient(160deg,var(--green-900),var(--green-800)); color:var(--cream); }
.section-head{ max-width:680px; margin:0 auto 48px; text-align:center; }
.section-head h2{ font-size:clamp(26px,3.4vw,38px); }
.section-sub{ color:var(--ink-soft); font-size:16.5px; }
.section-dark .section-sub{ color:rgba(248,244,234,.78); }

/* ---------- HERO ---------- */
.hero{ position:relative; padding:64px 0 90px; overflow:hidden; background:var(--cream); }
.hero-bg-pattern{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(560px 420px at 88% -6%, rgba(212,175,55,.16), transparent 60%),
    radial-gradient(520px 420px at -6% 100%, rgba(18,58,44,.10), transparent 60%);
}
.hero-grid{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero-copy h1{ font-size:clamp(32px,4.2vw,50px); margin-bottom:20px; }
.hero-copy h1 em{ font-style:normal; color:var(--gold-700); }
.hero-lede{ font-size:17.5px; color:var(--ink-soft); max-width:520px; }
.hero-tags{ display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 28px; }
.hero-tags span{
  display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--green-800);
  background:var(--green-100); border:1px solid var(--line); padding:8px 14px; border-radius:999px;
}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-visits{ margin-top:24px; font-family:var(--font-mono); font-size:13px; color:var(--ink-soft); display:flex; align-items:center; gap:8px; }

.hero-visual{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.trust-wheel{ text-align:center; }
.wheel-svg{ width:min(360px,88vw); height:auto; }
.wheel-ring{ fill:none; stroke:var(--gold-300); stroke-width:1.5; opacity:.6; }
.wheel-ring--soft{ stroke:var(--green-600); opacity:.35; stroke-dasharray:3 7; }
.wheel-spin{ transform-origin:180px 180px; animation:spin 32s linear infinite; }
.wheel-node circle{ fill:var(--paper); stroke:var(--green-700); stroke-width:2; }
.wheel-node text{ font-family:var(--font-mono); font-weight:700; font-size:20px; fill:var(--green-800); text-anchor:middle; }
.wheel-node{ animation:counterspin 32s linear infinite; transform-origin:center; }
.wheel-pot{ fill:var(--green-900); }
.wheel-pot-label{ fill:var(--gold-300); font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-anchor:middle; }
.wheel-pot-emoji{ font-size:20px; text-anchor:middle; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes counterspin{ to{ transform:rotate(-360deg); } }
.wheel-caption{ margin-top:14px; font-size:13.5px; color:var(--ink-soft); font-style:italic; }

.hero-stat-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:22px 26px; width:100%; max-width:380px; }
.stat-row{ display:flex; justify-content:space-between; text-align:center; }
.stat-num{ display:block; font-family:var(--font-mono); font-weight:700; font-size:26px; color:var(--green-900); }
.stat-label{ display:block; font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; margin-top:2px; }

/* ---------- TYPES ---------- */
.types-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.type-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md); padding:28px 24px; text-align:center; position:relative; box-shadow:var(--shadow-sm); transition:transform .2s; }
.type-card:hover{ transform:translateY(-5px); }
.type-tour{ position:absolute; top:16px; right:16px; font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--gold-700); background:var(--gold-100); padding:4px 9px; border-radius:999px; }
.type-ic{ font-size:34px; margin-bottom:14px; }
.types-cta{ text-align:center; margin-top:38px; }
@media (max-width:920px){ .types-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .types-grid{ grid-template-columns:1fr; } }

/* ---------- VIDEO ---------- */
.video-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:52px; align-items:center; }
.check-list{ list-style:none; display:flex; flex-direction:column; gap:13px; margin-top:20px; }
.check-list i{ color:var(--green-600); margin-right:10px; }
.video-wrap{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); border:1px solid var(--line); }
.video-wrap video{ width:100%; display:block; background:#000; }

/* ---------- PUBLICITES ---------- */
.pub-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:52px; align-items:center; }
.pub-feature-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:26px; }
.pub-feature{ display:flex; gap:12px; }
.pub-feature i{ color:var(--gold-400,var(--gold-500)); font-size:18px; margin-top:3px; }
.pub-feature h4{ color:#fff; font-size:14.5px; margin:0 0 3px; }
.pub-feature p{ color:rgba(248,244,234,.65); font-size:13px; margin:0; }
.phone-mock-wrap{ display:flex; justify-content:center; }
.phone-mock{ width:260px; background:var(--green-900); border:6px solid #0a2018; border-radius:36px; box-shadow:var(--shadow-md); padding:14px; }
.phone-notch{ width:70px; height:6px; background:rgba(255,255,255,.2); border-radius:6px; margin:0 auto 12px; }
.phone-inner{ background:var(--green-800); border-radius:20px; padding:16px; }
.phone-brand{ text-align:center; color:var(--gold-300); font-weight:700; font-size:14px; margin-bottom:12px; }
.ad-slot{ background:linear-gradient(135deg,var(--gold-500),var(--gold-700)); color:var(--green-900); font-weight:700; font-size:13px; padding:14px; border-radius:12px; margin-bottom:10px; text-align:center; }
.ad-slot span{ display:block; font-weight:500; font-size:11px; margin-top:4px; opacity:.85; }
.ad-slot--sm{ background:linear-gradient(135deg,#e0c26a,#a67a1e); padding:10px; font-size:12px; }
.phone-tile{ background:rgba(255,255,255,.06); border-radius:10px; padding:10px 12px; margin-bottom:10px; display:flex; justify-content:space-between; font-size:12px; color:rgba(248,244,234,.8); }
.phone-tile strong{ color:var(--gold-300); }

/* ---------- CROWDFUNDING ---------- */
.cf-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cf-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s; }
.cf-card:hover{ transform:translateY(-5px); }
.cf-card img{ width:100%; height:180px; object-fit:cover; }
.cf-body{ padding:22px; }
.cf-ic{ width:44px; height:44px; border-radius:50%; background:var(--green-100); color:var(--green-700); display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.cf-example{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--ink-soft); }
.cf-example .ok{ color:#2f7a4d; font-weight:600; }
.how-it-works{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px; margin-top:44px; text-align:center; }
.how-it-works h3{ margin-bottom:26px; }
.steps-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.steps-row-num{ width:44px; height:44px; border-radius:50%; margin:0 auto 10px; background:linear-gradient(135deg,var(--gold-500),var(--gold-700)); color:var(--green-900); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; }
.steps-row-item h4{ font-size:15px; margin-bottom:4px; }
.steps-row-item p{ font-size:13px; color:var(--ink-soft); margin:0; }
@media (max-width:920px){ .cf-grid{ grid-template-columns:1fr; } .steps-row{ grid-template-columns:1fr 1fr; } }

/* ---------- CAS CONCRETS ---------- */
.cases-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.case-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md); padding:26px; box-shadow:var(--shadow-sm); }
.case-ic{ width:46px; height:46px; border-radius:12px; background:var(--gold-100); color:var(--gold-700); display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:14px; }
.case-card ul{ list-style:none; margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.case-card li{ font-size:13.5px; color:var(--ink-soft); padding-left:16px; position:relative; }
.case-card li::before{ content:'—'; position:absolute; left:0; color:var(--gold-600); }
@media (max-width:760px){ .cases-grid{ grid-template-columns:1fr; } }

/* ---------- APPS ---------- */
.apps-grid{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.apps-download-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow-md); }
.store-row{ display:flex; gap:12px; margin-top:16px; }
.store-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:10px; padding:12px; border-radius:12px;
  background:var(--green-900); color:#fff; border:none; cursor:pointer; font-family:var(--font-body);
}
.store-btn i{ font-size:20px; }
.store-btn span{ display:flex; flex-direction:column; text-align:left; font-size:13px; font-weight:700; }
.store-btn small{ font-weight:400; font-size:10.5px; opacity:.75; }

/* ---------- CONTACT ---------- */
.contact-grid-2{ display:grid; grid-template-columns:.9fr 1.1fr; gap:52px; }
.contact-list{ list-style:none; display:flex; flex-direction:column; gap:18px; margin-top:26px; }
.contact-list li{ display:flex; gap:14px; align-items:flex-start; }
.contact-list i{ width:38px; height:38px; border-radius:50%; background:var(--green-100); color:var(--green-700); display:flex; align-items:center; justify-content:center; flex:none; }
.contact-list h4{ font-size:14px; margin:0 0 2px; }
.contact-list p{ margin:0; font-size:14px; color:var(--ink-soft); }
.contact-form-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow-md); }
.captcha-row{ display:flex; gap:12px; align-items:center; }
.captcha-display{ font-family:var(--font-mono); font-weight:700; font-size:20px; background:var(--green-900); color:var(--gold-300); padding:11px 20px; border-radius:10px; letter-spacing:.1em; }
@media (max-width:900px){ .contact-grid-2, .apps-grid, .pub-grid, .video-grid{ grid-template-columns:1fr; } }

/* ---------- NEWSLETTER ---------- */
.newsletter-band{ background:linear-gradient(135deg,var(--gold-500),var(--gold-700)); }
.newsletter-inner{ text-align:center; max-width:560px; margin:0 auto; }
.newsletter-ic{ font-size:34px; color:var(--green-900); margin-bottom:12px; }
.newsletter-inner h2{ color:var(--green-900); }
.newsletter-inner p{ color:rgba(12,43,33,.75); }
.newsletter-input-row{ display:flex; gap:10px; max-width:440px; margin:20px auto 12px; }
.newsletter-input-row input{ flex:1; min-width:0; padding:13px 18px; border-radius:999px; border:none; font-family:var(--font-body); }
@media (max-width:480px){
  .newsletter-input-row{ flex-direction:column; }
}
.newsletter-check{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:13.5px; color:var(--green-900); }

/* ---------- POPUP ---------- */
.popup-overlay{ position:fixed; inset:0; background:rgba(12,43,33,.55); display:none; align-items:center; justify-content:center; z-index:2000; padding:20px; }
.popup-overlay.show{ display:flex; }
.popup-content{ background:var(--paper); border-radius:var(--radius-lg); padding:36px; text-align:center; max-width:360px; box-shadow:var(--shadow-md); }
.popup-icon{ font-size:34px; color:var(--gold-600); margin-bottom:14px; }
.popup-subtitle{ font-size:13.5px; color:var(--ink-soft); }

@media (max-width:920px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
}

/* Safety net against the CSS Grid/Flexbox "min-width:auto" overflow trap:
   grid/flex items default to a minimum content width equal to their own
   min-content, which can force the whole track wider than its container
   (e.g. a button with long unbreakable text). This forces them to shrink
   properly on narrow screens. */
.hero-grid > *, .apps-grid > *, .contact-grid-2 > *, .pub-grid > *,
.video-grid > *, .cf-grid > *, .cases-grid > *, .types-grid > *,
.feature-grid > *, .footer-grid > *, .stat-row > *, .store-row > *,
.steps-row > *, .form-grid > * {
  min-width: 0;
}