/* ============================================================
   JLZ TOITURE — style.css
   Palette : bleu marine / zinc (identité du logo) + accent
   terracotta (couleur tuile canal de Charente-Maritime) + crème.
   ============================================================ */

:root {
  --marine-900: #0b2a3d;
  --marine-800: #123a53;
  --marine-700: #184a68;
  --bleu-toit: #4fa9d8;
  --terracotta: #c1552f;
  --terracotta-fonce: #a3441f;
  --creme: #f8f5ef;
  --creme-fonce: #efe9dd;
  --blanc: #ffffff;
  --texte: #24313a;
  --texte-clair: #eef3f6;
  --gris-bordure: #e1dccf;

  --rayon: 14px;
  --ombre: 0 10px 30px rgba(11, 42, 61, 0.12);
  --transition: 0.3s ease;

  --largeur-max: 1180px;
}

/* ---------- Reset minimal ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--texte);
  background: var(--creme);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; cursor: pointer; }

.conteneur {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  border: 2px solid transparent;
  white-space: nowrap;
}
.bouton--principal {
  background: var(--terracotta);
  color: var(--blanc);
  box-shadow: 0 8px 20px rgba(193, 85, 47, 0.35);
}
.bouton--principal:hover { background: var(--terracotta-fonce); transform: translateY(-2px); }

.bouton--secondaire {
  background: transparent;
  color: var(--blanc);
  border-color: rgba(255, 255, 255, 0.6);
}
.bouton--secondaire:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); }

.bouton--appel {
  background: var(--marine-800);
  color: var(--blanc);
  padding: 10px 18px;
  font-size: 0.92rem;
}
.bouton--appel:hover { background: var(--marine-700); }

/* Badge "Disponible 24h/24 - 7j/7" */
.badge-24-7 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-24-7::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ad17a;
  box-shadow: 0 0 0 3px rgba(74, 209, 122, 0.25);
  flex-shrink: 0;
  animation: pastille-clignote 1.6s ease-in-out infinite;
}

@keyframes pastille-clignote {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 3px rgba(74, 209, 122, 0.25);
  }
  50% {
    opacity: 0.35;
    box-shadow: 0 0 0 5px rgba(74, 209, 122, 0.12);
  }
}
.badge-24-7--entete {
  background: rgba(74, 209, 122, 0.14);
  color: #1e7a45;
  border: 1px solid rgba(74, 209, 122, 0.4);
  padding: 8px 16px;
  font-size: 0.85rem;
  margin: 0;
}

/* ============================================================
   EN-TÊTE / NAVIGATION
   ============================================================ */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gris-bordure);
}
.entete__interieur {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.entete__logo img { height: 66px; width: auto; }

.nav { flex: 1; }
.nav__liste {
  display: flex;
  gap: 28px;
  justify-content: center;
}
.nav__lien {
  font-weight: 600;
  color: var(--marine-900);
  padding: 8px 4px;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}
.nav__lien:hover,
.nav__lien--actif {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}

.entete__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  padding: 8px;
}
.entete__burger span {
  display: block;
  height: 2px;
  background: var(--marine-900);
  border-radius: 2px;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: 96px;
  padding-bottom: 60px;
  color: var(--blanc);
}
.hero__fond {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__voile {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 42, 61, 0.85) 0%, rgba(11, 42, 61, 0.72) 45%, rgba(11, 42, 61, 0.88) 100%);
}
.hero__contenu {
  position: relative;
  z-index: 1;
  max-width: 760px;
  padding-top: 40px;
  padding-bottom: 20px;
}
.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--bleu-toit);
  margin-bottom: 14px;
}
.hero__titre {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.15;
  font-weight: 800;
  margin-bottom: 20px;
}
.hero__texte {
  font-size: 1.08rem;
  color: var(--texte-clair);
  max-width: 62ch;
  margin-bottom: 30px;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Galerie de chantiers défilante (bandeau bas du hero, cliquable) */
.galerie-chantiers {
  position: relative;
  z-index: 1;
  margin-top: 44px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 50px, black calc(100% - 50px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 50px, black calc(100% - 50px), transparent 100%);
}
.galerie-chantiers__piste {
  display: flex;
  gap: 10px;
  width: max-content;
  animation-name: galerie-defilement;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.galerie-chantiers__piste:hover,
.galerie-chantiers__piste:focus-within {
  animation-play-state: paused;
}
.galerie-chantiers__item {
  flex: 0 0 auto;
  height: 190px;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  filter: saturate(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.galerie-chantiers__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition);
}
.galerie-chantiers__item:hover img,
.galerie-chantiers__item:focus-visible img {
  transform: scale(1.07);
}

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

/* Galerie plein écran (navigation entre les photos) */
.modale__panneau.modale__panneau--galerie {
  background: transparent;
  box-shadow: none;
  overflow: visible;
  width: auto;
  max-width: 94vw;
}
.modale__image.modale__image--galerie {
  display: block;
  width: auto;
  height: auto;
  max-width: 94vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.15);
}
.galerie-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(11, 42, 61, 0.6);
  color: var(--blanc);
  display: flex;
  align-items: center;
  justify-content: center;
}
.galerie-nav:hover { background: var(--marine-900); }
.galerie-nav--precedent { left: -8px; }
.galerie-nav--suivant { right: -8px; }
.galerie-compteur {
  position: absolute;
  bottom: -34px;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--texte-clair);
  font-size: 0.88rem;
}

/* ============================================================
   SECTIONS GÉNÉRIQUES
   ============================================================ */
.section__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--terracotta);
  margin-bottom: 10px;
}
.section__eyebrow--clair { color: var(--bleu-toit); }

.section__titre {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 800;
  color: var(--marine-900);
  max-width: 46ch;
  margin-bottom: 16px;
}
.section__titre--clair { color: var(--blanc); }

.section__intro {
  max-width: 65ch;
  color: #47555e;
  margin-bottom: 40px;
  font-size: 1.05rem;
}
.section__intro--clair { color: var(--texte-clair); }

/* ============================================================
   PRESTATIONS — grille de cartes cliquables
   ============================================================ */
.prestations { padding: 84px 0; }

.prestations__grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.prestation-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--blanc);
  border: 1px solid var(--gris-bordure);
  border-radius: var(--rayon);
  overflow: hidden;
  padding: 0;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.prestation-carte:hover,
.prestation-carte:focus-visible {
  box-shadow: var(--ombre);
  border-color: rgba(193, 85, 47, 0.35);
  transform: translateY(-4px);
  outline: none;
}
/* Léger dégradé au bas de la photo (190px = hauteur de
   .prestation-carte__image / .avant-apres--carte) pour adoucir la
   transition entre la photo et le bloc de texte, plutôt qu'une coupe nette. */
.prestation-carte::after {
  content: "";
  position: absolute;
  top: 154px;
  left: 0;
  right: 0;
  height: 36px;
  background: linear-gradient(to bottom, rgba(11, 42, 61, 0), rgba(11, 42, 61, 0.22));
  pointer-events: none;
}

.prestation-carte__image {
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.prestation-carte__corps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px 24px;
}
.prestation-carte__nom {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--marine-900);
}
.prestation-carte__icone {
  width: 20px;
  height: 20px;
  color: var(--terracotta);
  flex-shrink: 0;
}
.prestation-carte__resume {
  font-size: 0.92rem;
  color: #6b7a83;
}
.prestation-carte__lien {
  margin-top: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--terracotta);
}

.prestations__cta {
  display: flex;
  justify-content: center;
  margin-top: 44px;
}

/* ============================================================
   MODALE DE DÉTAIL D'UNE PRESTATION
   ============================================================ */
.modale {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modale[hidden] { display: none; }

.modale__fond {
  position: absolute;
  inset: 0;
  background: rgba(11, 42, 61, 0.72);
  opacity: 0;
  transition: opacity var(--transition);
}
.modale--ouverte .modale__fond { opacity: 1; }

.modale__panneau {
  position: relative;
  z-index: 1;
  background: var(--blanc);
  border-radius: 18px;
  max-width: 640px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  transform: translateY(16px) scale(0.98);
  opacity: 0;
  transition: transform var(--transition), opacity var(--transition);
}
.modale--ouverte .modale__panneau {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modale__fermer {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(11, 42, 61, 0.55);
  color: var(--blanc);
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modale__fermer:hover { background: var(--marine-900); }

.modale__image {
  width: 100%;
  height: 280px;
  object-fit: cover;
}
/* Le reset global "img { display: block; }" (plus haut dans ce fichier)
   passe devant la règle native [hidden] du navigateur : on la restaure
   explicitement ici pour que la bascule avec le comparateur avant/après
   fonctionne. */
#modale-image[hidden] { display: none; }

/* ============================================================
   COMPARATEUR AVANT / APRÈS
   Utilisé uniquement pour la prestation "Entretien de toiture" :
   version statique (50/50, non interactive) sur la carte,
   version glissable (souris/tactile/clavier) dans la modale.
   ============================================================ */
.avant-apres {
  --position: 50%;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.avant-apres--carte {
  height: 190px;
}
.avant-apres--modale {
  height: 280px;
  cursor: ew-resize;
  touch-action: none;
}
.avant-apres__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}
.avant-apres__image--avant {
  clip-path: inset(0 calc(100% - var(--position)) 0 0);
}
.avant-apres__ligne,
.avant-apres__curseur {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--position);
  transform: translateX(-50%);
}
.avant-apres__ligne {
  width: 2px;
  background: rgba(255, 255, 255, 0.85);
  pointer-events: none;
}
.avant-apres__curseur {
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
}
.avant-apres__curseur::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(255, 255, 255, 0.85);
  transform: translateX(-50%);
}
.avant-apres__poignee {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--blanc);
  color: var(--terracotta-fonce);
  box-shadow: 0 2px 10px rgba(11, 42, 61, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.avant-apres__curseur:focus-visible .avant-apres__poignee {
  outline: 2px solid var(--blanc);
  outline-offset: 2px;
}
.avant-apres__etiquette {
  position: absolute;
  top: 12px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: rgba(11, 42, 61, 0.65);
  color: var(--blanc);
  pointer-events: none;
}
.avant-apres__etiquette--avant { left: 12px; }
.avant-apres__etiquette--apres { right: 12px; }

.modale__corps { padding: 26px 28px 30px; }
.modale__titre {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--marine-900);
  margin-bottom: 14px;
}
.modale__description {
  color: #3c4a53;
  font-size: 1.02rem;
  margin-bottom: 22px;
}

body.modale-ouverte-body { overflow: hidden; }

/* ============================================================
   BANNIÈRE DE PAGE (utilisée sur contact.html)
   ============================================================ */
.page-banniere {
  position: relative;
  overflow: hidden;
  padding: 150px 0 60px;
  color: var(--blanc);
}
.page-banniere__fond { position: absolute; inset: 0; z-index: 0; }
.page-banniere__image { width: 100%; height: 100%; object-fit: cover; }
.page-banniere__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 42, 61, 0.85) 0%, rgba(11, 42, 61, 0.82) 100%);
}
.page-banniere__contenu {
  position: relative;
  z-index: 1;
  max-width: 700px;
}
.page-banniere__titre {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 14px;
}
/* "Parlons-en !" ne doit jamais se couper entre "Parlons-" et "en" :
   soit toute la phrase tient sur une ligne, soit ce groupe de mots
   passe entièrement à la ligne suivante. */
.page-banniere__titre-accent { white-space: nowrap; }
.page-banniere__texte {
  font-size: 1.05rem;
  color: var(--texte-clair);
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact {
  background: var(--marine-900);
  padding: 84px 0 70px;
}

.contact__grille {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact__bloc {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--rayon);
  padding: 30px 32px;
  color: var(--texte-clair);
}

.contact__sous-titre {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--blanc);
  margin-bottom: 16px;
}
.contact__sous-titre--secondaire { font-size: 1.02rem; margin-bottom: 12px; }

/* À l'intérieur de chaque bloc pleine largeur : plusieurs colonnes
   pour bien occuper l'espace horizontal (empilées sur mobile). */
.contact__colonnes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.contact__colonnes--zone { grid-template-columns: 1fr 1.2fr; align-items: start; }

.contact__liste-infos { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
.contact__liste-infos li { display: flex; align-items: flex-start; gap: 10px; }
.contact__liste-infos a:hover { color: var(--bleu-toit); }
.contact__icone { color: var(--bleu-toit); flex-shrink: 0; display: inline-flex; }

/* Cartes visuelles "Nos coordonnées" (téléphone / email / adresse) */
.coordonnees__grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.coordonnee-carte {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
a.coordonnee-carte:hover {
  background: rgba(193, 85, 47, 0.14);
  border-color: rgba(193, 85, 47, 0.45);
  transform: translateY(-3px);
}
.coordonnee-carte--statique { cursor: default; }
.coordonnee-carte__icone {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(79, 169, 216, 0.16);
  color: var(--bleu-toit);
}
.coordonnee-carte__icone .icone-svg { width: 20px; height: 20px; }
.coordonnee-carte__corps { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.coordonnee-carte__label {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
}
.coordonnee-carte__valeur {
  font-size: 1rem;
  font-weight: 700;
  color: var(--blanc);
  overflow-wrap: anywhere;
}

/* Bandeau horaires mis en valeur, avec pastille "ouvert" clignotante */
.horaires-bandeau {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: rgba(74, 209, 122, 0.14);
  border: 1px solid rgba(74, 209, 122, 0.4);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 6px;
}
.horaires-bandeau__icone {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(74, 209, 122, 0.22);
  color: #4ad17a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.horaires-bandeau__corps { flex: 1 1 200px; min-width: 0; }
.horaires-bandeau__label {
  display: block;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 4px;
}
.horaires-bandeau .horaires__row {
  border-bottom: none;
  padding: 2px 0;
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.horaires-bandeau .horaires__row span:first-child {
  font-weight: 700;
  color: var(--blanc);
  font-size: 1rem;
}
.horaires-bandeau .horaires__row span:last-child {
  font-weight: 800;
  color: #4ad17a;
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.horaires-bandeau__statut {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #8fe3ac;
  font-size: 0.9rem;
  white-space: nowrap;
}
.pastille-vivante {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ad17a;
  box-shadow: 0 0 0 3px rgba(74, 209, 122, 0.25);
  animation: pastille-clignote 1.6s ease-in-out infinite;
}

/* Pictogrammes (SVG) utilisés à la place des emojis */
.icone-svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  vertical-align: -3px;
}
.modale__fermer .icone-svg { width: 16px; height: 16px; }

.horaires__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
  font-size: 0.94rem;
}
.horaires__row:last-child { border-bottom: none; }

.contact__zone-intro::first-letter { text-transform: uppercase; }

.contact__villes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 16px 0 18px;
}
.contact__ville-pill {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 0.82rem;
  white-space: nowrap;
  /* Texte toujours clair : ce composant n'est utilisé que sur des fonds
     sombres (accueil, contact, bas des pages /zones/). Avant, "inherit"
     reprenait la couleur de texte sombre par défaut du site et rendait
     le nom des villes quasiment invisible sur ces fonds. */
  color: var(--blanc);
  text-decoration: none;
  border: 1.5px solid transparent;
}
/* Seules les villes dont la page /zones/ est en ligne sont des <a> ; les
   autres restent de simples <span>, sans contour ni effet au survol. Les
   pastilles cliquables ont un contour orange bien visible pour signaler
   qu'elles le sont, et changent une seconde fois de couleur (orange plus
   foncé) au survol/focus. */
a.contact__ville-pill {
  background: rgba(193, 85, 47, 0.16);
  border-color: var(--terracotta);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
a.contact__ville-pill:hover,
a.contact__ville-pill:focus-visible {
  background: var(--terracotta-fonce);
  border-color: var(--terracotta-fonce);
  color: var(--blanc);
  outline: none;
}

.contact__zone-note {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.6);
}
.contact__zone-note a {
  color: var(--bleu-toit);
  font-weight: 700;
  text-decoration: none;
}
.contact__zone-note a:hover,
.contact__zone-note a:focus-visible {
  text-decoration: underline;
}

.contact__carte {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.contact__carte iframe { display: block; }
.contact__carte iframe[hidden] { display: none; }

.carte-consentement {
  height: 280px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.04);
}
/* Comme pour #modale-image : "display: flex" ci-dessus passe devant la
   règle native [hidden] du navigateur, il faut donc la restaurer. */
.carte-consentement[hidden] { display: none; }
.carte-consentement p {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.75);
  max-width: 340px;
  margin: 0;
}

/* Formulaire */
.formulaire { display: flex; flex-direction: column; gap: 14px; }
.formulaire__rangee {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.formulaire__champ { display: flex; flex-direction: column; gap: 6px; }
.formulaire__champ label { font-size: 0.9rem; color: var(--texte-clair); }
.formulaire__champ input,
.formulaire__champ textarea {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 11px 13px;
  font: inherit;
  color: var(--texte);
  resize: vertical;
}
.formulaire__champ input:focus,
.formulaire__champ textarea:focus {
  outline: none;
  border-color: var(--terracotta);
}
.formulaire__envoyer { align-self: flex-start; margin-top: 4px; }
.formulaire__statut { font-size: 0.9rem; min-height: 1.2em; }
.formulaire__statut--succes { color: #8fd6a6; }
.formulaire__statut--erreur { color: #ff9d8a; }

/* ============================================================
   PAGES LÉGALES (Mentions légales / Politique de confidentialité)
   En-tête simple (sans photo, non pertinente pour ce type de page)
   + un long texte structuré sur fond crème.
   ============================================================ */
.page-entete-simple {
  background: var(--marine-900);
  color: var(--blanc);
  padding: 150px 0 46px;
}
.page-entete-simple__titre {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 800;
  margin-bottom: 8px;
}
.page-entete-simple__soustitre { color: var(--texte-clair); font-size: 0.96rem; }

.contenu-legal { background: var(--creme); padding: 56px 0 80px; }
/* Variante utilisée quand ce bloc est immédiatement suivi d'une autre
   section (ex. la grille "Nos prestations à Royan") plutôt que du pied de
   page : évite un grand vide en cumulant les deux espacements. */
.contenu-legal--suivi { padding-bottom: 8px; }
.contenu-legal .conteneur { max-width: 820px; }
/* ...sauf quand ce bloc précède directement une section pleine largeur
   (grille de prestations) : on garde alors la largeur standard du site
   pour que le texte s'aligne avec les photos en dessous. */
.contenu-legal.contenu-legal--suivi .conteneur { max-width: var(--largeur-max); }
.contenu-legal h2 {
  font-size: 1.24rem;
  color: var(--marine-900);
  margin: 34px 0 12px;
}
.contenu-legal h2:first-child { margin-top: 0; }
.contenu-legal p,
.contenu-legal li { color: var(--texte); line-height: 1.7; margin-bottom: 12px; }
.contenu-legal ul { padding-left: 20px; margin-bottom: 16px; }
.contenu-legal a { color: var(--bleu-toit); }
.contenu-legal a:hover { text-decoration: underline; }
.contenu-legal__maj { color: rgba(36, 49, 58, 0.55); font-size: 0.85rem; }

/* .bouton--secondaire est conçu pour les fonds sombres (héro, bandeau
   cookies) ; sur le fond crème de cette section, on inverse les couleurs
   pour rester lisible. */
.contenu-legal .bouton--secondaire {
  color: var(--marine-900);
  border-color: var(--marine-900);
}
.contenu-legal .bouton--secondaire:hover { background: rgba(11, 42, 61, 0.06); }
.contenu-legal .bouton--secondaire:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.encadre-legal {
  background: var(--blanc);
  border: 1px solid var(--gris-bordure);
  border-radius: var(--rayon);
  padding: 20px 24px;
  margin-bottom: 20px;
}
.encadre-legal dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.encadre-legal dt { color: rgba(36, 49, 58, 0.6); font-weight: 600; }
.encadre-legal dd { margin: 0; }

.alerte-legal {
  background: rgba(193, 85, 47, 0.1);
  border: 1px solid rgba(193, 85, 47, 0.35);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.9rem;
  color: var(--terracotta-fonce);
  margin-bottom: 16px;
}

/* ============================================================
   BANDEAU COOKIES (simple, informatif, en bas à droite)
   ============================================================ */
.banniere-cookies {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 500;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--marine-900);
  color: var(--texte-clair);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 18px 20px;
  animation: banniere-cookies-apparition 0.4s ease;
}
.banniere-cookies__texte { font-size: 0.85rem; line-height: 1.55; }
.banniere-cookies__texte a { color: var(--bleu-toit); }
.banniere-cookies__actions { display: flex; justify-content: flex-end; gap: 10px; }
.banniere-cookies__actions .bouton { padding: 9px 18px; font-size: 0.85rem; }
.banniere-cookies__actions .bouton--secondaire { color: var(--texte-clair); border-color: rgba(255, 255, 255, 0.35); }
.banniere-cookies__actions .bouton--secondaire:hover { background: rgba(255, 255, 255, 0.08); }

@keyframes banniere-cookies-apparition {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.pied-de-page {
  background: var(--marine-800);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
  padding: 22px 0;
  font-size: 0.85rem;
}
.pied-de-page__interieur {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}
.pied-de-page__liens a:hover { color: var(--bleu-toit); }
.pied-de-page__legal {
  margin-top: 6px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
}
.pied-de-page__legal a { color: rgba(255, 255, 255, 0.7); }
.pied-de-page__legal a:hover { color: var(--bleu-toit); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .contact__colonnes,
  .contact__colonnes--zone,
  .formulaire__rangee { grid-template-columns: 1fr 1fr; }
  .coordonnees__grille { grid-template-columns: 1fr 1fr; }
  .prestations__grille { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .entete__burger { display: flex; order: 3; }

  /* En-tête mobile : logo — téléphone en gros — menu burger à droite,
     avec le badge "Disponible 24h/24" replacé sur une deuxième ligne
     plutôt que masqué. */
  .entete__interieur { flex-wrap: wrap; gap: 10px; row-gap: 8px; }
  .entete__logo { order: 1; flex-shrink: 0; }
  .entete__logo img { height: 44px; }

  .bouton--appel {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    padding: 11px 8px;
  }
  .bouton--appel span:last-child {
    display: inline-block;
    font-size: 0.98rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .entete__burger { flex-shrink: 0; }

  .badge-24-7--entete {
    display: inline-flex;
    order: 4;
    width: 100%;
    justify-content: center;
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--creme);
    border-bottom: 1px solid var(--gris-bordure);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
  }
  .nav.nav--ouvert { max-height: 260px; }
  .nav__liste {
    flex-direction: column;
    gap: 0;
    padding: 10px 24px 18px;
  }
  .nav__lien { display: block; padding: 12px 0; }

  .galerie-chantiers__item { height: 140px; }
  .galerie-nav { width: 38px; height: 38px; }
  .galerie-nav--precedent { left: 6px; }
  .galerie-nav--suivant { right: 6px; }
  .modale__panneau.modale__panneau--galerie { max-width: 88vw; }
  .modale__image--galerie { max-width: 88vw; max-height: 64vh; }
  .galerie-compteur { bottom: -30px; font-size: 0.8rem; }

  .contact__colonnes,
  .contact__colonnes--zone,
  .formulaire__rangee { grid-template-columns: 1fr; }
  .coordonnees__grille { grid-template-columns: 1fr; }
  .horaires-bandeau { flex-wrap: wrap; }
  .horaires-bandeau__statut { width: 100%; }
  .contact__bloc { padding: 26px 22px; }

  .page-banniere { padding: 130px 0 50px; }
  .page-entete-simple { padding: 120px 0 36px; }
}

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

@media (max-width: 480px) {
  .hero { padding-top: 84px; }
  .hero__titre { font-size: 1.7rem; line-height: 1.2; }
  .modale__image { height: 200px; }
  .avant-apres--modale { height: 200px; }
  .modale__corps { padding: 22px 20px 26px; }

  .banniere-cookies { left: 14px; right: 14px; bottom: 14px; max-width: none; }
  .encadre-legal dl { grid-template-columns: 1fr; }
}

/* ============================================================
   ZONES D'INTERVENTION (page /zones/ + pages villes /zones/*.html)
   Pages de référencement local : réutilisent au maximum les styles
   existants (.page-entete-simple, .contenu-legal) pour rester
   cohérentes visuellement avec le reste du site.
   ============================================================ */
.zones__intro { background: var(--creme); padding: 48px 0 8px; }
.zones__intro .conteneur { max-width: 820px; }
.zones__intro p { color: var(--texte); line-height: 1.7; }
.zones__intro a { color: var(--bleu-toit); }
.zones__intro a:hover, .zones__intro a:focus-visible { text-decoration: underline; }

.zones__grille-section { background: var(--creme); padding: 24px 0 70px; }

.zones__grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.zone-carte {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--blanc);
  border: 1px solid var(--gris-bordure);
  border-radius: var(--rayon);
  padding: 16px 20px;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.zone-carte:hover,
.zone-carte:focus-visible {
  box-shadow: var(--ombre);
  border-color: rgba(193, 85, 47, 0.35);
  transform: translateY(-3px);
  outline: none;
}
.zone-carte__icone {
  width: 20px;
  height: 20px;
  color: var(--terracotta);
  flex-shrink: 0;
}
.zone-carte__corps { min-width: 0; }
.zone-carte__nom {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--marine-900);
}
.zone-carte__lien {
  display: block;
  margin-top: 2px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--terracotta);
}

/* Villes pas encore en ligne (aperçu de la grille avant validation) */
.zone-carte--indisponible {
  cursor: default;
  opacity: 0.6;
}
.zone-carte--indisponible:hover,
.zone-carte--indisponible:focus-visible {
  box-shadow: none;
  border-color: var(--gris-bordure);
  transform: none;
}
.zone-carte__statut {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--terracotta);
  font-weight: 700;
}

/* Section "prestations" listées en texte sur une page ville */
.zone-services { padding-left: 20px; margin-bottom: 8px; }
.zone-services li { margin-bottom: 10px; }
.zone-services strong { color: var(--marine-900); }

.zone-photo {
  margin: 20px 0 28px;
  border-radius: var(--rayon);
  overflow: hidden;
  border: 1px solid var(--gris-bordure);
  background: var(--blanc);
}
.zone-photo img { width: 100%; max-height: 420px; object-fit: cover; display: block; }
.zone-photo figcaption {
  padding: 10px 16px;
  font-size: 0.82rem;
  color: #6b7a83;
}

.zone-fil-ariane {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 10px;
}
.zone-fil-ariane a { color: rgba(255, 255, 255, 0.9); }
.zone-fil-ariane a:hover { text-decoration: underline; }

/* Bloc "Nos autres zones d'intervention" en bas de chaque page ville —
   même fond sombre et mêmes pastilles que la section Contact, pour que
   .contact__bloc / .contact__villes / .contact__zone-note gardent un
   rendu cohérent quel que soit l'endroit du site où ils apparaissent. */
.zones-section-sombre {
  background: var(--marine-900);
  padding: 56px 0 70px;
}

/* ============================================================
   SECTION "NOS ZONES D'INTERVENTION" — page d'accueil
   Fond sombre (comme le pied de page juste en dessous), pastilles de
   villes centrées et gros bouton d'appel vers /zones/.
   ============================================================ */
.zones-accueil {
  background: var(--marine-900);
  padding: 84px 0;
  text-align: center;
}
/* Même largeur pour le titre et le texte d'intro, pour qu'ils forment une
   colonne bien alignée au lieu du décalage qu'on avait avant (le titre,
   avec sa plus grande taille de police, calculait un "ch" bien plus large
   que le paragraphe et donnait l'impression que le texte était plus
   étroit). */
.zones-accueil .section__titre,
.zones-accueil .section__intro {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
/* Les pastilles de villes ET le lien "Voir toutes nos zones" sont réunis
   dans une seule ligne flex (avec retour à la ligne) pour que le lien
   puisse se placer juste après la dernière pastille quand il y a la place,
   plutôt que de toujours retomber sur sa propre ligne en dessous. */
.zones-accueil__ligne {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 16px;
  margin: 8px 0 0;
}
/* display:contents "efface" le <ul> du rendu : ses <li> deviennent des
   éléments flex directs de .zones-accueil__ligne, au même niveau que le
   lien "Voir toutes nos zones", ce qui leur permet de se répartir sur les
   mêmes lignes. */
.zones-accueil__ligne > .zones-accueil__villes {
  display: contents;
}
.zones-accueil__villes .contact__ville-pill {
  font-size: 0.98rem;
  padding: 11px 24px;
}
.zones-accueil__voir-plus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1.5px solid var(--blanc);
  color: var(--blanc);
  border-radius: 999px;
  padding: 10.5px 24px;
  font-size: 0.98rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.zones-accueil__voir-plus:hover,
.zones-accueil__voir-plus:focus-visible {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--blanc);
  transform: translateY(-2px);
  outline: none;
}

/* ============================================================
   GROS CALL-TO-ACTION (bas de page ville, avant le bloc "zones")
   ============================================================ */
.cta-bandeau {
  background: var(--terracotta);
  padding: 64px 0;
  text-align: center;
}
.cta-bandeau__contenu { max-width: 600px; margin: 0 auto; }
.cta-bandeau__titre {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--blanc);
  margin-bottom: 12px;
}
.cta-bandeau__texte {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 28px;
}
.cta-bandeau__bouton {
  background: var(--blanc);
  color: var(--marine-900);
  font-size: 1.02rem;
  padding: 16px 34px;
}
.cta-bandeau__bouton:hover {
  background: var(--creme);
  color: var(--marine-900);
}

@media (max-width: 860px) {
  .zones__grille { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .zones__grille { grid-template-columns: 1fr; }
  .zones-accueil { padding: 60px 0; }
  .cta-bandeau { padding: 48px 0; }
}

/* ============================================================
   PAGE 404 (page introuvable)
   Même traitement visuel que les en-têtes de page simples
   (.page-entete-simple) : fond marine, texte clair, centré.
   ============================================================ */
.page-404 {
  background: var(--marine-900);
  color: var(--blanc);
  min-height: calc(100vh - 400px);
  display: flex;
  align-items: center;
  padding: 170px 0 90px;
}
.page-404__contenu { max-width: 620px; text-align: center; margin: 0 auto; }
.page-404__code {
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 800;
  line-height: 1;
  color: var(--terracotta);
  margin-bottom: 8px;
}
.page-404__titre {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  margin-bottom: 14px;
}
.page-404__texte {
  color: var(--texte-clair);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 34px;
}
.page-404__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 40px;
}
.page-404__liens {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  font-size: 0.92rem;
}
.page-404__liens a { color: var(--texte-clair); text-decoration: underline; text-underline-offset: 3px; }
.page-404__liens a:hover { color: var(--blanc); }

@media (max-width: 560px) {
  .page-404 { padding: 140px 0 70px; }
  .page-404__actions { flex-direction: column; align-items: stretch; }
}