/* ============================================================
   handiplace — landing styles · doux & organique
   Couleur de marque : #17498A (identique à l'app / l'icône)
   ============================================================ */
:root{
  /* Toutes les nuances dérivent du bleu EXACT du logo : #17498A (23,73,138). */
  --hp-blue:#17498A;        /* logo */
  --hp-blue-dark:#0F3260;   /* logo assombri — dégradés/footer */
  --hp-blue-light:#2A63AD;  /* logo éclairci — accents */
  --hp-sky:#5B8FD6;         /* bleu ciel doux pour blobs/dégradés */
  --hp-ink:#1d2733;
  --hp-bg:#fbfcfe;          /* fond général très légèrement bleuté */
}

html{ scroll-behavior:smooth; }
body{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--hp-ink);
  background:var(--hp-bg);
  overflow-x:hidden;
  position:relative;
}
h1,h2,h3,h4,.navbar-brand{ font-family:"Inter",system-ui,sans-serif; }

/* ── Ligne « route » pointillée qui serpente sur toute la page ── */
/* SVG en fond, derrière le contenu, du hero au footer. */
.route-line{
  position:absolute; top:0; left:0; width:100%; height:100%;
  z-index:0; pointer-events:none; overflow:hidden;
}
.route-line svg{ width:100%; height:100%; }
.route-line path{
  fill:none; stroke:var(--hp-sky); stroke-width:4;
  /* Ligne médiane suisse : trait/espace ≈ 3/1 → vrais segments de route. */
  stroke-dasharray:18 6; stroke-linecap:butt; opacity:.32;
  vector-effect:non-scaling-stroke; /* trait constant malgré l'étirement vertical */
}
/* wrapper post-hero : contient la route en fond + tout le contenu */
.route-wrap{ position:relative; }
/* tout le contenu passe au-dessus de la route */
.hero, section, footer, .container{ position:relative; z-index:1; }
.py-6{ padding-top:6rem; padding-bottom:6rem; }
.pt-6{ padding-top:5rem; } .pb-4{ padding-bottom:1.5rem; }
.opacity-90{ opacity:.9; }

h1,h2,h3{ letter-spacing:-.02em; }
section h2.fw-bold{ font-size:clamp(1.8rem,4vw,2.6rem); }

/* ── Animations subtiles : fade-up au scroll ── */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ── Blobs décoratifs flous (formes organiques en fond) ── */
.blob{
  position:absolute; border-radius:50%; filter:blur(80px);
  opacity:.22; pointer-events:none; z-index:0;
}
.section-soft{ position:relative; overflow:hidden; }
.section-soft > .container{ position:relative; z-index:1; }

/* Navbar */
.navbar{ backdrop-filter:saturate(180%) blur(8px); background:rgba(255,255,255,.85)!important; }
.brand-name{ color:var(--hp-blue); letter-spacing:-.03em; }
.navbar .nav-link{ font-weight:500; color:#33414f; border-radius:.6rem; padding:.4rem .8rem; transition:color .15s, background .15s; }
.navbar .nav-link:hover{ color:var(--hp-blue); background:rgba(23,73,138,.06); }

/* ── Hero ── */
.hero{
  position:relative;
  background:
    radial-gradient(1100px 480px at 88% -20%, rgba(91,143,214,.45) 0%, transparent 60%),
    linear-gradient(135deg,var(--hp-blue) 0%,var(--hp-blue-dark) 100%);
  padding:6.5rem 0 9rem;
  overflow:hidden;
}
.hero::before{ /* très léger voile lumineux (discret) */
  content:""; position:absolute; width:520px; height:520px; right:-160px; top:-180px;
  background:radial-gradient(circle at center, rgba(255,255,255,.08), transparent 70%);
  border-radius:50%; pointer-events:none;
}
.hero-badge{
  background:rgba(255,255,255,.16); font-weight:600; padding:.5rem 1.1rem;
  backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.25);
}
.hero h1{ font-size:clamp(2.4rem,6vw,4rem); line-height:1.05; }
.hero-logo{
  max-width:340px;
  filter:drop-shadow(0 24px 60px rgba(0,0,0,.4));
  animation:floaty 6s ease-in-out infinite;
  border-radius:2rem;
}
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }
@media (prefers-reduced-motion:reduce){ .hero-logo{ animation:none; } }
.hero .btn-light{ color:var(--hp-blue); font-weight:600; }
.store-badges img{ transition:transform .2s, filter .2s; filter:drop-shadow(0 6px 14px rgba(0,0,0,.25)); }
.store-badges a:hover img{ transform:translateY(-3px) scale(1.03); }
/* Mention « bientôt sur les stores » tant que l'app n'est pas publiée. */
.store-soon{
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  border-radius:2rem; padding:.6rem 1.2rem; backdrop-filter:blur(4px);
}
.store-soon::before{ content:"⏳"; font-size:1.05em; }

/* Vague fluide en bas du hero (remplace la ligne droite) */
.hero-wave{
  position:absolute; left:0; right:0; bottom:-1px; height:120px; z-index:1;
  background:var(--hp-bg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,64 C240,128 480,16 720,40 C960,64 1200,128 1440,72 L1440,120 L0,120 Z'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,64 C240,128 480,16 720,40 C960,64 1200,128 1440,72 L1440,120 L0,120 Z'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
}

/* ── Piliers : cartes flottantes ── */
.pillar-card{
  border-radius:1.5rem!important;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
  box-shadow:0 .5rem 1.5rem rgba(23,73,138,.06);
}
.pillar-card:hover{ transform:translateY(-8px); box-shadow:0 1.5rem 3rem rgba(23,73,138,.16)!important; }
/* Badge icône fin : carré arrondi gris clair + icône outline bleue. */
.pillar-badge{
  width:64px; height:64px; margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  background:#eef3f9; border-radius:1.1rem; color:var(--hp-blue);
}
.pillar-badge svg{ width:30px; height:30px; }
.pillar-badge svg [stroke]{ stroke:currentColor; }
.pillar-badge svg [fill]:not([fill="none"]){ fill:currentColor; }

/* ── Étapes : pastilles dégradées ── */
.step-num{
  width:54px; height:54px; border-radius:50%;
  background:linear-gradient(135deg,var(--hp-sky),var(--hp-blue));
  color:#fff; font-weight:700; font-size:1.3rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 .6rem 1.4rem rgba(23,73,138,.28);
}

/* ── Aperçu app : checks + éventail d'iPhones ── */
.sc-check{ width:24px; height:24px; margin-top:2px; }
.showcase-points span{ font-size:1.05rem; color:#33414f; }
/* Légende des macarons — carré arrondi identique à l'app Flutter */
.macaron-legend{ border-top:1px solid #e7eef7; }
.leg-macaron{
  flex-shrink:0; width:30px; height:30px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:7px; border:2px solid #fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.leg-macaron .material-icons{ font-size:19px; color:#fff; line-height:1; }

.phone-fan{
  position:relative; height:560px;
  display:flex; align-items:center; justify-content:center;
}
.phone{
  position:absolute;
  width:230px; aspect-ratio:1206/2622;
  background:#0d1b2a; border-radius:32px; padding:8px;
  box-shadow:0 26px 60px rgba(15,50,96,.30), 0 4px 12px rgba(0,0,0,.18);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.phone img{ width:100%; height:100%; object-fit:cover; border-radius:24px; display:block; }
/* 3 téléphones : pos2 (carte) au centre/devant, pos0 & pos1 en éventail. */
.phone-pos0{ transform:translate(-150px,30px) rotate(-9deg); z-index:4; }  /* fiche */
.phone-pos1{ transform:translate(150px,30px) rotate(9deg);   z-index:4; }  /* communauté */
.phone-pos2{ transform:translate(0,-6px) rotate(0deg);       z-index:6; }  /* carte (devant) */
.phone-fan:hover .phone-pos2{ transform:translateY(-14px); }

@media (max-width:991px){
  .phone-fan{ height:480px; }
  .phone{ width:185px; }
  .phone-pos0{ transform:translate(-115px,24px) rotate(-9deg); }
  .phone-pos1{ transform:translate(115px,24px) rotate(9deg); }
}
@media (max-width:575px){
  .phone-fan{ height:430px; }
  .phone{ width:160px; }
  .phone-pos0{ transform:translate(-78px,16px) rotate(-8deg); }
  .phone-pos1{ transform:translate(78px,16px) rotate(8deg); }
}

/* ── Pourquoi ce projet ── */
.why-card{
  background:linear-gradient(135deg,#ffffff 0%, #eef4fb 100%);
  border:none; border-radius:1.8rem;
  box-shadow:0 1.5rem 3.5rem rgba(23,73,138,.10);
  position:relative; overflow:hidden;
}
.why-card::before{ /* accent organique dans le coin */
  content:""; position:absolute; width:260px; height:260px; right:-90px; top:-90px;
  background:radial-gradient(circle, rgba(91,143,214,.18), transparent 70%); border-radius:50%;
}
.why-text{ font-size:1.14rem; line-height:1.8; color:#33414f; position:relative; }
.why-sign{ color:var(--hp-blue); font-weight:600; font-style:italic; }

/* ── Sources : chips douces ── */
.source-chip{
  background:#fff; border:1px solid #e7eef7; border-radius:1rem;
  padding:1.1rem .75rem; font-weight:600; color:#3a4a5c;
  box-shadow:0 .4rem 1rem rgba(23,73,138,.05);
  transition:transform .2s, box-shadow .2s, color .2s, border-color .2s;
}
a.source-chip:hover{
  color:var(--hp-blue); border-color:var(--hp-sky);
  transform:translateY(-4px); box-shadow:0 1rem 2rem rgba(23,73,138,.14);
}

/* ── Section dons : ondulée + dégradé riche ── */
.support-section{
  position:relative;
  background:
    radial-gradient(800px 400px at 15% 120%, var(--hp-sky) 0%, transparent 60%),
    linear-gradient(135deg,var(--hp-blue-light) 0%,var(--hp-blue) 100%);
  border-radius:2.5rem;
  margin:0 1rem; overflow:hidden;
}
.support-section .btn-light{
  color:var(--hp-blue); font-weight:700; border-radius:2rem;
  box-shadow:0 .8rem 1.8rem rgba(0,0,0,.18);
  transition:transform .2s, box-shadow .2s;
}
.support-section .btn-light:hover{ transform:translateY(-3px); box-shadow:0 1.2rem 2.4rem rgba(0,0,0,.24); }
/* Mains en filigrane dans le bloc dons */
.support-hands{
  position:absolute; right:6%; top:50%; transform:translateY(-50%);
  width:230px; height:230px; color:#fff; opacity:.10; pointer-events:none;
}
@media (max-width:767px){ .support-hands{ width:150px; right:auto; left:50%; transform:translate(-50%,-50%); } }

/* Plus d'air entre le titre et les numéros (allège la section). */
.how-title{ margin-bottom:5rem; }
@media (max-width:991px){ .how-title{ margin-bottom:3rem; } }

/* Steps en léger zigzag (suivent la route). On décale le contenu interne
   (pas la colonne .reveal, dont le transform sert à l'animation). */
@media (min-width:992px){
  #how .row > div:nth-child(1) > div{ margin-top:14px; }
  #how .row > div:nth-child(2) > div{ margin-top:-18px; }
  #how .row > div:nth-child(3) > div{ margin-top:22px; }
  #how .row > div:nth-child(4) > div{ margin-top:-10px; }
}

/* ── Footer avec carte de la Suisse en fond ── */
.footer-map{
  position:relative;
  background:linear-gradient(180deg,var(--hp-blue) 0%, var(--hp-blue-dark) 100%);
  margin-top:4rem;
}
.footer-map::before{
  content:""; position:absolute; inset:0;
  background:url("/site/assets/switzerland-grey.jpg") right center/contain no-repeat;
  opacity:.14; pointer-events:none; mix-blend-mode:screen;
}
.footer-link{ color:rgba(255,255,255,.82); text-decoration:none; transition:color .15s; }
.footer-link:hover{ color:#fff; text-decoration:underline; }

/* ── Pages légales ── */
.legal-page{ min-height:60vh; position:relative; overflow:hidden; }
.legal-page > .container{ position:relative; z-index:1; }
.legal-page h2{ color:var(--hp-blue); margin-top:1.5rem; }
.legal-page a{ color:var(--hp-blue); }
.legal-page ul{ padding-left:1.2rem; }
.legal-page li{ margin-bottom:.4rem; }

@media (max-width:991px){
  .hero{ padding:4rem 0 6rem; text-align:center; }
  .hero .d-flex{ justify-content:center; }
  .hero-logo{ max-width:220px; margin-top:2rem; }
  .support-section{ border-radius:1.8rem; margin:0 .5rem; }
}