/* ================================
   Handwriting → OCR → LLM → ESP32
================================ */

/* Lead */
.lead{
  background:#fff;
  border-left:4px solid #27ae60;
  padding:12px 14px;
  margin:12px 0;
  border-radius:4px;
}

/* Card auteur */
.author-card{
  background:#fff;
  border:1px solid #e9ecef;
  border-radius:12px;
  padding:12px 14px;
  margin:12px 0 18px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.author-title{ color:#111; margin-bottom:8px; }
.author-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.author-links a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid #e6e6e6;
  border-radius:999px;
  background:#fff;
  text-decoration:none;
  color:#2c3e50;
  font-weight:500;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.author-links a:hover{
  border-color:#cfd7df;
  transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}

/* Conteneur page */
.projet-details{
  max-width: 1160px;
  margin: 0 auto;
  padding: 10px 14px;
}

/* Smooth anchors */
html{ scroll-behavior:smooth; }
h2, h3{ scroll-margin-top:90px; }
.projet-details .anchor-target{ scroll-margin-top:90px; }

/* =======================
   Sommaire (pills)
======================= */
.toc-pro{
  display:flex;
  flex-direction:column;
  gap:12px;
  background:#fff;
  border:1px solid #e9ecef;
  border-radius:12px;
  padding:10px 12px;
  margin:12px 0 18px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.toc-heading{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  white-space:nowrap;
  color:#111;
}
.toc-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
  flex-wrap:wrap;
  width:100%;
}
.toc-links a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid #e6e6e6;
  border-radius:999px;
  background:#fff;
  text-decoration:none;
  color:#2c3e50;
  font-weight:500;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.toc-links a:hover{
  border-color:#cfd7df;
  transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.toc-links a i{ opacity:.9; }

/* =======================
   Vidéo (cadre propre)
======================= */
.media{ margin:16px auto; max-width:1200px; }
.media .videobox{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:10px;
  overflow:hidden;
  background:#000;
}
.media .videobox video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.media-caption{
  margin:10px 0 0;
  text-align:center;
  color:#333;
  font-size:0.95rem;
}

/* =======================
   Callout / note
======================= */
.callout{
  background:#fff;
  border:1px solid #e9ecef;
  border-left:4px solid #3498db;
  border-radius:10px;
  padding:12px 14px;
  margin:14px 0;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.note{
  background:#fff;
  border:1px solid #e9ecef;
  border-left:4px solid #e67e22;
  border-radius:10px;
  padding:10px 12px;
  margin:12px 0;
}

/* =======================
   Tables + code blocks
======================= */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.specs, .pins{
  width:100%;
  min-width:700px;
  max-width:1100px;
  margin:16px auto;
  border-collapse:collapse;
}
.specs th,.specs td,.pins th,.pins td{
  border:1px solid #ddd;
  padding:10px;
  vertical-align:top;
}
.specs th,.pins th{
  background:#f5f5f5;
  text-align:left;
}
pre{
  background:#f7f7f7;
  padding:10px;
  border-radius:6px;
  overflow:auto;
}
code,kbd{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
kbd{
  background:#f1f1f1;
  padding:2px 6px;
  border-radius:4px;
}

/* =======================
   Galerie cards
======================= */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:16px;
  max-width:1400px;
  margin:0 auto 28px;
}
.card{
  padding:16px;
  background:#fff;
  border:1px solid #e9ecef;
  border-radius:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.thumb{
  aspect-ratio:3/2;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f8f9fa;
  border-radius:12px;
  overflow:hidden;
}
.thumb img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}
.card figcaption{
  text-align:center;
  margin-top:10px;
  font-size:1rem;
  color:#333;
}

/* Retour */
.backlink{
  margin: 20px 0 6px;
  text-align: center;
}
.backlink a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid #e6e6e6;
  border-radius:999px;
  background:#fff;
  text-decoration:none;
  color:#2c3e50;
  font-weight:600;
}
.backlink a:hover{
  border-color:#cfd7df;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}

/* =======================
   Header title + logo align (comme arrosage)
======================= */
.page-title{
  display:block;
  margin:0 0 8px;
  line-height:1.15;
  text-wrap:balance;
  text-align:center;
}
.esp32-tag{ white-space:nowrap; }
.page-title .title-logo{
  display:inline-block;
  width:32px;
  height:auto;
  vertical-align:-0.15em;
  margin-left:.35em;
}

/* =======================
   Mobile
======================= */
@media (max-width: 900px){
  .media .videobox{ max-height:70vh; }
  .projet-details .anchor-target{ scroll-margin-top:70px; }
}

@media (max-width: 520px){
  .gallery-grid{
    grid-template-columns:1fr !important;
    max-width:100%;
  }
  .card{
    margin:0 auto;
    padding:14px;
  }
}

/* Option mobile plus “compact” */
@media (max-width: 767px){
  .projet-details{
    max-width:100%;
    padding:10px 14px;
  }
  .page-title{
    font-size: clamp(22px, 5vw, 28px);
    margin: 8px auto 12px;
  }
  .page-title .title-logo{ width:24px; vertical-align:-2px; margin-left:6px; }

  .lead{
    padding:10px 12px;
    border-left-width:3px;
    font-size: clamp(14px, 3.7vw, 16px);
    line-height:1.5;
  }

  .toc-links{ justify-content:flex-start; }
  .toc-links a{ font-size:14px; padding:6px 10px; }

  .table-wrap{ margin:10px -14px 14px; padding:0 14px 6px; }
  .specs, .pins{ min-width:560px; font-size:14px; }
}

/* Vidéo contain si tu veux éviter le recadrage (option) */
/*
.media .videobox video { object-fit: contain; }
*/