/* =============================================================
 * tutoriels.css — Styles spécifiques à la page /tutoriels.php
 *
 * Ce fichier vient APRÈS style.css et n'écrase aucune classe
 * existante : il ne définit que les classes préfixées « tuto- »
 * et réutilise les composants déjà présents (.section-inner,
 * .section-label, .section-title, .section-sub, .card, .card-soft,
 * .btn-primary, .btn-secondary, .contact-band, etc.).
 *
 * Couleurs : on réutilise les variables CSS du site
 *   --navy / --blue / --blue-hover / --blue-light
 *   --text / --text-muted / --border / --bg / --bg-alt / --bg-white
 *   --radius / --radius-sm / --base
 * pour rester strictement aligné avec la charte du reste du site
 * (fond #eef1f6, bleu marine #1a2e4a, bleu accent #0066cc,
 *  cards arrondies sur fond blanc).
 * ============================================================= */

/* --- Fil d'Ariane visible -------------------------------------- */
.tuto-breadcrumb {
  font-size: 14px;
  color: var(--text-muted);
  padding: 18px 40px 0;
  background: var(--bg);
}
.tuto-breadcrumb .section-inner {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}
.tuto-breadcrumb a {
  color: var(--blue);
  text-decoration: none;
}
.tuto-breadcrumb a:hover {
  text-decoration: underline;
  color: var(--blue-hover);
}
.tuto-breadcrumb [aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

/* --- Sections de cluster --------------------------------------- */
/* On garde le système de section() de style.css (padding 80px 40px,
   alternance bg/bg-alt) — donc .tuto-section reste un simple hook. */
.tuto-section-light {
  background: var(--bg-alt);
}

/* --- Grille de cartes ------------------------------------------ */
.tuto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

/* --- Carte tutoriel -------------------------------------------- */
.tuto-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 24px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tuto-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.tuto-meta {
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

.tuto-title {
  font-size: 18px;
  line-height: 1.35;
  margin: 4px 0 6px;
  color: var(--navy);
  font-weight: 700;
}
.tuto-title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(transparent calc(100% - 1px), var(--blue) 1px);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size .25s ease;
}
.tuto-title a:hover,
.tuto-title a:focus-visible {
  background-size: 100% 100%;
}

.tuto-excerpt {
  flex: 1 1 auto;
  font-size: var(--base);
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
}

.tuto-readmore {
  align-self: flex-start;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
}
.tuto-readmore:hover {
  text-decoration: underline;
  color: var(--blue-hover);
}

/* --- Encart de conversion -------------------------------------- */
.tuto-cta {
  margin-top: 36px;
  padding: 22px 26px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-left: 6px solid var(--blue);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.tuto-cta-label {
  font-size: var(--base);
  font-weight: 600;
  color: var(--navy);
  margin: 0;
  flex: 1 1 320px;
}
.tuto-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* L'encart .tuto-cta est sur fond blanc → le .btn-secondary global
   du site est prévu pour un fond sombre (texte clair sur transparent).
   On le surcharge ici pour qu'il reste lisible sur fond clair. */
.tuto-cta .btn-secondary {
  background: var(--bg);
  color: var(--navy);
  border-color: var(--border);
  backdrop-filter: none;
}
.tuto-cta .btn-secondary:link,
.tuto-cta .btn-secondary:visited {
  color: var(--navy);
}
.tuto-cta .btn-secondary:hover {
  background: var(--blue-light);
  border-color: var(--blue);
  color: var(--blue);
}

/* --- Adaptations mobile ---------------------------------------- */
@media (max-width: 900px) {
  .tuto-breadcrumb { padding: 18px 24px 0; }
}
@media (max-width: 640px) {
  .tuto-breadcrumb { padding: 14px 16px 0; }
  .tuto-card  { padding: 18px; }
  .tuto-title { font-size: 17px; }
  .tuto-cta {
    padding: 18px 20px;
    flex-direction: column;
    align-items: flex-start;
  }
  .tuto-cta-buttons { width: 100%; }
  .tuto-cta-buttons a {
    flex: 1 1 auto;
    text-align: center;
    justify-content: center;
  }
}