/*
#|#|#|##|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|
#|                                                                                                                            						 #|
#|  ███╗   ██╗██╗   ██╗ ██████╗██╗     ███████╗██╗   ██╗███████╗    ███████╗██╗   ██╗███████╗████████╗███████╗███╗   ███╗              ██╗██████╗    #|
#|  ████╗  ██║██║   ██║██╔════╝██║     ██╔════╝██║   ██║██╔════╝    ██╔════╝╚██╗ ██╔╝██╔════╝╚══██╔══╝██╔════╝████╗ ████║    ██╗   ██╗███║╚════██╗   #|
#|  ██╔██╗ ██║██║   ██║██║     ██║     █████╗  ██║   ██║███████╗    ███████╗ ╚████╔╝ ███████╗   ██║   █████╗  ██╔████╔██║    ██║   ██║╚██║ █████╔╝   #|
#|  ██║╚██╗██║██║   ██║██║     ██║     ██╔══╝  ██║   ██║╚════██║    ╚════██║  ╚██╔╝  ╚════██║   ██║   ██╔══╝  ██║╚██╔╝██║    ╚██╗ ██╔╝ ██║██╔═══╝    #|
#|  ██║ ╚████║╚██████╔╝╚██████╗███████╗███████╗╚██████╔╝███████║    ███████║   ██║   ███████║   ██║   ███████╗██║ ╚═╝ ██║     ╚████╔╝  ██║███████╗   #|
#|  ╚═╝  ╚═══╝ ╚═════╝  ╚═════╝╚══════╝╚══════╝ ╚═════╝ ╚══════╝    ╚══════╝   ╚═╝   ╚══════╝   ╚═╝   ╚══════╝╚═╝     ╚═╝      ╚═══╝   ╚═╝╚══════╝   #|
#|                                                                                                                           						 #|
#|           Theme NUCLEUS v12.0.0 for Wordpress, héritage SYSTEM TEMPLATE - fait avec ♥ par Romain-NT - Gam'NT Services - 2022 -> 2026              #|
#|                                                                                                                      					         #|
#|#|#|##|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|
#|
#|  10. PAGES INTERIEURES NUCLEUS
#|   - 10.0 Gradient text (partagé avec home.css)
#|   - 10.0b Section titles premium (homogénéisation H2 + intro)
#|   - 10.1 Hero page interieure (image + contenu)
#|   - 10.2 Section prestations
#|   - 10.3 Processus en etapes
#|   - 10.4 Garanties
#|   - 10.5 Engagements detailles
#|   - 10.6 Page contact
#|   - 10.7 Zone d'intervention
#|   - 10.8 Horaires
#|   - 10.9 CTA section
#|   - 10.10 Responsive pages interieures
#|   - 10.11 Accordeons prestations
#|   - 10.12 Boxes prestation (carrees)
#|   - 10.13 Responsive accordeons
#|   - 10.14 Single prestation
#|   - 10.15 Responsive single prestation
#|   - 10.16 Listing reconditionnes
#|   - 10.17 Single reconditionne — fiche produit
#|   - 10.18 Responsive listing reconditionnes
#|   - 10.19 Galerie sticky
#|   - 10.20 Prix + CTA centres
#|   - 10.21 Badges garantie
#|   - 10.22 Mini accordeons
#|   - 10.23 Nous reconditionnons avec passion
#|   - 10.24 FAQ — boxes fond sombre
#|   - 10.25 CTA final — fond vert clair
#|   - 10.26 Responsive single recon V4
#|   - 10.27 Page listing reconditionnes — fond clair + filtres
#|   - 10.28 Reassurance — integree au listing
#|   - 10.29 Slider etapes "La qualite Gam'NT"
#|   - 10.30 Section passion — Made in Mazieres
#|   - 10.31 Slider marques
#|   - 10.32 Responsive page listing
#|   - 10.33 Frais fixes transverses
#|   - 10.34 Ce qui fait la difference Gam'NT
#|   - 10.35 Onglets prestations premium
#|   - 10.36 Animations icones Nucleus au hover
#|   - 10.37 CTA final "Seconde vie"
#|
====================-FIN-=======================
*/

/* --===== 10.0 Gradient text (partagé avec home.css) =====-- */

.gradient-text{
  background:linear-gradient(
    90deg,
    #158745 0%,
    #f4ce35 25%,
    #158745 50%,
    #f4ce35 75%,
    #158745 100%
  );
  background-size:400% 100%;
  background-position:0% 0;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

/* Variantes mono-couleur : pour rappeler le gradient sans l'utiliser */
/* Permet de varier vert / dore / gradient sur les titres pour eviter la surcharge */
.text-green{
  color:var(--brand-green);
}

.text-gold{
  color:var(--brand-gold);
}

/* --===== 10.0b Section titles premium =====-- */
/* Homogeneise tous les H2 et intros des sections pages interieures.
   - Tailles responsive avec clamp() (s'adapte mobile/desktop sans media query)
   - Letter-spacing serre (-0.02em) = look moderne SaaS
   - Underline gradient subtil sous .gradient-text = touche premium
   - Animation reveal-up specifique aux titres
*/

.section-title{
  font-family:"Sora", system-ui, sans-serif;
  font-size:clamp(2rem, 3.5vw, 3rem);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.15;
  margin:0 0 1.25rem;
  color:var(--section-light-text);
  text-align:center;
}

.section-intro{
  font-family:"Sora", system-ui, sans-serif;
  font-size:clamp(1rem, 1.4vw, 1.15rem);
  font-weight:400;
  line-height:1.6;
  color:var(--section-light-muted);
  max-width:640px;
  margin:0 auto 3rem;
}

/* Effet premium : trait sous les mots colores dans les .section-title */
/* On adapte la couleur du trait a la couleur du mot :
   - .gradient-text -> trait gradient vert->dore
   - .text-green    -> trait vert plein
   - .text-gold     -> trait dore plein
   L'animation se declenche quand le titre est reveille (reveal). */

.section-title .gradient-text,
.section-title .text-green,
.section-title .text-gold{
  position:relative;
  display:inline-block;
  padding-bottom:.05em;
}

.section-title .gradient-text::after,
.section-title .text-green::after,
.section-title .text-gold::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  border-radius:2px;
  /* Animation : le trait se dessine apres l'apparition du titre */
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 800ms cubic-bezier(.22,1,.36,1) 200ms;
}

/* Couleur du trait selon la couleur du mot */
.section-title .gradient-text::after{
  background:linear-gradient(90deg, var(--brand-green) 0%, var(--brand-gold) 100%);
}
.section-title .text-green::after{
  background:var(--brand-green);
}
.section-title .text-gold::after{
  background:var(--brand-gold);
}

/* Quand le titre est revele, le trait se dessine */
.reveal.is-visible .gradient-text::after,
.reveal.is-visible .text-green::after,
.reveal.is-visible .text-gold::after,
.section-title.is-visible .gradient-text::after,
.section-title.is-visible .text-green::after,
.section-title.is-visible .text-gold::after{
  transform:scaleX(1);
}

/* Si on ne respecte pas les preferences d'animation, trait visible direct */
@media (prefers-reduced-motion: reduce){
  .section-title .gradient-text::after,
  .section-title .text-green::after,
  .section-title .text-gold::after{
    transform:scaleX(1);
    transition:none;
  }
}

/* --===== 10.1 Hero page interieure — image + contenu =====-- */

.page-hero{
  padding:clamp(2.5rem, 5vw, 4rem) 0;
  width:100%;
  background:var(--section-light-alt, #e4efe6);
  position:relative;
}

/* UNE seule carte blanche qui contient tout le hero */
.page-hero__inner{
  width:min(1600px, calc(100% - 80px));
  margin:0 auto;
  position:relative;
}

.page-hero__card{
  background:#fff;
  border-radius:20px;
  box-shadow:0 20px 50px rgba(21,135,69,.08), 0 4px 12px rgba(0,0,0,.04);
  border:1px solid rgba(21,135,69,.1);
  position:relative;
  overflow:hidden;
  padding:clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem) 0;
}

/* Barre gradient décorative en haut de la carte */
.page-hero__card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, #158745, #f4ce35);
  z-index:2;
}

/* Image positionnée en bas à droite de la carte */
.page-hero__visual{
  position:absolute;
  right:80px;
  bottom:0;
  width:280px;
  max-width:40%;
  max-height:calc(100% - 1rem);
  z-index:1;
}

.page-hero__visual img{
  display:block;
  width:100%;
  height:auto;
  max-height:100%;
  object-fit:contain;
  object-position:bottom center;
}

.page-hero__content{
  color:var(--section-light-text, #1a2a1a);
  padding-bottom:clamp(2rem, 4vw, 3rem);
  padding-right:calc(200px + clamp(1.5rem, 3vw, 2.5rem) + 100px);
  min-height:200px;
  position:relative;
  z-index:0;
}

/* Clearfix pour que la carte englobe bien le float */
.page-hero__card::after{
  content:"";
  display:table;
  clear:both;
}

/* Si pas d'image — contenu pleine largeur centré */
.page-hero__card:not(:has(.page-hero__visual)) .page-hero__content,
.page-hero__content--full{
  text-align:center;
}

.page-hero__badge{
  display:inline-block;
  align-self:flex-start;
  margin-bottom:1.5rem;
  padding:.45rem 1rem;
  border-radius:999px;
  background:rgba(21,135,69,.10);
  border:1px solid rgba(21,135,69,.18);
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.02em;
  color:#158745;
}

.page-hero__content--full .page-hero__badge{
  align-self:center;
}

.page-hero__title{
  margin:0 0 1rem;
  font-size:clamp(2rem, 3.5vw, 3rem);
  font-weight:800;
  line-height:1.1;
  color:var(--section-light-text, #1a2a1a);
}

.page-hero__intro{
  margin:0;
  font-size:1.15rem;
  line-height:1.7;
  color:var(--section-light-muted, #4a5a4a);
}

.page-hero__content--full .page-hero__intro{
  max-width:600px;
}

/* --===== Coches de confiance animées =====-- */

.trust-check{
  width:32px;
  height:32px;
  flex:0 0 32px;
}

.trust-check__circle{
  fill:none;
  stroke:#158745;
  stroke-width:2;
}

.trust-check__tick{
  fill:none;
  stroke:#158745;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Animations : item + cercle + tick */
@keyframes trust-item-pop{
  from{ opacity:0; transform:scale(0.6); }
  to{ opacity:1; transform:scale(1); }
}

@keyframes check-draw-circle{
  from{ stroke-dasharray:62.83; stroke-dashoffset:62.83; }
  to{ stroke-dasharray:62.83; stroke-dashoffset:0; }
}

@keyframes check-draw-tick{
  from{ stroke-dasharray:20; stroke-dashoffset:20; }
  to{ stroke-dasharray:20; stroke-dashoffset:0; }
}

.page-hero__trust{
  display:flex;
  gap:1.2rem;
  flex-wrap:wrap;
  margin-top:1.5rem;
}

.page-hero__trust-item{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.9rem;
  font-weight:500;
  color:#2a4a1a;
  opacity:0;
  transform:scale(0.6);
  transition:opacity .4s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}

.page-hero__trust-item.is-drawn{
  opacity:1;
  transform:scale(1);
}

.page-hero__trust-item.is-drawn .trust-check__circle{
  stroke-dashoffset:0;
}

.page-hero__trust-item.is-drawn .trust-check__tick{
  stroke-dashoffset:0;
}

/* --===== 10.2 Section prestations =====-- */

.page-services{
  padding:clamp(2.5rem, 5vw, 3.5rem) 0;
  background:var(--bg);
}

/* --===== 10.3 Processus en etapes =====-- */

.page-process{
  padding:clamp(2.5rem, 5vw, 3.5rem) 0;
}

.process-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.5rem;
  margin-bottom:2rem;
}

.process-step{
  display:flex;
  flex-direction:column;
  gap:1rem;
  padding:2rem 1.5rem;
  border-radius:20px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  transition:transform var(--ease-nucleus), border-color var(--ease-nucleus), box-shadow var(--ease-nucleus);
}

.process-step:hover{
  transform:translateY(-3px);
  border-color:rgba(21,135,69,.25);
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}

.process-step__number{
  font-size:2rem;
  font-weight:800;
  line-height:1;
  background:linear-gradient(135deg,#158745,#f4ce35);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.process-step__body h3{
  margin:0 0 .5rem;
  font-size:1.05rem;
  font-weight:600;
  color:#fff;
}

.process-step__body p{
  margin:0;
  font-size:.9rem;
  line-height:1.55;
  color:var(--muted);
}

/* --===== 10.4 Garanties =====-- */

.page-guarantees{
  padding:clamp(2.5rem, 5vw, 3.5rem) 0;
  background:var(--section-light);
  color:var(--section-light-text);
}

.page-guarantees .section-title{ color:var(--section-light-text); text-align:center; }
.page-guarantees .section-intro{ color:var(--section-light-muted); text-align:center; }

.guarantees-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.25rem;
  max-width:1200px;
  margin:0 auto;
}

.guarantee-item{
  text-align:center;
  padding:2rem 1.5rem;
  border-radius:var(--radius-lg);
  background:#fff;
  /* Bordure verte plus marquee (identique a .difference-card) */
  border:1.5px solid rgba(21,135,69,.18);
  box-shadow:0 6px 22px rgba(21,135,69,.10);
  transition:border-color var(--ease-nucleus-slow),
             box-shadow var(--ease-nucleus-slow),
             transform var(--ease-nucleus-slow);
  position:relative;
  overflow:hidden;
}

/* Liseret gradient au survol (5px renforcé) */
.guarantee-item::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:5px;
  background:linear-gradient(90deg, var(--brand-green) 0%, var(--brand-gold) 100%);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--ease-nucleus-slow);
}

.guarantee-item:hover{
  border-color:rgba(21,135,69,.38);
  box-shadow:0 16px 40px rgba(21,135,69,.18);
  transform:translateY(-4px);
}

.guarantee-item:hover::before{
  transform:scaleX(1);
}

.guarantee-item__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:.8rem;
  line-height:1;
}
.guarantee-item__icon svg{
  display:block;
}
.guarantee-item h3{ margin:0 0 .8rem; font-size:1rem; font-weight:600; color:var(--section-light-text); line-height:1.4; }
.guarantee-item p{ margin:0; font-size:.88rem; line-height:1.5; color:var(--section-light-muted); }

/* Badge durée dans le titre (1 an / 6 mois / 3 mois / etc.) */
.guarantee-item__badge{
  display:inline-block;
  margin-top:.35rem;
  padding:.18rem .7rem;
  background:linear-gradient(135deg, var(--brand-green) 0%, var(--brand-gold) 100%);
  color:#fff;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.3px;
  border-radius:999px;
  box-shadow:0 3px 10px rgba(21,135,69,.20);
}

/* --===== 10.5 Engagements detailles =====-- */

.page-engagements{
  padding:clamp(2.5rem, 5vw, 3.5rem) 0;
  background:var(--section-light);
  color:var(--section-light-text);
}

.engagements-full{ display:flex; flex-direction:column; gap:3rem; }

.engagement-full{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:2rem;
  padding:2.5rem;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--section-light-border);
  box-shadow:0 2px 16px rgba(0,0,0,.04);
  transition:border-color var(--ease-nucleus), box-shadow var(--ease-nucleus);
}

.engagement-full:hover{ border-color:rgba(21,135,69,.25); box-shadow:0 8px 30px rgba(21,135,69,.08); }

.engagement-full__icon{ font-size:2.5rem; line-height:1; padding-top:.3rem; }
.engagement-full__number{ font-size:1.4rem; font-weight:800; line-height:1; background:linear-gradient(135deg,#158745,#f4ce35); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:.6rem; }
.engagement-full__content h2{ margin:0 0 1rem; font-size:1.3rem; font-weight:700; color:var(--section-light-text); }
.engagement-full__content p{ margin:0 0 .8rem; font-size:.92rem; line-height:1.6; color:var(--section-light-muted); }
.engagement-full__checks{ display:flex; flex-direction:column; gap:.4rem; margin-top:1rem; }
.engagement-full__checks span{ font-size:.88rem; font-weight:500; color:var(--section-light-text); }
.engagement-full__note{ display:block; margin-top:.8rem; font-size:.8rem; color:var(--section-light-muted); font-style:italic; }

/* ======================================================
=   PAGE ENGAGEMENTS — refonte premium : lignes alternées image/texte
====================================================== */

/* Fonds de la page */
.engagements-page{ background:#ECF6F0; }
.engagements-page .page-hero{ background:#ECF6F0; }
.engagements-page .home-engagements{ background:#fff; }      /* chiffres en blanc */
.engagements-page .page-cta-section{ background:#ECF6F0; }   /* CTA en vert */

/* Liste en lignes alternées */
.engagements-rows{
  display:flex;
  flex-direction:column;
  gap:clamp(3rem, 6vw, 6rem);
}

.engagement-row{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 4.5vw, 4.5rem);
  align-items:center;
}

/* Lignes paires (--alt) : image à GAUCHE, texte à DROITE */
.engagement-row--alt .engagement-row__text{ order:2; }
.engagement-row--alt .engagement-row__visual{ order:1; }

/* ===== Visuel (photo) — bordure gradient + halo + blob ===== */
.engagement-row__visual{
  position:relative;
  aspect-ratio:4/3;
  border-radius:28px;
  padding:2.5px;                                /* épaisseur de la bordure gradient */
  background:linear-gradient(135deg, rgba(21,135,69,.6), rgba(244,206,53,.45));
  box-shadow:0 28px 64px rgba(21,135,69,.2);
  isolation:isolate;
  transition:transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s ease, background .55s ease;
}
/* Blob décoratif flou derrière la photo (profondeur) */
.engagement-row__visual::before{
  content:"";
  position:absolute;
  width:62%;
  aspect-ratio:1;
  bottom:-14%;
  right:-12%;
  background:radial-gradient(circle, rgba(244,206,53,.4), transparent 70%);
  filter:blur(34px);
  z-index:-1;
  transition:opacity .55s ease;
}
.engagement-row--alt .engagement-row__visual::before{
  right:auto;
  left:-12%;
}
/* Conteneur média : clippe le zoom (l'image ne déborde plus) */
.engagement-row__media{
  position:relative;
  width:100%;
  height:100%;
  border-radius:25.5px;
  overflow:hidden;
}
.engagement-row__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .8s cubic-bezier(.22,1,.36,1);
}
/* Voile dégradé en bas (lisibilité + chic) */
.engagement-row__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(6,20,12,.3), transparent 45%);
  pointer-events:none;
  transition:opacity .55s ease;
}

/* ===== HOVER premium : lift + zoom clippé + bordure lumineuse + glow ===== */
.engagement-row:hover .engagement-row__visual{
  transform:translateY(-10px);
  box-shadow:0 40px 84px rgba(21,135,69,.3);
  background:linear-gradient(135deg, rgba(21,135,69,.9), rgba(244,206,53,.72));
}
.engagement-row:hover .engagement-row__media img{
  transform:scale(1.06);
}
.engagement-row:hover .engagement-row__media::after{
  opacity:.6;
}
.engagement-row:hover .engagement-row__visual::before{
  opacity:1.4;
}

/* ===== Badge numéro flottant sur la photo (halo pulsant comme le slider) ===== */
.engagement-row__badge{
  position:absolute;
  top:-20px;
  left:-20px;
  z-index:3;
  width:66px;
  height:66px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Sora", system-ui, sans-serif;
  font-size:1.5rem;
  font-weight:800;
  line-height:1;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.22);
  background:linear-gradient(135deg, #158745, #f4ce35);
  border:4px solid #ECF6F0;                     /* = couleur du fond de section */
  border-radius:50%;
  box-shadow:0 12px 28px rgba(21,135,69,.32);
  transition:transform .55s cubic-bezier(.34,1.56,.64,1), box-shadow .45s ease;
}
/* Halo doré pulsant derrière le badge (animation continue) */
.engagement-row__badge::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(244,206,53,.45) 0%, rgba(244,206,53,0) 70%);
  z-index:-1;
  animation:recond-num-halo 2.8s ease-in-out infinite;
}
/* Au survol de la ligne : le badge pop, pivote, halo plus rapide */
.engagement-row:hover .engagement-row__badge{
  transform:scale(1.12) rotate(-6deg);
  box-shadow:0 16px 34px rgba(21,135,69,.4);
}
.engagement-row:hover .engagement-row__badge::before{
  animation-duration:1.2s;
}
/* Sur lignes alt, badge côté texte (à droite de la photo) */
.engagement-row--alt .engagement-row__badge{
  left:auto;
  right:-20px;
}

/* ===== Colonne texte ===== */
.engagement-row__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand-green);
  padding:.45rem 1.05rem;
  border-radius:100px;
  background:rgba(21,135,69,.08);
  border:1px solid rgba(21,135,69,.2);
  margin-bottom:1.2rem;
  transition:background .45s ease, color .45s ease, border-color .45s ease;
}
.engagement-row__eyebrow::before{
  content:"";
  width:.5rem;
  height:.5rem;
  border-radius:50%;
  background:linear-gradient(135deg, #158745, #f4ce35);
  transition:background .45s ease, transform .45s ease;
}
/* Au survol de la ligne : la pastille se remplit en vert */
.engagement-row:hover .engagement-row__eyebrow{
  background:var(--brand-green);
  border-color:var(--brand-green);
  color:#fff;
}
.engagement-row:hover .engagement-row__eyebrow::before{
  background:#fff;
  transform:scale(1.2);
}
.engagement-row__text h2{
  margin:0 0 1.1rem;
  font-size:clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight:700;
  line-height:1.2;
  color:var(--section-light-text, #1a2a1a);
}
.engagement-row__text p{
  margin:0 0 .9rem;
  font-size:.96rem;
  line-height:1.7;
  color:var(--section-light-muted, #5a6a5a);
}

/* ===== Checks en pills premium ===== */
.engagement-row__checks{
  list-style:none;
  margin:1.5rem 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.engagement-row__checks li{
  position:relative;
  padding:.8rem 1.1rem .8rem 3.1rem;
  font-size:.92rem;
  font-weight:600;
  line-height:1.4;
  color:var(--section-light-text, #1a2a1a);
  background:#fff;
  border:1px solid rgba(21,135,69,.14);
  border-radius:14px;
  box-shadow:0 6px 18px rgba(21,135,69,.06);
  transition:transform .3s ease, box-shadow .3s ease;
}
.engagement-row__checks li:hover{
  transform:translateX(4px);
  box-shadow:0 10px 26px rgba(21,135,69,.12);
}
.engagement-row__checks li::before{
  content:"\2713";                              /* ✓ */
  position:absolute;
  left:.9rem;
  top:50%;
  transform:translateY(-50%);
  width:1.55rem;
  height:1.55rem;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  font-weight:800;
  color:#fff;
  background:linear-gradient(135deg, #158745, #f4ce35);
  border-radius:50%;
  box-shadow:0 3px 8px rgba(21,135,69,.25);
}
.engagement-row__note{
  display:block;
  margin-top:1rem;
  font-size:.8rem;
  font-style:italic;
  color:var(--section-light-muted, #5a6a5a);
}

/* ===== Responsive : on empile, image au-dessus du texte ===== */
@media (max-width:840px){
  .engagement-row{
    grid-template-columns:1fr;
    gap:1.5rem;
  }
  .engagement-row__text,
  .engagement-row--alt .engagement-row__text{ order:2; }
  .engagement-row__visual,
  .engagement-row--alt .engagement-row__visual{ order:1; }
  .engagement-row__visual{ aspect-ratio:16/10; }
  .engagement-row__badge{ width:54px; height:54px; font-size:1.25rem; top:-16px; left:-16px; }
  .engagement-row--alt .engagement-row__badge{ left:auto; right:-16px; }
}

/* ======================================================
=   PAGES LÉGALES (RGPD / Mentions légales / CGV)
=   Fond vert + box flottante premium, contenu éditable
====================================================== */

.legal-page{ background:#ECF6F0; }
.legal-page .page-hero{ background:#ECF6F0; }

.legal-section{
  background:#ECF6F0;
  padding:0 0 clamp(3rem, 6vw, 5rem);
}

/* Box flottante : MÊME largeur que le hero standard (remplit le container) */
.legal-box{
  box-sizing:border-box;
  margin:0 auto;
  background:#fff;
  border-radius:22px;
  border:1px solid rgba(21,135,69,.1);
  box-shadow:0 20px 50px rgba(21,135,69,.08), 0 4px 12px rgba(0,0,0,.04);
  padding:clamp(2rem, 4vw, 3.5rem);
  position:relative;
  overflow:hidden;
}
/* Barre gradient décorative en haut (comme la carte hero) */
.legal-box::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, var(--brand-green), var(--brand-gold));
}

/* --- Typographie du contenu éditable (the_content) --- */
.legal-box > *:first-child{ margin-top:0; }

/* Tampon rond "Dernière mise à jour" (date dynamique, texte courbé) */
.legal-box{ position:relative; }            /* ancrage du tampon (déjà relative normalement) */
.legal-stamp{
  position:absolute;
  top:18px;
  right:20px;
  width:118px;
  height:118px;
  color:var(--brand-green);
  opacity:.82;
  transform:rotate(-13deg);                  /* léger penché "à la main" — mets -45deg pour 45° */
  transform-origin:center;
  z-index:3;
  pointer-events:none;                        /* ne gêne pas la sélection du texte dessous */
}
.legal-stamp svg{ width:100%; height:100%; display:block; overflow:visible; }
.legal-stamp__arc{
  font-family:"Sora", system-ui, sans-serif;
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.5px;
  fill:#fff;
}
.legal-stamp__date{
  font-family:"Sora", system-ui, sans-serif;
  font-size:13px;
  font-weight:800;
  letter-spacing:.3px;
  fill:currentColor;
}
.legal-stamp__dot{ font-size:9px; fill:currentColor; }

@media (max-width:600px){
  .legal-stamp{ width:90px; height:90px; top:12px; right:12px; }
}

.legal-box h2{
  margin:2.2rem 0 1rem;
  font-size:clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight:700;
  line-height:1.3;
  color:var(--section-light-text, #1a2a1a);
  padding-bottom:.55rem;
  border-bottom:2px solid rgba(21,135,69,.14);
}
.legal-box h3{
  margin:1.6rem 0 .7rem;
  font-size:1.1rem;
  font-weight:600;
  color:var(--brand-green);
}
.legal-box p{
  margin:0 0 1rem;
  font-size:.95rem;
  line-height:1.75;
  color:var(--section-light-muted, #5a6a5a);
}
.legal-box ul,
.legal-box ol{
  margin:0 0 1.2rem;
  padding-left:1.4rem;
}
.legal-box li{
  margin-bottom:.5rem;
  font-size:.95rem;
  line-height:1.7;
  color:var(--section-light-muted, #5a6a5a);
}
.legal-box li::marker{ color:var(--brand-green); }
.legal-box a{
  color:var(--brand-green);
  text-decoration:underline;
  text-underline-offset:2px;
}
.legal-box a:hover{ color:#0f6332; }
.legal-box strong{ color:var(--section-light-text, #1a2a1a); font-weight:600; }
.legal-box small{ color:var(--section-light-muted, #5a6a5a); font-size:.82rem; }
.legal-box hr{
  border:0;
  height:1px;
  background:rgba(21,135,69,.14);
  margin:2rem 0;
}
/* Tableaux éventuels (ex: cookies, durées de conservation) */
.legal-box table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 1.2rem;
}
.legal-box th,
.legal-box td{
  border:1px solid rgba(21,135,69,.15);
  padding:.6rem .8rem;
  text-align:left;
  font-size:.9rem;
  line-height:1.5;
}
.legal-box th{
  background:rgba(21,135,69,.06);
  color:var(--section-light-text, #1a2a1a);
  font-weight:600;
}

/* --===== 10.6 Page contact =====-- */

.page-contact{ padding:clamp(2.5rem, 5vw, 3.5rem) 0; background:var(--bg); }

.contact-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; }

.contact-card{
  text-align:center;
  padding:2.5rem 2rem;
  border-radius:20px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  transition:transform var(--ease-nucleus), border-color var(--ease-nucleus), box-shadow var(--ease-nucleus);
}

.contact-card:hover{ transform:translateY(-4px); border-color:rgba(21,135,69,.28); box-shadow:0 16px 36px rgba(0,0,0,.14), 0 0 16px rgba(21,135,69,.08); }

.contact-card__icon{ width:56px; height:56px; margin:0 auto 1.5rem; }
.contact-card__icon svg{ width:100%; height:100%; }
.contact-card__title{ margin:0 0 .5rem; font-size:1.1rem; font-weight:600; color:#fff; }
.contact-card__text{ margin:0 0 1rem; font-size:.88rem; line-height:1.5; color:var(--muted); }
.contact-card__link{ display:inline-block; font-size:1rem; font-weight:600; color:var(--brand-green); text-decoration:none; transition:color var(--ease-nucleus); }
.contact-card__link:hover{ color:var(--brand-gold); }

/* --===== 10.7 Zone d'intervention =====-- */

.page-zone{ padding:clamp(2.5rem, 5vw, 3.5rem) 0; }

.zone-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; max-width:900px; margin:0 auto; }

.zone-card{
  text-align:center; padding:2rem 1.5rem; border-radius:16px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  transition:border-color var(--ease-nucleus), box-shadow var(--ease-nucleus);
}
.zone-card:hover{ border-color:rgba(21,135,69,.25); box-shadow:0 8px 24px rgba(0,0,0,.12); }
.zone-card__dept{ margin:0 0 .3rem; font-size:2.2rem; font-weight:800; background:linear-gradient(135deg,#158745,#f4ce35); -webkit-background-clip:text; background-clip:text; color:transparent; }
.zone-card__name{ margin:0 0 .4rem; font-size:1.05rem; font-weight:600; color:#fff; }
.zone-card__detail{ margin:0; font-size:.85rem; color:var(--muted); }

/* --===== 10.8 Horaires =====-- */

.page-hours{ padding:clamp(2.5rem, 5vw, 3.5rem) 0; background:var(--section-light); color:var(--section-light-text); }
.page-hours .section-title{ color:var(--section-light-text); }
.page-hours .section-intro{ color:var(--section-light-muted); }

.hours-block{
  max-width:500px; margin:0 auto 2rem; border-radius:16px;
  background:#fff; border:1px solid var(--section-light-border);
  box-shadow:0 2px 12px rgba(0,0,0,.04); overflow:hidden;
}
.hours-row{ display:flex; justify-content:space-between; padding:1rem 1.5rem; border-bottom:1px solid var(--section-light-border); }
.hours-row:last-child{ border-bottom:0; }
.hours-day{ font-weight:600; font-size:.95rem; color:var(--section-light-text); }
.hours-time{ font-size:.95rem; color:var(--section-light-muted); }
.hours-row--closed .hours-day, .hours-row--closed .hours-time{ color:var(--section-light-muted); opacity:.6; }

/* --===== 10.9 CTA section =====-- */

.page-cta-section{ padding:clamp(2.5rem, 5vw, 3.5rem) 0; }

/* Page Prestations : fond de base vert clair (évite que le fond sombre du body
   transparaisse derrière les sections transparentes comme le CTA) */
.presta-page{
  background:#ECF6F0;
}
.presta-page .page-cta-section{
  background:#ECF6F0;
}
.page-cta-block{ text-align:center; }
.page-cta-block .section-cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* --===== 10.10 Responsive pages interieures =====-- */

@media (max-width:840px){
  .page-hero__visual{
    position:static;
    width:100%;
    max-width:240px;
    margin:1rem auto 0;
    order:-1;
  }

  .page-hero__visual img{
    max-height:260px;
  }

  .page-hero__content{
    padding:0;
    padding-right:0;
    padding-bottom:clamp(1.5rem, 4vw, 2.5rem);
    text-align:center;
    min-height:auto;
    display:flex;
    flex-direction:column;
  }

  .page-hero__content .page-hero__badge{
    align-self:center;
  }

  .page-hero__content .page-hero__intro{
    max-width:100%;
  }

  .page-hero__trust{
    justify-content:center;
  }

  .process-grid{ grid-template-columns:repeat(2, 1fr); }
  .guarantees-grid{ grid-template-columns:repeat(2, 1fr); }
  .contact-grid{ grid-template-columns:1fr; }
  .zone-grid{ grid-template-columns:1fr; }
  .engagement-full{ grid-template-columns:1fr; }
  .engagement-full__icon{ text-align:center; }
}

@media (max-width:480px){
  .process-grid{ grid-template-columns:1fr; }
  .guarantees-grid{ grid-template-columns:1fr; }

  .page-hero__visual img{
    max-height:200px;
  }
}

/* --===== 10.11 Accordeons prestations =====-- */

.page-accordions{
  padding:clamp(2.5rem, 5vw, 3.5rem) 0;
  background:var(--section-light-alt, #e4efe6);
  color:var(--section-light-text);
}

.page-accordions .section-title{ color:var(--section-light-text); }
.page-accordions .section-intro{ color:var(--section-light-muted); }

.accordion{
  margin-bottom:1rem;
  border-radius:16px;
  border:1px solid var(--section-light-border);
  background:#fff;
  overflow:hidden;
  transition:border-color var(--ease-nucleus), box-shadow var(--ease-nucleus);
}

.accordion:hover{ border-color:rgba(21,135,69,.30); }
.accordion.is-open{ border-color:rgba(21,135,69,.40); box-shadow:0 8px 30px rgba(21,135,69,.12); }

.accordion__header{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:1.5rem 2rem; border:0; background:transparent;
  color:var(--section-light-text); cursor:pointer; font-family:inherit; text-align:left; gap:1.5rem;
  transition:background var(--ease-nucleus);
}
.accordion__header:hover{ background:rgba(21,135,69,.04); }

.accordion__header-left{ display:flex; align-items:center; gap:1.2rem; flex:1; min-width:0; }
.accordion__icon{ font-size:2rem; flex:0 0 auto; line-height:1; }
.accordion__header-text{ min-width:0; }
.accordion__title{ margin:0; font-size:1.15rem; font-weight:600; color:var(--section-light-text); }
.accordion__desc{ margin:.3rem 0 0; font-size:.85rem; color:var(--section-light-muted); line-height:1.4; }
.accordion__header-right{ display:flex; align-items:center; gap:1rem; flex:0 0 auto; }
.accordion__count{ font-size:.78rem; font-weight:500; color:var(--brand-green); background:rgba(21,135,69,.1); border:1px solid rgba(21,135,69,.18); padding:.25rem .65rem; border-radius:999px; white-space:nowrap; }

.accordion__chevron{
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:8px;
  color:var(--section-light-muted);
  transition:transform .3s cubic-bezier(.22,1,.36,1), color .3s ease;
}
.accordion.is-open .accordion__chevron{ transform:rotate(180deg); color:var(--brand-green); }

.accordion__body{
  overflow:hidden; max-height:0;
  transition:max-height .4s cubic-bezier(.22,1,.36,1), padding .3s ease;
  padding:0 2rem;
  background:rgba(21,135,69,.03); /* Légère teinte verte pour distinguer le contenu ouvert */
  border-top:1px solid transparent;
}
.accordion__body[hidden]{ display:block !important; max-height:0; padding-top:0; padding-bottom:0; }
.accordion.is-open .accordion__body{ padding:1.5rem 2rem; border-top-color:var(--section-light-border); }

.accordion__empty{ padding:1rem 0; font-size:.9rem; color:var(--section-light-muted); font-style:italic; }

/* Grille des boxes */
.accordion__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:1rem;
  padding-top:.5rem;
}

/* --===== 10.12 Boxes prestation (carrees, icone en gros + texte dessous) =====-- */

.presta-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:.6rem;
  padding:1.5rem 1rem;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--section-light-border);
  text-decoration:none;
  color:var(--section-light-text);
  aspect-ratio:1;
  transition:
    transform var(--ease-nucleus),
    border-color var(--ease-nucleus),
    background var(--ease-nucleus),
    box-shadow var(--ease-nucleus);
}

.presta-box:hover{
  transform:translateY(-3px);
  border-color:rgba(21,135,69,.40);
  background:#fff;
  box-shadow:0 8px 24px rgba(21,135,69,.15);
}

.presta-box__icon{
  font-size:2.4rem;
  line-height:1;
}

.presta-box__title{
  margin:0;
  font-size:.88rem;
  font-weight:600;
  color:var(--section-light-text);
  line-height:1.3;
}

.presta-box__sub{
  margin:0;
  font-size:.72rem;
  color:var(--section-light-muted);
  line-height:1.3;
}

/* --===== 10.13 Responsive accordeons =====-- */

@media (max-width:840px){
  .accordion__header{ padding:1.2rem 1.5rem; }
  .accordion__desc{ display:none; }
  .accordion__grid{ grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); }
  .accordion__body{ padding-left:1.5rem; padding-right:1.5rem; }
  .accordion.is-open .accordion__body{ padding:0 1.5rem 1.2rem; }
}

@media (max-width:480px){
  .accordion__header{ padding:1rem; gap:1rem; }
  .accordion__icon{ font-size:1.5rem; }
  .accordion__grid{ grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); }
}

/* --===== 10.14 Single prestation =====-- */

/* Fil d'Ariane */
.presta-breadcrumb{
  display:flex; align-items:center; gap:.4rem;
  margin-bottom:1.5rem; font-size:.82rem;
  color:var(--section-light-muted, #4a5a4a);
}
.presta-breadcrumb a{ color:var(--section-light-muted, #4a5a4a); text-decoration:none; transition:color .3s ease; }
.presta-breadcrumb a:hover{ color:var(--section-light-text, #1a2a1a); }
.presta-breadcrumb__sep{ color:rgba(0,0,0,.25); }

/* Contenu libre */
.presta-content{
  padding:clamp(3rem, 6vw, 5rem) 0;
  background:var(--section-light, #ECF6F0);
  color:var(--section-light-text, #1a2a1a);
}

.presta-content__body{ max-width:750px; margin:0 auto; font-size:.95rem; line-height:1.7; }
.presta-content__body h2, .presta-content__body h3{ color:var(--section-light-text); margin:2rem 0 .8rem; }
.presta-content__body h2{ font-size:1.4rem; font-weight:700; }
.presta-content__body h3{ font-size:1.15rem; font-weight:600; }
.presta-content__body p{ margin:0 0 1rem; color:var(--section-light-muted); }
.presta-content__body ul, .presta-content__body ol{ margin:0 0 1rem 1.5rem; color:var(--section-light-muted); }
.presta-content__body li{ margin-bottom:.4rem; }
.presta-content__body img{ border-radius:12px; margin:1.5rem 0; }

/* Tarifs — cards premium sur fond blanc (1 carte par tarif saisi en admin) */
.presta-tarifs{ padding:clamp(2.5rem, 5vw, 4rem) 0; background:#fff; }
.presta-tarifs .section-title,
.presta-tarifs .section-intro{ text-align:center; }
.presta-tarifs .section-intro{ color:var(--section-light-muted, #5a6a5a); margin-bottom:2.5rem; }

.presta-tarifs__grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.25rem;
  max-width:1080px;
  margin:0 auto;
}
.presta-pricecard{
  box-sizing:border-box;
  flex:1 1 230px;
  max-width:250px;
  position:relative;
  text-align:center;
  background:#fff;
  border:1px solid rgba(21,135,69,.22);
  border-radius:16px;
  padding:1.6rem 1.5rem;
  box-shadow:0 6px 22px rgba(21,135,69,.10), 0 2px 6px rgba(0,0,0,.06);
  transition:transform var(--ease-nucleus-slow), box-shadow var(--ease-nucleus-slow), border-color var(--ease-nucleus-slow);
}
.presta-pricecard:hover{
  transform:translateY(-6px);
  box-shadow:0 14px 34px rgba(21,135,69,.13), 0 2px 6px rgba(0,0,0,.05);
  border-color:rgba(21,135,69,.28);
}
.presta-pricecard__label{
  margin:0 0 .7rem; font-size:1.3rem; font-weight:700;
  color:var(--section-light-text, #1a2a1a); line-height:1.3;
}
.presta-pricecard__type{
  display:inline-block;
  margin:1rem 0 0;
  padding:.42rem 1.2rem;
  font-size:1.02rem; font-weight:600; letter-spacing:.02em;
  color:#7a5f12;
  -webkit-text-fill-color:#7a5f12;
  background:#f9e7a8;
  border:1px solid rgba(160,120,20,.2);
  border-radius:100px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}

.presta-pricecard__accent{
  display:block; width:40px; height:4px; border-radius:4px;
  background:linear-gradient(90deg, var(--brand-green), var(--brand-gold));
  margin:0 auto .9rem;
}
.presta-pricecard__price{
  margin:0; font-size:2.7rem; font-weight:800; line-height:1.1;
  background:linear-gradient(120deg, var(--brand-green) 0%, #b8860b 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.presta-pricecard__tax{
  font-size:1.05rem; font-weight:700; letter-spacing:.02em;
  color:var(--brand-green);
  -webkit-text-fill-color:var(--brand-green);
}
.presta-pricecard__ht{
  margin:.4rem 0 0; font-size:.82rem; font-weight:600;
  color:var(--brand-green);
  -webkit-text-fill-color:var(--brand-green);
}
.presta-tarifs__note{
  max-width:900px; margin:1.8rem auto 0; text-align:center;
  font-size:.82rem; font-style:italic; color:var(--section-light-muted, #5a6a5a);
}

@media (max-width:600px){
  .presta-tarifs__grid{ gap:1rem; }
  .presta-pricecard{ max-width:none; flex-basis:100%; padding:1.4rem 1.25rem; }
  .presta-pricecard__price{ font-size:2.25rem; }
}



/* --===== 10.16 Listing reconditionnes =====-- */

.recon-listing{
  padding:clamp(2.5rem, 5vw, 3.5rem) 0;
  background:var(--bg);
}

.recon-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:1.5rem;
}

.recon-card{
  border-radius:20px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  transition:transform var(--ease-nucleus), border-color var(--ease-nucleus), box-shadow var(--ease-nucleus);
}

.recon-card:hover{
  transform:translateY(-4px);
  border-color:rgba(21,135,69,.3);
  box-shadow:0 16px 40px rgba(0,0,0,.16), 0 0 16px rgba(21,135,69,.08);
}

.recon-card__visual{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:#0a0a0a;
}

/* Fond blur de l'image en arrière-plan */
.recon-card__visual::before{
  content:"";
  position:absolute;
  inset:-20px;
  background:var(--card-bg) center center / cover no-repeat;
  filter:blur(16px) brightness(.35) saturate(.8);
  z-index:0;
}

.recon-card__visual img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  max-height:225px;
  object-fit:contain;
  transition:transform .4s ease;
}

.recon-card:hover .recon-card__visual img{
  transform:scale(1.05);
}

.recon-card__placeholder{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; font-size:3rem; opacity:.2;
}

.recon-card__type{
  position:absolute;
  top:.8rem; left:.8rem;
  padding:.25rem .65rem;
  border-radius:999px;
  font-size:.72rem;
  font-weight:600;
  background:rgba(21,135,69,.85);
  color:#fff;
  backdrop-filter:blur(8px);
  z-index:1;
}

.recon-card__body{
  padding:1rem 1.2rem;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}

.recon-card__title{
  margin:0;
  font-size:1rem;
  font-weight:600;
  color:#fff;
  line-height:1.3;
}

.recon-card__etat{
  display:inline-block;
  align-self:flex-start;
  font-size:.7rem;
  font-weight:600;
  padding:.2rem .6rem;
  border-radius:6px;
  border:1px solid rgb(233 201 51);
  background:rgb(233 201 51 / 40%);
  color:#1a2a1a;
  backdrop-filter:blur(4px);
}

.recon-card__price{
  font-size:.85rem;
  font-weight:400;
  color:var(--muted);
}

.recon-card__price strong{
  font-size:1.15rem;
  font-weight:800;
  background:linear-gradient(135deg, #158745, #f4ce35);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.recon-card__price-neuf{
  font-size:.75rem;
  color:rgba(255,255,255,.45);
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  flex-wrap:wrap;
}

.recon-card__reduction{
  display:inline-block;
  padding:.1rem .4rem;
  border-radius:4px;
  font-size:.68rem;
  font-weight:700;
  background:rgba(21,135,69,.9);
  color:#fff;
  white-space:nowrap;
}

/* Image centrée dans la vignette */
.recon-card__visual{
  position:relative;
  overflow:hidden;
  border-radius:16px 16px 0 0;
  background:#f5f5f5;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Icônes dans les filtres */
.recon-filter i{
  font-size:.75rem;
  margin-right:.2rem;
}

.recon-filter__icon{
  width:18px;
  height:18px;
  object-fit:contain;
  margin-right:.25rem;
  vertical-align:middle;
  filter:brightness(0) invert(.4);
  transition:filter .3s ease;
}

.recon-filter.is-active .recon-filter__icon{
  filter:brightness(0) invert(1);
}

.recon-card__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:.3rem;
}

.recon-card__cta{
  font-size:.82rem;
  font-weight:500;
  color:var(--brand-green);
  transition:color .3s ease;
}

.recon-card:hover .recon-card__cta{
  color:var(--brand-gold);
}

/* Vendus */
.recon-card--sold{
  opacity:.6;
  pointer-events:none;
}

/* Bloc aucun appareil */
.recon-empty{
  text-align:center;
  padding:clamp(2.5rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  max-width:460px;
  margin:1rem auto;
  background:#fff;
  border:1.5px solid rgba(21,135,69,.2);
  border-radius:var(--radius-xl, 24px);
  box-shadow:0 14px 44px rgba(21,135,69,.12);
  position:relative;
  overflow:hidden;
}

/* Liseré gradient en haut de la box */
.recon-empty::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:linear-gradient(90deg, var(--brand-green) 0%, var(--brand-gold) 100%);
}

/* Icône seule (sans cercle), grande, avec brillance diagonale qui balaye */
/* Icône box vide : base VERTE + éclat JAUNE doux qui balaye (type iamvdo).
   CIBLE PAR .fa-screwdriver-wrench → marche que le HTML soit l'ancien
   (i.recon-icon-float) OU le nouveau (i.recon-empty__icon). Le !important
   écrase l'animation aller-retour fa-gradient, uniquement dans .recon-empty. */
.recon-empty .fa-screwdriver-wrench{
  position:relative;
  display:inline-block;
  margin-bottom:1.4rem;
  padding:0;
  font-size:3.6rem !important;
  line-height:1;
  vertical-align:middle;
  color:#158745 !important;
  -webkit-text-fill-color:#158745 !important;
  background:none !important;
  -webkit-background-clip:border-box !important;
          background-clip:border-box !important;
  animation:none !important;                 /* tue l'aller-retour fa-gradient */
}

/* Copie jaune du glyphe, révélée par une bande douce qui glisse */
.recon-empty .fa-screwdriver-wrench::after{
  content:"\f7d9";                           /* fa-screwdriver-wrench (FA6) */
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  left:0;
  top:0;
  color:#ffe05a;
  -webkit-text-fill-color:#ffe05a;
  pointer-events:none;
  /* Bande LARGE et DOUCE = reflet glissant, pas une ligne dure */
  -webkit-mask-image:linear-gradient(70deg,
     rgba(0,0,0,0) 25%,
     rgba(0,0,0,.55) 42%,
     #000 50%,
     rgba(0,0,0,.55) 58%,
     rgba(0,0,0,0) 75%);
          mask-image:linear-gradient(70deg,
     rgba(0,0,0,0) 25%,
     rgba(0,0,0,.55) 42%,
     #000 50%,
     rgba(0,0,0,.55) 58%,
     rgba(0,0,0,0) 75%);
  -webkit-mask-size:300% 100%;
          mask-size:300% 100%;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  animation:empty-icon-shine 3.5s ease-in-out infinite;
}

/* La bande balaye (0→60% ≈ 2,1s) puis pause (icône verte ~1,4s) */
@keyframes empty-icon-shine{
  0%   { -webkit-mask-position:240% 0;  mask-position:240% 0; }
  60%  { -webkit-mask-position:-140% 0; mask-position:-140% 0; }
  100% { -webkit-mask-position:-140% 0; mask-position:-140% 0; }
}

@keyframes empty-float{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}

.recon-empty__title{
  margin:0 0 .7rem;
  font-family:"Sora", system-ui, sans-serif;
  font-size:1.4rem;
  font-weight:700;
  color:var(--section-light-text, #1a2a1a);
}

.recon-empty__text{
  margin:0 0 1.8rem;
  font-size:.95rem;
  line-height:1.6;
  color:#5a6a5a;
  color:var(--muted);
}

/* Flèche du bouton "Nous contacter" : glisse vers la droite au hover */
.recon-empty__btn-arrow{
  margin-left:.55rem;
  font-size:.85em;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.recon-empty__btn:hover .recon-empty__btn-arrow{
  transform:translateX(5px);
}

.recon-card__sold-badge{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(-12deg);
  padding:.5rem 1.5rem;
  border-radius:8px;
  font-size:1rem;
  font-weight:800;
  letter-spacing:.08em;
  background:rgba(229,57,53,.9);
  color:#fff;
  text-transform:uppercase;
}

.recon-card__price--sold{
  text-decoration:line-through;
  opacity:.5;
}

/* --===== 10.17 Single reconditionne — fiche produit =====-- */

.recon-product{
  padding:2rem 0 clamp(3rem, 6vw, 5rem);
  background:var(--section-light, #ECF6F0);
  color:var(--section-light-text, #1a2a1a);
}

/* Fil d'Ariane */
.recon-breadcrumb{
  display:flex;
  align-items:center;
  gap:.4rem;
  margin-bottom:2rem;
  font-size:.82rem;
  color:var(--section-light-muted, #4a5a4a);
}

.recon-breadcrumb a{
  color:var(--section-light-muted, #4a5a4a);
  text-decoration:none;
  transition:color .3s ease;
}

.recon-breadcrumb a:hover{ color:var(--section-light-text, #1a2a1a); }
.recon-breadcrumb__sep{ color:rgba(0,0,0,.2); }

/* Layout 2 colonnes */
.recon-product__layout{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:3rem;
  align-items:start;
}

/* Galerie — miniatures à gauche, grande image à droite */
.recon-gallery{
  display:grid;
  grid-template-columns:72px 1fr;
  gap:.8rem;
  align-items:start;
}

/* Quand pas de miniatures → image pleine largeur */
.recon-gallery:not(:has(.recon-gallery__thumbs)){
  grid-template-columns:1fr;
}

.recon-gallery__thumbs{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  order:-1;
}

.recon-gallery__thumb{
  flex:0 0 auto;
  width:72px;
  height:72px;
  border-radius:10px;
  overflow:hidden;
  border:2px solid transparent;
  cursor:pointer;
  padding:0;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .3s ease, opacity .3s ease;
  opacity:.5;
}

.recon-gallery__thumb.is-active{
  border-color:var(--brand-green);
  opacity:1;
}

.recon-gallery__thumb:hover{ opacity:.8; }

.recon-gallery__thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:3px;
}

.recon-gallery__main{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--section-light-border, rgba(21,135,69,.1));
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:300px;
}

.recon-gallery__main img{
  width:100%;
  height:auto;
  max-height:500px;
  object-fit:contain;
  display:block;
  padding:1rem;
  margin:auto;
  transition:opacity .2s ease;
}

.recon-gallery__sold-overlay{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(-12deg);
  padding:.8rem 2.5rem;
  border-radius:8px;
  font-size:1.6rem;
  font-weight:800;
  letter-spacing:.1em;
  background:rgba(229,57,53,.9);
  color:#fff;
  text-transform:uppercase;
  z-index:2;
}

/* Infos produit — fond clair */
.recon-product__type{
  display:inline-block;
  padding:.3rem .75rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:600;
  background:rgba(21,135,69,.1);
  border:1px solid rgba(21,135,69,.2);
  color:var(--brand-green);
  margin-bottom:1rem;
}

.recon-product__title{
  margin:0 0 1rem;
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  font-weight:700;
  color:var(--section-light-text, #1a2a1a);
  line-height:1.2;
  text-align:center;
}

.recon-product__excerpt{
  margin:0 0 1.5rem;
  font-size:.92rem;
  line-height:1.6;
  color:var(--section-light-muted, #4a5a4a);
}

/* Prix */
.recon-product__price{
  display:flex;
  align-items:center;
  gap:.8rem;
  flex-wrap:wrap;
  margin-bottom:1.5rem;
}

.recon-product__price-amount{
  font-size:clamp(2.5rem, 5vw, 3.2rem);
  font-weight:800;
  background:linear-gradient(135deg, #158745, #f4ce35);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  line-height:1;
}

.recon-product__price-ttc{
  font-size:.85rem;
  font-weight:500;
  color:var(--section-light-muted, #4a5a4a);
}

/* CTA */
.recon-product__cta{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:2rem;
}

.recon-product__sold-label{
  display:inline-flex;
  align-items:center;
  padding:.6rem 1.2rem;
  border-radius:10px;
  background:rgba(229,57,53,.08);
  border:1px solid rgba(229,57,53,.2);
  color:#e53935;
  font-weight:600;
  font-size:.9rem;
}

/* Badges garantie — ligne horizontale sous les accordéons */
.recon-product__badges{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:2rem;
}

.recon-product__badge{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem .9rem;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--section-light-border, rgba(21,135,69,.1));
  box-shadow:0 1px 4px rgba(0,0,0,.04);
  font-size:.82rem;
  color:var(--section-light-muted, #4a5a4a);
}

.recon-product__badge strong{
  color:var(--section-light-text, #1a2a1a);
}

.recon-product__badge-icon{
  font-size:1rem;
  flex:0 0 auto;
  color:var(--brand-green);
}

/* Details : fonctionnalités + panne */
.recon-details{
  padding:clamp(3rem, 6vw, 4rem) 0;
  background:var(--section-light, #ECF6F0);
  color:var(--section-light-text, #1a2a1a);
}

.recon-details__layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:start;
}

/* Fonctionnalités */
.recon-features{
  margin-bottom:2rem;
}

.recon-features h3{
  margin:0 0 1rem;
  font-size:1.1rem;
  font-weight:600;
  color:#fff;
}

.recon-features ul{
  list-style:none;
  margin:0;
  padding:0;
}

.recon-features li{
  padding:.5rem 0;
  border-bottom:1px solid rgba(255,255,255,.04);
  font-size:.9rem;
  color:var(--muted);
  line-height:1.5;
}

.recon-features li:last-child{
  border-bottom:0;
}

.recon-features__arrow{
  margin-right:.3rem;
}

/* Panne */
.recon-panne{
  padding:1.5rem;
  border-radius:14px;
  background:rgba(21,135,69,.06);
  border:1px solid rgba(21,135,69,.15);
}

.recon-panne h3{
  margin:0 0 .6rem;
  font-size:1rem;
  font-weight:600;
  color:var(--brand-green);
}

.recon-panne p{
  margin:0;
  font-size:.88rem;
  line-height:1.6;
  color:var(--muted);
}

/* Specs boxes animées */
.recon-specs{
  padding:clamp(3rem, 6vw, 4rem) 0;
  background:linear-gradient(135deg, rgba(21,135,69,.06) 0%, rgba(244,206,53,.04) 100%);
  border-top:1px solid rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.04);
}

.recon-specs__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:1rem;
  max-width:800px;
  margin:0 auto;
}

.recon-spec-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.4rem;
  padding:1.5rem 1rem;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  transition:transform var(--ease-nucleus), border-color var(--ease-nucleus);
}

.recon-spec-box:hover{
  transform:translateY(-3px);
  border-color:rgba(21,135,69,.25);
}

.recon-spec-box__icon{
  font-size:1.8rem;
  line-height:1;
}

.recon-spec-box__value{
  font-size:1rem;
  font-weight:700;
  color:#fff;
}

.recon-spec-box__label{
  font-size:.75rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}

/* --===== 10.18 Responsive listing reconditionnes =====-- */

@media (max-width:840px){
  .recon-grid{
    grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  }
}

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


/* --===== 10.19 Galerie sticky =====-- */

.recon-gallery--sticky{
  position:sticky;
  top:calc(var(--header-total-height, 130px) + 1.5rem);
}

/* Centrer les images dans les vignettes */
.recon-gallery__thumb img{
  display:block;
  margin:auto;
}

/* Badge état — pilule en bas à droite de la photo (même style que l'ancien badge type) */
.recon-gallery__etat-badge{
  position:absolute;
  bottom:.8rem;
  right:.8rem;
  padding:.3rem .7rem;
  border-radius:999px;
  font-size:.72rem;
  font-weight:600;
  background:rgba(244,206,53,.9);
  color:#1a2a1a;
  backdrop-filter:blur(8px);
  z-index:2;
}

/* --===== 10.20 Prix + CTA centrés avec espacement =====-- */

.recon-product__price-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3rem;
  margin-bottom:1rem;
  flex-wrap:wrap;
}

.recon-product__price{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  text-align:center;
}

.recon-product__price-amount{
  font-size:clamp(2.2rem, 5vw, 3rem);
  font-weight:800;
  background:linear-gradient(135deg, #158745, #f4ce35);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  line-height:1;
}

.recon-product__price-row .btn{
  margin-bottom:12px;
}

.recon-product__price-neuf-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
}

.recon-product__price-neuf{
  font-size:.9rem;
  color:var(--section-light-muted, #4a5a4a);
  font-weight:400;
}

.recon-product__price-neuf s{
  text-decoration:line-through;
}

.recon-product__price-badge{
  display:inline-flex;
  align-items:center;
  padding:.15rem .5rem;
  border-radius:6px;
  background:rgba(21,135,69,.12);
  border:1px solid rgba(21,135,69,.2);
  color:var(--brand-green);
  font-size:.78rem;
  font-weight:700;
}

/* --===== 10.21 Badges garantie — en ligne sous la galerie =====-- */

.recon-product__badges{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:1.2rem;
  grid-column:1 / -1;
}

.recon-product__badge{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem 1rem;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--section-light-border, rgba(21,135,69,.1));
  box-shadow:0 1px 4px rgba(0,0,0,.04);
  font-size:.81em;
  color:var(--section-light-muted, #4a5a4a);
}

.recon-product__badge strong{
  color:var(--section-light-text, #1a2a1a);
}

.recon-product__badge-icon i{
  color:var(--brand-green);
}

/* --===== 10.22 Mini accordeons — fond blanc =====-- */

.recon-accordions{
  margin-top:1rem;
  margin-bottom:1rem;
  display:flex;
  flex-direction:column;
  gap:0;
  border:1px solid var(--section-light-border, rgba(21,135,69,.1));
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}

.recon-accord{
  border-bottom:1px solid var(--section-light-border, rgba(21,135,69,.08));
}

.recon-accord:last-child{ border-bottom:0; }

.recon-accord__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:1rem 1.2rem;
  border:0;
  background:transparent;
  color:var(--section-light-text, #1a2a1a);
  font-family:inherit;
  font-size:.92rem;
  font-weight:600;
  cursor:pointer;
  text-align:left;
  transition:background .3s ease;
}

.recon-accord__header:hover{ background:rgba(21,135,69,.03); }

.recon-accord__header svg{
  flex:0 0 auto;
  color:var(--section-light-muted, #4a5a4a);
  transition:transform .3s cubic-bezier(.22,1,.36,1), color .3s ease;
}

.recon-accord.is-open .recon-accord__header svg{
  transform:rotate(180deg);
  color:var(--brand-green);
}

.recon-accord__body{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s cubic-bezier(.22,1,.36,1);
  padding:0 1.2rem;
}

.recon-accord__body[hidden]{
  display:block !important;
  max-height:0;
  padding-top:0;
  padding-bottom:0;
}

.recon-accord.is-open .recon-accord__body{
  padding:0 1.2rem 1rem;
}

.recon-accord__body p{
  margin:0;
  font-size:.88rem;
  line-height:1.6;
  color:var(--section-light-muted, #4a5a4a);
}

/* Table specs — style unifié fonctionnalités ET caractéristiques */
.recon-specs-table{
  width:100%;
  border-collapse:collapse;
}

.recon-specs-table tr{
  border-bottom:1px solid rgba(21,135,69,.06);
}

.recon-specs-table tr:last-child{ border-bottom:0; }

.recon-specs-table td{
  padding:.5rem .3rem;
  font-size:.88rem;
}

.recon-specs-table__icon{
  width:30px;
  text-align:center;
}

.recon-specs-table__label{
  color:var(--section-light-muted, #4a5a4a);
  font-weight:500;
}

.recon-specs-table__value{
  text-align:right;
  color:var(--section-light-text, #1a2a1a);
  font-weight:600;
}

/* --===== 10.23 Nous reconditionnons avec passion — fond SOMBRE =====-- */

/* Titre plus gros pour les sections spéciales */
.section-title--big{
  font-size:clamp(2rem, 3.5vw, 2.8rem);
  overflow:visible;
  line-height:1.3;
}

/* Icône FA animée — rotation douce */
/* Base commune icônes titres — gradient + taille uniforme + anti-rognage */
.recon-icon-pulse,
.recon-icon-spin,
.recon-icon-heartbeat,
.recon-icon-float{
  display:inline-block;
  font-size:.85em;
  padding:.1em;
  vertical-align:middle;
  background:linear-gradient(135deg, #158745, #f4ce35, #158745);
  background-size:200% 200%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  animation:fa-gradient 3s ease-in-out infinite;
}

/* Flottement doux */
.recon-icon-float{
  animation:fa-gradient 3s ease-in-out infinite, icon-float 2.5s ease-in-out infinite;
}

/* Pulsation douce */
.recon-icon-pulse{
  animation:fa-gradient 3s ease-in-out infinite, icon-pulse-scale 2s ease-in-out infinite;
  margin-bottom:1pc;
}

/* Rotation lente */
.recon-icon-spin{
  animation:fa-gradient 3s ease-in-out infinite, icon-spin-slow 4s linear infinite;
}

/* Battement de coeur */
.recon-icon-heartbeat{
  background:linear-gradient(135deg, #e53935, #f4ce35, #158745, #e53935);
  background-size:300% 300%;
  animation:icon-heartbeat 1.2s ease-in-out infinite, fa-gradient-heart 4s ease-in-out infinite;
}

@keyframes icon-pulse-scale{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.15); }
}

@keyframes icon-spin-slow{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

@keyframes icon-heartbeat{
  0%, 100%{ transform:scale(1); }
  15%{ transform:scale(1.2); }
  30%{ transform:scale(1); }
  45%{ transform:scale(1.1); }
  60%{ transform:scale(1); }
}

@keyframes fa-gradient-heart{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

@keyframes icon-float{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-3px); }
}

@keyframes icon-wiggle{
  0%, 100%{ transform:rotate(0deg); }
  20%{ transform:rotate(10deg); }
  40%{ transform:rotate(-8deg); }
  60%{ transform:rotate(5deg); }
  80%{ transform:rotate(-3deg); }
}

.recon-process{
  padding:clamp(4rem, 8vw, 5rem) 0;
  background:var(--bg, #0a0a0a);
  color:#fff;
}

.recon-process .section-title{
  color:#fff;
}

.recon-process__steps{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:1.5rem;
  margin-top:3rem;
}

/* Images des étapes — image se dégrade vers transparent */
.recon-process__step{
  text-align:center;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  position:relative;
  overflow:hidden;
  transition:transform var(--ease-nucleus), box-shadow var(--ease-nucleus);
}

/* Bordure gradient au hover */
.recon-process__step::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  padding:1px;
  background:linear-gradient(135deg, rgba(21,135,69,.5), rgba(244,206,53,.35));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:0;
  transition:opacity .4s ease;
  z-index:3;
}

.recon-process__step:hover::after{
  opacity:1;
}

.recon-process__step:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}

/* Image — pas d'effet au hover */
.recon-process__step-img{
  position:relative;
  width:100%;
  aspect-ratio:3/4;
  overflow:hidden;
}

.recon-process__step-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  -webkit-mask-image:linear-gradient(to bottom, #000 30%, transparent 95%);
  mask-image:linear-gradient(to bottom, #000 30%, transparent 95%);
}

/* Contenu texte sous l'image — remonté pour chevaucher la zone fondue */
.recon-process__step-body{
  position:relative;
  z-index:1;
  padding:.5rem 1rem 1.5rem;
  margin-top:-2rem;
}

/* Numéro dans un cercle */
.recon-process__step-num{
  position:absolute;
  top:.8rem;
  left:.8rem;
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  font-weight:800;
  background:linear-gradient(135deg, #158745, #f4ce35);
  color:#fff;
  z-index:2;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}

/* Titre plus gros */
.recon-process__step h3{
  margin:0 0 .4rem;
  font-size:1.1rem;
  font-weight:700;
  color:#fff;
}

.recon-process__step p{
  margin:0;
  font-size:.82rem;
  line-height:1.5;
  color:var(--muted);
}

/* Taille SVG icônes */
.recon-process__step-icon svg{
  width:48px;
  height:48px;
}

.recon-faq__card-icon{
  margin-bottom:1rem;
}

.recon-faq__card-icon i{
  font-size:2rem;
  background:linear-gradient(135deg, #158745, #f4ce35, #158745);
  background-size:200% 200%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:fa-gradient 3s ease-in-out infinite;
}

@keyframes fa-gradient{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

/* Animations SVG */
.recon-svg--float{
  animation:svg-float 3s ease-in-out infinite;
}

.recon-svg--pulse{
  animation:svg-pulse 2s ease-in-out infinite;
}

.recon-svg--rotate{
  animation:svg-rotate-subtle 8s linear infinite;
}

.recon-svg--shine{
  animation:svg-shine 3s ease-in-out infinite;
}

.recon-svg--check .recon-svg__check-path{
  stroke-dasharray:30;
  stroke-dashoffset:30;
  animation:svg-check-draw 1s ease-out 1s forwards;
}

@keyframes svg-float{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}

@keyframes svg-pulse{
  0%, 100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.06); opacity:.9; }
}

@keyframes svg-rotate-subtle{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

/* Rotation lente pour le recyclage (comme la vidéo) */
.recon-svg--rotate-slow{
  animation:svg-rotate-subtle 12s linear infinite;
}

@keyframes svg-shine{
  0%, 100%{ filter:brightness(1); }
  50%{ filter:brightness(1.3); }
}

@keyframes svg-check-draw{
  to{ stroke-dashoffset:0; }
}

/* Gradient animé sur les SVG — couleur du trait change */
@keyframes svg-gradient-stroke{
  0%{ stroke:#158745; }
  50%{ stroke:#f4ce35; }
  100%{ stroke:#158745; }
}

.recon-svg .svg-grad{
  animation:svg-gradient-stroke 3s ease-in-out infinite;
}

.recon-svg .svg-grad-delay{
  animation:svg-gradient-stroke 3s ease-in-out infinite .5s;
}

/* --===== 10.24 FAQ — boxes fond sombre comme section passion =====-- */

.recon-faq{
  padding:clamp(4rem, 8vw, 5rem) 0;
  background:var(--bg, #0a0a0a);
  color:#fff;
  position:relative;
}

/* Séparateur gradient entre sections sombres */
.recon-faq::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent 10%, rgba(21,135,69,.4) 35%, rgba(244,206,53,.3) 65%, transparent 90%);
}

.recon-faq .section-title{
  color:#fff;
}

.recon-faq__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.5rem;
  margin-top:2rem;
}

/* Boxes FAQ — pas de contour au repos */
.recon-faq__card{
  position:relative;
  background:rgba(255,255,255,.04);
  border:1px solid transparent;
  border-radius:16px;
  overflow:hidden;
}

/* Bordure gradient au hover uniquement */
.recon-faq__card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  padding:1px;
  background:linear-gradient(135deg, rgba(21,135,69,.5), rgba(244,206,53,.35));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:0;
  transition:opacity .4s ease;
}

.recon-faq__card:hover::before{
  opacity:1;
}

.recon-faq__card{
  text-align:center;
  padding:2rem 1.5rem;
  transition:transform var(--ease-nucleus), box-shadow var(--ease-nucleus);
}

.recon-faq__card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}

/* Font Awesome hover scale */
.recon-faq__card:hover .recon-faq__card-icon i{
  transform:scale(1.15);
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}

.recon-faq__card h3{
  margin:0 0 .6rem;
  font-size:1rem;
  font-weight:600;
  color:#fff;
}

.recon-faq__card p{
  margin:0;
  font-size:.88rem;
  line-height:1.6;
  color:var(--muted);
}

/* --===== 10.25 CTA final — fond vert clair =====-- */

.recon-cta-final{
  padding:clamp(4rem, 8vw, 5rem) 0;
  background:var(--section-light, #ECF6F0);
  color:var(--section-light-text, #1a2a1a);
}

.recon-cta-final .section-title{
  color:var(--section-light-text);
}

.recon-cta-final .section-intro{
  color:var(--section-light-muted);
}

/* Override btn-secondary sur fonds clairs */
.recon-cta-final .btn-secondary,
.recon-product .btn-secondary{
  color:var(--section-light-text, #1a2a1a);
  background:rgba(21,135,69,.06);
  border-color:rgba(21,135,69,.2);
}

.recon-cta-final .btn-secondary:hover,
.recon-product .btn-secondary:hover{
  background:rgba(21,135,69,.12);
  border-color:rgba(21,135,69,.35);
}

.recon-cta-final__block{
  text-align:center;
}

.recon-cta-final__actions{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:2rem;
}

/* Sold label */
.recon-product__sold-label{
  display:inline-flex;
  align-items:center;
  padding:.6rem 1.2rem;
  border-radius:10px;
  background:rgba(229,57,53,.08);
  border:1px solid rgba(229,57,53,.2);
  color:#e53935;
  font-weight:600;
  font-size:.9rem;
}

/* --===== 10.26 Responsive single recon V4 =====-- */

/* Breakpoint 1000px — slider étapes : 3 cartes entre desktop et tablette */
@media (max-width:1000px){
  .recon-quality__card{
    flex:0 0 calc((100% - 3rem) / 3);
  }
}

@media (max-width:840px){
  /* Layout produit → 1 colonne */
  .recon-product__layout{
    grid-template-columns:1fr;
  }

  /* Galerie → pas sticky, miniatures en ligne sous l'image principale */
  .recon-gallery--sticky{
    position:static;
  }

  .recon-gallery{
    grid-template-columns:1fr;
  }

  /* Ordre : image d'abord, puis miniatures, puis badges */
  .recon-gallery__main{ order:1; }
  .recon-gallery__thumbs{
    order:2;
    flex-direction:row;
    overflow-x:auto;
    padding-bottom:.5rem;
  }
  .recon-product__badges{ order:3; }

  .recon-gallery__thumb{
    width:56px;
    height:56px;
  }

  /* Prix + CTA centrés — gap réduit */
  .recon-product__price-row{
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:1.5rem;
  }

  /* Badges garantie en 2 colonnes */
  .recon-product__badges{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  /* Titre produit */
  .recon-product__title{
    font-size:1.5rem;
  }

  /* Étapes → 3 colonnes puis 2 */
  .recon-process__steps{
    grid-template-columns:repeat(3, 1fr);
    gap:1rem;
  }

  /* Titres sections plus petits */
  .section-title--big{
    font-size:clamp(1.6rem, 3vw, 2.2rem);
  }

  /* FAQ → 2 colonnes */
  .recon-faq__grid{
    grid-template-columns:1fr 1fr;
    gap:1rem;
  }

  /* Accordéons padding réduit */
  .recon-accord__header{
    padding:.8rem 1rem;
    font-size:.88rem;
  }

  .recon-accord.is-open .recon-accord__body{
    padding:0 1rem .8rem;
  }

  /* CTA final */
  .recon-cta-final__actions{
    flex-direction:column;
    align-items:center;
  }

  /* Slider étapes — 2 cartes visibles tablette */
  .recon-quality__card{
    flex:0 0 calc((100% - 1.5rem) / 2);
  }

  .recon-quality__arrow{
    width:36px;
    height:36px;
  }

  /* Réassurance — 3 colonnes */
  .recon-rassure-grid{
    grid-template-columns:repeat(3, 1fr);
  }

  /* Section passion → 1 colonne */
  .recon-passion__layout{
    grid-template-columns:1fr;
  }
}

@media (max-width:480px){
  /* Fiche produit padding */
  .recon-product{
    padding:1rem 0 2rem;
  }

  /* Prix taille réduite + gap serré */
  .recon-product__price-amount{
    font-size:2rem;
  }

  .recon-product__price-row{
    gap:1rem;
  }

  /* Badges en 1 colonne */
  .recon-product__badges{
    grid-template-columns:1fr;
  }

  /* Galerie thumbs plus petites */
  .recon-gallery__thumb{
    width:48px;
    height:48px;
  }

  /* Badge état plus petit */
  .recon-gallery__etat-badge{
    font-size:.65rem;
    padding:.2rem .5rem;
  }

  /* Étapes → 2 colonnes */
  .recon-process__steps{
    grid-template-columns:1fr 1fr;
    gap:.8rem;
  }

  /* Numéro étape plus petit */
  .recon-process__step-num{
    width:32px;
    height:32px;
    font-size:.9rem;
  }

  /* Titre étape */
  .recon-process__step h3{
    font-size:.95rem;
  }

  .recon-process__step p{
    font-size:.75rem;
  }

  /* FAQ → 1 colonne */
  .recon-faq__grid{
    grid-template-columns:1fr;
  }

  /* FAQ card padding réduit */
  .recon-faq__card{
    padding:1.5rem 1rem;
  }

  /* Breadcrumb masqué ou réduit */
  .recon-breadcrumb{
    font-size:.72rem;
  }

  /* CTA bouton pleine largeur */
  .recon-product__cta .btn{
    width:100%;
    text-align:center;
  }

  .recon-cta-final__actions .btn{
    width:100%;
    max-width:300px;
  }
}

/* --===== 10.27 Page listing reconditionnés — fond clair + filtres =====-- */

.recon-listing{
  padding:clamp(2.5rem, 5vw, 3.5rem) 0;
  background:var(--section-light, #ECF6F0);
  color:var(--section-light-text, #1a2a1a);
}

.recon-listing--alt{
  padding-top:0;
}

.recon-listing .section-title{ color:var(--section-light-text); }
.recon-listing .section-intro{ color:var(--section-light-muted); }

.recon-listing--sold{
  background:var(--bg);
  color:#fff;
}

.recon-listing--sold .section-title{ color:#fff; }
.recon-listing--sold .section-intro{ color:var(--muted); }

/* Filtres catégories */
.recon-filters{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:2rem;
}

.recon-filter{
  position:relative;
  padding:.5rem 1.2rem;
  border-radius:999px;
  border:1px solid var(--section-light-border, rgba(21,135,69,.15));
  background:#fff;
  color:var(--section-light-muted, #4a5a4a);
  font-family:inherit;
  font-size:.85rem;
  font-weight:500;
  cursor:pointer;
  overflow:hidden;
  z-index:0;
  transition:color .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}

/* Remplissage gradient qui monte depuis le bas au hover */
.recon-filter::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(135deg, #158745, #f4ce35);
  opacity:0;
  transform:translateY(100%);
  transition:transform .4s cubic-bezier(.16,1,.3,1), opacity .35s ease;
}

.recon-filter:hover{
  border-color:transparent;
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(21,135,69,.22);
}
.recon-filter:hover::before{
  opacity:1;
  transform:translateY(0);
}

.recon-filter.is-active{
  background:linear-gradient(135deg, #158745, #1a9e52);
  border-color:transparent;
  color:#fff;
  font-weight:600;
  box-shadow:0 4px 14px rgba(21,135,69,.25);
}

/* Vignettes sur fond clair */
.recon-listing:not(.recon-listing--sold) .recon-card{
  position:relative;
  background:#fff;
  border:1px solid var(--section-light-border, rgba(21,135,69,.08));
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease;
}

/* Liseré gradient en haut, révélé au hover (cohérent avec les autres cards) */
.recon-listing:not(.recon-listing--sold) .recon-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, var(--brand-green) 0%, var(--brand-gold) 100%);
  border-radius:3px 3px 0 0;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
  z-index:2;
}

.recon-listing:not(.recon-listing--sold) .recon-card:hover{
  transform:translateY(-6px);
  border-color:rgba(21,135,69,.25);
  box-shadow:0 16px 38px rgba(21,135,69,.14);
}
.recon-listing:not(.recon-listing--sold) .recon-card:hover::before{
  transform:scaleX(1);
}

.recon-listing:not(.recon-listing--sold) .recon-card__title{
  color:var(--section-light-text, #1a2a1a);
}

.recon-listing:not(.recon-listing--sold) .recon-card__price{
  color:var(--section-light-muted, #5a7a4a);
}

.recon-listing:not(.recon-listing--sold) .recon-card__price-neuf{
  color:rgba(90, 122, 74, .6);
}

.recon-listing:not(.recon-listing--sold) .recon-card__etat{
  color:var(--section-light-text, #1a2a1a);
}

.recon-listing:not(.recon-listing--sold) .recon-card__cta{
  color:var(--brand-green);
}

.recon-listing:not(.recon-listing--sold) .recon-card:hover .recon-card__cta{
  color:var(--brand-gold);
}

/* Bloc vide fond clair */
.recon-listing:not(.recon-listing--sold) .recon-empty__title{
  color:var(--section-light-text);
}

.recon-listing:not(.recon-listing--sold) .recon-empty__text{
  color:var(--section-light-muted);
}

/* Le listing — fond légèrement distinct */
.recon-listing--alt{
  position:relative;
  background:var(--section-light-alt, #e4efe6);
}

.recon-listing--alt .section-title{ color:var(--section-light-text); }
.recon-listing--alt .section-intro{ color:var(--section-light-muted); }

/* --===== 10.28 Réassurance — intégrée au listing =====-- */

.recon-rassure-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:1rem;
  margin-top:2.5rem;
}

.recon-rassure{
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:1.2rem 1rem;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(21,135,69,.08);
  box-shadow:0 2px 8px rgba(0,0,0,.03);
  transition:border-color var(--ease-nucleus), box-shadow var(--ease-nucleus), transform var(--ease-nucleus);
}

.recon-rassure:hover{
  transform:translateY(-2px);
  border-color:rgba(21,135,69,.2);
  box-shadow:0 6px 20px rgba(21,135,69,.08);
}

.recon-rassure__icon{
  flex:0 0 44px;
  width:44px;
  height:44px;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(21,135,69,.08), rgba(244,206,53,.06));
  border:1px solid rgba(21,135,69,.12);
  display:flex;
  align-items:center;
  justify-content:center;
}

.recon-rassure__icon i{
  font-size:1.45rem;
  background:linear-gradient(135deg, #158745, #f4ce35, #158745);
  background-size:200% 200%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:fa-gradient 3s ease-in-out infinite;
}

.recon-rassure__text{
  display:flex;
  flex-direction:column;
  gap:.1rem;
  min-width:0;
}

.recon-rassure__text strong{
  font-size:.82rem;
  font-weight:700;
  color:var(--section-light-text, #1a2a1a);
  line-height:1.2;
}

.recon-rassure__text span{
  font-size:.72rem;
  color:var(--section-light-muted, #5a7a4a);
  line-height:1.3;
}

/* --===== 10.29 Slider étapes "La qualité Gam'NT" — format carte identique au single =====-- */

.recon-quality{
  padding:clamp(2.5rem, 5vw, 3.5rem) 0;
  background:var(--bg);
  overflow:hidden;
}

.recon-quality__badge{
  display:block;
  text-align:center;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--brand-green);
  margin-bottom:.8rem;
}

.recon-quality__slider{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-top:2rem;
}

.recon-quality__arrow{
  flex:0 0 auto;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .3s ease, background .3s ease, opacity .3s ease;
}

.recon-quality__arrow:hover:not(:disabled){
  border-color:var(--brand-green);
  background:rgba(21,135,69,.12);
}

.recon-quality__arrow:disabled{
  opacity:.25;
  cursor:not-allowed;
}

.recon-quality__viewport{
  flex:1;
  overflow:hidden;
}

.recon-quality__track{
  display:flex;
  gap:1.5rem;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  cursor:grab;
  touch-action:pan-y;
}

.recon-quality__track:active{
  cursor:grabbing;
}

/* Carte identique au single process — image 3/4 dégradée + numéro cercle */
.recon-quality__card{
  flex:0 0 calc((100% - 4.5rem) / 4);  /* 4 cartes visibles desktop */
  text-align:center;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  position:relative;
  overflow:hidden;
  transition:transform var(--ease-nucleus), box-shadow var(--ease-nucleus);
}

/* Bordure gradient au hover — identique au single */
.recon-quality__card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  padding:1px;
  background:linear-gradient(135deg, rgba(21,135,69,.5), rgba(244,206,53,.35));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:0;
  transition:opacity .4s ease;
  z-index:3;
}

.recon-quality__card:hover::after{
  opacity:1;
}

.recon-quality__card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}

/* Numéro cercle gradient — identique au single */
.recon-quality__card-num{
  position:absolute;
  top:.8rem;
  left:.8rem;
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  font-weight:800;
  background:linear-gradient(135deg, #158745, #f4ce35);
  color:#fff;
  z-index:2;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}

/* Image 3/4 avec mask dégradé — identique au single */
.recon-quality__card-img{
  position:relative;
  width:100%;
  aspect-ratio:3/4;
  overflow:hidden;
}

.recon-quality__card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  -webkit-mask-image:linear-gradient(to bottom, #000 30%, transparent 95%);
  mask-image:linear-gradient(to bottom, #000 30%, transparent 95%);
}

/* Texte qui remonte pour chevaucher la zone fondue — identique au single */
.recon-quality__card-body{
  position:relative;
  z-index:1;
  padding:.5rem 1rem 1.5rem;
  margin-top:-2rem;
}

.recon-quality__card-body h3{
  margin:0 0 .4rem;
  font-size:1.1rem;
  font-weight:700;
  color:#fff;
}

.recon-quality__card-body p{
  margin:0;
  font-size:.82rem;
  line-height:1.5;
  color:var(--muted);
}

/* --===== 10.30 Section passion — Made in Mazières =====-- */

.recon-passion{
  padding:clamp(2.5rem, 5vw, 3.5rem) 0;
  background:var(--section-light);
}

.recon-passion__layout{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:3rem;
  align-items:center;
}

.recon-passion__badge{
  display:inline-block;
  padding:.4rem 1rem;
  border-radius:999px;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.02em;
  background:rgba(21,135,69,.08);
  border:1px solid rgba(21,135,69,.18);
  color:var(--brand-green);
  margin-bottom:1.2rem;
}

.recon-passion__title{
  font-size:clamp(1.6rem, 3vw, 2.4rem);
  font-weight:800;
  line-height:1.15;
  margin:0 0 1.2rem;
  color:var(--section-light-text);
}

.recon-passion__text{
  font-size:.95rem;
  line-height:1.7;
  color:var(--section-light-muted);
  margin:0 0 1rem;
}

.recon-passion__highlights{
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin-top:1.8rem;
}

.recon-passion__highlight{
  display:flex;
  align-items:center;
  gap:1rem;
}

.recon-passion__highlight-icon{
  flex:0 0 40px;
  width:40px;
  height:40px;
  border-radius:10px;
  background:rgba(21,135,69,.08);
  border:1px solid rgba(21,135,69,.15);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--brand-green);
  font-size:1rem;
}

.recon-passion__highlight strong{
  display:block;
  font-size:.9rem;
  font-weight:600;
  color:var(--section-light-text);
}

.recon-passion__highlight span{
  font-size:.82rem;
  color:var(--section-light-muted);
}

/* Carte citation */
.recon-passion__card{
  background:#fff;
  border-radius:20px;
  border:1px solid var(--section-light-border, rgba(21,135,69,.1));
  box-shadow:0 8px 32px rgba(0,0,0,.06);
  padding:2.5rem 2rem;
  text-align:center;
  position:relative;
  overflow:hidden;
}

.recon-passion__card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:linear-gradient(90deg, var(--brand-green), var(--brand-gold));
}

.recon-passion__card-icon{
  width:48px;
  height:48px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(21,135,69,.12), rgba(244,206,53,.08));
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1.2rem;
  font-size:1.2rem;
  color:#e74c3c;
}

.recon-passion__card-quote{
  margin:0 0 .8rem;
  font-size:1.05rem;
  font-style:italic;
  line-height:1.6;
  color:var(--section-light-text);
  font-weight:500;
}

.recon-passion__card-author{
  margin:0 0 1.5rem;
  font-size:.82rem;
  color:var(--section-light-muted);
}

.recon-passion__card-stat{
  padding-top:1.2rem;
  border-top:1px solid rgba(21,135,69,.08);
}

.recon-passion__card-number{
  display:block;
  font-size:2rem;
  font-weight:800;
  background:linear-gradient(135deg, var(--brand-green), var(--brand-gold));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  line-height:1.1;
}

.recon-passion__card-label{
  display:block;
  font-size:.82rem;
  color:var(--section-light-muted);
  margin-top:.3rem;
}

/* --===== 10.31 Slider marques =====-- */

.recon-brands{
  padding:clamp(3rem, 6vw, 4rem) 0;
  background:var(--bg);
  overflow:hidden;
}

.recon-brands__track{
  overflow:hidden;
  margin-top:2rem;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.recon-brands__slide{
  display:flex;
  gap:3rem;
  align-items:center;
  width:max-content;
  animation:brands-scroll 40s linear infinite;
}

.recon-brands__logo{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  height:40px;
}

.recon-brands__logo img{
  height:100%;
  width:auto;
  object-fit:contain;
  filter:grayscale(100%) brightness(1.8) opacity(.35);
  transition:filter .4s ease;
}

.recon-brands__logo:hover img{
  filter:grayscale(0%) brightness(1) opacity(1);
}

@keyframes brands-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* --===== 10.32 Responsive page listing =====-- */

@media (max-width:840px){
  .recon-filters{
    gap:.4rem;
  }

  .recon-filter{
    padding:.4rem .9rem;
    font-size:.8rem;
  }

  /* Réassurance rectangles — 3 col puis 2 dernières centrées */
  .recon-rassure-grid{
    grid-template-columns:repeat(3, 1fr);
  }
}

@media (max-width:640px){
  /* Réassurance — 2 colonnes */
  .recon-rassure-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  .recon-rassure{
    padding:1rem .8rem;
    gap:.6rem;
  }

  .recon-rassure__icon{
    flex:0 0 38px;
    width:38px;
    height:38px;
  }
}

@media (max-width:480px){
  .recon-filter{
    padding:.35rem .7rem;
    font-size:.75rem;
  }

  .recon-brands__logo{
    width:90px;
    height:40px;
  }

  /* Slider étapes — 1 carte visible */
  .recon-quality__card{
    flex:0 0 100%;
  }

  .recon-quality__slider{
    gap:.5rem;
  }

  .recon-quality__arrow{
    width:32px;
    height:32px;
  }

  /* Réassurance — 1 colonne */
  .recon-rassure-grid{
    grid-template-columns:1fr;
  }
}
/*======================================================
=           10.33 - FRAIS FIXES TRANSVERSES           =
======================================================*/
/* Bloc affiche en haut de la page Prestations         */
/* (sous le hero, avant les accordeons par categorie)  */

.frais-fixes{
  padding:5rem 0 3rem;
  position:relative;
  background:#fff;
  color:var(--section-light-text);
}

.frais-fixes .section-title,
.frais-fixes .section-intro{
  text-align:center;
}

.frais-fixes .section-title{ color:var(--section-light-text); }
.frais-fixes .section-intro{
  color:var(--section-light-muted);
  margin:0 auto 3rem;
  max-width:640px;
}

/* --===== Grille des 3 cartes =====-- */
.frais-fixes__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.5rem;
  margin-bottom:2rem;
}

/* --===== Carte individuelle =====-- */
.frais-fixes__card{
  position:relative;
  background-color:#fff;
  /* Trait gradient en background-image (largeur 0 au repos) */
  /* On le separe du background-color pour que background-size s'anime proprement */
  background-image:linear-gradient(90deg, var(--brand-green) 0%, var(--brand-gold) 100%);
  background-repeat:no-repeat;
  background-position:left top;
  background-size:0 5px;
  /* Bordure verte au repos */
  border:1.5px solid rgba(21,135,69,.18);
  border-radius:var(--radius-lg);
  padding:2.25rem 1.5rem 2rem;
  text-align:center;
  /* Ombre de base plus visible pour delimiter la carte */
  box-shadow:0 6px 22px rgba(21,135,69,.10);
  transition:transform var(--ease-nucleus-slow),
             box-shadow var(--ease-nucleus-slow),
             border-color var(--ease-nucleus-slow),
             background-size var(--ease-nucleus-slow);
  overflow:visible; /* indispensable pour que le badge deborde */
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Hover : le trait gradient apparait en glissant de gauche a droite */
/* background-size passe de "0 5px" a "100% 5px" -> animation fluide */
/* IMPOSSIBLE de deborder : le background-image est nativement clippe
   au border-radius de l'element, c'est une regle CSS de base */
.frais-fixes__card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(21,135,69,.18);
  border-color:rgba(21,135,69,.38);
  background-size:100% 5px;
}

/* --===== Icone SVG au-dessus du titre =====-- */
.frais-fixes__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:.75rem;
  line-height:1;
}

.frais-fixes__icon svg{
  display:block;
}

/* --===== Titre de la carte =====-- */
.frais-fixes__title{
  font-family:"Sora", system-ui, sans-serif;
  font-size:1.15rem;
  font-weight:600;
  color:var(--section-light-text);
  margin:0 0 1.25rem;
  line-height:1.3;
}

/* --===== Prix : plein barre + prix final en gros =====-- */
.frais-fixes__price{
  margin:0 0 .5rem;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:.4rem;
  flex-wrap:wrap;
}

/* Prix plein barre (affiche uniquement quand il y a une remise) */
.frais-fixes__price-strike{
  font-family:"Sora", system-ui, sans-serif;
  font-size:1.15rem;
  font-weight:500;
  color:var(--section-light-muted);
  text-decoration:line-through;
  text-decoration-color:rgba(21,135,69,.5);
  text-decoration-thickness:2px;
  margin-right:.25rem;
}

/* Prix final en gros avec gradient */
.frais-fixes__price-value{
  font-family:"Sora", system-ui, sans-serif;
  font-size:2.8rem;
  font-weight:800;
  background:linear-gradient(135deg, var(--brand-green) 0%, var(--brand-gold) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  line-height:1;
}

.frais-fixes__price-unit{
  font-size:.95rem;
  font-weight:500;
  color:var(--section-light-muted);
}

/* --===== Ligne de condition (sous le prix) =====-- */
.frais-fixes__condition{
  font-size:.88rem;
  font-weight:600;
  color:var(--brand-green);
  margin:0 0 1rem;
  line-height:1.4;
}

.frais-fixes__condition small{
  display:block;
  font-size:.78rem;
  font-weight:400;
  color:var(--section-light-muted);
  margin-top:.15rem;
}

.frais-fixes__condition--neutral{
  color:var(--section-light-text);
}

/* --===== Description en bas de carte =====-- */
.frais-fixes__desc{
  font-size:.85rem;
  color:var(--section-light-muted);
  margin:auto 0 0; /* pousse en bas si la carte est plus haute */
  line-height:1.5;
  padding-top:1rem;
  border-top:1px dashed var(--section-light-border);
  width:100%;
}

/* =========================================================
 * BADGE GRADIENT PULSE — "Economisez -XX€"
 * Position absolue pour deborder de la carte parente.
 * Style moderne tech avec gradient anime et pulse subtil.
 * ========================================================= */
.frais-fixes__badge{
  position:absolute;
  top:-14px;
  right:1rem;
  background:linear-gradient(135deg, var(--brand-green) 0%, var(--brand-gold) 100%);
  color:#fff;
  font-family:"Sora", system-ui, sans-serif;
  padding:.45rem .9rem;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  box-shadow:0 6px 18px rgba(21,135,69,.30),
             0 0 0 3px #fff; /* anneau blanc pour detacher du fond */
  z-index:2;
  white-space:nowrap;
  /* Pulse anime sur le shadow uniquement (perf) */
  animation:badge-pulse 2.5s ease-in-out infinite;
}

.frais-fixes__badge-label{
  font-size:.7rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.5px;
  opacity:.92;
}

.frais-fixes__badge-amount{
  font-size:.95rem;
  font-weight:800;
  letter-spacing:.3px;
}

/* Animation pulse : anneau lumineux qui s'eteint en pulsant */
@keyframes badge-pulse{
  0%, 100%{
    box-shadow:0 6px 18px rgba(21,135,69,.30),
               0 0 0 3px #fff,
               0 0 0 6px rgba(244,206,53,0);
  }
  50%{
    box-shadow:0 6px 18px rgba(21,135,69,.30),
               0 0 0 3px #fff,
               0 0 0 8px rgba(244,206,53,.35);
  }
}

/* Respect des preferences d'accessibilite (motion-safe) */
@media (prefers-reduced-motion: reduce){
  .frais-fixes__badge{
    animation:none;
  }
}

/* --===== Message legal en bas du bloc (refonte v2 : plus lisible) =====-- */
.frais-fixes__legal{
  display:flex;
  align-items:flex-start;
  gap:1.25rem;
  max-width:760px;
  margin:0 auto;
  padding:1.5rem 1.75rem;
  background:var(--section-light, #ECF6F0);
  border:1px solid var(--section-light-border);
  border-left:4px solid var(--brand-gold);
  border-radius:.75rem;
  box-shadow:0 4px 16px rgba(21,135,69,.08);
  text-align:left;
}

.frais-fixes__legal-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  flex-shrink:0;
  margin-top:.1rem;
}

.frais-fixes__legal-icon svg{
  display:block;
}

.frais-fixes__legal-content{
  flex:1;
  min-width:0;
}

.frais-fixes__legal-title{
  display:block;
  font-family:"Sora", system-ui, sans-serif;
  font-size:1.05rem;
  font-weight:700;
  color:var(--brand-green);
  margin:0 0 .35rem;
  line-height:1.3;
}

.frais-fixes__legal p{
  margin:0;
  font-size:.95rem;
  color:var(--section-light-text);
  line-height:1.55;
}

.frais-fixes__legal strong{
  color:var(--brand-green);
  font-weight:700;
}

/* Responsive : passe en vertical sur mobile */
@media (max-width: 600px){
  .frais-fixes__legal{
    flex-direction:column;
    align-items:flex-start;
    gap:.75rem;
    padding:1.25rem 1.5rem;
  }
  .frais-fixes__legal-icon{
    font-size:1.75rem;
  }
}

/* --===== Responsive (aligne sur --bp-menu-switch = 840px) =====-- */
@media (max-width: 840px){
  .frais-fixes__grid{
    grid-template-columns:1fr;
    gap:2rem; /* + d'air vertical sur mobile */
  }

  .frais-fixes__badge{
    top:-12px;
    right:.75rem;
    padding:.4rem .75rem;
  }

  .frais-fixes__badge-label{ font-size:.65rem; }
  .frais-fixes__badge-amount{ font-size:.9rem; }

  .frais-fixes__price-value{
    font-size:2.4rem;
  }

  .frais-fixes__price-strike{
    font-size:1rem;
  }

  .frais-fixes{
    padding:3rem 0 2rem;
  }
}

/*======================================================
=       10.34 - CE QUI FAIT LA DIFFERENCE GAM'NT      =
======================================================*/
/* Section "Pourquoi travailler avec moi" :             */
/*  - 3 arguments phares (grandes cartes en haut)       */
/*  - 5 preuves concretes (petites cartes en grille)    */
/*  - Banniere finale en gradient (effet "wow")         */

.page-difference{
  padding:clamp(3rem, 6vw, 5rem) 0;
  background:#fff;
  color:var(--section-light-text);
}

.page-difference .section-title,
.page-difference .section-intro{
  text-align:center;
}

.page-difference .section-title{
  color:var(--section-light-text);
}

.page-difference .section-intro{
  color:var(--section-light-muted);
  margin:0 auto 3rem;
  max-width:640px;
}

/* --===== Carte generique (utilisee en hero ET en proof) =====-- */
.difference-card{
  background:#fff;
  /* Bordure verte plus marquee pour ressortir sur fond blanc */
  border:1.5px solid rgba(21,135,69,.18);
  border-radius:var(--radius-lg);
  padding:1.75rem 1.5rem;
  text-align:center;
  /* Ombre de base plus visible pour delimiter la carte */
  box-shadow:0 6px 22px rgba(21,135,69,.10);
  transition:transform var(--ease-nucleus-slow),
             box-shadow var(--ease-nucleus-slow),
             border-color var(--ease-nucleus-slow);
  position:relative;
  overflow:hidden;
}

.difference-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(21,135,69,.18);
  border-color:rgba(21,135,69,.38);
}

/* Liseré gradient en haut au survol */
.difference-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:5px;
  background:linear-gradient(90deg, var(--brand-green) 0%, var(--brand-gold) 100%);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--ease-nucleus-slow);
}

.difference-card:hover::before{
  transform:scaleX(1);
}

.difference-card__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:.75rem;
  line-height:1;
}

.difference-card__icon svg{
  display:block;
}

.difference-card__title{
  font-family:"Sora", system-ui, sans-serif;
  font-weight:600;
  color:var(--section-light-text);
  margin:0 0 .75rem;
  line-height:1.3;
}

.difference-card__text{
  font-size:.92rem;
  color:var(--section-light-muted);
  line-height:1.55;
  margin:0;
}

.difference-card__text strong{
  color:var(--brand-green);
  font-weight:700;
}

/* --===== 3 arguments phares (grandes cartes en haut) =====-- */
.difference-hero-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.5rem;
  margin-bottom:2rem;
}

.difference-card--hero{
  flex:1 1 280px;
  max-width:360px;
  padding:2.25rem 1.75rem;
}

.difference-card--hero .difference-card__icon{
  margin-bottom:1rem;
}

.difference-card--hero .difference-card__title{
  font-size:1.35rem;
  margin-bottom:1rem;
}

.difference-card--hero .difference-card__text{
  font-size:.98rem;
}

/* --===== 5 preuves concretes (petites cartes en grille) =====-- */
.difference-proof-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.25rem;
  margin-bottom:3rem;
}
.difference-card--proof{
  flex:1 1 190px;
  max-width:240px;
}

.difference-card--proof .difference-card__title{
  font-size:1.05rem;
}

.difference-card--proof .difference-card__text{
  font-size:.88rem;
}

/* Centrer verticalement le contenu des cards TEXTE (exclut les cards photo) */
.difference-card--proof:not(.difference-card--photo){
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* --===== Cards PHOTO (image carrée qui remplit jusqu'à la bordure) =====-- */
.difference-card--photo{
  padding:0;                        /* Pas de marge : l'image va jusqu'à la bordure */
  overflow:hidden;                  /* Clippe l'image aux coins arrondis */
  display:flex;
  flex-direction:column;
  align-self:stretch;               /* S'étire à la hauteur de la ligne (aligné avec les cards texte) */
}

.difference-card__photo{
  width:100%;
  flex:1;                           /* Remplit toute la hauteur de la card étirée */
  min-height:220px;                 /* Garde-fou : hauteur mini quand la photo est seule sur sa ligne (mobile) */
  object-fit:cover;
  display:block;
  transition:transform var(--ease-nucleus-slow);
}

.difference-card--photo:hover .difference-card__photo{
  transform:scale(1.04);
}

/* --===== Banniere "wow" en gradient vert -> dore =====-- */
.difference-banner{
  background:linear-gradient(135deg, var(--brand-green) 0%, var(--brand-gold) 100%);
  border-radius:var(--radius-xl);
  padding:2rem 2.5rem;
  display:flex;
  align-items:center;
  gap:1.5rem;
  box-shadow:0 18px 40px rgba(21,135,69,.20);
  margin-bottom:2.5rem;
  position:relative;
  overflow:hidden;
}

/* Effet de lumiere subtil dans le coin */
.difference-banner::after{
  content:"";
  position:absolute;
  top:-50%; right:-10%;
  width:300px;
  height:300px;
  background:radial-gradient(circle, rgba(255,255,255,.25) 0%, transparent 70%);
  pointer-events:none;
}

.difference-banner__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  line-height:1;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.15));
  transition:transform var(--ease-nucleus-slow);
}
.difference-banner__icon svg{
  display:block;
  transition:transform 1.2s cubic-bezier(.4,.0,.2,1);
}

/* Au hover de la banniere : l'icone recycle tourne (symbole rotatif universel) */
.difference-banner:hover .difference-banner__icon svg{
  transform:rotate(360deg);
}

/* Wrapper du contenu (texte + mini-encart resume) */
.difference-banner__content{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1rem;
  position:relative; /* au-dessus du ::after */
  z-index:1;
}

.difference-banner__text{
  margin:0;
  font-family:"Sora", system-ui, sans-serif;
  font-size:1.05rem;
  font-weight:500;
  color:#fff;
  line-height:1.55;
}

.difference-banner__text strong{
  font-weight:700;
  color:#fff;
}

.difference-banner__text em{
  font-style:normal;
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.5);
  text-underline-offset:3px;
}

/* Mini-encart resume style TL;DR (effet card glassmorphism) */
.difference-banner__summary{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  padding:.6rem 1.1rem;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  align-self:flex-start;
}

.difference-banner__summary-label{
  font-family:"Sora", system-ui, sans-serif;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  color:#fff;
  background:rgba(255,255,255,.22);
  padding:.15rem .55rem;
  border-radius:999px;
  text-transform:uppercase;
}

.difference-banner__summary-value{
  font-family:"Sora", system-ui, sans-serif;
  font-size:.92rem;
  font-weight:600;
  color:#fff;
  letter-spacing:.1px;
}

/* CTA centre sous la banniere */
.page-difference .section-cta{
  text-align:center;
}

/* --===== Responsive (aligne sur --bp-menu-switch = 840px) =====-- */
@media (max-width: 1100px){
  .difference-proof-grid{
    grid-template-columns:repeat(3, 1fr); /* 3 colonnes en moyenne taille */
  }
}

@media (max-width: 840px){
  .difference-hero-grid{
    grid-template-columns:1fr;
    gap:1.25rem;
  }

  .difference-proof-grid{
    grid-template-columns:repeat(2, 1fr); /* 2 colonnes en tablette/mobile */
    gap:1rem;
  }

  .difference-banner{
    flex-direction:column;
    text-align:center;
    padding:1.75rem 1.5rem;
    gap:1rem;
  }

  .difference-banner__icon{
    /* La taille du SVG est definie dans le PHP (size=44) */
  }

  .difference-banner__content{
    align-items:center;
  }

  .difference-banner__text{
    font-size:.95rem;
  }

  .difference-banner__summary{
    align-self:center;
    flex-wrap:wrap;
    justify-content:center;
    padding:.5rem .9rem;
  }

  .difference-banner__summary-value{
    font-size:.85rem;
  }
}

@media (max-width: 480px){
  .difference-proof-grid{
    grid-template-columns:1fr; /* 1 colonne sur tres petit ecran */
  }
}

/*======================================================
=       10.35 - ONGLETS PRESTATIONS PREMIUM           =
======================================================*/
/* Section listing prestations en onglets horizontaux  */
/* Remplace l'ancien systeme accordeon                  */
/*  - Navigation : 3 gros onglets cliquables           */
/*  - Contenu : grille de cards premium                */
/*  - Toggle JS via data-tab / aria-controls           */

.page-tabs{
  padding:clamp(3rem, 6vw, 5rem) 0;
  background:var(--section-light-alt, #e4efe6);
  color:var(--section-light-text);
}

.page-tabs .section-title,
.page-tabs .section-intro{
  text-align:center;
}

.page-tabs .section-title{ color:var(--section-light-text); }
.page-tabs .section-intro{
  color:var(--section-light-muted);
  margin:0 auto 2.5rem;
  max-width:640px;
}

/* =========================================================
 * NAV ONGLETS - Style pilule SaaS moderne
 * Inspiré de Stripe, Linear, Notion : onglet actif "rempli",
 * onglets inactifs plats. Tout est dans une "barre" wrapper.
 * ========================================================= */
.tabs-nav{
  /* Container avec fond gris très clair pour grouper visuellement les onglets */
  display:inline-flex;
  flex-wrap:wrap;
  gap:.4rem;
  padding:.4rem;
  margin:0 auto 2.5rem;
  background:rgba(255,255,255,.7);
  border:1px solid var(--section-light-border);
  border-radius:999px;
  /* Centrage du container */
  justify-content:center;
}

/* Hack pour centrer le tabs-nav inline-flex dans son parent block */
.page-tabs .tabs-nav{
  display:flex;
  max-width:max-content;
}

.tabs-nav__item{
  /* Reset bouton natif */
  appearance:none;
  border:0;
  font:inherit;
  cursor:pointer;
  text-align:left;

  /* Style pilule */
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.75rem 1.25rem;
  background:transparent;
  border-radius:999px;
  color:var(--section-light-muted);
  position:relative;
  transition:
    background var(--ease-nucleus),
    color var(--ease-nucleus),
    transform var(--ease-nucleus),
    box-shadow var(--ease-nucleus);
}

/* Etat inactif : hover */
.tabs-nav__item:hover:not(.is-active){
  background:rgba(21,135,69,.08);
  color:var(--brand-green);
}

.tabs-nav__item:focus-visible{
  outline:2px solid var(--brand-green);
  outline-offset:2px;
}

/* Etat ACTIF : pilule verte pleine */
.tabs-nav__item.is-active{
  background:var(--brand-green);
  color:#fff;
  box-shadow:0 4px 14px rgba(21,135,69,.30);
}

.tabs-nav__item.is-active .tabs-nav__title{
  color:#fff;
}

.tabs-nav__item.is-active .tabs-nav__count{
  color:rgba(255,255,255,.85);
}

.tabs-nav__icon{
  font-size:1.25rem;
  line-height:1;
  flex-shrink:0;
  /* Filter pour amener un peu de contraste sur les emojis sur fond vert */
  transition:transform var(--ease-nucleus);
}

.tabs-nav__item.is-active .tabs-nav__icon{
  transform:scale(1.1);
}

.tabs-nav__text{
  display:flex;
  align-items:center;
  gap:.5rem;
  min-width:0;
}

.tabs-nav__title{
  font-family:"Sora", system-ui, sans-serif;
  font-size:.95rem;
  font-weight:600;
  color:var(--section-light-text);
  line-height:1.2;
  letter-spacing:.1px;
  transition:color var(--ease-nucleus);
}

.tabs-nav__count{
  font-size:.78rem;
  font-weight:500;
  color:var(--brand-green);
  padding:.15rem .55rem;
  background:rgba(21,135,69,.10);
  border-radius:999px;
  transition:
    background var(--ease-nucleus),
    color var(--ease-nucleus);
}

.tabs-nav__item.is-active .tabs-nav__count{
  background:rgba(255,255,255,.22);
  color:#fff;
  font-weight:600;
}

.tabs-nav__count--empty{
  color:var(--section-light-muted);
  font-style:italic;
  background:transparent;
  padding:0;
}

.tabs-nav__item.is-active .tabs-nav__count--empty{
  color:rgba(255,255,255,.85);
  background:transparent;
}

/* =========================================================
 * CONTENU DES ONGLETS - panneaux
 * ========================================================= */
.tabs-content{
  position:relative;
}

.tabs-panel{
  display:none;
  animation:tab-fade-in .4s ease forwards;
}

.tabs-panel.is-active{
  display:block;
}

@keyframes tab-fade-in{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:translateY(0); }
}

.tabs-panel__desc{
  text-align:center;
  font-size:1rem;
  color:var(--section-light-muted);
  margin:0 auto 2rem;
  max-width:720px;
  line-height:1.6;
}

/* =========================================================
 * GRILLE DE CARDS PREMIUM (les prestations)
 * ========================================================= */
.tabs-panel__grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.25rem;
}

.presta-card{
  flex:1 1 210px;
  max-width:240px;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.75rem;
  padding:1.75rem 1.25rem 2.7rem;
  background:#fff;
  border:1px solid var(--section-light-border);
  border-radius:var(--radius-lg);
  text-decoration:none;
  color:var(--section-light-text);
  box-shadow:0 4px 14px rgba(21,135,69,.06);
  transition:
    transform var(--ease-nucleus-slow),
    border-color var(--ease-nucleus-slow),
    box-shadow var(--ease-nucleus-slow);
  overflow:hidden;
}

.presta-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, var(--brand-green) 0%, var(--brand-gold) 100%);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--ease-nucleus-slow);
}

.presta-card:hover{
  transform:translateY(-4px);
  border-color:rgba(21,135,69,.30);
  box-shadow:0 12px 28px rgba(21,135,69,.14);
}

.presta-card:hover::before{
  transform:scaleX(1);
}

.presta-card:focus-visible{
  outline:3px solid var(--brand-green);
  outline-offset:2px;
}

.presta-card__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:74px;
  height:74px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(21,135,69,.12) 0%, rgba(244,206,53,.14) 100%);
  font-size:2.3rem;
  line-height:1;
  margin-bottom:.35rem;
}
.presta-card__svg{
  width:46px;
  height:46px;
  display:block;
}

.presta-card__title{
  font-family:"Sora", system-ui, sans-serif;
  font-size:1rem;
  font-weight:600;
  color:var(--section-light-text);
  margin:0;
  line-height:1.3;
}

.presta-card__sub{
  font-size:.82rem;
  color:var(--section-light-muted);
  margin:0;
  line-height:1.4;
}

/* Fleche en bas qui apparait au hover */
.presta-card__arrow{
  position:absolute;
  bottom:.55rem;
  left:50%;
  transform:translateX(-50%) translateY(8px);
  width:28px;
  height:28px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--brand-green) 0%, var(--brand-gold) 100%);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:
    opacity var(--ease-nucleus),
    transform var(--ease-nucleus);
}

.presta-card:hover .presta-card__arrow{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* =========================================================
 * ETAT VIDE (categorie sans prestation)
 * ========================================================= */
.tabs-panel__empty{
  text-align:center;
  padding:3rem 2rem;
  background:#fff;
  border:2px dashed var(--section-light-border);
  border-radius:var(--radius-lg);
  max-width:600px;
  margin:0 auto;
}

.tabs-panel__empty-icon{
  display:block;
  font-size:3rem;
  margin-bottom:1rem;
}

.tabs-panel__empty p{
  font-size:1rem;
  color:var(--section-light-muted);
  margin:0 0 1.5rem;
  line-height:1.6;
}

/* =========================================================
 * RESPONSIVE
 * ========================================================= */
@media (max-width: 900px){
  /* Onglets pilule : on garde la barre wrapper, on permet le wrap */
  .tabs-nav{
    width:100%;
    padding:.35rem;
    flex-wrap:wrap;
    gap:.3rem;
  }

  .page-tabs .tabs-nav{
    max-width:100%;
  }

  .tabs-nav__item{
    padding:.65rem .9rem;
    flex:1 1 auto;
    justify-content:center;
  }

  .tabs-nav__icon{
    font-size:1.15rem;
  }

  .tabs-nav__title{
    font-size:.88rem;
  }

  .tabs-nav__count{
    font-size:.72rem;
    padding:.1rem .45rem;
  }
}

@media (max-width: 480px){
  /* Cards prestation : 2 par ligne sur petit mobile */
  .tabs-panel__grid{
    gap:.75rem;
  }

  .presta-card{
    flex:1 1 140px;
    max-width:none;
    padding:1.25rem .75rem 1.75rem;
  }

  .presta-card__icon{
    width:60px;
    height:60px;
    font-size:1.9rem;
  }

  .presta-card__title{
    font-size:.88rem;
  }

  .presta-card__sub{
    font-size:.72rem;
  }
}

/*======================================================
=       10.36 - ANIMATIONS ICONES NUCLEUS AU HOVER    =
======================================================*/
/* Micro-animations declenchees au survol de la carte parente.
 * Performance : 0 charge CPU au repos, anim seulement sur :hover.
 * Accessibilite : respect de prefers-reduced-motion.
 *
 * Strategie :
 *  - Animation discrete, courte (300-800ms)
 *  - Un seul cycle a chaque hover (pas de boucle infinie)
 *  - Cible : SVG entier ou path specifique selon l'icone
 */

/* Base : toutes les icones ont une legere remontee au hover */
.guarantee-item:hover .nucleus-icon,
.frais-fixes__card:hover .nucleus-icon,
.difference-card:hover .nucleus-icon{
  transition:transform var(--ease-nucleus-slow);
}

/* ----- Horloge : aiguilles qui tournent (rotation 360deg) ----- */
.guarantee-item:hover .nucleus-icon-clock{
  animation:nucleus-spin 1s cubic-bezier(.4,.0,.2,1) 1;
}
@keyframes nucleus-spin{
  to{ transform:rotate(360deg); }
}

/* ----- Cadeau : le couvercle pop verticalement ----- */
.guarantee-item:hover .nucleus-icon-gift{
  animation:nucleus-pop 600ms cubic-bezier(.34,1.56,.64,1) 1;
}
@keyframes nucleus-pop{
  0%, 100%{ transform:translateY(0) scale(1); }
  40%    { transform:translateY(-4px) scale(1.08); }
  60%    { transform:translateY(-2px) scale(1.04); }
}

/* ----- Voiture : roule de gauche a droite et revient ----- */
.frais-fixes__card:hover .nucleus-icon-car{
  animation:nucleus-roll 800ms cubic-bezier(.4,.0,.2,1) 1;
}
@keyframes nucleus-roll{
  0%  { transform:translateX(0); }
  50% { transform:translateX(6px); }
  100%{ transform:translateX(0); }
}

/* ----- Lave-linge : vibration legere (cycle qui demarre) ----- */
.frais-fixes__card:hover .nucleus-icon-washing-machine{
  animation:nucleus-shake-soft 600ms ease-in-out 1;
}
@keyframes nucleus-shake-soft{
  0%, 100%{ transform:translateX(0) rotate(0); }
  20%    { transform:translateX(-1px) rotate(-1.5deg); }
  40%    { transform:translateX(1px) rotate(1.5deg); }
  60%    { transform:translateX(-1px) rotate(-1deg); }
  80%    { transform:translateX(1px) rotate(1deg); }
}

/* ----- Cafe : vapeur qui monte (vibration verticale subtile) ----- */
.frais-fixes__card:hover .nucleus-icon-coffee{
  animation:nucleus-steam 800ms ease-in-out 1;
}
@keyframes nucleus-steam{
  0%, 100%{ transform:translateY(0); }
  25%    { transform:translateY(-3px) scale(1.04); }
  75%    { transform:translateY(2px) scale(.98); }
}

/* ----- Map-pinned : pin qui rebondit doucement ----- */
.difference-card:hover .nucleus-icon-map-pinned{
  animation:nucleus-pin-drop 600ms ease-out 1;
}
@keyframes nucleus-pin-drop{
  0%   { transform:translateY(0); }
  40%  { transform:translateY(-4px); }
  70%  { transform:translateY(-1px); }
  100% { transform:translateY(0); }
}

/* ----- Hand-coins : la main soupese les pieces (rebond + petite rotation) ----- */
.difference-card:hover .nucleus-icon-hand-coins{
  animation:nucleus-coins-weigh 600ms ease-in-out 1;
}
@keyframes nucleus-coins-weigh{
  0%, 100%{ transform:translateY(0) rotate(0); }
  30%    { transform:translateY(-3px) rotate(-4deg); }
  60%    { transform:translateY(-1px) rotate(3deg); }
  80%    { transform:translateY(0) rotate(-1deg); }
}

/* ----- Cle a molette : se "serre" (rotation legere alternee) ----- */
.frais-fixes__card:hover .nucleus-icon-wrench,
.guarantee-item:hover .nucleus-icon-wrench{
  animation:nucleus-shake 500ms ease-in-out 1;
}
@keyframes nucleus-shake{
  0%, 100%{ transform:rotate(0); }
  25%    { transform:rotate(-12deg); }
  75%    { transform:rotate(12deg); }
}

/* ----- Prise : "branche-debranche" (legere translation vers le haut) ----- */
.frais-fixes__card:hover .nucleus-icon-plug{
  animation:nucleus-plug-in 600ms ease-out 1;
}
@keyframes nucleus-plug-in{
  0%, 100%{ transform:translateY(0); }
  50%    { transform:translateY(-3px); }
}

/* ----- Ampoule : pulse (lueur qui s'intensifie) ----- */
.frais-fixes__legal:hover .nucleus-icon-lightbulb,
.guarantee-item:hover .nucleus-icon-lightbulb{
  animation:nucleus-pulse 800ms ease-in-out 1;
}
@keyframes nucleus-pulse{
  0%, 100%{ transform:scale(1); filter:brightness(1); }
  50%    { transform:scale(1.15); filter:brightness(1.3); }
}

/* ----- Maison/route : pin destination qui pop ----- */
.difference-card:hover .nucleus-icon-house-route{
  animation:nucleus-bob 700ms ease-in-out 1;
}
@keyframes nucleus-bob{
  0%, 100%{ transform:translateY(0); }
  35%    { transform:translateY(-4px); }
  65%    { transform:translateY(-2px); }
}

/* ----- Coeur (Passion) : battement ----- */
.difference-card:hover .nucleus-icon-heart{
  animation:nucleus-heartbeat 700ms ease-in-out 1;
}
@keyframes nucleus-heartbeat{
  0%, 100%{ transform:scale(1); }
  25%, 75%{ transform:scale(1.18); }
  50%    { transform:scale(1.08); }
}

/* ----- Triple stars : etoiles qui scintillent en cascade ----- */
.difference-card:hover .nucleus-icon-triple-stars{
  animation:nucleus-twinkle 900ms ease-in-out 1;
}
@keyframes nucleus-twinkle{
  0%, 100%{ transform:scale(1) rotate(0); filter:brightness(1); }
  30%    { transform:scale(1.12) rotate(-3deg); filter:brightness(1.25); }
  60%    { transform:scale(1.05) rotate(3deg); filter:brightness(1.15); }
}

/* ----- Recycle : 3 fleches qui tournent ----- */
.guarantee-item:hover .nucleus-icon-recycle,
.difference-card:hover .nucleus-icon-recycle{
  animation:nucleus-spin 1s cubic-bezier(.4,.0,.2,1) 1;
}

/* ----- Refresh : meme animation que recycle ----- */
.guarantee-item:hover .nucleus-icon-refresh-cw{
  animation:nucleus-spin 1s cubic-bezier(.4,.0,.2,1) 1;
}

/* ----- Repeat : aller-retour horizontal ----- */
.guarantee-item:hover .nucleus-icon-repeat{
  animation:nucleus-roll 700ms cubic-bezier(.4,.0,.2,1) 1;
}

/* ----- Check-circle : "checked" qui se confirme avec scale ----- */
.guarantee-item:hover .nucleus-icon-check-circle{
  animation:nucleus-check 500ms cubic-bezier(.34,1.56,.64,1) 1;
}
@keyframes nucleus-check{
  0%, 100%{ transform:scale(1); }
  50%    { transform:scale(1.15); }
}

/* ----- Sparkles : eclat ----- */
.guarantee-item:hover .nucleus-icon-sparkles{
  animation:nucleus-twinkle 800ms ease-in-out 1;
}

/* ----- Camion : roule vers la droite (livraison) ----- */
.guarantee-item:hover .nucleus-icon-truck{
  animation:nucleus-roll 800ms cubic-bezier(.4,.0,.2,1) 1;
}

/* ----- Bouclier (Entièrement testé) : pulse de confirmation ----- */
.guarantee-item:hover .nucleus-icon-shield-check{
  animation:nucleus-pulse 700ms ease-in-out 1;
}

/* ----- Map-pin (Emploi local) : pose verticale (drop) ----- */
.guarantee-item:hover .nucleus-icon-map-pinned{
  animation:nucleus-pin-drop 700ms cubic-bezier(.34,1.56,.64,1) 1;
}
@keyframes nucleus-pin-drop{
  0%   { transform:translateY(-5px) scale(1); }
  50%  { transform:translateY(2px) scale(1.06); }
  100% { transform:translateY(0) scale(1); }
}

/* ----- Bouclier : pulse pour confirmer la protection ----- */
.difference-card:hover .nucleus-icon-shield-check{
  animation:nucleus-pulse 700ms ease-in-out 1;
}

/* ----- Bulle de message : "rebondit" comme une notification ----- */
.difference-card:hover .nucleus-icon-message-circle{
  animation:nucleus-pop 600ms cubic-bezier(.34,1.56,.64,1) 1;
}

/* ----- Œil : "cligne" via scale Y ----- */
.difference-card:hover .nucleus-icon-eye{
  animation:nucleus-blink 600ms ease-in-out 1;
}
@keyframes nucleus-blink{
  0%, 100%{ transform:scaleY(1); }
  50%    { transform:scaleY(.15); }
}

/* ----- Trending-up : courbe qui s'eleve ----- */
.difference-card:hover .nucleus-icon-trending-up{
  animation:nucleus-rise 700ms cubic-bezier(.34,1.56,.64,1) 1;
}
@keyframes nucleus-rise{
  0%, 100%{ transform:translateY(0); }
  50%    { transform:translateY(-5px) scale(1.05); }
}

/* ----- Marteau : "tape" (rotation rapide) ----- */
.difference-card:hover .nucleus-icon-hammer{
  animation:nucleus-shake 600ms ease-in-out 1;
}

/* ===== ACCESSIBILITE : couper toutes les anim si reduce-motion ===== */
@media (prefers-reduced-motion: reduce){
  .nucleus-icon{
    animation:none !important;
  }
}

/*======================================================
=       10.37 - CTA FINAL "Seconde vie"               =
======================================================*/
/* Banniere d'appel a l'action en fin de page prestations.
 * Apres avoir convaincu via les garanties, on propose une
 * action immediate au visiteur.
 *
 * Design :
 *  - Fond blanc avec bordure gradient subtile (effet wow)
 *  - Layout flex : texte a gauche, bouton a droite
 *  - Responsive : passe en colonne sur mobile
 *  - Cohérent avec l'identité Gam'NT (vert + doré)
 */

.cta-final{
  margin-top:3rem;
  position:relative;
}

/* Wrapper interieur avec bordure gradient */
.cta-final__inner{
  position:relative;
  background:#fff;
  border:1.5px solid rgba(21,135,69,.18);
  border-radius:var(--radius-xl);
  padding:2.5rem 3rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  box-shadow:0 10px 32px rgba(21,135,69,.10);
  overflow:hidden;
  transition:transform var(--ease-nucleus-slow),
             box-shadow var(--ease-nucleus-slow),
             border-color var(--ease-nucleus-slow);
}

.cta-final__inner:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(21,135,69,.16);
  border-color:rgba(21,135,69,.30);
}

/* Liseret gradient en haut, comme les autres cards */
.cta-final__inner::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:6px;
  background:linear-gradient(90deg, var(--brand-green) 0%, var(--brand-gold) 100%);
  border-radius:calc(var(--radius-xl) - 1.5px) calc(var(--radius-xl) - 1.5px) 0 0;
  pointer-events:none;
}

/* Effet lumiere subtil dans le coin droit */
.cta-final__inner::after{
  content:"";
  position:absolute;
  top:-30%; right:-15%;
  width:300px;
  height:300px;
  background:radial-gradient(circle, rgba(244,206,53,.12) 0%, transparent 65%);
  pointer-events:none;
  z-index:0;
}

/* Contenu texte */
.cta-final__content{
  flex:1;
  min-width:0;
  position:relative;
  z-index:1;
}

.cta-final__title{
  font-family:"Sora", system-ui, sans-serif;
  font-size:clamp(1.4rem, 2.5vw, 1.85rem);
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.25;
  margin:0 0 .65rem;
  color:var(--section-light-text);
}

/* Mot mis en gradient dans le titre */
.cta-final__highlight{
  background:linear-gradient(90deg, var(--brand-green) 0%, var(--brand-gold) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  font-weight:700;
}

.cta-final__subtitle{
  margin:0;
  font-size:1rem;
  line-height:1.55;
  color:var(--section-light-muted);
  max-width:550px;
}

/* Bouton CTA premium - utilise la classe standard .btn-cta du theme */
.cta-final__actions{
  flex-shrink:0;
  position:relative;
  z-index:1;
}

/* Effet sympa : l'icone telephone fait coucou au hover */
.cta-final__actions .btn-cta span[aria-hidden]{
  display:inline-flex;
  align-items:center;
  line-height:1;
  transition:transform var(--ease-nucleus-slow);
}

.cta-final__actions .btn-cta:hover span[aria-hidden]{
  transform:rotate(-15deg) scale(1.15);
}

/* Responsive : passe en colonne centree sur mobile */
@media (max-width: 768px){
  .cta-final__inner{
    flex-direction:column;
    text-align:center;
    padding:2rem 1.5rem;
    gap:1.5rem;
  }

  .cta-final__title{
    font-size:1.35rem;
  }

  .cta-final__subtitle{
    font-size:.95rem;
  }

  .cta-final__btn,
  .cta-final__actions .btn{
    width:100%;
    justify-content:center;
  }
}

/* ============================================================
=  VAGUE 6 — Page Contact V2 : refonte premium
=  - Badge statut temps reel (OUVERT/FERMÉ)
=  - Cards Contact ameliorees (cohérence Home)
=  - Carte Leaflet interactive (style brandé)
=  - Horaires avec jour actuel surligné
=  - CTA téléphone mis en valeur
============================================================ */

/* ===== Section globale : fond clair ===== */

.page-contact{
  padding:clamp(2.5rem, 5vw, 4rem) 0 !important;
  background:#ECF6F0 !important;
}

/* ===== Badge statut temps reel ===== */

.contact-status{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  max-width:fit-content;
  margin:0 auto 2rem;
  padding:.75rem 1.5rem;
  border-radius:999px;
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.005em;
  box-shadow:0 4px 16px rgba(21,135,69,.10);
  transition:transform .35s ease;
}

.contact-status:hover{
  transform:translateY(-2px);
}

/* Variante OUVERT (vert) */
.contact-status--open{
  background:linear-gradient(135deg, rgba(21,135,69,.15) 0%, rgba(244,206,53,.10) 100%);
  border:1.5px solid rgba(21,135,69,.30);
  color:#0f6233;
}

/* Variante FERMÉ (gris) */
.contact-status--closed{
  background:rgba(0,0,0,.04);
  border:1.5px solid rgba(0,0,0,.12);
  color:#666;
}

/* Pulse dot animé */
.contact-status__pulse{
  position:relative;
  width:10px;
  height:10px;
  border-radius:50%;
  flex-shrink:0;
}

.contact-status--open .contact-status__pulse{
  background:#158745;
}

.contact-status--open .contact-status__pulse::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:50%;
  background:#158745;
  opacity:.4;
  animation:contact-status-pulse 1.5s ease-out infinite;
}

@keyframes contact-status-pulse{
  0%{
    transform:scale(1);
    opacity:.5;
  }
  100%{
    transform:scale(2.5);
    opacity:0;
  }
}

.contact-status--closed .contact-status__pulse{
  background:#aaa;
}

/* ===== Cards Contact (style Home cohérent) ===== */

.page-contact .contact-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.5rem;
  max-width:1200px;
  margin:0 auto;
}

.page-contact .contact-card{
  position:relative;
  text-align:center;
  padding:2.5rem 2rem;
  border-radius:20px;
  background:#fff !important;
  border:1.5px solid rgba(21,135,69,.18) !important;
  box-shadow:0 6px 22px rgba(21,135,69,.08) !important;
  transition:
    transform .35s cubic-bezier(.16,1,.3,1),
    border-color .35s ease,
    box-shadow .35s ease;
  overflow:hidden;
}

/* Liseret gradient en haut au hover */
.page-contact .contact-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, #158745 0%, #f4ce35 100%);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}

.page-contact .contact-card:hover{
  transform:translateY(-4px);
  border-color:rgba(21,135,69,.35) !important;
  box-shadow:0 12px 32px rgba(21,135,69,.14) !important;
}

.page-contact .contact-card:hover::before{
  transform:scaleX(1);
}

.page-contact .contact-card__icon{
  width:64px;
  height:64px;
  margin:0 auto 1.25rem;
  display:flex;
  align-items:center;
  justify-content:center;
}

.page-contact .contact-card__icon svg{
  width:100%;
  height:100%;
}

.page-contact .contact-card__title{
  margin:0 0 .5rem;
  font-size:1.15rem;
  font-weight:700;
  color:#1a1a1a !important;
}

.page-contact .contact-card__text{
  margin:0 0 1.25rem;
  font-size:.88rem;
  line-height:1.5;
  color:#555 !important;
}

.page-contact .contact-card__link{
  display:inline-block;
  font-size:1rem;
  font-weight:600;
  color:#158745 !important;
  text-decoration:none;
  line-height:1.4;
  transition:color .25s ease;
}

.page-contact .contact-card__link:hover{
  color:#f4ce35 !important;
}

/* === Icônes réseaux sociaux dans la card "Suivez-nous" === */
.contact-card__socials{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  margin-top:.25rem;
}

.contact-social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:12px;
  background:rgba(21,135,69,.06);
  border:1.5px solid rgba(21,135,69,.18);
  color:#158745;
  transition:
    transform .3s cubic-bezier(.16,1,.3,1),
    background .3s ease,
    border-color .3s ease,
    color .3s ease;
}

.contact-social svg{
  width:22px;
  height:22px;
  display:block;
  fill:currentColor;
}

.contact-social:hover{
  transform:translateY(-3px) scale(1.05);
  background:linear-gradient(135deg, #158745 0%, #f4ce35 100%);
  border-color:transparent;
  color:#fff;
}


/* ============================================================
=  ZONE D'INTERVENTION INTERACTIVE (avec carte Leaflet)
============================================================ */

.page-zone-interactive{
  padding:clamp(2.5rem, 5vw, 4rem) 0;
  background:#fff;
}

.zone-interactive__layout{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:clamp(1.5rem, 3vw, 2.5rem);
  align-items:start;
  max-width:1200px;
  margin:clamp(2rem, 4vw, 3rem) auto 0;
}

/* ===== Conteneur carte Leaflet ===== */

.zone-interactive__map-wrap{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 10px 40px rgba(21,135,69,.12);
  border:1.5px solid rgba(21,135,69,.18);
}

.zone-interactive__map{
  width:100%;
  height:520px;                       /* Hauteur fixe pour eviter le saut au load */
  background:#ECF6F0;                 /* Couleur de fond pendant le chargement */
}

/* Legende de la carte (en bas-droite) */
.zone-interactive__map-legend{
  position:absolute;
  bottom:1rem;
  right:1rem;
  z-index:1000;
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem .85rem;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:999px;
  font-size:.78rem;
  font-weight:600;
  color:#1a1a1a;
  box-shadow:0 4px 12px rgba(0,0,0,.10);
  border:1px solid rgba(21,135,69,.15);
}

.zone-legend-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#158745;
  box-shadow:0 0 0 3px rgba(21,135,69,.25);
  flex-shrink:0;
}

/* ===== Marqueur custom Gam'NT (HTML+CSS) ===== */

.gamnt-marker{
  position:relative;
  width:24px;
  height:24px;
}

.gamnt-marker__dot{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:14px;
  height:14px;
  border-radius:50%;
  background:#158745;
  border:3px solid #fff;
  box-shadow:0 2px 8px rgba(21,135,69,.45);
  z-index:2;
}

.gamnt-marker__pulse{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:24px;
  height:24px;
  border-radius:50%;
  background:#158745;
  opacity:.4;
  animation:gamnt-marker-pulse 2s ease-out infinite;
  z-index:1;
}

@keyframes gamnt-marker-pulse{
  0%{
    transform:translate(-50%, -50%) scale(1);
    opacity:.5;
  }
  100%{
    transform:translate(-50%, -50%) scale(3);
    opacity:0;
  }
}

/* Style propre des popups Leaflet */
.leaflet-popup-content-wrapper{
  border-radius:12px !important;
  box-shadow:0 8px 24px rgba(21,135,69,.18) !important;
}

.leaflet-popup-content{
  margin:.85rem 1rem !important;
}

.leaflet-popup-tip{
  background:#fff;
}

/* ===== Liste des departements (cote droit) ===== */

.zone-interactive__list{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.zone-dept{
  position:relative;
  display:flex;
  align-items:center;
  gap:1.25rem;
  padding:1.25rem 1.5rem;
  background:#fff;
  border:1.5px solid rgba(21,135,69,.18);
  border-radius:16px;
  box-shadow:0 4px 14px rgba(21,135,69,.06);
  transition:
    transform .35s cubic-bezier(.16,1,.3,1),
    border-color .35s ease,
    box-shadow .35s ease;
}

.zone-dept:hover{
  transform:translateX(4px);
  border-color:rgba(21,135,69,.40);
  box-shadow:0 8px 22px rgba(21,135,69,.12);
}

/* Departement principal mis en valeur */
.zone-dept--main{
  background:linear-gradient(135deg, rgba(21,135,69,.05) 0%, rgba(244,206,53,.04) 100%);
  border-color:rgba(21,135,69,.30);
}

.zone-dept--main:hover{
  border-color:rgba(21,135,69,.50);
}

/* Numero du departement (gros chiffre gradient) */
.zone-dept__number{
  flex-shrink:0;
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Sora", system-ui, sans-serif;
  font-size:2.5rem;
  font-weight:800;
  background:linear-gradient(135deg, #158745 0%, #f4ce35 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  letter-spacing:-.01em;
}

.zone-dept__content{
  flex:1;
}

.zone-dept__name{
  margin:0 0 .25rem;
  font-size:1.05rem;
  font-weight:700;
  color:#1a1a1a;
  line-height:1.3;
}

.zone-dept__detail{
  margin:0 0 .35rem;
  font-size:.85rem;
  line-height:1.5;
  color:#555;
}

.zone-dept__badge{
  display:inline-block;
  padding:.2rem .6rem;
  margin-top:.25rem;
  background:rgba(21,135,69,.10);
  color:#0f6233;
  border:1px solid rgba(21,135,69,.22);
  border-radius:999px;
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
}


/* ============================================================
=  HORAIRES INTERACTIFS (jour actuel surligné)
============================================================ */

.page-hours-interactive{
  padding:clamp(2.5rem, 5vw, 4rem) 0;
  background:#ECF6F0;
}

.page-hours-interactive .hours-block{
  max-width:500px;
  margin:clamp(2rem, 4vw, 3rem) auto 0;
  border-radius:16px;
  background:#fff;
  border:1.5px solid rgba(21,135,69,.18);
  box-shadow:0 6px 22px rgba(21,135,69,.08);
  overflow:hidden;
}

.page-hours-interactive .hours-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 1.5rem;
  border-bottom:1px solid rgba(21,135,69,.10);
  transition:background .25s ease;
}

.page-hours-interactive .hours-row:last-child{
  border-bottom:0;
}

.page-hours-interactive .hours-row:hover{
  background:rgba(21,135,69,.03);
}

.page-hours-interactive .hours-day{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-weight:600;
  font-size:.95rem;
  color:#1a1a1a;
}

.page-hours-interactive .hours-time{
  font-size:.95rem;
  font-weight:500;
  color:#555;
}

/* Jour FERMÉ (dimanche) */
.page-hours-interactive .hours-row--closed .hours-day,
.page-hours-interactive .hours-row--closed .hours-time{
  color:#999;
}

/* === Jour ACTUEL : fond vert + texte en gras + label === */
.page-hours-interactive .hours-row--today{
  background:linear-gradient(90deg, rgba(21,135,69,.12) 0%, rgba(244,206,53,.06) 100%) !important;
  position:relative;
}

.page-hours-interactive .hours-row--today::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg, #158745 0%, #f4ce35 100%);
}

.page-hours-interactive .hours-row--today .hours-day{
  color:#158745;
  font-weight:700;
}

.page-hours-interactive .hours-row--today .hours-time{
  color:#158745;
  font-weight:700;
}

/* Dot vert pulsant à gauche du jour actuel */
.hours-today-dot{
  position:relative;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#158745;
  flex-shrink:0;
}

.hours-today-dot::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:50%;
  background:#158745;
  opacity:.4;
  animation:contact-status-pulse 1.5s ease-out infinite;
}

/* Label "Aujourd'hui" en petit badge */
.hours-today-label{
  display:inline-block;
  margin-left:.5rem;
  padding:.1rem .5rem;
  background:#158745;
  color:#fff;
  border-radius:999px;
  font-size:.65rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
}


/* ============================================================
=  CTA FINAL : téléphone mis en valeur
============================================================ */

.page-contact-cta{
  padding:clamp(2.5rem, 5vw, 4rem) 0;
  background:#fff;
}

.contact-cta-banner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  max-width:1100px;
  margin:0 auto;
  padding:clamp(2rem, 4vw, 3rem);
  border-radius:24px;
  background:linear-gradient(135deg, rgba(21,135,69,.08) 0%, rgba(244,206,53,.06) 100%);
  border:1.5px solid rgba(21,135,69,.20);
  box-shadow:0 12px 40px rgba(21,135,69,.12);
  overflow:hidden;
}

.contact-cta-banner::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, #158745 0%, #f4ce35 100%);
}

.contact-cta-banner__content{
  flex:1;
}

.contact-cta-banner__label{
  margin:0 0 .25rem;
  font-size:.85rem;
  font-weight:600;
  color:#158745;
  text-transform:uppercase;
  letter-spacing:.1em;
}

.contact-cta-banner__phone{
  margin:0 0 .5rem;
  font-family:"Sora", system-ui, sans-serif;
  font-size:clamp(1.75rem, 4vw, 2.6rem);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.01em;
}

.contact-cta-banner__phone a{
  background:linear-gradient(135deg, #158745 0%, #f4ce35 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  text-decoration:none;
  transition:opacity .25s ease;
}

.contact-cta-banner__phone a:hover{
  opacity:.85;
}

.contact-cta-banner__sub{
  margin:0;
  font-size:.95rem;
  line-height:1.5;
  color:#555;
}

.contact-cta-banner__btn{
  flex-shrink:0;
}


/* ============================================================
=  RESPONSIVE Contact V2
============================================================ */

@media (max-width: 900px){
  .page-contact .contact-grid{
    grid-template-columns:repeat(2, 1fr);
    max-width:600px;
  }

  .zone-interactive__layout{
    grid-template-columns:1fr;
  }

  .zone-interactive__map{
    height:380px;
  }

  .contact-cta-banner{
    flex-direction:column;
    text-align:center;
  }

  .contact-cta-banner__btn{
    align-self:stretch;
  }
}

@media (max-width: 600px){
  .page-contact .contact-grid{
    grid-template-columns:1fr;
    max-width:400px;
  }

  .contact-status{
    font-size:.85rem;
    padding:.6rem 1.2rem;
  }

  .zone-dept{
    padding:1rem 1.2rem;
    gap:1rem;
  }

  .zone-dept__number{
    width:52px;
    height:52px;
    font-size:2rem;
  }

  .zone-interactive__map{
    height:320px;
  }
}



/* ============================================================
=  VAGUE 6.1 — Page Contact V2 fix : 2 grilles horaires + fond uniforme
============================================================ */

/* === Harmonisation du fond du HERO page Contact === */
/* Le hero generique utilise #e4efe6, on force #ECF6F0 pour la page Contact uniquement */
body.page-contact-active .page-hero,
body.page-template-page-contact .page-hero{
  background:#ECF6F0 !important;
}

/* === Section Horaires : 2 grilles cote a cote === */

.hours-grids{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
  max-width:900px;
  margin:clamp(2rem, 4vw, 3rem) auto 0;
}

/* Card individuelle (Atelier ou Itinerance) */
.hours-grid-card{
  background:#fff;
  border:1.5px solid rgba(21,135,69,.18);
  border-radius:16px;
  box-shadow:0 6px 22px rgba(21,135,69,.08);
  overflow:hidden;
  transition:
    transform .35s cubic-bezier(.16,1,.3,1),
    border-color .35s ease,
    box-shadow .35s ease;
}

.hours-grid-card:hover{
  transform:translateY(-3px);
  border-color:rgba(21,135,69,.30);
  box-shadow:0 10px 28px rgba(21,135,69,.12);
}

/* En-tete avec icone + titre + sous-titre */
.hours-grid-card__head{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.25rem 1.5rem;
  background:linear-gradient(135deg, rgba(21,135,69,.06) 0%, rgba(244,206,53,.04) 100%);
  border-bottom:1px solid rgba(21,135,69,.12);
}

.hours-grid-card__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  flex-shrink:0;
  background:#fff;
  border-radius:12px;
  border:1px solid rgba(21,135,69,.15);
  box-shadow:0 2px 6px rgba(21,135,69,.08);
}

.hours-grid-card__icon svg{
  width:28px;
  height:28px;
}

.hours-grid-card__title{
  margin:0 0 .2rem;
  font-size:1.05rem;
  font-weight:700;
  color:#1a1a1a;
  line-height:1.2;
}

.hours-grid-card__sub{
  margin:0;
  font-size:.82rem;
  color:#555;
  line-height:1.3;
}

/* Override pour le hours-block dans une grid-card (pas de marge externe) */
.hours-grid-card .hours-block{
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  max-width:none !important;
}

/* Responsive : 1 colonne sur mobile */
@media (max-width: 800px){
  .hours-grids{
    grid-template-columns:1fr;
    max-width:500px;
  }
}

/* ============================================================
=  VAGUE 7 — Chiffres clés sur page-engagements.php
=  (CSS copié depuis home.css car page charge pages.css)
============================================================ */

.home-about__stats{
  margin-top:clamp(2.5rem, 5vw, 4rem);
  position:relative;
}

.home-about__stats-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  margin-bottom:2rem;
  position:relative;
}

.home-about__stats-divider::before,
.home-about__stats-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(21,135,69,.3) 50%, transparent 100%);
}

.home-about__stats-label{
  font-size:.78rem;
  font-weight:600;
  color:#158745;
  text-transform:uppercase;
  letter-spacing:.18em;
  padding:0 .5rem;
}

/* Cards stat dans la fusion - epurees, sans bulle */
.home-about__stats .home-stats__card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:clamp(1.5rem, 3vw, 2rem) 1rem;
  background:#fff;
  border:1.5px solid rgba(21,135,69,.18);
  border-radius:16px;
  box-shadow:0 4px 16px rgba(21,135,69,.06);
  transition:
    transform .35s cubic-bezier(.16,1,.3,1),
    border-color .35s ease,
    box-shadow .35s ease;
  overflow:hidden;                   /* Necessaire pour le liseret en haut */
}

/* Liseret gradient en haut au hover (comme les cards Prestations) */
.home-about__stats .home-stats__card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, #158745 0%, #f4ce35 100%);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}

.home-about__stats .home-stats__card:hover{
  transform:translateY(-4px);
  border-color:rgba(21,135,69,.35);
  box-shadow:
    0 10px 28px rgba(21,135,69,.15),
    0 0 24px rgba(244,206,53,.10);   /* Petit glow dore */
}

.home-about__stats .home-stats__card:hover::before{
  transform:scaleX(1);
}

/* Icone : vert plein, halo dore au hover, plus grosse */
.home-about__stats .home-stats__icon{
  width:48px !important;
  height:48px !important;
  background:none !important;
  border-radius:0 !important;
  margin-bottom:1rem;
  padding:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:filter .35s ease;
}

.home-about__stats .home-stats__icon svg{
  width:48px;
  height:48px;
  display:block;
  /* Couleur uniforme : vert plein */
  color:#158745;
  filter:drop-shadow(0 2px 6px rgba(21,135,69,.18));
  transition:transform .35s cubic-bezier(.16,1,.3,1), filter .35s ease;
}

/* Au hover : icone agrandie + halo dore */
.home-about__stats .home-stats__card:hover .home-stats__icon svg{
  transform:scale(1.12);
  filter:
    drop-shadow(0 4px 10px rgba(21,135,69,.25))
    drop-shadow(0 0 12px rgba(244,206,53,.40));   /* Halo dore au hover */
}

/* Wrapper chiffre + suffixe */
.home-about__stats .home-stats__number-wrap{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:.2rem;
  margin:.4rem 0 .6rem;
  line-height:1;
}

/* === FIX CRITIQUE : le chiffre en gradient texte === */
/* Tous les !important pour garantir que le texte est bien visible */
.home-about__stats .home-stats__number{
  display:inline-block !important;
  font-size:clamp(1.8rem, 4vw, 2.6rem) !important;
  font-weight:800 !important;
  letter-spacing:-.02em !important;
  line-height:1 !important;
  background:linear-gradient(135deg, #158745 0%, #f4ce35 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
}

.home-about__stats .home-stats__suffix{
  font-size:clamp(1rem, 1.8vw, 1.3rem) !important;
  font-weight:700 !important;
  color:#f4ce35 !important;
  line-height:1 !important;
}

.home-about__stats .home-stats__label{
  margin:0;
  font-size:.85rem;
  font-weight:500;
  color:#555 !important;
  line-height:1.4;
  max-width:160px;
}

/* Grid responsive */
.home-about__stats .home-stats__grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap:1rem !important;
  max-width:1100px;
  margin:0 auto;
}

@media (max-width: 600px){
  .home-about__stats .home-stats__grid{
    grid-template-columns:repeat(2, 1fr) !important;
    gap:.75rem !important;
  }

  .home-about__stats .home-stats__icon svg{
    width:28px;
    height:28px;
  }
}


/* ============================================================
=  VAGUE 7.1 — Section chiffres sur page-engagements.php
=  Fond vert pâle (identique à l'index) pour cards stats cohérentes
============================================================ */

.home-engagements{
  background:#ECF6F0;
  padding:clamp(2.5rem, 5vw, 4rem) 0;
}

.home-engagements .section-title{ color:#1a1a1a; }
.home-engagements .section-intro{ color:#555; }


/* ============================================================
=  VAGUE 8 — Fonds spécifiques page Reconditionnés (.recond-page)
=  Hero 🟢 / Listing 🟢 / Qualité ⚪ / Confiance 🟢 / CTA 🟢
=  Ciblé via .recond-page pour ne pas toucher les autres pages
============================================================ */

/* Fond de base de toute la page : vert (évite toute bande sombre du body) */
.recond-page{
  background:#ECF6F0;
}

/* === SINGLE Reconditionné : sections process + faq en clair (plus de noir) === */

/* "Nous reconditionnons avec passion" → fond blanc, textes sombres */
.recond-page .recon-process{
  background:#fff;
  color:var(--section-light-text, #1a2a1a);
}
.recond-page .recon-process .section-title{
  color:var(--section-light-text, #1a2a1a);
}
.recond-page .recon-process__step{
  background:#fff;
  border:1.5px solid rgba(21,135,69,.15);
  box-shadow:0 6px 22px rgba(21,135,69,.08);
}
.recond-page .recon-process__step:hover{
  box-shadow:0 14px 34px rgba(21,135,69,.14);
}
.recond-page .recon-process__step h3{
  color:var(--section-light-text, #1a2a1a);
}
.recond-page .recon-process__step p{
  color:#5a6a5a;
}

/* FAQ → fond vert clair, cards blanches, textes sombres */
.recond-page .recon-faq{
  background:#ECF6F0;
  color:var(--section-light-text, #1a2a1a);
}
/* Icônes FAQ : gradient vert→doré FIGÉ (sans l'animation lumineuse) + grosses */
.recond-page .recon-faq__card-icon i{
  font-size:2.9rem;
  background:linear-gradient(135deg, #158745, #f4ce35);
  background-size:100% 100%;
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  animation:none;
}
.recond-page .recon-faq .section-title{
  color:var(--section-light-text, #1a2a1a);
}
.recond-page .recon-faq__card{
  background:#fff;
  border:1.5px solid rgba(21,135,69,.15);
  box-shadow:0 6px 22px rgba(21,135,69,.08);
}
.recond-page .recon-faq__card:hover{
  box-shadow:0 14px 34px rgba(21,135,69,.14);
}
.recond-page .recon-faq__card h3{
  color:var(--section-light-text, #1a2a1a);
}
.recond-page .recon-faq__card p{
  color:#5a6a5a;
}

/* Hero : vert */
.recond-page .page-hero{
  background:#ECF6F0;
}

/* Listing (système d'appareils) : vert */
.recond-page .recon-listing{
  background:#ECF6F0;
}

/* Qualité (slider étapes) : blanc */
.recond-page .recon-quality{
  background:#fff;
}

/* === SLIDER QUALITÉ — Design premium éditorial WOW (tuiles immersives) === */

/* Espace vertical pour que le lift au hover ne soit pas rogné par overflow:hidden */
.recond-page .recon-quality__viewport{
  padding:14px 4px 18px;
  margin:-14px -4px -18px;
}

/* Flèches de navigation : fond clair + icône verte */
.recond-page .recon-quality__arrow{
  background:#ECF6F0;
  color:var(--brand-green);
  border-color:rgba(21,135,69,.18);
}
.recond-page .recon-quality__arrow:hover:not(:disabled){
  background:rgba(21,135,69,.12);
  border-color:var(--brand-green);
}

/* Card = grande tuile photo immersive */
.recond-page .recon-quality__card{
  position:relative;
  aspect-ratio:3 / 4;
  border-radius:22px;
  overflow:hidden;
  border:none;
  background:linear-gradient(135deg, #1a3a28, #0f2818);
  box-shadow:none;
  /* translateZ force un layer GPU → clip des coins stable même quand l'image zoome */
  transform:translateZ(0);
  -webkit-mask-image:-webkit-radial-gradient(white, black);
  transition:transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s ease;
}
.recond-page .recon-quality__card:hover{
  transform:translateY(-8px) translateZ(0);
  box-shadow:0 18px 38px rgba(15,30,20,.22);
}

/* Bordure gradient lumineuse au hover (alignée 22px) */
.recond-page .recon-quality__card::after{
  border-radius:22px;
  background:linear-gradient(135deg, rgba(21,135,69,.9), rgba(244,206,53,.7));
  padding:1.5px;
}

/* Conteneur image : clip stable (translateZ + mask) */
.recond-page .recon-quality__card-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  aspect-ratio:auto;
  border-radius:22px;
  overflow:hidden;
  transform:translateZ(0);
  -webkit-mask-image:-webkit-radial-gradient(white, black);
}
.recond-page .recon-quality__card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  -webkit-mask-image:none;
  mask-image:none;
  transition:transform .8s cubic-bezier(.16,1,.3,1), filter .55s ease;
  filter:saturate(1.02);
}
.recond-page .recon-quality__card:hover .recon-quality__card-img img{
  transform:scale(1.08);
  filter:saturate(1.12) brightness(1.05);
}

/* Voile dégradé pour la lisibilité (transition image → texte) */
.recond-page .recon-quality__card-img::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,
    rgba(6,20,12,.85) 0%,
    rgba(6,20,12,.35) 26%,
    rgba(6,20,12,.02) 52%,
    transparent 100%);
  pointer-events:none;
  z-index:1;
}

/* Numéro : badge flat uniforme (gradient propre, contour blanc) */
.recond-page .recon-quality__card-num{
  position:absolute;
  top:1rem;
  left:1rem;
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg, #158745 0%, #f4ce35 100%);
  border:3px solid #fff;
  box-shadow:0 6px 16px rgba(0,0,0,.28);
  font-family:"Sora", system-ui, sans-serif;
  font-size:1.35rem;
  font-weight:800;
  line-height:1;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.22);
  z-index:4;
  transition:transform .55s cubic-bezier(.34,1.56,.64,1), box-shadow .45s ease;
}

/* Halo doré pulsant derrière le badge (animation continue) */
.recond-page .recon-quality__card-num::before{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(244,206,53,.45) 0%, rgba(244,206,53,0) 70%);
  z-index:-1;
  animation:recond-num-halo 2.8s ease-in-out infinite;
}
@keyframes recond-num-halo{
  0%, 100%{ transform:scale(.85); opacity:.45; }
  50%     { transform:scale(1.18); opacity:.95; }
}

/* Au hover : le badge pop, pivote et son ombre s'intensifie */
.recond-page .recon-quality__card:hover .recon-quality__card-num{
  transform:scale(1.14) rotate(-6deg);
  box-shadow:0 10px 24px rgba(0,0,0,.34);
}
.recond-page .recon-quality__card:hover .recon-quality__card-num::before{
  animation-duration:1.2s;          /* le halo pulse plus vite au survol */
}

/* Contenu : texte net + flou progressif derrière */
.recond-page .recon-quality__card-body{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  margin:0;
  padding:1.6rem 1.4rem 1.6rem;
  text-align:left;
  z-index:2;
  isolation:isolate;
  /* Voile sombre plus marqué qui se dégrade vers le haut */
  background:linear-gradient(to top, rgba(5,15,9,.78) 0%, rgba(5,15,9,.32) 55%, transparent 100%);
}

/* Calque de FLOU PROGRESSIF : net (100%) en bas → 0 en haut, pour la souplesse */
.recond-page .recon-quality__card-body::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  top:-55px;                       /* déborde vers le haut pour un fondu doux */
  z-index:-1;                      /* derrière le texte, devant l'image */
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  /* Le masque fait dégrader le flou : 100% en bas, 0% en haut */
  -webkit-mask-image:linear-gradient(to top, #000 38%, rgba(0,0,0,.5) 68%, transparent 100%);
  mask-image:linear-gradient(to top, #000 38%, rgba(0,0,0,.5) 68%, transparent 100%);
  pointer-events:none;
  transition:-webkit-backdrop-filter .5s ease, backdrop-filter .5s ease;
}
.recond-page .recon-quality__card:hover .recon-quality__card-body::after{
  -webkit-backdrop-filter:blur(17px);
  backdrop-filter:blur(17px);
}

/* Petit trait accent gradient au-dessus du titre */
.recond-page .recon-quality__card-body::before{
  content:"";
  display:block;
  width:34px;
  height:3px;
  border-radius:2px;
  background:linear-gradient(90deg, var(--brand-green), var(--brand-gold));
  margin-bottom:.7rem;
  transition:width .5s cubic-bezier(.16,1,.3,1);
  box-shadow:0 0 12px rgba(244,206,53,.5);
}
.recond-page .recon-quality__card:hover .recon-quality__card-body::before{
  width:54px;
}
.recond-page .recon-quality__card-body h3{
  color:#fff;
  font-size:clamp(1.2rem, 2vw, 1.4rem);
  font-weight:700;
  letter-spacing:-.01em;
  margin:0 0 .4rem;
}
.recond-page .recon-quality__card-body p{
  color:rgba(255,255,255,.88);
  font-size:.84rem;
  line-height:1.5;
  margin:0;
}

/* Pourquoi nous faire confiance : vert */
.recond-page .page-guarantees{
  background:#ECF6F0;
}

/* CTA final : vert */
.recond-page .recon-cta-final,
.recond-page .page-cta-section{
  background:#ECF6F0;
}


/* =========================================================
 * COHÉRENCE CTA MOBILE — boutons centrés + pleine largeur
 * Aligne tous les CTA sur le « CTA contact final » (référence)
 * pour éviter les boutons "de travers" / trop petits sur mobile.
 * ========================================================= */
@media (max-width:600px){
  .section-cta{ text-align:center; }
  .section-cta .btn,
  .section-cta .btn-cta,
  .section-cta .btn-primary,
  .cta-final__actions .btn,
  .recon-cta-final__actions .btn{
    display:flex;
    width:100%;
    max-width:340px;
    margin-left:auto;
    margin-right:auto;
  }
}

/* =========================================================
 * FIX RESPONSIVE — slider étapes (reconditionnés)
 * La règle de base (.recon-quality__card = 1/4) est déclarée APRÈS
 * les paliers tablette dans le fichier et les écrasait (même spécificité).
 * On rétablit avec une spécificité supérieure (.recond-page) :
 * 4 cartes (desktop) → 3 → 2 → 1 selon la largeur.
 * ========================================================= */
@media (max-width:1000px){
  .recond-page .recon-quality__card{ flex:0 0 calc((100% - 3rem) / 3); }
}
@media (max-width:840px){
  .recond-page .recon-quality__card{ flex:0 0 calc((100% - 1.5rem) / 2); }
}
@media (max-width:600px){
  .recond-page .recon-quality__card{ flex:0 0 100%; }
}

/* =========================================================
 * COHÉRENCE CTA — empilé + centré en responsive (≤840px),
 * bannière (bouton à droite) sur grand écran.
 * Même comportement sur toutes les pages.
 * ========================================================= */
@media (max-width:840px){
  .cta-final__inner,
  .contact-cta-banner{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  /* Bouton "Nous contacter" : pleine largeur plafonnée + centré
     (recon, prestations…) — identique au CTA contact de référence */
  .cta-final__actions{
    width:100%;
    display:flex;
    justify-content:center;
  }
  .cta-final__actions .btn{
    box-sizing:border-box;
    width:100%;
    max-width:340px;
    justify-content:center;
  }
}

/* =========================================================
 * ONGLETS PRESTATIONS — mobile (≤600px)
 * La barre "pilule" arrondie devient moche quand les onglets
 * wrappent sur 2 lignes. On passe en liste empilée pleine
 * largeur : propre, lisible et tactile.
 * ========================================================= */
@media (max-width:600px){
  .tabs-nav,
  .page-tabs .tabs-nav{
    box-sizing:border-box;
    flex-direction:column;
    flex-wrap:nowrap;
    width:100%;
    max-width:100%;
    gap:.4rem;
    padding:.4rem;
    border-radius:16px;             /* rectangle arrondi au lieu du pill */
  }
  .tabs-nav__item{
    box-sizing:border-box;
    width:100%;
    flex:1 1 auto;
    justify-content:center;         /* icône + texte centrés */
    padding:.85rem 1rem;
    border-radius:12px;
  }
  .tabs-nav__text{
    flex:0 1 auto;
    justify-content:center;         /* texte centré (plus d'alignement à gauche) */
  }
}

/* =========================================================
 * HORAIRES — mobile (CSS pur, sans modif PHP)
 * ≤600px : l'heure s'aligne à droite et peut passer sur 2 lignes
 *          proprement, le jour reste ancré en haut.
 * ≤430px : sur très petit écran, on empile (jour au-dessus,
 *          heure en dessous en pleine largeur) → plus de compression.
 * ========================================================= */
@media (max-width:600px){
  .page-hours-interactive .hours-row{
    align-items:flex-start;
    gap:.6rem;
  }
  .page-hours-interactive .hours-time{
    text-align:right;
  }
}
@media (max-width:430px){
  .page-hours-interactive .hours-row{
    flex-direction:column;
    gap:.4rem;
  }
  .page-hours-interactive .hours-time{
    text-align:left;
  }
}