/* ==== RESET ==== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ==== POLICES ==== */
body {
  font-family: 'Open Sauce One', Arial, Helvetica, sans-serif;
  line-height: 1.6;
  color: #1d1d1d;
  background-color: #e6e6df; /* ✅ fond global blanc cassé */
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'League Spartan', sans-serif;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.8rem;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ==== BLOCS ==== */
.block-card {
  max-width: 1200px;
  margin: 1rem auto;
  border-radius: 20px;
  background: #fff;
  color: #1d1d1d;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  padding: 2rem;
  transform: scale(0.98);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 0.6s ease;
}

.block-card:hover {
  transform: scale(1.03);
  box-shadow: 0 16px 32px rgba(0,0,0,0.15);
}

/* Loader plein écran */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #111;          /* fond noir */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 5000;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#loader.hidden {
  opacity: 0;
  visibility: hidden;
}

.loader-content {
  text-align: center;
  width: 80%;
  max-width: 400px;
}

.loader-bar {
  width: 0%;
  height: 6px;
  background: #ffdd00;
  border-radius: 3px;
  margin-bottom: 1rem;
  transition: width 0.3s ease;
}

#loader p {
  color: #fff;
  font-family: 'League Spartan', sans-serif;
  font-size: 1.2rem;
}



/* === ✅ Bannière fine responsive === */
.top-banner {
  background-color: #1d1d1d;
  color: #fff;
  font-size: 1rem;
  padding: 0.8rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  border-radius: 12px;
  flex-wrap: nowrap;
}

.top-banner p {
  margin: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.top-banner .btn-banner {
  background: #ffdd00;
  color: #1d1d1d;
  font-weight: bold;
  padding: 0.4rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ✅ Mobile : texte plus petit, alignement vertical */
@media (max-width: 600px) {
  .top-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 0.5rem;
    padding: 0.8rem;
  }

  .top-banner p {
    white-space: normal;
    font-size: 0.9rem;
    line-height: 1.3;
  }

  .top-banner .btn-banner {
    align-self: center;
    width: fit-content;
    padding: 0.5rem 1.2rem;
    font-size: 0.9rem;
  }
}

/* ==== NAVIGATION ==== */
.main-header {
  position: sticky;
  top: 0;
  z-index: 150;
}

.nav-card {
  background: #fff;
  color: #1d1d1d;
  padding: 0.5rem 1.5rem;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: transform 0.6s, box-shadow 0.6s;
}

.nav-card:hover {
  transform: scale(1.03);
  box-shadow: 0 16px 32px rgba(0,0,0,0.15);
}

.logo img {
  height: 100px;
  display: block;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

nav a {
  font-weight: 500;
  color: #1d1d1d;
  transition: color 0.3s;
}

nav a:hover {
  color: #ffdd00;
}

/* ==== BOUTONS ==== */
.btn-white,
.btn-yellow,
.btn-demo,
.hero-form button,
.contact-form button {
  padding: 0.8rem 1.5rem;
  border-radius: 6px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-block;
}

.btn-demo {
  background: #1d1d1d;
  color: #fff;
}
.btn-demo:hover {
  background: #ffdd00;
  color: #1d1d1d;
}

.hero-form button {
  background: #ffdd00;
  color: #1d1d1d;
}
.hero-form button:hover {
  background: #1d1d1d;
  color: #ffdd00;
}

/* ==== HERO ==== */
.hero {
  background: linear-gradient(135deg, #111 0%, #333 100%);
  color: #fff;
  padding: 10rem 2.5rem;
}

.hero-content {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}

.hero-text {
  flex: 1 1 55%;
}

.hero-text h1 {
  font-size: 2.2rem;
  margin-bottom: 1rem;
}

.hero-text .subtitle {
  font-size: 1.2rem;
  margin-top: 1rem;
}

.hero-form {
  flex: 1 1 40%;
  background: #fff;
  color: #1d1d1d;
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid #eee;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.hero-form form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hero-form input,
.hero-form textarea {
  width: 100%;
  padding: 0.8rem;
  border-radius: 6px;
  border: 1px solid #bbb;
}

/* ==== CTA jaune ==== */
.cta-yellow {
  background: #ffdd00;
  padding: 3rem 2rem;
  text-align: center;
  border-radius: 20px;
}

.cta-yellow h2 {
  font-size: 2rem;
  color: #111;
}

.cta-buttons {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.cta-yellow .btn-black {
  background: #111;
  color: #fff;
  padding: 0.8rem 1.5rem;
  border-radius: 6px;
  font-weight: bold;
  transition: all 0.3s ease;
}
.cta-yellow .btn-black:hover {
  background: #fff;
  color: #111;
  box-shadow: 0 0 0 2px #111 inset;
}

.cta-yellow .btn-white {
  background: #fff;
  color: #111;
}
.cta-yellow .btn-white:hover {
  background: #111;
  color: #ffdd00;
}

/* ==== SOLUTIONS PAGE ==== */
.hero-slim {
  background: #1d1d1d;
  color: #fff;
  text-align: center;
  padding: 3rem 1rem;
  margin: 1rem auto;
  border-radius: 20px;
  max-width: 1200px;
  transform: scale(0.98);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 0.6s ease;
}

.hero-slim:hover {
  transform: scale(1.03);
  box-shadow: 0 16px 32px rgba(0,0,0,0.15);
}



.hero-slim h1 {
  margin: 0 auto 1rem auto;
  font-size: 2.5rem;
  color: #fff;
}

.hero-slim p {
  font-size: 1.2rem;
  max-width: 800px;
  margin: 0 auto; /* centre horizontalement */
  line-height: 1.6;
  color: #ddd; /* gris clair pour contraste doux */
}


.solution-card {
  max-width: 1200px;
  margin: 1rem auto;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  color: #1d1d1d;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.solution-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 420px;
}

.solution-grid.reverse {
  direction: rtl;
}
.solution-grid.reverse .solution-text,
.solution-grid.reverse .solution-media {
  direction: ltr;
}

.solution-text {
  padding: 2rem;
  text-align: left;
}

.solution-text h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.solution-text p {
  font-size: 1.1rem;
  line-height: 1.6;
}

.solution-media img,
.solution-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.solution-card.bg-yellow {
  background: #ffdd00;
  color: #111;
}
.solution-card.bg-yellow h2,
.solution-card.bg-yellow p {
  color: #111;
}

/* ==== AVANTAGES ==== */
.advantages {
  text-align: center;
  padding: 3rem 1rem;
}
.adv-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2rem;
}
.adv-item {
  flex: 1 1 250px;
  max-width: 280px;
  text-align: center;
}
.adv-icon {
  width: 60px;
  margin: 0 auto 1rem auto;
  display: block;
}
.black-bg {
  background: #111;
  color: #fff;
  padding: 3rem 1rem;
}
.black-bg h3 { color: #ffdd00; }
.black-bg .adv-icon { filter: brightness(0) invert(1); }
.values-section {
  background: #ffdd00;
  color: #111;
  padding: 3rem 1rem;
  text-align: center;
}
.values-section h2 { margin-bottom: 2rem; }

/* ==== TEAM ==== */
.team-section { text-align: center; }
.team-member { margin: 2rem auto; }
.team-photo {
  width: 180px; height: 180px; border-radius: 50%;
  object-fit: cover;
}

/* =========================
   PORTFOLIO — PATCH PROPRE
   ========================= */

/* Conteneur */
.portfolio-section.block-card.no-zoom{
  transform:none !important;
  padding:2rem 2rem 3rem !important;
}

/* Grille desktop : 2 colonnes, rangées auto */
.portfolio-grid.schema-v2{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:1.5rem !important;
  max-width:1200px !important;
  margin:0 auto !important;
  grid-auto-rows:auto !important;           /* plus de hauteurs forcées */
}

/* Carte générique */
.portfolio-grid.schema-v2 > .portfolio-item{
  border-radius:16px !important;
  padding:32px !important;
  display:block !important;                 /* base */
  gap:0 !important;
}

/* ====== Texte ====== */
.portfolio-grid.schema-v2 .meta,
.portfolio-grid.schema-v2 .meta *{
  text-align:left !important;               /* fini la justification */
}
.portfolio-grid.schema-v2 .meta{ max-width:720px; }
.portfolio-grid.schema-v2 .meta p{ margin:0 0 .6rem 0; line-height:1.55; }

/* Listes sans puces (style “listing” propre) */
.portfolio-grid.schema-v2 .meta ul{ list-style:none; padding-left:0; margin:.4rem 0 .8rem 0; }
.portfolio-grid.schema-v2 .meta ul li{ margin:.35rem 0; }

/* Bouton vidéo : espace compact sous le texte */
.portfolio-grid.schema-v2 .meta + .btn-video{
  margin-top:.75rem !important;
}

/* ====== Image ====== */
.portfolio-grid.schema-v2 .thumb{
  display:block !important;
  width:clamp(280px, 32vw, 420px) !important;  /* s’adapte, max 420px */
  aspect-ratio:1/1 !important;                 /* toujours carré */
  border-radius:12px !important;
  overflow:hidden !important;
}
.portfolio-grid.schema-v2 .thumb img{
  width:100% !important; height:100% !important;
  object-fit:cover !important; display:block !important;
  border-radius:inherit !important;
}

/* ====== Layouts ====== */
/* Portrait : texte puis image centrée */
.portfolio-grid.schema-v2 > .portfolio-item.portrait{
  display:flex !important; flex-direction:column !important;
  align-items:center !important; gap:1rem !important;
}
.portfolio-grid.schema-v2 > .portfolio-item.portrait .thumb{
  width:min(420px, 100%) !important; margin-inline:auto !important;
}

/* Paysage : juxtaposition stricte */
.portfolio-grid.schema-v2 > .portfolio-item.landscape-left{
  display:flex !important; align-items:center !important;
  gap:2rem !important; flex-wrap:nowrap !important;
}
.portfolio-grid.schema-v2 > .portfolio-item.landscape-right{
  display:flex !important; align-items:center !important;
  gap:2rem !important; flex-direction:row-reverse !important;
}
.portfolio-grid.schema-v2 > .portfolio-item.landscape-left .meta,
.portfolio-grid.schema-v2 > .portfolio-item.landscape-right .meta{ flex:1 1 auto !important; }
.portfolio-grid.schema-v2 > .portfolio-item.landscape-left .thumb,
.portfolio-grid.schema-v2 > .portfolio-item.landscape-right .thumb{
  flex:0 0 auto !important;                  /* image garde sa taille */
}

/* Cas explicites B1 & B6 (si pas de classe appliquée) */
.portfolio-grid.schema-v2 > .portfolio-item:nth-of-type(1){
  display:flex !important; align-items:center !important; gap:2rem !important;
}
.portfolio-grid.schema-v2 > .portfolio-item:nth-of-type(6){
  display:flex !important; align-items:center !important; gap:2rem !important;
  flex-direction:row-reverse !important;     /* image à droite */
}

/* ====== Mobile (≤900px) : cartes empilées ====== */
@media (max-width:900px){
  .portfolio-grid.schema-v2{
    display:flex !important; flex-direction:column !important; gap:1.25rem !important;
  }
  .portfolio-grid.schema-v2 > .portfolio-item{
    display:block !important; width:100% !important; max-width:640px !important;
    margin:0 auto !important; padding:20px !important;
  }
  /* neutralise les layouts */
  .portfolio-grid.schema-v2 > .portfolio-item.landscape-left,
  .portfolio-grid.schema-v2 > .portfolio-item.landscape-right{
    display:block !important;
  }
  /* image centrée et carrée */
  .portfolio-grid.schema-v2 .thumb{
    width:min(420px, 100%) !important; margin:.5rem auto 0 !important;
    aspect-ratio:1/1 !important;
  }
  /* bouton pas en absolu */
  .btn-video{
    position:static !important; transform:none !important;
    width:auto !important; max-width:90% !important;
    padding:.9rem 1.1rem !important; margin:.5rem auto 0 !important;
    display:inline-block !important;
  }
}

/* ====== Boutons “Voir une démo” (desktop + mobile) ====== */
.btn-demo, .btn-demo-mobile{
  background:#1d1d1d !important; color:#fff !important; font-weight:700 !important;
}
.btn-demo:hover, .btn-demo-mobile:hover{
  background:#ffdd00 !important; color:#111 !important;
}


/* === ✅ FOOTER ALIGNÉ ET CENTRÉ === */
footer {
  background: transparent;
  margin-top: 1rem;
}

.footer-wrapper {
  background: #fff;
  color: #1d1d1d;
  padding: 3rem 2rem;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Grille des liens */
.footer-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem 4rem; /* espace vertical et horizontal */
  width: 100%;
  max-width: 1100px; /* largeur contenue */
  margin: 0 auto 2.5rem auto;
  text-align: left;
  justify-items: center; /* centre chaque colonne dans la grille */
}

.footer-links h3 {
  margin-bottom: 0.8rem;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
}

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.5rem;
  text-align: center;
}

.footer-links a {
  color: #1d1d1d;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #ffdd00;
}

/* Ligne de séparation */
.footer-bottom {
  border-top: 1px solid #eee;
  padding-top: 1.2rem;
  text-align: center;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

/* Icônes sociales */
.social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  margin-top: 0.8rem;
}

.social a {
  font-size: 1.8rem;
  color: #1d1d1d;
  transition: color 0.3s ease;
}

.social a:hover {
  color: #ffdd00;
}

.footer-bottom p {
  font-size: 0.95rem;
  margin-top: 0.8rem;
}

/* === Responsive === */
@media (max-width: 768px) {
  .footer-wrapper {
    padding: 2rem 1rem;
  }

  .footer-links {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1.8rem;
  }

  .footer-links h3 {
    margin-bottom: 0.5rem;
  }

  .footer-links li {
    margin-bottom: 0.4rem;
  }

  .footer-bottom {
    margin-top: 1rem;
  }
}



.social a {
  font-size: 2rem;
  margin: 0 0.5rem;
  color: #1d1d1d;
  transition: color 0.3s;
}

.social a:hover { color: #ffdd00; }

/* ==== RESPONSIVE ==== */
@media (max-width: 900px) {
  .solution-grid,
  .solution-grid.reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }
  .solution-media {
  overflow: hidden;
}


.solution-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0; /* tu peux mettre 12px si tu veux des coins arrondis */
}

}

@media (max-width: 768px) {
  .hero-content { flex-direction: column; }
  nav ul { display: none; }
  .testimonial-list { flex-direction: column; }
}
.calendly-inline-widget {
  margin-top: 2rem;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}
/* === Blocs Solutions : images avec bords arrondis === */
.solution-card .solution-media {
  overflow: hidden;         /* indispensable pour « couper » les coins de l’image */
  border-radius: 16px;      /* arrondi appliqué au conteneur */
}

.solution-card .solution-media img {
  display: block;           /* évite les espaces fantômes */
  width: 100%;
  height: 100%;
  object-fit: cover;        /* couvre tout le bloc correctement */
  border-radius: inherit;   /* reprend l’arrondi du parent */
}

/* Si une ancienne règle force l’image à rester « carrée », on surclasse : */
.solution-media img {
  border-radius: 16px !important;
}
/* === ✅ MENU MOBILE MODERNE === */
.menu-panel {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 340px;
  height: 100%;
  background: #ffffff;
  z-index: 999;
  transition: right 0.35s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: -4px 0 18px rgba(0, 0, 0, 0.2);
  padding: 2rem 1.5rem;
  border-radius: 12px 0 0 12px;
}

.menu-panel.active {
  right: 0;
}

.menu-header {
  text-align: center;
  margin-bottom: 2rem;
}

.menu-logo {
  width: 140px;
  height: auto;
}

/* Liens du menu */
.menu-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  text-align: center;
}

.menu-links li a {
  color: #111;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.3px;
  transition: color 0.3s ease;
}

.menu-links li a:hover {
  color: #ffdd00;
}

/* Pied du menu */
.menu-footer {
  margin-top: auto;
  text-align: center;
}

.btn-demo-mobile {
  display: inline-block;
  background: #1d1d1d;
  color: #fff;
  font-weight: bold;
  padding: 0.9rem 1.6rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.btn-demo-mobile:hover {
  background: #ffdd00;
  color: #111;
}

/* Fond noir semi-transparent */
.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.backdrop.active {
  opacity: 1;
  pointer-events: all;
}

/* Désactivation sur desktop */
@media (min-width: 1024px) {
  #menu-panel,
  #backdrop {
    display: none !important;
  }
}
/* === FIX: centrer la carte formulaire/captcha dans le hero (mobile) === */
@media (max-width: 768px) {
  .hero-content {
    flex-direction: column;   /* au cas où une autre règle l'écrase */
    align-items: center;      /* au lieu de flex-start */
  }

  .hero-form {
    width: 100%;
    max-width: 520px;         /* ajuste 480–560px selon ton goût */
    margin: 0 auto;           /* centre horizontalement */
    align-self: center;       /* ceinture+bretelles si d'autres règles s'appliquent */
  }
}
/* === ✅ Témoignages — version dark Bipa Digital === */
.testimonials {
  text-align: center;
  padding: 2rem 1rem;
}

.testimonials h2 {
  color: #111;
  margin-bottom: 2rem;
}

.testimonial-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* espace entre les témoignages */
}

.testimonial {
  background: #1d1d1d; /* fond noir */
  color: #ffffff;      /* texte blanc */
  border-radius: 16px;
  padding: 1.5rem 1.8rem;
  text-align: left;
  box-shadow: none;    /* pas d’ombre */
}

.testimonial p {
  margin-bottom: 0.8rem;
  line-height: 1.6;
  font-size: 1rem;
}

.testimonial strong {
  color: #ffdd00; /* met en valeur les mots clés */
}

.testimonial span {
  display: block;
  font-style: italic;
  font-size: 0.95rem;
  color: #ccc;
}

/* ✅ Desktop : affichage côte à côte harmonieux */
@media (min-width: 900px) {
  .testimonial-list {
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
  }

  .testimonial {
    flex: 1 1 45%;
    max-width: 500px;
  }
}
/* === PORTFOLIO : correctifs finaux === */

/* Stopper les hauteurs figées */
.portfolio-grid.schema-v2{
  grid-template-rows: unset !important;
  grid-auto-rows: auto !important;
}

/* Jamais de justification */
.portfolio-grid.schema-v2 .meta,
.portfolio-grid.schema-v2 .meta *{
  text-align: left !important;
}

/* UL → style “listing” sans puces */
.portfolio-grid.schema-v2 .meta ul{
  list-style: none !important;
  padding-left: 0 !important;
  margin: .4rem 0 .8rem 0 !important;
}
.portfolio-grid.schema-v2 .meta ul li{ margin: .35rem 0 !important; }

/* Espace bouton-texte compact */
.portfolio-grid.schema-v2 .meta + .btn-video{ margin-top: .75rem !important; }

/* Images carrées et responsives */
.portfolio-grid.schema-v2 .thumb{
  width: clamp(280px, 32vw, 420px) !important;
  aspect-ratio: 1/1 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.portfolio-grid.schema-v2 .thumb img{
  width:100% !important; height:100% !important; object-fit:cover !important;
}

/* Portrait : texte puis image centrée */
.portfolio-grid.schema-v2 > .portfolio-item.portrait{
  display:flex !important; flex-direction:column !important; align-items:center !important; gap:1rem !important;
}
.portfolio-grid.schema-v2 > .portfolio-item.portrait .thumb{
  width: min(420px, 100%) !important; margin-inline: auto !important;
}

/* Paysage : juxtaposition texte ↔ image */
.portfolio-grid.schema-v2 > .portfolio-item.landscape-left,
.portfolio-grid.schema-v2 > .portfolio-item:nth-of-type(1){
  display:flex !important; flex-direction: row !important; align-items:center !important; gap:2rem !important;
}
.portfolio-grid.schema-v2 > .portfolio-item.landscape-right,
.portfolio-grid.schema-v2 > .portfolio-item:nth-of-type(6){
  display:flex !important; flex-direction: row-reverse !important; align-items:center !important; gap:2rem !important;
}
.portfolio-grid.schema-v2 > .portfolio-item.landscape-left .meta,
.portfolio-grid.schema-v2 > .portfolio-item.landscape-right .meta{ flex:1 1 auto !important; }
.portfolio-grid.schema-v2 > .portfolio-item.landscape-left .thumb,
.portfolio-grid.schema-v2 > .portfolio-item.landscape-right .thumb{
  flex:0 0 auto !important; margin:0 !important;
  width: 420px !important; aspect-ratio: 1/1 !important;
}

/* Mobile : pile de cartes propre */
@media (max-width: 900px){
  .portfolio-grid.schema-v2{ display:flex !important; flex-direction:column !important; gap:1.25rem !important; }
  .portfolio-grid.schema-v2 > .portfolio-item{ display:block !important; width:100% !important; max-width:640px !important; margin:0 auto !important; padding:20px !important; }
  .portfolio-grid.schema-v2 > .portfolio-item.landscape-left,
  .portfolio-grid.schema-v2 > .portfolio-item.landscape-right{ display:block !important; }
  .portfolio-grid.schema-v2 .thumb{ width:min(420px, 100%) !important; margin:.5rem auto 0 !important; aspect-ratio:1/1 !important; }
  .btn-video{ position:static !important; transform:none !important; width:auto !important; max-width:90% !important; padding:.9rem 1.1rem !important; margin:.5rem auto 0 !important; display:inline-block !important; }
}

/* Boutons “Voir une démo” (pc+mobile) */
.btn-demo, .btn-demo-mobile{
  background:#1d1d1d !important; color:#fff !important; font-weight:700 !important;
}
.btn-demo:hover, .btn-demo-mobile:hover{
  background:#ffdd00 !important; color:#111 !important;
}
/* === FINAL FIX — LANDSCAPE BLOCKS (B1 & B6) === */
@media (min-width:901px){
  .portfolio-grid.schema-v2 > .portfolio-item.landscape-left,
  .portfolio-grid.schema-v2 > .portfolio-item.landscape-right{
    display:flex !important;
    flex-direction:row !important;               /* B6 est inversé plus bas */
    align-items:center !important;
    gap:24px !important;
  }
  .portfolio-grid.schema-v2 > .portfolio-item.landscape-right{
    flex-direction:row-reverse !important;       /* image à droite pour B6 */
  }

  .portfolio-grid.schema-v2 > .portfolio-item.landscape-left .meta,
  .portfolio-grid.schema-v2 > .portfolio-item.landscape-right .meta{
    flex:1 1 auto !important;
    max-width: 720px !important;
    text-align:left !important;
  }

  .portfolio-grid.schema-v2 > .portfolio-item.landscape-left .thumb,
  .portfolio-grid.schema-v2 > .portfolio-item.landscape-right .thumb{
    flex:0 0 420px !important;
    width:420px !important;
    height:auto !important;
    aspect-ratio:1/1 !important;                 /* image toujours carrée */
    margin:0 !important;
    border-radius:12px !important;
    overflow:hidden !important;
  }
}

/* Mobile : pile, image carrée centrée, spacing compact */
@media (max-width:900px){
  .portfolio-grid.schema-v2 > .portfolio-item.landscape-left,
  .portfolio-grid.schema-v2 > .portfolio-item.landscape-right{
    display:block !important;
  }
  .portfolio-grid.schema-v2 > .portfolio-item.landscape-left .thumb,
  .portfolio-grid.schema-v2 > .portfolio-item.landscape-right .thumb{
    width:min(420px, 100%) !important;
    height:auto !important;
    aspect-ratio:1/1 !important;
    margin:.5rem auto 0 !important;
    border-radius:12px !important;
    overflow:hidden !important;
  }
  .portfolio-grid.schema-v2 .meta + .btn-video{
    margin-top:.75rem !important;
  }
}
/* === MOBILE FIX — vignettes carrées partout (≤900px) === */
@media (max-width: 900px) {

  /* neutralise tout layout "paysage" resté actif */
  .portfolio-section .portfolio-grid.schema-v2 > .portfolio-item {
    display: block !important;
  }
  .portfolio-section .portfolio-grid.schema-v2 > .portfolio-item.landscape-left,
  .portfolio-section .portfolio-grid.schema-v2 > .portfolio-item.landscape-right {
    display: block !important;
  }

  /* conteneur d'image carré, centré et responsive */
  .portfolio-section .portfolio-grid.schema-v2 .thumb {
    width: min(420px, 100%) !important;
    height: auto !important;              /* la hauteur vient de aspect-ratio */
    aspect-ratio: 1 / 1 !important;       /* ← carré, écrase tout 16/9 */
    margin: .6rem auto 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  /* l'image remplit le carré sans déformation */
  .portfolio-section .portfolio-grid.schema-v2 .thumb img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: inherit !important;
  }

  /* même les cas spéciaux B1/B6 ou .has-video passent en carré */
  .portfolio-section .portfolio-grid.schema-v2 > .portfolio-item.has-video .thumb,
  .portfolio-section .portfolio-grid.schema-v2 > .portfolio-item:nth-of-type(1) .thumb,
  .portfolio-section .portfolio-grid.schema-v2 > .portfolio-item:nth-of-type(6) .thumb {
    aspect-ratio: 1 / 1 !important;
  }
}
/* === MOBILE FIX 2 — tout le monde en carré (≤900px) === */
@media (max-width: 900px) {

  /* Sélecteur très spécifique pour battre toutes les anciennes règles */
  .portfolio-section .portfolio-grid.schema-v2 > .portfolio-item .thumb,
  .portfolio-section .portfolio-grid.schema-v2 > .portfolio-item.portrait .thumb,
  .portfolio-section .portfolio-grid.schema-v2 > .portfolio-item.landscape-left .thumb,
  .portfolio-section .portfolio-grid.schema-v2 > .portfolio-item.landscape-right .thumb,
  .portfolio-section .portfolio-grid.schema-v2 > .portfolio-item:nth-of-type(2) .thumb,
  .portfolio-section .portfolio-grid.schema-v2 > .portfolio-item:nth-of-type(3) .thumb,
  .portfolio-section .portfolio-grid.schema-v2 > .portfolio-item:nth-of-type(5) .thumb {
    width: min(420px, 100%) !important;
    /* le carré vient d’ici : */
    aspect-ratio: 1 / 1 !important;
    /* nettoyage des anciennes contraintes de hauteur */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: .6rem auto 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    display: block !important;
  }

  /* l’image remplit le carré sans déformation */
  .portfolio-section .portfolio-grid.schema-v2 > .portfolio-item .thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: inherit !important;
  }
}
.menu-header .menu-logo-link{ display:inline-block; }
.menu-header .menu-logo-link:focus{ outline: 2px solid #ffdd00; outline-offset: 3px; }

/* === ✅ FAQ sans lignes de séparation === */
section.faq .faq-list {
  display: flex;
  flex-direction: column;
  gap: 2rem; /* espace entre chaque Q/R */
}

section.faq .faq-item h3 {
  margin: 0 0 0.4rem 0 !important; /* petit espace entre question et réponse */
  font-weight: 700;
  line-height: 1.4;
}

section.faq .faq-item p {
  margin: 0 !important; /* colle la réponse à la question */
  line-height: 1.6;
}

/* ❌ Suppression des lignes */
section.faq .faq-item + .faq-item {
  border-top: none !important;
  padding-top: 0;
}
/* === Témoignages — deux blocs noirs côte à côte === */
.testimonials {
  text-align: center;
  padding: 2.5rem 1.5rem;
}

.testimonials h2 {
  margin-bottom: 2rem;
}

/* Conteneur horizontal centré */
.testimonial-container {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 1rem;
}

/* Cartes témoignages */
.testimonial {
  flex: 0 1 480px;
  background: #111;              /* 🔥 noir pour les deux */
  color: #fff;                   /* texte blanc */
  border-radius: 16px;
  padding: 2rem 2.2rem;
  text-align: left;
  line-height: 1.6;
  font-size: 1rem;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* Texte et auteur */
.testimonial p {
  margin-bottom: 0.8rem;
}

.testimonial span {
  display: block;
  font-style: italic;
  font-weight: 600;
  color: #ffdd00; /* accent jaune pour le nom */
}

/* Responsive : pile sur mobile */
@media (max-width: 900px) {
  .testimonial-container {
    flex-direction: column;
    align-items: center;
  }

  .testimonial {
    width: 100%;
    max-width: 520px;
  }
}