/* Version anglaise uniquement — mise en avant de l'équipe anglophone.
   Fichier additif : ne modifie aucune règle existante du site. */
.en-langue {
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  margin: 22px 0 0;
  padding: 13px 22px 13px 14px;
  background: linear-gradient(135deg, #166534 0%, #15803d 55%, #16a34a 100%);
  border: 0;
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 10px 24px rgba(22, 163, 74, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 15px;
  line-height: 1.45;
}
.en-langue__drapeau {
  flex: 0 0 auto;
  width: 36px;
  height: 24px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 0 2px #ffffff, 0 2px 6px rgba(0, 0, 0, 0.25);
}
.en-langue__drapeau svg { display: block; width: 100%; height: 100%; }
.en-langue__texte strong {
  display: block;
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.01em;
}
.en-langue__texte { color: rgba(255, 255, 255, 0.95); font-weight: 500; }
/* variante en haut de page : entre le badge et le grand titre */
.en-langue--hero { margin: 0 0 22px; }
/* variante centrée (pages au titre centré) */
.en-langue--centre { margin: 0 auto 22px; }
/* variante sous un titre seul (pages d'information) */
.en-langue--sous-titre { margin: 18px 0 0; }
/* variante posée au-dessus d'un formulaire */
.en-langue--formulaire { margin: 0 auto 18px; }
@media (max-width: 480px) {
  .en-langue { font-size: 14px; padding: 10px 14px; gap: 10px; }
  .en-langue__texte strong { font-size: 16px; }
}

/* 02/10 — badge du formulaire « We'll call you back in English » : drapeaux britannique et américain
   (dessinés : les émojis drapeaux s'affichent « GB » sous Windows) à la place du point vert. */
.hero-form-header .form-badge { gap: 9px; white-space: nowrap; }
.hero-form-header .form-badge .pulse-green { display: none; }
.hero-form-header .form-badge::before,
.hero-form-header .form-badge::after,
.en-badge::before,
.en-badge::after {
  content: ""; flex: 0 0 auto; width: 20px; height: 14px; border-radius: 2px;
  background: center / cover no-repeat; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.hero-form-header .form-badge::before, .en-badge::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 60 30%22 preserveAspectRatio=%22xMidYMid slice%22%3E%3CclipPath id=%22a%22%3E%3Cpath d=%22M0,0 v30 h60 v-30 z%22/%3E%3C/clipPath%3E%3CclipPath id=%22b%22%3E%3Cpath d=%22M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z%22/%3E%3C/clipPath%3E%3Cg clip-path=%22url%28%23a%29%22%3E%3Cpath d=%22M0,0 v30 h60 v-30 z%22 fill=%22%23012169%22/%3E%3Cpath d=%22M0,0 L60,30 M60,0 L0,30%22 stroke=%22%23fff%22 stroke-width=%226%22/%3E%3Cpath d=%22M0,0 L60,30 M60,0 L0,30%22 clip-path=%22url%28%23b%29%22 stroke=%22%23C8102E%22 stroke-width=%224%22/%3E%3Cpath d=%22M30,0 v30 M0,15 h60%22 stroke=%22%23fff%22 stroke-width=%2210%22/%3E%3Cpath d=%22M30,0 v30 M0,15 h60%22 stroke=%22%23C8102E%22 stroke-width=%226%22/%3E%3C/g%3E%3C/svg%3E"); }
.hero-form-header .form-badge::after, .en-badge::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 190 100%22 preserveAspectRatio=%22xMidYMid slice%22%3E%3Crect width=%22190%22 height=%22100%22 fill=%22%23fff%22/%3E%3Crect y=%220.00%22 width=%22190%22 height=%227.69%22 fill=%22%23B22234%22/%3E%3Crect y=%2215.38%22 width=%22190%22 height=%227.69%22 fill=%22%23B22234%22/%3E%3Crect y=%2230.77%22 width=%22190%22 height=%227.69%22 fill=%22%23B22234%22/%3E%3Crect y=%2246.15%22 width=%22190%22 height=%227.69%22 fill=%22%23B22234%22/%3E%3Crect y=%2261.54%22 width=%22190%22 height=%227.69%22 fill=%22%23B22234%22/%3E%3Crect y=%2276.92%22 width=%22190%22 height=%227.69%22 fill=%22%23B22234%22/%3E%3Crect y=%2292.31%22 width=%22190%22 height=%227.69%22 fill=%22%23B22234%22/%3E%3Crect width=%2276%22 height=%2253.85%22 fill=%22%233C3B6E%22/%3E%3Ccircle cx=%228%22 cy=%226.0%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2220%22 cy=%226.0%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2232%22 cy=%226.0%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2244%22 cy=%226.0%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2256%22 cy=%226.0%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2268%22 cy=%226.0%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2214%22 cy=%2211.6%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2226%22 cy=%2211.6%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2238%22 cy=%2211.6%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2250%22 cy=%2211.6%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2262%22 cy=%2211.6%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%228%22 cy=%2217.2%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2220%22 cy=%2217.2%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2232%22 cy=%2217.2%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2244%22 cy=%2217.2%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2256%22 cy=%2217.2%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2268%22 cy=%2217.2%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2214%22 cy=%2222.8%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2226%22 cy=%2222.8%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2238%22 cy=%2222.8%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2250%22 cy=%2222.8%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2262%22 cy=%2222.8%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%228%22 cy=%2228.4%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2220%22 cy=%2228.4%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2232%22 cy=%2228.4%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2244%22 cy=%2228.4%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2256%22 cy=%2228.4%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2268%22 cy=%2228.4%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2214%22 cy=%2234.0%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2226%22 cy=%2234.0%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2238%22 cy=%2234.0%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2250%22 cy=%2234.0%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2262%22 cy=%2234.0%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%228%22 cy=%2239.6%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2220%22 cy=%2239.6%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2232%22 cy=%2239.6%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2244%22 cy=%2239.6%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2256%22 cy=%2239.6%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2268%22 cy=%2239.6%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2214%22 cy=%2245.2%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2226%22 cy=%2245.2%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2238%22 cy=%2245.2%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2250%22 cy=%2245.2%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2262%22 cy=%2245.2%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%228%22 cy=%2250.8%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2220%22 cy=%2250.8%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2232%22 cy=%2250.8%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2244%22 cy=%2250.8%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2256%22 cy=%2250.8%22 r=%221.9%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2268%22 cy=%2250.8%22 r=%221.9%22 fill=%22%23fff%22/%3E%3C/svg%3E"); }
@media (max-width: 480px) {
  .hero-form-header .form-badge { gap: 6px; letter-spacing: 0.03em; font-size: 11px; padding-left: 12px; padding-right: 12px; }
  .hero-form-header .form-badge::before, .hero-form-header .form-badge::after,
  .en-badge::before, .en-badge::after { width: 16px; height: 11px; }
  .en-badge { gap: 6px; letter-spacing: 0.03em; font-size: 11px; padding-left: 12px; padding-right: 12px; }
}

/* même badge, posé au-dessus des formulaires qui n'en avaient pas (accueil, devis, page publicitaire) */
.en-badge {
  display: flex; align-items: center; gap: 9px; width: fit-content; margin: 0 auto 14px;
  background: #dcfce7; color: #16a34a; font-size: 0.75rem; font-weight: 800; padding: 6px 14px;
  border-radius: var(--radius-full, 999px); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap;
}
.inspection-bar:has(.en-badge) { padding-top: 22px; }

/* 02/10 21 h 55 — un seul drapeau, britannique, après « English » (demande de l'utilisateur) */
.hero-form-header .form-badge::before, .en-badge::before { display: none; }
.hero-form-header .form-badge::after, .en-badge::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 60 30%22 preserveAspectRatio=%22xMidYMid slice%22%3E%3CclipPath id=%22a%22%3E%3Cpath d=%22M0,0 v30 h60 v-30 z%22/%3E%3C/clipPath%3E%3CclipPath id=%22b%22%3E%3Cpath d=%22M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z%22/%3E%3C/clipPath%3E%3Cg clip-path=%22url%28%23a%29%22%3E%3Cpath d=%22M0,0 v30 h60 v-30 z%22 fill=%22%23012169%22/%3E%3Cpath d=%22M0,0 L60,30 M60,0 L0,30%22 stroke=%22%23fff%22 stroke-width=%226%22/%3E%3Cpath d=%22M0,0 L60,30 M60,0 L0,30%22 clip-path=%22url%28%23b%29%22 stroke=%22%23C8102E%22 stroke-width=%224%22/%3E%3Cpath d=%22M30,0 v30 M0,15 h60%22 stroke=%22%23fff%22 stroke-width=%2210%22/%3E%3Cpath d=%22M30,0 v30 M0,15 h60%22 stroke=%22%23C8102E%22 stroke-width=%226%22/%3E%3C/g%3E%3C/svg%3E"); }

/* 02/10 — Formulaire du haut : la carte entière doit tenir dans le premier écran d'un MacBook Air
   (fenêtre ≈ 1440 × 766, en-tête du site compris). Polices, hauteur des champs et boutons restent
   ceux d'origine ; on ne reprend que de l'espace perdu (interlignes, marges) et on range l'appel
   d'urgence sur une seule rangée. Résultat : carte de 641 px au lieu de 701, bas à 20 px du bord. */
@media (min-width: 993px) {
  /* la carte se cale en haut de sa colonne, comme le texte, au lieu d'être centrée verticalement :
     sur les pages au texte long, le centrage la faisait descendre sous la ligne de flottaison */
  .hero-split .container > .hero-form-card { align-self: start; }
  /* l'empilement numéro + mention d'urgence (voir plus bas) reprend ~20 px : on les récupère sur les
     écarts entre champs (10 → 8 px) et autour du pied, sans toucher à la taille des champs */
  .hero-split .hero-form { gap: 8px; }
  .hero-split .hero-form-phone { margin-top: 8px; }
  /* intitulés des champs : même police, interligne resserré (20 px → 16 px) */
  .hero-split .hero-form .hf-group label { line-height: 1.35; }
  /* petits espacements */
  .hero-split .hero-form-header .form-badge { margin-bottom: 8px; }
  .hero-split .hero-form-header { margin-bottom: 12px; }
  .hero-split .hero-form-footer { margin-top: 10px; padding-top: 10px; }
}
/* Fenêtres de portable (hauteur ≤ 820 px) : deux cartes plus hautes que les autres reçoivent un
   resserrement supplémentaire — pages de Lille (encadré « €50 off ») et page chenilles
   processionnaires (titre sur deux lignes). Champs, boutons et polices toujours inchangés. */
@media (min-width: 993px) and (max-height: 820px) {
  .hero-split .hero-form-card:has(.est-promo),
  .hero-split .hero-form-card:has(input[name="source"][value="traitement-chenille-processionnaire-essonne"]) {
    margin-top: -8px; padding-top: 20px; padding-bottom: 20px;
  }
  .hero-split .hero-form-card:has(.est-promo) .hero-form,
  .hero-split .hero-form-card:has(input[name="source"][value="traitement-chenille-processionnaire-essonne"]) .hero-form { gap: 8px; }
  .hero-split .hero-form-card:has(.est-promo) .hero-form-footer,
  .hero-split .hero-form-card:has(input[name="source"][value="traitement-chenille-processionnaire-essonne"]) .hero-form-footer { margin-top: 10px; padding-top: 10px; }
  .hero-split .hero-form-header .est-promo { margin: 2px 0 4px; padding-top: 7px; padding-bottom: 7px; }
  .hero-split .hero-form-card:has(.est-promo) .hero-form-header p { line-height: 1.4; }
  .hero-split .hero-form-card:has(.est-promo) .hf-group { gap: 2px; }
}

/* Téléphone et tablette en colonne unique (≤ 768 px) : la carte occupait la largeur de son contenu
   et se calait à droite (marge gauche automatique du grand écran) ; les textes anglais, plus courts,
   la rendaient plus étroite qu'en français (71 px de vide à gauche contre 24 à droite sur 430 px).
   Elle prend désormais toute la largeur de la colonne, centrée, sans dépasser 480 px sur tablette. */
@media (max-width: 768px) {
  .hero-split .container > .hero-form-card { width: 100%; max-width: 480px !important; margin-left: auto; margin-right: auto; }
}

/* 02/10 23 h 20 — numéro d'urgence mis en avant (demande de l'utilisateur) : bouton centré et large,
   « An emergency? Call us! » placé DESSOUS, en petit, rouge foncé et gras (contraste suffisant sur le fond bleu). */
.hero-form-phone { display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; }
.hero-form-phone .or-text { margin: 0; color: #b91c1c; font-weight: 800; font-size: 0.68rem; letter-spacing: 0.5px; line-height: 1.15; }
.hero-form-phone a { width: min(100%, 300px); justify-content: center; font-size: 1.02rem; white-space: nowrap; padding-top: 7px; padding-bottom: 7px; }
@media (min-width: 993px) {
  /* compense la hauteur de la mention placée sous le numéro */
  .hero-split .hero-form-card { padding-bottom: 18px; }
  .hero-split .hero-form-header { margin-bottom: 10px; }
  .hero-split .hero-form-footer { margin-top: 8px; padding-top: 8px; }
}
@media (min-width: 993px) and (max-height: 820px) {
  /* Lille et chenilles : même compensation pour la mention placée sous le numéro */
  .hero-split .hero-form-card:has(.est-promo),
  .hero-split .hero-form-card:has(input[name="source"][value="traitement-chenille-processionnaire-essonne"]) { padding-bottom: 16px; }
  .hero-split .hero-form-card:has(.est-promo) .hero-form,
  .hero-split .hero-form-card:has(input[name="source"][value="traitement-chenille-processionnaire-essonne"]) .hero-form { gap: 6px; }
  .hero-split .hero-form-card:has(.est-promo) .hero-form-footer,
  .hero-split .hero-form-card:has(input[name="source"][value="traitement-chenille-processionnaire-essonne"]) .hero-form-footer { margin-top: 8px; padding-top: 8px; }
}

/* 02/10 23 h 40 — « An emergency? Call us! » centré verticalement entre le bas du bouton du numéro et le bord bas
   de la carte : l'espace existant est réparti à parts égales (même hauteur totale de carte). */
.hero-form-phone { gap: 14px; }
.hero-form-card:has(.hero-form-phone) { padding-bottom: 14px; }
@media (min-width: 993px) {
  .hero-split .hero-form-phone { gap: 11px; }
  .hero-split .hero-form-card:has(.hero-form-phone) { padding-bottom: 11px; }
}
@media (min-width: 993px) and (max-height: 820px) {
  .hero-split .hero-form-card:has(.est-promo) .hero-form-phone,
  .hero-split .hero-form-card:has(input[name="source"][value="traitement-chenille-processionnaire-essonne"]) .hero-form-phone { gap: 10px; }
  .hero-split .hero-form-card:has(.est-promo):has(.hero-form-phone),
  .hero-split .hero-form-card:has(input[name="source"][value="traitement-chenille-processionnaire-essonne"]):has(.hero-form-phone) { padding-bottom: 10px; }
}
@media (max-width: 768px) {
  .hero-form-phone { gap: 16px; }
  .hero-form-card:has(.hero-form-phone) { padding-bottom: 16px; }
  .hero-split .hero-form-phone { gap: 16px; }
}