/* =========================================================
   MAPSLINEA — NOUVELLE IDENTITÉ
   ========================================================= */

:root {
  --bg: #f7f3ec;
  --surface: #fffdf9;
  --surface-soft: #e9dfcd;
  --surface-sage: #dfe8e2;
  --text: #252822;
  --text-soft: #666b62;
  --border: #d9d2c7;
  --accent: #c56f4f;
  --accent-dark: #9d5036;
  --accent-soft: #f0d9cd;
  --green: #315c50;
  --green-dark: #203f37;
  --green-soft: #dce9e3;
  --sand: #d5bea0;
  --gold: #b88d52;
  --dark: #26322e;
  --dark-soft: #36433e;
  --radius-small: 10px;
  --radius: 20px;
  --radius-large: 32px;
  --shadow: 0 18px 50px rgba(50, 42, 34, 0.09);
  --shadow-soft: 0 10px 30px rgba(50, 42, 34, 0.06);
  --container: 1180px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 0;
}

body {
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(197, 111, 79, 0.055), transparent 26%),
    radial-gradient(circle at 82% 8%, rgba(49, 92, 80, 0.055), transparent 24%),
    linear-gradient(rgba(255,255,255,0.24) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.20) 1px, transparent 1px);
  background-size: auto, auto, 22px 22px, 22px 22px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

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

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

h1,
h2,
h3 {
  margin-top: 0;
  font-family: "Manrope", "Inter", Arial, sans-serif;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

h1 {
  max-width: 850px;
  margin-bottom: 20px;
  font-size: clamp(2rem, 3.8vw, 3.2rem);
}

h2 {
  margin-bottom: 18px;
  font-size: clamp(1.6rem, 2.7vw, 2.4rem);
}

h3 {
  margin-bottom: 14px;
  font-size: 1.35rem;
}

p {
  margin-top: 0;
}

ul,
ol {
  margin-top: 0;
}

.container {
  width: min(calc(100% - 40px), var(--container));
  margin-inline: auto;
}

.section {
  padding: clamp(34px, 3.2vw, 46px) 0;
}

.section-soft {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.22), transparent 46%),
    var(--surface-soft);
  border-top: 1px solid rgba(197, 111, 79, 0.18);
  border-bottom: 1px solid rgba(197, 111, 79, 0.18);
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  padding: 10px 14px;
  background:
    radial-gradient(circle at 80% 20%, rgba(213, 190, 160, 0.16), transparent 28%),
    linear-gradient(145deg, var(--green-dark), var(--green));
  color: #fff;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}


/* POSITIONNEMENT DES ANCRES SOUS LE HEADER FIXE */
main section[id],
#rendez-vous {
  scroll-margin-top: var(--header-h, 74px);
}

#prestations,
#realisations,
#a-propos,
#faq,
#contact {
  padding-top: 68px;
}

/* Sur les écrans avec peu de hauteur, ces 3 sections (non figées) réduisent
   automatiquement leur espace, sans jamais toucher aux sections validées
   ci-dessus (Prestations, Réalisations gardent leur 68px fixe). */
#a-propos,
#faq,
#contact {
  padding-top: clamp(24px, 6vh, 68px);
}

#visite-virtuelle {
  scroll-margin-top: 74px;
}

/* HEADER */

.top-hover-zone {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: 28px;
  pointer-events: auto;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 110;
  background: rgba(247, 243, 236, 0.9);
  border-bottom: 1px solid rgba(217, 210, 199, 0.68);
  box-shadow: 0 12px 34px rgba(50, 42, 34, 0.09);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform 0.28s ease,
    opacity 0.22s ease,
    visibility 0.22s ease;
  will-change: transform, opacity;
}

.site-header.header-hidden {
  transform: translateY(calc(-100% - 10px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-header.header-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Le header reste visible si un lien est atteint au clavier (Tab), pour l'accessibilité,
   mais un simple clic à la souris ne doit plus le forcer à rester affiché. */
.site-header:has(:focus-visible) {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Sécurité indépendante du JS : tant que la souris est sur le menu,
   il reste affiché — il ne peut plus se refermer pendant un clic. */
.site-header:hover {
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}


.header-inner {
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.brand {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  color: var(--text);
}

.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  object-fit: contain;
}

.brand-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}

.brand-name {
  font-family: "Manrope", "Inter", Arial, sans-serif;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 1;
}

.brand-tagline {
  margin-top: 5px;
  color: var(--text-soft);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-link {
  position: relative;
  color: var(--text-soft);
  font-size: 0.94rem;
  font-weight: 600;
}

.nav-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -9px;
  left: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active {
  color: var(--text);
}

.nav-link.active::after {
  transform: scaleX(1);
}

/* Sélecteur de langue (FR/EN...) */
.lang-switcher {
  position: relative;
}

.lang-current {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-soft);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.lang-current:hover,
.lang-current:focus-visible {
  color: var(--text);
}

.lang-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.2s ease;
}

.lang-switcher.is-open .lang-caret {
  transform: rotate(180deg);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 68px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 40;
}

.lang-switcher.is-open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-menu a {
  display: block;
  padding: 7px 10px;
  border-radius: 6px;
  color: var(--dark);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}

.lang-menu a:hover,
.lang-menu a:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: var(--surface);
}

.menu-toggle-line {
  display: block;
  width: 100%;
  height: 2px;
  margin: 5px 0;
  background: var(--text);
}

/* BOUTONS */

.button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border: 1px solid var(--green);
  border-radius: var(--radius-small);
  background: var(--green);
  color: #fff;
  font-weight: 700;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.button:hover,
.button:focus {
  background: var(--green-dark);
  border-color: var(--green-dark);
  transform: translateY(-2px);
}

.button-small {
  min-height: 42px;
  padding: 10px 15px;
  font-size: 0.9rem;
}

.button-secondary {
  background: rgba(49, 92, 80, 0.14);
  color: var(--green-dark);
  border-color: var(--green);
}

.button-secondary:hover,
.button-secondary:focus {
  background: #fff;
  color: var(--green-dark);
  border-color: var(--green-dark);
}

.button-light {
  background: #fff;
  color: var(--dark);
  border-color: #fff;
}

.button-light:hover,
.button-light:focus {
  background: #f0f0ec;
  color: var(--dark);
  border-color: #f0f0ec;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* COMMUN */

.eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(197, 111, 79, 0.12);
  color: var(--accent-dark);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.eyebrow-light {
  background: rgba(255, 255, 255, 0.14);
  color: #f3d9cd;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 26px;
}

.section-heading p:last-child {
  color: var(--text-soft);
  font-size: 1.08rem;
}

.section-heading-row {
  display: grid;
  max-width: none;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: end;
  gap: 58px;
}


.section-heading h2::after,
.about-content h2::after,
.contact-intro h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--sand));
}

/* HERO */

.technical-line {
  display: block;
  width: 88px;
  height: 2px;
  margin-bottom: 20px;
  background: linear-gradient(90deg, var(--accent), var(--sand));
  border-radius: 999px;
}

.hero::before {
  content: "";
  position: absolute;
  top: 16%;
  left: 0;
  width: 150px;
  height: 280px;
  opacity: 0.22;
  background:
    linear-gradient(90deg, transparent 49%, var(--green) 50%, transparent 51%),
    linear-gradient(transparent 49%, var(--green) 50%, transparent 51%);
  background-size: 24px 24px;
  pointer-events: none;
}

.hero {
  position: relative;
  overflow: hidden;
}


.hero {
  min-height: auto;
  display: flex;
  align-items: center;
  padding-top: clamp(64px, 5.5vw, 84px);
  padding-bottom: clamp(34px, 3.3vw, 48px);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.96fr);
  align-items: center;
  gap: clamp(34px, 5vw, 66px);
}

.hero-intro {
  max-width: 720px;
  margin-bottom: 26px;
  color: var(--text-soft);
  font-size: clamp(1.05rem, 1.85vw, 1.2rem);
}

.hero-points {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.hero-points li {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  color: var(--text-soft);
  font-size: 0.78rem;
  white-space: nowrap;
}

.hero-visual {
  position: relative;
  min-height: 0;
}

.hero-visual img {
  width: 100%;
  height: clamp(300px, 32vw, 420px);
  border-radius: var(--radius-large);
  object-fit: cover;
  box-shadow: var(--shadow);
  border: 10px solid rgba(255, 253, 249, 0.75);
}

.hero-card {
  position: absolute;
  right: -24px;
  bottom: 36px;
  display: grid;
  gap: 2px;
  max-width: 280px;
  padding: 24px;
  border-radius: var(--radius);
  background: rgba(255, 250, 243, 0.95);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.hero-card strong {
  font-family: "Manrope", sans-serif;
  font-size: 1.35rem;
}

/* SERVICES */

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.service-card {
  position: relative;
  overflow: hidden;
  padding: 18px 20px;
  border: 1px solid rgba(217, 210, 199, 0.82);
  border-radius: var(--radius);
  background: rgba(255, 253, 249, 0.88);
  box-shadow: var(--shadow-soft);
}

.service-number {
  color: var(--accent);
  font-weight: 800;
}

.service-card h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 1.1rem;
}

.service-card p,
.service-card li {
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.4;
}

.service-card ul {
  display: grid;
  gap: 3px;
  margin: 10px 0 0;
  padding-left: 18px;
}


.service-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--accent), var(--gold), var(--green));
}

.service-card:nth-child(2)::before {
  background: linear-gradient(90deg, var(--green), var(--sand));
}

.service-card:nth-child(3)::before {
  background: linear-gradient(90deg, var(--gold), var(--accent));
}

/* PROJECTS */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.project-card {
  overflow: hidden;
  border-radius: var(--radius);
  background: rgba(255, 253, 249, 0.92);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(217, 210, 199, 0.72);
}

.project-card-large {
  grid-row: span 2;
}

.project-card a {
  display: block;
  height: 100%;
}

.project-card img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.project-card:hover img {
  transform: scale(1.035);
}

.project-content {
  padding: 24px;
}

.project-content span {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.project-content h3 {
  margin-top: 9px;
}

.project-content p {
  margin-bottom: 0;
  color: var(--text-soft);
}

/* VISITE VIRTUELLE */

.immersive-section {
  background: var(--green-dark);
  color: #fff;
}

.immersive-section .eyebrow {
  margin-bottom: 26px;
}

.immersive-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
}

.immersive-visual img {
  width: 100%;
  min-height: 320px;
  max-height: 380px;
  border-radius: var(--radius-large);
  object-fit: cover;
}

.immersive-content > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.08rem;
}

.feature-list {
  display: grid;
  gap: 12px;
  margin: 20px 0;
}

.feature-list div {
  display: grid;
  gap: 3px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.feature-list span {
  color: rgba(255, 255, 255, 0.7);
}

/* À PROPOS */

.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vh, 50px);
}

.about-content p {
  max-width: 760px;
  margin-bottom: 8px;
  font-size: 0.94rem;
  color: var(--text-soft);
}

.text-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.about-panel {
  display: flex;
  flex-direction: column;
  margin-top: clamp(40px, 6vh, 56px);
  padding: clamp(18px, 3.2vh, 28px) 26px;
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.38), transparent 60%),
    var(--surface-sage);
  color: var(--text);
  border: 1px solid rgba(49, 92, 80, 0.13);
  box-shadow: var(--shadow-soft);
}

.about-panel h3 {
  margin-bottom: 4px;
  font-size: 1.15rem;
}

.about-panel ul {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-evenly;
  gap: clamp(8px, 1.6vh, 14px);
  margin: clamp(10px, 2vh, 16px) 0 0;
  padding: 0;
  list-style: none;
}

.about-panel li {
  padding-bottom: clamp(8px, 1.6vh, 14px);
  font-size: 0.94rem;
  border-bottom: 1px solid rgba(49, 92, 80, 0.18);
}

/* MÉTHODE DE TRAVAIL (fusionnée avec À propos) */

.process-inner {
  margin-top: clamp(20px, 4vh, 34px);
  padding-top: clamp(20px, 4vh, 34px);
  border-top: 1px solid var(--border);
}

.process-title {
  max-width: 700px;
  margin-bottom: clamp(14px, 2.5vh, 22px);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
}

.process-grid h4 {
  margin-top: 0;
  margin-bottom: 6px;
  font-size: 1rem;
}

.process-grid span {
  color: var(--accent);
  font-weight: 800;
}

.process-grid p {
  margin-bottom: 0;
  font-size: 0.9rem;
  color: var(--text-soft);
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2.2vh, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.process-grid li {
  padding: clamp(16px, 2.8vh, 22px) 18px;
  border-top: 3px solid var(--accent);
  background: rgba(255, 253, 249, 0.88);
  border-radius: 0 0 var(--radius-small) var(--radius-small);
  box-shadow: var(--shadow-soft);
}

/* CONTACT */

.contact-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 32px;
}

.contact-intro > p:not(.eyebrow) {
  color: var(--text-soft);
  font-size: 0.94rem;
}

.contact-details {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.contact-details p {
  margin: 0;
  font-size: 0.94rem;
}

.contact-details a {
  color: var(--accent);
  font-weight: 700;
}


.social-block {
  display: grid;
  gap: 10px;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.social-links a {
  display: inline-flex;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 700;
}

.social-links a:hover,
.social-links a:focus {
  border-color: var(--accent);
  color: var(--accent);
}

.contact-form {
  display: grid;
  gap: clamp(8px, 1.8vh, 14px);
  padding: clamp(14px, 3vh, 22px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 253, 249, 0.92);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(217, 210, 199, 0.72);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1.8vh, 14px);
}

.contact-form label {
  display: grid;
  gap: clamp(3px, 0.8vh, 7px);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 700;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
  color: var(--text);
  padding: clamp(6px, 1.4vh, 10px) 12px;
  outline: none;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(182, 90, 60, 0.12);
}

.contact-form textarea {
  resize: vertical;
  min-height: clamp(50px, 10vh, 90px);
}

/* FAQ */

.faq-list {
  display: grid;
  gap: clamp(5px, 1.2vh, 8px);
  max-width: 860px;
}

.faq-item {
  padding: clamp(8px, 1.8vh, 12px) 16px;
  border: 1px solid rgba(217, 210, 199, 0.82);
  border-radius: var(--radius-small);
  background: rgba(255, 253, 249, 0.92);
  font-size: 0.97rem;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  float: right;
  color: var(--accent);
  font-weight: 800;
  font-size: 1.2rem;
}

.faq-item[open] summary::after {
  content: "–";
}

.faq-item p {
  margin: 8px 0 0;
  color: var(--text-soft);
}

.consent {
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px !important;
  color: var(--text-soft) !important;
  font-weight: 500 !important;
}

.consent input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
}

.form-note {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.82rem;
}

/* RENDEZ-VOUS */

.appointment-section {
  padding: 20px 0 32px;
  background:
    radial-gradient(circle at 82% 24%, rgba(255,255,255,0.1), transparent 22%),
    linear-gradient(120deg, var(--accent-dark), var(--green-dark));
  color: #fff;
}

.appointment-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}

.appointment-inner div {
  max-width: 700px;
}

.appointment-inner p:last-child {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.82);
}

.appointment-inner h2 {
  font-size: clamp(1.8rem, 3vw, 2.55rem);
}

/* FOOTER */

.site-footer {
  padding: 30px 0 14px;
  background: var(--dark);
  color: #fff;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.7fr 0.7fr 0.8fr;
  gap: 40px;
}

.footer-qr h2 {
  margin-bottom: 14px;
}

.footer-qr-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border: 1px dashed rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-small);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.78rem;
  text-align: center;
  padding: 8px;
}

.footer-qr img {
  display: block;
  width: 120px;
  height: 120px;
  border-radius: var(--radius-small);
  background: #fff;
  padding: 6px;
}

.footer-qr p {
  margin-top: 6px;
  max-width: 180px;
  font-size: 0.85rem;
}

.footer-qr-contact {
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 0;
}

.footer-brand {
  font-family: "Manrope", sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
}

.footer-grid p,
.footer-grid a {
  color: rgba(255, 255, 255, 0.68);
}

.footer-grid > div:not(:first-child) {
  display: grid;
  align-content: start;
  gap: 9px;
}

.footer-grid h2 {
  margin-bottom: 10px;
  font-size: 1rem;
  letter-spacing: 0;
}

.footer-grid a:hover {
  color: #fff;
}

.footer-bottom {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom p {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.88rem;
}

/* RESPONSIVE */

@media (max-width: 1280px) {
  .main-nav {
    gap: 16px;
  }

  .nav-link {
    font-size: 0.88rem;
  }

  .button-small {
    padding-inline: 12px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 0.82fr);
    gap: 38px;
  }

  h1 {
    font-size: clamp(2.35rem, 4.7vw, 4rem);
  }
}


@media (max-width: 1050px) {
  .menu-toggle {
    display: block;
  }

  .main-nav {
    position: fixed;
    inset: 88px 0 auto;
    display: none;
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 22px 20px 32px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }

  .main-nav.open {
    display: flex;
  }

  .main-nav .nav-link {
    padding: 14px 4px;
    border-bottom: 1px solid var(--border);
  }

  .main-nav .button {
    margin-top: 18px;
  }

  .main-nav .lang-switcher {
    padding: 14px 4px;
    border-bottom: 1px solid var(--border);
  }

  .main-nav .lang-current {
    width: 100%;
    justify-content: space-between;
  }

  /* Même correctif que sur mobile : un peu plus d'espace pour que les
     étiquettes de section ne soient jamais coupées par le header fixe. */
  main section[id],
  #rendez-vous {
    scroll-margin-top: 100px;
  }

  #prestations,
  #realisations {
    padding-top: 92px;
  }

  #visite-virtuelle {
    padding-top: 104px;
  }

  #a-propos,
  #faq,
  #contact {
    padding-top: 100px;
  }

  .hero-grid,
  .immersive-grid,
  .about-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  /* Le texte (avec l'étiquette "Visite virtuelle") doit apparaître
     au-dessus de l'image une fois empilé, pas en dessous. */
  .immersive-content {
    order: -1;
  }

  .hero-visual {
    min-height: auto;
  }

  .hero-visual img {
    height: 520px;
  }

  .hero-card {
    right: 18px;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .immersive-visual img {
    min-height: 480px;
  }

  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-panel {
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .container {
    width: min(calc(100% - 28px), var(--container));
  }

  .section {
    padding: 58px 0;
  }

  .header-inner {
    min-height: 76px;
  }

  main section[id],
  #rendez-vous,
  #visite-virtuelle {
    scroll-margin-top: 92px;
  }

  /* Un peu plus d'air pour que l'étiquette ne colle pas au header. */
  #prestations,
  #realisations {
    padding-top: 84px;
  }

  #visite-virtuelle {
    padding-top: 96px;
  }

  /* Ces 3 sections utilisent un espace réduit (clamp) pensé pour le bureau ;
     sur mobile ce n'était pas assez, ce qui masquait complètement leur titre
     derrière le header fixe. On force ici une valeur fixe et suffisante. */
  #a-propos,
  #faq,
  #contact {
    padding-top: 92px;
  }

  .main-nav {
    inset: 76px 0 auto;
    max-height: calc(100vh - 76px);
  }

  .brand-name {
    font-size: 1.45rem;
  }

  .brand-tagline {
    font-size: 0.61rem;
  }

  .hero {
    min-height: auto;
    padding-top: 112px;
  }

  .hero-grid {
    gap: 45px;
  }

  .hero-visual img {
    height: 390px;
  }

  .hero-card {
    position: static;
    margin: -48px 14px 0;
  }

  .section-heading-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }

  .project-card-large {
    grid-row: auto;
  }

  .project-card img,
  .project-card-large img {
    height: 300px;
  }

  .immersive-grid {
    gap: 42px;
  }

  .immersive-visual img {
    min-height: auto;
    height: 420px;
  }

  .process-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .contact-form {
    padding: 24px;
  }

  .appointment-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .hero-points {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


@media (max-width: 1050px) {
  .hero::before {
    width: 90px;
    height: 180px;
    opacity: 0.12;
  }
}

@media (max-width: 760px) {
  .technical-line {
    margin-bottom: 20px;
  }

  .service-card,
  .contact-form,
  .about-panel {
    box-shadow: 0 12px 30px rgba(50, 42, 34, 0.07);
  }
}

@media (max-width: 1050px) {
  .top-hover-zone {
    display: none;
  }

  body.menu-open .site-header {
    transform: translateY(0) !important;
  }

  /* Sur tactile, il n'y a pas de survol pour faire réapparaître le header une
     fois caché : il reste donc toujours affiché en dessous de ce seuil. */
  .site-header,
  .site-header.header-hidden {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  body.menu-open .site-header {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* À propos, FAQ et Rendez-vous occupent au moins un écran complet, pour
   que la section précédente ou suivante ne soit jamais visible en trop.
   Contact fonctionne déjà bien avec sa hauteur naturelle, on n'y touche pas.
   Valeur généreuse (100vh, sans soustraction du header) : ça ne coupe
   jamais rien, au pire ça laisse un peu de marge en bas. */
#a-propos,
#faq {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
}

/* Rendez-vous et le footer forment ensemble un seul bloc qui occupe
   tout l'écran. C'est le bloc rouge/dégradé lui-même qui s'étire pour
   rejoindre directement le footer, sans bande blanche entre les deux. */
.rdv-footer-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.rdv-footer-wrap #rendez-vous {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* PAGES LÉGALES (Mentions légales / Politique de confidentialité) */

.legal-section {
  padding-top: clamp(84px, 8vw, 110px);
}

.legal-container {
  max-width: 760px;
}

.legal-container h1 {
  margin-top: 6px;
  margin-bottom: 20px;
}

.legal-container h2 {
  margin-top: 32px;
  margin-bottom: 10px;
  font-size: 1.15rem;
}

.legal-container p {
  margin-bottom: 4px;
  color: var(--text-soft);
  line-height: 1.6;
}

.legal-container a {
  color: var(--accent);
  font-weight: 700;
}

.legal-placeholder-notice {
  margin: 20px 0 32px;
  padding: 14px 18px;
  border: 1px solid rgba(197, 111, 79, 0.3);
  border-radius: var(--radius-small);
  background: rgba(197, 111, 79, 0.08);
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* PAGES DE PROJET INDIVIDUELLES (index2, index5...) */

.project-hero {
  padding-top: clamp(84px, 8vw, 110px);
}

.project-hero-inner {
  max-width: 780px;
}

.project-hero-inner h1 {
  margin-top: 6px;
  margin-bottom: 14px;
}

.project-hero-inner p {
  color: var(--text-soft);
  font-size: 1.02rem;
  line-height: 1.6;
}

.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  padding: 0;
  list-style: none;
}

.project-meta li {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-soft);
  font-size: 0.85rem;
  font-weight: 600;
}

.project-demo-note {
  margin-top: 22px;
  padding: 14px 18px;
  border: 1px solid rgba(197, 111, 79, 0.3);
  border-radius: var(--radius-small);
  background: rgba(197, 111, 79, 0.08);
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.6;
}

.project-image {
  margin-top: 40px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.project-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* CARROUSEL COVERFLOW (index2, index5...) : la vignette active est plus
   grande, au centre ; les deux voisines sont plus petites, sur les côtés.
   Défile automatiquement, et chaque vignette reste cliquable. */

.coverflow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
  padding: 30px 0;
}

.coverflow-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 300px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.coverflow-slide {
  position: relative;
  flex: 0 0 auto;
  width: 170px;
  height: 210px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  opacity: 0.55;
  filter: saturate(0.7);
  transform: scale(0.9);
  cursor: pointer;
  transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease,
    transform 0.5s ease, filter 0.5s ease;
}

.coverflow-slide.is-active {
  width: 340px;
  height: 300px;
  opacity: 1;
  filter: saturate(1);
  transform: scale(1);
  z-index: 2;
  box-shadow: 0 24px 48px rgba(50, 42, 34, 0.22);
}

.coverflow-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coverflow-slide-label {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(38, 50, 46, 0.75);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.coverflow-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--green-dark);
  font-size: 1.1rem;
  transform: translate(-50%, -50%);
}

.coverflow-arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}

.coverflow-arrow:hover {
  background: var(--bg);
}

/* LIGHTBOX (vue agrandie) */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(20, 18, 15, 0.9);
}

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

body.lightbox-open {
  overflow: hidden;
}

.lightbox-figure {
  max-width: min(1100px, 100%);
  max-height: 100%;
  margin: 0;
  text-align: center;
}

.lightbox-figure img,
.lightbox-figure video {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  margin: 0 auto;
  border-radius: var(--radius-small);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-figure figcaption {
  margin-top: 14px;
  color: #fff;
  font-size: 0.92rem;
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.lightbox-close:hover,
.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.24);
}

.lightbox-close {
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.6rem;
  line-height: 1;
}

.lightbox-nav {
  top: 50%;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 1.8rem;
  line-height: 1;
  transform: translateY(-50%);
}

.lightbox-prev {
  left: 20px;
}

.lightbox-next {
  right: 20px;
}

.project-body {
  max-width: 780px;
  margin-top: 40px;
}

.project-body h2 {
  margin-top: 32px;
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.project-body h2:first-child {
  margin-top: 0;
}

.project-body p {
  margin-bottom: 4px;
  color: var(--text-soft);
  line-height: 1.6;
}

.project-body ul {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.project-body li {
  padding-left: 18px;
  position: relative;
  color: var(--text-soft);
}

.project-body li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
}

.project-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 44px;
  padding: 28px 0 60px;
  border-top: 1px solid var(--border);
}

.project-back-link {
  color: var(--text-soft);
  font-weight: 700;
}

.project-back-link:hover {
  color: var(--text);
}

@media (max-width: 640px) {
  .coverflow-slide {
    display: none !important;
  }

  .coverflow-slide.is-active {
    display: block !important;
    width: min(280px, 70vw);
    height: 260px;
  }
}

/* BOUTON "REMONTER EN HAUT" — tablette et mobile uniquement */

.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(197, 111, 79, 0.4);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

@media (max-width: 1050px) {
  .back-to-top {
    display: flex;
  }

  .back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}