/* ==========================================================================
   Le Meilleur Produit — Feuille de style principale
   Dépend de palette.css (chargé avant). Aucune couleur en dur ici.
   Mobile first.
   ========================================================================== */

/* --- 1. Base -------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: var(--echelle-m);
  line-height: 1.6;
  color: var(--texte-principal);
  background-color: var(--fond-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 var(--espace-3);
}

h1 { font-size: var(--echelle-2xl); }
h2 { font-size: var(--echelle-xl); }
h3 { font-size: var(--echelle-l); }

p { margin: 0 0 var(--espace-4); }

a {
  color: var(--lien);
  text-underline-offset: 0.2em;
}
a:hover { color: var(--lien-survol); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- 2. Utilitaires ------------------------------------------------------- */
.contenu {
  width: 100%;
  max-width: var(--largeur-contenu);
  margin-inline: auto;
  padding-inline: var(--espace-4);
}

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--fond-carte);
  color: var(--texte-principal);
  padding: var(--espace-3);
  z-index: 10;
}
.evitement:focus { left: var(--espace-3); top: var(--espace-3); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.bouton {
  display: inline-block;
  padding: var(--espace-3) var(--espace-5);
  border: 1px solid var(--couleur-accent-500);
  border-radius: var(--rayon-s);
  background-color: var(--couleur-accent-500);
  color: var(--texte-inverse);
  font-size: var(--echelle-s);
  font-weight: 500;
  text-decoration: none;
}
.bouton:hover {
  background-color: var(--couleur-accent-700);
  border-color: var(--couleur-accent-700);
  color: var(--texte-inverse);
}
.bouton--secondaire {
  background-color: transparent;
  color: var(--lien);
  border-color: var(--bordure);
}
.bouton--secondaire:hover {
  background-color: var(--couleur-accent-100);
  border-color: var(--couleur-accent-300);
  color: var(--lien-survol);
}

/* --- 3. En-tête et navigation --------------------------------------------- */
.entete {
  border-bottom: 1px solid var(--bordure);
  background-color: var(--fond-page);
}

.entete__contenu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-3);
  padding-block: var(--espace-4);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-3);
  font-size: var(--echelle-l);
  font-weight: 600;
  color: var(--texte-principal);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.logo__marque {
  width: 2rem;
  height: 2rem;
  flex: none;
}
.logo__accent { color: var(--couleur-accent-500); }

/* Mobile et tablette (mobile first) : menu replié derrière un bouton, ouvert en
   panneau par l'API Popover native — Échap et un clic à côté le referment. */
.entete__bouton,
.nav__fermer {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-2);
  padding: var(--espace-2) var(--espace-3);
  font: inherit;
  font-size: var(--echelle-s);
  color: var(--texte-principal);
  background: none;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-m);
  cursor: pointer;
}
.entete__bouton:hover,
.nav__fermer:hover { background-color: var(--couleur-accent-100); }

.entete__icone {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Navigateur sans popover : pas de bouton, le menu reste affiché en ligne. */
@supports not selector(:popover-open) {
  .entete__bouton, .nav__fermer { display: none; }
}

.nav__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--echelle-s);
}
.nav__liste a {
  color: var(--texte-secondaire);
  text-decoration: none;
}
.nav__liste a:hover,
.nav__liste [aria-current="page"] {
  color: var(--texte-principal);
}

/* Panneau mobile et tablette, animé sans JavaScript.
   La mise en forme est portée par .nav[popover] et non par :popover-open, pour que le
   panneau garde sa forme pendant l'animation de fermeture. @starting-style donne l'état
   de départ à l'ouverture ; transition-behavior: allow-discrete maintient le panneau
   affiché (display, overlay) le temps de la fermeture. Un navigateur qui ne connaît pas
   ces propriétés ouvre et ferme le menu sans animation. La transition déclarée sur l'état
   ouvert s'applique à l'ouverture, celle de l'état fermé à la fermeture (plus brève). */
@supports selector(:popover-open) {
  @media (width < 64rem) {
    html:has(.nav:popover-open) { overflow: hidden; }  /* la page ne défile plus derrière */

    .nav[popover] {
      inset: 0 0 auto 0;
      width: 100%;
      max-height: 100dvh;
      margin: 0;
      padding: var(--espace-4);
      overflow-y: auto;
      color: var(--texte-principal);
      background-color: var(--fond-page);
      border: 0;
      border-bottom: 1px solid var(--bordure);
      box-shadow: 0 8px 24px rgba(22, 24, 28, 0.18);

      transform: translateY(-100%);
      transition:
        transform 220ms cubic-bezier(0.4, 0, 1, 1),
        overlay 220ms allow-discrete,
        display 220ms allow-discrete;
    }
    .nav:popover-open {
      transform: none;
      transition-duration: 380ms;
      transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    }
    @starting-style {
      .nav:popover-open { transform: translateY(-100%); }
    }

    .nav::backdrop {
      background-color: rgba(22, 24, 28, 0);
      transition:
        background-color 220ms ease-in,
        overlay 220ms allow-discrete,
        display 220ms allow-discrete;
    }
    .nav:popover-open::backdrop {
      background-color: rgba(22, 24, 28, 0.45);
      transition-duration: 380ms;
    }
    @starting-style {
      .nav:popover-open::backdrop { background-color: rgba(22, 24, 28, 0); }
    }

    .nav__fermer {
      display: flex;
      width: fit-content;
      margin-left: auto;
    }
    .nav__fermer .entete__icone {
      transform: rotate(-90deg);
      transition: transform 220ms ease-in;
    }
    .nav:popover-open .nav__fermer .entete__icone {
      transform: none;
      transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1) 80ms;
    }

    .nav[popover] .nav__liste {
      flex-direction: column;
      gap: 0;
      margin-top: var(--espace-3);
      font-size: var(--echelle-m);
    }
    .nav[popover] .nav__liste a {
      display: block;
      padding: var(--espace-3) var(--espace-2);
      border-bottom: 1px solid var(--bordure);
    }
    .nav[popover] [aria-current="page"] { font-weight: 600; }

    /* Entrées du menu : apparition décalée, de haut en bas. */
    .nav[popover] .nav__liste li {
      opacity: 0;
      transform: translateY(-0.5rem);
      transition: opacity 150ms ease-in, transform 150ms ease-in;
    }
    .nav:popover-open .nav__liste li {
      opacity: 1;
      transform: none;
      transition: opacity 300ms ease-out, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    .nav:popover-open .nav__liste li:nth-child(1) { transition-delay: 90ms; }
    .nav:popover-open .nav__liste li:nth-child(2) { transition-delay: 125ms; }
    .nav:popover-open .nav__liste li:nth-child(3) { transition-delay: 160ms; }
    .nav:popover-open .nav__liste li:nth-child(4) { transition-delay: 195ms; }
    .nav:popover-open .nav__liste li:nth-child(n + 5) { transition-delay: 230ms; }
    @starting-style {
      .nav:popover-open .nav__liste li { opacity: 0; transform: translateY(-0.5rem); }
    }

    /* Mouvement réduit : simple fondu, sans déplacement. */
    @media (prefers-reduced-motion: reduce) {
      .nav[popover] { opacity: 0; transition-property: opacity, overlay, display; }
      .nav:popover-open { opacity: 1; }
      @starting-style {
        .nav:popover-open { opacity: 0; }
      }
      .nav[popover],
      .nav:popover-open,
      .nav[popover] .nav__liste li,
      .nav:popover-open .nav__liste li,
      .nav__fermer .entete__icone,
      .nav:popover-open .nav__fermer .entete__icone {
        transform: none;
        transition-delay: 0s;
      }
      @starting-style {
        .nav:popover-open,
        .nav:popover-open .nav__liste li { transform: none; }
      }
    }
  }
}

/* Bureau : menu toujours affiché, en-tête collé en haut au défilement. */
@media (min-width: 64rem) {
  html { scroll-padding-top: 5.5rem; }  /* les ancres ne passent pas sous l'en-tête */

  .entete {
    position: sticky;
    top: 0;
    z-index: 5;
  }

  .entete__bouton,
  .nav__fermer { display: none; }

  .nav[popover] {
    display: block;
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    color: inherit;
    background: none;
    border: 0;
  }
}

/* --- 4. Bandeau d'introduction -------------------------------------------- */
.bandeau { padding-block: var(--espace-7); }

.bandeau__accroche {
  font-size: var(--echelle-l);
  color: var(--texte-secondaire);
  max-width: 42rem;
}

.bandeau__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-3);
  margin-top: var(--espace-5);
}

/* Bloc de chiffres clés — retiré de l'accueil, conservé pour réemploi éventuel. */
.bandeau__preuve {
  margin: var(--espace-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--espace-4);
  border-top: 1px solid var(--bordure);
  padding-top: var(--espace-5);
}
.bandeau__preuve div { margin: 0; }
.bandeau__preuve dt {
  font-size: var(--echelle-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texte-secondaire);
}
.bandeau__preuve dd {
  margin: var(--espace-1) 0 0;
  font-size: var(--echelle-l);
  font-weight: 600;
}

/* --- 5. Sections ---------------------------------------------------------- */
.section { padding-block: var(--espace-7); }
.section--alt {
  background-color: var(--fond-alt);
  border-block: 1px solid var(--bordure);
}

.section__intro {
  max-width: 44rem;
  color: var(--texte-secondaire);
}

.section__titre { margin-bottom: var(--espace-2); }

/* --- 6. Grille de comparatifs --------------------------------------------- */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--espace-5);
  margin-top: var(--espace-6);
  padding: 0;
  list-style: none;
}

.carte {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  background-color: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-m);
  box-shadow: var(--ombre-carte);
  overflow: hidden;
}

.carte__illustration { margin: 0; }
.carte__illustration img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.carte__corps {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  padding: var(--espace-4);
  flex: 1;
}

.carte__categorie {
  font-size: var(--echelle-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texte-secondaire);
}

.carte__titre {
  font-size: var(--echelle-m);
  margin: 0;
}
.carte__titre a {
  color: var(--texte-principal);
  text-decoration: none;
}
.carte__titre a:hover { color: var(--lien); }

.carte__resume {
  font-size: var(--echelle-s);
  color: var(--texte-secondaire);
  margin: 0;
}

.carte__meta {
  margin-top: auto;
  padding-top: var(--espace-3);
  font-size: var(--echelle-xs);
  color: var(--texte-secondaire);
  display: flex;
  justify-content: space-between;
  gap: var(--espace-2);
  border-top: 1px solid var(--bordure);
}

.note { color: var(--couleur-note); font-weight: 600; }

/* --- 7. Tableau comparatif ------------------------------------------------ */
/* Le tableau tient dans la largeur de la page : aucune largeur minimale imposée. Quand il ne
   tient plus, chaque ligne devient une fiche où l'intitulé de colonne (data-label, posé par le
   générateur) précède la valeur. Le seuil dépend du nombre de colonnes (classe posée par le
   générateur ; tableau--serre au-delà de huit colonnes) et se mesure sur le conteneur. Les requêtes de conteneur ne font qu'allumer les
   variables --fiche-* : les règles des fiches sont écrites une seule fois, en repli de var().
   Le défilement horizontal ne reste qu'un filet de sécurité. */
.tableau-defilant {
  container: tableau / inline-size;
  position: relative;
  overflow-x: auto;
  margin-top: var(--espace-6);
}

@container tableau (width < 26rem) {
  .tableau { --fiche: block; --fiche-grille: grid; --fiche-absolu: absolute; --fiche-masque: inset(50%); --fiche-nul: 0; --fiche-espace: var(--espace-3); --fiche-transparent: transparent; --fiche-fond-titre: var(--fond-alt); --fiche-bord: 1px solid var(--bordure); --fiche-un: 1px; --fiche-cache: hidden; --fiche-rayon: var(--rayon-m) var(--rayon-m); }
}
@container tableau (width < 36rem) {
  .tableau:not(.tableau--etroit) { --fiche: block; --fiche-grille: grid; --fiche-absolu: absolute; --fiche-masque: inset(50%); --fiche-nul: 0; --fiche-espace: var(--espace-3); --fiche-transparent: transparent; --fiche-fond-titre: var(--fond-alt); --fiche-bord: 1px solid var(--bordure); --fiche-un: 1px; --fiche-cache: hidden; --fiche-rayon: var(--rayon-m) var(--rayon-m); }
}
@container tableau (width < 48rem) {
  .tableau:is(.tableau--large, .tableau--tres-large) { --fiche: block; --fiche-grille: grid; --fiche-absolu: absolute; --fiche-masque: inset(50%); --fiche-nul: 0; --fiche-espace: var(--espace-3); --fiche-transparent: transparent; --fiche-fond-titre: var(--fond-alt); --fiche-bord: 1px solid var(--bordure); --fiche-un: 1px; --fiche-cache: hidden; --fiche-rayon: var(--rayon-m) var(--rayon-m); }
}
@container tableau (width < 58rem) {
  .tableau--tres-large { --fiche: block; --fiche-grille: grid; --fiche-absolu: absolute; --fiche-masque: inset(50%); --fiche-nul: 0; --fiche-espace: var(--espace-3); --fiche-transparent: transparent; --fiche-fond-titre: var(--fond-alt); --fiche-bord: 1px solid var(--bordure); --fiche-un: 1px; --fiche-cache: hidden; --fiche-rayon: var(--rayon-m) var(--rayon-m); }
}
@container tableau (width < 62rem) {
  .tableau--serre { --fiche: block; --fiche-grille: grid; --fiche-absolu: absolute; --fiche-masque: inset(50%); --fiche-nul: 0; --fiche-espace: var(--espace-3); --fiche-transparent: transparent; --fiche-fond-titre: var(--fond-alt); --fiche-bord: 1px solid var(--bordure); --fiche-un: 1px; --fiche-cache: hidden; --fiche-rayon: var(--rayon-m) var(--rayon-m); }
}

.tableau {
  display: var(--fiche, table);
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--bordure);
  border-width: var(--fiche-nul, 1px);
  border-radius: var(--rayon-m);
  font-size: var(--echelle-s);
  background-color: var(--fiche-transparent, var(--fond-carte));
  overflow-wrap: break-word;
  hyphens: auto;
  hyphenate-limit-chars: 12 5 5;
}

.tableau caption {
  display: var(--fiche, table-caption);
  text-align: left;
  padding: var(--espace-4);
  color: var(--texte-secondaire);
  font-size: var(--echelle-xs);
  border: 1px solid var(--bordure);
  border-bottom: var(--fiche-bord, 0);
  border-radius: var(--rayon-m) var(--rayon-m) var(--fiche-rayon, 0 0);
  background-color: var(--fond-carte);
}
.tableau:has(caption) { border-top-left-radius: 0; border-top-right-radius: 0; }

.tableau thead {
  display: var(--fiche, table-header-group);
  position: var(--fiche-absolu, static);
  width: var(--fiche-un, auto);
  height: var(--fiche-un, auto);
  overflow: var(--fiche-cache, visible);
  clip-path: var(--fiche-masque, none);
}

.tableau tbody { display: var(--fiche, table-row-group); }

.tableau tr { display: var(--fiche, table-row); }
.tableau tbody tr {
  margin-top: var(--fiche-espace, 0);
  border: var(--fiche-bord, 0);
  border-radius: var(--rayon-m);
  background-color: var(--fond-carte);
  overflow: hidden;
}

.tableau th,
.tableau td {
  display: var(--fiche, table-cell);
  padding: var(--espace-3) var(--espace-4);
  text-align: left;
  border-bottom: 1px solid var(--bordure);
  vertical-align: top;
}

/* Neuf colonnes et plus : marges resserrées pour tenir dans la largeur de la page */
.tableau--serre :is(th, td) { padding-inline: var(--espace-2); }
.tableau--serre :is(th, td):first-child { padding-left: var(--espace-4); }
.tableau--serre thead th { letter-spacing: 0.02em; }

.tableau thead th {
  font-size: var(--echelle-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texte-secondaire);
  font-weight: 600;
}

.tableau tbody th {
  font-weight: 600;
  background-color: var(--fiche-fond-titre, transparent);
}
.tableau tbody td:last-child { border-bottom-width: var(--fiche-nul, 1px); }
.tableau tbody tr:last-child :is(th, td) { border-bottom-width: var(--fiche-un, 0); }
.tableau tbody tr:last-child td:last-child { border-bottom-width: 0; }

/* Fiche : intitulé de colonne à gauche, valeur à droite */
.tableau tbody td {
  display: var(--fiche-grille, table-cell);
  grid-template-columns: minmax(6rem, 2fr) 3fr;
  gap: var(--espace-3);
}
.tableau tbody td::before {
  content: attr(data-label);
  display: var(--fiche, none);
  color: var(--texte-secondaire);
  font-size: var(--echelle-xs);
  font-weight: 600;
}

.verdict--fort { color: var(--couleur-succes); font-weight: 600; }
.verdict--reserve { color: var(--couleur-alerte); font-weight: 600; }

/* --- 8. Méthode (liste ordonnée) ------------------------------------------ */
.methode {
  margin-top: var(--espace-6);
  padding: 0;
  list-style: none;
  counter-reset: etape;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--espace-5);
}
.methode li { counter-increment: etape; }
.methode h3::before {
  content: counter(etape) ".";
  color: var(--couleur-accent-500);
  margin-right: var(--espace-2);
}
.methode p {
  font-size: var(--echelle-s);
  color: var(--texte-secondaire);
  margin: 0;
}

/* --- 9. Questions fréquentes (sans JavaScript) ---------------------------- */
.faq { margin-top: var(--espace-6); }
.faq details {
  border-bottom: 1px solid var(--bordure);
  padding-block: var(--espace-3);
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  padding-block: var(--espace-2);
}
.faq p {
  margin: var(--espace-2) 0 0;
  color: var(--texte-secondaire);
  font-size: var(--echelle-s);
  max-width: 48rem;
}

/* --- 10. Pied de page ----------------------------------------------------- */
.pied {
  border-top: 1px solid var(--bordure);
  padding-block: var(--espace-6);
  font-size: var(--echelle-s);
  color: var(--texte-secondaire);
}
.pied__colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--espace-5);
}
.pied h2 {
  font-size: var(--echelle-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texte-principal);
}
.pied ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--espace-2);
}
.pied a { color: var(--texte-secondaire); text-decoration: none; }
.pied a:hover { color: var(--texte-principal); }
.pied__mentions {
  margin: var(--espace-6) 0 0;
  padding-top: var(--espace-4);
  border-top: 1px solid var(--bordure);
  font-size: var(--echelle-xs);
}

/* --- 11. Écrans larges ---------------------------------------------------- */
@media (min-width: 48rem) {
  .bandeau { padding-block: var(--espace-8); }
  h1 { font-size: 2.75rem; }
}

/* --- 12. Préférence de mouvement réduit ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --- 13. Impression ------------------------------------------------------- */
@media print {
  .entete, .pied, .bandeau__actions, .carte__pictogramme, .pictogramme { display: none; }
  body { color: var(--impression-texte); background: var(--impression-fond); }
}

/* --- 14. Fil d'Ariane ----------------------------------------------------- */
.ariane {
  padding-top: var(--espace-5);
  font-size: var(--echelle-xs);
  color: var(--texte-secondaire);
}
.ariane ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ariane li + li::before {
  content: "/";
  margin-right: var(--espace-2);
  color: var(--bordure);
}
.ariane a { color: var(--texte-secondaire); text-decoration: none; }
.ariane a:hover { color: var(--texte-principal); }
.ariane [aria-current="page"] { color: var(--texte-principal); }

/* --- 15. En-tête de page intérieure --------------------------------------- */
.bandeau--page { padding-block: var(--espace-6) var(--espace-6); }
.bandeau--page h1 { max-width: 30ch; }
.bandeau__date {
  display: block;
  margin-top: var(--espace-3);
  font-size: var(--echelle-xs);
  color: var(--texte-secondaire);
}

/* --- 16. Corps rédactionnel -----------------------------------------------
   Sur un conteneur .contenu, la largeur de lecture est appliquée aux enfants
   afin que le texte reste aligné à gauche avec les autres sections.          */
.article { max-width: 44rem; }
.contenu.article { max-width: var(--largeur-contenu); }
.contenu.article > * { max-width: 44rem; }
.article > h2 { margin-top: var(--espace-6); }
.article > h3 { margin-top: var(--espace-5); }
.article ul,
.article ol { margin: 0 0 var(--espace-4); padding-left: var(--espace-5); }
.article li { margin-bottom: var(--espace-2); }
.article :is(h2, h3) + p { margin-top: 0; }

/* --- 17. Encadré ---------------------------------------------------------- */
.encadre {
  margin: var(--espace-5) 0;
  padding: var(--espace-4) var(--espace-5);
  background-color: var(--couleur-accent-100);
  border-left: 3px solid var(--couleur-accent-500);
  border-radius: 0 var(--rayon-s) var(--rayon-s) 0;
}
.encadre > :last-child { margin-bottom: 0; }

/* Contenu de démonstration : à retirer avec le drapeau DEMONSTRATION du générateur. */
.encadre--demo {
  background-color: transparent;
  border-left-color: var(--couleur-alerte);
  border: 1px dashed var(--bordure);
  border-left: 3px solid var(--couleur-alerte);
}
.encadre--demo h3 { color: var(--couleur-alerte); }
.encadre h2,
.encadre h3 { margin-top: 0; font-size: var(--echelle-m); }

/* --- 18. Podium (produits recommandés) ------------------------------------ */
.podium {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--espace-5);
  margin: var(--espace-6) 0 0;
  padding: 0;
  list-style: none;
}
.podium .carte__corps { gap: var(--espace-3); }
.etiquette {
  display: inline-block;
  align-self: flex-start;
  padding: 2px var(--espace-2);
  border: 1px solid var(--couleur-accent-300);
  border-radius: var(--rayon-s);
  background-color: var(--couleur-accent-100);
  color: var(--couleur-accent-700);
  font-size: var(--echelle-xs);
  font-weight: 600;
}
.podium ul {
  margin: 0;
  padding-left: var(--espace-5);
  font-size: var(--echelle-s);
  color: var(--texte-secondaire);
}
.podium .carte__action { margin: 0; }
.podium__mention {
  margin: var(--espace-5) 0 0;
  max-width: 48rem;
  font-size: var(--echelle-xs);
  color: var(--texte-secondaire);
}

/* --- 19. Listes de caractéristiques --------------------------------------- */
.caracteristiques {
  margin: var(--espace-5) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--espace-4);
  font-size: var(--echelle-s);
}
.caracteristiques div {
  padding-top: var(--espace-3);
  border-top: 1px solid var(--bordure);
}
.caracteristiques dt { color: var(--texte-secondaire); }
.caracteristiques dd { margin: var(--espace-1) 0 0; font-weight: 600; }
.caracteristiques__note {
  margin: var(--espace-6) 0 0;
  font-size: var(--echelle-xs);
  color: var(--texte-secondaire);
}

/* --- 20. Illustration pleine largeur -------------------------------------- */
.illustration { margin: var(--espace-6) 0 0; }
.illustration img {
  width: 100%;
  max-height: 24rem;
  object-fit: cover;
  border-radius: var(--rayon-m);
  border: 1px solid var(--bordure);
}
.illustration figcaption {
  margin-top: var(--espace-2);
  font-size: var(--echelle-xs);
  color: var(--texte-secondaire);
}

/* --- 21. Formulaire ------------------------------------------------------- */
.formulaire {
  max-width: 36rem;
  margin-top: var(--espace-5);
  display: grid;
  gap: var(--espace-4);
}
.formulaire fieldset {
  display: grid;
  gap: var(--espace-4);
  margin: 0;
  padding: 0;
  border: 0;
}
.formulaire legend {
  padding: 0;
  font-weight: 600;
  margin-bottom: var(--espace-2);
}
.champ { display: grid; gap: var(--espace-2); }
.champ label { font-size: var(--echelle-s); font-weight: 500; }
.champ .aide { font-size: var(--echelle-xs); color: var(--texte-secondaire); margin: 0; }
.champ :is(input, select, textarea) {
  width: 100%;
  padding: var(--espace-3);
  font: inherit;
  font-size: var(--echelle-s);
  color: var(--texte-principal);
  background-color: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-s);
}
.champ textarea { min-height: 9rem; resize: vertical; }
.champ--choix { grid-template-columns: auto 1fr; align-items: start; gap: var(--espace-3); }
.champ--choix label { font-weight: 400; }
.formulaire button {
  justify-self: start;
  padding: var(--espace-3) var(--espace-5);
  font: inherit;
  font-size: var(--echelle-s);
  font-weight: 500;
  color: var(--texte-inverse);
  background-color: var(--couleur-accent-500);
  border: 1px solid var(--couleur-accent-500);
  border-radius: var(--rayon-s);
  cursor: pointer;
}
.formulaire button:hover {
  background-color: var(--couleur-accent-700);
  border-color: var(--couleur-accent-700);
}

/* --- 21 bis. Piège à robots (masqué pour tous les visiteurs) --------------- */
.piege { display: none; }

/* --- 21 ter. Pixel de secours Matomo (repli sans JavaScript) --------------- */
.matomo-pixel { border: 0; }

/* --- 22. Sommaire --------------------------------------------------------- */
.sommaire {
  margin-top: var(--espace-5);
  padding: var(--espace-4) var(--espace-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-m);
  background-color: var(--fond-alt);
  max-width: 30rem;
}
.sommaire h2 {
  font-size: var(--echelle-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texte-secondaire);
  margin-bottom: var(--espace-3);
}
.sommaire ol {
  margin: 0;
  padding-left: var(--espace-5);
  font-size: var(--echelle-s);
  display: grid;
  gap: var(--espace-2);
}

/* --- 23. Offre promotionnelle -------------------------------------------- */
.offre {
  margin-top: var(--espace-5);
  padding: var(--espace-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-m);
  background-color: var(--fond-carte);
  max-width: 34rem;
}

.offre__prix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--espace-3);
  margin: 0;
}
.offre__montant {
  font-size: var(--echelle-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.offre__reference {
  font-size: var(--echelle-s);
  color: var(--texte-secondaire);
}
.offre__releve {
  margin: var(--espace-2) 0 0;
  font-size: var(--echelle-xs);
  color: var(--texte-secondaire);
}

.offre__action { margin: var(--espace-4) 0 0; }

.offre__mention {
  margin: var(--espace-4) 0 0;
  padding-top: var(--espace-3);
  border-top: 1px solid var(--bordure);
  font-size: var(--echelle-xs);
  color: var(--texte-secondaire);
}

/* --- 24. Avantages et inconvénients -------------------------------------- */
.balance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--espace-5);
  margin-top: var(--espace-5);
}

.balance section { margin: 0; }

.balance h3 {
  font-size: var(--echelle-m);
  margin-bottom: var(--espace-3);
  padding-bottom: var(--espace-2);
  border-bottom: 1px solid var(--bordure);
}
.balance__positif h3 { color: var(--couleur-succes); }
.balance__negatif h3 { color: var(--couleur-erreur); }

.balance ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--espace-3);
  font-size: var(--echelle-s);
}
.balance li { padding-left: var(--espace-5); position: relative; }
.balance li::before {
  position: absolute;
  left: 0;
  font-weight: 700;
}
.balance__positif li::before { content: "+"; color: var(--couleur-succes); }
.balance__negatif li::before { content: "−"; color: var(--couleur-erreur); }

/* --- 25. Cartes de promotion --------------------------------------------- */
.carte__promo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--espace-2);
  margin: 0;
}
.carte__promo strong { font-size: var(--echelle-l); }
.carte__promo span { font-size: var(--echelle-xs); color: var(--texte-secondaire); }

/* Alignement d'une rangée de cartes : chaque carte partage les six lignes de la grille
   (pictogramme, catégorie, titre, résumé, prix, relevé) grâce à subgrid, si bien que les
   prix d'une même rangée s'alignent quelle que soit la longueur du titre ou du résumé.
   Sans subgrid, les cartes gardent leur mise en page flex habituelle. */
@supports (grid-template-rows: subgrid) {
  .grille--promotions { row-gap: 0; margin-bottom: calc(-1 * var(--espace-5)); }
  .grille--promotions > li,
  .grille--promotions .carte,
  .grille--promotions .carte__corps {
    display: grid;
    grid-template-rows: subgrid;
  }
  .grille--promotions > li {
    grid-row: span 6;
    row-gap: 0;
    margin-bottom: var(--espace-5);
  }
  .grille--promotions .carte { grid-row: 1 / -1; row-gap: 0; height: auto; }
  .grille--promotions .carte__corps { grid-row: 2 / -1; }
  .grille--promotions .carte__promo { align-self: start; }
}

/* --- 26. Pictogrammes de catégorie ----------------------------------------
   Dessins au trait propres au site (_outils/pictogrammes.py), appelés depuis
   un sprite inséré en tête de page. Décoratifs : la catégorie est toujours
   écrite en toutes lettres à côté.                                          */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.pictogramme {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--trait-pictogramme);
}

.pictogramme--tuile {
  width: 2.5rem;
  height: 2.5rem;
  padding: var(--espace-2);
  border-radius: var(--rayon-m);
  background-color: var(--fond-pictogramme);
}

/* Bandeau des cartes sans photo : motif agrandi en filigrane + pictogramme. */
.carte__pictogramme {
  position: relative;
  display: flex;
  align-items: center;
  height: 5.5rem;
  padding-inline: var(--espace-4);
  overflow: hidden;
  background-color: var(--fond-pictogramme);
  border-bottom: 1px solid var(--bordure);
}
.carte__pictogramme-motif {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
}
.carte__pictogramme-fond {
  position: absolute;
  right: -1rem;
  bottom: -1.75rem;
  width: 7.5rem;
  height: 7.5rem;
  opacity: 0.14;
  transform: rotate(-12deg);
}

/* Sur-titre d'en-tête et titres d'univers précédés d'un pictogramme. */
.categorie-illustree,
.titre-illustre {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
}
.categorie-illustree { margin-bottom: var(--espace-3); }

/* Pastille de catégorie posée sur la photo d'une carte. */
.carte__illustration { position: relative; }
.carte__pastille {
  position: absolute;
  left: var(--espace-3);
  bottom: var(--espace-3);
  box-shadow: var(--ombre-carte);
}

/* Grille de quatre cartes (dernières promotions de l'accueil) : 1, 2 puis 4 colonnes,
   pour ne jamais laisser une carte seule sur une ligne. */
@media (min-width: 40rem) {
  .grille--quatre { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .grille--quatre { grid-template-columns: repeat(4, 1fr); }
}