/* ================== BASE GLOBALE ================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: Arial, sans-serif;
  color: #e5e7eb;

  /* fond de base (toutes pages) */
  background-color: #020617;

  /* espace pour menu fixe */
  padding-top: 110px;

  opacity: 1;
  transform: none;
  animation: none;
}
/* ===== FOND GLOBAL UNIQUEMENT PAGE ACCUEIL ===== */
body.home-page {
  /* IMPORTANT : évite les traits blancs sur iPhone */
  background-attachment: scroll;
}

/* Si tu veux “fixed” sur PC seulement */
@media (min-width: 900px) {
  body.home-page {
    background-attachment: fixed;
  }
}
a {
  color: #93c5fd;
  text-decoration: none;
}

/* Fade-in global + voile premium */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 0% 0%, rgba(212, 175, 55, 0.08), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(0, 188, 255, 0.08), transparent 55%);
  opacity: 0.7;
  mix-blend-mode: soft-light;
  animation: bgFloat 18s ease-in-out infinite alternate;
}

@keyframes pageFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bgFloat {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -10px, 0) scale(1.03); }
}
/* menu légèrement plus compact au scroll */
.main-header.scrolled {
  padding: 6px 0;
  background: rgba(0, 0, 0, 0.55);
  border-bottom-color: rgba(212, 175, 55, 0.35);
}

/* Conteneur du menu */
.main-menu {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* Liens de menu – style gold premium */
.main-menu a {
  padding: 10px 20px;
  font-weight: bold;
  font-size: 30px;
  border-radius: 14px;
  text-decoration: none;
  background: linear-gradient(90deg,#D4AF37,#C99200);
  color: black;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  transition: all .25s ease;
}

.main-menu a:hover {
  transform: translateY(-2px) scale(1.07);
  box-shadow: 0 6px 18px rgba(212,175,55,0.55);
  filter: brightness(1.15);
}

/* Sur mobile : boutons plus petits */
@media (max-width: 600px) {
  .main-menu a {
    padding: 8px 16px;
    font-size: 15px;
    border-radius: 12px;
  }
}

/* ================== LOGO PRO-ELEC ================== */

.site-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.site-logo img {
  height: 650px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(0,0,0,0.7));
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
  animation: logoFade 1.4s ease-out forwards, logoGlow 4s ease-in-out infinite;
}

@keyframes logoFade {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes logoGlow {
  0%   { filter: drop-shadow(0 0 10px rgba(0,0,0,0.7)); }
  50%  { filter: drop-shadow(0 0 18px rgba(212,175,55,0.7)); }
  100% { filter: drop-shadow(0 0 10px rgba(0,0,0,0.7)); }
}

/* ================== HERO ACCUEIL ================== */

.hero {
  position: relative;
  background-image: url("Images/Fond-ecran-4.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 350px;
  padding: 80px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #f7f7f7;
  text-shadow: 6px 6px 12px rgba(0,0,0,0.8);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35); /* voile sombre */
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero-subtitle {
  margin-top: 10px;
  font-size: 1rem;
  opacity: 0.9;
}

.hero-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: bold;
  border: none;
}

.btn-orange { background:#f97316; color:white; }
.btn-green  { background:#22c55e; color:white; }
.btn-blue   { background:#3b82f6; color:white; }

.btn-premium {
  background: linear-gradient(90deg,#D4AF37,#C99200);
  color: black;
  font-weight: bold;
  padding: 12px 20px;
  border-radius: 50px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(212,175,55,0.7); }
  70%  { box-shadow: 0 0 15px 12px rgba(212,175,55,0); }
  100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
}

/* ================== SECTIONS GÉNÉRALES ================== */

.section {
  padding: 40px 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.section h1 {
  text-align: center;
  font-size: 2.4rem;
  margin-bottom: 10px;
}

.section h2 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.8rem;
}

/* centre texte et limite largeur des blocs principaux */
.section,
.section p,
.section h1,
.section h2,
.section h3 {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 15px;
  text-align: center;
}

ul {
  list-style-position: inside;
  text-align: center;
  padding: 0;
  margin: 0 auto;
}

/* ================== SERVICES ================== */

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 20px;
}

.service-item {
  background:rgba(15,23,42,0.55);
  padding:20px;
  border-radius:12px;
  text-align:center;
  box-shadow:0 10px 25px rgba(0,0,0,0.4);
}

.service-item h3 {
  font-size:2rem;
  margin-bottom:10px;
}

.service-item p {
  font-size:1rem;
  opacity:1;
}

.service-item a {
    background: linear-gradient(90deg,#D4AF37,#C99200);
  color: black;
  font-weight: bold;
  padding: 12px 20px;
  border-radius: 50px;
  animation: pulse 2s infinite;
  display:inline-block;
  margin-top:8px;
}

.service-item a:hover {
  text-decoration:underline;
}

/* Liste services page dédiée */
.services-list a {
  font-size: 1.6rem;
  color: #3b82f6;
  font-weight: bold;
  text-decoration: none;
}
/* ================== FIX ALIGNEMENT TEXTE SERVICES ================== */

/* Centre le contenu des pages Services */
.services-list,
.services-list li,
.services-list p,
.services-list a {
  text-align: center;
}

/* Optionnel : recentre visuellement la liste */
.services-list {
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
}
.services-list li {
  margin-bottom: 18px;
  padding: 10px 0;
  border-bottom: 1px solid #1e293b;
}

.services-list a:hover {
  text-decoration: underline;
}

/* ================== PHOTOS ACCUEIL ================== */

.photos-row {
 background-image: url("Images/Fond-ecran-4.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 150px 90px;
  max-width:1200px;
  color: white;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:15px;
  margin-bottom:20px;

}

.photos-row img {
  width:400px;
  max-width:150%;
  border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,0.5);
  object-fit:cover;
  transition: transform .3s ease;
}

.photos-row img:hover {
  transform: scale(2);
}

.center { text-align:center; }

/* ================== BLOCS POURQUOI / CONTACT EXPRESS ================== */

.why-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,2fr));
  gap:40px;
}

.why-item {
  background:rgba(2,6,23,0.55);
  padding:18px;
  border-radius:12px;
  border:1px solid #1f2937;
    }

.contact-express {
  text-align:center;
}

.contact-express a { color:#ffffff; }

/* SECTIONS AVEC FONDS SPÉCIFIQUES SUR LA PAGE D’ACCUEIL */

.section.why {
  background-image: url("Images/Fond-ecran-6.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 190px 140px;
  color: white;
  text-shadow: 4px 4px 10px rgba(0,0,0,0.7);
  max-width:1200px;
}

.section.contact-express {
  background-image: url("Images/Fond-ecran-3.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 70px 20px;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
  color: white;
}
/* ===== AGRANDIR LE CADRE CONTACT EXPRESS ===== */
.section.contact-express {
  padding: 130px 30px;   /* ↑ hauteur du cadre */
  max-width: 1200px;     /* ↑ largeur du cadre */
}

.section.realisations {
  background-image: url("Images/Fond-ecran-4.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 70px 20px;
  max-width:1200px;
  color: white;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
}

.section.services-highlight {
  background-image: url("Images/Fond-ecran-7.jpg");
  background-size: 130%;
  background-position: center;
  background-repeat: no-repeat;
  padding: 70px 20px;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
  max-width:1200px;
  color: white;
}

/* ================== FONDS PAR PAGE ================== */

/* Services (page) */
body.page-services {
  background: url("Images/Fond-ecran-4.jpg")
  top /163% auto no-repeat;
}

/* ===== FOND GLOBAL PROPRE ===== */
body.depannage-page {
  background-image: url("Images/Fond-ecran-4.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 100% auto; /* ⬅️ PAS de zoom */
  background-attachment: fixed;
  background-color: #020617; /* couleur de secours */
}

/* Rénovation spécifique */
body.renovation-page {
  background-image: url("Images/Fond-ecran-4.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 100% auto; /* ⬅️ PAS de zoom */
  background-attachment: fixed;
  background-color: #020617; /* couleur de secours */
}

/* Rénovation générale */
body.renovation-generale-page {
  background-image: url("Images/Fond-ecran-4.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 100% auto; /* ⬅️ PAS de zoom */
  background-attachment: fixed;
  background-color: #020617; /* couleur de secours */
}

/* Mise aux normes */
body.normes-page {
  background-image: url("Images/Fond-ecran-4.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 100% auto; /* ⬅️ PAS de zoom */
  background-attachment: fixed;
  background-color: #020617; /* couleur de secours */
}

/* Tableaux électriques */
body.tableau-page {
 background-image: url("Images/Fond-ecran-4.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 100% auto; /* ⬅️ PAS de zoom */
  background-attachment: fixed;
  background-color: #020617; /* couleur de secours */
}

/* Éclairage */
body.eclairage-page {
background-image: url("Images/Fond-ecran-4.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 100% auto; /* ⬅️ PAS de zoom */
  background-attachment: fixed;
  background-color: #020617; /* couleur de secours */
}
/* Galerie */
body.gallery-page {
 background-image: url("Images/Fond-ecran-4.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 110% auto; /* ⬅️ PAS de zoom */
  background-attachment: fixed;
  background-color: #020617; /* couleur de secours */
}

/* Texte or premium dans la page Galerie */

.gallery-page h1,
.gallery-page h2 {
    color: #D4AF37 !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

.gallery-page p {
  color: #F3F4F6 !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

/* AVIS CLIENTS */
body.review-page {
background-image: url("Images/Fond-ecran-4.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto; /* ⬅️ PAS de zoom */
  background-attachment: fixed;
  background-color: #020617; /* couleur de secours */
}

/* Contact */
body.contact-page {
  background-image: url("Images/Fond-ecran-4.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 110% auto; /* ⬅️ PAS de zoom */
  background-attachment: fixed;
  background-color: #020617; /* couleur de secours */
  color:#F3F4F6;
}

/* CERTIFICATIONS */
body.certifications-page {
background-image: url("Images/Fond-ecran-4.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 110% auto; /* ⬅️ PAS de zoom */
  background-attachment: fixed;
  background-color: #020617; /* couleur de secours */
}

/* ================== PAGE CONTACT / FORMULAIRE ================== */

form {
  max-width: 700px;
  margin: auto;
  font-size: 18px;
}

form input,
form textarea {
  padding: 12px;
  font-size: 18px;
  width: 100%;
  box-sizing: border-box;
}

form button {
  width: 100%;
  padding: 15px;
  font-size: 20px;
  border-radius: 8px;
  background: #00b4d8;
  color: white;
  font-weight: bold;
  border: none;
}

form button:hover {
  background: #0080a8;
  cursor: pointer;
}

/* Formulaire stylé */
.form-pro {
  max-width: 450px;
  margin: 0 auto;
  background: rgba(0,0,0,0.25);
  padding: 20px;
  border-radius: 12px;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

.form-row {
  margin-bottom: 15px;
}

.form-row label {
  display: block;
  font-weight: bold;
  margin-bottom: 6px;
  color: #e5e7eb;
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #0077cc;
  background: rgba(0,0,0,0.3);
  color: white;
  font-size: 15px;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border: 2px solid #00b3ff;
}

.form-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(45deg,#00b3ff,#0096e6);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s;
}

.form-btn:hover {
  transform: scale(1.03);
}

/* ================== CERTIFICATIONS ================== */

.certifications-section {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
}

.certifications-page .site-logo {
  margin-bottom: 5px;
}

.certifications-page .site-logo img {
  height: 300px;
}

.certifications-section h1 {
  margin-bottom: 5px;
}

.certifications-section p {
  margin-bottom: 20px;
}

.certifications-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.cert-card {
  background: rgba(15,23,42,0.85);
  border-radius: 10px;
  padding: 20px;
  text-align: left;
  color: #e5e7eb;
  box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.cert-card h2 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 20px;
}

.cert-card ul {
  list-style-position: inside;
  padding: 0;
  margin: 10px 0 15px 0;
}

.cert-card li {
  margin-bottom: 5px;
}

.btn-doc {
  display: inline-block;
  padding: 10px 16px;
  background: #2563eb;
  color: #ffffff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  font-size: 14px;
}

.btn-doc:hover {
  background: #1d4ed8;
}

.cert-note {
  font-size: 14px;
  color: #cbd5f5;
}

/* ================== BLOG & ARTICLES ================== */

.blog-page {
  background-image: url("Images/Fond-ecran-4.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 185% auto; /* ⬅️ PAS de zoom */
  background-attachment: fixed;
  background-color: #020617; /* couleur de secours */
  color: #F5F5F5;
  padding: 40px 15px;
}

.blog-page .blog-header {
  background: rgba(0,0,0,0.55);
  padding: 20px;
  border-radius: 12px;
  backdrop-filter: blur(3px);
  max-width: 900px;
  margin: 0 auto 20px auto;
}

.article-list {
  display: grid;
  gap: 20px;
  max-width: 1000px;
  margin: 20px auto 0 auto;
}

.article-list article {
  background: rgba(0,0,0,0.55);
  padding: 20px;
  border-radius: 12px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.article-list article h2 {
  margin-bottom: 8px;
}

.article-list article p {
  margin-bottom: 10px;
}

.article-list article a {
  color: #38bdf8;
  text-decoration: underline;
  font-weight: bold;
}

.blog-article {
  background-image: url("Images/Fond-ecran-4.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 115% auto; /* ⬅️ PAS de zoom */
  background-attachment: fixed;
  background-color: #020617; /* couleur de secours */
  color: #e5e7eb;
  padding: 40px 15px;
}

.blog-article .content {
  max-width: 900px;
  margin: 0 auto;
  background: rgba(0,0,0,0.45);
  padding: 20px;
  border-radius: 12px;
  backdrop-filter: blur(8px);
}

/* ================== TARIFS ================== */

.tarifs-header {
  background: rgba(0,0,0,0.45);
  padding: 25px 15px;
  border-radius: 15px;
  backdrop-filter: blur(6px);
  max-width: 900px;
  margin: 0 auto 25px auto;
  text-align: center;
  color: #C99200;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

.pricing-page {
  background-image: url("Images/Fond-ecran-4.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 165% auto; /* ⬅️ PAS de zoom */
  background-attachment: fixed;
  background-color: #020617; /* couleur de secours */
  padding: 40px;
  color: #F3F4F6;
  text-align: center;
}

.pricing-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  justify-content: center;
  max-width: 1200px;
  margin: 40px auto;
}

.card {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  padding: 25px;
  border-radius: 12px;
  width: 300px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.card h2 {
  margin-bottom: 10px;
}

.price {
  font-size: 28px;
  margin-bottom: 10px;
  color: #00ff6b;
}

.card ul {
  margin: 0 0 20px 20px;
}

.card .btn {
  background: #00ff6b;
  color: black;
}

.card .btn:hover {
  background: #00e65d;
}

/* Bloc contact en bas de tarifs */
.tarif-contact-box {
  max-width: 500px;
  margin: 60px auto;
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  border-radius: 15px;
  text-align: center;
  color: #D4AF37;
  font-size: 18px;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

.tarif-contact-box p {
  margin: 8px 0;
}
/* ================== RESPONSIVE ================== */

@media (max-width: 600px) {
  .hero { padding:40px 15px; }
  .section { padding:30px 15px; }
}
/* === FIX MENU GLOBAL PRO-ELEC (VERSION STABLE) === */

/* Menu toujours fixe et stable */
.main-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
    padding: 14px 0;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(212,175,55,0.25);
    transition: all .35s ease;
}

/*  Animation scroll compacte */
.main-header.scrolled {
    padding: 6px 0 !important;
    background: rgba(0,0,0,0.55);
    border-bottom-color: rgba(212,175,55,0.35);
}
/* Réactive la fade-in sur les blocs, MAIS PAS sur le body */
.reveal {
    opacity: 0;
    transform: translateY(80px);
    transition: 2s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Reveal texte */
.reveal-text {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.4s ease, transform 1.4s ease;
}

.reveal-text.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
/* Sélectionne tous les liens des sections bas de page */
.contact a,
.tarifs-header h1,
.content a,
.contact-express a,
.center a,
.tarif-contact-box a,
footer a
.gallery-page a p{
    display: inline-block;
    padding: 10px 18px;
    margin: 6px 0;
    border-radius: 14px;
    
    background: linear-gradient(90deg,#D4AF37,#C99200); /* OR premium */
    color: black !important;
    font-weight: bold;

    text-decoration: none;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
    transition: all .25s ease;
}

/* Effet hover */
.contact a:hover,
.tarifs-header h1:hover,
.content a:hover,
.contact-express a:hover,
.center a:hover,
.tarif-contact-box a:hover,
footer a:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 18px rgba(212,175,55,0.55);
    filter: brightness(1.15);
}
/* ===== COULEURS TARIFS – PREMIUM ÉQUILIBRÉ ===== */

/* Titre principal Tarifs */
.tarifs-header h1,
.tarifs-header h2 {
  color: #F3F4F6; /* Or premium */
}

/* Texte sous le titre */
.tarifs-header p {
  color: #F3F4F6; /* Blanc cassé */
}

/* Titres des cartes */
.card h2 {
  color: #FAF7F2; /* Blanc cassé chaud */
}

/* Texte des cartes */
.card p
{
  color: #111111; /* Blanc cassé lisible */
}
.card li
{
  color: #FAF7F2; /* Blanc cassé lisible */
}

/* Prix */
.price {
  color: #22c55e; /* Vert confiance */
}

/* Texte du bloc contact en bas */
.tarif-contact-box {
  color: #F3F4F6; /* Blanc cassé */
}

.tarif-contact-box strong {
  color: #D4AF37; /* Or pour mise en valeur */
}
/* ===== AGRANDISSEMENT TEXTE PAGE TARIFS ===== */

/* Texte sous le titre principal */
.tarifs-header p {
  font-size: 1.60rem; /* ≈ 18–19px */
  line-height: 1.7;
}

/* Titres des cartes */
.card h2 {
  font-size: 1.6rem; /* ≈ 25–26px */
}

/* Texte des cartes */
.card p,
.card li {
  font-size: 1.5rem; /* ≈ 17–18px */
  line-height: 1.6;
}

/* Prix */
.price {
  font-size: 2.2rem; /* ≈ 35px */
  font-weight: bold;
}

/* Bloc contact bas de page */
.tarif-contact-box {
  font-size: 1.3rem;
}
/* ================== ALIGNEMENT GLOBAL TOTAL ================== */

/* Tous les titres */
h1, h2, h3, h4, h5, h6 {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

/* Tous les textes */
p,
span,
li,
label {
  text-align: center !important;
}

/* Sections et blocs */
.section,
.hero,
.blog-header,
.blog-article .content,
.tarifs-header,
.card,
.certifications-section,
.cert-card {
  text-align: center;
}

/* Listes parfaitement centrées */
ul {
  padding: 0;
  margin: 0 auto;
  list-style-position: inside;
}

/* ================== FORMULAIRES ================== */

form,
.form-pro {
  text-align: center;
}

.form-row label {
  text-align: center;
}

.form-row input,
.form-row textarea,
.form-row select {
  text-align: center;
}

/* ================== LIENS & BOUTONS ================== */

a,
.btn,
button {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Empêche les liens inline de casser l’alignement */
a {
  display: inline-block;
}

/* ================== FIX HOVER IMAGES (sécurité) ================== */

.photos-row img:hover {
  transform: scale(1.15); /* au lieu de 2 (évite débordement) */
  z-index: 2;
}

/* ================== FIX RESPONSIVE TEXTE ================== */

@media (max-width: 600px) {
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.4rem; }
  h3 { font-size: 1.2rem; }

  p,
  li {
    font-size: 1rem;
  }
}
/* Effet verre noir pour H1 + texte */
.glass-hero {
  max-width: 900px;
  margin: 40px auto 50px;
  padding: 30px 40px;
  
  background: rgba(0, 0, 0, 0.45); /* noir transparent */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);

  text-align: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

/* H1 dans le bloc verre */
.glass-hero h1 {
  color: #ffffff;
  margin-bottom: 15px;
  font-size: 2.9rem;
}

/* Texte sous le H1 */
.glass-hero p {
  color: rgba(255, 255, 255, 0.9);
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.6rem;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .glass-hero {
    padding: 25px 20px;
    margin: 30px 15px 40px;
  }

  .glass-hero h1 {
    font-size: 1.7rem;
  }

  .glass-hero p {
    font-size: 1.5rem;
  }
}
/* Prix avec contour OR en dégradé */
.price {
  display: inline-block;
  margin: 15px auto 20px;
  padding: 10px 24px;

  background:
    linear-gradient(90deg, #D4AF37, #C99200) border-box;
  border: 2px solid transparent;
  border-radius: 999px;

  color: #D4AF37;
  font-weight: 700;
  font-size: 1.1rem;

  -webkit-background-clip: padding-box, border-box;
  background-clip: padding-box, border-box;

  transition: all 0.3s ease;
}

/* Hover élégant */
.card:hover .price {
  background:
    linear-gradient(90deg, #D4AF37, #C99200) padding-box,
    linear-gradient(90deg, #D4AF37, #C99200) border-box;

  color: #000;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25);
}
.price {
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}
@media (max-width: 768px) {
  .price {
    font-size: 1rem;
    padding: 8px 20px;
  }
}
.contact-page h1 {
  background: linear-gradient(90deg,#D4AF37,#C99200);
  font-size:2.8rem;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* ================== NFC 15-100 – VISUELS & DOCUMENTS (FINAL) ================== */

.nfc-docs {
  max-width: 1000px;
  margin: 70px auto;
  padding: 20px;
}

.nfc-docs h2 {
  margin-bottom: 35px;
  color:  #F3F4F6;
  text-align: center;
}

/* Grille alignée */
.nfc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  align-items: stretch; /* 🔥 alignement vertical parfait */
}

/* Carte */
.nfc-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 🔥 même hauteur */
  align-items: center;

  padding: 18px;
  border-radius: 14px;
  text-align: center;
}

/* Images NFC */
.nfc-item img {
  width: 100%;
  max-height: 300px;          /* ⬅️ images plus grandes */
  object-fit: contain;        /* pas de coupe */
  border-radius: 12px;
  margin-bottom: 14px;

  cursor: zoom-in;
  transition: transform 0.35s ease;
}

/* Zoom élégant */
.nfc-item img:hover {
  transform: scale(1.5);
}

/* Texte */
.nfc-item p {
  font-size: 1.5rem;
  color: #F3F4F6;
}

/* ===== PDF ===== */

.nfc-pdf {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  height: 100%; /* 🔥 même hauteur que les images */
}

.nfc-pdf span {
  font-size: 250px;
  margin-bottom: 12px;
}

.nfc-pdf p {
  margin-bottom: 16px;
  font-size: 1.5rem;
  font-weight: bold;
  color: #F3F4F6;
}

/* Bouton PDF */
.nfc-pdf a {
  margin-top: auto;
}
.eclairage-images {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
  margin: 40px auto;
  max-width: 900px;
  padding: 0 20px;
}

.eclairage-images img {
  width: 100%;
  height: auto;              /* 🔥 clé du problème */
  display: block;

  border-radius: 14px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.45);
  transition: transform 0.3s ease;
}

.eclairage-images img:hover {
  transform: scale(1.03);
}

/* Mobile */
@media (max-width: 600px) {
  .eclairage-images {
    grid-template-columns: 1fr;
  }
}
/* ===== SOCIAL FOOTER (MOBILE FIRST) ===== */
.social-footer{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
}

/* Bouton */
.social-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  font-size:2.5rem;          /* <-- TEXTE (MOBILE) */
  background: rgba(0,0,0,0.45);
  border:1px solid rgba(255,255,255,0.10);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

/* Icône SVG */
.social-icon{
  width:80px;                 /* <-- LOGO (MOBILE) */
  height:80px;
  flex-shrink:0;
  fill: currentColor;         /* prend la couleur du lien */
}

/* Couleurs officielles (texte + logo) */
.social-link.facebook{ color:#1877F2; }
.social-link.instagram{ color:#E1306C; }
.social-link.google{ color:#4285F4; }
.social-link.pagesjaunes{ color:#FFD200; }

.social-link:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  filter: brightness(1.15);
}

/* ===== PLUS GRAND SUR ÉCRANS + LARGES ===== */
@media (min-width: 768px){
  .social-link{ font-size: 2.5rem; }
  .social-icon{ width: 80px; height: 80px; }
}
.social-section{
  text-align:center;
  margin-top: 30px;
}

.social-title{
  font-size: 4rem;
  font-weight: 800;
  margin-bottom: 18px;
  letter-spacing: 0.5px;

  background: linear-gradient(90deg,#D4AF37,#C99200);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow: 0 4px 18px rgba(212,175,55,0.25);
}

/* Un peu plus grand sur mobile */
@media (max-width:600px){
  .social-title{
    font-size: 4rem;
  }
}
/* Fond blanc pour les boutons réseaux */
.social-link{
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Optionnel : effet au survol un peu plus visible */
.social-link:hover{
  box-shadow: 0 12px 26px rgba(0,0,0,0.15);
}
/* Liseré or premium autour des boutons réseaux */
.social-link{
  border: 1px solid rgba(212,175,55,0.55) !important; /* or discret */
  box-shadow: 
    0 6px 18px rgba(0,0,0,0.08),
    0 0 0 1px rgba(212,175,55,0.25); /* halo or léger */
}

/* Effet au survol un peu plus premium */
.social-link:hover{
  box-shadow:
    0 12px 26px rgba(0,0,0,0.15),
    0 0 0 2px rgba(212,175,55,0.45);
}
.social-section{
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 18px;
  padding: 20px 15px 25px;
  margin: 30px 15px 0;
  border: 1px solid rgba(212,175,55,0.15);
}
/* Lien retour galerie */
.back {
  display: inline-block;
  margin: 20px auto 10px;
  padding: 8px 16px;
  font-size: 0.95rem;

  background: linear-gradient(90deg,#D4AF37,#C99200);
  color: black !important;
  font-weight: bold;
  border-radius: 20px;

  text-decoration: none;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}

/* Centre uniquement ce bouton */
.center .back {
  display: inline-block;
}