/* Polices hébergées avec le module (aucun appel à Google Fonts). Roboto : Apache 2.0, Roboto Condensed : OFL. */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/roboto-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/roboto-condensed-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

  :root {
    --bg: #ffffff;
    --surface: #f3f4f7;
    --line: #dde0e6;
    --text: #12141a;
    --muted: #5f6672;
    --brand: #5e71a1;
    --de: #5e71a1;
    --fr: #ffe303;
    --tie: #fa8c00;
    --edge: rgba(18, 20, 26, .35);
    --focus: #12141a;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #12141a; --surface: #1c1f27; --line: #33353d; --text: #f2f4f7; --muted: #9aa3b2;
      --edge: rgba(255, 255, 255, .3); --focus: #f2f4f7;
    }
  }
  :root[data-theme="dark"] {
    --bg: #12141a; --surface: #1c1f27; --line: #33353d; --text: #f2f4f7; --muted: #9aa3b2;
    --edge: rgba(255, 255, 255, .3); --focus: #f2f4f7;
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body { margin: 0; background: var(--bg); color: var(--text); font: 400 1rem/1.5 "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; }
  h1, h2, .stat .v { font-family: "Roboto Condensed", "Roboto", sans-serif; }
  /* Hauteur identique dans tous les états : le module remplit l'iframe, seul le panneau défile. */
  .module { max-width: 720px; height: 100%; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
  h1 { font-size: 1.4rem; font-weight: 700; line-height: 1.1; letter-spacing: -.3px; margin: 0; }
  .lead { color: var(--muted); font-size: .9rem; line-height: 1.35; margin: 4px 0 0; }
  label { display: block; font-weight: 500; font-size: .9rem; margin-bottom: 4px; }
  input[type="search"] {
    width: 100%; font: inherit; color: var(--text); background: var(--bg);
    border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-height: 44px;
  }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .count { color: var(--muted); font-size: .85rem; margin: 0; }
  .count:empty { display: none; }
  .panel { flex: 1; min-height: 0; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
  .results { list-style: none; margin: 0; padding: 0; }
  .results[hidden] { display: none; }
  .results li + li { border-top: 1px solid var(--line); }
  .results button {
    display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; font: inherit; color: inherit;
    background: transparent; border: 0; padding: 10px 12px; cursor: pointer; min-height: 48px;
  }
  .results button:hover, .results button[aria-current="true"] { background: var(--surface); }
  .dot { flex: none; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--edge); }
  .dot.de { background: var(--de); } .dot.fr { background: var(--fr); } .dot.tie { background: var(--tie); }
  .r-name { font-weight: 500; display: block; }
  .r-sub { color: var(--muted); font-size: .85rem; display: block; }
  .empty { padding: 14px 12px; color: var(--muted); }
  .results .hint { padding: 32px 20px; text-align: center; color: var(--muted); }
  .results .more { padding: 10px 12px; font-size: .85rem; color: var(--muted); text-align: center; }

  .fiche[hidden] { display: none; }
  .back { position: sticky; top: 0; z-index: 1; display: block; width: 100%; text-align: left; font: inherit; font-weight: 700; color: var(--text);
    background: var(--surface); border: 0; border-bottom: 1px solid var(--line); padding: 10px 16px; min-height: 44px; cursor: pointer; }
  .cols { padding: 14px 16px 16px; }
  .head { display: flex; gap: 14px; align-items: center; }
  .photo { flex: none; display: block; width: 112px; height: 112px; object-fit: cover; border-radius: 10px; background: var(--surface); }
  .titles { min-width: 0; }
  @media (min-width: 560px) { .photo { width: 150px; height: 112px; } }
  .fiche h2 { font-size: 1.45rem; font-weight: 700; line-height: 1.1; letter-spacing: -.3px; margin: 0; }
  .where { color: var(--muted); margin: 4px 0 0; font-size: .95rem; }
  .warn { background: var(--surface); border-left: 4px solid var(--brand); border-radius: 4px; padding: 10px 12px; font-size: .85rem; margin: 14px 0; }
  h3 { font-size: .75rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
  /* Intitulé sur une seule ligne : la taille et l'espacement des lettres suivent la largeur de l'écran. */
  h3.fit { white-space: nowrap; font-size: clamp(.6rem, 3.5vw, .75rem); letter-spacing: clamp(.4px, .55vw, 2px); }
  .total { font-size: 1.05rem; margin: 0 0 8px; }
  .bar { display: flex; height: 28px; border-radius: 6px; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px var(--edge); }
  .bar span { display: block; height: 100%; }
  .bar .de { background: var(--de); } .bar .fr { background: var(--fr); }
  .legend { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
  .legend li { display: flex; gap: 8px; align-items: baseline; }
  .legend b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .verdict { display: flex; gap: 8px; align-items: baseline; font-weight: 700; margin: 12px 0 0; }
  .nw { white-space: nowrap; }
  .module { hyphens: manual; overflow-wrap: break-word; }
  .flag { display: inline-block; vertical-align: -3px; border-radius: 2px; box-shadow: 0 0 0 1px var(--edge); }
  .note { color: var(--muted); font-size: .85rem; margin: 8px 0 0; }
  .stats { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
  .stat { background: var(--surface); border-radius: 8px; padding: 10px 12px; }
  .stat .k { color: var(--muted); font-size: .8rem; display: block; }
  .stat .v { font-size: 1.25rem; font-weight: 700; letter-spacing: -.2px; }
  .stat .d { color: var(--muted); font-size: .8rem; display: block; }
  .src { color: var(--muted); font-size: .8rem; margin-top: 18px; }
  /* Desktop : fiche sur deux colonnes et liste sur deux colonnes, pour tout voir sans défiler. */
  @media (min-width: 600px) {
    .results { display: grid; grid-template-columns: 1fr 1fr; }
    .results li { border-top: 0; border-bottom: 1px solid var(--line); }
    .results li + li { border-top: 0; }
    .results li:nth-child(odd):not(.hint):not(.empty):not(.more) { border-right: 1px solid var(--line); }
    .results .hint, .results .empty, .results .more { grid-column: 1 / -1; }
    /* Deux colonnes qui s'écoulent chacune de haut en bas : aucun vide au milieu d'une colonne. */
    .cols { display: grid; grid-template-columns: .85fr 1.15fr; column-gap: 1.5rem; align-items: start;
      grid-template-areas: "a b" "src b"; grid-template-rows: auto 1fr; }
    .col-a { grid-area: a; }
    .col-b { grid-area: b; }
    .src { grid-area: src; margin-top: .75rem; }
    .head { flex-direction: column; align-items: stretch; gap: .625rem; }
    .photo { width: 100%; height: clamp(5.5rem, calc(5.5rem + (100vh - 600px) * .15), 12rem); }
    .warn { margin: .75rem 0 0; }
    .fiche h2 { font-size: 1.25rem; }
    .rep h3 { margin-top: 0; }
    .legend { font-size: .9rem; }
    .total { font-size: 1rem; }
    .ecarts h3 { margin-top: .875rem; }
    /* Fiche ouverte : l'introduction est masquée (le champ de recherche reste accessible) et le cadre épouse la fiche, sans vide autour. */
    .module.fiche-open > header, .module.fiche-open .count, .module.fiche-open label {
      position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .module.fiche-open .panel { flex: 0 1 auto; }
  }
  /* Colonne d'article étroite (600 à 719 px) : photo et écarts à gauche, répartition à droite, avertissement et source en bas sur toute la largeur. */
  @media (min-width: 600px) and (max-width: 719px) {
    .col-a, .col-b { display: contents; }
    .cols { grid-template-columns: 1fr 1.1fr; grid-template-areas: "head rep" "eco rep" "warn warn" "src src";
      grid-template-rows: auto 1fr auto auto; column-gap: 1.25rem; row-gap: .75rem; padding: .875rem 1rem 1rem; }
    .head { grid-area: head; gap: .5rem; }
    .photo { height: clamp(6.25rem, calc(6.25rem + (100vh - 600px) * .15), 10rem); }
    .fiche h2 { font-size: 1.15rem; }
    .where { font-size: .85rem; margin-top: 2px; }
    .rep { grid-area: rep; }
    .rep h3 { margin-bottom: .5rem; }
    .total { margin-bottom: .5rem; }
    .legend { margin-top: .625rem; gap: .375rem; }
    .verdict { margin-top: .75rem; }
    .note { margin-top: .5rem; line-height: 1.35; }
    .ecarts { grid-area: eco; }
    .ecarts h3 { margin: 0 0 .5rem; letter-spacing: 1.2px; }
    .stat { padding: .5rem .625rem; }
    .stat .v { font-size: 1.05rem; white-space: nowrap; }
    .stat .k, .stat .d { font-size: .75rem; }
    .warn { grid-area: warn; margin: .25rem 0 0; font-size: .8rem; line-height: 1.4; padding: .5rem .75rem; }
    .src { grid-area: src; margin-top: 0; font-size: .75rem; }
  }
  /* Desktop dans une iframe plus haute que 760 px : le texte et les éléments grossissent un peu avec la hauteur (1vh = 1 % de la hauteur de l'iframe),
     plafonnés selon la largeur. En dessous, la mise en page minimale tient dans 600 px sans ascenseur. */
  @media (min-width: 720px) and (min-height: 760px) {
    :root { --cap: 16.5px; }
    html { font-size: clamp(16px, calc(4px + 2vh), var(--cap)); }
    .module { max-width: 960px; }
    .cols { row-gap: 0; padding: 1.25rem 1.5rem 1.5rem; }
    .fiche h2 { font-size: 1.4rem; }
    .total { font-size: 1.05rem; }
    .legend { font-size: .95rem; gap: .5rem; }
    .bar { height: clamp(1.75rem, calc(1.75rem + (100vh - 760px) * .04), 2.25rem); }
    .stat { padding: clamp(.75rem, calc(.75rem + (100vh - 760px) * .03), 1.25rem) 1rem; }
    .stat .v { font-size: 1.3rem; }
    .verdict { background: var(--surface); border-radius: 8px; padding: .75rem 1rem; line-height: 1.35; font-size: 1.1rem; }
  }
  @media (min-width: 880px) and (min-height: 760px) { :root { --cap: 17px; } }
  @media (min-width: 960px) and (min-height: 760px) { :root { --cap: 18px; } }