/* ============================================================
   MONTLAO — section de verification d'enregistrement
   (c) 2026 MontLao Sole Co., Ltd — Tous droits réservés.

   Feuille séparée, et non un ajout dans site.css, pour que la
   charte existante reste intacte et que ce lot puisse être
   retiré d'un seul geste.

   Toutes les variables portent une valeur de repli : si site.css
   nomme ses couleurs autrement, la section reste lisible au lieu
   de rendre du noir sur noir.
   ============================================================ */

.verif {
  margin-top: 30px;
  border: 1px solid var(--trait, rgba(201, 162, 39, .22));
  border-radius: 5px;
  background: var(--nuit-2, rgba(0, 0, 0, .22));
  padding: clamp(18px, 3vw, 28px);
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 32px);
  align-items: start;
}

/* Le QR passe au-dessus du texte sur mobile : en colonne étroite
   il descendrait sous 150 px et ne se scannerait plus. */
@media (max-width: 640px) {
  .verif { grid-template-columns: minmax(0, 1fr); }
  .verif-code { justify-self: center; }
}

/* --- colonne du code --- */

.verif-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* Fond blanc obligatoire : un QR rendu sur fond sombre n'est pas
   lu par la plupart des appareils photo. */
.verif-code img {
  width: 100%;
  max-width: 190px;
  min-width: 150px;
  height: auto;
  display: block;
  background: #fff;
  padding: 10px;
  border-radius: 4px;
}

.verif-code figcaption {
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .06em;
  text-align: center;
  color: var(--or, #c8a951);
  max-width: 210px;
}

/* --- colonne du texte --- */

.verif-dit { min-width: 0; }

.verif-dit h3 {
  margin: 0 0 10px;
  font-family: var(--serif, "Bodoni Moda", serif);
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 400;
  color: var(--or-pale, #e8d9a8);
}

.verif-dit p {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.62;
  color: rgba(242, 237, 224, .78);
  overflow-wrap: anywhere;
}

.verif-ou {
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(242, 237, 224, .4);
  margin: 16px 0 8px !important;
}

/* Le lien part vers un domaine tiers : la flèche le dit avant le
   clic, et le domaine est écrit en clair juste dessous. C'est le
   nom de domaine gouvernemental qui fait la preuve, pas le bouton. */
.verif-lien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--or, #c8a951);
  border-radius: 3px;
  padding: 10px 16px;
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or, #c8a951);
  text-decoration: none;
  transition: background .16s, color .16s;
}

.verif-lien:hover,
.verif-lien:focus-visible {
  background: rgba(201, 162, 39, .12);
  color: var(--or-vif, #e3c15f);
}

.verif-lien::after { content: "\2197"; font-size: 13px; line-height: 1; }

.verif-domaine {
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: 11px !important;
  color: rgba(242, 237, 224, .55) !important;
  margin: 10px 0 0 !important;
}

/* Réserve : dire que le numéro n'est pas cherchable évite qu'un
   lecteur le tape dans un moteur, ne trouve rien, et en tire la
   conclusion inverse de celle recherchée. */
.verif-reserve {
  border-left: 2px solid var(--terre, #c4632f);
  background: rgba(196, 99, 47, .09);
  padding: 11px 15px;
  margin: 16px 0 0 !important;
  font-size: 13px !important;
  color: rgba(242, 237, 224, .72) !important;
}

/* Renvoi discret depuis le pied de page, présent sur tous les
   écrans. Pas de badge, pas de QR répété. */
.pied-verif {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .verif-lien { transition: none; }
}