/* =====================================================
   DemenagerPasCher.com — CSS fidèle à la maquette
   =====================================================
   SOMMAIRE
   1.  Fonts Poppins (local)
   2.  Variables CSS (couleurs, arrondis, ombres)
   3.  Reset & base
   4.  Header fixe + navigation desktop
   5.  Bouton "Obtenir mon devis" dans la nav
   6.  Burger + menu mobile
   7.  HERO (fond violet clair, texte gauche, photo droite, vague)
   8.  Barre de recherche dans le Hero
   9.  Section "Avec DemenagerPasCher" (4 colonnes icônes)
   10. Section "Comment ça marche" (fond violet, 4 étapes)
   11. Section "Avis clients" (carrousel 3 cartes)
   12. Section "Blog / Conseils"
   13. Footer violet
   14. Animations fade-in
   15. Responsive tablette (≤1024px)
   16. Responsive mobile (≤768px)
   17. Responsive petit mobile (≤480px)
   ===================================================== */


/* =====================================================
   1. FONTS POPPINS — fichiers locaux dans assets/fonts/
   ===================================================== */

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Light.woff2') format('woff2'),
       url('../fonts/Poppins-Light.woff')  format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.woff2') format('woff2'),
       url('../fonts/Poppins-Regular.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Medium.woff2') format('woff2'),
       url('../fonts/Poppins-Medium.woff')  format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Bold.woff2') format('woff2'),
       url('../fonts/Poppins-Bold.woff')  format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* =====================================================
   2. VARIABLES CSS
      Modifiez ici pour changer les couleurs partout.
   ===================================================== */

:root {
  --vert:          #aefbaf;   /* Vert clair (badges, vague) */
  --violet:        #6161ff;   /* Violet principal */
  --violet-dark:   #4b4bcc;   /* Violet foncé (hover) */
  --violet-hero:   #eeeeff;   /* Fond violet très clair du Hero */
  --violet-section:#f4f5ff;   /* Fond sections alternées */
  --rouge:         #ff3131;   /* Bouton "Je déménage" */
  --blanc:         #ffffff;
  --gris-texte:    #222222;   /* Titres */
  --gris-corps:    #444444;   /* Texte courant */
  --gris-sous:     #666677;   /* Descriptions secondaires */
  --gris-bordure:  #e0e2f0;   /* Bordures des champs */

  --radius:        10px;
  --radius-btn:    50px;      /* Boutons pilule */
  --radius-card:   14px;      /* Cartes */

  --shadow-card:   0 4px 20px rgba(97,97,255,0.10);
  --shadow-hero:   0 8px 40px rgba(97,97,255,0.15);

  --transition:    0.28s ease;

  --max-width:     1160px;    /* Largeur max du contenu */
}


/* =====================================================
   3. RESET & BASE
   ===================================================== */

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: var(--gris-corps);
  background: var(--blanc);
  overflow-x: hidden;
  line-height: 1.6;
}

img  { max-width: 100%; height: auto; display: block; }
a    { text-decoration: none; color: inherit; }
ul   { list-style: none; }
button { font-family: 'Poppins', sans-serif; cursor: pointer; }


/* =====================================================
   4. HEADER fixe + NAVIGATION DESKTOP
   ===================================================== */

.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--blanc);
  box-shadow: 0 2px 12px rgba(97,97,255,0.07);
  transition: box-shadow var(--transition);
}

/* Ombre renforcée au scroll (classe ajoutée par JS) */
.header.scrolled {
  box-shadow: 0 4px 24px rgba(97,97,255,0.15);
}

.header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Logo */
.header__logo img {
  height: 36px;
  width: auto;
}

/* Navigation desktop */
.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav a {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gris-corps);
  padding: 7px 13px;
  border-radius: var(--radius-btn);
  white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}

.nav a:hover,
.nav a.active {
  color: var(--violet);
  background: var(--violet-section);
}

/* Séparateur entre liens nav */
.nav a + a::before {
  content: '|';
  color: #d0d3f0;
  margin-right: 4px;
  pointer-events: none;
}


/* =====================================================
   5. BOUTON "OBTENIR MON DEVIS" dans la nav
   ===================================================== */

.btn-devis-nav {
  background: var(--violet);
  color: var(--blanc) !important;
  padding: 10px 20px !important;
  border-radius: var(--radius-btn) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--transition), transform var(--transition) !important;
  margin-left: 8px;
}

.btn-devis-nav::before { display: none !important; } /* Supprime le séparateur | */

.btn-devis-nav:hover {
  background: var(--violet-dark) !important;
  transform: translateY(-1px);
  color: var(--blanc) !important;
}

/* Flèche dans le bouton nav */
.btn-devis-nav .arrow {
  font-size: 1rem;
  line-height: 1;
}


/* =====================================================
   6. BURGER + MENU MOBILE
      Burger caché sur desktop, visible sur mobile.
   ===================================================== */

/* Icône burger (3 traits) */
.burger {
  display: none;         /* Caché sur desktop */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  z-index: 1100;
}

.burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--violet);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Animation burger → croix */
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Panneau de menu mobile (plein écran) */
.nav-mobile {
  display: none;         /* Caché par défaut */
  position: fixed;
  inset: 64px 0 0 0;    /* Depuis sous le header jusqu'en bas */
  background: var(--blanc);
  z-index: 999;
  flex-direction: column;
  padding: 24px 20px;
  gap: 6px;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

/* Classe ajoutée par JS pour afficher le menu */
.nav-mobile.open {
  display: flex;
}

/* Liens du menu mobile */
.nav-mobile a {
  display: block;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--gris-texte);
  padding: 13px 16px;
  border-radius: var(--radius);
  border-bottom: 1px solid #f0f0f8;
  transition: color var(--transition), background var(--transition);
}

.nav-mobile a:hover,
.nav-mobile a.active {
  color: var(--violet);
  background: var(--violet-section);
}

/* Bouton CTA dans le menu mobile */
.nav-mobile .btn-mobile-cta {
  margin-top: 12px;
  background: var(--violet);
  color: var(--blanc) !important;
  text-align: center;
  border-radius: var(--radius-btn) !important;
  border-bottom: none !important;
  font-weight: 700 !important;
  justify-content: center;
}

/* Lien accueil mobile uniquement */
.nav-mobile .mobile-only { display: flex; }


/* =====================================================
   7. HERO
   ===================================================== */

.hero {
  padding-top: 64px;          /* Compense le header fixe */
  background: var(--violet-hero);
  position: relative;
  overflow-x: hidden;         /* Garde les vagues dans le hero horizontalement */
  overflow-y: visible;        /* Permet à la liste de suggestions de déborder vers le bas */
  min-height: 480px;
}

/* --- Vagues décoratives : une à gauche, une à droite --- */
.hero__vague {
  position: absolute;
  top: 0;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

/* Vague gauche : coin haut gauche */
.hero__vague--gauche {
  left: 0;
  width: 30%;
}

/* Vague droite : coin haut droit */
.hero__vague--droite {
  right: 0;
  width: 40%;
}

/* Grille 2 colonnes (texte | photo) */
.hero__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 64px 24px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: flex-end;
  position: relative;
  z-index: 2;
}

/* --- Colonne gauche (texte) --- */
.hero__content {
  padding-bottom: 48px;
}

/* Titre principal H1 */
.hero__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--gris-texte);
  line-height: 1.15;
  margin-bottom: 20px;
}

/* Sous-titre */
.hero__subtitle {
  font-size: 0.95rem;
  color: var(--gris-sous);
  line-height: 1.7;
  margin-bottom: 4px;
  max-width: 460px;
}

.hero__subtitle strong {
  font-weight: 600;
  color: var(--gris-texte);
}

/* --- Colonne droite (photo du couple) --- */
.hero__visual {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 2;
}

/* Photo du couple */
.hero__photo {
  width: 100%;
  max-width: 560px;
  height: auto;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 2;
}

/* Petits ronds décoratifs */
.hero__decor {
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--vert);
  pointer-events: none;
  z-index: 3;
}

.hero__decor--1 {
  width: 12px; height: 12px;
  top: 80px; left: 18%;
}

.hero__decor--2 {
  width: 10px; height: 10px;
  top: 70px; left: 45%;
}


/* =====================================================
   8. BARRE DE RECHERCHE dans le Hero
      Fond blanc avec 3 champs + bouton rouge.
      Positionnée en bas du Hero, chevauchant la section suivante.
   ===================================================== */

.hero__search-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 100;               /* Au-dessus des éléments du hero */
  overflow: visible;          /* Ne coupe pas la liste de suggestions */
}

/* La barre blanche */
.hero__search {
  background: var(--blanc);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-hero);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
  overflow: visible;          /* Ne coupe pas la liste de suggestions */
}

/* Chaque champ de la barre */
.search-field {
  flex: 1;
  min-width: 160px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--gris-bordure);
  border-radius: var(--radius);
  padding: 11px 14px;
  transition: border-color var(--transition);
}

.search-field:focus-within {
  border-color: var(--violet);
}

.search-field__icon {
  color: var(--violet);
  font-size: 1rem;
  flex-shrink: 0;
}

.search-field input {
  border: none;
  outline: none;
  font-family: 'Poppins', sans-serif;
  font-size: 0.88rem;
  color: var(--gris-texte);
  background: transparent;
  width: 100%;
}

.search-field input::placeholder {
  color: #aaa;
}

/* Masque l'icône calendrier native du navigateur */
#date-dem::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

/* Séparateur vertical entre les champs */
.search-sep {
  width: 1px;
  height: 40px;
  background: var(--gris-bordure);
  flex-shrink: 0;
}

/* Bouton rouge "Je déménage !" */
.btn-search {
  background: var(--rouge);
  color: var(--blanc);
  border: none;
  border-radius: var(--radius-btn);
  padding: 13px 28px;
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background var(--transition), transform var(--transition);
  flex-shrink: 0;
}

.btn-search:hover {
  background: #e02020;
  transform: translateY(-2px);
}

/* =====================================================
   AUTOCOMPLETE — adresse.data.gouv.fr
   Liste de suggestions sous les champs adresse
   ===================================================== */

/* Liste déroulante de suggestions — position fixed pour passer au-dessus de tout */
.adresse-suggestions {
  position: fixed;            /* Sort du flux, ignoré par tous les overflow parents */
  background: var(--blanc);
  border: 1.5px solid var(--violet);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 8px 24px rgba(97, 97, 255, 0.15);
  z-index: 99999;
  max-height: 260px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

/* Chaque suggestion */
.adresse-suggestions li {
  padding: 10px 14px;
  font-size: 0.88rem;
  color: var(--gris-texte);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background var(--transition);
}

/* Libellé principal (adresse) */
.adresse-suggestions li .sug-label {
  font-weight: 500;
}

/* Contexte secondaire (ville, code postal) */
.adresse-suggestions li .sug-context {
  font-size: 0.78rem;
  color: var(--gris-sous);
}

/* Survol ou sélection clavier */
.adresse-suggestions li:hover,
.adresse-suggestions li.active {
  background: var(--violet-section);
  color: var(--violet);
}

.adresse-suggestions li:hover .sug-context,
.adresse-suggestions li.active .sug-context {
  color: var(--violet);
  opacity: 0.75;
}

/* Message "aucun résultat" */
.adresse-suggestions li.no-result {
  color: var(--gris-sous);
  font-style: italic;
  cursor: default;
}

.adresse-suggestions li.no-result:hover {
  background: transparent;
  color: var(--gris-sous);
}

/* Ligne de réassurance sous la barre */
.hero__reassurance {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 10px 24px 20px;
  text-align: left;
  font-size: 0.8rem;
  color: var(--gris-sous);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;  /* Passe à la ligne si nécessaire sur mobile */
}

.hero__reassurance svg,
.hero__reassurance .icon-securise {
  color: var(--violet);
  flex-shrink: 0;
  filter: invert(37%) sepia(90%) saturate(2000%) hue-rotate(220deg) brightness(100%) contrast(100%);
}


/* =====================================================
   9. SECTION "Avec DemenagerPasCher.com"
      Fond blanc, 4 colonnes avec icônes SVG ligne.
   ===================================================== */

.section-avantages {
  background: var(--blanc);
  padding: 60px 0 72px;
}

.section-avantages__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Titre centré */
.section-avantages__title {
  text-align: center;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 700;
  color: var(--gris-texte);
  margin-bottom: 10px;
}

.section-avantages__title span {
  color: var(--violet);
}

/* Sous-titre centré */
.section-avantages__desc {
  text-align: center;
  font-size: 0.9rem;
  color: var(--gris-sous);
  margin-bottom: 56px;
}

/* Grille 4 colonnes */
.avantages-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

/* Chaque colonne avantage */
.avantage-item {
  text-align: center;
  padding: 8px;
}

/* Icône de chaque avantage — SVG fichier colorisé en violet */
.avantage-item__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Colorise les SVG <img> en violet (#6161ff) via filtre CSS */
.avantage-item__icon img {
  width: 100%;
  height: 100%;
  /* Filtre pour passer du noir au violet #6161ff */
  filter: invert(37%) sepia(90%) saturate(2000%) hue-rotate(220deg) brightness(100%) contrast(100%);
  transition: filter 0.28s ease, transform 0.28s ease;
}

.avantage-item:hover .avantage-item__icon img {
  transform: scale(1.08);
}

/* Pour les SVG inline (si utilisés ailleurs) */
.avantage-item__icon svg {
  width: 100%;
  height: 100%;
  color: var(--violet);
}

/* Label en violet majuscule */
.avantage-item__label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--violet);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
}

/* Titre de la colonne */
.avantage-item__title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gris-texte);
  margin-bottom: 8px;
  line-height: 1.3;
}

/* Description */
.avantage-item__desc {
  font-size: 0.82rem;
  color: var(--gris-sous);
  line-height: 1.65;
}


/* =====================================================
   10. SECTION "COMMENT ÇA MARCHE"
       Fond violet foncé, 4 étapes en 2 colonnes alternées.
       Grandes icônes blanches à droite des textes.
   ===================================================== */

.section-comment {
  background: var(--violet);
  padding: 72px 0;
}

.section-comment__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Titre */
.section-comment__title {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--blanc);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 56px;
}

.section-comment__title strong { font-weight: 700; }

/* -------------------------------------------------------
   Chaque ligne : 2 colonnes égales [icône] | [num+texte]
   step-row--reverse inverse l'ordre : [num+texte] | [icône]
   ------------------------------------------------------- */
.step-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 32px;
  padding: 8px 0;
}

.step-row:last-child { border-bottom: none; }

.step-row--reverse {
  grid-template-columns: 1fr 1fr;
}

.step-row--reverse .step-icon-wrap { order: 2; }
.step-row--reverse .step-block     { order: 1; }

.step-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-icon-img {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

/* Bloc num + texte */
.step-block {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

/* Bloc droite (lignes 2 et 4) : texte aligné à droite */
.step-block--right {
  text-align: right;
  flex-direction: row-reverse;
}

/* Numéro cerclé — fond blanc, texte violet */
.step-num {
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 50%;
  background: var(--blanc);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--violet);
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.step-row:hover .step-num {
  background: var(--vert);
  color: var(--violet);
  transform: scale(1.08);
}

/* Titre étape */
.step-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--blanc);
  margin-bottom: 10px;
  line-height: 1.3;
}

/* Description */
.step-desc {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.65;
}

.step-desc strong {
  color: var(--blanc);
  font-weight: 600;
}

/* Numéro dupliqué pour mobile — caché sur desktop */
.step-num--outside {
  display: none;
}

/* Responsive mobile */
@media (max-width: 768px) {

  .step-row,
  .step-row--reverse {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 24px 0;
  }

  /* Cacher le numéro desktop (dans step-block) sur mobile */
  .step-block .step-num,
  .step-block--right .step-num {
    display: none;
  }

  /* Afficher le numéro mobile (step-num--outside) en premier */
  .step-num--outside {
    display: flex;
    order: 1;
  }

  .step-icon-wrap {
    order: 2;
  }

  .step-block,
  .step-block--right {
    order: 3;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .step-icon-img { width: 100px; height: 100px; }
}


/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .step-row {
    grid-template-columns: 1fr 200px 1fr;
  }
  .step-icon-img { width: 85px; height: 85px; }
}

@media (max-width: 768px) {
  .step-row {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .step-block--left,
  .step-block--right {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .step-block--right {
    flex-direction: column-reverse;
  }

  .step-icons-center {
    order: -1;
  }

  .step-icon-img { width: 90px; height: 90px; }
}


/* =====================================================
   11. SECTION "AVIS CLIENTS"
       Fond blanc, titre centré, carrousel 3 cartes.
       Flèches gauche/droite + points de navigation.
   ===================================================== */

.section-avis {
  background: var(--blanc);
  padding: 72px 0;
}

.section-avis__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* En-tête */
.section-avis__title {
  text-align: center;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 700;
  color: var(--gris-texte);
  margin-bottom: 8px;
}

.section-avis__desc {
  text-align: center;
  font-size: 0.9rem;
  color: var(--gris-sous);
  margin-bottom: 48px;
}

/* Zone du carrousel avec flèches positionnées en dehors */
.avis-carousel-wrap {
  position: relative;
}

/* Boutons flèches (positionnés sur les côtés) */
.avis-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blanc);
  border: 2px solid var(--violet);
  color: var(--violet);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all var(--transition);
  box-shadow: 0 2px 10px rgba(97,97,255,0.12);
}

.avis-arrow:hover {
  background: var(--violet);
  color: var(--blanc);
}

.avis-arrow--prev { left: -56px; }
.avis-arrow--next { right: -56px; }

/* Fenêtre de visibilité du carrousel */
.avis-carousel {
  overflow: hidden;
}

/* Rangée de toutes les cartes (déplacée par JS) */
.avis-track {
  display: flex;
  gap: 20px;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Chaque carte avis */
.avis-card {
  flex: 0 0 calc(33.333% - 14px); /* 3 visibles */
  background: var(--violet-section);
  border-radius: var(--radius-card);
  padding: 24px;
}

/* Nom de l'auteur (violet) */
.avis-card__author {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--violet);
  margin-bottom: 6px;
}

/* Étoiles */
.avis-card__stars {
  font-size: 0.9rem;
  margin-bottom: 12px;
  letter-spacing: 2px;
}

/* Étoile pleine — jaune */
.star--full  { color: #f5a623; }

/* Étoile vide — grise */
.star--empty { color: #ddd; }

/* Texte de l'avis */
.avis-card__text {
  font-size: 0.84rem;
  color: var(--gris-corps);
  line-height: 1.65;
  margin-bottom: 14px;
}

/* Lien "Lire la suite de l'avis" */
.avis-card__link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--violet);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--transition);
}

.avis-card__link:hover { gap: 8px; }

/* Points de navigation (dots) */
.avis-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

.avis-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d0d3f0;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  padding: 0;
}

.avis-dot.active {
  background: var(--violet);
  width: 24px;
  border-radius: 4px;
}


/* =====================================================
   12. SECTION "BLOG / LE COIN DES CONSEILS"
       Fond violet très clair, titre centré, 3 cartes.
   ===================================================== */

.section-blog {
  background: var(--violet-section);
  padding: 72px 0;
}

.section-blog__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* En-tête */
.section-blog__title {
  text-align: center;
  font-size: clamp(1.3rem, 2.5vw, 1.6rem);
  font-weight: 700;
  color: var(--gris-texte);
  margin-bottom: 8px;
}

.section-blog__desc {
  text-align: center;
  font-size: 0.9rem;
  color: var(--gris-sous);
  margin-bottom: 48px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* Grille 3 colonnes */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

/* Chaque carte blog */
.blog-card {
  background: var(--blanc);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(97,97,255,0.07);
  transition: transform var(--transition), box-shadow var(--transition);
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card);
}

/* Lien sur l'image */
.blog-card__img-link {
  display: block;
}

/* Zone image */
.blog-card__img {
  height: 200px;
  overflow: hidden;
  background: var(--violet-section);
  position: relative;
}

.blog-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}

.blog-card:hover .blog-card__img img {
  transform: scale(1.04);
}

/* Placeholder quand pas d'image */
.blog-card__img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--violet);
}

/* Badge catégorie */
.blog-card__cat {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--vert);
  color: #1a6b1a;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-btn);
}

/* Corps de la carte */
.blog-card__body {
  padding: 20px 24px 24px;
}

/* Titre — violet directement comme sur la maquette */
.blog-card__title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 10px;
}

.blog-card__title a {
  color: var(--violet);
  transition: opacity var(--transition);
}

.blog-card__title a:hover {
  opacity: 0.8;
}

/* Chapo / extrait */
.blog-card__excerpt {
  font-size: 0.83rem;
  color: var(--gris-sous);
  line-height: 1.6;
  margin-bottom: 16px;
}

/* Lien "Lire la suite >" */
.blog-card__link {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--violet);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--transition);
}

.blog-card__link:hover { gap: 8px; }

/* Bouton centré sous la grille */
.blog__cta {
  text-align: center;
}

/* Bouton "Découvrir tous nos conseils" */
.btn-blog-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--violet);
  color: var(--blanc);
  padding: 14px 32px;
  border-radius: var(--radius-btn);
  font-size: 0.92rem;
  font-weight: 600;
  transition: background var(--transition), transform var(--transition);
}

.btn-blog-cta:hover {
  background: var(--violet-dark);
  transform: translateY(-2px);
}


/* =====================================================
   13. FOOTER violet
   ===================================================== */

.footer {
  background: var(--violet);
  color: var(--blanc);
  padding: 64px 0 0;
}

.footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Grille 4 colonnes */
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}

/* Logo en blanc */
.footer__brand img {
  height: 34px;
  margin-bottom: 14px;
  filter: brightness(0) invert(1);
}

.footer__brand p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.65;
  margin-bottom: 20px;
}

/* Réseaux sociaux */
.footer__socials {
  display: flex;
  gap: 10px;
}

.footer__social {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--blanc);
  transition: background var(--transition);
}

.footer__social:hover {
  background: rgba(255,255,255,0.25);
}

/* Titres des colonnes (en vert) */
.footer__col h4 {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--vert);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

/* Liens du footer */
.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__col ul li a {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.72);
  display: block;
  transition: color var(--transition), padding-left var(--transition);
}

.footer__col ul li a:hover {
  color: var(--blanc);
  padding-left: 5px;
}

/* Infos contact */
.footer__contact-item {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  align-items: flex-start;
}

.footer__contact-item .ico {
  font-size: 0.9rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.footer__contact-item p,
.footer__contact-item a {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.4;
}

.footer__contact-item a:hover {
  color: var(--vert);
}

/* Barre basse (copyright + liens légaux) */
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.footer__bottom p {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
}

.footer__bottom-links {
  display: flex;
  gap: 18px;
}

.footer__bottom-links a {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
  transition: color var(--transition);
}

.footer__bottom-links a:hover {
  color: var(--blanc);
}


/* =====================================================
   14. ANIMATIONS fade-in au scroll
   ===================================================== */

/* fade-in : invisible SEULEMENT si JS a ajouté js-loaded sur <html>
   Sinon tout reste visible (pas de JS = pas de contenu caché) */
html.js-loaded .fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

html.js-loaded .fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

html.js-loaded .fade-delay-1 { transition-delay: 0.08s; }
html.js-loaded .fade-delay-2 { transition-delay: 0.16s; }
html.js-loaded .fade-delay-3 { transition-delay: 0.24s; }
html.js-loaded .fade-delay-4 { transition-delay: 0.32s; }


/* =====================================================
   15. RESPONSIVE — TABLETTE (≤1024px)
   ===================================================== */

@media (max-width: 1024px) {
  /* Avantages : 2 colonnes */
  .avantages-grid { grid-template-columns: repeat(2, 1fr); }

  /* Blog : 2 colonnes */
  .blog-grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer : 2 colonnes */
  .footer__grid { grid-template-columns: repeat(2, 1fr); }

  /* Comment : 1 colonne */
  /* Section comment : 1 colonne sur mobile */
  .steps-grid { grid-template-columns: 1fr; }

  .step-item--left,
  .step-item--right { flex-direction: column; align-items: center; text-align: center; }

  .step-item--left .step-item__left-col,
  .step-item--right .step-item__right-col { flex-direction: column; align-items: center; text-align: center; }

  .step-item__icon { width: 100px; min-width: 100px; height: 100px; }

  /* Flèches carrousel : moins déportées */
  .avis-arrow--prev { left: -32px; }
  .avis-arrow--next { right: -32px; }
}


/* =====================================================
   16. RESPONSIVE — MOBILE (≤768px)
   ===================================================== */

@media (max-width: 768px) {

  /* Header : masque nav desktop, affiche burger */
  .nav    { display: none; }
  .burger { display: flex; }

  /* Hero : 1 colonne */
  .hero__inner {
    grid-template-columns: 1fr;
    padding: 40px 20px 0;
    gap: 24px;
  }

  .hero__content { padding-bottom: 20px; }

  /* Photo hero : passe au-dessus du texte, image complète visible */
  .hero__visual {
    order: -1;
  }

  .hero__photo {
    max-width: 80%;   /* Réduit la taille pour qu'elle rentre sans être coupée */
    margin: 0 auto;
  }

  .hero__vague--gauche { width: 40%; }
  .hero__vague--droite { width: 50%; }

  /* Barre de recherche : empilée */
  .hero__search {
    flex-direction: column;
    transform: translateY(0);  /* Supprime le décalage qui cachait la réassurance */
  }

  .search-field { width: 100%; }
  .search-sep   { display: none; }
  .btn-search   { width: 100%; justify-content: center; }

  /* Réassurance — s'assure qu'elle est visible */
  .hero__reassurance {
    padding-bottom: 24px;
    justify-content: center;
    text-align: center;
  }

  /* Avantages : 1 colonne */
  .avantages-grid { grid-template-columns: 1fr; }

  /* Blog : 1 colonne */
  .blog-grid { grid-template-columns: 1fr; }

  /* Footer */
  .footer__grid   { grid-template-columns: 1fr 1fr; }
  .footer__bottom { flex-direction: column; text-align: center; }

  /* Carrousel avis : 1 carte */
  .avis-card { flex: 0 0 100%; }

  /* Flèches dans le viewport */
  .avis-arrow--prev { left: 0; }
  .avis-arrow--next { right: 0; }
}


/* =====================================================
   17. RESPONSIVE — PETIT MOBILE (≤480px)
   ===================================================== */

@media (max-width: 480px) {
  .section-avantages { padding: 80px 0 48px; }
  .section-comment    { padding: 48px 0; }
  .section-avis       { padding: 48px 0; }
  .section-blog       { padding: 48px 0; }

  .footer__grid { grid-template-columns: 1fr; }

  .hero__title { font-size: 1.7rem; }

  .step-item {
    flex-direction: column;
    text-align: center;
    padding: 24px 16px;
  }

  .step-item--text-right { flex-direction: column; text-align: center; }
}


/* =====================================================
   PAGES SECONDAIRES — EN-TÊTE + FIL D'ARIANE
   ===================================================== */

/* Hero des pages secondaires */
.page-hero {
  background: var(--violet-section);
  padding: 40px 0 48px;
  border-bottom: 1px solid rgba(97,97,255,0.1);
}

.page-hero__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.page-hero__title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--gris-texte);
  margin-bottom: 10px;
}

.page-hero__desc {
  font-size: 1rem;
  color: var(--gris-sous);
  max-width: 600px;
  line-height: 1.6;
}

/* ---- Fil d'ariane ---- */
.breadcrumb {
  margin-bottom: 20px;
}

.breadcrumb ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--gris-sous);
}

.breadcrumb a {
  color: var(--violet);
  transition: opacity var(--transition);
}

.breadcrumb a:hover { opacity: 0.75; }

.breadcrumb__current {
  color: var(--gris-sous);
  font-weight: 500;
}

.breadcrumb__sep {
  color: var(--gris-sous);
  font-size: 1rem;
}

/* =====================================================
   BLOG — FILTRES CATÉGORIE
   ===================================================== */

.blog-filters {
  background: var(--blanc);
  border-bottom: 1px solid rgba(97,97,255,0.1);
  padding: 16px 0;
  position: sticky;
  top: 64px;   /* Sous le header fixe */
  z-index: 50;
}

.blog-filters__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.blog-filter-btn {
  padding: 7px 18px;
  border-radius: var(--radius-btn);
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--violet);
  background: var(--violet-section);
  border: 1.5px solid transparent;
  transition: all var(--transition);
  cursor: pointer;
}

.blog-filter-btn:hover,
.blog-filter-btn.active {
  background: var(--violet);
  color: var(--blanc);
  border-color: var(--violet);
}

/* =====================================================
   BLOG — LISTE COMPLÈTE
   ===================================================== */

.blog-list {
  padding: 56px 0;
}

.blog-list__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Grille 3 colonnes (même style que l'accueil) */
.blog-grid--full {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 48px;
}

/* Date de l'article */
.blog-card__date {
  font-size: 0.75rem;
  color: var(--gris-sous);
  display: block;
  margin-bottom: 6px;
}

/* Message aucun article */
.blog-empty {
  text-align: center;
  color: var(--gris-sous);
  padding: 64px 0;
  font-size: 1rem;
}

/* =====================================================
   PAGINATION
   ===================================================== */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
  flex-wrap: wrap;
}

.pagination__btn {
  padding: 9px 20px;
  border-radius: var(--radius-btn);
  background: var(--violet-section);
  color: var(--violet);
  font-size: 0.88rem;
  font-weight: 600;
  transition: all var(--transition);
}

.pagination__btn:hover {
  background: var(--violet);
  color: var(--blanc);
}

.pagination__pages {
  display: flex;
  gap: 6px;
  align-items: center;
}

.pagination__page {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--violet);
  background: var(--violet-section);
  transition: all var(--transition);
}

.pagination__page:hover {
  background: var(--violet);
  color: var(--blanc);
}

.pagination__page--active {
  background: var(--violet);
  color: var(--blanc);
  cursor: default;
}

.pagination__dots {
  color: var(--gris-sous);
  padding: 0 4px;
}

/* =====================================================
   RESPONSIVE PAGES SECONDAIRES
   ===================================================== */

@media (max-width: 768px) {
  .blog-grid--full { grid-template-columns: 1fr; }
  .blog-filters     { top: 56px; }
  .page-hero        { padding: 28px 0 32px; }
}

@media (max-width: 1024px) {
  .blog-grid--full { grid-template-columns: repeat(2, 1fr); }
}


/* =====================================================
   PAGE ARTICLE DE BLOG — style Moovebox adapté
   ===================================================== */

/* Image hero pleine largeur */
.article-hero-img {
  width: 100%;
  max-height: 520px;
  overflow: hidden;
  line-height: 0;
}

.article-hero-img img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
}

/* En-tête article */
.article-header {
  background: var(--blanc);
  padding: 40px 0 0;
}

.article-header__inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Méta : catégorie + date + auteur */
.article-header__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  font-size: 0.82rem;
  color: var(--gris-sous);
}

.article-header__cat {
  background: var(--vert);
  color: #1a6b1a;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-btn);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.article-header__auteur {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Titre H1 grand */
.article-header__title {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 700;
  color: var(--gris-texte);
  line-height: 1.2;
  margin-bottom: 20px;
}

/* Chapo */
.article-header__chapo {
  font-size: 1.05rem;
  color: var(--gris-sous);
  line-height: 1.65;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--violet-section);
}

/* ---- Corps de l'article ---- */
.article-body {
  background: var(--blanc);
  padding: 48px 0;
}

.article-body__inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Typographie du contenu */
.article-body__inner h1,
.article-body__inner h2,
.article-body__inner h3 {
  color: var(--gris-texte);
  font-weight: 700;
  line-height: 1.3;
  margin: 36px 0 14px;
}

.article-body__inner h1 { font-size: 1.8rem; display: none; } /* H1 déjà dans le header */
.article-body__inner h2 { font-size: 1.3rem; color: var(--gris-texte); }
.article-body__inner h3 { font-size: 1.05rem; color: var(--violet); }

.article-body__inner p {
  font-size: 0.97rem;
  color: #444;
  line-height: 1.8;
  margin-bottom: 18px;
}

/* Listes avec puces carrées violettes */
.article-body__inner ul,
.article-body__inner ol {
  padding-left: 0;
  margin-bottom: 20px;
  list-style: none;
}

.article-body__inner ul li {
  font-size: 0.97rem;
  color: #444;
  line-height: 1.7;
  margin-bottom: 8px;
  padding-left: 22px;
  position: relative;
}

/* Puce carrée violette */
.article-body__inner ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background: var(--violet);
  border-radius: 2px;
  flex-shrink: 0;
}

.article-body__inner ol {
  counter-reset: ol-counter;
  padding-left: 0;
}

.article-body__inner ol li {
  counter-increment: ol-counter;
  font-size: 0.97rem;
  color: #444;
  line-height: 1.7;
  margin-bottom: 8px;
  padding-left: 32px;
  position: relative;
}

.article-body__inner ol li::before {
  content: counter(ol-counter);
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  background: var(--violet);
  color: var(--blanc);
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.article-body__inner strong {
  font-weight: 600;
  color: var(--gris-texte);
}

.article-body__inner a {
  color: var(--violet);
  text-decoration: underline;
}

.article-body__inner a:hover { opacity: 0.8; }

.article-body__inner img {
  max-width: 100%;
  border-radius: var(--radius-card);
  margin: 24px 0;
}

/* CTA bas d'article */
.article-cta {
  background: var(--violet-section);
  border-radius: var(--radius-card);
  padding: 36px;
  text-align: center;
  margin-top: 48px;
}

.article-cta p {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gris-texte);
  margin-bottom: 16px;
}

.btn-article-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--violet);
  color: #ffffff !important;
  padding: 14px 36px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-decoration: none !important;
  transition: background var(--transition), transform var(--transition);
}

.btn-article-cta:hover {
  background: var(--rouge);
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* Partage réseaux sociaux */
.article-share {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--violet-section);
  font-size: 0.85rem;
  color: var(--gris-sous);
  font-weight: 600;
}

.article-share a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--violet-section);
  color: var(--violet);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}

.article-share a:hover {
  background: var(--violet);
  color: var(--blanc);
}

/* ---- Articles similaires ---- */
.section-similaires {
  background: var(--violet-section);
  padding: 56px 0;
}

.section-similaires__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section-similaires__title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gris-texte);
  text-align: center;
  margin-bottom: 40px;
}

/* ---- Section articles géolocalisés ---- */
.section-geo {
  background: var(--blanc);
  padding: 56px 0;
}

.section-geo__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section-geo__title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gris-texte);
  text-align: center;
  margin-bottom: 8px;
}

.section-geo__desc {
  text-align: center;
  color: var(--gris-sous);
  font-size: 0.9rem;
  margin-bottom: 40px;
}

/* Grille 6 articles géo : 3 colonnes × 2 lignes */
.blog-grid--geo {
  grid-template-columns: repeat(3, 1fr);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .article-hero-img { max-height: 280px; }
  .article-hero-img img { height: 280px; }
  .article-header__title { font-size: 1.5rem; }
  .article-header__chapo { font-size: 0.95rem; }
  .article-body__inner h2 { font-size: 1.1rem; }
}