/* ============================================================
   NORMOVE — feuille de styles
   Base reprise du design (helmet), règles de survol extraites
   des attributs style-hover, puis adaptations mobiles.
   ============================================================ */

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #F7F6F2;
  color: #0B1F33;
  -webkit-font-smoothing: antialiased;
}
a { color: #0B1F33; text-decoration: none; }
a:hover { color: #A88A07; }
img { max-width: 100%; }

/* Pages légales : liens dorés (comme dans le design) */
.page-legal a { color: #A88A07; }
.page-legal a:hover { color: #C7A008; }
.page-legal nav a { color: #0B1F33; }


/* ---------- Bandeau promotionnel déroulant ---------- */
.promo-bar {
  background: #0B1F33;
  color: #DCE4EE;
  font-size: 13px;
  padding: 9px 0;
  overflow: hidden;
  border-bottom: 1px solid #14304C;
  position: relative;
}
.promo-track {
  display: flex;
  width: max-content;
  animation: marquee 46s linear infinite;
  will-change: transform;
}
.promo-bar:hover .promo-track,
.promo-bar:focus-within .promo-track { animation-play-state: paused; }
.mq-item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-right: 14px;
  white-space: nowrap;
  font-weight: 600;
}
.mq-sep { color: #40597A; }
.promo-bar a { color: #DCE4EE; }
.promo-bar a:hover { color: #EFC93D; }
.mq-cta {
  background: #C7A008;
  color: #0B1F33 !important;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 12px;
}
.mq-cta:hover { background: #EFC93D; color: #0B1F33 !important; }
.mq-tel { color: #EFC93D !important; font-weight: 700; }

/* ---------- Animations ---------- */
@keyframes floatBadge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes rollIn { 0% { transform: translateX(-7px); } 50% { transform: translateX(7px); } 100% { transform: translateX(-7px); } }

/* ---------- Survols (issus de style-hover) ---------- */
.hv1:hover  { background: #EFC93D; }
.hv2:hover  { background: #1A3450; }
.hv3:hover  { background: #1A3450; }
.hv4:hover  { box-shadow: 0 20px 44px rgba(11,31,51,0.12); transform: translateY(-4px); }
.hv5:hover  { box-shadow: 0 20px 44px rgba(11,31,51,0.12); transform: translateY(-4px); }
.hv6:hover  { box-shadow: 0 20px 44px rgba(11,31,51,0.12); transform: translateY(-4px); }
.hv7:hover  { background: #EFC93D; }
.hv8:hover  { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(11,31,51,0.12); }
.hv9:hover  { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(11,31,51,0.12); }
.hv10:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(11,31,51,0.12); }
.hv11:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(11,31,51,0.12); }
.hv12:hover { color: #A88A07; }
.hv13:hover { color: #A88A07; }
.hv14:hover { background: #EFC93D; }


/* ---------- Menu mobile (burger) ---------- */
.nav-toggle { display: none; }
.nav-tel { display: none; }

@media (max-width: 1000px) {
  nav {
    position: sticky;
    flex-wrap: nowrap !important;
    padding: 11px 18px !important;
    gap: 12px !important;
  }
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    flex-shrink: 0;
    padding: 0 11px;
    background: transparent;
    border: 1px solid #E4E1D6;
    border-radius: 10px;
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    height: 2px;
    background: #0B1F33;
    border-radius: 2px;
    transition: transform .22s ease, opacity .18s ease;
  }
  nav.open .nav-toggle { background: #0B1F33; border-color: #0B1F33; }
  nav.open .nav-toggle span { background: #EFC93D; }
  nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
  nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 6px 0 10px !important;
    background: #F7F6F2;
    border-bottom: 1px solid #E4E1D6;
    box-shadow: 0 20px 38px rgba(11,31,51,0.12);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
  nav.open .nav-links { display: flex !important; }
  .nav-links a {
    padding: 15px 20px;
    font-size: 16.5px !important;
    font-weight: 700;
    border-bottom: 1px solid #EAE7DC;
  }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-links a:active { background: #EFEDE4; }

  .nav-tel {
    display: block;
    color: #A88A07 !important;
    font-size: 15.5px !important;
  }
  .nav-tel span { display: block; font-size: 12px; font-weight: 600; color: #6B7A8C; margin-bottom: 2px; }

  nav > div:last-of-type a[href*="devis"] { padding: 10px 15px !important; font-size: 13px !important; }
  nav img { height: 38px !important; }
}

@media (max-width: 380px) {
  nav > div:last-of-type a[href*="devis"] { display: none; }
}

/* ---------- Accessibilité clavier ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid #C7A008;
  outline-offset: 2px;
}
input:focus, select:focus, textarea:focus { border-color: #C7A008 !important; }

/* ---------- Carrousel d'avis ---------- */
.avis-nav { user-select: none; }
.avis-dot { flex-shrink: 0; }

/* ---------- FAQ ---------- */
.faq-q { text-align: left; }

/* ---------- État d'envoi du formulaire ---------- */
.form-note { min-height: 0; }

/* ============================================================
   ADAPTATION MOBILE / TABLETTE
   Uniquement des media queries : l'affichage ordinateur
   (au-dessus de 1000 px) est strictement celui du design.
   ============================================================ */

@media (max-width: 1000px) {
  body > header, body > section, body > footer,
  .page-legal main {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* Bandeau promotionnel */
  .promo-bar { font-size: 12px !important; padding: 7px 0 !important; }
  .promo-track { animation-duration: 34s; }


  /* Grilles -> une colonne */
  #top,
  #apropos,
  [style*="auto minmax(0,1fr) auto"],
  [style*="repeat(4,minmax(0,1fr))"],
  [style*="minmax(0,1fr) minmax(0,1fr)"],
  [style*="minmax(0,0.9fr) minmax(0,1.1fr)"],
  [style*="repeat(3,1fr)"],
  [style*="1.4fr 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }

  /* Bandeau des 5 labels */
  [style*="repeat(5,minmax(0,1fr))"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    padding: 0 22px !important;
  }

  /* Visuels */
  #top [style*="height:440px"] { height: 260px !important; }
  [style*="grid-template-rows:200px 200px"] {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-rows: 130px 130px !important;
  }

  /* Méthode : on masque le pointillé horizontal */
  [style*="repeating-linear-gradient"] { display: none !important; }

  /* Carte */
  [style*="min-height:420px"] { min-height: 320px !important; }

  /* Avis : une carte visible */
  [style*="flex:0 0 calc(33.333% - 16px)"] { flex: 0 0 100% !important; }

  /* Typographie */
  h1 { font-size: 32px !important; line-height: 1.15 !important; }
  h2 { font-size: 25px !important; }
  [style*="font-size:88px"] { font-size: 54px !important; }
  [style*="font-size:38px"] { font-size: 30px !important; }
  [style*="max-width:52ch"], [style*="max-width:60ch"] { max-width: 100% !important; }

  /* Espacements verticaux */
  body > section { padding-top: 48px !important; padding-bottom: 48px !important; }
  #top { padding-top: 44px !important; padding-bottom: 36px !important; }

  /* Formulaire de devis */
  [style*="border-radius:16px;padding:36px"] { padding: 24px !important; }


  /* Encart "-25 %" superposé au visuel : on le ramène dans l'écran */
  [style*="bottom:-20px;left:-20px"] {
    left: 0 !important;
    bottom: -12px !important;
    max-width: calc(100% - 24px) !important;
  }

  /* Pied de page */
  footer [style*="justify-content:space-between"] { flex-direction: column; }
}

@media (max-width: 560px) {
  [style*="repeat(5,minmax(0,1fr))"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="grid-template-rows:200px 200px"] { grid-template-rows: 120px 120px !important; }
  h1 { font-size: 27px !important; }
  h2 { font-size: 22px !important; }
  nav img { height: 34px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  /* Le bandeau ne défile plus : on le centre et on n'affiche qu'un message */
  .promo-bar { overflow-x: auto; }
  .promo-track { animation: none !important; transform: none !important; width: auto; justify-content: flex-start; padding: 0 20px; }
  .promo-track .mq-item:not(:first-child) { display: none; }
}