/* Importé par outils/importer-articles.py depuis 2026-10-27-articles/commun/articles.css : ne pas éditer ici. */
/* Sorotama · pages de lecture : feuille commune aux quatre propositions.
   Se pose après tama.css (greffe v3) ; n'utilise que ses variables ; toutes les classes sont préfixées art-. */

/* ---------- repères communs ---------- */
.art-fil { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: center; font-size: 1rem; color: var(--encre-2); }
.art-fil a { display: inline-flex; align-items: center; min-height: 44px; }
.art-fil span[aria-hidden] { color: var(--doux); }
.art-sur-titre { font-family: var(--body); font-weight: 900; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-2); }
/* Trait de mise en valeur : sous la ligne de base, jamais derrière les lettres (mots choisis sans jambage). */
.art-souligne { position: relative; white-space: nowrap; }
.art-souligne::after { content: ""; position: absolute; left: .02em; right: .02em; top: calc(.977em + .2em); height: .085em; border-radius: 99px; background: var(--tomate); }
.art-compte { display: inline-grid; place-items: center; min-width: 1.7em; height: 1.7em; padding: 0 .35em; border-radius: 999px; border: 2.5px solid var(--encre); background: var(--soleil); font-family: var(--display); font-size: .6em; font-weight: 700; vertical-align: .35em; margin-left: .3em; }
.art-tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 24px; margin-bottom: 26px; }
.art-tete h2 { font-size: clamp(1.75rem, 3vw, 2.4rem); }
.art-tout { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 900; text-decoration: none; border-bottom: 3px solid var(--tomate); }
.art-tout:hover { border-bottom-color: var(--encre); }

/* ---------- la carte : une vignette, une rubrique, un titre, une phrase, un verbe ---------- */
.art-carte { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--blanc); color: var(--encre); text-decoration: none; border: var(--trait); border-radius: var(--r); box-shadow: 0 6px 0 var(--encre); overflow: hidden; transition: transform .16s ease, box-shadow .16s ease; }
.art-carte:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--encre); }
.art-carte:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--encre); }
.art-carte:focus-visible { outline: 4px solid var(--encre); outline-offset: 4px; border-radius: var(--r); }
.art-carte-image { position: relative; display: block; aspect-ratio: 8 / 5; border-bottom: var(--trait); background: var(--papier-2); }
.art-carte-image img { width: 100%; height: 100%; object-fit: contain; }
.art-c-soleil .art-carte-image { background: var(--soleil-doux); }
.art-c-matcha .art-carte-image { background: var(--matcha-doux); }
.art-c-sakura .art-carte-image { background: var(--sakura-doux); }
.art-c-tomate .art-carte-image { background: var(--tomate-doux); }
.art-carte-corps { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 20px 18px; }
.art-carte-rubrique { font-weight: 900; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-2); }
.art-carte-titre { font-size: 1.32rem; line-height: 1.15; }
.art-carte-texte { font-weight: 600; font-size: 1rem; line-height: 1.5; color: var(--encre-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.art-carte-question { font-weight: 800; font-size: 1rem; line-height: 1.4; color: var(--encre); padding-left: 14px; border-left: 4px solid var(--c-carte, var(--soleil)); }
.art-carte-parties { display: flex; flex-wrap: wrap; gap: 6px; }
.art-carte-parties span { padding: 2px 10px; border: 2px solid var(--encre); border-radius: 10px; background: var(--papier); font-weight: 800; font-size: .95rem; line-height: 1.35; }
.art-c-soleil { --c-carte: var(--soleil); --c-doux: var(--soleil-doux); } .art-c-matcha { --c-carte: var(--matcha); --c-doux: var(--matcha-doux); } .art-c-sakura { --c-carte: var(--sakura); --c-doux: var(--sakura-doux); } .art-c-tomate { --c-carte: var(--tomate); --c-doux: var(--tomate-doux); }
.art-carte-lire { margin-top: auto; padding-top: 6px; font-family: var(--display); font-weight: 700; font-size: 1.08rem; color: var(--encre); }
.art-carte:hover .art-carte-lire span { display: inline-block; transform: translateX(4px); transition: transform .16s ease; }
.art-carte-numero { position: absolute; right: 16px; bottom: -25px; z-index: 2; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; font-family: var(--display); font-weight: 700; font-size: 1.5rem; color: var(--tampon); background: var(--tampon-fond); border: 3px solid var(--tampon); box-shadow: inset 0 0 0 3px var(--tampon-fond), inset 0 0 0 5px var(--tampon); transform: rotate(-10deg); }
/* Tampon « Lu » posé sur une carte déjà lue. */
.art-carte[data-lu]::after { content: "Lu"; position: absolute; right: 14px; top: 12px; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--tampon); background: var(--tampon-fond); border: 3px solid var(--tampon); box-shadow: inset 0 0 0 3px var(--tampon-fond), inset 0 0 0 5px var(--tampon); transform: rotate(12deg); }

.art-grille-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 26px; }
@media (max-width: 1000px) { .art-grille-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .art-grille-cartes { grid-template-columns: minmax(0, 1fr); gap: 22px; } }

/* Carte en ligne (téléphone, listes) : petite vignette à gauche, titre à droite. */
.art-carte.art-ligne { flex-direction: row; align-items: stretch; }
.art-ligne .art-carte-image { flex: 0 0 34%; max-width: 150px; aspect-ratio: auto; border-bottom: 0; border-right: var(--trait); }
.art-ligne .art-carte-corps { padding: 12px 14px 14px; gap: 4px; }
.art-ligne .art-carte-titre { font-size: 1.12rem; }
.art-ligne .art-carte-texte { display: none; }
.art-ligne .art-carte-lire { font-size: 1rem; }

/* ---------- page de lecture : mise en page « légale » D (application v2) ---------- */
.art-lecture main { padding: 22px 0 0; }
.art-entete { display: grid; gap: 12px; max-width: 800px; margin-bottom: 24px; }
.art-entete h1 { font-size: clamp(2.2rem, 4.2vw, 3.5rem); line-height: 1.08; }
.art-entete .lead { max-width: 40em; }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; font-size: 1rem; color: var(--encre-2); }
.art-meta span + span { position: relative; }
.art-meta span + span::before { content: ""; position: absolute; left: -14px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--tomate); }
@media (max-width: 640px) { .art-meta span + span::before { display: none; } }
.art-bref { max-width: 800px; padding: 20px 26px 22px; margin-bottom: 34px; background: var(--soleil-doux); }
.art-bref h2 { font-size: 1.4rem; margin-bottom: 8px; }
.art-bref p { font-weight: 700; }
.art-grille { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 34px; align-items: start; }
.art-sommaire { position: sticky; top: 90px; padding: 18px 18px 14px; }
.art-sommaire h2 { font-size: 1.2rem; margin-bottom: 6px; }
.art-sommaire ol { list-style: none; margin: 0; padding: 0; }
.art-sommaire a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; font-size: 1rem; line-height: 1.25; text-decoration: none; }
.art-sommaire a:hover { text-decoration: underline; }
.art-texte { padding: 30px 44px 36px 78px; background: linear-gradient(90deg, transparent 50px, var(--sakura) 50px 53px, transparent 53px), var(--blanc); display: grid; gap: 36px; }
.art-sec { display: grid; gap: 14px; scroll-margin-top: 96px; padding: 0; }
.art-sec h2 { font-size: clamp(1.45rem, 2.3vw, 1.85rem); line-height: 1.15; }
.art-sec p { font-weight: 600; color: var(--encre-2); max-width: 40em; }
.art-texte sup, .art-bref sup { font-size: .85em; line-height: 0; }
.art-texte sup a, .art-bref sup a { text-decoration: none; font-weight: 800; }
@media (max-width: 900px) {
  .art-grille { grid-template-columns: minmax(0, 1fr); }
  .art-sommaire { position: static; }
  .art-texte { padding: 24px 18px 28px 40px; background: linear-gradient(90deg, transparent 22px, var(--sakura) 22px 25px, transparent 25px), var(--blanc); }
}

/* Les études citées : repliées, pour que la suite de lecture arrive tout de suite après le texte. */
.art-etudes { border-top: 3px dashed var(--doux); padding-top: 8px; }
.art-etudes summary { display: flex; align-items: center; gap: 12px; min-height: 52px; cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 1.3rem; list-style: none; }
.art-etudes summary::-webkit-details-marker { display: none; }
.art-etudes summary::after { content: "+"; display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; border-radius: 50%; border: var(--trait); background: var(--soleil); font-size: 1.4rem; }
.art-etudes[open] summary::after { content: "−"; background: var(--sakura); }
.art-etudes-compte { display: inline-grid; place-items: center; min-width: 32px; height: 32px; border-radius: 999px; background: var(--papier-2); border: 2.5px solid var(--encre); font-size: 1rem; }
.art-etudes ol { display: grid; gap: 10px; padding-left: 1.3em; margin: 6px 0 4px; font-weight: 600; font-size: 1rem; color: var(--encre-2); }

/* Appel du site (repris tel quel : « Dix minutes par jour, à deux ») */
.art-appel { max-width: 760px; padding: 22px 26px 26px; background: var(--soleil-doux); display: grid; gap: 10px; justify-items: start; }
.art-appel h2 { font-size: 1.5rem; }
.art-appel p { font-weight: 700; }


@media (prefers-reduced-motion: reduce) {
  .art-carte, .art-carte:hover, .art-carte:active { transition: none; transform: none; }
}