/*
  Procimex — styles propres à la page « Location Cimex Eradicator »
  (slug location-cimex-eradicator-marseille).

  Chargés uniquement sur cette page (voir procimex_enqueue_assets() dans
  functions.php). Tout ce qui est partagé avec les autres pages vit dans
  base.css, jamais ici.

  Mise en page : en-tête sombre, présentation de l'appareil en deux colonnes
  (texte + photo), fonctionnement, surfaces traitables, protocole, grille
  tarifaire, contenu de la location, FAQ, clôture. Les composants repris des
  autres pages intérieures (en-tête sombre, encadré à liseré, boutons de
  clôture) sont recopiés et non partagés : chaque page a sa feuille, chargée
  seule, et ses classes à elle.
*/

/* ---------- 1 · En-tête de page ----------
   Même traitement que .methode-tete et .devis-tete : c'est l'ouverture commune
   à toutes les pages intérieures du site. */
.loc-tete {
  background: var(--navy);
  /* Le focus clavier par défaut (--btn, bleu foncé) est invisible sur ce fond. */
  --focus: var(--paper);
}
.loc-tete-texte { max-width: 47.5rem; }
.loc-tete .label { color: var(--accent-lt); }
.loc-tete h1 {
  font-size: clamp(2.0625rem, 4vw, 3.25rem);
  color: var(--white);
  text-wrap: balance;
}

/* ---------- Passerelles vers les autres pages (sections 2, 5 et 9) ----------
   Trois sorties de la page vers un contenu voisin : l'article « reconnaître »
   dans la présentation, l'article sur l'usage du nettoyeur vapeur sous le
   protocole, la page méthode dans la clôture. Volontairement plus petites et
   plus discrètes que les boutons, comme .methode-syndics l'est sur la page
   méthode : ce sont des issues, pas l'action attendue.
   --body-ink et non --mute : même défaut de contraste que .loc-caution
   (4,29:1 sur --pale à 15px, sous le 4,5:1 exigé, relevé par Lighthouse
   après l'ajout de la barre d'action mobile). */
.loc-aparte {
  margin-top: 2rem;
  font-size: 0.9375rem;
  color: var(--body-ink);
}
.loc-aparte a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.loc-aparte a:hover { color: var(--hl); }

/* Sous le protocole uniquement : la liste des étapes est centrée sous un h2
   centré, une ligne calée à gauche y pendrait dans le vide. */
.loc-aparte--centre { text-align: center; }
/* ---------- 2 · Présentation de l'appareil ----------
   Colonne d'image de largeur fixe : la photo est un objet détouré sur fond
   blanc, l'agrandir ne la rend pas plus lisible et elle prendrait la place du
   texte. align-items: start pour que la photo reste en haut si le texte est
   plus long. */
.loc-intro-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 3rem;
  align-items: start;
}
.loc-intro h2 { margin-bottom: 1.25rem; }
.loc-intro-texte { max-width: 41.25rem; }
.loc-intro .prose + .prose { margin-top: 1.25rem; }

/* Cadre blanc autour de la photo : le fichier a un fond blanc incrusté, posé
   directement sur --paper il dessinerait un rectangle plus clair que la page,
   qui se lit comme un défaut. Le cadre rend ce blanc délibéré — même parti
   pris que les pastilles de logos ailleurs sur le site. */
.loc-photo {
  position: relative;
  margin: 0;
  padding: 1.25rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
}
.loc-photo img { width: 100%; height: auto; }

/* Pastille 180 °C : même couple de couleurs que .badge-temp sur la page
   méthode (--badge-bg/--badge-text, base.css) — seule touche de rouge du
   site, réservée à cette température. Posée en coin plutôt qu'au fil du
   texte : la valeur est déjà écrite en toutes lettres dans le paragraphe
   juste au-dessus, la répéter en pastille est décoratif, pas informatif.
   box-shadow propre (et non --shadow-card, pensé pour de plus grandes
   surfaces) pour la détacher de la photo sans dupliquer une valeur pensée
   pour les cartes. */
.loc-photo-badge {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--badge-text);
  background: var(--badge-bg);
  padding: 0.25rem 0.6875rem;
  border-radius: 0.375rem;
  box-shadow: 0 1px 3px color-mix(in oklab, var(--shadow-tint) 12%, transparent);
}

/* Informations pratiques (lieu, téléphone, horaires). Même composant que
   .methode-duree : liseré d'accent à gauche plutôt qu'un fond, pour ne pas
   annoncer une nouvelle section là où il n'y a qu'un encadré. */
.loc-pratique {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}
/* flex: none — sans quoi la coche est comprimée par le texte à côté d'elle.
   Le décalage l'aligne sur la première ligne. */
.loc-pratique svg { flex: none; margin-top: 0.25rem; color: var(--accent); }
/* :where(a) de base.css rend les liens indistinguables du texte : le numéro
   doit se voir comme un lien appelable, surtout sur téléphone. */
.loc-pratique a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.loc-pratique a:hover { color: var(--hl); }

/* ---------- 3 · Fonctionnement de la vapeur sèche ---------- */
.loc-technique-texte { max-width: 47.5rem; }
.loc-technique h2 { margin-bottom: 1.25rem; }

/* Même patron que .specificites sur la page Collectivités : intitulé mis en
   évidence, texte à la suite. Pas de cadre — quatre lignes de texte n'ont pas
   besoin d'un contour pour se lire comme un ensemble. */
.technique-points {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  margin-top: 1.75rem;
  list-style: none;
  padding: 0;
}
.technique-points li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 1.0312rem;
  line-height: 1.7;
  color: var(--body-ink);
}
.technique-points svg { flex: none; margin-top: 0.375rem; color: var(--accent); }
.technique-points strong { color: var(--ink); font-weight: 700; }

/* ---------- 4 · Surfaces traitables ---------- */
.loc-surfaces h2 { text-align: center; }

.surfaces-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.surface-carte {
  padding: 1.75rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
}
.surface-carte h3 { font-size: 1.1875rem; margin-bottom: 0.75rem; }
.surface-carte p { font-size: 1rem; line-height: 1.65; color: var(--body-ink); }

/* Précaution : --danger et non --accent — c'est le même repère universel de
   vigilance que celui déjà réservé aux erreurs de formulaire dans base.css,
   pas une couleur de marque à cet endroit. */
.loc-avertissement {
  max-width: 43.75rem;
  margin: 2rem auto 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--danger);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: 0.9688rem;
  line-height: 1.65;
  color: var(--body-ink);
}
.loc-avertissement strong { color: var(--ink); font-weight: 700; }

/* ---------- 5 · Protocole d'application ---------- */
.loc-protocole h2 { text-align: center; }

/* base.css neutralise les puces de <ul> mais pas la numérotation de <ol> :
   sans ces deux lignes, le navigateur affiche « 1. » devant chaque étape, en
   doublon de la pastille numérotée — même remarque que .etapes sur la page
   méthode. */
.protocole-etapes {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 2.5rem;
  list-style: none;
  padding: 0;
}

.protocole-etape {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
}

/* Même pastille que .etape-num sur la page méthode (fond --pale sur carte
   blanche) : le même repère de position d'un bout à l'autre du site. */
.protocole-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0.125rem;
  border-radius: 50%;
  background: var(--pale);
  color: var(--accent);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1;
}

.protocole-etape h3 { font-size: 1.1875rem; margin-bottom: 0.5rem; }
.protocole-etape p { font-size: 1rem; line-height: 1.65; color: var(--body-ink); margin: 0; }

/* ---------- 6 · Tarifs ----------
   Trois cartes de largeur égale. auto-fit plutôt qu'un nombre de colonnes
   figé : la grille passe d'elle-même à deux puis une colonne quand la place
   manque, sans palier à écrire. */
/* Cible de la barre d'action mobile (« Voir les tarifs ») : sans ce
   scroll-margin, l'en-tête collant (5,625 rem, même valeur que celle de
   <main> dans base.css) recouvrirait le haut de la section à l'arrivée. */
#tarifs { scroll-margin-top: 5.625rem; }

.loc-tarifs h2 { text-align: center; }

/* Cadre unique (28/08 : les cartes séparées et la caution en dessous sont
   fusionnées) — tarifs et caution se lisent comme une seule information
   pratique, pas comme deux blocs distincts. */
.tarif-carte {
  max-width: 26rem;
  margin: 2.5rem auto 0;
  padding: 1.75rem 2rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
}

.tarifs-liste { list-style: none; padding: 0; margin: 0; }
.tarifs-liste li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.875rem 0;
}
/* Filet entre les deux lignes, pas au-dessus de la première ni en dessous de
   la dernière : c'est la caution qui porte son propre filet plus bas. */
.tarifs-liste li + li { border-top: 1px solid var(--border); }

.tarif-duree {
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--mute);
  letter-spacing: .01em;
}

/* Le prix en gros et en couleur d'encre : c'est l'information que la page doit
   livrer sans lecture. */
.tarif-prix {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 700;
  color: var(--ink);
}
/* Le symbole reste lisible mais ne concurrence pas le nombre. */
.tarif-devise { font-size: 1.125rem; font-weight: 600; color: var(--accent); }

/* Conditions de remise, dans le même cadre que les tarifs : filet au-dessus
   pour la détacher des deux lignes de prix sans changer de couleur de fond.

   --body-ink et non --mute : sur --pale et à cette taille (15,5 px), --mute
   ne donne que 4,29:1, sous le 4,5:1 exigé (relevé par Lighthouse, 27/08).
   Même défaut que celui déjà rencontré sur la page méthode. */
.loc-caution {
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.9688rem;
  line-height: 1.7;
  color: var(--body-ink);
}
.loc-caution strong { color: var(--ink); font-weight: 700; }

/* ---------- 7 · Ce qui est fourni ----------
   Un seul cadre depuis le 28/08 (les colonnes « Consommable » / « Accessoires »
   sont fusionnées) : la grille à deux colonnes n'a plus lieu d'être, et la
   largeur est contrainte pour que la liste ne s'étire pas sur toute la page. */
.fourni-bloc {
  max-width: 34rem;
  margin-top: 2.5rem;
  padding: 1.75rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
}

/* Mêmes puces à coche que les étapes de la page méthode : le même repère d'un
   bout à l'autre du site, lu comme une garantie plutôt que comme une simple
   énumération. */
.fourni-points {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  list-style: none;
  padding: 0;
}
.fourni-points li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 1rem;
  line-height: 1.65;
}
.fourni-points svg { flex: none; margin-top: 0.3125rem; color: var(--accent); }

/* ---------- 8 · Questions fréquentes ----------
   Filets de séparation plutôt que des cartes (comme .article-item dans
   base.css) : cinq questions/réponses courtes n'ont pas besoin d'un contour
   chacune, la liste se lit déjà comme un ensemble. */
.loc-faq h2 { text-align: center; margin-bottom: 0.5rem; }

.faq-liste { max-width: 47.5rem; margin: 2rem auto 0; }

.faq-item {
  padding: 1.625rem 0;
  border-top: 1px solid var(--border);
}
.faq-item:first-child { border-top: none; padding-top: 0; }
.faq-item h3 { font-size: 1.125rem; margin-bottom: 0.5rem; }
.faq-item p { font-size: 1rem; line-height: 1.65; color: var(--body-ink); margin: 0; }

/* ---------- 9 · Clôture ----------
   Fond --pale (classe .section--pale dans le gabarit) : la section « Fourni
   avec l'appareil » qui précède est sur --paper, un simple filet ne suffisait
   pas à séparer les deux. Rien n'empêche l'alternance ici, contrairement à la
   page méthode dont la section précédente est déjà en --pale.

   .btn--onDark/.btn--ghostDark sont pensés pour un fond sombre ; surchargés ici
   pour rester lisibles sur fond clair. Sur --pale, le bouton secondaire à fond
   blanc se détache — c'est le réglage qui fonctionne sur l'accueil. */
.loc-closing-titre { text-align: center; }
.loc-closing .btn--onDark { background: var(--btn); color: var(--white); }
.loc-closing .btn--onDark:hover { background: var(--btn-hover); color: var(--white); border-color: var(--btn-hover); }
/* Fond blanc et non transparent : un bouton transparent se confond avec le fond
   de la section et ne se lit plus comme un bouton. */
.loc-closing .btn--ghostDark { background: var(--white); color: var(--ink); border-color: var(--border-dk); }
.loc-closing .btn--ghostDark:hover { background: var(--btn-hover); color: var(--white); border-color: var(--btn-hover); }
.loc-closing .btn { min-width: 16.375rem; }

/* Précision de livraison (28/08) : au-dessus de la passerelle vers la page
   méthode et dans une couleur plus soutenue qu'elle — c'est une condition
   pratique à connaître avant d'appeler, pas une note secondaire. */
.loc-livraison {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--body-ink);
}


/* ---------- 10 · Barre d'action mobile ----------
   Masquée par défaut, activée uniquement sous 780 px (voir Responsive) : sur
   desktop, les deux actions sont déjà visibles sans défiler, une barre fixe
   n'y a aucun rôle. Propre à cette page (28/08) — essai avant extension
   éventuelle au reste du site. */
.loc-barre-mobile { display: none; }

.loc-barre-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.875rem 1rem;
  font-size: 0.9375rem;
}
/* Variante claire pour l'action secondaire : .btn est pensé plein (fond
   --btn), ici les deux boutons doivent se distinguer l'un de l'autre sans
   que le secondaire ne rivalise avec le premier. */
.loc-barre-btn--ghost {
  background: var(--white);
  color: var(--ink);
  border-color: var(--border-dk);
}
.loc-barre-btn--ghost:hover { background: var(--btn-hover); color: var(--white); border-color: var(--btn-hover); }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  /* La photo passe sous le texte et cesse de tenir toute la largeur : un objet
     détouré étiré sur 700 px paraît hors d'échelle. */
  .loc-intro-grille { grid-template-columns: 1fr; gap: 2rem; }
  .loc-photo { max-width: 15rem; }
}

@media (max-width: 780px) {
  .loc-tete { padding-top: 3.5rem; padding-bottom: 3.5rem; }

  /* La taille plancher du clamp() (33 px) reste trop haute une fois la marge
     latérale retirée. Même correction que .methode-tete h1. */
  .loc-tete h1 { font-size: 1.75rem; }

  .tarif-carte { padding: 1.5rem 1.25rem; }
  .fourni-bloc { padding: 1.375rem; }
  .surface-carte { padding: 1.375rem; }

  /* La pastille passe au-dessus du texte plutôt qu'à côté : sur 780 px, une
     colonne fixe de 1,75 rem laisse trop peu de place au texte pour un titre
     de deux lignes. */
  .protocole-etape { flex-direction: column; gap: 0.75rem; padding: 1.375rem; }

  /* Les deux boutons de clôture passent l'un sous l'autre et prennent toute la
     largeur : à ce palier, min-width les rendrait plus larges que l'écran. */
  .loc-closing .btn { min-width: 0; width: 100%; }

  /* env(safe-area-inset-bottom) : marge de la barre gestuelle des iPhone
     récents, sans encoche physique — sans elle, les boutons de la barre
     seraient à moitié sous cette zone. box-shadow orientée vers le haut
     (valeur négative) : la barre est posée sur le contenu, l'ombre doit
     suivre ce sens, pas celui des cartes. */
  .loc-barre-mobile {
    display: flex;
    gap: 0.75rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 0.75rem 1.375rem calc(0.75rem + env(safe-area-inset-bottom));
    background: var(--paper);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 8px color-mix(in oklab, var(--shadow-tint) 8%, transparent);
  }

  /* Dégagement en bas de la dernière section : sans lui, la barre fixe
     recouvrirait en permanence le lien « Voir notre méthode de traitement »
     une fois arrivé en bas de page. */
  .loc-closing { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }

  /* Le pied de page vient après .loc-closing et n'est pas protégé par le
     padding ci-dessus : sans cette règle, la barre fixe recouvre en
     permanence les liens légaux du footer. Pas de classe body à préfixer :
     location.css n'est chargé que sur cette page (wp_enqueue_style
     conditionnel dans functions.php), .site-footer y est donc déjà
     spécifique. */
  .site-footer {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom));
  }
}