/**
 * Maître Chloé Leblanc — Legal pages shared styles
 * (mentions-legales, politique-confidentialite, cookies)
 */

/**
 * Breadcrumb
 */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: var(--space-6);
}

.breadcrumb a {
  color: rgba(255, 255, 255, 0.55);
  transition: color var(--transition);
}

.breadcrumb a:hover {
  color: var(--color-white);
}

.breadcrumb-sep {
  opacity: 0.4;
}

/**
 * Outils — grille de catégories documentaires (.page-tool)
 */

.tool-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding-top: var(--space-12);
  padding-bottom: var(--space-16);

  @media (min-width: 640px) {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }

  @media (min-width: 1024px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card--tool {
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  background-color: var(--color-white);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72)),
    url('../img/marble-rectangle.png');
  background-repeat: repeat;
  background-size: auto, 575px auto;
  position: relative;
  overflow: hidden;

  /* Barre dorée en haut — invisible au repos, révélée au survol */
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-gold-light));
    opacity: 0;
    transition: opacity var(--transition);
  }

  &:hover {
    transform: translateY(-3px);
    border-color: transparent;
  }

  &:hover::before {
    opacity: 1;
  }

  /* Icône de catégorie */
  & .icon {
    width: 52px;
    height: 52px;
    background-color: rgba(194, 161, 90, 0.08);
    color: var(--color-accent);
    margin-bottom: var(--space-5);
    flex-shrink: 0;

    & svg {
      width: 24px;
      height: 24px;
    }
  }

  /* Titre de catégorie */
  & h3 {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
  }

  /* Liste de liens */
  & .tool-links {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
  }

  & .tool-links li {
    border-bottom: 1px solid var(--color-border);

    &:last-child {
      border-bottom: none;
    }
  }

  & .tool-links a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    font-size: var(--text-sm);
    color: var(--color-secondary);
    text-decoration: none;
    transition: color var(--transition), padding-left var(--transition);
    line-height: 1.45;

    /* Icône PDF (data-URI — stroke or) */
    &::before {
      content: '';
      display: inline-block;
      width: 15px;
      height: 15px;
      flex-shrink: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2A15A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E");
      background-size: contain;
      background-repeat: no-repeat;
    }

    &:hover {
      color: var(--color-primary);
      padding-left: var(--space-1);
    }
  }
}

/**
 * Card mise en avant — fond bleu primaire, texte inversé
 * (ex. catégorie « Simulateurs en ligne »)
 */
.card--tool.card--highlighted {
  background-color: var(--color-primary);
  background-image:
    linear-gradient(rgba(28, 28, 31, 0.88), rgba(28, 28, 31, 0.88)),
    url('../img/marble-rectangle.png');
  background-repeat: repeat;
  background-size: auto, 575px auto;
  /* Supprime la bordure : évite le décalage de 1px entre le bord extérieur
     et ::before { top: 0 } qui est positionné dans le padding box. */
  border: none;

  /* Barre or toujours visible (pas seulement au survol) */
  &::before {
    opacity: 1;
  }

  /* Titre */
  & h3 {
    color: var(--color-white);
    border-bottom-color: rgba(255, 255, 255, 0.15);
  }

  /* Icône de catégorie */
  & .icon {
    background-color: rgba(255, 255, 255, 0.10);
    color: var(--color-gold-light);
  }

  /* Séparateurs de liste */
  & .tool-links li {
    border-bottom-color: rgba(255, 255, 255, 0.12);
  }

  /* Liens */
  & .tool-links a {
    color: rgba(255, 255, 255, 0.75);

    &:hover {
      color: var(--color-white);
    }
  }

  /* Icône SVG des liens — stroke or clair sur fond sombre */
  & .tool-links a::before,
  & .tool-links a[href^="http"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4B96A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  }

  /* Survol — légère surbrillance plutôt que lift (fond déjà actif) */
  &:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
  }
}

/* Liens externes (href commençant par http) — icône « lien externe » auto-détectée */
.card--tool .tool-links a[href^="http"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2A15A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
}

/**
 * .tool-grid imbriqué dans .page-content (page tarifs)
 *
 * Sur outils.php, <section class="tool-grid container"> est de premier niveau,
 * juste après le hero : le padding-top qui lui est propre crée l'espacement
 * hero→contenu. Sur tarifs.php, .tool-grid est un simple <div> imbriqué dans
 * <section class="page-content">, juste après un <header><h2>. Le header
 * fournit déjà sa propre marge (h2 { margin-bottom }) — le padding-top de
 * .tool-grid devient alors redondant et crée un espace excessif sous le titre.
 */
.page-content .tool-grid {
  padding-top: 0;
}

/*
 * <header> simple (juste un <h2>, sans .subtitle ni .centered) dans .page-content
 *
 * La règle générique `section { & header { margin-bottom: 2rem → 3rem } } }`
 * (base.css) est pensée pour les en-têtes de section avec sous-titre —
 * cf. outils.php/domains-grid.php. Sur tarifs.php, le <header> ne contient
 * qu'un <h2>, qui porte déjà sa propre margin-bottom (space-4) : la marge du
 * <header> s'ajoute par-dessus et double l'espace sous le titre. Neutralisée
 * ici pour laisser le h2 seul responsable de l'espacement.
 */
.page-content header {
  margin-bottom: 0;
}

/*
 * Chaque .card--tool est elle-même un <article> (card/links-by-category.php :
 * <article class="card card--tool …">) — sur tarifs.php, imbriquée dans
 * .page-content, elle est donc directement ciblée par les règles génériques
 * `section.page-content article …` (base.css), à spécificité supérieure à
 * celle des règles propres à .card--tool (2 classes contre 1, à égalité
 * d'éléments — ou 1 classe à égalité de 2, départagée par le nombre
 * d'éléments : les deux cas ci-dessous sont battus). Sans effet sur
 * outils.php : sa .tool-grid n'est pas imbriquée dans .page-content.
 */

/* `article ul:not(.checklist-grid)` réactive list-style:disc, padding-left et
   margin-bottom ; son `li` impose color/margin-bottom/line-height en plus du
   border-bottom propre à .tool-links li. Tout restauré ci-dessous. */
.tool-grid .card--tool .tool-links {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.tool-grid .card--tool .tool-links li {
  margin-bottom: 0;
}

/* h3 « écrasé » : `article h3` impose font-weight:700, margin-top:space-6 et
   margin-bottom:space-3, effaçant le style propre de la carte (pas de
   margin-top, margin-bottom:space-4, séparateur border-bottom). */
.tool-grid .card--tool h3 {
  margin-top: 0;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-weight: 400;
}

/*
 * Espacement entre les deux sections .page-content de la page tarifs
 *
 * section.page-content (base.css) porte un padding-top pensé pour suivre un
 * hero (jusqu'à 6rem en desktop). Sur tarifs.php, la 2ème .page-content
 * ("Pièces à fournir…") suit directement la 1ère : ce padding-top cumulé au
 * padding-bottom de la précédente crée un espace excessif entre deux
 * sections d'une même page. Supprimé, scopé à .page-pricing (via @scope)
 * pour ne pas affecter d'autres pages qui empileraient un jour deux
 * .page-content sans avoir besoin de la même réduction.
 */
@scope (.page-pricing) {
  section.page-content + section.page-content {
    padding-top: 0;
  }
}