/* ============================================================
   ATS3D — Shared base + overrides (mobile nav, photos, animations)
   Loaded by all pages. Variables are also defined here as fallback.
   ============================================================ */

:root {
  --rouge: #CC1616;
  --rouge-clair: #E82020;
  --rouge-pale: #FDEAEA;
  --gris-section: #F5F5F5;
  --gris-bord: #E4E4E4;
  --gris-bord-fort: #D0D0D0;
  --anthracite: #2D2D2D;
  --texte: #1A1A1A;
  --texte-doux: #555555;
  --blanc: #FFFFFF;
}

/* --- Base layout for ville-pages (lightweight) --- */
.ville-page * { margin:0; padding:0; box-sizing:border-box; }
.ville-page { font-family: Arial, Helvetica, sans-serif; color:var(--texte); background:var(--blanc); line-height:1.6; }

.ville-page nav { background:var(--blanc); border-bottom:1.5px solid var(--gris-bord); padding:0 5%; display:flex; align-items:center; justify-content:space-between; height:72px; position:sticky; top:0; z-index:100; }
.ville-page .nav-logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.ville-page .logo-cercle { width:46px; height:46px; border-radius:50%; overflow:hidden; flex-shrink:0; border:2px solid var(--gris-bord); }
.ville-page .logo-cercle img { width:100%; height:100%; object-fit:cover; display:block; }
.ville-page .logo-texte { display:flex; flex-direction:column; line-height:1.15; }
.ville-page .logo-ats3d { font-size:18px; font-weight:900; color:var(--anthracite); letter-spacing:0.5px; }
.ville-page .logo-sous { font-size:10px; color:var(--texte-doux); letter-spacing:1.5px; text-transform:uppercase; }
.ville-page .nav-links { display:flex; align-items:center; gap:28px; list-style:none; }
.ville-page .nav-links a { color:var(--texte-doux); text-decoration:none; font-size:14px; font-weight:700; transition:color 0.2s; }
.ville-page .nav-links a:hover { color:var(--anthracite); }
.ville-page .nav-links a.actif { color:var(--rouge); }
.ville-page .nav-tel { background:var(--rouge) !important; color:var(--blanc) !important; padding:10px 18px; border-radius:6px; font-weight:700 !important; font-size:14px !important; display:inline-flex; align-items:center; gap:7px; }
.ville-page .nav-tel:hover { background:var(--rouge-clair) !important; }

.ville-page .breadcrumb { background:#EBEBEB; border-bottom:1px solid var(--gris-bord); padding:10px 5%; }
.ville-page .breadcrumb-inner { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--texte-doux); max-width:1100px; margin:0 auto; }
.ville-page .breadcrumb-inner a { color:var(--texte-doux); text-decoration:none; }
.ville-page .breadcrumb-inner a:hover { color:var(--anthracite); }
.ville-page .breadcrumb-sep { color:var(--gris-bord); }
.ville-page .breadcrumb-actif { color:var(--anthracite); font-weight:700; }

.ville-page .hero-page { background:var(--gris-section); border-bottom:1.5px solid var(--gris-bord); padding:72px 5% 80px; }
.ville-page .hero-page-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.ville-page .hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.7); border:1.5px solid var(--gris-bord); color:var(--anthracite); font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; padding:6px 14px; border-radius:100px; margin-bottom:24px; }
.ville-page .badge-dot { width:6px; height:6px; background:var(--rouge); border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.7)} }
.ville-page .hero-page h1 { font-size:clamp(28px,3.5vw,46px); font-weight:900; color:var(--anthracite); line-height:1.1; margin-bottom:20px; letter-spacing:-0.5px; }
.ville-page .hero-page h1 span { color:var(--rouge); }
.ville-page .hero-desc { font-size:17px; color:var(--anthracite); line-height:1.7; margin-bottom:32px; max-width:480px; opacity:0.85; }
.ville-page .hero-ctas { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:32px; }
.ville-page .btn-rouge { background:var(--rouge); color:var(--blanc); padding:14px 28px; border-radius:7px; font-size:15px; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:9px; transition:background 0.2s; }
.ville-page .btn-rouge:hover { background:var(--rouge-clair); }
.ville-page .btn-outline { background:rgba(255,255,255,0.6); color:var(--anthracite); padding:13px 24px; border-radius:7px; font-size:15px; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--gris-bord); }
.ville-page .btn-outline:hover { background:var(--blanc); }

.ville-page .bande-confiance { background:var(--rouge); padding:15px 5%; display:flex; align-items:center; justify-content:center; gap:40px; flex-wrap:wrap; }
.ville-page .confiance-item { display:flex; align-items:center; gap:8px; color:var(--blanc); font-size:13px; font-weight:700; }

.ville-page .section-titre { text-align:center; margin-bottom:48px; }
.ville-page .section-label { font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--rouge); margin-bottom:10px; display:block; }
.ville-page .section-titre h2 { font-size:clamp(22px,2.8vw,34px); font-weight:900; color:var(--anthracite); line-height:1.15; }
.ville-page .section-titre p { font-size:16px; color:var(--texte-doux); margin-top:12px; max-width:600px; margin-left:auto; margin-right:auto; }

.ville-page .section-quartiers { padding:64px 5%; background:var(--blanc); }
.ville-page .quartiers-grille { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; max-width:1100px; margin:0 auto; }
.ville-page .quartier { background:var(--gris-section); border:1.5px solid var(--gris-bord); border-radius:10px; padding:18px 20px; font-size:14px; color:var(--anthracite); display:flex; align-items:center; gap:10px; transition:border-color 0.2s,transform 0.2s; }
.ville-page .quartier:hover { border-color:var(--rouge); transform:translateY(-2px); }
.ville-page .quartier-num { width:32px; height:32px; background:var(--rouge); color:var(--blanc); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:13px; flex-shrink:0; }
.ville-page .quartier strong { font-weight:700; }

.ville-page .section-faq { padding:64px 5%; background:var(--blanc); border-top:1.5px solid var(--gris-bord); }
.ville-page .faq-liste { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:9px; }
.ville-page .faq-item { background:var(--blanc); border:1.5px solid var(--gris-bord); border-radius:11px; overflow:hidden; }
.ville-page .faq-question { padding:18px 22px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; gap:14px; user-select:none; }
.ville-page .faq-question h3 { font-size:14px; font-weight:700; color:var(--anthracite); flex:1; }
.ville-page .faq-icon { width:26px; height:26px; background:var(--rouge-pale); border:1.5px solid rgba(204,22,22,0.2); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--rouge); font-size:18px; transition:transform 0.2s; line-height:1; }
.ville-page .faq-item.ouvert .faq-icon { transform:rotate(45deg); background:var(--rouge); color:var(--blanc); }
.ville-page .faq-item.ouvert { border-color:var(--rouge); }
.ville-page .faq-reponse { display:none; padding:0 22px 18px; font-size:14px; color:var(--texte-doux); line-height:1.7; }
.ville-page .faq-item.ouvert .faq-reponse { display:block; }

.ville-page .section-cta { background:var(--rouge); padding:64px 5%; text-align:center; }
.ville-page .section-cta h2 { font-size:clamp(22px,3vw,38px); font-weight:900; color:var(--blanc); line-height:1.15; margin-bottom:12px; }
.ville-page .section-cta p { font-size:16px; color:rgba(255,255,255,0.9); margin-bottom:30px; }
.ville-page .btn-blanc { background:var(--blanc); color:var(--rouge); padding:16px 36px; border-radius:7px; font-size:16px; font-weight:900; text-decoration:none; display:inline-flex; align-items:center; gap:9px; }

.ville-page footer { background:var(--anthracite); padding:52px 5% 28px; color:rgba(255,255,255,0.5); }
.ville-page .footer-grille { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:44px; margin-bottom:44px; }
.ville-page .footer-logo-ats3d { font-size:20px; font-weight:900; color:var(--blanc); }
.ville-page .footer-logo-sous { font-size:10px; color:rgba(255,255,255,0.4); letter-spacing:1.5px; text-transform:uppercase; display:block; margin-top:2px; margin-bottom:10px; }
.ville-page .footer-brand p { font-size:13px; line-height:1.7; max-width:240px; margin-top:10px; }
.ville-page .footer-col h4 { font-size:11px; font-weight:700; color:rgba(255,255,255,0.5); letter-spacing:2px; text-transform:uppercase; margin-bottom:14px; }
.ville-page .footer-col ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
.ville-page .footer-col ul li a { color:rgba(255,255,255,0.45); text-decoration:none; font-size:13px; }
.ville-page .footer-col ul li a:hover { color:var(--blanc); }
.ville-page .footer-col address { font-style:normal; font-size:13px; line-height:1.8; }
.ville-page .footer-bas { border-top:1px solid rgba(255,255,255,0.08); padding-top:24px; display:flex; align-items:center; justify-content:space-between; font-size:12px; }

@media(max-width:768px) {
  .ville-page nav{padding:0 4%}
  .ville-page .nav-links{display:none}
  .ville-page .hero-page{padding:52px 4% 56px}
  .ville-page .hero-page-inner{grid-template-columns:1fr;gap:36px}
  .ville-page .bande-confiance{gap:16px;padding:12px 4%}
  .ville-page .footer-grille{grid-template-columns:1fr 1fr;gap:28px}
  .ville-page .footer-bas{flex-direction:column;gap:10px;text-align:center}
  .ville-page .photo-texte-grille{grid-template-columns:1fr !important;gap:32px !important}
}

/* ============================================================
   Overrides (work on all pages: ville-page or existing)
   ============================================================ */

/* --- Skip to content (accessibilité) --- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  background: var(--anthracite);
  color: var(--blanc);
  padding: 10px 16px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  z-index: 9999;
  transition: top 0.2s;
}
.skip-link:focus { top: 8px; }

/* --- Focus accessibles --- */
a:focus-visible,
button:focus-visible,
.faq-question:focus-visible {
  outline: 2px solid var(--rouge);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Smooth scroll global --- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- Hamburger toggle (mobile) --- */
.nav-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}
.nav-burger span {
  display: block;
  position: relative;
  width: 24px;
  height: 2.5px;
  background: var(--anthracite);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.2s;
}
.nav-burger span::before,
.nav-burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 24px;
  height: 2.5px;
  background: var(--anthracite);
  border-radius: 2px;
  transition: transform 0.25s, top 0.25s;
}
.nav-burger span::before { top: -8px; }
.nav-burger span::after  { top:  8px; }
body.menu-open .nav-burger span { background: transparent; }
body.menu-open .nav-burger span::before { top: 0; transform: rotate(45deg); }
body.menu-open .nav-burger span::after  { top: 0; transform: rotate(-45deg); }

/* --- Mobile drawer --- */
.nav-overlay {
  position: fixed;
  inset: 72px 0 0 0;
  background: rgba(45,45,45,0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  z-index: 90;
}
body.menu-open .nav-overlay {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 768px) {
  .nav-burger { display: inline-flex; }
  nav .nav-links {
    position: fixed;
    top: 72px;
    right: 0;
    width: min(320px, 88vw);
    height: calc(100vh - 72px);
    background: var(--blanc);
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 24px 24px 120px;
    gap: 4px !important;
    box-shadow: -8px 0 32px rgba(0,0,0,0.12);
    transform: translateX(110%);
    transition: transform 0.28s ease;
    overflow-y: auto;
    z-index: 95;
    display: flex !important;
  }
  body.menu-open nav .nav-links { transform: translateX(0); }
  nav .nav-links li { width: 100%; }
  nav .nav-links a:not(.nav-tel) {
    display: block;
    padding: 14px 12px;
    border-bottom: 1px solid var(--gris-bord);
    font-size: 15px !important;
    color: var(--anthracite) !important;
  }
  nav .nav-links a.actif { color: var(--rouge) !important; }
  nav .nav-links .nav-tel {
    margin-top: 18px;
    width: 100%;
    justify-content: center;
    padding: 14px 18px !important;
    font-size: 15px !important;
  }
  body.menu-open { overflow: hidden; }
}

/* --- Sticky mobile call CTA --- */
.mobile-call-cta {
  display: none;
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 80;
  background: var(--rouge);
  color: var(--blanc);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(204,22,22,0.45), 0 2px 6px rgba(0,0,0,0.18);
  text-decoration: none;
  transition: transform 0.2s, background 0.2s;
  animation: cta-pop 0.5s ease-out 0.6s both;
}
.mobile-call-cta:hover,
.mobile-call-cta:focus-visible { background: var(--rouge-clair); transform: scale(1.06); }
.mobile-call-cta svg { width: 26px; height: 26px; }
@keyframes cta-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}
@media (max-width: 768px) { .mobile-call-cta { display: inline-flex; } }

/* --- Scroll reveal animations --- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Card hover refinement --- */
.service-card,
.avantage-card,
.zone-card,
.hero-card,
.signe-card,
.avis-card {
  transition: border-color 0.22s ease, transform 0.18s ease, box-shadow 0.22s ease;
}
.service-card:hover,
.avantage-card:hover,
.zone-card:hover {
  box-shadow: 0 12px 28px -16px rgba(204,22,22,0.35);
}

/* --- Nav refinement --- */
nav { box-shadow: 0 1px 0 var(--gris-bord); transition: box-shadow 0.2s; }
nav.scrolled { box-shadow: 0 4px 14px rgba(0,0,0,0.06); }

/* --- Better section padding consistency on small screens --- */
@media (max-width: 640px) {
  .section-services, .section-pourquoi, .section-avantages,
  .section-comparaison, .section-faq, .section-zones,
  .section-processus, .section-signes, .section-avis,
  .section-cta { padding-left: 5%; padding-right: 5%; }
  .hero, .hero-page { padding: 44px 5% 48px; }
  .hero h1, .hero-page h1 { font-size: clamp(26px, 7vw, 36px); }
  .bande-confiance { font-size: 12px; gap: 14px 22px; }
}

/* --- Tap target sizes on mobile --- */
@media (max-width: 768px) {
  .btn-rouge, .btn-outline, .btn-blanc {
    min-height: 48px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .nav-tel { min-height: 44px; }
}

/* ============================================================
   IMAGES — Photos terrain (hero, sections, galeries)
   ============================================================ */

.photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  background: var(--gris-section);
}

.hero-photo {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px -25px rgba(45,45,45,0.45);
  aspect-ratio: 4/3;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(204,22,22,0.08) 100%);
  pointer-events: none;
}

.photo-caption {
  font-size: 12px;
  color: var(--texte-doux);
  margin-top: 8px;
  font-style: italic;
  text-align: center;
}

.section-photo-texte {
  padding: 64px 5%;
  background: var(--blanc);
}
.section-photo-texte.gris { background: var(--gris-section); border-top: 1.5px solid var(--gris-bord); border-bottom: 1.5px solid var(--gris-bord); }
.photo-texte-grille {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.photo-texte-grille.inverse { direction: rtl; }
.photo-texte-grille.inverse > * { direction: ltr; }
.photo-texte-grille h2 {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 900;
  color: var(--anthracite);
  line-height: 1.15;
  margin-bottom: 16px;
}
.photo-texte-grille .section-label { margin-bottom: 8px; }
.photo-texte-grille p {
  font-size: 15px;
  color: var(--texte-doux);
  line-height: 1.7;
  margin-bottom: 14px;
}
.photo-texte-grille ul {
  list-style: none;
  padding: 0;
  margin-top: 14px;
}
.photo-texte-grille ul li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  color: var(--anthracite);
  margin-bottom: 10px;
  line-height: 1.55;
}
.photo-texte-grille ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 14px;
  background: var(--rouge);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--rouge-pale);
}
@media (max-width: 768px) {
  .photo-texte-grille { grid-template-columns: 1fr; gap: 32px; }
  .photo-texte-grille.inverse { direction: ltr; }
}

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
}
.galerie .photo {
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.galerie .photo:hover { transform: scale(1.02); }

.trust-badges {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--gris-bord);
  margin-top: 20px;
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blanc);
  border: 1.5px solid var(--gris-bord);
  border-radius: 100px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--anthracite);
  letter-spacing: 0.3px;
}
.trust-badge svg {
  width: 14px;
  height: 14px;
  color: var(--rouge);
  flex-shrink: 0;
}

/* ============================================================
   OVERRIDE — Photos en ratio naturel (portrait + paysage)
   Force les images à respecter leur ratio source au lieu d'être
   croppées dans un conteneur 4/3 paysage. Override les <style>
   inline des pages avec !important.
   ============================================================ */
.hero-photo {
  aspect-ratio: auto !important;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.hero-photo img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}
/* Les pages ville (.ville-page) utilisent aussi .hero-photo */
.ville-page .hero-photo { aspect-ratio: auto !important; max-width: 480px; margin-left: auto; margin-right: auto; }
.ville-page .hero-photo img { width: 100% !important; height: auto !important; object-fit: contain !important; }

/* --- Print-friendly --- */
@media print {
  nav, .mobile-call-cta, .nav-overlay, .section-cta, footer .footer-bas { display: none !important; }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
}