/* ============================================================
   DEVISALY — Raffinement « Atelier » (couche additive 2026-09)
   Rehausse le design Atelier existant SANS changer son identité :
   ivoire, or, Fraunces. Ajoute profondeur, ombres affirmées,
   micro-interactions, hiérarchie. Se charge APRÈS luxe.css.
   Aucune règle destructive : uniquement des améliorations.
   ============================================================ */

:root {
  /* Ombres plus présentes (teintées or, pas de gris neutre) */
  --el-1: 0 1px 2px rgba(90,70,35,.05), 0 2px 6px rgba(90,70,35,.05);
  --el-2: 0 2px 6px rgba(90,70,35,.07), 0 10px 26px rgba(90,70,35,.09);
  --el-3: 0 6px 16px rgba(90,70,35,.10), 0 24px 56px rgba(90,70,35,.13);
  --el-gold: 0 4px 14px rgba(176,138,62,.22), 0 16px 40px rgba(176,138,62,.16);
  --el-gold-lg: 0 8px 24px rgba(176,138,62,.28), 0 28px 64px rgba(176,138,62,.20);
  /* Liseré lumineux haut de carte (donne du relief) */
  --bevel: inset 0 1px 0 rgba(255,255,255,.7);
  --ease-soft: cubic-bezier(.22,.68,.32,1);
}

/* ---- 1. Relief général : cartes et panels ---- */
.card, .panel {
  box-shadow: var(--el-1);
  transition: box-shadow .35s var(--ease-soft), border-color .3s var(--ease-soft),
              transform .35s var(--ease-soft);
}
.card:hover, .panel:hover {
  box-shadow: var(--el-2);
  border-color: var(--gold-line);
}

/* Cartes de contenu interactives : léger soulèvement */
.step, .plan, .qcard, .trade-card, .lead-benefit, .blog-card,
.stat-card, .kpi, .faq-item, .client-card, .retention-card {
  box-shadow: var(--el-1), var(--bevel);
  transition: box-shadow .4s var(--ease-soft), transform .4s var(--ease-soft),
              border-color .3s var(--ease-soft);
}

/* ---- 2. Bouton or : plus de présence ---- */
.btn.primary {
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset,
              0 2px 6px rgba(176,138,62,.28),
              0 8px 22px rgba(176,138,62,.22);
  transition: transform .2s var(--ease-soft), box-shadow .3s var(--ease-soft),
              filter .2s;
}
.btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset,
              0 6px 16px rgba(176,138,62,.36),
              0 18px 42px rgba(176,138,62,.26);
  filter: saturate(1.06) brightness(1.02);
}

/* ---- 3. Barre de navigation : plus nette au scroll ---- */
.topbar {
  box-shadow: 0 1px 0 var(--line-soft), 0 2px 14px rgba(90,70,35,.05);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
}

/* Liens nav : soulignement or animé */
.nav > a:not(.btn) { position: relative; }
.nav > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1.5px;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-soft);
}
.nav > a:not(.btn):hover::after,
.nav > a:not(.btn).active::after { transform: scaleX(1); }

/* ---- 4. Hero : profondeur et respiration ---- */
.hero h1 { text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.hero .trust .dot {
  box-shadow: 0 0 0 3px rgba(176,138,62,.12), 0 0 12px rgba(176,138,62,.45);
}
.hero-mock .mock-window { box-shadow: var(--el-3), var(--bevel); }
.hero-mock::before { filter: blur(26px); }

/* Eyebrow : trait or plus fin et élégant */
.hero .eyebrow::before, .hero .eyebrow::after,
.page-head .eyebrow::before, .page-head .eyebrow::after {
  background: linear-gradient(90deg, transparent, var(--gold));
}

/* ---- 5. Récapitulatif (builder) : colonne de droite mise en valeur ---- */
.summary {
  box-shadow: var(--el-2), var(--bevel);
  border-color: var(--gold-line);
}
.summary::before { height: 3px; }
.summary-totals .grand {
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

/* ---- 6. Champs de saisie : focus plus franc ---- */
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(176,138,62,.14), 0 1px 2px rgba(90,70,35,.06);
}

/* ---- 7. KPI : chiffres mis en avant ---- */
.kpi-value {
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  letter-spacing: -.02em;
}
.kpi-gold {
  background: linear-gradient(140deg, var(--card) 0%, rgba(233,220,192,.35) 100%);
  box-shadow: var(--el-2), var(--bevel);
}

/* ---- 8. Tableau devis : plus lisible ---- */
.quote-table th {
  background: linear-gradient(180deg, var(--paper), var(--card-2));
}
.quote-table tbody tr:hover { background: var(--gold-bg); }
.quote-totals-row.grand .value { text-shadow: 0 1px 0 rgba(255,255,255,.5); }

/* ---- 9. Badges et pastilles : relief ---- */
.qbadge, .plan-badge, .bs-plan {
  box-shadow: 0 1px 2px rgba(90,70,35,.06);
}
.qbadge.status-accepted, .plan-badge.pro, .bs-plan.pro {
  box-shadow: 0 1px 3px rgba(176,138,62,.18);
}

/* ---- 10. Apparition au scroll : plus douce ---- */
.js-anim .reveal {
  transition: opacity .7s var(--ease-soft), transform .7s var(--ease-soft);
}

/* ---- 11. CTA final et blocs or : halo maîtrisé ---- */
.cta-final {
  box-shadow: var(--el-gold);
  border-color: var(--gold-line);
}
.upsell-banner {
  box-shadow: var(--bevel), 0 2px 10px rgba(176,138,62,.10);
}

/* ---- 12. Boutons ghost : état hover avec profondeur ---- */
.btn.ghost {
  box-shadow: 0 1px 2px rgba(90,70,35,.04);
  transition: all .25s var(--ease-soft);
}
.btn.ghost:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(90,70,35,.08);
}

/* ---- 13. Scrollbar et sélection : cohérence or ---- */
::selection { background: var(--gold); color: #fff; }

/* ---- 14. Cartes métiers / étapes : icônes plus vivantes ---- */
.step-icon, .trade-card .trade-icon, .icon-wrap, .lb-icon, .offline-icon {
  box-shadow: 0 2px 8px rgba(176,138,62,.14), var(--bevel);
  transition: transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft);
}
.step:hover .step-icon, .trade-card:hover .trade-icon,
.lead-benefit:hover .lb-icon, .feature:hover .icon-wrap {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 18px rgba(176,138,62,.22), var(--bevel);
}

/* ---- 15. Plans (pricing) : plan featured plus premium ---- */
.plan.featured {
  box-shadow: var(--el-gold-lg), var(--bevel);
  transform: translateY(-4px);
}
.plan.featured:hover { transform: translateY(-7px); }

/* ---- 16. Formulaires auth : carte plus présente ---- */
.auth-card {
  box-shadow: var(--el-3), var(--bevel);
}

/* ---- 17. Focus visible : anneau or ---- */
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* ---- 18. Mobile : désactiver les transformations coûteuses ---- */
@media (max-width: 820px) {
  .step, .plan, .qcard, .trade-card, .lead-benefit, .blog-card,
  .stat-card, .kpi, .faq-item, .client-card, .retention-card,
  .card, .panel {
    transform: none !important;
  }
  .step:hover .step-icon, .trade-card:hover .trade-icon {
    transform: none;
  }
  .plan.featured { transform: none; }
}

/* ---- 19. Motion réduite ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .step:hover .step-icon, .trade-card:hover .trade-icon { transform: none; }
}


/* ---- 20. ACCUEIL ALLÉGÉ : rythme vertical, moins de blocs ---- */
/* Une section = un rythme. Plus d'espace avant qu'après un titre. */
.container > .section { padding: 30px 0; }
.section-head { margin-bottom: 34px; }
.section-head h2 { margin-bottom: 10px; }

/* Étape : plus d'air, moins de bordure */
.steps { gap: 22px; }
.step { padding: 30px 26px; }

/* Témoignage intégré : discret, pas un bloc à part */
.testimonial {
  margin-top: 40px;
  padding: 28px 30px;
  background: linear-gradient(150deg, var(--card), var(--card-2));
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--gold-line);
  border-radius: var(--radius-lg);
  max-width: 720px;
}
.t-stars { margin-bottom: 12px; }
.t-text { font-size: 15.5px; line-height: 1.7; }

/* FAQ : plus compacte, lignes nettes */
.faq-acc { border-bottom: 1px solid var(--line); }
.faq-acc summary { padding: 18px 4px; font-size: 15.5px; }
.faq-acc-body { padding: 0 4px 16px; }

/* CTA final : bandeau haut, pas un gros bloc */
.cta-final {
  padding: 44px 32px;
  margin: 40px 0 44px;
  background: linear-gradient(150deg, var(--paper), var(--gold-bg));
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-xl);
}
.cta-final h2 { font-size: 27px; margin-bottom: 8px; }
.cta-final p { font-size: 14.5px; margin: 0 auto 20px; }

/* Trust-bar : plus fine, intégrée */
.trust-bar { gap: 34px; padding: 20px 0; margin-top: 8px; }

/* Footer : 3 colonnes, plus haut compact */
.footer { padding: 34px 0 16px; margin-top: 40px; }
.footer-grid { grid-template-columns: 1.7fr 1fr 1fr; gap: 28px; }
.footer h4 { margin-bottom: 10px; }
.footer a { padding: 3px 0; font-size: 13px; }
.footer .bottom { padding-top: 18px; margin-top: 20px; }

@media (max-width: 820px) {
  /* Rythme vertical mobile : les sections se touchaient (0px d'écart mesuré).
     34px haut/bas = ~68px entre deux sections, respiration correcte. */
  .container > .section { padding: 34px 0; }
  .step { padding: 24px 20px; }
  .testimonial { margin-top: 28px; padding: 22px; }
  .cta-final { padding: 32px 20px; margin: 40px 0 44px; }
  .cta-final h2 { font-size: 23px; }
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
  /* Bandeaux qui étaient collés au hero (8-10px) */
  .trust-bar { margin-top: 18px; }
  .stats-real { margin-top: 22px; }
}


/* ---- 21. Compactage supplémentaire ---- */
/* Étape : cartes plus basses */
.steps { gap: 18px; }
.step { padding: 24px 22px; }
.step p { font-size: 13.5px; }
.step h3 { font-size: 16.5px; }
.step-icon { width: 40px; height: 40px; margin-bottom: 14px; }
.step-num { margin-bottom: 10px; }

/* Footer : liens sur 2 colonnes compactes, moins de hauteur */
.footer { padding: 28px 0 14px; margin-top: 32px; }
.footer-grid { gap: 24px; }
.footer h4 { font-size: 12px; margin-bottom: 8px; }
.footer a { padding: 2px 0; font-size: 12.5px; }
.footer-tagline { font-size: 12.5px; }
.footer .bottom { padding-top: 14px; margin-top: 16px; font-size: 12px; }

/* Trust-bar : discrète */
.trust-bar { padding: 16px 0; }
.trust-item { font-size: 12.5px; }

/* FAQ : plus resserrée */
.faq-acc summary { padding: 15px 4px; font-size: 15px; }
.faq-acc-body { padding: 0 4px 14px; font-size: 14px; }


/* ---- 22. FAQ en 2 colonnes : -50% de hauteur, plus lisible ---- */
.faq-acc-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
  align-items: start;
}
@media (max-width: 820px) {
  .faq-acc-wrap { grid-template-columns: 1fr; gap: 0; }
}

/* Témoignage : plus compact, aligné à côté des étapes sur grand écran */
.testimonial { padding: 22px 24px; margin-top: 28px; }
.t-text { font-size: 15px; }
.t-stars { margin-bottom: 8px; }
.t-avatar { width: 36px; height: 36px; font-size: 15px; }

/* ---- 12. Accueil — hero & témoignage : respiration resserrée ---- */
/* Desktop : réduire la taille/padding (le mock 499px domine la hauteur) */
@media (min-width: 901px) {
  .hero { padding: 26px 0 40px; }
  /* Titre et sous-titre agrandis (retour utilisateur : « doit être plus gros ») */
  /* ⚠️ La taille du h1 est désormais définie UNE SEULE FOIS (`.hero h1` dans
     luxe.css, 56 px). Cette surcharge à 78 px avait été écrite pour l'ancienne
     accueil, qui n'utilise plus `.hero h1` : elle ne touchait donc plus QUE les
     pages métiers (/devis, /prix, /services), qu'elle déformait — même balise
     `h1` à 78 px sur une page et 56 px sur une autre, aucun rythme d'ensemble. */
  .hero p { font-size: 20px; margin-top: 22px; line-height: 1.6; max-width: 560px; }
  .hero .cta-row { margin-top: 24px; }
  .hero .trust { margin-top: 20px; gap: 18px; }
  .hero-mock .mock-col { padding: 18px; }
  .hero-mock .mock-summary { padding: 18px; }
  .hero-mock .mock-field { margin-bottom: 12px; }
  .hero-mock .mock-line { padding: 8px 0; }
  .hero-mock .mock-btn { margin-top: 14px; padding: 11px; }
}

/* Témoignage intégré : plus proche du bloc étapes */
.testimonial { padding: 18px 22px; margin-top: 22px; }
.t-text { font-size: 14.5px; line-height: 1.6; }

/* ---- 13. Devis + site web (landing) : deux volets clairs ---- */
#dual .dual-grid,
#cout-verite .dual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 1000px;
  margin: 0 auto;
}
#dual .dual-plan,
#cout-verite .dual-plan {
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  padding: 28px 30px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
}
#dual .dual-quote,
#cout-verite .dual-quote { background: var(--card); box-shadow: var(--shadow-sm); }
#dual .dual-site,
#cout-verite .dual-site {
  background: linear-gradient(150deg, rgba(190,160,90,.16), var(--paper));
  border-color: rgba(176,138,62,.55);
  box-shadow: 0 10px 28px rgba(176,138,62,.16);
}
#dual .dual-site .dual-tag,
#cout-verite .dual-site .dual-tag {
  align-self: flex-start;
  background: linear-gradient(160deg, #c19a4e, #b08a3e);
  color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 5px 14px; border-radius: 40px; margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(176,138,62,.35);
}
#dual .dual-plan h3,
#cout-verite .dual-plan h3 { font-family: var(--font-serif); font-size: 23px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
#dual .dual-plan p,
#cout-verite .dual-plan p { color: var(--muted); font-size: 14.5px; line-height: 1.65; margin-bottom: 16px; }
#dual .dual-plan ul,
#cout-verite .dual-plan ul { list-style: none; margin-bottom: 18px; flex: 1; }
#dual .dual-plan li,
#cout-verite .dual-plan li { padding: 6px 0; font-size: 14px; color: var(--ink); display: flex; align-items: center; gap: 10px; }
#dual .dual-plan .dot,
#cout-verite .dual-plan .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
#dual .dual-quote .btn,
#cout-verite .dual-quote .btn { align-self: flex-start; }
#dual .dual-site .btn,
#cout-verite .dual-site .btn { align-self: flex-start; border-color: rgba(176,138,62,.55); }
#dual .dual-price,
#cout-verite .dual-price { margin-top: 12px; color: var(--gold-2); font-weight: 600; font-size: 13.5px; }
#dual .section-head p { margin-top: 10px; }
@media (max-width: 800px) {
  #dual .dual-grid,
  #cout-verite .dual-grid { grid-template-columns: 1fr; }
  #dual .dual-plan,
  #cout-verite .dual-plan { padding: 24px 20px; }
}

/* ---- Outil PDF (modifier/fusionner un PDF en ligne) ---- */
.pdf-tools {
  max-width: 640px; margin: 34px auto 0; background: var(--card);
  border: 1px solid var(--gold-line); border-radius: var(--radius-lg); padding: 28px 30px;
  box-shadow: var(--shadow-sm);
}
.pt-tabs { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.pt-tab {
  background: var(--card-2); border: 1px solid var(--line); color: var(--muted);
  font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: var(--radius);
  cursor: pointer; transition: all .2s;
}
.pt-tab.active { background: var(--gold-bg); border-color: var(--gold-line); color: var(--gold-2); }
.pt-panel { display: flex; flex-direction: column; gap: 14px; }
.pt-hint { color: var(--muted); font-size: 14px; line-height: 1.6; }
.pt-input, .pt-text {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 15px; color: var(--ink); background: var(--card); box-sizing: border-box;
}
.pt-panel .btn { align-self: flex-start; }
.pt-check { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.pt-status { margin-top: 16px; font-size: 14px; color: var(--muted); min-height: 18px; }
.pt-status.ok { color: var(--ok); font-weight: 600; }
.pt-status.err { color: var(--danger); }
#pt-download { margin-top: 10px; }

/* ---- Chips de maillage interne : style de base manquant (price/dept/trade) ---- */
.chip {
  display: inline-block; padding: 9px 15px; font-size: 13px; font-weight: 500;
  background: var(--card-2); color: var(--ink-2) !important; border: 1px solid var(--line);
  border-radius: 40px; text-decoration: none; transition: all .18s ease; line-height: 1.3;
}
.chip:hover { border-color: var(--gold-line); color: var(--gold-2) !important; background: var(--card); box-shadow: 0 2px 8px rgba(176,138,62,.15); }

/* ---- 14. Problème / empathie (landing) ---- */
#probleme .pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1000px;
  margin: 0 auto;
}
#probleme .pain-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  text-align: left;
}
#probleme .pain-item svg { color: var(--gold-2); margin-bottom: 14px; }
#probleme .pain-item h3 { font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
#probleme .pain-item p { color: var(--muted); font-size: 14px; line-height: 1.6; }
@media (max-width: 800px) {
  #probleme .pain-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ---- 15. Tarifs accueil : pic du tunnel ---- */
#pricing-home .plans { max-width: 1100px; }
#pricing-home .note { text-align: center; margin-top: 18px; color: var(--muted); font-size: 14px; }
#pricing-home .note a { color: var(--gold-2); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--gold-line); }
#pricing-home .price-crossed {
  color: var(--faint); text-decoration: line-through; font-size: 22px; font-weight: 500; margin-right: 2px;
}
#pricing-home .price-promo { font-size: 13px; color: var(--gold-2); font-weight: 600; }
#pricing-home .plan .tag { margin-bottom: 14px; }
/* Badge "Vos nouveaux clients" de la carte Visibilité (carte non-featured) */
#pricing-home .plan .tag:not(:empty) {
  display: inline-block; align-self: flex-start;
  background: linear-gradient(160deg, #c19a4e, #b08a3e); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 6px 16px; border-radius: 40px; margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(176,138,62,.3);
}


/* ---- 16. Tunnel Visibilité Pro (199 €) : page de vente dédiée ---- */
.visi-tunnel { max-width: 860px; margin: 0 auto; padding: 10px 0 40px; }
.visi-hero { text-align: center; margin-bottom: 30px; }
.visi-hero h1 { font-family: var(--font-serif); font-size: 42px; font-weight: 500; line-height: 1.12; letter-spacing: -.02em; color: var(--ink); max-width: 720px; margin-inline: auto; }
.visi-hero p { color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 620px; margin: 14px auto 0; }
.visi-card { max-width: 680px; margin: 0 auto; }
.visi-summary {
  background: var(--card);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  padding: 30px 34px 28px;
  box-shadow: var(--shadow-sm);
}
.visi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.visi-plan-name { font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--ink); }
.visi-price { font-family: var(--font-serif); font-size: 42px; font-weight: 600; color: var(--gold-2); margin: 6px 0 2px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.visi-price small { font-size: 14px; color: var(--faint); font-weight: 500; }
.visi-promo { font-size: 13.5px; color: var(--gold-2); font-weight: 600; display: block; margin-top: 2px; }
.visi-price-now { color: var(--gold-2); display: inline-block; }
.visi-price-major { color: var(--gold-2); font-family: var(--font-serif); font-size: 42px; font-weight: 600; display: inline-block; }
.visi-price-old {
  color: var(--faint); text-decoration: line-through; font-size: 22px; font-weight: 500;
  margin-left: 10px; display: inline-block;
}
.visi-badges { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.visi-badge {
  background: var(--gold-bg); color: var(--gold-2); font-size: 11.5px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; padding: 5px 12px; border-radius: 40px;
  white-space: nowrap; max-width: 100%;
}
/* Nouvelles classes : page de paiement guidée */
.visi-eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: 2px; font-size: 12px;
  color: var(--gold-2); font-weight: 700; background: var(--gold-bg); border: 1px solid var(--gold-line);
  padding: 7px 16px; border-radius: 40px; margin-bottom: 18px;
}
.visi-whats-included {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 0 auto 30px; max-width: 760px;
}
.visi-item {
  display: inline-flex; align-items: center; gap: 8px; background: var(--card);
  border: 1px solid var(--line); border-radius: 40px; padding: 9px 16px; font-size: 14px; color: var(--ink);
}
.visi-item svg { color: var(--gold-2); }
.visi-layout {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; max-width: 980px; margin: 0 auto; align-items: start;
}
.visi-guide { display: flex; flex-direction: column; gap: 22px; }
.visi-guide-block {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.visi-guide-block h3, .visi-guide-title { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.visi-steps-guide { list-style: none; }
.visi-steps-guide li { display: flex; gap: 14px; margin-bottom: 14px; }
.visi-steps-guide li:last-child { margin-bottom: 0; }
.vsg-num {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--gold-bg);
  color: var(--gold-2); font-weight: 700; font-size: 14px; display: grid; place-items: center;
}
.visi-steps-guide strong { font-size: 14.5px; color: var(--ink); display: block; line-height: 1.3; }
.visi-steps-guide p { font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.visi-guide-reassure h3 { margin-bottom: 10px; }
.visi-reassure { list-style: none; }
.visi-reassure li { font-size: 13.5px; color: var(--muted); padding: 6px 0; display: flex; align-items: center; gap: 8px; }
.visi-reassure li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.visi-card { max-width: 100%; }
@media (max-width: 850px) {
  .visi-layout { grid-template-columns: 1fr; }
}

/* ---- 18. Avis clients (SEO) ---- */
#avis .testimonials { max-width: 1100px; margin: 0 auto; }
#avis .testimonial { box-shadow: var(--shadow-sm); }
/* Carrousel d'avis scroll-snap (desktop : flèches, mobile : swipe) */
.rev-carousel { position: relative; max-width: 1100px; margin: 0 auto; }
#avis #rev-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 20px) / 3);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: 4px;
  scrollbar-width: thin;
  margin: 0 auto;
}
#avis #rev-track::-webkit-scrollbar { height: 6px; }
#avis #rev-track::-webkit-scrollbar-thumb { background: var(--gold-line); border-radius: 6px; }
#avis #rev-track .testimonial {
  scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: center;
  box-sizing: border-box;
}
.rev-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--gold-line); color: var(--gold-2);
  display: grid; place-items: center; cursor: pointer; z-index: 2;
  box-shadow: 0 2px 8px rgba(25,23,19,.08); transition: all .18s ease;
}
.rev-btn:hover { background: var(--gold-bg); border-color: var(--gold-2); }
.rev-prev { left: -14px; }
.rev-next { right: -14px; }
@media (max-width: 800px) {
  #avis #rev-track { grid-auto-columns: calc((100% - 20px) / 1.2); }
  .rev-prev { left: 4px; }
  .rev-next { right: 4px; }
}
/* Note agrégée */
.reviews-summary {
  text-align: center; margin: 0 auto 28px; max-width: 520px;
  background: var(--card); border: 1px solid var(--gold-line); border-radius: var(--radius-lg);
  padding: 18px 24px; box-shadow: var(--shadow-sm);
}
.rs-score { font-family: var(--font-serif); font-size: 34px; font-weight: 600; color: var(--gold-2); }
.rs-stars { display: flex; justify-content: center; gap: 3px; margin: 8px 0 6px; }
.rs-stars svg { color: var(--deco); }
.rs-sub { color: var(--muted); font-size: 13px; }
.visi-list { list-style: none; margin: 18px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.visi-list li { font-size: 14.5px; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.visi-list li .check { width: 16px; height: 16px; flex-shrink: 0; position: relative; }
.visi-list li .check::before {
  content: ""; position: absolute; left: 3px; top: 6px;
  width: 9px; height: 5px; border-left: 1.8px solid var(--accent);
  border-bottom: 1.8px solid var(--accent); transform: rotate(-45deg);
}
.visi-separator { border-top: 1px solid var(--line-soft); margin: 24px 0; }
.visi-pay-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.visi-note { font-size: 12.5px; color: var(--faint); line-height: 1.5; }
.visi-pay form { margin-top: 14px; }
.visi-pay form label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.visi-pay form input[type="email"] {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 15px; color: var(--ink); background: var(--card); box-sizing: border-box; margin-bottom: 14px;
}
.visi-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.5; cursor: pointer; }
.visi-consent input { margin-top: 3px; }
.visi-consent a { color: var(--accent); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--gold-line); }
.visi-pay form .btn { width: 100%; margin-top: 14px; }
.visi-tiny { text-align: center; color: var(--faint); font-size: 12px; margin-top: 10px; }

/* Page de confirmation */
.visi-thanks { text-align: center; max-width: 620px; margin: 40px auto 60px; }
.visi-thanks-check { width: 64px; height: 64px; border-radius: 50%; background: var(--gold-bg); color: var(--gold-2); display: grid; place-items: center; margin: 0 auto 22px; }
.visi-thanks h1 { font-family: var(--font-serif); font-size: 34px; font-weight: 500; color: var(--ink); }
.visi-thanks p { color: var(--muted); font-size: 15.5px; line-height: 1.7; margin-top: 14px; }
.visi-thanks-reminder { color: var(--faint) !important; font-size: 13.5px !important; }
.visi-thanks .btn { margin-top: 22px; }
.visi-thanks .btn.ghost { margin-left: 10px; }
.visi-thanks-recap {
  background: var(--card); border: 1px solid var(--gold-line); border-radius: var(--radius-lg);
  padding: 18px 22px; max-width: 460px; margin: 22px auto 0; text-align: left;
}
.visi-tr-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gold-2); font-weight: 700; margin-bottom: 10px; }
.visi-tr-line { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: 14px; color: var(--ink); }
.visi-tr-line span:last-child { font-weight: 600; color: var(--gold-2); }
.visi-thanks-unknown { padding: 10px 0; }

@media (max-width: 800px) {
  .visi-card { max-width: 100%; }
  .visi-summary { padding: 24px 20px; }
  .visi-hero h1 { font-size: 30px; }
  .visi-top { flex-direction: column; }
  .visi-badges { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px; max-width: 100%; }
  .visi-list { grid-template-columns: 1fr; }
}

/* ---- 18. Carrousel mobile : pain-grid, steps, plans deviennent défilants ----- */
/* Desktop intact. Sur mobile, chaque groupe passe en défilement horizontal
   tactile (scroll-snap) pour éviter l'empilement vertical très long. */
@media (max-width: 800px) {
  #probleme .pain-grid,
  #etapes .steps {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 4px 4px 12px;
    margin: 0 -4px;
    scrollbar-width: thin;
    scrollbar-color: var(--gold-line) transparent;
  }
  #probleme .pain-grid > *, 
  #etapes .steps > * {
    flex: 0 0 86%;
    max-width: 86%;
    scroll-snap-align: center;
  }
  #probleme .pain-grid > *.reveal,
  #etapes .steps > *.reveal { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
  #pricing-home .plans {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 4px 4px 12px;
    margin: 0 -4px;
    scrollbar-width: thin;
    scrollbar-color: var(--gold-line) transparent;
  }
  #pricing-home .plans > * {
    flex: 0 0 86%;
    max-width: 86%;
    scroll-snap-align: center;
  }
  #pricing-home .plans > *.reveal { opacity: 1; transform: none; }
  #pricing-home .plans .plan { min-width: 0; }
}

/* ---- 17. Comparatifs & devis généré : scroll horizontal propre sur mobile (additif) ---- */
@media (max-width: 600px) {
  #comparatif .quote-doc { overflow-x: auto; }
  #comparatif .quote-table { min-width: 520px; }
  /* Le devis généré dans le builder : sa table est plus large que la carte sur petit
     écran. Permettre le scroll horizontal interne au lieu de rogner la colonne Total HT. */
  #result .quote-doc { overflow-x: auto; }
  #result .quote-table { min-width: 460px; }
}