/* ==========================================================================
   Design System - Samuel MAGNÉ - Artisan Multiservice Landes (40)
   ========================================================================== */

:root {
  --primary: #1E3A8A;
  --primary-hover: #1D4ED8;
  --primary-light: #EFF6FF;
  --secondary: #D97706;
  --secondary-hover: #B45309;
  --secondary-light: #FFFBEB;
  --dark: #0F172A;
  --dark-surface: #1E293B;
  --light-bg: #F8FAFC;
  --card-bg: #FFFFFF;
  --text: #334155;
  --text-muted: #64748B;
  --border: #E2E8F0;
  --success: #059669;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.04);
  --shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 20px 35px -10px rgba(15, 23, 42, 0.15);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  font-family: var(--font-main);
  color: var(--text);
  background-color: var(--light-bg);
  line-height: 1.6;
}

body {
  overflow-x: hidden;
  /* Un mot plus long que sa colonne deborde sans que le bloc parent ne
     s'elargisse : invisible a getBoundingClientRect, mais bien present dans
     scrollWidth. Mesure a 320 px : 47 px de debord sur une page metier, du
     seul fait de noms de communes comme « Parentis-en-Born ». */
  overflow-wrap: break-word;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

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

/* --- Container --- */
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.section {
  padding: 4.5rem 0;
}

.section-title {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.section-subtitle {
  font-size: 1.125rem;
  color: var(--text-muted);
  max-width: 680px;
  margin-bottom: 2.5rem;
}

.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.875rem 1.75rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius);
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.btn-primary {
  background-color: var(--primary);
  color: #FFFFFF;
}

.btn-primary:hover {
  background-color: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.btn-secondary {
  background-color: var(--secondary);
  color: #FFFFFF;
}

.btn-secondary:hover {
  background-color: var(--secondary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.btn-outline {
  border-color: var(--primary);
  color: var(--primary);
  background: transparent;
}

.btn-outline:hover {
  background-color: var(--primary-light);
  color: var(--primary-hover);
}

.btn-phone {
  background-color: var(--success);
  color: #FFFFFF;
  animation: pulse 2.5s infinite;
}

.btn-phone:hover {
  background-color: #047857;
  transform: translateY(-2px);
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.4); }
  70% { box-shadow: 0 0 0 12px rgba(5, 150, 105, 0); }
  100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-primary {
  background-color: var(--primary-light);
  color: var(--primary);
}

.badge-secondary {
  background-color: var(--secondary-light);
  color: var(--secondary-hover);
}

/* --- Header & Navigation --- */
.top-bar {
  background-color: var(--dark);
  color: #CBD5E1;
  font-size: 0.875rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.top-bar-info {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.top-bar-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
  position: relative;
}

.logo-brand {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex-shrink: 0;
}

/* Le logo porte deja « SAMUEL MAGNÉ » : le nom et le sous-titre qui
   l'accompagnaient en HTML ont ete retires, ils faisaient doublon.
   Mesure : les lettres du logo valent 9,5 % de sa hauteur, il faut donc
   80 px de haut pour qu'elles restent lisibles -- d'ou la reduction du
   remplissage vertical de la barre, qui compense. */
.logo-entete {
  height: 80px;
  width: auto;
  flex-shrink: 0;
  display: block;
}

/* Accroche a cote du logo. Le nom, lui, n'est pas repris : le logo le porte.
   Elle est bornee en largeur pour tenir sur deux lignes : sur une seule elle
   fait 233 px et ne laisse plus que 42 px de marge au menu, contre 78 px
   ainsi. Ses deux lignes (35 px) restent sous la hauteur du logo (80 px),
   le bandeau ne grandit donc pas.
   10 rem et pas moins : « ARTISAN MULTISERVICE » mesure 157 px, en dessous
   de 160 px la coupure se fait en trois lignes. */
.artisan-sub {
  display: block;
  max-width: 10rem;
  font-size: 0.8rem;
  color: var(--secondary-hover);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.35;
}

/* Version claire pour le pied de page : le fond y est en #0F172A et le logo
   en #0C2440, l'original y serait invisible. */
.footer-embleme {
  height: 64px;
  width: auto;
  display: block;
  margin-bottom: 1rem;
}

.main-nav {
  display: flex;
  align-items: center;
  /* meme ecart qu'entre le logo et le menu (gap de .header-container),
     sans quoi le menu se centre de travers de quelques pixels */
  gap: 1rem;
  /* occupe tout l'espace restant a droite du logo */
  flex: 1;
}

/* Le menu se centre dans l'espace disponible entre le logo et le bouton
   telephone. Un centrage sur la barre entiere a ete essaye puis abandonne :
   il impose 2 x largeur_logo + largeur_menu <= 1200 px, soit 1218 px mesures,
   et le menu chevauchait le logo de 9 px des 1440 px de large. */
.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 1rem;
  list-style: none;
  white-space: nowrap;
}

.header-cta {
  flex-shrink: 0;
}

.nav-link {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--dark);
  padding: 0.5rem 0.25rem;
  position: relative;
}

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

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--secondary);
  border-radius: 3px;
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.mobile-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 1.5rem;
  color: var(--dark);
  cursor: pointer;
  /* 44x44 minimum : taille de cible tactile recommandee */
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition);
}

.mobile-toggle:hover,
.mobile-toggle[aria-expanded="true"] {
  background-color: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

.mobile-toggle svg {
  width: 26px;
  height: 26px;
}

/* --- Hero Section --- */
.hero {
  position: relative;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 58, 138, 0.88) 100%),
              url('https://images.pexels.com/photos/37416157/pexels-photo-37416157.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=1920');
  background-size: cover;
  background-position: center;
  color: #FFFFFF;
  padding: 5rem 0 6rem;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
}

.hero-content h1 {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 1.25rem;
  letter-spacing: -0.5px;
}

.hero-content h1 .highlight {
  color: var(--secondary);
  background: linear-gradient(120deg, #F59E0B, #D97706);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-content .lead {
  font-size: 1.2rem;
  color: #E2E8F0;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.25rem;
}

.hero-badge-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Quick Estimate Box */
.estimate-card {
  background: #FFFFFF;
  color: var(--dark);
  padding: 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}

.estimate-card h3 {
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.estimate-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  color: var(--dark);
}

.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--light-bg);
  transition: var(--transition);
  font-family: inherit;
}

.form-control:focus {
  outline: none;
  border-color: var(--primary);
  background-color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.15);
}

/* --- Services Grid --- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 1.75rem;
}

.service-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: rgba(30, 58, 138, 0.3);
}

.service-card-img {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.service-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.service-card:hover .service-card-img img {
  transform: scale(1.06);
}

.service-card-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background-color: var(--secondary);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.service-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.service-card-icon {
  width: 44px;
  height: 44px;
  background-color: var(--primary-light);
  color: var(--primary);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.service-card-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.75rem;
}

.service-card-text {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  flex-grow: 1;
}

.service-features-list {
  list-style: none;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}

.service-features-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  color: var(--dark);
}

.service-features-list li i {
  color: var(--success);
}

/* --- Features / Advantages Section --- */
.advantages-box {
  background: linear-gradient(135deg, var(--primary), var(--dark-surface));
  color: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 3.5rem 2.5rem;
}

.advantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.advantage-item {
  text-align: center;
}

.advantage-icon {
  width: 64px;
  height: 64px;
  background: rgba(255,255,255,0.12);
  color: var(--secondary);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(255,255,255,0.2);
}

.advantage-item h4 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.advantage-item p {
  font-size: 0.9rem;
  color: #CBD5E1;
}

/* --- Portfolio Gallery --- */
.portfolio-filter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-bottom: 2.5rem;
  list-style: none;
}

.filter-btn {
  padding: 0.5rem 1.25rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: var(--transition);
}

.filter-btn:hover, .filter-btn.active {
  background-color: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 1.5rem;
}

.portfolio-item {
  background: var(--card-bg);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  cursor: pointer;
}

.portfolio-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.portfolio-thumb {
  position: relative;
  height: 230px;
  overflow: hidden;
}

.portfolio-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.portfolio-item:hover .portfolio-thumb img {
  transform: scale(1.08);
}

.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--transition);
  color: #FFFFFF;
}

.portfolio-item:hover .portfolio-overlay {
  opacity: 1;
}

.portfolio-info {
  padding: 1.25rem;
}

.portfolio-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.35rem;
}

.portfolio-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* --- Reviews --- */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1.5rem;
}

.review-card {
  background: var(--card-bg);
  padding: 1.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.stars {
  color: #F59E0B;
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.review-text {
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 1.25rem;
}

.review-author {
  font-weight: 700;
  color: var(--dark);
  font-size: 0.95rem;
}

.review-location {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* --- Lightbox Modal --- */
.lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(15, 23, 42, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-content {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  max-width: 800px;
  width: 100%;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.lightbox-modal.active .lightbox-content {
  transform: scale(1);
}

.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  background: rgba(0,0,0,0.6);
  color: #FFFFFF;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-img-wrapper {
  max-height: 480px;
  overflow: hidden;
}

.lightbox-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lightbox-body {
  padding: 1.5rem;
}

/* --- Footer --- */
.site-footer {
  background-color: var(--dark);
  color: #94A3B8;
  padding: 4.5rem 0 2rem;
  border-top: 4px solid var(--secondary);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2.5rem;
  margin-bottom: 3.5rem;
}

.footer-brand p {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.footer-title {
  color: #FFFFFF;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}

.footer-links {
  list-style: none;
  font-size: 0.9rem;
}

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

.footer-links a:hover {
  color: #FFFFFF;
  padding-left: 4px;
}

.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
}

/* Mobile Sticky Call CTA */
.sticky-call-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background-color: #FFFFFF;
  padding: 0.75rem 1rem;
  box-shadow: 0 -4px 15px rgba(0,0,0,0.1);
  border-top: 1px solid var(--border);
}

.sticky-call-bar .btn {
  width: 100%;
}

/* Le libelle long passait sur deux lignes sur les petits ecrans : le bandeau
   montait a 98 px, soit 12 % de la hauteur d'un telephone courant. */
.sticky-call-bar .libelle-court {
  display: none;
}

@media (max-width: 420px) {
  .sticky-call-bar {
    padding: 0.6rem 0.75rem;
  }
  .sticky-call-bar .btn {
    padding: 0.8rem 0.5rem;
    font-size: 0.95rem;
  }
}

/* Seuil mesure, pas choisi : le libelle long tient sur une ligne a partir de
   480 px, et pas en dessous. Entre 391 et 430 px — iPhone 14/15/16, Pixel — il
   passait encore sur deux lignes avec un seuil fixe a 390 px. */
@media (max-width: 479px) {
  .sticky-call-bar .libelle-long {
    display: none;
  }
  .sticky-call-bar .libelle-court {
    display: inline;
  }
}

/* --- Reveal on Scroll --- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* --- Prestations complementaires (page d'accueil) ---
   auto-fit + minmax borne a 100% : a cinq elements la grille passe de 4 a 2
   puis a 1 colonne sans jamais deborder. */
.grille-prestations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1.5rem;
}

.carte-prestation {
  background: var(--light-bg);
  padding: 1.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.carte-prestation-icone {
  color: var(--secondary);
  width: 32px;
  height: 32px;
  margin-bottom: 0.75rem;
}

.carte-prestation h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.5rem;
}

.carte-prestation p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1rem;
  /* pousse le lien en bas : les cartes d'une meme ligne s'alignent */
  flex: 1;
}

.carte-prestation a {
  font-weight: 700;
  color: var(--primary);
  font-size: 0.9rem;
}

.carte-prestation a:hover {
  text-decoration: underline;
}

/* --- Formulaire express du bandeau ---
   Il envoie directement, sans passer par /contact : le retour se fait donc
   dans la carte elle-meme, a la place du formulaire pour un succes, au-dessus
   pour une erreur. */
.devis-succes {
  text-align: center;
  padding: 1.5rem 0 0.5rem;
}

.devis-succes svg {
  width: 52px;
  height: 52px;
  color: var(--success);
  margin-bottom: 0.75rem;
}

.devis-succes h4 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.5rem;
}

.devis-succes p {
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.6;
}

.devis-succes .devis-succes-suite {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--text-muted);
}

.devis-succes a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: underline;
}

.devis-erreur {
  background-color: #FEE2E2;
  border: 1px solid #EF4444;
  color: #7F1D1D;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  font-size: 0.92rem;
}

.devis-erreur strong {
  display: block;
  margin-bottom: 0.35rem;
}

.devis-erreur ul {
  margin: 0;
  padding-left: 1.15rem;
  line-height: 1.6;
}

/* --- Grilles a deux colonnes ---
   Ces mises en page etaient ecrites en style inline dans les gabarits : une
   media query ne peut pas surcharger un attribut style, elles ne se repliaient
   donc jamais. Mesure a 375 px : la colonne laterale des pages metier
   depassait l'ecran de 69 px. */
.grid-principal {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 3rem;
  align-items: start;
}

.grid-contact {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: start;
}

.grid-champs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Un element de grille vaut min-width:auto par defaut : son contenu le plus
   large impose sa taille minimale et fait deborder la piste. Mesure a 320 px :
   les deux colonnes de /contact faisaient 315 px pour 288 px disponibles. */
.grid-principal > *,
.grid-contact > *,
.grid-champs > * {
  min-width: 0;
}

@media (max-width: 992px) {
  .grid-principal,
  .grid-contact {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 600px) {
  .grid-champs {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Champ piege du formulaire : retire du flux sans deplacer quoi que ce soit.
   Un simple left:-9999px laissait un bloc de 436 px de large hors ecran. */
.champ-piege {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Cartes de coordonnees de la page contact.
   Le bloc de texte est un element flex : par defaut min-width:auto l'empeche
   de descendre sous la largeur de son contenu. Mesure a 320 px :
   « smagne243@gmail.com » faisait deborder la carte de 5 px. */
.carte-coord {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--card-bg);
  padding: 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

/* min-width:0 laisse l'element retrecir, mais ne suffit pas : la largeur
   minimale de la carte reste celle de son plus long mot insecable
   (« smagne243@gmail.com »). Or « overflow-wrap: break-word », pose sur body,
   n'entre PAS dans ce calcul -- seul « anywhere » le fait. Mesure a 320 px :
   la carte restait a 315 px pour 273 px disponibles, soit 25 px de debord. */
.carte-coord > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Tres petits ecrans (320 px : iPhone SE 1re generation, Galaxy Fold replie) */
@media (max-width: 380px) {
  .container {
    padding: 0 1rem;
  }
  .estimate-card {
    padding: 1.25rem;
  }
}

/* Responsive Media Queries */
@media (max-width: 992px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-content h1 {
    font-size: 2.25rem;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Palier intermediaire : le menu complet tient encore, mais tout juste.
   Mesure a 1440 px : logo 295 + menu 628 + bouton 204 = 1199 px pour un
   conteneur de 1240. On libere de la place en retirant le sous-titre du logo
   et le libelle du bouton telephone -- le numero reste dans la barre du haut. */
@media (max-width: 1240px) {
  .logo-entete {
    height: 68px;
  }
  .artisan-sub {
    display: none;
  }
  .nav-links {
    gap: 0.85rem;
  }
  .header-cta .btn-phone {
    padding: 0.7rem;
    border-radius: 50%;
  }
  .header-cta .btn-phone span {
    display: none;
  }
}

/* Menu burger. Seuil mesure, pas choisi : avec le logo seul, le menu complet
   tient jusqu'a 780 px de large. A 821 px il reste 38 px de marge de chaque
   cote. Les tablettes en paysage (1024 px) gardent donc le menu complet. */
@media (max-width: 820px) {
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    background: #FFFFFF;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 1rem 1.25rem 1.5rem;
    box-shadow: var(--shadow-lg);
    border-bottom: 1px solid var(--border);
    /* sur un ecran bas (paysage), le volet defile au lieu de deborder */
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .main-nav.active {
    display: flex;
  }
  /* le centrage absolu du bureau n'a plus lieu d'etre dans le volet */
  .nav-links {
    position: static;
    transform: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
    white-space: normal;
  }
  .nav-links li + li {
    border-top: 1px solid var(--border);
  }
  .nav-link {
    display: block;
    font-size: 1rem;
    padding: 0.9rem 0.25rem;
  }
  /* le soulignement du lien actif devient un liseret a gauche : en colonne,
     la barre sous le texte se confondait avec la separation des lignes */
  .nav-link.active::after {
    top: 0.55rem;
    bottom: 0.55rem;
    left: -1.25rem;
    right: auto;
    height: auto;
    width: 3px;
  }
  .header-cta {
    width: 100%;
    margin-top: 0.75rem;
  }
  .header-cta .btn-phone {
    width: 100%;
    padding: 0.9rem;
    border-radius: var(--radius);
  }
  .header-cta .btn-phone span {
    display: inline;
  }
  .mobile-toggle {
    display: inline-flex;
  }
}

@media (max-width: 768px) {
  .top-bar {
    display: none;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .sticky-call-bar {
    display: block;
  }
  /* Marge basse reservee au bandeau d'appel fixe.
     Elle valait 60 px pour un bandeau de 83 px (108 px quand le libelle
     passait sur deux lignes) : les liens du bas de page — carte de visite,
     mentions legales, CGV, CGU — disparaissaient derriere.
     La valeur exacte est posee par le script du pied de page, qui mesure le
     bandeau ; celle ecrite ici est le repli si le script ne s'execute pas. */
  body {
    padding-bottom: var(--hauteur-barre-appel, 120px);
  }
  .header-container {
    padding: 0.5rem 1.25rem;
  }
  .logo-entete {
    height: 56px;
  }
}

/* ==========================================================================
   RESPONSIVE — DEBORDEMENT HORIZONTAL (ajoute le 2026-08-05)
   Le contenu debordait a droite sur mobile. body{overflow-x:hidden} masquait
   le probleme : le contenu etait COUPE au lieu d'etre ramene dans l'ecran.
   Trois causes, corrigees ci-dessous. Meme correctif que sur landes-terrasses.
   ========================================================================== */

@media (max-width:992px){
  /* 1. Une piste `1fr` a un minimum AUTOMATIQUE de min-content : un enfant
        large (tableau, image, mot long) elargit la piste, donc la grille,
        donc toute la page. minmax(0,1fr) supprime ce plancher implicite. */
  [style*="grid-template-columns"]{ grid-template-columns:minmax(0,1fr) !important; }
  [style*="grid-template-columns"] > *{ min-width:0; }
  [style*="grid-column"]{ grid-column:1 / -1 !important; }

  /* 2. Meme logique pour les rangees flex ecrites en style inline.
        flex-wrap:wrap est sans effet tant que les elements tiennent : cette
        regle ne change rien aux mises en page deja correctes. */
  [style*="display: flex"], [style*="display:flex"]{ flex-wrap:wrap; }
  .footer-bottom, .footer-bottom > div{ flex-wrap:wrap; }
  /* Un element flex a min-width:auto : il ne peut pas descendre sous sa
     largeur mini de contenu et deborde donc son conteneur. Constate sur la
     page contact de samuel-magne.fr : cartes de 315 px dans un bloc de 288. */
  [style*="display: flex"] > *, [style*="display:flex"] > *{ min-width:0; }

  /* 3. Un tableau ne peut pas descendre sous la largeur mini de ses colonnes :
        il defile dans son propre cadre plutot que d'elargir la page.
        Au-dessus de 992 px il reste un vrai tableau. Pas de white-space:nowrap
        ici, cela triplerait la longueur du defilement. */
  table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* Filet de securite : rien de remplacable ne depasse son conteneur, et les
   mots tres longs reviennent a la ligne au lieu de pousser la page. */
img, svg, video, canvas, embed, object{ max-width:100%; }
body{ overflow-wrap:break-word; }