/*
  Procimex — styles propres à la page « Collectivités & syndics »
  (slug collectivites-et-syndic).

  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, introduction, deux cartes de démarche, liste
  des spécificités du bâtiment collectif, clôture. Aucune image : il n'y en a
  pas de disponible pour cette page, la mise en page est donc entièrement
  portée par le texte et les blocs.
*/

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

/* ---------- 2 · Introduction ---------- */
.coll-intro-texte { max-width: 47.5rem; }
.coll-intro h2 { margin-bottom: 1.25rem; }
.coll-intro .prose + .prose { margin-top: 1.25rem; }

/* ---------- 3 · Les deux démarches ----------
   Deux cartes de largeur égale. auto-fit plutôt qu'un nombre de colonnes figé :
   la grille passe d'elle-même à une colonne quand la place manque, sans palier
   à écrire. */
.demarches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.demarche {
  padding: 1.75rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
}
.demarche h3 { font-size: 1.25rem; }

/* Phrase de situation, entre le titre et les puces : c'est elle qui permet au
   lecteur de savoir laquelle des deux cartes le concerne. Couleur atténuée
   pour qu'elle se lise comme un chapeau et non comme un premier point. */
.demarche-intro {
  margin-top: 0.75rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--mute);
}

/* Mêmes puces à coche que les étapes de la page méthode : le même repère d'un
   bout à l'autre du site. */
.demarche-points {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-top: 1.25rem;
  list-style: none;
  padding: 0;
}
.demarche-points li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 1rem;
  line-height: 1.65;
}
/* 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. */
.demarche-points svg { flex: none; margin-top: 0.3125rem; color: var(--accent); }

/* ---------- 4 · Ce qui change en bâtiment collectif ----------
   Liste en pleine largeur de colonne de texte plutôt qu'en cartes : chaque
   point fait deux à trois lignes, une grille de cartes les découperait en
   colonnes trop étroites pour être lues d'une traite. */
.coll-specificites-texte { max-width: 47.5rem; }
.coll-specificites h2 { margin-bottom: 1.75rem; }

.specificites {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  list-style: none;
  padding: 0;
}
.specificites li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 1.0312rem;
  line-height: 1.7;
  color: var(--body-ink);
}
.specificites svg { flex: none; margin-top: 0.375rem; color: var(--accent); }
.specificites strong { color: var(--ink); font-weight: 700; }

/* Lien vers la page méthode, dans la puce « Aucun produit chimique ».
   :where(a) de base.css rend les liens indistinguables du texte courant —
   dans une puce, il doit se voir sans passer la souris dessus. */
.specificites a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.specificites a:hover { color: var(--hl); }

/* ---------- 5 · Clôture ----------
   Fond --pale (classe .section--pale dans le gabarit) : la section « Ce qui
   change en bâtiment collectif » qui précède est sur --paper, un simple filet
   ne suffisait pas à séparer les deux.

   .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. */
.coll-closing-titre { text-align: center; }
.coll-closing .btn--onDark { background: var(--btn); color: var(--white); }
.coll-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. */
.coll-closing .btn--ghostDark { background: var(--white); color: var(--ink); border-color: var(--border-dk); }
.coll-closing .btn--ghostDark:hover { background: var(--btn-hover); color: var(--white); border-color: var(--btn-hover); }
.coll-closing .btn { min-width: 16.375rem; }

/* Ce qu'il est utile d'écrire dans le message, la page n'ayant pas de
   formulaire à elle. Même traitement discret que .methode-syndics : c'est une
   précision, pas une action. */
.coll-precision {
  max-width: 37.5rem;
  margin: 2rem auto 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--mute);
}

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

@media (max-width: 780px) {
  .coll-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. */
  .coll-tete h1 { font-size: 1.75rem; }

  .demarche { padding: 1.375rem; }

  /* .center-col repasse à gauche sous 780 px (base.css) : la précision suit,
     sinon elle resterait centrée sous des boutons alignés à gauche. */
  .coll-precision { margin-left: 0; margin-right: 0; }

  /* 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. */
  .coll-closing .btn { min-width: 0; width: 100%; }
}