/* Vitrine publique : accueil, /particuliers, /pro (groupe « site »). Complète app.css, ne la redéfinit pas.
   Préfixe pg-site-. Direction « maquette A » : clair, vivant, cartes illustrées, aucun visuel sombre.
   Tout mouvement s'arrête si l'utilisateur demande moins d'animations (règle globale d'app.css + rappel en bas). */

/* ---------- Héros : halo coloré pleine largeur (plus de bord coupé net), accroche « Suisse » ---------- */
.pg-site-hero { position: relative; isolation: isolate; }
.pg-site-hero::before {
  content: ""; position: absolute; z-index: -1; left: 0; top: 0; width: 100%; height: 520px; pointer-events: none;
  background:
    radial-gradient(30% 40% at 18% 34%, rgba(255, 199, 90, .22), transparent 60%),
    radial-gradient(28% 36% at 82% 24%, rgba(240, 72, 78, .13), transparent 60%),
    radial-gradient(36% 42% at 60% 82%, rgba(63, 191, 166, .13), transparent 60%);
}
/* Titres longs (allemand) : ils se coupent au lieu d'élargir la page sur téléphone. */
.pg-site-hero h1 { overflow-wrap: anywhere; hyphens: auto; }
.pg-site-eyebrow { gap: 10px; padding: 6px 16px 6px 6px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.pg-site-cross { position: relative; flex: none; width: 24px; height: 24px; border-radius: 7px; background: #E5383B; }
.pg-site-cross::before, .pg-site-cross::after { content: ""; position: absolute; left: 50%; top: 50%; background: #fff; border-radius: 1px; transform: translate(-50%, -50%); }
.pg-site-cross::before { width: 14px; height: 4.5px; }
.pg-site-cross::after { width: 4.5px; height: 14px; }

/* Engagements sous la barre de recherche : pastilles lisibles */
.pg-site-trust { gap: 10px 12px; }
.pg-site-trust li { padding: 8px 15px 8px 11px; background: rgba(255, 255, 255, .92); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-sm); color: var(--ink); }

/* Bandeau de preuves : chiffres réels de l'annuaire uniquement */
.pg-site-proofs { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 22px 0 0; padding: 0; }
.pg-site-proofs li { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.pg-site-proofs strong { font-size: 22px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pg-site-proofs span { color: var(--ink-2); font-size: 14px; font-weight: 600; }
.pg-site-proofs li.pg-site-proofs-go { padding: 0; border: 0; background: none; box-shadow: none; }
.pg-site-proofs-go a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 6px; color: var(--ink); font-weight: 700; }

/* Rappel police 117 : disparition, mineur, danger */
.pg-site-police { display: flex; align-items: flex-start; gap: 12px; margin: 18px 0 0; padding: 14px 18px; border-radius: var(--r-md); background: #FFF5F5; border: 1px solid #F2C4C9; color: var(--ink); font-size: 15px; }
.pg-site-police .ico { flex: none; margin-top: 2px; color: var(--coral-ink); }
.pg-site-police a { font-weight: 800; color: var(--coral-ink); }
.pg-site-police.for-p { display: flex; }
body:has(#who-e:checked) .pg-site-police.for-p { display: none; }
.pg-site-need-alert { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; color: var(--coral-ink); font-size: 13.5px; font-weight: 700; }
.pg-site-need-alert .ico { flex: none; margin-top: 2px; }

/* Fil d'Ariane (Particuliers, Pro), centré dans le héros */
.pg-site-crumbs { margin: 0 0 18px; }
.pg-site-crumbs ol { justify-content: center; }

/* ---------- « Votre situation n'est pas dans la liste ? » ---------- */
.pg-site-other {
  display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 14px 20px 14px 14px;
  background: #fff; border: 1.5px dashed var(--line-2); border-radius: var(--r-md); color: var(--ink); text-decoration: none;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.pg-site-other:hover { border-color: var(--ink); background: var(--soft); color: var(--ink); }
.pg-site-other:focus-visible { outline-offset: 4px; border-radius: var(--r-md); }
.pg-site-other > .ico:first-child { width: 44px; height: 44px; padding: 11px; border-radius: 14px; background: var(--sky-soft); color: var(--sky-ink); }
.pg-site-other > span { flex: 1; min-width: 0; color: var(--ink-2); font-size: 15.5px; }
.pg-site-other strong { color: var(--ink); }
.pg-site-other > .ico:last-child { width: 18px; height: 18px; transition: transform .25s; }
.pg-site-other:hover > .ico:last-child { transform: translateX(4px); }
/* Accueil : un lien par onglet (Particulier / Entreprise), comme les tuiles. */
.pg-site-other.for-e { display: none; }
body:has(#who-e:checked) .pg-site-other.for-e { display: flex; }

/* ---------- Étapes reliées par un pointillé ---------- */
.pg-site-flow .step:not(:last-child)::after {
  content: ""; position: absolute; top: 52px; left: calc(100% + 1px); width: 22px;
  border-top: 2px dashed #F5B8AE; pointer-events: none;
}

/* ---------- Garanties (accueil, section 02) ---------- */
.cover.pg-site-cover { grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: stretch; }
.pg-site-cover-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; }
.pg-site-cover-head .lead2 { max-width: 560px; }
.pg-site-cover-head .refuse { margin: 0; max-width: none; }
.pg-site-guar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pg-site-guar li { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 22px 22px 24px; background: #fff; border-radius: 22px; box-shadow: var(--shadow); }
.pg-site-guar h3 { margin: 0; font-size: 17.5px; }
.pg-site-guar p { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; }
.pg-site-proof { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--ink-2); font-size: 15px; }
.pg-site-proof .ico { margin-top: 2px; color: var(--sky-ink); }
.pg-site-proof a { color: var(--ink); font-weight: 700; }

/* ---------- Détectives : « votre fiche existe peut-être déjà » ---------- */
.host-copy > p.pg-site-claim { display: flex; gap: 12px; align-items: flex-start; margin: -10px 0 28px; padding: 14px 16px; border-radius: 16px; background: var(--sky-soft); color: var(--ink); font-size: 15px; }
.pg-site-claim .ico { margin-top: 2px; color: var(--sky-ink); }
.pg-site-claim a { color: var(--ink); font-weight: 800; white-space: nowrap; }

/* ---------- Questions : liste + encadré de dépôt ---------- */
.pg-site-faq { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
.pg-site-faq .faq { max-width: none; }
.pg-site-aside {
  position: sticky; top: 104px; padding: 28px; border-radius: var(--r-lg);
  background: linear-gradient(170deg, #FFF4F0 0%, #FFFFFF 75%); border: 1px solid #FBE2DB;
}
.pg-site-aside-ico { width: 64px; height: 64px; margin-bottom: 14px; }
.pg-site-aside h3 { margin: 0 0 8px; font-size: 20px; }
.pg-site-aside > p { margin: 0 0 18px; color: var(--ink-2); font-size: 15px; }
.pg-site-aside .btns { flex-direction: column; align-items: stretch; gap: 10px; }
.pg-site-aside .btn { width: 100%; }
.pg-site-aside .pg-site-aside-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; font-size: 14px; }
.pg-site-aside-links a { color: var(--ink-2); font-weight: 600; }
.pg-site-aside-links a:hover { color: var(--ink); }

/* ---------- Coulisses : carte en tuiles + un seul bandeau « réservé aux détectives vérifiés » ---------- */
.pg-site-duo { align-items: stretch; }
.pg-site-net-body { display: grid; gap: 14px; padding: 20px 22px 22px; }
.pg-site-net-body > p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.pg-site-net-img { width: 120px; height: auto; }
.pg-site-net-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pg-site-net-ticks li { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.pg-site-net-ticks .ico { color: var(--mint-ink); }
.pg-site-net .badge .lock { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.pg-site-net-go { margin: 4px 0 0 !important; }

/* ---------- Maillage : cantons de l'annuaire (même tuile et même jauge que les pages SEO) ---------- */
.pg-site-cantons { margin-bottom: 18px; grid-auto-rows: 1fr; }
.pg-site-cantons li { display: flex; }
.pg-site-cantons a { position: relative; flex: 1; min-width: 0; padding-bottom: 16px; }
.pg-site-cantons .pg-seo-gauge { position: absolute; left: 14px; right: 14px; bottom: 7px; height: 4px; border-radius: 4px; background: var(--soft); overflow: hidden; }
.pg-site-cantons .pg-seo-gauge::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--grad); }
.pg-site-cantons .pg-seo-g0 { visibility: hidden; }
.pg-site-cantons .pg-seo-g1::after { width: 10%; } .pg-site-cantons .pg-seo-g2::after { width: 20%; } .pg-site-cantons .pg-seo-g3::after { width: 30%; }
.pg-site-cantons .pg-seo-g4::after { width: 40%; } .pg-site-cantons .pg-seo-g5::after { width: 50%; } .pg-site-cantons .pg-seo-g6::after { width: 60%; }
.pg-site-cantons .pg-seo-g7::after { width: 70%; } .pg-site-cantons .pg-seo-g8::after { width: 80%; } .pg-site-cantons .pg-seo-g9::after { width: 90%; }
.pg-site-cantons .pg-seo-g10::after { width: 100%; }
.pg-site-links { margin-bottom: 0; }

/* Boutons alignés sur une même ligne (le lien souligné ne descend plus sous le bouton). */
.pg-site-btns { align-items: center; justify-content: flex-start; }
.pg-site-btns > .btn-line { margin: 0; }

/* ---------- Bandeau final : deux portes ---------- */
.pg-site-final {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 56px; align-items: center;
  padding: 56px; border-radius: 40px; background: var(--grad-btn); color: #fff; box-shadow: 0 24px 60px rgba(210, 41, 74, .24);
}
.pg-site-final::before, .pg-site-final::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .08); pointer-events: none; }
.pg-site-final::before { width: 320px; height: 320px; right: -90px; top: -120px; }
.pg-site-final::after { width: 180px; height: 180px; left: 38%; bottom: -110px; }
.pg-site-final-copy, .pg-site-doors { position: relative; z-index: 1; }
.pg-site-final h2 { margin: 0; color: #fff; font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -.04em; line-height: 1.05; }
.pg-site-final p { margin: 14px 0 0; color: #fff; font-size: 17.5px; max-width: 460px; }
/* Grand écran : portes empilées à droite du texte ; tablette : côte à côte sous le texte ; téléphone : empilées. */
.pg-site-doors { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pg-site-door {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: center;
  padding: 18px; background: #fff; border-radius: 22px; color: var(--ink); text-decoration: none; box-shadow: var(--shadow);
  transition: transform .25s var(--ease), box-shadow .25s;
}
.pg-site-door:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: var(--ink); }
.pg-site-door:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 22px; }
.pg-site-door-ico { grid-row: 1 / 3; width: 56px; height: 56px; }
.pg-site-door-t { align-self: end; font-weight: 800; font-size: 16.5px; letter-spacing: -.015em; line-height: 1.25; }
.pg-site-door-p { grid-column: 2; align-self: start; color: var(--ink-2); font-size: 14px; line-height: 1.4; }
.pg-site-door .pg-site-door-go { grid-column: 3; grid-row: 1 / 3; width: 18px; height: 18px; transition: transform .25s; }
.pg-site-door:hover .pg-site-door-go { transform: translateX(4px); }

/* ---------- Particuliers : avec Detekta / en cherchant seul ---------- */
.pg-site-compare { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.pg-site-col { padding: 30px 28px; border-radius: var(--r-lg); min-width: 0; }
.pg-site-col h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 19px; }
.pg-site-col h3 .ico { width: 24px; height: 24px; }
.pg-site-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.pg-site-col li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; }
.pg-site-col li .ico { margin-top: 2px; }
.pg-site-col.is-yes { background: linear-gradient(170deg, var(--mint-soft) 0%, #FFFFFF 80%); border: 1px solid #BFE7DC; box-shadow: var(--shadow); }
.pg-site-col.is-yes li { font-weight: 600; }
.pg-site-col.is-yes .ico { color: var(--mint-ink); }
.pg-site-col.is-no { background: var(--soft); border: 1px solid var(--line); color: var(--ink-2); }
.pg-site-col.is-no h3 { color: var(--ink-2); }
.pg-site-col.is-no .ico { color: var(--ink-3); }

/* ---------- Pro et Détectives : ce qui est propre à ce public (cartes non cliquables) ---------- */
.pg-site-own { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.pg-site-own-card { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.pg-site-own-card h3 { margin: 8px 0 0; font-size: 19px; }
.pg-site-own-card p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* ---------- Détectives : chercher sa fiche, niveaux ---------- */
.pg-site-find { display: flex; align-items: center; gap: 8px; max-width: 720px; margin: 26px auto 0; padding: 8px; background: #fff; border: 1px solid var(--line-2); border-radius: 999px; box-shadow: var(--shadow-lg); }
.pg-site-find:focus-within { outline: 3px solid var(--ink); outline-offset: 3px; }
.pg-site-find-f { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 6px 20px; text-align: left; }
.pg-site-find-k { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.pg-site-find input { width: 100%; min-height: 0; margin: 0; padding: 2px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 15.5px; }
.pg-site-find input:focus { outline: none; box-shadow: none; }
.pg-site-find .btn { flex: none; min-height: 54px; border-radius: 999px; }
.pg-site-find-n { margin: 14px 0 0; color: var(--ink-2); font-size: 15px; }
.pg-site-founders { display: flex; align-items: flex-start; gap: 10px; max-width: 860px; margin: 0 0 20px; padding: 14px 18px; border-radius: var(--r-md); background: var(--sun-soft); color: var(--ink); font-size: 15px; }
.pg-site-founders .ico { flex: none; margin-top: 2px; color: var(--sun-ink); }
.pg-site-plans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pg-site-plan { display: flex; flex-direction: column; gap: 10px; padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.pg-site-plan h3 { margin: 0; font-size: 22px; }
.pg-site-plan-gold { border-color: #F1D493; }
.pg-site-plan-diamond { border-color: #BFD9F2; }
.pg-site-plan-price { margin: 0; color: var(--ink-2); font-weight: 700; }
.pg-site-plan ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.pg-site-plan li { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; }
.pg-site-plan li .ico { flex: none; margin-top: 3px; color: var(--mint-ink); }
.pg-site-plans-note { display: flex; align-items: flex-start; gap: 10px; max-width: 860px; margin: 20px 0 0; color: var(--ink-2); font-size: 14.5px; }
.pg-site-plans-note .ico { flex: none; margin-top: 2px; color: var(--mint-ink); }
.pg-site-faq-solo { grid-template-columns: minmax(0, 1fr); }

/* ---------- Pro : trois métiers ---------- */
.pg-site-aud { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pg-site-aud li { display: flex; min-width: 0; }
.pg-site-aud a {
  display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 26px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-sm); transition: box-shadow .25s, transform .25s;
}
.pg-site-aud a:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); color: var(--ink); }
.pg-site-aud a:focus-visible { outline-offset: 4px; border-radius: var(--r-lg); }
.pg-site-aud h3 { margin: 8px 0 0; font-size: 20px; }
.pg-site-aud p { margin: 0; color: var(--ink-2); font-size: 15px; }
.pg-site-aud .more { margin-top: auto; padding-top: 6px; }
.pg-site-aud a:hover .more .ico { transform: translateX(4px); }

/* ---------- Grands écrans → téléphone ---------- */
@media (max-width: 1120px) {
  .pg-site-cover-head { grid-template-columns: minmax(0, 1fr); }
  .pg-site-guar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-site-faq { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pg-site-aside { position: static; }
  .pg-site-final { grid-template-columns: minmax(0, 1fr); padding: 44px; }
  .pg-site-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .pg-site-flow .step:not(:last-child)::after { top: calc(100% + 1px); left: 50px; width: 0; height: 22px; border-top: 0; border-left: 2px dashed #F5B8AE; }
  .pg-site-compare, .pg-site-aud, .pg-site-plans { grid-template-columns: minmax(0, 1fr); }
  .pg-site-aud { gap: 12px; }
  .pg-site-aud a { padding: 20px; }
}
@media (max-width: 744px) {
  .pg-site-hero::before { height: 380px; }
  .pg-site-proofs { justify-content: flex-start; }
  .pg-site-proofs li { padding: 8px 12px; }
  .pg-site-proofs strong { font-size: 19px; }
  .pg-site-find { flex-direction: column; align-items: stretch; border-radius: 26px; padding: 10px; }
  .pg-site-find .btn { border-radius: 16px; }
  .pg-site-own-card, .pg-site-plan { padding: 20px; }
  .pg-site-eyebrow { font-size: 13px; }
  .pg-site-trust li { border-radius: 14px; }
  .pg-site-crumbs ol { justify-content: flex-start; }
  .pg-site-other { align-items: flex-start; padding: 14px; }
  .pg-site-other > span { font-size: 14.5px; }
  .pg-site-other > .ico:last-child { display: none; }
  .pg-site-flow .step:not(:last-child)::after { left: 44px; }
  .pg-site-guar { grid-template-columns: minmax(0, 1fr); }
  .pg-site-guar li { flex-direction: row; align-items: flex-start; gap: 14px; padding: 18px; border-radius: 18px; }
  .host-copy > p.pg-site-claim { margin-top: -14px; }
  .pg-site-aside { padding: 22px 20px; }
  .pg-site-final { padding: 30px 20px; border-radius: 28px; }
  .pg-site-doors { grid-template-columns: minmax(0, 1fr); }
  .pg-site-col { padding: 22px 18px; }
}

/* ---------- Moins d'animations ---------- */
@media (prefers-reduced-motion: reduce) {
  .pg-site-door, .pg-site-aud a, .pg-site-other { transition: none; }
  .pg-site-door:hover, .pg-site-aud a:hover { transform: none; }
}