/*
  Procimex — page « Nos certifications » (/certifications/).

  Chargée uniquement sur cette page (voir procimex_enqueue_assets() dans
  functions.php). Tout ce qui est commun au site vit dans base.css.

  Parti pris de mise en page : les trois justificatifs sont empilés en pleine
  largeur, pas en grille de cartes comme sur l'accueil. Deux d'entre eux
  portent la reproduction d'un A4 : dans une colonne de tiers de page, le
  document devient un timbre-poste illisible.
*/

/* ---------- 1 · En-tête de page ----------
   Même traitement que « Notre méthode » : fond navy, titre blanc. Les pages
   intérieures s'ouvrent toutes de la même façon. */
.certif-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, le pied de page et « Notre méthode ». */
  --focus: var(--paper);
}
.certif-tete-texte { max-width: 47.5rem; }
.certif-tete .label { color: var(--accent-lt); }

.certif-tete h1 {
  font-size: clamp(2.0625rem, 4vw, 3.25rem);
  color: var(--white);
  text-wrap: balance;
  margin-bottom: 1.25rem;
}

/* --mute-onDark et non --mute : ce paragraphe est sur fond sombre. */
.certif-tete .intro { color: var(--mute-onDark); margin-bottom: 0; }

/* ---------- 2 · Les trois justificatifs ---------- */
.preuves {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: 53.75rem;
  margin: 0 auto;
}

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

/* En-tête du bloc : logo à gauche, titre et nature du titre à droite. */
.preuve-tete {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

/* Cadre blanc autour du logo. Les trois fichiers ont un fond blanc incrusté ;
   posés sur une carte blanche ils se fondraient sans limite visible, d'où la
   bordure. Dimensions fixes pour que les trois blocs alignent leurs titres.

   Rectangle et non cercle comme sur l'accueil : Certibiocide est un logo
   paysage (264 × 139), et un cercle de même encombrement le réduit à une
   vingtaine de pixels de haut — le texte incrusté n'y est plus déchiffrable.
   C'est le même cadre que sur « Notre méthode », qui affiche les mêmes trois
   logos pour la même raison. */
.preuve-logo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.25rem;
  height: 4.5rem;
  padding: 0.625rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
}
/* contain, pas cover : les logos ne doivent pas être rognés par le cadre. */
.preuve-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

.preuve-tete h2 {
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 0.25rem;
}

.preuve-type {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--mute);
}

.preuve .prose { margin-bottom: 1.5rem; }

/* Fiche d'identité du titre : intitulé au-dessus, valeur en dessous.
   <dl> et non un tableau — ce sont des paires libellé/valeur, pas des données
   croisées en lignes et colonnes.
   auto-fit + minmax : deux colonnes quand la place le permet, une seule en
   dessous, sans point de rupture à déclarer. */
.preuve-faits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
  gap: 0.875rem 1.5rem;
  margin: 0 0 1.5rem;
  padding: 1.25rem;
  background: var(--pale);
  border-radius: var(--r);
}
.preuve-faits dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.1875rem;
}
.preuve-faits dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--body-ink);
}
.preuve-faits dd strong { color: var(--ink); font-weight: 700; }

/* Mode d'emploi de la vérification (Certibiocide seul). Plus petit que le
   corps de texte : c'est une consigne pratique, pas l'argument. */
.preuve-mode {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--mute);
  margin: 0 0 1.5rem;
}

.preuve-btn { align-self: flex-start; }

/* ---------- Reproduction d'un document ---------- */
.preuve-doc { margin: 0; }

/* Le lien enveloppe l'image et rien d'autre : sans display block, la ligne de
   base du texte ajoute quelques pixels sous l'image, et la bordure du cadre
   ne colle plus au document. */
.preuve-doc a {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.preuve-doc a:hover { border-color: var(--accent); box-shadow: var(--shadow-card); }

/* height auto : les attributs width/height du HTML valent 1400×1980 et le
   navigateur les traduit en hauteur réelle. Sans cette ligne, l'image
   déborderait de sa largeur affichée. */
.preuve-doc img { width: 100%; height: auto; }

.preuve-doc figcaption {
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--mute);
}

/* L'amorce en gras et dans l'encre du corps de texte, pas dans le gris de la
   légende : c'est l'avertissement lui-même, il doit se voir sans qu'on ait à
   lire la phrase entière. La suite reste en gris, elle explique. */
.preuve-doc figcaption strong { color: var(--ink); font-weight: 700; }

/* ---------- 3 · 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 à l'identique de ce que fait .methode-closing : ce sont les deux
   mêmes boutons, ils doivent se présenter pareil d'une page à l'autre. */
.certif-closing { border-top: 1px solid var(--border); }
.certif-closing-titre { text-align: center; }
.certif-closing .btn--onDark { background: var(--btn); color: var(--white); }
.certif-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. */
.certif-closing .btn--ghostDark { background: var(--white); color: var(--ink); border-color: var(--border-dk); }
.certif-closing .btn--ghostDark:hover { background: var(--btn-hover); color: var(--white); border-color: var(--btn-hover); }
/* Même largeur minimale que sur l'accueil et « Notre méthode ». */
.certif-closing .btn { min-width: 16.375rem; }

/* ---------- Petites largeurs ---------- */
@media (max-width: 780px) {
  .certif-tete { padding-top: 3.5rem; padding-bottom: 3.5rem; }

  .preuve { padding: 1.5rem 1.25rem; }

  /* Logo au-dessus du titre : côte à côte, il ne reste plus assez de largeur
     au titre, qui se casse mot par mot. */
  .preuve-tete {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
    margin-bottom: 1.25rem;
  }

  .preuve-tete h2 { font-size: 1.3125rem; }

  .preuve-faits { padding: 1rem; }

  /* Les deux boutons de clôture passent pleine largeur, comme ailleurs sur le
     site : à cette largeur, min-width les ferait déborder. */
  .certif-closing .btn { width: 100%; min-width: 0; }
}