/* ========================================================================= */
/* --- 1. VARIABLES & RESET --- */
/* ========================================================================= */
:root {
  /* Palette Clean Net */
  --primary-pink: #ec008c;
  --primary-dark: #b3006a;
  --accent-green: #8dc63f;

  --text-dark: #333333;
  --text-light: #666666;
  --white: #ffffff;
  --light-bg: #f8f9fa;
  --glass-bg: rgba(255, 255, 255, 0.95);

  /* UI & Layout */
  --container-width: 1200px;
  --border-radius: 12px;
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 15px 35px rgba(236, 0, 140, 0.15);
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Roboto', sans-serif;
  color: var(--text-dark);
  line-height: 1.8;
  background-color: var(--white);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-dark);
}

a { text-decoration: none; color: inherit; transition: var(--transition); }
ul { list-style: none; }
img { max-width: 100%; display: block; height: auto; }

/* Utilitaires */
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 25px; }

/* ========================================================================= */
/* --- 2. BOUTONS & UI --- */
/* ========================================================================= */
.btn {
  display: inline-block;
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  text-align: center;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-pink), var(--primary-dark));
  color: #ffffff !important; /* Force le blanc */
  border: 2px solid transparent; /* Propre */
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(236, 0, 140, 0.4);
  color: #ffffff !important; /* Reste blanc au survol */
}

.btn-secondary {
  background: var(--white);
  color: var(--primary-pink);
  border: 2px solid var(--primary-pink);
}

.btn-secondary:hover {
  background: var(--primary-pink);
  color: var(--white);
}

/* Titres de Section */
.section-header { text-align: center; margin-bottom: 70px; }

.section-header h2 {
  font-size: 2.5rem;
  color: var(--primary-pink);
  margin-bottom: 15px;
}

.separator {
  width: 80px;
  height: 5px;
  background: var(--accent-green);
  margin: 0 auto 25px;
  border-radius: 10px;
}

.section-header p {
  color: var(--text-light);
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
}

/* ========================================================================= */
/* --- 3. HEADER & NAV --- */
/* ========================================================================= */
header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  padding: 15px 0;
  transition: var(--transition);
  background: transparent;
}

header.scrolled {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  padding: 10px 0;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  height: 55px;
  width: auto;
  object-fit: contain;
}

.nav-links {
  display: flex;
  gap: 35px;
  align-items: center;
}

.nav-links a {
  font-weight: 500;
  color: var(--white);
  font-size: 1rem;
  position: relative;
  padding: 5px 0;
}

.nav-links a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  background: var(--accent-green);
  bottom: 0;
  left: 0;
  transition: 0.3s;
}

.nav-links a:hover::after { width: 100%; }

/* Changement de couleur au scroll */
header.scrolled .nav-links a { color: var(--text-dark); }
header.scrolled .nav-links a:hover { color: var(--primary-pink); }

.hamburger { display: none; color: var(--white); font-size: 1.8rem; cursor: pointer; }
header.scrolled .hamburger { color: var(--text-dark); }

/* ========================================================================= */
/* --- 4. HERO SECTION --- */
/* ========================================================================= */
.hero {
  height: 100vh;
  min-height: 650px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;

  /* L'image locale clean_house.jpg avec le filtre rose/prune par-dessus */
  background: linear-gradient(135deg, rgba(60, 20, 45, 0.8), rgba(236, 0, 140, 0.6)),
  url('../images/background_1.png');

  background-size: cover;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.hero-content {
  position: relative;
  z-index: 2;
  color: var(--white);
  padding: 0 20px;
  max-width: 800px;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s ease forwards 0.5s;
}

@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

.hero h1 {
  font-size: 3.5rem;
  margin-bottom: 25px;
  color: var(--white);
  text-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.hero h1 span { color: var(--accent-green); }

.hero-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 30px;
}

/* ========================================================================= */
/* --- 5. SERVICES (Grid) --- */
/* ========================================================================= */
.services {
  padding: 100px 0;
  background: var(--light-bg);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
}

.service-card {
  background: var(--white);
  padding: 40px 30px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
  border-bottom: 4px solid transparent;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-hover);
  border-bottom-color: var(--accent-green);
}

.icon-box {
  width: 80px; height: 80px;
  background: rgba(236, 0, 140, 0.05);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 25px;
  font-size: 2rem;
  color: var(--primary-pink);
  transition: var(--transition);
}

.service-card:hover .icon-box {
  background: var(--primary-pink);
  color: var(--white);
  transform: rotateY(180deg);
}

.service-card h3 { margin-bottom: 15px; font-size: 1.4rem; }
.service-card p { color: var(--text-light); font-size: 1rem; }

/* ========================================================================= */
/* --- 6. SPLIT LAYOUT (Titres Services & Agence) --- */
/* ========================================================================= */
.titres-services {
  padding: 100px 0;
  background: var(--white);
}

.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center; /* Centré verticalement par défaut */
}

/* LISTE À PUCES AVEC ICÔNES (Tarifs & Recrutement) */
.job-benefits { margin: 30px 0; }

.job-benefits li {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  font-size: 1.15rem;
  color: var(--text-dark);
}

.job-benefits li i {
  width: 32px;
  height: 32px;
  background: #e6f4d8; /* Vert très clair */
  color: var(--accent-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px; /* Espace garanti entre icône et texte */
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* IMAGE WRAPPER & IFRAME (MAPS) */
.img-wrapper {
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  position: relative;
  height: 100%; /* Important pour la map */
}
.img-wrapper img {
  transition: transform 0.6s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
  min-height: 400px; /* Hauteur minimale pour la carte */
}
.img-wrapper:hover img { transform: scale(1.05); }

/* ========================================================================= */
/* --- 7. RECRUTEMENT --- */
/* ========================================================================= */
.section-emploi {
  padding: 100px 0;
  background-color: var(--light-bg);
}

.badge-emploi {
  background: var(--primary-pink);
  color: white;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: inline-block;
}

/* ========================================================================= */
/* --- 8. AVIS CLIENTS --- */
/* ========================================================================= */
.section-avis {
  padding: 100px 0;
  background-color: var(--white);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.review-card {
  background: #ffffff;
  border: 1px solid #f0f0f0;
  padding: 35px;
  border-radius: var(--border-radius);
  box-shadow: 0 5px 20px rgba(0,0,0,0.02);
  transition: var(--transition);
}

.review-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
  border-color: transparent;
}

.stars {
  color: #ffc107;
  margin-bottom: 20px;
  font-size: 0.9rem;
  letter-spacing: 2px;
}

.review-text {
  font-style: italic;
  color: #555;
  margin-bottom: 25px;
  font-size: 1rem;
  line-height: 1.6;
}

.review-author {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f0f0f0;
  padding-top: 15px;
}

.author-name {
  font-weight: 700;
  color: var(--primary-pink);
}

/* ========================================================================= */
/* --- 9. PROMO CACHÉE (Ticket) --- */
/* ========================================================================= */
.secret-promo-section {
  padding: 50px 0;
  background: #fff;
  text-align: center;
  border-top: 1px solid #eee;
}

.promo-trigger {
  list-style: none;
  cursor: pointer;
  background: #333;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 15px 40px;
  border-radius: 50px;
  font-weight: 600;
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.promo-trigger::-webkit-details-marker { display: none; }

.promo-trigger:hover {
  transform: scale(1.02);
  background: var(--primary-pink);
}

.promo-coupon-container {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  animation: slideDown 0.5s ease-out;
}

.promo-coupon {
  background: #fff9fc;
  border: 2px dashed var(--primary-pink);
  padding: 40px;
  max-width: 600px;
  width: 100%;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.coupon-header h3 {
  text-transform: uppercase;
  font-size: 1.8rem;
  margin-bottom: 5px;
}

.offer-big {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary-pink);
  margin: 25px 0;
  background: rgba(236, 0, 140, 0.05);
  padding: 20px;
  border-radius: 8px;
}

.offer-big span {
  font-size: 2.5rem;
  display: block;
  line-height: 1.2;
}

.btn-print {
  background: var(--text-dark);
  color: white;
  border: none;
  padding: 10px 25px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: 0.3s;
}
.btn-print:hover { background: var(--accent-green); }

.scissors {
  position: absolute;
  top: -16px;
  left: 48%;
  background: white;
  padding: 0 10px;
  color: #333;
  font-size: 1.4rem;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========================================================================= */
/* --- 10. FOOTER --- */
/* ========================================================================= */
footer {
  background: #222;
  color: #999;
  padding: 60px 0 30px;
  text-align: center;
  font-size: 0.95rem;
}
.footer-brand { font-size: 1.8rem; color: #fff; margin-bottom: 20px; }
.footer-brand span { color: var(--primary-pink); }
.social-links { margin: 20px 0; }
.social-links a { font-size: 1.5rem; color: #fff; margin: 0 10px; }

/* ========================================================================= */
/* --- 11. RESPONSIVE --- */
/* ========================================================================= */
@media (max-width: 992px) {
  .hero h1 { font-size: 2.5rem; }
  .split-layout { grid-template-columns: 1fr; gap: 40px; }
  .reverse-mobile { display: flex; flex-direction: column-reverse; } /* Image au dessus du texte */

  .nav-links {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100vh;
    background: var(--primary-pink); /* Menu Mobile Rose */
    flex-direction: column;
    justify-content: center;
    transform: translateX(100%);
    transition: 0.3s ease-in-out;
  }
  .nav-links.active { transform: translateX(0); }
  .hamburger { display: block; z-index: 1001; }
  .nav-links.active ~ .hamburger { color: var(--white); position: fixed; right: 25px; top: 25px; }

  .promo-trigger { width: 100%; font-size: 0.9rem; padding: 15px; }

  /* Ajustement de la Stats Bar sur mobile pour qu'elle s'empile */
  .service-card[style*="flex-direction: row"] {
    flex-direction: column !important;
  }
}

/* ========================================================================= */
/* --- 12. ANIMATION REVEAL (JS) --- */
/* ========================================================================= */
.reveal-item {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease-out;
}
.reveal-item.active {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================================================= */
/* --- 13. DÉLAIS D'ANIMATION (Effet Cascade) --- */
/* ========================================================================= */

/* Pour les grilles (Services, Avis, Tarifs) */
/* Le 2ème élément de chaque grille attend 0.1s */
.services-grid > *:nth-child(2),
.reviews-grid > *:nth-child(2),
.pricing-grid > *:nth-child(2) {
  transition-delay: 0.20s;
}

/* Le 3ème élément attend 0.3s */
.services-grid > *:nth-child(3),
.reviews-grid > *:nth-child(3),
.pricing-grid > *:nth-child(3) {
  transition-delay: 0.4s;
}

/* Le 4ème élément attend 0.45s (si jamais tu en ajoutes) */
.services-grid > *:nth-child(4),
.reviews-grid > *:nth-child(4) {
  transition-delay: 0.6s;
}

/* Petit effet de zoom au survol des images */
.img-wrapper img {
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.img-wrapper:hover img {
  transform: scale(1.1); /* Zoom un peu plus prononcé */
}

/* ========================================================================= */
/* --- 14. SIMULATEUR DE COÛT (DESIGN MODERNE & INTERACTIF) --- */
/* ========================================================================= */
.simulator-section {
  padding: 80px 0;
  background: linear-gradient(to bottom, var(--white), #fff5fa); /* Léger dégradé rose vers le bas */
}

.simulator-wrapper {
  background: white;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08); /* Ombre plus douce et large */
  padding: 50px;
  max-width: 950px;
  margin: 0 auto;
  border: 1px solid rgba(236, 0, 140, 0.1); /* Bordure rose très subtile */
}

.simulator-header { text-align: center; margin-bottom: 50px; }
.simulator-header h2 { font-size: 2.2rem; color: var(--text-dark); margin-bottom: 15px; }

/* --- NOUVEAU STYLE D'INPUT (SLIDER) --- */
.input-group-modern { margin-bottom: 60px; max-width: 700px; margin-left: auto; margin-right: auto; }

.range-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;
}
.range-header label { font-weight: 700; font-size: 1.2rem; color: var(--text-dark); font-family: 'Poppins', sans-serif;}

.number-display-modern {
  display: flex; align-items: center;
  background: var(--white);
  padding: 5px 15px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  border: 2px solid var(--primary-pink);
}
.number-display-modern input {
  width: 70px; border: none; background: transparent;
  font-size: 1.6rem; font-weight: 700; color: var(--primary-pink);
  text-align: right; padding-right: 5px;
  font-family: 'Poppins', sans-serif;
}
.number-display-modern span { font-weight: 600; color: var(--primary-pink); font-size: 1.2rem; }

/* Le conteneur du slider */
.range-slider-container { position: relative; height: 30px; display: flex; align-items: center; }

/* Le slider (L'input global) */
.styled-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 32px; /* CORRECTION : Hauteur égale au bouton pour centrage parfait */
  border-radius: 6px;
  background: transparent; /* On laisse le JS gérer la couleur */
  outline: none;
  cursor: pointer;

  /* Astuce pour que la barre (le fond) soit centrée et fasse 12px de haut */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 12px;
}

/* Le curseur (Rond) */
.styled-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 32px;
  width: 32px;
  background: var(--white);
  border: 4px solid var(--primary-pink);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 4px 10px rgba(236, 0, 140, 0.3);
  transition: transform 0.2s;

  /* CORRECTION : Plus besoin de margin-top négatif car les hauteurs sont égales */
  margin-top: 0;
}

/* Firefox */
.styled-slider::-moz-range-thumb {
  height: 32px; width: 32px;
  background: var(--white);
  border: 4px solid var(--primary-pink);
  border-radius: 50%;
  cursor: grab;
  border: none; /* Reset pour Firefox */
  box-shadow: 0 4px 10px rgba(236, 0, 140, 0.3);
}

.range-labels { display: flex; justify-content: space-between; margin-top: 10px; color: #999; font-size: 0.9rem; font-weight: 500;}

/* --- NOUVELLE GRILLE DE RÉSULTATS --- */
.results-grid-modern {
  display: flex; align-items: stretch; justify-content: center;
  gap: 30px;
}

.result-card-modern {
  flex: 1;
  padding: 30px;
  border-radius: 18px;
  text-align: center;
  display: flex; flex-direction: column; justify-content: center;
  transition: var(--transition);
}

/* Carte Standard (Prix fort) - Look "désactivé" */
.result-card-modern.standard {
  background: #f4f4f4;
  color: #888;
  border: 1px solid #e0e0e0;
}
.result-card-modern.standard .price-box { color: #666; }

/* Carte Discount (Prix réel) - Look "Premium" */
.result-card-modern.discount {
  background: var(--white);
  border: 2px solid var(--primary-pink); /* Bordure rose */
  box-shadow: 0 15px 40px rgba(236, 0, 140, 0.2); /* Grosse ombre rose */
  transform: scale(1.08); /* Légèrement plus grande par défaut */
  position: relative;
  overflow: hidden;
  z-index: 2; /* Passe au-dessus */
}

/* Le bandeau intégré */
.discount-banner {
  background: var(--accent-green);
  color: white;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  padding: 8px;
  border-radius: 30px;
  margin-bottom: 20px;
  display: inline-block; /* Pour qu'il prenne juste la taille du texte */
}
.discount-banner i { margin-right: 8px; }

/* Typographie des cartes */
.card-header { font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 15px; }
.discount .card-header { color: var(--primary-pink); }

.price-box {
  font-family: 'Poppins', sans-serif;
  font-size: 3.5rem; font-weight: 700; line-height: 1; margin-bottom: 15px;
  display: flex; align-items: flex-start; justify-content: center;
}
.price-box.highlight { color: var(--primary-pink); }
.currency { font-size: 2rem; margin-top: 5px; margin-left: 5px; }

.sub-text { font-size: 0.95rem; }
.sub-text.highlight { color: var(--text-dark); }
.sub-text strong { color: var(--accent-green); }

/* Flèche centrale */
.operator-arrow { font-size: 2rem; color: #ddd; align-self: center; }

.disclaimer { text-align: center; font-size: 0.8rem; color: #999; margin-top: 50px; max-width: 700px; margin-left: auto; margin-right: auto;}

/* --- ANIMATION DE PULSATION SUR LES PRIX --- */
@keyframes pricePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); color: var(--accent-green); } /* Petit flash vert */
  100% { transform: scale(1); }
}
/* Cette classe sera ajoutée/retirée par JS */
.pulse-anim {
  animation: pricePulse 0.3s ease-in-out;
}

/* --- MOBILE --- */
@media (max-width: 768px) {
  .simulator-wrapper { padding: 30px 20px; }
  .results-grid-modern { flex-direction: column; gap: 50px; }
  .operator-arrow { transform: rotate(90deg); margin: -20px 0; } /* Flèche vers le bas */
  .result-card-modern.discount { transform: scale(1); /* On enlève l'effet de taille sur mobile pour éviter les débordements */ }
  .price-box { font-size: 3rem; }
}

/* ========================================================================= */
/* --- PAGE 404 (ERROR) --- */
/* ========================================================================= */
.error-page {
  height: 100vh; /* Prend tout l'écran */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(circle at center, #fff, #fdfdfd);
  overflow: hidden;
}

.error-code {
  font-size: 8rem;
  font-weight: 900;
  color: var(--primary-pink);
  line-height: 1;
  margin-bottom: 10px;
  text-shadow: 5px 5px 0 rgba(141, 198, 63, 0.2); /* Ombre portée verte */
}

.error-page h2 {
  font-size: 2rem;
  color: var(--text-dark);
  margin-bottom: 20px;
}

.error-page p {
  color: #777;
  max-width: 500px;
  margin: 0 auto 40px;
  font-size: 1.1rem;
}

/* --- Animation Icône & Bulles --- */
.error-icon {
  position: relative;
  display: inline-block;
  font-size: 4rem;
  color: var(--accent-green);
  margin-bottom: 20px;
}

/* Les bulles de savon */
.bubble {
  position: absolute;
  background: rgba(236, 0, 140, 0.15); /* Rose transparent */
  border: 1px solid rgba(236, 0, 140, 0.3);
  border-radius: 50%;
  animation: floatBubble 4s infinite ease-in-out;
}

.b1 { width: 15px; height: 15px; top: 0; left: -20px; animation-delay: 0s; }
.b2 { width: 25px; height: 25px; top: -30px; right: -10px; animation-delay: 1s; }
.b3 { width: 10px; height: 10px; top: 20px; right: -30px; animation-delay: 2s; }

@keyframes floatBubble {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(-60px) scale(1.2); opacity: 0; }
}

/* Adaptation Mobile */
@media (max-width: 768px) {
  .error-code { font-size: 5rem; }
  .error-page h2 { font-size: 1.5rem; }
}

/* ========================================================================= */
/* --- 14. UI DU NAVIGATEUR (SCROLLBAR & SÉLECTION) --- */
/* ========================================================================= */

/* La "piste" de la barre de défilement */
::-webkit-scrollbar {
  width: 10px; /* Largeur de la barre */
}

/* Le fond de la barre */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Le "pouce" (la partie qui bouge) */
::-webkit-scrollbar-thumb {
  background: #ccc; /* Gris par défaut */
  border-radius: 5px;
  transition: background 0.3s;
}

/* Au survol, la barre devient Rose Clean Net */
::-webkit-scrollbar-thumb:hover {
  background: var(--primary-pink);
}

/* Sélection du texte */
::selection {
  background: var(--primary-pink);
  color: var(--white);
}

/* Pour Firefox */
::-moz-selection {
  background: var(--primary-pink);
  color: var(--white);
}

/* BOUTON RETOUR HAUT */
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--primary-pink);
  color: white;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  opacity: 0; /* Caché par défaut */
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 999;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  bottom: 30px; /* Petit effet de remontée */
}

.back-to-top:hover {
  background: var(--text-dark);
  transform: translateY(-5px);
}

/* ========================================================================= */
/* --- 15. TOAST NOTIFICATION (CADEAU) --- */
/* ========================================================================= */
.gift-toast {
  position: fixed;
  bottom: 30px;
  left: 30px; /* À gauche pour équilibrer avec le bouton retour haut */
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  z-index: 9999;
  transform: translateY(150%); /* Caché vers le bas par défaut */
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Effet rebond */
  border-left: 5px solid var(--primary-pink);
  max-width: 90%;
}

.gift-toast.show {
  transform: translateY(0); /* Apparition */
}

.toast-icon-box {
  background: #fff0f7;
  color: var(--primary-pink);
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  animation: wiggle 2s infinite; /* Petite animation qui attire l'œil */
}

.toast-content-text {
  display: flex;
  flex-direction: column;
}

.toast-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #999;
  font-weight: 700;
}

.toast-message {
  color: var(--text-dark);
  font-size: 0.95rem;
}
.toast-message strong { color: var(--primary-pink); }

.toast-btn {
  background: var(--text-dark);
  color: white;
  padding: 6px 15px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: 0.3s;
}
.toast-btn:hover { background: var(--primary-pink); }

.toast-close {
  background: none; border: none;
  color: #ccc; cursor: pointer;
  font-size: 1rem;
  margin-left: 5px;
  padding: 5px;
}
.toast-close:hover { color: var(--text-dark); }

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  10%, 30% { transform: rotate(-10deg); }
  20%, 40% { transform: rotate(10deg); }
  50% { transform: rotate(0deg); }
}

/* Mobile : On centre le toast */
@media (max-width: 600px) {
  .gift-toast {
    left: 5%; right: 5%; bottom: 20px;
    justify-content: space-between;
  }
}

/* ========================================================================= */
/* --- 16. OPTIMISATION IMPRESSION (CORRIGÉE : 1 Page Portrait) --- */
/* ========================================================================= */
@media print {
  /* 1. Force le format A4 Vertical (Portrait) */
  @page {
    size: A4 portrait;
    margin: 0; /* On gère les marges nous-mêmes */
  }

  /* 2. On cache TOUT et on bloque le scroll/débordement */
  html, body {
    height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important; /* Empêche les pages blanches supplémentaires */
    background: white !important;
  }

  /* Cache tout le contenu visuellement */
  body * {
    visibility: hidden;
  }

  /* 3. On cible UNIQUEMENT le bon et on le sort du flux (position: fixed) */
  .promo-coupon,
  .promo-coupon * {
    visibility: visible !important; /* Rendre visible */
  }

  .promo-coupon {
    position: fixed !important; /* C'est ça qui supprime les pages blanches */
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important; /* Centrage parfait */

    width: 100% !important;
    max-width: 600px !important; /* Taille max sur papier */

    border: 2px dashed #000 !important; /* Bordure noire pour économie d'encre */
    box-shadow: none !important;
    background: white !important;
    color: black !important;
    padding: 40px !important;
    margin: 0 !important;
    z-index: 99999;
  }

  /* 4. On cache le bouton "Imprimer" sur le papier */
  .btn-print {
    display: none !important;
  }

  /* On cache les ciseaux décoratifs s'ils gênent */
  .scissors {
    color: black !important;
  }
}

/* ========================================================================= */
/* --- 17. COUPON À REMPLIR (STYLE CLEAN NET) --- */
/* ========================================================================= */
.coupon-wrapper {
  display: flex;
  justify-content: center;
  padding: 50px 20px;
  background: var(--light-bg);
}

.clean-coupon {
  background: white;
  border: 2px dashed var(--primary-pink); /* Bordure rose pointillée */
  border-radius: 20px;
  padding: 40px;
  max-width: 600px;
  width: 100%;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  text-align: center;
}

.coupon-icon {
  width: 60px; height: 60px;
  background: #fff0f7; /* Rose très pâle */
  color: var(--primary-pink);
  font-size: 1.8rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}

.coupon-header-clean h3 {
  color: var(--primary-pink);
  text-transform: uppercase;
  margin-bottom: 5px;
  font-size: 1.8rem;
}
.coupon-header-clean p { color: #888; font-style: italic; font-size: 0.9rem; }

/* Champs de formulaire (Style Ligne) */
.coupon-body { margin: 30px 0; text-align: left; }
.instruction { margin-bottom: 20px; font-weight: 600; color: var(--text-dark); text-align: center;}

.field-row {
  margin-bottom: 20px;
  display: flex;
  align-items: flex-end; /* Aligne le texte en bas */
  gap: 15px;
}

.field-row label {
  min-width: 130px;
  font-weight: 700;
  color: var(--text-dark);
}

.field-row input {
  flex: 1;
  border: none;
  border-bottom: 2px solid #ddd;
  padding: 5px;
  font-size: 1.1rem;
  color: var(--primary-pink);
  font-weight: 600;
  background: transparent;
  outline: none;
}
.field-row input:focus { border-color: var(--primary-pink); }

/* Zone de l'offre en gros */
.coupon-offer {
  background: var(--primary-pink);
  color: white;
  padding: 15px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 30px;
  text-transform: uppercase;
}
.coupon-offer span { display: block; font-size: 1.8rem; }

.legal-text { font-size: 0.8rem; color: #999; margin-bottom: 20px; }

/* Bouton d'impression spécifique */
.btn-print-clean {
  width: 100%;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}

/* ========================================================================= */
/* --- OPTIMISATION IMPRESSION (EN HAUT À GAUCHE - 1/4 PAGE) --- */
/* ========================================================================= */
@media print {
  /* Réglage de la page physique */
  @page { margin: 0; size: auto; }

  /* Si le JS a ajouté la classe, on applique le nettoyage */
  body.printing-mode {
    background-color: white !important;
    height: 100vh !important;
    overflow: hidden !important;
  }

  /* 1. On cache TOUT */
  body.printing-mode > * {
    display: none !important;
  }

  /* 2. On ré-active la structure parente en invisible */
  body.printing-mode main,
  body.printing-mode .secret-promo-section,
  body.printing-mode .container,
  body.printing-mode .promo-spoiler,
  body.printing-mode .coupon-wrapper {
    display: block !important;
    position: static !important;
    visibility: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
  }

  /* 3. On affiche le coupon en HAUT À GAUCHE */
  body.printing-mode .clean-coupon {
    visibility: visible !important;
    display: block !important;

    position: fixed !important;
    left: 40px !important;  /* Petite marge à gauche */
    top: 40px !important;   /* Petite marge en haut */

    /* On réduit à 65% mais SANS le déplacer au centre */
    transform: scale(0.65) !important;

    /* IMPORTANT : On dit que la réduction part du coin haut-gauche */
    transform-origin: top left !important;

    width: 650px !important; /* Largeur fixe avant réduction */
    max-width: none !important;

    border: 2px solid black !important;
    background: white !important;
    z-index: 9999999 !important;
    padding: 30px !important;
    border-radius: 15px !important;
  }

  /* 4. Visibilité des enfants */
  body.printing-mode .clean-coupon * {
    visibility: visible !important;
  }

  /* Styles Noir et Blanc */
  .clean-coupon input { border-bottom: 2px solid black !important; color: black !important; }
  .clean-coupon input::placeholder { color: transparent !important; }
  .btn-print-clean, .scissors { display: none !important; }
  .coupon-offer { color: black !important; border: 2px solid black !important; background: none !important; }
  .coupon-icon { color: black !important; border: 1px solid black !important; background: none !important; }

  summary { display: none !important; }
}