/* ==========================================================================
   3D Nuisibles Seine-et-Marne 77 — Composants reutilisables
   Boutons, cartes, tableaux, formulaires, FAQ, temoignages, etapes
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Boutons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px; /* cible tactile >= 44px (WCAG 2.5.5) */
  padding: .9rem 1.75rem;
  font-family: var(--font-titre);
  font-variation-settings: 'wdth' 106;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform 100ms;
}
.btn:hover  { transform: translateY(-1px); box-shadow: var(--ombre); }
.btn:active { transform: scale(.98); }

.btn--appel {
  background: var(--vert);
  border-color: var(--vert);
  color: var(--blanc);
}

/* Pictogramme telephone des CTA d'appel. Purement decoratif : le libelle
   du bouton porte deja l'information, rien n'est ajoute au flux accessible. */
.btn--appel::before,
.cta-sticky__appel::before {
  content: '';
  flex-shrink: 0;
  width: 1.05em;
  height: 1.05em;
  background-color: currentColor;
  -webkit-mask: var(--icone-tel) center / contain no-repeat;
          mask: var(--icone-tel) center / contain no-repeat;
}
.btn--appel:hover { background: var(--vert-fonce); border-color: var(--vert-fonce); color: var(--blanc); }

.btn--principal {
  background: var(--rouge-fonce);
  border-color: var(--rouge-fonce);
  color: var(--blanc);
}
.btn--principal:hover { background: var(--rouge-survol); border-color: var(--rouge-survol); color: var(--blanc); }

.btn--secondaire {
  background: var(--blanc);
  border-color: var(--bleu);
  color: var(--bleu);
}
.btn--secondaire:hover { background: var(--bleu); color: var(--blanc); }

.btn--fantome {
  background: transparent;
  border-color: rgba(255,255,255,.7);
  color: var(--blanc);
}
.btn--fantome:hover { background: var(--blanc); color: var(--bleu); border-color: var(--blanc); }

.btn--bleu {
  background: var(--bleu);
  border-color: var(--bleu);
  color: var(--blanc);
}
.btn--bleu:hover { background: var(--bleu-nuit); border-color: var(--bleu-nuit); color: var(--blanc); }

.btn--large { width: 100%; min-height: 52px; padding: 1.0625rem 1.875rem; font-size: var(--fs-md); }
@media (min-width: 640px) { .btn--large { width: auto; } }

.btn--petit { min-height: 44px; padding: .55rem .9rem; font-size: var(--fs-sm); } /* 44px : plancher de cible tactile (WCAG 2.5.5 / iOS HIG) */

.btn__num { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* Groupe de boutons */
.groupe-btn {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.groupe-btn--centre { justify-content: center; }

/* --------------------------------------------------------------------------
   2. Cartes
   -------------------------------------------------------------------------- */
.carte {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--sp-5);
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition);
}
.carte:hover { border-color: var(--gris-400); }

.carte__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  margin-bottom: var(--sp-4);
  background: var(--bleu-pale);
  border-radius: 14px;
  font-size: 1.5rem;
}
.carte__icone img, .carte__icone svg { width: 28px; height: 28px; }

.carte h3 { margin-bottom: var(--sp-2); font-size: var(--fs-md); }
.carte p  { font-size: var(--fs-sm); color: var(--gris-700); }
.carte ul { font-size: var(--fs-sm); color: var(--gris-700); }
.carte__lien { margin-top: auto; padding-top: var(--sp-3); font-weight: 700; }

.carte--accent { border-top: 4px solid var(--rouge); }
.carte--vedette {
  border: 2px solid var(--rouge-fonce);
  box-shadow: var(--ombre);
}

.carte__etiquette {
  align-self: flex-start;
  margin-bottom: var(--sp-3);
  padding: .2rem .7rem;
  font-family: var(--font-titre);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  /* rouge fonce : 5,6:1 sur l'aplat rouge pale, contre 4,4:1 avec --rouge-fonce */
  color: var(--rouge-survol);
  background: var(--rouge-clair);
  border-radius: 100px;
}

/* --------------------------------------------------------------------------
   3. Blocs de mise en avant
   -------------------------------------------------------------------------- */
.encadre {
  padding: var(--sp-5) var(--sp-6);
  background: var(--fond);
  border: 1px solid var(--gris-200);
  border-left: 3px solid var(--bleu-clair);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-5);
}
.encadre :last-child { margin-bottom: 0; }
.encadre h3 { margin-bottom: var(--sp-2); }

.encadre--alerte {
  background: var(--rouge-clair);
  border-color: #F6DADA;
  border-left-color: var(--rouge-fonce);
}
.encadre--succes {
  background: var(--vert-pale);
  border-color: #D6EADF;
  border-left-color: var(--vert);
}

/* Liens poses sur un aplat teinte : --bleu-clair n'y tient que 4,37:1,
   on passe donc au bleu de survol (5,5:1). */
.encadre a,
.champ--case a,
.stat a,
.garanties a { color: var(--bleu-survol); }

/* Liste a puces "check" */
.liste-check { list-style: none; padding: 0; }
.liste-check li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--sp-3);
}
.liste-check li::before {
  content: '✓';
  position: absolute;
  left: 0; top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem; height: 1.4rem;
  background: var(--vert);
  color: var(--blanc);
  font-size: .8rem;
  font-weight: 800;
  border-radius: 50%;
}

.liste-croix { list-style: none; padding: 0; }
.liste-croix li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--sp-3);
}
.liste-croix li::before {
  content: '✕';
  position: absolute;
  left: 0; top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem; height: 1.4rem;
  background: var(--rouge-fonce);
  color: var(--blanc);
  font-size: .75rem;
  font-weight: 800;
  border-radius: 50%;
}

/* Chiffres cles */
.stats {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  text-align: center;
}
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat {
  padding: var(--sp-4);
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--radius);
}
.stat__valeur {
  display: block;
  font-family: var(--font-titre);
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--rouge-fonce);
  line-height: 1.1;
}
.stat__libelle {
  display: block;
  font-size: var(--fs-xs);
  color: var(--gris-700);
  margin-top: var(--sp-2);
}

/* --------------------------------------------------------------------------
   4. Etapes numerotees
   -------------------------------------------------------------------------- */
.etapes {
  list-style: none;
  counter-reset: etape;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 900px) { .etapes--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .etapes--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) and (max-width: 899px) { .etapes { grid-template-columns: repeat(2, 1fr); } }

.etape {
  position: relative;
  counter-increment: etape;
  margin: 0;
  padding: var(--sp-5) var(--sp-5) var(--sp-5) 0;
  background: transparent;
  border: 0;
  border-top: 2px solid var(--c-etape-filet);
  border-radius: 0;
}
.etape::before {
  content: counter(etape, decimal-leading-zero);
  display: block;
  margin-bottom: var(--sp-3);
  font-family: var(--font-titre);
  font-variation-settings: 'wdth' var(--wd-chiffre);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  color: var(--rouge-fonce);
}
.etape h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); color: var(--c-etape-titre); }
.etape p  { font-size: var(--fs-sm); color: var(--c-etape-texte); margin-bottom: 0; }
.etape__duree {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-etape-duree);
}

/* --------------------------------------------------------------------------
   5. Tableaux
   -------------------------------------------------------------------------- */
.tableau-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--sp-6);
}
table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  background: var(--blanc);
}
caption {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--gris-700);
  text-align: left;
  caption-side: bottom;
}
th, td {
  padding: var(--sp-5) var(--sp-4) var(--sp-5) 0;
  text-align: left;
  border-bottom: 1px solid var(--gris-200);
  vertical-align: top;
}
thead th {
  /* Le reseau ne colore pas ses en-tetes : capitales espacees, filet epais. */
  background: transparent;
  color: var(--gris-400);
  font-family: var(--font-corps);
  font-variation-settings: 'wdth' 100;
  font-weight: 700;
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: .13em;
  border-bottom: 2px solid var(--gris-900);
  padding-bottom: var(--sp-3);
}
tbody th {
  font-family: var(--font-titre);
  font-variation-settings: 'wdth' 110;
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: -.012em;
  color: var(--gris-900);
}
/* Pas de zebrure : le reseau separe les lignes par un filet, pas par un aplat. */
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
td .oui { color: var(--vert); font-weight: 700; }
td .non { color: var(--rouge-survol); font-weight: 700; } /* lisible aussi sur les lignes grisees */
/* Colonne de prix — typographie, pas aplat de couleur */
.col-vedette {
  font-family: var(--font-titre);
  font-variation-settings: 'wdth' 112;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  color: var(--gris-900);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   6. FAQ (details/summary natif = accessible sans JS)
   -------------------------------------------------------------------------- */
.faq { max-width: 900px; margin-inline: auto; }
.faq__item {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--radius);
  margin-bottom: var(--sp-3);
  overflow: hidden;
}
.faq__item[open] { border-color: var(--bleu-clair); box-shadow: var(--ombre-sm); }

.faq__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--bleu);
  cursor: pointer;
  list-style: none;
  min-height: 48px;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question:hover { background: var(--gris-100); }
.faq__question::after {
  content: '+';
  flex-shrink: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--rouge-fonce);
  transition: transform var(--transition);
}
.faq__item[open] .faq__question::after { content: '−'; }

.faq__reponse {
  padding: 0 var(--sp-5) var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--gris-700);
}
.faq__reponse :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   7. Temoignages
   -------------------------------------------------------------------------- */
.temoignage {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--sp-5);
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombre-sm);
}
.temoignage__note {
  color: var(--etoile);
  font-size: 1.05rem;
  letter-spacing: .1em;
  margin-bottom: var(--sp-3);
}
.temoignage blockquote {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--gris-900);
  font-style: italic;
}
.temoignage figcaption {
  margin-top: auto;
  font-size: var(--fs-xs);
  color: var(--gris-700);
}
.temoignage figcaption strong { color: var(--bleu); font-style: normal; }

/* Marqueur visuel des contenus a completer par le client */
.a-completer {
  background: var(--ambre-pale);
  border: 1px dashed var(--ambre);
  border-radius: 4px;
  padding: 0 .3em;
  color: var(--ambre);
  font-style: normal;
  font-weight: 600;
}

/* Logos de certification */
.certifs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  list-style: none;
  padding: 0;
  margin: 0;
}
.certifs li { margin: 0; }
.certifs img {
  height: 64px;
  width: auto;
  filter: grayscale(1);
  opacity: .78;
  transition: filter var(--transition), opacity var(--transition);
}
/* Le logo du reseau est un bloc presque carre : il lui faut plus de hauteur
   pour rester lisible a cote des badges au format bandeau. */
.certifs__reseau { height: 118px !important; }
.certifs img:hover { filter: none; opacity: 1; }

/* Bandeau de garanties */
.garanties {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 480px) { .garanties { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .garanties { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.garanties li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--bleu);
}
.garanties img { width: 24px; height: 24px; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   8. Formulaires
   -------------------------------------------------------------------------- */
.formulaire {
  max-width: 640px;
  padding: var(--sp-5);
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombre);
}
@media (min-width: 768px) { .formulaire { padding: var(--sp-6); } }

.champ { margin-bottom: var(--sp-4); }

.champ label {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--bleu);
}
.champ .requis { color: var(--rouge-survol); } /* lisible sur le fond gris du bloc RGPD */
.champ__aide {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--gris-700);
}

.champ input[type="text"],
.champ input[type="tel"],
.champ input[type="email"],
.champ select,
.champ textarea {
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  font-family: var(--font-corps);
  font-size: 1rem;           /* 16px : evite le zoom auto sur iOS */
  color: var(--gris-900);
  background: var(--blanc);
  border: 1px solid var(--gris-400);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ textarea { min-height: 120px; resize: vertical; }

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--bleu-clair);
  box-shadow: 0 0 0 3px rgba(56,113,190,.25);
  outline: none;
}

.champ select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%230D1826' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
  padding-right: 2.5rem;
}

/* Etats de validation */
.champ input[aria-invalid="true"],
.champ select[aria-invalid="true"],
.champ textarea[aria-invalid="true"] {
  border-color: var(--rouge-fonce);
  background: var(--rouge-clair);
}
.champ__erreur {
  display: none;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--rouge-survol);
}
.champ__erreur[data-visible="true"] { display: block; }

/* Case a cocher RGPD */
.champ--case {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--gris-100);
  border-radius: var(--radius);
}
.champ--case input[type="checkbox"] {
  flex-shrink: 0;
  width: 22px; height: 22px;
  margin-top: 2px;
  accent-color: var(--bleu);
  cursor: pointer;
}
.champ--case label {
  margin: 0;
  font-family: var(--font-corps);
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--gris-700);
  line-height: 1.55;
  cursor: pointer;
}
.champ--case .champ__erreur { flex-basis: 100%; }

/* Anti-spam (pot de miel) : invisible pour l'humain, present pour les robots */
.pot-de-miel {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

/* Messages de retour du formulaire */
.form-message {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.form-message[hidden] { display: none; }
.form-message--succes {
  background: var(--vert-pale);
  border-left: 5px solid var(--vert);
  color: var(--vert-fonce);
}
.form-message--erreur {
  background: var(--rouge-clair);
  border-left: 5px solid var(--rouge-fonce);
  color: var(--rouge-survol);
}

/* Bloc contact lateral */
.bloc-contact {
  padding: var(--sp-5);
  background: var(--bleu);
  color: var(--blanc);
  border-radius: var(--radius-lg);
}
.bloc-contact h2, .bloc-contact h3 { color: var(--blanc); }
.bloc-contact a { color: var(--blanc); }
.bloc-contact__liste { list-style: none; padding: 0; margin: 0 0 var(--sp-5); }
.bloc-contact__liste li {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid rgba(255,255,255,.16);
  font-size: var(--fs-sm);
}
.bloc-contact__liste li:last-child { border-bottom: 0; }
.bloc-contact__liste img { width: 22px; height: 22px; flex-shrink: 0; margin-top: 3px; }

/* --------------------------------------------------------------------------
   9. Carte de la zone d'intervention
   Les 507 communes de Seine-et-Marne, tracées d'après les contours
   officiels (geo.api.gouv.fr). Meme principe que la carte du reseau et
   celle de l'agence des Hauts-de-Seine, a l'echelle du departement 77.
   -------------------------------------------------------------------------- */
.carte-zone {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
  padding: var(--sp-5);
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--radius-lg);
}
@media (min-width: 860px) {
  .carte-zone { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: var(--sp-6); }
}

/* La carte est posee dans un cadre clair, comme sur le site de l'agence 92. */
.carte-zone__figure {
  margin: 0;
  padding: var(--sp-4);
  background: var(--gris-100);
  border: 1px solid var(--gris-200);
  border-radius: var(--radius-lg);
}
/* La Seine-et-Marne est tres allongee : on laisse la hauteur piloter la
   largeur, sinon le cadre reste plus large que le dessin. */
.carte-zone__figure svg,
.carte-zone__figure img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 420px;
  margin-inline: auto;
}
@media (min-width: 860px) { .carte-zone__figure svg, .carte-zone__figure img { max-height: 620px; } }

.carte-zone__texte h3 { margin-bottom: var(--sp-3); }
.carte-zone__texte p  { font-size: var(--fs-sm); color: var(--gris-700); }

/* Legende : chaque puce reprend exactement la teinte employee sur la carte */
.carte-legende {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}
.carte-legende li { margin: 0; display: flex; align-items: center; gap: var(--sp-3); }
.carte-legende i {
  flex-shrink: 0;
  width: 15px; height: 15px;
  border-radius: 4px;
  border: 1px solid var(--gris-200);
}
.carte-legende .puce-page   { background: #B3CAEA; border-color: #93AFD6; }
.carte-legende .puce-autre  { background: #E2E8F0; border-color: #C6CFDA; }
.carte-legende .puce-ville  { background: var(--bleu); border-color: var(--bleu); border-radius: 50%; }
.carte-legende .puce-siege  { background: var(--rouge-fonce); border-color: var(--rouge-fonce); border-radius: 50%; }

/* Chiffres cles a droite de la carte, meme principe que l'agence 92 */
.carte-chiffres {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
.carte-chiffres li {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(3.5rem, auto) 1fr;
  gap: var(--sp-3);
  align-items: baseline;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--gris-200);
}
.carte-chiffres li:first-child { border-top: 0; padding-top: 0; }
.carte-chiffres b {
  font-family: var(--font-titre);
  font-variation-settings: 'wdth' var(--wd-chiffre);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--gris-900);
}
.carte-chiffres span { font-size: var(--fs-sm); color: var(--gris-700); }

.carte-source {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--gris-200);
  font-size: var(--fs-xs);
  color: var(--gris-700);
}

/* --------------------------------------------------------------------------
   10. Liste des villes desservies
   -------------------------------------------------------------------------- */
.villes {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow-wrap: break-word;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-sm);
}
@media (min-width: 640px) { .villes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .villes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.villes li {
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--radius);
}
.villes strong { color: var(--bleu); }

/* --------------------------------------------------------------------------
   11. Bloc de rappel CTA
   -------------------------------------------------------------------------- */
.cta-final {
  background: linear-gradient(140deg, var(--rouge-fonce) 0%, var(--rouge-survol) 100%);
  color: var(--blanc);
  text-align: center;
  padding-block: var(--sp-8);
}
.cta-final h2 { color: var(--blanc); }
.cta-final p {
  font-size: var(--fs-md);
  /* blanc plein : seule valeur tenant 4,5:1 sur toute la longueur du degrade
     rouge. La hierarchie passe donc par la graisse, pas par la teinte. */
  color: var(--blanc);
  font-weight: 400;
  max-width: 60ch;
  margin-inline: auto;
  margin-bottom: var(--sp-5);
}
.cta-final .btn--secondaire { border-color: var(--blanc); }
.cta-final .btn--appel { border-color: var(--blanc); }

/* Bloc CTA compact en cours de page */
.cta-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-left: 3px solid var(--rouge-fonce);
  border-radius: var(--radius-lg);
  margin-block: var(--sp-7);
}
.cta-inline p {
  margin: 0;
  max-width: 46ch;
  font-family: var(--font-titre);
  font-variation-settings: 'wdth' 110;
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: 1.25;
  letter-spacing: -.012em;
  color: var(--gris-900);
}

/* --------------------------------------------------------------------------
   12. Infographie cycle de vie
   -------------------------------------------------------------------------- */
.cycle {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
@media (min-width: 900px) { .cycle { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cycle li {
  margin: 0;
  padding: var(--sp-5) var(--sp-4);
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--radius-lg);
}
.cycle img { width: 56px; height: 56px; margin: 0 auto var(--sp-3); }
.cycle h3 { font-size: var(--fs-base); margin-bottom: var(--sp-1); }
.cycle p { font-size: var(--fs-xs); color: var(--gris-700); margin: 0; }

/* --------------------------------------------------------------------------
   13. Garde-fous pour les tres petits ecrans (320 px)
   -------------------------------------------------------------------------- */
.garanties li { min-width: 0; }
.garanties li,
.villes li,
.carte,
.etape,
.temoignage { overflow-wrap: break-word; }

/* --------------------------------------------------------------------------
   14. Pages nuisible : acces direct et etiquette de prestation
   Repris de la barre "Acces direct" du comparatif de l'agence du 92.
   -------------------------------------------------------------------------- */
.acces-direct {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--gris-700);
}
.acces-direct .btn { margin: 0; }

.etiquette {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 0.15em 0.55em;
  font-family: var(--font-titre);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.4;
  color: var(--rouge-survol); /* 5,6:1 sur l'aplat rouge pale */
  white-space: nowrap;
  background: var(--rouge-clair);
  border: 1px solid var(--rouge-fonce);
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   15. Vocabulaire premium repris du franchiseur (releve le 10 septembre 2026)
   --------------------------------------------------------------------------
   Trois principes gouvernent son rendu :
     1. une micro-typographie de kickers en capitales tres espacees ;
     2. le refus de la boite — un filet et de la typographie la ou l'on
        mettrait spontanement une carte ;
     3. une seule ombre, profonde, reservee a l'objet principal de la page.
   -------------------------------------------------------------------------- */

/* Kicker — capitales espacees au-dessus d'un titre de section */
.kicker {
  display: block;
  margin: 0 0 var(--sp-4);
  font-family: var(--font-corps);
  font-variation-settings: 'wdth' 100;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--c-kicker);
}
.kicker--discret { color: var(--gris-400); letter-spacing: .13em; }


/* Pastille de marque — bordure fine, coins pleins, sur fond sombre */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-6);
  padding: 7px 16px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--blanc);
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 99px;
}
.pastille__point {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rouge);
  animation: pastille-pulse 2.4s ease-in-out infinite;
}
@keyframes pastille-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .pastille__point { animation: none; } }

/* Chiffres cles editoriaux — filet et typographie, sans boite */
.chiffres {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) { .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6); } }
@media (min-width: 1040px) { .chiffres--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.chiffres li {
  margin: 0;
  padding: var(--sp-6) var(--sp-6) var(--sp-6) 0;
  border-top: 2px solid var(--gris-900);
}
.chiffre__n {
  margin: 0;
  font-family: var(--font-titre);
  font-variation-settings: 'wdth' var(--wd-chiffre);
  font-size: var(--fs-stat);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  color: var(--gris-900);
}
.chiffre__u {
  margin: var(--sp-3) 0 var(--sp-4);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--rouge-fonce);
}
.chiffre__t { margin: 0; max-width: 34ch; font-size: var(--fs-sm); line-height: 1.65; color: var(--gris-700); }
.section--sombre .chiffres li { border-top-color: rgba(255, 255, 255, .28); }
.section--sombre .chiffre__n { color: var(--blanc); }
.section--sombre .chiffre__t { color: var(--sur-sombre-doux); }

/* Carte flottante — l'unique ombre profonde du site */
.carte-flottante {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  background: var(--blanc);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombre-lg);
}

/* --------------------------------------------------------------------------
   16. Carte d'estimation du hero
   Le simulateur du franchiseur, transpose : trois choix, une fourchette
   annoncee tout de suite, aucun champ obligatoire, aucune donnee transmise.
   -------------------------------------------------------------------------- */
.carte-flottante__titre {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--gris-900);
}
.est-champ { display: flex; flex-direction: column; gap: var(--sp-2); }
.est-champ label {
  font-size: .78125rem;
  font-weight: 600;
  color: var(--gris-700);
}
.est-champ select,
.est-champ input {
  width: 100%;
  min-height: 48px;
  padding: .8125rem .9375rem;
  font-family: var(--font-corps);
  font-size: 1rem;
  color: var(--gris-900);
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--radius);
}
.est-champ select:focus,
.est-champ input:focus {
  border-color: var(--rouge-fonce);
  outline: 2px solid var(--rouge-fonce);
  outline-offset: 1px;
}
.est-zone {
  margin: 0;
  min-height: 0;
  font-size: .84375rem;
  font-weight: 600;
  line-height: 1.45;
}
.est-zone:not(:empty) { padding: .5625rem .8125rem; border-radius: var(--radius); }
.est-zone--ok     { background: var(--vert-pale);  color: var(--vert-fonce); }
.est-zone--limite { background: var(--ambre-pale); color: var(--ambre); }
.est-zone--hors   { background: var(--fond);       color: var(--gris-700); }

.est-resultat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--gris-200);
}
.est-label {
  margin: 0;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gris-400);
}
.est-prix {
  margin: 0;
  font-family: var(--font-titre);
  font-variation-settings: 'wdth' 112;
  font-size: clamp(1.3125rem, 5vw, 1.625rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
  color: var(--gris-900);
}
.est-detail { margin: .125rem 0 0; font-size: var(--fs-sm); color: var(--gris-700); }
.est-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.est-actions .btn { flex: 1 1 auto; }
.est-note {
  margin: 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--gris-200);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--gris-700);
}
.est-note a { color: var(--gris-900); text-underline-offset: 3px; }
.est-note a:hover { color: var(--rouge-fonce); }

/* Champs masques par [hidden] — display:flex l'emporterait sinon */
.est-champ[hidden] { display: none; }

/* --------------------------------------------------------------------------
   17. Hero : bandeau de preuves
   Quatre chiffres sous les boutons d'appel, sur un filet, comme le reseau.
   -------------------------------------------------------------------------- */
.hero__preuves {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-5);
  margin: var(--sp-7) 0 0;
  padding: var(--sp-6) 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.hero__preuves li { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
.hero__preuves b {
  font-family: var(--font-titre);
  font-variation-settings: 'wdth' 112;
  font-size: 1.4375rem;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--blanc);
}
.hero__preuves span { font-size: .78125rem; line-height: 1.45; color: rgba(255, 255, 255, .64); }
@media (min-width: 1040px) { .hero__preuves { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Le mot mis en exergue dans le titre du hero passe au rouge de marque,
   comme le titre d'accueil du franchiseur. */
.hero h1 em { color: var(--rouge); font-style: normal; }


/* Le libelle d'un bouton d'appel s'efface sur les tres petits ecrans :
   le numero suffit, et la cible tactile reste entiere. */
@media (max-width: 479px) { .btn__libelle { display: none; } }

/* Carte chargee en <object> : elle reste un fichier a part, mis en cache un an,
   tout en gardant ses liens et son survol — un <img> les aurait rendus inertes. */
.carte-zone__objet {
  /* Un <object> ne recupere pas les dimensions intrinseques d'un SVG defini par
     son seul viewBox : sans largeur explicite il s'effondre a zero. On fixe
     donc la largeur et on laisse le rapport de forme calculer la hauteur. */
  display: block;
  width: 100%;
  max-width: 330px;
  aspect-ratio: 1092 / 1387;
  height: auto;
  margin-inline: auto;
}
@media (min-width: 860px) { .carte-zone__objet { max-width: 488px; } }

/* Lien vers la fiche d'etablissement Google, dans le pied de page. */
.pied__google {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
}
.pied__google a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  text-underline-offset: 3px;
}
.pied__google a::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: var(--icone-etoile) center / contain no-repeat;
  mask: var(--icone-etoile) center / contain no-repeat;
}


/* Ligne de reassurance placee sous les CTA principaux.
   Couleur heritee de la surface (claire ou sombre) : pas de valeur en dur,
   donc lisible aussi bien sur l'aplat marine du hero que sur fond blanc. */
p.reassurance {
  /* selecteur porte sur l'element : sans cela, .page-entete p (meme
     specificite, declaree plus tot) imposait 18 px a cette micro-copie. */
  margin: var(--sp-3) 0 0;
  color: inherit;
  opacity: .78;
  font-size: var(--fs-xs);
  font-variation-settings: 'wdth' var(--wd-corps);
  line-height: 1.5;
}

/* Mention "(facultatif)" dans un libelle de champ : meme role que l'asterisque
   des champs obligatoires, mais dans l'autre sens. Discrete, jamais criante. */
.champ__option {
  margin-left: .25rem;
  color: var(--gris-700);
  font-weight: 600;
  font-size: var(--fs-2xs);
  font-variation-settings: 'wdth' var(--wd-corps);
  text-transform: none;
  letter-spacing: 0;
}