/* dietrichcarebus.fr (AutoConseil) : un tableau de bord. Graphite, rouge signal, ambre voyant. */
:root {
  --graphite: #1e2226; --graphite-2: #2b3036; --acier: #eef0f2; --blanc: #ffffff; --rouge: #e23a2e; --rouge-f: #b02419;
  --ambre: #ffb020; --encre: #16191c; --gris: #5d656d; --filet: #d9dde1;
  --titre: 'Titillium Web', 'Arial Narrow', sans-serif; --texte: 'Heebo', 'Segoe UI', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--acier); color: var(--encre); font: 400 1.06rem/1.72 var(--texte); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rouge-f); text-underline-offset: .18em; }
a:hover { color: var(--rouge); }
:focus-visible { outline: 3px solid var(--ambre); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 700; line-height: 1.15; }
.saut { position: absolute; left: -999px; } .saut:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; z-index: 9; }
.largeur { width: min(100% - 2rem, 74rem); margin-inline: auto; }
.compteur { width: 2.2rem; height: 1.6rem; fill: none; stroke: var(--rouge); stroke-width: 3.5; stroke-linecap: round; }
.compteur path + path { stroke: var(--ambre); }
.compteur circle { fill: var(--ambre); stroke: none; }

/* cockpit */
.cockpit { background: var(--graphite); color: #fff; }
.cockpit__z { width: min(100% - 2rem, 74rem); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; padding: 1rem 0; }
.logo { display: inline-flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; font: 700 1.7rem/1 var(--titre); margin: 0; }
.logo b { color: var(--rouge); }
.logo:hover { color: #fff; }
.cockpit__d { margin: 0; color: #aab2ba; font-size: .9rem; }
.commandes { background: var(--graphite-2); border-top: 1px solid rgba(255,255,255,.08); border-bottom: 3px solid var(--rouge); }
.commandes__z { width: min(100% - 2rem, 74rem); margin-inline: auto; display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; padding: .5rem 0; }
.commandes__z::-webkit-scrollbar { display: none; }
.commandes a { flex: none; color: #dfe4e8; text-decoration: none; font: 600 .92rem/1 var(--titre); text-transform: uppercase; letter-spacing: .05em; padding: .55rem .8rem; border-radius: 4px; }
.commandes a:hover { background: rgba(255,255,255,.08); color: #fff; }
.commandes a[aria-current] { background: var(--rouge); color: #fff; }

/* accueil */
.tableau { display: grid; gap: 2rem; padding: 2.5rem 0; align-items: center; }
@media (min-width: 960px) { .tableau { grid-template-columns: .9fr 1.1fr; } }
.voyant { display: inline-block; font: 700 .78rem/1 var(--titre); text-transform: uppercase; letter-spacing: .1em; color: #fff; background: var(--rouge); padding: .35rem .55rem; border-radius: 3px; text-decoration: none; }
.voyant:hover { color: #fff; background: var(--rouge-f); }
.voyant--ambre { background: var(--ambre); color: var(--encre); }
.tableau h1 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.4rem); margin: .9rem 0 1rem; }
.tableau__t p:last-child { color: var(--gris); font-size: 1.12rem; margin: 0; }
.jauge { display: flex; align-items: center; gap: .7rem; font-size: 1.45rem; text-transform: uppercase; letter-spacing: .03em; margin: 2rem 0 1.2rem; }
.jauge::after { content: ""; flex: 1; height: 6px; background: linear-gradient(90deg, var(--ambre) 0 30%, var(--filet) 30%); border-radius: 3px; }
.grille { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); margin-bottom: 2.5rem; }
.essai { background: var(--blanc); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; border-bottom: 4px solid var(--graphite); }
.essai:hover { border-bottom-color: var(--rouge); }
.essai__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.essai__c { padding: 1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.essai__c .voyant { align-self: flex-start; }
.essai h3 { margin: 0; font-size: 1.25rem; flex: 1; }
.essai h3 a { color: var(--encre); text-decoration: none; }
.essai h3 a:hover { color: var(--rouge-f); }
.essai p { margin: 0; color: var(--gris); }
.essai__m { font-size: .85rem; }
.essai--une { border-bottom-width: 6px; }
.essai--une h3 { font-size: 1.7rem; }
.cadrans { list-style: none; margin: 0 0 3rem; padding: 0; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); }
.cadrans a { display: flex; align-items: center; gap: .7rem; background: var(--graphite); color: #fff; border-radius: 6px; padding: .8rem 1rem; text-decoration: none; height: 100%; }
.cadrans a:hover { background: var(--rouge); }
.cadrans b { display: grid; place-items: center; min-width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 2px solid var(--ambre); color: var(--ambre); font: 700 1rem/1 var(--titre); }
.cadrans span { font: 600 1rem/1.2 var(--titre); }

/* article */
.fiche { padding: 1.8rem 0 2.5rem; }
.fil { display: flex; gap: .45rem; font-size: .88rem; color: var(--gris); }
.fil a { color: var(--gris); }
.fiche h1 { font-size: clamp(1.9rem, 1.3rem + 2.5vw, 3rem); margin: .8rem 0 .8rem; max-width: 30ch; }
.fiche__m { margin: 0 0 1.5rem; color: var(--gris); font-size: .95rem; }
.fiche__img { margin: 0 0 2rem; border-bottom: 6px solid var(--rouge); }
.fiche__img img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.fiche__z { display: grid; gap: 2.5rem; }
@media (min-width: 1000px) { .fiche__z { grid-template-columns: minmax(0, 46rem) 17rem; justify-content: space-between; } }
.fiche--fixe .fiche__texte { max-width: 46rem; }
.fiche__texte > * { margin-block: 0 1.1em; }
.fiche__texte h2 { font-size: 1.65rem; margin: 2em 0 .6em; padding-top: .5em; border-top: 2px solid var(--graphite); }
.fiche__texte h3 { font-size: 1.25rem; margin: 1.6em 0 .5em; }
.fiche__texte li { margin-bottom: .4em; }
.fiche__texte li::marker { color: var(--rouge); }
.fiche__texte blockquote { margin-inline: 0; background: #fff6e3; border-left: 6px solid var(--ambre); padding: .9rem 1.2rem; }
.fiche__texte blockquote > :last-child { margin-bottom: 0; }
.fiche__texte table { width: 100%; border-collapse: collapse; background: var(--blanc); font-size: .97rem; display: block; overflow-x: auto; }
.fiche__texte th { background: var(--graphite); color: #fff; text-align: left; font-family: var(--titre); }
.fiche__texte th, .fiche__texte td { padding: .65rem .85rem; border-bottom: 1px solid var(--filet); vertical-align: top; }
.boite { align-self: start; background: var(--graphite); color: #dfe4e8; border-radius: 8px; padding: 1.2rem; }
@media (min-width: 1000px) { .boite { position: sticky; top: 1rem; } }
.boite__t { font: 700 1rem/1 var(--titre); text-transform: uppercase; letter-spacing: .06em; color: var(--ambre); margin: 0 0 .8rem; }
.boite ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.boite li { border-top: 1px solid rgba(255,255,255,.1); padding: .6rem 0; line-height: 1.35; font-size: .95rem; }
.boite li a { color: #fff; text-decoration: none; }
.boite li a:hover { color: var(--ambre); }
.boite__tout { color: var(--ambre); font-size: .9rem; }
.rubrique-tete { padding: 2.4rem 0 1.6rem; }
.rubrique-tete h1 { font-size: clamp(2rem, 1.4rem + 2.5vw, 3rem); margin: .8rem 0 .5rem; text-transform: uppercase; }
.rubrique-tete p { margin: 0; color: var(--gris); }

/* pied */
.garage { background: var(--graphite); color: #aab2ba; margin-top: 2rem; }
.garage__z { width: min(100% - 2rem, 74rem); margin-inline: auto; display: grid; gap: 2rem; padding: 2.8rem 0 2rem; }
@media (min-width: 800px) { .garage__z { grid-template-columns: 2fr 1fr 1fr; } }
.logo--pied { margin-bottom: .9rem; font-size: 1.4rem; }
.garage p { margin: 0; line-height: 1.6; max-width: 32rem; }
.garage nav { display: flex; flex-direction: column; gap: .45rem; }
.garage nav a { color: #fff; text-decoration: none; }
.garage nav a:hover { color: var(--ambre); }
.garage__t { font: 700 .85rem/1 var(--titre) !important; text-transform: uppercase; letter-spacing: .1em; color: var(--rouge) !important; margin-bottom: .4rem !important; }
.garage__bas { width: min(100% - 2rem, 74rem); margin: 0 auto !important; padding: 1rem 0 1.5rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .88rem; max-width: none !important; }
.garage__bas a { color: #fff; }
body { overflow-wrap: break-word; }
.fiche__z > * { min-width: 0; }