/* ==========================================================================
   Papa.Elec — pages.css
   Blocs propres à une page : hero, chiffres, fiche service, fiche chantier,
   zone d'intervention, contact, pages légales.
   ========================================================================== */

/* --- Hero accueil --------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--bleu-profond); }

.hero__diapos { position: absolute; inset: 0; }
.hero__diapo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: heroFondu 28s linear infinite;
}
.hero__diapo:nth-child(1) { animation-delay: 0s; }
.hero__diapo:nth-child(2) { animation-delay: 7s; }
.hero__diapo:nth-child(3) { animation-delay: 14s; }
.hero__diapo:nth-child(4) { animation-delay: 21s; }

/* Les rampes se chevauchent : pas de creux sombre entre deux images. */
@keyframes heroFondu {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  25%  { opacity: 1; }
  29%  { opacity: 0; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__diapo { animation: none; opacity: 0; }
  .hero__diapo:nth-child(1) { opacity: 1; }
}

.hero__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(19, 36, 68, .82) 0%,
    rgba(19, 36, 68, .66) 45%,
    rgba(19, 36, 68, .34) 100%);
}

.hero__contenu { position: relative; padding-block: 96px; max-width: 760px; }
.hero__titre {
  font-size: clamp(30px, 5vw, 50px);
  font-weight: 400;
  color: var(--blanc);
  line-height: 1.06;
  margin-bottom: 20px;
}
.hero__titre strong { color: var(--jaune); font-weight: 700; }
.hero__trait { width: 56px; height: 4px; background: var(--jaune); margin-bottom: 24px; }
.hero__texte {
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
  max-width: 52ch;
  margin-bottom: 30px;
}
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 900px) { .hero__contenu { padding-block: 64px; } }
@media (max-width: 600px) { .hero__contenu { padding-block: 48px; } }

/* --- Bandeau chiffres ----------------------------------------------------- */
.chiffres {
  background: var(--bleu-profond);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.chiffres__item {
  padding: 22px var(--marge-page);
  border-right: 1px solid rgba(255, 255, 255, .12);
}
.chiffres__item:last-child { border-right: 0; }
.chiffres__valeur { font-family: var(--titre); font-size: 22px; font-weight: 700; color: var(--jaune); }
.chiffres__libelle { font-size: 13px; color: rgba(255, 255, 255, .6); }

@media (max-width: 900px) {
  .chiffres { grid-template-columns: 1fr 1fr; }
  .chiffres__item:nth-child(2) { border-right: 0; }
  .chiffres__item:nth-child(1),
  .chiffres__item:nth-child(2) { border-bottom: 1px solid rgba(255, 255, 255, .12); }
}
@media (max-width: 600px) { .chiffres { grid-template-columns: 1fr; } .chiffres__item { border-right: 0; } }

/* --- En-tête de page intérieure ------------------------------------------- */
.entete-page { background: var(--bleu-profond); padding-block: 56px 48px; }
.entete-page__haut { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.entete-page__icone {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: var(--r-m);
  background: rgba(255, 255, 255, .1);
  display: flex; align-items: center; justify-content: center;
}
.entete-page__icone svg { stroke: var(--jaune); }
.entete-page__titre { font-size: clamp(28px, 4vw, 40px); font-weight: 700; color: var(--blanc); }
.entete-page__texte { font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, .75); max-width: 60ch; }

/* Fil d'Ariane */
.ariane {
  background: var(--fond-panneau);
  border-bottom: 1px solid var(--bordure);
  font-size: 13px;
  color: var(--gris-doux);
}
.ariane ol { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding-block: 16px; }
.ariane li::after { content: "/"; margin-left: 9px; color: var(--bordure-forte); }
.ariane li:last-child::after { content: none; }
.ariane li[aria-current] { color: var(--bleu-nuit); font-weight: 600; }

/* --- Fiche service -------------------------------------------------------- */
.service {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 26px;
  border: 1px solid var(--bordure);
  border-radius: var(--r-l);
  padding: 26px;
}
.service__haut { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.service__titre { font-size: 22px; font-weight: 700; }
.service__texte { font-size: 15px; line-height: 1.7; margin-bottom: 14px; }
.service__tarif { background: var(--fond-panneau); border-radius: 10px; padding: 18px; }
.service__prix { font-family: var(--titre); font-size: 20px; font-weight: 700; color: var(--bleu-nuit); }
.service__prix-ht { font-size: 12px; color: var(--gris-doux); }
.service__mention { font-size: 13px; line-height: 1.6; color: var(--gris-doux); margin-block: 8px 14px; }

@media (max-width: 760px) { .service { grid-template-columns: 1fr; } }

/* --- Fiche chantier ------------------------------------------------------- */
.chantier__galerie { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; }
.chantier__principale { position: relative; border-radius: var(--r-m); overflow: hidden; background: var(--bleu-profond); }
.chantier__principale img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.chantier__legende {
  position: absolute;
  bottom: 12px; left: 12px;
  background: rgba(19, 36, 68, .82);
  color: var(--blanc);
  font-family: var(--titre);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
}
.chantier__vignettes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.chantier__vignettes img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: 9px; cursor: pointer; }

.fiche-technique { background: var(--fond-panneau); border-radius: var(--r-m); padding: 22px; }
.fiche-technique dl { display: flex; flex-direction: column; gap: 13px; margin: 0; }
.fiche-technique .ligne { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.fiche-technique dt { color: var(--gris-doux); }
.fiche-technique dd { margin: 0; font-weight: 600; text-align: right; }

@media (max-width: 900px) { .chantier__galerie { grid-template-columns: 1fr; } }

/* --- Zone d'intervention -------------------------------------------------- */
.zone { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.zone__carte {
  aspect-ratio: 5 / 4;
  border-radius: var(--r-m);
  border: 1px solid #DBE7F2;
  overflow: hidden;
  /* Visible tant que les tuiles de la carte n'ont pas fini de charger. */
  background: var(--fond-panneau);
  /* Isole la pile d'empilement de Leaflet (ses contrôles montent jusqu'à
     z-index: 1000 dans leaflet.css) : sans ce cran, ces valeurs se comparaient
     directement à celles de la barre de navigation (z-index: 40/60) et la
     carte passait au-dessus d'elle au défilement. */
  position: relative;
  z-index: 0;
}
.zone__carte > div { width: 100%; height: 100%; }
.zone__carte .leaflet-container {
  width: 100%;
  height: 100%;
  font-family: inherit;
  background: var(--fond-panneau);
}
@media (max-width: 900px) { .zone { grid-template-columns: 1fr; gap: 26px; } }

/* --- Contact -------------------------------------------------------------- */
.contact { display: grid; grid-template-columns: 1.3fr 1fr; gap: 34px; align-items: start; }
/* min-width: 0 — sans lui, le formulaire refuse de descendre sous la largeur
   intrinsèque de ses champs et déborde de sa colonne de 23 px sur un écran de
   360 px de large. C'est le comportement par défaut d'un élément de grille. */
.contact__form { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.contact__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact__aside { background: var(--fond-panneau); border-radius: var(--r-l); padding: 26px; display: flex; flex-direction: column; gap: 20px; }
.contact__horaires { display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.contact__horaire { display: flex; justify-content: space-between; gap: 12px; }
.contact__horaire span:last-child { font-weight: 600; }

@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .contact__ligne { grid-template-columns: 1fr; } }

/* --- CTA large ------------------------------------------------------------ */
.cta {
  background: var(--jaune);
  padding-block: 46px;
}
.cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.cta__titre { font-size: clamp(22px, 3vw, 28px); font-weight: 700; color: var(--bleu-nuit); margin-bottom: 8px; }
.cta__texte { font-size: 15px; color: rgba(27, 49, 89, .8); }

.cta--bleu { background: var(--bleu-nuit); }
.cta--bleu .cta__titre { color: var(--blanc); }
.cta--bleu .cta__texte { color: rgba(255, 255, 255, .65); }

/* --- Pages légales -------------------------------------------------------- */
.prose { max-width: 72ch; }
.prose h2 { font-size: 22px; font-weight: 700; margin-block: 32px 12px; }
.prose h3 { font-size: 17px; font-weight: 700; margin-block: 22px 8px; }
.prose h4 { font-size: 15px; font-weight: 700; margin-block: 18px 6px; }
.prose p, .prose li { font-size: 15px; line-height: 1.75; color: var(--gris-texte); }
.prose p + p { margin-top: 12px; }
.prose ul { margin-block: 10px; padding-left: 20px; list-style: disc; }
.prose li + li { margin-top: 6px; }

/* --- Maintenance ---------------------------------------------------------- */
.maintenance {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  background: var(--bleu-profond);
  overflow: hidden;
}
.maintenance__panneau {
  position: relative;
  background: rgba(19, 36, 68, .92);
  border-radius: var(--r-l);
  padding: 44px 40px;
  width: min(560px, calc(100% - 32px));
  text-align: center;
  color: var(--blanc);
}