:root{
  --bg:#f0fdf4;
  --text:#1a2e22;
  --primary:#2d6a4f;
  --neon:#4ade80;
  --white:#ffffff;
  --glass:rgba(255,255,255,.6);
  --glass-border:rgba(255,255,255,.85);
  --font-heading:'Satoshi',sans-serif;
  --font-body:'Manrope',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;overflow-x:hidden;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
}

/* Lenis helpers */
html.lenis{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto;}

/* Base */
a{color:inherit;}
img,video{max-width:100%;display:block;}
.container{max-width:1200px;margin:0 auto;padding:0 20px;}
section{padding:100px 0;position:relative;z-index:1;overflow:visible;}

/* Background */
.leaf-bg{
  position:fixed;top:0;left:0;width:100%;height:100vh;
  z-index:-1;pointer-events:none;opacity:.05;
  background-image:url('images/téléchargement\ \(3\).jpg');
  background-size:cover;background-position:center;
  filter:saturate(0) contrast(1.2);
}

/* ============================================================
   LOADER (ALL PAGES)
============================================================ */
.loader{
  position:fixed;
  inset:0;
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(800px 500px at 50% 40%, rgba(74,222,128,.22), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85));
  backdrop-filter: blur(10px);
}
.loader-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.loader-circle{
  width:54px;height:54px;
  border-radius:999px;
  border:3px solid rgba(45,106,79,.18);
  border-top-color:var(--primary);
  box-shadow:0 20px 60px rgba(0,0,0,.08);
}
.loader-text{
  font-family:var(--font-heading);
  text-transform:uppercase;
  letter-spacing:3px;
  font-weight:900;
  font-size:.85rem;
  opacity:.85;
}

/* ============================================================
   NAVIGATION + BURGER (STYLÉ)
============================================================ */
.site-nav{
  position:fixed;top:0;left:0;width:100%;
  padding:18px 5%;
  z-index:1000;
  transition:padding .25s ease, background .25s ease, backdrop-filter .25s ease;
}
.site-nav.scrolled{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(12px);
  padding:14px 5%;
  border-bottom:1px solid rgba(0,0,0,.04);
}
.nav-container{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.nav-logo-text{
  font-family:var(--font-heading);
  font-weight:900;
  font-size:1.55rem;
  color:var(--primary);
  text-decoration:none;
  letter-spacing:.5px;
}
.nav-links{display:flex;gap:40px;list-style:none;align-items:center;}
.nav-links a{
  text-transform:uppercase;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:1px;
  text-decoration:none;
  color:var(--text);
  transition:color .2s ease;
}
.nav-links a:hover{color:var(--neon);}
.nav-links a.is-active{color:var(--primary);}

/* Burger */
/* ✅ Burger = vrai menu burger (3 barres identiques) */
.nav-burger{
  display:none;
  width:48px;height:48px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(12px);
  box-shadow:0 18px 45px rgba(0,0,0,.10);
  cursor:pointer;

  align-items:center;
  justify-content:center;
  gap:6px;

  /* IMPORTANT: on empile verticalement */
  flex-direction:column;
}

.nav-burger:focus-visible{
  outline:3px solid rgba(74,222,128,.55);
  outline-offset:3px;
}

.nav-burger .line{
  width:24px;          /* ✅ même largeur partout */
  height:2px;
  background:var(--text);
  border-radius:99px;
  transition:transform .22s ease, opacity .18s ease;
}

/* Animation X à l'ouverture */
.site-nav.is-open .nav-burger .line:nth-child(1){
  transform:translateY(8px) rotate(45deg);
}
.site-nav.is-open .nav-burger .line:nth-child(2){
  opacity:0;
}
.site-nav.is-open .nav-burger .line:nth-child(3){
  transform:translateY(-8px) rotate(-45deg);
}


/* Overlay + Mobile menu */
.nav-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.28);
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
  z-index:1000;
}

.nav-mobile{
  position:fixed;top:0;right:0;height:100vh;
  width:min(420px,90vw);
  background:
    radial-gradient(900px 600px at 20% 20%, rgba(74,222,128,.18), transparent 55%),
    rgba(255,255,255,.90);
  backdrop-filter:blur(16px);
  border-left:1px solid rgba(0,0,0,.06);
  transform:translateX(100%);
  transition:transform .25s ease;
  padding:96px 22px 24px;
  z-index:1001;
}
.nav-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}

/* ✅ OUVERTURE : le panneau revient à l’écran */
.nav-mobile.is-open{
  transform: translateX(0);
}

/* Prépare l'anim GSAP (évite flash) */
.nav-mobile-links a,
.nav-mobile-cta{
  will-change: transform, opacity;
}


.nav-mobile-top{
  position:absolute;
  top:16px;left:22px;right:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.nav-mobile-brand{
  font-family:var(--font-heading);
  font-weight:900;
  letter-spacing:.5px;
  color:var(--primary);
  text-decoration:none;
  font-size:1.2rem;
}
.nav-mobile-sub{
  font-size:.9rem;
  opacity:.7;
  margin-top:2px;
}
.nav-close{
  width:44px;height:44px;border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.75);
  cursor:pointer;
  font-size:18px;
}


.nav-mobile-links{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:20px;}
.nav-mobile-links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px;
  border-radius:16px;
  text-decoration:none;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:.95rem;
  background:rgba(74,222,128,.10);
  border:1px solid rgba(45,106,79,.06);
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.nav-mobile-links a::after{
  content:"→";
  opacity:.55;
}
.nav-mobile-links a:hover{
  transform:translateX(2px);
  background:rgba(74,222,128,.16);
  border-color:rgba(74,222,128,.30);
}
.nav-mobile-links a.is-active{
  background:rgba(45,106,79,.12);
  color:var(--primary);
  border-color:rgba(45,106,79,.25);
}
.nav-mobile-cta{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid rgba(0,0,0,.06);
}
.nav-mobile-cta p{opacity:.75;line-height:1.5;margin-bottom:14px;font-size:.95rem;}
.nav-mobile-cta .btn{width:100%;text-align:center;}

html.menu-open, html.menu-open body{overflow:hidden;}

/* ============================================================
   HERO
============================================================ */
.hero{
  min-height:100vh;
  width:100%;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:84px;
}
.hero-center-wrapper{
  position:relative;z-index:2;
  display:flex;flex-direction:column;
  align-items:center;
  text-align:center;
  width:100%;max-width:1000px;
}
.logo-hero-container{width:250px;height:250px;margin-bottom:60px;}
#main-logo-hero{width:100%;height:100%;object-fit:contain;}
.hero-title-overlay{
  font-family:var(--font-heading);
  font-size:clamp(3.5rem,8vw,8rem);
  line-height:.9;
  color:var(--primary);
  text-transform:uppercase;
  margin-bottom:1.5rem;
}
.hero-subtitle{
  font-size:1.1rem;
  opacity:.85;
  max-width:560px;
  margin:0 auto 3rem;
}

/* Scroll Indicator */
.scroll-indicator{
  position:absolute;bottom:30px;left:50%;
  transform:translateX(-50%);
  display:flex;flex-direction:column;
  align-items:center;
  gap:10px;
  opacity:.6;
  font-size:.8rem;
  letter-spacing:2px;
  text-transform:uppercase;
}
.mouse{
  width:26px;height:40px;
  border:2px solid var(--text);
  border-radius:20px;
  position:relative;
}
.mouse::after{
  content:'';
  position:absolute;top:5px;left:50%;
  transform:translateX(-50%);
  width:4px;height:4px;
  background:var(--text);
  border-radius:50%;
  animation:scrollWheel 2s infinite;
}
@keyframes scrollWheel{
  0%{top:5px;opacity:1;}
  100%{top:20px;opacity:0;}
}

/* ============================================================
   SECTION HEADERS
============================================================ */
.section-header{margin-bottom:60px;}
.section-tag{
  font-family:'Courier New',monospace;
  color:var(--primary);
  background:rgba(74,222,128,.10);
  padding:5px 10px;
  border-radius:6px;
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:1px;
}
.section-title{
  font-family:var(--font-heading);
  font-size:clamp(2.5rem,5vw,4rem);
  color:var(--text);
  margin-top:15px;
  line-height:1.08;
}
.section-lead{
  font-size:1.2rem;
  max-width:800px;
  margin-top:20px;
  opacity:.8;
}

/* ============================================================
   CARDS + BUTTONS
============================================================ */
.glass-card{
  background:rgba(255,255,255,.45);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.85);
  padding:40px;
  border-radius:22px;
  transition:transform .35s ease, box-shadow .35s ease, background .35s ease;
  box-shadow:#88ffbf 0 10px 10px -6px;
}
.glass-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 44px rgba(0,0,0,.06);
  background:rgba(255,255,255,.78);
}

.btn{
  display:inline-block;
  padding:16px 32px;
  background:var(--primary);
  color:var(--white);
  text-decoration:none;
  border-radius:999px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1px;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
  border:1px solid var(--primary);
  box-shadow:#0f1c15 0 10px 30px -10px;
}
.btn:hover{background:var(--neon);color:var(--text);border-color:var(--neon);transform:translateY(-1px);}
.btn-outline{background:transparent;color:var(--text);border:1px solid #ddd;box-shadow:none;}
.btn-light{background:var(--white);color:var(--primary);border-color:var(--white);}
.btn-large{padding:25px 60px;font-size:1.1rem;}
.btn-full{width:100%;text-align:center;cursor:pointer;}

/* ============================================================
   MARQUEE
============================================================ */
.marquee{
  background:var(--primary);
  color:var(--neon);
  padding:20px 0;
  overflow:hidden;
  white-space:nowrap;
  transform:rotate(-2deg) scale(1.05);
  margin:50px 0;
}
.marquee-inner{
  display:inline-block;
  font-family:var(--font-heading);
  font-size:2rem;
  font-weight:900;
  text-transform:uppercase;
}

/* ============================================================
   HOME: SKILLS + DIFF
============================================================ */
.skills-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:30px;
}
.skill-number{font-size:2rem;color:var(--primary);margin-bottom:18px;}
.skill-text{margin-top:12px;opacity:.82;line-height:1.65;}

.diff-section{padding:120px 0;}
.diff-header{text-align:center;margin-bottom:60px;}
.diff-lead{
  font-size:1.5rem;
  margin-top:20px;
  opacity:.9;
  max-width:700px;
  margin-inline:auto;
}
.diff-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:30px;
  margin-bottom:60px;
}
.diff-card{
  background:var(--primary);
  border:1px solid rgba(255,255,255,.10);
  padding:40px;
  border-radius:30px;
  transition:transform .35s ease, box-shadow .35s ease;
  box-shadow:#88ffbf 0 10px 5px -8px;
}
.diff-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.10);}
.diff-icon{font-size:2.5rem;margin-bottom:18px;}
.diff-card h3{font-size:1.35rem;margin-bottom:12px;color:var(--white);}
.diff-card p{font-size:1rem;line-height:1.6;opacity:.8;color:var(--white);}

.diff-footer-box{
  text-align:center;
  background:var(--white);
  padding:30px;
  border-radius:20px;
}
.diff-footer-box p{font-size:1.2rem;color:#000;}
.diff-footer-box strong{color:var(--neon);text-transform:uppercase;}

/* ============================================================
   HOME: LAST PROJECT + CTA
============================================================ */
.last-project{
  background:var(--primary);
  color:var(--white);
  border-radius:50px;
  margin:0 2%;
}
.project-container{padding-bottom:100px;}
.section-title--white{color:var(--white);}
.section-tag--green{color:var(--neon);}

.project-preview{display:grid;gap:80px;}
.project-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:120px;
  align-items:center;
}
.project-preview .project-image{
  overflow:hidden;border-radius:30px;height:400px;background:rgba(0,0,0,.06);
  display:flex;align-items:center;justify-content:center;
}
.project-preview .project-image img{width:100%;height:100%;object-fit:cover;}
.project-content h3{font-size:3rem;margin-bottom:18px;}
.project-content p{opacity:.85;margin-bottom:26px;font-size:1.1rem;line-height:1.65;}

.cta{text-align:center;padding:150px 0;}
.cta h2{
  font-size:clamp(3rem,7vw,6rem);
  margin-bottom:40px;
  color:var(--primary);
}

/* ============================================================
   FOOTER
============================================================ */
footer{
  background:var(--primary);
  color:var(--white);
  padding:80px 0 30px;
  margin-top:50px;
  border-radius:40px 40px 0 0;
}
.footer-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px;}
.footer-socials{list-style:none;margin-top:20px;line-height:2;}
.footer-socials a{opacity:.85;text-decoration:none;}
.footer-socials a:hover{opacity:1;color:var(--neon);}
.footer-bottom{opacity:.65;font-size:.9rem;margin-top:40px;}
.nav-logo{font-family:var(--font-heading);font-weight:900;font-size:1.6rem;}

/* ============================================================
   ABOUT PAGE
============================================================ */
.page-about{padding-top:180px;}
.about-hero{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:80px;
  align-items:center;
  margin-bottom:150px;
}
.about-title{
  font-family:var(--font-heading);
  font-size:clamp(3rem,5vw,4.5rem);
  line-height:1.1;
  margin-bottom:22px;
}
.about-lead{
  font-size:1.3rem;
  line-height:1.6;
  opacity:.85;
  max-width:640px;
}
.project-image-wrapper{width:150%;aspect-ratio:16/9;overflow:hidden;border-radius:22px;}
.growth-image{aspect-ratio:auto;}
.growth-image img{width:100%;height:450px;object-fit:contain;}

@media (max-width:1200px){
  .project-image-wrapper{width:100%;}
}
.about-approach{
  margin-bottom:150px;
  text-align:center;
  max-width:900px;
  margin-inline:auto;
}
.approach-text{font-size:1.8rem;line-height:1.5;font-weight:300;opacity:.9;}

.about-process{margin-bottom:150px;}
.process-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:40px;
}
.process-icon{font-size:4rem;display:block;margin-bottom:18px;}
.process-card h3{color:var(--primary);font-size:1.45rem;margin-bottom:12px;}

.about-tools{
  margin-bottom:150px;
  background:var(--primary);
  border-radius:40px;
  padding:80px 40px;
  color:var(--white);
  text-align:center;
}
.about-tools h2{margin-bottom:34px;}
.tools-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
  max-width:1000px;
  margin-inline:auto;
  margin-top:10px;
}
.tech-pill{
  padding:15px 28px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.26);
  border-radius:999px;
  font-weight:800;
  font-size:1.05rem;
  backdrop-filter:blur(5px);
  transition:transform .2s ease, background .2s ease, color .2s ease;
  cursor:default;
}
.tech-pill:hover{background:var(--white);color:var(--primary);transform:translateY(-4px);}

.about-founder{margin-bottom:100px;}
.founder-card{
  background:var(--white);
  border-radius:40px;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr 1fr;
  box-shadow:0 20px 60px rgba(0,0,0,.06);
  align-items:center;
}
.founder-image{min-height:400px;}
.founder-image img{width:100%;height:100%;object-fit:cover;}
.founder-content{padding:60px;}
.founder-content h2{
  font-family:var(--font-heading);
  font-size:2.5rem;
  margin-bottom:18px;
  color:var(--primary);
}
.founder-content p{font-size:1.1rem;line-height:1.8;margin-bottom:28px;opacity:.9;}

/* ============================================================
   PROJECTS PAGE
============================================================ */
.page-projects{padding-top:180px;}
.projects-filters{
  display:flex;
  gap:16px;
  margin-bottom:80px;
  flex-wrap:wrap;
}
.filter-btn{cursor:pointer;}
.filter-btn.is-active{
  background:var(--primary);
  color:var(--white);
  border-color:var(--primary);
}
.projects-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(420px,1fr));
  gap:50px;
  padding-bottom:100px;
}
.project-item{
  padding:20px;
  text-decoration:none;
  color:inherit;
  display:block;
}
.projects-grid .project-image{
  height:350px;
  overflow:hidden;
  border-radius:15px;
  margin-bottom:25px;
}
.projects-grid .project-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.25,1,.5,1);
}
.project-item:hover img{transform:scale(1.08);}
.project-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.project-tag{
  font-size:.8rem;
  padding:5px 12px;
  background:#e2f3e8;
  border-radius:20px;
  font-weight:800;
}
.project-desc{opacity:.65;margin-top:10px;line-height:1.65;}

/* ============================================================
   PRICING PAGE
============================================================ */
.pricing-hero{padding-top:160px;text-align:center;}
.pricing-lead{max-width:720px;margin:30px auto;opacity:.8;}
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:40px;
}
.pricing-card{display:flex;flex-direction:column;}
.pricing-card--highlight{border:2px solid var(--neon);}
.pricing-card h3{font-size:1.8rem;margin-top:15px;}
.pricing-desc{opacity:.72;margin:15px 0;line-height:1.6;}
.pricing-price{margin:20px 0;}
.pricing-price span{font-size:.9rem;opacity:.65;}
.pricing-price strong{display:block;font-size:2.6rem;font-weight:900;color:var(--primary);}
.pricing-list{line-height:1.9;opacity:.9;padding-left:0;list-style:none;}
.pricing-cta{margin-top:auto;}
.pricing-final-cta{text-align:center;padding:140px 0;}
.pricing-final-cta h2{
  font-size:clamp(2.5rem,6vw,4rem);
  margin-bottom:30px;
  color:var(--primary);
}
.pricing-final-cta p{max-width:600px;margin:0 auto 40px;opacity:.85;}
/* Tarifs : garder "Demander un devis" sur une seule ligne */
.pricing-cta,
.pricing-final-cta .btn{
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* ✅ Boutons tarifs : plus larges, jamais de dépassement */
.pricing-cta{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 18px 28px;      /* un peu plus large */
}
/* ✅ FIX: "Demander un devis" ne déborde plus */
.pricing-cta{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  white-space:nowrap;
  line-height:1;

  /* on réduit la "longueur visuelle" du texte */
  font-size:0.82rem;
  letter-spacing:0.6px;

  /* padding un peu moins large pour laisser de la place au texte */
  padding:16px 22px;
}

/* Sur écrans très étroits (ex: vieux iPhone / petits Android) */
@media (max-width:360px){
  .pricing-cta{
    font-size:0.86rem;
    letter-spacing:0.4px;
    padding:14px 18px;
  }
}


/* Tarifs : cards un peu plus grandes + plus d'air avant le CTA */
.pricing-card{
  padding: 46px;          /* avant: 40px via .glass-card */
  border-radius: 26px;    /* léger boost premium */
}

.pricing-list{
  margin-bottom: 22px;    /* ✅ crée l'espace au-dessus du bouton */
}

/* si tu veux encore + d’espace (optionnel) */
.pricing-price{
  margin: 22px 0;
}


/* ============================================================
   PROJECT DETAIL PAGE
============================================================ */
.project-page{padding-top:150px;}
.project-back{
  display:inline-block;
  margin-bottom:40px;
  font-weight:800;
  color:var(--primary);
  text-decoration:none;
}
.project-back:hover{text-decoration:underline;}
.project-title{font-size:clamp(2.8rem,6vw,4.5rem);}
.project-subtitle{font-size:1.35rem;opacity:.75;max-width:900px;line-height:1.6;}

.project-detail-header{margin-bottom:28px;text-align:left;}
.project-detail-header .section-title{margin-top:10px;}

.project-hero{
  position:relative;
  width:100%;
  height:70vh;
  margin-bottom:80px;
  border-radius:40px;
  overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.12);
}
.parallax-img{
  position:absolute;left:0;top:-5%;
  width:100%;height:110%;
  object-fit:cover;
  will-change:transform;
}

.project-layout{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:100px;
  margin-bottom:100px;
}
.project-info h2{font-size:2.2rem;margin-bottom:18px;}
.project-info p{font-size:1.12rem;line-height:1.85;margin-bottom:28px;opacity:.95;}

.project-meta{padding:30px;}
.project-meta-item{margin-bottom:25px;}
.project-meta-item span{
  display:block;
  font-size:.8rem;
  text-transform:uppercase;
  color:var(--primary);
  font-weight:900;
  letter-spacing:1px;
  margin-bottom:4px;
}
.project-meta-item strong{font-size:1.1rem;}

/* ============================================================
   CONTACT PAGE
============================================================ */
.hero-contact{
  min-height:34vh;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  padding-top:120px;
  padding-bottom:40px;
}
.hero-contact .section-header{margin-bottom:0;text-align:left;}
.section-title--large{font-size:4rem;}
.contact-section{padding-top:0;}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:60px;
}
.contact-info h3{margin-bottom:10px;}
.contact-info p{margin-bottom:25px;opacity:.9;line-height:1.6;}
.contact-link{text-decoration:none;}
.contact-link:hover{text-decoration:underline;color:var(--primary);}
.contact-note{margin-top:50px;font-size:.9rem;opacity:.65;}

.contact-form{display:grid;gap:22px;}
.form-group{display:flex;flex-direction:column;gap:8px;}
.form-group label{font-weight:700;font-size:.95rem;}
.form-group input,
.form-group select,
.form-group textarea{
  padding:14px 16px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.55);
  font-family:inherit;
  font-size:1rem;
  transition:border-color .2s ease, background .2s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--primary);
  background:var(--white);
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:1024px){
  .project-grid{gap:70px;}
  .project-content h3{font-size:2.4rem;}
  .projects-grid{grid-template-columns:repeat(auto-fill,minmax(360px,1fr));}
}

@media (max-width:900px){
  .about-hero{grid-template-columns:1fr;gap:40px;}
  .founder-card{grid-template-columns:1fr;}
  .founder-content{padding:40px;}
  .project-layout{grid-template-columns:1fr;gap:60px;}
}

@media (max-width:768px){
  .nav-links{display:none;}
  .nav-burger{display:inline-flex;}
  .hero-title-overlay{font-size:3.4rem;}
  .logo-hero-container{width:190px;height:190px;margin-bottom:38px;}

  .project-grid{grid-template-columns:1fr;gap:30px;}
  .project-preview .project-image{height:320px;}
  .projects-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .section-title--large{font-size:3rem;}
  .cta{padding:120px 0;}
  .cta h2{margin-bottom:28px;}
  .glass-card{padding:28px;border-radius:18px;}
  .hero-contact{min-height:30vh;padding-top:110px;}
}
/* ============================================================
   TESTIMONIALS (INDEX)
============================================================ */
.testimonials{
  padding-top: 110px;
  padding-bottom: 110px;
}

.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:30px;
}



.testimonial-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}

.testimonial-meta{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.testimonial-name{
  font-weight:900;
  letter-spacing:.2px;
}

.testimonial-role{
  opacity:.75;
  font-size:.95rem;
}

.testimonial-rating{
  margin-left:auto;
  font-weight:900;
  letter-spacing:1px;
  color:var(--primary);
  opacity:.95;
  flex-shrink:0;
}


.testimonial-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}

.testimonial-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:.85rem;
  letter-spacing:.6px;
  text-transform:uppercase;
  background:rgba(74,222,128,.10);
  border:1px solid rgba(45,106,79,.10);
}

.testimonials-cta{
  display:flex;
  justify-content:center;
  margin-top:40px;
}

/* Avatars */
.avatar{
  width:54px;
  height:54px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-family:var(--font-heading);
  font-weight:900;
  color:var(--text);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 14px 30px rgba(0,0,0,.08);
  flex-shrink:0;
}

.avatar--c{ background: linear-gradient(135deg, rgba(74,222,128,.35), rgba(255,255,255,.75)); }
.avatar--y{ background: linear-gradient(135deg, rgba(45,106,79,.25), rgba(255,255,255,.78)); }
.avatar--s{ background: linear-gradient(135deg, rgba(74,222,128,.22), rgba(255,255,255,.86)); }

@media (max-width:768px){
  .testimonial-card{ padding:26px; }
}
/* Cards plus compactes + footer entreprise en bas */
.testimonial-card{
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:16px;
  min-height:260px;
}

.testimonial-quote{
  opacity:.88;
  line-height:1.7;
  font-size:1.02rem;
  margin:0;
  flex:1; /* pousse le footer vers le bas */
}


.testimonial-company{
  font-weight:900;
  letter-spacing:.4px;
  text-transform:uppercase;
  font-size:.85rem;
  color:var(--primary);
  margin:0;
  opacity:.95;
}
/* Supprimer le scroll indicator sur tous les devices tactiles (iPhone + iPad) */
@media (hover: none) and (pointer: coarse) {
  .scroll-indicator {
    display: none !important;
  }
}