:root{--primary:#0A6B5B;--primary-700:#064e43;--accent:#C7A452;--ink:#0b0f1a;--text:#0e1726;--muted:#4b5563;--bg:#f6f7fb;--card:#ffffff;--radius:18px;--shadow:0 12px 30px rgba(2,6,23,.10);--shadow-lg:0 30px 60px rgba(2,6,23,.18)}
*{box-sizing:border-box}html,body{margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.65}
/* Safer fade-in: default visible; JS adds fade only for transitions */
body{opacity:1} body.fade-out{opacity:0;transition:opacity .35s ease}
.container{width:min(1200px,92%);margin-inline:auto}a{text-decoration:none;color:inherit}
/* Skip link (accessibilité WCAG) */
.skip-link{position:absolute;top:-100%;left:16px;z-index:9999;padding:12px 20px;background:var(--primary);color:#fff;border-radius:0 0 12px 12px;font-weight:700;transition:top .2s ease}.skip-link:focus{top:0}
header{position:sticky;top:0;background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid #e5e7eb;z-index:60;transition:background .25s ease,box-shadow .25s ease,transform .25s ease,padding .25s ease}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;gap:10px;align-items:center}.brand img{height:34px}.brand .name{font-weight:900;color:var(--ink)}
nav a{margin:0 10px;font-weight:600;opacity:.9;position:relative;display:inline-block;transition:color .2s ease,opacity .2s ease}
nav a::after{content:"";position:absolute;left:50%;bottom:-8px;width:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--primary));border-radius:2px;transition:width .28s ease,left .28s ease}
nav a:hover{opacity:1;color:var(--primary)}
nav a:hover::after,nav a.active::after{width:80%;left:10%}
nav a.active{opacity:1;color:var(--primary);font-weight:700}
.cta{background:linear-gradient(135deg,var(--primary),var(--primary-700));color:#fff;padding:10px 18px;border-radius:12px;font-weight:700;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}.cta:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.hero{min-height:68vh;display:grid;place-items:center;position:relative;overflow:hidden}.hero .inner{text-align:center;padding:40px 12px}
.hero .inner{position:relative;z-index:1}
.hero.bg .inner{position:relative;z-index:1}h1{font-size:46px;margin:0 0 12px}.sub{color:var(--muted);max-width:820px;margin:0 auto 20px}
.btn{position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s;display:inline-block;background:linear-gradient(135deg,var(--primary),var(--primary-700));color:#fff;padding:12px 22px;border-radius:14px;font-weight:800;margin:6px 8px;box-shadow:var(--shadow);border:none;cursor:pointer}.btn:hover{transform:translateY(-1.5px);box-shadow:var(--shadow-lg)}.btn:active{transform:scale(.97);transition:transform .08s}
/* Ripple effect */
.btn::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--ripple-x,50%) var(--ripple-y,50%),rgba(255,255,255,.3) 0%,transparent 60%);opacity:0;transition:opacity .4s ease}.btn:active::after{opacity:1;transition:opacity 0s}
.btn.outline{background:#fff;color:var(--primary);border:1px solid var(--primary);box-shadow:0 4px 16px rgba(10,107,91,.08)}.btn.outline:hover{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:var(--shadow-lg)}.btn.sm{padding:10px 16px;border-radius:12px;font-weight:700;background:linear-gradient(135deg,var(--accent),#b6913a);color:#0b0f1a}
.section{padding:64px 0}h2{font-size:34px;margin:0 0 14px}h3{font-size:24px;margin:10px 0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.card{background:var(--card);border:1px solid #e5e7eb;border-radius:18px;box-shadow:var(--shadow);overflow:hidden;transition:transform .25s,box-shadow .25s}.card:hover{transform:translateY(-6px) scale(1.01);box-shadow:var(--shadow-lg)}.card img.card-img{width:100%;height:230px;object-fit:cover}
/* Reassurance hover + overlay */
.reassure{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.re-card{position:relative;border-radius:22px;overflow:hidden;border:1px solid #e5e7eb;box-shadow:var(--shadow);background:#fff;min-height:340px;display:flex;flex-direction:column;transform:translateY(0);transition:transform .25s ease, box-shadow .25s ease}
.re-card:hover{transform:translateY(-6px)}.re-card:hover{box-shadow:var(--shadow-lg)}
.re-card .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.15) brightness(.9) opacity(.45);transition:filter .3s ease, transform .3s ease}
.re-card:hover .bg{filter:grayscale(0) brightness(1) opacity(.55);transform:scale(1.03)}
.re-card .content{position:relative;z-index:1;padding:22px;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.alt{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;margin:36px 0}.alt .imgwrap{height:380px;border-radius:18px;overflow:hidden;border:1px solid #e5e7eb;box-shadow:var(--shadow)}.alt .imgwrap img{width:100%;height:100%;object-fit:cover;cursor: pointer}
.alt.reverse{grid-template-columns:1fr 1.2fr}
.footer{background:linear-gradient(180deg,#0f172a 0%,#0a0f1a 100%);color:#cbd5e1;padding:48px 0 24px;margin-top:0}.footer a{color:#cbd5e1;transition:color .2s ease}.footer a:hover{color:#fff}
.footer h4{color:#f1f5f9;margin:0 0 10px;font-size:16px;letter-spacing:.02em}
.footer-brand{margin-bottom:6px}.footer-brand-name{font-size:18px;font-weight:900;color:#f1f5f9;letter-spacing:-.01em}
.footer-contact-line{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:14px}
.footer-contact-line svg{width:16px;height:16px;fill:var(--primary);flex-shrink:0}
.footer-bottom{border-top:1px solid #1e293b;margin-top:24px;padding-top:16px;font-size:13px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;color:#64748b}
.footer-bottom a{color:#94a3b8}

/* Bande CTA pre-footer */
.cta-band{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-700) 100%);padding:48px 0;text-align:center;margin-top:48px}
.cta-band h2{color:#fff;font-size:clamp(24px,3vw,34px);margin:0 0 8px}
.cta-band p{color:rgba(255,255,255,.85);margin:0 0 20px;font-size:16px}
.cta-band .btn{background:#fff;color:var(--primary);font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.2)}.cta-band .btn:hover{background:#f1f5f9;transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,0,0,.25)}
.cta-band .btn.outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6)}.cta-band .btn.outline:hover{background:rgba(255,255,255,.1);border-color:#fff}
.input,textarea.input{width:100%;padding:12px;border:1px solid #d1d5db;border-radius:12px}
/* Contact dropzone */.input-file{border:2px dashed #0b6b5c55;border-radius:14px;background:#f1f5f9;padding:18px;text-align:center;cursor:pointer}.input-file:hover{background:#e9eef4}.file-list{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
  font-size:14px;
  color:#475569;
}

.file-chip{
  padding:4px 10px;
  border-radius:999px;
  background:#e0f2f1;
  border:1px solid #0b6b5c33;
  font-size:12px;
  white-space:nowrap;
}

.review-photos{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}

.review-photos img{
  width:80px;
  height:80px;
  object-fit:cover;
  border-radius:10px;
  box-shadow:0 8px 20px rgba(15,23,42,.12);
  cursor:pointer;
}

.photo-lightbox{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.75);
  z-index:1200;
}

.photo-lightbox.open{
  display:flex;
}

.photo-lightbox-inner{
  position:relative;
  max-width:90vw;
  max-height:90vh;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(15,23,42,.65);
  background:#020617;
}

.photo-lightbox-inner img{
  display:block;
  max-width:100%;
  max-height:90vh;
}

.photo-lightbox-close{
  position:absolute;
  top:10px;
  right:12px;
  border:none;
  border-radius:999px;
  width:32px;
  height:32px;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  background:rgba(15,23,42,.8);
  color:#e5e7eb;
  display:flex;
  align-items:center;
  justify-content:center;
}

.photo-lightbox-close:hover{
  background:#0b6b5c;
  color:#f9fafb;
}

.review-admin-delete{
  margin-left:auto;
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid #fecaca;
  background:#fef2f2;
  color:#b91c1c;
  cursor:pointer;
}

.review-admin-delete:hover{
  background:#fee2e2;
}

/* FAQ */
.faq-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

/* Le cadre s'adapte au contenu, et l'image garde son ratio */
.faq-banner{
  border-radius:14px;
  border:1px solid #e5e7eb;
  overflow:hidden;
  box-shadow:var(--shadow);
}

/* L'image remplit la largeur, garde son ratio, et se centre */
.faq-banner img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
}

/* Questions / réponses inchangées */
.q{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:14px 16px;
  font-weight:700;
  box-shadow:var(--shadow);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:14px 0;
}
.a{
  display:none;
  background:#fafafa;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:14px 16px;
  margin:-8px 0 12px;
}
.q.open + .a{
  display:block;
}

/* Avis */.thumb-list{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}.thumb{height:70px;width:70px;border-radius:10px;overflow:hidden;border:1px solid #e5e7eb}.thumb img{width:100%;height:100%;object-fit:cover}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:10001}.modal.open{display:flex}.modal .sheet{width:min(720px,92%);background:#fff;border-radius:18px;box-shadow:0 30px 60px rgba(2,6,23,.25);padding:20px}.drop{border:2px dashed #0b6b5c55;border-radius:14px;background:#f1f5f9;padding:18px;text-align:center;cursor:pointer}
/* Lightbox */.lb{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:10002}.lb.open{display:flex}.lb img{max-width:92vw;max-height:90vh;border-radius:12px}.lb .nav{position:absolute;top:50%;width:100%;display:flex;justify-content:space-between;transform:translateY(-50%)}.lb .btn{background:#ffffff22;padding:10px 14px;border-radius:999px}
/* Admin */.badge-admin{display:none;position:fixed;bottom:14px;right:14px;background:#0b6b5c;color:#fff;border-radius:999px;padding:8px 14px;font-weight:700;box-shadow:0 30px 60px rgba(2,6,23,.25);z-index:10010}
@media(max-width:1024px){.faq-grid{grid-template-columns:1fr 1fr}}@media(max-width:640px){.grid-3,.faq-grid{grid-template-columns:1fr} h1{font-size:36px} .re-card{min-height:260px}}


/* ===== MODULE GALERIE POUR PAGE RÉALISATIONS (AJOUT SEULEMENT) ===== */
.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  width: 100%;
  /* Rétrécit le cadre sur desktop (style + proche mobile) */
  max-width: 920px;
  margin-inline: auto;
}

.project-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px;
  border: 1px solid #e5e7eb;
  box-shadow: var(--shadow);
  transition: transform .25s, box-shadow .25s;
}

.project-card:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: var(--shadow-lg);
}

.project-title {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--primary);
}

.project-subtitle {
  font-size: 17px;
  line-height: 1.5;
  color: #334155;
  max-width: 720px;
  margin-bottom: 14px;
}

.project-main-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

/* Contrainte desktop pour la page Réalisations uniquement */
body[data-page="projets"] .project-main-wrapper{
  max-width: 820px;
  margin-inline: auto;
}

.project-main-img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: var(--shadow);
  display: block;
  cursor: pointer;
}

.project-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #ffffffcc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  box-shadow: var(--shadow);
  z-index: 2;
  transition: background .2s;
}

.project-nav:hover {
  background: #ffffff;
}

.project-nav.prev { left: 12px; }
.project-nav.next { right: 12px; }

.project-gallery {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-top: 10px;
  scroll-behavior: smooth;
}

.project-gallery img {
  height: 105px;
  width: auto;
  border-radius: 12px;
  box-shadow: var(--shadow);
  border: 1px solid #e5e7eb;
  flex-shrink: 0;
  cursor: pointer;
  opacity: .7;
  transition: opacity .2s, transform .2s;
}

.project-gallery img.is-active {
  opacity: 1;
  transform: scale(1.03);
  outline: 2px solid var(--primary);
  box-shadow: var(--shadow-lg);
}

@media (max-width: 640px) {
  .project-main-wrapper {
    margin-inline: -4px;
  }
  .project-nav {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
  .project-gallery img {
    height: 90px;
  }
}

/* FAQ intro text */
.faq-intro{
  max-width:720px;
  margin:0 auto 32px;
  font-size:15px;
  color:var(--muted);
}


/* Section "Nos dernières réalisations" : grille 3 colonnes */
.real3-wrapper{
  margin-top:40px;
}
.real3-title{
  font-size:26px;
  margin:0 0 16px;
  color:var(--ink);
}
.real3-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.real3-card{
  background:var(--card);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  transition:transform .25s ease,box-shadow .25s ease;
}
.real3-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
}
.real3-img{
  width:100%;
  height:210px;
  overflow:hidden;
}
.real3-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.real3-body{
  padding:14px 18px 18px;
}
.real3-body h3{
  margin:0 0 6px;
  font-size:18px;
}
.real3-body p{
  margin:0;
  font-size:15px;
  color:var(--muted);
}

@media(max-width:960px){
  .real3-grid{
    grid-template-columns:1fr;
  }
}




/* === OVERRIDES: HERO BRICK WALL + HEADER TEXT REVEAL === */

/* Hero: replace photo by animated brick wall (7 steps, then static) */
.hero.bg {
  position:relative;
  min-height:68vh;
  overflow:hidden;
  background:none !important;
}

.hero.bg::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:url("../img/hero-bg-1.jpg");
  background-size:260px auto;
  background-repeat:repeat;
  background-position:0 100%;
  clip-path:inset(100% 0 0 0);
  animation:heroWallBuild 3.5s steps(7,end) forwards;
  z-index:0;
}

/* keep content above bricks */
.hero .inner {
  position:relative;
  z-index:1;
}

/* Header text + nav + CTA appear progressively (only when JS active) */
body.js header .brand img,
body.js header .brand .name,
body.js header nav a,
body.js header .cta {
  opacity:0;
  transform:translateY(-6px);
  animation:heroHeaderText 0.7s ease forwards;
}

body.js header .brand img { animation-delay:0.2s; }
body.js header .brand .name { animation-delay:0.5s; }
body.js header nav a:nth-child(1) { animation-delay:0.7s; }
body.js header nav a:nth-child(2) { animation-delay:0.85s; }
body.js header nav a:nth-child(3) { animation-delay:1.0s; }
body.js header nav a:nth-child(4) { animation-delay:1.15s; }
body.js header nav a:nth-child(5) { animation-delay:1.3s; }
body.js header nav a:nth-child(6) { animation-delay:1.45s; }
body.js header .cta { animation-delay:1.7s; }

@keyframes heroWallBuild {
  0%   { clip-path:inset(100% 0 0 0); }
  100% { clip-path:inset(0 0 0 0); }
}

@keyframes heroHeaderText {
  0%   { opacity:0; transform:translateY(-6px); }
  100% { opacity:1; transform:translateY(0); }
}



/* Hero main title, subtitle & buttons reveal progressively with bricks */
body.js .hero .inner h1,
body.js .hero .inner .sub,
body.js .hero .inner .btn {
  opacity: 0;
  transform: translateY(8px);
  animation: heroHeroText 0.7s ease forwards;
}

/* Staggered delays so it follows the brick wall animation */
body.js .hero .inner h1 { animation-delay: 1.1s; }
body.js .hero .inner .sub { animation-delay: 1.3s; }
/* First CTA button */
body.js .hero .inner .btn:nth-of-type(1) { animation-delay: 1.5s; }
/* Second CTA button */
body.js .hero .inner .btn:nth-of-type(2) { animation-delay: 1.7s; }

@keyframes heroHeroText {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}



/* Global section content reveal on page load (all pages) */
body.js .section > * {
  opacity: 0;
  transform: translateY(8px);
  animation: sectionReveal 0.55s ease forwards;
}

/* Light stagger for major blocks inside sections */
body.js .section > *:nth-child(1) { animation-delay: 0.25s; }
body.js .section > *:nth-child(2) { animation-delay: 0.35s; }
body.js .section > *:nth-child(3) { animation-delay: 0.45s; }
body.js .section > *:nth-child(4) { animation-delay: 0.55s; }

@keyframes sectionReveal {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}


/* === En-tête "Nos Services" sous forme de cadre / header === */

.services-hero {
  margin-top: 40px;
}

.services-hero-card {
  position: relative;
  padding: 32px 32px;
  border-radius: 24px;
  background: radial-gradient(circle at top left, #ffffff 0%, #f9fafb 35%, #f3f4f6 100%);
  box-shadow: var(--shadow-lg);
}

.services-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.services-heading {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.services-eyebrow {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.services-heading h1 {
  margin: 0;
  font-size: clamp(2.2rem, 3vw, 2.8rem);
  color: var(--text-strong);
}

.services-subtitle {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-700);
}

.services-text {
  margin-top: 18px;
  max-width: 780px;
  font-size: 0.98rem;
  color: var(--muted-strong);
}

/* Badge maison animé, aligné à droite */

.services-badge {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.badge-circle {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: radial-gradient(circle at 25% 20%, #ffffff, var(--accent));
  box-shadow: 0 10px 26px rgba(2,6,23,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: badge-float 3.3s ease-in-out infinite;
}

.badge-house {
  position: relative;
  width: 60%;
  height: 60%;
}

/* Corps de la maison */
.house-body {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 8%;
  height: 42%;
  background: var(--primary-700);
  border-radius: 5px;
  box-shadow: 0 4px 10px rgba(15,23,42,.45);
}

/* Porte */
.house-body::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20%;
  height: 55%;
  border-radius: 3px 3px 0 0;
  background: #f1f5f9;
}

/* Toit */
.house-roof {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 42%;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 22px solid var(--primary);
  transform-origin: center bottom;
  animation: roof-tilt 3.3s ease-in-out infinite;
}

/* Animation de flottement */
@keyframes badge-float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

/* Léger balancement du toit */
@keyframes roof-tilt {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}

@media (max-width: 768px) {
  .services-hero-card {
    padding: 24px 20px;
  }
  .services-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .services-badge {
    align-self: flex-end;
    width: 60px;
    height: 60px;
  }
  .services-heading h1 {
    font-size: 2rem;
  }
}


/* === AVIS : HERO ANIMÉ CARDS === */
.reviews-hero{
  position:relative;
  background:linear-gradient(135deg,#e5f3ef,#f9fafb);
  border-radius:32px;
  padding:32px 40px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(15,23,42,.12);
}
.reviews-hero::before,
.reviews-hero::after{
  content:"";
  position:absolute;
  border-radius:999px;
  background:radial-gradient(circle at 30% 30%,rgba(10,107,91,.35),transparent 65%);
  opacity:.35;
}
.reviews-hero::before{
  width:260px;
  height:260px;
  left:-60px;
  bottom:-80px;
}
.reviews-hero::after{
  width:320px;
  height:320px;
  right:-80px;
  top:-120px;
}
.reviews-hero .reviews-card{
  position:relative;
  background:#ffffff;
  border-radius:24px;
  padding:18px 22px;
  box-shadow:0 18px 40px rgba(15,23,42,.18);
  max-width:320px;
}
.reviews-hero .reviews-card-main{
  animation:reviewsFloatMain 8s ease-in-out infinite;
}
.reviews-hero .reviews-card-secondary{
  position:absolute;
  right:32px;
  bottom:26px;
  max-width:280px;
  opacity:.96;
  animation:reviewsFloatSecondary 9s ease-in-out infinite;
}
.reviews-hero .reviews-stars{
  color:#fbbf24;
  font-size:18px;
  letter-spacing:2px;
  margin-bottom:8px;
}
.reviews-hero .reviews-text{
  font-size:15px;
  color:#0f172a;
}
@keyframes reviewsFloatMain{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}
@keyframes reviewsFloatSecondary{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(8px);}
}
@media(max-width:900px){
  .reviews-hero{
    padding:24px;
  }
  .reviews-hero .reviews-card-secondary{
    position:relative;
    right:auto;
    bottom:auto;
    margin-top:16px;
  }
}

/* === AVIS : SYNTHÈSE & LISTE === */
.reviews-summary{
  margin-top:3rem;
  background:#ffffff;
  border-radius:28px;
  padding:24px 28px;
  box-shadow:0 20px 55px rgba(15,23,42,.08);
}
.reviews-summary .summary-main{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:24px;
  align-items:stretch;
}
.summary-left{
  display:flex;
  align-items:center;
  gap:14px;
}
.summary-note{
  font-size:40px;
  font-weight:800;
  color:var(--primary);
  line-height:1;
}
.summary-note .star-symbol{
  font-size:26px;
  margin-left:4px;
  color:#fbbf24;
}
.summary-text p{
  margin:0;
}
.summary-sub{
  font-size:14px;
  color:#6b7280;
}
.summary-bars{
  flex:1;
  min-width:260px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.bar-row{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
}
.bar-label{
  width:70px;
  color:#4b5563;
}
.bar-track{
  flex:1;
  height:7px;
  border-radius:999px;
  background:#e5e7eb;
  overflow:hidden;
}
.bar-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#0ea5e9,#0f766e);
}
.bar-value{
  width:18px;
  text-align:right;
  font-weight:600;
  color:#4b5563;
}

.summary-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-top:18px;
  flex-wrap:wrap;
}
.summary-footer .filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.filter-btn{
  border-radius:999px;
  border:1px solid rgba(10,107,91,.18);
  padding:7px 14px;
  font-size:14px;
  font-weight:600;
  background:#ffffff;
  color:var(--primary);
  cursor:pointer;
  transition:background .2s,color .2s,transform .12s,box-shadow .12s,border-color .2s;
}
.filter-btn:hover{
  background:rgba(10,107,91,.06);
  border-color:rgba(10,107,91,.35);
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(15,118,110,.18);
}
.filter-btn.active{
  background:var(--primary);
  color:#ffffff;
  border-color:var(--primary);
  box-shadow:0 8px 22px rgba(15,118,110,.36);
}
.summary-footer .btn{
  border-radius:999px;
}

/* AVIS : GRILLE & CARTES */
.reviews-grid{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
}
.review-card{
  background:#ffffff;
  border-radius:24px;
  padding:18px 22px;
  box-shadow:0 18px 40px rgba(15,23,42,.08);
}
.review-header h3{
  margin:0 0 8px;
  font-size:18px;
  color:#0f172a;
}
.review-rating{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  margin-bottom:4px;
}
.review-rating .stars{
  color:#fbbf24;
  letter-spacing:1px;
}
.review-rating .score{
  color:#4b5563;
}
.review-meta{
  margin:0 0 8px;
  font-size:13px;
  color:#6b7280;
}
.review-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:8px;
}
.review-tags .tag{
  font-size:11px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(16,185,129,.08);
  color:#065f46;
  border:1px solid rgba(16,185,129,.4);
  font-weight:500;
}
.review-comment{
  font-size:14px;
  color:#111827;
}
.no-reviews{
  font-size:14px;
  color:#6b7280;
}

/* AVIS : FORMULAIRE & MODALE */
.rv-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.rv-form .field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.rv-form .label{
  font-size:14px;
  font-weight:600;
  color:#111827;
}
.rv-form .input{
  border-radius:12px;
  border:1px solid #d1d5db;
  padding:10px 12px;
  font-size:14px;
}
.rv-form .input:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 1px rgba(10,107,91,.3);
}
.rv-form textarea.input{
  resize:vertical;
}
.rating-input{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.rating-input label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  cursor:pointer;
}
.rating-input input[type="radio"]{
  accent-color:var(--primary);
}
.rating-input span{
  font-size:15px;
}
.rv-tags{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px 14px;
  font-size:13px;
}
.rv-tags label{
  display:flex;
  align-items:center;
  gap:8px;
}
.rv-tags input[type="checkbox"]{
  accent-color:var(--primary);
}

/* Modal overflow fix pour petits écrans */
.modal .sheet{
  max-height:90vh;
  overflow-y:auto;
}

/* Simple upload field (optionnel) */
.upload-field{
  margin-top:4px;
}
.upload-field input[type="file"]{
  font-size:13px;
}


/* Hero maison simple à droite */
.hero.bg{
  background:#f5f7fb;
}

.hero.bg::before{
  content:none;
}

.hero-city svg{
  display:block;
  width:100%;
  height:auto;
}

/* ligne de sol */
.hh-ground{
  stroke:var(--accent);
  stroke-width:4;
  stroke-linecap:round;
}

/* corps + toit */
.hh-body,
.hh-roof,
.hh-roof-base{
  fill:none;
  stroke:var(--primary);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* porte */
.hh-door{
  fill:var(--primary);
}

/* fenêtres */
.hh-window,
.hh-roof-window{
  fill:#facc15;
}


.hero .inner.hero-layout{
  max-width:1200px;
  width:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:48px;
}

.hero-copy{
  max-width:560px;
  margin:0 auto 0 0;
  text-align:left;
}

.hero-city{
  flex:1;
  max-width:360px;
}

@media (max-width:900px){
  .hero .inner.hero-layout{
    flex-direction:column;
    align-items:flex-start;
    gap:32px;
  }
  .hero-city{
    max-width:320px;
    align-self:center;
  }
}


/* === HERO ACCUEIL : briques + maison + tagline synchro === */

/* On remplace le gros fond photo par un bandeau sombre pro */
body[data-page="index"] .hero{
  background:linear-gradient(160deg,#0b1a2e 0%,#0f2a3e 35%,#0a3d35 70%,var(--primary-700) 100%) !important;
}

body[data-page="index"] .hero::before{
  content:"" !important;
  position:absolute !important;
  inset:0;
  opacity:.04;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px) !important;
  background-size:50px 50px;
  pointer-events:none;
}

.hero .inner.hero-layout{
  max-width:1200px;
  width:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:48px;
  padding:40px 12px;
  text-align:left;
}

.hero-copy{
  position:relative;
  max-width:560px;
  margin:0 auto 0 0;
  padding:32px 28px;
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}

/* Image de briques uniquement dans la carte de gauche */
.hero-copy::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("../img/hero-bg-2.jpg");
  background-size:cover;
  background-position:center;
  z-index:0;
  clip-path:inset(100% 0 0 0); /* masqué en haut au début */
}

.hero-copy::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.20);
  z-index:1;
}

.hero-copy > *{
  position:relative;
  z-index:2;
}

/* Texte + maison : arrivent ensemble */
.hero-copy,
.hero-city{
  opacity:0;
  transform:translateY(24px);
}

body.js .hero-copy,
body.js .hero-city{
  animation:heroIn .8s ease-out 0s forwards;
}

/* Briques : remplissage par "tas" de bas en haut, image fixe */
body.js .hero-copy::before{
  animation:bricksReveal 1.1s steps(6,end) forwards;
}

@keyframes heroIn{
  from{opacity:0;transform:translateY(40px);}
  to{opacity:1;transform:translateY(0);}
}

@keyframes bricksReveal{
  0%{clip-path:inset(100% 0 0 0);}
  100%{clip-path:inset(0 0 0 0);}
}

/* Maison tracée (même fenêtre de temps) */

.hero-city svg .hh-ground,
.hero-city svg .hh-roof,
.hero-city svg .hh-roof-base,
.hero-city svg .hh-body,
.hero-city svg .hh-door{
  stroke-dasharray:260;
  stroke-dashoffset:260;
}

.hero-city svg .hh-body,
.hero-city svg .hh-door,
.hero-city svg .hh-window,
.hero-city svg .hh-roof-window{
  fill-opacity:0;
}

body.js .hero-city svg .hh-ground,
body.js .hero-city svg .hh-roof-base{
  animation:houseStroke .9s ease forwards;
}

body.js .hero-city svg .hh-roof{
  animation:houseStroke 1s ease forwards;
}

body.js .hero-city svg .hh-body{
  animation:houseStroke 1s ease forwards,
             houseFill   .4s ease .4s forwards;
}

body.js .hero-city svg .hh-door{
  animation:houseStroke .9s ease forwards,
             houseFill   .4s ease .45s forwards;
}

body.js .hero-city svg .hh-window,
body.js .hero-city svg .hh-roof-window{
  animation:houseFill .4s ease .5s forwards;
}

@keyframes houseStroke{
  to{stroke-dashoffset:0;}
}

@keyframes houseFill{
  to{fill-opacity:1;}
}

/* Tagline sous la maison : écriture rapide lettre par lettre */

.hero-tagline{
  margin-top:14px;
  font-size:1rem;
  text-align:center;
  letter-spacing:.03em;
  font-weight:500;
  color:rgba(255,255,255,.85);
}
body[data-page="index"] .hero-tagline{color:rgba(255,255,255,.85) !important}

.hero-tagline span{
  display:inline-block;
  opacity:0;
  transform:translateY(4px);
}

body.js .hero-tagline{
  /* la ligne apparaît dès le début de l'anim */
  animation:taglineIn .3s ease-out .1s forwards;
}

body.js .hero-tagline span{
  animation:letterIn .04s ease forwards;
}

body.js .hero-tagline span:nth-child(1){animation-delay:0.15s}
body.js .hero-tagline span:nth-child(2){animation-delay:0.18s}
body.js .hero-tagline span:nth-child(3){animation-delay:0.21s}
body.js .hero-tagline span:nth-child(4){animation-delay:0.24s}
body.js .hero-tagline span:nth-child(5){animation-delay:0.27s}
body.js .hero-tagline span:nth-child(6){animation-delay:0.30s}
body.js .hero-tagline span:nth-child(7){animation-delay:0.33s}
body.js .hero-tagline span:nth-child(8){animation-delay:0.36s}
body.js .hero-tagline span:nth-child(9){animation-delay:0.39s}
body.js .hero-tagline span:nth-child(10){animation-delay:0.42s}
body.js .hero-tagline span:nth-child(11){animation-delay:0.45s}
body.js .hero-tagline span:nth-child(12){animation-delay:0.48s}
body.js .hero-tagline span:nth-child(13){animation-delay:0.51s}
body.js .hero-tagline span:nth-child(14){animation-delay:0.54s}
body.js .hero-tagline span:nth-child(15){animation-delay:0.57s}
body.js .hero-tagline span:nth-child(16){animation-delay:0.60s}
body.js .hero-tagline span:nth-child(17){animation-delay:0.63s}
body.js .hero-tagline span:nth-child(18){animation-delay:0.66s}
body.js .hero-tagline span:nth-child(19){animation-delay:0.69s}
body.js .hero-tagline span:nth-child(20){animation-delay:0.72s}
body.js .hero-tagline span:nth-child(21){animation-delay:0.75s}
body.js .hero-tagline span:nth-child(22){animation-delay:0.78s}
body.js .hero-tagline span:nth-child(23){animation-delay:0.81s}
body.js .hero-tagline span:nth-child(24){animation-delay:0.84s}
body.js .hero-tagline span:nth-child(25){animation-delay:0.87s}
body.js .hero-tagline span:nth-child(26){animation-delay:0.90s}
body.js .hero-tagline span:nth-child(27){animation-delay:0.93s}
body.js .hero-tagline span:nth-child(28){animation-delay:0.96s}
body.js .hero-tagline span:nth-child(29){animation-delay:0.99s}
body.js .hero-tagline span:nth-child(30){animation-delay:1.02s}
body.js .hero-tagline span:nth-child(31){animation-delay:1.05s}
body.js .hero-tagline span:nth-child(32){animation-delay:1.08s}
body.js .hero-tagline span:nth-child(33){animation-delay:1.11s}
body.js .hero-tagline span:nth-child(34){animation-delay:1.14s}
body.js .hero-tagline span:nth-child(35){animation-delay:1.17s}
body.js .hero-tagline span:nth-child(36){animation-delay:1.20s}
body.js .hero-tagline span:nth-child(37){animation-delay:1.23s}
body.js .hero-tagline span:nth-child(38){animation-delay:1.26s}
body.js .hero-tagline span:nth-child(39){animation-delay:1.29s}
body.js .hero-tagline span:nth-child(40){animation-delay:1.32s}
body.js .hero-tagline span:nth-child(41){animation-delay:1.35s}
body.js .hero-tagline span:nth-child(42){animation-delay:1.38s}
body.js .hero-tagline span:nth-child(43){animation-delay:1.41s}
body.js .hero-tagline span:nth-child(44){animation-delay:1.44s}
body.js .hero-tagline span:nth-child(45){animation-delay:1.47s}
body.js .hero-tagline span:nth-child(46){animation-delay:1.50s}
body.js .hero-tagline span:nth-child(47){animation-delay:1.53s}
body.js .hero-tagline span:nth-child(48){animation-delay:1.56s}
body.js .hero-tagline span:nth-child(49){animation-delay:1.59s}
body.js .hero-tagline span:nth-child(50){animation-delay:1.62s}
body.js .hero-tagline span:nth-child(51){animation-delay:1.65s}
body.js .hero-tagline span:nth-child(52){animation-delay:1.68s}
body.js .hero-tagline span:nth-child(53){animation-delay:1.71s}
body.js .hero-tagline span:nth-child(54){animation-delay:1.74s}
body.js .hero-tagline span:nth-child(55){animation-delay:1.77s}
body.js .hero-tagline span:nth-child(56){animation-delay:1.80s}
body.js .hero-tagline span:nth-child(57){animation-delay:1.83s}
body.js .hero-tagline span:nth-child(58){animation-delay:1.86s}
body.js .hero-tagline span:nth-child(59){animation-delay:1.89s}
body.js .hero-tagline span:nth-child(60){animation-delay:1.92s}
body.js .hero-tagline span:nth-child(61){animation-delay:1.95s}
body.js .hero-tagline span:nth-child(62){animation-delay:1.98s}
body.js .hero-tagline span:nth-child(63){animation-delay:2.01s}
body.js .hero-tagline span:nth-child(64){animation-delay:2.04s}
body.js .hero-tagline span:nth-child(65){animation-delay:2.07s}
body.js .hero-tagline span:nth-child(66){animation-delay:2.10s}
body.js .hero-tagline span:nth-child(67){animation-delay:2.13s}
body.js .hero-tagline span:nth-child(68){animation-delay:2.16s}
body.js .hero-tagline span:nth-child(69){animation-delay:2.19s}
body.js .hero-tagline span:nth-child(70){animation-delay:2.22s}
body.js .hero-tagline span:nth-child(71){animation-delay:2.25s}
body.js .hero-tagline span:nth-child(72){animation-delay:2.28s}
body.js .hero-tagline span:nth-child(73){animation-delay:2.31s}
body.js .hero-tagline span:nth-child(74){animation-delay:2.34s}
body.js .hero-tagline span:nth-child(75){animation-delay:2.37s}
body.js .hero-tagline span:nth-child(76){animation-delay:2.40s}
body.js .hero-tagline span:nth-child(77){animation-delay:2.43s}
body.js .hero-tagline span:nth-child(78){animation-delay:2.46s}
body.js .hero-tagline span:nth-child(79){animation-delay:2.49s}
body.js .hero-tagline span:nth-child(80){animation-delay:2.52s}


@keyframes taglineIn{
  to{opacity:1;}
}

@keyframes letterIn{
  to{opacity:1;transform:translateY(0);}
}



/* === HEADER COMPACT QUAND ON DESCEND === */
/* Même header, mais plus discret après un léger scroll */

header.header-compact{
  padding-top:4px;
  padding-bottom:4px;
  background:rgba(15,23,42,.96);
  box-shadow:0 12px 30px rgba(15,23,42,.45);
  transform:translateY(-4px);
}

header.header-compact .brand .name{
  color:#f9fafb;
}

header.header-compact nav a{
  color:#e5e7eb;
}

header.header-compact .cta{
  box-shadow:none;
}


/* === HEADER SCROLL ANIMATION (HOME + AUTRES PAGES) === */
header.is-scrolled{
  background: rgba(15,23,42,.9);
  box-shadow: 0 12px 30px rgba(15,23,42,.35);
}

header.is-scrolled .nav{
  padding: 6px 0;
}

header.is-scrolled .brand .name{
  color: #f9fafb;
}

header.is-scrolled nav a{
  color: #e5e7eb;
}


/* === FIX CADRAGE IMAGE VISAGE (ACCUEIL) === */
.about3-card img{
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.about3-card img.face{
  object-position: center 58%;
}


/* ===== MOBILE BURGER MENU (GLOBAL) ===== */
.nav-toggle{display:none}
.burger{display:none}

/* Desktop: rien ne change */
@media (max-width: 768px){

  /* afficher le bouton burger */
  .burger{
    display:flex;
    flex-direction:column;
    gap:6px;
    cursor:pointer;
    padding:10px;
    border-radius:12px;
    margin-left:auto;
  }
  .burger span{
    width:26px;
    height:3px;
    background:#0f2437;
    border-radius:2px;
    transition:transform .25s ease,opacity .2s ease;
  }

  /* cacher la nav inline sur mobile (on la met en overlay) */
  header .nav > nav{
    display:none;
  }

  /* garder le bouton devis visible */
  header .nav .cta{
    margin-left:8px;
    white-space:nowrap;
  }

  /* overlay menu quand ouvert */
  .nav-toggle:checked + .burger + nav{
    display:flex !important;
    position:fixed;
    inset:0;
    background:rgba(15,36,55,.96);
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:18px;
    z-index:9999;
    padding:24px 16px;
  }
  .nav-toggle:checked + .burger + nav a{
    color:#fff;
    font-size:22px;
    margin:0;
    opacity:1;
  }
  .nav-toggle:checked + .burger + nav a::after{background:#fff}

  /* animer le burger en X */
  .nav-toggle:checked + .burger span:nth-child(1){
    transform:translateY(9px) rotate(45deg);
  }
  .nav-toggle:checked + .burger span:nth-child(2){
    opacity:0;
  }
  .nav-toggle:checked + .burger span:nth-child(3){
    transform:translateY(-9px) rotate(-45deg);
  }

  /* rendre le burger toujours visible au-dessus de l’overlay */
  .nav-toggle:checked + .burger{
    position:fixed;
    top:10px;
    right:12px;
    z-index:10000;
  }
  .nav-toggle:checked + .burger span{background:#fff}
}




/* ===== MOBILE BURGER MENU (PATCH VISIBILITY) ===== */
@media (max-width: 768px){
  /* overlay: force full viewport + solid background for contrast */
  .nav-toggle:checked + .burger + nav{
    width:100vw;
    height:100vh;
    left:0;
    top:0;
    background:#0f2437;            /* solid (no white-on-white) */
    padding-top:80px;              /* avoid safe-area/top bar */
  }

  /* make links clearly readable */
  .nav-toggle:checked + .burger + nav a{
    color:#ffffff !important;
    text-shadow:0 1px 2px rgba(0,0,0,.25);
  }

  /* hide the CTA button when menu is open (cleaner) */
  .nav-toggle:checked + .burger + nav + .cta{
    display:none !important;
  }
}


/* ===== MOBILE HEADER CTA FIT FIX ===== */
@media (max-width: 768px){

  /* Make header row fit: logo + burger + CTA */
  header .container.nav{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
  }

  /* Prevent brand from eating all space */
  header .brand{
    min-width:0;
    display:flex;
    align-items:center;
    gap:10px;
    flex:1 1 auto;
  }

  /* On very small screens, hide long brand name */
  header .brand .name{
    display:none;
  }

  /* Keep logo readable */
  header .brand img{
    height:34px;
    width:auto;
  }

  /* Burger stays visible */
  .burger{
    margin-left:0;
    flex:0 0 auto;
  }

  /* CTA button should never be clipped */
  header .cta{
    flex:0 0 auto;
    padding:10px 12px;
    font-size:14px;
    border-radius:14px;
    white-space:nowrap;
  }
}




/* ===== MOBILE LAYOUT FIX (GLOBAL GRIDS + CONTACT) ===== */
@media (max-width: 768px){

  /* All 2/3-column grids become 1 column */
  .grid-2,
  .grid-3{
    grid-template-columns: 1fr !important;
  }

  /* Contact page map: keep it neat */
  [data-page="contact"] iframe{
    width:100% !important;
    height:220px !important;
    border-radius:14px;
  }
}


/* =========================================================
   HOTFIX FINAL – Mobile layout (Reassure cards + About3 cards)
   (ajout en fin de fichier pour ne rien casser)
   ========================================================= */

/* --- Section "Labels / Chiffres clés / Témoignages" --- */
@media (max-width: 768px){
  .reassure{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .re-card{
    min-height: 240px;
    border-radius: 20px;
  }

  .re-card .bg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .re-card .content{
    padding: 18px 16px !important;
  }

  .re-card h3{
    font-size: 20px;
    line-height: 1.2;
    margin-bottom: 10px;
  }

  .re-card ul, .re-card p{
    font-size: 14px;
    line-height: 1.45;
  }

  .re-card .re-actions .btn{
    width: 100%;
    justify-content: center;
  }
}

/* --- Section "Une équipe engagée" : tailles homogènes + visage visible --- */
.about3-section .about3-grid{align-items:stretch}
.about3-section .about3-grid > .about3-card{height:100%;display:flex;flex-direction:column}

.about3-section .about3-grid > .about3-card img{
  width:100%;
  height:250px;                 /* un poil plus haut pour voir la tête */
  object-fit:cover !important;
  object-position:center 18% !important;
}

/* Carte 3 : cadrage groupe un peu plus bas */
.about3-section .about3-grid > .about3-card:nth-child(3) img{
  object-position:center 40% !important;
}

@media (max-width: 768px){
  .about3-section .about3-grid > .about3-card img{
    height:230px;
    object-position:center 18% !important;
  }
  .about3-section .about3-grid > .about3-card:nth-child(3) img{
    object-position:center 45% !important;
  }
}


/* ===== Clickable photos: use hand cursor (cleaner than zoom icon) ===== */
.alt .imgwrap img,
.project-main img,
.project-gallery img{
  cursor: pointer;
}

@media (hover:hover){
  .project-gallery{ cursor: grab; }
  .project-gallery:active{ cursor: grabbing; }
}


body[data-page="projets"] .project-main-img{max-width:100%;}
body[data-page="projets"] .project-card{overflow:hidden;}


/* === FAQ cards: normalize banner image height without affecting other sections === */
.faq-banner{
  height:230px;           /* keep consistent with other card images */
  border-radius:14px;
  border:1px solid #e5e7eb;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.faq-banner img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
/* === End FAQ override === */

/* =========================================================
   FIX FOOTER – RENDU IDENTIQUE MOBILE & DESKTOP
   (override des styles inline existants)
   ========================================================= */

.footer{
  background:#0f172a;
  color:#cbd5e1;
  padding:40px 0;
}

/* Grille principale du footer */
.footer .container{
  display:grid !important;
  grid-template-columns:2fr 1fr 1fr;
  gap:24px;
  align-items:start;
}

/* Ligne copyright */
.footer .container + .container{
  grid-template-columns:1fr;
  border-top:1px solid #334155;
  margin-top:18px;
  padding-top:12px;
  font-size:14px;
}

/* Titres footer */
.footer h4{
  margin:0 0 10px;
  font-size:14px;
  font-weight:700;
  color:#ffffff;
}

/* Liens footer */
.footer a{
  color:#cbd5e1;
}
.footer a:hover{
  text-decoration:underline;
}

/* ===== Responsive mobile ===== */
@media (max-width: 768px){
  .footer .container{
    grid-template-columns:1fr !important;
    gap:16px;
    text-align:left;
  }

  .footer{
    padding:28px 0;
  }
}

/* ===== Back to top button ===== */
.back-to-top{position:fixed;bottom:24px;right:24px;width:44px;height:44px;border-radius:50%;background:var(--primary);color:#fff;border:none;cursor:pointer;box-shadow:0 6px 20px rgba(10,107,91,.3);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(20px);transition:opacity .3s ease,transform .3s ease,background .2s ease;z-index:50;pointer-events:none}
.back-to-top.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.back-to-top:hover{background:var(--primary-700);box-shadow:0 10px 30px rgba(10,107,91,.4)}
.back-to-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* ===== Focus states (accessibilité clavier) ===== */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--primary);outline-offset:0}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ===== GPU acceleration pour animations ===== */
.card,.re-card,.about3-card,.real3-card{will-change:transform}
.hero-tagline span{will-change:opacity,transform}

/* ===== Print stylesheet ===== */
@media print{
  header,.cta,.btn,.burger,.nav-toggle,footer,.hero-city,.skip-link{display:none!important}
  body{background:#fff;color:#000;font-size:12pt;line-height:1.5}
  .hero{min-height:auto;padding:20px 0}
  .hero.bg::before{display:none}
  .section{padding:20px 0}
  .card,.re-card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  img{max-width:100%!important;page-break-inside:avoid}
  a[href]::after{content:" (" attr(href) ")";font-size:9pt;color:#666}
  a[href^="#"]::after,a[href^="javascript"]::after,a[href^="tel"]::after{content:""}
}