/* Page d'accueil uniquement (index.html). Couleurs de la charte : rose #CF3476, bleu nuit #1E213D. */

/* --- Les deux machines : vidéo, trois atouts, deux boutons --- */
.machines-section .machine {
  text-align: center;
  margin-bottom: 30px;
}

.machines-section .section-title {
  margin-bottom: 25px;
}

.machine-video {
  max-width: 460px;
  margin: 0 auto 30px;
  border-radius: 12px;
  overflow: hidden;
  background-color: #1E213D;
  aspect-ratio: 1 / 1;
}

.machine-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.machine-atouts {
  list-style: none;
  max-width: 460px;
  margin: 0 auto 30px;
  padding: 0;
  text-align: left;
}

.machine-atouts li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 20px;
}

.atout-picto {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #CF3476;
  color: #fff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.machine-atouts h3 {
  font-size: 18px;
  margin: 4px 0 4px;
  color: #1E213D;
}

.machine-atouts p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.machine-btns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}

/* Bouton « Devis » : contour rose, pour le distinguer du bouton principal */
.theme-btn.theme-btn-contour {
  background-color: #fff;
  color: #CF3476;
  box-shadow: inset 0 0 0 2px #CF3476;
}

.theme-btn.theme-btn-contour:hover,
.theme-btn.theme-btn-contour:focus {
  background-color: #CF3476;
  color: #fff;
}

/* --- Témoignages vidéo avec sélecteur Enjambeur / Broco'lit --- */
.temoignages-video {
  text-align: center;
  padding-bottom: 50px;
}

:where(.page-title, .hero) ~ .temoignages-video {
  background-color: #f8f8f8;
}

.temoignages-video .section-title {
  margin-bottom: 25px;
}

.selecteur-temoignage {
  display: inline-flex;
  padding: 5px;
  margin-bottom: 30px;
  border-radius: 50px;
  background-color: #1E213D;
}

.selecteur-temoignage button {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  font-size: 16px;
  min-width: 130px;
  height: 42px;
  padding: 0 25px;
  border: 0;
  border-radius: 50px;
  background: transparent;
  color: #fff;
  transition: background-color .3s ease;
}

.selecteur-temoignage button.actif {
  background-color: #CF3476;
}

.video-temoignage {
  max-width: 900px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background-color: #1E213D;
}

.video-temoignage iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Description du témoignage, sous la vidéo */
.description-temoignage {
  max-width: 900px;
  margin: 25px auto 0;
  padding: 25px 30px;
  text-align: left;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(30, 33, 61, .08);
}

.description-temoignage[hidden] {
  display: none;
}

.description-temoignage h3 {
  margin: 0 0 12px;
  font-size: 24px;
  color: #1E213D;
}

.description-temoignage h3 span {
  font-family: inherit;
  font-size: 17px;
  color: #CF3476;
  text-transform: none;
}

.description-temoignage h3 span::before {
  content: "– ";
}

.fiche-ferme {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 15px;
  padding: 0;
  list-style: none;
}

.fiche-ferme li {
  padding: 4px 12px;
  font-size: 14px;
  border-radius: 50px;
  background-color: #eef0f6;
  color: #1E213D;
}

.description-temoignage p {
  margin: 0 0 12px;
}

.description-temoignage blockquote {
  margin: 15px 0 0;
  padding: 2px 0 2px 18px;
  font-size: 17px;
  font-style: italic;
  border-left: 4px solid #CF3476;
  color: #1E213D;
}

.description-temoignage blockquote p:last-child {
  margin-bottom: 0;
}

@media (max-width: 500px) {
  .description-temoignage {
    padding: 20px;
  }
  .description-temoignage h3 span {
    display: block;
    margin-top: 4px;
  }
  .description-temoignage h3 span::before {
    content: "";
  }
}

/* --- Rejoignez la communauté : carte (les photos qui défilent gardent le code du site actuel) --- */
.communaute-section {
  text-align: center;
  padding-bottom: 50px;
}

.carte-communaute {
  max-width: 900px;
  margin: 0 auto 40px;
  height: 480px;
  border-radius: 12px;
  overflow: hidden;
}

/* Le bandeau du haut de la carte Google (titre, partage, plein écran) est masqué :
   la carte est remontée de la hauteur du bandeau, la boîte coupe ce qui dépasse. */
.carte-communaute iframe {
  width: 100%;
  height: calc(100% + 60px);
  margin-top: -60px;
  border: 0;
}

@media (max-width: 767px) {
  .carte-communaute {
    height: 380px;
  }
}

.defile-continu {
  overflow: hidden;
}

.defile-continu .defile-piste {
  display: flex;
  gap: 30px;
  width: max-content;
  will-change: transform;
}

.defile-continu .grid {
  flex: 0 0 auto;
}

.defile-continu .grid img {
  display: block;
  width: 100%;
  height: auto;
}

/* Témoignages écrits : centrés verticalement dans le bandeau bleu marine */
.testimonials-section .testimonials-grids2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.testimonials-section .testimonials-grids2 .testimonial:not(.active) {
  top: 50%;
  transform: translateY(-50%);
}

/* --- FAQ : boutons de devis et accès à la FAQ complète --- */
.faq-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 15px;
}

.faq-btns.faq-complete {
  justify-content: center;
  margin-top: 30px;
}

/* --- Romanesco, des machines innovantes (repris de dev) --- */
.innovation-section {
  text-align: center;
}

/* Même fond gris clair que les témoignages vidéo */
:where(.page-title, .hero) ~ .innovation-section {
  background-color: #f8f8f8;
}

.innovation-texte {
  max-width: 900px;
  margin: 0 auto 30px;
}

.innovation-photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-bottom: 30px;
}

.innovation-photos img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

@media (max-width: 767px) {
  .innovation-photos {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Page innovation --- */
.innovation-image {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 20px;
}

.innovation-axes {
  margin-top: 30px;
  text-align: center;
}

.innovation-axes .atout-picto {
  margin: 0 auto 15px;
}

.innovation-axes h3 {
  font-size: 20px;
  color: #1E213D;
}

/* Témoignages écrits du bandeau bleu : texte plus grand */
.testimonials-section .testimonials-grids2 .quote {
  max-width: 520px;
}

.testimonials-section .testimonials-grids2 .quote p {
  font-size: 19px;
  line-height: 1.5;
}

@media (max-width: 767px) {
  .testimonials-section .testimonials-grids2 .quote p {
    font-size: 15.5px;
  }
}

.section-title.faq-titre {
  text-align: center;
}

/* Hero de l'accueil sur mobile : titres remontés pour mieux voir les machines */
@media (max-width: 767px) {
  .hero .slide .row {
    vertical-align: top;
    padding-top: 40px;
  }
}

/* Témoignages écrits : flèches précédent / suivant (accueil.js).
   PC : de part et d'autre du bloc ; mobile : de part et d'autre de la photo. */
.testimonials-section .testimonials-grids2.temoignages-avec-fleches {
  position: relative;
}

.temoignages-fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.temoignages-fleche:focus-visible {
  background: #CF3476;
  border-color: #CF3476;
}

/* Survol rose seulement sur un écran avec souris : sur tactile, :hover reste
   « collé » après un appui et la flèche resterait rose. */
@media (hover: hover) {
  .temoignages-fleche:hover {
    background: #CF3476;
    border-color: #CF3476;
  }
}

.fleche-pc.temoignages-fleche-prec { left: -60px; }
.fleche-pc.temoignages-fleche-suiv { right: -60px; }
.fleche-mobile { display: none; }

@media (max-width: 1199px) {
  .fleche-pc.temoignages-fleche-prec { left: -10px; }
  .fleche-pc.temoignages-fleche-suiv { right: -10px; }
}

@media (max-width: 767px) {
  .fleche-pc { display: none; }
  .testimonials-section .client-pic { position: relative; }
  .fleche-mobile { display: flex; }
  .fleche-mobile.temoignages-fleche-prec { left: -75px; }
  .fleche-mobile.temoignages-fleche-suiv { right: -75px; }
}

/* Diapo « Récolter » en plein champ : sur mobile, on montre la gauche de la
   photo (maraîcher + support rose du siège) au lieu du centre. */
@media (max-width: 767px) {
  .hero .slide.diapo-recolte-champ { background-position: 18% center !important; }
}

/* Flèches du héro de l'accueil (créées par accueil.js), hauteur calée sur le titre */
.hero-fleche { z-index: 5; width: 46px; height: 46px; font-size: 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.75); background: rgba(30, 33, 61, 0.15);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35)); }
.hero-fleche-prec { left: 24px; }
.hero-fleche-suiv { right: 24px; }
/* Après un clic, la flèche redevient transparente même si la souris reste dessus
   (classe posée par accueil.js, retirée quand la souris quitte la flèche). */
.hero-fleche.apres-clic { background: rgba(30, 33, 61, 0.15); border-color: rgba(255, 255, 255, 0.75); }
@media (max-width: 767px) {
  /* Mobile : toujours à mi-hauteur de la photo, quelle que soit la hauteur du titre */
  .hero-fleche { width: 38px; height: 38px; font-size: 14px; top: 50% !important; }
  .hero-fleche-prec { left: 8px; }
  .hero-fleche-suiv { right: 8px; }
}

/* Légende longue (« Manutentionner ») : un peu plus petite sur mobile pour tenir sur une ligne */
@media (max-width: 767px) {
  .hero-style-1 .slide-caption p.legende-longue { font-size: 30px; }
}