/* Ajouts du site au design externe (mission 20261014-design-externe). cardiochezsoi.css est dérivée de la maquette et ne s'édite
   pas ; ce fichier porte ce que la maquette ne montre pas : menu par appareil avec « Bientôt », déclinaison sur les pages de
   sélection, fiche, comparatif et guide, composants fonctionnels du site. Couleurs, tailles de police, espacements, rayons et
   ombres : var(--…) seulement (jetons de design/tokens.json, /styles/jetons.css). L'ambre (--c-purchase) ne colore que
   .button-purchase, le bouton vers Amazon : contrôle « couleur action hors bouton Amazon » du garde-fou. */

/* ---------- Mise en page commune ---------- */
.page { max-width: var(--layout-container-max); margin: 0 auto; padding-inline: var(--layout-mobile-gutter); }
@media (min-width: 641px) { .page { padding-inline: var(--layout-medium-gutter); } }
@media (min-width: 961px) { .page { padding-inline: var(--layout-desktop-gutter); } }
main { max-width: 46rem; margin: 0 auto; padding-bottom: var(--s-58); }
body[data-type-page="accueil"] .page { max-width: none; padding-inline: 0; }
body[data-type-page="accueil"] main { max-width: none; padding-bottom: 0; }
.evitement { position: absolute; left: -999px; }
.inactif { color: var(--muted); cursor: default; }
a { text-underline-offset: 0.2em; }
main a:not(.button):not(.text-link):not(.product-test):not(.comparison-link):not(.category-card):not(.hero-floating):not(.hero-secondary):not(.guide-image):not(.article-art),
.faq a, .a-lire-aussi a { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; }
main a:not(.button):hover { color: var(--c-editorial-action-hover); }
.container { margin-inline: auto; }

/* ---------- En-tête : menu par appareil ---------- */
.header-inner { width: min(1400px, calc(100% - 72px)); }
.desktop-nav > ul { display: flex; align-items: center; justify-content: center; gap: var(--s-23); list-style: none; margin: 0; padding: 0; }
.desktop-nav { min-width: 0; }
.nav-appareil { position: relative; display: flex; flex-direction: column; align-items: flex-start; font-size: var(--fs-12); font-weight: var(--fw-navigation); line-height: var(--lh-1_2); white-space: nowrap; }
.nav-appareil > a, .nav-appareil > span:first-child { display: inline-flex; align-items: center; min-height: var(--layout-touch-control-min-height); }
.nav-appareil > a[aria-current] { color: var(--green); }
.nav-appareil > a[aria-current]:after { width: 100%; }
.nav-appareil.inactif { gap: 0; justify-content: center; }
.nav-appareil.inactif > span:first-child { min-height: 0; }
.pastille-bientot {
  display: inline-block; font-size: var(--fs-12); line-height: var(--lh-1_4); font-weight: var(--fw-navigation); color: var(--muted);
  background: var(--c-sage); border-radius: var(--r-pill); padding: 0 var(--s-8); white-space: nowrap; vertical-align: middle;
}
.nav-appareil.inactif .pastille-bientot { margin-top: var(--s-4); }
.desktop-nav .nav-sous {
  display: none; position: absolute; top: 100%; left: calc(-1 * var(--s-16)); min-width: 17rem; list-style: none; margin: 0;
  padding: var(--s-8) var(--s-16); background: var(--c-white); border: 1px solid var(--line); border-radius: var(--r-card); z-index: 40;
  box-shadow: var(--sh-chooser);
}
.desktop-nav .nav-appareil:hover .nav-sous, .desktop-nav .nav-appareil:focus-within .nav-sous { display: block; }
.nav-sous li { display: block; }
.nav-sous a { display: block; padding: var(--s-8) 0; font-size: var(--fs-13); white-space: normal; }
.nav-sous a:after { display: none; }
.mobile-nav { max-height: calc(100dvh - 76px); overflow: auto; }
.mobile-nav ul { list-style: none; margin: 0; padding: var(--s-8) var(--s-20) var(--s-20); }
.mobile-nav ul ul { padding: 0 0 var(--s-8) var(--s-16); }
.nav-mobile-appareil { display: flex; align-items: center; gap: var(--s-8); min-height: var(--layout-touch-control-min-height); font-size: var(--fs-15); font-weight: var(--fw-emphasis); }
.mobile-nav ul ul a { display: flex; align-items: center; min-height: var(--layout-touch-control-min-height); font-size: var(--fs-14); color: var(--muted); }
.mobile-nav li.inactif { display: flex; align-items: center; gap: var(--s-8); }
.mobile-nav > ul > li { border-bottom: 1px solid var(--line); }
.mobile-nav { background: var(--paper); box-shadow: var(--sh-mobile-menu); border-bottom: 1px solid var(--line); position: absolute; left: 0; right: 0; top: 100%; }
@media (max-width: 960px) { .mobile-nav:not([hidden]) { display: block; } }
@media (min-width: 961px) { .mobile-nav { display: none !important; } }
@media (max-width: 1200px) { .desktop-nav > ul { gap: var(--s-15); } .header-inner { width: calc(100% - 48px); } }
@media (max-width: 960px) { .header-cta { display: inline-flex; margin-left: auto; } .menu-toggle { margin-left: 0; width: 44px; height: 44px; } }
@media (max-width: 640px) { .header-cta { display: none; } .menu-toggle { margin-left: auto; } .header-inner { width: calc(100% - 32px); } }
html:not(.js) .site-header { position: relative; }

/* ---------- Pied de page ---------- */
.footer-top { grid-template-columns: 1.65fr 1fr 1fr; }
.footer-top > div:not(:first-child) > a, .footer-top > div:not(:first-child) > .footer-bientot { display: flex; align-items: center; gap: var(--s-8); font-size: var(--fs-13); color: var(--c-footer-secondary); margin-top: var(--s-11); min-height: var(--s-24); }
.footer-bientot .pastille-bientot { background: transparent; border: 1px solid var(--c-affiliation-note-385348); color: var(--c-footer-secondary); }
.footer-top > div:last-child { grid-column: auto; display: block; }
.footer-top > div:last-child h3 { margin-bottom: var(--s-20); }
.footer-top > div:last-child > a { margin-top: var(--s-11); }
.footer-bottom span { color: var(--c-footer-secondary); }
@media (max-width: 960px) { .footer-top { grid-template-columns: 1.35fr 1fr 1fr; } }
@media (max-width: 640px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / 3; } .footer-top > div:last-child { grid-column: 1 / 3; } }

/* ---------- Accueil ---------- */
.hero-proof { font-size: var(--fs-14); }
.hero-proof > span > span { color: var(--muted); }
.hero-photo-label b { font-weight: inherit; }
.hero-floating small { color: var(--muted); }
.hero-floating small { display: block; font-size: var(--fs-13); }
.category-card { display: block; }
.category-card p { color: var(--muted); }
.category-card.inactif .category-art { background: var(--c-category-art-eff1e9); opacity: 1; }
.category-card.inactif h3 { color: var(--muted); }
.category-card.inactif img { filter: grayscale(0.6); }
.category-art { padding-block: var(--s-10); }
.product-badge { max-width: calc(100% - var(--s-28)); line-height: var(--lh-1_3); background: var(--c-white); }
.product-card ul { list-style: none; }
.product-card li:before { content: ""; width: var(--s-8); height: var(--s-8); margin-top: var(--s-8); border-radius: var(--r-circle); background: var(--c-product-card-li-before-607c56); flex-shrink: 0; }
.product-card li strong { color: var(--ink); font-weight: var(--fw-emphasis); }
.product-card .achat { margin-top: auto; }
.product-info > .product-bottom { margin-bottom: 0; }
.product-card h3 a { color: var(--ink); text-decoration: none; }
.guide-image .illustration-scene { min-height: var(--s-104); }
.chooser-liens { list-style: none; margin: var(--s-24) 0 0; padding: 0; display: grid; gap: var(--s-8); font-size: var(--fs-14); }
.chooser-liens a { display: flex; align-items: center; min-height: var(--layout-touch-control-min-height); color: var(--green); }
html.js .chooser-liens { display: none; }
html:not(.js) .chooser form { display: none; }
.chooser-fields { grid-template-columns: 1fr; }
.chooser-result { display: block; }
.chooser-result strong { display: block; color: var(--ink); font-size: var(--fs-15); }
.chooser-result p { font-size: var(--fs-14); }
.chooser-result a { color: var(--green); font-size: var(--fs-13); text-decoration: underline; }
.about-stamp { max-width: calc(100% - var(--s-24)); }
.about-copy > p:not(.section-kicker) { color: var(--muted); }
.about-copy p a { color: var(--green); text-decoration: underline; }
.about-visual > img { object-fit: cover; }
.comparison-section .comparison-card h3 a { color: inherit; }
.comparison-card > div:last-child { min-width: 0; }
.comparison-card h3, .comparison-card p { overflow-wrap: break-word; }

/* ---------- Composants communs ---------- */
.button-purchase { margin-top: var(--s-16); }
.achat { display: flex; flex-direction: column; margin-top: var(--s-8); }
.affiliate-disclosure { margin: var(--s-10) 0 0; font-size: var(--fs-12); line-height: var(--lh-1_6); color: var(--muted); }
/* Autres marchands (mission 20261016-multi-marchands) : « Aussi chez », sous le bouton Amazon, liens secondaires sobres (contour
   et texte encre, jamais le jeton action ambre, réservé à .button-purchase). */
.aussi-chez { margin-top: var(--s-12); }
.aussi-chez-titre { margin: 0 0 var(--s-6); font-size: var(--fs-13); line-height: var(--lh-1_4); color: var(--muted); }
.aussi-chez ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-8); }
.aussi-chez .lien-marchand { display: inline-flex; align-items: center; min-height: 2.75rem; padding: var(--s-6) var(--s-12); border: 1px solid var(--line); border-radius: var(--r-8); background: var(--c-white); color: var(--ink); font-size: var(--fs-14); font-weight: var(--fw-emphasis); text-decoration: none; }
.aussi-chez .lien-marchand:hover { background: var(--c-sage); text-decoration: underline; }
.aussi-chez .lien-marchand:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.aussi-chez .affiliate-disclosure { margin-top: var(--s-8); }
.produit .aussi-chez { max-width: 22rem; }
.barre-achat .aussi-chez { grid-column: 1 / -1; margin-top: var(--s-8); }
.barre-achat .aussi-chez-titre { display: inline; margin: 0 var(--s-8) 0 0; }
.barre-achat .aussi-chez ul { display: inline-flex; vertical-align: middle; }
.barre-achat .aussi-chez .lien-marchand { min-height: 2.75rem; }
body.avec-barre:has(.barre-achat .aussi-chez) { padding-bottom: calc(var(--s-96) + var(--s-96)); }
@media (min-width: 961px) {
  body.avec-barre:has(.barre-achat .aussi-chez) { padding-bottom: 0; }
  .barre-achat .aussi-chez { margin-top: var(--s-12); }
  .barre-achat .aussi-chez-titre { display: block; margin: 0 0 var(--s-6); }
  .barre-achat .aussi-chez ul { display: flex; }
}
.button img.ui-icon { filter: brightness(0) invert(1); }
.button-purchase img.ui-icon, .button-purchase .ui-icon { filter: none; }
.button.button-purchase { color: var(--ink); }
.fil-ariane { padding: var(--s-16) 0 0; font-size: var(--fs-13); color: var(--muted); }
.fil-ariane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8); }
.fil-ariane li + li::before { content: "›"; margin-right: var(--s-8); color: var(--muted); }
.fil-ariane a { color: var(--muted); text-decoration: none; }
.fil-ariane a:hover { color: var(--ink); text-decoration: underline; }
.fil-ariane [aria-current] { color: var(--ink); }
.mise-a-jour { font-size: var(--fs-13); color: var(--muted); margin-top: var(--s-48); }
.note-provisoire { font-size: var(--fs-14); color: var(--muted); }
.brouillon { border: 2px dashed var(--c-disabled-ink); background: var(--c-sage); padding: var(--s-16); border-radius: var(--r-card); margin: var(--s-16) 0; }
.brouillon p { margin: 0; color: var(--ink); }
.brouillon-etiquette { display: inline-block; font-size: var(--fs-12); font-weight: var(--fw-emphasis); text-transform: uppercase; color: var(--ink); margin-right: var(--s-8); }

/* ---------- Bande d'ouverture des pages de contenu ---------- */
.titre-page.ouverture {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-16); row-gap: var(--s-8);
  margin: var(--s-16) 0 var(--s-24); padding: var(--s-20); background: var(--c-sage); border-radius: var(--r-hero-mobile);
}
.titre-page .ouverture-texte { display: contents; }
.titre-page .surtitre { grid-column: 1; grid-row: 1; margin: 0; color: var(--green); font-size: var(--fs-13); font-weight: var(--fw-headings); }
.titre-page h1 { grid-column: 1 / -1; grid-row: 2; font-size: var(--fs-section-title); letter-spacing: var(--ls-n1_55); margin: 0; }
.titre-page .ouverture-illu { grid-column: 2; grid-row: 1; display: flex; gap: var(--s-8); }
.titre-page .ouverture-illu .equipment-art { width: var(--s-80); height: auto; }
.titre-page .ouverture-illu.duo .equipment-art { width: var(--s-64); }
.titre-page > .brouillon, .titre-page > .note-provisoire { grid-column: 1 / -1; }
.titre-page .ouverture-silhouette { display: none; margin: 0; }
.ouverture-silhouette .schema { max-width: 100%; }
body[data-type-page="comparatif"] .titre-page.ouverture { background: var(--c-comparison-section); }
body[data-type-page="comparatif"] .titre-page h1 { color: var(--c-comparison-heading); }
body[data-type-page="comparatif"] .titre-page .surtitre { color: var(--c-comparison-criterion); }
body[data-type-page="comparatif"] .titre-page .ouverture-illu .equipment-art { background: var(--c-comparison-art-e5ecdb); border-radius: var(--r-8); padding: var(--s-4); }
.fil-ariane li[aria-current] { display: none; }
@media (min-width: 961px) {
  .titre-page.ouverture { display: flex; padding: var(--s-48); border-radius: var(--r-hero-desktop); gap: var(--s-48); justify-content: space-between; margin-top: var(--s-24); }
  .titre-page .ouverture-texte { display: block; flex: 1 1 28rem; }
  .titre-page .surtitre { margin-bottom: var(--s-13); }
  .titre-page h1 { font-size: var(--fs-44); letter-spacing: var(--ls-n1_7); line-height: var(--lh-1_13); }
  .titre-page .ouverture-illu .equipment-art { width: var(--s-96); }
  .titre-page .ouverture-illu { flex: none; }
  .titre-page .ouverture-silhouette { display: block; flex: 0 1 22rem; }
  .fil-ariane li[aria-current] { display: list-item; }
}

/* ---------- Blocs ---------- */
.bloc { margin: var(--s-48) 0; }
.bloc-titre { scroll-margin-top: var(--s-104); margin-bottom: var(--s-16); }
.bloc h2, .bloc-titre { font-size: var(--fs-section-title); letter-spacing: var(--ls-n1_55); }
main .bloc p { color: var(--ink); line-height: var(--lh-1_75); margin-bottom: var(--s-16); }
.sommaire ol { margin: 0; padding: var(--s-16) var(--s-24) var(--s-16) var(--s-40); columns: 2 12rem; background: var(--c-sage); border-radius: var(--r-card); }
.sommaire li { padding: var(--s-4) 0; font-size: var(--fs-14); }
.bloc-reponse, .bloc-reponse-directe { display: flex; flex-direction: column; }
.bloc-reponse > .bloc-titre, .bloc-reponse-directe > .bloc-titre {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.bloc-reponse > p:first-of-type, .bloc-reponse-directe > p:first-of-type { order: -2; }
.bloc-reponse > .produit, .bloc-reponse-directe > .produit { order: -1; margin-top: 0; }
.bloc-reponse > p, .bloc-reponse-directe > p { margin: 0 0 var(--s-16); }
@media (min-width: 961px) {
  .bloc-reponse > .bloc-titre, .bloc-reponse-directe > .bloc-titre { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; order: -3; }
  .bloc-reponse > p:first-of-type, .bloc-reponse-directe > p:first-of-type { font-size: var(--fs-19); line-height: var(--lh-1_6); }
}

/* ---------- Chiffres-clés ---------- */
.chiffres { list-style: none; margin: var(--s-16) 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-16); }
.chiffres li { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.chiffre-valeur { font-weight: var(--fw-headings); color: var(--ink); font-size: var(--fs-25); line-height: var(--lh-1); letter-spacing: var(--ls-n0_7); white-space: nowrap; }
.chiffre-unite { font-size: var(--fs-13); font-weight: var(--fw-navigation); color: var(--muted); letter-spacing: 0; }
.chiffre-valeur .chiffre-unite { white-space: normal; }
.chiffre-libelle, .chiffre-rang { font-size: var(--fs-13); line-height: var(--lh-1_4); color: var(--muted); }
.chiffre-rang { color: var(--green); font-weight: var(--fw-emphasis); }
.chiffre-inline { font-weight: var(--fw-emphasis); color: var(--ink); }
.chiffres-seuils { grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--c-sage); border-radius: var(--r-card); padding: var(--s-24) var(--s-16); }
@media (min-width: 641px) { .chiffre-valeur { font-size: var(--fs-31); } }

/* ---------- Encadré produit ---------- */
.produit {
  background: var(--c-white); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-22);
  margin: var(--s-24) 0; display: flex; flex-direction: column; gap: var(--s-8);
}
.produit-choix { background: var(--c-sage); border-color: var(--c-divider); border-radius: var(--r-hero-desktop); padding: var(--s-24); }
.produit-tete { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; }
.produit-surtitre { margin: 0; font-size: var(--fs-12); font-weight: var(--fw-headings); color: var(--ink); background: var(--c-white); border-radius: var(--r-4); padding: var(--s-4) var(--s-8); }
main .produit .produit-surtitre { color: var(--ink); margin: 0; }
.produit-rang { min-width: var(--s-30); height: var(--s-30); display: inline-flex; align-items: center; justify-content: center; font-weight: var(--fw-headings); color: var(--ink); background: var(--c-sage); border-radius: var(--r-circle); font-size: var(--fs-14); }
.produit-nom { font-size: var(--fs-25); line-height: var(--lh-1_3); letter-spacing: var(--ls-n0_6); margin: 0; }
.produit-nom a { color: var(--ink); text-decoration: none; }
.produit-nom a:hover { color: var(--green); text-decoration: underline; }
.produit-silhouette { margin: 0; }
.produit .chiffres { margin: var(--s-8) 0; }
.pour-pas-pour { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-8); font-size: var(--fs-14); line-height: var(--lh-1_5); }
.pour-pas-pour li { display: flex; gap: var(--s-8); align-items: baseline; }
.pour-pas-pour .signe { flex: none; font-weight: var(--fw-emphasis); min-width: 4.6rem; }
.pour .signe { color: var(--green); }
.pas-pour .signe { color: var(--muted); }
.produit-forts { margin: 0; padding-left: var(--s-20); font-size: var(--fs-14); line-height: var(--lh-1_6); color: var(--muted); }
.produit-defaut { margin: 0; font-size: var(--fs-14); line-height: var(--lh-1_6); }
main .bloc .produit p { margin-bottom: 0; }
.grille-produits { display: grid; gap: var(--s-20); }
@media (min-width: 641px) { .grille-produits { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); } .grille-produits .produit { margin: 0; } }
.fiche-courte { margin: var(--s-24) 0 var(--s-48); }
.fiche-courte .produit { margin-bottom: var(--s-16); }
.produit .achat, .prenez-carte .achat { max-width: 22rem; }
.produit .button-purchase, .prenez-carte .button-purchase { width: 100%; }

/* ---------- Tableaux : défilement interne seulement ---------- */
.tableau-defilant { overflow-x: auto; margin: var(--s-16) 0; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--c-white); }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-14); line-height: var(--lh-1_5); }
caption { text-align: left; font-weight: var(--fw-emphasis); padding: var(--s-16); caption-side: top; color: var(--ink); }
th, td { padding: var(--s-10) var(--s-16); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink); }
thead th { background: var(--c-sage); font-size: var(--fs-13); font-weight: var(--fw-emphasis); color: var(--ink); }
tbody th { font-weight: var(--fw-navigation); color: var(--ink); }
tbody th a { color: var(--green); }
tr:last-child th, tr:last-child td { border-bottom: 0; }
.tableau-classement { table-layout: auto; }
.tableau-classement th, .tableau-classement td { overflow-wrap: break-word; }
.tableau-classement .col-large { display: none; }
.tableau-classement .chiffre-decisif { color: var(--green); font-weight: var(--fw-emphasis); }
@media (min-width: 768px) { .tableau-classement .col-large { display: table-cell; } }

/* ---------- « Prenez A si » ---------- */
.prenez { margin: var(--s-24) 0; }
.prenez-titre { margin: 0 0 var(--s-12); }
.prenez-grille { display: grid; gap: var(--s-16); }
.prenez-carte { background: var(--c-white); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-22); display: flex; flex-direction: column; gap: var(--s-8); }
.prenez-carte p { margin: 0; }
.prenez-si { font-size: var(--fs-19); line-height: var(--lh-1_4); font-weight: var(--fw-headings); color: var(--ink); }
.prenez-si strong { font-weight: var(--fw-headings); color: var(--green); }
.prenez-carte ul { margin: 0; padding-left: var(--s-20); font-size: var(--fs-15); line-height: var(--lh-1_6); }
.prenez-carte li { margin: var(--s-4) 0; }
.lien-fleche { font-size: var(--fs-14); font-weight: var(--fw-emphasis); }
@media (min-width: 641px) { .prenez-grille { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }

/* ---------- Critères, listes, colonnes ---------- */
.criteres { display: grid; gap: var(--s-8); margin: 0; }
.criteres div { background: var(--c-sage); border-radius: var(--r-card); padding: var(--s-16); }
.criteres dt { font-weight: var(--fw-emphasis); }
.criteres dd { margin: 0; color: var(--muted); }
.deux-colonnes { display: grid; gap: var(--s-16); }
.deux-colonnes > div { background: var(--c-white); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-16) var(--s-24); }
.deux-colonnes ul { margin: 0; padding-left: var(--s-20); }
@media (min-width: 641px) { .deux-colonnes { grid-template-columns: 1fr 1fr; } }
.liens-suite, .liens-facettes, .liste-marques { padding-left: var(--s-24); }
.liens-suite li, .liens-facettes li, .liste-marques li { margin: var(--s-8) 0; }
.a-lire-aussi { margin-top: var(--s-24); padding: var(--s-16) var(--s-24); background: var(--c-sage); border-radius: var(--r-card); }
.a-lire-aussi h3 { font-size: var(--fs-16); margin-bottom: var(--s-8); }
.a-lire-aussi ul { margin: 0; padding-left: var(--s-20); }
.source { font-size: var(--fs-13); color: var(--muted); }

/* ---------- Essais publiés ---------- */
.experiences ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-16); }
.experiences li { background: var(--c-white); border: 1px solid var(--line); border-left: var(--s-4) solid var(--green); border-radius: var(--r-card); padding: var(--s-20); font-size: var(--fs-15); line-height: var(--lh-1_65); }
@media (min-width: 641px) { .experiences ul { grid-template-columns: 1fr 1fr; } }

/* ---------- FAQ repliable ---------- */
.faq { display: grid; gap: var(--s-8); }
.faq-item { background: var(--c-white); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-12) var(--s-20); }
.faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-16); min-height: var(--layout-touch-control-min-height); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: var(--fs-24); font-weight: var(--fw-navigation); color: var(--green); flex: none; }
.faq-item[open] summary::after { content: "−"; }
.faq-item summary h3 { margin: 0; font-size: var(--fs-16); line-height: var(--lh-1_4); font-weight: var(--fw-emphasis); letter-spacing: 0; }
.faq-item p { margin: var(--s-8) 0 0; color: var(--muted); }
main .faq-item p { color: var(--muted); }

/* ---------- Schémas et silhouettes cotées : traits ink, cotes vertes ---------- */
.schemas { display: grid; gap: var(--s-16); margin: var(--s-16) 0; }
.schema-figure { margin: 0; padding: var(--s-16); background: var(--c-white); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.schema-figure figcaption { font-size: var(--fs-13); color: var(--muted); margin-top: var(--s-8); }
.schema { display: block; width: 100%; height: auto; }
.schema text { font-weight: var(--fw-navigation); font-size: var(--fs-12); fill: var(--ink); }
.schema .repere-texte { font-weight: var(--fw-body); fill: var(--muted); }
.schema .cote-texte { font-weight: var(--fw-emphasis); fill: var(--green); }
.schema .contour { fill: var(--c-sage); stroke: var(--ink); stroke-width: 2; }
.schema .contour.plie { fill: none; stroke-dasharray: 5 4; stroke: var(--muted); }
.schema .bande { fill: var(--c-white); stroke: var(--muted); stroke-width: 1.5; }
.schema .cote { stroke: var(--green); stroke-width: 1.5; fill: none; }
.schema .sol, .schema .repere { stroke: var(--muted); stroke-width: 1; fill: none; }
.schema .sol { stroke-width: 2; }
.schema .jauge-fond { fill: var(--c-sage); }
.schema .jauge-valeur { fill: var(--green); }
.schema .silhouette { fill: none; stroke-width: 2.5; }
.schema .silhouette-1 { stroke: var(--ink); fill: var(--c-sage); }
.schema .silhouette-2 { stroke: var(--green); stroke-dasharray: 7 4; }
.pictos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-16) var(--s-24); }
.pictos li { display: flex; align-items: center; gap: var(--s-8); font-weight: var(--fw-navigation); }
.picto { width: 44px; height: 40px; flex: none; }
.picto .trait-icone { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.picto .trait-icone.fin { stroke: var(--green); stroke-dasharray: 4 3; }
.picto .plein-icone { fill: var(--green); }

/* ---------- Colonne d'achat : barre collante en mobile, colonne fixe en grand écran ---------- */
.colonne-achat { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; }
.barre-achat {
  background: var(--c-white); border-top: 1px solid var(--line); box-shadow: 0 calc(-1 * var(--s-4)) var(--s-25) var(--c-mobile-nav-183b3512);
  padding: var(--s-8) var(--s-20); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-16); align-items: center;
}
.barre-silhouette, .barre-chiffres { display: none; }
.barre-identite { min-width: 0; }
.barre-nom { margin: 0; font-weight: var(--fw-emphasis); font-size: var(--fs-14); line-height: var(--lh-1_4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.barre-info { margin: 0; font-size: var(--fs-12); line-height: var(--lh-1_4); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-achat .achat { display: contents; }
.barre-achat .button-purchase { width: auto; margin-top: 0; padding: var(--s-10) var(--s-16); }
.barre-achat .affiliate-disclosure { grid-column: 1 / -1; margin-top: var(--s-4); }
body.avec-barre { padding-bottom: calc(var(--s-96) + var(--s-8)); }
@media (min-width: 961px) {
  body.avec-barre { padding-bottom: 0; }
  .colonne-achat { position: sticky; top: var(--s-104); left: auto; right: auto; bottom: auto; margin-top: var(--s-24); z-index: auto; }
  .barre-achat { display: flex; flex-direction: column; gap: var(--s-20); padding: var(--s-24); border: 1px solid var(--line); border-radius: var(--r-hero-desktop); box-shadow: none; background: var(--c-sage); }
  .barre-silhouette { display: block; }
  .barre-chiffres { display: grid; grid-template-columns: 1fr; gap: var(--s-16); margin: 0; }
  .barre-chiffres .chiffre-valeur { font-size: var(--fs-36); }
  .barre-nom { font-size: var(--fs-22); line-height: var(--lh-1_25); white-space: normal; letter-spacing: var(--ls-n0_6); }
  .barre-info { display: none; }
  .barre-achat .achat { display: flex; }
  .barre-achat .button-purchase { width: 100%; margin-top: var(--s-8); }
  .page.avec-colonne { display: grid; grid-template-columns: minmax(0, 1fr) 23.75rem; column-gap: var(--s-48); align-items: start; }
  .page.avec-colonne .fil-ariane { grid-column: 1 / -1; }
  .page.avec-colonne main { max-width: 48rem; margin: 0; }
}
@media (min-width: 961px) {
  .page:not(.avec-colonne) main { max-width: none; }
  .page:not(.avec-colonne) main > :not(.titre-page) { max-width: 46rem; }
  body[data-type-page="accueil"] .page:not(.avec-colonne) main > :not(.titre-page) { max-width: none; }
}
.grille-produits .produit .chiffre-valeur { font-size: var(--fs-25); }

/* ---------- Images de produits (mission 20261015-images-produits) ---------- */
.image-produit { margin: 0; }
.image-produit img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--c-white); border-radius: var(--r-8); }
.image-credit { margin-top: var(--s-4); font-size: var(--fs-13); color: var(--ink); opacity: .75; }
.titre-page .ouverture-illu.ouverture-produit { grid-column: 1 / -1; grid-row: 3; flex-direction: column; gap: var(--s-12); }
.titre-page .ouverture-photo { max-width: 22rem; }
.product-visual .carte-image img { aspect-ratio: 4 / 3; border-radius: var(--r-8) var(--r-8) 0 0; }
.produit .image-produit { max-width: 22rem; margin: var(--s-8) 0; }
@media (min-width: 961px) {
  .titre-page .ouverture-illu.ouverture-produit { grid-column: auto; grid-row: auto; flex: 0 1 22rem; }
}

/* ---------- Zones tactiles 44 × 44 px (mission 20261016-a11y), contrôle : 03-outils/zones-tactiles.mjs ----------
   Chaque lien, bouton ou libellé cliquable hors prose a une vraie boîte d'au moins 44 px (le contrôle mesure la boîte, pas un
   pseudo-élément). Seuls les liens en ligne dans une phrase de prose sont exemptés (WCAG 2.5.8 « inline »). Écrans étroits et
   tactiles seulement : la mise en page large ne change pas. */
@media (max-width: 960px), (pointer: coarse) {
  .brand, .footer-top a, .footer-bottom a, .footer-back, .affiliation-note a,
  .fil-ariane a, .sommaire a, .liens-facettes a, .liens-suite a, .liste-marques a, .a-lire-aussi a,
  .tableau-classement th a, .produit-nom a, .guide-card a, .article-card a, .product-info h3 a, .guide-card h3 a,
  .lien-fleche, .text-link, .hero-secondary, .comparison-link, .product-test,
  .prenez-carte a, p[data-gabarit]:not(.source):not(.source-date) > a, .chooser label, .faq a, .chooser-result a, .chooser-liens a {
    display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; box-sizing: border-box;
  }
  .footer-top > div:not(:first-child) > a, .footer-top .footer-back, .produit-nom a, .chooser label { display: flex; }
  .footer-top > div:not(:first-child) > a { margin-top: 0; min-height: 44px; }
  .liens-suite li, .liens-facettes li, .liste-marques li, .sommaire li { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
  .a-lire-aussi li { margin: 0; }
  .fil-ariane { padding-top: 0; }
  .fil-ariane ol { gap: 0 var(--s-8); }
  .fil-ariane li[data-sans-lien], .fil-ariane li[aria-current] { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Mouvement réduit : coupe toute animation, transition et défilement lissé du site, pseudo-éléments compris, feuille cardiochezsoi.css comprise. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}