/* Colonne de droite, images d'ambiance, cartes « Prenez A si » avec image, page /outils/ (mission 20261016-refonte-relecture).
   Variables du design seulement (jetons.css). Ne touche ni site.css ni cardiochezsoi.css. Contrôle de la colonne :
   03-outils/zones-vides.mjs (aucune plage vide de plus de 300 px à droite du texte à 1 280 px). */

/* ---------- Colonne de droite : masquée sous 1 100 px, collante au-dessus ---------- */
.colonne-droite { display: none; }
@media (min-width: 1100px) {
  .page.avec-droite { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; column-gap: var(--s-48); align-items: start; }
  .page.avec-droite .fil-ariane { grid-column: 1 / -1; }
  .page.avec-droite main { max-width: none; margin: 0; min-width: 0; }
  .page.avec-droite main > :not(.titre-page) { max-width: 46rem; }
  .colonne-droite {
    display: block; position: sticky; top: var(--s-104); margin-top: var(--s-24);
    max-height: calc(100vh - var(--s-104) - var(--s-24)); overflow-y: auto; overscroll-behavior: contain;
  }
  .colonne-droite-contenu { display: flex; flex-direction: column; gap: var(--s-16); }
}
.colonne-bloc { padding: var(--s-16) var(--s-20); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--c-white); }
.colonne-titre { margin: 0 0 var(--s-8); font-size: var(--fs-13); line-height: var(--lh-1_4); font-weight: var(--fw-headings); color: var(--green); }
.colonne-bloc ol, .colonne-bloc ul { list-style: none; margin: 0; padding: 0; }
.colonne-bloc li { margin: 0; }
.colonne-sommaire a, .colonne-outils a, .colonne-liens a {
  display: block; padding: var(--s-4) 0; font-size: var(--fs-14); line-height: var(--lh-1_4); color: var(--ink); text-decoration: none;
}
.colonne-sommaire a:hover, .colonne-outils a:hover, .colonne-liens a:hover { color: var(--green); text-decoration: underline; }
.colonne-sommaire a:focus-visible, .colonne-outils a:focus-visible, .colonne-liens a:focus-visible, .colonne-nom a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (pointer: coarse) {
  .colonne-sommaire a, .colonne-outils a, .colonne-liens a, .colonne-nom a { min-height: 44px; display: flex; align-items: center; }
}
.colonne-resume { display: block; font-size: var(--fs-13); line-height: var(--lh-1_4); color: var(--muted); }
.colonne-choix { background: var(--c-sage); }
/* Vignette du produit retenu : 88 px de large à côté du nom (la carte reste basse, le bouton reste dans l'écran collant) */
.colonne-choix-tete { display: flex; align-items: flex-start; gap: var(--s-12); margin: 0 0 var(--s-8); }
.colonne-choix-tete .colonne-nom { margin: 0; min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.colonne-choix .colonne-vignette { flex: 0 0 5.5rem; width: 5.5rem; max-width: 5.5rem; margin: 0; }
.colonne-choix .colonne-vignette img { aspect-ratio: 4 / 3; border: 1px solid var(--line); }
.colonne-choix .colonne-vignette .image-credit { font-size: var(--fs-13); line-height: var(--lh-1_4); }
.colonne-nom { margin: 0 0 var(--s-8); font-weight: var(--fw-emphasis); font-size: var(--fs-15); line-height: var(--lh-1_4); color: var(--ink); }
.colonne-nom a { color: inherit; text-decoration: none; }
.colonne-nom a:hover { text-decoration: underline; }
.colonne-chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); margin: 0 0 var(--s-8); }
.colonne-catalogue .colonne-chiffres { grid-template-columns: 1fr; gap: var(--s-12); }
.colonne-chiffres li { display: flex; flex-direction: column; min-width: 0; }
.colonne-chiffres .chiffre-valeur { font-size: var(--fs-25); line-height: var(--lh-1_2); font-weight: var(--fw-headings); color: var(--ink); }
.colonne-chiffres .chiffre-unite { font-size: var(--fs-13); font-weight: var(--fw-body); }
.colonne-chiffres .chiffre-libelle { font-size: var(--fs-13); line-height: var(--lh-1_4); color: var(--muted); }
.colonne-bouton .button-purchase { width: 100%; margin-top: var(--s-8); }

/* ---------- Image d'ambiance : une par page longue, hors fiche ---------- */
.image-ambiance { margin: var(--s-24) 0; }
.image-ambiance img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-card); background: var(--c-sage); }

/* ---------- « Prenez A si » : image du produit dans la carte (absente = carte sans image, sans trou) ---------- */
.prenez-carte .image-produit { max-width: none; margin: 0 0 var(--s-12); }
.prenez-carte .image-produit img { aspect-ratio: 16 / 10; border: 1px solid var(--line); }

/* ---------- Page /outils/ ---------- */
.outils-liste { list-style: none; margin: var(--s-24) 0; padding: 0; display: grid; gap: var(--s-16); }
.outils-liste > li { padding: var(--s-20); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--c-white); }
.outils-liste h2 { margin: 0 0 var(--s-8); font-size: var(--fs-22); line-height: var(--lh-1_25); }
.outils-liste p { margin: 0 0 var(--s-12); color: var(--muted); }

/* ---------- Défauts de rendu préexistants à 375 px (rapport 20261016-outils-geo) ---------- */
@media (max-width: 640px) {
  /* cadre du tableau « marche ou course » : 351 px dans 333, le tableau du duel resserre ses cellules et ne défile plus */
  .tableau-duel { font-size: var(--fs-13); }
  .tableau-duel th, .tableau-duel td { padding: var(--s-10) var(--s-6); overflow-wrap: anywhere; }
  /* premier écran d'une fiche à nom long : la photo d'ouverture passe en 16 / 9 pour que le nom du choix finisse au-dessus de la barre d'achat */
  .titre-page .ouverture-photo img { aspect-ratio: 16 / 9; }
}

/* ---------- Index local /relecture/ : liens à 44 px au moins (écrans étroits et tactiles) ---------- */
@media (max-width: 960px), (pointer: coarse) {
  body[data-type-page="relecture"] main a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; box-sizing: border-box; }
  body[data-type-page="relecture"] main td, body[data-type-page="relecture"] main th { padding-block: 0; }
}

/* Index des outils : image d'illustration de chaque outil (rendue seulement si présente). */
.outils-liste .outil-illustration { display: block; margin: 0 0 var(--s-12); border-radius: var(--r-12); overflow: hidden; }
.outils-liste .outil-illustration img { display: block; width: 100%; height: auto; max-width: 480px; }


/* Page Méthode : tableau du questionnaire (une table par appareil, calculée au build depuis data/attributs.md) */
@media (min-width: 768px) { .questionnaire-appareil table { min-width: 44rem; } }
.questionnaire-appareil td ul { list-style: none; margin: 0; padding: 0; }
.questionnaire-appareil td li { margin: 0 0 var(--s-8); font-size: var(--fs-14); line-height: var(--lh-1_4); }
.questionnaire-appareil td li:last-child { margin-bottom: 0; }
.questionnaire-appareil code { font-size: var(--fs-13); overflow-wrap: anywhere; }

/* Tableaux de la page Méthode (questionnaire) : en dessous de 768 px, une ligne devient un bloc, chaque cellule porte son libellé
   de colonne (data-label), pour qu'aucun cadre ne défile (décision du 2026-10-11 : aucun défilement dans le cadre d'un tableau). */
@media (max-width: 767px) {
  .tableau-empile table, .tableau-empile tbody, .tableau-empile tr, .tableau-empile th, .tableau-empile td { display: block; width: 100%; }
  .tableau-empile thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tableau-empile tr { padding: var(--s-12) var(--s-16); border-top: 1px solid var(--line); }
  .tableau-empile td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-13); font-weight: var(--fw-emphasis); color: var(--green); }
  .tableau-empile th, .tableau-empile td { padding: var(--s-6) 0; border: 0; overflow-wrap: anywhere; }
  .tableau-empile caption { display: block; padding: var(--s-12) var(--s-16); text-align: left; }
}

/* Tableau de classement à 375 px : marges latérales resserrées pour que le cadre ne défile pas (noms de modèle longs, ex. rameur/connecte) */
@media (max-width: 767px) {
  .tableau-classement th, .tableau-classement td { padding-left: var(--s-12); padding-right: var(--s-12); }
}
/* Index local /relecture/ : tableaux à colonnes fixes, texte qui passe à la ligne, aucun débordement horizontal */
body[data-type-page="relecture"] table { table-layout: fixed; }
body[data-type-page="relecture"] th, body[data-type-page="relecture"] td { overflow-wrap: anywhere; }

/* Premier écran à 375 px : le bloc de réponse directe remonte de 16 px pour que le nom du choix finisse dans l'écran sur les pages à titre long */
@media (max-width: 767px) {
  .bloc.bloc-reponse-directe, .bloc.bloc-reponse { margin-top: var(--s-32); }
}

/* ---------- Qui suis-je : bande d'en-tête, petite photo carrée encadrée à gauche du titre et de l'introduction (mission 20261019-pages-legales) ---------- */
.qui-suis-je-tete { display: grid; grid-template-columns: 11.25rem minmax(0, 1fr); column-gap: var(--s-24); align-items: start; margin: 0 0 var(--s-24); }
.portrait-editeur { margin: 0; }
.portrait-editeur img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-4); background: var(--c-sage); box-sizing: border-box; }
.qui-suis-je-texte > :first-child { margin-top: 0; }
@media (max-width: 640px) {
  .qui-suis-je-tete { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-16); }
  .portrait-editeur { width: 7.5rem; }
}