/*
#|#|#|##|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|
#|                                                                                                                            						 #|
#|  ███╗   ██╗██╗   ██╗ ██████╗██╗     ███████╗██╗   ██╗███████╗    ███████╗██╗   ██╗███████╗████████╗███████╗███╗   ███╗              ██╗██████╗    #|
#|  ████╗  ██║██║   ██║██╔════╝██║     ██╔════╝██║   ██║██╔════╝    ██╔════╝╚██╗ ██╔╝██╔════╝╚══██╔══╝██╔════╝████╗ ████║    ██╗   ██╗███║╚════██╗   #|
#|  ██╔██╗ ██║██║   ██║██║     ██║     █████╗  ██║   ██║███████╗    ███████╗ ╚████╔╝ ███████╗   ██║   █████╗  ██╔████╔██║    ██║   ██║╚██║ █████╔╝   #|
#|  ██║╚██╗██║██║   ██║██║     ██║     ██╔══╝  ██║   ██║╚════██║    ╚════██║  ╚██╔╝  ╚════██║   ██║   ██╔══╝  ██║╚██╔╝██║    ╚██╗ ██╔╝ ██║██╔═══╝    #|
#|  ██║ ╚████║╚██████╔╝╚██████╗███████╗███████╗╚██████╔╝███████║    ███████║   ██║   ███████║   ██║   ███████╗██║ ╚═╝ ██║     ╚████╔╝  ██║███████╗   #|
#|  ╚═╝  ╚═══╝ ╚═════╝  ╚═════╝╚══════╝╚══════╝ ╚═════╝ ╚══════╝    ╚══════╝   ╚═╝   ╚══════╝   ╚═╝   ╚══════╝╚═╝     ╚═╝      ╚═══╝   ╚═╝╚══════╝   #|
#|                                                                                                                           						 #|
#|           Theme NUCLEUS v12.0.0 for Wordpress, héritage SYSTEM TEMPLATE - fait avec ♥ par Romain-NT - Gam'NT Services - 2026                      #|
#|                                                                                                                      					         #|
#|#|#|##|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|

	LEGENDE DE LA STRUCTURE DU THEME NUCLEUS SYSTEM - Gam'NT Services
	     ========================================================
#|
#|  7. SYSTEME PAGE ACCUEIL NUCLEUS
#|   - 7.1 Hero — base
#|   - 7.2 Gradient et soulignement
#|   - 7.3 Sections communes
#|   - 7.4 Section statistiques
#|   - 7.5 Cartes services
#|   - 7.6 Cartes engagements
#|   - 7.7 Reconditionnes
#|   - 7.8 Animation de revelation
#|   - 7.9 Section A propos (sticky storytelling)
#|   - 7.10 Section Contact (cartes d'action)
#|   - 7.11 Systeme scroll moderne (parallax + scrub)
#|   - 7.12 Accueil responsive
#|
====================-FIN-=======================
*/

/*======================================================
=           7.0 - SYSTEME PAGE ACCUEIL NUCLEUS              =
======================================================*/

/* --===== 7.1 Hero — base =====-- */

.home-hero{
  padding:0;
  width:100%;
}

.home-hero__inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:85vh;
}

.home-hero__visual{
  overflow:hidden;
}

.home-hero__visual img{
  width:100%;
  height:85vh;
  object-fit:cover;
  object-position:center;   /* recadrage centré, ajustable (ex: center top) */
  display:block;
}

.home-hero__content{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:3rem clamp(2rem, 5vw, 5rem);
  background:#ECF6F0;
  color:#1a2a1a;
}

.home-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;
}

.home-hero__title{
  margin:0 0 1rem;
  font-size:clamp(2.2rem, 4vw, 3.4rem);
  font-weight:800;
  line-height:1.08;
  color:#1a2a1a;
}

.home-hero__subtitle{
  margin:.5rem 0 1.5rem;
  font-size:1.05rem;
  font-weight:400;
  color:#3a5a2a;
}

.home-hero__subtitle strong{
  font-weight:700;
  color:#1a2a1a;
}

.home-hero__actions{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:1.5rem;
}

.home-hero__trust{
  display:flex;
  gap:1.2rem;
  flex-wrap:wrap;
  margin-top:.5rem;
}

/* --===== 7.2 Gradient et soulignement =====-- */

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

@keyframes gradient-shimmer{
  from{ background-position:0% 0; }
  to{ background-position:-100% 0; }
}

/* Animation shimmer declenchee par JS apres le loader */
.gradient-text.shimmer-active{
  animation:gradient-shimmer 3.2s ease-in-out forwards;
}

.underline-scroll{
  position:relative;
}

.underline-scroll::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:2px;
  background:linear-gradient(90deg,#158745,#f4ce35);
  transition:width .6s ease;
}

.underline-scroll.visible::after{
  width:100%;
}

/* --===== 7.3 Sections communes =====-- */

.section-title{
  text-align:center;
  margin-bottom:.8rem;
  font-size:clamp(2rem, 3.5vw, 3rem);
  font-weight:700;
}

.section-intro{
  text-align:center;
  max-width:600px;
  margin:0 auto 3rem;
  font-size:1rem;
  line-height:1.6;
  color:var(--muted);
}

.section-cta{
  text-align:center;
  margin-top:3rem;
}

.home-reviews,
.home-services,
.home-engagements,
.home-reconditioned{
  padding:clamp(2.5rem, 5vw, 3.5rem) 0;
}

/* -- Sections claires -- */

.home-reviews,
.home-engagements{
  background:var(--section-light);
  color:var(--section-light-text);
}

.home-reviews .section-title,
.home-engagements .section-title{
  color:var(--section-light-text);
}

.home-reviews .section-intro,
.home-engagements .section-intro{
  color:var(--section-light-muted);
}

.home-reviews .reviews-note{
  color:var(--section-light-muted);
}

.reviews-note{
  text-align:center;
  margin-top:2rem;
  font-style:italic;
  font-size:.95rem;
}

/* -- Boutons CTA sur fond clair -- */

.home-reviews .btn-primary,
.home-engagements .btn-primary{
  color:#fff;
}

.home-engagements .section-cta{
  text-align:center;
  margin-top:3rem;
}

/* -- Sections sombres (défaut) -- */

.home-services,
.home-reconditioned{
  position:relative;
  background:var(--bg);
}

.home-services::before,
.home-reconditioned::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(21,135,69,.10) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 100%, rgba(244,206,53,.06) 0%, transparent 70%);
  pointer-events:none;
  opacity:0;
  transition:opacity .8s ease;
}

.home-services.is-visible::before,
.home-reconditioned.is-visible::before{
  opacity:1;
}

/* --===== 7.4 Section statistiques =====-- */

.home-stats{
  padding:3rem 0;
  background:linear-gradient(135deg, rgba(21,135,69,.08) 0%, rgba(244,206,53,.06) 100%);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.home-stats__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:2rem;
  text-align:center;
}

.home-stats__item{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.home-stats__number{
  font-size:clamp(2rem, 4vw, 3rem);
  font-weight:800;
  background:linear-gradient(135deg,#158745,#f4ce35);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  line-height:1;
}

.home-stats__suffix{
  display:inline;
  font-size:clamp(1.2rem, 2vw, 1.6rem);
  font-weight:700;
  color:var(--brand-gold);
}

.home-stats__label{
  margin:.4rem 0 0;
  font-size:.88rem;
  color:var(--muted);
  font-weight:400;
}

/* --===== 7.5 Cartes services =====-- */

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

.service-card{
  position:relative;
  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),
    background var(--ease-nucleus);
}

.service-card:hover{
  transform:translateY(-4px);
  border-color:rgba(21,135,69,.28);
  background:rgba(255,255,255,.06);
  box-shadow:
    0 20px 40px rgba(0,0,0,.16),
    0 0 20px rgba(21,135,69,.08);
}

.disabled-old-service-card-icon-340{
  width:56px;
  height:56px;
  margin-bottom:1.5rem;
}

.disabled-old-service-card-icon-svg-346{
  width:100%;
  height:100%;
}

.service-card__title{
  margin:0 0 .8rem;
  font-size:1.15rem;
  font-weight:600;
  color:#fff;
}

.service-card__text{
  margin:0 0 1.2rem;
  font-size:.92rem;
  line-height:1.6;
  color:var(--muted);
}

.service-card__tag{
  display:inline-block;
  padding:.3rem .75rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.02em;
  background:rgba(21,135,69,.14);
  color:var(--brand-green);
  border:1px solid rgba(21,135,69,.22);
}

/* --===== 7.6 Cartes engagements =====-- */

.home-engagements__layout{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:2rem;
  align-items:start;
}

.home-engagements__list{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.engagement-card{
  display:flex;
  gap:1.5rem;
  padding:1.5rem;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--section-light-border);
  box-shadow:0 2px 12px rgba(0,0,0,.04);
  transition:
    border-color var(--ease-nucleus),
    box-shadow var(--ease-nucleus);
}

.engagement-card:hover{
  border-color:rgba(21,135,69,.28);
  box-shadow:0 8px 24px rgba(21,135,69,.08);
}

.engagement-card__number{
  flex:0 0 auto;
  font-size:1.8rem;
  font-weight:800;
  line-height:1;
  background:linear-gradient(135deg,#158745,#f4ce35);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  padding-top:.2rem;
}

.engagement-card__body h3{
  margin:0 0 .4rem;
  font-size:1.05rem;
  font-weight:600;
  color:var(--section-light-text);
}

.engagement-card__body p{
  margin:0;
  font-size:.9rem;
  line-height:1.55;
  color:var(--section-light-muted);
}

/* highlight box */

.highlight-box{
  position:sticky;
  top:calc(var(--header-total-height) + 2rem);
  padding:2.5rem 2rem;
  border-radius:20px;
  background:linear-gradient(160deg, rgba(21,135,69,.08) 0%, rgba(244,206,53,.06) 100%);
  border:1px solid rgba(21,135,69,.18);
  box-shadow:0 4px 20px rgba(21,135,69,.06);
  text-align:center;
}

.highlight-box__icon{
  display:block;
  font-size:2.4rem;
  margin-bottom:1rem;
}

.highlight-box__stat{
  margin:0;
  font-size:2rem;
  font-weight:800;
  background:linear-gradient(135deg,#158745,#f4ce35);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.highlight-box__label{
  margin:.5rem 0 1.5rem;
  font-size:.9rem;
  line-height:1.5;
  color:var(--section-light-muted);
}

.highlight-box__link{
  display:inline-block;
  font-size:.88rem;
  font-weight:600;
  color:var(--brand-green);
  text-decoration:none;
  transition:color var(--ease-nucleus);
}

.highlight-box__link:hover{
  color:var(--brand-gold);
}

/* --===== 7.7 Reconditionnés =====-- */

.home-reconditioned__layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:center;
}

.reconditioned-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-bottom:1.5rem;
}

.reconditioned-badge{
  display:inline-block;
  padding:.4rem .8rem;
  border-radius:999px;
  font-size:.82rem;
  font-weight:500;
  background:rgba(21,135,69,.10);
  border:1px solid rgba(21,135,69,.18);
  color:var(--muted);
}

.home-reconditioned__text{
  margin:0 0 2rem;
  font-size:.95rem;
  line-height:1.65;
  color:var(--muted);
}

.home-reconditioned__visual img{
  width:100%;
  height:auto;
  border-radius:20px;
  display:block;
}

/* --===== 7.8 Animation de revelation =====-- */

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease;
}

.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* --===== 7.8b Animated checkmarks =====-- */

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

.trust-check__circle{
  fill:none;
  stroke:#158745;
  stroke-width:2;
  stroke-dasharray:62.83;
  stroke-dashoffset:62.83;
  transition:stroke-dashoffset .6s ease;
}

.trust-check__tick{
  fill:none;
  stroke:#158745;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:20;
  stroke-dashoffset:20;
  transition:stroke-dashoffset .35s ease .5s;
}

.home-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);
}

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

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

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

/* --===== 7.8c (reserve) =====-- */

/* --===== 7.8d Glass glow sections =====-- */

.home-services,
.home-reconditioned{
  overflow:hidden;
}

/* --===== 7.9 Section A propos (sticky storytelling) =====-- */

/* Section claire pour creer une respiration apres "Reconditionnes" (sombre)
   et avant "Contact". On reprend les variables --section-light deja definies. */

.home-about{
  padding:clamp(4rem, 8vw, 7rem) 0;
  background:var(--section-light);
  color:var(--section-light-text);
  position:relative;
  overflow:hidden;
}

/* Halo decoratif en arriere-plan (subtil, ne doit jamais distraire) */
.home-about::before{
  content:"";
  position:absolute;
  top:-200px;
  right:-200px;
  width:500px;
  height:500px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(21,135,69,.06) 0%, transparent 70%);
  pointer-events:none;
}

.home-about::after{
  content:"";
  position:absolute;
  bottom:-200px;
  left:-200px;
  width:500px;
  height:500px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(244,206,53,.05) 0%, transparent 70%);
  pointer-events:none;
}

.home-about__inner{
  position:relative;
  z-index:1;
}

.home-about .section-title{
  color:var(--section-light-text);
}

.home-about .section-intro{
  color:var(--section-light-muted);
}

/* -- Layout sticky scrollytelling -- */

.home-about__layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 5vw, 5rem);
  align-items:start; /* IMPORTANT : sans ca, sticky ne fonctionne pas en grid */
  margin-top:3rem;
}

/* Colonne visuelle - reste sticky pendant le scroll du texte */
.home-about__visual{
  position:sticky;
  top:calc(var(--header-total-height, 100px) + 2rem);
  align-self:start; /* Double securite pour le sticky */
  height:fit-content;
}

.home-about__photo{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  aspect-ratio:4/5;
  box-shadow:
    0 20px 60px rgba(21,135,69,.12),
    0 4px 16px rgba(0,0,0,.06);
  margin:0;
}

.home-about__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.2s ease;
}

.home-about__photo:hover img{
  transform:scale(1.03);
}

/* Badge flottant sur la photo */
.home-about__photo-badge{
  position:absolute;
  bottom:1.5rem;
  left:1.5rem;
  padding:.6rem 1rem;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:12px;
  font-size:.85rem;
  font-weight:600;
  color:var(--brand-green, #158745);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.home-about__photo-badge::before{
  content:"●";
  display:inline-block;
  margin-right:.4rem;
  color:#22c55e;
  animation:pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot{
  0%, 100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.6; transform:scale(.85); }
}

/* Colonne texte - defile normalement */
.home-about__story{
  display:flex;
  flex-direction:column;
  gap:2.5rem;
}

/* Chaque "acte" du storytelling */
.about-act{
  position:relative;
  padding-left:2rem;
  border-left:2px solid rgba(21,135,69,.15);
  transition:border-left-color .6s ease;
}

.about-act.is-visible{
  border-left-color:rgba(21,135,69,.5);
}

.about-act::before{
  content:"";
  position:absolute;
  /* La border-left:2px de la card decale l'origine. */
  /* Ajustement empirique pour centrage parfait sur le trait. */
  left:-1px;
  top:.4rem;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--brand-green, #158745);
  box-sizing:border-box;
  /* translateX(-50%) centre la pastille SUR le trait */
  transform:translateX(-50%);
  transition:background .4s ease, transform .4s ease;
}

.about-act.is-visible::before{
  background:var(--brand-green, #158745);
  transform:translateX(-50%) scale(1.2);  /* On preserve le centrage en scalant */
}

.about-act__label{
  display:inline-block;
  margin-bottom:.6rem;
  padding:.25rem .7rem;
  background:rgba(21,135,69,.08);
  border-radius:999px;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--brand-green, #158745);
}

.about-act__title{
  margin:0 0 .8rem;
  font-size:clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight:700;
  line-height:1.2;
  color:var(--section-light-text);
}

.about-act__title strong{
  background:linear-gradient(135deg, #158745, #f4ce35);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

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

.about-act__text strong{
  color:var(--section-light-text);
  font-weight:700;
}

/* CTA final */
.home-about__cta{
  margin-top:1rem;
  padding-top:2rem;
  border-top:1px solid rgba(0,0,0,.08);
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

/* --===== 7.10 Section Contact (cartes d'action) =====-- */

/* Section sombre pour creer un contraste fort apres "A propos" (clair).
   Pas de formulaire (RGPD-free) : 3 cartes d'action directe. */

.home-contact{
  padding:clamp(4rem, 8vw, 7rem) 0;
  background:var(--bg);
  color:#fff;
  position:relative;
  overflow:hidden;
}

/* Halo decoratif (cohere avec home-services / home-reconditioned) */
.home-contact::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 50% 60% at 50% 0%, rgba(21,135,69,.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 50% 100%, rgba(244,206,53,.06) 0%, transparent 70%);
  pointer-events:none;
}

.home-contact__inner{
  position:relative;
  z-index:1;
}

.home-contact .section-title,
.home-contact .section-intro{
  color:#fff;
}

.home-contact .section-intro{
  color:rgba(255,255,255,.7);
}

/* -- Grille de cartes d'action -- */

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

/* Carte de contact (lien cliquable entier) */
.contact-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:2.5rem 2rem;
  border-radius:24px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  text-decoration:none;
  color:#fff;
  overflow:hidden;
  transition:
    transform var(--ease-nucleus, .35s ease),
    border-color var(--ease-nucleus, .35s ease),
    background var(--ease-nucleus, .35s ease),
    box-shadow var(--ease-nucleus, .35s ease);
}

/* Halo qui apparait au hover, depuis le coin superieur */
.contact-card::before{
  content:"";
  position:absolute;
  top:-50%;
  right:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(circle at center, rgba(21,135,69,.18) 0%, transparent 50%);
  opacity:0;
  transition:opacity .6s ease;
  pointer-events:none;
}

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

.contact-card:hover{
  transform:translateY(-6px);
  border-color:rgba(21,135,69,.35);
  background:rgba(255,255,255,.06);
  box-shadow:
    0 24px 48px rgba(0,0,0,.24),
    0 0 24px rgba(21,135,69,.12);
}

.contact-card__icon{
  position:relative;
  z-index:1;
  width:64px;
  height:64px;
  margin-bottom:1.5rem;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(21,135,69,.15), rgba(244,206,53,.10));
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .5s cubic-bezier(.34, 1.56, .64, 1);
}

.contact-card:hover .contact-card__icon{
  transform:scale(1.1) rotate(-5deg);
}

.contact-card__icon svg{
  width:32px;
  height:32px;
  stroke:var(--brand-green, #158745);
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.contact-card__label{
  position:relative;
  z-index:1;
  margin:0 0 .5rem;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

.contact-card__value{
  position:relative;
  z-index:1;
  margin:0 0 1rem;
  font-size:clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight:700;
  color:#fff;
  line-height:1.3;
  word-break:break-word;
}

.contact-card__text{
  position:relative;
  z-index:1;
  margin:0 0 1.5rem;
  font-size:.9rem;
  line-height:1.55;
  color:rgba(255,255,255,.65);
  flex-grow:1;
}

.contact-card__arrow{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.88rem;
  font-weight:600;
  color:var(--brand-gold, #f4ce35);
  transition:gap .3s ease;
}

.contact-card:hover .contact-card__arrow{
  gap:.8rem;
}

.contact-card__arrow svg{
  width:14px;
  height:14px;
  stroke:currentColor;
  fill:none;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .3s ease;
}

.contact-card:hover .contact-card__arrow svg{
  transform:translateX(2px);
}

/* Variante "non cliquable" pour la carte zone (juste informative) */
.contact-card--info{
  cursor:default;
}

.contact-card--info:hover{
  transform:none;
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  box-shadow:none;
}

.contact-card--info:hover::before{
  opacity:0;
}

.contact-card--info:hover .contact-card__icon{
  transform:none;
}

/* -- Mention RGPD-friendly en bas -- */

.home-contact__note{
  margin:3rem auto 0;
  max-width:600px;
  text-align:center;
  font-size:.88rem;
  line-height:1.6;
  color:rgba(255,255,255,.5);
  font-style:italic;
}

.home-contact__note strong{
  color:rgba(255,255,255,.75);
  font-style:normal;
  font-weight:600;
}

/* --===== 7.11 Systeme scroll moderne (parallax + scrub natif) =====-- */

/* Ce systeme etend le .reveal existant avec des effets "premium" :
   - scroll-driven animations natives (Chrome/Edge/Firefox 2024+)
   - fallback IntersectionObserver pour Safari < 26
   - parallax leger sur images (rAF, deja gere en JS)
   - respect du prefers-reduced-motion */

/* -- Reveal sequence avec delais en cascade -- */

.reveal-stagger > .reveal{
  transition-delay:0s;
}

.reveal-stagger > .reveal:nth-child(1){ transition-delay:.0s; }
.reveal-stagger > .reveal:nth-child(2){ transition-delay:.12s; }
.reveal-stagger > .reveal:nth-child(3){ transition-delay:.24s; }
.reveal-stagger > .reveal:nth-child(4){ transition-delay:.36s; }
.reveal-stagger > .reveal:nth-child(5){ transition-delay:.48s; }

/* -- Variantes de reveal pour casser la monotonie -- */

.reveal--from-left{
  transform:translateX(-40px);
}
.reveal--from-left.is-visible{
  transform:translateX(0);
}

.reveal--from-right{
  transform:translateX(40px);
}
.reveal--from-right.is-visible{
  transform:translateX(0);
}

.reveal--scale{
  transform:scale(.92);
}
.reveal--scale.is-visible{
  transform:scale(1);
}

/* -- Parallax leger sur images (active par data-parallax en JS) -- */

[data-parallax]{
  will-change:transform; /* indique au navigateur d'optimiser */
}

/* -- Scroll-driven animations natives (progressive enhancement) -- */

@supports (animation-timeline: view()){
  /* Fade-in moderne sur les sections "act" du storytelling */
  .about-act{
    opacity:0;
    transform:translateY(30px);
    animation:about-act-in linear forwards;
    animation-timeline:view();
    animation-range:entry 10% cover 30%;
  }

  @keyframes about-act-in{
    to{
      opacity:1;
      transform:translateY(0);
    }
  }

  /* Animation du point ::before active par scroll au lieu d'IntersectionObserver */
  .about-act::before{
    animation:about-act-dot linear forwards;
    animation-timeline:view();
    animation-range:entry 30% cover 40%;
  }

  @keyframes about-act-dot{
    to{
      background:var(--brand-green, #158745);
      transform:translateX(-50%) scale(1.2);  /* Preserve le centrage sur le trait */
    }
  }
}

/* -- Respect de l'accessibilite : reduced motion -- */

@media (prefers-reduced-motion:reduce){
  /* On desactive TOUS les effets de scroll modernes */
  .reveal,
  .reveal--from-left,
  .reveal--from-right,
  .reveal--scale,
  [data-parallax],
  .about-act,
  .home-about__photo img{
    animation:none !important;
    transition:opacity .3s ease !important;
    transform:none !important;
  }

  /* La pastille de la frise garde son centrage meme en reduced-motion */
  .about-act::before{
    animation:none !important;
    transition:opacity .3s ease !important;
    transform:translateX(-50%) !important;
  }

  .reveal{
    opacity:1;
  }

  .home-about__visual{
    position:static !important; /* desactive le sticky */
  }
}

/* --===== 7.12 Accueil responsive =====-- */

@media (max-width:1024px){
  /* Section Contact : 3 cartes deviennent 2 + 1 */
  .home-contact__grid{
    grid-template-columns:repeat(2, 1fr);
  }

  .home-contact__grid > .contact-card:last-child{
    grid-column:1 / -1;
    max-width:500px;
    margin:0 auto;
  }
}

@media (max-width:840px){
  .home-hero__inner{
    grid-template-columns:1fr;
    min-height:auto;
  }

  .home-hero__visual{
    order:-1;
  }

  .home-hero__visual img{
    height:60vh;
    object-fit:cover;
    object-position:center;
  }

  .home-stats__grid{
    grid-template-columns:repeat(2, 1fr);
  }

  .home-services__grid{
    grid-template-columns:1fr;
  }

  .home-engagements__layout{
    grid-template-columns:1fr;
  }

  .home-reconditioned__layout{
    grid-template-columns:1fr;
  }

  .home-reconditioned__visual{
    order:-1;
  }

  /* -- Section A propos : passage en colonne, sticky desactive -- */
  .home-about__layout{
    grid-template-columns:1fr;
    gap:2.5rem;
  }

  .home-about__visual{
    position:relative; /* desactive le sticky en mobile */
    top:auto;
  }

  .home-about__photo{
    aspect-ratio:4/3; /* plus carrée en mobile, comme les prestations */
    max-height:400px;
  }

  /* -- Section Contact : 1 colonne en mobile -- */
  .home-contact__grid{
    grid-template-columns:1fr;
    gap:1rem;
  }

  .home-contact__grid > .contact-card:last-child{
    grid-column:auto;
    max-width:none;
    margin:0;
  }

  .contact-card{
    padding:2rem 1.5rem;
  }
}

@media (max-width:480px){
  .home-stats__grid{
    grid-template-columns:1fr 1fr;
    gap:1.5rem;
  }

  .home-hero__trust{
    flex-direction:column;
    gap:.6rem;
  }

  /* -- A propos en mobile : actes plus compacts -- */
  .about-act{
    padding-left:1.5rem;
  }

  .about-act__title{
    font-size:1.2rem;
  }

  /* -- Contact en mobile : icone plus petite -- */
  .contact-card__icon{
    width:52px;
    height:52px;
  }

  .contact-card__icon svg{
    width:26px;
    height:26px;
  }
}


/* ============================================================
=  REFONTE HOME 2026 v3 — Schema des fonds final
=  Couleur officielle vert clair : #ECF6F0
=  Pattern : alternance vert clair / blanc (defini par Romain)
============================================================ */

/* --===== VARIABLE OFFICIELLE pour le vert clair Gam'NT =====-- */
/* Idealement on l'ajoute dans main.css en variable globale, mais ici en local pour cette refonte */

/* ==============================================
=  PATTERN DES FONDS (selon schema Romain)
=  Hero          ECF6F0 (deja OK, on touche pas)
=  Avis          BLANC
=  Prestations   ECF6F0
=  Mini-CTA      BLANC (banniere ECF6F0 a l'interieur)
=  Passion       ECF6F0 (deja OK)
=  Stats         BLANC (avec gradient subtil)
=  Engagements   ECF6F0 (deja OK)
=  Recond        BLANC
=  Mini-CTA      BLANC (banniere ECF6F0 a l'interieur)
=  Footer        NOIR (deja OK)
============================================== */

/* --===== AVIS (passe en BLANC) =====-- */
.home-reviews{
  background:#fff !important;
}
.home-reviews .section-title,
.home-reviews .section-intro,
.home-reviews .reviews-note{
  color:#1a1a1a !important;
}
.home-reviews .reviews-note{
  color:#555 !important;
}

/* --===== PRESTATIONS (passe en VERT CLAIR ECF6F0) =====-- */
.home-services{
  background:#ECF6F0 !important;
}

/* Halo decoratif tres subtil */
.home-services::before{
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(21,135,69,.06) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 100%, rgba(244,206,53,.04) 0%, transparent 70%) !important;
}

.home-services .section-title{
  color:#1a1a1a !important;
}
.home-services .section-intro{
  color:#555 !important;
}

/* --===== Cards Prestations (vraies classes : .service-card) =====-- */
.service-card{
  background:#fff !important;
  border:1.5px solid rgba(21,135,69,.18) !important;
  box-shadow:0 6px 22px rgba(21,135,69,.08) !important;
}
.service-card:hover{
  border-color:rgba(21,135,69,.35) !important;
  background:#fff !important;
  box-shadow:0 10px 32px rgba(21,135,69,.14) !important;
  transform:translateY(-3px);
}
.service-card__title{
  color:#1a1a1a !important;
}
.service-card__text{
  color:#555 !important;
}
.service-card__tag{
  background:rgba(21,135,69,.10) !important;
  color:#0f6233 !important;
  border:1px solid rgba(21,135,69,.22) !important;
}

/* --===== STATS (passe en BLANC + gradient subtil) =====-- */
.home-stats{
  background:linear-gradient(135deg, #fff 0%, #ECF6F0 100%) !important;
  border-top:1px solid rgba(21,135,69,.10) !important;
  border-bottom:1px solid rgba(21,135,69,.10) !important;
}

/* Chiffres : gradient INVERSE (dore -> vert) */
.home-stats__number{
  background:linear-gradient(135deg,#f4ce35 0%,#158745 100%) !important;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
}

.home-stats__suffix{
  color:#f4ce35 !important;
}

.home-stats__label{
  color:#555 !important;
}

/* --===== RECONDITIONNES (passe en BLANC) =====-- */
.home-reconditioned{
  background:#fff !important;
}

.home-reconditioned::before{
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(21,135,69,.05) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 100%, rgba(244,206,53,.04) 0%, transparent 70%) !important;
}

.home-reconditioned .section-title{
  color:#1a1a1a !important;
}
.home-reconditioned .section-intro{
  color:#555 !important;
}

/* Badges Recond (vraies classes : .reconditioned-badge) */
.reconditioned-badge{
  background:rgba(21,135,69,.10) !important;
  color:#0f6233 !important;
  border:1px solid rgba(21,135,69,.22) !important;
}

.home-reconditioned__text{
  color:#555 !important;
}

/* --===== Suppression home-contact (remplacee par mini-CTA) =====-- */
.home-contact{
  background:#fff !important;
  color:#1a1a1a !important;
}

/* ============================================================
=  GRADIENT DES TITRES — Sens INVERSE (dore -> vert)
=  Avant : 135deg, #158745 (vert top-left) -> #f4ce35 (dore bottom-right)
=  Apres : 135deg, #f4ce35 (dore top-left) -> #158745 (vert bottom-right)
=  Le dore commence (chaleureux), le vert finit (marque)
============================================================ */

.gradient-text,
.home-hero__title .gradient-text,
.section-title .gradient-text,
.cta-final-banner__title .gradient-text{
  background:linear-gradient(135deg, #f4ce35 0%, #158745 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}

/* ============================================================
=  FIX image "Passion devenue metier" qui bouge au scroll
=  On annule tout effet parallax / fixed background / translate
============================================================ */

.home-about__visual,
.home-about__image,
.home-about__visual img{
  background-attachment:scroll !important;
  transform:none !important;
  will-change:auto !important;
  position:relative !important;
}

/* Si l'image a un wrapper avec un effet de translation au scroll, on l'annule */
.home-about[data-parallax],
.home-about__visual[data-parallax]{
  transform:none !important;
}

/* ============================================================
=  MINI-CTA Contact (style Prestations re-utilise)
=  Banniere ECF6F0 a l'interieur, fond blanc autour
============================================================ */

.prestations-cta-final{
  padding:clamp(3rem, 6vw, 5rem) 0 !important;
  background:#fff !important;
}

.cta-final-banner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  padding:clamp(2rem, 4vw, 3rem);
  border-radius:24px;
  background:#ECF6F0;
  border:1.5px solid rgba(21,135,69,.18);
  box-shadow:0 10px 40px rgba(21,135,69,.10);
  overflow:hidden;
}

/* Liseret gradient haut (dore -> vert dans le nouveau sens) */
.cta-final-banner::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, #f4ce35 0%, #158745 100%);
}

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

.cta-final-banner__title{
  margin:0 0 .6rem;
  font-size:clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight:700;
  color:#1a1a1a;
  line-height:1.25;
}

.cta-final-banner__text{
  margin:0;
  font-size:1rem;
  line-height:1.55;
  color:#555;
  max-width:600px;
}

/* Bouton CTA avec icone */
.disabled-old-cta-banner-btn{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.85rem 1.8rem;
  border-radius:10px;
  background:#158745;
  color:#fff;
  font-weight:600;
  font-size:1rem;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:background var(--ease-nucleus), transform var(--ease-nucleus), box-shadow var(--ease-nucleus);
}

.disabled-old-cta-banner-btn-hover{
  background:linear-gradient(135deg, #f4ce35 0%, #158745 100%);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(21,135,69,.30);
}

.btn-with-icon .btn-icon{
  display:inline-flex;
  align-items:center;
}

.btn-with-icon .btn-icon svg{
  display:block;
}

@media (max-width: 768px){
  .cta-final-banner{
    flex-direction:column;
    text-align:center;
  }
  .cta-final-banner__text{
    max-width:none;
  }
}



/* ============================================================
=  VAGUE 1.5 — FIX position photo Passion
=  La photo bouge/tombe au scroll a cause du position:sticky
=  Solution : on simplifie et on force le positionnement haut
============================================================ */

.home-about__layout{
  align-items:start !important;
}

.home-about__visual{
  position:relative !important; /* Annule le sticky qui causait le decalage */
  top:auto !important;
  align-self:start !important;
  height:auto !important;
}

/* On garde le top:1rem pour un leger decalage visuel intentionnel sur desktop */
@media (min-width: 992px){
  .home-about__visual{
    margin-top:0.5rem;
  }
}



/* ============================================================
=  VAGUE 2 — Migration totale vers ic\u00f4nes Lucide
=  Adaptation du CSS pour bien styler les nouvelles ic\u00f4nes
============================================================ */

/* --===== Cards Prestations : icones Lucide en style phare =====-- */
/* Le wrapper .service-card__icon est de 56px, on s'assure que l'icone Lucide est bien centree */

.disabled-old-service-card-icon-340{
  width:56px;
  height:56px;
  margin-bottom:1.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
}

.disabled-old-service-card-icon-svg-1572{
  width:100%;
  height:100%;
  display:block;
}

/* Animation legere au hover sur la card (rebond doux de l'icone) */
.disabled-old-service-card-hover-icon-svg-1579{
  transform:scale(1.08);
  transition:transform var(--ease-nucleus);
}

/* --===== Highlight box Engagements : icone recycle gradient =====-- */
/* L'ancien .highlight-box__icon etait fait pour un emoji (taille texte) */
/* On l'adapte pour accueillir un SVG */

.highlight-box__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  margin-bottom:1rem;
  font-size:inherit; /* annule le sizing d'emoji */
}

.highlight-box__icon svg{
  display:block;
  width:100%;
  height:100%;
}

/* Petite rotation continue subtile sur l'icone recycle (clin d'oeil eco) */
.home-engagements__highlight:hover .highlight-box__icon svg{
  animation:nucleus-recycle-spin 1.2s ease-out 1;
}

@keyframes nucleus-recycle-spin{
  0%{ transform:rotate(0deg); }
  100%{ transform:rotate(360deg); }
}

/* --===== Badges Recond : icone check-circle alignee =====-- */
/* Les badges sont des pilules : icone a gauche + texte a droite */

.reconditioned-badge{
  display:inline-flex !important;
  align-items:center !important;
  gap:.4rem !important;
}

.reconditioned-badge svg{
  display:block;
  flex:0 0 auto;
}

/* --===== Mini-CTA bouton phone (deja blanc, juste ajustements) =====-- */

.cta-final-banner .btn-with-icon .btn-icon svg{
  display:block;
}





/* ============================================================
=  VAGUE 3.6 — Refonte CSS finale Home
=  - Fix bug Stats (chiffres caches par bg gradient)
=  - Inversion gradient (vert -> dore)
=  - Nouveau pattern de fonds
=  - Reduction des espaces inter-sections
=  - Box TL;DR pour Prestations
============================================================ */

/* ============================================================
=  GRADIENTS GLOBAUX : Sens VERT -> DORE
=  Le vert commence en haut-gauche, le dore finit en bas-droite
============================================================ */

.gradient-text,
.home-hero__title .gradient-text,
.section-title .gradient-text,
.cta-final-banner__title .gradient-text{
  background:linear-gradient(135deg, #158745 0%, #f4ce35 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}

/* ============================================================
=  NOUVEAU PATTERN DES FONDS (selon schema Romain)
=  Hero         ECF6F0 (deja OK)
=  Avis         BLANC
=  Prestations  ECF6F0
=  Passion+Stats ECF6F0
=  Engagements  BLANC                  <-- CHANGE (etait ECF6F0)
=  Recond       ECF6F0                 <-- CHANGE (etait blanc)
=  Mini-CTA     fond BLANC + interieur ECF6F0
=  Footer       NOIR
============================================================ */

/* --- AVIS : BLANC --- */
.home-reviews{
  background:#fff !important;
}
.home-reviews .section-title{ color:#1a1a1a !important; }
.home-reviews .section-intro{ color:#555 !important; }

/* --- PRESTATIONS : ECF6F0 --- */
.home-services{
  background:#ECF6F0 !important;
}
.home-services::before{
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(21,135,69,.06) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 100%, rgba(244,206,53,.04) 0%, transparent 70%) !important;
}
.home-services .section-title{ color:#1a1a1a !important; }
.home-services .section-intro{ color:#555 !important; }

/* --- ENGAGEMENTS : BLANC --- */
.home-engagements{
  background:#fff !important;
}
.home-engagements .section-title{ color:#1a1a1a !important; }
.home-engagements .section-intro{ color:#555 !important; }

/* --- RECONDITIONNES : ECF6F0 (au lieu de blanc) --- */
.home-reconditioned{
  background:#ECF6F0 !important;
}
.home-reconditioned::before{
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(21,135,69,.05) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 100%, rgba(244,206,53,.04) 0%, transparent 70%) !important;
}
.home-reconditioned .section-title{ color:#1a1a1a !important; }
.home-reconditioned .section-intro{ color:#555 !important; }

/* ============================================================
=  REDUCTION DES ESPACES INTER-SECTIONS
=  Avant : padding clamp(4rem, 8vw, 7rem) -> tres aere
=  Apres : padding clamp(2.5rem, 5vw, 4rem) -> plus dense, plus moderne
============================================================ */

.home-hero{
  padding-top:clamp(0rem, 0vw, 0rem) !important;
  padding-bottom:clamp(0rem, 0vw, 0rem) !important;
}

.home-reviews{
  padding:clamp(2.5rem, 5vw, 4rem) 0 !important;
}

.home-services{
  padding:clamp(2.5rem, 5vw, 4rem) 0 !important;
}

.home-about{
  padding:clamp(3rem, 5vw, 4.5rem) 0 !important;
}

.home-engagements{
  padding:clamp(2.5rem, 5vw, 4rem) 0 !important;
}

.home-reconditioned{
  padding:clamp(2.5rem, 5vw, 4rem) 0 !important;
}

.prestations-cta-final{
  padding:clamp(2.5rem, 5vw, 4rem) 0 !important;
}

/* ============================================================
=  CARDS PRESTATIONS : styles coherents (deja OK)
============================================================ */

.service-card{
  background:#fff !important;
  border:1.5px solid rgba(21,135,69,.18) !important;
  box-shadow:0 6px 22px rgba(21,135,69,.08) !important;
}
.service-card:hover{
  border-color:rgba(21,135,69,.35) !important;
  background:#fff !important;
  box-shadow:0 10px 32px rgba(21,135,69,.14) !important;
  transform:translateY(-3px);
}
.service-card__title{ color:#1a1a1a !important; }
.service-card__text{ color:#555 !important; }
.service-card__tag{
  background:rgba(21,135,69,.10) !important;
  color:#0f6233 !important;
  border:1px solid rgba(21,135,69,.22) !important;
}

.disabled-old-service-card-icon-340{
  width:56px;
  height:56px;
  margin-bottom:1.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
.disabled-old-service-card-icon-svg-1778{
  width:100%;
  height:100%;
  display:block;
}
.disabled-old-service-card-hover-icon-svg-1783{
  transform:scale(1.08);
  transition:transform var(--ease-nucleus);
}

/* ============================================================
=  BOX TL;DR Prestations (au lieu du simple bouton "Voir nos prestations")
=  Style identique au TL;DR de la page Prestations pour coherence
============================================================ */

/* On masque le bouton standalone "Voir nos prestations" qui est moche */
/* La nouvelle box est genere ci-dessous via la modif index.php */

.home-services-tldr{
  margin-top:2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:1.5rem clamp(1.5rem, 3vw, 2rem);
  background:#fff;
  border:1.5px solid rgba(21,135,69,.18);
  border-radius:16px;
  box-shadow:0 6px 22px rgba(21,135,69,.08);
  position:relative;
  overflow:hidden;
}

/* Liseret gradient haut au hover */
.home-services-tldr::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:left center;
  transition:transform 600ms ease;
}

.home-services-tldr:hover::before{
  transform:scaleX(1);
}

.home-services-tldr__content{
  flex:1;
  display:flex;
  align-items:center;
  gap:1rem;
}

.home-services-tldr__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  flex:0 0 48px;
}

.home-services-tldr__icon svg{
  width:100%;
  height:100%;
  display:block;
}

.home-services-tldr__text{
  flex:1;
  margin:0;
  font-size:1rem;
  line-height:1.5;
  color:#1a1a1a;
}

.home-services-tldr__text strong{
  color:#158745;
  font-weight:700;
}

.disabled-old-tldr-btn{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.75rem 1.5rem;
  border-radius:10px;
  background:#158745;
  color:#fff !important;
  font-weight:600;
  font-size:.95rem;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:background var(--ease-nucleus), transform var(--ease-nucleus), box-shadow var(--ease-nucleus);
  white-space:nowrap;
}

.disabled-old-tldr-btn-hover{
  background:linear-gradient(135deg, #158745 0%, #f4ce35 100%);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(21,135,69,.30);
}

/* Responsive box TL;DR */
@media (max-width: 768px){
  .home-services-tldr{
    flex-direction:column;
    align-items:stretch;
    text-align:center;
  }
  .home-services-tldr__content{
    flex-direction:column;
    text-align:center;
  }
  .disabled-old-tldr-btn{
    align-self:center;
  }
}

/* ============================================================
=  STATS FUSIONNEES dans 'Une passion devenue metier'
=  Fix bug : chiffres en gradient texte correct
============================================================ */

/* Separateur visuel 'En chiffres' */
.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;
  }
}

/* ============================================================
=  BADGES Reconditionnes : styling coherent
============================================================ */

.reconditioned-badge{
  display:inline-flex !important;
  align-items:center !important;
  gap:.4rem !important;
  background:rgba(21,135,69,.10) !important;
  color:#0f6233 !important;
  border:1px solid rgba(21,135,69,.22) !important;
}
.reconditioned-badge svg{
  display:block;
  flex:0 0 auto;
}
.home-reconditioned__text{ color:#555 !important; }

/* ============================================================
=  Highlight box Engagements : icone recycle
============================================================ */

.highlight-box__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  margin-bottom:1rem;
  font-size:inherit;
}
.highlight-box__icon svg{
  display:block;
  width:100%;
  height:100%;
}
.home-engagements__highlight:hover .highlight-box__icon svg{
  animation:nucleus-recycle-spin 1.2s ease-out 1;
}
@keyframes nucleus-recycle-spin{
  0%{ transform:rotate(0deg); }
  100%{ transform:rotate(360deg); }
}

/* ============================================================
=  MINI-CTA Contact (banniere ECF6F0 sur fond blanc)
============================================================ */

.prestations-cta-final{
  background:#fff !important;
}

.cta-final-banner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  padding:clamp(2rem, 4vw, 3rem);
  border-radius:24px;
  background:#ECF6F0;
  border:1.5px solid rgba(21,135,69,.18);
  box-shadow:0 10px 40px rgba(21,135,69,.10);
  overflow:hidden;
}

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

.cta-final-banner__content{ flex:1; }
.cta-final-banner__title{
  margin:0 0 .6rem;
  font-size:clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight:700;
  color:#1a1a1a;
  line-height:1.25;
}
.cta-final-banner__text{
  margin:0;
  font-size:1rem;
  line-height:1.55;
  color:#555;
  max-width:600px;
}

.disabled-old-cta-banner-btn{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.85rem 1.8rem;
  border-radius:10px;
  background:#158745;
  color:#fff;
  font-weight:600;
  font-size:1rem;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:background var(--ease-nucleus), transform var(--ease-nucleus), box-shadow var(--ease-nucleus);
}

.disabled-old-cta-banner-btn-hover{
  background:linear-gradient(135deg, #158745 0%, #f4ce35 100%);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(21,135,69,.30);
}

.btn-with-icon .btn-icon{
  display:inline-flex;
  align-items:center;
}
.btn-with-icon .btn-icon svg{ display:block; }

@media (max-width: 768px){
  .cta-final-banner{
    flex-direction:column;
    text-align:center;
  }
  .cta-final-banner__text{ max-width:none; }
}

/* ============================================================
=  FIX position photo Passion (annule sticky qui bugue)
============================================================ */

.home-about__layout{
  align-items:start !important;
}

.home-about__visual{
  position:relative !important;
  top:auto !important;
  align-self:start !important;
  height:auto !important;
}

/* ============================================================
=  Section home-contact obsolete (remplacee par mini-CTA)
============================================================ */

.home-contact{
  background:#fff !important;
  color:#1a1a1a !important;
}



/* ============================================================
=  Classe .gold-text : texte en dore plein (alternative au gradient)
=  Utilisee pour les titres moins prioritaires (clients, prestations, engagements)
=  Reserve le gradient aux 3 mots-cles strategiques (passion, recondsionnes, Discutons-en)
============================================================ */

.gold-text{
  color:#f4ce35 !important;
  background:none !important;
  -webkit-text-fill-color:#f4ce35 !important;
}

/* Le soulignement underline-scroll garde sa couleur dore aussi */
.gold-text.underline-scroll::after{
  background:#f4ce35 !important;
}



/* ============================================================
=  VAGUE 3.6 fin — Ajouts finaux
=  - Classe .green-text (vert plein pour titres)
=  - Inversion Mini-CTA : fond ECF6F0 + banniere blanche
============================================================ */

/* --===== Classe .green-text : vert plein pour mots non-gradients =====-- */

.green-text{
  color:#158745 !important;
  background:none !important;
  -webkit-text-fill-color:#158745 !important;
}

/* Soulignement vert sous les mots verts */
.green-text.underline-scroll::after{
  background:#158745 !important;
}

/* --===== Mini-CTA Contact : INVERSION (fond vert clair + banniere blanche) =====-- */

/* La section a un fond ECF6F0 (vert clair) */
.prestations-cta-final{
  background:#ECF6F0 !important;
  padding:clamp(2.5rem, 5vw, 4rem) 0 !important;
}

/* La banniere a un fond BLANC (au lieu de ECF6F0) */
.cta-final-banner{
  background:#fff !important;
  border:1.5px solid rgba(21,135,69,.18) !important;
  box-shadow:0 10px 40px rgba(21,135,69,.10) !important;
}

/* Le liseret gradient reste en haut de la banniere blanche */
.cta-final-banner::before{
  background:linear-gradient(90deg, #158745 0%, #f4ce35 100%) !important;
}



/* ============================================================
=  RESET des styles bouton home.css obsoletes
=  Les boutons sont maintenant geres par main.css (design system)
=  On reinitialise ici pour eviter les conflits
============================================================ */

/* Les .btn-primary dans .cta-final-banner et .home-services-tldr utilisaient
   des styles personnalises qui conflictaient avec le nouveau design system.
   On les laisse heriter du systeme global de main.css. */

/* Annule les overrides custom du mini-CTA */
.disabled-old-cta-banner-btn{
  /* On laisse main.css gerer */
  background:unset;
  color:unset;
  border:unset;
}

/* Annule les overrides custom de la box TL;DR */
.disabled-old-tldr-btn{
  background:unset;
  color:unset;
  border:unset;
}



/* ============================================================
=  VAGUE 4 — Cards Prestations Home avec PHOTOS
=  Style "medaillon" : icone qui deborde au-dessus de la card
=  (style identique aux cards Reconditionnees)
============================================================ */

/* La card : le badge sera dans le flow (chevauche la photo en bas) */
.service-card{
  position:relative;
  overflow:visible !important;
  padding:0 !important;
  margin-top:0;
}

/* Photo en haut de la card */
.service-card__photo{
  position:relative;
  width:100%;
  aspect-ratio:4/3;                  /* Ratio natif smartphone */
  overflow:hidden;                   /* La photo elle-meme respecte le border-radius */
  background:#ECF6F0;
  /* Border-radius en haut pour s'aligner avec la card */
  border-radius:16px 16px 0 0;
}

.service-card__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}

/* Zoom doux au hover */
.service-card:hover .service-card__photo img{
  transform:scale(1.05);
}

/* ===== LE BADGE : icone qui chevauche le bas de la photo ===== */
/* Style initial qui plait a Romain : pas absolute, mais margin negatif */
.service-card__photo + .service-card__icon{
  position:relative;
  z-index:5;
  margin:-36px auto 0 !important;     /* Chevauche le bas de la photo de 36px */

  /* CERCLE PARFAIT GARANTI */
  box-sizing:border-box !important;
  width:72px !important;
  height:72px !important;
  aspect-ratio:1 / 1 !important;
  flex-shrink:0;
  padding:0 !important;

  /* Le badge : cercle blanc avec halo et ombre */
  background:#fff;
  border-radius:50% !important;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:
    0 8px 24px rgba(21,135,69,.20),
    0 2px 8px rgba(21,135,69,.12),
    0 0 0 5px #fff;                  /* Halo blanc 5px (effet detache) */

  transition:box-shadow .35s ease;
}

/* Icone SVG dans le badge */
.service-card__photo + .service-card__icon svg{
  width:36px;
  height:36px;
  flex-shrink:0;
  transform-origin:center center;
}

/* Au hover : juste un petit glow dore (pas de scale pour eviter conflit anim) */
.service-card:hover .service-card__icon{
  box-shadow:
    0 12px 32px rgba(21,135,69,.28),
    0 4px 12px rgba(21,135,69,.18),
    0 0 0 5px #fff,
    0 0 24px rgba(244,206,53,.20);
}

/* Icone SVG dans le medaillon */
.service-card__photo + .service-card__icon svg{
  width:36px;
  height:36px;
  flex-shrink:0;
  /* Origin pour les animations centrees */
  transform-origin:center center;
}

/* ===== ANIMATIONS DIFFERENTES PAR ICONE ===== */
/* Selecteur :nth-child(n) pour cibler chaque card sans modifier le HTML */

/* CARD 1 : Cle qui visse (aller-retour de rotation) */
.service-card:nth-child(1):hover .service-card__icon svg{
  animation:nucleus-wrench-screw .9s ease-in-out 1;
}

@keyframes nucleus-wrench-screw{
  0%   { transform:rotate(0deg); }
  20%  { transform:rotate(-25deg); }   /* Devisser */
  40%  { transform:rotate(35deg); }    /* Visser fort */
  60%  { transform:rotate(-20deg); }   /* Devisser */
  80%  { transform:rotate(15deg); }    /* Visser */
  100% { transform:rotate(0deg); }     /* Retour */
}

/* CARD 2 : Oeil qui cligne (scaleY -> 0.05 simule la paupiere) */
.service-card:nth-child(2):hover .service-card__icon svg{
  animation:nucleus-eye-blink 1s ease-in-out 1;
}

@keyframes nucleus-eye-blink{
  0%   { transform:scaleY(1); }
  20%  { transform:scaleY(1); }
  25%  { transform:scaleY(0.05); }     /* Premier clin */
  30%  { transform:scaleY(1); }
  55%  { transform:scaleY(1); }
  60%  { transform:scaleY(0.05); }     /* Deuxieme clin */
  65%  { transform:scaleY(1); }
  100% { transform:scaleY(1); }
}

/* CARD 3 : Etoiles qui scintillent (scale + opacity pulsations) */
.service-card:nth-child(3):hover .service-card__icon svg{
  animation:nucleus-sparkles-twinkle 1.2s ease-in-out 1;
}

@keyframes nucleus-sparkles-twinkle{
  0%   { transform:scale(1) rotate(0deg);    opacity:1; }
  20%  { transform:scale(1.25) rotate(15deg); opacity:.7; }   /* Scintille 1 */
  40%  { transform:scale(0.9) rotate(-10deg); opacity:1; }
  60%  { transform:scale(1.2) rotate(20deg);  opacity:.8; }   /* Scintille 2 */
  80%  { transform:scale(0.95) rotate(-5deg); opacity:1; }
  100% { transform:scale(1) rotate(0deg);     opacity:1; }
}

/* ===== CONTENU TEXTUEL ===== */

/* Tous les enfants sauf la photo ont du padding lateral */
.service-card > *:not(.service-card__photo){
  position:relative;
  padding-left:clamp(1.25rem, 2.5vw, 1.75rem);
  padding-right:clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Titre : petit espace apres le badge */
.service-card__photo ~ .service-card__title{
  margin-top:1rem !important;
  margin-bottom:.5rem !important;
  text-align:center;
}

.service-card__photo ~ .service-card__text{
  margin-bottom:clamp(1.25rem, 2.5vw, 1.75rem);
  text-align:center;
}

/* ===== TAG : MASQUE (inutile selon Romain) ===== */
.service-card__photo ~ .service-card__tag{
  display:none !important;
}

/* Cas fallback : si pas de photo, retour comportement standard */
.service-card:not(:has(.service-card__photo)){
  padding:clamp(1.5rem, 3vw, 2rem) !important;
  margin-top:0;
}

/* Bordure de la card avec border-radius cohérent */
.service-card{
  border-radius:16px;
}

/* Padding-bottom sur la card pour respirer apres le texte */
.service-card > .service-card__text:last-of-type{
  padding-bottom:clamp(1.5rem, 3vw, 2rem);
}

/* Effet hover global de la card */
.service-card:hover{
  transform:translateY(-4px);
}

/* Liseret gradient en bas de la photo au hover */
.service-card__photo::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:3px;
  z-index:3;
  background:linear-gradient(90deg, #158745 0%, #f4ce35 100%);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}

.service-card:hover .service-card__photo::after{
  transform:scaleX(1);
}

/* ===== RESPONSIVE : medaillon plus petit sur mobile ===== */
@media (max-width: 600px){
  .service-card__photo + .service-card__icon{
    width:60px !important;
    height:60px !important;
    margin-top:-30px !important;     /* Chevauche aussi le bas de la photo en mobile */
  }

  .service-card__photo + .service-card__icon svg{
    width:30px;
    height:30px;
  }
}



/* ============================================================
=  VAGUE 5 — Refonte HIGHLIGHT-BOX Engagements
=  Photo en haut + texte pedagogique 30-120kg + stat + CTA
============================================================ */

/* Box conteneur : reset des anciens styles + nouvelle structure */
.highlight-box{
  position:sticky !important;
  top:calc(var(--header-total-height, 80px) + 2rem) !important;
  padding:0 !important;             /* La photo n'a pas de padding */
  border-radius:20px !important;
  background:linear-gradient(160deg, rgba(21,135,69,.08) 0%, rgba(244,206,53,.06) 100%) !important;
  border:1.5px solid rgba(21,135,69,.18) !important;
  box-shadow:0 8px 24px rgba(21,135,69,.10) !important;
  overflow:hidden !important;        /* La photo respecte le border-radius */
  text-align:left !important;
  transition:transform .35s ease, box-shadow .35s ease;
}

.highlight-box:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(21,135,69,.15);
}

/* Photo en haut de la box (si presente) */
.highlight-box__photo{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#ECF6F0;
}

.highlight-box__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}

.highlight-box:hover .highlight-box__photo img{
  transform:scale(1.05);
}

/* Fallback : si pas de photo, on affiche une grosse icone recycle centree */
.highlight-box__photo--fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(21,135,69,.10) 0%, rgba(244,206,53,.10) 100%);
}

.highlight-box__photo--fallback svg{
  width:96px;
  height:96px;
}

/* Contenu textuel sous la photo */
.highlight-box__content{
  padding:1.75rem clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Intro pedagogique */
.highlight-box__intro{
  margin:0 0 1.5rem;
  font-size:.95rem;
  line-height:1.55;
  color:#1a1a1a;
}

.highlight-box__intro strong{
  color:#158745;
  font-weight:700;
}

/* Wrapper du stat (icone + chiffre) */
.highlight-box__stat-wrap{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1rem;
  margin-bottom:1.5rem;
  background:#fff;
  border-radius:12px;
  border:1px solid rgba(21,135,69,.15);
}

.highlight-box__stat-wrap > .highlight-box__icon{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
}

.highlight-box__stat-wrap > .highlight-box__icon svg{
  width:100%;
  height:100%;
  display:block;
}

/* Chiffre en gradient */
.highlight-box__stat-wrap .highlight-box__stat{
  margin:0;
  font-size:1.5rem;
  font-weight:800;
  line-height:1;
  background:linear-gradient(135deg, #158745 0%, #f4ce35 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

.highlight-box__stat-wrap .highlight-box__label{
  margin:.2rem 0 0;
  font-size:.78rem;
  line-height:1.4;
  color:#555;
}

/* CTA bouton secondary */
.highlight-box__cta{
  width:100%;
  justify-content:center;
}

/* Responsive : adapter sur mobile */
@media (max-width: 768px){
  .highlight-box{
    position:relative !important;
    top:auto !important;
  }
}



/* ============================================================
=  VAGUE 5.5 — Section ENGAGEMENTS refondue en MANIFESTE
=  Layout 2 colonnes : texte impactant a gauche + photo a droite
============================================================ */

/* Le conteneur global du manifeste : grid 2 colonnes equilibrees */
.engagements-manifest{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:center;
  max-width:1200px;
  margin:clamp(2rem, 4vw, 3rem) auto 0;
}

/* ===== COLONNE GAUCHE : contenu textuel ===== */

.engagements-manifest__content{
  display:flex;
  flex-direction:column;
  gap:1.75rem;
}

/* Phrase d'accroche impactante */
.engagements-manifest__lead{
  margin:0;
  font-size:clamp(1.15rem, 2vw, 1.35rem);
  line-height:1.55;
  color:#1a1a1a;
  font-weight:400;
}

.engagements-manifest__lead strong{
  color:#158745;
  font-weight:700;
}

/* Liste des 3 engagements */
.engagements-manifest__list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.engagements-manifest__item{
  display:flex;
  align-items:flex-start;
  gap:.85rem;
  padding:1rem 1.25rem;
  background:#fff;
  border:1.5px solid rgba(21,135,69,.15);
  border-radius:12px;
  box-shadow:0 2px 8px rgba(21,135,69,.04);
  transition:
    transform .35s cubic-bezier(.16,1,.3,1),
    border-color .35s ease,
    box-shadow .35s ease;
}

.engagements-manifest__item:hover{
  transform:translateX(4px);          /* Petit glissement a droite */
  border-color:rgba(21,135,69,.30);
  box-shadow:0 6px 16px rgba(21,135,69,.10);
}

.engagements-manifest__check{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  margin-top:.1rem;
}

.engagements-manifest__check svg{
  width:24px;
  height:24px;
  display:block;
}

.engagements-manifest__item > div{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  flex:1;
}

.engagements-manifest__item strong{
  font-size:1rem;
  font-weight:700;
  color:#1a1a1a;
  line-height:1.3;
}

.engagements-manifest__item span{
  font-size:.85rem;
  line-height:1.5;
  color:#555;
}

/* CTA bouton primary */
.engagements-manifest__cta{
  align-self:flex-start;
  margin-top:.5rem;
}

/* ===== COLONNE DROITE : photo manifeste ===== */

.engagements-manifest__visual{
  position:relative;
}

.engagements-manifest__photo{
  position:relative;
  width:100%;
  aspect-ratio:4/5;                   /* Format portrait, plus impactant */
  overflow:hidden;
  border-radius:20px;
  background:#ECF6F0;
  box-shadow:
    0 10px 40px rgba(21,135,69,.15),
    0 0 0 1px rgba(21,135,69,.10);
}

.engagements-manifest__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.2s cubic-bezier(.16,1,.3,1);
}

.engagements-manifest__photo:hover img{
  transform:scale(1.04);
}

/* Liseret gradient en bas de la photo */
.engagements-manifest__photo::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, #158745 0%, #f4ce35 100%);
  z-index:2;
}

/* Fallback : grande icone recycle si pas de photo */
.engagements-manifest__photo--fallback{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  background:linear-gradient(135deg, rgba(21,135,69,.10) 0%, rgba(244,206,53,.08) 100%);
  padding:2rem;
  aspect-ratio:4/5;
}

.engagements-manifest__photo-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  animation:engagements-recycle-rotate 8s linear infinite;
}

.engagements-manifest__photo-icon svg{
  width:140px;
  height:140px;
}

.engagements-manifest__photo-text{
  margin:0;
  font-size:1.15rem;
  font-weight:600;
  text-align:center;
  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;
}

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

/* ===== RESPONSIVE ===== */

@media (max-width: 900px){
  .engagements-manifest{
    grid-template-columns:1fr;
    gap:2rem;
  }

  /* Photo en haut sur mobile, ratio plus paysage */
  .engagements-manifest__visual{
    order:-1;
  }

  .engagements-manifest__photo,
  .engagements-manifest__photo--fallback{
    aspect-ratio:4/3;
  }

  .engagements-manifest__photo-icon svg{
    width:100px;
    height:100px;
  }

  .engagements-manifest__cta{
    align-self:stretch;
  }
}

@media (max-width: 600px){
  .engagements-manifest__lead{
    font-size:1.05rem;
  }
}



/* ============================================================
=  VAGUE 5.6 — Section RECONDITIONNES en MANIFESTE INVERSE
=  Layout 2 colonnes : PHOTO a GAUCHE + texte impactant a DROITE
=  (inverse de la section Engagements pour eviter la repetition)
============================================================ */

/* Conteneur global : grid 2 colonnes equilibrees */
.recond-manifest{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:center;
  max-width:1200px;
  margin:clamp(2rem, 4vw, 3rem) auto 0;
}

/* ===== COLONNE GAUCHE : photo ===== */

.recond-manifest__visual{
  position:relative;
}

.recond-manifest__photo{
  position:relative;
  width:100%;
  aspect-ratio:4/5;                   /* Meme ratio que engagements pour coherence */
  overflow:hidden;
  border-radius:20px;
  background:#ECF6F0;
  box-shadow:
    0 10px 40px rgba(21,135,69,.15),
    0 0 0 1px rgba(21,135,69,.10);
}

.recond-manifest__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.2s cubic-bezier(.16,1,.3,1);
}

.recond-manifest__photo:hover img{
  transform:scale(1.04);
}

/* Liseret gradient EN HAUT de la photo (inverse engagements qui l'a en bas) */
.recond-manifest__photo::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, #158745 0%, #f4ce35 100%);
  z-index:2;
}

/* Fallback : grande icone refresh-cw qui pulse doucement */
.recond-manifest__photo--fallback{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  background:linear-gradient(135deg, rgba(244,206,53,.10) 0%, rgba(21,135,69,.08) 100%);
  padding:2rem;
}

.recond-manifest__photo-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  animation:recond-pulse 3s ease-in-out infinite;
}

.recond-manifest__photo-icon svg{
  width:140px;
  height:140px;
}

.recond-manifest__photo-text{
  margin:0;
  font-size:1.15rem;
  font-weight:600;
  text-align:center;
  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;
}

/* Pulse leger (au lieu de la rotation infinie des engagements) */
@keyframes recond-pulse{
  0%, 100% {
    transform:scale(1);
    opacity:1;
  }
  50% {
    transform:scale(1.05);
    opacity:.85;
  }
}

/* ===== COLONNE DROITE : contenu textuel ===== */

.recond-manifest__content{
  display:flex;
  flex-direction:column;
  gap:1.75rem;
}

.recond-manifest__lead{
  margin:0;
  font-size:clamp(1.15rem, 2vw, 1.35rem);
  line-height:1.55;
  color:#1a1a1a;
  font-weight:400;
}

.recond-manifest__lead strong{
  color:#158745;
  font-weight:700;
}

.recond-manifest__list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.recond-manifest__item{
  display:flex;
  align-items:flex-start;
  gap:.85rem;
  padding:1rem 1.25rem;
  background:#fff;
  border:1.5px solid rgba(21,135,69,.15);
  border-radius:12px;
  box-shadow:0 2px 8px rgba(21,135,69,.04);
  transition:
    transform .35s cubic-bezier(.16,1,.3,1),
    border-color .35s ease,
    box-shadow .35s ease;
}

/* Hover : glissement A GAUCHE (inverse engagements qui glissent a droite) */
.recond-manifest__item:hover{
  transform:translateX(-4px);
  border-color:rgba(21,135,69,.30);
  box-shadow:0 6px 16px rgba(21,135,69,.10);
}

.recond-manifest__check{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  margin-top:.1rem;
}

.recond-manifest__check svg{
  width:24px;
  height:24px;
  display:block;
}

.recond-manifest__item > div{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  flex:1;
}

.recond-manifest__item strong{
  font-size:1rem;
  font-weight:700;
  color:#1a1a1a;
  line-height:1.3;
}

.recond-manifest__item span{
  font-size:.85rem;
  line-height:1.5;
  color:#555;
}

/* CTA bouton primary */
.recond-manifest__cta{
  align-self:flex-start;
  margin-top:.5rem;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 900px){
  .recond-manifest{
    grid-template-columns:1fr;
    gap:2rem;
  }

  /* Sur mobile : photo passe en haut, texte en dessous */
  .recond-manifest__visual{
    order:-1;
  }

  .recond-manifest__photo,
  .recond-manifest__photo--fallback{
    aspect-ratio:16/9;
  }

  .recond-manifest__photo-icon svg{
    width:100px;
    height:100px;
  }

  .recond-manifest__cta{
    align-self:stretch;
  }
}

@media (max-width: 600px){
  .recond-manifest__lead{
    font-size:1.05rem;
  }
}

/* ============================================================
=  VAGUE 7 — Slider marques sur l'index (déplacé depuis page Reconditionnés)
=  Fond BLANC + logos sombres
============================================================ */

.recon-brands{
  padding:clamp(2.5rem, 5vw, 4rem) 0;
  background:#fff;
  overflow:hidden;
}

.recon-brands .section-title{
  color:#1a1a1a;
}

.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;
  /* Sur fond clair : logos sombres grisés, couleur au hover */
  filter:grayscale(100%) opacity(.5);
  transition:filter .4s ease;
}

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

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

@media (max-width:480px){
  .recon-brands__logo{
    width:90px;
    height:40px;
  }
}



/* ============================================================
=  VAGUE 7.1 — Inversion des fonds (retour cousine)
=  Slider blanc / Reconditionnés vert / À propos blanc
=  Alternance finale : Avis⚪ Prestations🟢 Slider⚪ Recond🟢 Àpropos⚪
============================================================ */

/* La section Reconditionnés (utilise .home-engagements) repasse en VERT pâle */
.home-engagements{
  background:#ECF6F0 !important;
}
.home-engagements .section-title{ color:#1a1a1a !important; }
.home-engagements .section-intro{ color:#555 !important; }

/* La section À propos repasse en BLANC */
.home-about{
  background:#fff !important;
}


/* =========================================================
 * COHÉRENCE CTA MOBILE — bannière contact (accueil)
 * Même logique : bouton centré + pleine largeur (max 340px).
 * ========================================================= */
@media (max-width:600px){
  .cta-final-banner .btn,
  .cta-final-banner .btn-primary{
    display:flex;
    box-sizing:border-box;
    width:100%;
    max-width:340px;
    margin-left:auto;
    margin-right:auto;
  }
}

/* =========================================================
 * COHÉRENCE CTA — empilé + centré en responsive (≤840px),
 * bannière (bouton à droite) sur grand écran (accueil).
 * ========================================================= */
@media (max-width:840px){
  .cta-final-banner{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
}