.m10{background:#FBF6EA;color:#2A2018;font-family:'Fraunces',Georgia,serif}
.m10 .tag{background:#E7A72C;color:#2A2018}
.m10 .hd{text-align:center;margin-bottom:.8em}
.m10 .hd h3{font:700 2.3em/1 'Fraunces',Georgia,serif;letter-spacing:-.01em;margin:0}
.m10 .hd .bl{font:italic 500 .88em/1.4 'Cormorant Garamond',serif;color:#8A7B60;margin:.2em 0 0;font-size:max(calc(2.2 * var(--u)),.88em)}
.m10 .hd .dt{font:600 .5em/1 'IBM Plex Mono',monospace;letter-spacing:.26em;
  text-transform:uppercase;color:#C9891C;margin:.6em 0 0;font-size:max(calc(2.2 * var(--u)),.5em)}
.m10 .hero{flex:none;width:16.5em;height:16.5em;margin:0 auto 1.8em;border-radius:50%;
  background:radial-gradient(120% 150% at 50% 22%,#F4C24E,#E7A72C);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:2em;gap:0}
.m10 .hero .tx{display:block}
.m10 .hero .kd{display:block;font:600 .5em/1 'IBM Plex Mono',monospace;letter-spacing:.28em;
  text-transform:uppercase;color:#7A5418;margin-bottom:.8em}.m10 .hero b:not(.pdt){display:block;font:600 1.02em/1.3 'Fraunces',Georgia,serif;color:#2A2018}
.m10 .hero span{display:block;font:italic 500 .8em/1.3 'Cormorant Garamond',serif;
  color:#6E4E1A;margin-top:.3em}
.m10 .hero i{font:700 1.9em/1 'Fraunces',Georgia,serif;font-style:normal;color:#2A2018;
  margin-top:.35em}
.m10 .grp h4{display:flex;align-items:center;
  font:600 .52em/1 'IBM Plex Mono',monospace;letter-spacing:.26em;text-transform:uppercase;
  color:#C9891C;margin:0 0 .2em;font-size:max(calc(2.5 * var(--u)),.52em)}
.m10 .ln{font-weight:500;line-height:1.5}
.m10 .ln .l{opacity:.4}
.m10 .ln .p{font-weight:600;color:#C9891C}
.m10 .dsc{font:italic 500 .74em/1.35 'Cormorant Garamond',serif;color:#8A7B60;opacity:1;font-size:max(calc(2.5 * var(--u)),.74em)}
.m10 .note{font:500 .58em/1.5 'IBM Plex Mono',monospace;letter-spacing:.04em;color:#6E5F48;
  text-align:center;font-size:max(calc(2.2 * var(--u)),.58em)}
.m10 .ft{margin-top:.8em;padding-top:.6em;border-top:1px solid rgba(42,32,24,.16);
  text-align:center}
.m10 .ft .ad{font:500 .68em/1.5 'Fraunces',Georgia,serif;font-size:max(calc(2.2 * var(--u)),.68em)}
.m10 .ft .hr{font-family:'Cormorant Garamond',serif;color:#8A7B60}
.m10 .ft .tt{font:400 .5em/1.6 'IBM Plex Mono',monospace;letter-spacing:.06em;
  color:#8A7B60;margin-top:.35em;font-size:max(calc(2.2 * var(--u)),.5em)}
.m10.d-disque-lateral{display:grid;grid-template-columns:auto 1fr;
  grid-template-rows:auto 1fr auto auto;column-gap:calc(var(--gap) * var(--u))}
.m10.d-disque-lateral .hd{grid-column:1 / -1}
.m10.d-disque-lateral .hero{grid-row:2;align-self:center;margin:0 .4em 0 0;
  width:14em;height:14em}
.m10.d-disque-lateral .bd{grid-row:2}
.m10.d-disque-lateral .note,.m10.d-disque-lateral .ft{grid-column:1 / -1}
.m10.d-disque-compact .hero{width:13em;height:13em;padding:1.4em}
.m10.d-disque-compact .hero i{font-size:1.5em}
.m10.d-disque-etroit .hero{width:12.4em;height:12.4em;padding:1.2em}
.m10.d-disque-etroit .hero b{font-size:.9em}
.m10.d-disque-etroit .hero i{font-size:1.5em}
.m10.d-disque-etroit .hd h3{font-size:1.8em}
.m10 .lgd,.m10 .mnt,.m10 .dcl{text-align:center}
.m10 .cls{justify-content:center}
.m10 .grp:has(>.fp)>h4{text-indent:.26em}

/* LE TITRE DE LA FORMULE SE CENTRE, COMME PARTOUT AILLEURS. `moteur.css` centre
   le titre d'une section a prix de formule par `text-align`, et ca ne marche pas
   ici: `.m10 .grp h4` est une BOITE FLEX (elle porte une pastille en
   `::before`), et `text-align` n'aligne pas des elements flex. Il fallait donc
   `justify-content`. C'est le meme dessin que m37 et m51, cites par le owner. */
.m10 .grp:has(>.fp)>h4{justify-content:center}