/* =====================================================================
   tp-choisir.css - page « Choisir sa formation drone » (telepilote.org)
   Chantier A, brouillon du 07/10/2026 (corrige apres relecture). Prefixe .tp-choisir uniquement.
   Depend de tp-lisible.css (variables --tp-fs 17px, --tp-note 15px) et
   de tp-a11y.css (.tp-btn). Palette : #0a2540, #1b6699, #ff6600, #f5f7fa.
   DEPLOIEMENT (a faire AVANT ou AVEC la mise en ligne de l'article, sinon les
   tableaux debordent sur mobile) : copier ce fichier en
   /templates/ja_university_t3/css/tp-choisir.css et ajouter dans le template
   (templates/ja_university_t3/tpls/blocks/head.php, fichier qui charge deja tp-lisible.css), apres tp-lisible.css : <link rel="stylesheet" href="/templates/ja_university_t3/css/tp-choisir.css?v=20261007a">
   (ou coller ce fichier en fin de tp-lisible.css et changer son parametre ?v=).
   Puis remesurer scrollWidth a 390 px sur l'URL publiee (attendu : 390).
   ===================================================================== */

.tp-choisir { font-family: 'Exo 2', Arial, sans-serif; font-size: var(--tp-fs, 17px); line-height: var(--tp-lh, 1.65); color: #222; }
.tp-choisir * { box-sizing: border-box; }

/* Titres */
.tp-choisir h1.tp-choisir__h1 { font-size: var(--tp-h1, 36px); line-height: 1.15; font-weight: 800; color: #0a2540; margin: 0 0 14px; text-align: left; }
.tp-choisir h2 { font-size: var(--tp-h2, 30px); line-height: 1.2; font-weight: 800; color: #0a2540; margin: 0 0 14px; padding: 0; border: 0; background: none; text-align: left; max-width: none; }
.tp-choisir h2::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 10px; background: #ff6600; border-radius: 2px; }
.tp-choisir h3 { font-size: var(--tp-h3c, 20px); line-height: 1.3; font-weight: 700; color: #0a2540; margin: 22px 0 8px; }

/* Chapo */
.tp-choisir__chapo { font-size: 19px; line-height: 1.6; color: #33475b; max-width: 46em; margin: 0 0 22px; }

/* Sommaire */
.tp-choisir__toc { background: #f5f7fa; border: 1px solid #d6dee8; border-radius: 12px; padding: 16px 20px; margin: 0 0 28px; }
.tp-choisir__toc-title { font-size: var(--tp-note, 15px); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #1b6699; margin: 0 0 8px; }
.tp-choisir__toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.tp-choisir__toc li { margin: 0; }
.tp-choisir__toc a { display: inline-block; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid #c9d4e0; color: #0a2540; font-weight: 600; text-decoration: none; }
.tp-choisir__toc a:hover, .tp-choisir__toc a:focus-visible { border-color: #1b6699; color: #1b6699; }
.tp-choisir__count { color: #5b6b7c; font-size: var(--tp-note, 15px); }

/* Reperes */
.tp-choisir__reperes { margin: 0 0 32px; }
.tp-choisir__reperes ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tp-choisir__reperes li { margin: 0; padding: 16px 18px; background: #fff; border: 1px solid #d6dee8; border-left: 5px solid #ff6600; border-radius: 10px; font-size: var(--tp-note, 15px); line-height: 1.55; }
.tp-choisir__reperes li strong { display: block; color: #0a2540; font-size: var(--tp-fs, 17px); margin-bottom: 6px; }

/* Sections famille */
.tp-choisir__fam { padding: 34px 0 10px; border-top: 1px solid #e3e8ef; clear: both; }
.tp-choisir__fam-intro { max-width: 46em; margin: 0 0 18px; color: #33475b; }

/* Tableau comparatif (ordinateur) */
.tp-choisir__table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: var(--tp-note, 15px); line-height: 1.5; background: #fff; table-layout: fixed; }
.tp-choisir__caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tp-choisir__table thead th { background: #0a2540; color: #fff; text-align: left; font-weight: 700; font-size: 14px; letter-spacing: .03em; padding: 10px 10px; vertical-align: bottom; border: 0; }
.tp-choisir__table thead th:first-child { border-radius: 8px 0 0 0; }
.tp-choisir__table thead th:last-child { border-radius: 0 8px 0 0; }
.tp-choisir__table tbody th, .tp-choisir__table tbody td { padding: 12px 10px; vertical-align: top; border-bottom: 1px solid #e3e8ef; text-align: left; font-weight: 400; overflow-wrap: break-word; hyphens: auto; }
.tp-choisir__table tbody tr:nth-child(even) { background: #f5f7fa; }
.tp-choisir__table thead th:nth-child(1) { width: 24%; }
.tp-choisir__table thead th:nth-child(2) { width: 16%; }
.tp-choisir__table thead th:nth-child(3) { width: 11%; }
.tp-choisir__table thead th:nth-child(4) { width: 14%; }
.tp-choisir__table thead th:nth-child(5) { width: 11%; }
.tp-choisir__table thead th:nth-child(6) { width: 11%; }
.tp-choisir__table thead th:nth-child(7) { width: 13%; }
.tp-choisir__name a { font-weight: 700; color: #0a2540; text-decoration: none; }
.tp-choisir__name a:hover, .tp-choisir__name a:focus-visible { color: #1b6699; text-decoration: underline; }
.tp-choisir__obj { display: block; margin-top: 4px; color: #5b6b7c; font-size: 14px; line-height: 1.45; }
.tp-choisir__go { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 8px; border-radius: 8px; background: #fff; border: 2px solid #1b6699; color: #1b6699; font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap; max-width: 100%; }
.tp-choisir__go:hover, .tp-choisir__go:focus-visible { background: #1b6699; color: #fff; text-decoration: none; }
.tp-choisir__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Pas sur ? + notes */
.tp-choisir__unsure { margin: 0 0 10px; padding: 12px 16px; background: #f5f7fa; border-radius: 10px; max-width: none; }
.tp-choisir__unsure a { color: #1b6699; font-weight: 600; }
.tp-choisir__notes { margin: 0 0 10px; font-size: var(--tp-note, 15px); color: #5b2d00; background: #fff6ee; border: 1px dashed #ff6600; border-radius: 10px; padding: 8px 14px; }
.tp-choisir__notes summary { cursor: pointer; font-weight: 700; }
.tp-choisir__notes ul { margin: 8px 0 4px; padding-left: 20px; }
.tp-choisir__notes li { margin: 0 0 6px; }

/* FAQ */
.tp-choisir__faq { padding: 34px 0 10px; border-top: 1px solid #e3e8ef; }
.tp-choisir__faq p { max-width: 46em; margin: 0 0 10px; }
.tp-choisir__faq a { color: #1b6699; }

/* CTA final */
.tp-choisir__cta { margin: 24px 0 0; padding: 28px 24px; background: #0a2540; border-radius: 14px; color: #fff; }
.tp-choisir__cta h2 { color: #fff; margin-bottom: 10px; }
.tp-choisir__cta h2::after { background: #ff6600; }
.tp-choisir__cta p { color: #e6edf5; max-width: 46em; }
.tp-choisir__cta-btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 18px; max-width: none; }
.tp-choisir__cta .tp-btn--ghost { background: #fff; }
.tp-choisir__note { font-size: var(--tp-note, 15px); color: #c9d4e0; margin: 0; }
.tp-choisir__note a { color: #fff; }

/* Tablette et mobile (< 992 px) : chaque ligne devient une carte empilee.
   Point de bascule remonte de 767 a 991 px (relecture du 07/10 : a 768 px l'en-tete
   « Certification » debordait de sa cellule dans les 6 tableaux). */
@media (max-width: 991px) {
  .tp-choisir h1.tp-choisir__h1 { font-size: 28px; }
  .tp-choisir h2 { font-size: 24px; }
  .tp-choisir__chapo { font-size: 17px; }
  .tp-choisir__reperes ul { grid-template-columns: 1fr; }
  .tp-choisir__table, .tp-choisir__table tbody, .tp-choisir__table tr, .tp-choisir__table tbody th, .tp-choisir__table tbody td { display: block; width: 100%; }
  .tp-choisir__table { table-layout: auto; font-size: var(--tp-fs, 17px); background: none; }
  .tp-choisir__table thead { display: none; }
  .tp-choisir__table tbody tr { background: #fff !important; border: 1px solid #d6dee8; border-top: 4px solid #0a2540; border-radius: 12px; padding: 14px 16px 16px; margin: 0 0 14px; }
  .tp-choisir__table tbody th, .tp-choisir__table tbody td { padding: 7px 0; border: 0; }
  .tp-choisir__table tbody td { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 10px; align-items: start; border-top: 1px solid #eef2f6; }
  .tp-choisir__table tbody td::before { content: attr(data-label); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #1b6699; padding-top: 3px; }
  .tp-choisir__name { padding: 0 0 10px !important; }
  .tp-choisir__name a { font-size: 19px; line-height: 1.3; display: block; }
  .tp-choisir__obj { font-size: 15px; margin-top: 6px; }
  .tp-choisir__link { display: block !important; padding-top: 12px !important; border-top: 0 !important; }
  .tp-choisir__link::before { content: none !important; }
  .tp-choisir__go { display: flex; width: 100%; min-height: 46px; font-size: 16px; }
  .tp-choisir__cta { padding: 22px 16px; border-radius: 10px; }
  .tp-choisir__cta-btns .tp-btn { flex: 1 1 100%; }
}