/* tinteo.com : l'audiogramme (23 octobre 2026). Fond ivoire, une fréquence par rubrique, ronds rouges et croix bleues de la fiche d'examen. */
:root {
  --ivoire: #fbf8f1;
  --feuille: #ffffff;
  --encre: #1c2a31;
  --gris: #5a676d;
  --trait: #e2e4e0;
  --reglure: #ecebe4;
  --sarcelle: #0d5f69;
  --sarcelle-clair: #e3f0ef;
  --droite: #c43a2f;
  --gauche: #2456a6;
  --titre: 'Kodchasan', 'Trebuchet MS', sans-serif;
  --texte: 'Signika', 'Segoe UI', sans-serif;
  --mono: 'Lekton', 'Consolas', monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--encre); background: var(--ivoire); font: 400 18px/1.65 var(--texte); }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
.saut { position: absolute; left: -999px; }
.saut:focus { left: 16px; top: 16px; background: #fff; padding: 8px 12px; z-index: 9; }

.repere { width: 18px; height: 18px; flex: none; fill: none; stroke-width: 2.6; stroke-linecap: round; }
.repere--o { stroke: var(--droite); }
.repere--x { stroke: var(--gauche); }

/* --- l'en-tête : la cabine */
.cabine { background: var(--feuille); border-bottom: 1px solid var(--trait); }
.cabine__in { max-width: 1200px; margin: 0 auto; padding: 22px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.marque { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin: 0; }
.ondes { width: 54px; height: 54px; flex: none; fill: none; stroke: var(--sarcelle); stroke-width: 3.4; stroke-linecap: round; }
.ondes circle { fill: var(--droite); stroke: none; }
.marque > span { display: flex; flex-direction: column; }
.marque__nom { font: 700 38px/1 var(--titre); letter-spacing: .01em; color: var(--sarcelle); }
.marque__sous { font: 700 14px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .18em; color: var(--gris); margin-top: 6px; }
.frequences { display: flex; flex-wrap: wrap; gap: 10px; }
.frequence { display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px 14px 9px; border: 1.5px solid var(--trait); border-radius: 10px; text-decoration: none; background: var(--feuille); }
.frequence .repere { grid-row: 1 / 3; }
.frequence__hz { font: 700 12.5px/1 var(--mono); color: var(--gris); letter-spacing: .06em; }
.frequence__nom { font: 600 17px/1.2 var(--titre); }
.frequence--site .frequence__hz, .frequence--site .frequence__nom { grid-column: 1 / -1; }
.frequence:hover, .frequence[aria-current] { border-color: var(--sarcelle); background: var(--sarcelle-clair); }

main { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section-t { font: 700 27px/1.2 var(--titre); margin: 0 0 18px; color: var(--sarcelle); }

/* --- le relevé */
.releve { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px; padding: 38px 0 34px; align-items: start; }
.releve > * { min-width: 0; }
.releve__sur { font: 700 14px/1 var(--mono); text-transform: uppercase; letter-spacing: .2em; color: var(--droite); margin: 6px 0 14px; }
.releve__mot h1 { font: 700 clamp(25px, 2.7vw, 34px)/1.22 var(--titre); margin: 0 0 16px; overflow-wrap: anywhere; }
.releve__mot p:last-child { color: var(--gris); margin: 0; }
.audiogramme { margin: 0; background: var(--feuille); border: 1px solid var(--trait); border-radius: 14px; padding: 18px 20px 20px; box-shadow: 0 8px 24px rgba(28, 42, 49, .06); }
.audiogramme__t { font: 700 13.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--gris); margin-bottom: 10px; }
.audiogramme__grille { position: relative; height: 330px; margin-top: 34px; border: 1px solid var(--trait); border-radius: 6px;
  background-image: linear-gradient(var(--reglure) 1px, transparent 1px); background-size: 100% 10%; }
.audiogramme__trace { position: absolute; inset: 0; width: 100%; height: 100%; }
.audiogramme__trace polyline { fill: none; stroke: #9fb9bc; stroke-width: 2; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.audiogramme__cols { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.col { position: relative; border-left: 1px solid var(--reglure); min-width: 0; }
.col:first-child { border-left: 0; }
.col__hz { position: absolute; top: -30px; left: 0; right: 0; text-align: center; font: 700 14px/1 var(--mono); color: var(--encre); }
.col__hz small { font-size: 11px; color: var(--gris); margin-left: 2px; }
.col__point { z-index: 1; position: absolute; top: var(--y); left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--feuille); }
.col__point .repere { width: 24px; height: 24px; stroke-width: 3; }
.col__nom, .col__etat { position: absolute; left: 50%; transform: translateX(-50%); z-index: 1; width: max-content; max-width: calc(100% + 18px); text-align: center; background: var(--feuille); padding: 0 4px; border-radius: 4px; }
.col__nom { top: calc(var(--y) + 19px); font: 600 14px/1.2 var(--titre); }
.col__etat { top: calc(var(--y) + 38px); font: 700 11.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--gris); }
.col--ouverte .col__nom a { color: var(--sarcelle); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.col--ouverte .col__etat { color: var(--sarcelle); }
.col--ouverte .col__point { box-shadow: 0 0 0 5px var(--sarcelle-clair); }
.audiogramme__legende { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; font-size: 15.5px; line-height: 1.45; color: var(--gris); }
.audiogramme__legende li { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.audiogramme__legende .repere { margin-top: 3px; }
.audiogramme__legende strong { display: block; color: var(--encre); font: 600 16px/1.3 var(--titre); }
.audiogramme__legende a { color: var(--sarcelle); }
.audiogramme__legende em { font: 700 11.5px/1 var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); margin-left: 4px; }

/* --- à l'écoute : les pistes */
.a-lecoute { padding: 8px 0 34px; }
.pistes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; }
.pistes--une { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.piste { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; align-items: center; height: 100%; padding: 12px; text-decoration: none; background: var(--feuille); border: 1px solid var(--trait); border-radius: 12px; }
.piste__img, .vignette__img { display: block; overflow: hidden; border-radius: 8px; background: var(--sarcelle-clair); }
.piste__img img { width: 210px; height: 132px; object-fit: cover; }
.piste__c { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.piste__rub { display: inline-flex; align-items: center; gap: 7px; font: 700 13px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--gris); text-decoration: none; }
.piste__t { font: 600 19px/1.3 var(--titre); overflow-wrap: anywhere; }
.piste__d { font: 400 14.5px/1.3 var(--mono); color: var(--gris); }
.piste:hover .piste__t, .vignette:hover .vignette__t { color: var(--sarcelle); }
.vignettes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.vignette { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 10px 10px 14px; text-decoration: none; background: var(--feuille); border: 1px solid var(--trait); border-radius: 12px; }
.vignette__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.vignette__t { font: 600 18px/1.3 var(--titre); overflow-wrap: anywhere; }

/* --- avant tout */
.avant-tout { margin: 6px 0 44px; padding: 24px 26px; background: var(--feuille); border: 1px solid var(--trait); border-top: 4px solid var(--droite); border-radius: 12px; }
.avant-tout .section-t { color: var(--droite); font-size: 23px; margin-bottom: 12px; }
.avant-tout__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.avant-tout__cols p { margin: 0; min-width: 0; font-size: 16.5px; }

/* --- rubrique */
.titre-freq { display: flex; gap: 22px; align-items: center; margin: 34px 0 26px; padding: 22px 26px; background: var(--feuille); border: 1px solid var(--trait); border-radius: 14px; }
.titre-freq > div { min-width: 0; }
.titre-freq__hz { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 12px 16px; border-radius: 10px; background: var(--sarcelle-clair); font: 700 18px/1 var(--mono); color: var(--sarcelle); }
.titre-freq h1 { font: 700 clamp(30px, 4vw, 42px)/1.1 var(--titre); margin: 0 0 6px; color: var(--sarcelle); }
.titre-freq p { margin: 0; color: var(--gris); }

/* --- article : le compte rendu */
.compte-rendu { max-width: 820px; margin: 32px auto 16px; padding: 34px 42px 30px; background: var(--feuille); border: 1px solid var(--trait); border-radius: 14px; }
.compte-rendu__tete h1 { font: 700 clamp(28px, 3.3vw, 40px)/1.18 var(--titre); margin: 14px 0 12px; overflow-wrap: anywhere; }
.compte-rendu__meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 22px; font: 400 15px/1.4 var(--mono); color: var(--gris); }
.compte-rendu__img { margin: 0 0 26px; }
.compte-rendu__img img { border-radius: 10px; }
.compte-rendu__avis { margin: 30px 0 0; padding: 14px 18px; background: var(--sarcelle-clair); border-left: 4px solid var(--sarcelle); border-radius: 6px; font-size: 15.5px; color: var(--encre); }
.texte { overflow-wrap: anywhere; }
.texte h2 { font: 700 26px/1.25 var(--titre); margin: 1.7em 0 .5em; color: var(--sarcelle); }
.texte h3 { font: 600 20px/1.3 var(--titre); margin: 1.4em 0 .4em; }
.texte a { color: var(--gauche); text-underline-offset: 3px; }
.texte a:hover { color: var(--droite); }
.texte img { border-radius: 8px; margin: 1em 0; }
.texte table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 16px; display: block; overflow-x: auto; }
.texte th, .texte td { border: 1px solid var(--trait); padding: 8px 10px; text-align: left; vertical-align: top; }
.texte th { background: var(--ivoire); }
.texte blockquote { margin: 1.4em 0; padding: 12px 18px; background: var(--ivoire); border-left: 4px solid var(--gauche); }
/* éléments de l'ancien thème restés dans le texte d'origine : sommaire mis en forme ; boutons sans effet masqués (notation et boîte d'auteur retirées du texte) */
.texte .ez-toc-title-toggle, .texte .eztoc-hide { display: none; }
.texte #ez-toc-container { margin: 1.4em 0; padding: 14px 20px; background: var(--ivoire); border: 1px solid var(--trait); border-radius: 10px; }
.texte .ez-toc-title { margin: 0 0 6px; font: 700 14px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--gris); }
.texte #ez-toc-container ul { margin: 0; padding-left: 1.2em; }
.texte #ez-toc-container a { color: var(--encre); text-decoration: none; }
.texte #ez-toc-container a:hover { color: var(--sarcelle); text-decoration: underline; }
.texte .yarpp-related { margin-top: 2em; padding-top: 1em; border-top: 1px dashed var(--trait); }
.texte .yarpp-related h3 { font-size: 17px; }
.texte .yarpp-thumbnails-horizontal { display: flex; flex-wrap: wrap; gap: 14px; }
.texte .yarpp-thumbnail { display: flex; flex-direction: column; gap: 6px; max-width: 170px; text-decoration: none; color: var(--encre); font-size: 14.5px; line-height: 1.35; }
.texte .yarpp-thumbnail img { margin: 0; width: 150px; height: 150px; object-fit: cover; }

/* --- formulaire */
.formulaire { margin-top: 26px; padding: 20px 22px; background: var(--ivoire); border: 1px solid var(--trait); border-radius: 12px; }
.formulaire label { display: block; font-weight: 600; margin-bottom: 4px; }
.formulaire input, .formulaire textarea { width: 100%; font: inherit; padding: 9px 11px; border: 1px solid #c9ccc6; border-radius: 6px; background: #fff; }
.formulaire button { font: 700 17px/1 var(--titre); background: var(--sarcelle); color: #fff; border: 0; border-radius: 8px; padding: 13px 24px; cursor: pointer; }
.formulaire button:hover { background: var(--gauche); }
.formulaire__ok { background: var(--sarcelle-clair); padding: 10px 14px; border-radius: 6px; }
.formulaire__piege { position: absolute; left: -9999px; }

/* --- pied : le bas de la fiche d'examen */
.fiche { margin-top: 30px; background: var(--feuille); border-top: 1px solid var(--trait); }
.fiche__in { max-width: 1200px; margin: 0 auto; padding: 32px 24px 18px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); gap: 30px; }
.fiche__in > * { min-width: 0; }
.fiche .marque__nom { font-size: 30px; }
.fiche .ondes { width: 42px; height: 42px; }
.fiche__nom > p:last-child { color: var(--gris); font-size: 16px; }
.fiche__t { font: 700 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .16em; color: var(--gris); margin: 6px 0 12px; }
.fiche ul { list-style: none; margin: 0; padding: 0; }
.fiche li { margin: 0 0 8px; }
.fiche li a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.fiche li a:hover { text-decoration: underline; }
.fiche__urgence p { margin: 0 0 8px; font-size: 16px; }
.fiche__urgence strong { color: var(--droite); font-family: var(--mono); font-size: 18px; }
.fiche__avis { max-width: 1200px; margin: 0 auto; padding: 14px 24px 26px; font-size: 15px; color: var(--gris); border-top: 1px dashed var(--trait); }

@media (max-width: 1000px) {
  .releve { grid-template-columns: minmax(0, 1fr); }
  .pistes { grid-template-columns: minmax(0, 1fr); }
  .vignettes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .avant-tout__cols { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .fiche__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fiche__nom { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .cabine__in, main, .fiche__in, .fiche__avis { padding-left: 16px; padding-right: 16px; }
  .marque__nom { font-size: 32px; }
  .ondes { width: 44px; height: 44px; }
  .frequence { padding: 7px 11px; }
  .audiogramme { padding: 14px 12px 16px; }
  .audiogramme__grille { height: 220px; }
  .col__hz { font-size: 11.5px; }
  .col__hz small { display: none; }
  .col__nom, .col__etat { display: none; }
  .audiogramme__legende { grid-template-columns: minmax(0, 1fr); }
  .piste { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
  .piste__img img { width: 110px; height: 80px; }
  .piste__t { font-size: 17px; }
  .vignettes { grid-template-columns: minmax(0, 1fr); }
  .titre-freq { flex-direction: column; align-items: flex-start; padding: 18px; }
  .compte-rendu { padding: 22px 16px; margin-top: 18px; }
  .fiche__in { grid-template-columns: minmax(0, 1fr); }
}