/*
  Procimex — styles propres à la page « Notre méthode » (slug methodologie).

  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, bloc d'introduction, puis quatre étapes
  empilées sur toute la largeur (vignette à gauche, texte à droite). La version
  en quatre cartes carrées a été abandonnée le 26/08 : les textes sont passés
  d'une phrase à un paragraphe plus des puces, illisible en colonne étroite.
*/

/* ---------- 1 · En-tête de page ----------
   Même traitement que l'en-tête de la page de devis (.devis-tete dans
   contact.css) : fond sombre, label en bleu clair. Les deux pages doivent
   s'ouvrir de la même façon — c'est le parti pris retenu pour toutes les pages
   intérieures du site. */
.methode-tete {
  background: var(--navy);
  /* Le focus clavier par défaut (--btn, bleu foncé) est invisible sur ce fond.
     Même correction que dans le hero et le pied de page. */
  --focus: var(--paper);
}
.methode-tete-texte { max-width: 47.5rem; }
.methode-tete .label { color: var(--accent-lt); }

/* Une marche en dessous du h1 de l'accueil, comme sur la page de devis : ce
   titre est long et sert d'entrée de page intérieure, pas d'accroche de
   couverture. */
.methode-tete h1 {
  font-size: clamp(2.0625rem, 4vw, 3.25rem);
  color: var(--white);
  text-wrap: balance;
}

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

/* Durée d'intervention, sortie du paragraphe : c'est l'information pratique
   que le visiteur cherche du regard, elle se perdait en fin de phrase entre
   parenthèses.

   Délimité par un liseré et non par un fond (26/08, trois variantes comparées
   à l'écran) : sur --paper, un fond --pale reprenait exactement la couleur de
   la section d'étapes juste en dessous, comme si la section commençait là. Le
   contour reprend le vocabulaire des cartes d'étapes sans ajouter de couleur. */
.methode-duree {
  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.
   margin-top aligne son centre optique sur la première ligne. */
.methode-duree svg { flex: none; margin-top: 0.25rem; color: var(--accent); }

/* ---------- 3 · Les quatre étapes ---------- */
.etapes {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;

  /* base.css neutralise les puces de <ul> mais pas la numérotation de <ol> :
     sans ces deux lignes, le navigateur affiche « 1. » devant chaque bloc, en
     doublon de la pastille numérotée. */
  list-style: none;
  padding: 0;
}

.etape {
  display: grid;
  /* Colonne d'image fixe : la vignette garde la même taille d'une étape à
     l'autre quelle que soit la longueur du texte à côté. minmax(0, 1fr) sur la
     seconde colonne — sans le 0, un mot long empêcherait la colonne de se
     rétrécir et ferait déborder la grille. */
  grid-template-columns: 12.5rem minmax(0, 1fr);
  gap: 2rem;
  align-items: start;

  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  padding: 1.75rem;
}

.etape-vignette {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r);
}

/* Pastille et titre sur une même ligne de base, le titre pouvant passer à la
   ligne sans que la pastille se déplace. */
.etape-tete {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  margin-bottom: 1.125rem;
}

/* Pastille numérotée : le pendant visuel de la position dans le <ol>. Portée
   par un aria-hidden dans le gabarit — le chiffre serait sinon annoncé deux
   fois par un lecteur d'écran, une fois par la liste, une fois par la pastille. */
.etape-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--pale);
  color: var(--accent);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1;
  /* align-items: baseline aligne la boîte sur sa dernière ligne de texte ;
     ce décalage la remet en face de la majuscule du titre. */
  transform: translateY(0.125rem);
}

.etape h3 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 1.375rem;
  line-height: 1.25;
}

/* Pastille de température, reprise à l'identique de la carte « Vapeur sèche »
   de l'accueil (.agent .badge-temp dans accueil.css). Recopiée et non
   partagée : les deux composants portent des noms distincts et vivent dans
   deux feuilles chargées sur deux pages différentes. */
.etape .badge-temp {
  display: inline-flex;
  align-items: center;
  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;
}

/* Puces des étapes. La coche remplace le point : c'est le même repère que dans
   le hero de l'accueil, et il se lit comme une garantie plutôt que comme une
   simple énumération. */
.etape-points {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  list-style: none;
  padding: 0;
}
.etape-points li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--body-ink);
}
/* Même raison que pour .methode-duree svg : sans flex: none la coche est
   écrasée par le texte, et le décalage l'aligne sur la première ligne. */
.etape-points svg { flex: none; margin-top: 0.3125rem; color: var(--accent); }
.etape-points strong { color: var(--ink); font-weight: 700; }

/* Lien vers le blog, dans la puce « Pédagogie active ». :where(a) de base.css
   rend les liens indistinguables du texte courant — dans une puce, il doit se
   voir sans passer la souris dessus. Même traitement que .prose a. */
.etape-points a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.etape-points a:hover { color: var(--hl); }

/* ---------- 4 · Rappel des certifications ----------
   Bande fine, sans fond propre : elle prolonge la section des étapes plutôt
   que de s'annoncer comme une section de plus. Padding réduit par rapport à
   .section, volontairement — ce n'est pas un bloc de contenu. */
.methode-labels {
  background: var(--pale);
  padding: 0 var(--gut) 4.375rem;
}
.methode-labels .wrap { padding-left: 0; padding-right: 0; }

.methode-labels-titre {
  text-align: center;
  font-size: 0.7812rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  /* --mute échouait au contraste sur --pale à cette taille (12,5 px), relevé
     par Lighthouse. --accent est la couleur déjà utilisée par .label sur ce
     même fond ailleurs sur le site, et elle passe. */
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.methode-labels ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  list-style: none;
  padding: 0;
}

/* Chaque logo dans sa pastille blanche. Les trois fichiers ont un fond blanc
   incrusté : posés directement sur --pale, ils dessinent des rectangles blancs
   qui ressemblent à un défaut. Le cadre rend ce blanc délibéré.

   Le padding est revenu sur la pastille le 27/08, en même temps que les logos
   ont cessé d'être des liens : il était porté par le <a> pour que toute la
   surface du cadre soit cliquable, ce qui n'a plus lieu d'être. Plus d'effet
   de survol non plus — un cadre qui réagit au passage de la souris annonce un
   clic qui n'existe pas. */
.methode-labels li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 8.5rem;
  padding: 0.875rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
}

/* Hauteur fixée et largeur libre : les trois logos n'ont pas le même rapport
   (Certibiocide est un rectangle, les deux autres des carrés). Les aligner sur
   la largeur les ferait paraître de tailles très différentes. 4,5 rem est le
   plancher de lisibilité : en dessous, le texte incrusté dans les médaillons
   n'est plus déchiffrable. */
.methode-labels img { height: 4.5rem; width: auto; }

/* Sortie unique vers /certifications/, sous les trois logos. Mêmes termes et
   même traitement que .cert-verif sur l'accueil : c'est le même lien, il doit
   se présenter pareil d'une page à l'autre. */
.methode-labels-verif { text-align: center; margin: 1.75rem 0 0; }
.methode-labels-verif a {
  display: inline-block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.125rem;
  transition: border-color .16s ease, color .16s ease;
}
.methode-labels-verif a:hover { color: var(--btn-hover); border-bottom-color: var(--btn-hover); }

/* ---------- 5 · FAQ ----------
   Même traitement que .loc-faq sur la page location (location.css) : filets
   de séparation, pas de cartes. Classes recopiées et non partagées, comme le
   reste du site. */
.methode-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; }

/* ---------- 6 · Clôture ----------
   .btn--onDark/.btn--ghostDark sont pensés pour un fond sombre (texte blanc,
   fond translucide) ; surchargés ici pour rester lisibles sur fond clair.
   Reprise de ce que .closing fait sur l'accueil : ce sont les deux mêmes
   boutons, ils doivent se présenter à l'identique d'une page à l'autre.

   Fond --pale (corrigé le 11/09) : la FAQ juste au-dessus est repassée en
   --paper pour respecter l'alternance des fonds (voir son commentaire dans
   page-methodologie.php) — c'est cette section qui porte maintenant la
   teinte grise de l'alternance. Filet du haut conservé : il distingue quand
   même du bloc Étapes/Labels, également en --pale, juste au-dessus de la FAQ. */
.methode-closing {
  background: var(--pale);
  border-top: 1px solid var(--border);
}

/* Titre hors de .center-col et centré à la main : contraint à 43,75 rem il
   passerait sur deux lignes, alors qu'il tient sur une seule en pleine
   largeur. Le paragraphe et les boutons, eux, restent dans .center-col. */
.methode-closing-titre { text-align: center; }
.methode-closing .btn--onDark { background: var(--btn); color: var(--white); }
.methode-closing .btn--onDark:hover { background: var(--btn-hover); color: var(--white); border-color: var(--btn-hover); }
/* Fond blanc et non --pale (corrigé le 11/09) : la section est désormais en
   --pale elle-même, un bouton --pale s'y fondrait complètement. Même
   correction que .closing sur l'accueil, pour le même motif inverse. */
.methode-closing .btn--ghostDark { background: var(--white); color: var(--ink); border-color: var(--border-dk); }
.methode-closing .btn--ghostDark:hover { background: var(--btn-hover); color: var(--white); border-color: var(--btn-hover); }

/* Même largeur minimale que sur l'accueil : les deux boutons y sont de largeur
   égale, ils doivent l'être ici aussi puisque ce sont les mêmes. */
.methode-closing .btn { min-width: 16.375rem; }

/* Lien syndics : volontairement plus petit et plus discret que les boutons,
   il ne s'adresse qu'à une minorité de visiteurs. */
.methode-syndics {
  margin-top: 2rem;
  font-size: 0.9375rem;
  color: var(--mute);
}
.methode-syndics a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.methode-syndics a:hover { color: var(--hl); }

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

@media (max-width: 1040px) {
  /* Vignette réduite : à cette largeur, 12,5 rem d'image laissent une colonne
     de texte trop étroite pour des puces de deux à trois lignes. */
  .etape { grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem; }
}

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

  /* La taille fixée par le clamp() ci-dessus (33 px, plancher atteint sur tout
     mobile) reste trop haute une fois la marge latérale retirée. Même
     correction que .devis-tete h1 dans contact.css. */
  .methode-tete h1 { font-size: 1.75rem; }

  /* La vignette rejoint la ligne du titre plutôt que de garder sa colonne :
     en pleine largeur elle mangerait un écran entier avant le premier mot de
     l'étape, et le texte est ici l'essentiel. */
  .etape {
    grid-template-columns: 1fr;
    gap: 1.125rem;
    padding: 1.375rem;
  }
  .etape-vignette { width: 5.5rem; }

  .etape h3 { font-size: 1.25rem; }
  .etapes { gap: 1.125rem; }

  /* Trois pastilles côte à côte ne tiennent pas sur la largeur d'un téléphone :
     flex-wrap les fait passer à la ligne, l'écart est resserré en conséquence.
     La hauteur des logos ne bouge pas — la réduire les rendrait illisibles,
     c'est justement ce qu'on cherche à éviter. */
  .methode-labels { padding-bottom: 4rem; }
  .methode-labels ul { gap: 0.75rem; }
  .methode-labels li { min-width: 0; flex: 1 1 8rem; }
  .methode-labels a { padding: 0.75rem 1rem; }

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