/* =============================================================================
   Styles spécifiques aux pages — Logipuncture
   Chargé après components.css (les valeurs ici prévalent sur components.css)
   ============================================================================= */

/* === Aliases CSS — mappage vers les variables canoniques de variables.css === */
:root {
  --green:        var(--color-primary);
  --green-pale:   var(--color-primary-xxlight);
  --green-dark:   var(--color-primary-dark);
  --green-light:  var(--color-primary-light);
  --white:        var(--color-surface);
  --border:       var(--color-border);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-muted);
  --bg:           var(--color-bg);
  --shadow:       var(--shadow-md);
}

/* =============================================================================
   === HOME ===
   ============================================================================= */

/* --- Utilitaires page --- */
.section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 40px;
}

.section-header {
  text-align: center;
  max-width: 740px;
  margin: 0 auto 56px;
}
.section-header h2 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
  color: var(--color-text);
  line-height: 1.2;
}
.section-header p {
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.section-label {
  display: inline-block;
  background: var(--green-pale);
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 30px;
  margin-bottom: 14px;
  border: 1px solid rgba(74,140,92,.15);
}

/* --- HERO --- */
.hero {
  background: linear-gradient(160deg, #f0f8f3 0%, #fff 60%);
  padding: 96px 40px 80px;
  overflow: hidden;
  display: block;      /* neutralise la grille générique .hero de components.css */
  border-radius: 0;
}
.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--green-pale);
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 20px;
  letter-spacing: 0.4px;
}
.hero-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  flex-shrink: 0;
}
.hero h1 {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--color-text);
  margin-bottom: 20px;
}
.hero h1 em {
  color: var(--green);
  font-style: normal;
}
.hero-sub {
  font-size: 18px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 480px;
}
.btn-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.hero-mention {
  font-size: 13px;
  color: #999;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-mention span::before {
  content: '✓ ';
  color: var(--green);
  font-weight: 700;
}
.hero-img { position: relative; }

/* Screenshot frame */
.screenshot-frame {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: rotate(-1.5deg);
  overflow: hidden;
}
.screenshot-frame .bar {
  background: #f0f0ef;
  padding: 10px 14px;
  display: flex;
  gap: 6px;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.screenshot-frame .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.screenshot-frame .dot:nth-child(1) { background: #ff5f57; }
.screenshot-frame .dot:nth-child(2) { background: #febc2e; }
.screenshot-frame .dot:nth-child(3) { background: #28c840; }
.screenshot-ph {
  background: linear-gradient(135deg, #f0f8f3, #e8f3ec);
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}
.screenshot-ph p { color: var(--green); font-weight: 600; font-size: 14px; }
.screenshot-ph span { color: var(--green-light); font-size: 12px; }

/* Hero animations */
@keyframes home-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-text > * { animation: home-fade-up .55s ease both; }
.hero-text > *:nth-child(1) { animation-delay: .05s; }
.hero-text > *:nth-child(2) { animation-delay: .15s; }
.hero-text > *:nth-child(3) { animation-delay: .25s; }
.hero-text > *:nth-child(4) { animation-delay: .35s; }
.hero-text > *:nth-child(5) { animation-delay: .42s; }
.hero-img { animation: home-fade-up .7s .2s ease both; }

/* --- TRUST BAND --- */
.trust-band {
  background: var(--color-primary-xlight);
  padding: 52px 0;
}
.trust-band .container { text-align: center; }
.badges-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  color: var(--green-dark);
  border: 1px solid #d4e8da;
  border-radius: var(--radius-full);
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
}
.badge-pill svg { flex-shrink: 0; }
.trust-quote {
  font-size: 16px;
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.75;
  color: var(--color-text);
}
.trust-quote a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 2px; }

/* --- BENEFITS SECTION --- */
.benefits {
  background: var(--white);
  padding: 80px 0;
}

.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.cards-grid { display: grid; gap: 24px; }
.cards-grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.card-icon {
  width: 48px;
  height: 48px;
  background: var(--green-pale);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--green);
}
.card h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 9px;
  color: var(--color-text);
}
.card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* --- FEATURE BLOCKS --- */
.features-section { background: var(--color-bg); }
.features-section .section-inner { padding-top: 80px; padding-bottom: 80px; }

.feature-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto 76px;
}
.feature-block:last-child { margin-bottom: 0; }
.feature-block--rev .feat-img { order: 2; }
.feature-block--rev .feat-txt { order: 1; }

.feat-img > img {
  width: 100%;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  display: block;
}
.feat-img-ph {
  background: linear-gradient(135deg, #dbeae1 0%, #c8dfd0 100%);
  border-radius: 16px;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-lg);
  padding: 24px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
}
.feat-label {
  display: inline-block;
  background: var(--green-pale);
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 30px;
  margin-bottom: 12px;
  border: 1px solid rgba(74,140,92,.15);
}
.feat-txt h3 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 14px;
  line-height: 1.25;
  color: var(--color-text);
  letter-spacing: -0.02em;
}
.feat-txt p {
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.75;
  font-size: 16px;
}

/* Check list */
.check-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.check-list li::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-top: 2px;
  background: #dcfce7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* --- MORE FEATURES --- */
.more-features-section { background: var(--bg); }
.more-features-section .section-inner { padding-top: 80px; padding-bottom: 80px; }

.more-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}
.more-feature-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.more-feature-item:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.more-feature-icon {
  width: 40px;
  height: 40px;
  background: var(--green-pale);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  color: var(--green);
  flex-shrink: 0;
}
.more-feature-item strong {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}
.more-feature-item span {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.more-features-cta { text-align: center; }

/* --- CTA BANNER (home override) --- */
/* Le .cta-banner de base vient de components.css ; on surcharge pour la home */
.cta-banner { border-radius: 0; padding: 72px 40px; }
.cta-banner-inner {
  max-width: 680px;
  margin: 0 auto;
}
.cta-banner h2 {
  color: #fff;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 800;
  margin-bottom: 14px;
  letter-spacing: -0.03em;
}
.cta-banner p {
  color: rgba(255,255,255,0.82);
  font-size: 18px;
  margin-bottom: 32px;
}
.cta-banner .cta-banner__actions { display: none; } /* cache les actions BEM si présentes */

/* --- STORY --- */
.story-section { background: var(--white); }
.story-inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 72px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}
.story-photo > img {
  width: 100%;
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  display: block;
}
.story-photo-ph {
  background: linear-gradient(135deg, #d0e8d9 0%, #b8d8c3 100%);
  border-radius: 20px;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
  box-shadow: var(--shadow-lg);
}
.story-txt h2 {
  text-align: left;
  font-size: clamp(24px, 2.5vw, 34px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-top: 12px;
  margin-bottom: 18px;
  color: var(--color-text);
}
.story-txt p {
  color: var(--text-secondary);
  margin-bottom: 16px;
  line-height: 1.78;
  font-size: 16px;
}

/* --- TESTIMONIALS --- */
.testimonials-section { background: var(--color-bg); }
.testimonials-section .section-inner { padding-top: 80px; padding-bottom: 80px; }

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* Override testimonial-card pour un style bloc quote */
.testimonials-section .testimonial-card blockquote {
  font-style: italic;
  color: var(--color-text);
  line-height: 1.7;
  margin-bottom: 20px;
  font-size: 15px;
}
.stars {
  color: var(--color-warning);
  font-size: 16px;
  letter-spacing: 1px;
  margin-bottom: 14px;
  display: block;
}
.t-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.t-avatar-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.t-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.t-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 2px;
}
.t-role {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* --- PRICING (home) --- */
.pricing-section { background: var(--bg); }
.pricing-section .section-inner { padding-top: 80px; padding-bottom: 80px; }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 980px;
  margin: 0 auto;
}
/* Pricing cards — ribbon approach */
.pricing-section .pricing-card {
  overflow: hidden;
  padding: 0 26px 26px;
  display: flex;
  flex-direction: column;
}
.pricing-ribbon {
  display: block;
  padding: 9px 20px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 -26px 22px;
}
.pricing-ribbon--starter    { background: var(--color-primary-light); }
.pricing-ribbon--dev        { background: var(--color-primary); }
.pricing-ribbon--sur-mesure { background: var(--color-primary-dark); }
.pricing-section .pricing-card .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 15px;
}
.p-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}
.p-price {
  font-size: 40px;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}
.p-price span {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary);
}
.p-price--devis {
  font-size: 28px;
  line-height: 1.4;
  padding-top: 6px;
}
.p-divider {
  height: 1px;
  background: var(--border);
  margin-top: 18px;
  margin-bottom: 18px;
}
.p-features {
  list-style: none;
  padding: 0;
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.p-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.p-features li::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-top: 2px;
  background: #dcfce7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
}
.pricing-note {
  text-align: center;
  margin-top: 22px;
  font-size: 14px;
  color: var(--text-secondary);
}
.pricing-note a {
  color: var(--green);
  text-decoration: underline;
  font-weight: 500;
}
.pricing-note a:hover { color: var(--green-dark); }

/* --- FAQ (home, accordéon JS) --- */
.faq-section { background: var(--color-bg); }
.faq-section .section-inner { padding-top: 80px; padding-bottom: 80px; }

.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.faq-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.faq-q {
  padding: 18px 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 15px;
  user-select: none;
  gap: 16px;
  color: var(--color-text);
  transition: background var(--transition-fast);
}
.faq-q:hover { background: var(--color-primary-xxlight); }
.faq-item.open .faq-q { color: var(--green-dark); }
.faq-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.3s;
  stroke: var(--green);
  stroke-width: 2.5;
  fill: none;
  display: block;
}
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.3s ease;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  padding: 0 20px;
}
.faq-item.open .faq-a {
  max-height: 300px;
  padding: 4px 20px 18px;
}
.faq-more {
  text-align: center;
  margin-top: 20px;
}
.faq-more a {
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
}
.faq-more a:hover { color: var(--green-dark); text-decoration: underline; }

/* --- FOOTER CTA HOME --- */
.footer-cta-home {
  background: linear-gradient(160deg, var(--color-primary-xxlight), #fff);
  border-top: 1px solid var(--border);
  padding: 80px 40px;
  text-align: center;
}
.footer-cta-home .footer-cta-inner {
  max-width: 680px;
  margin: 0 auto;
}
.footer-cta-home h2 {
  color: var(--color-text);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: -0.03em;
}
.footer-cta-home p {
  color: var(--text-secondary);
  font-size: 18px;
  margin-bottom: 32px;
}
.footer-cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* =============================================================================
   RESPONSIVE — HOME
   ============================================================================= */
@media (max-width: 1024px) {
  .section-inner { padding: 64px 28px; }

  /* Hero */
  .hero { padding: 60px 28px 56px; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hero-sub { max-width: 100%; }
  .btn-row, .hero-mention { justify-content: center; }
  .hero-img { display: none; }

  /* Feature blocks */
  .feature-block {
    grid-template-columns: 1fr;
    gap: 36px;
    margin-bottom: 56px;
  }
  .feature-block--rev .feat-img,
  .feature-block--rev .feat-txt { order: unset; }

  /* Cards & grids */
  .cards-grid--4,
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .more-features-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }

  /* Story */
  .story-inner { grid-template-columns: 1fr; gap: 36px; }
  .story-txt h2 { text-align: center; }
  .story-txt { text-align: center; }
}

@media (max-width: 768px) {
  .section-inner { padding: 56px 20px; }

  /* Trust band */
  .trust-band { padding: 40px 0; }
  .badges-row { flex-direction: column; align-items: center; }

  /* Pricing */
  .pricing-grid { grid-template-columns: 1fr; max-width: 380px; margin-left: auto; margin-right: auto; }

  /* CTA banners */
  .cta-banner { padding: 52px 24px; }
  .footer-cta-home { padding: 52px 24px; }
}

@media (max-width: 640px) {
  .cards-grid--4,
  .grid-4 { grid-template-columns: 1fr; }
  .more-features-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .hero { padding: 44px 20px 48px; }
  .hero h1 { font-size: 26px; letter-spacing: -0.5px; }
  .hero-sub { font-size: 16px; }
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; justify-content: center; }
  .hero-mention { gap: 10px; font-size: 12px; }
}

/* =============================================================================
   === PAGE TARIFS ===
   ============================================================================= */

/* Utilitaires partagés */
.tc { text-align: center; }
.section--white { background: var(--color-surface); }
.section__sub { font-size: var(--text-base); color: var(--color-text-muted); max-width: 620px; margin: 0 auto; line-height: 1.6; }

/* --- Hero tarifs --- */
.hero--tarifs {
  display: block;
  background: linear-gradient(160deg, #f0f7f2 0%, #f7f7f5 60%);
  padding: 60px 0 48px;
  border-radius: 0;
  text-align: center;
}
.hero--tarifs h1 {
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.hero__sub {
  font-size: 17px;
  color: var(--color-text-muted);
  max-width: 580px;
  margin: 0 auto 28px;
  line-height: 1.65;
}
.hero__note { margin-top: 16px; font-size: 12px; color: var(--color-text-muted); }
.tarifs-pricing-note { font-size: 12px; max-width: 560px; margin-left: auto; margin-right: auto; margin-top: 20px; }

/* --- Tarifs pricing cards (layout avec bandeau) --- */
.tarifs-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}
.tarifs-pricing .pricing-card {
  overflow: hidden;
  padding: 0;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
}
.tarifs-pricing .pricing-card--featured {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md), 0 0 0 2px rgba(74,140,92,0.12);
  transform: none;
}
.pricing-card__band {
  padding: 8px 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.pricing-card__band--starter { background: #c8e6d0; color: #1a4a2a; }
.pricing-card__band--cabinet { background: var(--color-primary); color: #fff; }
.pricing-card__band--multi   { background: var(--color-primary-dark); color: #fff; }
.pricing-card__body { padding: 24px 20px; flex: 1; display: flex; flex-direction: column; }
.pricing-card__name { font-size: 20px; font-weight: 600; margin-bottom: 4px; color: var(--color-text); }
.pricing-card__tagline { font-size: 13px; color: var(--color-text-muted); margin-bottom: 18px; line-height: 1.4; }
.pricing-card__price { font-size: 30px; font-weight: 600; color: var(--color-primary-dark); margin-bottom: 4px; line-height: 1.2; }
.pricing-card__price span { font-size: 14px; font-weight: 400; color: var(--color-text-muted); }
.pricing-card__price--devis { font-size: 22px; line-height: 1.4; padding-top: 4px; }
.pricing-card__price-note  { font-size: 12px; color: var(--color-text-muted); margin-bottom: 6px; line-height: 1.4; }
.pricing-card__price-note2 { font-size: 11px; color: var(--color-primary); margin-bottom: 18px; font-weight: 500; }
.tarifs-pricing .pricing-card__features { list-style: none; margin-bottom: 22px; flex: 1; display: flex; flex-direction: column; gap: 0; }
.tarifs-pricing .pricing-card__feature {
  font-size: 13px;
  padding: 5px 0;
  border-bottom: 0.5px solid var(--color-border);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.tarifs-pricing .pricing-card__feature:last-child { border: none; }
/* Resets le cercle SVG de components.css pour les cartes tarifs (texte ✓ simple) */
.tarifs-pricing .pricing-card__check {
  width: auto; height: auto;
  background: none; border-radius: 0;
  display: inline; align-items: unset; justify-content: unset;
  margin-top: 0;
  color: var(--color-primary); font-weight: 700;
  font-size: 14px; flex-shrink: 0;
}
.pricing-card__tva { font-size: 11px; color: var(--color-text-light); text-align: center; margin-top: 8px; }

/* --- Tableau comparatif desktop --- */
.comp-table-wrap { overflow-x: auto; }
.comp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.comp-table th,
.comp-table td { padding: 10px 14px; text-align: left; border-bottom: 0.5px solid var(--color-border); }
.comp-table th { font-weight: 500; font-size: 12px; color: var(--color-text-muted); background: var(--color-surface); }
.comp-table__col { text-align: center; }
.comp-table__col--green { background: var(--color-primary); color: #fff; font-weight: 500; text-align: center; }
.comp-table__col--mid   { opacity: .9; }
.comp-table__col--dark  { background: var(--color-primary-dark); opacity: 1; }
.comp-table tr:nth-child(even) td { background: #fafaf8; }
.comp-table tr:hover td { background: #f0f7f2; }
.comp-table__cat td {
  background: #f0f7f2 !important;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  padding: 6px 14px;
}
.comp-table__check  { color: var(--color-primary); font-weight: 600; text-align: center; }
.comp-table__dash   { color: #ccc; text-align: center; }
.comp-table__extra  { font-size: 12px; text-align: center; }

/* --- Cards mobile comparatif (< 700px) --- */
.comp-mobile { display: none; flex-direction: column; gap: 10px; }
.comp-mobile__card { background: var(--color-surface); border: 0.5px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.comp-mobile__card--cabinet { border: 2px solid var(--color-primary); }
.comp-mobile__name { font-size: 13px; font-weight: 600; padding: 8px 16px; }
.comp-mobile__card--starter .comp-mobile__name { background: #c8e6d0; color: #1a4a2a; }
.comp-mobile__card--cabinet .comp-mobile__name { background: var(--color-primary); color: #fff; }
.comp-mobile__card--multi   .comp-mobile__name { background: var(--color-primary-dark); color: #fff; }
.comp-mobile__desc { font-size: 13px; color: var(--color-text-muted); padding: 12px 16px; line-height: 1.5; }

/* --- Tableau VS généraliste --- */
.vs-table-wrap { max-width: 780px; margin: 0 auto; overflow-x: auto; }
.vs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vs-table th,
.vs-table td { padding: 10px 14px; border-bottom: 0.5px solid var(--color-border); text-align: left; }
.vs-table th { font-weight: 500; font-size: 12px; }
.vs-table tr:nth-child(even) td { background: #fafaf8; }
.vs-table__col--generic { color: #c0392b; text-align: center; font-weight: 500; }
.vs-table__col--logi    { background: #f0f7f2; color: var(--color-primary-dark); font-weight: 600; text-align: center; }
.vs-table__no       { color: #c0392b; text-align: center; }
.vs-table__yes      { color: var(--color-primary); font-weight: 600; text-align: center; background: #f0f7f2; }
.vs-table__variable { color: var(--color-text-muted); font-size: 12px; text-align: center; }

/* --- Cards options & services --- */
.options-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 820px; margin: 0 auto; }
.option-card { background: var(--color-surface); border: 0.5px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; }
.option-card--wide { grid-column: 1 / -1; max-width: 400px; margin: 0 auto; width: 100%; }
.option-card__icon {
  width: 36px; height: 36px;
  background: var(--color-primary-xlight);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.option-card__icon svg { width: 18px; height: 18px; stroke: var(--color-primary); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.option-card__title { font-size: 15px; font-weight: 600; margin-bottom: 6px; color: var(--color-text); }
.option-card__desc  { font-size: 13px; color: var(--color-text-muted); margin-bottom: 14px; line-height: 1.55; }
.option-card__price { font-size: 13px; color: var(--color-primary-dark); font-weight: 600; background: var(--color-primary-xlight); padding: 5px 10px; border-radius: 6px; display: inline-block; }

/* --- Section headings tarifs --- */
.tarifs-page .section h2 {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--color-text);
}

/* --- FAQ multi-catégories --- */
.faq-cats { max-width: 760px; margin: 0 auto; }
.faq-cat-title {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-primary);
  margin: 28px 0 10px;
}
.faq-cats .faq-item {
  border-radius: 0; border: none;
  border-bottom: 0.5px solid var(--color-border);
  background: transparent;
}
.faq-cats .faq-q {
  background: none; border: none;
  width: 100%; text-align: left;
  font-family: var(--font-family);
  padding: 14px 0;
  font-size: 14px; font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px;
  transition: color var(--transition-fast);
  user-select: none;
}
.faq-cats .faq-q:hover { color: var(--color-primary-dark); background: none; }
.faq-cats .faq-item.open .faq-q { color: var(--color-primary-dark); }
.faq-icon { display: inline-block; flex-shrink: 0; font-size: 18px; line-height: 1; transition: transform var(--transition-base); }
.faq-item.open .faq-icon { transform: rotate(45deg); }
/* Corrige le padding 0 20px hérité du FAQ home */
.faq-cats .faq-a { padding: 0; }
.faq-cats .faq-item.open .faq-a { padding: 0 0 16px; max-height: 600px; }
.faq__link { color: var(--color-primary); font-size: 14px; font-weight: 500; text-decoration: none; }
.faq__link:hover { text-decoration: underline; }

/* --- CTA banner : annule le display:none posé par le home --- */
.tarifs-page .cta-banner__actions { display: flex; }

/* --- Footer CTA : components.css cible h3, le composant sort un h2 --- */
.tarifs-page .footer-cta__text h2 {
  font-size: var(--text-3xl);
  font-weight: 700;
  margin-bottom: 7px;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

/* --- Responsive tarifs --- */
@media (max-width: 700px) {
  .comp-table-wrap { display: none; }
  .comp-mobile { display: flex; }
  .options-grid { grid-template-columns: 1fr; }
  .option-card--wide { grid-column: auto; max-width: 100%; }
  .tarifs-pricing { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
}

/* =============================================================================
   === FONCTIONNALITES ===
   ============================================================================= */

/* --- Hero fonctionnalités --- */
.hero--fonctionnalites {
  display: block;
  background: linear-gradient(160deg, #f0f7f2 0%, #f7f7f5 60%);
  padding: 64px 0 52px;
  text-align: center;
}
.hero--fonctionnalites h1 {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 16px;
  letter-spacing: -0.03em;
}
.hero__btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* --- Sommaire ancres sticky --- */
.feat-sommaire {
  position: sticky;
  top: 57px;
  z-index: 90;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
}
.feat-sommaire__inner {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 10px 0;
  scrollbar-width: none;
  max-width: 1100px;
  margin: 0 auto;
}
.feat-sommaire__inner::-webkit-scrollbar { display: none; }
.feat-sommaire__pill {
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background .2s, color .2s, border-color .2s;
}
.feat-sommaire__pill:hover,
.feat-sommaire__pill--active {
  background: var(--green-pale);
  color: var(--green-dark);
  border-color: var(--green-light);
}

/* --- Modules fonctionnalités --- */
.feat-module { padding: 80px 0; }
.feat-module--alt { background: var(--white); }

.feat-module__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.feat-module__inner--reverse { direction: rtl; }
.feat-module__inner--reverse > * { direction: ltr; }

.feat-module__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--green);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.feat-module__content h2 {
  font-size: clamp(24px, 2.5vw, 34px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
  line-height: 1.2;
  color: var(--color-text);
}
.feat-module__intro {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 24px;
}
.feat-module__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feat-module__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--color-text);
}
.feat-module__list li::before {
  content: "";
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  background-color: var(--green-pale);
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='%234a8c5c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 2px;
  flex-shrink: 0;
}
.feat-module__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  margin-top: 20px;
}
.feat-module__link:hover { text-decoration: underline; }

/* --- Grille récapitulatif --- */
.feat-recap { background: var(--bg); }

.feat-recap__title {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
  color: var(--color-text);
}
.feat-recap__sub {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.6;
  max-width: 600px;
  margin-bottom: 48px;
}
.feat-recap__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.feat-recap__cat {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px;
}
.feat-recap__cat-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--green);
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.feat-recap__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.feat-recap__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text);
}
.feat-recap__list li::before {
  content: "";
  width: 14px;
  height: 14px;
  min-width: 14px;
  border-radius: 50%;
  background-color: var(--green-pale);
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3L3 5L7 1' stroke='%234a8c5c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* --- Responsive fonctionnalités --- */
@media (max-width: 768px) {
  .feat-module__inner,
  .feat-module__inner--reverse {
    grid-template-columns: 1fr;
    gap: 36px;
    direction: ltr;
    padding: 0 20px;
  }
  .feat-recap__grid { grid-template-columns: repeat(2, 1fr); }
  .feat-sommaire { padding: 0 20px; }
  .hero__btns { flex-direction: column; align-items: center; }
}
@media (max-width: 480px) {
  .feat-recap__grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   --- Page Sécurité ---
   ============================================================================= */

/* --- Hero --- */
.sec-hero {
  background: linear-gradient(160deg, var(--color-primary-xxlight) 0%, #fff 60%);
  padding: 80px 40px 60px;
  text-align: center;
}
.sec-hero h1 {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  color: var(--color-primary-dark);
  line-height: 1.15;
  margin-bottom: 20px;
  letter-spacing: -0.03em;
}
.sec-hero__sub {
  font-size: clamp(15px, 2vw, 18px);
  color: var(--color-text-muted);
  max-width: 680px;
  margin: 0 auto 48px;
  line-height: 1.7;
}
.sec-hero__sub strong { color: var(--color-text); }

.sec-badges-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.sec-badge {
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-sm);
}

/* --- Structure sections --- */
.sec-section { padding: 80px 0; }
.sec-section--alt { background: var(--color-surface); }
.sec-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}
.sec-title {
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 800;
  color: var(--color-primary-dark);
  line-height: 1.2;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}
.sec-sub {
  font-size: 17px;
  color: var(--color-text-muted);
  margin-bottom: 48px;
  max-width: 600px;
}
.sec-cards-pretitle {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 16px;
}
.sec-intro-text {
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: 24px;
  font-size: 16px;
}

/* --- Deux colonnes --- */
.sec-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* --- Illustration placeholder --- */
.illustration-placeholder {
  background: var(--color-primary-xxlight);
  border: 2px dashed var(--color-primary-light);
  border-radius: var(--radius-lg);
  height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--color-primary);
  text-align: center;
  padding: 24px;
}
.illustration-placeholder strong { color: var(--color-primary-dark); font-size: 15px; }
.illustration-placeholder p { font-size: 13px; opacity: .75; }
.illustration-placeholder code { font-size: 12px; color: var(--color-primary); }

/* --- Checklist page sécurité --- */
.sec-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}
.sec-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.55;
}
.sec-checklist li::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  min-width: 20px;
  background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-6' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/cover no-repeat;
  border-radius: 50%;
  margin-top: 2px;
  flex-shrink: 0;
}
.sec-checklist--blue li::before { background-color: #3b7dd8; }
.sec-checklist li strong { display: block; color: var(--color-text); font-weight: 700; }
.sec-checklist li span { color: var(--color-text-muted); font-size: 15px; }

/* --- Bloc explicatif HDS --- */
.explain-block {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 32px;
}
.explain-block p {
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: 14px;
  font-size: 15px;
}
.explain-block p:last-child { margin-bottom: 0; }
.explain-block strong { color: var(--color-text); }

.hds-highlight {
  background: var(--color-primary-xxlight);
  border: 1.5px solid #c3dfc9;
  border-radius: var(--radius-md);
  padding: 24px 28px;
  margin-bottom: 32px;
}
.hds-highlight p {
  margin-bottom: 10px;
  color: var(--color-text-muted);
  line-height: 1.7;
  font-size: 15px;
}
.hds-highlight p:last-child { margin-bottom: 0; }
.hds-check {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

/* --- Minicards HDS --- */
.minicards-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.minicard {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px 16px;
  text-align: center;
}
.mc-icon { font-size: 24px; margin-bottom: 10px; }
.mc-title { font-size: 14px; font-weight: 700; color: var(--color-text); margin-bottom: 6px; }
.mc-desc { font-size: 13px; color: var(--color-text-muted); line-height: 1.5; }

/* --- Cards techniques (grille 2 colonnes) --- */
.sec-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.sec-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px;
  transition: box-shadow var(--transition-base);
}
.sec-card:hover { box-shadow: var(--shadow-md); }
.sec-card-icon {
  width: 40px;
  height: 40px;
  background: var(--color-primary-xxlight);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--color-primary);
}
.sec-card-icon svg { width: 20px; height: 20px; }
.sec-card h3 { font-size: 16px; font-weight: 700; color: var(--color-text); margin-bottom: 8px; }
.sec-card p { font-size: 14px; color: var(--color-text-muted); line-height: 1.65; }

/* --- Blocs RGPD --- */
.rgpd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.rgpd-bloc {
  border-radius: var(--radius-lg);
  padding: 28px;
}
.rgpd-bloc--saas {
  background: var(--color-primary-xxlight);
  border: 1.5px solid #c3dfc9;
}
.rgpd-bloc--commercial {
  background: #eef5ff;
  border: 1.5px solid #c0d6f5;
}
.rgpd-bloc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.rbh-icon { font-size: 22px; }
.rgpd-bloc-header h3 { font-size: 17px; font-weight: 800; color: var(--color-text); }
.rgpd-bloc p { font-size: 14px; color: var(--color-text-muted); line-height: 1.7; margin-bottom: 14px; }
.rgpd-bloc p strong { color: var(--color-text); }
.rgpd-bloc__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-primary);
  margin-bottom: 12px;
}
.rgpd-bloc__label--blue { color: #3b7dd8; }

/* --- Droits RGPD --- */
.droits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.droit-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
}
.dc-icon { font-size: 24px; margin-bottom: 10px; }
.dc-title { font-size: 14px; font-weight: 700; color: var(--color-text); margin-bottom: 6px; }
.dc-desc { font-size: 13px; color: var(--color-text-muted); line-height: 1.55; }

.droits-subtitle {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text);
  margin: 40px 0 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-border);
}

.info-bloc {
  background: var(--color-primary-xxlight);
  border: 1.5px solid #c3dfc9;
  border-radius: var(--radius-md);
  padding: 24px;
  margin-top: 16px;
}
.info-bloc p { font-size: 15px; color: var(--color-text-muted); line-height: 1.75; margin-bottom: 12px; }
.info-bloc p:last-child { margin-bottom: 0; }
.info-bloc strong { color: var(--color-text); }

/* --- Contact RGPD --- */
.contact-block {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px;
  max-width: 700px;
}
.contact-block h2 { font-size: 22px; font-weight: 800; color: var(--color-text); margin-bottom: 10px; }
.contact-block > p { color: var(--color-text-muted); margin-bottom: 24px; font-size: 15px; }
.contact-items { display: flex; flex-direction: column; gap: 14px; }
.contact-item { display: flex; align-items: flex-start; gap: 14px; }
.ci-icon { font-size: 20px; min-width: 28px; }
.ci-label { font-size: 14px; font-weight: 700; color: var(--color-text); margin-bottom: 2px; }
.ci-value { font-size: 15px; color: var(--color-text-muted); line-height: 1.5; }
.ci-value a { color: var(--color-primary); text-decoration: none; }
.ci-value a:hover { text-decoration: underline; }

/* --- Engagements --- */
.eng-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 8px;
}
.eng-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px 20px;
}
.eng-icon { font-size: 26px; margin-bottom: 12px; }
.eng-title { font-size: 15px; font-weight: 700; color: var(--color-text); margin-bottom: 8px; }
.eng-desc { font-size: 14px; color: var(--color-text-muted); line-height: 1.6; }

/* --- CTA discret --- */
.cta-discret {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 40px;
  text-align: center;
}
.cta-discret h3 { font-size: 22px; font-weight: 800; color: var(--color-text); margin-bottom: 10px; }
.cta-discret p { color: var(--color-text-muted); margin-bottom: 24px; font-size: 16px; }

/* --- FAQ page sécurité (surcharge) --- */
.sec-faq.faq-list { gap: 12px; }
.sec-faq .faq-item { border-radius: var(--radius-md); }
.sec-faq .faq-q {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  padding: 18px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  user-select: none;
}
.sec-faq .faq-q:hover { background: var(--color-primary-xxlight); }
.sec-faq .faq-item.open .faq-q { color: var(--color-primary-dark); }
.sec-faq .faq-arrow { min-width: 18px; color: var(--color-primary); font-size: 18px; transition: transform .3s; flex-shrink: 0; }
.sec-faq .faq-item.open .faq-arrow { transform: rotate(180deg); }
.sec-faq .faq-a {
  border-top: 1px solid var(--color-border);
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .3s ease;
}
.sec-faq .faq-item.open .faq-a { max-height: 600px; padding: 0 20px 18px; }
.sec-faq .faq-a p { padding-top: 16px; font-size: 15px; color: var(--color-text-muted); line-height: 1.75; }
.sec-faq .faq-a a { color: var(--color-primary); text-decoration: none; }
.sec-faq .faq-a a:hover { text-decoration: underline; }

/* =============================================================================
   Responsive — Page Sécurité
   ============================================================================= */
@media (max-width: 1024px) {
  .sec-inner { padding: 0 28px; }
  .sec-hero { padding: 60px 28px 48px; }
  .minicards-row { grid-template-columns: repeat(2, 1fr); }
  .eng-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .sec-section { padding: 56px 0; }
  .sec-inner { padding: 0 20px; }
  .sec-hero { padding: 48px 20px 40px; }
  .sec-two-col { grid-template-columns: 1fr; gap: 36px; }
  .sec-cards-grid { grid-template-columns: 1fr; }
  .rgpd-grid { grid-template-columns: 1fr; }
  .droits-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-block { padding: 24px; }
  .cta-discret { padding: 28px 20px; }
}

@media (max-width: 640px) {
  .minicards-row { grid-template-columns: repeat(2, 1fr); }
  .droits-grid { grid-template-columns: 1fr; }
  .eng-grid { grid-template-columns: 1fr; }
  .sec-badges-row { flex-direction: column; align-items: center; }
}

/* =============================================================================
   === LANDING PAGES SEO ===
   ============================================================================= */

/* --- Hero landing --- */
.landing-hero {
  background: linear-gradient(155deg, #f0f8f3 0%, #fff 65%);
  padding: 80px 40px 72px;
  overflow: hidden;
}
.landing-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.landing-hero__text { display: flex; flex-direction: column; align-items: flex-start; }
.landing-hero__h1 {
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: 18px;
}
.landing-hero__h1 em { color: var(--green); font-style: normal; }
.landing-hero__subtitle {
  font-size: 17px;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 520px;
}
.landing-hero__visual { position: relative; }
.landing-hero__visual .screenshot-frame { transform: rotate(-1deg); }

/* --- Bandeau confiance (réutilise .trust-band de home) --- */
/* Pas de surcharge nécessaire — classes existantes suffisent */

/* --- Section Pourquoi --- */
.landing-why { background: var(--color-surface); padding: 80px 0; }
.landing-why__body {
  max-width: 820px;
  margin: 0 auto 44px;
}
.landing-why__para {
  font-size: 16px;
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: 18px;
}
.landing-why__encart {
  background: var(--color-primary-xxlight);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 18px 20px;
  margin-top: 24px;
  margin-bottom: 8px;
}
.landing-why__encart strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary-dark);
  display: block;
  margin-bottom: 8px;
}
.landing-why__encart p {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}
.landing-why__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}

/* --- Fonctionnalités --- */
.landing-feat { background: var(--color-bg); padding: 80px 0; }
.landing-feat__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}

/* --- Bloc phare (image / texte 50-50) --- */
.landing-phare { background: var(--color-surface); padding: 80px 0; }
.landing-phare__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.landing-phare__img > img {
  width: 100%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  display: block;
}
.landing-phare__img-ph {
  background: linear-gradient(135deg, #dbeae1, #c8dfd0);
  border-radius: var(--radius-xl);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-lg);
  color: var(--color-text-muted);
  font-size: 13px;
  text-align: center;
  padding: 24px;
}

/* --- Témoignage centré --- */
.landing-testi { background: var(--color-bg); padding: 72px 0; }
.landing-testi__card {
  max-width: 680px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 36px;
  text-align: center;
}
.landing-testi__stars { color: var(--color-warning); font-size: 18px; letter-spacing: 2px; margin-bottom: 18px; }
.landing-testi__quote {
  font-size: 17px;
  color: var(--color-text);
  line-height: 1.75;
  font-style: italic;
  margin-bottom: 24px;
}
.landing-testi__author { display: flex; align-items: center; justify-content: center; gap: 12px; }
.landing-testi__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.landing-testi__name { font-size: 15px; font-weight: 700; color: var(--color-text); }
.landing-testi__role { font-size: 13px; color: var(--color-text-muted); }

/* --- Tarifs simplifiés --- */
.landing-tarifs { background: var(--color-surface); padding: 80px 0; }
.landing-tarifs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 860px;
  margin: 0 auto 24px;
}

/* --- FAQ landing --- */
.landing-faq { background: var(--color-bg); padding: 80px 0; }

/* --- CTA Banner landing (override border-radius pour pleine largeur) --- */
.landing-cta-banner { background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 60%, var(--color-primary-light) 100%); padding: 72px 40px; text-align: center; }
.landing-cta-banner__inner { max-width: 680px; margin: 0 auto; }
.landing-cta-banner h2 {
  color: #fff;
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: -0.03em;
}
.landing-cta-banner p {
  color: rgba(255,255,255,0.82);
  font-size: 17px;
  margin-bottom: 28px;
}

/* --- Footer CTA landing --- */
.landing-footer-cta { background: var(--color-primary-xxlight); border-top: 1px solid var(--color-primary-xlight); padding: 64px 40px; }

/* =============================================================================
   Responsive — Landing pages
   ============================================================================= */
@media (max-width: 1024px) {
  .landing-hero__inner { gap: 40px; }
  .landing-phare__inner { padding: 0 28px; gap: 40px; }
}

@media (max-width: 768px) {
  .landing-hero { padding: 56px 24px 48px; }
  .landing-hero__inner { grid-template-columns: 1fr; gap: 36px; }
  .landing-hero__visual { display: none; }
  .landing-hero__h1 { font-size: 28px; }
  .landing-why__cards { grid-template-columns: 1fr; }
  .landing-feat__grid { grid-template-columns: 1fr; }
  .landing-phare__inner { grid-template-columns: 1fr; gap: 32px; padding: 0 20px; }
  .landing-tarifs__grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
  .landing-cta-banner { padding: 52px 24px; }
  .landing-footer-cta { padding: 48px 24px; }
}

@media (max-width: 640px) {
  .landing-hero { padding: 44px 20px 40px; }
  .landing-hero__h1 { font-size: 24px; letter-spacing: -0.5px; }
  .landing-hero__subtitle { font-size: 15px; }
  .landing-feat__grid { grid-template-columns: 1fr; }
  .landing-why__cards { grid-template-columns: 1fr; }
}


/* =============================================================================
   === PAGE DEMO (/demo + /demo/confirmation) ===
   Mobile-first — breakpoints 640px, 1024px
   ============================================================================= */

/* --- Alertes flash --- */
.alert-error,
.alert-success {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20px;
}
.alert-error   { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }

/* --- Etats de validation champs --- */
.form-group__input.input-error { border-color: var(--color-error)   !important; box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important; }
.form-group__input.input-valid { border-color: var(--color-success) !important; box-shadow: 0 0 0 3px rgba(34,197,94,.1) !important; }

/* --- Hero compact demo --- */
.hero-demo {
  background: linear-gradient(160deg, #f0f7f2 0%, var(--color-bg) 60%);
  padding: 48px 20px 40px;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}
.hero-demo__title {
  font-size: clamp(28px, 6vw, 44px);
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.15;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.hero-demo__subtitle {
  font-size: 16px;
  color: var(--color-text-muted);
  max-width: 560px;
  margin: 0 auto 12px;
  line-height: 1.6;
}
.hero-demo__mention {
  font-size: 13px;
  color: #888;
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* --- Section formulaire --- */
.section-form {
  padding: 40px 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

/* --- Card formulaire --- */
.form-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  padding: 32px 24px;
}
.form-card__title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--color-text);
}
.form-card__subtitle {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 24px;
}

/* --- Groupes de champs --- */
.form-group {
  margin-bottom: 16px;
}
.form-group__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
}
.form-group__label .opt-tag {
  font-weight: 400;
  color: #aaa;
  font-size: 12px;
  margin-left: 4px;
}
.form-group__input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--color-text);
  background: #fff;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  outline: none;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.form-group__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(74,140,92,.12);
}
.form-group__input::placeholder { color: #bbb; }

.form-group--row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Case RGPD */
.rgpd-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  background: #f9f9f7;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  margin-bottom: 18px;
  transition: border-color var(--transition-fast);
}
.rgpd-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 2px;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.rgpd-check label {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
  cursor: pointer;
}
.rgpd-check a { color: var(--color-primary); }

.security-mention {
  text-align: center;
  font-size: 12px;
  color: #999;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* --- Colonne reassurance --- */
.reassurance-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reass-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: box-shadow var(--transition-base);
}
.reass-item:hover { box-shadow: var(--shadow-md); }
.reass-item__icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  background: var(--color-primary-xxlight);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.reass-item__title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 3px;
  color: var(--color-text);
}
.reass-item p {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* --- Section apercu screenshots --- */
.section-apercu {
  background: var(--color-surface);
  padding: 56px 20px;
  text-align: center;
  border-top: 1px solid var(--color-border);
}
.section-apercu h2 {
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.section-apercu .sous-titre {
  color: var(--color-text-muted);
  font-size: 16px;
  margin-bottom: 40px;
}
.screenshots-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
}
.screenshot-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.screenshot-header {
  background: #f0f0ee;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--color-border);
}
.screenshot-header .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.screenshot-header .dot--red    { background: #ff5f57; }
.screenshot-header .dot--yellow { background: #febc2e; }
.screenshot-header .dot--green  { background: #28c840; }
.screenshot-caption {
  font-size: 11px;
  color: #888;
  margin-left: 6px;
  font-weight: 500;
}
.screenshot-body {
  background: #fafafa;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 12px;
}

/* Mock dashboard (apercu) */
.mock-dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
}
.mock-kpi {
  background: white;
  border: 1px solid #e5e5e3;
  border-radius: 6px;
  padding: 8px;
  font-size: 9px;
}
.mock-kpi .val { font-size: 14px; font-weight: 700; color: var(--color-primary-dark); }
.mock-kpi .lbl { color: #999; }
.mock-chart {
  background: white;
  border: 1px solid #e5e5e3;
  border-radius: 6px;
  padding: 8px;
  grid-column: span 3;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 60px;
}
.mock-bar {
  flex: 1;
  background: var(--color-primary-light);
  border-radius: 2px 2px 0 0;
  opacity: 0.7;
}
.mock-bar.active { background: var(--color-primary); opacity: 1; }

/* Mock planning */
.mock-planning {
  display: grid;
  grid-template-columns: 40px 1fr 1fr 1fr;
  gap: 3px;
  font-size: 8px;
  width: 100%;
}
.mock-header-cell { background: #f0f0ee; padding: 3px 4px; border-radius: 3px; text-align: center; font-weight: 600; color: #666; }
.mock-time  { color: #aaa; padding: 3px 4px; }
.mock-rdv   { border-radius: 3px; padding: 3px 4px; font-weight: 600; font-size: 7px; }
.rdv-vert   { background: #d4edda; color: #155724; }
.rdv-bleu   { background: #cce5ff; color: #004085; }
.rdv-orange { background: #fff3cd; color: #856404; }
.mock-empty { background: #f9f9f7; border-radius: 3px; }

/* --- Section FAQ --- */
.section-faq {
  padding: 56px 20px;
  max-width: 800px;
  margin: 0 auto;
}
.section-faq h2 {
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 800;
  margin-bottom: 28px;
  text-align: center;
  letter-spacing: -0.01em;
}
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  overflow: hidden;
}
.faq-question {
  padding: 16px 20px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-surface);
  transition: background var(--transition-fast);
  user-select: none;
}
.faq-question:hover { background: #fafaf8; }
.faq-question.open  { color: var(--color-primary-dark); }
.faq-arrow { transition: transform var(--transition-fast); font-size: 12px; color: #aaa; }
.faq-question.open .faq-arrow { transform: rotate(180deg); color: var(--color-primary); }
.faq-answer {
  display: none;
  padding: 0 20px 16px;
  font-size: 13px;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  line-height: 1.65;
}
.faq-answer.visible { display: block; }
.faq-answer p { padding-top: 12px; }

/* --- Footer CTA discret --- */
.footer-cta-discret {
  border-top: 1px solid var(--color-border);
  padding: 28px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--color-text-muted);
}
.footer-cta-discret a { color: var(--color-primary); font-weight: 600; }
.footer-cta-discret strong { color: var(--color-text); }

/* --- Page confirmation : hero --- */
.confirm-hero {
  padding: 56px 20px 40px;
  text-align: center;
  background: linear-gradient(160deg, #f0f7f2 0%, var(--color-bg) 60%);
  border-bottom: 1px solid var(--color-border);
}
.check-circle {
  width: 72px;
  height: 72px;
  background: var(--color-primary-xxlight);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes popIn {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.confirm-hero__title {
  font-size: clamp(26px, 5vw, 42px);
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.email-masque {
  display: inline-block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 6px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary-dark);
  margin-top: 4px;
}

/* --- Etapes --- */
.section-etapes {
  padding: 48px 20px;
  max-width: 900px;
  margin: 0 auto;
}
.etapes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.etape {
  text-align: center;
  padding: 24px 20px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  margin-bottom: 8px;
}
.etape__num {
  width: 36px;
  height: 36px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  margin: 0 auto 12px;
}
.etape__icon { font-size: 26px; margin-bottom: 10px; }
.etape h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.etape p  { font-size: 13px; color: var(--color-text-muted); line-height: 1.45; }
.etape-fleche {
  font-size: 24px;
  color: var(--color-primary-light);
  text-align: center;
  padding: 4px;
  transform: rotate(90deg);
}

/* --- CTA principal --- */
.section-cta-principal {
  text-align: center;
  padding: 0 20px 48px;
}
.cta-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.cta-wrapper--encadre {
  background: linear-gradient(180deg, #eef6f0 0%, #ffffff 100%);
  border: 2px solid var(--color-primary, #4a8c5c);
  border-radius: 16px;
  padding: 28px 36px;
  box-shadow: 0 12px 32px rgba(74, 140, 92, 0.18);
  width: min(100%, 640px);
}
.btn--parametrage {
  font-size: 20px;
  padding: 20px 48px;
  width: 100%;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(74, 140, 92, 0.35);
  animation: cta-pulse 2.2s ease-in-out 3;
}
.btn--parametrage svg { width: 22px; height: 22px; }
@keyframes cta-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 20px rgba(74, 140, 92, 0.35); }
  50% { transform: scale(1.03); box-shadow: 0 12px 28px rgba(74, 140, 92, 0.5); }
}
@media (prefers-reduced-motion: reduce) { .btn--parametrage { animation: none; } }
.cta-wrapper--encadre .cta-info { color: var(--color-text-muted, #555); font-size: 14px; }
.cta-info {
  font-size: 13px;
  color: #999;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* --- Message Maureen --- */
.section-maureen {
  padding: 0 20px 48px;
  max-width: 800px;
  margin: 0 auto;
}
.maureen-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  text-align: center;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.maureen-card::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 24px;
  font-size: 100px;
  color: var(--color-primary-xxlight);
  line-height: 1;
  font-family: Georgia, serif;
  pointer-events: none;
}
.maureen-photo {
  width: 72px;
  height: 72px;
  min-width: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 4px 12px rgba(74,140,92,.25);
  flex-shrink: 0;
}
.maureen-content p {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 10px;
}
.maureen-signature {
  font-weight: 700 !important;
  color: var(--color-text) !important;
  font-size: 14px;
  margin-bottom: 2px !important;
}
.maureen-role { font-size: 12px; color: #aaa !important; }

/* --- Renvoyer le code --- */
.section-renvoyer {
  background: #fafaf8;
  border-top: 1px solid var(--color-border);
  padding: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--color-text-muted);
}
.section-renvoyer a { color: var(--color-primary); font-weight: 600; }

/* Spinner bouton */
@keyframes spin { to { transform: rotate(360deg); } }

/* =============================================================================
   Responsive demo 640px
   ============================================================================= */
@media (min-width: 640px) {
  .hero-demo { padding: 56px 40px 48px; }
  .section-form { padding: 48px 40px; }
  .form-card { padding: 36px; }
  .section-apercu { padding: 56px 40px; }
  .section-faq { padding: 56px 40px; }
  .confirm-hero { padding: 60px 40px 48px; }
  .section-etapes { padding: 56px 40px; }
  .section-cta-principal { padding: 0 40px 56px; }
  .section-maureen { padding: 0 40px 56px; }
  .maureen-card {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    padding: 32px;
  }
  .screenshots-grid { grid-template-columns: 1fr 1fr; }
}

/* =============================================================================
   Responsive demo 1024px
   ============================================================================= */
@media (min-width: 1024px) {
  .form-grid {
    grid-template-columns: 1fr 340px;
    align-items: start;
  }
  .reassurance-col {
    position: sticky;
    top: 80px;
  }
  .etapes-grid {
    grid-template-columns: 1fr auto 1fr auto 1fr;
  }
  .etape { margin-bottom: 0; }
  .etape-fleche {
    transform: none;
    padding: 0 10px;
    font-size: 28px;
  }
}


/* --- Modificateurs de boutons (utilisés sur /demo) --- */
.btn--full { width: 100%; justify-content: center; }
.btn--xl   { padding: 16px 36px; font-size: 17px; border-radius: var(--radius-lg); }

/* =============================================================================
   PAGE À PROPOS
   ============================================================================= */
.story-section--alt { background: var(--color-bg); }
.story-inner--reverse { grid-template-columns: 1.15fr 1fr; }
.apropos-quote {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  border-radius: 20px;
  padding: 40px 36px;
  box-shadow: var(--shadow-lg);
}
.apropos-quote p {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}
.apropos-quote p em { font-style: italic; color: #d6ecdc; }
.apropos-quote__author { font-size: 14px; color: rgba(255,255,255,0.8); }
.apropos-equipe { max-width: 1080px; margin: 0 auto 40px; }
.apropos-equipe img { width: 100%; height: auto; display: block; border-radius: 20px; box-shadow: var(--shadow-lg); }
.apropos-equipe figcaption { text-align: center; font-size: 14px; color: var(--color-text-muted); margin-top: 12px; }
.apropos-team { max-width: 900px; margin: 0 auto; }
.apropos-person {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: center;
}
.apropos-person__avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--color-primary-xlight); color: var(--color-primary-dark);
  font-weight: 800; font-size: 22px; letter-spacing: .02em;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.apropos-person h3 { font-size: 20px; font-weight: 700; margin-bottom: 4px; color: var(--color-text); }
.apropos-person__role { font-size: 13px; color: var(--color-primary-dark); font-weight: 600; margin-bottom: 12px; }
.apropos-person p:last-child { font-size: 14px; color: var(--color-text-muted); line-height: 1.6; }
.apropos-stats-section { background: var(--color-primary-xxlight); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.apropos-stats-section .section-inner { padding-top: 48px; padding-bottom: 48px; }
.apropos-stat { text-align: center; display: flex; flex-direction: column; gap: 6px; }
.apropos-stat__num { font-size: clamp(32px, 4vw, 44px); font-weight: 800; color: var(--color-primary-dark); letter-spacing: -0.03em; line-height: 1; }
.apropos-stat__label { font-size: 14px; color: var(--color-text-muted); max-width: 220px; margin: 0 auto; }
@media (max-width: 768px) {
  .story-inner--reverse { grid-template-columns: 1fr; }
  .story-inner--reverse .story-txt { order: 1; }
  .story-inner--reverse .story-photo { order: 2; }
  .apropos-stats-section .grid-4 { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
}

/* =============================================================================
   PAGE CONTACT
   ============================================================================= */
.form-group__textarea { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.contact-direct {
  margin-top: 8px;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--color-primary-xxlight);
  border: 1px dashed var(--color-primary-light);
  text-align: center;
}
.contact-direct__title { font-size: 13px; color: var(--color-text-muted); margin-bottom: 6px; }
.contact-direct__link { font-weight: 700; color: var(--color-primary-dark); text-decoration: none; font-size: 15px; word-break: break-all; }
.contact-direct__link:hover { text-decoration: underline; }
.section-faq .faq-list { max-width: none; }

/* =============================================================================
   PAGES LÉGALES (mentions, CGV, confidentialité, cookies)
   ============================================================================= */
.legal-hero {
  background: linear-gradient(160deg, #f0f7f2 0%, var(--color-bg) 60%);
  border-bottom: 1px solid var(--color-border);
  padding: 48px 20px 36px;
  text-align: center;
}
.legal-hero h1 {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  color: var(--color-text);
}
.legal-hero__meta { font-size: 13px; color: var(--color-text-light); }
.legal-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 40px 20px 72px;
}
.legal-toc {
  font-size: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  align-self: start;
}
.legal-toc__title { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-light); font-weight: 700; margin-bottom: 10px; }
.legal-toc ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.legal-toc a { color: var(--color-text-muted); text-decoration: none; }
.legal-toc a:hover { color: var(--color-primary-dark); }
.legal-content { min-width: 0; }
.legal-content h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 36px 0 12px;
  padding-top: 8px;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-size: 17px; font-weight: 700; margin: 22px 0 8px; color: var(--color-text); }
.legal-content p, .legal-content li { font-size: 15px; line-height: 1.7; color: var(--color-text-muted); }
.legal-content p { margin-bottom: 12px; }
.legal-content ul { padding-left: 22px; margin-bottom: 14px; }
.legal-content li { margin-bottom: 4px; }
.legal-content a { color: var(--color-primary-dark); }
.legal-content table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 12px 0 20px; }
.legal-content th, .legal-content td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-border); vertical-align: top; color: var(--color-text-muted); }
.legal-content th { color: var(--color-text); font-weight: 600; background: var(--color-primary-xxlight); }
.legal-todo {
  background: var(--color-warning-bg);
  border: 1px solid #fde68a;
  color: #92400e;
  border-radius: var(--radius-md);
  padding: 2px 8px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.legal-box {
  background: var(--color-primary-xxlight);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin: 16px 0 20px;
}
.legal-box p:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .legal-layout { grid-template-columns: 240px 1fr; gap: 56px; }
  .legal-toc { position: sticky; top: 88px; }
}
#contact-form .btn--full { padding: 14px 24px; font-size: 16px; border-radius: var(--radius-md); }
.contact-submit {
  position: relative;
  margin-top: 4px;
  padding: 16px 24px !important;
  font-size: 17px !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-radius: var(--radius-lg) !important;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(74,140,92,0.32), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  gap: 10px;
}
.contact-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(74,140,92,0.4), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.contact-submit:active { transform: translateY(0); }
.contact-submit:focus-visible { outline: 3px solid rgba(74,140,92,0.35); outline-offset: 3px; }
.contact-submit__icon { transition: transform var(--transition-base); flex-shrink: 0; }
.contact-submit:hover .contact-submit__icon { transform: translateX(4px); }
.contact-submit:disabled { opacity: .85; cursor: wait; transform: none; }
.contact-submit.is-loading .contact-submit__icon {
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: contact-spin .8s linear infinite;
}
.contact-submit.is-loading .contact-submit__icon path { display: none; }
@keyframes contact-spin { to { transform: rotate(360deg); } }
.contact-submit__hint {
  text-align: center;
  font-size: 13px;
  color: var(--color-text-light);
  margin-top: 10px;
}
#contact-form .security-mention { margin-top: 6px; }
@media (max-width: 520px) {
  #contact-form .form-group--row { grid-template-columns: 1fr; gap: 0; }
}

/* =============================================================================
   TUNNEL DE SOUSCRIPTION
   ============================================================================= */
.souscrire-progress { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.souscrire-progress span { padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--color-border); color: var(--color-text-light); }
.souscrire-progress span.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.souscrire-progress span.is-done { color: var(--color-primary-dark); border-color: var(--color-primary-light); }
.souscrire-choix { max-width: 1040px; margin: 0 auto; padding: 40px 20px 72px; }
.souscrire-choix__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.choix-card { position: relative; display: flex; flex-direction: column; gap: 12px; background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius-xl); padding: 30px 28px; text-decoration: none; color: var(--color-text); transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); }
.choix-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--color-primary-light); }
.choix-card--principal { border-color: var(--color-primary); box-shadow: 0 8px 24px rgba(74,140,92,.14); }
.choix-card__badge { position: absolute; top: -12px; right: 20px; background: var(--color-primary-dark); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.choix-card__icon { width: 48px; height: 48px; border-radius: 12px; background: var(--color-primary-xxlight); color: var(--color-primary); display: flex; align-items: center; justify-content: center; }
.choix-card h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.choix-card p { font-size: 15px; color: var(--color-text-muted); line-height: 1.6; }
.choix-card__list { list-style: none; padding: 0; margin: 4px 0 8px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--color-text); }
.choix-card__list li::before { content: '✓'; color: var(--color-primary); font-weight: 700; margin-right: 8px; }
.choix-card .btn { align-self: flex-start; margin-top: auto; }
.souscrire-etapes { margin-top: 48px; background: var(--color-primary-xxlight); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 28px; }
.souscrire-etapes__title { font-weight: 700; margin-bottom: 18px; }
.souscrire-etapes__list { counter-reset: e; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
.souscrire-etapes__list li { counter-increment: e; display: grid; grid-template-columns: 32px 1fr; gap: 4px 12px; align-items: start; }
.souscrire-etapes__list li::before { content: counter(e); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.souscrire-etapes__list strong { font-size: 15px; }
.souscrire-etapes__list span { font-size: 13px; color: var(--color-text-muted); }
@media (min-width: 820px) { .souscrire-choix__grid { grid-template-columns: 1fr 1fr; } .souscrire-etapes__list { grid-template-columns: repeat(5, 1fr); } .souscrire-etapes__list li { grid-template-columns: 1fr; } .souscrire-etapes__list li::before { grid-row: auto; margin-bottom: 6px; } }

.form-grid--formule { max-width: 1100px; }
.formule-choix { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 18px; }
.formule-opt, .periode-opt, .option-opt { display: flex; gap: 14px; align-items: flex-start; border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); padding: 16px; cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); background: #fff; }
.formule-opt:has(> input:checked), .periode-opt:has(> input:checked), .option-opt:has(> input:checked) { border-color: var(--color-primary); background: var(--color-primary-xxlight); }
.formule-opt input, .periode-opt input, .option-opt > input { margin-top: 3px; accent-color: var(--color-primary); width: 18px; height: 18px; flex-shrink: 0; }
.formule-opt__body { display: flex; flex-direction: column; gap: 2px; }
.formule-opt__name { font-weight: 700; font-size: 17px; }
.formule-opt__price { font-weight: 800; font-size: 22px; color: var(--color-primary-dark); letter-spacing: -.02em; }
.formule-opt__price small { font-size: 13px; font-weight: 500; color: var(--color-text-muted); }
.formule-opt__desc, .option-opt__desc { font-size: 13px; color: var(--color-text-muted); line-height: 1.5; }
.periodicite-choix { display: grid; grid-template-columns: 1fr; gap: 12px; }
.periode-opt span { display: flex; flex-direction: column; } .periode-opt strong { font-size: 15px; } .periode-opt small { font-size: 13px; color: var(--color-text-muted); }
.option-opt { margin-bottom: 12px; }
.option-opt__body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.option-opt__name { font-weight: 700; font-size: 15px; } .option-opt__name em { font-style: normal; font-weight: 500; color: var(--color-text-light); font-size: 13px; margin-left: 6px; }
.option-opt__price { font-weight: 800; color: var(--color-primary-dark); white-space: nowrap; }
.option-opt__modes { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; margin-top: 6px; } .option-opt__modes label { display: flex; gap: 6px; align-items: center; }
.recap-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 24px; align-self: start; }
.recap-card__title { font-size: 18px; font-weight: 700; margin-bottom: 14px; }
.recap-card__lines { margin: 0 0 14px; } .recap-card__lines div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 6px 0; border-bottom: 1px dashed var(--color-border); } .recap-card__lines dt { color: var(--color-text-muted); } .recap-card__lines dd { font-weight: 600; white-space: nowrap; }
.recap-card__total div { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; } .recap-card__sub { color: var(--color-text-muted); } .recap-card__ttc { font-size: 17px !important; font-weight: 700; border-top: 1px solid var(--color-border); margin-top: 6px; padding-top: 10px !important; color: var(--color-primary-dark); }
.recap-card__note { font-size: 12px; color: var(--color-text-light); margin: 12px 0 14px; line-height: 1.5; }
.recap-card__edit { display: block; font-size: 13px; color: var(--color-primary-dark); margin: 8px 0 14px; }
.recap-card .contact-submit { margin-top: 0; }
@media (min-width: 1024px) { .form-grid--formule .recap-card { position: sticky; top: 88px; } }
.form-hint { font-size: 12px; color: var(--color-text-light); margin-top: 6px; line-height: 1.5; }
.siret-field { position: relative; }
.siret-field__state { display: block; font-size: 12px; margin-top: 6px; color: var(--color-text-light); min-height: 16px; }
.siret-field__state.is-ok { color: var(--color-primary-dark); font-weight: 600; } .siret-field__state.is-warn { color: #b45309; font-weight: 600; }
.siret-results { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-md); margin-top: 6px; overflow: hidden; }
.siret-results__item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--color-border); background: #fff; cursor: pointer; font: inherit; } .siret-results__item:hover { background: var(--color-primary-xxlight); } .siret-results__item span { font-size: 12px; color: var(--color-text-light); }
.form-group__input.is-prefilled { border-color: var(--color-primary-light); background: #fbfdfb; }
.form-group__file { height: auto; padding: 10px 14px; background: #fff; }

/* --- Questionnaire de paramétrage (assistant) --- */
.hero-demo--compact { padding-bottom: 28px; }
.q-section { padding-top: 24px; }
.q-wizard { max-width: 880px; margin: 0 auto; }
.q-progress { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 24px; }
.q-progress__item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px; border: 0; background: transparent; font: inherit; font-size: 11px; font-weight: 600; color: var(--color-text-light); cursor: pointer; border-radius: var(--radius-md); }
.q-progress__item i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--color-border); display: flex; align-items: center; justify-content: center; font-size: 12px; background: #fff; }
.q-progress__item.is-done { color: var(--color-primary-dark); } .q-progress__item.is-done i { border-color: var(--color-primary); background: var(--color-primary-xxlight); }
.q-progress__item.is-active { color: var(--color-primary-dark); } .q-progress__item.is-active i { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.q-progress__item:disabled { cursor: default; opacity: .7; }
.q-progress__item:not(:disabled):hover { background: var(--color-primary-xxlight); }
.q-progress__item span { display: none; }
.q-step__title { font-size: 24px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 18px; }
.q-card { margin-bottom: 20px; } .q-card .form-card__title { font-size: 18px; } .q-card .form-card__subtitle { line-height: 1.55; }
.req { color: var(--color-error); font-weight: 700; }
.form-group__textarea { height: auto; padding: 10px 14px; line-height: 1.5; resize: vertical; }
.q-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 12px; }
.q-item { border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px 18px 6px; background: #fcfcfb; }
.q-item.is-off { opacity: .6; }
.q-item__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 15px; }
.q-item__foot { display: flex; justify-content: flex-end; margin: -4px 0 10px; }
.q-item--inline { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; align-items: end; padding-bottom: 2px; }
.q-item--inline .form-group { margin-bottom: 14px; } .q-item--inline .q-remove { margin-bottom: 14px; }
.q-remove { border: 1px solid var(--color-border); background: #fff; color: var(--color-text-muted); font: inherit; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.q-remove:hover { border-color: var(--color-error); color: var(--color-error); }
.q-add { border: 1.5px dashed var(--color-primary-light); background: var(--color-primary-xxlight); color: var(--color-primary-dark); font: inherit; font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: var(--radius-md); cursor: pointer; width: 100%; }
.q-add:hover { background: #e4f0e7; }
.q-add + .q-add { margin-top: 10px; }
.q-sep { height: 1px; background: var(--color-border); margin: 18px 0; }
.q-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; margin: 8px 0 12px; cursor: pointer; }
.q-check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--color-primary); flex-shrink: 0; }
.q-check small { display: block; font-size: 12px; color: var(--color-text-light); margin-top: 2px; }
.q-check--sm { font-size: 13px; margin: 4px 0; }
.q-checks { display: grid; grid-template-columns: 1fr; gap: 2px 16px; } .q-checks--row { grid-template-columns: repeat(2, 1fr); }
.q-radios { display: flex; flex-direction: column; gap: 6px; }
.q-radio { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); padding: 10px 12px; font-size: 14px; cursor: pointer; background: #fff; line-height: 1.4; }
.q-radio:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-xxlight); }
.q-radio input { accent-color: var(--color-primary); width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; }
.q-days { display: flex; gap: 6px; flex-wrap: wrap; }
.q-day { position: relative; } .q-day input { position: absolute; opacity: 0; inset: 0; }
.q-day span { display: flex; align-items: center; justify-content: center; width: 46px; height: 40px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); font-size: 13px; font-weight: 600; background: #fff; cursor: pointer; color: var(--color-text-muted); }
.q-day input:checked + span { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.q-day input:focus-visible + span { outline: 3px solid rgba(74,140,92,.35); }
.q-details { margin: 4px 0 14px; font-size: 13px; } .q-details summary { cursor: pointer; font-weight: 600; color: var(--color-primary-dark); padding: 6px 0; } .q-details .q-checks { margin-top: 6px; }
.q-soin__row { display: grid; grid-template-columns: 1fr; gap: 0 12px; } .q-soin__row .form-group { margin-bottom: 12px; }
.q-static { height: 44px; display: flex; align-items: center; color: var(--color-text-light); font-size: 14px; }
.q-indent { margin-left: 28px; padding-left: 14px; border-left: 2px solid var(--color-primary-light); }
.q-warn { background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; padding: 12px 14px; border-radius: var(--radius-md); font-size: 13px; line-height: 1.5; margin-top: 12px; }
.q-errors { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 14px 16px; border-radius: var(--radius-md); font-size: 14px; margin-bottom: 18px; } .q-errors ul { margin: 6px 0 0 18px; padding: 0; } .q-errors li { margin: 2px 0; }
.q-nav .is-invisible { visibility: hidden !important; pointer-events: none; }
.q-hours-hint { margin: -6px 0 16px; }
.q-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.q-save { font-size: 12px; color: var(--color-text-light); flex: 1; text-align: center; min-width: 140px; } .q-save.is-ok { color: var(--color-primary-dark); } .q-save.is-err { color: #b45309; }
.q-recap div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 8px 0; border-bottom: 1px dashed var(--color-border); } .q-recap dt { color: var(--color-text-muted); flex-shrink: 0; } .q-recap dd { font-weight: 600; text-align: right; }
.q-submit { margin-top: 18px; } .q-submit .contact-submit { width: 100%; }
@media (min-width: 640px) {
  .q-progress__item span { display: block; }
  .q-checks { grid-template-columns: repeat(2, 1fr); } .q-checks--row { grid-template-columns: repeat(4, 1fr); }
  .q-item--2 { grid-template-columns: 1fr 1fr auto; } .q-item--3 { grid-template-columns: 1.3fr 1fr 1fr auto; } .q-item--4 { grid-template-columns: auto 1.3fr 1fr .8fr auto; }
  .q-soin__row { grid-template-columns: 1.6fr 1fr .8fr .8fr; } .q-soin__row--2 { grid-template-columns: 1fr 1fr; }
  .q-radios { flex-direction: row; flex-wrap: wrap; } .q-radio { flex: 1 1 200px; }
}
.souscrire-submit-bas { margin-top: 22px; } .souscrire-submit-bas .contact-submit { margin-top: 0; }

/* --- Module Pro (page tarifs) --- */
.module-pro { margin-top: 44px; background: linear-gradient(135deg, #f1f7f3 0%, #ffffff 60%); border: 1.5px solid var(--color-primary-light); border-radius: var(--radius-xl); padding: 32px 24px; box-shadow: var(--shadow-md); }
.module-pro__head h3 { font-size: 26px; font-weight: 800; letter-spacing: -.01em; margin: 6px 0 10px; }
.module-pro__head p { color: var(--color-text-muted); font-size: 15px; line-height: 1.6; max-width: 720px; }
.module-pro__list { list-style: none; padding: 0; margin: 24px 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
.module-pro__list li { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.module-pro__list li::before { content: '✓'; color: var(--color-primary); font-weight: 800; }
.module-pro__list strong { font-size: 15px; } .module-pro__list span { font-size: 13px; color: var(--color-text-muted); line-height: 1.5; }
.module-pro__prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.module-pro__prices div { text-align: center; background: var(--color-primary-xxlight); border-radius: var(--radius-md); padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; }
.module-pro__prices span { font-size: 12px; color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.module-pro__prices strong { font-size: 17px; color: var(--color-primary-dark); }
.option-opt--pro { border-color: var(--color-primary-light); background: linear-gradient(135deg, #f1f7f3 0%, #ffffff 70%); }
.option-opt--pro:has(> input:checked) { border-color: var(--color-primary); }
@media (min-width: 768px) { .module-pro { padding: 40px; } .module-pro__list { grid-template-columns: repeat(2, 1fr); } .module-pro__list li:last-child { grid-column: span 2; } }
@media (min-width: 1024px) { .module-pro__list { grid-template-columns: repeat(5, 1fr); } .module-pro__list li:last-child { grid-column: auto; } }
.pro-badge { display: inline-block; vertical-align: middle; background: var(--color-primary-dark); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; margin-left: 6px; line-height: 1.3; }

/* --- Interrupteur mensuel / annuel (tarifs) --- */
.periode-switch { display: inline-flex; margin: 0 auto 8px; padding: 4px; background: #fff; border: 1.5px solid var(--color-border); border-radius: 999px; box-shadow: var(--shadow-sm); position: relative; left: 50%; transform: translateX(-50%); }
.periode-switch__btn { border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--color-text-muted); padding: 9px 18px; border-radius: 999px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: background var(--transition-fast), color var(--transition-fast); }
.periode-switch__btn.is-active { background: var(--color-primary); color: #fff; }
.periode-switch__bonus { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: #fff7ed; color: #b45309; padding: 3px 8px; border-radius: 999px; }
.periode-switch__btn.is-active .periode-switch__bonus { background: #fff; color: var(--color-primary-dark); }
.periode-switch__hint { text-align: center; font-size: 12px; color: var(--color-text-light); margin-bottom: 28px; min-height: 16px; }
.module-pro { margin-top: 28px; }
@media (min-width: 1024px) { .module-pro__list { grid-template-columns: repeat(4, 1fr); } }
.pricing-card__price .js-prix, .module-pro__prices .js-prix { font-size: inherit; font-weight: inherit; color: inherit; }
/* Bloc Module Pro dans les cartes tarifs */
.pricing-card__pro { margin-top: 14px; padding: 14px; border: 1.5px dashed var(--color-primary-light); border-radius: var(--radius-md); background: linear-gradient(135deg, #f1f7f3 0%, #ffffff 80%); }
.pricing-card__pro--inclus { border-style: solid; }
.pricing-card__pro-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.pricing-card__pro-head span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-dark); }
.pricing-card__pro-head strong { font-size: 15px; color: var(--color-primary-dark); white-space: nowrap; }
.pricing-card__pro-list { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 4px; }
.pricing-card__pro-list li { font-size: 12px; color: var(--color-text-muted); line-height: 1.4; padding-left: 16px; position: relative; }
.pricing-card__pro-list li::before { content: '✓'; position: absolute; left: 0; color: var(--color-primary); font-weight: 700; }
.pricing-card__pro .btn { font-size: 13px; }
.tarifs-pricing .pricing-card__features { flex: 0 0 auto; }

/* =============================================================================
   MODULE PRO — habillage premium (or / encre), distinct du vert de la marque
   ============================================================================= */
:root { --pro-gold: #b8892b; --pro-gold-light: #e7c46a; --pro-gold-pale: #fbf5e6; --pro-ink: #1f1b14; --pro-ink-2: #2e271b; }
.pro-medal { display: inline-block; vertical-align: -4px; margin-right: 6px; flex-shrink: 0; }

/* Encadré dans les cartes tarifs */
.pricing-card__pro { border: 1.5px solid #e4cf98; background: linear-gradient(135deg, var(--pro-gold-pale) 0%, #fffdf7 85%); box-shadow: 0 6px 18px rgba(184,137,43,.10); }
.pricing-card__pro--inclus { border-color: var(--pro-gold); }
.pricing-card__pro-head span { color: #8a6416; display: inline-flex; align-items: center; }
.pricing-card__pro-head strong { color: var(--pro-ink); }
.pricing-card__pro-list li::before { color: var(--pro-gold); }
.pricing-card__pro .btn--primary { background: linear-gradient(135deg, #2e271b 0%, #1f1b14 100%); border-color: #1f1b14; color: #f6e2a8; box-shadow: 0 4px 14px rgba(31,27,20,.25); }
.pricing-card__pro .btn--primary:hover { background: linear-gradient(135deg, #3a3122 0%, #29231a 100%); color: #ffeeb8; }

/* Grand bloc explicatif */
.module-pro { background: radial-gradient(120% 140% at 100% 0%, #3a2f1c 0%, var(--pro-ink-2) 35%, var(--pro-ink) 100%); border: 1px solid #5a4824; box-shadow: 0 18px 40px rgba(31,27,20,.22); color: #efe6d2; position: relative; overflow: hidden; }
.module-pro::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--pro-gold-light), var(--pro-gold), var(--pro-gold-light), transparent); }
.module-pro__label { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pro-gold-light); border: 1px solid rgba(231,196,106,.45); background: rgba(231,196,106,.08); padding: 6px 12px; border-radius: 999px; }
.module-pro__head h3 { color: #fff8e6; }
.module-pro__head p { color: #cfc4ad; }
.module-pro__list li { background: rgba(255,255,255,.04); border: 1px solid rgba(231,196,106,.22); }
.module-pro__list li::before { color: var(--pro-gold-light); }
.module-pro__list strong { color: #fff3d6; }
.module-pro__list span { color: #bfb39a; }
.module-pro__list { margin-bottom: 0; }

/* Cohérence : badge et case Module Pro ailleurs sur le site */
.pro-badge { background: linear-gradient(135deg, #e7c46a, #b8892b); color: #1f1b14; }
.option-opt--pro { border-color: #e4cf98; background: linear-gradient(135deg, var(--pro-gold-pale) 0%, #fffdf7 80%); }
.option-opt--pro:has(> input:checked) { border-color: var(--pro-gold); background: linear-gradient(135deg, #f7ebc9 0%, var(--pro-gold-pale) 80%); }
.option-opt--pro > input { accent-color: var(--pro-gold); }
.option-opt--pro .option-opt__price { color: #8a6416; }
@media (min-width: 1024px) { .module-pro__list { grid-template-columns: repeat(5, 1fr); } }
.pricing-card__pro-head strong .js-prix { font-size: inherit; font-weight: inherit; letter-spacing: 0; text-transform: none; color: inherit; display: inline; }
.pricing-card__pro-head > span { white-space: nowrap; } .pricing-card__pro-head strong { font-size: 14px; }

/* --- Bandeau de rappel sous le menu --- */
.rappel-bar { background: var(--color-primary-xxlight); border-bottom: 1px solid var(--color-border); }
.rappel-bar__link { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 1200px; margin: 0 auto; padding: 9px 20px; font-size: 13px; color: var(--color-primary-dark); text-decoration: none; text-align: center; }
.rappel-bar__link strong { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(45,94,58,.35); }
.rappel-bar__link:hover strong { text-decoration-color: currentColor; }
.rappel-bar__link svg { flex-shrink: 0; }
.rappel-bar__arrow { transition: transform var(--transition-base); }
.rappel-bar__link:hover .rappel-bar__arrow { transform: translateX(3px); }
@media (max-width: 640px) { .rappel-bar__link { font-size: 12px; padding: 8px 14px; } .rappel-bar__link span:not(.rappel-bar__arrow) { text-align: left; } }
.hero-mention a, .landing-hero .hero-mention a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.souscrire-rappel { text-align: center; margin-top: 22px; font-size: 14px; color: var(--color-text-muted); }
.souscrire-rappel a { color: var(--color-primary-dark); font-weight: 600; }

/* Module Pro — version claire (retour Maxime : fond noir de trop) */
.module-pro { background: linear-gradient(135deg, #fdf7e8 0%, #fffdf8 60%, #fbf3dd 100%); border: 1.5px solid #e4cf98; box-shadow: 0 12px 32px rgba(184,137,43,.12); color: var(--color-text); }
.module-pro__label { color: #8a6416; border-color: #e4cf98; background: #fff; }
.module-pro__head h3 { color: var(--pro-ink); }
.module-pro__head p { color: var(--color-text-muted); }
.module-pro__list li { background: #fff; border: 1px solid #efe1bb; }
.module-pro__list li::before { color: var(--pro-gold); }
.module-pro__list strong { color: var(--pro-ink); }
.module-pro__list span { color: var(--color-text-muted); }
.pricing-card__pro .btn--primary { background: linear-gradient(135deg, #e9c46a 0%, #c99a35 55%, #b8892b 100%); border-color: #b8892b; color: #2a2112; box-shadow: 0 4px 14px rgba(184,137,43,.28); }
.pricing-card__pro .btn--primary:hover { background: linear-gradient(135deg, #f0cf7a 0%, #d2a440 55%, #c0912f 100%); color: #1f1b14; }
/* Questionnaire — logo */
.q-logo { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.q-logo__preview { width: 140px; height: 90px; border: 1.5px dashed var(--color-border); border-radius: var(--radius-md); background: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--color-text-light); overflow: hidden; flex-shrink: 0; }
.q-logo__preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.q-logo__ok { color: var(--color-primary-dark); font-weight: 600; }
.q-logo__actions { flex: 1; min-width: 200px; }
.q-logo__btn { cursor: pointer; }
.q-logo__done { color: var(--color-primary-dark); font-weight: 600; }
.q-logo__err { color: var(--color-error); font-weight: 600; }
.form-card__title .opt-tag { font-size: 12px; font-weight: 400; color: var(--color-text-light); margin-left: 6px; }
.q-submit .contact-submit { display: flex; align-items: center; justify-content: center; color: #fff; }
.q-check input[type=checkbox] { appearance: auto; -webkit-appearance: auto; }
/* Page merci (souscription) */
.merci-etapes { max-width: 1040px; margin: 0 auto; padding: 40px 20px 8px; }
.merci-etapes__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 16px; counter-reset: none; }
.merci-etapes__list li { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 22px 20px; box-shadow: var(--shadow-sm); position: relative; }
.merci-etapes__num { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: 700; align-items: center; justify-content: center; margin-bottom: 12px; }
.merci-etapes__list h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.merci-etapes__list p { font-size: 14px; color: var(--color-text-muted); line-height: 1.55; }
@media (min-width: 640px) { .merci-etapes__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .merci-etapes__list { grid-template-columns: repeat(4, 1fr); } }
.merci-etapes { padding-bottom: 36px; }

/* =============================================================================
   LISIBILITÉ (14/10) — site plus large, textes plus grands, meilleur contraste
   ============================================================================= */
/* 1. Mise à l'échelle sur grand écran : tout le site (polices, espacements) grossit d'un cran.
      Sans effet sur tablette et téléphone. */
@media (min-width: 1180px) { html { zoom: 1.06; } }
@media (min-width: 1440px) { html { zoom: 1.12; } }
@media (min-width: 1800px) { html { zoom: 1.18; } }

/* 2. Conteneurs un peu plus larges */
.container, .section-inner, .hero-inner, .rappel-bar__link { max-width: 1280px; }
.tarifs-pricing { max-width: 1120px; }
.module-pro { max-width: 1280px; margin-left: auto; margin-right: auto; }
.q-wizard { max-width: 960px; }

/* 3. Petits textes : plancher à 13px pour les mentions, 15px pour les descriptions */
.pricing-card__feature, .tarifs-pricing .pricing-card__feature { font-size: 14px; }
.pricing-card__pro-list li { font-size: 13px; }
.pricing-card__price-note, .pricing-card__tagline, .pricing-card__tva { font-size: 13px; }
.form-hint, .hero-mention, .cta-info { font-size: 13px; }
.module-pro__list span, .option-card__desc, .feat-module__list li { font-size: 14px; }
.comp-table td, .comp-table th { font-size: 14px; }

/* 4. Texte clair sur fond vert : contraste renforcé */
.site-footer__col-list a { color: rgba(255,255,255,0.86); }
.site-footer__tagline, .logo-lockup--on-dark .logo-lockup__tagline { color: rgba(255,255,255,0.8); font-size: 14px; }
.site-footer__bottom { color: rgba(255,255,255,0.7); font-size: 13px; }
.hero--landing .hero__trust { color: rgba(255,255,255,0.92); }
.hero--landing .hero__subtitle, .cta-banner p, .landing-cta-banner p { color: rgba(255,255,255,0.92); }
.apropos-quote__author { color: rgba(255,255,255,0.9); }

/* Bandeau de rappel : collé sous le menu au défilement, bien démarqué du fond */
.rappel-bar { position: sticky; top: 64px; z-index: 99; background: #fff; border-bottom: 2px solid var(--color-primary); box-shadow: 0 4px 12px rgba(45,94,58,.10); }
.rappel-bar__link { padding: 8px 20px; color: var(--color-text); font-size: 14px; }
.rappel-bar__link svg { color: var(--color-primary); }
.rappel-bar__link strong { display: inline-block; text-decoration: none; color: #fff; background: var(--color-primary); padding: 4px 12px; border-radius: 999px; margin: 0 2px; transition: background var(--transition-base); }
.rappel-bar__link:hover strong { background: var(--color-primary-dark); }
.rappel-bar__arrow { color: var(--color-primary); font-weight: 700; }
.site-header { box-shadow: none; }
@media (max-width: 640px) { .rappel-bar__link { font-size: 12px; padding: 6px 12px; } .rappel-bar__link strong { padding: 3px 9px; } }
@media (max-width: 640px) { .rappel-bar__plus { display: none; } } .site-header__mobile-menu { z-index: 101; }
#page-wrapper { max-width: 1600px; } .site-header__mobile-menu { width: 100%; }
#page-wrapper { max-width: none; }
/* Mise à l'échelle adoucie (retour Maxime : police trop grosse) */
@media (min-width: 1180px) { html { zoom: 1; } }
@media (min-width: 1440px) { html { zoom: 1.04; } }
@media (min-width: 1800px) { html { zoom: 1.08; } }

/* ── Accueil : encart Module Pro dans les cartes de prix + récapitulatif ── */
.p-pro { border: 1.5px solid #e4cf98; background: linear-gradient(135deg, var(--pro-gold-pale) 0%, #fffdf7 85%); border-radius: 10px; padding: 12px 14px; margin: 0 0 18px; }
.p-pro--inclus { border-color: var(--pro-gold); }
.p-pro__head { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--pro-ink); }
.p-pro__head .pro-medal { flex-shrink: 0; }
.p-pro__head strong { margin-left: auto; color: var(--pro-gold); white-space: nowrap; }
.p-pro__txt { margin: 0; font-size: 12.5px; line-height: 1.45; color: #5b4f38; }
.p-pro-recap { max-width: 980px; margin: 26px auto 0; padding: 16px 20px; border: 1.5px solid #e4cf98; border-radius: 12px; background: linear-gradient(135deg, var(--pro-gold-pale) 0%, #fffdf7 85%); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.p-pro-recap__label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pro-gold); white-space: nowrap; }
.p-pro-recap__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.p-pro-recap__list li { font-size: 13px; color: var(--pro-ink); background: #fff; border: 1px solid #ecdcb0; border-radius: 999px; padding: 4px 11px; }
@media (max-width: 640px) { .p-pro-recap { padding: 14px; } .p-pro-recap__list li { font-size: 12.5px; } }