/* Styles de la page d'accueil — extraits d'index.php (audit 2026-09-17). Variables : voir :root dans style.css */

.pole-card { padding: 0 0 28px; }
.pole-photo-wrap { overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.pole-photo { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.pole-card:hover .pole-photo { transform: scale(1.08); }
.pole-card .pole-body { padding: 24px 28px 0; }
.pole-card .pole-icon { width:48px; height:48px; margin-top:-46px; margin-bottom:16px; position:relative; z-index:2; box-shadow:0 4px 14px rgba(0,0,0,.12); }


.index-video-wrap {
  max-width: 820px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.1);
}
.index-video-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: #1c2a3e;
  border-bottom: 1px solid rgba(0,0,0,.4);
}
.index-video-dot {
  width: 12px; height: 12px;
  border-radius: 50%; flex-shrink: 0;
}
.index-video-title {
  color: rgba(255,255,255,.7);
  font-size: .8rem; font-weight: 600;
  margin-left: 8px; letter-spacing: .02em;
}
.index-video-player {
  position: relative;
  background: #000;
  line-height: 0;
}
.index-video-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  background: rgba(0,0,0,.32);
  cursor: pointer;
  transition: opacity .3s;
}
.index-video-play-btn {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(247,148,29,.92);
  border: 3px solid rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(247,148,29,.5);
  transition: transform .2s, background .2s;
}
.index-video-play-btn:hover { transform: scale(1.1); background: var(--orange); }
.index-video-overlay-label {
  color: rgba(255,255,255,.9);
  font-size: .88rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.index-video-points {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 32px;
  flex-wrap: wrap;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.ivp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.82);
  font-size: .92rem;
  font-weight: 500;
  padding: 0 28px;
}
.ivp-sep {
  width: 1px; height: 28px;
  background: rgba(255,255,255,.15);
}
@media (max-width: 640px) {
  .index-video-points { flex-direction: column; gap: 12px; margin-top: 20px; }
  .ivp-sep { display: none; }
  .index-video-wrap { border-radius: 10px; }
  .ivp-item { font-size: .84rem; padding: 0 12px; }
  .index-video-play-btn { width: 60px; height: 60px; }
}


.temoignage-card {
  background: #fff;
  border-radius: 18px;
  padding: 32px 28px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 16px rgba(26,107,181,0.06);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: var(--transition);
  position: relative;
}
.temoignage-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(26,107,181,0.12);
  border-color: rgba(26,107,181,0.2);
}
.temoignage-quote {
  width: 44px; height: 44px;
  background: rgba(247,148,29,0.1);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.temoignage-text {
  font-size: 0.92rem;
  color: #4b5563;
  line-height: 1.8;
  font-style: italic;
  flex: 1;
}
.temoignage-author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.temoignage-logo {
  width: 52px; height: 52px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.temoignage-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 4px;
}
.temoignage-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--texte);
}
.temoignage-company {
  font-size: 0.78rem;
  color: var(--gris);
  margin-top: 2px;
}
.temoignage-stars {
  color: var(--orange);
  font-size: 0.9rem;
  letter-spacing: 2px;
}
@media (max-width: 900px) {
  .temoignage-card { grid-column: span 1; }
  section .container > div[style*="repeat(3"] { grid-template-columns: 1fr !important; }
}


    .seneau-videos-wrap { margin-top: 48px; }
    .seneau-videos-header {
      display: flex; align-items: center; gap: 10px;
      font-size: .9rem; color: var(--gris);
      margin-bottom: 20px;
      padding-bottom: 14px;
      border-bottom: 2px solid rgba(26,107,181,.1);
    }
    .seneau-videos-header strong { color: var(--bleu); }
    .seneau-videos-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    .seneau-video-card {
      background: #fff;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid var(--border);
      box-shadow: 0 2px 16px rgba(0,0,0,.07);
      transition: transform .25s, box-shadow .25s;
    }
    .seneau-video-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 36px rgba(26,107,181,.13);
    }
    .svp-player {
      position: relative;
      background: #000;
      aspect-ratio: 16/9;
      overflow: hidden;
    }
    .svp-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .svp-overlay {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      background: rgba(0,0,0,.28);
      cursor: pointer;
      transition: background .2s;
    }
    .svp-overlay:hover { background: rgba(0,0,0,.18); }
    .svp-btn {
      width: 62px; height: 62px; border-radius: 50%;
      background: rgba(26,107,181,.92);
      border: 3px solid rgba(255,255,255,.6);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      box-shadow: 0 6px 24px rgba(26,107,181,.5);
      transition: transform .2s, background .2s;
    }
    .svp-btn:hover { transform: scale(1.1); background: var(--bleu); }
    .svp-info { padding: 18px 20px 20px; }
    .svp-tag {
      display: inline-block;
      font-size: .72rem; font-weight: 700;
      color: var(--bleu); background: rgba(26,107,181,.1);
      border-radius: 50px; padding: 3px 12px;
      margin-bottom: 10px; letter-spacing: .06em;
      text-transform: uppercase;
    }
    .svp-titre {
      font-size: .96rem; font-weight: 700;
      color: var(--texte); margin-bottom: 6px; line-height: 1.4;
    }
    .svp-desc { font-size: .82rem; color: var(--gris); line-height: 1.6; }
    @media (max-width: 700px) {
      .seneau-videos-grid { grid-template-columns: 1fr; gap: 16px; }
    }
    

.actu-home-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
  border: 1px solid var(--border);
  transition: transform .25s, box-shadow .25s;
  display: flex; flex-direction: column;
}
.actu-home-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(26,107,181,.13);
}
.actu-home-card-img {
  position: relative; height: 260px; overflow: hidden;
  background: linear-gradient(135deg, var(--bleu-light), #d4e6f7);
}
.actu-home-card-img img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .4s ease;
}
.actu-home-card:hover .actu-home-card-img img { transform: scale(1.05); }
.actu-home-card-placeholder {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  color: var(--bleu); opacity:.3;
}
.actu-home-card-overlay {
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(10,22,40,.25), transparent);
}
.actu-home-card-body {
  padding: 20px; display:flex; flex-direction:column; flex:1;
}
.actu-home-card-date {
  display:inline-flex; align-items:center; gap:5px;
  font-size:.72rem; color:var(--gris); margin-bottom:10px;
  text-transform:capitalize;
}
.actu-home-card-title {
  font-size:.98rem; font-weight:700; color:var(--texte);
  line-height:1.4; margin-bottom:8px;
}
.actu-home-card-excerpt {
  font-size:.84rem; color:var(--gris); line-height:1.6; flex:1; margin-bottom:16px;
}
.actu-home-card-link {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.82rem; font-weight:600; color:var(--bleu);
  text-decoration:none; margin-top:auto;
  transition: gap .2s, color .2s;
}
.actu-home-card-link:hover { color:var(--orange); gap:10px; }


.cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}
@media (max-width: 768px) {
  .cta-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}



/* ===== Recit d'un chantier : Tambacounda (image collante + etapes) ===== */
.story { background: var(--bleu-dark, #0f2a4a); color: #fff; padding: 96px 0; }
.story-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: start; }
.story-media { position: sticky; top: 96px; }
.story-frame { position: relative; margin: 0; aspect-ratio: 4 / 5; max-height: calc(100vh - 160px); border-radius: 18px; overflow: hidden; background: #08182c; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.story-frame > img, .story-frame > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.02); transition: opacity .9s ease, transform 7s linear; }
.story-frame > .is-active { opacity: 1; transform: scale(1.08); }
.story-place { margin: 14px 4px 0; font-size: .92rem; color: rgba(255,255,255,.72); }
.story-steps h2 { font-family: 'Poppins', sans-serif; font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.08; letter-spacing: -.01em; margin: 0 0 14px; max-width: 16ch; }
.story-intro { color: rgba(255,255,255,.75); font-size: 1.05rem; max-width: 46ch; margin: 0 0 24px; }
.story-step { padding: 34px 0 34px 56px; position: relative; min-height: 46vh; display: flex; flex-direction: column; justify-content: center; opacity: .32; transition: opacity .5s ease; }
.story-step.is-active { opacity: 1; }
.story-step .story-num { position: absolute; left: 0; top: calc(50% - 20px); width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--orange, #f7941d); color: var(--orange, #f7941d); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: .95rem; background: rgba(15,42,74,.6); }
.story-step.is-active .story-num { background: var(--orange, #f7941d); color: #0f2a4a; }
.story-step::before { content: ""; position: absolute; left: 19px; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.14); }
.story-step:first-of-type::before { top: 50%; } .story-step:last-of-type::before { bottom: 50%; }
.story-step h3 { font-family: 'Poppins', sans-serif; font-size: 1.45rem; margin: 0 0 10px; }
.story-step p { color: rgba(255,255,255,.8); line-height: 1.7; max-width: 48ch; margin: 0; }
.story-cta { margin-top: 12px; padding-left: 56px; }
@media (max-width: 900px) {
  .story { padding: 64px 0; }
  .story-grid { grid-template-columns: 1fr; gap: 24px; }
  .story-media { position: sticky; top: 64px; z-index: 2; }
  .story-frame { aspect-ratio: 16 / 10; max-height: 42vh; }
  .story-place { display: none; }
  .story-media { background: var(--bleu-dark, #0f2a4a); padding-bottom: 10px; }
  .story-step { min-height: 0; padding: 22px 0 22px 52px; }
  .story-steps h2 { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .story-frame > img, .story-frame > video { transition: opacity .3s ease; transform: none; } .story-frame > .is-active { transform: none; } .story-step { transition: none; } }

/* Poles : les 2 cartes de la 2e rangee occupent toute la largeur (plus de vide lateral) */
@media (min-width: 1025px) {
  .poles-grid .pole-card:nth-child(n+4) { flex: 0 0 calc(50% - 12px); max-width: calc(50% - 12px); }
  .poles-grid .pole-card:nth-child(n+4) .pole-photo-wrap img { aspect-ratio: 21 / 9; height: auto; }
}
/* Recit : etapes plus rapprochees */
.story-step { min-height: 30vh; padding-top: 24px; padding-bottom: 24px; }
.story { padding: 72px 0; }

/* Accueil : vidéo de fond plein écran (chantier SEN'EAU), titre par-dessus — 2026-10-20.
   Voile neutre (noir léger) seulement derrière le texte, en bas à gauche, pour garder les vraies couleurs de la vidéo ;
   un fondu court vers --bleu-dark tout en bas évite une coupure avec le bandeau bleu suivant (2026-10-21). */
.home-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(100svh, 920px);
  display: flex; align-items: flex-end;
  padding: calc(72px + 56px) 0 clamp(40px, 7vh, 72px);
  background: #0a2a52; color: #fff;
}
.home-hero-media { position: absolute; inset: 0; z-index: -2; }
.home-hero-media picture { display: contents; }
.home-hero-media img, .home-hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-hero-media video { opacity: 0; transition: opacity .8s ease; }
.home-hero-media video.is-playing { opacity: 1; }
.home-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.28) 32%, rgba(0,0,0,0) 60%),
    linear-gradient(90deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,0) 55%);
}
.home-hero-content { position: relative; width: 100%; }
.home-hero-kicker {
  display: flex; align-items: flex-start; gap: 14px;
  margin: 0 0 18px; font-size: .95rem; line-height: 1.5; font-weight: 600; letter-spacing: .01em; color: rgba(255,255,255,.92);
}
/* trait aligné sur la première ligne, même si la phrase passe sur deux lignes (téléphone) */
.home-hero-kicker::before { content: ""; width: 44px; height: 2px; margin-top: calc(.75em - 1px); background: var(--orange); flex-shrink: 0; }
.home-hero .hero-title {
  max-width: 17ch; margin: 0 0 20px;
  font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 1.04; letter-spacing: -.03em;
  text-shadow: 0 2px 4px rgba(0,0,0,.25), 0 2px 24px rgba(0,0,0,.45);
}
.home-hero .hero-subtitle { max-width: 62ch; margin: 0 0 30px; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.7; color: rgba(255,255,255,.95); text-shadow: 0 1px 3px rgba(0,0,0,.45), 0 1px 14px rgba(0,0,0,.4); }
.home-hero-kicker { text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.home-hero .hero-actions { margin-bottom: 0; }
.home-hero-pause {
  position: absolute; right: 20px; top: calc(72px + 16px); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.4); background: rgba(10,42,82,.55); color: #fff;
  transition: background-color .15s ease, transform .12s ease-out;
}
.home-hero-pause:hover { background: rgba(10,42,82,.8); }
.home-hero-pause:active { transform: scale(.95); }
.home-hero-pause:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.home-hero-pause[hidden] { display: none; }
.home-hero-pause svg { width: 18px; height: 18px; }
.home-hero-pause .ico-play, .home-hero-pause.is-paused .ico-pause { display: none; }
.home-hero-pause.is-paused .ico-play { display: inline; }
/* Bandeau des agréments juste sous la vidéo : la place réservée à l'en-tête fixe (.hero) n'y sert plus */
.home-hero ~ .hero-content-only { padding-top: 12px; }
@media (max-width: 760px) {
  .home-hero { min-height: min(100svh, 760px); padding: calc(60px + 40px) 0 32px; }
  .home-hero::before { background: linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 72%); }
  .home-hero-kicker { font-size: .82rem; gap: 10px; margin-bottom: 14px; }
  .home-hero-kicker::before { width: 28px; }
  /* !important : style.css bride .hero-title à 1.9rem (!important) sur téléphone, plus petit que les titres de section (2rem) */
  .home-hero .hero-title { font-size: clamp(2.5rem, 11vw, 3rem) !important; max-width: none; }
  .home-hero .hero-subtitle { font-size: .95rem; margin-bottom: 22px; }
  .home-hero-pause { top: calc(60px + 12px); right: 12px; }
}
@media (prefers-reduced-motion: reduce) { .home-hero-media video { display: none; } }