/* Importé par outils/importer-articles.py depuis 2026-10-27-articles-v2/proposition-d/d.css : ne pas éditer ici. */
/* Proposition D · la greffe : situations et chemin, rayons en cartes, question réelle de chaque texte, question suivante en grand.
   Couleurs : variables de tama.css seulement. Classes : art-d-*. */

/* ---------- en-tête de page : titre à gauche, Tama et sa bulle à droite ---------- */
.art-d-haut { padding: 18px 0 16px; }
.art-d-haut .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "fil fil" "titre annonce"; align-items: end; gap: 8px 36px; }
.art-d-haut .art-fil { grid-area: fil; }
.art-d-haut h1 { grid-area: titre; font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: 1.14; max-width: 820px; }
.art-d-haut .art-d-annonce { grid-area: annonce; }
.art-d-annonce { display: flex; align-items: flex-end; gap: 12px; }
.art-d-tama { flex: none; }
.art-d-tama .tama { animation: bob 3.4s ease-in-out infinite; }

/* La bulle : pointe nette qui sort du coin bas gauche vers Tama ; l'ombre suit la pointe. */
.art-d-bulle { position: relative; margin: 0 0 26px; padding: 10px 20px 11px; background: var(--blanc); border: var(--trait); border-radius: 18px; font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1.2; white-space: nowrap; filter: drop-shadow(0 4px 0 var(--encre)); }
.art-d-bulle::before { content: ""; position: absolute; left: -19px; bottom: 9px; width: 22px; height: 20px; background: var(--encre); clip-path: polygon(100% 0, 0 100%, 100% 100%); }
.art-d-bulle::after { content: ""; position: absolute; left: -13px; bottom: 12px; width: 17px; height: 14px; background: var(--blanc); clip-path: polygon(100% 0, 0 100%, 100% 100%); }

/* ---------- les quatre situations et le chemin choisi ---------- */
.art-d-depart { padding: 4px 0 60px; }
.art-d-situations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.art-d-situations button { position: relative; display: grid; align-content: space-between; gap: 12px; min-height: 128px; padding: 14px 16px 14px; text-align: left; color: var(--encre); background: var(--c-doux); border: var(--trait); border-radius: 22px; box-shadow: 0 5px 0 var(--encre); cursor: pointer; font: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.art-d-situations button:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--encre); }
.art-d-situations button[aria-selected="true"] { background: var(--c-plein); transform: translateY(3px); box-shadow: 0 2px 0 var(--encre); }
.art-d-situations button[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: -25px; width: 24px; height: 15px; margin-left: -12px; background: var(--encre); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.art-d-situation { font-family: var(--display); font-weight: 700; font-size: 1.22rem; line-height: 1.15; text-wrap: balance; }
.art-d-mini { display: flex; }
.art-d-mini img { width: 60px; height: 38px; object-fit: contain; border: 2.5px solid var(--encre); border-radius: 8px; background: var(--blanc); }
.art-d-mini img + img { margin-left: -12px; }
.art-d-mini img:nth-child(2) { transform: rotate(-4deg) translateY(-2px); }
.art-d-mini img:nth-child(3) { transform: rotate(5deg); }
.art-d-matcha { --c-doux: var(--matcha-doux); --c-plein: var(--matcha); }
.art-d-sakura { --c-doux: var(--sakura-doux); --c-plein: var(--sakura); }
.art-d-soleil { --c-doux: var(--soleil-doux); --c-plein: var(--soleil); }
.art-d-tomate { --c-doux: var(--tomate-doux); --c-plein: var(--tomate-clair); }

.art-d-chemin { margin-top: 28px; padding: 26px 28px 30px; background: var(--c-doux); border: var(--trait); border-radius: 28px; }
.art-d-etapes { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
.art-d-etapes::before { content: ""; position: absolute; left: 12%; right: 12%; top: 96px; border-top: 5px dashed var(--encre); }
.art-d-etapes li { position: relative; display: flex; }
.art-d-etapes .art-carte { width: 100%; }

/* ---------- les cartes de D : la question du texte, avec sa pastille « ? » ---------- */
.art-d .art-carte-question { display: flex; gap: 10px; align-items: flex-start; padding-left: 0; border-left: 0; }
.art-d .art-carte-question::before { content: "?" / ""; flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-top: -1px; border-radius: 50%; border: 2.5px solid var(--encre); background: var(--c-carte); font-family: var(--display); font-weight: 700; font-size: 1rem; line-height: 1; }
.art-d-rayon { padding: 48px 0 60px; }

/* ---------- page de lecture ---------- */
.art-d-num { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--tampon); background: var(--tampon-fond); border: 2.5px solid var(--tampon); font-family: var(--display); font-weight: 700; font-size: 1rem; }
.art-d-num.art-d-vide { border: 2.5px dashed var(--doux); background: none; }
.art-d .art-sommaire a { gap: 10px; }
.art-d .art-sommaire a[aria-current] { font-weight: 900; }
.art-d .art-sommaire a[aria-current] .art-d-num { background: var(--tampon); color: var(--blanc); }
.art-d .art-sommaire a[aria-current] .art-d-num.art-d-vide { background: var(--tomate); border: 2.5px solid var(--encre); }
.art-d .art-sec h2 { display: flex; gap: 14px; align-items: flex-start; }
.art-d .art-sec h2 .art-d-num { width: 42px; height: 42px; font-size: 1.2rem; margin-top: 1px; }

/* La tige de lecture : une bille par partie (téléphone et tablette, où le sommaire ne suit pas). */
.art-d-tige { display: none; }
@media (max-width: 900px) {
  .art-d-tige { display: block; position: sticky; top: 70px; z-index: 20; background: var(--papier); border-bottom: 2.5px solid var(--encre); }
  .art-d-tige .wrap { padding: 0 10px; }
  .art-d-tige ol { position: relative; display: flex; justify-content: space-between; list-style: none; margin: 0 auto; padding: 2px 0; max-width: 640px; }
  .art-d-tige ol::before { content: ""; position: absolute; left: 22px; right: 22px; top: 50%; height: 4px; margin-top: -2px; background: var(--encre); border-radius: 4px; }
  .art-d-tige a { position: relative; display: grid; place-items: center; width: 44px; height: 44px; }
  .art-d-tige a::before { content: ""; width: 30px; height: 18px; border-radius: 50%; background: var(--blanc); border: 3px solid var(--encre); transition: background .2s ease, transform .2s ease; }
  .art-d-tige a.art-d-passe::before { background: var(--tomate); }
  .art-d-tige a[aria-current]::before { background: var(--tomate); transform: scale(1.25); }
  .art-d .art-sec, .art-d-ensuite { scroll-margin-top: 136px; }
}
@media (max-width: 560px) and (max-height: 830px) { .art-d-tige { top: 60px; } }

/* À lire ensuite : le tampon « Lu », Tama, la question suivante en grand, deux autres textes */
.art-d-ensuite { padding: 64px 0 0; }
.art-d-ensuite .wrap { display: grid; gap: 22px; }
.art-d-lu { display: flex; align-items: center; gap: 18px; }
.art-d-lu .rond { width: 92px; height: 92px; }
.art-d-lu .rond b { font-size: 1.6rem; }
.art-d-lu .art-d-bulle { margin-bottom: 24px; }
.art-d-suite { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 26px; align-items: stretch; }
.art-d-suivante { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 250px); align-items: center; gap: 26px; padding: 28px 28px 28px 32px; color: var(--encre); text-decoration: none; background: var(--c-doux); border: var(--trait); border-radius: 28px; box-shadow: 0 7px 0 var(--encre); transition: transform .16s ease, box-shadow .16s ease; }
.art-d-suivante:hover { transform: translateY(-3px); box-shadow: 0 10px 0 var(--encre); }
.art-d-suivante:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--encre); }
.art-d-suivante:focus-visible { outline: 4px solid var(--encre); outline-offset: 4px; border-radius: 28px; }
.art-d-suivante-t { display: grid; gap: 12px; }
.art-d-grande-q { font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 2.6vw, 2.4rem); line-height: 1.1; text-wrap: balance; }
.art-d-dans { font-weight: 700; font-size: 1rem; line-height: 1.4; color: var(--encre-2); }
.art-d-suivante .art-carte-lire { font-size: 1.2rem; }
.art-d-suivante:hover .art-carte-lire span { display: inline-block; transform: translateX(4px); transition: transform .16s ease; }
.art-d-suivante img { width: 100%; height: auto; border: var(--trait); border-radius: 18px; background: var(--blanc); }
.art-d-autres { display: grid; gap: 18px; align-content: stretch; }
.art-d-autres .art-carte-image { max-width: 130px; }
.art-d-appel { padding-top: 56px; }

/* ---------- /guides : le chemin des trois guides, puis les études ---------- */
.art-d-commencer { margin-top: 34px; }

@media (prefers-reduced-motion: reduce) {
  .art-d-suivante, .art-d-suivante:hover, .art-d-situations button { transition: none; transform: none; }
}

/* ---------- tablette ---------- */
@media (max-width: 1000px) {
  .art-d-situations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Deux rangées : la flèche quitte la situation choisie (elle tombait entre les rangées)
     et se pose sous les deux rangées, au milieu, la pointe sur le chemin. */
  .art-d-situations button[aria-selected="true"]::after { content: none; }
  .art-d-situations + .art-d-chemin { position: relative; }
  .art-d-situations + .art-d-chemin::before { content: ""; position: absolute; left: 50%; top: -21px; width: 24px; height: 15px; margin-left: -12px; background: var(--encre); clip-path: polygon(0 0, 100% 0, 50% 100%); }
  .art-d-etapes { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .art-d-etapes::before { left: 40px; right: auto; top: 30px; bottom: 30px; border-top: 0; border-left: 5px dashed var(--encre); }
  .art-d-suite { grid-template-columns: minmax(0, 1fr); }
  .art-d-autres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .art-d-haut .wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "fil" "titre" "annonce"; }
  .art-d-etapes .art-carte { flex-direction: row; }
  .art-d-etapes .art-carte-image { flex: 0 0 40%; aspect-ratio: auto; border-bottom: 0; border-right: var(--trait); }
  .art-d-etapes .art-carte-numero { right: -25px; bottom: auto; top: 14px; }
  .art-d-etapes .art-carte-corps { padding-left: 34px; }
}

/* ---------- téléphone ---------- */
@media (max-width: 640px) {
  .art-d-bulle { font-size: 1.3rem; }
  .art-d-situations { gap: 12px; }
  .art-d-situations button { min-height: 118px; padding: 12px; }
  .art-d-situation { font-size: 1.1rem; }
  .art-d-mini img { width: 50px; height: 32px; }
  .art-d-chemin { padding: 16px 12px 18px; border-radius: 22px; margin: 26px -8px 0; }
  .art-d-etapes .art-carte { flex-direction: column; }
  .art-d-etapes .art-carte-image { flex: none; aspect-ratio: 8 / 5; border-right: 0; border-bottom: var(--trait); }
  .art-d-etapes .art-carte-numero { right: 14px; top: auto; bottom: -25px; }
  .art-d-etapes .art-carte-corps { padding-left: 16px; }
  .art-d-etapes::before { display: none; }
  /* Sur /articles, le chemin passe en lignes : les rayons arrivent plus tôt. */
  .art-d-court .art-carte { flex-direction: row; }
  .art-d-court .art-carte-image { flex: 0 0 34%; max-width: 128px; aspect-ratio: auto; border-bottom: 0; border-right: var(--trait); }
  .art-d-court .art-carte-numero { width: 40px; height: 40px; font-size: 1.2rem; left: 6px; top: 6px; right: auto; bottom: auto; }
  .art-d-court .art-carte-corps { padding: 12px 14px 14px; gap: 6px; }
  .art-d-court .art-carte-rubrique { display: none; }
  .art-d-court .art-carte-titre { font-size: 1.12rem; }
  .art-d-court .art-carte-lire { font-size: 1rem; }
  .art-d-court { gap: 14px; }
  /* Les rayons passent en lignes : plus de textes par écran. */
  .art-d-rayon .art-carte { flex-direction: row; align-items: stretch; }
  .art-d-rayon .art-carte-image { flex: 0 0 34%; max-width: 140px; aspect-ratio: auto; border-bottom: 0; border-right: var(--trait); }
  .art-d-rayon .art-carte-corps { padding: 12px 14px 14px; gap: 6px; }
  .art-d-rayon .art-carte-titre { font-size: 1.12rem; }
  .art-d-rayon .art-carte-rubrique, .art-d-rayon .art-carte-question { display: none; }
  .art-d-rayon .art-carte-lire { font-size: 1rem; }
  .art-d .art-carte[data-lu]::after { width: 44px; height: 44px; font-size: 1rem; right: 8px; top: auto; bottom: 8px; }
  .art-d-lu { gap: 10px; }
  .art-d-lu .rond { width: 72px; height: 72px; }
  .art-d-lu .rond b { font-size: 1.3rem; }
  .art-d-suivante { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 14px; }
  .art-d-suivante img { order: -1; }
  .art-d-autres { grid-template-columns: minmax(0, 1fr); }
  .art-d-autres .art-carte-rubrique { display: none; }
  .art-d-commencer .btn { width: 100%; }
}
@media (max-width: 400px) {
  .art-d-lu .rond { width: 60px; height: 60px; }
  .art-d-lu .rond b { font-size: 1.15rem; }
  .art-d-lu .art-d-tama svg { width: 60px; height: auto; }
  .art-d-lu .art-d-bulle { font-size: 1.2rem; padding: 8px 14px 9px; }
}