/* =========================================================
   Planet Moove – CSS responsive (mobile-first, clean)
   Palette: --pm-dark, --pm-yellow, --pm-cyan, --pm-bg
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Freeman&display=swap');

/* ---------- Reset & base ---------- */
:root{
  --pm-dark:#0e273b;
  --pm-yellow:#fac700;
  --pm-cyan:#4fbec6;
  --pm-bg:#e3f2e1;
  --pm-text:#222;
  --pm-muted:#666;
  --pm-white:#fff;
  --pm-border:1px solid rgba(0,0,0,.08);
  --pm-radius:14px;
  --pm-shadow:0 12px 30px rgba(0,0,0,.08);
}

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

html{ font-size:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--pm-text);
  background: var(--pm-bg);
  line-height:1.6;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
hr{ width: min(70%, 900px); margin: 1.25rem auto; border:0; border-top: var(--pm-border); }

/* Typo fluides */
h1{ font-size: clamp(1.4rem, 4.5vw, 2.2rem); line-height:1.2; margin:.5rem 0; }
h2{ font-size: clamp(1.1rem, 3.8vw, 1.4rem); line-height:1.25; margin:.75rem 0; }
h3{ font-size: clamp(1rem, 3.3vw, 1.2rem); line-height:1.25; margin:.5rem 0; }

/* Containers utilitaires */
.container,
.container-text-don,
.container-text-reconditione,
.container-bannierre,
.container-bannierre2,
.container-tableau-comparison,
.slideshow-container,
.container-don,
.container-reconditionne{
  width:min(1200px, 94%);
  margin-inline:auto;
}

/* ---------- Bandeau info ---------- */
.information{
  width:100%;
  padding: .8rem .9rem;
  text-align:center;
  background: var(--pm-dark);
  color: var(--pm-yellow);
  font-weight:700;
}
.information span{ text-decoration:underline; }

/* ---------- Sticky header helper ---------- */
.sticky{ position:fixed; inset-block-start:0; inline-size:100%; z-index:999; }
.sticky + .content{ padding-top: 90px; }

/* ---------- Bannières ---------- */
.container-bannierre,
.container-bannierre2{ padding: 0 15px; }
.bannierre img,
.bannierre2 img{
  margin-top: clamp(1.5rem, 6vw, 4rem);
  border: 1px solid var(--pm-yellow);
  border-radius: var(--pm-radius);
  box-shadow: var(--pm-shadow);
  width:100%;
  object-fit:cover;
}
@media (min-width: 601px){
  .container-bannierre{ display:none; }
}
@media (max-width: 600px){
  .container-bannierre{ display:block; }
  .container-bannierre2{ display:none; }
}

/* ---------- Animation texte (hero) ---------- */

 /* animation du texte */
.container3 { max-widht :1600px;
margin:0;padding:10px 20px 0;
}

.container3 p {
	text-transform: uppercase;
color: #222;color:  transparent;
font-weight: 900;

font-size:0px; }
.container3 p span {display:inline-block;
position: relative;
overflow: hidden;
font-size: clamp(20px, 8vw,30px);}

.container3 p span::after{
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
transform: translateX(-100%);
}

.container3 p:nth-child(1) {font-weight:300;
animation: txt-appearance 0s 1s forwards;}

.container3 p:nth-child(2) {   
animation: txt-appearance 0s 1.25s forwards;}

.container3 p:nth-child(1) span::after {background: #fac700;
animation: slide-in 0.75s ease-out forwards,
slide-out 0.75s 1s ease-out forwards;}

.container3 p:nth-child(2) span::after {background: #0e273b;
animation: slide-in 0.75s 0.3s ease-out forwards,
slide-out 0.75s 1.3s ease-out forwards;}

@keyframes slide-in{
	100% {transform: translateX(0%)}
}

@keyframes slide-out{
	100%{transform: translateX(100%)}
}

@keyframes txt-appearance {
	100%{color: #222;}
}

@media (max-width:600px){
	
	
.container3 p span {
font-size: clamp(10px, 8vw,15px);}
}



/* ---------- Cookies ---------- */
.cookie-consent{
  position:fixed; inset-block-end:0; inline-size:100%;
  background: var(--pm-white); color:#555; z-index:1000; border-top: var(--pm-border);
}
.cookie-message{
  display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding: 10px 14px;
}
.cookie-message p{ margin:0; padding: 10px; font-size: clamp(.9rem, 2.5vw, 1.05rem); flex:1; }
.cookie-message button{
  background: #f6a71c; color:#fff; border:0; padding:10px 16px; border-radius:10px; cursor:pointer;
}
.cookie-message button:hover{ filter:brightness(1.05); }

/* ---------- Slider catégories (horizontal scroll) ---------- */
.grand_categories-container{margin-bottom: 40px; }
.categories-container{
  display:flex; gap:70px; padding: 16px; overflow-x:auto; scroll-snap-type:x mandatory;a
}
.category{ min-width:100px; text-align:center; scroll-snap-align:start; }
.category-image{
  width:100px; aspect-ratio:1 / 1; border-radius:12px; overflow:hidden; background:#e0e0e0;
  display:grid; place-items:center; margin-bottom:6px;
}
.category-image img{ width:100%; height:100%; object-fit:cover; }
.category span{ font-size:.9rem; color:#333; }
@media (max-width:768px){
  .categories-container{ justify-content:flex-start; gap:12px;}
  .category span{ font-weight:700; font-size:.7rem; }
  .category-image{ width:90px; }
	
}

/* ---------- Icones qualité ---------- */
.grand-container-icon-garantie{ background:var(--pm-bg); }
.container-icon-garantie{
  margin: 40px auto; display:grid; gap:16px; grid-template-columns: repeat(3, 1fr);
}
@media (max-width:900px){ .container-icon-garantie{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .container-icon-garantie{ grid-template-columns:1fr; } }

.service-card1{
  display:flex; align-items:center; gap:14px; background:#f8f5e1; border-radius:12px;
  padding: 14px; box-shadow: var(--pm-shadow);
}
.icon-garantie{ background:#f6f6f6; border-radius:50%; padding:10px; inline-size:56px; block-size:56px; display:grid; place-items:center; }
.icon-garantie img{ width:36px; height:36px; object-fit:cover; }
.text-garantie h3{ margin:0; color:#1A4D2E; font-size:1rem; }
.text-garantie p{ margin:.25rem 0 0; color:#666; font-size:.9rem; }

/* ---------- Slideshow basique ---------- */
.slideshow-container{ position:relative; }
.mySlides{ display:none; margin-top: 28px; }
.mySlides img{ width:100%; border-radius:12px; object-fit:cover; }
.prev,.next{
  position:absolute; top:50%; transform:translateY(-50%);
  background: rgba(0,0,0,.45); color:#fff; border:0; padding:10px 12px; border-radius:10px; cursor:pointer;
}
.prev{ left:8px; } .next{ right:8px; }
.prev:hover,.next:hover{ background: rgba(0,0,0,.7); }
.dot{ inline-size:10px; block-size:10px; background:#bbb; border-radius:50%; display:inline-block; margin: 8px 3px; }
.dot.active, .dot:hover{ background:#717171; }

/* ---------- Blocs don (image + texte) ---------- */
.container-don{ margin: 12px auto; }
.petit-don{
  display:grid; gap:0; grid-template-columns: 1fr; background:#444; border-radius:14px; overflow:hidden;
}
.image-don{ width:100%; max-height:520px; object-fit:cover; }
.text-don{
  background: var(--pm-dark); padding: 18px; color:#fff; border-top: 1px solid rgba(255,255,255,.08);
}
.text-don p{ margin:.4rem 0; line-height:1.7; }
.text-don h3{ margin:.25rem 0 .5rem; }
.border-text2{ border: 1px solid var(--pm-yellow); border-radius:12px; padding:10px; }
@media (min-width:720px){
  .petit-don{ grid-template-columns: 1.1fr .9fr; }
  .text-don{ margin-left:0; border-top:none; border-left: 1px solid rgba(255,255,255,.06); }
}

/* ---------- Bouton principal ---------- */
.button{
  display:inline-block; border-radius:999px; background: var(--pm-dark); color: var(--pm-yellow);
  border:2px solid var(--pm-yellow); padding: 12px 18px; min-width: 220px; text-align:center;
  transition:.25s; font-weight:600; margin: 10px 20px 20px;
}
.button:hover{ transform: translateY(-2px); filter: brightness(1.05); }
.button span{ position:relative; padding-right:18px; }
.button span::after{
  content:'\00bb'; position:absolute; right:0; opacity:0; transition:.25s;
}
.button:hover span::after{ opacity:1; right:-2px; }
@media (max-width:360px){ .button{ min-width:180px; } }

/* ---------- Tableau comparaison ---------- */
.container-tableau-comparison{ margin: 24px auto;border: 1px solid #ECC80F; }
table{
  width:100%; border-collapse: collapse; border: 1px solid var(--pm-yellow); border-radius:12px; overflow:hidden;
  font-size: clamp(.9rem, 2.8vw, 1rem);
}
th,td{ padding: 12px; text-align:center; }
th:first-child, td:first-child{ text-align:left; }
tr:nth-child(even){ background:#f7f7f7; }
.fa-check{ color: green; } .fa-remove{ color:red; }

/* ---------- 3 cartes services ---------- */
.grand_services-container{ background:#f5f5f5; }
.services-container{
  display:grid; gap:16px; grid-template-columns: repeat(3,1fr);
  width:min(1200px, 94%); margin: 0 auto; padding: 20px 0;
}
@media (max-width:900px){ .services-container{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .services-container{ grid-template-columns:1fr; } }

.service-card{
  background:#fff; border-radius:12px; padding: 16px; text-align:center;
  box-shadow: var(--pm-shadow); transition: transform .2s;
}
.service-card:hover{ transform: translateY(-4px); }
.service-card.highlighted{ background: var(--pm-yellow); }
.service-icon img{ width:50px; height:50px; margin:0 auto 8px; }
.service-card h3{ color:#444; margin:.4rem 0; }
.service-card p{ color:#666; font-size:.95rem; }

/* ---------- Accordéon ---------- */
/* ===== Accordéon (compatible mobile-first) ===== */
.accordion{
  width:100%;
  text-align:left;
  background:#0e273b;
  color:#fac700;
  border:1px solid #ffcc00;
  padding:16px 18px;
  cursor:pointer;
  font-weight:700;
  border-radius:8px;
  transition:background .25s ease, color .25s ease;
}

.accordion:hover,
.accordion.active{
  background:#f5f2fd;
  color:#0e273b;
}

.accordion::after{
  content:'+';
  float:right;
  color:#777;
  transition:transform .25s ease;
}
.accordion.active::after{
  content:'–';
}

/* Le panneau s’ouvre/ferme en douceur */
.panel{
  overflow:hidden;
  max-height:0;                 /* IMPORTANT : plus de display:none ! */
  transition:max-height .35s ease;
  background:#fff;
  border:1px solid #eee;
  border-radius:8px;
  margin-top:8px;
}
.panel.open{                    /* classe ajoutée en JS */
  /* max-height mis en inline (scrollHeight) pour une vraie hauteur */
}

.panel p{
  color:#333;
  font-size:14px;
  line-height:1.55;
  padding:12px 14px;
  margin:0;
}

/* ---------- Pourquoi reconditionné ---------- */
.petit-contenair-pouequoi h1{ color:#555; padding: 10px 25px; }
.petit-reconditionne{
  display:grid; grid-template-columns:1fr; background:#555; border-radius:14px; overflow:hidden; margin: 30px 0;
}
.image-reconditionne{ width:100%; max-height:520px; object-fit:cover; }
.text-reconditionne{
  background: var(--pm-dark); color: var(--pm-yellow); padding: 20px; margin:0;
}
.text-reconditionne p{ line-height:1.7; font-size: 12px;}
.border-text{ border:1px solid #fff; border-radius:12px; padding:10px; }
@media (min-width:720px){
  .petit-reconditionne{ grid-template-columns:1.1fr .9fr; }
}

/* ---------- Texte défilant ---------- */
.texte-defilant-container{
  color: var(--pm-yellow);
  padding: 0 25px; text-align:center; margin-inline:auto;
  font-size: clamp(.85rem, 2.6vw, 1.1rem);
}
.texte-defilant{
  position:relative; height: 50px; display:flex; align-items:center; justify-content:center; background:#444; border-radius:12px;
}
.texte-defilant p{
  position:absolute; inset:0; display:grid; place-items:center; padding:0 16px; margin:0;
  white-space:nowrap; opacity:0; transition: opacity 1s ease-in-out;
}

/* ---------- Bloc image + texte + liste ---------- */
.conainer_animation{ display:flex; justify-content:center; background:var(--pm-bg); }
.conainer_animation .container{
  width:min(1000px, 94%); margin: 16px auto; background: var(--pm-yellow);
  border:1px solid #666; border-radius:12px; box-shadow: var(--pm-shadow); padding: 16px;
  display:grid; grid-template-columns:1fr; gap:14px;
}
.conainer_animation .image-container img{ width:100%; border-radius:10px; }
.conainer_animation .text-container{ text-align:center; }
.icon-container{ position:relative; display:inline-grid; place-items:center; margin: 12px 0; }
.rotating-text{ position:absolute; animation: rotate 10s linear infinite; }
.rotating-text span{ position:absolute; inset-inline-start:0; inline-size:100%; text-align:center; font-size:12px; }
@keyframes rotate{ to{ transform: rotate(360deg); } }
.conainer_animation ul{ padding:0; }
.conainer_animation li{ display:flex; gap:8px; align-items:center; justify-content:center; }
.conainer_animation li::before{ content:"✓"; color:green; font-weight:700; }
.cta-button{
  display:inline-block; background:#000; color:#fff; border:0; padding: 10px 18px; border-radius:8px; cursor:pointer;
}
@media (min-width:768px){
  .conainer_animation .container{ grid-template-columns:1fr 1fr; align-items:center; }
}

/* ---------- Étapes reconditionnement ---------- */
.grand_recond-container{ background:#0a0a2a; color:#fff; }
.recond-container{ width:min(1100px, 94%); margin: 0 auto; text-align:center; padding: 22px 0; }
.recond-header h1{ color: var(--pm-yellow); margin-bottom:12px; }
.recond-header p{ color:#444; margin-bottom: 24px; }
.recond-steps{
  display:grid; gap:14px; grid-template-columns:1fr; color:#333; margin-bottom: 24px;
}
@media (min-width:768px){ .recond-steps{ grid-template-columns: repeat(3,1fr); } }
.recond-step{border-radius:12px; padding:16px; box-shadow: var(--pm-shadow); }
.recond-step-number{
  width:60px; height:60px; border-radius:50%; display:grid; place-items:center; margin: 0 auto 10px;
  background: var(--pm-yellow); color:#0a0a2a; font-weight:800; animation: recond-bounce 2s infinite;
}
.recond-cta-button{
  background:#444; color: var(--pm-yellow); border:0; padding: 12px 18px; border-radius:8px; cursor:pointer;
}
.recond-cta-button:hover{ filter: brightness(1.05); }
@keyframes recond-bounce{
  0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); }
}

/* ---------- Hero Carrousel (plein écran) ---------- */
.container_carousel{ height:100%; }
.carousel{
  position:relative; width:100%; height: 78vh; overflow:hidden; margin-top:0;
}
.carousel-inner{ display:flex; height:100%; transition: transform .5s ease-in-out; }
.carousel-item{ min-width:100%; height:100%; background-size:cover; background-position:center; position:relative; }
.carousel-caption{
  position:absolute; inset:50% auto auto 50%; transform:translate(-50%, -50%);
  text-align:center; color:#fff; background: rgba(0,0,0,.45); padding: 14px 16px; border-radius:12px;
}
.carousel-caption h1{ font-size: clamp(1.4rem, 5vw, 2.6rem); margin:0; }
.carousel-caption h2{ color: var(--pm-yellow); font-size: clamp(1rem, 3.2vw, 1.3rem); margin:.25rem 0; }
.carousel-caption p{ font-size: clamp(.95rem, 3vw, 1.1rem); }
.carousel .btn{
  background:#fff; color:#000; border:0; padding:10px 16px; border-radius:8px; cursor:pointer; margin-top:10px;
}
.carousel-control{
  position:absolute; top:50%; transform:translateY(-50%); background: rgba(0,0,0,.45);
  color:#fff; border:0; padding:10px 12px; border-radius:10px; cursor:pointer; font-size:1rem;
}
.carousel-control.prev{ left:10px; } .carousel-control.next{ right:10px; }
.animated-text{ animation: fadeIn 1.2s ease-in; }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
@media (max-width:900px){ .carousel{ height: 64vh; } }

/* ---------- Petites utilités ---------- */
.hide-mobile{ display:none; }
@media (min-width:760px){ .hide-mobile{ display:initial; } }