/* ============================================
   M2R — Components
   Cards, Buttons, Trust, Stats, Forms, etc.
   ============================================ */

/* ── Buttons ──────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-base);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  line-height: 1;
}

.btn-primary,
a.btn-primary {
  padding: 14px 32px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: var(--text-base);
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
  border: none;
  cursor: pointer;
}

.btn-primary:hover,
a.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
  color: #fff;
}

.btn-secondary,
a.btn-secondary {
  padding: 14px 32px;
  background: transparent;
  color: #fff;
  font-weight: 500;
  font-size: var(--text-base);
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
  cursor: pointer;
}

.btn-secondary:hover,
a.btn-secondary:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}

.btn-outline {
  padding: 12px 28px;
  background: transparent;
  color: var(--secondary);
  border: 1.5px solid var(--secondary);
  border-radius: var(--radius-full);
}

.btn-outline:hover {
  background: var(--secondary);
  color: #fff;
}

/* ── Cards ────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    var(--glow-size) circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    var(--glow-color),
    transparent 40%
  );
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
  pointer-events: none;
  z-index: 0;
}

.card:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.card:hover::before {
  opacity: 1;
}

.card > * {
  position: relative;
  z-index: 1;
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--secondary-light);
  border-radius: var(--radius-md);
  color: var(--secondary);
  margin-bottom: var(--space-5);
  transition: var(--transition);
}

.card:hover .card-icon {
  background: var(--secondary);
  color: #fff;
  transform: scale(1.05);
}

.card h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
}

.card p {
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--secondary);
  transition: var(--transition);
}

.card-link::after {
  content: '→';
  transition: transform var(--duration) var(--ease-out);
}

.card-link:hover {
  color: var(--secondary-dark);
  gap: 10px;
}

.card-link:hover::after {
  transform: translateX(4px);
}

/* ── Service Cards (home grid) ────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
}

.service-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    var(--glow-size) circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    var(--glow-color), transparent 40%
  );
  opacity: 0;
  transition: opacity var(--duration-slow);
  pointer-events: none;
}

.service-card:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.service-card:hover::before {
  opacity: 1;
}

.service-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--secondary-light);
  color: var(--secondary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  transition: var(--transition);
  position: relative;
  z-index: 1;
}

.service-card:hover .service-card-icon {
  background: var(--secondary);
  color: #fff;
}

.service-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
  position: relative;
  z-index: 1;
}

.service-card p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-bottom: var(--space-3);
  position: relative;
  z-index: 1;
}

.service-card .card-link {
  position: relative;
  z-index: 1;
}

/* ── Trust Bar ────────────────────────────── */
.trust-bar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-light);
  padding: var(--space-5) 0;
  position: relative;
  z-index: 10;
}

.trust-items {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.trust-item svg {
  width: 20px;
  height: 20px;
  color: var(--secondary);
  flex-shrink: 0;
}

/* ── Stats / Chiffres Clés ────────────────── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  padding: var(--space-12) 0;
}

.stat-item {
  text-align: center;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}

.stat-item:hover {
  background: var(--bg-alt);
}

.stat-number {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--secondary);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: var(--space-2);
}

.stat-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

/* ── Badges ───────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  transition: var(--transition);
}

.badge:hover {
  border-color: var(--secondary);
  color: var(--secondary);
  background: var(--secondary-ultra);
}

.badge-accent {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.zone-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* ── Process Steps ────────────────────────── */
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
  counter-reset: process-step;
}

.process-step {
  text-align: center;
  padding: var(--space-6);
  position: relative;
  counter-increment: process-step;
}

.process-step::before {
  content: counter(process-step, decimal-leading-zero);
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--secondary);
  opacity: 0.15;
  margin-bottom: var(--space-2);
  line-height: 1;
}

.process-step h4 {
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
}

.process-step p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ── FAQ ──────────────────────────────────── */
.faq-list {
  max-width: var(--max-width-narrow);
  margin: 0 auto;
}

.faq-item {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  overflow: hidden;
  transition: var(--transition);
}

.faq-item:hover {
  border-color: var(--border);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
  transition: var(--transition);
}

.faq-question:hover {
  color: var(--secondary);
}

.faq-question svg {
  flex-shrink: 0;
  transition: transform var(--duration) var(--ease-out);
}

.faq-item.open .faq-question svg {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 var(--space-6) var(--space-5);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.7;
  display: none;
}

.faq-item.open .faq-answer {
  display: block;
}

/* ── Testimonials ─────────────────────────── */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-6);
}

.testimonial-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  position: relative;
}

.testimonial-card::before {
  content: '"';
  font-family: var(--font-heading);
  font-size: 4rem;
  color: var(--secondary);
  opacity: 0.15;
  position: absolute;
  top: 12px;
  left: 24px;
  line-height: 1;
}

.testimonial-text {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: var(--space-5);
  position: relative;
  z-index: 1;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.testimonial-author-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--secondary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--secondary);
  font-size: var(--text-sm);
}

.testimonial-author-info strong {
  display: block;
  font-size: var(--text-sm);
  color: var(--text);
}

.testimonial-author-info span {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ── Feature List ─────────────────────────── */
.feature-list {
  list-style: none;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.feature-list li svg,
.feature-list li::before {
  flex-shrink: 0;
  color: var(--success);
}

.feature-check::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Partners row (text-based) ────────────── */
.partners-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-8);
  font-weight: 600;
  color: var(--text);
  font-size: var(--text-lg);
}

/* ── Devis form ──────────────────────────── */
.devis-section {
  padding: var(--section-py) 0;
  background: linear-gradient(135deg, var(--bg-dark) 0%, var(--primary-light) 100%);
  color: #fff;
}

.devis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 768px) {
  .devis-grid { grid-template-columns: 1fr; }
}

.devis-info h2 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 800;
  margin-bottom: var(--space-4);
  line-height: 1.2;
}

.devis-info p {
  font-size: var(--text-base);
  line-height: 1.7;
  opacity: 0.85;
  margin-bottom: var(--space-6);
}

.contact-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-3);
  font-size: var(--text-base);
}

.contact-line svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--secondary);
}

.devis-form {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  backdrop-filter: blur(10px);
}

.form-group {
  margin-bottom: var(--space-5);
}

.form-group label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  margin-bottom: var(--space-2);
}

.form-input,
.form-select,
.form-textarea,
.devis-form .form-group input,
.devis-form .form-group select,
.devis-form .form-group textarea {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: var(--transition);
}

.form-input::placeholder,
.form-textarea::placeholder,
.devis-form .form-group input::placeholder,
.devis-form .form-group textarea::placeholder {
  color: rgba(255,255,255,0.35);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.devis-form .form-group input:focus,
.devis-form .form-group select:focus,
.devis-form .form-group textarea:focus {
  outline: none;
  border-color: var(--secondary);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 3px rgba(0,145,213,0.15);
}

.form-select,
.devis-form .form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.form-select option,
.devis-form .form-group select option {
  background: var(--bg-dark);
  color: #fff;
}

.form-textarea,
.devis-form .form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.devis-form h3 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--space-6);
  color: #fff;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 32px;
  background: var(--accent);
  color: #fff;
  font-size: var(--text-lg);
  font-weight: 700;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: 0.02em;
}

.btn-submit:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
}

/* ── Text utilities ──────────────────────── */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-muted { color: var(--text-muted); }
.text-secondary-color { color: var(--secondary); }
.text-accent { color: var(--accent); }
.font-heading { font-family: var(--font-heading); }
.fw-800 { font-weight: 800; }

/* ── Shop / Bonnes Affaires ────────────────── */
.shop-filters {
  background: var(--bg);
  border-bottom: 1px solid var(--border-light);
  padding: var(--space-8) 0;
}

.filter-btn {
  padding: 10px 26px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: var(--transition);
}

.filter-btn:hover {
  border-color: var(--secondary);
  color: var(--secondary);
  background: var(--secondary-ultra);
}

.filter-btn.active {
  background: var(--secondary);
  border-color: var(--secondary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.shop-results-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-8) 0 var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: var(--space-10);
}

.shop-results-bar #resultsCount {
  font-weight: 700;
  color: var(--text);
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-8);
}

.product-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}

.product-card:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.product-card-img {
  position: relative;
  height: 220px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-card-img img {
  max-width: 86%;
  max-height: 82%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform var(--duration-slow) var(--ease-out);
}

.product-card:hover .product-card-img img {
  transform: scale(1.06);
}

.product-badge {
  position: absolute;
  top: 14px;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  z-index: 2;
  color: #fff;
}

.badge-promo {
  left: 14px;
  background: var(--accent);
}

.badge-new {
  left: 14px;
  background: var(--highlight);
  color: var(--text);
}

.badge-etat {
  right: 14px;
  background: rgba(15, 27, 45, 0.85);
  backdrop-filter: blur(4px);
}

.product-card-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-card-category {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--secondary);
  margin-bottom: var(--space-2);
}

.product-card-body h3 {
  font-size: var(--text-lg);
  line-height: 1.3;
  margin-bottom: var(--space-3);
}

.product-card-body h3 a {
  color: var(--text);
}

.product-card-body h3 a:hover {
  color: var(--secondary);
}

.product-card-specs {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-5);
  flex: 1;
}

.product-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-light);
}

.product-price {
  display: flex;
  flex-direction: column;
}

.price-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.price-amount {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--text);
}

.price-unit {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
}

.btn-voir {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  background: var(--secondary);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: var(--transition);
}

.btn-voir:hover {
  background: var(--secondary-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

.shop-cta-banner {
  background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
  color: #fff;
  padding: var(--space-16) 0;
  text-align: center;
}

.shop-cta-banner h2 {
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: var(--space-3);
}

.shop-cta-banner p {
  opacity: 0.9;
  max-width: 560px;
  margin: 0 auto var(--space-6);
  font-size: var(--text-base);
}

.shop-cta-banner .btn-primary {
  background: #fff;
  color: var(--secondary-dark);
}

.shop-cta-banner .btn-primary:hover {
  background: var(--secondary-ultra);
  color: var(--secondary-dark);
}

@media (max-width: 768px) {
  .shop-results-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .product-card-footer {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .btn-voir {
    justify-content: center;
  }
}

/* ── Fin module Shop ──────────────────────── */

/* ── Card Grid (grille de cartes génériques) ─ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}

/* ── Features Grid ─────────────────────────── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: var(--transition);
}

.feature-card:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.feature-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
  color: var(--text);
}

.feature-card p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ── CTA Section (bas de page) ─────────────── */
.cta-section {
  padding: var(--space-16) 0;
  background: linear-gradient(135deg, var(--bg-dark) 0%, var(--primary-light) 100%);
  color: #fff;
  text-align: center;
}

.cta-section h2 {
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: var(--space-3);
}

.cta-section p {
  color: rgba(255,255,255,0.85);
  max-width: 560px;
  margin: 0 auto var(--space-6);
  font-size: var(--text-base);
}

/* ── Specs / Comparaison Table (module leasing) ─ */
.leasing-specs-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.leasing-specs-table thead th {
  background: var(--secondary);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: left;
  padding: var(--space-4) var(--space-5);
}

.leasing-specs-table tbody tr {
  border-bottom: 1px solid var(--border-light);
}

.leasing-specs-table tbody tr:last-child {
  border-bottom: none;
}

.leasing-specs-table tbody tr:nth-child(even) {
  background: var(--bg-alt);
}

.leasing-specs-table td {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.leasing-specs-table td:first-child {
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 768px) {
  .leasing-specs-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ── Bouton devis flottant (toutes pages) ──── */
.devis-float {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: var(--z-overlay);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--accent);
  color: #fff !important;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-accent);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  transition: var(--transition);
}

.devis-float svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.devis-float:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  color: #fff !important;
}

.devis-float-label {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .devis-float {
    padding: 14px;
  }
  .devis-float-label {
    display: none;
  }
}

/* ==========================================================================
   COMPOSANTS RESTAURÉS / MANQUANTS — 2026-08-17
   Ces classes étaient utilisées dans le HTML sans aucune définition CSS
   (33 pages pour .parallax-band, 23 pour .cross-links, 20 pour .specs-table…).
   Bloc unique, réutilisable sur toutes les pages.
   ========================================================================== */

/* ── Fond de section alterné (alias historique) ─────────────────────────── */
.alt-bg { background: var(--bg-alt); }

/* ── Confort de lecture : paragraphes et titres dans le flux ────────────── */
section > .container > p,
section.container > p,
section > .container > h3,
section.container > h3 { max-width: 78ch; }

section > .container > p,
section.container > p { margin-bottom: var(--space-5); color: var(--text-secondary); }

section > .container > h3,
section.container > h3 { margin-top: var(--space-10); margin-bottom: var(--space-4); }

section > .container > h3:first-of-type,
section.container > h3:first-of-type { margin-top: 0; }

/* ── Tableau de specs / comparatif ──────────────────────────────────────── */
.specs-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin: var(--space-8) 0;
  font-size: var(--text-sm);
}
.specs-table thead th {
  background: var(--primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  text-align: left;
  padding: var(--space-4) var(--space-5);
  letter-spacing: -0.01em;
}
.specs-table tbody tr { border-bottom: 1px solid var(--border-light); }
.specs-table tbody tr:last-child { border-bottom: none; }
.specs-table tbody tr:nth-child(even) { background: var(--bg-alt); }
.specs-table td, .specs-table th { padding: var(--space-4) var(--space-5); vertical-align: top; }
.specs-table td { color: var(--text-secondary); }
.specs-table td:first-child { color: var(--text); font-weight: 600; }
.specs-table caption {
  caption-side: bottom;
  padding-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: left;
}
@media (max-width: 860px) {
  .specs-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ── Bande image parallax (image fixe + voile + texte blanc) ────────────── */
.parallax-band {
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: clamp(72px, 9vw, 132px) 0;
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.parallax-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(15,27,45,0.90) 0%, rgba(15,27,45,0.72) 55%, rgba(0,145,213,0.55) 100%);
}
.parallax-band > * { position: relative; z-index: 1; }
.parallax-band h2 {
  color: #fff;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  margin-bottom: var(--space-4);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.parallax-band p {
  color: rgba(255,255,255,0.88);
  font-size: var(--text-lg);
  max-width: 720px;
  margin: 0 auto var(--space-8);
}
.parallax-band .btn-secondary { border-color: rgba(255,255,255,0.7); color: #fff; }
.parallax-band .btn-secondary:hover { background: #fff; color: var(--primary); }
@media (hover: none), (max-width: 900px) {
  .parallax-band { background-attachment: scroll; }
}

/* ── Bande de chiffres clés (navy) ──────────────────────────────────────── */
.stats-band {
  position: relative;
  background: var(--bg-dark);
  color: #fff;
  padding: clamp(48px, 6vw, 80px) 0;
  overflow: hidden;
}
.stats-band::before,
.stats-band::after {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  pointer-events: none;
}
.stats-band::before { background: rgba(0,145,213,0.45); top: -180px; left: -120px; }
.stats-band::after  { background: rgba(230,0,126,0.30); bottom: -200px; right: -100px; }
.stats-band .container { position: relative; z-index: 1; }
.stats-grid,
.stats-band .stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-6);
  text-align: center;
}
.stat-block { padding: var(--space-4) var(--space-2); }
.stats-grid .stat-block + .stat-block,
.stats-band .stat-item + .stat-item { border-left: 1px solid rgba(255,255,255,0.10); }
.stat-block strong,
.stat-block .stat-number,
.stats-band .stat-number {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.03em;
}
.stat-block > span,
.stat-block .stat-label,
.stats-band .stat-label {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.72);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.stat-block strong span, .stats-band .stat-number span { display: inline; font-size: inherit; margin: 0; letter-spacing: inherit; text-transform: none; }
.stat-block .accent, .stats-band .accent { color: var(--secondary); }
@media (max-width: 720px) {
  .stats-grid .stat-block + .stat-block,
  .stats-band .stat-item + .stat-item { border-left: none; }
}

/* ── Image de carte (visuel en tête de carte) ───────────────────────────── */
.card-media {
  position: relative;
  margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-6);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--bg-alt);
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}
.card-media.contain { background: #fff; }
.card-media.contain img { object-fit: contain; padding: var(--space-5); background: #fff; }
.card:hover .card-media img,
.service-card:hover .card-media img,
.feature-card:hover .card-media img { transform: scale(1.05); }

/* ── Zoom doux sur image ────────────────────────────────────────────────── */
.img-zoom { overflow: hidden; border-radius: var(--radius-lg); }
.img-zoom img { transition: transform var(--duration-slow) var(--ease-out); }
.img-zoom:hover img { transform: scale(1.06); }

/* ── Bande éditoriale : texte + image ───────────────────────────────────── */
.split-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.split-band.reverse .split-band-media { order: -1; }
.split-band-media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.split-band h2, .split-band h3 { text-align: left; }
.split-band p { color: var(--text-secondary); margin-bottom: var(--space-5); max-width: none; }
@media (max-width: 880px) {
  .split-band { grid-template-columns: 1fr; }
  .split-band.reverse .split-band-media { order: 0; }
}

/* ── Grille de cartes visuelles (produits / univers) ────────────────────── */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
}
.media-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.media-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--secondary); }
.media-card h3 { margin-bottom: var(--space-3); }
.media-card p { color: var(--text-secondary); font-size: var(--text-sm); margin-bottom: var(--space-4); }
.media-card .card-link { margin-top: auto; }
.media-card ul { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.media-card ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.media-card ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 14px; height: 8px;
  border-left: 2px solid var(--secondary);
  border-bottom: 2px solid var(--secondary);
  transform: rotate(-45deg);
}

/* ── Étapes numérotées ──────────────────────────────────────────────────── */
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--secondary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
  box-shadow: 0 6px 18px rgba(0,145,213,0.28);
}

/* ── Timeline horizontale ───────────────────────────────────────────────── */
.timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-6);
  position: relative;
}
.timeline-step {
  position: relative;
  padding-top: 64px;
  text-align: center;
}
.timeline-step::before {
  content: '';
  position: absolute;
  top: 21px; left: 0; right: 0;
  height: 2px;
  background: var(--border);
}
.timeline-step:first-child::before { left: 50%; }
.timeline-step:last-child::before { right: 50%; }
.tl-node {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--secondary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  box-shadow: 0 0 0 6px var(--bg);
}
.timeline-step h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.timeline-step p { font-size: var(--text-sm); color: var(--text-secondary); }
@media (max-width: 760px) {
  .timeline-step::before { display: none; }
}

/* ── Cartes tarifaires ──────────────────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
  align-items: stretch;
}
.price-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.price-card.featured {
  border-color: var(--secondary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
}
.price-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.price-main, .price-card .amount {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}
.price-card .unit, .price-card .price-unit { font-size: var(--text-sm); color: var(--text-muted); }
.price-desc, .price-note { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-3); }
.price-includes { list-style: none; padding: 0; margin: var(--space-5) 0 var(--space-6); text-align: left; }
.price-includes li {
  position: relative;
  padding-left: 26px;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.price-includes li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 14px; height: 8px;
  border-left: 2px solid var(--secondary);
  border-bottom: 2px solid var(--secondary);
  transform: rotate(-45deg);
}
/* si la puce contient déjà une icône SVG, on masque la coche CSS */
.price-includes li:has(svg)::before,
.media-card ul li:has(svg)::before { content: none; }
.price-includes li svg,
.media-card ul li svg {
  position: absolute;
  left: 0; top: 3px;
  width: 16px; height: 16px;
  color: var(--secondary);
}
.price-card .btn-primary, .price-card .btn-secondary { margin-top: auto; }

/* ── Cross-links (maillage bas de page) ─────────────────────────────────── */
.cross-links .services-grid,
.cross-links .card-grid { margin-top: var(--space-4); }
.cross-links .card,
.cross-links .service-card { height: 100%; }

/* ── Hero content (wrapper de hero) ─────────────────────────────────────── */
.hero-content { position: relative; z-index: 2; max-width: 720px; }

/* ── Fil d'Ariane ───────────────────────────────────────────────────────── */
.breadcrumb {
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding: var(--space-5) 0 0;
}
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--secondary); }

/* .card-media dans une service-card (padding --space-8) */
.service-card .card-media {
  margin: calc(var(--space-8) * -1) calc(var(--space-8) * -1) var(--space-6);
}

/* Boutons secondaires sur fonds sombres (CTA / parallax) */
.cta-section .btn-secondary {
  border-color: rgba(255,255,255,0.7);
  color: #fff;
  margin-left: var(--space-4);
}
.cta-section .btn-secondary:hover { background: #fff; color: var(--primary); border-color: #fff; }
@media (max-width: 560px) {
  .cta-section .btn-secondary { margin-left: 0; margin-top: var(--space-3); }
}

/* Titre de sous-section après une grille de cartes */
.services-grid + h3, .media-grid + h3, .card-grid + h3,
.features-grid + h3, .pricing-grid + h3 { margin-top: var(--space-16); }

/* ==========================================================================
   PAGE PRODUIT DÉTAILLÉE (fiche occasion / démo) — restauré 2026-08-17
   ========================================================================== */
.product-page { padding-top: var(--space-8); }

.product-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 900px) { .product-main { grid-template-columns: 1fr; } }

.product-gallery { position: sticky; top: 100px; }
@media (max-width: 900px) { .product-gallery { position: static; } }

.gallery-main {
  height: 440px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--space-5);
}
.gallery-main img { width: 100%; height: 100%; object-fit: contain; }

.gallery-thumbs {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}
.gallery-thumb {
  width: 78px;
  height: 78px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  padding: 4px;
  cursor: pointer;
  transition: var(--transition-fast);
  flex: 0 0 auto;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumb:hover, .gallery-thumb.active { border-color: var(--secondary); box-shadow: var(--shadow-sm); }

.product-info h1 { font-size: clamp(1.6rem, 3vw, 2.25rem); margin-bottom: var(--space-3); }
.product-info svg { width: 20px; height: 20px; flex-shrink: 0; }

.product-category-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--secondary);
  background: var(--secondary-light);
  padding: 5px 12px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}
.product-ref { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-5); }

.product-etat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-5);
}
.product-etat svg { width: 18px; height: 18px; }
.etat-excellent { background: #e8f8ee; color: #15803d; }
.etat-bon { background: #fff6e5; color: #b45309; }

.product-price-block {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.product-price-block .amount,
.product-price-block .price-main {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}
.product-price-block .unit { font-size: var(--text-sm); color: var(--text-muted); margin-left: 6px; }
.product-price-block .price-note { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-2); }

.product-cta-group { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }
.btn-cta-main, .btn-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--text-sm);
  transition: var(--transition);
}
.btn-cta-main { background: var(--accent); color: #fff; box-shadow: var(--shadow-accent); }
.btn-cta-main:hover { background: var(--accent-hover); color: #fff; transform: translateY(-2px); }
.btn-cta-secondary { border: 1px solid var(--border); color: var(--text); background: #fff; }
.btn-cta-secondary:hover { border-color: var(--secondary); color: var(--secondary); }

.product-trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: var(--bg-alt);
  border-radius: var(--radius);
  padding: 10px 14px;
}
.trust-badge svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--secondary); }
@media (max-width: 520px) { .product-trust { grid-template-columns: 1fr; } }

.product-specs table, .product-specs .specs-table { width: 100%; }
.product-specs h2, .product-description h2 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
.product-description p { color: var(--text-secondary); margin-bottom: var(--space-4); max-width: 78ch; }
.product-description ul { margin: 0 0 var(--space-5) var(--space-5); color: var(--text-secondary); }
.product-description li { margin-bottom: var(--space-2); }

.related-products { padding-top: var(--space-8); }
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-6);
}

.breadcrumb + .product-page { padding-top: var(--space-4); }

/* Espace suffisant entre une grille de cartes et le titre suivant */
section > .container > .services-grid + h3,
section > .container > .media-grid + h3,
section > .container > .card-grid + h3,
section > .container > .features-grid + h3,
section > .container > .pricing-grid + h3,
section.container > .services-grid + h3,
section.container > .media-grid + h3 { margin-top: var(--space-20); }

/* ── Fil d'Ariane (nav.breadcrumb sous le menu) ─────────────────────────── */
nav.breadcrumb {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border-light);
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
nav.breadcrumb .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
nav.breadcrumb a { color: var(--text-secondary); }
nav.breadcrumb a:hover { color: var(--secondary); }
nav.breadcrumb .sep { color: var(--text-muted); opacity: 0.6; }
nav.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 600; }
@media (max-width: 640px) {
  nav.breadcrumb { font-size: var(--text-xs); }
}

/* ==========================================================================
   ACCESSIBILITÉ — CONTRASTES (WCAG AA) — 2026-08-17
   Corrige les textes peu ou pas lisibles relevés par mesure du ratio réel.
   ========================================================================== */

/* Titres et textes du bloc devis : ils étaient en navy SUR navy (ratio 1,14) */
.devis-section h2,
.devis-section h3,
.devis-section h4,
.devis-section .section-title { color: #fff; }
.devis-section p,
.devis-section .section-subtitle { color: rgba(255,255,255,0.85); }
.devis-section label { color: rgba(255,255,255,0.92); }
.devis-section small,
.devis-section .form-note { color: rgba(255,255,255,0.75); }

/* Liens de contenu : le cyan de marque ne passait pas sur fond clair (3,4) */
main a:not([class]),
section a:not([class]):not(.btn):not(.card),
.card p a, .service-card p a, .feature-card p a, .media-card p a,
p a, li a, td a, dd a,
details a, .faq-answer a { color: #006a9e; }
main a:not([class]):hover,
section a:not([class]):hover,
p a:hover, li a:hover, td a:hover,
details a:hover, .faq-answer a:hover { color: #00456b; }

/* Surtitres de section */
.section-eyebrow { color: #006a9e; }

/* En-tête de tableau : blanc sur cyan = 3,49 → fond navy */
th, .specs-table thead th, table thead th { background: var(--primary); color: #fff; }

/* Fil d'Ariane */
nav.breadcrumb { color: var(--text-secondary); }
nav.breadcrumb span:not(.sep) { color: var(--text-secondary); }
nav.breadcrumb .sep { color: #6b7a8d; }

/* Rôle sous le nom dans les avis clients */
.testimonial-author-info span,
.testimonial-author span { color: #5b6a7d; }

/* Footer : mentions et liens trop transparents */
.footer-bottom, .footer-bottom span { color: rgba(255,255,255,0.72); }
.footer-bottom a { color: rgba(255,255,255,0.85); }
.footer-col a, .footer-brand p { color: rgba(255,255,255,0.82); }
.footer-col a:hover { color: #fff; }

/* Lien « Bonnes Affaires » du menu */
.nav-accent { color: #cc006e; }

/* Texte sur photo : voile systématique derrière le contenu du hero */
.hero .lead,
.hero p.lead { color: rgba(255,255,255,0.92); }
.hero h1, .hero h2 { color: #fff; }
.hero .container { position: relative; z-index: 2; }

/* Compléments contraste (mesures du 17/08 après 1re passe) */
.leasing-specs-table thead th,
table thead th { background: var(--primary); color: #fff; }
.devis-form p,
.devis-form small,
.devis-section form p { color: rgba(255,255,255,0.78); }
.navbar .nav-accent,
.navbar a.nav-accent { color: #cc006e; }
.navbar .nav-accent:hover,
.navbar a.nav-accent:hover { color: #b80063; }

/* ── Contraste : couleurs de marque utilisées comme TEXTE ───────────────── */
/* Le cyan, l'or et le vert de marque restent inchangés en aplat ; seuls les
   textes qui les utilisent passent sur une variante assombrie conforme AA.  */
[style*="color:var(--secondary)"],
[style*="color: var(--secondary)"] { color: #0078b3 !important; }
[style*="color:var(--highlight)"],
[style*="color: var(--highlight)"] { color: #a86400 !important; }
[style*="color:var(--accent)"],
[style*="color: var(--accent)"] { color: #cc006e !important; }
.badge-etat, .etat-excellent strong, .specs-table strong[style*="27ae60"] { color: #1e8449; }

/* Boutons secondaires : blancs sur fond sombre, navy sur fond clair */
.btn-secondary { color: var(--primary); border-color: var(--border); }
.btn-secondary:hover { color: var(--primary); border-color: var(--primary); }
.hero .btn-secondary,
.cta-section .btn-secondary,
.parallax-band .btn-secondary,
.stats-band .btn-secondary,
.devis-section .btn-secondary,
[class*="hero"] .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.7); }
.hero .btn-secondary:hover,
.cta-section .btn-secondary:hover,
.parallax-band .btn-secondary:hover { background: #fff; color: var(--primary); }

/* Boutons et liens cyan sur fond clair */
.btn-outline { color: #006a9e; border-color: #006a9e; }
.btn-outline:hover { background: #006a9e; color: #fff; }
.product-category-tag { color: #00567f; }

/* Sections à fond cyan ou sombre posées en inline : forcer le texte clair */
.cta-section p, .cta-section div, .cta-section li,
.shop-cta-banner p, .shop-cta-banner h2, .shop-cta-banner div { color: rgba(255,255,255,0.9); }
.cta-section h2, .cta-section h3, .shop-cta-banner h2 { color: #fff; }

/* ── Contraste : passe 3 (spécificité suffisante) ───────────────────────── */
a.btn-secondary, .btn-secondary { color: var(--primary); border-color: var(--border); }
a.btn-secondary:hover, .btn-secondary:hover { color: var(--primary); border-color: var(--primary); background: var(--bg-alt); }
.hero a.btn-secondary, .cta-section a.btn-secondary, .parallax-band a.btn-secondary,
.stats-band a.btn-secondary, .devis-section a.btn-secondary, [class*="hero"] a.btn-secondary {
  color: #fff; border-color: rgba(255,255,255,0.7); background: transparent;
}
.hero a.btn-secondary:hover, .cta-section a.btn-secondary:hover, .parallax-band a.btn-secondary:hover {
  background: #fff; color: var(--primary);
}

/* Sections sombres : tout texte descendant reste lisible */
.cta-section p, .cta-section li, .cta-section span:not(.badge),
.shop-cta-banner p, .shop-cta-banner li, .shop-cta-banner span { color: rgba(255,255,255,0.9) !important; }
.cta-section h2, .cta-section h3, .shop-cta-banner h2, .shop-cta-banner h3 { color: #fff !important; }
.devis-section p, .devis-section .devis-form p, .devis-form p, .devis-form small { color: rgba(255,255,255,0.78) !important; }
.devis-section label, .devis-form label { color: rgba(255,255,255,0.92) !important; }

/* Aplat or : texte navy plutôt que blanc */
[style*="background:var(--highlight)"],
[style*="background: var(--highlight)"],
[style*="background:linear-gradient(135deg, var(--highlight)"] { color: var(--primary) !important; }
[style*="background:var(--highlight)"] span,
[style*="background: var(--highlight)"] span { color: var(--primary) !important; }
.badge-etat, .product-badge.badge-etat { color: #14532d; background: #dcfce7; }

/* ── Contraste : passe 4 (dernières occurrences mesurées) ───────────────── */
/* Bandeaux cyan posés en inline : leur contenu doit rester blanc */
section[style*="var(--secondary)"] p,
section[style*="var(--secondary)"] li,
section[style*="var(--secondary)"] span,
section[style*="var(--secondary)"] h2,
section[style*="var(--secondary)"] h3 { color: #fff !important; }

/* Liens dans les bandeaux sombres */
.cta-section a:not(.btn-primary):not(.btn-secondary),
.parallax-band a:not(.btn-primary):not(.btn-secondary),
.stats-band a:not(.btn-primary):not(.btn-secondary) { color: #fff !important; text-decoration: underline; }

/* Aplats cyan des composants boutique : cyan foncé pour porter du blanc */
.btn-voir, .filter-btn.active,
th[style*="var(--secondary)"], [style*="background:var(--secondary)"] { background: #0078b3 !important; }

/* Liens de carte */
.card-link { color: #006a9e; }
.card-link:hover { color: #00456b; }

/* Or dans le footer : la version claire reste lisible sur le navy */
.footer [style*="color:var(--highlight)"],
.footer [style*="color: var(--highlight)"] { color: #f5a623 !important; }

/* Verts et rouges inline */
[style*="#27ae60"] { color: #1e8449 !important; }
[style*="color:#e74c3c"], [style*="color: #e74c3c"] { color: #c0392b !important; }

/* ── Contraste : passe 5 (finitions) ─────────────────────────────────────── */
/* Étiquette de catégorie produit : fond clair, texte cyan foncé */
.product-card-category { background: none !important; color: #00567f !important; }

/* Bandeaux cyan : cyan assombri pour porter du texte blanc (AA) */
section[style*="var(--secondary)"],
.shop-cta-banner { background: linear-gradient(135deg, #0078b3 0%, #005f8f 100%) !important; }
section[style*="var(--secondary)"] p,
.shop-cta-banner p { color: #fff !important; }

/* Badges et textes colorés sur fonds pastel */
.badge-accent { color: #a3005a; }
[style*="color:var(--highlight)"],
[style*="color: var(--highlight)"] { color: #9a5b00 !important; }
[style*="color:var(--secondary)"],
[style*="color: var(--secondary)"] { color: #006a9e !important; }

/* Astérisques et mentions dans le formulaire de devis (fond navy) */
.devis-section span,
.devis-section .required,
.devis-form span { color: rgba(255,255,255,0.85) !important; }
.devis-section a, .devis-form a { color: #7fd0ff !important; }

/* ── Barre de confiance : badge partenaire ──────────────────────────────── */
.trust-item-logo { gap: 10px; }
.trust-logo {
  height: 34px;
  width: auto;
  border-radius: 3px;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .trust-logo { height: 28px; }
}

/* ==========================================================================
   FAQ — style unique du site (2026-08-19)
   Un seul gabarit : <details><summary><strong>Question</strong></summary><p>…</p></details>
   Les sélecteurs ne dépendent plus de l'emboîtement : ils ciblent tout
   <details> de contenu, quel que soit son conteneur.
   ========================================================================== */
details {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin: 0 auto var(--space-4);
  max-width: 900px;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out);
  overflow: hidden;
}
details:hover { border-color: var(--border); box-shadow: var(--shadow-sm); }
details[open] { border-color: var(--secondary); box-shadow: var(--shadow-sm); }

details > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
  transition: color var(--duration-fast) var(--ease-out);
}
details > summary:hover { color: var(--secondary-dark); }
details > summary::-webkit-details-marker,
details > summary::marker { display: none; content: ''; }
details > summary strong { font-weight: 600; }

/* Signe + / − dessiné en CSS, aligné sur la première ligne */
details > summary::after {
  content: '';
  flex: 0 0 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background:
    linear-gradient(var(--secondary), var(--secondary)) center/10px 2px no-repeat,
    linear-gradient(var(--secondary), var(--secondary)) center/2px 10px no-repeat,
    var(--secondary-light);
  transition: transform var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out);
}
details[open] > summary::after {
  background:
    linear-gradient(var(--secondary), var(--secondary)) center/10px 2px no-repeat,
    var(--secondary-light);
  transform: rotate(180deg);
}

details > *:not(summary) {
  margin: 0 var(--space-6) var(--space-5);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.75;
  max-width: none;
}
details > summary + * { margin-top: calc(var(--space-2) * -1); }
details > ul, details > ol { padding-left: var(--space-6); }
details > ul li, details > ol li { margin-bottom: var(--space-2); }

/* La section qui les contient */
.faq-section .container > details:first-of-type { margin-top: var(--space-2); }

@media (max-width: 640px) {
  details > summary { padding: var(--space-4) var(--space-5); font-size: var(--text-sm); gap: var(--space-4); }
  details > *:not(summary) { margin: 0 var(--space-5) var(--space-4); }
}

/* ── Rythme vertical : <section class="container"> ───────────────────────
   La classe .container (padding: 0 …) écrase le padding vertical de
   <section>, ce qui colle les sections entre elles. On le rétablit.       */
section.container {
  padding-top: var(--section-py);
  padding-bottom: var(--section-py);
}
section.container + section.container { padding-top: 0; }

/* ==========================================================================
   COUCHE DE FINITION — 2026-08-19
   Objectif : passer d'un rendu « template » à un rendu éditorial soigné.
   Uniquement du CSS : aucune page n'a besoin d'être retouchée.
   ========================================================================== */

/* ── 1. Typographie de lecture ──────────────────────────────────────────── */
section > .container > p,
section.container > p,
.split-band p,
.product-description p {
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.78;
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
}

/* Le premier paragraphe d'une section porte le propos : on le distingue */
section > .container > .section-header + p,
section.container > .section-header + p {
  font-size: 1.1875rem;
  line-height: 1.7;
  color: var(--text);
}

section > .container > h3,
section.container > h3 {
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  max-width: 40ch;
}

section > .container > ul,
section > .container > ol,
section.container > ul,
section.container > ol {
  max-width: 68ch;
  margin: 0 0 var(--space-6) var(--space-5);
  color: var(--text-secondary);
  font-size: 1.0625rem;
  line-height: 1.78;
}
section > .container > ul li,
section.container > ul li { margin-bottom: var(--space-2); }

/* ── 2. En-têtes de section ─────────────────────────────────────────────── */
.section-header { max-width: 760px; margin-bottom: clamp(36px, 4vw, 56px); }
.section-title { letter-spacing: -0.035em; line-height: 1.14; }
.section-subtitle { font-size: 1.0625rem; line-height: 1.65; color: var(--text-secondary); }
.section-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  margin-bottom: var(--space-3);
}

/* ── 3. Cartes : une seule grammaire ────────────────────────────────────── */
.card, .service-card, .feature-card, .media-card, .price-card, .product-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  transition: transform var(--duration) var(--ease-out),
              border-color var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out);
}
.card:hover, .service-card:hover, .feature-card:hover,
.media-card:hover, .product-card:hover {
  transform: translateY(-3px);
  border-color: var(--secondary);
  box-shadow: 0 12px 28px -12px rgba(15, 27, 45, 0.18);
}
.service-card h3, .card h3, .feature-card h3, .media-card h3 {
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}
.service-card p, .card p, .feature-card p, .media-card p {
  font-size: 0.9375rem;
  line-height: 1.65;
}
.service-card-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius);
  font-size: 1.25rem;
}

/* Images de carte : un seul rapport, un seul rendu */
.card-media, .card-media.contain { aspect-ratio: 16 / 10; }
.service-card img:not([class]), .card img:not([class]) { border-radius: var(--radius); }

/* ── 4. Tableaux : plus typographiques, moins « Excel » ─────────────────── */
.specs-table, .leasing-specs-table {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  font-size: 0.9375rem;
}
.specs-table thead th, .leasing-specs-table thead th, table thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  padding: var(--space-4) var(--space-5);
}
.specs-table td, .specs-table th, .leasing-specs-table td {
  padding: var(--space-4) var(--space-5);
  font-variant-numeric: tabular-nums;
}
.specs-table tbody tr:nth-child(even) { background: #fbfcfe; }
.specs-table tbody tr:hover { background: var(--secondary-ultra); }
.specs-table td:first-child { font-weight: 600; color: var(--text); width: 30%; }

/* ── 5. Boutons ─────────────────────────────────────────────────────────── */
.btn-primary, .btn-secondary, a.btn-primary, a.btn-secondary {
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  padding: 13px 26px;
}
.btn-primary { box-shadow: 0 8px 20px -10px rgba(230, 0, 126, 0.65); }
.btn-primary:hover { box-shadow: 0 12px 24px -10px rgba(230, 0, 126, 0.75); }

/* ── 6. Hero : lisibilité et tenue ──────────────────────────────────────── */
.hero h1 { letter-spacing: -0.04em; line-height: 1.08; }
.hero .lead { max-width: 34em; font-size: 1.0625rem; line-height: 1.7; }
.hero-actions { gap: var(--space-4); margin-top: var(--space-8); }

/* ── 7. Bandes de chiffres et bandes sombres ────────────────────────────── */
.stats-band .stat-block strong, .stats-band .stat-number { letter-spacing: -0.04em; }
.stat-block span, .stats-band .stat-label { font-size: 0.75rem; letter-spacing: 0.1em; }

/* ── 8. Respiration générale ────────────────────────────────────────────── */
section + section { border-top: none; }
.services-grid, .card-grid, .features-grid, .media-grid { gap: var(--space-6); }

@media (min-width: 1200px) {
  .services-grid, .card-grid, .features-grid { gap: var(--space-8); }
}

/* Colonne de lecture centrée sous l'en-tête de section (le texte reste
   aligné à gauche, mais le bloc est centré : plus de vide à droite). */
section > .container > p,
section.container > p,
section > .container > h3,
section.container > h3,
section > .container > ul,
section > .container > ol,
section.container > ul,
section.container > ol,
section > .container > .specs-table,
section.container > .specs-table,
section > .container > details,
section.container > details {
  margin-left: auto;
  margin-right: auto;
}
section > .container > h3,
section.container > h3 { max-width: 68ch; }
section > .container > ul,
section > .container > ol,
section.container > ul,
section.container > ol { padding-left: var(--space-5); }

/* Une seule largeur de colonne de lecture, en rem : tous les paragraphes
   d'une même section s'alignent au pixel, quelle que soit leur taille. */
section > .container > p,
section.container > p,
section > .container > .section-header + p,
section.container > .section-header + p,
section > .container > h3,
section.container > h3,
section > .container > ul,
section > .container > ol,
section.container > ul,
section.container > ol { max-width: 46rem; }

/* ==========================================================================
   COMPOSANTS ÉDITORIAUX — 2026-08-20
   Briques réutilisables pour composer des pages qui respirent.
   Créées pour copieurs-mfp.html, destinées à toutes les pages.
   ========================================================================== */

/* ── Intro éditoriale : chapô large + colonne de repères ────────────────── */
.editorial {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.editorial-lead p:first-of-type {
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.65;
  color: var(--text);
  margin-bottom: var(--space-6);
  max-width: none;
}
.editorial-lead p { max-width: none; }
.editorial-aside {
  border-left: 2px solid var(--secondary);
  padding-left: var(--space-6);
}
.editorial-aside dl { margin: 0; }
.editorial-aside dt {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.035em;
  line-height: 1;
}
.editorial-aside dd {
  margin: var(--space-2) 0 var(--space-6);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.editorial-aside dd:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .editorial { grid-template-columns: 1fr; }
  .editorial-aside { border-left: none; border-top: 2px solid var(--secondary); padding-left: 0; padding-top: var(--space-6); }
}

/* ── Fiche produit horizontale ──────────────────────────────────────────── */
.spec-row {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 200px;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  padding: var(--space-8) 0;
  border-top: 1px solid var(--border);
}
.spec-row:last-of-type { border-bottom: 1px solid var(--border); }
.spec-row-media {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.spec-row-media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.spec-row-body h3 { font-size: 1.25rem; letter-spacing: -0.02em; margin-bottom: var(--space-2); }
.spec-row-body .spec-row-kicker {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #006a9e;
  margin-bottom: var(--space-2);
}
.spec-row-body p { color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.65; margin-bottom: var(--space-4); max-width: 52ch; }
.spec-row-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.spec-row-tags span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-alt);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  padding: 5px 12px;
}
.spec-row-price { text-align: right; }
.spec-row-price strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.03em;
  line-height: 1;
}
.spec-row-price small { display: block; font-size: 0.8125rem; color: var(--text-secondary); margin-top: 6px; }
.spec-row-price .card-link { margin-top: var(--space-4); }
@media (max-width: 980px) {
  .spec-row { grid-template-columns: 180px minmax(0, 1fr); }
  .spec-row-price { grid-column: 2; text-align: left; }
}
@media (max-width: 620px) {
  .spec-row { grid-template-columns: 1fr; gap: var(--space-5); }
  .spec-row-price { grid-column: 1; }
  .spec-row-media { aspect-ratio: 16 / 9; }
}

/* ── Citation client ────────────────────────────────────────────────────── */
.pull-quote {
  border-left: 3px solid var(--accent);
  padding: var(--space-2) 0 var(--space-2) var(--space-8);
  max-width: 46rem;
  margin: var(--space-12) auto;
}
.pull-quote p {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: var(--space-4);
  max-width: none;
}
.pull-quote footer { font-size: 0.875rem; color: var(--text-secondary); }
.pull-quote footer strong { color: var(--text); }

/* ── Bloc « à retenir » ─────────────────────────────────────────────────── */
.keypoint {
  background: var(--secondary-ultra);
  border: 1px solid #d6ecf9;
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  max-width: 46rem;
  margin: 0 auto var(--space-8);
}
.keypoint strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #00567f;
  margin-bottom: var(--space-3);
}
.keypoint p { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--text); max-width: none; }

/* ── Grille de fonctionnalités épurée (sans cartes) ─────────────────────── */
.feature-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-8) var(--space-10);
}
.feature-list-grid > div { padding-top: var(--space-5); border-top: 2px solid var(--primary); }
.feature-list-grid h3 { font-size: 1.0625rem; margin-bottom: var(--space-2); letter-spacing: -0.015em; }
.feature-list-grid p { font-size: 0.9375rem; line-height: 1.65; color: var(--text-secondary); margin: 0; max-width: none; }

/* ── Étapes numérotées en ligne ─────────────────────────────────────────── */
.steps-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-8);
  counter-reset: etape;
}
.steps-row > div { counter-increment: etape; position: relative; padding-top: var(--space-10); }
.steps-row > div::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  top: 0; left: 0;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--secondary);
  letter-spacing: -0.03em;
}
.steps-row > div::after {
  content: '';
  position: absolute;
  top: 14px; left: 44px; right: 0;
  height: 1px;
  background: var(--border);
}
.steps-row > div:last-child::after { display: none; }
.steps-row h3 { font-size: 1.0625rem; margin-bottom: var(--space-2); }
.steps-row p { font-size: 0.9375rem; line-height: 1.65; color: var(--text-secondary); margin: 0; max-width: none; }

/* ── Bande secteurs compacte ────────────────────────────────────────────── */
.sector-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.sector-list > div { background: var(--bg-card); padding: var(--space-8); transition: background var(--duration) var(--ease-out); }
.sector-list > div:hover { background: var(--secondary-ultra); }
.sector-list h3 { font-size: 1.0625rem; margin-bottom: var(--space-3); letter-spacing: -0.015em; }
.sector-list p { font-size: 0.875rem; line-height: 1.6; color: var(--text-secondary); margin: 0; max-width: none; }

/* Visuel produit du hero : posé sur une carte blanche, pas collé au fond */
.hero-media img {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,0.55);
  max-height: 380px;
  width: auto;
  margin-left: auto;
}
@media (max-width: 900px) { .hero-media img { max-height: 240px; margin: var(--space-8) auto 0; } }

/* Espacement des paragraphes dans les blocs éditoriaux (ils ne sont pas
   enfants directs de .container, donc la règle de lecture ne s'applique pas) */
.editorial-lead p,
.spec-row-body p,
.keypoint p,
.sector-list p,
.feature-list-grid p,
.steps-row p { margin-bottom: var(--space-5); }
.editorial-lead p:last-child,
.spec-row-body p:last-child,
.keypoint p:last-child,
.sector-list p:last-child,
.feature-list-grid p:last-child,
.steps-row p:last-child { margin-bottom: 0; }
.editorial-lead p { font-size: 1.0625rem; line-height: 1.78; color: var(--text-secondary); }
.editorial-lead p:first-of-type { color: var(--text); }

/* Titres de colonne du méga-menu : cyan foncé pour passer le seuil AA */
.megamenu h5, .megamenu-col h5 { color: #006a9e; }

/* ==========================================================================
   SÉCURITÉ CONTRASTE — sections à fond sombre (2026-08-20)
   La couche de finition a introduit `section > .container > p { color:
   var(--text-secondary) }` (spécificité 0-1-2) qui écrasait les règles de
   texte clair des bandes sombres : texte gris foncé sur navy = illisible.
   Ces règles ont la même structure, donc la même spécificité, et sont
   déclarées après : elles gagnent.
   ========================================================================== */
.parallax-band > .container > p,
.cta-section > .container > p,
.stats-band > .container > p,
.devis-section > .container > p,
.shop-cta-banner > .container > p,
.hero > .container > p,
.parallax-band > .container > ul,
.cta-section > .container > ul,
.hero > .container > ul { color: rgba(255,255,255,0.9); }

.parallax-band > .container > h2,
.parallax-band > .container > h3,
.cta-section > .container > h2,
.cta-section > .container > h3,
.stats-band > .container > h2,
.devis-section > .container > h2,
.hero > .container > h2,
.hero > .container > h3 { color: #fff; }

/* Filet de sécurité : tout descendant d'une bande sombre part en clair */
.parallax-band, .cta-section, .stats-band, .devis-section, .shop-cta-banner, .hero { color: #fff; }
.parallax-band p, .parallax-band li, .parallax-band span:not(.badge),
.cta-section p, .cta-section li,
.stats-band p, .stats-band li,
.hero p, .hero li { color: rgba(255,255,255,0.9); }
.parallax-band strong, .cta-section strong, .stats-band strong, .hero strong { color: #fff; }

/* Sur fond sombre, les couleurs de marque reprennent leur version CLAIRE :
   les variantes assombries (pensées pour le fond blanc) deviennent ternes
   et perdent le contraste. */
.hero [style*="color:var(--highlight)"], .hero [style*="color: var(--highlight)"],
.parallax-band [style*="var(--highlight)"], .cta-section [style*="var(--highlight)"],
.stats-band [style*="var(--highlight)"] { color: #f5a623 !important; }
.hero [style*="color:var(--accent)"], .hero [style*="color: var(--accent)"],
.parallax-band [style*="var(--accent)"], .cta-section [style*="var(--accent)"] { color: #ff2e9a !important; }
.hero [style*="color:var(--secondary)"], .hero [style*="color: var(--secondary)"],
.parallax-band [style*="var(--secondary)"], .cta-section [style*="var(--secondary)"] { color: #4cc2ff !important; }
.hero h1 span, .hero h2 span { color: var(--secondary); }

/* Le chapô du hero suit l'alignement du titre : il ne doit pas être centré
   comme une colonne de lecture de contenu. */
.hero > .container > p,
.hero > .container > p.lead,
.hero > .container > ul { margin-left: 0; margin-right: 0; }
.hero-center > .container > p, .hero-center > .container > p.lead { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   UTILITAIRES — 2026-08-20
   Remplacent les 1 250 styles écrits en dur dans les pages. Une seule
   source de vérité : si la charte change, tout le site suit.
   ========================================================================== */

/* Colonne de lecture pour un conteneur (div, article) */
.colonne { max-width: 46rem; margin-left: auto; margin-right: auto; }
.colonne-large { max-width: 62rem; margin-left: auto; margin-right: auto; }

/* Paragraphe de contenu dans un bloc qui n'est pas enfant direct de .container */
.texte { font-size: 1.0625rem; line-height: 1.78; color: var(--text-secondary); margin-bottom: var(--space-6); }
.texte:last-child { margin-bottom: 0; }

/* Image d'illustration en tête de carte */
.card-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
}

/* Bandeau cyan pleine largeur */
.band-cyan {
  background: linear-gradient(135deg, #0078b3 0%, #005f8f 100%);
  color: #fff;
  padding: var(--space-12) 0;
  text-align: center;
}
.band-cyan h2, .band-cyan h3 { color: #fff; }
.band-cyan p { color: rgba(255,255,255,0.92); max-width: 46rem; margin: 0 auto var(--space-6); }
.band-cyan .btn-primary { background: #fff; color: #005f8f; }
.band-cyan .btn-primary:hover { background: var(--bg-alt); color: #00456b; }

/* Liste de points avec filet */
.liste-filets { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.liste-filets li {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.9375rem; color: var(--text-secondary);
}
.liste-filets li:last-child { border-bottom: none; }

/* Tableau scrollable sur mobile */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Utilitaires d'alignement et d'espacement (échelle de la charte) */
.txt-center { text-align: center; }
.txt-right  { text-align: right; }
.mt-2 { margin-top: var(--space-2); }  .mb-2 { margin-bottom: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }  .mb-3 { margin-bottom: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }  .mb-4 { margin-bottom: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }  .mb-6 { margin-bottom: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }  .mb-8 { margin-bottom: var(--space-8); }
.petit { font-size: 0.875rem; color: var(--text-secondary); }
.accent-cyan { color: #006a9e; }
.accent-magenta { color: #cc006e; }

/* Compléments d'utilitaires (2e passe) */
.txt-lg  { font-size: 1.125rem; }
.txt-xl  { font-size: 1.375rem; color: var(--primary); }
.txt-2xl { font-size: 1.75rem; letter-spacing: -0.02em; }
.txt-3xl { font-size: 2.25rem; letter-spacing: -0.03em; }
.txt-blanc { color: #fff; }
.accent-or { color: #9a5b00; }
.flex-center { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
.pv-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.centre-bloc { margin-left: auto; margin-right: auto; }
.colonne-etroite { max-width: 35rem; margin-left: auto; margin-right: auto; }
.card-img-contain {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
  background: #fff; border-radius: var(--radius); padding: var(--space-4);
  margin-bottom: var(--space-4);
}
/* Sur fond sombre, l'or et le magenta reprennent leur version claire */
.band-cyan .accent-or, .parallax-band .accent-or, .cta-section .accent-or, .hero .accent-or { color: #f5a623; }
.band-cyan .accent-cyan, .parallax-band .accent-cyan, .cta-section .accent-cyan, .hero .accent-cyan { color: #7fd0ff; }
.band-cyan .accent-magenta, .parallax-band .accent-magenta, .cta-section .accent-magenta, .hero .accent-magenta { color: #ff5cb0; }

/* Compléments d'utilitaires (3e passe) */
.ligne-filet { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.ligne-filet:last-child { border-bottom: none; }
.section-compacte { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.btn-sur-sombre { background: #fff !important; color: #005f8f !important; }
.btn-sur-sombre:hover { background: var(--bg-alt) !important; color: #00456b !important; }
.btn-bord-blanc { border-color: rgba(255,255,255,0.7) !important; color: #fff !important; }
.btn-bord-blanc:hover { background: #fff !important; color: var(--primary) !important; }
.txt-navy { color: var(--primary); }
.txt-blanc-doux { color: rgba(255,255,255,0.9); }
.grille-240 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-6); }
.grille-180 { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); }
.duo-flex { display: flex; gap: var(--space-6); align-items: flex-start; flex-wrap: wrap; }
.img-pleine { width: 100%; border-radius: var(--radius); }

/* Compléments d'utilitaires (4e passe) */
.grille { display: grid; gap: var(--space-6); }
.grille-150 { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-4); }
.grille-160 { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-4); }
.grille-200 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-5); }
.grille-220 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-5); }
.grille-250 { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-6); }
.grille-260 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-6); }
.grille-280 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-6); }
.grille-300 { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-6); }
.grille-320 { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-6); }
.p-6 { padding: var(--space-6); }
.gras { font-weight: 700; }
.arrondi { border-radius: var(--radius); }
.fond-blanc { background: var(--bg-card); }
.align-centre { align-items: center; }
.majuscules { text-transform: uppercase; letter-spacing: 0.08em; }
.sans-puces { list-style: none; padding-left: 0; }
.table-large { width: 100%; min-width: 650px; }
.pastille-annee {
  min-width: 80px; padding: var(--space-3) 0; text-align: center;
  background: var(--secondary); color: #fff;
  border-radius: var(--radius); font-weight: 700; font-size: 1.0625rem;
}

/* Alignement centré des colonnes de valeurs dans les tableaux comparatifs */
.specs-table td:not(:first-child), .specs-table th:not(:first-child) { text-align: center; }
.specs-table td:first-child, .specs-table th:first-child { text-align: left; }
/* Carte compacte (pastilles de villes, listes de communes) */
.p-compact { padding: var(--space-3) var(--space-4); }

/* ==========================================================================
   UTILITAIRES — LOT 2 (2026-08-20) — fin du nettoyage des styles en dur
   ========================================================================== */

/* Badge « Populaire » — ne doit jamais être rogné par overflow:hidden */
.badge-populaire{
  position:absolute; top:12px; right:12px; z-index:2;
  background:var(--accent-hover); color:#fff;
  padding:.25rem .75rem; border-radius:999px;
  font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  line-height:1.4; box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.micro-badge{
  display:inline-block; background:var(--accent-hover); color:#fff;
  padding:.15rem .5rem; border-radius:999px; font-size:.7rem; font-weight:700;
}

/* Cartes de formule : liseré de couleur en haut */
.pos-rel{position:relative}
.lisere-bleu{border-top:4px solid var(--secondary)}
.lisere-rose{border-top:4px solid var(--accent)}
.lisere-or{border-top:4px solid var(--highlight)}

/* Pilules de titre de formule */
.pilule{
  display:inline-block; padding:.4rem 1.25rem; border-radius:999px;
  color:#fff; font-weight:700; font-size:.95rem; line-height:1.3;
}
.pilule-bleu{background:#00648f}
.pilule-rose{background:var(--accent-hover)}
.pilule-or{background:var(--highlight); color:#3b2a00}

/* Fonds */
.fond-clair{background:#fafafa}
.fond-blanc{background:#fff}
.fond-navy{background:var(--primary); color:#fff}
.fond-rose{background:var(--accent-hover); color:#fff}
.fond-or{background:var(--highlight); color:#3b2a00}
.cell-accent{min-width:80px; padding:.75rem 0; background:var(--accent-hover); color:#fff}

/* Ombres et arrondis */
.ombre{box-shadow:var(--shadow)}
.ombre-lg{box-shadow:var(--shadow-lg)}
.arrondi-lg{border-radius:var(--radius-lg)}

/* Flux et grilles */
.flex-row{display:flex; flex-wrap:wrap; gap:1.5rem}
.inline-flex{display:inline-flex}
.gap-10{gap:.625rem}
.gap-15{gap:1.5rem}
.gap-48{gap:3rem}
.flex-250{flex:1; min-width:250px}
.flex-300{flex:1; min-width:300px}
.grille-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.pleine-largeur{grid-column:1 / -1}

/* Listes */
.liste-aeree{line-height:2; padding-left:1.5rem}
.ligne-liste{display:flex; gap:.5rem; padding:.5rem 0}
.att-05{opacity:.6}

/* Typographie */
.lead-section{font-size:1.15rem; line-height:1.7; max-width:46rem; margin-left:auto; margin-right:auto}
.txt-gris{color:var(--text-muted)}
.txt-ambre{color:#8a4b00}
.txt-vert{color:#1e7a45}

/* Espacements */
.p-0{padding:0}
.pt-0{padding-top:0}
.pl-15{padding-left:1.5rem}
.pl-20{padding-left:1.25rem}
.py-3{padding-top:3rem; padding-bottom:3rem}
.py-4{padding-top:4rem; padding-bottom:4rem}
.mt-0{margin-top:0}
.mt-20{margin-top:1.25rem}
.mt-32{margin-top:2rem}
.mt-40{margin-top:2.5rem}
.mt-48{margin-top:3rem}
.mb-8{margin-bottom:.5rem}
.mb-20{margin-bottom:1.25rem}
.mb-32{margin-bottom:2rem}
.mb-40{margin-bottom:2.5rem}
.mt-1{margin-top:1rem}
.mb-2{margin-bottom:2rem}
.my-15{margin:1.5rem 0}
.mr-1{margin-right:1rem}
.mx-auto{margin-left:auto; margin-right:auto}
.mw-900{max-width:900px; margin-left:auto; margin-right:auto}

/* Sécurité contraste sur les fonds colorés utilitaires */
.fond-navy h2,.fond-navy h3,.fond-navy p,.fond-navy li,.fond-navy td,.fond-navy th,
.fond-rose h2,.fond-rose h3,.fond-rose p,.fond-rose li,.fond-rose td,.fond-rose th,
.cell-accent,.cell-accent *{color:#fff}
.fond-or h2,.fond-or h3,.fond-or p,.fond-or li{color:#3b2a00}

/* La carte ne rogne plus ses badges : le badge est désormais posé À L'INTÉRIEUR
   (top/right positifs), donc overflow:hidden reste sûr pour les images arrondies. */
.service-card:has(.badge-populaire){padding-top:var(--space-6)}

/* Cartes de formule : pied de carte aligné d'une carte à l'autre */
.services-grid .service-card:has(.pilule){display:flex; flex-direction:column}
.services-grid .service-card:has(.pilule)>*:last-child{margin-top:auto; padding-top:var(--space-4)}

/* Boutons réseaux sociaux du pied de page */
.social-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:8px;
  background:rgba(255,255,255,.10); color:#fff;
  transition:background .2s ease, transform .2s ease;
}
.social-btn:hover{background:var(--accent-hover); transform:translateY(-2px)}
.social-btn svg{width:17px; height:17px}
.sticky-top{position:sticky; top:0; z-index:1050; width:100%}
/* NB : sur #site-header c'est la règle ID de layout.css qui pilote le z-index. */
.mt-10{margin-top:.625rem}

/* Section devis : la colonne d'info est plus courte que le formulaire,
   on la centre pour que le vide se répartisse au lieu de tomber en bas. */
.devis-grid{align-items:center}
@media (max-width:900px){.devis-grid{align-items:start}}

/* ==========================================================================
   RANGÉES ORPHELINES — 2026-08-20
   Une grille `repeat(auto-fit, minmax())` laisse une carte seule sur la
   dernière rangée dès que le nombre d'items n'est pas multiple du nombre de
   colonnes. En flex, la dernière rangée se centre et les cartes gardent
   toutes la même largeur.
   ⚠ Ne s'applique QU'AUX vraies grilles : un élément qui contient un
   `.container`, un titre ou un paragraphe direct est un conteneur de section,
   pas une grille — le passer en flex casse toute la mise en page.
   ========================================================================== */
.grille-cartes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}
.grille-cartes > * { flex: 0 1 288px; }
.grille-cartes.grille-fine > * { flex: 0 1 252px; }
.grille-cartes.grille-large > * { flex: 0 1 480px; }

@media (max-width: 680px){
  .grille-cartes > * { flex: 1 1 100%; }
}


/* Icônes de carte : bloc SVG (remplace les emojis) */
.icone-bloc{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; margin-bottom:var(--space-4);
  border-radius:12px; background:var(--secondary-light); color:var(--secondary-dark);
}
.icone-bloc svg{width:22px; height:22px}
/* Puce SVG dans une liste ou une ligne de texte */
li > svg:first-child, .trust-item > svg:first-child, .contact-line > svg:first-child{
  flex:0 0 auto; width:17px; height:17px; color:var(--secondary-dark);
}

/* Visuel de carte produit cliquable — l'image entière renvoie vers la fiche */
.product-card-media-link{
  display:block; width:100%; height:100%;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.product-card-media-link img{
  display:block; width:100%; height:100%; object-fit:contain;
  transition:transform .35s var(--ease-out, ease);
}
.product-card:hover .product-card-media-link img,
.product-card-media-link:hover img{ transform:scale(1.04); }
.product-card-img{ overflow:hidden; }
.product-card-media-link:focus-visible{
  outline:3px solid var(--secondary-dark); outline-offset:-3px; border-radius:inherit;
}

/* ==========================================================================
   PAGE 404 — « bourrage papier »
   ========================================================================== */
.hero-404{
  background:linear-gradient(160deg,#0f2338 0%,#00223c 55%,#062b48 100%);
  color:#fff; padding:var(--space-20) 0 var(--space-16); position:relative; overflow:hidden;
}
.hero-404::after{
  content:""; position:absolute; width:520px; height:520px; right:-160px; top:-180px;
  background:radial-gradient(circle,rgba(0,145,213,.22) 0%,transparent 65%); pointer-events:none;
}
.hero-404-inner{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,460px);
  gap:var(--space-10); align-items:center; position:relative; z-index:1;
}
.hero-404 .section-eyebrow{color:#7fd0f5}
.hero-404 h1{
  font-size:clamp(2.6rem,6vw,4rem); line-height:1.02; margin:.35rem 0 1rem; color:#fff;
}
.hero-404 .lead{color:rgba(255,255,255,.92); max-width:34rem; margin-bottom:.75rem}
.hero-404-aide{color:rgba(255,255,255,.66); font-size:.95rem; margin-bottom:1.75rem}
.hero-404 .hero-actions{display:flex; flex-wrap:wrap; gap:.75rem}
.hero-404-visuel{display:flex; justify-content:center}
.copieur-404{width:100%; max-width:430px; height:auto; filter:drop-shadow(0 24px 48px rgba(0,0,0,.35))}

/* La feuille tressaute dans la fente, le voyant clignote */
.feuille-coincee{transform-origin:236px 100px; animation:coince404 2.6s ease-in-out infinite}
@keyframes coince404{
  0%,58%,100%{transform:translateY(0) rotate(0deg)}
  64%{transform:translateY(-7px) rotate(-1.4deg)}
  70%{transform:translateY(2px) rotate(.8deg)}
  76%{transform:translateY(-4px) rotate(-.6deg)}
  82%{transform:translateY(0) rotate(0deg)}
}
.voyant-404{animation:voyant404 1.3s steps(1) infinite}
@keyframes voyant404{0%,49%{opacity:1}50%,100%{opacity:.18}}
@media (prefers-reduced-motion: reduce){
  .feuille-coincee,.voyant-404{animation:none}
}
.flex-center-404{justify-content:center; display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem}
@media (max-width:900px){
  .hero-404-inner{grid-template-columns:1fr; text-align:center}
  .hero-404 .lead{margin-left:auto; margin-right:auto}
  .hero-404 .hero-actions{justify-content:center}
  .hero-404-visuel{order:-1}
  .copieur-404{max-width:320px}
}

/* ==========================================================================
   MOBILE — DÉBORDEMENTS HORIZONTAUX (2026-08-20)
   Cause : un enfant de grille a `min-width:auto` par défaut, donc la colonne
   ne peut pas descendre sous la largeur min-content de son contenu. La colonne
   dépassait le conteneur (624 px dans 358 px) et poussait toute la page.
   ========================================================================== */
.split-band > *, .product-main > *, .editorial > *, .spec-row > *,
.devis-grid > *, .media-grid > *, .steps-row > *, .feature-list-grid > * { min-width: 0; }
.split-band, .product-main, .editorial, .devis-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
@media (max-width: 900px){
  .split-band, .product-main, .editorial, .devis-grid,
  .split-media, .split-content { grid-template-columns: minmax(0,1fr); }
  .split-band, .product-main, .editorial, .devis-grid { display: grid; }
}
/* Anciennes bandes texte/image de l'accueil */
@media (max-width: 900px){
  .split-media, .split-content { width: 100%; max-width: 100%; float: none; }
  .split-media img { width: 100%; height: auto; }
}
/* Les animations d'apparition décalent de 40 px : sans clip, cela crée une
   barre blanche sur le côté tant que l'élément n'est pas révélé. */
html, body { overflow-x: clip; }
/* Tableaux larges : défilement horizontal contenu, plutôt que page décalée */
@media (max-width: 860px){
  .specs-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .specs-table thead, .specs-table tbody, .specs-table caption { min-width: max-content; }
}
img, svg, video, table { max-width: 100%; }

/* ==========================================================================
   BARRE D'ACTIONS MOBILE — appeler / devis, toujours visible
   ========================================================================== */
.barre-mobile{ display:none; }
@media (max-width: 720px){
  .barre-mobile{
    display:grid; grid-template-columns:1fr 1fr; gap:0;
    position:fixed; left:0; right:0; bottom:0; z-index:1200;
    background:#fff; border-top:1px solid var(--border);
    box-shadow:0 -6px 24px rgba(0,0,0,.12);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .barre-mobile-item{
    display:flex; align-items:center; justify-content:center; gap:.5rem;
    min-height:58px; font-weight:700; font-size:1rem; text-decoration:none;
    color:var(--primary); background:#fff;
  }
  .barre-mobile-item svg{width:19px;height:19px;flex:0 0 auto}
  .barre-mobile-cta{ background:var(--accent-hover); color:#fff; }
  .barre-mobile-item:active{ filter:brightness(.94); }
  /* on laisse la place à la barre et on retire le bouton flottant */
  body{ padding-bottom:calc(62px + env(safe-area-inset-bottom)); }
  .devis-float{ display:none !important; }
}

/* ==========================================================================
   BANDEAU DE CONSENTEMENT COOKIES
   « Refuser » et « Accepter » ont volontairement le même poids visuel :
   la CNIL exige que refuser soit aussi simple qu'accepter.
   ========================================================================== */
.bandeau-cookies{
  position:fixed; left:0; right:0; bottom:0; z-index:1300;
  background:#fff; border-top:3px solid var(--primary);
  box-shadow:0 -10px 40px rgba(0,0,0,.18);
  transform:translateY(110%); transition:transform .32s var(--ease-out, ease);
  padding-bottom:env(safe-area-inset-bottom);
}
.bandeau-cookies.visible{transform:translateY(0)}
.bandeau-cookies-inner{
  max-width:1256px; margin:0 auto; padding:1.25rem var(--space-6);
  display:flex; gap:1.75rem; align-items:center; flex-wrap:wrap;
}
.bandeau-cookies-texte{flex:1 1 460px; min-width:0}
.bandeau-cookies-titre{
  font-weight:700; color:var(--primary); margin:0 0 .3rem; font-size:1.0625rem;
}
.bandeau-cookies-texte p{margin:0; font-size:.9375rem; line-height:1.6; color:var(--text-secondary); max-width:none}
.bandeau-cookies-texte a{color:#006a9e; text-decoration:underline}
.bandeau-cookies-actions{display:flex; gap:.75rem; flex:0 0 auto}
.btn-cookie{
  font:inherit; font-weight:700; font-size:.9375rem; cursor:pointer;
  padding:.7rem 1.6rem; border-radius:999px; border:2px solid var(--primary);
  min-width:132px; transition:background .2s ease, color .2s ease, transform .15s ease;
}
.btn-cookie-refus{background:#fff; color:var(--primary)}
.btn-cookie-refus:hover{background:var(--bg-alt)}
.btn-cookie-ok{background:var(--primary); color:#fff}
.btn-cookie-ok:hover{background:#00456b}
.btn-cookie:active{transform:translateY(1px)}
.btn-cookie:focus-visible{outline:3px solid var(--secondary-dark); outline-offset:2px}
@media (max-width:720px){
  .bandeau-cookies{bottom:calc(58px + env(safe-area-inset-bottom))} /* au-dessus de la barre d'actions */
  .bandeau-cookies-inner{padding:1rem var(--space-5); gap:1rem}
  .bandeau-cookies-actions{width:100%}
  .btn-cookie{flex:1 1 0; min-width:0; padding:.75rem .5rem}
}

/* Formulaires : case de consentement, piège à robots, message d'erreur */
.champ-piege{
  position:absolute !important; left:-9999px !important; top:auto !important;
  width:1px !important; height:1px !important; overflow:hidden !important;
}
.consentement-rgpd{
  display:flex; align-items:flex-start; gap:.7rem; margin:1.25rem 0 1rem;
}
.consentement-rgpd input[type="checkbox"]{
  flex:0 0 auto; width:20px; height:20px; margin-top:2px;
  accent-color:var(--accent-hover); cursor:pointer;
}
.consentement-rgpd label{
  font-size:.875rem; line-height:1.55; color:rgba(255,255,255,.82); cursor:pointer;
}
.consentement-rgpd label a{color:#7fd0f5; text-decoration:underline}
.message-formulaire{
  margin:0 0 .85rem; padding:.7rem .95rem; border-radius:var(--radius-md);
  background:rgba(230,0,126,.14); border:1px solid rgba(230,0,126,.45);
  color:#ffd9ec; font-size:.9rem; font-weight:600;
}
/* Sur fond clair (page contact par exemple) */
.section .consentement-rgpd label,
.container > .consentement-rgpd label{color:var(--text-secondary)}

/* Page de confirmation : la feuille sort proprement, pas de tressautement */
.feuille-sortie{animation:sortie 3s ease-out infinite}
@keyframes sortie{
  0%,70%,100%{transform:translateY(0)}
  10%{transform:translateY(-6px)}
  20%{transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){ .feuille-sortie{animation:none} }

/* ==========================================================================
   FICHES PRODUIT — RESPIRATION VERTICALE
   En une colonne (sous 900 px), la galerie et la description se touchaient :
   .product-description et .product-specs n'avaient aucune marge haute.
   ========================================================================== */
.product-main { margin-bottom: var(--space-12); }
.product-description { margin-top: var(--space-10); }
.product-specs { margin-top: var(--space-12); }
.product-description + .product-specs { margin-top: var(--space-12); }
@media (max-width: 900px){
  .product-gallery { position: static; margin-bottom: var(--space-8); }
  .product-main { margin-bottom: var(--space-10); }
  .product-description { margin-top: var(--space-8); }
  .product-specs { margin-top: var(--space-10); }
}

/* Bloc avis : le bouton collait la dernière carte de témoignage */
.reviews-cta{
  margin-top: var(--space-12);
  display: flex;
  justify-content: center;
}
.reviews-section .testimonials-grid + .reviews-cta{ margin-top: var(--space-12); }
@media (max-width: 720px){
  .reviews-cta{ margin-top: var(--space-10); }
  .reviews-cta .btn-primary{ width: 100%; text-align: center; }
}


/* Fiches produits : le prix est remplace par « Sur devis ».
   Sans reduction, « Sur devis » en --text-xl deborde du pied de carte. */
.price-amount--devis{
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--secondary);
  letter-spacing: .01em;
}