/* ============================================================
   SC Récupération — shared.css
   Styles communs à toutes les pages PHP
   Importé via header/header.php
   ============================================================ */

/* ── Polices ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700;800&display=swap');

/* ── Variables ────────────────────────────────────────────── */
:root {
  --sc-orange:       #f97316;
  --sc-orange-dark:  #ea580c;
  --sc-dark:         #0f172a;
  --sc-dark-2:       #1e293b;
  --sc-dark-3:       #334155;
  --sc-text:         #374151;
  --sc-text-light:   #6b7280;
  --sc-gray-50:      #f9fafb;
  --sc-gray-100:     #f3f4f6;
  --sc-gray-200:     #e5e7eb;
  --sc-white:        #ffffff;
  --sc-radius:       14px;
  --sc-radius-sm:    8px;
  --sc-shadow:       0 4px 20px rgba(0,0,0,.09);
  --sc-shadow-lg:    0 10px 48px rgba(0,0,0,.16);
  --sc-trans:        all .22s ease;
}

/* ── Reset partiel ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Typographie globale ──────────────────────────────────── */
body {
  font-family: 'Inter', 'Segoe UI', sans-serif !important;
  line-height: 1.65 !important;
  color: var(--sc-text) !important;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: 'Poppins', 'Segoe UI', sans-serif !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--sc-dark) !important;
}

h1 { font-size: clamp(1.8rem, 4vw, 2.6rem) !important; }

h2 {
  font-size: 1.75rem !important;
  margin-bottom: .5rem !important;
  margin-top: 1.2rem !important;
  text-align: center !important;
}
/* Filet orange sous chaque h2 */
h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 4px;
  background: linear-gradient(90deg, var(--sc-orange), var(--sc-orange-dark));
  border-radius: 2px;
  margin: .55rem auto 1rem;
}

h3 {
  font-size: 1.1rem !important;
  margin-bottom: .5rem !important;
  color: var(--sc-dark) !important;
}

p {
  font-size: 1rem !important;
  line-height: 1.7 !important;
  color: var(--sc-text-light) !important;
  margin-bottom: .9rem;
}

strong {
  color: var(--sc-text) !important;
  font-weight: 600 !important;
}

a { transition: var(--sc-trans); }

/* ── Header / navigation ──────────────────────────────────── */
header {
  box-shadow: 0 2px 16px rgba(0,0,0,.08) !important;
}

/* Lien actif dans le nav */
nav li#select > a {
  color: var(--sc-orange) !important;
  background: rgba(249,115,22,.1) !important;
  border-radius: 20px !important;
}

nav a:hover {
  color: #fff !important;
  background: var(--sc-dark) !important;
  border-radius: 20px !important;
}

/* Infos bannière header */
.banner .mail {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  color: var(--sc-dark) !important;
}
.banner .telephone,
.banner .adresse {
  font-size: .95rem !important;
  font-weight: 500 !important;
  color: var(--sc-dark-3) !important;
}

/* ── Hero image (.top-head) ───────────────────────────────── */
.top-head {
  position: relative;
  border-radius: 20px !important;
  overflow: hidden;
  margin: 1.5rem auto !important;
  max-width: 1200px;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  padding: 2rem !important;
}
.top-head::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.65) 0%,
    rgba(0,0,0,.2) 60%,
    transparent 100%
  );
  border-radius: 20px;
  pointer-events: none;
}
.top-head #title {
  position: relative;
  z-index: 2;
  background: none !important;
  background-color: transparent !important;
  color: #fff !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.6);
  font-size: 2.4rem !important;
  text-align: left !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Sous-titre haut de page ──────────────────────────────── */
.paragraph-top {
  font-size: 1.05rem !important;
  color: var(--sc-text-light) !important;
  text-align: center !important;
  max-width: 720px;
  margin: .4rem auto .6rem !important;
  font-weight: 400 !important;
}

/* ── Badge enlèvement/dépannage ───────────────────────────── */
.enlevement,
.depannage {
  background: linear-gradient(135deg, var(--sc-orange-dark), var(--sc-orange)) !important;
  border-radius: 50px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: .5px;
  padding: .45rem 1.4rem !important;
  box-shadow: 0 4px 16px rgba(249,115,22,.35);
  display: inline-flex !important;
  margin: .8rem auto !important;
}

/* ── Processus (#process) ─────────────────────────────────── */
#process {
  max-width: 860px !important;
  margin: 2rem auto !important;
  background: var(--sc-gray-50) !important;
  border-radius: var(--sc-radius) !important;
  padding: 2rem 2.2rem !important;
  border: 1px solid var(--sc-gray-200);
}

#process h2 {
  font-size: 1.5rem !important;
  text-align: center !important;
  margin-bottom: 1.5rem !important;
}

#process ol {
  list-style: none !important;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 0 !important;
}

#process li {
  counter-increment: step;
  position: relative !important;
  display: block !important;
  background: var(--sc-white);
  border-radius: var(--sc-radius-sm);
  padding: .85rem 1.2rem .85rem 3rem !important;
  margin-bottom: 0 !important;
  font-size: .95rem !important;
  color: var(--sc-text) !important;
  line-height: 1.6 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  border-left: 3px solid var(--sc-orange);
  transition: var(--sc-trans);
}
#process li:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
}

/* Cercle numéroté — positionné en absolu à gauche */
#process li::before {
  content: counter(step) !important;
  position: absolute !important;
  left: .55rem !important;
  top: .8rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: var(--sc-orange) !important;
  color: #fff !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: .82rem !important;
  line-height: 1 !important;
  border: none !important;
  margin: 0 !important;
}

/* ── Cards de services (#services articles) ───────────────── */
#services {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 1rem !important;
}

#services article {
  background: var(--sc-white) !important;
  border-radius: var(--sc-radius) !important;
  box-shadow: var(--sc-shadow) !important;
  border: 1px solid var(--sc-gray-200) !important;
  padding: 1.8rem !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
  overflow: hidden;
}

#services article:hover {
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow: var(--sc-shadow-lg) !important;
  border-color: var(--sc-orange) !important;
}

#services h3 {
  font-family: 'Poppins', sans-serif !important;
  color: var(--sc-dark) !important;
  font-size: 1.05rem !important;
  text-align: left !important;
  padding-left: 1rem !important;
  position: relative;
  margin-bottom: .8rem !important;
  border-bottom: 1px solid var(--sc-gray-200);
  padding-bottom: .6rem !important;
}
#services h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background: var(--sc-orange);
  border-radius: 2px;
}

#services p {
  text-align: left !important;
  font-size: .9rem !important;
}

#services img {
  border-radius: var(--sc-radius-sm) !important;
  width: 100% !important;
  max-height: 260px;
  object-fit: cover;
  margin: 1rem 0 !important;
}

/* ── Numéro de téléphone inline ───────────────────────────── */
/* Empêche la coupure entre les chiffres sur mobile */
.tel-link {
  white-space: nowrap !important;
  color: var(--sc-orange) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: var(--sc-trans);
}
.tel-link:hover {
  color: var(--sc-orange-dark) !important;
  text-decoration: underline !important;
}

/* Bannière header — téléphone ne se coupe pas */
.banner .telephone {
  white-space: nowrap !important;
}

/* Bouton appel bandeau épaves — icône + numéro sur même ligne */
.btn-appel {
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}
.btn-appel-num {
  white-space: nowrap !important;
}

/* ── Boutons d'action ─────────────────────────────────────── */
.cta-button {
  display: inline-flex !important;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.8rem !important;
  background: linear-gradient(135deg, var(--sc-orange), var(--sc-orange-dark)) !important;
  color: #fff !important;
  border-radius: 50px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: .95rem !important;
  box-shadow: 0 4px 16px rgba(249,115,22,.4) !important;
  transition: var(--sc-trans) !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer;
}
.cta-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(249,115,22,.5) !important;
  background: linear-gradient(135deg, var(--sc-orange-dark), #c2410c) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* ── Index — sections services ────────────────────────────── */
.sections section {
  background: var(--sc-white) !important;
  border-radius: var(--sc-radius) !important;
  padding: 1.6rem !important;
  box-shadow: var(--sc-shadow) !important;
  border: 1px solid var(--sc-gray-200) !important;
  transition: box-shadow .22s, border-color .22s;
  margin-bottom: 0 !important;
  position: relative !important;
}
.sections section:hover {
  box-shadow: var(--sc-shadow-lg) !important;
  border-color: var(--sc-orange) !important;
}
.sections section h2 {
  font-size: 1.05rem !important;
  text-align: left !important;
  margin-top: 0 !important;
}
/* On garde le filet mais à gauche plutôt que centré */
.sections section h2::after {
  margin-left: 0 !important;
  width: 36px;
}
.sections section p {
  font-size: .9rem !important;
  color: var(--sc-text-light) !important;
}
.sections section a:not(.enlevement) {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--sc-orange) !important;
  font-weight: 600 !important;
  font-size: .88rem !important;
  margin-top: .5rem;
  text-decoration: none !important;
}
.sections section a:not(.enlevement)::after {
  content: '→';
  font-size: .85rem;
  transition: transform .2s;
}
.sections section:hover a:not(.enlevement)::after {
  transform: translateX(4px);
}

/* ── Important text (mots-clés SEO) ──────────────────────── */
.important {
  color: var(--sc-orange) !important;
  font-weight: 600 !important;
}

/* ── Métaux — liste avec ombres ───────────────────────────── */
.ombre-liste {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem !important;
  padding: 0 !important;
  margin: 1rem 0;
  justify-content: flex-start !important;
}
.ombre-liste li {
  background: var(--sc-dark) !important;
  color: var(--sc-white) !important;
  border-radius: 50px !important;
  padding: .35rem 1rem !important;
  box-shadow: none !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  transition: background .2s;
  list-style: none !important;
}
.ombre-liste li:hover {
  background: var(--sc-orange) !important;
}

/* ── Contact — titre ──────────────────────────────────────── */
.titre {
  background: linear-gradient(135deg, var(--sc-dark), var(--sc-dark-2)) !important;
  border-radius: 16px !important;
  font-size: 2rem !important;
  padding: 1.4rem 2rem !important;
  color: #fff !important;
  text-align: center !important;
  margin: 0 !important;
  font-family: 'Poppins', sans-serif !important;
  letter-spacing: -.3px;
}
.titre::after { display: none !important; }

/* ── Contact — encart .description ───────────────────────── */
.description {
  max-width: 700px;
  margin: 1.5rem auto !important;
  font-size: .95rem !important;
  text-align: center !important;
  color: var(--sc-text-light) !important;
}

/* ── Puces de départements ────────────────────────────────── */
.departments {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-top: .8rem;
}
.department {
  display: inline-block;
  background: var(--sc-dark) !important;
  color: var(--sc-white) !important;
  font-weight: 600;
  font-size: .85rem;
  padding: .35rem 1rem;
  border-radius: 50px;
  transition: background .2s;
  cursor: default;
}
.department:hover {
  background: var(--sc-orange) !important;
}

/* ── Contact — carte info ─────────────────────────────────── */
.contact-info {
  background: var(--sc-white) !important;
  border: 1px solid var(--sc-gray-200) !important;
  border-radius: var(--sc-radius) !important;
  box-shadow: var(--sc-shadow) !important;
  padding: 2rem !important;
}
.contact-info h2 {
  color: var(--sc-dark) !important;
  font-size: 1.4rem !important;
}
.contact-info p {
  color: var(--sc-text-light) !important;
  font-weight: 500 !important;
  font-size: .95rem !important;
}
.contact-info a {
  color: var(--sc-orange) !important;
  font-weight: 700;
}

.map iframe {
  border-radius: var(--sc-radius) !important;
  box-shadow: var(--sc-shadow) !important;
}

/* ── Métaux — sections ────────────────────────────────────── */
.notre-metier,
.nos-services,
.nos-engagements {
  border-radius: var(--sc-radius) !important;
  border: 1px solid var(--sc-gray-200);
  overflow: hidden;
}

/* Listes generales */
ul li:not(.ombre-liste li):not(.bandeau-epave-liste li) {
  line-height: 1.7;
  color: var(--sc-text-light);
}
ul li strong { color: var(--sc-text) !important; }
ol li strong  { color: var(--sc-text) !important; }

/* ── Images dans les articles ─────────────────────────────── */
.images img {
  border-radius: var(--sc-radius-sm) !important;
  box-shadow: var(--sc-shadow) !important;
  object-fit: cover;
}

/* ── Footer ─────────────────────────────────────────────────
   (responsive)
   ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .services {
    flex-wrap: wrap !important;
    gap: 1.2rem !important;
    justify-content: center !important;
  }
  .service {
    width: 40% !important;
  }
  footer > p {
    font-size: .8rem !important;
    padding: 0 1rem;
  }
}

/* ── Override global des tailles trop grandes
   définies dans les CSS page par page ──────────────────── */
h2 { font-size: 1.75rem !important; }
h3 { font-size: 1.1rem !important; }
p  { font-size: 1rem !important; }

/* Pages internes : texte des listes trop grand (1.4–1.6rem) */
#services p,
#process li,
section p,
.main p,
.top-paragraph,
ul li {
  font-size: .95rem !important;
}

/* Spécifique métaux */
.notre-metier p,
.nos-services p,
.nos-engagements p {
  font-size: .95rem !important;
}

/* ── Footer ───────────────────────────────────────────────── */
footer {
  background: var(--sc-dark-2) !important;
  color: rgba(255,255,255,.75) !important;
  padding: 2.5rem 1.5rem !important;
  border-top: none !important;
}

.services {
  gap: 2.5rem !important;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin-bottom: 1.5rem !important;
}

.service i {
  color: var(--sc-orange) !important;
  font-size: 2rem !important;
  margin-bottom: .5rem !important;
}

.service p {
  color: rgba(255,255,255,.7) !important;
  font-size: .85rem !important;
  font-weight: 500 !important;
}

footer > p {
  color: rgba(255,255,255,.55) !important;
  font-size: .85rem !important;
  max-width: 600px;
  margin: 0 auto 1.2rem !important;
  line-height: 1.6 !important;
}

.contact-button {
  display: inline-flex !important;
  align-items: center;
  gap: .5rem;
  background: var(--sc-orange) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-family: 'Poppins', sans-serif !important;
  padding: .7rem 2rem !important;
  border-radius: 50px !important;
  font-size: .95rem !important;
  box-shadow: 0 4px 16px rgba(249,115,22,.4) !important;
  transition: var(--sc-trans) !important;
  text-decoration: none !important;
}
.contact-button:hover {
  background: var(--sc-orange-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(249,115,22,.5) !important;
}

/* ════════════════════════════════════════
   RESPONSIVE — breakpoints complets
   ════════════════════════════════════════ */

/* ── Slider ───────────────────────────── */
@media (max-width: 768px) {
  .slider {
    height: 240px !important;
    margin-top: 8px !important;
    border-radius: 12px !important;
  }
  .slide-caption {
    font-size: 1.2rem !important;
    top: 30% !important;
  }
  .slide-bottom-caption {
    font-size: 1rem !important;
    top: 50% !important;
  }
}

/* ── Header navigation ────────────────── */
@media (max-width: 767px) {
  header {
    padding-top: 10px !important;
  }
  .banner {
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px;
    padding: 0 1rem;
  }
  .banner .mail {
    font-size: 1.4rem !important;
  }
  .banner .telephone,
  .banner .adresse {
    font-size: .78rem !important;
  }
  nav ul {
    gap: 2px !important;
  }
  nav a {
    font-size: .78rem !important;
    padding: 0 .55rem !important;
    height: 44px !important;
  }
}

/* ── Hero .top-head ───────────────────── */
@media (max-width: 768px) {
  .top-head {
    min-height: 180px !important;
    padding: 1.2rem !important;
    margin: .8rem !important;
    border-radius: 12px !important;
  }
  .top-head #title {
    font-size: 1.3rem !important;
  }
}

/* ── Paragraphes intro ────────────────── */
@media (max-width: 768px) {
  .paragraph-top {
    font-size: .9rem !important;
    padding: 0 1rem !important;
  }
  p {
    font-size: .9rem !important;
  }
  h2 {
    font-size: 1.25rem !important;
  }
  h3 {
    font-size: 1rem !important;
  }
}

/* ── Bandeau épaves ───────────────────── */
@media (max-width: 600px) {
  .bandeau-epave {
    padding: 1rem !important;
  }
  .bandeau-epave-inner {
    border-radius: 10px !important;
  }
  .bandeau-epave-titre {
    font-size: 1.4rem !important;
  }
  .btn-appel-num {
    font-size: 1.1rem !important;
  }
}

/* ── Process ──────────────────────────── */
@media (max-width: 768px) {
  #process {
    padding: 1.2rem 1rem !important;
    margin: 1rem !important;
    border-radius: 10px !important;
  }
  #process h2 {
    font-size: 1.15rem !important;
  }
  #process li {
    font-size: .88rem !important;
    padding: .75rem 1rem .75rem 2.8rem !important;
  }
}

/* ── Cards #services ──────────────────── */
@media (max-width: 1024px) {
  #services article {
    flex: 0 0 calc(48% - 10px) !important;
  }
}
@media (max-width: 640px) {
  #services {
    padding: 1.5rem .8rem !important;
  }
  #services article {
    flex: 0 0 100% !important;
    margin: 0 0 .8rem !important;
  }
  #services h3 {
    font-size: .95rem !important;
  }
  #services p {
    font-size: .85rem !important;
  }
  #services img {
    max-height: 180px !important;
  }
}

/* ── Index — grille sections ──────────── */
@media (max-width: 900px) {
  .sections {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
    padding: 0 1rem !important;
  }
}
@media (max-width: 560px) {
  .sections {
    grid-template-columns: 1fr !important;
  }
  .sections section {
    padding: 1.2rem !important;
  }
  .enlevement,
  .depannage {
    font-size: .8rem !important;
    padding: .3rem 1rem !important;
  }
}

/* ── Images .images ───────────────────── */
@media (max-width: 640px) {
  .images {
    flex-direction: column !important;
    gap: .6rem;
  }
  .images img {
    width: 100% !important;
  }
}

/* ── Contact ──────────────────────────── */
@media (max-width: 768px) {
  .contact {
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 1rem;
  }
  .contact-info {
    width: 100% !important;
    margin-right: 0 !important;
  }
  .map iframe {
    height: 280px !important;
  }
  .titre {
    font-size: 1.4rem !important;
    padding: 1rem !important;
  }
  .description {
    padding: 0 1rem !important;
    font-size: .88rem !important;
  }
  .departments {
    gap: .4rem !important;
  }
  .department {
    font-size: .78rem !important;
    padding: .28rem .8rem !important;
  }
}