/* Anywatt Expertise – site vitrine simple, clair, responsive */


:root{
  --bg: #ffffff;
  --bg-soft: #f6f8f7;
  --text: #0f172a;
  --muted: #475569;
  --primary: #2fbf4a;      /* vert Anywatt */
  --primary-2:#148a2b;
  --accent: #0ea5e9;       /* bleu léger */
  --line: #e2e8f0;
  --radius: 18px;
  --shadow: 0 8px 30px rgba(15,23,42,.08);
  --maxw: 1150px;
}
/* HERO plein écran */
.hero {
 position: relative;
  min-height: 100vh;
  background-image: url("assets/usine2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  color: #fff;
}

/* Overlay pour lisibilité du texte */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
  z-index: 1;
}

/* Contenu au-dessus de l'image */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
}

/* Ajustements titres */
.hero h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.1;
}

.hero p {
  font-size: 1.1rem;
  opacity: 0.95;
}


*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;color:var(--text);background:var(--bg);}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 28px); /* marge automatique selon largeur écran */
  box-sizing: border-box;
}
.section{padding:64px 0}
.section.soft{background:var(--bg-soft)}
.kicker{color:var(--primary-2);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.8rem}
h1{font-size:clamp(1.9rem,3vw,3.2rem);line-height:1.1;margin:10px 0 12px}
h2{font-size:clamp(1.5rem,2.2vw,2.2rem);margin:0 0 12px}
h3{font-size:1.25rem;margin:0 0 8px}
p{color:var(--muted);line-height:1.7;margin:0 0 12px}
ul{margin:0;padding-left:18px;color:var(--muted)}
li{margin:.35rem 0}

.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:12px 18px;font-weight:700;border:1px solid transparent;cursor:pointer;transition:.15s ease}
.btn.primary{background:var(--primary);color:white;box-shadow:var(--shadow)}
.btn.primary:hover{background:var(--primary-2)}
.btn.ghost{background:white;border-color:var(--line)}
.btn.ghost:hover{background:#fafafa}
.badge{display:inline-flex;align-items:center;border:1px solid var(--line);background:white;padding:6px 10px;border-radius:999px;font-size:.85rem;color:var(--muted)}

header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.93);backdrop-filter:saturate(160%) blur(6px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand img{height:34px}
.navlinks{display:flex;align-items:center;gap:20px}
.navlinks a{font-weight:600;color:#111827;opacity:.9}
.navlinks a.active, .navlinks a:hover{color:var(--primary-2)}
.nav-cta{display:flex;gap:10px;align-items:center}
.burger{display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:white;align-items:center;justify-content:center}

.hero{position:relative;overflow:hidden}
.hero-grid{position:relative;z-index: 2;display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;padding:48px 0}
.hero-card{background:white;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.hero-points{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px}
.card{background:white;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.card .icon{width:42px;height:42px;border-radius:10px;background:#eef8f0;display:grid;place-items:center;color:var(--primary-2);font-weight:900}
.card p{font-size:.98rem}
.cards, .split{
  width: 100%;
}

@media (max-width: 900px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .cards {
    grid-template-columns: 1fr;
  }
}
.split{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.panel{background:white;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}

.refs{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:10px}
.ref{background:white;border:1px dashed var(--line);border-radius:12px;height:60px;display:grid;place-items:center;font-weight:700;color:#94a3b8}

.cta{background:linear-gradient(90deg, var(--primary) 0%, #22c55e 50%, #16a34a 100%);color:white;border-radius:22px;padding:26px;display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:var(--shadow)}
.cta p{color:white;opacity:.95}

footer {
  position: relative;
  padding: 48px 0 30px;
  background-image: url("assets/usine2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  overflow: hidden;
}

/* Voile sombre pour la lisibilité */
footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.70);
  z-index: 1;
}

/* Contenu au-dessus du voile */
footer .container {
  position: relative;
  z-index: 2;
}

/* Texte du footer en clair */
footer,
footer p,
footer a,
footer h3,
footer strong {
  color: #fff;
}

footer a {
  opacity: 0.9;
}

footer a:hover {
  opacity: 1;
  text-decoration: underline;
}

.footgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:20px}
.footgrid a{color: rgba(255,255,255,0.9);}
.small{font-size:.9rem;color:var(--muted)}
/* Forcer le texte du footer en blanc */
footer .small,
footer p.small,
footer .muted {
  color: rgba(255, 255, 255, 0.9);
}
footer h3 {
  color: #ffffff;
}

footer ul,
footer li {
  color: rgba(255, 255, 255, 0.9);
}


/* Mini-hero pour titres de rubrique */
.page-hero {
  position: relative;
  padding: 72px 0;
  background-image: url("assets/usine2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  overflow: hidden;
}

/* Voile sombre */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

/* Contenu au-dessus du voile */
.page-hero .container {
  position: relative;
  z-index: 2;
}

/* Ajustements texte */
.page-hero h1,
.page-hero p,
.page-hero .breadcrumbs {
  color: #fff;
}

.page-hero p {
  opacity: 0.9;
}

.page-hero .breadcrumbs {
  opacity: 0.8;
}

.breadcrumbs{font-size:.9rem;color:var(--muted);margin-bottom:6px}
.page-hero h1{font-size:clamp(1.7rem,2.7vw,2.7rem)}

.list-check{list-style:none;padding:0;margin:8px 0}
.list-check li{display:flex;gap:8px;align-items:flex-start}
.list-check li:before{content:"✓";color:var(--primary-2);font-weight:800;margin-top:2px}

.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .full{grid-column:1/-1}
input, textarea, select{width:100%;padding:12px 12px;border-radius:12px;border:1px solid var(--line);font-size:1rem}
textarea{min-height:140px;resize:vertical}
.form-note{font-size:.9rem}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .refs{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 640px){
  .cards{grid-template-columns:1fr}
  .navlinks{display:none;position:absolute;top:70px;left:0;right:0;background:white;border-bottom:1px solid var(--line);padding:12px clamp(16px,4vw,22px);flex-direction:column;align-items:flex-start}
  .navlinks.open{display:flex}
  .burger{display:flex}
  .footgrid{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
}
/* Texte centré sur le HERO */
.hero-center {
  position: relative;
  z-index: 2; /* au-dessus de l'overlay */
  height: 100%;
  width: 100%;
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  padding: 0 20px;
}

/* Titre principal */
.hero-title {
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  line-height: 1.15;
  margin: 0 0 14px;
}

/* Sous-titre */
.hero-subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  font-weight: 500;
  margin: 0;
}
.hero-title {
  text-align: center;
  color: #fff;
  margin: 0;
}

/* CHAQUE span = UNE LIGNE */
.hero-line {
  display: block;              /* ← clé du succès */
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  line-height: 1.15;
}

/* Ligne descriptive */
.hero-subline {
  display: block;              /* ← clé aussi */
  margin-top: 14px;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  font-weight: 500;
  text-transform: none;
  opacity: 0.9;
}
.hero-cta {
  margin-top: 22px;
  text-align: center;
  position: relative;
  z-index: 2; /* au-dessus de l'overlay */
}
/* Section clients */
.section-clients h2 {
  text-align: center;
  margin-bottom: 30px;
}

.clients-slider {
  display: flex;
  align-items: center;
  gap: 20px;
}

.clients-track-wrapper {
  overflow: hidden;
  width: 100%;
}

.clients-track {
  display: flex;
  gap: 40px;
  transition: transform 0.4s ease;
}
.clients-track-wrapper {
  overflow: hidden;
  width: 100%;
}

.clients-track.auto-scroll {
  display: flex;
  gap: 60px;
  width: max-content;
  animation: clientsScroll 50s linear infinite;
}

.clients-track.auto-scroll:hover {
  animation-play-state: paused;
}

@keyframes clientsScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Logos clients */
.clients-track img {
  height: 110px;
  max-width: 300px;
  object-fit: contain;
  filter: none;
  opacity: 1;
  transition: transform 0.3s ease;
}

/* Mobile */
@media (max-width: 768px) {
  .clients-track img {
    height: 65px;
  }
}
/* Flèches du slider clients */
.clients-slider {
  position: relative;
}
/* === Slider partenaires (même logique que clients) === */

.partenaires-slider {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.partenaires-track {
  display: flex;
  align-items: center;
  gap: 48px;              /* espace entre logos */
  width: max-content;
  animation: scroll-partenaires 35s linear infinite;
}

/* Logos partenaires */
.partenaires-track img {
  height: 70px;
  width: auto;
  object-fit: contain;
  background: transparent;
  filter: none;
  opacity: 1;
  transition: transform 0.3s ease;
}

/* Animation */
@keyframes scroll-partenaires {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.partenaires-track img {
  background-color: transparent !important;
}
.section-partenaires{
  background:#fff;
}
/* Photo ronde - page À propos */
.photo-ronde {
  width: 220px;              /* taille du rond */
  height: 220px;
  border-radius: 50%;
  overflow: hidden;          /* clé du cercle */
  margin: 0 auto 12px;       /* centrage + espace */
  border: 3px solid var(--line);
  box-shadow: var(--shadow);
}

.photo-ronde img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* évite les déformations */
}
.photo-ronde {
  border: 7px solid var(--primary);
}
.photo-ronde img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 5%;
}
.cert-opqibi,
.cert-en16247,
.cert-iso{
  border-top: 6px solid transparent;
}
/* === Certifications : fond uniforme === */

.cert-opqibi{
  background: #fff4ec;              /* orange très clair */
  border-top: 6px solid #F98525;
}

.cert-en16247{
  background: #fffbe6;              /* jaune très clair */
  border-top: 6px solid #F4DD2A;
}

.cert-iso{
  background: #f3fbf5;              /* vert très clair */
  border-top: 6px solid #6DBA3A;
}

/* Titres lisibles */
.cert-opqibi h3{ color:#c65e00; }
.cert-en16247 h3{ color:#9a8500; }
.cert-iso h3{ color:#2f7a2f; }

/* Flèche scroll vers le bas */
.scroll-down {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}

.scroll-down span {
  width: 22px;
  height: 22px;
  border-right: 3px solid rgba(255,255,255,0.9);
  border-bottom: 3px solid rgba(255,255,255,0.9);
  transform: rotate(45deg);
  animation: scrollArrow 1.8s infinite;
}

/* Animation douce */
@keyframes scrollArrow {
  0% {
    opacity: 0;
    transform: translateY(0) rotate(45deg);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(12px) rotate(45deg);
  }
}
.section h2 {
  text-align: center;
  margin-bottom: 30px;
}
.intro-text {
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: none;
  margin: 0 auto;
}

.intro-text strong {
  font-weight: 600;
}
/* Intro mise en avant */
.intro {
  padding-top: 12px; /* espace entre hero et intro */
}

.intro-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
  max-width: 980px;
  margin: 0 auto; /* plus de marge négative */
}

.intro-text{
  font-size: 1.12rem;
  line-height: 1.65;
  margin: 0;
}
.intro-line{ display:block; margin-top: 8px; opacity: .95; }
.intro-text strong{ font-weight: 650; }

/* Why section */
.why-head{
  display:flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.why-sub{ margin:0; opacity:.9; max-width: 52ch; }

.why-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.why-item{
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 16px 16px;
}
.why-item h3{ margin:0 0 6px; font-size: 1.02rem; }
.why-item p{ margin:0; opacity:.92; line-height:1.55; }

/* CTA bandeau */
.cta-band{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 18px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

/* Responsive */
@media (max-width: 820px){
  .why-head{ flex-direction: column; align-items:flex-start; }
  .why-grid{ grid-template-columns: 1fr; }
  .cta-band{ flex-direction: column; align-items: flex-start; }
  .intro-card{ margin-top: -20px; }
}
.teasing-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px;
  margin-top:14px;
}

.teasing-item{
  padding:14px 14px;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  background:#fff;
}

.teasing-item h3{
  margin:0 0 6px;
  font-size:1.02rem;
}

.teasing-item p{
  margin:0;
  line-height:1.5;
  opacity:.9;
}

/* Responsive */
@media (max-width: 900px){
  .teasing-grid{
    grid-template-columns:1fr;
  }
}
.intro-teasing{
  margin-top: 10px;
  font-weight: 600;
  opacity: .75;
  letter-spacing: .2px;
}
.intro-pills{
  display:flex;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}

.pill{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  font-size:.9rem;
  font-weight:600;
  text-decoration:none;
  border:1px solid rgba(0,0,0,.15);
  color:inherit;
  background:#fff;
  transition:all .2s ease;
}

.pill:hover{
  background:#f4f5f6;
  border-color:rgba(0,0,0,.3);
}
/* Rythme global des sections */
.section{
  padding: 56px 0;
}

/* Section juste après le hero (intro) */
.hero + .section{
  padding-top: 40px;
}

/* Sections successives */
.section + .section{
  padding-top: 48px;
}
/* Réduire l'espace entre l'intro et le CTA */
.intro {
  padding-bottom: 24px; /* au lieu de ~56px */
}

.intro + .section {
  padding-top: 24px; /* CTA plus proche */
}
.section-prestations {
  background: #f8f9f9;
}

.prestations-wrapper {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.prestations-menu {
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 260px;
}

.prestation-btn {
  padding: 16px 20px;
  border: 2px solid #1d8f6a;
  background: white;
  cursor: pointer;
  font-weight: 600;
  text-align: left;
  transition: all 0.3s ease;
}

.prestation-btn:hover,
.prestation-btn.active {
  background: #1d8f6a;
  color: white;
}

.prestations-content {
  flex: 1;
  position: relative;
}

.prestation-panel {
  display: none;
  animation: slideRight 0.3s ease forwards;
}

.prestation-panel.active {
  display: block;
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .prestations-wrapper {
    flex-direction: column;
  }
}
/* Sections prestations cachées par défaut */
.prestation-detail {
  display: none;
  animation: fadeIn 0.35s ease;
}

.prestation-detail.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Cartes prestations cliquables */
.prestation-card { cursor: pointer; user-select: none; }
.prestation-card:focus { outline: 2px solid rgba(0,0,0,0.25); outline-offset: 3px; }

.prestation-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}

/* Chevron (dessiné en CSS) */
.chevron{
  width:10px;
  height:10px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 220ms ease;
  opacity: .8;
}

.prestation-card.is-open .chevron{
  transform: rotate(-135deg); /* tourne vers le haut */
}

/* Accordéon compact sous les cartes */
.prestation-accordion{
  margin-top:14px;
}

.prestation-accordion .accordion-shell{
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  background: #fff;
}

/* Détails masqués par défaut */
.prestation-detail{ display:none; }
.prestation-detail.active{ display:block; }

/* Compactage : on neutralise l'effet "grande section" une fois dans l'accordéon */
.prestation-detail.in-accordion.section{
  padding: 18px 0; /* au lieu d’un gros padding section */
}
.prestation-detail.in-accordion.section.soft{
  background: transparent; /* on garde un shell blanc homogène */
}
/* ===== PRESTATIONS NEUTRES + HIGHLIGHT ANYWATT ===== */

.card-audit,
.card-iso,
.card-etudes{
  border-left: none;
  background: #fff;
}

.card-audit h3,
.card-iso h3,
.card-etudes h3{
  color: var(--text);
}

/* Highlight carte active */
.prestation-card {
  transition: all 0.25s ease;
}

.prestation-card.is-open {
  border: 1px solid var(--primary);
  box-shadow: 0 10px 28px rgba(47, 191, 74, 0.18);
  transform: translateY(-2px);
}

.prestation-card.is-open h3 {
  color: var(--primary);
}
#apropos .container {
  max-width: 850px;
}

#apropos p,
#apropos ul {
  font-size: 1.05rem;
}
.section-light {
  background: #f6f8f7;
}
.hero-title {
  text-transform: lowercase;
}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:10px;
}

@media (max-width:700px){
  .contact-grid{
    grid-template-columns:1fr;
  }
}
.qualification-opqibi{
  display:flex;
  align-items:center;
  gap:30px;
  margin-top:20px;
}

.qualification-opqibi img{
  width:140px;
  height:auto;
}

.qualification-text{
  font-size:18px;
}