/* ==========================================================================
   CANINOVA — PAGES DIVERSES
   404, page WordPress générique, template de repli index.php, section
   newsletter et cartes « cas client ».

   Tout ce qui est générique vient du socle et des composants :
   .cn-pagehead, .cn-prose, .cn-section, .cn-container, .cn-card, .cn-grid,
   .cn-form, .cn-input, .cn-btn, .cn-badge, .cn-row, .cn-sr-only, .cn-empty,
   .cn-pagination. Ce fichier ne contient QUE ce qu'aucun composant ne couvre.

   Chaque bloc est écrit pour être facultatif : sans ce fichier les gabarits
   restent lisibles et utilisables, seule la finition disparaît.
   ========================================================================== */

/* ==========================================================================
   PAGE 404
   ========================================================================== */

/* L'écran d'erreur occupe la hauteur utile restante sous l'en-tête. */
.cn-divers__404 {
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--cn-header-h) - 220px);
}

/* Chiffre décoratif : .cn-numeral--ghost donne déjà la couleur estompée,
   seule la taille change ici. */
.cn-divers__code {
  font-size: clamp(4.5rem, 16vw, 9rem);
  letter-spacing: -0.04em;
}

/* Boutons de retour centrés. Sans ce fichier, .cn-row les aligne simplement
   à gauche : la page reste utilisable. */
.cn-divers__actions {
  justify-content: center;
}

/* ==========================================================================
   PASTILLES DE CATÉGORIE DES CARTES
   .cn-row impose un écart de 14 px, trop large entre deux pastilles.
   ========================================================================== */

.cn-divers__tags {
  gap: 8px;
}

/* ==========================================================================
   CARTE « CAS CLIENT »
   Le fond sombre vient de .cn-card--ink et les couleurs de texte de .cn-dark :
   il ne reste qu'une hauteur plancher pour que les cartes d'une même rangée
   respirent, quelle que soit la longueur du titre.
   ========================================================================== */

.cn-divers__case {
  min-height: 260px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 700px) {
  .cn-divers__404 {
    min-height: 0;
  }
}