/* ==========================================================================
   Pages commune et pages departement
   ========================================================================== */

.ville-hero {
  background:
    radial-gradient(900px 420px at 82% -10%, rgba(62,146,204,.20), transparent 60%),
    linear-gradient(155deg, var(--navy-900), var(--navy-700));
  color: #fff;
  padding: clamp(2.2rem, 5vw, 3.8rem) 0 clamp(2.6rem, 5vw, 4rem);
}

.ville-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr);
  gap: clamp(1.8rem, 4vw, 3rem);
  align-items: center;
}
@media (max-width: 900px) {
  .ville-hero-grid { grid-template-columns: 1fr; }
}

.ville-badge {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--aqua);
  background: rgba(62,146,204,.14);
  border: 1px solid rgba(62,146,204,.32);
  border-radius: 100px;
  padding: .3rem .85rem;
  margin-bottom: 1rem;
}

/* Bandeau des pages metier : photo de chantier sous un voile bleu.
   Le voile est franc a gauche, ou se trouve le texte blanc, et s'ouvre vers
   la droite pour laisser voir la photo. Sans lui, le texte devient illisible
   des que la photo est claire (ciel, carrosserie blanche du camion).
   Reserve aux pages metier : les 3890 pages commune gardent le degrade seul. */
.ville-hero-photo {
  background:
    linear-gradient(100deg,
      rgba(11,31,58,.95) 0%,
      rgba(11,31,58,.90) 38%,
      rgba(11,31,58,.62) 72%,
      rgba(11,31,58,.45) 100%),
    var(--photo) center 42% / cover no-repeat;
}
/* Sous 900 px la grille passe en une colonne : le texte occupe alors toute
   la largeur et le voile doit couvrir partout. */
@media (max-width: 900px) {
  .ville-hero-photo {
    background:
      linear-gradient(170deg, rgba(11,31,58,.94), rgba(11,31,58,.88)),
      var(--photo) center / cover no-repeat;
  }
}

/* Sur un degrade uni, un fond a 6 % d'opacite suffit a detacher l'encadre.
   Sur une photo, la carrosserie du camion traverse et les chiffres deviennent
   illisibles : il faut un fond opaque. Pas de backdrop-filter ici, il ne sert
   a rien sous un fond deja dense et cree un contexte d'empilement inutile. */
.ville-hero-photo .ville-chiffres {
  background: rgba(9, 26, 49, .82);
  border-color: rgba(255,255,255,.22);
}

/* Le logo de la societe remplace le badge texte en tete des pages metier.
   Version claire, puisque le fond du bandeau est bleu fonce. */
.hero-logo-entite {
  display: block;
  height: 42px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: 1.1rem;
}

.ville-hero h1 { color: #fff; margin-bottom: .9rem; }

.ville-sous-titre {
  color: rgba(255,255,255,.8);
  font-size: 1.03rem;
  max-width: 58ch;
  margin-bottom: 1.6rem;
}

/* Chiffres INSEE de la commune */
.ville-chiffres {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.ville-chiffres h2 {
  font-size: 1.05rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .09em;
  padding-bottom: .8rem;
  margin-bottom: .4rem;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.ville-chiffres dl { margin: 0; }
.ville-chiffres dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ville-chiffres dl > div:last-child { border-bottom: none; }
.ville-chiffres dt { font-size: .85rem; color: rgba(255,255,255,.62); }
.ville-chiffres dd {
  margin: 0;
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
}

/* Bloc editorial contextuel */
.ville-contexte { max-width: 820px; }
.ville-contexte p { color: var(--text-soft); font-size: 1.02rem; }

/* Cartes de renvoi vers les autres metiers */
.lien-service { display: block; transition: border-color .2s, box-shadow .2s, transform .2s; }
.lien-service:hover {
  border-color: var(--aqua);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .9rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--aqua-dark);
}
.lien-fleche svg { width: 15px; height: 15px; }

/* Communes proches */
.puces { display: flex; flex-wrap: wrap; gap: .6rem; }
.puce {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: .5rem 1rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--navy-800);
  transition: border-color .2s, background-color .2s;
}
.puce:hover { border-color: var(--aqua); background: var(--aqua-050); color: var(--navy-800); }
.puce span { font-size: .78rem; color: var(--text-faint); }

.voir-zone { margin-top: 1.6rem; }
.voir-zone a { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }
.voir-zone svg { width: 15px; height: 15px; }

/* Bloc devis */
.ville-devis {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(1.8rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 900px) {
  .ville-devis { grid-template-columns: 1fr; }
}

.devis-points { list-style: none; padding: 0; margin: 1.2rem 0; }
.devis-points li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: .5rem;
  color: var(--text-soft);
  font-size: .95rem;
}
.devis-points li::before {
  content: "";
  position: absolute;
  left: 0; top: .35em;
  width: 14px; height: 7px;
  border-left: 2px solid var(--aqua);
  border-bottom: 2px solid var(--aqua);
  transform: rotate(-45deg);
}

.devis-tel { font-size: .95rem; color: var(--text-soft); }
.devis-tel a { font-weight: 700; font-size: 1.1rem; color: var(--navy-800); }
.devis-tel a:hover { color: var(--aqua-dark); }

/* --------------------------------------------------------------------------
   Intro avec encadre d'alerte, et deroule d'intervention
   -------------------------------------------------------------------------- */

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  gap: clamp(1.8rem, 4vw, 3.2rem);
  align-items: start;
}
.intro-grid > div p { color: var(--text-soft); font-size: 1.02rem; }
@media (max-width: 880px) {
  .intro-grid { grid-template-columns: 1fr; }
}

.encadre-alertes {
  background: var(--navy-050);
  border: 1px solid var(--border);
  border-left: 3px solid var(--aqua);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: clamp(1.2rem, 2.5vw, 1.7rem);
}
.encadre-alertes h3 {
  font-size: 1.05rem;
  margin-bottom: .9rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--border);
}
.encadre-alertes ul { list-style: none; padding: 0; margin: 0; }
.encadre-alertes li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .5rem;
  font-size: .92rem;
  color: var(--text-soft);
}
/* Point d'exclamation dessine, plutot qu'un caractere : il reste net a
   toutes les tailles et ne depend pas de la police. */
.encadre-alertes li::before {
  content: "";
  position: absolute;
  left: .3rem; top: .3em;
  width: 3px; height: .62em;
  background: var(--aqua);
  border-radius: 2px;
  box-shadow: 0 .85em 0 0 var(--aqua);
}
.encadre-note {
  margin: 1rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid var(--border);
  font-size: .86rem;
  font-weight: 600;
  color: var(--navy-800);
}

/* Deroule numerote */
.etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: clamp(1.1rem, 2.5vw, 1.8rem);
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: etape;
}
.etape {
  position: relative;
  padding-top: 1.1rem;
  border-top: 2px solid var(--border);
}
/* Le trait de l'etape en cours est bleu : la progression se lit d'un coup
   d'oeil, sans avoir a suivre les numeros. */
.etape::after {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 42px; height: 2px;
  background: var(--aqua);
}
.etape-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  margin-bottom: .7rem;
  border-radius: 50%;
  /* Pastille pleine : en bleu pale sur fond blanc, elle disparaissait et les
     numeros semblaient poses a nu. */
  background: var(--aqua);
  color: #fff;
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 700;
}
.etape h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.etape p { color: var(--text-soft); font-size: .92rem; margin: 0; }

/* --------------------------------------------------------------------------
   Carte de situation de la commune
   -------------------------------------------------------------------------- */

.proximite-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: start;
}
@media (max-width: 820px) {
  .proximite-grid { grid-template-columns: 1fr; }
}

.carte-situation {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1rem, 2vw, 1.4rem);
  box-shadow: var(--shadow-sm);
}
.carte-situation svg {
  display: block;
  width: 100%;
  height: auto;
  /* Le trace est cadre sur le departement : sans plafond, un departement
     etroit comme Paris s'etirerait sur toute la hauteur de la colonne. */
  max-height: 320px;
}
.carte-situation figcaption {
  margin-top: .8rem;
  padding-top: .7rem;
  border-top: 1px solid var(--border);
  font-size: .84rem;
  color: var(--text-faint);
}

.csit-dept {
  fill: var(--navy-050);
  stroke: var(--navy-600);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
/* Les voisines restent discretes : c'est la commune de la page qui doit
   accrocher l'oeil en premier. */
.csit-voisine { fill: var(--navy-600); opacity: .38; }
.csit-halo { fill: var(--aqua); opacity: .22; }
.csit-ici { fill: var(--aqua-dark); stroke: #fff; stroke-width: .8; }

/* --------------------------------------------------------------------------
   Domaines d'intervention (pages metier)
   -------------------------------------------------------------------------- */

.domaines { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); }

.domaine {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.8rem);
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s, border-color .25s;
}
.domaine:hover { box-shadow: var(--shadow-md); border-color: var(--aqua); }

/* Une carte sur deux inverse photo et texte : sans cela, la colonne de
   photos alignee fait catalogue et l'oeil decroche. L'ordre du DOM ne change
   pas, seule la position visuelle est inversee. */
.domaine-inverse .domaine-visuel { order: 2; }

.domaine-visuel {
  position: relative;
  align-self: stretch;
  min-height: 240px;
  background: linear-gradient(150deg, var(--navy-800), var(--navy-700));
}
.domaine-visuel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Emplacement sans photo : aplat de marque et pictogramme, plutot qu'un vide. */
.domaine-vide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.30);
}
.domaine-vide svg { width: 84px; height: 84px; }

.domaine-texte { padding: clamp(1.3rem, 2.5vw, 2.2rem) clamp(1.3rem, 2.5vw, 2.2rem); }
.domaine-inverse .domaine-texte { order: 1; }

.domaine-numero {
  display: block;
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--aqua);
  margin-bottom: .35rem;
}
.domaine-texte h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); margin-bottom: .5rem; }
.domaine-texte > p { color: var(--text-soft); font-size: .97rem; margin-bottom: 1rem; }

.domaine-points { list-style: none; padding: 0; margin: 0; }
.domaine-points li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .38rem;
  font-size: .92rem;
  color: var(--navy-800);
}
.domaine-points li:last-child { margin-bottom: 0; }
.domaine-points li::before {
  content: "";
  position: absolute;
  left: 0; top: .34em;
  width: 12px; height: 6px;
  border-left: 2px solid var(--aqua);
  border-bottom: 2px solid var(--aqua);
  transform: rotate(-45deg);
}

@media (max-width: 780px) {
  .domaine { grid-template-columns: 1fr; }
  /* En une colonne, l'inversion n'a plus de sens : la photo repasse en tete
     partout, sinon une carte sur deux commencerait par son texte. */
  .domaine-inverse .domaine-visuel { order: 0; }
  .domaine-inverse .domaine-texte { order: 0; }
  .domaine-visuel { min-height: 190px; }
}

/* --------------------------------------------------------------------------
   Pages departement
   -------------------------------------------------------------------------- */

.communes-liste {
  columns: 4 190px;
  column-gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.communes-liste li { break-inside: avoid; margin-bottom: .4rem; }
.communes-liste a { font-size: .92rem; color: var(--text-soft); }
.communes-liste a:hover { color: var(--aqua-dark); }

.zone-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-top: 1.6rem;
}

/* --------------------------------------------------------------------------
   Page contact
   -------------------------------------------------------------------------- */

/* Numero unique aux deux societes : puisqu'il ne figure plus dans chaque
   bloc, il est mis en avant une fois, au-dessus. */
.contact-numero {
  margin: 1.4rem 0 1.6rem;
  line-height: 1.25;
}
.contact-numero a {
  display: inline-block;
  font-family: var(--font-title);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  font-weight: 700;
  color: var(--navy-900);
  letter-spacing: .01em;
}
.contact-numero a:hover { color: var(--aqua-dark); }
.contact-numero span {
  display: block;
  margin-top: .3rem;
  font-size: .86rem;
  color: var(--text-faint);
}
/* Le courriel est dans un span sous le numero : sans cette regle il herite
   de la taille du numero et les deux se disputent l'attention. Le telephone
   doit rester le contact principal. */
.contact-numero span a {
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--navy-600);
}

.contact-blocs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.contact-bloc {
  background: var(--navy-050);
  border-left: 3px solid var(--aqua);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1.2rem 1.3rem;
}
.contact-bloc.rouge { background: var(--red-050); border-left-color: var(--red); }
.contact-bloc h3 { margin-bottom: .1rem; }

/* Le logo remplace le nom ecrit de la societe. width:auto seul ne suffit pas :
   il faut aussi borner la largeur, sinon le logo deborde du bloc en mobile. */
.contact-logo {
  display: block;
  height: 34px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: .55rem;
}
.contact-role { font-size: .84rem; color: var(--text-faint); margin-bottom: .7rem; }
.contact-tel { font-size: 1.2rem; font-weight: 700; color: var(--navy-800); }
.contact-tel:hover { color: var(--aqua-dark); }
.contact-adresse {
  display: block;
  font-style: normal;
  font-size: .88rem;
  color: var(--text-soft);
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px solid var(--border);
}
.contact-sous-titre { margin-top: 1.8rem; }

/* Sans hero, le titre de page enchaine directement apres le fil d'Ariane :
   il lui faut une taille de titre de page, pas de banniere. */
.section-contact { padding-top: clamp(1.2rem, 2.5vw, 2rem); }
.section-contact h1 {
  font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem);
  color: var(--navy-900);
  margin-bottom: .6rem;
}
/* Le titre vit dans la colonne de gauche de la grille, pas dans une bande
   pleine largeur : le formulaire remonte ainsi au niveau du titre au lieu de
   demarrer sous lui. */
.section-contact .section-head { margin-bottom: clamp(1.4rem, 2.5vw, 2rem); }
.section-contact .section-head p { color: var(--text-soft); }

/* Le h2 suit immediatement le h1 : a taille egale la hierarchie disparait. */
.section-contact .ville-devis h2 { font-size: clamp(1.25rem, 1rem + .9vw, 1.6rem); }

/* --------------------------------------------------------------------------
   Pages legales
   -------------------------------------------------------------------------- */

.texte-legal { max-width: 780px; }
.texte-legal h1 { margin-bottom: 1.5rem; }
.texte-legal h2 {
  font-size: 1.35rem;
  margin-top: 2.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
}
.texte-legal p, .texte-legal li { color: var(--text-soft); }

/* Le logo tient lieu de nom de societe dans les pages legales. */
.logo-societe {
  display: block;
  height: 38px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.texte-legal h3 { margin-bottom: .8rem; }
.logos-societes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem 2.4rem;
  margin: 1.4rem 0 .5rem;
}
.texte-legal ul { padding-left: 1.3rem; }
.texte-legal li { margin-bottom: .4rem; }

/* Index des zones : un bloc par metier */
.zone-bloc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem);
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.zone-bloc h2 { margin-bottom: .4rem; }
.zone-bloc > p { color: var(--text-soft); margin-bottom: 1.3rem; }